/* MindRocket design system. Bright, friendly space adventure. Touch targets ≥ 64px. No strobes. */
:root {
  --sky: #E9F6FF;
  --sky2: #D3EBFF;
  --orange: #FF8A3D;
  --pink: #FF5FA2;
  --lime: #7ED957;
  --violet: #7C5CFF;
  --sun: #FFD23F;
  --navy: #1B1F3B;
  --cyan: #5BC0F8;
  --white: #fff;
  --ink2: #4A5078;
  --card: #fff;
  --shadow: 0 10px 30px rgba(27, 31, 59, .12);
  --r: 24px;
  --head: 'Baloo 2', 'Arial Rounded MT Bold', 'Nunito', system-ui, sans-serif;
  --text: 'Atkinson Hyperlegible', 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tap: 64px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--sky);
  color: var(--navy);
  font: 18px/1.4 var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
}
button { font: inherit; color: inherit; }
h1, h2, h3, .head { font-family: var(--head); font-weight: 800; line-height: 1.05; margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 4px solid var(--violet); outline-offset: 3px; border-radius: 12px; }

#app { position: fixed; inset: 0; overflow: hidden; }
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: calc(12px + var(--safe-t)) 16px calc(12px + var(--safe-b));
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.2);
  overflow-y: auto; overflow-x: hidden;
}
.screen.in { opacity: 1; transform: none; }
.screen.out { opacity: 0; transform: translateY(-10px) scale(.99); pointer-events: none; }

/* ---------- Buttons ---------- */
.btn {
  --btn: var(--violet);
  --btn-dark: rgba(27, 31, 59, .35); /* older Safari (no color-mix); see @supports below */
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: var(--tap); min-height: var(--tap); padding: 10px 22px;
  border: 0; border-radius: 22px; cursor: pointer;
  background: var(--btn); color: #fff;
  font-family: var(--head); font-weight: 800; font-size: 24px; letter-spacing: .2px;
  box-shadow: 0 6px 0 var(--btn-dark), 0 10px 20px rgba(27, 31, 59, .18);
  transition: transform .12s ease, box-shadow .12s ease, filter .2s;
  position: relative;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .btn { --btn-dark: color-mix(in srgb, var(--btn) 70%, #000); }
}
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--btn-dark), 0 4px 10px rgba(27, 31, 59, .15); }
.btn .ico { width: 30px; height: 30px; flex: none; }
.btn .gico { width: 44px; height: 44px; flex: none; }
.btn.light { --btn: #fff; --btn-dark: #C9D6EA; color: var(--navy); }
.btn.round { border-radius: 50%; padding: 0; width: var(--tap); height: var(--tap); }
.btn.small { --tap: 64px; font-size: 20px; }
.btn.orange { --btn: var(--orange); }
.btn.pink { --btn: var(--pink); }
.btn.lime { --btn: #4CC23A; }
.btn.sun { --btn: var(--sun); color: var(--navy); --btn-dark: #D9A800; }
.btn[disabled] { filter: grayscale(.8) opacity(.6); pointer-events: none; }
.boing { animation: boing .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes boing { 0% { scale: 1; } 30% { scale: .9 1.08; } 60% { scale: 1.06 .95; } 100% { scale: 1; } }

.play-big {
  width: 132px; height: 132px; border-radius: 50%; padding: 0;
  --btn: var(--orange); --btn-dark: #D9621A;
  box-shadow: 0 8px 0 var(--btn-dark), 0 18px 40px rgba(255, 138, 61, .45);
}
.play-big .ico { width: 64px; height: 64px; margin-left: 8px; }
.play-big::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 5px solid var(--orange); opacity: 0; animation: ring 1.8s ease-out infinite;
}
@keyframes ring { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }

.hold { --btn: #fff; --btn-dark: #C9D6EA; color: var(--ink2); border-radius: 50%; padding: 0; width: 56px; height: 56px; min-width: 56px; min-height: 56px; }
.hold .ico { width: 24px; height: 24px; }
.hold-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; }
.hold-ring circle { fill: none; stroke: var(--pink); stroke-width: 4; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }
.hold.holding { transform: scale(.94); }

/* ---------- Splash ---------- */
.splash { justify-content: center; gap: 18px; text-align: center; background: radial-gradient(circle at 50% 35%, #fff 0, var(--sky) 55%, var(--sky2) 100%); }
.splash .bip { width: min(220px, 48vw); height: auto; }
.splash h1 { font-size: clamp(40px, 9vw, 64px); color: var(--violet); letter-spacing: -.5px; }
.splash h1 span { color: var(--orange); }
.logo-rocket { display: inline-block; width: .8em; height: .8em; vertical-align: -.05em; }

/* ---------- Bip ---------- */
.bip { width: 150px; height: auto; overflow: visible; }
.bip .bip-eye { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
.bip .bip-pupil { transition: transform .3s ease; }
.bip .bip-happy-eyes, .bip .bip-closed-eyes, .bip .bip-brows, .bip .bip-mouth, .bip .bip-zz { display: none; }
.bip .bip-jump, .bip .bip-body, .bip .bip-arm, .bip .bip-antenna { transform-box: fill-box; }
.bip .bip-body { transform-origin: 50% 100%; animation: float 3.2s ease-in-out infinite; }
.bip .bip-arm-l { transform-origin: 80% 20%; }
.bip .bip-arm-r { transform-origin: 20% 20%; }
.bip .bip-bulb { animation: bulb 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bip[data-mood=idle] .bip-smile, .bip[data-mood=happy] .bip-smile, .bip[data-mood=dance] .bip-smile, .bip[data-mood=wave] .bip-smile, .bip[data-mood=sleep] .bip-flat { display: inline; }
.bip[data-mood=wow] .bip-o, .bip[data-mood=think] .bip-flat, .bip[data-mood=oops] .bip-wobble, .bip[data-mood=oops] .bip-brows { display: inline; }
.bip[data-mood=happy] .bip-eyes, .bip[data-mood=dance] .bip-eyes, .bip[data-mood=sleep] .bip-eyes { display: none; }
.bip[data-mood=happy] .bip-happy-eyes, .bip[data-mood=dance] .bip-happy-eyes, .bip[data-mood=sleep] .bip-closed-eyes, .bip[data-mood=sleep] .bip-zz { display: inline; }
.bip[data-mood=happy] .bip-jump { animation: hop .6s cubic-bezier(.3, 1.5, .5, 1) 2; transform-origin: 50% 100%; }
.bip[data-mood=wow] .bip-jump { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 50% 60%; }
.bip[data-mood=think] .bip-pupil { transform: translate(4px, -6px); }
.bip[data-mood=think] .bip-jump { transform: rotate(-5deg); transform-origin: 50% 100%; transition: transform .3s; }
.bip[data-mood=oops] .bip-jump { animation: wobble .7s ease-in-out; transform-origin: 50% 100%; }
.bip[data-mood=dance] .bip-jump { animation: dance .8s ease-in-out infinite; transform-origin: 50% 100%; }
.bip[data-mood=dance] .bip-arm-l { animation: wave-l .4s ease-in-out infinite alternate; }
.bip[data-mood=dance] .bip-arm-r, .bip[data-mood=wave] .bip-arm-r { animation: wave-r .35s ease-in-out infinite alternate; }
.bip[data-mood=sleep] .bip-body { animation: breathe 3.5s ease-in-out infinite; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes bulb { 0%, 100% { fill: #FFD23F; } 50% { fill: #FFF2A8; } }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1); } 20% { transform: translateY(2px) scale(1.05, .93); } 50% { transform: translateY(-22px) scale(.97, 1.04); } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 60% { transform: rotate(5deg); } }
@keyframes dance { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-8px); } }
@keyframes wave-r { from { transform: rotate(10deg); } to { transform: rotate(-70deg); } }
@keyframes wave-l { from { transform: rotate(-10deg); } to { transform: rotate(60deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025, .98); } }

/* ---------- Galaxy map ---------- */
.galaxy-screen { padding: 0; background: linear-gradient(180deg, #2E2385 0%, #5B45E6 38%, #9C8BFF 70%, #CFE6FF 100%); color: #fff; }
.galaxy-screen canvas.stars { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hud {
  position: sticky; top: 0; z-index: 5; width: 100%; display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--safe-t)) 12px 10px; background: linear-gradient(180deg, rgba(46, 35, 133, .85), rgba(46, 35, 133, 0));
}
.pill {
  display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px 0 8px; border-radius: 999px; flex: none;
  background: rgba(255, 255, 255, .95); color: var(--navy); font: 800 20px var(--head); box-shadow: var(--shadow);
}
.pill .ico { width: 26px; height: 26px; color: var(--sun); filter: drop-shadow(0 1px 0 #C99600); }
.pill.bp .ico { color: var(--pink); filter: none; }
.hud .grow { flex: 1; }
.hud { gap: 8px; }
.hud .btn.small { --tap: 56px; }
/* Phones: stars, Brain Power, music and the grown-ups lock must all fit on one line. */
@media (max-width: 430px) {
  .hud { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .hud .avatar-btn { width: 52px; height: 52px; }
  .hud .pill { height: 40px; padding: 0 10px 0 6px; font-size: 18px; }
  .hud .pill .ico { width: 22px; height: 22px; }
  .hud .hold { width: 52px; height: 52px; min-width: 52px; min-height: 52px; }
  .hud .btn.small { --tap: 52px; }
  /* The duel turn bar also holds both players' faces, round dots and the score. */
  .du-turn > .gbar .btn.small { --tap: 56px; }
}
@media (max-width: 370px) { .pill.bp { display: none; } }
.avatar-btn { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 4px solid #fff; background: var(--sky); padding: 0; overflow: hidden; box-shadow: var(--shadow); cursor: pointer; }
.avatar-btn svg { width: 100%; height: 100%; }
.map { position: relative; width: 100%; max-width: 640px; margin: 0 auto; flex: none; }
.map .path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.planet {
  position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border: 0; padding: 0; border-radius: 50%;
  background: transparent; cursor: pointer; transition: transform .2s;
}
.planet .orb {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .75) 0 10%, transparent 11%), radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 58%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .35)), var(--pc);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .55), 0 14px 26px rgba(20, 10, 80, .35);
  animation: orbit-float 5s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.planet .ring { position: absolute; left: -16%; right: -16%; top: 40%; height: 26%; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .7); transform: rotate(-14deg); pointer-events: none; }
.planet .gico { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; transform: translate(-50%, -50%); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .2)); }
.planet .lvl { position: absolute; right: -6px; bottom: -4px; min-width: 40px; height: 34px; padding: 0 8px; border-radius: 17px; background: #fff; color: var(--navy); font: 800 18px/34px var(--head); box-shadow: var(--shadow); }
.planet.locked .orb { filter: grayscale(.85) brightness(.85); }
.planet.locked .gico { opacity: .35; }
.planet .lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; color: #fff; font: 800 18px var(--head); text-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.planet .lock .ico { width: 34px; height: 34px; }
.planet .lock .need { display: inline-flex; align-items: center; gap: 2px; }
.planet .lock .need .ico { width: 20px; height: 20px; color: var(--sun); }
.planet.new .orb::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 4px dashed #fff; animation: spin 8s linear infinite; }
.planet.academy { width: 132px; height: 132px; margin: -66px 0 0 -66px; }
.planet.academy .gico { width: 72px; height: 72px; }
.deco { position: absolute; border-radius: 50%; pointer-events: none; opacity: .95; }
.deco-moon { box-shadow: inset -8px -6px 0 rgba(0, 0, 0, .12); }
@keyframes orbit-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.dock {
  position: sticky; bottom: 0; z-index: 5; width: 100%; display: flex; justify-content: center; align-items: flex-end; gap: 14px;
  padding: 18px 14px calc(14px + var(--safe-b)); background: linear-gradient(0deg, rgba(207, 230, 255, .95), rgba(207, 230, 255, 0));
}
.mission-btn { --btn: var(--orange); --btn-dark: #D9621A; height: 84px; padding: 0 28px; font-size: 28px; border-radius: 28px; }
.mission-btn .gico { width: 56px; height: 56px; }
.mission-btn.done { --btn: #4CC23A; --btn-dark: #2E8F20; }
.galaxy-bip { position: fixed; left: 8px; bottom: calc(96px + var(--safe-b)); z-index: 4; width: 92px; pointer-events: auto; cursor: pointer; }

/* ---------- Planet card / modal ---------- */
.modal-back { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(27, 31, 59, .45); opacity: 0; transition: opacity .25s; }
.modal-back.in { opacity: 1; }
.modal {
  width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 32px; padding: 24px; text-align: center;
  box-shadow: 0 30px 60px rgba(27, 31, 59, .3); transform: scale(.9); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.modal-back.in .modal { transform: none; }
.pcard .gico { width: 110px; height: 110px; }
.pcard h2 { font-size: 36px; margin: 6px 0 2px; }
.pcard .row { display: flex; gap: 12px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.lvl-meter { display: flex; align-items: center; justify-content: center; gap: 8px; font: 800 22px var(--head); color: var(--ink2); }
.lvl-meter .bar { width: 140px; height: 16px; border-radius: 8px; background: #EEF1FA; overflow: hidden; }
.lvl-meter .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--lime), var(--sun)); border-radius: 8px; }

/* ---------- Game screen ---------- */
.game-screen { background: radial-gradient(circle at 50% 0, #fff 0, var(--sky) 60%); padding-top: 0; }
.gbar { width: 100%; max-width: 900px; display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--safe-t)) 0 8px; flex: none; }
.gbar .gtitle { display: flex; align-items: center; gap: 8px; font: 800 22px var(--head); }
.gbar .gtitle .gico { width: 44px; height: 44px; }
.gbar .grow { flex: 1; }
.progress { flex: 1; height: 18px; border-radius: 9px; background: #DCE8F7; overflow: hidden; max-width: 360px; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--violet), var(--pink)); border-radius: 9px; transition: width .4s ease; }
.stage { position: relative; width: 100%; max-width: 900px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 0; }
.game-bip { position: absolute; right: 4px; bottom: calc(4px + var(--safe-b)); width: 84px; z-index: 2; pointer-events: none; }
.hint-line { font: 800 26px var(--head); color: var(--violet); min-height: 34px; text-align: center; }
.big-icon { width: 72px; height: 72px; }

/* intro (instructions + demo) */
.intro { justify-content: center; gap: 14px; text-align: center; }
.intro .demo { position: relative; width: min(340px, 86vw); aspect-ratio: 1; border-radius: 28px; background: #fff; box-shadow: var(--shadow); overflow: hidden; display: grid; place-items: center; }
.intro h2 { font-size: clamp(30px, 7vw, 44px); display: flex; align-items: center; gap: 10px; }
.intro h2 .gico { width: 56px; height: 56px; }
.intro .row { display: flex; gap: 14px; align-items: center; }
.finger { position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin: -6px 0 0 -14px; color: #fff; opacity: 0; transition: transform .45s cubic-bezier(.3, .8, .3, 1), opacity .2s; pointer-events: none; z-index: 10; filter: drop-shadow(0 3px 0 var(--navy)) drop-shadow(0 6px 8px rgba(0, 0, 0, .25)); }
.finger svg { width: 100%; height: 100%; color: #fff; stroke: var(--navy); stroke-width: 1.2px; }
.finger.on { opacity: 1; }
.finger.press svg { transform: scale(.85); transition: transform .1s; }
.demo-press { filter: brightness(1.15); transform: scale(.94); transition: transform .1s; }

/* results */
.results { justify-content: center; gap: 14px; text-align: center; }
.results .stars3 { display: flex; gap: 6px; }
.results .stars3 .ico { width: 76px; height: 76px; color: #DCE3F0; }
.results .stars3 .ico.on { color: var(--sun); filter: drop-shadow(0 4px 0 #D9A800); animation: star-in .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.results .stars3 .ico.on:nth-child(2) { animation-delay: .25s; margin-top: -16px; }
.results .stars3 .ico.on:nth-child(3) { animation-delay: .5s; }
@keyframes star-in { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
.results h2 { font-size: clamp(32px, 8vw, 48px); color: var(--violet); }
.bp-up { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); font: 800 26px var(--head); color: var(--pink); }
.bp-up .ico { width: 28px; height: 28px; }
.record-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 22px; background: var(--sun); box-shadow: 0 6px 0 #D9A800; font: 800 24px var(--head); }
.record-card .ico { width: 40px; height: 40px; }

/* praise bubble */
.praise { position: fixed; left: 50%; top: calc(84px + var(--safe-t)); z-index: 40; transform: translate(-50%, -20px) scale(.8); opacity: 0; padding: 12px 24px; border-radius: 999px; background: var(--lime); color: var(--navy); font: 800 28px var(--head); box-shadow: 0 6px 0 #4CA63A; transition: all .35s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; white-space: nowrap; }
.praise.in { opacity: 1; transform: translate(-50%, 0) scale(1); }
canvas.fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }

/* ---------- Keypad + answer display ---------- */
.answer { min-width: min(320px, 80vw); min-height: 72px; padding: 6px 18px; border-radius: 22px; background: #fff; box-shadow: inset 0 3px 0 rgba(27, 31, 59, .08), var(--shadow); font: 800 46px/60px var(--head); letter-spacing: 6px; text-align: center; color: var(--navy); }
.answer.good { background: #E4F9DD; }
.answer.bad { background: #FFF1E6; }
.keypad { display: grid; grid-template-columns: repeat(3, minmax(72px, 96px)); gap: 10px; }
.key { min-height: 68px; border: 0; border-radius: 20px; background: #fff; color: var(--navy); font: 800 34px var(--head); box-shadow: 0 5px 0 #C9D6EA; cursor: pointer; display: grid; place-items: center; }
.key:active { transform: translateY(4px); box-shadow: 0 1px 0 #C9D6EA; }
.key .ico { width: 34px; height: 34px; }
.key-back { color: var(--ink2); }
.key-ok { background: #4CC23A; color: #fff; box-shadow: 0 5px 0 #2E8F20; }
/* Short and wide (a phone on its side): two rows of six keys. Small portrait phones keep 3 columns. */
@media (max-height: 640px) and (min-width: 520px) {
  .keypad { grid-template-columns: repeat(6, minmax(64px, 76px)); }
  .key { min-height: 64px; font-size: 30px; }
  .answer { min-height: 60px; font-size: 38px; line-height: 50px; }
}

/* ---------- Generic cards / pics ---------- */
.pic { width: 100%; height: 100%; display: block; }
.card-grid { display: grid; gap: 10px; width: 100%; }
.tile { border: 0; padding: 0; border-radius: 18px; background: #fff; box-shadow: 0 5px 0 #C9D6EA; cursor: pointer; display: grid; place-items: center; min-width: 64px; min-height: 64px; }
.tile:active { transform: translateY(3px); box-shadow: 0 2px 0 #C9D6EA; }
.tile.right { background: #E4F9DD; box-shadow: 0 5px 0 #7ED957; }
.tile.wrong { background: #FFF1E6; box-shadow: 0 5px 0 #FFB98A; }

/* ---------- Calm screens (limit, brain break, welcome back) ---------- */
.calm { justify-content: center; gap: 18px; text-align: center; background: linear-gradient(180deg, #2E2385, #5B45E6 60%, #9C8BFF); color: #fff; }
.calm h1 { font-size: clamp(34px, 8vw, 54px); }
.calm .bip { width: 180px; }
.moon-big { width: 120px; height: 120px; border-radius: 50%; background: var(--sun); box-shadow: inset -22px -10px 0 #E8B800, 0 0 60px rgba(255, 210, 63, .5); }

/* ---------- Avatar picker ---------- */
.avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; width: min(560px, 100%); }
.avatar-pick { border: 0; padding: 8px; border-radius: 26px; background: #fff; box-shadow: 0 6px 0 #C9D6EA; cursor: pointer; aspect-ratio: 1; }
.avatar-pick[aria-pressed=true] { box-shadow: 0 0 0 5px var(--violet), 0 6px 0 #C9D6EA; }
.avatar-pick svg { width: 100%; height: 100%; }

@media (orientation: landscape) and (max-height: 560px) {
  .planet { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
  .splash .bip { width: 150px; }
  .play-big { width: 110px; height: 110px; }
  .intro .demo { width: min(260px, 44vh); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .screen { transform: none; }
}

/* ================= Games ================= */
.hint-line .ico { width: 44px; height: 44px; color: var(--violet); }
.hint-line.back .ico { color: var(--pink); }
.intro .demo .finger { width: 48px; height: 48px; }

/* Light Grid */
.lg-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; width: min(94vw, 58vh, 560px); aspect-ratio: 1; padding: 10px; border-radius: 26px; background: var(--navy); box-shadow: 0 10px 0 #0E1130, var(--shadow); }
.lg-grid.mini { width: 76%; }
.lg-tile { border: 0; border-radius: 14px; background: #3A4078; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25); cursor: pointer; position: relative; color: transparent; transition: background .18s ease, box-shadow .18s ease, transform .1s; min-width: 0; min-height: 0; padding: 0; }
.lg-tile:active { transform: scale(.95); }
.lg-tile .lg-star { position: absolute; inset: 22%; width: 56%; height: 56%; opacity: 0; transition: opacity .18s; color: #fff; }
.lg-tile.lit { background: var(--sun); box-shadow: 0 0 0 4px rgba(255, 210, 63, .45), 0 0 24px rgba(255, 210, 63, .8); }
.lg-tile.lit .lg-star { opacity: .9; color: #fff; }
.lg-tile.ok { background: #4CC23A; }
.lg-tile.ok .lg-star { opacity: 1; }
.lg-tile.miss { background: #FF9F6E; }
.lg-tile.show-n::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(20px, 5vw, 34px) var(--head); color: var(--navy); }
.lg-grid.watching .lg-tile { pointer-events: none; }

/* Pair Hunt */
.pc-grid { display: grid; grid-template-columns: repeat(var(--c), 1fr); gap: 8px; width: min(94vw, calc((100vh - 170px) * var(--c) / var(--r, 2) / 1.15), 720px); perspective: 900px; }
.pc-grid.mini { width: 70%; }
.pcard { border: 0; padding: 0; background: none; aspect-ratio: 1 / 1.15; cursor: pointer; min-width: 0; }
.pc-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.pcard.up .pc-inner { transform: rotateY(180deg); }
.pc-back, .pc-face { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; }
.pc-back { background: var(--violet) radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .25) 0 18%, transparent 19%) 0 0 / 50% 50%; box-shadow: 0 5px 0 #5B3FE0; border: 3px solid #fff; }
.pc-face { background: #fff; transform: rotateY(180deg); box-shadow: 0 5px 0 #C9D6EA; padding: 10%; }
.pc-face .pic { width: 100%; height: 100%; }
.pc-text { font: 800 clamp(20px, 6vw, 40px)/1 var(--head); color: var(--navy); }
.pc-text.small { font-size: clamp(16px, 4.6vw, 30px); }
.pc-text.word { font-family: var(--text); font-weight: 700; font-size: clamp(16px, 4.4vw, 28px); }
.pcard.matched .pc-face { background: #E4F9DD; box-shadow: 0 5px 0 #7ED957; animation: matched .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes matched { 50% { transform: rotateY(180deg) scale(1.08); } }

/* Number Rocket */
.nr-rocket { position: relative; width: min(190px, 34vh); transition: transform .9s cubic-bezier(.6, 0, .9, .4); }
.nr-rocket.mini { width: 110px; }
.nr-rocket .nr-svg { width: 100%; height: auto; display: block; }
.nr-rocket .flame { transform-origin: 50% 80%; animation: flame .35s ease-in-out infinite alternate; transform-box: fill-box; }
@keyframes flame { from { transform: scaleY(.85); } to { transform: scaleY(1.1); } }
.nr-window { position: absolute; left: 50%; top: 40%; width: 56%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 6px solid var(--navy); display: grid; place-items: center; font: 800 clamp(48px, 13vh, 96px)/1 var(--head); color: var(--violet); }
.nr-rocket.mini .nr-window { font-size: 40px; border-width: 4px; }
.nr-window.pop { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.nr-rocket.launch { transform: translateY(-130vh); }
.nr-demo { display: flex; align-items: center; gap: 12px; transform: scale(.82); }
.answer.mini { min-width: 120px; min-height: 48px; font-size: 30px; line-height: 40px; margin-bottom: 8px; }
.keypad.mini { grid-template-columns: repeat(3, 44px); gap: 6px; }
.keypad.mini .key { min-height: 40px; font-size: 20px; border-radius: 12px; }
.keypad.mini .key .ico { width: 20px; height: 20px; }
.answer.replay { margin-top: -6px; }
.nr-back { display: flex; gap: 0; color: var(--pink); }
.nr-back .ico { width: 40px; height: 40px; margin-right: -14px; }

/* Focus Fish */
.ff-ocean { position: relative; width: min(96vw, 900px); flex: 1; min-height: 300px; max-height: 70vh; border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, #7FD3FF 0%, #3DB8F5 55%, #2A8FD6 100%); box-shadow: inset 0 -20px 40px rgba(0, 40, 90, .25); touch-action: none; }
.ff-ocean::before { content: ''; position: absolute; inset: auto 0 0 0; height: 40px; background: radial-gradient(circle at 10% 100%, #F5D58A 0 30px, transparent 31px), radial-gradient(circle at 60% 110%, #F5D58A 0 50px, transparent 51px); }
.ff-ocean.mini { width: 100%; height: 100%; min-height: 0; border-radius: 0; }
.ff-creature { position: absolute; left: 0; top: 0; width: 104px; height: 80px; padding: 0; border: 0; background: none; cursor: pointer; }
.ff-creature.shark { width: 130px; height: 80px; }
.ff-creature.jelly { width: 70px; height: 90px; }
.ff-creature svg { width: 100%; height: 100%; transform: scaleX(var(--flip, 1)); filter: drop-shadow(0 4px 0 rgba(0, 40, 90, .25)); pointer-events: none; }
.ff-creature.caught svg { animation: caught .35s ease-out forwards; }
@keyframes caught { to { transform: scaleX(var(--flip, 1)) scale(1.4); opacity: 0; } }
.ff-creature.oops svg { animation: oopsy .5s ease-in-out; }
@keyframes oopsy { 25% { transform: scaleX(var(--flip, 1)) rotate(-10deg); } 75% { transform: scaleX(var(--flip, 1)) rotate(10deg); } }
.ff-score { display: flex; flex-wrap: wrap; gap: 2px; min-height: 34px; color: var(--sun); }
.ff-score .ico { width: 28px; height: 28px; filter: drop-shadow(0 2px 0 #C99600); }
.ff-no { position: absolute; right: 16%; top: 52%; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: #FF5A5A; display: grid; place-items: center; box-shadow: var(--shadow); }
.ff-no .ico { width: 44px; height: 44px; }
.ff-rule { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 30px; background: rgba(255, 255, 255, .85); }
.ff-rule > span { position: relative; width: 120px; height: 100px; }
.ff-rule > span .ico { position: absolute; right: -10px; bottom: -10px; width: 54px; height: 54px; border-radius: 50%; padding: 6px; color: #fff; }
.ff-yes .ico { background: #4CC23A; }
.ff-nope .ico { background: #FF5A5A; }

/* Echo Band */
.eb-band { display: grid; gap: 14px; width: min(92vw, 520px); grid-template-columns: repeat(2, 1fr); }
.eb-band[data-n="3"], .eb-band[data-n="5"], .eb-band[data-n="6"] { grid-template-columns: repeat(3, 1fr); }
.eb-band.mini { width: 70%; gap: 8px; }
.eb-pad { aspect-ratio: 1; border: 0; border-radius: 26px; background: var(--pc); box-shadow: 0 8px 0 var(--pd); cursor: pointer; display: grid; place-items: center; position: relative; transition: transform .1s, filter .15s, box-shadow .15s; min-height: 80px; }
.eb-pad .eb-shape { width: 46%; height: 46%; opacity: .9; }
.eb-pad.on { filter: brightness(1.25) saturate(1.1); transform: translateY(4px) scale(1.04); box-shadow: 0 4px 0 var(--pd), 0 0 0 6px rgba(255, 255, 255, .8), 0 0 30px var(--pc); }
.eb-band.listening .eb-pad { pointer-events: none; }
.eb-pad.show-n::after { content: attr(data-n); position: absolute; top: 6px; left: 10px; font: 800 26px var(--head); color: #fff; }
.eb-band.cheer .eb-pad { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }

/* Math Memory */
.mm-screen { min-width: min(320px, 84vw); min-height: 150px; padding: 16px 28px; border-radius: 30px; background: var(--navy); color: #fff; display: grid; place-items: center; font: 800 clamp(48px, 13vw, 84px)/1 var(--head); box-shadow: 0 10px 0 #0E1130; }
.mm-screen.ask { color: var(--sun); }
.mm-screen.mini { min-width: 150px; min-height: 70px; font-size: 40px; border-radius: 18px; }
.mm-screen.pop { animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.mm-dots { display: flex; gap: 8px; }
.mm-dots i { width: 16px; height: 16px; border-radius: 50%; background: #DCE8F7; }
.mm-dots i.on { background: var(--violet); }
.mm-work { display: grid; gap: 6px; font: 800 30px var(--head); color: var(--violet); text-align: center; }
.mm-demo { display: flex; flex-direction: column; align-items: center; gap: 8px; transform: scale(.85); }

/* Shape Spin */
.ss-pair { display: flex; gap: 16px; justify-content: center; width: 100%; }
.ss-card { position: relative; width: min(42vw, 40vh, 300px); aspect-ratio: 1; background: #fff; border-radius: 26px; box-shadow: var(--shadow); display: grid; place-items: center; border: 0; padding: 0; }
.ss-card.top { width: min(44vw, 30vh, 220px); }
.ss-shape { width: 74%; height: 74%; transition: transform .8s cubic-bezier(.4, 0, .2, 1); }
.ss-ghost { position: absolute; inset: 13%; opacity: 0; transition: transform .8s cubic-bezier(.4, 0, .2, 1), opacity .3s; }
.ss-ghost.on { opacity: .75; }
.ss-btns { display: flex; gap: 16px; }
.ss-btn { min-width: 150px; height: 84px; font-size: 26px; }
.ss-btn.mirror { --btn: var(--violet); }
.ss-btn.picked { outline: 6px solid var(--lime); }
.ss-btn.wrong { filter: saturate(.5); }
.ss-opts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ss-opt { width: min(28vw, 26vh, 200px); cursor: pointer; }
.ss-opt.picked { box-shadow: 0 0 0 6px var(--lime), var(--shadow); }
.ss-opt.wrong { box-shadow: 0 0 0 6px #FFB98A, var(--shadow); }
.ss-demo { display: flex; flex-direction: column; align-items: center; gap: 10px; transform: scale(.82); }
.ss-demo .ss-card { width: 120px; }
.ss-btn.mini { width: 74px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #4CC23A; color: #fff; }
.ss-btn.mini.mirror { background: var(--violet); }
.ss-btn.mini .ico { width: 32px; height: 32px; }
.ss-btn.mini.picked { outline: 5px solid var(--sun); }

/* What Changed? */
.wc-wrap { position: relative; }
.wc-scene { display: grid; grid-template-columns: repeat(var(--c), 1fr); gap: 8px; width: min(94vw, calc((100vh - 220px) * var(--c) / var(--r)), 640px); padding: 12px; border-radius: 28px; background: #FFF8E8; box-shadow: inset 0 -8px 0 #F1DFC0, var(--shadow); }
.wc-scene.mini { width: 78%; padding: 8px; gap: 4px; }
.wc-slot { aspect-ratio: 1; border: 0; padding: 8%; border-radius: 18px; background: rgba(255, 255, 255, .55); display: grid; place-items: center; cursor: pointer; min-width: 0; }
.wc-obj { width: 100%; height: 100%; display: block; transition: transform .3s; }
.wc-obj.big { transform: scale(1.32); }
.wc-slot.found { box-shadow: 0 0 0 6px var(--lime); background: #E4F9DD; animation: pop .4s; }
.wc-slot.nope { box-shadow: 0 0 0 5px #FFB98A; }
.wc-timer { width: min(300px, 70vw); height: 12px; border-radius: 6px; background: #DCE8F7; overflow: hidden; }
.wc-timer i { display: block; height: 100%; background: var(--lime); animation: shrink linear forwards; transform-origin: left; }
@keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.wc-cloud { position: absolute; inset: -12px; border-radius: 40px; background: radial-gradient(circle at 20% 40%, #fff 0 28%, transparent 29%), radial-gradient(circle at 50% 30%, #fff 0 32%, transparent 33%), radial-gradient(circle at 80% 45%, #fff 0 28%, transparent 29%), radial-gradient(circle at 35% 70%, #fff 0 30%, transparent 31%), radial-gradient(circle at 70% 72%, #fff 0 30%, transparent 31%), #F2F8FF; opacity: 0; transform: scale(.8); transition: opacity .35s, transform .45s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.wc-cloud.on { opacity: 1; transform: none; }
.wc-cloud.mini { inset: 8%; }

/* Rule Switch */
.rs-rule { display: flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); color: var(--violet); }
.rs-rule .ico { width: 46px; height: 46px; }
.rs-rule.shape { color: var(--orange); }
.rs-rule.flip-in { animation: flipin .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes flipin { from { transform: rotateX(90deg) scale(1.3); } to { transform: none; } }
.rs-rule.mixed .solid { padding: 4px; border: 4px solid var(--navy); border-radius: 12px; color: var(--violet); }
.rs-rule.mixed .dash { padding: 4px; border: 4px dashed var(--navy); border-radius: 12px; color: var(--orange); }
.rs-lane { position: relative; width: min(90vw, 420px); height: min(34vh, 260px); }
.rs-card { position: absolute; left: 50%; top: 0; width: 112px; height: 112px; margin-left: -56px; border-radius: 26px; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; animation: fall linear forwards; border: 5px solid transparent; }
.rs-card.solid { border: 5px solid var(--navy); }
.rs-card.dashed { border: 5px dashed var(--navy); }
.rs-card.mini { position: relative; left: auto; top: auto; margin: 0; width: 78px; height: 78px; animation: none; transition: transform .45s; }
@keyframes fall { from { transform: translateY(0); } to { transform: translateY(calc(min(34vh, 260px) - 112px)); } }
.rs-card.to-left { animation: none; transition: transform .3s ease-in, opacity .3s; transform: translate(-160px, 220px) scale(.4); opacity: 0; }
.rs-card.to-right { animation: none; transition: transform .3s ease-in, opacity .3s; transform: translate(160px, 220px) scale(.4); opacity: 0; }
.rs-card.mini.to-left { transform: translate(-60px, 70px) scale(.5); }
.rs-card.mini.to-right { transform: translate(60px, 70px) scale(.5); }
.rs-card.wobble { animation: wobble .6s ease-in-out; }
.rs-bins { display: flex; gap: 18px; justify-content: center; width: 100%; }
.rs-bin { width: min(42vw, 200px); height: 120px; border: 0; border-radius: 0 0 40px 40px; background: #fff; box-shadow: 0 8px 0 #C9D6EA, var(--shadow); display: grid; place-items: center; cursor: pointer; border-top: 8px solid var(--navy); }
.rs-bin.mini { width: 80px; height: 64px; border-radius: 0 0 22px 22px; border-top-width: 5px; }
.rs-bin.hint { box-shadow: 0 0 0 6px var(--lime), 0 8px 0 #C9D6EA; animation: pop .4s; }
.rs-bin:active { transform: translateY(4px); }
.rs-demo { display: flex; flex-direction: column; align-items: center; gap: 10px; transform: scale(.85); }
.rs-demo .rs-rule .ico { width: 34px; height: 34px; }

/* Story Keeper */
.sk-frame { width: min(94vw, 760px, calc((100vh - 220px) * 2.1)); aspect-ratio: 400 / 190; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; }
.sk-frame.mini { width: 100%; border-radius: 18px; }
.sk-frame svg { width: 100%; height: 100%; display: block; }
.sk-frame.turn { animation: turn .55s cubic-bezier(.3, 1.2, .5, 1); }
@keyframes turn { from { transform: perspective(800px) rotateY(-35deg) scale(.95); opacity: .3; } to { transform: none; opacity: 1; } }
.sk-ear { display: grid; place-items: center; width: 100%; height: 100%; background: #FFF4E0; color: var(--violet); }
.sk-ear .ico { width: 90px; height: 90px; }
.sk-dots { display: flex; gap: 10px; }
.sk-dots i { width: 18px; height: 18px; border-radius: 50%; background: #DCE8F7; }
.sk-dots i.on { background: var(--pink); }
.sk-dots i.now { background: var(--sun); box-shadow: 0 0 0 4px rgba(255, 210, 63, .4); }
.sk-ask { display: flex; align-items: center; gap: 12px; color: var(--violet); }
.sk-ask > .ico { width: 44px; height: 44px; }
.sk-opts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; width: 100%; }
.sk-opt { width: min(28vw, 26vh, 190px); aspect-ratio: 1; border: 0; padding: 10px; border-radius: 24px; background: #fff; box-shadow: 0 6px 0 #C9D6EA; cursor: pointer; display: grid; place-items: center; }
.sk-opt svg { width: 100%; height: 100%; }
.sk-opts.order .sk-opt { width: min(44vw, 340px); aspect-ratio: 400 / 190; padding: 0; overflow: hidden; }
.sk-opt.right { box-shadow: 0 0 0 6px var(--lime), 0 6px 0 #7ED957; background: #E4F9DD; }
.sk-opt.wrong { box-shadow: 0 0 0 6px #FFB98A; }
.sk-opt.mini { width: 56px; padding: 6px; border-radius: 14px; }
.sk-opts.mini { gap: 8px; margin-top: 10px; }
.sk-num { font: 800 64px var(--head); color: var(--violet); }
.sk-demo { width: 86%; }

/* Memory Palace Academy */
.ph-hub { justify-content: flex-start; gap: 12px; text-align: center; }
.ph-title { display: flex; align-items: center; gap: 10px; }
.ph-title h2 { font-size: clamp(28px, 6vw, 40px); color: var(--violet); }
.ph-title .gico { width: 56px; height: 56px; }
.ph-lessons { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; width: min(640px, 100%); }
.ph-lesson { --btn: #fff; --btn-dark: #C9D6EA; color: var(--violet); height: 120px; flex-direction: column; gap: 4px; }
.ph-lesson .ico, .ph-lesson .gico { width: 46px; height: 46px; }
.ph-lesson.done { --btn: #E4F9DD; --btn-dark: #7ED957; }
.ph-lesson.locked { filter: grayscale(.9) opacity(.6); }
.ph-num { position: absolute; left: 12px; top: 6px; font: 800 26px var(--head); color: var(--pink); }
.ph-check { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 50%; background: #4CC23A; color: #fff; display: grid; place-items: center; }
.ph-check .ico { width: 22px; height: 22px; }
.ph-check.lock { background: var(--ink2); }
.ph-number { font: 800 clamp(40px, 11vw, 80px) var(--head); letter-spacing: 4px; color: var(--navy); display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; transition: opacity .4s; }
.ph-number.gone { opacity: 0; }
.ph-chunk { padding: 4px 14px; border-radius: 18px; background: #fff; box-shadow: 0 6px 0 #C9D6EA; animation: chunk .6s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: var(--d, 0s); }
.ph-chunk:nth-child(1) { color: var(--pink); }
.ph-chunk:nth-child(2) { color: var(--violet); }
.ph-chunk:nth-child(3) { color: var(--orange); }
@keyframes chunk { from { transform: translateY(-30px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.ph-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; transition: opacity .5s; }
.ph-row.gone { opacity: 0; }
.ph-pic { width: min(20vw, 130px); aspect-ratio: 1; padding: 10px; border-radius: 24px; background: #fff; box-shadow: var(--shadow); transition: transform .3s; }
.ph-pic.big { width: min(36vw, 200px); }
.ph-pic.link { transform: scale(1.12) rotate(-4deg); box-shadow: 0 0 0 6px var(--sun), var(--shadow); }
.ph-pic svg { width: 100%; height: 100%; }
.ph-got { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ph-slot { width: 56px; height: 56px; border-radius: 14px; background: #fff; border: 3px dashed #C9D6EA; padding: 4px; }
.ph-slot svg { width: 100%; height: 100%; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; width: min(560px, 100%); }
.ph-choice { aspect-ratio: 1; padding: 10px; }
.ph-choice svg { width: 100%; height: 100%; }
.ph-choice.word { aspect-ratio: auto; min-height: 72px; padding: 8px 14px; font: 700 24px var(--text); color: var(--navy); }
.ph-choice.hint { box-shadow: 0 0 0 5px var(--sun), 0 5px 0 #C9D6EA; }
.ph-wrap { width: min(96vw, 820px, calc((100vh - 300px) * 1.333)); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); background: #CFE9FF; }
.ph-house { width: 100%; height: auto; display: block; }
.ph-ring { fill: none; stroke: var(--sun); stroke-width: 4; stroke-dasharray: 6 5; animation: spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.ph-items { transition: opacity .4s; }
.ph-item { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.ph-pick { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; width: min(640px, 100%); }
.ph-pick .ph-choice { width: min(22vw, 110px); }
.ph-pick .ph-choice.word { width: auto; }
.ph-counter { font: 800 24px var(--head); color: var(--violet); }
.ph-lens { display: flex; gap: 16px; }
.ph-len { width: 110px; height: 110px; border-radius: 30px; font-size: 44px; }
.ph-len.locked { filter: grayscale(.9) opacity(.55); }
.ph-adult { max-width: 560px; font-size: 18px; color: var(--ink2); text-align: center; margin: 0; }
.ph-teach .gico { width: 140px; height: 140px; }
.duel-score { display: flex; align-items: center; gap: 16px; font: 800 56px var(--head); color: var(--navy); }
.duel-score .gico { width: 80px; height: 80px; }
.btn.on { --btn: var(--sun); color: var(--navy); }

/* ================= Parent area (screens/parent.js) ================= */
/* Grown-ups area: PIN gate + dashboard. Calm and readable for adults; same tokens as the rest of app.css. */
.pa-gate-screen, .pa-screen, .pa-modal, .pa-toast {
  --pa-bg: #F3F6FC;
  --pa-line: #E1E7F3;
  --pa-edge: #8A93B0;
  --pa-violet: #5B3FE0;
  --pa-violet-d: #3F28A8;
  --pa-violet-soft: #EEEAFF;
  --pa-muted: #4A5078;
  --pa-soft: #555C80;
  --pa-ok: #1E7A14;
  --pa-ok-bg: #E4F9DD;
  --pa-bad: #B42318;
  --pa-bad-bg: #FDECEA;
  --pa-warn-bg: #FFF4D6;
  --pa-orange: #C2410C;
}

/* ---------- Gate (the child may see this: few words, big keys) ---------- */
.pa-gate { justify-content: flex-start; background: radial-gradient(circle at 50% 18%, #fff 0, var(--sky) 55%, var(--sky2) 100%); text-align: center; }
.pa-gate-top { width: 100%; max-width: 560px; display: flex; flex: none; }
.pa-gate-card { width: min(400px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; margin: auto 0; padding: 4px 0 8px; }
.pa-badge { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); color: var(--pa-violet); flex: none; }
.pa-badge .ico { width: 30px; height: 30px; }
.pa-gate h1 { font-size: clamp(30px, 7.5vw, 40px); color: var(--navy); }
.pa-sub { margin: 0; font: 700 20px/1.3 var(--text); color: var(--pa-muted); max-width: 340px; }
.pa-dots { display: flex; gap: 18px; margin: 6px 0 0; }
.pa-dots i { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--pa-violet); transition: background .15s, transform .15s; }
.pa-dots i.on { background: var(--pa-violet); transform: scale(1.1); }
.pa-dots.shake { animation: pa-shake .42s ease; }
@keyframes pa-shake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.pa-msg { min-height: 26px; margin: 0; font: 700 18px/1.4 var(--text); color: var(--pa-bad); }
.pa-gate .keypad { margin-top: 2px; }
.keypad.pa-off { opacity: .4; }
.pa-link { border: 0; background: none; color: var(--pa-violet); font: 700 17px var(--text); text-decoration: underline; text-underline-offset: 4px; min-height: 44px; padding: 10px 18px; margin: 4px 0 6px; cursor: pointer; flex: none; }
.pa-gate-note { max-width: 360px; margin: 6px 0 4px; color: var(--pa-muted); font: 16px/1.45 var(--text); flex: none; }
.pa-problem { margin: 10px 0 4px; font: 800 clamp(34px, 9vw, 46px)/1.1 var(--head); color: var(--navy); white-space: nowrap; }
.pa-forgot .pa-sub { font-size: 18px; }
.pa-forgot .pa-form { width: min(320px, 100%); text-align: left; }
.pa-forgot .pa-msg { font-size: 17px; }
.pa-answer { font: 800 26px var(--head); text-align: center; letter-spacing: 2px; }

/* ---------- Dashboard shell ---------- */
.pa {
  display: block; padding: 0; background: var(--pa-bg); color: var(--navy);
  font: 16px/1.5 var(--text); text-align: left;
  user-select: text; -webkit-user-select: text; -webkit-touch-callout: default;
}
.pa input, .pa select, .pa textarea, .pa-modal input { user-select: text; -webkit-user-select: text; }
.pa h1, .pa h2, .pa h3 { color: var(--navy); }
.pa-head {
  position: sticky; top: 0; z-index: 10; padding-top: var(--safe-t);
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--pa-line);
}
.pa-head-row { display: flex; align-items: center; gap: 12px; max-width: 1180px; margin: 0 auto; padding: 10px 16px 8px; }
.pa-backbtn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 10px;
  border-radius: 999px; border: 1.5px solid var(--pa-edge); background: #fff; color: var(--navy); font: 700 16px var(--text); cursor: pointer;
}
.pa-backbtn .ico { width: 22px; height: 22px; }
.pa-backbtn:hover { background: var(--pa-bg); }
.pa-title { display: flex; flex-direction: column; min-width: 0; }
.pa-title h1 { font-size: 26px; line-height: 1.05; }
.pa-title h1:focus { outline: none; }
.pa-who { font-size: 14px; color: var(--pa-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-tabs { display: flex; gap: 6px; max-width: 1180px; margin: 0 auto; padding: 2px 16px 10px; overflow-x: auto; scrollbar-width: none; scroll-padding: 0 16px; }
.pa-tabs::-webkit-scrollbar { display: none; }
.pa-tab {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: 999px; border: 1.5px solid var(--pa-line); background: #fff; color: var(--pa-muted);
  font: 700 15px var(--text); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s;
}
.pa-tab .ico { width: 20px; height: 20px; }
.pa-tab:hover { border-color: var(--pa-edge); }
.pa-tab[aria-selected=true] { background: var(--pa-violet); border-color: var(--pa-violet); color: #fff; }
@media (min-width: 1100px) {
  .pa-head { display: flex; justify-content: center; align-items: center; gap: 20px; padding-left: 16px; padding-right: 16px; }
  .pa-head-row, .pa-tabs { margin: 0; padding: 12px 0; max-width: none; }
  .pa-head-row { flex: 0 1 auto; }
  .pa-head { max-width: none; }
  .pa-head > .pa-head-row { min-width: 300px; }
}
.pa-layout { max-width: 1180px; margin: 0 auto; padding: 16px 16px calc(40px + var(--safe-b)); }
.pa-panel:focus { outline: none; }

/* ---------- Cards ---------- */
.pa-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 760px) {
  .pa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .pa-span { grid-column: 1 / -1; }
}
.pa-card {
  min-width: 0; background: #fff; border: 1px solid var(--pa-line); border-radius: 20px; padding: 18px;
  box-shadow: 0 1px 2px rgba(27, 31, 59, .04), 0 8px 24px rgba(27, 31, 59, .06);
}
@media (min-width: 760px) { .pa-card { padding: 22px 24px; } }
.pa-card h2 { font-size: 24px; margin: 0 0 10px; }
.pa-card h3 { font-size: 19px; margin: 0; }
.pa-card p { margin: 0 0 10px; }
.pa-card > :last-child, .pa-card p:last-child { margin-bottom: 0; }
.pa-small, .pa-hint { font-size: 14px; line-height: 1.45; color: var(--pa-soft); }
.pa-hint { margin: 6px 0 0; }
.pa-card > .pa-small:last-child { margin-top: 12px; }
.pa-empty { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--pa-bg); color: var(--pa-muted); }
.pa-list { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.pa-list li::marker { color: var(--pa-violet); font-weight: 700; }
.pa-a { color: var(--pa-violet); font-weight: 700; text-underline-offset: 3px; }
.pa-line { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
.pa-line .ico { width: 24px; height: 24px; flex: none; color: var(--pa-violet); }
.ico.pa-ok, .pa-line .ico.pa-ok { color: var(--pa-ok); }
.pa-error { margin: 10px 0 0; color: var(--pa-bad); font-weight: 700; }
.pa-error:empty { display: none; }

/* Overview: two independent stacks on wide screens (no row gaps between cards of different heights) */
.pa-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pa-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
@media (min-width: 760px) {
  .pa-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .pa-col { gap: 20px; }
}
.pa-row + .pa-hint, .pa-row ~ .pa-hint, .pa-seg + .pa-hint { margin-top: 14px; }
.pa-form .pa-row + .pa-hint { margin-top: 10px; }
.pa-list + p { margin-top: 14px; }
.pa-switch:last-child { border-bottom: 0; padding-bottom: 0; }

/* buttons: the shared .btn, sized for grown-ups */
.btn.pa-btn {
  --tap: 48px; min-height: 48px; padding: 8px 18px; border-radius: 14px; gap: 8px; font-size: 19px; line-height: 1.1;
  box-shadow: 0 4px 0 var(--btn-dark), 0 6px 14px rgba(27, 31, 59, .10);
}
.btn.pa-btn:active { box-shadow: 0 1px 0 var(--btn-dark); transform: translateY(3px); }
.btn.pa-btn .ico { width: 22px; height: 22px; }
.btn.pa-primary { --btn: #5B3FE0; --btn-dark: #3F28A8; color: #fff; }
.btn.pa-light { --btn: #fff; --btn-dark: #B8C1D9; color: var(--navy); border: 1.5px solid var(--pa-edge); }
.btn.pa-danger { --btn: #B42318; --btn-dark: #7F1810; color: #fff; }
.btn.pa-orange { --btn: #C2410C; --btn-dark: #8A2E08; color: #fff; }
.btn.pa-big { min-height: 64px; padding: 12px 28px; font-size: 24px; border-radius: 18px; }
.pa-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.pa-row.pa-end { justify-content: flex-end; }
.pa-stackbtns { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 4px; }
.pa-stackbtns + .pa-hint { margin-top: 16px; }

/* ---------- Overview ---------- */
.pa-extend { background: linear-gradient(135deg, #FFF1E6, #fff 65%); border-color: #FFD2B3; }
.pa-extend h2 { font-size: 28px; }
.pa-extend .btn { margin: 4px 0 12px; }
.pa-big-num { margin: 0; color: var(--pa-muted); font-size: 18px; }
.pa-big-num b { font: 800 46px/1 var(--head); color: var(--navy); }
.pa-meter { height: 12px; margin: 12px 0 6px; border-radius: 6px; background: #E6EBF5; overflow: hidden; }
.pa-meter i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #7C5CFF, #5B3FE0); }
.pa-meter i.full { background: var(--pa-orange); }
.pa-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pa-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 14px 12px; border-radius: 16px; background: var(--pa-bg); }
.pa-tile .ico { grid-row: span 2; width: 30px; height: 30px; color: var(--pa-violet); }
.pa-tile b { font: 800 28px/1.05 var(--head); overflow-wrap: anywhere; }
.pa-tile span { font-size: 14px; color: var(--pa-muted); line-height: 1.25; }
.pa-two { display: grid; gap: 10px; margin-bottom: 12px; }
.pa-skillpick { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--pa-bg); }
.pa-skillpick .gico { width: 48px; height: 48px; flex: none; }
.pa-skillpick b { display: block; font: 800 21px/1.15 var(--head); }
.pa-tag { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pa-violet); }
.pa-tipblock h3 { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; }
.pa-tipblock .gico { width: 30px; height: 30px; flex: none; }
.pa-duel-sum { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-duel-sum span { padding: 6px 14px; border-radius: 999px; background: var(--pa-bg); font-size: 15px; }
.pa-duel-sum b { font: 800 20px var(--head); }
.pa-duels { list-style: none; margin: 12px 0 0; padding: 0; }
.pa-duels li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--pa-line); }
.pa-duel-what { display: grid; min-width: 0; }
.pa-duel-what small { font-size: 13px; color: var(--pa-soft); }
.pa-duel-score { font: 800 20px var(--head); font-variant-numeric: tabular-nums; }
.pa-pill { padding: 3px 10px; border-radius: 999px; background: #EEF1F8; color: var(--pa-muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.pa-pill.pa-win { background: var(--pa-ok-bg); color: var(--pa-ok); }
.pa-records { list-style: none; margin: 0; padding: 0; }
.pa-records li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--pa-line); }
.pa-records li:first-child { border-top: 0; padding-top: 0; }
.pa-records .gico { width: 40px; height: 40px; }
.pa-records b { display: block; line-height: 1.3; }
.pa-records p { margin: 4px 0 0; font-size: 15px; color: var(--pa-muted); }
.pa-records .pa-kidline { font-style: italic; }
.pa-rec-val { font: 800 32px/1 var(--head); color: var(--pa-violet); }
.pa-honest { display: flex; align-items: center; gap: 14px; background: var(--pa-violet-soft); border-color: #D9CFFF; }
.pa-honest .ico { width: 36px; height: 36px; flex: none; color: var(--pa-violet); }
.pa-honest p { margin: 0; font-size: 17px; font-weight: 700; color: #2A2366; }

/* ---------- Progress charts ---------- */
.pa-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-bottom: 12px; }
.pa-controls .pa-field { flex: 1 1 240px; margin: 0; }
.pa-chart { width: 100%; min-height: 200px; }
.pa-svg { display: block; max-width: 100%; overflow: visible; }
.pa-svg text { font: 12px var(--text); fill: #4A5078; }
.pa-svg text.unit { font-weight: 700; }
.pa-svg text.val { font: 800 17px var(--head); fill: #5B3FE0; }
.pa-svg text.empty { font-size: 15px; }
.pa-svg .grid { stroke: #E6EBF5; stroke-width: 1; }
.pa-svg .axis { stroke: #A9B3CC; stroke-width: 1; }
.pa-svg .line { fill: none; stroke: #5B3FE0; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pa-svg .area { fill: rgba(124, 92, 255, .12); }
.pa-svg .dot { fill: #fff; stroke: #5B3FE0; stroke-width: 2; }
.pa-svg .end { fill: #5B3FE0; stroke: #fff; stroke-width: 2; }
.pa-svg .bar { fill: #7C5CFF; }
.pa-svg .bar.today { fill: #3F28A8; }
.pa-svg .bar.zero { fill: #DCE2EF; }
.pa-svg .limit { stroke: #C2410C; stroke-width: 2; stroke-dasharray: 6 5; }
.pa-svg text.limit-t { fill: #C2410C; font-weight: 700; }
.pa-chart-sum { margin-top: 10px; }
.pa-table-wrap { overflow-x: auto; margin: 8px 0 0; }
.pa-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pa-table th, .pa-table td { padding: 10px 6px; border-top: 1px solid var(--pa-line); text-align: left; vertical-align: middle; }
.pa-table th:first-child { padding-left: 0; }
.pa-table thead th { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pa-soft); }
.pa-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pa-table tbody th { font-weight: 400; }
.pa-game { display: flex; align-items: center; gap: 10px; }
.pa-game .gico { width: 34px; height: 34px; flex: none; }
.pa-game b { display: block; font-weight: 700; line-height: 1.2; }
.pa-game small { display: block; font-size: 13px; color: var(--pa-soft); line-height: 1.2; }
.pa-lvl { display: grid; gap: 4px; }
.pa-lvl b { font: 800 18px/1 var(--head); }
.pa-lvlbar { display: block; width: 60px; height: 6px; border-radius: 3px; background: #E6EBF5; overflow: hidden; }
.pa-lvlbar i { display: block; height: 100%; background: #5B3FE0; }
.pa-muted td, .pa-muted small, .pa-muted b { color: var(--pa-soft); }
.pa-muted .gico { opacity: .5; }
@media (max-width: 420px) {
  .pa-table { font-size: 14px; }
  .pa-table th, .pa-table td { padding: 9px 4px; }
  .pa-game { gap: 8px; }
  .pa-game .gico { width: 28px; height: 28px; }
  .pa-game small { display: none; }
  .pa-lvlbar { width: 44px; }
}

/* ---------- Form controls ---------- */
.pa-field { display: grid; gap: 6px; margin: 16px 0 0; }
.pa-field > label, .pa-field-top label, .pa-form > label { font-weight: 700; }
.pa-field-top { display: flex; align-items: center; gap: 10px; }
.pa-field-top label { flex: 1; min-width: 0; }
.pa-field-top .gico { width: 28px; height: 28px; flex: none; }
.pa-out { min-width: 64px; text-align: right; font-weight: 700; color: var(--pa-violet); font-variant-numeric: tabular-nums; }
.pa-input, .pa-select {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--pa-edge); border-radius: 12px;
  background-color: #fff; color: var(--navy); font: 17px/1.3 var(--text);
}
.pa-select {
  -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%234A5078' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.pa-input:focus, .pa-select:focus { border-color: var(--pa-violet); outline: 3px solid rgba(91, 63, 224, .3); outline-offset: 0; }
.pa-select:disabled, .pa-range:disabled { opacity: .5; cursor: default; }
.pa-code-input { font: 700 20px var(--text); letter-spacing: .08em; text-transform: uppercase; }
.pa-code-input::placeholder { letter-spacing: .08em; color: #8A93B0; }
.pa-range { width: 100%; height: 36px; margin: 0; accent-color: #5B3FE0; cursor: pointer; }
.pa-form > label { display: block; margin-bottom: 6px; }
.pa-form .pa-row { flex-wrap: nowrap; margin-top: 0; }
.pa-form .pa-row .pa-input { flex: 1; min-width: 0; }
.pa-switch { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--pa-line); cursor: pointer; }
.pa-switch-text { flex: 1; display: grid; gap: 2px; }
.pa-switch-text small { font-size: 14px; color: var(--pa-soft); line-height: 1.4; }
.pa-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pa-switch-ui { position: relative; flex: none; width: 54px; height: 32px; border-radius: 16px; background: #7D86A6; transition: background .2s; }
.pa-switch-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.pa-switch input:checked + .pa-switch-ui { background: var(--pa-violet); }
.pa-switch input:checked + .pa-switch-ui::after { transform: translateX(22px); }
.pa-switch input:focus-visible + .pa-switch-ui { outline: 3px solid var(--pa-violet); outline-offset: 3px; }
.pa-seg { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.pa-seg legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.pa-seg-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-seg label { position: relative; }
.pa-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pa-seg span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--pa-edge); border-radius: 12px; background: #fff; color: var(--pa-muted); font-weight: 700; cursor: pointer;
}
.pa-seg input:checked + span { background: var(--pa-violet); border-color: var(--pa-violet); color: #fff; }
.pa-seg input:focus-visible + span { outline: 3px solid var(--pa-violet); outline-offset: 2px; }
.pa-controls .pa-seg { margin: 0; }
.pa-controls .pa-seg legend { margin-bottom: 6px; }
.pa-levels { display: grid; gap: 0 32px; }
@media (min-width: 760px) { .pa-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pa-compact { margin-top: 12px; gap: 2px; }

/* ---------- Family code ---------- */
.pa-codecard { background: linear-gradient(135deg, #F3EFFF, #fff 70%); }
.pa-codebox { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 4px 0 14px; }
.pa-code {
  display: inline-block; padding: 14px 18px; border-radius: 16px; border: 2px dashed #A99CF0; background: #fff;
  font: 800 clamp(26px, 7.2vw, 44px)/1 var(--head); letter-spacing: .06em; color: var(--navy); white-space: nowrap;
  user-select: all; -webkit-user-select: all;
}
.pa-fresh .pa-code { animation: pa-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pa-pop { from { transform: scale(.85); } to { transform: none; } }
.pa-write { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--pa-warn-bg); color: #5A3B00; }
.pa-write .ico { width: 22px; height: 22px; flex: none; margin-top: 2px; color: #8A5A00; }
.pa-status { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; }
.pa-dot { width: 12px; height: 12px; border-radius: 50%; background: #8A93B0; flex: none; }
.pa-status.pa-ok .pa-dot { background: #2E8F20; }
.pa-status.pa-busy .pa-dot { background: var(--pa-violet); animation: pa-pulse 1s ease-in-out infinite; }
.pa-status.pa-warn .pa-dot { background: #D99A00; }
.pa-status.pa-bad { color: var(--pa-bad); }
.pa-status.pa-bad .pa-dot { background: var(--pa-bad); }
@keyframes pa-pulse { 50% { opacity: .3; } }

/* ---------- Data ---------- */
.pa-install { margin: 12px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--pa-bg); }
.pa-install p { margin: 0; }
.pa-install .pa-row { margin-top: 10px; }

/* ---------- Dialog + toast ---------- */
.pa-modal .modal { width: min(460px, 100%); padding: 24px; border-radius: 22px; text-align: left; }
.pa-dialog h2 { margin: 0 0 10px; font-size: 25px; color: var(--navy); }
.pa-dialog p { margin: 0 0 10px; font: 16px/1.5 var(--text); color: var(--pa-muted); }
.pa-dialog .pa-row { margin-top: 18px; }
.pa-toast {
  position: fixed; left: 50%; bottom: calc(20px + var(--safe-b)); z-index: 70; max-width: calc(100vw - 32px);
  padding: 12px 20px; border-radius: 14px; background: var(--navy); color: #fff; font: 700 16px/1.3 var(--text);
  box-shadow: 0 10px 30px rgba(27, 31, 59, .3); opacity: 0; transform: translate(-50%, 16px); transition: opacity .2s, transform .25s;
  pointer-events: none; text-align: center;
}
.pa-toast.in { opacity: 1; transform: translate(-50%, 0); }

/* ================= Mission, Garage, Grown-up Duel (screens/mission.js, garage.js, duel.js) ================= */
/* Daily Mission, Brain Break, Reward, Garage, Grown-up Duel. */

/* ---------- Daily Mission: the route ---------- */
.m-screen { padding-top: 0; gap: 2px; color: #fff; background: linear-gradient(180deg, #2E2385 0%, #5B45E6 42%, #9C8BFF 78%, #CFE6FF 100%); }
.m-screen .gbar { max-width: 1000px; }
.m-title { margin: 0 0 2px; font-size: clamp(30px, 7.6vw, 46px); text-align: center; color: #fff; text-shadow: 0 3px 0 rgba(27, 31, 59, .22); }
.m-progress .ico { color: #4CC23A; filter: none; }
.m-fuel { border: 0; cursor: pointer; height: 64px; padding: 0 16px 0 12px; font: 800 22px var(--head); }
.m-fuel .ico { width: 32px; height: 32px; filter: none; }
.m-route { position: relative; flex: 1; width: 100%; max-width: 560px; min-height: 400px; }
.m-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.m-path { stroke: rgba(255, 255, 255, .6); stroke-width: 5; stroke-dasharray: 2 12; stroke-linecap: round; }
.m-trail { stroke: var(--sun); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 210, 63, .6)); }
.m-stop {
  --s: 84px; --pc: #E9F6FF;
  position: absolute; left: var(--px); top: var(--py); width: var(--s); height: var(--s); margin: calc(var(--s) * -.5) 0 0 calc(var(--s) * -.5);
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; z-index: 2;
}
.m-orb {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .75) 0 10%, transparent 11%), radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 58%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .35)), var(--pc);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .55), 0 10px 22px rgba(20, 10, 80, .35);
}
.m-orb .gico { width: 58%; height: 58%; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .2)); }
.m-stop.done .m-orb { box-shadow: 0 0 0 5px #4CC23A, 0 10px 22px rgba(20, 10, 80, .35); }
.m-stop.next::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 5px solid #fff; opacity: 0; animation: ring 1.8s ease-out infinite; pointer-events: none; }
.m-stop.next .m-orb { box-shadow: 0 0 0 6px #fff, 0 0 26px rgba(255, 255, 255, .7), 0 10px 22px rgba(20, 10, 80, .35); }
.m-check, .m-num {
  position: absolute; right: -6px; top: -6px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 0 0 3px #fff, 0 3px 6px rgba(0, 0, 0, .2);
}
.m-check { background: #4CC23A; color: #fff; }
.m-check .ico { width: 24px; height: 24px; }
.m-check.pop { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.m-num { background: #fff; color: var(--violet); font: 800 21px/1 var(--head); }
.m-pad { --s: 104px; pointer-events: none; border-radius: 0; }
.m-pad-svg { position: absolute; left: 0; bottom: 14px; width: 100%; height: auto; }
.m-break { --s: 76px; --pc: #E4F9DD; }
.m-break .m-orb .gico { width: 74%; height: 74%; }
.m-prize { --s: 96px; --pc: #FFD23F; }
.m-prize .m-orb > svg { width: 64%; height: 64%; }
.m-prize .m-orb > .rocket-svg { width: auto; height: 74%; }
.m-prize .m-orb > .avatar { width: 80%; height: 80%; }
.m-star { color: #fff; filter: drop-shadow(0 3px 0 #D9A800); }
.m-rocket { position: absolute; left: 0; top: 0; z-index: 3; width: 48px; height: 80px; pointer-events: none; transition: transform 1s cubic-bezier(.5, 0, .3, 1); filter: drop-shadow(0 6px 6px rgba(20, 10, 80, .35)); }
.m-rocket .rocket-svg, .lc-rocket .rocket-svg { width: 100%; height: 100%; display: block; }
.m-rocket .flame, .lc-rocket .flame { transform-origin: 50% 0; transform-box: fill-box; animation: flame .35s ease-in-out infinite alternate; }
.m-rocket.moving { animation: m-wiggle .5s ease-in-out 2; }
@keyframes m-wiggle { 50% { rotate: 8deg; } }
.m-bottom { position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; max-width: 560px; padding: 4px 0 2px; }
.m-bip { width: 96px; height: auto; }
.m-complete .m-title { color: var(--sun); }
@media (orientation: landscape) and (min-width: 700px) {
  .m-stop { left: var(--lx); top: var(--ly); }
  .m-route { max-width: 1000px; min-height: 300px; }
  .m-bottom { max-width: 1000px; }
}
@media (max-height: 700px) and (orientation: portrait) {
  .m-route { min-height: 360px; }
  .m-stop { --s: 72px; }
  .m-pad { --s: 92px; }
  .m-prize { --s: 84px; }
  .m-break { --s: 66px; }
}

/* ---------- Brain Break ---------- */
.bb-screen { gap: 10px; }
.bb-title { font-size: clamp(32px, 8vw, 50px); }
.bb-steps { display: flex; gap: 14px; }
.bb-dot { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff; transition: background .4s, box-shadow .4s; }
.bb-dot .ico { width: 30px; height: 30px; }
.bb-dot .gico { width: 44px; height: 44px; }
.bb-dot.now { background: #fff; color: var(--cyan); box-shadow: 0 0 0 5px rgba(255, 255, 255, .35); }
.bb-dot.done { background: #4CC23A; color: #fff; }
.bb-stage { position: relative; width: min(300px, 72vw, 38vh); aspect-ratio: 1; display: grid; place-items: center; }
.bb-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.bb-track { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .2); stroke-width: 4; }
.bb-left { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .25s linear; opacity: .85; }
.bb-art-wrap { width: 72%; height: 72%; display: grid; place-items: center; }
.bb-art-wrap > .gico { width: 100%; height: 100%; }
.bb-stretch { animation: bb-reach 3s ease-in-out infinite; }
@keyframes bb-reach { 0%, 100% { transform: scale(.94) translateY(4px); } 50% { transform: scale(1.04) translateY(-6px); } }
.bb-pair { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.bb-glass { width: 62%; height: auto; overflow: visible; }
.bb-water { animation: bb-sip 15s ease-in-out forwards; }
@keyframes bb-sip { to { transform: translateY(48px); } }
.bb-window { width: 96%; height: auto; }
.bb-cloud { animation: bb-cloud 14s linear infinite; }
@keyframes bb-cloud { from { transform: translateX(-10px); } to { transform: translateX(80px); } }
.bb-pair > .ico { position: absolute; right: -4%; top: -6%; width: 30%; height: 30%; padding: 4%; border-radius: 50%; background: #fff; color: var(--cyan); box-shadow: 0 4px 0 rgba(27, 31, 59, .18); }
.bb-drop { animation: bb-drip 2.4s ease-in-out infinite; }
.bb-eye { animation: bb-drip 3.2s ease-in-out infinite; }
@keyframes bb-drip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.bb-label { min-height: 1.1em; font-size: clamp(28px, 7vw, 42px); color: var(--sun); }
.bb-row { display: flex; align-items: center; gap: 22px; }
.bb-screen .bb-bip { width: 130px; }
.bb-next.wait { visibility: hidden; }
.bip[data-mood=stretch] .bip-smile, .bip[data-mood=look] .bip-smile { display: inline; }
.bip[data-mood=stretch] .bip-arm-l { animation: bb-arm-l 3s ease-in-out infinite; }
.bip[data-mood=stretch] .bip-arm-r { animation: bb-arm-r 3s ease-in-out infinite; }
.bip[data-mood=stretch] .bip-jump { animation: bb-tall 3s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bb-arm-l { 0%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(150deg); } }
@keyframes bb-arm-r { 0%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(-150deg); } }
@keyframes bb-tall { 0%, 100% { transform: scale(1); } 40%, 70% { transform: scale(.97, 1.05) translateY(-6px); } }

/* ---------- Blast off + mission reward ---------- */
.lc-screen { justify-content: flex-end; overflow: hidden; padding-bottom: calc(48px + var(--safe-b)); }
.lc-screen::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .8; background:
  radial-gradient(circle at 12% 14%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 78% 9%, #fff 0 2px, transparent 3px),
  radial-gradient(circle at 34% 31%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 88% 36%, #fff 0 1.5px, transparent 2.5px),
  radial-gradient(circle at 18% 52%, #fff 0 2px, transparent 3px), radial-gradient(circle at 64% 24%, #fff 0 1.5px, transparent 2.5px),
  radial-gradient(circle at 52% 6%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 92% 62%, #fff 0 2px, transparent 3px),
  radial-gradient(circle at 6% 74%, #fff 0 1.5px, transparent 2.5px); }
.lc-screen .moon-big { position: absolute; right: 8%; top: 8%; width: 74px; height: 74px; }
.lc-count { position: absolute; left: 0; right: 0; top: 16%; text-align: center; font: 800 clamp(96px, 26vw, 170px)/1 var(--head); color: var(--sun); text-shadow: 0 6px 0 rgba(0, 0, 0, .18); }
.lc-count.pop { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.lc-pad { position: relative; width: min(280px, 64vw, 40vh); display: flex; flex-direction: column; align-items: center; }
.lc-rocket { position: relative; z-index: 2; width: 52%; aspect-ratio: 120 / 200; margin-bottom: -18px; transition: transform 1.5s cubic-bezier(.55, 0, .9, .45); }
.lc-rocket.shake { animation: lc-shake .14s linear infinite; }
.lc-rocket.fly { transform: translateY(-130vh); }
@keyframes lc-shake { 25% { translate: -2px 0; } 75% { translate: 2px 0; } }
.lc-base { width: 100%; }
.lc-base svg { width: 100%; height: auto; display: block; }
.lc-smoke { position: absolute; left: 0; right: 0; bottom: 6px; height: 70px; z-index: 3; pointer-events: none; }
.lc-smoke i { position: absolute; bottom: 0; left: calc(8% + var(--i) * 17%); width: 58px; height: 58px; border-radius: 50%; background: #fff; opacity: 0; }
.lc-screen.go .lc-smoke i { animation: lc-puff 1.5s ease-out forwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes lc-puff { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.3) translateY(-14px); } }

.m-reward { gap: 12px; }
.m-reward .m-title { color: var(--violet); text-shadow: none; }
.m-reward .m-bip { width: 112px; }
.m-plus { height: 54px; padding: 0 18px 0 12px; font-size: 28px; }
.m-plus .ico { width: 32px; height: 32px; }
.m-prize-card {
  position: relative; width: min(250px, 60vw, 32vh); aspect-ratio: 1; border-radius: 40px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle, #fff 0 42%, #FFF4C2 68%, #FFE27A 100%); box-shadow: 0 8px 0 #D9A800, var(--shadow);
  animation: m-reveal .8s cubic-bezier(.3, 1.5, .5, 1) both;
}
.m-prize-card::before { content: ''; position: absolute; inset: -40%; background: repeating-conic-gradient(rgba(255, 210, 63, .28) 0 10deg, transparent 10deg 24deg); animation: spin 18s linear infinite; }
.m-prize-card > * { position: relative; }
@keyframes m-reveal { from { transform: scale(.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.m-prize-big { width: 80%; height: 80%; }
.rocket-svg.m-prize-big { width: auto; height: 84%; }
.m-star-big { width: 62%; height: 62%; color: var(--sun); filter: drop-shadow(0 4px 0 #D9A800); }
.m-reward-row { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.m-use { min-height: 84px; padding: 0 28px; border-radius: 28px; font-size: 28px; }
.btn.m-use.used { filter: saturate(.6); opacity: .8; }
@media (orientation: landscape) and (max-height: 820px) and (min-width: 900px) {
  .m-reward { flex-flow: row wrap; align-content: center; gap: 24px 48px; }
  .m-reward .m-bip { width: 150px; }
  .m-reward .m-title { width: 100%; order: -1; }
  .m-reward .m-bip { order: 0; width: 150px; }
  .m-reward .m-prize-card { order: 1; width: min(300px, 44vh); }
  .m-reward .m-plus { order: 2; }
  .m-reward .m-reward-row { order: 3; width: 100%; }
}

/* ---------- Rocket Garage ---------- */
.g-screen { padding-top: 0; gap: 8px; background: radial-gradient(circle at 50% 0, #fff 0, var(--sky) 55%, var(--sky2) 100%); }
.g-screen .gbar { max-width: 1100px; }
.g-title { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--violet); color: #fff; box-shadow: 0 4px 0 #5B3FE0; }
.g-title .ico { width: 30px; height: 30px; }
.g-body { width: 100%; max-width: 1100px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.g-left, .g-right { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.g-show {
  position: relative; width: 100%; height: min(260px, 30vh); min-height: 180px; border-radius: 30px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center; gap: 6%; padding: 0 14px 18px;
  background: linear-gradient(180deg, #3D2FA8 0%, #6A55F0 70%, #8F7DFF 100%); box-shadow: var(--shadow);
}
.g-show::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .7; background:
  radial-gradient(circle at 10% 18%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 30% 8%, #fff 0 2px, transparent 3px),
  radial-gradient(circle at 62% 16%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 86% 12%, #fff 0 2px, transparent 3px),
  radial-gradient(circle at 48% 30%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 93% 40%, #fff 0 1.5px, transparent 2.5px); }
.g-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: repeating-linear-gradient(90deg, #C9D6EA 0 40px, #DCE6F5 40px 80px); border-top: 5px solid var(--navy); }
.g-rocket, .g-astro { position: relative; z-index: 1; transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), filter .3s, opacity .3s; transform-origin: 50% 100%; }
.g-rocket { height: 92%; max-width: 38%; aspect-ratio: 120 / 200; }
.g-astro { height: 74%; max-width: 50%; aspect-ratio: 128 / 138; }
.g-rocket svg, .g-astro svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 0 rgba(27, 31, 59, .25)); }
.g-rocket .flame { transform-origin: 50% 0; transform-box: fill-box; animation: flame .35s ease-in-out infinite alternate; }
.g-show[data-group=rocket] .g-astro, .g-show[data-group=astro] .g-rocket { opacity: .72; transform: scale(.88); }
.g-rocket.pop, .g-astro.pop { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.g-show .g-bip { position: absolute; right: 6px; bottom: 6px; z-index: 2; width: 70px; }
.g-tabs { display: flex; gap: 12px; width: 100%; }
.g-tab { flex: 1; min-height: 72px; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 5px 0 #C9D6EA; cursor: pointer; display: grid; place-items: center; padding: 6px; }
.g-tab-art { display: grid; place-items: center; width: 60px; height: 60px; }
.g-tab-art svg { width: 100%; height: 100%; }
.g-tab[aria-selected=true] { background: var(--violet); box-shadow: 0 5px 0 #5B3FE0, 0 0 0 4px rgba(124, 92, 255, .25); }
.g-tab[aria-selected=true] .g-tab-art { background: #fff; border-radius: 50%; }
.g-tab[aria-selected=true] .g-tab-art .gico { width: 48px; height: 48px; }
.g-slots { display: flex; gap: 8px; justify-content: center; width: 100%; }
.g-slot { flex: 1; max-width: 88px; min-width: 64px; height: 64px; border: 3px solid transparent; border-radius: 20px; background: rgba(255, 255, 255, .7); cursor: pointer; display: grid; place-items: center; padding: 6px; }
.g-slot svg { width: 42px; height: 42px; }
.g-slot[aria-selected=true] { background: #fff; border-color: var(--violet); box-shadow: 0 4px 0 #C9D6EA; }
.g-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; width: 100%; }
.g-tile { position: relative; aspect-ratio: 1; min-width: 64px; min-height: 64px; border: 0; border-radius: 20px; padding: 6px; background: #fff; box-shadow: 0 5px 0 #C9D6EA; cursor: pointer; display: grid; place-items: center; }
.g-tile .g-thumb { width: 100%; height: 100%; }
.g-tile[aria-pressed=true] { box-shadow: 0 0 0 5px var(--violet), 0 5px 0 #C9D6EA; background: #F1EDFF; }
.g-tile.locked { background: #EEF2FA; box-shadow: 0 5px 0 #D5DEEC; }
.g-tile.locked .g-thumb { filter: brightness(0) opacity(.16); }
.g-tile.none .g-thumb { opacity: .55; }
.g-badge { position: absolute; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; box-shadow: 0 0 0 3px #fff; }
.g-badge .ico { width: 18px; height: 18px; }
.g-on { right: -6px; top: -6px; background: #4CC23A; }
.g-lock { left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; background: var(--ink2); }
.g-lock .ico { width: 22px; height: 22px; }
.g-no { left: -6px; top: -6px; background: #FF8A3D; }
.g-hint { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 28px; font: 800 20px var(--head); color: var(--ink2); }
.g-hint .ico { width: 24px; height: 24px; }
.g-hint.off { visibility: hidden; }
.g-hint.nudge { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); color: var(--violet); }
.g-foot { display: flex; gap: 12px; align-items: center; width: 100%; }
.g-animal { flex: none; gap: 4px; padding: 6px 12px 6px 6px; border-radius: 22px; }
.g-animal-art { width: 52px; height: 52px; display: block; }
.g-animal-art svg { width: 100%; height: 100%; }
.g-animal .ico { width: 28px; height: 28px; color: var(--violet); }
.g-nick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 14px; border-radius: 22px; background: #fff; box-shadow: inset 0 3px 0 rgba(27, 31, 59, .08), 0 0 0 3px #DCE6F5; cursor: text; }
.g-nick .ico { width: 28px; height: 28px; flex: none; }
.g-nick-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 800 24px var(--head); color: var(--navy); -webkit-user-select: text; user-select: text; }
.g-nick-input::placeholder { color: #9AA3C7; }
.g-nick:focus-within { box-shadow: 0 0 0 4px var(--violet); }
@media (orientation: landscape) and (min-width: 820px) {
  .g-body { flex-direction: row; align-items: center; justify-content: center; gap: 28px; flex: 1; min-height: 0; }
  .g-left { flex: 1; min-width: 0; max-width: 500px; }
  .g-right { flex: 1.15; min-width: 0; max-width: 560px; }
  .g-show { height: min(540px, calc(100vh - 130px)); min-height: 320px; padding-bottom: 26px; }
  .g-show .g-bip { width: 92px; }
}

/* ---------- Grown-up Duel ---------- */
.du-screen { padding-top: 0; gap: 12px; background: linear-gradient(180deg, #FFF4E0 0%, #FFE6F1 55%, #ECE5FF 100%); }
.du-screen .gbar, .du-turn .gbar, .du-intro .gbar { max-width: 900px; }
.du-title { display: flex; align-items: center; gap: 8px; font-size: clamp(26px, 6.6vw, 38px); color: var(--violet); }
.du-title .gico { width: 48px; height: 48px; flex: none; }
.du-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; width: min(560px, 100%); }
.du-who { position: relative; aspect-ratio: 1; min-width: 64px; border: 0; padding: 8px; border-radius: 28px; background: #fff; box-shadow: 0 6px 0 #E3D4F0; cursor: pointer; display: grid; place-items: center; transition: transform .2s; }
.du-who[aria-pressed=true] { box-shadow: 0 0 0 5px var(--violet), 0 6px 0 #E3D4F0; transform: scale(1.04); }
.du-face-svg { width: 100%; height: 100%; display: block; }
.du-tally { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; height: 30px; padding: 0 10px 0 6px; border-radius: 15px; background: var(--sun); box-shadow: 0 3px 0 #D9A800; font: 800 18px/1 var(--head); color: var(--navy); white-space: nowrap; }
.du-tally .du-crown { width: 22px; height: 18px; }
.du-tally i { font-style: normal; opacity: .6; }
.du-records { display: grid; gap: 9px; width: min(560px, 100%); }
.btn.du-rec, .record-card.du-rec { width: 100%; min-height: 64px; border: 0; cursor: pointer; justify-content: space-between; gap: 8px; padding: 5px 12px; font-size: 22px; color: var(--navy); box-shadow: 0 5px 0 #D9A800; }
.du-rec:active { transform: translateY(4px); box-shadow: 0 2px 0 #D9A800; }
.du-rec-game { position: relative; display: grid; place-items: center; flex: none; }
.du-rec-game .gico { width: 40px; height: 40px; }
.du-rec-back { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--pink); display: grid; place-items: center; }
.du-rec-back .ico { width: 18px; height: 18px; }
.du-rec-side { display: flex; align-items: center; gap: 6px; }
.du-rec-gu { display: flex; }
.du-mini { width: 32px; height: 32px; display: block; border-radius: 50%; background: #fff; }
.du-rec-gu .du-mini + .du-mini { margin-left: -14px; }
.du-rec-kid .du-mini { background: var(--sky); }
.du-rec-num { font: 800 21px var(--head); white-space: nowrap; }
.du-rec-side.you .du-rec-num { font-size: 32px; color: var(--violet); }
.du-bolt { width: 26px; height: 26px; flex: none; }
.record-card .du-rec-cup { width: 34px; height: 34px; flex: none; }
.record-card.du-rec.empty { justify-content: center; background: #FFFBEA; box-shadow: none; border: 3px dashed #E8C64A; }
.du-rec.empty .du-rec-cup { color: #D9A800; }
.du-rec-games { display: flex; gap: 6px; opacity: .45; }
.du-rec-games .gico { width: 38px; height: 38px; }
.du-bottom { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; width: min(560px, 100%); margin-top: auto; padding: 4px 0; flex: none; }
.du-bottom .du-bip { position: absolute; right: 0; bottom: 0; width: 92px; }
.du-start .du-bottom, .du-pick .du-bottom { min-height: 140px; }
.du-start .du-bottom { position: sticky; bottom: 0; z-index: 3; width: calc(100% + 32px); max-width: none; margin-left: -16px; margin-right: -16px; padding: 10px 16px 4px; background: linear-gradient(0deg, #ECE5FF 60%, rgba(236, 229, 255, 0)); }
.du-start .du-bottom .du-bip { right: 16px; }
.du-center { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.du-intro { padding-top: calc(78px + var(--safe-t)); }
.du-intro .gbar { position: absolute; top: 0; left: 16px; right: 16px; width: auto; max-width: none; }
.du-win .du-win-bip { position: absolute; right: 10px; top: calc(10px + var(--safe-t)); width: 86px; }
.du-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 18px; width: min(500px, 100%); margin: auto 0; padding: 0 6px; }
.du-games .du-teach:nth-child(3n + 1):last-child { grid-column: 2; }
.du-game {
  --pc: var(--violet); position: relative; aspect-ratio: 1; min-width: 64px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .75) 0 10%, transparent 11%), radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 58%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .35)), var(--pc);
  box-shadow: 0 0 0 5px #fff, 0 10px 20px rgba(27, 31, 59, .2); transition: transform .2s, box-shadow .2s;
}
.du-game > .gico { width: 58%; height: 58%; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .2)); }
.du-game[aria-pressed=true] { transform: scale(1.06); box-shadow: 0 0 0 5px #fff, 0 0 0 11px var(--violet), 0 10px 20px rgba(27, 31, 59, .2); }
.du-teach-badge { position: absolute; right: -6px; bottom: -6px; width: 46%; height: 46%; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(27, 31, 59, .2); }
.du-teach-badge .gico { width: 80%; height: 80%; }
.du-vsrow { display: flex; align-items: center; gap: 6px; }
.du-chip { width: 56px; height: 56px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff, var(--shadow); overflow: hidden; display: grid; place-items: center; }
.du-chip svg { width: 100%; height: 100%; display: block; }
.du-chip .avatar { background: var(--sky); }
.du-gap { width: 56px; flex: none; }
.du-board { display: flex; align-items: center; justify-content: center; gap: 10px; width: min(480px, 100%); padding: 12px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.du-board > .du-bolt { width: 34px; height: 34px; }
.du-side { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 22px; transition: background .3s, box-shadow .3s; }
.du-side.active { background: #F1EDFF; box-shadow: 0 0 0 4px var(--violet); }
.du-face { width: 84px; height: 84px; border-radius: 50%; background: #FFF4E0; overflow: hidden; }
.du-side.kid .du-face { background: var(--sky); }
.du-face svg { width: 100%; height: 100%; display: block; }
.du-crowns { display: flex; gap: 6px; color: #C9D6EA; }
.du-crown { width: 38px; height: 29px; display: block; }
.du-crown.new { animation: du-crown-in .8s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes du-crown-in { 0% { transform: translateY(-60px) scale(2) rotate(-30deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.du-score { display: flex; align-items: center; gap: 4px; min-height: 44px; font: 800 36px/1 var(--head); color: var(--navy); }
.du-score .ico { width: 28px; height: 28px; color: var(--sun); filter: drop-shadow(0 2px 0 #D9A800); }
.du-score.empty { color: #C9D6EA; }
.du-board.k-pairs .du-score .ico, .du-turn-score.k-pairs .ico { color: #FF8A3D; filter: none; }
.du-board.k-spin .du-score .ico, .du-turn-score.k-spin .ico { color: #4CC23A; filter: none; }
.du-hand, .du-round { justify-content: flex-start; }
.du-big { width: min(220px, 52vw, 27vh); aspect-ratio: 1; flex: none; border-radius: 50%; background: #fff; overflow: hidden; box-shadow: 0 0 0 8px rgba(255, 255, 255, .7), var(--shadow); animation: m-reveal .6s cubic-bezier(.3, 1.5, .5, 1) both; }
.du-big.kid { background: var(--sky); }
.du-big svg { width: 100%; height: 100%; display: block; }
.du-pass { font-size: clamp(30px, 7.6vw, 48px); color: var(--violet); text-align: center; }
.du-ready { min-height: 88px; padding: 0 36px; border-radius: 30px; font-size: 32px; }
.du-ready .ico { width: 38px; height: 38px; }
.du-turn .gbar .du-chip { width: 52px; height: 52px; }
.du-turn-score { height: 48px; font-size: 24px; }
.du-turn-score.pop { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.du-turn .gbar { gap: 8px; }
.du-dots { display: flex; gap: 4px; }
.du-dots i { width: 11px; height: 11px; border-radius: 50%; background: #DCE8F7; }
.du-dots i.ok { background: #4CC23A; box-shadow: 0 0 0 2px #fff; }
.du-dots i.no { background: #fff; box-shadow: inset 0 0 0 3px #FFB98A; }
.du-round.tie .du-pass { color: var(--orange); }
.du-win { gap: 14px; background: radial-gradient(circle at 50% 30%, #FFF6CC 0, #FFE6F1 55%, #ECE5FF 100%); }
.du-podium { display: flex; align-items: flex-end; justify-content: center; gap: 18px; }
.du-champ { display: flex; flex-direction: column; align-items: center; }
.du-crown-big { width: 120px; height: 90px; margin-bottom: -18px; position: relative; z-index: 2; animation: du-crown-in .9s cubic-bezier(.3, 1.6, .5, 1) both, du-bob 2.4s ease-in-out .9s infinite; }
@keyframes du-bob { 50% { transform: translateY(-8px) rotate(4deg); } }
.du-champ .du-big { width: min(200px, 48vw, 28vh); }
.du-win.kid .du-champ .du-big { background: var(--sky); }
.du-runner { width: 86px; height: 86px; border-radius: 50%; background: #fff; overflow: hidden; box-shadow: var(--shadow); opacity: .92; }
.du-win.grown .du-runner { background: var(--sky); }
.du-runner svg { width: 100%; height: 100%; display: block; }
.du-final { display: flex; align-items: center; gap: 12px; font: 800 44px var(--head); color: var(--navy); }
.du-win .du-bottom { margin-top: 6px; min-height: 120px; }
.du-quit { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.du-quit .gico { width: 96px; height: 96px; }
.du-quit .row { display: flex; gap: 20px; }
@media (orientation: landscape) and (min-width: 820px) {
  .du-grid { grid-template-columns: repeat(6, 1fr); width: min(900px, 100%); }
  .du-records { grid-template-columns: 1fr 1fr; width: min(900px, 100%); }
  .du-records .du-rec.empty { grid-column: 1 / -1; width: min(440px, 100%); justify-self: center; }
  .du-bottom { width: min(900px, 100%); }
  .du-games { grid-template-columns: repeat(4, 1fr); width: min(680px, 100%); }
  .du-hand .du-big { width: min(170px, 24vh); }
  .du-games .du-teach:nth-child(3n + 1):last-child { grid-column: auto; }
}
@media (max-height: 700px) {
  .du-face { width: 66px; height: 66px; }
  .du-start .du-bottom, .du-pick .du-bottom { min-height: 120px; }
}
@media (max-width: 370px) {
  .g-slots { gap: 2px; }
  .du-turn .gbar { gap: 6px; }
  .du-turn .gbar .du-chip { width: 44px; height: 44px; }
  .du-dots { gap: 3px; }
  .du-dots i { width: 9px; height: 9px; }
  .du-turn-score { padding: 0 10px 0 6px; }
}

/* ================= Tall screens (tablets in portrait): keep Pair Hunt clear of Bip's corner ================= */
@media (min-height: 900px) {
  .pc-grid { width: min(94vw, calc((100vh - 240px) * var(--c) / var(--r, 2) / 1.15), 720px); }
}

/* ================= Narrow phones (360 px): 5-column boards still get ~60 px targets ================= */
@media (max-width: 380px) {
  .lg-grid { width: min(96vw, 58vh, 560px); gap: 6px; padding: 8px; }
  .wc-scene { width: min(96vw, calc((100vh - 220px) * var(--c) / var(--r)), 640px); gap: 6px; padding: 8px; }
}

/* ================= Small phones (portrait, 640-700 px tall) ================= */
@media (max-height: 700px) and (orientation: portrait) {
  .stage { gap: 10px; }
  .keypad { gap: 8px; }
  .key { min-height: 64px; }
  .answer { min-height: 60px; font-size: 40px; line-height: 50px; }
  .mm-screen { min-height: 110px; }
  .screen.splash .bip { width: 110px !important; }
  .screen.splash h1 { font-size: 34px; }
  .avatars { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
  .ph-hub > .bip { width: 80px !important; }
  .ph-lesson { height: 100px; }
  .g-show { height: 24vh; min-height: 150px; }
  /* Boards reach the bottom corner on short phones: Bip would sit on the OK key or a card. */
  .run-screen > .game-bip, .du-turn > .game-bip, .ph-lesson-screen > .game-bip { display: none; }
}

/* ================= Phones on their side (short and wide) ================= */
@media (orientation: landscape) and (max-height: 500px) {
  /* Games and duel turns: the top bar becomes a slim rail on the left, so the board gets the full height. */
  .run-screen, .du-turn, .ph-lesson-screen {
    flex-direction: row; align-items: stretch; gap: 12px;
    padding: calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) calc(10px + var(--safe-b)) calc(12px + var(--safe-l));
  }
  .run-screen > .gbar, .du-turn > .gbar, .ph-lesson-screen > .gbar { flex-direction: column; width: 64px; max-width: none; padding: 0; gap: 10px; }
  .run-screen > .gbar .gtitle .gico { width: 40px; height: 40px; }
  .run-screen > .gbar .progress { flex: none; width: 56px; height: 12px; }
  .run-screen > .gbar > :last-child { margin-top: auto; }
  .run-screen > .game-bip { left: calc(16px + var(--safe-l)); right: auto; bottom: calc(80px + var(--safe-b)); width: 56px; }
  .du-turn > .gbar { width: 76px; align-items: center; }
  .du-turn .du-dots { flex-wrap: wrap; justify-content: center; width: 72px; }
  .du-turn-score { height: 44px; padding: 0 8px; font-size: 20px; }
  .du-turn > .game-bip { display: none; }
  .ph-lesson-screen > .gbar .gtitle { flex-direction: column; gap: 0; font-size: 18px; }
  .ph-lesson-screen > .game-bip { left: calc(16px + var(--safe-l)); right: auto; bottom: calc(10px + var(--safe-b)); width: 56px; }
  /* Memory Palace: the house on the left; counter, answer choices or the grown-up note on the right. */
  .ph-house-stage { display: grid; grid-template-columns: auto 330px; grid-template-rows: auto 1fr auto; column-gap: 24px; row-gap: 8px; align-content: center; justify-content: center; align-items: center; }
  .ph-house-stage > .ph-wrap { grid-column: 1; grid-row: 1 / span 3; width: min(44vw, calc((100vh - 30px) * 1.333)); }
  .ph-house-stage > .ph-counter { grid-column: 2; grid-row: 1; justify-self: center; }
  .ph-house-stage > .ph-pick, .ph-house-stage > .ph-adult { grid-column: 2; grid-row: 2; width: 100%; }
  .ph-house-stage > .play-big { grid-column: 2; grid-row: 3; justify-self: center; width: 96px; height: 96px; }
  .ph-house-stage .ph-pick .ph-choice { width: 100px; }
  .ph-house-stage .ph-pick .ph-choice.word { width: auto; }
  .run-screen > .stage, .du-turn > .stage { gap: 10px; }
  .stage > .hint-line { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; }
  /* Boards sized from the screen height. */
  .lg-grid { width: min(94vw, calc(100vh - 24px), 560px); gap: 6px; }
  .pc-grid { width: min(100%, calc((100vh - 36px) * var(--c) / var(--r, 2) / 1.15), 720px); }
  .wc-scene { width: min(100%, calc((100vh - 84px) * var(--c) / var(--r)), 640px); }
  .eb-band { width: min(92vw, calc(100vh - 40px), 520px); }
  .eb-band[data-n="5"], .eb-band[data-n="6"] { width: min(100%, calc((100vh - 40px) * 1.5), 560px); }
  .eb-band[data-n="3"] { width: min(100%, 520px); }
  .ff-ocean { width: 100%; max-height: none; min-height: 0; }
  .mm-screen { min-height: 96px; padding: 10px 24px; font-size: 56px; }
  .answer { min-height: 56px; font-size: 36px; line-height: 46px; }

  /* Daily Mission */
  .m-title { font-size: 26px; margin: 0; }
  .m-route { min-height: 0; }
  .m-stop { --s: 64px; }
  .m-pad { --s: 76px; }
  .m-prize { --s: 72px; }
  .m-break { --s: 60px; }
  .m-bottom { padding: 0; }
  .m-bottom .play-big { width: 84px; height: 84px; }
  .m-bottom .play-big .ico { width: 44px; height: 44px; }
  .m-bip { width: 64px; }
  .m-reward { flex-flow: row wrap; align-content: center; justify-content: center; gap: 10px 32px; }
  .m-reward .m-title { width: 100%; order: -1; font-size: 30px; }
  .m-reward .m-bip { order: 0; width: 90px; }
  .m-reward .m-prize-card { order: 1; width: min(200px, 46vh); }
  .m-reward .m-plus { order: 2; }
  .m-reward .m-reward-row { order: 3; width: 100%; }
  .m-use { min-height: 72px; font-size: 24px; }
  .bb-screen { gap: 6px; }
  .bb-title { font-size: 30px; }
  .bb-steps { gap: 10px; }
  .bb-dot { width: 44px; height: 44px; }
  .bb-stage { width: min(300px, 30vh); }
  .bb-label { font-size: 26px; }
  .bb-screen .bb-bip { width: 80px; }

  /* Rocket Garage */
  .g-screen { gap: 4px; }
  .g-left, .g-right { gap: 6px; }
  .g-tab { min-height: 64px; }
  .g-tab-art { width: 52px; height: 52px; }

  /* Grown-up Duel */
  .du-grid { width: min(600px, 100%); gap: 10px; }
  .du-start .du-bottom, .du-pick .du-bottom { min-height: 96px; }
  .du-games { grid-template-columns: repeat(7, 1fr); width: min(720px, 100%); gap: 14px; }
  .du-games .du-teach:nth-child(3n + 1):last-child { grid-column: auto; }
  .du-hand .du-big { display: none; }
  .du-pass { font-size: 30px; }
  .du-ready { min-height: 72px; font-size: 28px; }
  .du-board { padding: 8px; }
  .du-face { width: 60px; height: 60px; }
  .du-round > .gbar, .du-win > .gbar { position: absolute; top: calc(10px + var(--safe-t)); left: calc(16px + var(--safe-l)); width: auto; padding: 0; }
  .du-round .play-big, .du-win .play-big { width: 84px; height: 84px; }
  .du-round .play-big .ico, .du-win .play-big .ico { width: 44px; height: 44px; }
  .du-crown-big { width: 64px; height: 48px; margin-bottom: -10px; }
  .du-champ .du-big { width: min(120px, 30vh); }
  .du-runner { width: 52px; height: 52px; }
  .du-final { font-size: 30px; }
  /* Winner: podium on the left; title, score and buttons on the right. */
  .du-win { display: grid; grid-template-columns: auto auto; align-content: center; justify-content: center; justify-items: center; column-gap: 48px; row-gap: 10px; }
  .du-win > .du-podium { grid-row: 1 / span 3; }
  .du-win .du-bottom { width: auto; min-height: 0; margin: 0; }
  .du-bottom .du-bip, .du-win .du-win-bip { width: 70px; }

  /* Academy */
  .ph-hub { gap: 6px; }
  .ph-hub > .bip { width: 56px !important; }
  .ph-title h2 { font-size: 28px; }
  .ph-title .gico { width: 44px; height: 44px; }
  .ph-lessons { grid-template-columns: repeat(5, 1fr); width: min(760px, 100%); gap: 10px; }
  .ph-lesson { height: 96px; }

  /* Avatar picker. index.html inlines first-paint .splash styles and Bip gets an inline width, hence .screen.splash and !important. */
  .screen.splash { gap: 8px; }
  .screen.splash .bip { width: 64px !important; }
  .screen.splash h1 { font-size: 30px; }
  .avatars { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); width: min(860px, 100%); gap: 10px; }

  /* Grown-ups PIN gate: words on the left, keypad on the right. */
  .pa-gate-top { position: absolute; top: calc(10px + var(--safe-t)); left: calc(16px + var(--safe-l)); width: auto; }
  .pa-gate-card { width: min(720px, 100%); display: grid; grid-template-columns: 1fr auto; column-gap: 32px; row-gap: 6px; justify-items: center; align-content: center; }
  .pa-gate-card > * { grid-column: 1; }
  .pa-gate-card > .keypad { grid-column: 2; grid-row: 1 / span 7; grid-template-columns: repeat(3, 72px); align-self: center; }
  .pa-gate .keypad .key { min-height: 64px; }
  .pa-badge { width: 52px; height: 52px; }
  .pa-gate h1 { font-size: 30px; }
  .pa-link { margin: 0; }
}