/* Susun atur aplikasi: bar atas, kawasan skrin, bekas main berskala, mesej pusing skrin */

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
}

/* ---------- Bar atas ---------- */
.topbar {
  flex: 0 0 auto;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) var(--sp-4) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  z-index: 20;
}
.topbar__title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__group { display: flex; gap: var(--sp-2); flex: 0 0 auto; }
.topbar__group--left { min-width: var(--tap-min); }
.topbar.is-hidden { visibility: hidden; }

/* ---------- Kawasan skrin ---------- */
.screen-host {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-6) + var(--safe-b));
  animation: screen-in var(--dur-base) var(--ease-out) both;
}
.screen--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.screen__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.screen__inner--narrow { max-width: 720px; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Bekas kawasan main berskala (letterbox) ----------
   Semua permainan akan dilukis dalam .stage bersaiz logik 16:10.
   .stage-wrap mengisi ruang; .stage mengecil/membesar tanpa pecah. */
.stage-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + var(--safe-b));
  container-type: size;
}
.stage {
  position: relative;
  width: min(100cqw, 160cqh);
  aspect-ratio: 16 / 10;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  container-type: inline-size;
  /* Dalam kawasan main, seret-lepas tidak menatal halaman */
  touch-action: none;
}
/* Unit dalam stage: 1su = 1% lebar stage (berskala ikut saiz stage) */
.stage { --su: 1cqw; }

/* Pelayar lama tanpa container query: sandaran berasaskan viewport */
@supports not (width: 1cqw) {
  .stage {
    width: min(94vw, calc((100vh - var(--topbar-h) - 32px) * 1.6));
    --su: 0.94vw;
  }
}

/* ---------- Mesej "Pusingkan skrin" ---------- */
.rotate-hint {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-6);
  text-align: center;
  background: var(--c-primary);
  color: #fff;
}
.rotate-hint__phone {
  width: 96px;
  height: 96px;
  animation: rotate-phone 2.2s var(--ease-out) infinite;
}
.rotate-hint__text { font-size: var(--text-xl); font-weight: 900; max-width: 20ch; }
.rotate-hint__sub { font-size: var(--text-base); opacity: 0.9; max-width: 32ch; }
@keyframes rotate-phone {
  0%, 20% { transform: rotate(0deg); }
  55%, 100% { transform: rotate(-90deg); }
}

/* ---------- Toast ---------- */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-5) + var(--safe-b));
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
  pointer-events: none;
  width: min(92vw, 480px);
}

/* ---------- Stage automatik (Peringkat 3) ----------
   Untuk permainan: mengisi seluruh ruang yang ada (had 1280×820 pada skrin besar).
   Permainan menyesuaikan susun atur dengan @container stage (orientation: portrait).
   Unit: cqmin = sisi pendek kawasan main. */
.stage.stage--auto {
  container: stage / size;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  max-height: 820px;
  aspect-ratio: auto;
}

/* Dalam permainan: toast di atas supaya tidak menutup butang jawapan */
body.in-game .toast-host { top: calc(var(--topbar-h) + var(--safe-t) + 8px); bottom: auto; }
body.in-game .toast { font-size: var(--text-sm); }
@container (orientation: portrait) {
  .stage.stage--auto { max-width: 860px; max-height: 1280px; }
}

/* Skrin muat awal (Peringkat 7) */
.boot { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; }
.boot__name { font-weight: 900; font-size: var(--text-xl); color: var(--c-primary); margin: 8px 0 0; }
.boot__msg { color: var(--c-ink-soft, #5B5B6E); margin: 0; font-weight: 700; }
.screen.screen--first { animation: none; }