/* ==========================================================================
   Dunia Ceria - style.css
   ==========================================================================

   REUSABLE CLASSES FOR GAMES
   --------------------------
   Layout
     .stage            The game root (created by the core). Fills the screen below the
                       top bar; position:relative; overflow:hidden; touch-action:none.
     .stage-col        Flex column filling the stage (prompt on top, play area below).
     .play-area        Flexible area inside .stage-col (flex:1, centred content).
     .grid             Responsive auto-fit grid of big items. Tune with
                       --min (min column width) and --gap.  .grid.cols-2/.cols-3/.cols-4 fix columns.
     .row-center       Flex row, wrapped, centred, with gap.
     .center           Centre content both ways (flex).
     .fill             position:absolute; inset:0.
     .hidden           display:none !important.

   Controls (all >= 72px touch targets)
     .big-btn          Big round-cornered colourful button. Colour via --btn (default blue).
                       Modifiers: .round (circle), .ghost (white), .xl (larger).
     .card             White rounded card with soft shadow (tappable surface).
     .choice           Answer tile (picture/letter). Colour via --btn.
                       States: .correct (green glow + pop), .wrong (wobble), .dim (faded), .selected.
     .prompt-bar       Question strip: [.repeat-btn] [.prompt-pic] [.prompt-text].
                       Build it with KA.ui.promptBar({text, pic}).
     .repeat-btn       Big round speaker button (repeat the spoken question).

   Typography / pictures
     .emoji-xl / .emoji-lg / .emoji-md   Scalable emoji sizes (vmin based).
     .title-xl / .title-lg               Big friendly text.
     .glyph            Huge letter/number glyph.

   Animations (add class; restart with KA.util.animate(el, 'wobble'))
     .pop  .wobble  .bounce  .float  .pulse  .spin  .fade-in  .jump-in

   Design tokens (CSS variables on :root)
     --c-red --c-orange --c-yellow --c-green --c-teal --c-blue --c-indigo --c-purple --c-pink
     --ink --ink-soft --paper --radius --radius-sm --tap (72px) --gap --shadow --font
     --safe-t --safe-r --safe-b --safe-l (safe-area insets)
   ========================================================================== */

:root {
  --c-red: #ff6b6b;
  --c-orange: #ff9f43;
  --c-yellow: #ffd93d;
  --c-green: #4cd97b;
  --c-teal: #2ec4b6;
  --c-blue: #4dabf7;
  --c-indigo: #5c7cfa;
  --c-purple: #b197fc;
  --c-pink: #ff8fab;

  --ink: #2b2d42;
  --ink-soft: #5c6078;
  --paper: #fffdf7;
  --sky-1: #aee4ff;
  --sky-2: #fff1c1;

  --radius: clamp(18px, 4vmin, 34px);
  --radius-sm: clamp(12px, 2.4vmin, 20px);
  --tap: 72px;
  --gap: clamp(10px, 2.4vmin, 22px);
  --shadow: 0 6px 0 rgba(43, 45, 66, 0.16), 0 12px 24px rgba(43, 45, 66, 0.12);
  --shadow-sm: 0 4px 0 rgba(43, 45, 66, 0.14);

  --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", "Baloo 2", "Quicksand",
    "Varela Round", "Segoe UI", system-ui, -apple-system, "Roboto", "Noto Sans", "Helvetica Neue", Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

/* ---------- Reset & hardening ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  position: fixed;
  inset: 0;
  font-family: var(--font);
  font-size: clamp(16px, 2.4vmin, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 100%);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: default;
}

button {
  font: inherit;
  color: inherit;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:focus { outline: none; }
button:focus-visible { outline: 4px solid rgba(92, 124, 250, 0.7); outline-offset: 3px; }
button:disabled { opacity: 0.6; cursor: default; }

img, svg, canvas { display: block; max-width: 100%; -webkit-user-drag: none; }

.selectable, input, textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.hidden { display: none !important; }

#app { position: absolute; inset: 0; }

/* ---------- Boot splash ---------- */
.boot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.boot-sun {
  width: clamp(96px, 30vmin, 200px);
  height: clamp(96px, 30vmin, 200px);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe680, #ffd93d 60%, #ffb703);
  box-shadow: 0 0 0 clamp(8px, 2.6vmin, 18px) rgba(255, 159, 28, 0.45);
  animation: pulse 1.4s ease-in-out infinite;
}
.boot-name { font-size: clamp(24px, 7vmin, 48px); font-weight: 900; color: #ff7a00; margin: 0; }
.noscript {
  position: fixed; inset: auto 0 0 0; padding: 16px; background: #fff; text-align: center; z-index: 999;
}

/* ---------- Screens ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  animation: fade-in 0.25s ease both;
}

/* ---------- Home ---------- */
.home {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.home-head {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: clamp(10px, 2.4vmin, 22px) clamp(12px, 3vmin, 28px) 0;
  flex: 0 0 auto;
}
.mascot {
  flex: 0 0 auto;
  width: clamp(56px, 15vmin, 120px);
  height: clamp(56px, 15vmin, 120px);
}
.mascot svg { width: 100%; height: 100%; }
.home-titles { flex: 1 1 auto; min-width: 0; }
.app-title {
  margin: 0;
  font-size: clamp(22px, 6.4vmin, 52px);
  font-weight: 900;
  line-height: 1.05;
  color: #ff6f00;
  text-shadow: 0 2px 0 #fff, 0 4px 0 rgba(43, 45, 66, 0.12);
  letter-spacing: 0.01em;
}
.app-tagline {
  margin: 2px 0 0;
  font-size: clamp(12px, 2.6vmin, 20px);
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.star-counter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px clamp(10px, 2vmin, 18px);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: clamp(18px, 3.6vmin, 30px);
  font-weight: 900;
  color: #e67700;
}
.star-ico { font-size: 1.1em; line-height: 1; }

.parent-btn {
  flex: 0 0 auto;
  width: clamp(48px, 9vmin, 64px);
  height: clamp(48px, 9vmin, 64px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow-sm);
  font-size: clamp(22px, 4.4vmin, 32px);
  line-height: 1;
  display: grid;
  place-items: center;
  opacity: 0.9;
}

.home-grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(132px, 27vmin, 230px), 1fr));
  gap: var(--gap);
  padding: clamp(12px, 3vmin, 28px);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.home-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); padding: 24px; }

.game-card {
  --card: var(--c-blue);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.2vmin, 12px);
  min-height: clamp(128px, 27vmin, 230px);
  padding: clamp(10px, 2vmin, 18px);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 46%),
    var(--card);
  border: clamp(3px, 0.8vmin, 6px) solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  animation: jump-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.game-card:active { transform: scale(0.94) translateY(4px); box-shadow: var(--shadow-sm); }
.game-ico {
  font-size: clamp(52px, 14vmin, 112px);
  line-height: 1.05;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.14));
}
.game-title {
  max-width: 100%;
  padding: 4px clamp(10px, 2vmin, 18px);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: clamp(15px, 3vmin, 24px);
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-age {
  position: absolute;
  top: clamp(6px, 1.4vmin, 12px);
  left: clamp(6px, 1.4vmin, 12px);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink-soft);
  font-size: clamp(11px, 2vmin, 15px);
}
.game-lock {
  position: absolute;
  top: clamp(-6px, -1vmin, -4px);
  right: clamp(-6px, -1vmin, -4px);
  width: clamp(40px, 8vmin, 60px);
  height: clamp(40px, 8vmin, 60px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: clamp(20px, 4.2vmin, 32px);
  line-height: 1;
}
.game-card.locked { filter: saturate(0.45); }
.game-card.locked .game-ico { opacity: 0.75; }

.trial-pill {
  align-self: center;
  margin: 0 12px clamp(12px, 3vmin, 24px);
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-soft);
  font-size: clamp(12px, 2.2vmin, 16px);
  text-align: center;
}

/* ---------- Top bar & stage ---------- */
.topbar {
  --card: var(--c-blue);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: calc(var(--tap) + 12px);
  padding: 6px clamp(8px, 2vmin, 18px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
  border-bottom: 5px solid var(--card);
  z-index: 5;
}
.home-btn {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  background: var(--c-yellow);
  border: 4px solid #fff;
  box-shadow: var(--shadow-sm);
  font-size: 36px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform 0.12s ease;
}
.home-btn:active { transform: scale(0.9); }
.topbar-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: clamp(18px, 4vmin, 32px);
  font-weight: 900;
}
.topbar-ico { font-size: 1.3em; line-height: 1; }
.topbar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

/* ---------- Shared game utilities ---------- */
.stage-col { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap); }
.play-area { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.center { display: flex; align-items: center; justify-content: center; }
.row-center { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gap); }
.fill { position: absolute; inset: 0; }

.grid {
  --min: clamp(84px, 22vmin, 180px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  gap: var(--gap);
  width: 100%;
  align-content: center;
  justify-items: stretch;
}
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(10px, 2.4vmin, 22px);
}

.big-btn {
  --btn: var(--c-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 10px clamp(16px, 3.4vmin, 30px);
  border-radius: var(--radius);
  background: var(--btn);
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
  color: #fff;
  font-size: clamp(22px, 5vmin, 40px);
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.big-btn:active { transform: scale(0.93) translateY(4px); box-shadow: var(--shadow-sm); }
.big-btn.round { border-radius: 50%; padding: 0; width: clamp(72px, 16vmin, 120px); height: clamp(72px, 16vmin, 120px); }
.big-btn.ghost { background: #fff; color: var(--ink); text-shadow: none; }
.big-btn.xl { font-size: clamp(30px, 8vmin, 64px); min-height: clamp(88px, 18vmin, 140px); }

.choice {
  --btn: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: var(--tap);
  min-height: clamp(72px, 20vmin, 180px);
  padding: clamp(6px, 1.6vmin, 16px);
  border-radius: var(--radius);
  background: var(--btn);
  border: clamp(3px, 0.8vmin, 6px) solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow);
  font-size: clamp(40px, 12vmin, 104px);
  font-weight: 900;
  line-height: 1.05;
  color: var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
}
.choice:active { transform: scale(0.94) translateY(4px); box-shadow: var(--shadow-sm); }
.choice.selected { border-color: var(--c-indigo); box-shadow: 0 0 0 5px rgba(92, 124, 250, 0.35), var(--shadow); }
.choice.correct {
  border-color: var(--c-green);
  box-shadow: 0 0 0 6px rgba(76, 217, 123, 0.45), var(--shadow);
  animation: pop 0.5s ease;
}
.choice.wrong { animation: wobble 0.5s ease; }
.choice.dim { opacity: 0.4; }

.prompt-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: calc(var(--tap) + 16px);
  padding: 8px clamp(10px, 2.4vmin, 22px);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.repeat-btn {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  background: var(--c-blue);
  border: 4px solid #fff;
  box-shadow: var(--shadow-sm);
  font-size: 34px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform 0.12s ease;
}
.repeat-btn:active { transform: scale(0.9); }
.prompt-pic { flex: 0 0 auto; font-size: clamp(36px, 9vmin, 72px); line-height: 1; }
.prompt-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(20px, 5vmin, 40px);
  font-weight: 900;
  line-height: 1.15;
}

.emoji-xl { font-size: clamp(88px, 32vmin, 260px); line-height: 1.05; }
.emoji-lg { font-size: clamp(56px, 18vmin, 150px); line-height: 1.05; }
.emoji-md { font-size: clamp(36px, 10vmin, 84px); line-height: 1.05; }
.title-xl { font-size: clamp(30px, 9vmin, 72px); font-weight: 900; line-height: 1.1; margin: 0; }
.title-lg { font-size: clamp(22px, 6vmin, 48px); font-weight: 900; line-height: 1.15; margin: 0; }
.glyph { font-size: clamp(96px, 38vmin, 320px); font-weight: 900; line-height: 1; }

/* ---------- Animations ---------- */
.pop { animation: pop 0.45s ease; }
.wobble { animation: wobble 0.5s ease; }
.bounce { animation: bounce 0.9s ease infinite; }
.float { animation: float 3.2s ease-in-out infinite; }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
.spin { animation: spin 1.2s linear infinite; }
.fade-in { animation: fade-in 0.3s ease both; }
.jump-in { animation: jump-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  70% { transform: scale(0.94); }
  100% { transform: scale(1); }
}
@keyframes wobble {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-9%) rotate(-5deg); }
  35% { transform: translateX(8%) rotate(4deg); }
  55% { transform: translateX(-6%) rotate(-3deg); }
  75% { transform: translateX(4%) rotate(2deg); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: ease-out; }
  50% { transform: translateY(-16%); animation-timing-function: ease-in; }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7%) rotate(2deg); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes jump-in {
  from { opacity: 0; transform: scale(0.6) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes confetti-fall {
  0% { transform: translate3d(0, -12vh, 0) rotate(0deg); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate3d(var(--drift, 0), 112vh, 0) rotate(var(--spin, 360deg)); opacity: 0; }
}

/* ---------- Celebration ---------- */
.celebrate {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
}
.celebrate .piece {
  position: absolute;
  top: 0;
  width: clamp(8px, 1.8vmin, 14px);
  height: clamp(12px, 2.8vmin, 22px);
  border-radius: 3px;
  background: var(--c, #ffd93d);
  opacity: 0;
  animation: confetti-fall var(--dur, 1.6s) cubic-bezier(0.3, 0.5, 0.6, 1) var(--delay, 0s) forwards;
  will-change: transform;
}
.celebrate .piece.emoji {
  width: auto;
  height: auto;
  background: none;
  font-size: clamp(24px, 6vmin, 48px);
  line-height: 1;
}
.celebrate.calm { display: grid; place-items: center; }
.celebrate-badge { font-size: clamp(96px, 30vmin, 220px); line-height: 1; animation: fade-in 0.3s ease both; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 20px);
  transform: translateX(-50%);
  z-index: 70;
  max-width: min(92vw, 560px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: clamp(14px, 2.6vmin, 18px);
  text-align: center;
  box-shadow: var(--shadow);
  animation: fade-in 0.25s ease both;
  pointer-events: none;
}

/* ---------- Overlays & modals ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-t) + 10px) calc(var(--safe-r) + 10px) calc(var(--safe-b) + 10px) calc(var(--safe-l) + 10px);
  background: rgba(43, 45, 66, 0.55);
  animation: fade-in 0.2s ease both;
  overflow: auto;
  overscroll-behavior: contain;
}
.modal {
  position: relative;
  width: min(100%, 460px);
  max-height: 100%;
  overflow: auto;
  margin: auto;
  padding: clamp(14px, 3vmin, 26px);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.modal-text { margin: 4px 0 16px; font-size: clamp(16px, 2.8vmin, 20px); }
.modal-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.modal-actions.column { flex-direction: column; align-items: stretch; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 20px;
  border-radius: 16px;
  background: #e9ecf5;
  color: var(--ink);
  font-size: clamp(15px, 2.6vmin, 18px);
  font-weight: 800;
  box-shadow: 0 3px 0 rgba(43, 45, 66, 0.16);
  transition: transform 0.1s ease;
}
.btn:active { transform: translateY(2px); }
.btn.primary { background: var(--c-indigo); color: #fff; }
.btn.danger { background: #ffe3e3; color: #c92a2a; }
.btn.small { min-height: 44px; font-size: clamp(13px, 2.2vmin, 16px); padding: 8px 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }

/* Parent gate */
.gate-box { width: min(100%, 400px); padding-top: clamp(18px, 3vmin, 26px); }
.gate-title { margin: 0 44px 6px; font-size: clamp(18px, 3.4vmin, 24px); font-weight: 900; }
.gate-hint { margin: 0; font-size: clamp(13px, 2.4vmin, 16px); color: var(--ink-soft); font-weight: 600; }
.gate-question {
  margin: 8px 0;
  font-size: clamp(20px, 4.4vmin, 28px);
  font-weight: 900;
  color: var(--c-indigo);
}
.gate-display {
  margin: 0 auto 6px;
  width: min(100%, 200px);
  min-height: 52px;
  padding: 6px 12px;
  border-radius: 14px;
  border: 3px solid #d0d5ea;
  background: #fff;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.2;
}
.gate-msg { margin: 0 0 6px; min-height: 1.3em; font-size: clamp(13px, 2.4vmin, 16px); color: #c92a2a; }
.gate-close, .gate-lang {
  position: absolute;
  top: 8px;
  height: 44px;
  border-radius: 999px;
  background: #e9ecf5;
  font-size: 15px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.gate-close { right: 8px; width: 44px; font-size: 20px; }
.gate-lang { left: 8px; padding: 0 12px; font-size: 12px; }
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 1.4vmin, 10px);
  max-width: 320px;
  margin: 0 auto;
}
.key {
  min-height: clamp(44px, 9vmin, 62px);
  border-radius: 14px;
  background: #e9ecf5;
  font-size: clamp(20px, 4vmin, 26px);
  font-weight: 900;
  box-shadow: 0 3px 0 rgba(43, 45, 66, 0.16);
}
.key:active { transform: translateY(2px); background: #dfe3f0; }
.key-ok { background: var(--c-green); color: #fff; }
.key-del { background: #ffe3e3; color: #c92a2a; }

/* Rest screen */
.overlay.rest { background: linear-gradient(180deg, #27306b 0%, #5b4b9a 100%); z-index: 45; }
.rest-box { background: transparent; box-shadow: none; color: #fff; width: min(100%, 560px); }
.rest-art { font-size: clamp(88px, 30vmin, 200px); line-height: 1; }
.rest-zzz { font-size: clamp(32px, 8vmin, 60px); line-height: 1; margin-top: -0.4em; }
.rest-title { margin: 10px 0 6px; font-size: clamp(26px, 7vmin, 52px); font-weight: 900; }
.rest-text { margin: 0 0 clamp(16px, 5vmin, 40px); font-size: clamp(16px, 3.4vmin, 24px); font-weight: 600; opacity: 0.92; }
.rest-parent { background: rgba(255, 255, 255, 0.2); color: #fff; box-shadow: none; }

/* ---------- Parent area ---------- */
.parent { background: #f3f5fb; }
.parent-bar { border-bottom-color: var(--c-indigo); background: #fff; }
.parent-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: clamp(10px, 2.4vmin, 20px);
  font-weight: 600;
  font-size: clamp(15px, 2.4vmin, 18px);
}
.parent-body > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.panel {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: clamp(12px, 2.6vmin, 22px);
  margin-bottom: clamp(10px, 2.4vmin, 18px);
  box-shadow: 0 2px 10px rgba(43, 45, 66, 0.08);
}
.panel-title { margin: 0 0 10px; font-size: clamp(17px, 3vmin, 22px); font-weight: 900; }
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 0;
  border-top: 1px solid #eceff7;
}
.row:first-of-type { border-top: 0; }
.row-label { flex: 1 1 180px; min-width: 0; font-weight: 800; }
.row-note { display: block; font-weight: 600; color: var(--ink-soft); font-size: 0.85em; margin-top: 2px; }
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: #e9ecf5;
}
.seg-btn {
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 12px;
  font-size: clamp(14px, 2.3vmin, 17px);
  font-weight: 800;
  color: var(--ink-soft);
}
.seg-btn.on { background: #fff; color: var(--c-indigo); box-shadow: 0 2px 6px rgba(43, 45, 66, 0.16); }

.status {
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #eef1f8;
  font-weight: 800;
}
.status.good { background: #e6f9ed; color: #1b7a3d; }
.status.warn { background: #fff4d6; color: #8a5a00; }
.status.bad { background: #ffe3e3; color: #c92a2a; }
.status.notice { margin-bottom: clamp(10px, 2.4vmin, 18px); }
.help { margin: 0 0 10px; color: var(--ink-soft); }

.kv-list { margin: 0 0 12px; border-radius: 14px; background: #f6f7fc; padding: 4px 14px; }
.kv { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 8px 0; border-top: 1px solid #e6e9f4; }
.kv:first-child { border-top: 0; }
.kv-k { color: var(--ink-soft); }
.kv-v { font-weight: 800; word-break: break-word; text-align: right; }

.lic-input {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 12px;
  border-radius: 14px;
  border: 2px solid #cfd5ea;
  background: #fff;
  color: var(--ink);
  font: 600 14px/1.4 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  resize: vertical;
  word-break: break-all;
}
.lic-input:focus { outline: none; border-color: var(--c-indigo); }

.progress-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 16px;
  margin: 0 0 12px;
}
.progress-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.progress-ico { font-size: 26px; line-height: 1; }
.progress-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-stars { font-weight: 900; color: #e67700; white-space: nowrap; }

/* ---------- Landscape phones (short screens) ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .topbar { min-height: calc(var(--tap) + 4px); padding-top: 2px; padding-bottom: 2px; border-bottom-width: 4px; }
  .home-head { padding-top: 6px; }
  .mascot { width: clamp(44px, 16vh, 72px); height: clamp(44px, 16vh, 72px); }
  .home-grid { grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 34vh, 170px), 1fr)); padding-top: 8px; }
  .game-card { min-height: clamp(110px, 38vh, 170px); }
  .prompt-bar { min-height: var(--tap); padding-top: 2px; padding-bottom: 2px; }
  .stage-col { gap: 8px; padding: 8px; }
  .gate-box { width: min(100%, 560px); }
  .keypad { grid-template-columns: repeat(6, 1fr); max-width: none; }
  .gate-display { min-height: 44px; font-size: 24px; }
  .rest-art { font-size: clamp(56px, 26vh, 120px); }
}

/* ---------- Very small phones ---------- */
@media (max-width: 359px) {
  .app-tagline { display: none; }
  .home-head { gap: 8px; }
  .home-grid { gap: 10px; padding: 10px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .float, .bounce, .pulse, .spin, .boot-sun { animation: none !important; }
}