:root {
  --ink: #1c1410;
  --paper: #f3e6c8;
  --paper-dark: #e2cc9c;
  --brass: #c08a3e;
  --brass-dark: #7a5222;
  --red: #b8392b;
  --glow: #ffd84a;
  --wood: #6b4226;
  --wood-dark: #3f2615;
  --good: #4f8a3a;
  --miss: #d0732c;
  --ruled: rgba(64, 104, 160, .22);
  --font-title: "Suez One", "Rubik", serif;
  --font-body: "Rubik", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0d0907; overflow: hidden; }
body { font-family: var(--font-body); color: var(--ink); }

#viewport { position: fixed; inset: 0; }
#stage {
  position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px;
  transform-origin: center; overflow: clip; background: #2a1d14;
}
/* Projector flicker: a faint dark veil, not a filter on the whole stage (phones ran out of layer memory). */
#stage::after { content: ""; position: absolute; inset: 0; z-index: 53; pointer-events: none; background: #000;
  opacity: 0; animation: flicker 5s ease-in-out infinite; }

.bg {
  position: absolute; inset: 0;
  background: url("../assets/web/lab_bg.webp") center / cover;
  filter: sepia(.25) saturate(.9) brightness(.82);
}

/* Actors: each pose frame shares one aligned canvas, so layers stack exactly.
   .rig gets the procedural (spring) transform; two <img> layers cross-fade between poses. */
.actor { position: absolute; pointer-events: none; user-select: none; }
.actor .rig { position: absolute; inset: 0; transform-origin: 50% 96%; will-change: transform; }
.actor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  object-position: bottom center; display: block; opacity: 0; }
.actor img.on { opacity: 1; transition: opacity 70ms linear; }
.boil { filter: url(#boil); }

/* ---------- Title card ---------- */
.title-card {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 22px;
  padding: 10px 34px; background: var(--paper);
  border: 5px solid var(--ink); border-radius: 18px;
  box-shadow: 0 0 0 4px var(--brass), 0 0 0 9px var(--ink), 0 10px 0 6px rgba(0,0,0,.35);
}
.title-text { display: flex; flex-direction: column; line-height: 1; text-align: center; }
.title-text small { font: 22px var(--font-title); color: var(--red); }
.title-text strong { font: 46px var(--font-title); letter-spacing: 1px; }
.stars span { font-size: 38px; color: var(--glow); -webkit-text-stroke: 2px var(--ink); margin: 0 1px; }
.stars span.lost { color: #8b7a62; }

/* ---------- Threat meter ---------- */
.threat { position: absolute; top: 30px; right: 36px; width: 260px; text-align: center;
  font: 24px var(--font-title); color: var(--paper); text-shadow: 2px 2px 0 var(--ink); }
.threat-bar { margin-top: 6px; height: 26px; border: 4px solid var(--ink); border-radius: 14px;
  background: var(--paper-dark); overflow: hidden; }
.threat-fill { height: 100%; width: 20%; background: repeating-linear-gradient(-45deg, var(--red) 0 14px, #d65a3d 14px 28px);
  transition: width .6s cubic-bezier(.3,1.6,.5,1); }

/* ---------- Alien ---------- */
.alien { top: -80px; left: -69px; width: 487px; height: 389px; }
.alien .rig { transform-origin: 50% 62%; }
.alien.flee { animation: flee 1s cubic-bezier(.5,-0.4,.8,.5) forwards; }

/* ---------- Chain ---------- */
.chain {
  position: absolute; top: 175px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
}
.slot {
  width: 168px; height: 168px; border-radius: 50%; position: relative;
  background: radial-gradient(circle, rgba(243,230,200,.92) 55%, rgba(226,204,156,.92) 100%);
  border: 6px dashed var(--ink); display: grid; place-items: center;
  box-shadow: 0 8px 0 rgba(0,0,0,.35);
}
.slot.current { border-color: var(--red); animation: pulse 1s ease-in-out infinite; }
.slot.filled { border-style: solid; }
.slot .q { font: 72px var(--font-title); color: rgba(28,20,16,.45); }
.slot img { width: 76%; height: 76%; object-fit: contain; animation: pop .5s cubic-bezier(.3,1.8,.5,1); }
.slot .tag {
  position: absolute; bottom: -40px; white-space: nowrap; font: 22px var(--font-title);
  background: var(--paper); border: 3px solid var(--ink); border-radius: 10px; padding: 1px 12px;
}
.slot.goal img { transform: scaleX(-1); animation: none; }
.slot.goal.recoil img { animation: recoil .35s ease-out; }
.slot.goal { border: 6px solid var(--brass-dark); background: radial-gradient(circle, #f7e2b0 50%, #d9b46e 100%); }
.slot.flow { animation: energize .5s ease-out forwards; }
.arrow { font: 54px var(--font-title); color: var(--paper); -webkit-text-stroke: 2px var(--ink); padding: 0 2px; }
.arrow.flow { color: var(--glow); text-shadow: 0 0 18px var(--glow); }

/* ---------- Characters & bubble ---------- */
.professor { right: -62px; bottom: 131px; width: 485px; height: 691px; }
.sparky { left: 263px; bottom: 165px; width: 314px; height: 346px; }

/* ---------- Lever ---------- */
.lever { position: absolute; left: 560px; bottom: 18px; width: 200px; height: 470px; z-index: 12;
  transform: translateY(460px); transition: transform .7s cubic-bezier(.3,1.5,.5,1); }
.lever.show { transform: translateY(0); }
.lever-base { position: absolute; left: 0; bottom: 0; width: 200px; height: 230px; object-fit: contain; }
.lever-handle { position: absolute; left: 45px; bottom: 168px; width: 110px; height: 275px;
  transform-origin: 50% 98%; transform: rotate(-28deg); cursor: grab; touch-action: none; }
.lever-handle svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(4px 6px 0 rgba(0,0,0,.35)); }
.lever-handle:focus-visible { outline: 4px dashed var(--glow); outline-offset: 6px; }
.lever-handle.dragging { cursor: grabbing; }
.lever-handle.spring { transition: transform .45s cubic-bezier(.3,1.8,.5,1); }
.lever-guide[hidden] { display: none; }
.lever-hint { position: absolute; top: -48px; left: 40px; white-space: nowrap;
  font: 28px var(--font-title); color: var(--paper); background: var(--red); border: 4px solid var(--ink);
  border-radius: 14px; padding: 0 16px; text-shadow: 2px 2px 0 var(--ink); animation: nudge 1s ease-in-out infinite; }
/* Arc arrow over the knob's path, dashes marching in the pull direction. */
.lever-arc { position: absolute; left: 0; top: 0; width: 400px; height: 470px; overflow: visible; pointer-events: none; }
.lever-arc path { fill: none; stroke-linecap: round; }
.lever-arc .arc-ink { stroke: var(--ink); stroke-width: 15; stroke-dasharray: 18 14; animation: march .7s linear infinite; }
.lever-arc .arc-dash { stroke: var(--glow); stroke-width: 8; stroke-dasharray: 18 14; animation: march .7s linear infinite; }
/* Ghost handle: shows the exact motion, swinging from up-left to down-right. */
.lever-ghost { position: absolute; left: 45px; bottom: 168px; width: 110px; height: 275px; pointer-events: none;
  transform-origin: 50% 98%; opacity: 0; animation: ghost-pull 2.2s cubic-bezier(.5,0,.3,1) infinite .8s; }
.lever-ghost svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cards.away { transform: translateY(260px); transition: transform .5s ease-in; }
.tray-label { transition: opacity .3s; }
.tray.empty .tray-label { opacity: 0; }

/* ---------- Porthole cutscene ---------- */
.window-scene { position: absolute; inset: 0; z-index: 35; display: none; place-items: center;
  background: radial-gradient(circle, #3a2616 30%, #120b06 80%); }
.window-scene.show { display: grid; }
.porthole-view { position: absolute; width: 640px; height: 640px; border-radius: 50%; overflow: hidden;
  left: 50%; top: 50%; transform: translate(-50%, -50%); background: #0b1430; }
.porthole-view .sky { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; max-width: none;
  transform: translate(-50%, -50%) scale(1.05); animation: drift 6s ease-in-out infinite alternate; }
.porthole-frame { position: absolute; width: 800px; height: 800px; object-fit: contain; left: 50%; top: 50%;
  transform: translate(-50%, -50%); pointer-events: none; filter: url(#boil); }
.window-scene.show .porthole-frame, .window-scene.show .porthole-view { animation: zoom-in .8s cubic-bezier(.3,1.4,.5,1); }
.ufo { position: absolute; width: 230px; left: -260px; top: 110px; }
.ufo.enter { animation: ufo-enter 1.6s cubic-bezier(.25,1.2,.4,1) forwards; }
.ufo.wobble { left: 120px; top: 110px; animation: ufo-float 1.6s ease-in-out infinite; }
.ufo.hot { left: 120px; top: 110px; animation: ufo-shake 70ms linear infinite, ufo-heat .5s ease-in forwards; }
.ufo.hit { left: 120px; top: 110px; animation: ufo-shake 60ms linear infinite; }
.ufo.gone { display: none; }
.cannon { position: absolute; width: 230px; right: 70px; bottom: 40px; transform: scaleX(-1) rotate(-8deg);
  transform-origin: 70% 80%; transition: transform .2s ease-out; }
.cannon.charging { animation: cannon-charge 90ms linear infinite; }
.cannon.recoil { animation: cannon-recoil .5s cubic-bezier(.2,1.4,.4,1); }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.boom { position: absolute; width: 520px; left: -25px; top: -32px; transform: scale(0); opacity: 0; }
.boom.go { animation: boom 1.6s cubic-bezier(.2,1.6,.4,1) forwards; }
.debris-piece { position: absolute; width: 230px; left: 120px; top: 110px; animation: debris 1.6s cubic-bezier(.2,.6,.4,1) forwards; }
.boom-word { position: absolute; left: 50%; top: 50%; font: 190px var(--font-title); color: var(--glow);
  -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 10px 12px 0 var(--red);
  transform: translate(-50%, -50%) scale(0) rotate(-12deg); pointer-events: none; }
.boom-word.go { animation: boom-word 1.5s cubic-bezier(.2,1.8,.4,1) forwards; }

.bubble {
  position: absolute; right: 330px; bottom: 250px; width: 500px; min-height: 110px; z-index: 11;
  background: #fffaf0; border: 5px solid var(--ink); border-radius: 36px;
  padding: 18px 26px; box-shadow: 6px 8px 0 rgba(0,0,0,.35);
  display: flex; align-items: center;
}
.bubble::after {
  content: ""; position: absolute; right: -34px; bottom: 40px; width: 44px; height: 34px;
  background: #fffaf0; border: 5px solid var(--ink); border-left: none; border-top: none;
  transform: skewY(-28deg); border-radius: 0 0 22px 0;
}
.bubble p { margin: 0; font: 500 26px/1.35 var(--font-body); }
.bubble.good { border-color: var(--good); }
.bubble.bad { border-color: var(--red); }
.bubble.show { animation: pop .35s cubic-bezier(.3,1.8,.5,1); }

/* ---------- Tray & cards ---------- */
.tray {
  position: absolute; left: 0; right: 0; bottom: 0; height: 205px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 160px),
    linear-gradient(var(--wood), var(--wood-dark));
  border-top: 6px solid var(--ink);
  box-shadow: 0 -10px 24px rgba(0,0,0,.45);
}
.tray-label {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  font: 24px var(--font-title); background: var(--brass); color: var(--paper);
  border: 4px solid var(--ink); border-radius: 12px; padding: 0 24px; text-shadow: 2px 2px 0 var(--ink);
}
.cards { transition: transform .5s ease-out; display: flex; justify-content: center; gap: 22px; padding-top: 24px; }
.card {
  width: 140px; height: 165px; border: 5px solid var(--ink); border-radius: 16px;
  background: var(--paper); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 7px var(--brass), 0 7px 0 rgba(0,0,0,.4);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 12px 6px 8px; cursor: pointer; font: 21px var(--font-title);
  transition: transform .15s cubic-bezier(.3,1.8,.5,1);
}
.card img { width: 96px; height: 96px; object-fit: contain; pointer-events: none; }
.card:hover { transform: translateY(-14px) rotate(-3deg); }
.card.wrong { animation: shake .45s; }
.card.used { visibility: hidden; }
.card:disabled { cursor: default; }
.flyer { position: absolute; z-index: 30; pointer-events: none; transition: all .55s cubic-bezier(.5,-0.3,.6,1.3); }

/* ---------- Beam & flash ---------- */
.beam {
  position: absolute; height: 46px; margin-top: -23px; transform-origin: 0 50%; opacity: 0; z-index: 20;
  background: linear-gradient(#fff6c9, #ffe24a 30%, #ff6b3d 50%, #ffe24a 70%, #fff6c9);
  border: 4px solid var(--ink); border-radius: 14px; box-shadow: 0 0 30px 10px rgba(255,216,74,.7);
}
.beam.fire { animation: beam .9s ease-out forwards; }
.flash { position: absolute; inset: 0; background: #fff8e0; opacity: 0; pointer-events: none; z-index: 25; }
.flash.go { animation: flash .5s ease-out; }
.star-fx { position: absolute; font-size: 72px; margin: -36px 0 0 -24px; color: var(--glow); -webkit-text-stroke: 2px var(--ink); z-index: 22;
  animation: star-burst 1.1s ease-out forwards; pointer-events: none; }

/* ---------- Victory ---------- */
.victory { position: absolute; inset: 0; display: none; place-items: center; z-index: 40;
  background: radial-gradient(circle, rgba(255,226,140,.35), rgba(20,12,6,.85)); }
.victory.show { display: grid; }
.victory-card {
  width: 860px; padding: 70px 50px 40px; text-align: center; position: relative;
  background: var(--paper); border: 6px solid var(--ink); border-radius: 30px;
  box-shadow: 0 0 0 6px var(--brass), 0 0 0 12px var(--ink), 0 20px 0 10px rgba(0,0,0,.4);
  animation: pop .6s cubic-bezier(.3,1.6,.5,1);
}
.ribbon {
  position: absolute; top: -46px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font: 58px var(--font-title); color: var(--paper); background: var(--red);
  border: 6px solid var(--ink); border-radius: 16px; padding: 4px 48px; text-shadow: 3px 3px 0 var(--ink);
}
.big-stars span { display: inline-block; font-size: 96px; color: var(--glow); -webkit-text-stroke: 4px var(--ink);
  animation: pop .5s cubic-bezier(.3,1.8,.5,1) backwards; }
.big-stars span.lost { color: #9b8a70; }
.victory-card h3 { font: 30px var(--font-title); margin: 6px 0 10px; }
.summary { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap;
  font: 24px var(--font-title); }
.summary .chip { background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 2px 12px; }
.summary .chip.conv { background: var(--paper-dark); font-size: 20px; }
.lesson { font: 500 23px var(--font-body); margin: 18px 0 24px; }
.buttons { display: flex; justify-content: center; gap: 24px; }
.btn {
  font: 30px var(--font-title); padding: 8px 40px; cursor: pointer; color: var(--paper);
  background: var(--good); border: 5px solid var(--ink); border-radius: 18px;
  box-shadow: 0 7px 0 var(--ink); text-shadow: 2px 2px 0 var(--ink);
}
.btn.alt { background: var(--brass); }
.btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }

/* ---------- Old film overlay ---------- */
.grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50;
  mix-blend-mode: multiply; opacity: .32; }
.vignette { position: absolute; inset: 0; pointer-events: none; z-index: 51;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(30,15,5,.6) 100%); }
.scratches { position: absolute; inset: 0; pointer-events: none; z-index: 52; }
.scratches i { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,250,230,.35); opacity: 0; }
.scratches i:nth-child(1) { animation: scratch 3.1s infinite steps(1); }
.scratches i:nth-child(2) { animation: scratch 4.7s infinite steps(1) 1.3s; width: 1px; }
.scratches i:nth-child(3) { animation: scratch 6.3s infinite steps(1) 2.1s; background: rgba(20,10,0,.35); }

@property --iris { syntax: "<length>"; inherits: false; initial-value: 1200px; }
.iris { position: absolute; inset: 0; pointer-events: none; z-index: 60;
  background: radial-gradient(circle at var(--ix, 50%) var(--iy, 50%), transparent var(--iris), #000 calc(var(--iris) + 1px));
  transition: --iris .8s cubic-bezier(.6,0,.4,1); }
.iris.closed { --iris: 0px; }

/* ---------- Keyframes ---------- */
@keyframes flicker { 0%, 100% { opacity: 0; } 30% { opacity: .03; } 55% { opacity: 0; } 80% { opacity: .015; } }
@keyframes flee { 0% { transform: translate(0, 0); } 30% { transform: translate(30px, 20px) scale(1.1, .9); } 100% { transform: translate(-420px, -380px) scale(.4) rotate(-40deg); opacity: 0; } }
@keyframes march { to { stroke-dashoffset: -32; } }
@keyframes ghost-pull { 0% { transform: rotate(-28deg); opacity: 0; } 12% { opacity: .55; } 60% { transform: rotate(62deg); opacity: .55; }
  80% { transform: rotate(62deg); opacity: .55; } 100% { transform: rotate(62deg); opacity: 0; } }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 10px; } }
@keyframes drift { from { transform: translate(-52%, -50%) scale(1.08); } to { transform: translate(-48%, -51%) scale(1.12); } }
@keyframes zoom-in { from { transform: translate(-50%, -50%) scale(.25); } to { transform: translate(-50%, -50%) scale(1); } }
@keyframes ufo-enter { 0% { left: -260px; top: 60px; transform: rotate(14deg); } 70% { left: 140px; top: 120px; transform: rotate(-6deg); } 100% { left: 120px; top: 110px; transform: rotate(0); } }
@keyframes ufo-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes ufo-shake { 0%, 100% { translate: -3px 1px; } 50% { translate: 3px -2px; } }
@keyframes ufo-heat { from { filter: none; } to { filter: brightness(1.5) saturate(1.6) sepia(.4) hue-rotate(-25deg) drop-shadow(0 0 18px #ff9a3c); } }
@keyframes cannon-charge { 0%, 100% { translate: -1px 0; } 50% { translate: 1px -1px; } }
@keyframes cannon-recoil { 0% { transform: scaleX(-1) rotate(-8deg) translate(0, 0); } 15% { transform: scaleX(-1) rotate(-4deg) translate(-26px, 22px) scale(1.06, .92); } 100% { transform: scaleX(-1) rotate(-8deg) translate(0, 0); } }
@keyframes boom { 0% { transform: scale(0) rotate(-20deg); opacity: 1; } 25% { transform: scale(1.15) rotate(6deg); opacity: 1; } 45% { transform: scale(1) rotate(0); } 80% { opacity: 1; } 100% { transform: scale(1.35) rotate(4deg); opacity: 0; } }
@keyframes debris { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.6); opacity: 0; } }
@keyframes boom-word { 0% { transform: translate(-50%, -50%) scale(0) rotate(-12deg); } 30% { transform: translate(-50%, -50%) scale(1.15) rotate(-8deg); } 50%, 85% { transform: translate(-50%, -50%) scale(1) rotate(-6deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.3) rotate(-6deg); opacity: 0; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes pop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.title-card .pop, .victory-card { transform-origin: center; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-16px) rotate(-6deg); } 40% { transform: translateX(14px) rotate(5deg); } 60% { transform: translateX(-10px); } 80% { transform: translateX(6px); } }
@keyframes energize { 0% { box-shadow: 0 8px 0 rgba(0,0,0,.35); } 50% { box-shadow: 0 0 60px 26px var(--glow); transform: scale(1.12); } 100% { box-shadow: 0 0 30px 10px var(--glow); transform: scale(1); border-color: #b8860b; } }
@keyframes beam { 0% { opacity: 1; transform: rotate(var(--angle)) scaleX(0); } 30% { opacity: 1; transform: rotate(var(--angle)) scaleX(1); } 80% { opacity: 1; transform: rotate(var(--angle)) scaleX(1) scaleY(1.4); } 100% { opacity: 0; transform: rotate(var(--angle)) scaleX(1) scaleY(.2); } }
@keyframes recoil { 0% { transform: scaleX(-1); } 30% { transform: scaleX(-1) translateX(-30px) scale(1.2, .8); } 100% { transform: scaleX(-1); } }
@keyframes quake { 0%, 100% { translate: 0 0; } 20% { translate: -14px 8px; } 40% { translate: 12px -10px; } 60% { translate: -8px 6px; } 80% { translate: 6px -4px; } }
#stage.quake { animation: quake .45s linear; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes star-burst { 0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(360deg); opacity: 0; } }
@keyframes scratch { 0% { opacity: 0; left: 20%; } 10% { opacity: 1; left: 23%; } 12% { opacity: 0; } 40% { opacity: 1; left: 71%; } 42% { opacity: 0; } 70% { opacity: 1; left: 48%; } 71% { opacity: 0; } }

/* Phones and tablets: mobile Safari drops elements under an animated SVG filter, and blending the grain
   over the whole stage costs layer memory it doesn't have. They get the film look without both. */
@media (hover: none) and (pointer: coarse) {
  .boil, .porthole-frame, .credits-card { filter: none; }
  .grain { display: none; }
}

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

/* ---------- Quiz: a ruled exam sheet on the workbench ---------- */
.quiz { position: absolute; inset: 0; z-index: 42; display: none; background: #2a1d14; }
.quiz.show { display: block; }
.quiz-bg { position: absolute; inset: 0; background: url("../assets/web/lab_bg.webp") center / cover;
  filter: sepia(.35) brightness(.55) blur(3px); transform: scale(1.04); }
.sheet {
  position: absolute; left: 70px; top: 40px; width: 1040px; height: 820px; padding: 34px 110px 30px 60px;
  background:
    linear-gradient(90deg, transparent calc(100% - 78px), rgba(184,57,43,.55) calc(100% - 78px) calc(100% - 75px), transparent calc(100% - 75px)),
    repeating-linear-gradient(transparent 0 47px, var(--ruled) 47px 49px),
    var(--paper);
  background-position: 0 0, 0 22px, 0 0;
  border: 5px solid var(--ink); border-radius: 10px 10px 28px 10px;
  box-shadow: 0 0 0 4px var(--brass), 0 0 0 9px var(--ink), 12px 18px 0 rgba(0,0,0,.35);
  transform: rotate(-.8deg); display: flex; flex-direction: column; gap: 18px;
}
.quiz.show .sheet { animation: sheet-in .6s cubic-bezier(.3,1.4,.5,1); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-bottom: 4px double var(--ink); padding-bottom: 10px; }
.sheet-title h2 { margin: 0; font: 44px/1.05 var(--font-title); }
.sheet-title small { font: 500 21px var(--font-body); color: var(--red); }
.dots { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.dots li { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--ink); background: var(--paper);
  display: grid; place-items: center; font: 18px var(--font-title); transition: background .3s, transform .3s; }
.dots li.now { transform: scale(1.18); background: var(--glow); }
.dots li.ok { background: var(--good); color: var(--paper); }
.dots li.miss { background: var(--miss); color: var(--paper); }
.sheet-body { flex: 1; display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 10px; }
.q-meta { display: flex; align-items: center; gap: 14px; font: 24px var(--font-title); color: var(--brass-dark); }
.q-tag { font: 500 18px var(--font-body); color: var(--paper); background: var(--ink); border-radius: 999px; padding: 2px 14px; }
.q-prompt { margin: 0; font: 700 36px/1.35 var(--font-body); text-wrap: balance; }

/* Multiple choice: א ב ג ד, like a printed exam */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice { display: flex; align-items: center; gap: 16px; text-align: start; cursor: pointer;
  font: 500 27px var(--font-body); color: var(--ink); background: #fffaf0; padding: 14px 18px;
  border: 4px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--ink);
  transition: transform .15s cubic-bezier(.3,1.8,.5,1), background .2s; }
.choice:hover:not(:disabled) { transform: translateY(-4px) rotate(-.5deg); background: #fff3cf; }
.choice:focus-visible, .chip-btn:focus-visible, .q-open textarea:focus-visible, .btn:focus-visible {
  outline: 4px dashed var(--red); outline-offset: 4px; }
.choice .letter { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font: 26px var(--font-title); border: 3px solid var(--ink); background: var(--paper-dark); }
.choice:disabled { cursor: default; }
.choice.right { background: #dcefc9; border-color: var(--good); box-shadow: 0 6px 0 var(--good); }
.choice.right .letter { background: var(--good); color: var(--paper); }
.choice.wrong { background: #f8dcc4; border-color: var(--miss); box-shadow: 0 6px 0 var(--miss); animation: shake .45s; }
.choice.dim { opacity: .55; }

/* Order the chain: tap cards into numbered slots */
.order-slots { display: flex; align-items: center; justify-content: center; gap: 6px; }
.order-slots .arrow { font-size: 34px; color: var(--ink); -webkit-text-stroke: 0; }
.chip-btn { width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; cursor: pointer; font: 22px var(--font-title); color: var(--ink); background: #fffaf0;
  border: 4px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--ink); padding: 6px;
  transition: transform .15s cubic-bezier(.3,1.8,.5,1); }
.chip-btn img { width: 68px; height: 68px; object-fit: contain; pointer-events: none; }
.chip-btn:hover:not(:disabled) { transform: translateY(-4px); }
.order-slot { width: 120px; height: 120px; border: 4px dashed rgba(28,20,16,.55); border-radius: 16px;
  display: grid; place-items: center; font: 40px var(--font-title); color: rgba(28,20,16,.35); position: relative; }
.order-slot .chip-btn { animation: pop .35s cubic-bezier(.3,1.8,.5,1); }
.order-slot.right .chip-btn { background: #dcefc9; border-color: var(--good); }
.order-slot.wrong .chip-btn { background: #f8dcc4; border-color: var(--miss); }
.order-pool { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.order-pool:empty { display: none; }
.q-actions { display: flex; justify-content: center; gap: 20px; }
.btn:disabled { filter: grayscale(.8) brightness(.9); cursor: not-allowed; }
.btn.small { font-size: 24px; padding: 4px 28px; }

/* Written answer */
.q-open { display: flex; flex-direction: column; gap: 10px; }
.q-open label { font: 500 22px var(--font-body); color: var(--brass-dark); }
.q-open textarea { font: 500 28px/1.5 var(--font-body); color: #1d2c6b; resize: none; height: 104px; padding: 6px 16px;
  background: repeating-linear-gradient(transparent 0 40px, var(--ruled) 40px 42px) #fffdf6;
  border: 4px solid var(--ink); border-radius: 14px; }
.model { background: #fff3cf; border: 3px dashed var(--brass-dark); border-radius: 14px; padding: 12px 18px;
  font: 500 24px/1.45 var(--font-body); }
.model strong { font-family: var(--font-title); font-weight: 400; }
.keywords { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font: 500 21px var(--font-body); }
.kw { border: 3px solid var(--ink); border-radius: 999px; padding: 0 14px; background: #eee3c8; }
.kw.hit { background: var(--good); color: var(--paper); }

/* Feedback after each answer */
.feedback { display: flex; align-items: center; gap: 20px; padding: 14px 20px; border-radius: 18px;
  border: 4px solid var(--ink); background: #fffaf0; animation: pop .4s cubic-bezier(.3,1.6,.5,1); }
.feedback.good { border-color: var(--good); }
.feedback.bad { border-color: var(--miss); }
.feedback .fb-text { flex: 1; min-width: 0; }
.feedback h3 { margin: 0 0 4px; font: 30px var(--font-title); }
.feedback.good h3 { color: var(--good); }
.feedback.bad h3 { color: var(--miss); }
.feedback p { margin: 0; font: 500 23px/1.45 var(--font-body); }

/* Summary */
.summary-card { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.score { font: 110px/1 var(--font-title); color: var(--red); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.score small { font-size: 40px; color: var(--ink); -webkit-text-stroke: 0; }
.verdict { margin: 0; font: 700 28px var(--font-body); }
.review { align-self: stretch; text-align: start; max-height: 330px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.review h3 { margin: 0; font: 28px var(--font-title); }
.review-item { border-inline-start: 8px solid var(--miss); background: #fffaf0; border-radius: 10px; padding: 8px 14px; }
.review-item strong { display: block; font: 700 22px var(--font-body); }
.review-item span { font: 500 20px/1.45 var(--font-body); }
.all-right { font: 500 24px var(--font-body); color: var(--good); }

/* Quiz actors (same aligned frames as the lab) */
.quiz-professor { right: -70px; bottom: -60px; width: 485px; height: 691px; z-index: 2; }
.quiz-sparky { left: 1000px; bottom: -40px; width: 314px; height: 346px; z-index: 3; }

@keyframes sheet-in { from { transform: translateY(120px) rotate(-6deg); opacity: 0; } to { transform: rotate(-.8deg); opacity: 1; } }

/* ---------- Longer chains (5 steps) ---------- */
.chain.long { gap: 4px; margin-left: 40px; }
.chain.long .slot { width: 140px; height: 140px; }
.chain.long .arrow { font-size: 42px; }
.chain.long .slot .q { font-size: 58px; }

/* ---------- HUD ---------- */
.hud-btn { position: absolute; top: 34px; right: 330px; z-index: 5; cursor: pointer;
  font: 22px var(--font-title); color: var(--paper); background: var(--brass); padding: 4px 18px;
  border: 4px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); text-shadow: 2px 2px 0 var(--ink); }
.hud-btn:hover { transform: translateY(-2px); }
.hud-btn:focus-visible, .level-card:focus-visible { outline: 4px dashed var(--glow); outline-offset: 4px; }
.buttons { flex-wrap: wrap; }
.sound-btn { position: absolute; top: 14px; left: 14px; z-index: 48; width: 58px; height: 58px; cursor: pointer;
  font-size: 28px; line-height: 1; padding: 0; background: var(--paper); border: 4px solid var(--ink); border-radius: 50%;
  box-shadow: 0 5px 0 var(--ink); }
.sound-btn:hover { transform: translateY(-2px); }
.sound-btn:focus-visible { outline: 4px dashed var(--glow); outline-offset: 4px; }

/* ---------- Level map ---------- */
.levels { position: absolute; inset: 0; z-index: 45; display: none; background: #2a1d14; }
.levels.show { display: block; }
.levels-bg { position: absolute; inset: 0; background: url("../assets/web/night_sky.webp") center / cover;
  filter: sepia(.2) brightness(.8); }
.levels-head { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); text-align: center;
  background: var(--paper); border: 6px solid var(--ink); border-radius: 22px; padding: 10px 60px 14px;
  box-shadow: 0 0 0 5px var(--brass), 0 0 0 11px var(--ink), 0 14px 0 8px rgba(0,0,0,.4); white-space: nowrap; }
.levels-head h1 { margin: 0; font: 76px/1.05 var(--font-title); color: var(--red); -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill; text-shadow: 5px 6px 0 var(--ink); }
.levels-head p { margin: 4px 0 0; font: 700 24px var(--font-body); }
.level-grid { position: absolute; left: 50%; top: 262px; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(3, 330px); gap: 26px 34px; }
.level-card { position: relative; height: 290px; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 2px; padding: 0 12px 14px; color: var(--ink);
  background: var(--paper); border: 5px solid var(--ink); border-radius: 22px;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 7px var(--brass), 0 9px 0 var(--ink);
  transition: transform .18s cubic-bezier(.3,1.8,.5,1); }
.level-card:hover { transform: translateY(-8px) rotate(-1deg); }
.level-card.next { animation: pulse 1.4s ease-in-out infinite; }
.level-card.done { background: #f1ead2; }
.level-num { position: absolute; top: -18px; right: -14px; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; font: 32px var(--font-title); color: var(--paper); background: var(--red);
  border: 5px solid var(--ink); text-shadow: 2px 2px 0 var(--ink); }
.level-weapon { width: 170px; height: 135px; object-fit: contain; }
.level-boss { position: absolute; top: 14px; left: 14px; width: 92px; height: 80px; object-fit: contain; }
.level-card strong { font: 32px/1.1 var(--font-title); }
.level-stars span { font-size: 30px; color: var(--glow); -webkit-text-stroke: 2px var(--ink); }
.level-stars span.lost { color: #b5a687; }
.level-quiz { font: 500 18px var(--font-body); color: var(--brass-dark); }

/* ---------- Splash title screen ---------- */
.splash { position: absolute; inset: 0; z-index: 47; display: none; cursor: pointer; background: #2a1d14; }
.splash.show { display: block; }
.splash-bg { position: absolute; inset: 0; background: url("../assets/web/splash.webp") center / cover;
  filter: sepia(.15) saturate(.95); animation: splash-zoom 6s ease-out forwards; }
.splash-title { position: absolute; top: 46px; left: 50%; margin: 0; white-space: nowrap; transform: translateX(-50%);
  font: 104px/1.1 var(--font-title); color: var(--glow); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  text-shadow: 7px 9px 0 var(--red), 0 0 40px rgba(255,216,74,.45);
  animation: title-in 1s cubic-bezier(.3,1.7,.5,1) .3s backwards; }
.splash-sub { position: absolute; top: 196px; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap;
  font: 32px var(--font-title); color: var(--paper); background: var(--red); padding: 2px 30px;
  border: 5px solid var(--ink); border-radius: 16px; text-shadow: 2px 2px 0 var(--ink);
  animation: pop .5s cubic-bezier(.3,1.8,.5,1) 1s backwards; }
.splash-professor { left: 30px; bottom: -30px; width: 380px; height: 541px; animation: walk-in 1s cubic-bezier(.3,1.3,.5,1) .5s backwards; }
.splash-enter { position: absolute; bottom: 40px; left: 50%; translate: -50% 0; cursor: pointer; white-space: nowrap;
  font: 44px var(--font-title); color: var(--paper); background: var(--good); padding: 8px 46px 12px;
  border: 6px solid var(--ink); border-radius: 22px; box-shadow: 0 8px 0 var(--ink); text-shadow: 3px 3px 0 var(--ink);
  animation: pop .5s cubic-bezier(.3,1.8,.5,1) 1.6s backwards, pulse 1.2s ease-in-out 2.1s infinite; }
.splash-enter:hover { background: #5fa147; }
.splash-enter:focus-visible { outline: 5px dashed var(--glow); outline-offset: 6px; }

/* The workbench's animated, filtered actors are covered by these screens: don't paint them. */
#stage:is([data-screen="splash"], [data-screen="lab"], [data-screen="chemistry"]) :is(#professor, #sparky, #alien) { visibility: hidden; }
/* …and its painting isn't even downloaded until a game needs it (the page starts on the splash). */
#stage:is([data-screen="splash"], [data-screen="lab"], [data-screen="credits"]) > .bg { display: none; }

/* ---------- Lab hub ---------- */
/* Full-screen hubs are opaque even before their painting loads (slow phones), so the workbench never shows through. */
.lab { position: absolute; inset: 0; z-index: 46; display: none; background: #2a1d14; }
.lab.show { display: block; }
.lab-bg { position: absolute; inset: 0; background: url("../assets/web/lab_hub.webp") 0 0 / 100% 100%; }
.lab-title { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap;
  font: 54px/1.15 var(--font-title); color: var(--red); background: var(--paper); padding: 2px 42px 6px; z-index: 4;
  border: 6px solid var(--ink); border-radius: 22px; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  box-shadow: 0 0 0 5px var(--brass), 0 0 0 11px var(--ink), 0 14px 0 8px rgba(0,0,0,.35); }
.lab-professor { left: 680px; bottom: 0; width: 360px; height: 513px; z-index: 3; }
.lab-bubble { right: auto; left: 330px; bottom: auto; top: 128px; width: 470px; z-index: 4; }
.lab-bubble::after { bottom: auto; top: 46px; }
.lab-bubble[hidden] { display: none; }

/* Each station is a layer cut from the painting: no filter at rest, so it is invisible until hovered. */
.lab-corner { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2;
  transform-origin: 50% 92%; transition: transform .25s cubic-bezier(.3,1.8,.5,1); }
.lab-corner img { display: block; width: 100%; height: 100%; pointer-events: none; transition: filter .25s; }
.lab-corner:hover, .lab-corner:focus-visible { transform: scale(1.07); z-index: 3; }
.lab-corner:hover img, .lab-corner:focus-visible img {
  filter: brightness(1.08) drop-shadow(0 0 10px rgba(255,236,140,.95)) drop-shadow(0 0 26px rgba(255,200,60,.7));
  animation: wiggle .6s ease-in-out infinite; }
.lab-corner:focus-visible { outline: none; }
.lab-corner.locked:hover, .lab-corner.locked:focus-visible { transform: scale(1.03); }
.lab-corner.locked:hover img, .lab-corner.locked:focus-visible img { animation: none;
  filter: drop-shadow(0 0 10px rgba(255,236,200,.8)); }
.lab-corner.nope { animation: shake .45s; }

.corner-sign { position: absolute; left: var(--sign-x, 50%); bottom: -22px; opacity: .92; transform: translateX(-50%); white-space: nowrap; text-align: center;
  display: flex; flex-direction: column; line-height: 1.05; padding: 4px 18px 6px;
  background: var(--paper); border: 4px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); color: var(--ink); }
.corner-sign strong { font: 26px var(--font-title); font-weight: 400; }
.corner-sign small { font: 700 18px var(--font-body); color: var(--good); }
.locked .corner-sign small { color: var(--paper); background: var(--red); border-radius: 999px; margin-top: 2px; padding: 0 10px; }
.lab-corner:hover .corner-sign, .lab-corner:focus-visible .corner-sign { animation: pop .3s cubic-bezier(.3,1.8,.5,1); background: #fff3cf; }

/* Hover particles: each corner has its own little effect, only on hover/focus. */
.corner-fx { position: absolute; inset: 0; pointer-events: none; }
.corner-fx i { position: absolute; display: none; }
.lab-corner:hover .corner-fx i, .lab-corner:focus-visible .corner-fx i { display: block; }
.fx-sparks .corner-fx i { left: 50%; top: 66%; width: 40px; height: 40px; margin: -20px;
  animation: spark .9s ease-out infinite; animation-delay: calc(var(--i) * -.11s); --a: calc(var(--i) * 45deg); }
.fx-sparks .corner-fx i::before { content: "✦"; display: block; font: 40px/1 var(--font-body); font-style: normal;
  color: #fff27a; -webkit-text-stroke: 2.5px var(--ink); text-shadow: 0 0 12px var(--glow); }
.fx-bubbles .corner-fx i { left: calc(18% + var(--i) * 8%); top: 38%; width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--ink); background: radial-gradient(circle at 35% 35%, #fff 15%, #9fe0b0 40%, #4fa86c);
  animation: bubble 1.4s ease-in infinite; animation-delay: calc(var(--i) * -.18s); }
.fx-zaps .corner-fx i { left: calc(10% + var(--i) * 10%); top: calc(14% + (var(--i) * 37 % 40) * 1%); width: 26px; height: 40px;
  background: var(--glow); border: 0; clip-path: polygon(40% 0, 100% 0, 60% 42%, 95% 42%, 20% 100%, 42% 55%, 5% 55%);
  filter: drop-shadow(0 0 6px var(--glow)); animation: zap .6s steps(2) infinite; animation-delay: calc(var(--i) * -.13s); }
.fx-stars .corner-fx i { left: calc(6% + var(--i) * 11%); top: calc(4% + (var(--i) * 29 % 45) * 1%); font-style: normal;
  width: 30px; height: 30px; background: var(--glow);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: twinkle 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -.14s); }

.lab-btn { top: 52px; right: 70px; font-size: 28px; padding: 6px 24px; background: var(--good); }

@keyframes splash-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes title-in { from { transform: translateX(-50%) scale(.2) rotate(-10deg); opacity: 0; } to { transform: translateX(-50%) scale(1) rotate(0); opacity: 1; } }
@keyframes walk-in { from { transform: translateX(-420px) rotate(-8deg); } to { transform: translateX(0); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -1.6deg; } 75% { rotate: 1.6deg; } }
@keyframes spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.4); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-230px) scale(1.3); } }
@keyframes bubble { 0% { opacity: 0; transform: translateY(0) scale(.4); } 20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-190px) translateX(14px) scale(1.2); } }
@keyframes zap { 0% { opacity: 1; transform: rotate(-12deg) scale(1); } 100% { opacity: 0; transform: rotate(14deg) scale(.6); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(40deg); } }

/* ---------- Credits: an old film's black title cards ---------- */
.credits-btn { top: 96px; left: 14px; right: auto; z-index: 5; }
.credits { position: absolute; inset: 0; z-index: 47; display: none; background: #050403; }
.credits.show { display: grid; place-items: center; }
.credits-frame { position: relative; width: 1100px; height: 620px; display: grid; place-items: center;
  border: 3px solid #e9e2d0; outline: 1px solid #e9e2d0; outline-offset: 10px; border-radius: 6px; }
.credits-frame::before, .credits-frame::after { content: "✦"; position: absolute; left: 50%; translate: -50% 0;
  color: #e9e2d0; font-size: 34px; background: #050403; padding: 0 14px; }
.credits-frame::before { top: -26px; }
.credits-frame::after { bottom: -26px; }
.credits-card { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; color: #f4efe2;
  text-shadow: 0 0 12px rgba(255,250,235,.35); filter: url(#boil); }
.credits-card small { font: 40px var(--font-body); font-weight: 500; letter-spacing: 2px; color: #cfc7b3; }
.credits-card strong { font: 92px/1.1 var(--font-title); font-weight: 400; }
.credits-card.title strong { font-size: 84px; }
.credits-card.end strong { font-size: 150px; }
.credits-card.in { animation: credit-in 3s ease-in-out both; }
.credits-card.end.in { animation: credit-in-end 4s ease-out both; }
.credits-back { top: auto; bottom: 30px; right: 40px; }
.credits-card.cast-card { gap: 26px; }
.credits-card.cast-card strong { font-size: 64px; }
.cast { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 70px; text-align: center; }
.cast li { font: 500 32px/1.25 var(--font-body); color: #e9e2d0; padding: 6px 18px; break-inside: avoid;
  border-bottom: 1px dashed rgba(233,226,208,.28); }
@keyframes credit-in { 0% { opacity: 0; transform: scale(.94); } 18%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.02); } }
@keyframes credit-in-end { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1.05); } 40%, 100% { opacity: 1; transform: scale(1); } }

/* ---------- The rat and the cheese (Chemistry corner) ---------- */
/* One SVG scene (machine.js draws and moves it), a canvas on top for water drops, smoke and crumbs. */
.machine { position: absolute; inset: 0; z-index: 44; display: none; background: #2a1d14; }
.machine.show { display: block; }
.machine-bg { position: absolute; inset: 0; background: url("../assets/web/machine/lab_bg.webp") center / cover;
  filter: sepia(.2) saturate(.85) brightness(.7); }
.machine-scene, .machine-fx { position: absolute; inset: 0; width: 1600px; height: 900px; }
.machine-fx { pointer-events: none; z-index: 3; }
.machine-scene { z-index: 2; overflow: visible; }
.machine-scene .ink { stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.machine-scene .thin { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.machine-scene .rope { fill: none; stroke: #c9a36a; stroke-width: 9; }

/* Empty slots: a glowing dashed box with a question mark. Placed parts can be clicked back to the tray. */
.slot-box rect { fill: rgba(255, 216, 74, .12); stroke: var(--glow); stroke-width: 4; stroke-dasharray: 14 10;
  animation: march .9s linear infinite; }
.slot-box text { font: 46px var(--font-title); fill: var(--glow); stroke: var(--ink); stroke-width: 2; paint-order: stroke;
  text-anchor: middle; dominant-baseline: central; }
.slot-box { animation: slot-glow 1.6s ease-in-out infinite; }
.slot-box { display: none; }   /* no markers: the kids find the spot */
.machine.running .slot-box { display: none; }
.slot-part { cursor: pointer; }
.slot-part:hover { filter: drop-shadow(0 0 8px var(--glow)); }
.machine.running .slot-part { cursor: default; filter: none; }
.part-pop { animation: part-pop .45s cubic-bezier(.3,1.8,.5,1); transform-box: fill-box; transform-origin: 50% 100%; }

/* Candle flame: a flicker that never repeats exactly (two animations with different lengths). */
.flame { transform-box: fill-box; transform-origin: 50% 100%;
  animation: flame-a .53s ease-in-out infinite alternate, flame-b 1.37s ease-in-out infinite alternate;
  transition: opacity .25s, scale .3s; }
.flame-glow { animation: glow 1.1s ease-in-out infinite alternate; transition: opacity .3s; }
.out .flame { opacity: 0; scale: .1 .1; }
/* Three painted flame drawings take turns (on top of the wobble), so the flame flickers like a drawn cartoon. */
.flame-frame { opacity: 0; animation: flame-frame .42s steps(1) infinite; }
.flame-frame.f2 { animation-delay: -.14s; }
.flame-frame.f3 { animation-delay: -.28s; }
@keyframes flame-frame { 0% { opacity: 1; } 33.34%, 100% { opacity: 0; } }
.out .flame-glow { opacity: 0; }
.spin .blades { animation: spin .25s linear infinite; transform-box: fill-box; transform-origin: center; }
/* Painted stink wisps rise and fade one after another. */
.stink image { opacity: 0; animation: stink 2.6s ease-in infinite; }
.stink image:nth-child(2) { animation-delay: .85s; }
.stink image:nth-child(3) { animation-delay: 1.7s; }

/* The rat's frames share one padded canvas (tools: PoseAligner); the body is 250px wide inside it. */
/* The paws are 12% above the frame's bottom (the tail hangs lower), so the box sits that much lower. */
.machine-rat { left: 952px; top: 158px; width: 255px; height: 187px; z-index: 4; }
.machine-rat .flip { position: absolute; inset: 0; transform: scaleX(-1); }
.machine-rat .rig { transform-origin: 50% 100%; }
.machine-rat img.on { transition: none; }
.burp { position: absolute; z-index: 5; display: none; font: 34px var(--font-title); color: var(--ink);
  background: #fffaf0; border: 4px solid var(--ink); border-radius: 50%; padding: 8px 20px; }
.burp.show { display: block; animation: pop .4s cubic-bezier(.3,1.8,.5,1); }

.machine-title { left: 90px; transform: none; top: 14px; padding: 6px 26px; z-index: 6; }
.machine-title .title-text strong { font-size: 36px; }
.machine-lab-btn { right: 30px; top: 26px; }
.machine-professor { left: -90px; bottom: 205px; width: 420px; height: 598px; z-index: 5; }
.machine-bubble { left: 790px; right: auto; top: 14px; bottom: auto; width: 600px; min-height: 96px; z-index: 7; }
.machine-bubble::after { right: auto; left: -34px; bottom: 26px; border-left: 5px solid var(--ink); border-right: none;
  transform: skewY(28deg); border-radius: 0 0 0 22px; }
.machine-bubble p { font-size: 24px; }
.machine-lever { left: 1190px; z-index: 8; }
.machine-lever.show { transform: translateY(0); }

.machine-tray { z-index: 6; }
/* The tray: the objects themselves on a light shelf, dragged up into the machine. */
.machine-tray { background:
    repeating-linear-gradient(90deg, rgba(120,80,40,.07) 0 2px, transparent 2px 140px),
    linear-gradient(#f1e2bf, #d9c08f); }
.machine-cards { display: flex; justify-content: center; align-items: center; gap: 46px; height: 100%; padding: 6px 430px 0 30px; }
.tray-item { width: 130px; height: 130px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none;
  filter: drop-shadow(0 6px 4px rgba(60,35,10,.35)); transition: transform .15s cubic-bezier(.3,1.8,.5,1); }
.tray-item svg { width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tray-item:hover { transform: translateY(-10px) rotate(-3deg); }
.tray-item:focus-visible { outline: 4px dashed var(--brass-dark); outline-offset: 4px; border-radius: 12px; }
.tray-item.used { visibility: hidden; }
.machine.running .tray-item { cursor: default; }
.machine.running .tray-item:hover { transform: none; }
.drag-ghost { position: absolute; z-index: 30; pointer-events: none; cursor: grabbing;
  filter: drop-shadow(0 14px 8px rgba(0,0,0,.4)); transform: scale(1.08); }
.drag-ghost svg { width: 100%; height: 100%; overflow: visible; }
.drag-ghost.returning { transition: left .3s ease-in, top .3s ease-in, transform .3s; transform: scale(1); }
.flyer-svg { position: absolute; z-index: 30; pointer-events: none; transition: all .5s cubic-bezier(.5,-0.3,.6,1.3); }
.flyer-svg svg { width: 100%; height: 100%; overflow: visible; }

.machine-victory { z-index: 20; }

@keyframes slot-glow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes part-pop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
@keyframes flame-a { from { transform: scale(.92, 1.04) skewX(-4deg); } to { transform: scale(1.06, .94) skewX(5deg); } }
@keyframes flame-b { from { translate: -1px 0; } to { translate: 1.5px -2px; } }
@keyframes glow { from { opacity: .55; } to { opacity: .9; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes stink { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-70px); } }

/* Choosing how to play: with the professor's hints, or without. */
.machine-mode { position: absolute; inset: 0; z-index: 21; display: none; place-items: center;
  background: radial-gradient(circle, rgba(255,226,140,.25), rgba(20,12,6,.8)); }
.machine-mode.show { display: grid; }
.mode-card { position: relative; width: 760px; padding: 80px 50px 46px; background: var(--paper); text-align: center;
  border: 6px solid var(--ink); border-radius: 30px; box-shadow: 0 0 0 6px var(--brass), 0 0 0 12px var(--ink), 0 20px 0 10px rgba(0,0,0,.4);
  animation: pop .5s cubic-bezier(.3,1.6,.5,1); }
.mode-buttons { display: flex; gap: 30px; justify-content: center; }
.mode-btn { display: flex; flex-direction: column; gap: 6px; padding: 18px 34px; min-width: 300px; }
.mode-btn strong { font: 38px var(--font-title); font-weight: 400; }
.mode-btn small { font: 500 21px var(--font-body); text-shadow: none; }
.mode-btn.mode-plain { background: var(--brass); }
.machine-bubble.hide { display: none; }