/* sg_jambatan.css — gaya jambatan standard untuk game import (G108). Semua kelas berawalan .sgj- supaya
   UI asal game tidak terjejas. Fon mengikut game (Lilita dipaksa oleh CSS game). Popup = helaian bawah seragam + bar kepala + X 34px (Bhg 36/36A). */
.sgj-modal{--sgj-latar:#0b1a2b;--sgj-panel:#11263d;--sgj-garis:rgba(255,255,255,.14);--sgj-teks:#f1f5f9;--sgj-redup:#b6c4d4;--sgj-hijau:#16a34a;--sgj-emas:#f5b301;
  position:fixed;inset:0;z-index:2147482000;display:flex;align-items:flex-end;justify-content:center;padding:4px 4px 0;background:rgba(3,10,20,.62);
  font:500 15px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--sgj-teks);letter-spacing:0;text-shadow:none;touch-action:auto;-webkit-text-stroke:0}
.sgj-modal *{box-sizing:border-box;font-family:inherit;-webkit-text-stroke:0;text-shadow:none}
@media (min-width:900px) and (orientation:landscape),(min-width:1024px) and (pointer:fine){.sgj-modal{padding:24px 24px 0}}
.sgj-kotak{width:100%;max-width:560px;max-height:calc(100dvh - 4px);display:flex;flex-direction:column;background:var(--sgj-latar);border:1px solid var(--sgj-garis);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.45);animation:sgj-naik .22s ease-out}
.sgj-modal.lebar .sgj-kotak{max-width:760px}
@keyframes sgj-naik{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.sgj-kepala{flex:none;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--sgj-garis);background:var(--sgj-panel);border-radius:18px 18px 0 0}
.sgj-kepala h2{flex:1;margin:0;font-size:1.05rem;font-weight:800;display:flex;align-items:center;gap:8px;color:var(--sgj-teks)}
.sgj-x{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--sgj-garis);background:rgba(255,255,255,.08);color:var(--sgj-teks);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.sgj-x:hover{background:rgba(255,255,255,.18)}
.sgj-badan{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:14px 14px max(18px,env(safe-area-inset-bottom))}
.sgj-svg{width:1.15em;height:1.15em;fill:currentColor;flex:none;vertical-align:-.2em}
.sgj-ikon-besar{width:56px;height:56px;color:var(--sgj-emas);display:block;margin:0 auto 6px}
.sgj-redup{color:var(--sgj-redup);margin:4px 0 10px}
.sgj-justify{text-align:justify}
.sgj-tengah{text-align:center}
.sgj-jarak{margin-top:10px}
.sgj-nota{color:var(--sgj-redup);font-size:.8rem;margin:10px 0 0;text-align:center}
.sgj-nota a,.sgj-auth a{color:#7dd3fc}
.sgj-ralat{color:#fecaca;background:rgba(220,38,38,.18);border:1px solid rgba(248,113,113,.4);border-radius:10px;padding:8px 10px;margin:8px 0}
.sgj-sub{margin:14px 0 4px;font-size:.98rem}
/* butang */
.sgj-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 16px;border-radius:12px;border:1px solid var(--sgj-garis);background:#1e3a5a;color:#fff;font-weight:700;font-size:.92rem;cursor:pointer;text-decoration:none;line-height:1.2}
.sgj-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.sgj-btn:disabled{opacity:.55;cursor:default;transform:none}
.sgj-btn.utama{background:var(--sgj-hijau);border-color:#22c55e}
.sgj-btn.kelabu{background:#334155}
.sgj-btn.penuh{width:100%;margin-top:10px}
.sgj-baris-btn{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.sgj-baris-btn.kanan{justify-content:flex-end}
/* akaun */
.sgj-auth,.sgj-akaun{text-align:center;max-width:420px;margin:0 auto}
.sgj-auth h3,.sgj-akaun h3{margin:4px 0 2px;font-size:1.15rem}
.sgj-auth-logo{width:64px;height:64px;border-radius:16px;display:block;margin:0 auto 6px;object-fit:cover}
.sgj-btn-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;margin-top:8px;border-radius:12px;border:1px solid #cbd5e1;background:#fff;color:#1f2937;font-weight:700;font-size:.95rem;cursor:pointer}
.sgj-btn-google svg{width:20px;height:20px}
.sgj-atau{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--sgj-redup);font-size:.82rem}
.sgj-atau::before,.sgj-atau::after{content:"";flex:1;height:1px;background:var(--sgj-garis)}
.sgj-tab2{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.06);margin-bottom:10px}
.sgj-tab2 button{flex:1;min-height:36px;border:0;border-radius:9px;background:transparent;color:var(--sgj-redup);font-weight:700;cursor:pointer}
.sgj-tab2 button.aktif{background:var(--sgj-hijau);color:#fff}
.sgj-borang label,.sgj-medan{display:block;text-align:left;font-size:.85rem;color:var(--sgj-redup);margin-bottom:8px}
.sgj-borang input,.sgj-medan input{display:block;width:100%;margin:4px 0 0;text-align:left;user-select:text;-webkit-user-select:text;font-size:16px;padding:11px 12px;border-radius:12px;border:1px solid var(--sgj-garis);background:#081423;color:#fff;outline:none}
.sgj-borang input:focus,.sgj-medan input:focus{border-color:#22c55e}
.sgj-ts{display:flex;justify-content:center;margin:6px 0}
.sgj-akuan{display:flex;gap:8px;align-items:flex-start;font-size:.86rem;text-align:left;margin:6px 0}
.sgj-akuan input{width:18px;height:18px;margin:2px 0 0;padding:0;flex:none}
/* kedai */
.sgj-grid-pek{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.sgj-pek{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:12px 10px;border-radius:14px;background:var(--sgj-panel);border:1px solid var(--sgj-garis)}
.sgj-pek.emas{border-color:rgba(245,179,1,.6);background:linear-gradient(180deg,#2a2410,#11263d)}
.sgj-pek .sgj-redup{font-size:.8rem;margin:0 0 6px;flex:1}
.sgj-pek-ikon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#e0f2fe,#38bdf8);color:#075985}
.sgj-pek-ikon .sgj-svg{width:28px;height:28px}
/* ranking */
.sgj-rk-tab{display:flex;gap:6px;margin-bottom:10px}
.sgj-rk-tab button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border-radius:12px;border:1px solid var(--kt);background:color-mix(in srgb,var(--kt) 18%,transparent);color:#fff;font-weight:700;cursor:pointer}
.sgj-rk-tab button:hover{background:color-mix(in srgb,var(--kt) 34%,transparent);transform:translateY(-2px)}
.sgj-rk-tab button.aktif{background:var(--kt)}
.sgj-rk-info{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.sgj-cip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--sgj-garis);font-size:.8rem;font-weight:700}
.sgj-cip.emas{background:rgba(245,179,1,.16);border-color:rgba(245,179,1,.45);color:#fde68a}
.sgj-peti{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(245,179,1,.14);border:1px solid rgba(245,179,1,.5);margin-bottom:10px}
.sgj-peti>span{flex:1;font-size:.88rem}
.sgj-peti .sgj-svg{width:28px;height:28px;color:var(--sgj-emas)}
.sgj-pod{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;padding:30px 4px 6px;margin-bottom:8px;border-radius:16px;background:radial-gradient(ellipse at 50% 0,rgba(253,230,138,.22),transparent 65%)}
.sgj-pod-lajur{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0;min-width:0}
.sgj-pod-no{font-weight:900;font-size:1.1rem;color:#fde68a}
.sgj-pod-lajur.p1 .sgj-av{box-shadow:0 0 0 4px #f5b301,0 0 22px rgba(245,179,1,.6)}
.sgj-pod-lajur.p2 .sgj-av{box-shadow:0 0 0 3px #cbd5e1}
.sgj-pod-lajur.p3 .sgj-av{box-shadow:0 0 0 3px #d97706}
.sgj-pod-alas{display:block;width:90%;height:16px;border-radius:50%;background:radial-gradient(ellipse,#fde68a,#b45309);margin-top:-8px}
.sgj-pod-lajur.p1 .sgj-pod-alas{animation:sgj-denyut 1.8s ease-in-out infinite}
@keyframes sgj-denyut{50%{filter:brightness(1.35)}}
.sgj-pod-tag{display:flex;flex-direction:column;align-items:center;max-width:100%;text-align:center}
.sgj-pod-tag b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.sgj-pod-tag span{font-size:.75rem;color:var(--sgj-redup)}
.sgj-pod-bar{display:block;width:80%;height:5px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}
.sgj-pod-bar i{display:block;height:100%;background:var(--sgj-emas)}
.sgj-av{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#0f766e,#1d4ed8);color:#fff;font-weight:800}
.sgj-av img{width:100%;height:100%;object-fit:cover}
.sgj-baris{width:100%;display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 10px;margin-top:6px;border-radius:12px;border:1px solid var(--sgj-garis);background:var(--sgj-panel);color:inherit;cursor:pointer;text-align:left;font-size:.9rem}
.sgj-baris em{width:28px;font-style:normal;font-weight:800;color:var(--sgj-redup);text-align:center}
.sgj-baris span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgj-baris.saya{border-color:#22c55e;background:rgba(22,163,74,.2)}
.sgj-rs{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-top:6px;border-radius:12px;background:var(--sgj-panel);border:1px solid var(--sgj-garis)}
.sgj-rs.ini{border-color:var(--sgj-emas)}
.sgj-rs img{width:42px;height:42px;border-radius:10px;flex:none}
.sgj-rs>div{flex:1;min-width:0;display:flex;flex-direction:column}
.sgj-rs b{font-size:.92rem}
.sgj-rs b em{font-style:normal;font-size:.72rem;color:var(--sgj-emas);margin-left:4px}
.sgj-rs span{font-size:.78rem;color:var(--sgj-redup)}
.sgj-pa{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.sgj-pa h3{margin:0}
.sgj-pa h3 em{font-style:normal;font-size:.72rem;color:#22c55e}
.sgj-pa p{margin:2px 0}
/* toast */
.sgj-toast{position:fixed;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);z-index:2147483000;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:min(92vw,520px)}
.sgj-toast div{display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:12px;background:rgba(8,20,35,.94);color:#fff;border:1px solid rgba(255,255,255,.18);font:600 14px/1.35 Inter,system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:sgj-naik .2s ease-out;text-align:center}
/* joystick G3 (telefon) */
.sgj-joy{position:fixed;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));z-index:2147481000;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,.06));border:2px solid rgba(255,255,255,.45);touch-action:none;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none}
.sgj-joy[hidden]{display:none}
.sgj-joy-tombol{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:none;transition:transform .05s}
html.sgj-ada-modal .sgj-joy{display:none}
@media (prefers-reduced-motion:reduce){.sgj-kotak,.sgj-toast div,.sgj-pod-lajur.p1 .sgj-pod-alas{animation:none}}