/* ==========================================================================
   Stesen Angkasa — gaya untuk mod 3D.

   Lapisan z yang sedia digunakan: topbar 40, confetti 80, toast 90,
   skip-link 100. Pentas duduk pada 50 — di ATAS topbar, tetapi di BAWAH
   confetti dan toast, supaya kedua-dua raikan tetap kelihatan di atas
   permainan apabila murid naik tahap.
   ========================================================================== */

.stage {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #0b1024;          /* legap, sepadan latar adegan — tiada kelip */
  overscroll-behavior: none;
  touch-action: none;           /* matikan tarik-untuk-muat & cubit-zum */
  user-select: none;
  -webkit-user-select: none;
}
.stage[hidden] { display: none !important; }

#gl { display: block; width: 100%; height: 100%; outline: none; }

/* Bekas UI tidak menerima input; hanya kawalan sebenar menerimanya, jadi
   kanvas masih menerima seretan di mana-mana kecuali di atas butang. */
.gameui { position: absolute; inset: 0; pointer-events: none; color: #fff; }
.gameui > * { pointer-events: auto; }

/* --- Bar atas ------------------------------------------------------------ */

.gtop {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  background: linear-gradient(180deg, rgba(6, 10, 26, .72), rgba(6, 10, 26, 0));
  pointer-events: none;
}
.gtop > * { pointer-events: auto; }
.gspacer { flex: 1; pointer-events: none; }

.gstat {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(12, 18, 40, .78);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; padding: 7px 13px;
  font: 700 .95rem/1 var(--font); color: #fff;
}
.gstat b { font-size: 1rem; }

.gbtn {
  font: 700 1rem/1 var(--font); color: #fff; cursor: pointer;
  background: rgba(12, 18, 40, .78);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px; padding: 10px 14px;
  min-width: 46px; min-height: 46px;
}
.gbtn:active { transform: scale(.94); }
.gbtn--icon { font-size: 1.15rem; padding: 10px; }

/* --- Gesaan terapung di atas gerai --------------------------------------- */

.gprompt {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; gap: 10px;
  max-width: min(78vw, 360px);
  background: rgba(10, 16, 38, .92);
  border: 2px solid rgba(255, 255, 255, .28);
  border-radius: 18px; padding: 10px 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
  transition: opacity .14s ease;
  pointer-events: none;
}
.gprompt__icon { font-size: 1.7rem; line-height: 1; }
.gprompt__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gprompt__body b {
  font: 800 1rem/1.2 var(--font); color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gprompt__body span { font: 600 .78rem/1.2 var(--font); color: rgba(255, 255, 255, .72); }
.gprompt__stars { color: #ffc233; letter-spacing: 1px; }
.gprompt__key {
  flex: none; font: 800 .72rem/1 var(--font); color: #0b1024;
  background: #ffd166; border-radius: 8px; padding: 6px 9px;
}
@media (pointer: coarse) { .gprompt__key { display: none; } }

/* --- Kayu bedik dinamik --------------------------------------------------
   Pangkal muncul di tempat ibu jari menyentuh, bukan kedudukan tetap. */

.gstick {
  position: absolute; width: 132px; height: 132px;
  margin: -66px 0 0 -66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  border: 2px solid rgba(255, 255, 255, .30);
  pointer-events: none;
}
.gstick__knob {
  position: absolute; left: 50%; top: 50%;
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}

/* --- Butang tindakan besar ------------------------------------------------ */

.gact {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(26px, env(safe-area-inset-bottom));
  width: 96px; height: 96px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; cursor: pointer;
  background: linear-gradient(180deg, #ffd166, #f2a007);
  border: 3px solid rgba(255, 255, 255, .55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  color: #2a1a00; font-family: var(--font);
}
.gact:active { transform: scale(.93); }
.gact__icon { font-size: 1.9rem; line-height: 1; }
.gact__label { font-weight: 900; font-size: .68rem; letter-spacing: .5px; }
@media (hover: hover) and (pointer: fine) { .gact { display: none; } }

.ghelp {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: rgba(10, 16, 38, .82); color: rgba(255, 255, 255, .88);
  border-radius: 999px; padding: 8px 16px;
  font: 600 .82rem/1 var(--font); text-align: center;
  max-width: 86vw; pointer-events: none;
}

/* --- Sepanduk raikan ------------------------------------------------------ */

.gbanner {
  position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #ffd166, #f2a007); color: #2a1a00;
  font: 900 1.15rem/1.2 var(--font); text-align: center;
  padding: 14px 26px; border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  animation: gpop .35s cubic-bezier(.2, 1.4, .4, 1);
  pointer-events: none;
}
.gbanner.is-out { opacity: 0; transition: opacity .5s ease; }
@keyframes gpop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }

/* --- Hamparan (dialog modal) ---------------------------------------------
   Soalan kuiz dipapar di sini menggunakan kelas .question/.choices/.feedback
   yang SAMA seperti aplikasi 2D, jadi ia kelihatan identik. */

.gsheet {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 26, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 16px;
}
.gsheet[hidden] { display: none !important; }

.gsheet__panel {
  width: 100%; max-width: 720px; max-height: 92%;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg); color: var(--ink);
  border-radius: var(--r-lg); padding: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  animation: gslide .22s ease;
}
@keyframes gslide { from { transform: translateY(14px); opacity: 0; } }

/* Butang tutup kekal. Sasaran sentuh 44 px, sentiasa di atas kandungan yang
   menatal, supaya murid tidak pernah terperangkap di dalam kuiz. */
.gclose {
  position: sticky; top: -8px; float: right;
  z-index: 2; margin: -6px -6px 0 8px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 800 1.1rem/1 var(--font); cursor: pointer;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
}
.gclose:active { transform: scale(.92); }

/* Beri ruang pada baris pertama supaya butang tutup tidak berhimpit dengan
   pembilang markah. */
#gPanel .quizbar { padding-right: 46px; }

/* Pada telefon ia menjadi helaian bawah — lebih mudah dicapai ibu jari. */
@media (max-width: 640px) {
  .gsheet { align-items: flex-end; padding: 0; }
  .gsheet__panel {
    max-width: none; max-height: 88%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 18px 16px max(18px, env(safe-area-inset-bottom));
  }
}

/* --- Skrin memuat --------------------------------------------------------- */

.gload { text-align: center; padding: 18px 6px; }
.gload__rocket { font-size: 3rem; animation: gfloat 1.6s ease-in-out infinite; }
@keyframes gfloat { 50% { transform: translateY(-12px); } }
.gload h2 { margin: 10px 0 4px; }
.gload__bar {
  margin-top: 16px; height: 12px; border-radius: 999px;
  background: var(--surface-2); overflow: hidden;
}
.gload__bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .25s ease;
}

/* --- Pilih watak ---------------------------------------------------------- */

.gpick { text-align: center; }
.gpick h2 { margin: 0 0 4px; }
.gpick__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 16px 0 18px;
}
@media (max-width: 420px) { .gpick__grid { grid-template-columns: repeat(2, 1fr); } }
.gpick__card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; cursor: pointer; font-family: var(--font);
  background: var(--surface); color: var(--ink);
  border: 3px solid var(--line); border-radius: var(--r-md);
}
.gpick__card b { font-size: .84rem; }
.gpick__card:active { transform: scale(.96); }
.gpick__card.is-on {
  border-color: var(--suit, var(--primary));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--suit, var(--primary)) 22%, transparent);
}
.gpick__face { font-size: 2.4rem; line-height: 1; }

/* Harga topi. Barang yang belum mampu dibeli ditunjukkan malap DAN dikunci,
   supaya murid nampak sebabnya sebelum menekan, bukan selepas ditolak. */
.gshop__price { font-size: .78rem; color: var(--ink-3); font-weight: 700; }
.gshop__price.is-poor { color: var(--bad); }
.gpick__card[data-poor] { opacity: .55; }
.gpick__card[data-poor]::after {
  content: "🔒"; position: absolute; top: 6px; right: 8px; font-size: .8rem;
}
.gpick__card { position: relative; }

/* --- Pintu gerai ---------------------------------------------------------- */

.gdoors__head {
  display: flex; align-items: center; gap: 14px;
  border-left: 6px solid var(--tone, var(--primary));
  padding-left: 12px; margin-bottom: 18px;
}
.gdoors__head h2 { margin: 2px 0; font-size: 1.25rem; }
.gdoors__icon { font-size: 2.6rem; line-height: 1; }
.gdoors__stars { color: #f2a007; letter-spacing: 3px; font-size: 1.05rem; }
.gdoors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
@media (max-width: 480px) { .gdoors__grid { grid-template-columns: 1fr; } }

.gdoor {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 10px; cursor: pointer; text-align: center;
  font-family: var(--font); color: var(--ink);
  background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--r-md);
}
.gdoor:active { transform: scale(.97); }
.gdoor__icon { font-size: 2rem; line-height: 1; }
.gdoor b { font-size: 1rem; }
.gdoor span { font-size: .78rem; color: var(--ink-3); }

/* --- Jeda ----------------------------------------------------------------- */

.gpause { text-align: center; }
.gpause__list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }

/* --- Keputusan ------------------------------------------------------------ */

.gresult { text-align: center; }
.gresult__stars { font-size: 2.4rem; color: #f2a007; letter-spacing: 6px; }
.gresult h2 { margin: 6px 0 12px; font-size: 2rem; }
.gresult__up {
  background: var(--ok-soft); color: var(--ok);
  font-weight: 800; border-radius: var(--r-md);
  padding: 10px 14px; margin-bottom: 12px;
}
.gresult__row {
  display: flex; justify-content: center; gap: 18px;
  font-weight: 800; margin-bottom: 14px; flex-wrap: wrap;
}
.gresult__badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.gbadge {
  background: var(--accent-soft); border-radius: 999px;
  padding: 7px 13px; font-weight: 700; font-size: .86rem;
}

.glearn h2 { margin: 2px 0 12px; }

/* --- Kad masuk pada laman utama 2D ---------------------------------------- */

.quick button.quick--3d {
  background: linear-gradient(140deg, #241c5e, #4a2fb8 60%, #7c3aed);
  color: #fff; border-color: transparent;
  grid-column: span 2;
}
.quick button.quick--3d span { color: rgba(255, 255, 255, .82); }

/* --- Kebolehcapaian & cetakan --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .gload__rocket, .gbanner { animation: none; }
  .gsheet__panel { animation: none; }
}

/* Jika murid menekan Ctrl+P semasa dalam permainan, #app tersembunyi dan
   halaman akan bercetak kosong. game.js keluar dari 3D pada 'beforeprint';
   ini ialah tali pinggang keselamatan kedua. */
@media print {
  .stage { display: none !important; }
}

/* --- Rumah murid: pangkalan sebenar ---------------------------------------
   Ia perlu menjawab "apa gunanya rumah saya?" dengan sesuatu yang boleh
   ditindaklanjuti, bukan sekadar nombor. */

.ghome__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ghome__icon { font-size: 2.8rem; line-height: 1; }
.ghome__head h2 { margin: 0; font-size: 1.3rem; }
.ghome__head p { margin: 2px 0 0; }

.ghome__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px;
}
.ghome__stats div {
  background: var(--surface-2); border-radius: var(--r-md);
  padding: 12px 8px; text-align: center;
}
.ghome__stats b { display: block; font-size: 1.5rem; color: var(--ink); }
.ghome__stats span { font-size: .74rem; color: var(--ink-3); }

.ghome__next { margin-bottom: 16px; }
.ghome__next .tiny { margin-bottom: 6px; }
.ghome__none {
  background: var(--ok-soft); color: var(--ok); font-weight: 800;
  border-radius: var(--r-md); padding: 12px; text-align: center; margin-bottom: 16px;
}

.ghome__sec { margin-bottom: 16px; }
.ghome__sec > b { display: block; margin-bottom: 6px; }
.ghome__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ghbadge {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; background: var(--accent-soft);
}
.ghbadge.is-off { background: var(--surface-2); filter: grayscale(1); opacity: .4; }

.ghome__years { display: flex; flex-wrap: wrap; gap: 8px; }
.ghyear {
  width: 48px; height: 48px; border-radius: var(--r-md); cursor: pointer;
  font: 800 1.1rem/1 var(--font);
  background: var(--surface); color: var(--ink); border: 2px solid var(--line);
}
.ghyear.is-on { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.ghyear:active { transform: scale(.94); }