/* DEBUNK — shell styles (screens, dialogue, cards, HUD). Owner: shell agent.
   Pixel frames: 9-slice SVGs generated by shell.js into --fr-* custom properties (fallback: solid ink border). */
:root { --px: 3px; --gut: max(12px, calc(var(--u) * .8)); }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); }
body { font-family: var(--font); color: var(--white); overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
*, *::before, *::after { box-sizing: border-box; }
#app { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; background: var(--night);
  font-size: var(--u); user-select: none; -webkit-user-select: none; }
.screens, .screen { position: absolute; inset: 0; overflow: hidden; }
.overlays { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.overlays > * { pointer-events: auto; }
.toasts { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + var(--u) * 6.4); z-index: 70; display: flex; flex-direction: column;
  align-items: center; gap: .4em; pointer-events: none; }
.wipe { position: absolute; left: 0; top: 0; z-index: 100; display: none; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
.pxi { image-rendering: pixelated; image-rendering: crisp-edges; display: block; flex: none; }
noscript p { color: #fff; font: 20px sans-serif; padding: 24px; }

/* ---------- 9-slice pixel frames ---------- */
.fr { border-style: solid; border-width: calc(var(--px) * 3); border-color: var(--ink); border-image-slice: 3 fill; border-image-repeat: stretch;
  background-clip: padding-box; filter: drop-shadow(var(--px) calc(var(--px) * 1.5) 0 rgba(24,20,37,.55)); }
.fr-cream { border-image-source: var(--fr-cream); background-color: var(--sand); color: var(--ink); }
.fr-paper { border-image-source: var(--fr-paper); background-color: var(--white); color: var(--ink); }
.fr-wood { border-image-source: var(--fr-wood); background-color: var(--tan); color: var(--ink); }
.fr-pip { border-image-source: var(--fr-pip); background-color: var(--leaf); color: var(--white); }
.fr-corvus { border-image-source: var(--fr-corvus); background-color: var(--purple); color: var(--white); }
.fr-lemon { border-image-source: var(--fr-lemon); background-color: var(--lemon); color: var(--ink); }
.fr-night { border-image-source: var(--fr-night); background-color: var(--slate); color: var(--white); }
.fr-cork { border-image-source: var(--fr-cork); background-color: var(--clay); color: var(--ink); }
.fr-grass { border-image-source: var(--fr-grass); background-color: var(--grass); color: var(--ink); }
.fr-rose { border-image-source: var(--fr-rose); background-color: var(--rose); color: var(--ink); }
.fr-sky { border-image-source: var(--fr-sky); background-color: var(--sky); color: var(--ink); }

/* ---------- scenery fallback (flat pixel bands, no gradients-as-glass) ---------- */
.scenery { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.scenery.fallback { background: linear-gradient(to bottom, var(--sea) 0 30%, var(--sky) 30% 62%, var(--grass) 62% 66%, var(--leaf) 66% 100%); }
.scenery-night.fallback { background: linear-gradient(to bottom, var(--ink) 0 40%, var(--night) 40% 66%, var(--forest) 66% 70%, var(--pine) 70% 100%); }
.scenery-title.fallback { background: linear-gradient(to bottom, var(--deepsea) 0 22%, var(--sea) 22% 55%, var(--sky) 55% 70%, var(--grass) 70% 74%, var(--leaf) 74% 100%); }
.scenery > canvas { image-rendering: pixelated; }

/* ---------- buttons (extend .db-btn from base.css) ---------- */
#app .db-btn { min-height: 44px; font-size: calc(var(--u) * 1.0); }
#app .db-btn.big { font-size: calc(var(--u) * 1.25); }
.db-btn.primary:focus-visible, .db-btn:focus-visible { outline: .18em dashed var(--lemon); outline-offset: .28em; }
.hbtn { width: max(44px, calc(var(--u) * 2.9)); height: max(44px, calc(var(--u) * 2.9)); padding: 0 !important; justify-content: center; margin: .15em !important; }
.hbtn .pxi { margin: 0 auto; }
.hbtn.is-muted { background: var(--mist); }
.pulse { animation: pulse 1.1s steps(4) infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* ---------- top bar ---------- */
.topbar { position: absolute; left: 0; right: 0; top: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + var(--u) * .5) calc(env(safe-area-inset-right) + var(--u) * .6) 0 calc(env(safe-area-inset-left) + var(--u) * .6);
  pointer-events: none; }
.topbar > * { pointer-events: auto; display: flex; gap: .3em; align-items: center; }
.tb-m { flex: 1; justify-content: center; pointer-events: none; }
.tb-title { font-family: var(--font-title); font-size: calc(var(--u) * 1.15); color: var(--lemon); margin-top: .9em; letter-spacing: .04em;
  text-shadow: .12em 0 0 var(--ink), -.12em 0 0 var(--ink), 0 .12em 0 var(--ink), 0 -.12em 0 var(--ink), .12em .24em 0 var(--ink); }

/* ---------- title ---------- */
.title-wrap { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: min(3.2vh, 1.4em); padding: calc(env(safe-area-inset-top) + 4%) 16px calc(env(safe-area-inset-bottom) + 3%); }
.logo { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: min(12.5vw, 19vh); line-height: 1; display: flex; gap: .04em;
  padding-top: min(17vh, 1.25em); }
.logo .lt { position: relative; display: inline-block; color: var(--lemon); animation: bob 2.2s steps(6) infinite;
  text-shadow:
    -.06em 0 0 var(--ink), .06em 0 0 var(--ink), 0 -.06em 0 var(--ink), 0 .06em 0 var(--ink),
    -.06em .12em 0 var(--orange), .06em .12em 0 var(--orange), 0 .12em 0 var(--orange),
    -.06em .18em 0 var(--rust), .06em .18em 0 var(--rust), 0 .18em 0 var(--rust),
    -.12em .06em 0 var(--ink), .12em .06em 0 var(--ink), -.12em .12em 0 var(--ink), .12em .12em 0 var(--ink),
    -.12em .18em 0 var(--ink), .12em .18em 0 var(--ink), -.06em .24em 0 var(--ink), .06em .24em 0 var(--ink), 0 .24em 0 var(--ink),
    .12em .34em 0 rgba(24,20,37,.55), .18em .34em 0 rgba(24,20,37,.55); }
.logo .lt:nth-child(2n) { color: var(--white); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.09em); } }
.perch { position: absolute; bottom: 92%; pointer-events: none; }
.perch-pip { left: -.15em; }
.perch-corvus { right: -.2em; }
.subtitle { margin: 0; text-align: center; }
.subtitle span { display: inline-block; font-weight: 700; font-size: calc(var(--u) * 1.25); color: var(--ink); background: var(--sand); padding: .35em .9em .45em;
  box-shadow: 0 0 0 var(--px) var(--ink), var(--px) calc(var(--px) * 2) 0 var(--px) rgba(24,20,37,.5); }
.play-btn { font-size: calc(var(--u) * 1.7) !important; padding: .7em 1.8em .8em !important; animation: pulse 1.2s steps(4) infinite; }

/* ---------- dialogue ---------- */
.chat { position: absolute; inset: 0; z-index: 4; cursor: pointer; }
.actors { position: absolute; inset: 0; pointer-events: none; }
.actor { position: absolute; transition: filter .2s; }
.actor-in { width: 100%; height: 100%; }
.actor-in > * { display: block; image-rendering: pixelated; }
.actor.speaking { z-index: 2; }
.actor-in.hop { animation: hop .32s steps(4); }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9%); } }
.ph-char.talking canvas { animation: hop .3s steps(2) infinite; }
.bubble { position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; padding-top: 1.25em !important;
  bottom: calc(env(safe-area-inset-bottom) + max(10px, var(--u) * .7)); width: min(calc(100% - 32px), calc(var(--u) * 44));
  min-height: calc(var(--u) * 1.35 * 1.3 * 3 + var(--u) * 1.9 + var(--px) * 6); padding: 1em 1.3em .9em;
  transition: opacity .12s, transform .12s; }
.bubble.is-hidden { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(.6em); }
.btext { font-size: calc(var(--u) * 1.35); line-height: 1.3; font-weight: 600; color: var(--ink); letter-spacing: .01em; min-height: 1.3em; }
.tc { visibility: hidden; }
.tc.on { visibility: visible; }
.btext em { font-style: normal; }
.btext em .tc.on { background: linear-gradient(to bottom, transparent 0 58%, var(--lemon) 58% 92%, transparent 92%); color: var(--crimson); }
.w-corvus .btext em .tc.on { color: var(--purple); }
.tag { position: absolute; top: calc(var(--px) * -3 - .95em); font-weight: 700; font-size: calc(var(--u) * 1.05); padding: .12em .7em .2em; letter-spacing: .03em;
  text-shadow: 0 .1em 0 var(--ink); filter: none; z-index: 2; }
.bubble .tag, .gsay .tag { left: calc(var(--u) * .9); }
.bubble.w-corvus .tag { left: auto; right: calc(var(--u) * .9); }
.tail { position: absolute; top: calc(var(--px) * -8); width: calc(var(--px) * 7); height: calc(var(--px) * 7); background: var(--tail) no-repeat 0 0 / 100% 100%;
  image-rendering: pixelated; z-index: 1; }
.w-corvus .tail { transform: scaleX(-1); }
.more { position: absolute; right: 1em; bottom: .55em; width: calc(var(--px) * 7); height: calc(var(--px) * 4); background: var(--more-pip) no-repeat 0 0 / 100% 100%;
  opacity: 0; }
.w-corvus .more { background-image: var(--more-corvus); }
.more.on { opacity: 1; animation: more .6s steps(2) infinite; }
@keyframes more { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(35%); } }
.skip-btn { position: absolute; z-index: 25; top: calc(env(safe-area-inset-top) + var(--u) * .5); right: calc(env(safe-area-inset-right) + var(--u) * 4.2); }
.choices { position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; display: none; flex-direction: column; gap: .55em; align-items: stretch; }
.choices.on { display: flex; }
.choice { justify-content: flex-start; text-align: left; font-size: calc(var(--u) * 1.15) !important; line-height: 1.2 !important; padding: .55em .9em .65em .6em !important;
  margin: 0 !important; animation: choiceIn .22s steps(3) both; white-space: normal; }
.choice .key { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; background: var(--ink); color: var(--lemon);
  font-family: var(--font-title); font-size: .7em; }
.choice:hover { background: var(--lemon); }
.choice.picked { background: var(--lemon); transform: scale(1.04); }
.choice.faded { opacity: .35; }
@keyframes choiceIn { from { opacity: 0; transform: translateX(-1.2em); } to { opacity: 1; transform: none; } }

/* ---------- cards ---------- */
.cardwrap { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(24,20,37,.55);
  padding: calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 12px); animation: fadeIn .15s; }
@keyframes fadeIn { from { opacity: 0; } }
.card { width: min(100%, calc(var(--u) * 30)); max-height: 100%; overflow: auto; padding: 1.2em 1.5em 1.3em; text-align: center; animation: popIn .26s steps(4); }
@keyframes popIn { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); } }
.gcard-icon { display: flex; justify-content: center; margin: -.2em 0 .5em; }
.gcard-kicker { font-weight: 700; color: var(--rust); font-size: calc(var(--u) * .95); text-transform: uppercase; letter-spacing: .12em; }
.gcard-title { font-family: var(--font-title); font-weight: 400; font-size: calc(var(--u) * 1.5); line-height: 1.25; margin: .35em 0 .5em; color: var(--ink); }
.gcard-how { font-size: calc(var(--u) * 1.2); line-height: 1.35; font-weight: 600; margin: 0 0 .9em; }
.card-btns { display: flex; gap: .6em; justify-content: center; flex-wrap: wrap; }

/* try it yourself: a notebook page */
.note { position: relative; width: min(100%, calc(var(--u) * 36)); max-height: 100%; display: flex; flex-direction: column; animation: popIn .26s steps(4);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--u) * 1.85 - 2px), var(--mist) calc(var(--u) * 1.85 - 2px) calc(var(--u) * 1.85)); }
.note::before { content: ''; position: absolute; left: calc(var(--u) * 2.3); top: 0; bottom: 0; width: 2px; background: var(--rose); pointer-events: none; }
.tape { position: absolute; top: calc(var(--px) * -6); width: calc(var(--u) * 4); height: calc(var(--u) * 1.3); background: var(--lemon); opacity: .85;
  box-shadow: 0 0 0 2px rgba(24,20,37,.35); z-index: 2; }
.tape-l { left: 10%; transform: rotate(-6deg); } .tape-r { right: 10%; transform: rotate(5deg); }
.note-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .6em 1em .4em calc(var(--u) * 3.1); flex: 1; min-height: 0; overscroll-behavior: contain; user-select: text; -webkit-user-select: text; }
.note-kicker { font-weight: 700; color: var(--sea); font-size: calc(var(--u) * .9); text-transform: uppercase; letter-spacing: .12em; }
.note-title { font-family: var(--font-title); font-weight: 400; font-size: calc(var(--u) * 1.35); line-height: 1.3; margin: .3em 0 .6em; color: var(--ink); }
.note-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5em; }
.note-steps li { display: flex; gap: .6em; align-items: flex-start; font-size: calc(var(--u) * 1.25); line-height: 1.35; font-weight: 600; }
.note-steps .num { flex: none; width: 1.55em; height: 1.55em; display: inline-flex; align-items: center; justify-content: center; background: var(--sea); color: var(--white);
  font-weight: 700; box-shadow: 0 0 0 var(--px) var(--ink); margin-top: .05em; }
.note-note { font-size: calc(var(--u) * 1.1); line-height: 1.35; margin: .9em 0 .2em; padding: .5em .7em; background: var(--lemon); box-shadow: 0 0 0 var(--px) var(--ink); font-weight: 600; }
.note-sub { font-size: calc(var(--u) * 1.05); margin: 1em 0 .4em; text-transform: uppercase; letter-spacing: .1em; color: var(--rust); }
.learn { display: flex; flex-direction: column; gap: .5em; padding-bottom: .4em; }
.learn-btn { text-decoration: none; justify-content: flex-start; text-align: left; margin: 0 .2em !important; padding: .5em .8em .6em .5em !important; background: var(--sky); }
.learn-btn.k-photo { background: var(--rose); } .learn-btn.k-read { background: var(--lemon); } .learn-btn.k-live { background: var(--grass); }
.learn-ic { flex: none; width: 2em; height: 2em; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); }
.learn-tx { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.learn-lbl { font-size: calc(var(--u) * 1.05); line-height: 1.2; }
.learn-src { font-size: calc(var(--u) * .8); opacity: .8; font-weight: 600; }
.note-foot { display: flex; justify-content: flex-end; padding: .5em .8em .2em; flex: none; }
/* landscape: steps on the left, real-world links on the right, so everything shows without scrolling */
@media (orientation: landscape) and (min-width: 700px) {
  .tryit-wrap .note { width: min(100%, calc(var(--u) * 60)); }
  .note-cols.has-side { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0 calc(var(--u) * 1.6); align-items: start; }
  .note-side { padding-top: calc(var(--u) * 2.2); }
  .note-side .note-sub { margin-top: 0; }
  .note-steps { gap: .35em; }
  .note-steps li { font-size: calc(var(--u) * 1.15); line-height: 1.3; }
  .note-note { margin-top: .7em; font-size: calc(var(--u) * 1.0); }
  .note-title { margin-bottom: .45em; }
  .learn-btn { margin: 0 !important; }
}

/* sticker award */
.award { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em;
  background: rgba(24,20,37,.72); overflow: hidden; padding: 16px; }
.award-rays { position: absolute; left: 50%; top: 45%; width: 150vmax; height: 150vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(254,231,97,.13) 0 10deg, transparent 10deg 20deg); animation: spin 14s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.award-slap { position: relative; animation: slap .55s cubic-bezier(.2,1.6,.4,1) both;
  filter: drop-shadow(var(--px) 0 0 #fff) drop-shadow(calc(var(--px) * -1) 0 0 #fff) drop-shadow(0 var(--px) 0 #fff) drop-shadow(0 calc(var(--px) * -1) 0 #fff)
          drop-shadow(var(--px) 0 0 #fff) drop-shadow(calc(var(--px) * -1) 0 0 #fff) drop-shadow(calc(var(--px) * 2) calc(var(--px) * 3) 0 rgba(24,20,37,.6)); }
@keyframes slap { 0% { transform: scale(3.2) rotate(-28deg); opacity: 0; } 55% { transform: scale(.88) rotate(6deg); opacity: 1; } 75% { transform: scale(1.08) rotate(-4deg); } 100% { transform: scale(1) rotate(-3deg); } }
.award-parts { position: absolute; left: 50%; top: 42%; width: 0; height: 0; font-size: var(--u); pointer-events: none; }
.spark { position: absolute; width: .7em; height: .7em; background: var(--lemon); opacity: 0; animation: spark .8s steps(8) forwards; }
.spark.c1 { background: var(--white); } .spark.c2 { background: var(--gold); width: .5em; height: .5em; } .spark.c3 { background: var(--sky); width: .45em; height: .45em; }
@keyframes spark { 0% { transform: translate(0, 0) scale(1.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }
.award-text { position: relative; text-align: center; animation: popIn .3s .35s steps(4) both; }
.award-kicker { font-weight: 700; font-size: calc(var(--u) * 1.2); color: var(--sand); text-transform: uppercase; letter-spacing: .14em; }
.award-name { font-family: var(--font-title); font-size: calc(var(--u) * 1.8); color: var(--lemon); line-height: 1.3; margin-top: .25em;
  text-shadow: .1em 0 0 var(--ink), -.1em 0 0 var(--ink), 0 .1em 0 var(--ink), 0 -.1em 0 var(--ink), .1em .2em 0 var(--ink); }
.award-btn { position: relative; animation: popIn .3s .6s steps(4) both; }

/* ---------- topics ---------- */
.topics-feature { width: min(100%, calc(var(--u) * 60)); display: flex; justify-content: center; align-items: stretch; gap: calc(var(--u) * 1.4); padding-top: 1em; flex: none; }
.sign.hero { flex: 1 1 0; max-width: calc(var(--u) * 29); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic tx" "pr pr" "go go";
  align-items: center; column-gap: .9em; row-gap: .55em; padding: .9em 1.1em 1em; text-align: left; animation: heroBob 2.4s steps(6) infinite; }
.sign.hero:nth-child(2) { animation-delay: -1.2s; }
.sign.hero .sign-ic { grid-area: ic; }
.sign.hero .sign-tx { grid-area: tx; align-items: flex-start; gap: .2em; }
.sign.hero .sign-q { font-family: var(--font-title); font-weight: 400; font-size: calc(var(--u) * 1.3); line-height: 1.3; }
.sign-kicker { font-weight: 700; font-size: calc(var(--u) * .8); text-transform: uppercase; letter-spacing: .12em; color: var(--rust); }
.sign-prog { grid-area: pr; display: flex; align-items: center; gap: .6em; background: var(--ink); color: var(--sand); padding: .3em .6em; justify-self: stretch; }
.sign-prog .sign-meta { color: var(--sand); font-weight: 700; font-size: calc(var(--u) * .9); }
.sp-pips { display: flex; gap: .25em; flex: none; }
.sp-pips i { width: .65em; height: .65em; background: var(--slate); box-shadow: 0 0 0 2px var(--steel); }
.sp-pips i.on { background: var(--lemon); box-shadow: 0 0 0 2px var(--gold); }
.sign.hero .sign-go { grid-area: go; justify-self: stretch; text-align: center; }
.sign.hero.all .sign-go { background: var(--lemon); box-shadow: 0 -.18em 0 0 var(--gold) inset, 0 0 0 var(--px) var(--ink); }
.topics-locked { width: min(100%, calc(var(--u) * 54)); display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 9.5), 1fr)); gap: calc(var(--u) * 1.5) calc(var(--u) * .9);
  margin-top: calc(var(--u) * 1.9); flex: none; }
.topics-locked .sign { padding: .55em .5em .65em; }
.topics { position: absolute; inset: 0; z-index: 5; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center;
  padding: calc(env(safe-area-inset-top) + var(--u) * 4.2) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 16px); }
.topics-sub { margin: 0 0 1.2em; font-weight: 700; font-size: calc(var(--u) * 1.1); color: var(--ink); background: rgba(234,212,170,.92); padding: .25em .8em; box-shadow: 0 0 0 var(--px) var(--ink); }
.sign { position: relative; font-family: var(--font); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .4em; padding: .7em .5em .8em;
  text-align: center; min-height: 44px; transition: transform .08s; }
.sign:hover { transform: translateY(-.15em) rotate(-.6deg); }
.sign:active { transform: translateY(.1em); }
.sign:focus-visible { outline: .18em dashed var(--lemon); outline-offset: .3em; }
.rope { position: absolute; top: calc(var(--px) * -3 - 1em); width: var(--px); height: 1em; background: var(--brown); box-shadow: 0 0 0 1px var(--ink); }
.rope-l { left: 22%; } .rope-r { right: 22%; }
.sign-q { font-weight: 700; font-size: calc(var(--u) * 1.0); line-height: 1.2; color: var(--ink); }
.sign-tx { display: flex; flex-direction: column; gap: .25em; align-items: center; }
.sign-meta { font-size: calc(var(--u) * .85); font-weight: 600; color: var(--brown); }
.sign-go { flex: none; font-weight: 700; font-size: calc(var(--u) * 1.15); background: var(--grass); color: var(--ink); padding: .5em .8em .6em;
  box-shadow: 0 -.18em 0 0 var(--leaf) inset, 0 0 0 var(--px) var(--ink); }
@keyframes heroBob { 0%, 100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg) translateY(-.1em); } }
.sign.locked { filter: saturate(.25) brightness(.82) drop-shadow(var(--px) calc(var(--px) * 1.5) 0 rgba(24,20,37,.55)); cursor: not-allowed; }
.sign.locked .sign-meta { color: var(--ink); background: var(--mist); padding: .1em .45em; text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--u) * .72); }
.sign-lock { position: absolute; right: -.5em; top: -.6em; background: var(--sand); padding: .25em; box-shadow: 0 0 0 var(--px) var(--ink); }
.shake { animation: shake .3s steps(6) !important; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-.3em); } 75% { transform: translateX(.3em); } }

/* ---------- question board ---------- */
.board { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: calc(var(--u) * .7); align-items: center;
  padding: calc(env(safe-area-inset-top) + var(--u) * .7) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + var(--u) * .8) calc(env(safe-area-inset-left) + 16px);
  overflow-y: auto; overscroll-behavior: contain; }
.board-head { display: flex; flex-direction: column; align-items: center; gap: .35em; padding: 0 calc(var(--u) * 7); text-align: center; flex: none; }
.board-title { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: calc(var(--u) * 1.55); line-height: 1.3; color: var(--lemon);
  text-shadow: .1em 0 0 var(--ink), -.1em 0 0 var(--ink), 0 .1em 0 var(--ink), 0 -.1em 0 var(--ink), .1em .2em 0 var(--ink); }
.board-prog { display: flex; align-items: center; gap: .6em; background: var(--ink); color: var(--sand); padding: .25em .7em; font-weight: 700; font-size: calc(var(--u) * 1.0); }
.board-prog b { color: var(--lemon); }
.bp-pips { display: flex; gap: .25em; }
.bp-pips i { width: .7em; height: .7em; background: var(--slate); box-shadow: 0 0 0 2px var(--steel); }
.bp-pips i.on { background: var(--lemon); box-shadow: 0 0 0 2px var(--gold); }
.board-grid { width: min(100%, calc(var(--u) * 56)); flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, 1fr);
  gap: calc(var(--u) * .9); }
.qcard { position: relative; font-family: var(--font); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em;
  padding: .6em .6em .7em; text-align: center; min-height: 44px; transform: rotate(var(--tilt, 0deg)); transition: transform .08s; }
.qcard:hover { transform: rotate(0deg) translateY(-.15em) scale(1.02); }
.qcard:active { transform: translateY(.1em); }
.qcard:focus-visible { outline: .18em dashed var(--lemon); outline-offset: .3em; }
.qc-num { position: absolute; left: .4em; top: .35em; font-weight: 700; font-size: calc(var(--u) * .75); color: var(--brown); text-transform: uppercase; letter-spacing: .08em; }
.qc-ic { display: flex; justify-content: center; }
.qc-q { font-weight: 700; font-size: calc(var(--u) * 1.05); line-height: 1.22; color: var(--ink); }
.qc-q em { font-style: normal; color: var(--crimson); }
.qc-state { font-weight: 700; font-size: calc(var(--u) * .85); color: var(--white); background: var(--sea); padding: .2em .6em .3em; box-shadow: 0 0 0 2px var(--ink); }
.qcard.done .qc-state { background: var(--steel); }
.qc-ic.stk { transform: rotate(-8deg);
  filter: drop-shadow(var(--px) 0 0 #fff) drop-shadow(calc(var(--px) * -1) 0 0 #fff) drop-shadow(0 var(--px) 0 #fff) drop-shadow(0 calc(var(--px) * -1) 0 #fff) drop-shadow(var(--px) calc(var(--px) * 1.5) 0 rgba(24,20,37,.45)); }
.qcard.just .qc-ic.stk { animation: slapSmall .5s .35s cubic-bezier(.2,1.6,.4,1) both; }
.qc-sticker { position: absolute; right: -.5em; top: -.6em; transform: rotate(12deg);
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 3px 0 rgba(24,20,37,.5)); }
@keyframes slapSmall { 0% { transform: scale(3) rotate(-30deg); opacity: 0; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
.qc-check { position: absolute; right: -.5em; top: -.55em; width: 1.8em; height: 1.8em; display: flex; align-items: center; justify-content: center; background: var(--grass);
  box-shadow: 0 0 0 var(--px) var(--ink); }
.final { flex: none; font-family: var(--font); cursor: pointer; display: flex; align-items: center; gap: .8em; width: min(100%, calc(var(--u) * 40)); padding: .5em 1em .6em; min-height: 44px; }
.final-q { flex: 1; text-align: left; font-family: var(--font-title); font-size: calc(var(--u) * 1.05); line-height: 1.3; }
.final-state { flex: none; font-weight: 700; font-size: calc(var(--u) * .9); max-width: 11em; text-align: right; }
.final.locked { color: var(--mist); }
.final.open { animation: pulse 1.1s steps(4) infinite; }
.final:focus-visible { outline: .18em dashed var(--lemon); outline-offset: .3em; }

/* ---------- in-game HUD ---------- */
.game-layer { position: absolute; inset: 0; z-index: 10; background: var(--ink); }
.ghud { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.ghud > * { pointer-events: auto; }
.ghud-l { position: absolute; left: calc(env(safe-area-inset-left) + var(--u) * .5); top: calc(env(safe-area-inset-top) + var(--u) * .5); }
.ghud-r { position: absolute; right: calc(env(safe-area-inset-right) + var(--u) * .5); top: calc(env(safe-area-inset-top) + var(--u) * .5); }
.ghud-c { position: absolute; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + var(--u) * .55); display: flex; flex-direction: column;
  align-items: center; gap: .4em; pointer-events: none; width: calc(100% - 2 * max(44px, var(--u) * 2.9) - var(--u) * 3); }
.objective { font-weight: 700; font-size: calc(var(--u) * 1.15); line-height: 1.2; text-align: center; padding: .3em .9em .4em; max-width: 100%; }
.objective.is-hidden { display: none; }
.objective.slide { animation: objIn .32s steps(4); }
@keyframes objIn { 0% { transform: translateY(-160%); } 70% { transform: translateY(8%); } 100% { transform: none; } }
.pips { display: flex; gap: .35em; font-size: calc(var(--u) * .55); }
.pips.is-hidden { display: none; }
.pips i { width: .9em; height: .9em; background: var(--slate); box-shadow: 0 0 0 2px var(--ink), inset 0 -2px 0 var(--night); }
.pips i.on { background: var(--lemon); box-shadow: 0 0 0 2px var(--ink), inset 0 -2px 0 var(--gold); }
.pips i.pop { animation: pipPop .3s steps(3); }
@keyframes pipPop { 50% { transform: scale(1.6); } }
.next-btn { position: absolute; right: calc(env(safe-area-inset-right) + var(--u) * .8); bottom: calc(env(safe-area-inset-bottom) + var(--u) * .8); z-index: 30;
  animation: nextIn .4s steps(4), pulse 1s .4s steps(4) infinite; font-size: calc(var(--u) * 1.45) !important; }
@keyframes nextIn { from { transform: translateX(150%); } }
.ghud.saying .next-btn { bottom: auto; }
.ghud-c .next-btn { position: relative; right: auto; bottom: auto; pointer-events: auto; margin-top: .1em; font-size: calc(var(--u) * 1.4) !important; min-height: 48px;
  animation: nextDrop .4s steps(4), pulse 1s .4s steps(4) infinite; }
@keyframes nextDrop { from { transform: translateY(-120%); opacity: 0; } }
.gsay { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + var(--u) * .6); z-index: 25; width: min(calc(100% - 32px), calc(var(--u) * 38));
  display: flex; gap: .8em; align-items: flex-start; padding: .9em 1.1em .8em .8em; cursor: pointer; transition: opacity .12s, transform .12s; }
.gsay.is-hidden { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(.6em); pointer-events: none; }
.gsay-pic { flex: none; background: var(--sky); box-shadow: 0 0 0 var(--px) var(--ink); padding: 2px; }
.gsay.w-corvus .gsay-pic { background: var(--mist); }
.gsay-body { flex: 1; min-width: 0; }
.gsay .tag { left: calc(var(--u) * .7); }
.gsay .btext { font-size: calc(var(--u) * 1.2); }

/* ---------- toasts ---------- */
.toast { font-weight: 700; font-size: calc(var(--u) * 1.25); padding: .25em 1em .35em; animation: toastIn .28s steps(4); text-align: center; max-width: 90vw; }
.toast.out { opacity: 0; transform: translateY(-.6em); transition: opacity .3s, transform .3s; }
@keyframes toastIn { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }

/* ---------- modal + settings ---------- */
.modal-back, .pop-back { position: absolute; inset: 0; background: rgba(24,20,37,.6); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn .12s; }
.pop-back { background: rgba(24,20,37,.35); align-items: flex-start; justify-content: flex-end; padding: calc(env(safe-area-inset-top) + var(--u) * 4) calc(env(safe-area-inset-right) + var(--u) * .6) 16px 16px; }
.modal { width: min(100%, calc(var(--u) * 26)); padding: 1em 1.3em 1.2em; text-align: center; animation: popIn .22s steps(4); }
.modal-title { font-family: var(--font-title); font-weight: 400; font-size: calc(var(--u) * 1.25); line-height: 1.3; margin: .2em 0 .5em; }
.modal-text { font-size: calc(var(--u) * 1.15); line-height: 1.35; margin: 0 0 1em; font-weight: 600; }
.modal-btns { display: flex; justify-content: center; gap: .5em; flex-wrap: wrap; }
.pop { width: min(100%, calc(var(--u) * 24)); padding: .8em 1em 1em; animation: popIn .2s steps(4); }
.pop-title { font-family: var(--font-title); font-weight: 400; font-size: calc(var(--u) * 1.1); margin: .1em 0 .6em; }
.pop-row { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .25em 0; border-bottom: 2px dashed var(--tan); }
.pop-lbl { font-weight: 700; font-size: calc(var(--u) * 1.05); }
.seg { display: flex; }
.seg .db-btn { margin: .2em .1em; }
.pop-done { width: calc(100% - .4em); justify-content: center; margin-top: .7em !important; }

/* ---------- finale clue board ---------- */
.clue-wrap { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em;
  padding: calc(env(safe-area-inset-top) + var(--u) * 3.6) 16px calc(env(safe-area-inset-bottom) + 12px); background: rgba(24,20,37,.35); animation: fadeIn .3s; }
.clue-title { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: calc(var(--u) * 1.5); color: var(--lemon);
  text-shadow: .1em 0 0 var(--ink), -.1em 0 0 var(--ink), 0 .1em 0 var(--ink), 0 -.1em 0 var(--ink), .1em .2em 0 var(--ink); }
.clue-sub { margin: 0; font-weight: 700; font-size: calc(var(--u) * 1.1); color: var(--sand); }
.clue-board { position: relative; width: min(100%, calc(var(--u) * 44), 130vh); flex: 1 1 auto; min-height: 0; max-height: calc(var(--u) * 27);
  background-image: radial-gradient(circle at 30% 40%, rgba(115,62,57,.35) 0 2px, transparent 3px), radial-gradient(circle at 70% 20%, rgba(228,166,114,.35) 0 2px, transparent 3px);
  background-size: 23px 19px, 31px 27px; }
.clue-strings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.clue-strings line { stroke: var(--red); stroke-width: 3; stroke-dasharray: 8 6; shape-rendering: crispEdges; animation: dash 1.2s steps(6) both; }
@keyframes dash { from { stroke-dashoffset: 60; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
.clue-globe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: globeBob 2.6s steps(6) infinite;
  filter: drop-shadow(var(--px) 0 0 var(--ink)) drop-shadow(calc(var(--px) * -1) 0 0 var(--ink)) drop-shadow(0 var(--px) 0 var(--ink)) drop-shadow(0 calc(var(--px) * -1) 0 var(--ink)) drop-shadow(var(--px) calc(var(--px) * 2) 0 rgba(24,20,37,.5)); }
@keyframes globeBob { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -54%); } }
.clue-st { position: absolute; transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)); display: flex; flex-direction: column; align-items: center; gap: .2em;
  background: var(--white); padding: .45em .45em .35em; box-shadow: 0 0 0 var(--px) var(--ink), var(--px) calc(var(--px) * 2) 0 var(--px) rgba(24,20,37,.45);
  animation: stIn .4s steps(4) both; max-width: 9em; }
@keyframes stIn { from { transform: translate(-50%, -50%) scale(2) rotate(-20deg); opacity: 0; } }
.clue-st .pin { position: absolute; top: -.45em; left: 50%; width: .8em; height: .8em; margin-left: -.4em; background: var(--red); box-shadow: 0 0 0 2px var(--ink), inset -2px -2px 0 var(--crimson); }
.clue-name { font-weight: 700; font-size: calc(var(--u) * .8); line-height: 1.1; color: var(--ink); text-align: center; }
.clue-st.missing { background: var(--mist); opacity: .8; }
.qmark { display: flex; width: 2.4em; height: 2.4em; align-items: center; justify-content: center; font-family: var(--font-title); color: var(--steel); border: 2px dashed var(--steel); }
.clue-btns { display: flex; gap: .5em; flex-wrap: wrap; justify-content: center; flex: none; }

/* ---------- responsive ---------- */
@media (orientation: portrait) {
  .topics-feature { flex-direction: column; align-items: stretch; gap: calc(var(--u) * 1.8); }
  .sign.hero { max-width: none; flex: none; }
  .topics-locked { grid-template-columns: repeat(2, 1fr); }
  .board-grid { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .board-head { padding: 0 calc(var(--u) * 3.6); margin-top: calc(var(--u) * 3.3); }
  .final { flex-wrap: wrap; justify-content: center; }
  .final-q { flex: 1 1 0; font-size: calc(var(--u) * .95); }
  .final-state { flex: 1 1 100%; max-width: none; text-align: center; }
  .tb-title { margin-top: .9em; }
  .subtitle span { font-size: calc(var(--u) * 1.1); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .topics-sub { display: none; }
  .topics-feature { padding-top: .5em; }
  .sign.hero { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic tx tx" "pr pr go"; padding: .55em .8em .65em; row-gap: .45em; }
  .sign.hero .sign-q { font-size: calc(var(--u) * 1.1); }
  .sign.hero .sign-go { padding: .4em .6em .45em; }
  .topics-locked { margin-top: calc(var(--u) * 1.6); gap: calc(var(--u) * 1.3) calc(var(--u) * .6); }
  .topics-locked .sign { flex-direction: row; padding: .35em .5em .45em; text-align: left; }
  .topics-locked .sign-tx { align-items: flex-start; }
  .topics-locked .sign-q { font-size: calc(var(--u) * .85); }
  .qcard { flex-direction: row; text-align: left; justify-content: flex-start; padding: .4em .6em .45em; gap: .5em; }
  .qcard .qc-num { display: none; }
  .qc-q { font-size: calc(var(--u) * .95); flex: 1; }
  .qc-state { display: none; }
  .board { gap: .45em; }
  .board-title { font-size: calc(var(--u) * 1.2); }
  .title-wrap { gap: .6em; }
  .tryit-wrap .note-steps li { font-size: calc(var(--u) * 1.0); }
  .tryit-wrap .note-title { font-size: calc(var(--u) * 1.1); margin: .2em 0 .35em; }
  .tryit-wrap .note-note { font-size: calc(var(--u) * .9); margin-top: .5em; padding: .35em .6em; }
  .tryit-wrap .note-foot { padding: .2em .6em 0; }
  .tryit-wrap .learn-lbl { font-size: calc(var(--u) * .95); }
}
@media (max-width: 380px) { .board-head { padding: 0 calc(var(--u) * 3.2); } }

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

/* ---------- volume slider + speaker popover ---------- */
.pop .vol-slider { display: flex; width: 100%; margin: .3em 0; box-sizing: border-box; font-size: calc(var(--u) * 1.0); }
.pop .vol-slider input[type=range] { flex: 1; width: auto; min-width: 0; }
.pop .vol-slider .val { min-width: 3.2em; text-align: right; }
.pop .vol-slider input[type=range]:focus-visible { outline: .16em dashed var(--lemon); outline-offset: .2em; }
.pop-vol { border-bottom: 2px dashed var(--tan); }
.snd-back { display: block; background: rgba(24,20,37,.25); }
.snd-pop { position: absolute; width: min(calc(100vw - 16px), calc(var(--u) * 20)); }
.snd-row { border-bottom: 0; flex-wrap: wrap; justify-content: flex-end; }
.snd-mute { flex: 1; justify-content: center; }
.snd-mute.on { background: var(--rose); }

/* ---------- "Clue found!" card (after api.complete) ---------- */
.cc-wrap { position: absolute; inset: 0; z-index: 22; display: flex; align-items: center; justify-content: center; background: rgba(24,20,37,.55);
  padding: calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 12px); animation: fadeIn .2s; pointer-events: auto; }
.cc { position: relative; width: min(100%, calc(var(--u) * 24)); max-height: 100%; overflow: visible; display: flex; flex-direction: column; align-items: center;
  gap: .35em; padding: 1em 1.4em 1.1em; text-align: center; animation: popIn .3s steps(4); }
.cc-pic { margin-top: -.2em; animation: wiggle 1.4s steps(4) infinite;
  filter: drop-shadow(var(--px) 0 0 #fff) drop-shadow(calc(var(--px) * -1) 0 0 #fff) drop-shadow(0 var(--px) 0 #fff) drop-shadow(0 calc(var(--px) * -1) 0 #fff) drop-shadow(var(--px) calc(var(--px) * 1.5) 0 rgba(24,20,37,.45)); }
@keyframes wiggle { 0%, 100% { transform: rotate(-6deg) scale(1); } 25% { transform: rotate(5deg) scale(1.06); } 50% { transform: rotate(-3deg) scale(1); } 75% { transform: rotate(6deg) scale(1.04); } }
.cc-bird { position: absolute; left: calc(var(--u) * -1.2); bottom: calc(var(--u) * -.6); transform: rotate(-6deg); background: var(--mist); padding: 2px;
  box-shadow: 0 0 0 var(--px) var(--ink), var(--px) calc(var(--px) * 1.5) 0 var(--px) rgba(24,20,37,.45); animation: popIn .35s .25s steps(4) both; }
.cc-title { margin: .1em 0 0; font-family: var(--font-title); font-weight: 400; font-size: calc(var(--u) * 1.6); line-height: 1.2; color: var(--ink); }
.cc-sub { margin: 0 0 .3em; font-weight: 600; font-size: calc(var(--u) * 1.05); }
.cc-sub b { color: var(--rust); }
.cc-next { font-size: calc(var(--u) * 1.6) !important; padding: .55em 1.8em .65em !important; animation: pulse 1.1s steps(4) infinite; }
.cc-keep { font-size: calc(var(--u) * .9) !important; background: var(--mist) !important; margin-top: .25em !important; }
@media (orientation: landscape) and (max-height: 520px) { .cc { gap: .2em; padding: .6em 1.2em .7em; } .cc-title { font-size: calc(var(--u) * 1.3); } }

/* finale: main menu biggest, start over small */
.db-btn.small { font-size: calc(var(--u) * .85) !important; padding: .5em .8em .6em !important; }
.clue-btns { align-items: center; }

/* ---------- Sticker Book ---------- */
.book-row { display: flex; justify-content: center; margin-top: calc(var(--u) * 1.3); flex: none; }
.book-btn { gap: .55em !important; background: var(--lemon) !important; }
.book-btn .book-n { background: var(--ink); color: var(--lemon); padding: .15em .45em .2em; font-size: .85em; }
.book-btn.compact { padding: .35em .7em .45em !important; }
@media (max-width: 560px) { .book-btn.compact .lbl { display: none; } }
.book { position: absolute; inset: 0; z-index: 5; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .8);
  padding: calc(env(safe-area-inset-top) + var(--u) * 4.1) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 16px); }
.book-head { flex: none; font-weight: 700; font-size: calc(var(--u) * 1.05); background: var(--ink); color: var(--sand); padding: .25em .8em .3em; }
.book-head b { color: var(--lemon); }
.book-pages { flex: none; width: min(100%, calc(var(--u) * 60)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.1); }
.book-pages.n1 { grid-template-columns: minmax(0, 1fr); width: min(100%, calc(var(--u) * 32)); }
.bpage { padding: .7em .8em .9em; background-image: radial-gradient(circle, rgba(139,155,180,.35) 1px, transparent 1.5px); background-size: 14px 14px; }
.bpage-head { display: flex; align-items: center; gap: .6em; padding-bottom: .5em; margin-bottom: .6em; border-bottom: 2px dashed var(--mist); }
.bpage-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15em; }
.bpage-k { font-weight: 700; font-size: calc(var(--u) * .75); text-transform: uppercase; letter-spacing: .12em; color: var(--rust); }
.bpage-q { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: calc(var(--u) * .95); line-height: 1.3; color: var(--ink); }
.bpage-n { flex: none; font-weight: 700; font-size: calc(var(--u) * .95); background: var(--ink); color: var(--lemon); padding: .15em .5em .2em; }
.bpage.full .bpage-n { background: var(--grass); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.bpage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em .4em; }
.stk { position: relative; font-family: var(--font); border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .25em;
  padding: .35em .2em .3em; min-height: 44px; color: var(--ink); }
.stk:focus-visible { outline: .16em dashed var(--sea); outline-offset: .1em; }
.stk-ic { display: flex; justify-content: center; transform: rotate(var(--tilt, 0deg)); transition: transform .1s; }
.stk.got .stk-ic { filter: drop-shadow(var(--px) 0 0 #fff) drop-shadow(calc(var(--px) * -1) 0 0 #fff) drop-shadow(0 var(--px) 0 #fff) drop-shadow(0 calc(var(--px) * -1) 0 #fff)
  drop-shadow(var(--px) calc(var(--px) * 1.5) 0 rgba(24,20,37,.35)); }
.stk.got:hover .stk-ic, .stk.got:focus-visible .stk-ic { transform: rotate(0deg) scale(1.08); }
.stk.miss .stk-ic canvas { filter: brightness(0); opacity: .62; }
.stk-q { position: absolute; left: 50%; top: .35em; transform: translateX(-50%); font-family: var(--font-title); font-size: calc(var(--u) * 1.3); color: var(--white);
  text-shadow: .12em 0 0 var(--ink), -.12em 0 0 var(--ink), 0 .12em 0 var(--ink), 0 -.12em 0 var(--ink); margin-top: .5em; pointer-events: none; }
.stk-name { font-weight: 700; font-size: calc(var(--u) * .8); line-height: 1.1; text-align: center; }
.stk.miss .stk-name { color: var(--steel); }
.tip { position: absolute; z-index: 30; max-width: min(calc(100% - 16px), calc(var(--u) * 19)); padding: .45em .7em .55em; display: flex; flex-direction: column; gap: .2em;
  pointer-events: none; font-size: calc(var(--u) * .95); line-height: 1.25; animation: fadeIn .12s; }
.tip.is-hidden { display: none; }
.tip-name { font-size: 1.1em; }
.tip-about { font-weight: 600; }
.tip-from { font-size: .85em; color: var(--rust); font-weight: 700; }
.book-locked { flex: none; width: min(100%, calc(var(--u) * 60)); display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 12), 1fr)); gap: calc(var(--u) * .7); }
.bpage-locked { display: flex; align-items: center; gap: .6em; padding: .45em .6em .5em; filter: saturate(.2) brightness(.8) drop-shadow(var(--px) calc(var(--px) * 1.5) 0 rgba(24,20,37,.55)); }
.bl-tx { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.bl-q { font-weight: 700; font-size: calc(var(--u) * .85); line-height: 1.15; }
.bl-soon { align-self: flex-start; font-weight: 700; font-size: calc(var(--u) * .68); text-transform: uppercase; letter-spacing: .08em; background: var(--mist); padding: .05em .4em; }
@media (orientation: portrait) {
  .book-pages { grid-template-columns: minmax(0, 1fr); }
  .book-locked { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .book { gap: .5em; }
  .bpage { padding: .45em .6em .6em; }
  .bpage-head { padding-bottom: .3em; margin-bottom: .35em; }
  .bpage-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .book-row { margin-top: calc(var(--u) * 1.1); }
}

/* ---------- Try-it: THE REAL SCIENCE panel (secondary) ---------- */
.sci { position: relative; margin-top: 1em; padding: .9em .8em .7em; background: var(--mist); box-shadow: 0 0 0 var(--px) var(--slate); color: var(--night); }
.sci-badge { position: absolute; top: -.85em; right: .6em; display: flex; align-items: center; gap: .4em; background: var(--lemon); color: var(--ink); font-weight: 700;
  font-size: calc(var(--u) * .7); text-transform: uppercase; letter-spacing: .1em; padding: .2em .5em .25em; box-shadow: 0 0 0 2px var(--ink); transform: rotate(3deg); }
.sci-title { margin: 0 0 .3em; font-size: calc(var(--u) * .85); text-transform: uppercase; letter-spacing: .12em; color: var(--slate); }
.sci-text { margin: 0; font-size: calc(var(--u) * .92); line-height: 1.35; font-weight: 600; }
.sci-text em { font-style: normal; color: var(--deepsea); }
@media (orientation: landscape) and (min-width: 700px) { .note-side .sci:first-child { margin-top: calc(var(--u) * .4); } }

/* ---------- science toggle + scroll cue (round 4) ---------- */
.sci { padding-top: .75em; }
.sci .sci-toggle { width: 100%; justify-content: space-between; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important;
  min-height: 44px; font-size: inherit !important; color: var(--slate); }
.sci .sci-toggle .sci-title { margin: 0; font-size: calc(var(--u) * .85); text-transform: uppercase; letter-spacing: .12em; }
.sci .sci-more { flex: none; font-size: calc(var(--u) * .85); background: var(--white); color: var(--deepsea); padding: .2em .55em .25em; box-shadow: 0 0 0 2px var(--slate); }
.sci .sci-text { display: none; }
.sci.open .sci-text { display: block; margin-top: .1em; }
.note-foot { justify-content: space-between; align-items: center; gap: .6em; }
.scroll-cue { visibility: hidden; font-size: calc(var(--u) * .85) !important; background: var(--ink) !important; color: var(--lemon) !important; padding: .4em .8em .5em !important; }
.scroll-cue.on { visibility: visible; animation: cueBob 1s steps(2) infinite; }
@keyframes cueBob { 50% { transform: translateY(.18em); } }

/* ---------- three featured topics ---------- */
.topics-feature.n3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, calc(var(--u) * 64)); gap: calc(var(--u) * 1.1); }
.topics-feature.n3 .sign.hero { max-width: none; }
.topics-feature.n3 .sign.hero .sign-q { font-size: calc(var(--u) * 1.05); }
.topics-feature.n3 .sign.hero:nth-child(3) { animation-delay: -.6s; }
.book-pages.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, calc(var(--u) * 66)); }
@media (orientation: landscape) and (max-height: 520px) {
  .topics-feature.n3 .sign.hero { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic tx tx" "pr pr go"; column-gap: .5em; padding: .5em .6em .6em; }
  .topics-feature.n3 .sign-ic .pxi { width: calc(var(--u) * 2.4) !important; height: auto !important; }
  .topics-feature.n3 .sign.hero .sign-q { font-size: calc(var(--u) * .85); }
  .topics-feature.n3 .sm-l { display: none; }
  .topics-feature.n3 .sign-prog { padding: .25em .45em; gap: .4em; }
  .book-pages.n3 .bpage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .book-pages.n3 .bpage-q { font-size: calc(var(--u) * .8); }
}
@media (orientation: portrait) {
  .topics-feature.n3 { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 1.8); }
  .book-pages.n3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- line actions (chapter 4): { shake } and { sticker } ---------- */
.screen.jolt > .scenery, .screen.jolt > .chat, .game-layer.jolt { animation: jolt .36s steps(6); }
.screen.jolt.big > .scenery, .screen.jolt.big > .chat, .game-layer.jolt.big { animation: joltBig .5s steps(8); }
@keyframes jolt { 0%, 100% { transform: translate(0, 0); } 17% { transform: translate(calc(var(--px) * -2), var(--px)); } 33% { transform: translate(calc(var(--px) * 2), calc(var(--px) * -1)); }
  50% { transform: translate(calc(var(--px) * -1), calc(var(--px) * -1)); } 67% { transform: translate(var(--px), var(--px)); } 83% { transform: translate(calc(var(--px) * -1), 0); } }
@keyframes joltBig { 0%, 100% { transform: translate(0, 0); } 12% { transform: translate(calc(var(--px) * -4), calc(var(--px) * 2)); } 25% { transform: translate(calc(var(--px) * 4), calc(var(--px) * -2)); }
  37% { transform: translate(calc(var(--px) * -3), calc(var(--px) * -2)); } 50% { transform: translate(calc(var(--px) * 3), calc(var(--px) * 2)); } 62% { transform: translate(calc(var(--px) * -2), var(--px)); }
  75% { transform: translate(calc(var(--px) * 2), calc(var(--px) * -1)); } 87% { transform: translate(calc(var(--px) * -1), 0); } }
/* the sticker pops over the speaker: (left, top) = its bottom-centre */
.line-stk { position: absolute; z-index: 4; pointer-events: none; transform: translate(-50%, -100%) rotate(-6deg);
  animation: lstkIn .5s cubic-bezier(.2,1.6,.4,1) both, lstkBob 1.2s .5s steps(4) infinite;
  filter: drop-shadow(var(--px) 0 0 #fff) drop-shadow(calc(var(--px) * -1) 0 0 #fff) drop-shadow(0 var(--px) 0 #fff) drop-shadow(0 calc(var(--px) * -1) 0 #fff)
          drop-shadow(var(--px) calc(var(--px) * 2) 0 rgba(24,20,37,.5)); }
.ghud > .line-stk { z-index: 26; pointer-events: none; }
.line-stk.out { animation: lstkOut .4s steps(4) forwards; }
@keyframes lstkIn { 0% { transform: translate(-50%, -100%) scale(2.6) rotate(-24deg); opacity: 0; } 60% { transform: translate(-50%, -100%) scale(.9) rotate(3deg); opacity: 1; }
  100% { transform: translate(-50%, -100%) scale(1) rotate(-6deg); opacity: 1; } }
@keyframes lstkBob { 0%, 100% { transform: translate(-50%, -100%) rotate(-6deg); } 50% { transform: translate(-50%, -106%) rotate(-3deg); } }
@keyframes lstkOut { from { transform: translate(-50%, -100%) rotate(-6deg); opacity: 1; } to { transform: translate(-50%, -135%) scale(.8) rotate(4deg); opacity: 0; } }

/* finale clue board laid out again after a resize/rotate: no entrance animations */
.clue-wrap.again, .clue-wrap.again .clue-st, .clue-wrap.again .clue-strings line { animation: none; }

/* ---------- four (or more) playable chapters ---------- */
.tb-book { display: none !important; }
.topics-feature.nmany { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, calc(var(--u) * 66)); gap: calc(var(--u) * 1.0); }
.topics-feature.nmany .sign.hero { max-width: none; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "ic k" "q q" "pr pr" "go go"; column-gap: .55em; row-gap: .5em; padding: .75em .85em .85em; }
.topics-feature.nmany .sign.hero .sign-tx { display: contents; }
.topics-feature.nmany .sign.hero .sign-kicker { grid-area: k; align-self: center; }
.topics-feature.nmany .sign.hero .sign-q { grid-area: q; align-self: start; font-size: calc(var(--u) * .95); }
.topics-feature.nmany .sign.hero:nth-child(3) { animation-delay: -.6s; }
.topics-feature.nmany .sign.hero:nth-child(4) { animation-delay: -1.8s; }
.topics-feature.nmany .sign-prog { gap: .45em; padding: .3em .5em; }
.topics-feature.nmany .sign-prog .sign-meta { font-size: calc(var(--u) * .82); }
.topics-feature.nmany .sp-pips i { width: .55em; height: .55em; }
.topics-feature.nmany .sm-l { display: none; }
.book-pages.nmany { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, calc(var(--u) * 66)); }
.book-pages.nmany .bpage-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (orientation: landscape) and (max-height: 520px) {
  .screen-topics.many .tb-book { display: inline-flex !important; }
  .screen-topics.many .book-row { display: none; }
  .topics-feature.nmany { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, calc(var(--u) * 58)); gap: calc(var(--u) * 1.5) calc(var(--u) * 1.0); padding-top: .2em; }
  .topics-feature.nmany .sign.hero { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "ic tx tx" "pr pr go";
    column-gap: .5em; row-gap: .4em; padding: .45em .7em .55em; }
  .topics-feature.nmany .sign.hero .sign-tx { display: flex; justify-content: center; }
  .topics-feature.nmany .sign.hero .sign-kicker { display: none; }
  .topics-feature.nmany .sign.hero .sign-q { font-size: calc(var(--u) * .9); }
  .screen-topics.many .topics-locked { margin-top: calc(var(--u) * 1.4); }
  .book-pages.nmany { gap: calc(var(--u) * .7); }
  .screen-book.many .book-head { display: none; }
  .screen-book.many .tb-count { display: inline-block; }
  .book-pages.nmany .bpage { padding: .35em .6em .45em; }
  .book-pages.nmany .bpage-k { display: none; }
  .book-pages.nmany .bpage-head { padding-bottom: .25em; margin-bottom: .3em; }
  .book-pages.nmany .bpage-q { font-size: calc(var(--u) * .8); }
  .book-pages.nmany .bpage-grid { gap: .2em .3em; }
  .book-pages.nmany .stk { padding: .15em .1em .1em; gap: .15em; }
  .book-pages.nmany .stk-name { font-size: calc(var(--u) * .7); }
}
@media (orientation: portrait) {
  .topics-feature.nmany { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 1.5); }
  .topics-feature.nmany .sign.hero { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "ic tx tx" "pr pr go";
    column-gap: .6em; row-gap: .5em; padding: .55em .8em .65em; }
  .topics-feature.nmany .sign.hero .sign-tx { display: flex; justify-content: center; }
  .topics-feature.nmany .sign.hero .sign-kicker { display: none; }
  .topics-feature.nmany .sign.hero .sign-q { font-size: calc(var(--u) * 1.0); }
  .topics-locked .sign:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .screen-topics.many .topics-sub { margin-bottom: .9em; }
  .screen-topics.many .topics-locked { gap: calc(var(--u) * 1.3) calc(var(--u) * .8); margin-top: calc(var(--u) * 1.6); }
  .book-pages.nmany { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * .8); }
  .book-pages.nmany .bpage { padding: .5em .7em .6em; }
  .book-pages.nmany .bpage-k { display: none; }
  .book-pages.nmany .bpage-head { padding-bottom: .35em; margin-bottom: .4em; }
  .book-pages.nmany .bpage-grid { gap: .3em .25em; }
  .book-pages.nmany .stk { padding: .2em .1em .15em; }
  .book-pages.nmany .stk-name { font-size: calc(var(--u) * .72); }
  .book-locked > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* coming-soon cards with four+ chapters: one compact row each (icon left), so everything fits on one screen */
.screen-topics.many .topics-locked { width: min(100%, calc(var(--u) * 58)); grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 13), 1fr)); }
.screen-topics.many .topics-locked .sign { flex-direction: row; justify-content: flex-start; text-align: left; padding: .45em 2.5em .55em .7em; gap: .6em; }
.screen-topics.many .topics-locked .sign-tx { align-items: flex-start; }
.screen-topics.many .topics-locked .sign-q { font-size: calc(var(--u) * .9); }
@media (orientation: portrait) { .screen-topics.many .topics-locked { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tb-count { display: none; margin-left: .6em; font-family: var(--font); font-weight: 700; font-size: .8em; letter-spacing: 0; color: var(--lemon); background: var(--ink);
  padding: .1em .45em .2em; text-shadow: none; vertical-align: .15em; }