:root {
  --gold: #f2c14e;
  --gold-deep: #c8902a;
  --ink: #1b1410;
  --paper: #fff8ea;
  --red: #e2453c;
  --blue: #3fa7ff;
  --box: rgba(18, 14, 24, 0.86);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at top, #2a2136, #0d0a12 70%);
  color: var(--paper);
  font-family: "Nunito", system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game { width: 100%; max-width: 1200px; padding: 16px; }

.stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(242, 193, 78, 0.25);
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
}
.stage.shake { animation: shake 0.45s; }
@keyframes shake {
  20% { transform: translate(-1.2cqw, 0.4cqw); }
  40% { transform: translate(1cqw, -0.5cqw); }
  60% { transform: translate(-0.6cqw, 0.3cqw); }
  80% { transform: translate(0.4cqw, -0.2cqw); }
}

.bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: opacity 0.8s ease;
}
#bg2 { opacity: 0; }

/* ---------- camera + characters ---------- */
.world {
  position: absolute; inset: 0; transform-origin: 0 0;
  transition: transform 0.85s cubic-bezier(.25, .8, .25, 1); will-change: transform;
}
.world.snap { transition-duration: 0.2s; }
.chars { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.actor {
  position: absolute; bottom: -7cqw; height: 54cqw; transform: translateX(-50%);
  transition: left 0.6s cubic-bezier(.3, .8, .3, 1), filter 0.3s, opacity 0.45s;
}
.actor.offstage { opacity: 0; }
.actor.dim { filter: brightness(0.6) saturate(0.8); }
.actor-flip, .actor-move, .actor-breathe { height: 100%; }
.actor-flip { transition: transform 0.5s ease; }
.actor.flip .actor-flip { transform: scaleX(-1); }
.actor.low .actor-flip { transform: translateY(1.2cqw); }
.actor.flip.low .actor-flip { transform: scaleX(-1) translateY(1.2cqw); }
.actor-breathe { position: relative; transform-origin: 50% 100%; animation: breathe 4.2s ease-in-out infinite; }
.actor img { height: 100%; display: block; filter: drop-shadow(0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.35)); }
.actor img.open { position: absolute; left: 0; top: 0; opacity: 0; filter: none; }
.actor.mouth img.open { opacity: 1; }
.actor img.blink { position: absolute; left: 0; top: 0; opacity: 0; filter: none; }
.actor.blinking:not(.mouth) img.blink { opacity: 1; }
@keyframes breathe { 50% { transform: scale(1.004, 1.009); } }
.actor-move.jump { animation: jump 0.5s ease-out; }
.actor-move.bounce { animation: bounce 0.45s ease-out; }
.actor-move.lunge { animation: lunge 0.4s ease-out; }
.actor-move.bob { animation: bob 0.5s ease-in-out; }
.actor-move.pop { animation: pop-actor 0.3s ease-out; }
@keyframes jump { 30% { transform: translateY(-3.5%); } 60% { transform: translateY(0); } 78% { transform: translateY(-0.8%); } }
@keyframes bounce { 35% { transform: translateY(-1.6%) scale(1.015); } }
@keyframes lunge { 35% { transform: translateX(3%) rotate(1deg); } }
@keyframes bob { 40% { transform: translateY(0.9%); } }
@keyframes pop-actor { 40% { transform: scale(1.012); } }

/* ---------- CHRONO, the time machine from 2147 ----------
   .placed = the machine itself, floating in the room (shown with the 'machine' beat).
   Otherwise it only appears small at the top when it talks (its voice, travelling with Sam). */
.chrono {
  position: absolute; left: 50%; top: 3%; z-index: 5; width: 8cqw; margin-left: -4cqw;
  opacity: 0; transform: scale(0.5); transition: opacity 0.4s, transform 0.4s, left 0.6s, top 0.6s, width 0.6s, margin 0.6s;
  pointer-events: none; filter: drop-shadow(0 0 2cqw rgba(57, 194, 255, 0.55));
}
.chrono svg { display: block; width: 100%; overflow: visible; }
.chrono.on, .chrono.placed { opacity: 1; transform: scale(1); }
.chrono.placed { left: 22%; top: 18%; width: 22cqw; margin-left: -11cqw; }
.chrono.placed .c-body { animation: hover 3.2s ease-in-out infinite; }
.chrono .c-ring { transform-box: fill-box; transform-origin: center; }
.chrono .c-ring-a { animation: gyro 5s linear infinite; }
.chrono .c-ring-b { animation: gyro 3.4s linear infinite reverse; }
.chrono .c-floor { opacity: 0; }
.chrono.placed .c-floor { opacity: 1; }
.chrono .c-iris, .chrono .c-pupil, .chrono .c-tip { transform-box: fill-box; transform-origin: center; }
.chrono.talk .c-iris { animation: hum 0.18s ease-in-out infinite alternate; }
.chrono.talk .c-tip { animation: blink 0.3s steps(2) infinite; }
.chrono.arrive { animation: arrive 1.6s ease-out; }
@keyframes gyro { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.12); } 100% { transform: scaleX(1); } }
@keyframes hover { 50% { transform: translateY(-4%); } }
@keyframes hum { to { transform: scale(1.18); } }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes arrive {
  0% { opacity: 0; transform: scaleY(0.02) scaleX(1.6); filter: brightness(6) drop-shadow(0 0 4cqw #fff); }
  35% { opacity: 1; transform: scaleY(0.05) scaleX(1.2); filter: brightness(5) drop-shadow(0 0 4cqw #fff); }
  70% { transform: scaleY(1.1) scaleX(0.95); filter: brightness(1.6) drop-shadow(0 0 3cqw #7fe0ff); }
  100% { transform: scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- a Dimmer (HUSH robot) ---------- */
.shadow {
  position: absolute; bottom: -2cqw; width: 26cqw; height: 46cqw; transform: translateX(-50%);
  filter: drop-shadow(0 0 2cqw rgba(0, 0, 0, 0.7));
}
.shadow.panel { animation: shadow-in 0.9s ease-out; }
.shadow-hood {
  position: absolute; inset: 0;
  background: linear-gradient(#4b505c, #23262e 70%);
  border-radius: 48% 48% 16% 16% / 34% 34% 8% 8%;
}
.shadow-face {
  position: absolute; left: 30%; top: 12%; width: 40%; height: 26%;
  background: radial-gradient(ellipse at 50% 40%, #050608 55%, #15171c 100%); border-radius: 50% 50% 46% 46%;
}
.shadow-eye {
  position: absolute; left: 55%; top: 22%; width: 1.6cqw; height: 1.6cqw; border-radius: 50%;
  background: #ff3b30; box-shadow: 0 0 1.5cqw 0.5cqw rgba(255, 59, 48, 0.8);
  animation: eye 2.4s steps(1) infinite;
}
@keyframes shadow-in { from { opacity: 0; transform: translateX(-50%) translateY(2cqw); } }
@keyframes eye { 0%, 86%, 100% { opacity: 1; } 88%, 92% { opacity: 0.15; } }

/* ---------- close-ups, notebook, computer screen ---------- */
.layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.panel { animation: panel-in 0.4s ease-out; }
.panel.leaving { animation: panel-out 0.35s ease-in forwards; }
@keyframes panel-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes panel-out { to { opacity: 0; transform: scale(0.97); } }
.insert {
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 46%, rgba(255, 240, 205, 0.32) 0 17cqw, rgba(8, 6, 14, 0.86) 31cqw);
}
.insert.water { background: radial-gradient(circle at 50% 46%, rgba(170, 230, 255, 0.35) 0 17cqw, rgba(4, 18, 34, 0.88) 31cqw); }
.insert .item { position: absolute; width: 24cqw; filter: drop-shadow(0 1cqw 1.2cqw rgba(0, 0, 0, 0.5)); transform: translate(-50%, -50%); }
.insert .knife { position: absolute; left: 50%; top: -10%; width: 3.2cqw; transform: translateX(-50%); filter: drop-shadow(0 0.6cqw 0.8cqw rgba(0,0,0,.5)); }
.insert .knife svg { display: block; width: 100%; }
.insert .magnifier { position: absolute; top: 50%; width: 16cqw; height: 16cqw; transform: translate(-50%, -50%); }
.insert .magnifier .lens {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  border: 1.1cqw solid #c9922f; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.75), rgba(240,214,160,.92));
  box-shadow: 0 1cqw 2cqw rgba(0,0,0,.5), inset 0 0 1.5cqw rgba(0,0,0,.25);
}
.insert .magnifier svg { width: 100%; height: 100%; display: block; }
.insert .magnifier .handle {
  position: absolute; left: 82%; top: 82%; width: 2cqw; height: 9cqw; border-radius: 1cqw;
  background: linear-gradient(90deg, #5a3517, #8a5a2c); transform: rotate(-45deg); transform-origin: top center;
}
.insert .press {
  position: absolute; top: 54%; width: 7cqw; height: 9cqw; transform: translateY(-50%);
  background: linear-gradient(#f2c9a6, #d99f78); border-radius: 3cqw; box-shadow: 0 0.6cqw 1cqw rgba(0,0,0,.45);
}
.insert .press.left { left: 14%; border-top-right-radius: 1.4cqw; border-bottom-right-radius: 1.4cqw; }
.insert .press.right { right: 14%; border-top-left-radius: 1.4cqw; border-bottom-left-radius: 1.4cqw; }
.insert-label {
  position: absolute; left: 50%; top: 11%; transform: translateX(-50%); opacity: 0;
  font: 800 clamp(16px, 3.2cqw, 40px) "Baloo 2", sans-serif; color: #fff;
  text-shadow: 0 0.3cqw 1cqw rgba(0, 0, 0, 0.8);
}
.insert-label.on { animation: label-in 0.35s ease-out forwards; }
@keyframes label-in { from { opacity: 0; transform: translate(-50%, 1cqw); } to { opacity: 1; transform: translate(-50%, 0); } }

.note {
  position: absolute; left: 7cqw; top: 4.5cqw; width: 46cqw; max-height: 33cqw; overflow: hidden;
  padding: 2.2cqw 2.6cqw 2.4cqw 6cqw; transform: rotate(-2deg);
  font: 700 clamp(14px, 2.7cqw, 34px)/1.33 "Caveat", cursive; color: #22305a;
  background:
    linear-gradient(90deg, transparent 4.4cqw, rgba(226, 69, 60, 0.45) 4.4cqw 4.6cqw, transparent 4.6cqw),
    repeating-linear-gradient(transparent 0 3.35cqw, rgba(60, 110, 200, 0.25) 3.35cqw 3.6cqw),
    #fdfaf0;
  background-position: 0 0, 0 1.6cqw, 0 0;
  border-radius: 0.6cqw; box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, 0.55);
}
.note-title { font-size: 1.15em; color: #c0392b; text-decoration: underline; }
.note .mark { display: inline-block; min-width: 0.4em; }
.note .mark.glitching { color: #e2453c; text-shadow: 0.2cqw 0 #00e5ff, -0.2cqw 0 #ff00aa; animation: jitter 0.12s steps(2) infinite; }
.note .mark.blank { min-width: 5cqw; border-bottom: 0.25cqw solid #22305a; height: 0.9em; vertical-align: baseline; }
.note .mark.glow { color: #0b7a3e; text-shadow: 0 0 1cqw rgba(77, 255, 154, 0.8); }
.note .note-line.added { color: #b0651a; font-size: 0.9em; margin-top: 0.4em; }
@keyframes jitter { 50% { transform: translate(0.2cqw, -0.1cqw); } }

.screen {
  position: absolute; left: 8cqw; top: 5cqw; width: 46cqw; height: 30cqw; overflow: hidden;
  background: #f6f7fb; color: #1d2433; border-radius: 1cqw;
  border: 0.6cqw solid #1a1d26; box-shadow: 0 0 5cqw rgba(110, 170, 255, 0.45);
  font: 700 clamp(12px, 1.9cqw, 24px) "Nunito", sans-serif;
}
.screen-top { height: 2.4cqw; background: #dfe3ec; }
.screen-bar {
  margin: 2cqw 2.4cqw 1.6cqw; padding: 0.8cqw 1.4cqw; border-radius: 999px; background: #fff;
  border: 0.18cqw solid #c9cfdc; display: flex; gap: 1cqw; min-height: 1.3em;
}
.screen-icon { color: #6b7280; }
.screen-q::after { content: "|"; animation: caret 1s steps(1) infinite; color: #3f6fd8; }
@keyframes caret { 50% { opacity: 0; } }
.screen-row { margin: 0 2.4cqw 1cqw; padding-bottom: 0.8cqw; border-bottom: 0.12cqw solid #e2e5ec; animation: panel-in 0.3s ease-out; }
.screen-row:first-child { color: #b42318; }

.hidden { display: none !important; }

/* ---------- HUD ---------- */
.hud {
  position: absolute; top: 1.6cqw; left: 1.6cqw; right: 1.6cqw;
  display: flex; justify-content: space-between; align-items: center; z-index: 6;
}
.timeline {
  display: flex; align-items: center; gap: 0.6cqw;
  background: rgba(10, 8, 16, 0.7); padding: 0.6cqw 1.1cqw; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font: 700 clamp(10px, 1.25cqw, 15px) "Baloo 2", sans-serif; letter-spacing: 0.04em;
}
.timeline .pip {
  width: 1.8cqw; height: 1.8cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9ff0ff, #1d8fd6);
  box-shadow: 0 0 1cqw #39c2ff;
}
.timeline .pip.lost { background: #3a3340; box-shadow: none; }
.timeline .pip.breaking { animation: pipbreak 0.8s; }
@keyframes pipbreak { 30% { transform: scale(1.6); background: var(--red); box-shadow: 0 0 2cqw var(--red); } }

.evidence-btn {
  font: 700 clamp(11px, 1.35cqw, 16px) "Baloo 2", sans-serif;
  color: var(--ink); background: linear-gradient(var(--gold), var(--gold-deep));
  border: 0; border-radius: 999px; padding: 0.5cqw 1.4cqw; cursor: pointer;
  box-shadow: 0 0.3cqw 0 #8a5d16;
}
.evidence-btn span {
  display: inline-grid; place-items: center; min-width: 1.8em; height: 1.8em; margin-left: 0.3em;
  background: var(--ink); color: var(--gold); border-radius: 999px;
}
.evidence-btn.bump { animation: bump 0.5s; }
@keyframes bump { 40% { transform: scale(1.18); } }

/* ---------- hotspots (investigation) ---------- */
.spots { position: absolute; inset: 0; z-index: 6; transition: opacity 0.3s; pointer-events: none; }
.spots .spot { pointer-events: auto; }
.spots.away, .spots.away .spot { opacity: 0; pointer-events: none; }
.spot {
  position: absolute; transform: translate(-50%, -50%);
  width: 9cqw; height: 9cqw; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; border: 0; background: transparent; padding: 0;
}
.spot img { width: 100%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 248, 234, 0.85) 0 55%, transparent 70%); filter: drop-shadow(0 0.6cqw 0.6cqw rgba(0, 0, 0, 0.45)); animation: float 2.6s ease-in-out infinite; }
.spot::after {
  content: ""; position: absolute; inset: -0.6cqw; border-radius: 50%;
  border: 0.3cqw solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 1.4cqw var(--gold);
  animation: ring 1.6s ease-in-out infinite;
}
.spot.done::after { border-color: rgba(120, 255, 160, 0.9); box-shadow: 0 0 1.2cqw #4dff9a; animation: none; }
.spot.done::before {
  content: "✓"; position: absolute; top: -0.4cqw; right: -0.4cqw; z-index: 2;
  width: 2.4cqw; height: 2.4cqw; border-radius: 50%; display: grid; place-items: center;
  background: #2fd27a; color: #fff; font: 800 1.5cqw "Baloo 2", sans-serif;
}
.spot-label {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0.6cqw);
  white-space: nowrap; font: 700 clamp(10px, 1.3cqw, 15px) "Baloo 2", sans-serif;
  background: rgba(10, 8, 16, 0.75); padding: 0.2cqw 0.9cqw; border-radius: 999px;
}
@keyframes ring { 50% { transform: scale(1.12); opacity: 0.55; } }
@keyframes float { 50% { transform: translateY(-0.7cqw); } }

/* ---------- caption ---------- */
.caption {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%);
  z-index: 7; text-align: center; pointer-events: none; opacity: 0;
  font: 800 clamp(20px, 4.4cqw, 58px) "Baloo 2", sans-serif; letter-spacing: 0.02em;
  text-shadow: 0 0.3cqw 1.5cqw rgba(0, 0, 0, 0.8);
}
.caption small { display: block; font-size: 0.42em; font-weight: 700; color: var(--gold); letter-spacing: 0.25em; text-transform: uppercase; }
.caption.show { animation: cap 3s ease forwards; }
@keyframes cap { 0% { opacity: 0; transform: translate(-50%, -40%); } 15%, 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; } }

/* ---------- dialogue box ---------- */
.box {
  position: absolute; left: 3cqw; right: 3cqw; bottom: 2.2cqw; z-index: 8;
  min-height: 12.5cqw; padding: 2.2cqw 2.6cqw 2cqw;
  background: var(--box); border: 0.25cqw solid rgba(242, 193, 78, 0.65); border-radius: 1.4cqw;
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.box.narration { background: rgba(8, 8, 12, 0.8); border-color: rgba(255, 255, 255, 0.25); text-align: center; }
.box.narration .line { font-style: italic; color: #e8dccb; }
.box.machine { border-color: #39c2ff; box-shadow: 0 0 2.5cqw rgba(57, 194, 255, 0.35); }
.box.machine .line { font-family: "Courier New", monospace; color: #bfefff; }
.box.thought { border-style: dashed; border-color: rgba(255, 138, 122, 0.7); }
.box.thought .line { font-style: italic; color: #ffd9d2; }
.box.offscreen .line { color: #e8e0ff; }
.box.asking .line { color: var(--gold); font-style: normal; }
.nameplate {
  position: absolute; top: -1.9cqw; left: 2cqw; padding: 0.3cqw 1.6cqw;
  font: 800 clamp(12px, 1.7cqw, 21px) "Baloo 2", sans-serif;
  color: var(--ink); background: linear-gradient(var(--gold), var(--gold-deep)); border-radius: 0.8cqw;
}
.nameplate:empty { display: none; }
.nameplate.kid { background: linear-gradient(#ff8a7a, #d8443a); color: #fff; }
.nameplate.machine { background: linear-gradient(#7fdcff, #1d8fd6); color: #04121c; }
.nameplate.off { background: linear-gradient(#b9a8e8, #7d68c2); color: #fff; }
.nameplate.dimmer { background: linear-gradient(#5b616f, #2b2f38); color: #ff6b5e; }
.box.dimmer { border-color: rgba(255, 70, 60, 0.6); }
.box.dimmer .line { color: #d9dbe2; }
.line {
  font-size: clamp(14px, 2.15cqw, 27px); line-height: 1.38; font-weight: 700; min-height: 2.8em;
}
.advance {
  position: absolute; right: 2cqw; bottom: 1cqw; color: var(--gold);
  font-size: clamp(10px, 1.4cqw, 16px); animation: nudge 1s infinite; opacity: 0;
}
.box.ready .advance { opacity: 1; }
@keyframes nudge { 50% { transform: translateY(0.4cqw); } }

.choices { display: flex; flex-direction: column; gap: 0.9cqw; margin-top: 1cqw; }
.choices:empty { display: none; }
.choice {
  text-align: left; font: 700 clamp(13px, 1.9cqw, 23px) "Nunito", sans-serif;
  color: var(--paper); background: rgba(255, 255, 255, 0.08);
  border: 0.18cqw solid rgba(242, 193, 78, 0.55); border-radius: 0.9cqw;
  padding: 0.9cqw 1.4cqw; cursor: pointer; transition: transform 0.12s, background 0.12s;
}
.choice:hover:not(:disabled) { background: rgba(242, 193, 78, 0.22); transform: translateX(0.6cqw); }
.choice:disabled { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.choice .tag { color: var(--gold); margin-right: 0.6em; }

/* ---------- FX ---------- */
.fx { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.flash { position: absolute; inset: 0; background: #fff; animation: flash 0.5s forwards; }
@keyframes flash { from { opacity: 0.95; } to { opacity: 0; } }

.objection {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-6deg);
  font: 800 clamp(34px, 9cqw, 120px) "Baloo 2", sans-serif; color: #fff;
  -webkit-text-stroke: 0.35cqw var(--red); paint-order: stroke fill;
  text-shadow: 0 0.6cqw 0 #8c1d17, 0 0 3cqw rgba(226, 69, 60, 0.8);
  animation: objection 1.5s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
.objection-burst {
  position: absolute; inset: 0;
  background: repeating-conic-gradient(from 0deg at 50% 40%, rgba(255, 210, 90, 0.55) 0 6deg, transparent 6deg 14deg);
  animation: burst 1.5s forwards;
}
@keyframes objection { 0% { transform: translate(-50%, -50%) rotate(-6deg) scale(2.4); opacity: 0; } 18% { transform: translate(-50%, -50%) rotate(-6deg) scale(1); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(1.05); } }
@keyframes burst { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(20deg) scale(1.3); } }

.glitch-layer {
  position: absolute; inset: 0; mix-blend-mode: screen;
  background: repeating-linear-gradient(0deg, rgba(255, 0, 60, 0.35) 0 0.4cqw, transparent 0.4cqw 1.2cqw);
  animation: glitch 1.1s steps(6) forwards;
}
.glitch-text {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  font: 800 clamp(22px, 5.4cqw, 70px) "Baloo 2", sans-serif; color: #ff3b5c; letter-spacing: 0.08em;
  text-shadow: 0.5cqw 0 #00e5ff, -0.5cqw 0 #ff00aa; animation: glitchtext 1.6s forwards;
}
@keyframes glitch { 0% { opacity: 1; transform: translateX(-2cqw); } 30% { transform: translateX(2cqw); } 60% { transform: translateX(-1cqw); opacity: 0.8; } 100% { opacity: 0; transform: none; } }
@keyframes glitchtext { 0%, 70% { opacity: 1; } 10% { transform: translate(-52%, -50%); } 20% { transform: translate(-48%, -50%); } 100% { opacity: 0; } }

.portal {
  position: absolute; inset: -30%;
  background: repeating-conic-gradient(from 0deg, #0a1a3a 0 10deg, #39c2ff 10deg 14deg, #7a3cff 14deg 22deg, #0a1a3a 22deg 30deg);
  animation: portal 2.6s ease-in forwards; border-radius: 50%;
}
@keyframes portal { 0% { opacity: 0; transform: scale(0.2) rotate(0); } 30% { opacity: 1; } 85% { opacity: 1; transform: scale(1.6) rotate(540deg); } 100% { opacity: 1; transform: scale(2.4) rotate(720deg); background: #fff; } }
.whiteout { position: absolute; inset: 0; background: #fff; animation: whiteout 1.4s forwards; }
@keyframes whiteout { from { opacity: 1; } to { opacity: 0; } }
.blackout { position: absolute; inset: 0; background: #000; animation: blackout 0.6s forwards; }
@keyframes blackout { from { opacity: 0; } to { opacity: 1; } }
.unblack { position: absolute; inset: 0; background: #000; animation: unblack 0.8s forwards; }
@keyframes unblack { from { opacity: 1; } to { opacity: 0; } }

.toast {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 1.2cqw;
  background: rgba(14, 10, 20, 0.92); border: 0.25cqw solid var(--gold); border-radius: 1.2cqw;
  padding: 1cqw 1.8cqw; animation: toast 2.6s ease forwards;
}
.toast img { width: 6cqw; height: 6cqw; object-fit: contain; }
.toast small { display: block; color: var(--gold); font: 800 clamp(9px, 1.1cqw, 14px) "Baloo 2", sans-serif; letter-spacing: 0.2em; text-transform: uppercase; }
.toast b { font: 800 clamp(13px, 1.9cqw, 24px) "Baloo 2", sans-serif; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -1cqw); } 12%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ---------- modal (evidence) ---------- */
.modal {
  position: absolute; inset: 0; z-index: 12; background: rgba(6, 4, 10, 0.7);
  display: grid; place-items: center;
}
.modal-card {
  width: 78%; max-height: 82%; overflow: auto;
  background: #1e1726; border: 0.3cqw solid var(--gold); border-radius: 1.6cqw; padding: 1.8cqw 2.2cqw;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2cqw; }
.modal-head h2 { margin: 0; font: 800 clamp(16px, 2.6cqw, 32px) "Baloo 2", sans-serif; color: var(--gold); }
.modal-head .sub { font-size: clamp(11px, 1.4cqw, 17px); color: #cfc3d8; margin-top: 0.2cqw; }
.close { background: none; border: 0; color: var(--paper); font-size: clamp(16px, 2.4cqw, 30px); cursor: pointer; }
.modal-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(16cqw, 1fr)); gap: 1.4cqw; }
.ev {
  background: var(--paper); color: var(--ink); border-radius: 1.2cqw; padding: 1.2cqw;
  border: 0.25cqw solid transparent; text-align: center; font-family: "Nunito", sans-serif;
}
.ev img { width: 9cqw; height: 9cqw; object-fit: contain; }
.ev h3 { margin: 0.4cqw 0 0.2cqw; font: 800 clamp(12px, 1.7cqw, 21px) "Baloo 2", sans-serif; }
.ev p { margin: 0; font-size: clamp(10px, 1.3cqw, 16px); font-weight: 700; color: #5b4a3d; }
.ev.pickable { cursor: pointer; transition: transform 0.12s, border-color 0.12s; }
.ev.pickable:hover { transform: translateY(-0.5cqw); border-color: var(--red); }
.ev.pickable { font: inherit; width: 100%; }
.ev.pickable:focus-visible { outline: 0.3cqw solid var(--red); }
.ev .present {
  display: inline-block;
  margin-top: 0.8cqw; font: 800 clamp(11px, 1.4cqw, 17px) "Baloo 2", sans-serif; color: #fff;
  background: var(--red); border: 0; border-radius: 999px; padding: 0.3cqw 1.4cqw; cursor: pointer;
}
.empty { color: #cfc3d8; font-size: clamp(12px, 1.6cqw, 19px); }

/* ---------- title / end card ---------- */
.card-screen {
  position: absolute; inset: 0; z-index: 14; display: grid; place-items: center; text-align: center;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(57, 194, 255, 0.35), transparent 60%),
    radial-gradient(ellipse at 50% -20%, rgba(242, 193, 78, 0.3), transparent 60%),
    #0d0a14;
}
.card-screen.hidden { display: none; }
.card-inner { max-width: 70%; }
.kicker { font: 800 clamp(11px, 1.6cqw, 20px) "Baloo 2", sans-serif; color: var(--gold); letter-spacing: 0.35em; text-transform: uppercase; }
.card-screen h1 { margin: 0.3em 0; font: 800 clamp(28px, 6.4cqw, 82px) "Baloo 2", sans-serif; line-height: 1; }
.card-screen p { font-size: clamp(13px, 2cqw, 25px); color: #e2d6c6; font-weight: 700; margin: 0 0 1.6em; }
.cta {
  font: 800 clamp(14px, 2.2cqw, 28px) "Baloo 2", sans-serif; color: var(--ink);
  background: linear-gradient(var(--gold), var(--gold-deep)); border: 0; border-radius: 999px;
  padding: 0.6em 2.2em; cursor: pointer; box-shadow: 0 0.5cqw 0 #8a5d16, 0 0 3cqw rgba(242, 193, 78, 0.4);
}
/* Title-screen second option ("Start over" when there is a save) */
.cta-alt {
  display: block; margin: 1.2cqw auto 0; font: 700 clamp(12px, 1.5cqw, 18px) "Baloo 2", sans-serif;
  color: #e8dccb; background: none; border: 0; text-decoration: underline; cursor: pointer; opacity: 0.85;
}
.cta-alt:hover { opacity: 1; }
/* Rewind to earlier lines (never forward) */
.back-btn {
  position: absolute; top: 1.6cqw; left: 1.6cqw; z-index: 7;
  font: 700 clamp(11px, 1.35cqw, 16px) "Baloo 2", sans-serif; color: #e8dccb;
  background: rgba(10, 8, 16, 0.7); border: 0.15cqw solid rgba(242, 193, 78, 0.45);
  border-radius: 999px; padding: 0.45cqw 1.3cqw; cursor: pointer;
}
.back-btn:hover:not(:disabled) { color: var(--gold); border-color: var(--gold); }
.back-btn:disabled { opacity: 0.35; cursor: default; }
.hud .timeline { margin-left: 8.5cqw; }
/* Pause */
.pause-btn {
  position: absolute; top: 1.6cqw; left: 50%; transform: translateX(-50%); z-index: 7;
  font: 800 clamp(11px, 1.3cqw, 16px) "Baloo 2", sans-serif; color: #e8dccb;
  background: rgba(10, 8, 16, 0.7); border: 0.15cqw solid rgba(242, 193, 78, 0.45);
  border-radius: 999px; padding: 0.7cqw 1.3cqw; cursor: pointer; display: flex; gap: 0.35cqw;
}
.pause-btn i { display: block; width: 0.45cqw; min-width: 3px; height: 1.3cqw; min-height: 10px; background: currentColor; border-radius: 1px; }
.pause-btn:hover { color: var(--gold); border-color: var(--gold); }
.pause-menu {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center;
  background: rgba(8, 6, 14, 0.72); backdrop-filter: blur(0.4cqw);
}
.pause-inner { text-align: center; display: grid; gap: 1.6cqw; justify-items: center; }
.pause-inner h2 { margin: 0; font: 800 clamp(24px, 4.5cqw, 56px) "Baloo 2", sans-serif; color: var(--gold); }
.pause-opt { font: 700 clamp(13px, 1.6cqw, 20px) "Baloo 2", sans-serif; color: #e8dccb; cursor: pointer; }
.pause-opt input { width: 1.1em; height: 1.1em; vertical-align: -0.15em; accent-color: var(--gold); }
.stage.paused *, .stage.paused *::before, .stage.paused *::after { animation-play-state: paused !important; }
.stage.paused .pause-menu, .stage.paused .pause-menu * { animation-play-state: running !important; }
.cta:disabled { opacity: 0.6; cursor: wait; }
.cta:hover:not(:disabled) { transform: translateY(-0.2cqw); }

@media (prefers-reduced-motion: reduce) {
  .actor-breathe, .chrono .c-ring, .chrono .c-body, .spot img, .spot::after { animation: none; }
  .world { transition-duration: 0.01s; }
}

/* ---------- living backgrounds (ambience.js) ---------- */
.bg { animation: drift 38s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.03) translate(-0.6%, 0.3%); } to { transform: scale(1.06) translate(0.8%, -0.5%); } }
.amb { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.amb > * { position: absolute; }

.amb-bird { left: -6%; animation: fly-ltr linear forwards; }
.amb-bird.rtl { animation-name: fly-rtl; }
.amb-bird.rtl svg { transform: scaleX(-1); }
.amb-bird svg { display: block; width: 100%; overflow: visible; }
.amb-bird .wing { fill: currentColor; transform-origin: 50% 60%; animation: flap ease-in-out infinite alternate; }
.amb-bird svg { animation: bob 1.4s ease-in-out infinite alternate; }
@keyframes fly-ltr { from { left: -6%; } to { left: 106%; } }
@keyframes fly-rtl { from { left: 106%; } to { left: -6%; } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-0.55); } }

.amb-cloud {
  left: -40%; border-radius: 50%; filter: blur(1.2cqw);
  background: radial-gradient(ellipse at 50% 60%, #fff 0 45%, rgba(255,255,255,0) 70%);
  animation: cloud linear infinite;
}
@keyframes cloud { from { left: -40%; } to { left: 110%; } }

.amb-dust { aspect-ratio: 1; border-radius: 50%; animation: dust-float ease-in-out infinite alternate, twinkle ease-in-out infinite alternate; }
@keyframes dust-float { to { transform: translate(2.5cqw, -3cqw); } }
@keyframes twinkle { from { opacity: 0.1; } to { opacity: 0.9; } }

.amb-sparkle {
  width: 1.4cqw; height: 1.4cqw; transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, #fff 0 12%, rgba(255,255,255,0) 60%),
    linear-gradient(#fff, #fff) center / 8% 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 8% no-repeat;
  animation: sparkle ease-in-out infinite;
}
@keyframes sparkle { 0%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0); } 50% { transform: translate(-50%, -50%) scale(1) rotate(45deg); } }

.amb-ripple {
  width: 5cqw; height: 1.4cqw; transform: translate(-50%, -50%) scale(0.1); border-radius: 50%;
  border: 0.18cqw solid rgba(255,255,255,.8); animation: ripple 2.6s ease-out forwards;
}
@keyframes ripple { to { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }

.amb-water {
  background: repeating-linear-gradient(100deg, rgba(255,255,255,0) 0 3cqw, rgba(255,255,255,.13) 3.4cqw, rgba(255,255,255,0) 4cqw);
  background-size: 200% 100%; mix-blend-mode: screen; border-radius: 40%;
  -webkit-mask: radial-gradient(ellipse, #000 55%, transparent 75%); mask: radial-gradient(ellipse, #000 55%, transparent 75%);
  animation: water 9s linear infinite;
}
@keyframes water { to { background-position: -200% 0; } }

.amb-fish { width: 3.2cqw; animation: fish-jump 1.1s ease-in-out forwards; }
.amb-fish svg { display: block; width: 100%; }
.amb-fish.rtl svg { transform: scaleX(-1); }
@keyframes fish-jump {
  0% { transform: translate(0, 0) rotate(-50deg); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(3cqw, -5cqw) rotate(0deg); }
  90% { opacity: 1; }
  100% { transform: translate(6cqw, 0) rotate(50deg); opacity: 0; }
}
.amb-fish.rtl { animation-name: fish-jump-rtl; }
@keyframes fish-jump-rtl {
  0% { transform: translate(0, 0) rotate(50deg); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(-3cqw, -5cqw) rotate(0deg); }
  90% { opacity: 1; }
  100% { transform: translate(-6cqw, 0) rotate(-50deg); opacity: 0; }
}

.amb-butterfly { width: 1.6cqw; height: 1.2cqw; animation: flutter-path ease-in-out forwards; }
.amb-butterfly i { position: absolute; top: 0; width: 50%; height: 100%; background: currentColor; border-radius: 60% 60% 40% 40%; animation: wingbeat 0.18s ease-in-out infinite alternate; }
.amb-butterfly i:first-child { left: 0; transform-origin: right center; }
.amb-butterfly i:last-child { right: 0; transform-origin: left center; }
@keyframes wingbeat { to { transform: scaleX(0.2); } }
@keyframes flutter-path {
  0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; }
  25% { transform: translate(4cqw, -3cqw); } 50% { transform: translate(-2cqw, -6cqw); }
  75% { transform: translate(5cqw, -9cqw); } 92% { opacity: 1; } 100% { transform: translate(1cqw, -14cqw); opacity: 0; }
}

.amb-leaf { width: 0.9cqw; height: 0.5cqw; border-radius: 0 100% 0 100%; animation: leaf-fall ease-in forwards; }
@keyframes leaf-fall {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; }
  50% { transform: translate(-3cqw, 10cqw) rotate(200deg); }
  100% { transform: translate(2cqw, 22cqw) rotate(420deg); opacity: 0; }
}

.amb-rays {
  width: 34cqw; height: 34cqw; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(255,255,255,.16) 0 4deg, rgba(255,255,255,0) 4deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 15%, transparent 68%); mask: radial-gradient(circle, #000 15%, transparent 68%);
  animation: spin-slow 60s linear infinite;
}
@keyframes spin-slow { to { transform: translate(-50%, -50%) rotate(360deg); } }

.amb-glow { transform: translate(-50%, -50%); }
.amb-glow.flicker { animation: flicker 5s steps(1) infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 41% { opacity: 0.55; } 43% { opacity: 1; } 77% { opacity: 0.8; } 78% { opacity: 1; } }
.amb-led { width: 0.35cqw; height: 0.35cqw; border-radius: 50%; background: #9fd0ff; box-shadow: 0 0 0.8cqw #6fb5ff; animation: led 3s ease-in-out infinite; }
@keyframes led { 50% { opacity: 0.25; } }
.amb-moon {
  background: radial-gradient(ellipse, rgba(110,190,255,.35), transparent 70%); mix-blend-mode: screen;
  animation: moon 7s ease-in-out infinite alternate;
}
@keyframes moon { to { opacity: 0.45; } }
.amb-headlights {
  top: 0; left: -40%; width: 30%; height: 60%; mix-blend-mode: screen; transform: skewX(-25deg);
  background: linear-gradient(90deg, transparent, rgba(255,240,200,.16), transparent);
  animation: sweep 3.2s ease-in-out forwards;
}
@keyframes sweep { to { left: 120%; } }

.amb-rain { overflow: hidden; }
.amb-rain i {
  position: absolute; top: -20%; width: 0.12cqw; height: 3cqw;
  background: linear-gradient(transparent, rgba(220,245,255,.75)); animation: rain linear infinite;
}
@keyframes rain { to { transform: translate(-1cqw, 32cqw); } }
.amb-lightning { background: rgba(230,245,255,.9); mix-blend-mode: screen; animation: lightning 0.9s ease-out forwards; }
@keyframes lightning { 0% { opacity: 0; } 8% { opacity: 1; } 16% { opacity: 0.1; } 24% { opacity: 0.85; } 100% { opacity: 0; } }
.amb-shaft {
  clip-path: polygon(62% 0, 100% 0, 85% 100%, 0 100%);
  background: linear-gradient(rgba(220,255,230,.18), rgba(220,255,230,.04)); mix-blend-mode: screen;
  animation: shaft 6s ease-in-out infinite alternate;
}
@keyframes shaft { to { opacity: 0.35; } }
.amb-glint {
  width: 3cqw; height: 3cqw; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0 8%, transparent 50%), linear-gradient(#fff, #fff) center / 6% 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 6% no-repeat;
  animation: sparkle 4s ease-in-out infinite;
}
.stage.paused .amb * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .bg, .amb, .amb * { animation: none !important; } .amb { display: none; } }

/* ---------- crowd (students, onlookers) ---------- */
.crowd { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.extra { position: absolute; transform: translateX(-50%); transition: opacity 0.6s, left 1.2s ease-in-out; }
.extra.flip .extra-in { transform: scaleX(-1); }
.extra.back { filter: brightness(0.82) saturate(0.85) blur(0.04cqw); }
.extra.gone { opacity: 0; }
.extra-in { height: 100%; transform-origin: 50% 100%; }
.extra img { height: 100%; display: block; filter: drop-shadow(0 0.3cqw 0.6cqw rgba(0,0,0,.35)); }
.extra-move { height: 100%; animation: breathe 4.6s ease-in-out infinite; transform-origin: 50% 100%; }
.extra-move.laugh { animation: laugh 0.32s ease-in-out 6 alternate; }
.extra-move.gasp { animation: jump 0.5s ease-out; }
.extra-move.cheer { animation: cheer 0.45s ease-in-out 4 alternate; }
.extra-move.murmur { animation: murmur 0.9s ease-in-out 3 alternate; }
@keyframes laugh { to { transform: translateY(-1.5%) rotate(-1.5deg); } }
@keyframes cheer { to { transform: translateY(-5%); } }
@keyframes murmur { to { transform: rotate(2.5deg) translateX(1%); } }
.stage.paused .crowd * { animation-play-state: paused !important; }

.amb-sunlight {
  background: linear-gradient(115deg, rgba(255,236,190,.0) 30%, rgba(255,236,190,.16) 45%, rgba(255,236,190,0) 60%);
  mix-blend-mode: screen; animation: sunlight 14s ease-in-out infinite alternate;
}
@keyframes sunlight { from { opacity: 0.4; transform: translateX(-4%); } to { opacity: 1; transform: translateX(4%); } }

/* action clips (flip-book) and walking */
.actor img.clipimg { position: absolute; left: 50%; top: 0; transform: translateX(-50%); opacity: 0; }
.actor.clipping img.clipimg { opacity: 1; }
.actor.clipping img.closed, .actor.clipping img.open, .actor.clipping img.blink { opacity: 0 !important; }
.actor.walking { transition: left 1.5s linear, opacity 0.4s; }
.actor.walking .actor-breathe { animation: none; }

/* foreground piece (a column to hide behind) */
.fg { position: absolute; inset: 0; z-index: 5; pointer-events: none; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.4s; }
.fg.on { opacity: 1; }

/* seek bar along the top edge: jump to any line */
.seek { position: absolute; left: 0; right: 0; top: 0; height: 1.6cqw; z-index: 9; }
.seek-track { position: absolute; left: 0; right: 0; top: 0; height: 0.35cqw; background: rgba(0,0,0,.45); transition: height .15s; }
.seek:hover .seek-track, .seek.dragging .seek-track { height: 0.7cqw; }
.seek-reached { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.seek-marks { position: absolute; inset: 0; }
.seek-mark { position: absolute; top: 0; bottom: 0; width: 0.2cqw; background: rgba(255,255,255,.75); }
.seek input { position: absolute; left: 0; right: 0; top: -0.4cqw; width: 100%; margin: 0; height: 1.6cqw; opacity: 0; cursor: pointer; }
.seek-tip {
  position: absolute; top: 1.2cqw; transform: translateX(-50%); max-width: 46cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 700 clamp(11px, 1.2cqw, 15px) Nunito, sans-serif; color: #fff; background: rgba(10,8,16,.88);
  border: 0.12cqw solid var(--gold); border-radius: 0.6cqw; padding: 0.3cqw 0.8cqw; opacity: 0; pointer-events: none;
}
.seek.dragging .seek-tip { opacity: 1; }

/* face portrait in the dialogue box, for someone who speaks while not in the shot */
.portrait {
  display: none; position: absolute; left: 1.6cqw; top: 1.4cqw; width: 11cqw; height: 11cqw; overflow: hidden;
  border-radius: 1cqw; border: 0.25cqw solid rgba(242, 193, 78, 0.7); background: radial-gradient(circle at 50% 40%, #3a3550, #17141f);
}
.box.has-portrait .portrait { display: block; }
.box.has-portrait .line, .box.has-portrait .choices { margin-left: 12.5cqw; }
.portrait img { position: absolute; left: 50%; top: -0.6cqw; width: 30cqw; transform: translateX(-50%); }
.portrait .p-open { opacity: 0; }
.portrait.mouth .p-open { opacity: 1; }

.portrait .p-chrono { display: none; position: absolute; inset: 8%; }
.portrait .p-chrono svg { width: 100%; height: 100%; }
.portrait.machine img { display: none; }
.portrait.machine .p-chrono { display: block; }
.portrait.machine { border-color: #39c2ff; }

.ev.tried { opacity: 0.4; filter: grayscale(1); cursor: not-allowed; }

/* split: one loaf feeds a bird and a boy */
.insert .split-face {
  position: absolute; left: 74%; top: 60%; width: 15cqw; height: 15cqw; border-radius: 50%; transform: translate(-50%, -50%);
  background-size: 260% auto; background-position: 50% 3%; background-color: #3a3550; border: 0.3cqw solid #f2c14e;
}
.insert .split-tag {
  position: absolute; top: 76%; transform: translateX(-50%); font: 800 clamp(14px, 2.4cqw, 30px) "Baloo 2", sans-serif;
  color: #fff; text-shadow: 0 0.3cqw 1cqw rgba(0,0,0,.8);
}
/* restack: tiny bricks */
.insert .tiny-brick {
  position: absolute; width: 1.6cqw; height: 1cqw; margin: -0.5cqw 0 0 -0.8cqw; border-radius: 0.15cqw;
  background: linear-gradient(#d9a066, #a8692f); box-shadow: inset 0 0 0 0.08cqw rgba(80, 40, 10, .6);
  transition: left 0.9s cubic-bezier(.3,.8,.3,1), top 0.9s cubic-bezier(.3,.8,.3,1);
}

/* ---------- hands-on experiments ---------- */
.exp { position: absolute; inset: 0; z-index: 2; pointer-events: auto; background: radial-gradient(circle at 50% 50%, rgba(255,244,220,.94), rgba(214,190,150,.97)); }
.exp-head { position: absolute; left: 50%; top: 2.2cqw; transform: translateX(-50%); display: flex; gap: 1cqw; align-items: center; white-space: nowrap; }
.exp-tag { font: 800 clamp(10px, 1.2cqw, 15px) "Baloo 2", sans-serif; letter-spacing: .15em; color: #fff; background: #c0392b; padding: .2cqw .9cqw; border-radius: .5cqw; }
.exp-title { font: 800 clamp(16px, 2.8cqw, 34px) "Baloo 2", sans-serif; color: #3a2a1a; }
.exp-area { position: absolute; left: 0; right: 0; top: 7cqw; bottom: 9cqw; }
.exp-area.water { background: linear-gradient(transparent 55%, rgba(80,170,210,.35)); }
.exp-say {
  position: absolute; left: 50%; bottom: 2cqw; transform: translateX(-50%); width: 80%; text-align: center;
  font: 800 clamp(14px, 2.3cqw, 28px) "Baloo 2", sans-serif; color: #2b1d10;
}
.exp-say.pop { animation: label-in .3s ease-out; }
.exp-thing { position: absolute; width: 16cqw; transform: translate(-50%, -50%); filter: drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.35)); transition: transform .35s; user-select: none; -webkit-user-drag: none; }
.exp-thing.big { width: 22cqw; }
.exp-thing.small { width: 8cqw; }
.exp-face { position: absolute; width: 18cqw; height: 18cqw; transform: translate(-50%, -50%); border-radius: 50%; background: #3a3550 50% 3% / 260% auto no-repeat; border: .35cqw solid #f2c14e; }
.draggable { cursor: grab; touch-action: none; animation: hint 1.2s ease-in-out infinite; }
.dragging { cursor: grabbing; animation: none; z-index: 5; }
@keyframes hint { 50% { filter: drop-shadow(0 0 1.4cqw #f2c14e); } }
.gulp { animation: gulp .5s; }
@keyframes gulp { 40% { transform: translate(-50%, -50%) scale(1.15) rotate(-6deg); } }
.exp-pop { position: absolute; transform: translate(-50%, -50%); font: 800 clamp(14px, 2.4cqw, 30px) "Baloo 2", sans-serif; color: #3a2a1a; white-space: nowrap; animation: label-in .35s ease-out; }
.exp-pop.good { color: #1f7a3a; }
.exp-btn {
  position: absolute; transform: translate(-50%, -50%); font: 800 clamp(14px, 2.2cqw, 26px) "Baloo 2", sans-serif;
  color: var(--ink); background: linear-gradient(var(--gold), var(--gold-deep)); border: 0; border-radius: 999px;
  padding: .5em 1.6em; cursor: pointer; box-shadow: 0 .4cqw 0 #8a5d16; animation: hint 1.2s ease-in-out infinite;
}
.exp-btn:active { transform: translate(-50%, -45%); }
.exp-btn.shake { animation: shake .4s; }
.exp-years { position: absolute; transform: translate(-50%, -50%); font: 800 clamp(13px, 2cqw, 24px) "Baloo 2", sans-serif; color: #1d4e6b; }
.exp-slot { position: absolute; width: 9cqw; height: 4.4cqw; transform: translate(-50%, -50%); border: .25cqw dashed rgba(90,50,20,.6); border-radius: .4cqw; }
.exp-slot.filled { border-color: transparent; }
.exp-brick { position: absolute; width: 9cqw; height: 4.4cqw; transform: translate(-50%, -50%); border-radius: .4cqw; background: linear-gradient(#c98d58, #8f5d34); box-shadow: inset 0 0 0 .25cqw #5e3a1e; transition: left .25s, top .25s; }
.exp-brick.dragging { transition: none; }

.exp-cup { position: absolute; width: 16cqw; height: 20cqw; transform: translate(-50%, -50%); border: .35cqw solid rgba(120,140,160,.9); border-top: none; border-radius: 0 0 2.4cqw 2.4cqw; background: rgba(255,255,255,.35); overflow: hidden; }
.exp-water { position: absolute; left: 0; right: 0; bottom: 0; height: 75%; background: linear-gradient(rgba(150,210,240,.55), rgba(90,170,220,.7)); }
.exp-honey-cloud { position: absolute; left: 25%; bottom: 0; width: 50%; height: 40%; border-radius: 50% 50% 0 0; background: radial-gradient(rgba(240,170,40,.95), rgba(220,140,20,.7)); opacity: 0; transition: opacity .6s; }
.exp-cup.has-honey .exp-honey-cloud { opacity: 1; }
.exp-cup.swirl .exp-water { animation: swirl .5s; }
@keyframes swirl { 50% { transform: skewX(8deg); } }
.exp-scale { position: absolute; transform: translate(-50%, -50%); font: 800 clamp(16px, 3cqw, 36px) "Baloo 2", sans-serif; color: #3a2a1a; background: rgba(255,255,255,.7); border-radius: 1cqw; padding: .3cqw 1.2cqw; }
.exp-scale.pop { animation: label-in .35s ease-out; }


.exp-tray { position: absolute; width: 56cqw; height: 1.6cqw; transform: translate(-50%, -50%); border-radius: .8cqw; background: linear-gradient(#c9ced4, #8a939c); box-shadow: 0 .8cqw 0 #5d6670, 0 1.4cqw 1.2cqw rgba(0,0,0,.25); }
.exp-thing.emptied { opacity: .55; }
.exp-dust { position: absolute; width: 14cqw; height: 6cqw; transform: translate(-50%, -50%); border-radius: 50% 50% 10% 10% / 100% 100% 10% 10%; background: radial-gradient(circle at 30% 40%, #b0754a 0 .3cqw, transparent .4cqw) 0 0 / 1.1cqw 1.1cqw, radial-gradient(circle at 70% 60%, #8f5d34 0 .25cqw, transparent .35cqw) 0 0 / .9cqw .9cqw, #a86f45; transition: transform .8s, opacity .8s; }
.exp-dust.spill { transform: translate(-50%, -20%) scale(2.2, .25); opacity: .35; }