/* ==========================================================================
   sg_game.css — ENJIN GAME KONGSI SistemGuru (_rujukan/STANDARD-GAME.md)
   Shell skrin penuh, HUD, joystick MOBA, butang aksi, nav game, panel,
   kedai, ranking, modal. Tema setiap game ditetapkan melalui pemboleh ubah
   --g-* pada :root dalam main.html game itu.
   ========================================================================== */
:root{
  --g-latar:#0b1a2b; --g-latar2:#12324a; --g-panel:#132a40; --g-panel2:#1b3a57;
  --g-garis:rgba(255,255,255,.14); --g-teks:#f4f7fb; --g-redup:#a9bdd1;
  --g-utama:#059669; --g-utama2:#065f46; --g-emas:#FBBF24; --g-emas2:#D97706;
  --g-permata:#38BDF8; --g-bahaya:#EF4444; --g-ungu:#A78BFA;
  --g-fon:'Baloo 2','Inter',system-ui,sans-serif; --g-arab:'Scheherazade New','Amiri',serif;
  --g-jejari:16px; --g-bayang:0 6px 0 rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.35);
  --g-nav-h:72px; --g-rel-w:84px;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--g-latar);color:var(--g-teks);font-family:var(--g-fon);
  -webkit-user-select:none;user-select:none;touch-action:manipulation;overscroll-behavior:none}
/* G33: touch-action dikira bersilang dengan SEMUA induk — body 'none' menghalang skrol dalam modal/borang.
   Hanya permukaan permainan (kanvas & kawalan) yang 'none'. */
canvas,.g-kawal,.g-zon-kiri{touch-action:none}
button{font-family:inherit;color:inherit}
.g-svg{width:1em;height:1em;fill:currentColor;flex:none;vertical-align:-.14em}
.g-arab{font-family:var(--g-arab);direction:rtl;unicode-bidi:isolate}

/* ---------- Skrin ---------- */
.g-skrin{position:fixed;inset:0;display:none;flex-direction:column;overflow:hidden}
.g-skrin.aktif{display:flex}
.g-latar-anim{position:absolute;inset:0;z-index:0;pointer-events:none}

/* ---------- Butang 3D ---------- */
.g-btn{--w:var(--g-utama);--w2:var(--g-utama2);position:relative;border:0;border-radius:14px;padding:.62em 1.2em;font-weight:800;font-size:1.02rem;
  letter-spacing:.02em;background:linear-gradient(180deg,color-mix(in srgb,var(--w) 85%,#fff) 0%,var(--w) 55%);color:#fff;
  box-shadow:0 5px 0 var(--w2),0 8px 16px rgba(0,0,0,.35);text-shadow:0 1px 0 rgba(0,0,0,.45),0 0 3px rgba(0,0,0,.35);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;transition:transform .08s,box-shadow .08s}
.g-btn:active,.g-btn.tekan{transform:translateY(4px);box-shadow:0 1px 0 var(--w2),0 3px 8px rgba(0,0,0,.35)}
.g-btn[disabled]{filter:grayscale(.8) brightness(.7);cursor:not-allowed}
.g-btn.emas{--w:var(--g-emas);--w2:var(--g-emas2);color:#3b2400;text-shadow:none}
.g-btn.biru{--w:#2563EB;--w2:#1e3a8a}
.g-btn.ungu{--w:#7C3AED;--w2:#4c1d95}
.g-btn.merah{--w:#DC2626;--w2:#7f1d1d}
.g-btn.kelabu{--w:#475569;--w2:#1e293b}
.g-btn.besar{font-size:1.3rem;padding:.7em 1.6em;border-radius:18px}
.g-btn.kecil{font-size:.86rem;padding:.42em .8em;border-radius:11px;box-shadow:0 3px 0 var(--w2)}
.g-btn-ikon{width:44px;height:44px;padding:0;border-radius:13px;font-size:1.35rem}

/* ---------- Bar atas (mata wang) ---------- */
.g-bar-atas{position:relative;z-index:5;display:flex;align-items:center;gap:8px;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))}
.g-profil{display:flex;align-items:center;gap:8px;min-width:0;cursor:pointer;background:rgba(0,0,0,.28);border:1px solid var(--g-garis);border-radius:999px;padding:3px 12px 3px 3px}
.g-profil-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--g-utama),var(--g-utama2));display:grid;place-items:center;font-weight:800;border:2px solid var(--g-emas);position:relative}
.g-profil-av b{position:absolute;bottom:-6px;right:-6px;background:var(--g-emas);color:#3b2400;font-size:.68rem;border-radius:8px;padding:0 5px;line-height:1.4}
.g-profil-t{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.g-profil-t span{font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.g-xp{height:6px;width:96px;background:rgba(255,255,255,.15);border-radius:6px;overflow:hidden;margin-top:3px}
.g-xp i{display:block;height:100%;background:linear-gradient(90deg,var(--g-emas),#fde68a);width:0}
.g-ruang{flex:1}
.g-wang{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.32);border:1px solid var(--g-garis);border-radius:999px;padding:3px 4px 3px 9px;font-weight:800;font-size:.92rem;white-space:nowrap}
.g-wang .g-svg{font-size:1.2rem}
.g-wang small{font-size:.66rem;color:var(--g-redup);font-weight:600}
.g-wang-tambah{width:24px;height:24px;border-radius:50%;border:0;background:var(--g-utama);color:#fff;font-weight:800;display:grid;place-items:center;cursor:pointer;font-size:1rem;line-height:1}
.g-wang.nur .g-svg{color:var(--g-emas)} .g-wang.permata .g-svg{color:var(--g-permata)} .g-wang.tenaga .g-svg{color:#fb923c}

/* ---------- Nav game: bawah (telefon) / rel kiri (PC & tablet) ---------- */
.g-nav{position:fixed;z-index:20;display:flex;gap:4px}
.g-nav button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;
  font-size:.72rem;font-weight:700;color:var(--g-redup);border-radius:14px;position:relative;transition:transform .12s}
.g-nav button .g-svg{font-size:1.65rem}
.g-nav button.aktif{color:#fff;background:linear-gradient(180deg,rgba(16,185,129,.35),rgba(16,185,129,.12));box-shadow:inset 0 0 0 1.5px rgba(16,185,129,.7)}
.g-nav button.aktif .g-svg{filter:drop-shadow(0 0 6px rgba(16,185,129,.9));transform:scale(1.12)}
.g-nav button .g-titik{position:absolute;top:6px;right:calc(50% - 20px);width:10px;height:10px;border-radius:50%;background:var(--g-bahaya);border:2px solid var(--g-panel);display:none}
.g-nav button.ada-titik .g-titik{display:block}
.g-nav button .g-mangga{position:absolute;top:4px;right:calc(50% - 22px);font-size:.85rem;color:var(--g-emas)}
body.g-sentuh .g-nav{left:6px;right:6px;bottom:max(6px,env(safe-area-inset-bottom));height:var(--g-nav-h);padding:6px;border-radius:22px;
  background:linear-gradient(180deg,rgba(27,58,87,.96),rgba(11,26,43,.98));border:1px solid var(--g-garis);box-shadow:0 -4px 20px rgba(0,0,0,.4)}
body.g-sentuh .g-nav button{flex:1}
body:not(.g-sentuh) .g-nav{top:50%;transform:translateY(-50%);left:max(10px,env(safe-area-inset-left));width:var(--g-rel-w);flex-direction:column;padding:8px;border-radius:22px;
  background:linear-gradient(180deg,rgba(27,58,87,.94),rgba(11,26,43,.97));border:1px solid var(--g-garis);box-shadow:0 8px 30px rgba(0,0,0,.45)}
body:not(.g-sentuh) .g-nav button{height:68px}
/* G47: hover/tekan TIDAK menukar warna teks kepada putih (hilang di atas panel cerah) - kekal warna, tambah latar lembut.
   Halaman aktif WAJIB ada penanda: bar emas di tepi (rel) / di atas (nav bawah) + latar aktif tema game. */
body:not(.g-sentuh) .g-nav button:hover{transform:translateX(3px)}
.g-nav button:not(.aktif):hover,.g-nav button:not(.aktif):focus-visible,.g-nav button:not(.aktif):active{background:color-mix(in srgb,currentColor 14%,transparent);color:var(--g-nav-hover,inherit)}
.g-nav button:focus-visible{outline:3px solid var(--g-nav-penanda,var(--g-emas));outline-offset:2px}
.g-nav button.aktif::before{content:'';position:absolute;background:var(--g-nav-penanda,var(--g-emas));border-radius:4px;box-shadow:0 0 8px var(--g-nav-penanda,var(--g-emas))}
body:not(.g-sentuh) .g-nav button.aktif::before{left:-8px;top:14px;bottom:14px;width:5px}
body.g-sentuh .g-nav button.aktif::before{top:-6px;left:28%;right:28%;height:5px}
.g-isi-nav{flex:1;min-height:0;position:relative;z-index:2;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
body.g-sentuh .g-isi-nav{padding-bottom:calc(var(--g-nav-h) + 16px)}
body:not(.g-sentuh) .g-isi-nav{padding-left:calc(var(--g-rel-w) + 22px)}
body:not(.g-sentuh) .g-bar-atas{padding-left:calc(var(--g-rel-w) + 22px)}   /* rel nav menegak tidak menindih profil (skrin rendah) */

/* ---------- Panel / kad ---------- */
.g-panel{background:linear-gradient(180deg,var(--g-panel2),var(--g-panel));border:1px solid var(--g-garis);border-radius:var(--g-jejari);box-shadow:var(--g-bayang);padding:14px}
.g-tajuk-panel{font-size:1.5rem;font-weight:800;margin:4px 0 10px;display:flex;align-items:center;gap:10px;text-shadow:0 3px 0 rgba(0,0,0,.3)}
.g-tajuk-panel .g-svg{color:var(--g-emas)}
.g-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.g-kad{position:relative;border-radius:var(--g-jejari);padding:14px;background:linear-gradient(160deg,var(--g-panel2),var(--g-panel));border:1px solid var(--g-garis);
  box-shadow:0 5px 0 rgba(0,0,0,.35);overflow:hidden}
.g-kad.kunci{filter:saturate(.25) brightness(.75)}
.g-kad-kunci{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(5,12,22,.55);
  font-weight:700;font-size:.9rem;text-align:center;padding:12px;z-index:3;filter:none}
.g-kad-kunci .g-svg{font-size:2.2rem;color:var(--g-emas)}
.g-cip{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:800;padding:2px 8px;border-radius:999px;background:rgba(15,23,42,.82);color:#f8fafc;border:1px solid var(--g-garis)}
.g-cip.emas{background:#78350f;color:#fde68a;border-color:#f59e0b}
.g-cip.hijau{background:#065f46;color:#d1fae5;border-color:#10b981}
.g-redup{color:var(--g-redup)}

/* ---------- Modal ---------- */
.g-modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(3,8,16,.66);backdrop-filter:blur(3px)}
.g-modal.aktif{display:flex;animation:g-pudar .18s}
.g-modal-kotak{width:min(460px,100%);max-height:calc(100% - 20px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;animation:g-lompat .32s cubic-bezier(.2,1.4,.4,1)}
.g-modal-kotak.lebar{width:min(860px,100%)}
@keyframes g-pudar{from{opacity:0}}
@keyframes g-lompat{from{transform:scale(.7);opacity:0}}

/* ---------- Toast & nombor terbang ---------- */
.g-toast{position:fixed;left:50%;top:max(14px,env(safe-area-inset-top));transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.g-toast div{background:linear-gradient(180deg,#1f4f74,#123049);border:1px solid var(--g-garis);border-radius:14px;padding:8px 16px;font-weight:700;box-shadow:var(--g-bayang);animation:g-toast 2.6s forwards;max-width:90vw;text-align:center}
@keyframes g-toast{0%{transform:translateY(-20px);opacity:0}10%,80%{transform:none;opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.g-terbang{position:fixed;z-index:95;pointer-events:none;font-weight:800;font-size:1.3rem;text-shadow:0 2px 0 #000,0 0 10px rgba(0,0,0,.6);animation:g-terbang 1.1s ease-out forwards}
@keyframes g-terbang{to{transform:translateY(-70px) scale(1.25);opacity:0}}

/* ---------- Kawalan MOBA ---------- */
.g-kawal{position:absolute;inset:0;z-index:15;pointer-events:none}
.g-kawal .g-zon-kiri{position:absolute;left:0;top:0;bottom:0;width:50%;pointer-events:auto}
.g-joy{position:absolute;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,.16));
  border:2px solid rgba(255,255,255,.45);opacity:.65;transition:opacity .15s;pointer-events:none}
.g-joy.aktif{opacity:1}
.g-joy i{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#cbd5e1 40%,#64748b);box-shadow:0 4px 10px rgba(0,0,0,.5)}
.g-aksi{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:230px;height:200px;pointer-events:none}
.g-aksi button{position:absolute;pointer-events:auto;border-radius:50%;border:3px solid rgba(255,255,255,.55);display:grid;place-items:center;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.45),rgba(255,255,255,.08) 60%),var(--wb,#334155);box-shadow:0 5px 0 rgba(0,0,0,.4),0 0 14px rgba(0,0,0,.4);
  color:#fff;overflow:hidden;touch-action:none}
.g-aksi button .g-svg{font-size:1.9rem;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4));position:relative;z-index:2}
.g-aksi button kbd{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font:700 .62rem var(--g-fon);background:rgba(0,0,0,.45);border-radius:5px;padding:0 4px;z-index:2}
.g-aksi button .g-cd{position:absolute;inset:0;background:conic-gradient(rgba(0,0,0,.65) var(--cd,0%),transparent 0);z-index:1}
.g-aksi button .g-bil{position:absolute;top:2px;right:6px;font-size:.72rem;font-weight:800;background:var(--g-emas);color:#3b2400;border-radius:8px;padding:0 5px;z-index:3}
.g-aksi button.tekan{transform:scale(.9)}
.g-aksi button.utama{width:92px;height:92px;right:0;bottom:0}
.g-aksi button.a1{width:62px;height:62px;right:104px;bottom:4px}
.g-aksi button.a2{width:62px;height:62px;right:88px;bottom:82px}
.g-aksi button.a3{width:62px;height:62px;right:16px;bottom:110px}
body:not(.g-sentuh) .g-zon-kiri,body:not(.g-sentuh) .g-joy{display:none}
body.g-sentuh .g-aksi kbd{display:none}
body:not(.g-sentuh) .g-aksi{transform:scale(.82);transform-origin:bottom right}

/* ---------- Pusing telefon ---------- */
.g-pusing{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--g-latar);text-align:center;padding:24px}
.g-pusing .g-svg{font-size:5rem;color:var(--g-emas);animation:g-pusing 1.8s ease-in-out infinite}
@keyframes g-pusing{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}


/* ---------- Kedai ---------- */
.g-pek{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 12px}
.g-pek .g-pek-ikon{font-size:3rem;color:var(--g-permata);filter:drop-shadow(0 0 12px rgba(56,189,248,.6))}
.g-pek.emas{background:linear-gradient(160deg,#5b3a07,#2a1a03);border-color:rgba(251,191,36,.6);color:#fef3c7}
.g-pek.emas b{color:#fde68a}.g-pek.emas p,.g-pek.emas .g-redup{color:rgba(253,230,138,.85)}
.g-pek.emas .g-pek-ikon{color:var(--g-emas);filter:drop-shadow(0 0 12px rgba(251,191,36,.7))}
.g-pek b{font-size:1.25rem}
.g-pek .g-reben{position:absolute;top:10px;right:-34px;transform:rotate(35deg);background:#b91c1c;color:#fff;font-size:.66rem;font-weight:800;padding:2px 36px}
.g-legal{font-size:.74rem;color:var(--g-redup);text-align:center;margin-top:10px}
.g-legal a{color:#93c5fd}

/* ---------- Ranking ---------- */
.g-tab{display:flex;gap:6px;background:rgba(0,0,0,.3);padding:4px;border-radius:14px;margin-bottom:10px}
.g-tab button{flex:1;border:0;background:transparent;padding:8px;border-radius:10px;font-weight:800;cursor:pointer;color:var(--g-redup)}
.g-tab button.aktif{background:var(--g-utama);color:#fff;box-shadow:0 3px 0 var(--g-utama2)}
.g-podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:8px 0 14px}
.g-podium div{flex:1;max-width:130px;text-align:center;border-radius:14px 14px 4px 4px;padding:8px 4px;font-weight:800;font-size:.85rem;
  background:linear-gradient(180deg,#334155,#1e293b);border:1px solid var(--g-garis)}
.g-podium .p1{height:128px;background:linear-gradient(180deg,#f59e0b,#92400e)}
.g-podium .p2{height:104px;background:linear-gradient(180deg,#94a3b8,#334155)}
.g-podium .p3{height:88px;background:linear-gradient(180deg,#c2773b,#5c2e0b)}
.g-podium big{display:block;font-size:1.6rem}
.g-baris-rank{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);margin-bottom:5px;font-weight:700}
.g-baris-rank.saya{background:rgba(16,185,129,.2);box-shadow:inset 0 0 0 1.5px var(--g-utama)}
.g-baris-rank em{font-style:normal;width:30px;text-align:center;color:var(--g-emas)}
.g-baris-rank span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Tetapan ---------- */
.g-slaid{display:flex;align-items:center;gap:10px;margin:10px 0}
.g-slaid label{width:110px;font-weight:700;font-size:.92rem}
.g-slaid input[type=range]{flex:1;accent-color:var(--g-utama);height:28px}
.g-pilih{display:flex;gap:6px;flex-wrap:wrap}
.g-pilih button{border:1px solid var(--g-garis);background:rgba(255,255,255,.06);padding:6px 12px;border-radius:10px;font-weight:700;cursor:pointer;color:var(--g-redup)}
.g-pilih button.aktif{background:var(--g-utama);color:#fff;border-color:transparent}

@media (max-height:460px){
  .g-aksi{transform:scale(.8);transform-origin:bottom right}
  .g-joy{transform:scale(.85)}
  body.g-sentuh .g-nav{--g-nav-h:58px}
  .g-nav button .g-svg{font-size:1.35rem}
  .g-bar-atas{padding-top:4px;padding-bottom:4px}
}

/* G17: putar 90 darjah apabila telefon menegak tetapi game landskap (kunci putaran / iPhone) */
html.g-putar,html.g-putar body{overflow:hidden}
html.g-putar body{position:fixed;top:0;left:100vw;transform-origin:0 0;transform:rotate(90deg)}
html.g-putar .g-skrin,html.g-putar .g-modal{position:absolute}
html.g-putar body.g-sentuh .g-nav{position:absolute}

/* ===== G23: susun atur seragam (Tetapan, kad, butang) ===== */
.g-tetapan{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:stretch}
.g-tetapan .g-kad{display:flex;flex-direction:column;gap:12px;padding:16px}
.g-kad-t{display:flex;align-items:center;gap:8px;margin:0;font-size:1.08rem;font-weight:800}
.g-kad-t .g-svg{color:var(--g-emas);font-size:1.2rem}
.g-baris{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:12px;min-height:40px}
.g-baris label{font-weight:700;font-size:.92rem;white-space:nowrap}
.g-baris input[type=range]{width:100%;accent-color:var(--g-utama);height:28px;margin:0}
.g-baris-blok{grid-template-columns:1fr}
.g-segmen{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;background:rgba(0,0,0,.25);padding:4px;border-radius:12px}
.g-segmen button{height:36px;border:0;border-radius:9px;background:transparent;color:var(--g-redup);font-weight:800;font-size:.86rem;cursor:pointer;white-space:nowrap}
.g-segmen button.aktif{background:var(--g-utama);color:#fff;box-shadow:0 3px 0 var(--g-utama2)}
.g-kad-aksi{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.g-kad-aksi .g-btn{width:100%;min-height:46px}
.g-stat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.g-stat div{background:rgba(0,0,0,.25);border-radius:12px;padding:8px 10px}
.g-stat b{display:block;font-size:1.15rem}.g-stat span{font-size:.74rem;color:var(--g-redup)}
.g-kad p{margin:0}
/* ===== G24: borang akaun ===== */
.g-auth{display:flex;flex-direction:column;gap:12px}
.g-auth-kepala{text-align:center}.g-auth-kepala h2{margin:4px 0}.g-auth-kepala p{margin:0;font-size:.9rem}
.g-auth-google{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border-radius:14px;border:0;background:#fff;color:#1f2937;font:800 1rem var(--g-fon);cursor:pointer;box-shadow:0 4px 0 #cbd5e1}
.g-auth-google svg{width:22px;height:22px}
.g-auth-delima{margin-top:8px;box-shadow:0 4px 0 #c4b5fd}
.g-auth-atau{display:flex;align-items:center;gap:10px;color:var(--g-redup);font-size:.8rem}.g-auth-atau::before,.g-auth-atau::after{content:'';flex:1;height:1px;background:var(--g-garis)}
.g-auth .g-tab{margin:0}
.g-auth-borang{display:flex;flex-direction:column;gap:10px}
.g-auth-borang label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:.88rem}
.g-auth-borang input{height:46px;border-radius:12px;border:1px solid var(--g-garis);background:#0b1a2b;color:#fff;padding:0 14px;font:600 16px var(--g-fon);-webkit-user-select:text;user-select:text}
.g-auth-borang input:focus{outline:2px solid var(--g-utama);border-color:transparent}
.g-auth-ralat{margin:0;color:#fca5a5;font-weight:700;font-size:.86rem}
.g-modal{touch-action:pan-x pan-y}
.g-modal .g-btn,.g-modal input{touch-action:manipulation}
/* borang akaun pada skrin pendek (telefon landskap): 2 lajur supaya tidak perlu banyak skrol */
@media (max-height:520px) and (min-width:560px){
  .g-modal-kotak:has(.g-auth){width:min(760px,100%)}
  .g-auth{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:start}
  .g-auth-kepala,.g-auth-google,.g-auth-delima,.g-auth-atau,.g-auth .g-tab,[data-tetamu]{grid-column:1}
  .g-auth-borang{grid-column:2;grid-row:1 / span 6}
  .g-auth .g-legal{grid-column:1 / -1}
  .g-auth-kepala p{display:none}
}

/* ===== Komponen kongsi kedai/kad (G27/G28/G30) — game baharu guna kelas g-* ini ===== */
.g-grid-sama{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));align-items:stretch;padding:2px}
.g-barang{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;text-align:center}
.g-barang.pakai{box-shadow:inset 0 0 0 3px var(--g-utama),0 5px 0 rgba(0,0,0,.15)}
.g-barang .g-kad-t{justify-content:center;font-size:1rem}
.g-barang>p{margin:0;font-size:.84rem;line-height:1.35;min-height:2.7em;color:var(--g-redup)}
.g-barang-visual{height:96px;display:grid;place-items:center;border-radius:14px;background:rgba(124,58,237,.08)}
.g-barang-visual img{height:92px;width:auto}
.g-barang-ikon{position:relative;font-size:2.6rem;color:var(--g-emas)}
.g-barang-ikon i{position:absolute;right:-16px;bottom:-4px;font:800 .8rem var(--g-fon);font-style:normal;color:#fff;background:var(--g-utama);border-radius:8px;padding:0 5px}
.g-stok{font-size:.76rem;font-weight:800;color:var(--g-utama);min-height:1.1em}
.g-info{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;border-radius:50%;border:1px solid var(--g-garis);background:rgba(255,255,255,.6);color:var(--g-teks);font:800 .95rem var(--g-fon);cursor:pointer;display:grid;place-items:center}
.g-kedai-tab{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:6px;scrollbar-width:none;touch-action:pan-x pan-y}
.g-kedai-tab::-webkit-scrollbar{display:none}
.g-kedai-tab button{flex:none;display:flex;align-items:center;gap:6px;height:42px;padding:0 14px;border-radius:14px;border:1px solid var(--g-garis);background:var(--g-panel);color:var(--g-redup);font-weight:800;cursor:pointer;white-space:nowrap}
.g-kedai-tab button.aktif{background:var(--g-utama);color:#fff;border-color:transparent;box-shadow:0 3px 0 var(--g-utama2)}
.g-popup{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.g-popup h3{margin:0}.g-popup p{margin:0;line-height:1.45}.g-popup .g-barang-visual{width:100%;height:110px}.g-popup .g-kad-aksi{width:100%}
@media (max-width:820px){
  .g-grid-sama{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
  .g-barang>p,.g-kat-desk{display:none}
  .g-barang{padding:12px;gap:6px}
  .g-barang-visual{height:72px}.g-barang-visual img{height:70px}
  .g-barang .g-kad-t{font-size:.92rem}
  .g-barang .g-kad-aksi .g-btn{min-height:40px;font-size:.88rem;padding:.4em .6em}
}
@media (max-width:480px){ .g-profil-t{display:none} .g-profil{padding-right:3px} .g-bar-atas{gap:5px} .g-wang{padding-left:6px;font-size:.85rem} }
/* G38: telefon -- widget lebih kecil & padat */
@media (max-width:600px),(max-height:500px){
  .g-btn{font-size:.9rem;padding:.5em .95em;border-radius:12px;box-shadow:0 4px 0 var(--w2),0 6px 12px rgba(0,0,0,.25)}
  .g-btn.besar{font-size:1.05rem;padding:.55em 1.2em;border-radius:14px}
  .g-btn.kecil{font-size:.8rem}
  .g-btn-ikon{width:36px;height:36px;font-size:1.1rem;border-radius:11px;padding:0}
  .g-wang{font-size:.78rem;padding:3px 6px 3px 5px;gap:3px}.g-wang .g-svg{font-size:1rem}.g-wang-tambah{width:18px;height:18px;font-size:.8rem}
  .g-profil-av{width:34px;height:34px}.g-profil-av img{width:32px;height:32px}
  .g-bar-atas{padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) 6px max(6px,env(safe-area-inset-left));gap:4px}
  body.g-sentuh .g-nav{--g-nav-h:54px;height:var(--g-nav-h);padding:4px;border-radius:18px;left:4px;right:4px}
  body.g-sentuh .g-nav button .g-svg{font-size:1.2rem}body.g-sentuh .g-nav button{font-size:.62rem;border-radius:12px}
  body.g-sentuh{--g-nav-h:54px}
  .g-tajuk-panel{font-size:1.1rem}
  .g-modal-kotak{padding:14px;border-radius:18px}
  .g-popup img{max-width:88px;height:auto}.g-popup h2{font-size:1.25rem}.g-popup h3{font-size:1.05rem}
  .g-kad{padding:10px;border-radius:14px}
  .g-kedai-tab button{height:36px;padding:0 10px;font-size:.8rem}
  .g-tab button,.g-segmen button{font-size:.8rem;padding:6px}
  .g-cip{font-size:.66rem}
  .g-aksi{transform:scale(.76);transform-origin:100% 100%}
  .g-joy{width:104px;height:104px;margin:-52px 0 0 -52px}.g-joy i{width:46px;height:46px;margin:-23px 0 0 -23px}
}

/* G37: tab/segmen aktif sentiasa berbayang gelap */
.g-tab button.aktif,.g-segmen button.aktif,.g-kedai-tab button.aktif{text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 3px rgba(0,0,0,.35)}

/* G51 — panel "Game lain" (SG.semuaGame): satu lajur, thumbnail besar jarak 2px, play beranimasi di tengah */
.g-semua-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.g-semua-kepala b{font-size:1.1rem}
.g-semua{display:grid;grid-template-columns:1fr;gap:10px;max-height:min(70vh,640px);overflow:auto;padding-right:2px}
.g-semua-kad{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:0;padding:2px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:inherit;text-decoration:none}
.g-semua-kad.ini{border-color:rgba(16,185,129,.8)}
.g-semua-thumb{position:relative;display:block;aspect-ratio:1200/630;border-radius:14px;overflow:hidden;background:#0b1a3a}
.g-semua-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.g-semua-thumb i{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fde68a,#f59e0b 60%,#b45309);box-shadow:0 4px 0 #78350f;animation:g-semua-denyut 1.6s ease-in-out infinite}
.g-semua-thumb i .g-svg{font-size:1.5rem;color:#fff;fill:#fff}
@keyframes g-semua-denyut{50%{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.g-semua-thumb i{animation:none}}
.g-semua-isi{display:flex;flex-direction:column;gap:4px;padding:8px 12px;min-width:0}
.g-semua-isi b{font-size:1rem}
.g-semua-isi em{font-style:normal;font-size:.7rem;padding:1px 6px;border-radius:99px;background:rgba(16,185,129,.25);margin-left:4px}
.g-semua-isi small{font-size:.78rem;opacity:.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:560px){.g-semua-kad{grid-template-columns:1fr}.g-semua-isi{padding:6px 8px 8px}}
/* G51 kemas kini: gaya Google Play — semua saiz thumbnail 30% kiri, perincian 70% kanan */
.g-semua-kad,.g-semua-kad{grid-template-columns:30% minmax(0,1fr) !important}
.g-semua-thumb i{width:38px;height:38px;margin:-19px 0 0 -19px}
.g-semua-thumb i .g-svg{font-size:1.15rem}
@media (max-width:560px){.g-semua-thumb i{width:30px;height:30px;margin:-15px 0 0 -15px}.g-semua-isi small{-webkit-line-clamp:2}}
/* G51: baris rendah, thumbnail penuh tinggi baris, teks besar, butang Main kanan bawah */
.g-semua-kad{grid-template-columns:min(30%,260px) minmax(0,1fr) !important;align-items:stretch}
.g-semua-thumb{aspect-ratio:auto;min-height:100%}
.g-semua-thumb img{position:absolute;inset:0}
.g-semua-isi{justify-content:center}
.g-semua-isi b{font-size:1.1rem}
.g-semua-isi small{font-size:.85rem}
.g-semua-main{align-self:flex-end;margin-top:auto;padding:6px 16px;border-radius:99px;background:linear-gradient(180deg,#34d399,#059669);color:#fff;font-weight:800;font-size:.85rem}
@media (max-width:560px){.g-semua-kad{grid-template-columns:34% minmax(0,1fr) !important}.g-semua-thumb{min-height:90px}.g-semua-isi b{font-size:.95rem}.g-semua-isi small{font-size:.75rem}.g-semua-main{display:none}}

/* Label subjek (10 Okt) */
.gm-subjek{display:inline-block;align-self:flex-start;margin:0 0 4px;padding:2px 9px;border-radius:999px;font-size:.72em;font-weight:800;letter-spacing:.02em;line-height:1.5;background:#E5E7EB;color:#374151}
.gm-subjek[data-subjek="sejarah"]{background:#FFEDD5;color:#9A3412}
.gm-subjek[data-subjek="matematik"]{background:#DBEAFE;color:#1E40AF}
.gm-subjek[data-subjek="sains"]{background:#DCFCE7;color:#166534}
.gm-subjek[data-subjek="al-quran"]{background:#EDE9FE;color:#5B21B6}
.gm-subjek[data-subjek="pendidikan-islam"]{background:#CCFBF1;color:#115E59}
.gm-subjek[data-subjek="bahasa-melayu"]{background:#FCE7F3;color:#9D174D}
.gm-subjek[data-subjek="bahasa-inggeris"]{background:#FEF9C3;color:#854D0E}
.g-semua-isi .gm-subjek{font-size:.68rem}

/* Warna subjek panel "Game lain" (10 Okt) */
.g-semua-kad:has(.gm-subjek[data-subjek="sejarah"]){--w:#B45309;--w-dk:#7C2D12;--w-bg:#FFEDD5;--w-t:#9A3412;}
.g-semua-kad:has(.gm-subjek[data-subjek="matematik"]){--w:#1D4ED8;--w-dk:#1E3A8A;--w-bg:#DBEAFE;--w-t:#1E40AF;}
.g-semua-kad:has(.gm-subjek[data-subjek="matematik-tambahan"]){--w:#6D28D9;--w-dk:#3B0764;--w-bg:#EDE9FE;--w-t:#5B21B6;}
.g-semua-kad:has(.gm-subjek[data-subjek="sains"]){--w:#4D7C0F;--w-dk:#365314;--w-bg:#ECFCCB;--w-t:#3F6212;}
.g-semua-kad:has(.gm-subjek[data-subjek="fizik"]){--w:#0E7490;--w-dk:#164E63;--w-bg:#CFFAFE;--w-t:#155E75;}
.g-semua-kad:has(.gm-subjek[data-subjek="kimia"]){--w:#BE185D;--w-dk:#831843;--w-bg:#FCE7F3;--w-t:#9D174D;}
.g-semua-kad:has(.gm-subjek[data-subjek="biologi"]){--w:#15803D;--w-dk:#14532D;--w-bg:#DCFCE7;--w-t:#166534;}
.g-semua-kad:has(.gm-subjek[data-subjek="pendidikan-islam"]){--w:#0F766E;--w-dk:#134E4A;--w-bg:#CCFBF1;--w-t:#115E59;}
.g-semua-kad:has(.gm-subjek[data-subjek="al-quran"]){--w:#7C3AED;--w-dk:#4C1D95;--w-bg:#EDE9FE;--w-t:#5B21B6;}
.g-semua-kad:has(.gm-subjek[data-subjek="tasawwur-islam"]){--w:#0D9488;--w-dk:#134E4A;--w-bg:#CCFBF1;--w-t:#115E59;}
.g-semua-kad:has(.gm-subjek[data-subjek="bahasa-melayu"]){--w:#DB2777;--w-dk:#831843;--w-bg:#FCE7F3;--w-t:#9D174D;}
.g-semua-kad:has(.gm-subjek[data-subjek="bahasa-inggeris"]){--w:#CA8A04;--w-dk:#713F12;--w-bg:#FEF9C3;--w-t:#854D0E;}
.g-semua-kad:has(.gm-subjek[data-subjek="bahasa-arab"]){--w:#059669;--w-dk:#064E3B;--w-bg:#D1FAE5;--w-t:#065F46;}
.g-semua-kad:has(.gm-subjek[data-subjek="geografi"]){--w:#0369A1;--w-dk:#0C4A6E;--w-bg:#E0F2FE;--w-t:#075985;}
.g-semua-kad{box-shadow:inset 0 -3px 0 var(--w,#10B981)}
.g-semua-main{background:var(--w,#059669) !important}