/* Jesus & Silvio · XXXIII — arcade edition.
   Layout: .stage is the screen, .backdrop paints the theatre, .set holds the actors and sizes them
   from --jw (Jesus' width) so the composition holds from a 360px phone to a wide monitor. */

:root {
  color-scheme: dark;
  --ink: #fff;
  --yellow: #ffe83a;
  --pink: #ff2fc0;
  --cyan: #19e3ff;
  --deep: #12005a;
  --violet: #3b0a8f;
  --line: #371b68;
  --night: #05001c;
  --win: #c3c3c3;
  --win-blue: #130774;
  --display: Impact, 'Arial Black', 'Helvetica Neue', sans-serif;
  --mono: 'Courier New', Courier, monospace;
  --dock: clamp(150px, 27dvh, 220px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--night); color: var(--ink); font-family: var(--mono); overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px dashed var(--cyan); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.app { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); height: 100dvh; }

/* ---------- Windows 95 bits ---------- */

.win { background: var(--win-blue); border: 6px ridge #eee; outline: 2px solid var(--yellow); box-shadow: 10px 10px var(--night); }
.titlebar { display: flex; justify-content: space-between; gap: 10px; padding: 7px 11px; background: linear-gradient(90deg, #0c1687, #005ead); border-bottom: 3px ridge #eee; font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.titlebar span:last-child { color: var(--yellow); }
.win-body { padding: 18px 20px; background: repeating-linear-gradient(0deg, transparent 0 3px, #0002 4px); }
.win-button { background: var(--win); color: #111; border: 4px outset #fff; border-radius: 0; box-shadow: 3px 3px #000; font-family: var(--mono); font-size: 12px; font-weight: 900; text-transform: uppercase; padding: 7px 10px; white-space: nowrap; }
.win-button:active, .win-button[aria-pressed='true'] { border-style: inset; box-shadow: 1px 1px #000; transform: translate(2px, 2px); }

/* ---------- HUD ---------- */

.hud { position: relative; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); background: linear-gradient(#1a0670, #0d0247); border-bottom: 4px solid var(--pink); box-shadow: 0 4px var(--yellow); font-weight: 900; font-size: 13px; letter-spacing: .05em; }
.hud .k { color: var(--pink); }
.hud-player b { color: var(--yellow); }
.score { color: #fff; font-variant-numeric: tabular-nums; }
.hud-brand { flex: 1; text-align: center; font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: .06em; color: var(--yellow); text-shadow: 2px 2px var(--pink); white-space: nowrap; }
.hud-brand small { font-family: var(--mono); font-size: 10px; color: var(--cyan); text-shadow: none; }
.hearts { color: #ff3b5c; letter-spacing: .1em; font-size: 15px; }
.hud-controls { display: flex; gap: 8px; }
[data-scene='boot'] .hud > :not(.hud-brand), [data-scene='construction'] #skip-button { visibility: hidden; }
@media (max-width: 720px) {
  .hud { gap: 10px; font-size: 11px; }
  .hud-brand { display: none; }
  .hud-lives { margin-right: auto; }
  .hud .win-button { font-size: 10px; padding: 6px 7px; }
}
@media (max-width: 380px) { .hud-player b { display: none; } }

/* ---------- Stage & backdrop ---------- */

.stage { position: relative; overflow: hidden; container: stage / size; }
.backdrop, .backdrop > * { position: absolute; }
.backdrop { inset: 0; }
.sky { inset: 0; background: radial-gradient(#ffed82 1px, transparent 2px) 0 0 / 87px 101px, radial-gradient(#ffffffaa 1px, transparent 2px) 40px 50px / 131px 89px, linear-gradient(#12005a, #3b0a8f 55%, #6a0aa8); animation: twinkle 4s steps(2) infinite; }
.beam { top: -10%; width: 30%; height: 120%; background: linear-gradient(#fff6, #fff0 85%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); mix-blend-mode: screen; opacity: .45; transform-origin: 50% 0; }
.beam.left { left: 4%; animation: sweep 7s ease-in-out infinite alternate; }
.beam.right { right: 4%; animation: sweep 8s ease-in-out infinite alternate-reverse; }
.floor { left: -20%; right: -20%; bottom: 0; height: 34%; background: linear-gradient(90deg, #ff2fc077 2px, transparent 2px) 0 0 / 60px 100%, linear-gradient(#ff2fc077 2px, transparent 2px) 0 0 / 100% 34px, linear-gradient(#3a0a7a, #1a0450); transform: perspective(320px) rotateX(48deg); transform-origin: 50% 100%; border-top: 4px solid var(--yellow); }
.curtain { top: 0; bottom: 0; width: clamp(34px, 11cqw, 150px); background: repeating-linear-gradient(90deg, #8a0060 0 12%, #ff2fc0 18% 26%, #b0007c 32% 40%); border-inline: 4px solid var(--line); box-shadow: inset 0 -30px 40px #0008; transform-origin: 50% 0; }
.curtain.left { left: 0; border-radius: 0 0 60% 0; }
.curtain.right { right: 0; border-radius: 0 0 0 60%; }
.valance { left: 0; right: 0; top: 0; height: clamp(22px, 5cqh, 40px); background: repeating-linear-gradient(90deg, var(--yellow) 0 20px, #ffb000 20px 40px); border-bottom: 5px solid var(--line); box-shadow: 0 5px #0006; }
.bulbs { position: absolute; inset: 30% 0 auto; height: 8px; background: radial-gradient(circle, #fff 3px, #fff0 4px) 0 0 / 22px 8px; animation: bulbs .5s steps(2) infinite; }

/* ---------- Set: the actors ---------- */

.set { position: absolute; inset: 0 0 var(--dock) 0; container-type: size; transition: translate .9s var(--ease-out); }
.set > * { position: absolute; }
.set { --jw: min(72cqw, 58cqh); --table-top: calc(3cqh + var(--jw) * .3); }

.big33 { left: 50%; top: 4cqh; translate: -50% 0; font: italic 400 min(64cqh, 62cqw)/1 var(--display); color: var(--yellow); -webkit-text-stroke: 4px var(--pink); text-shadow: 8px 8px #4d00ff, 14px 14px var(--night); letter-spacing: -.06em; opacity: .5; rotate: -7deg; }

.bunting { left: 4%; right: 4%; top: clamp(24px, 6cqh, 44px); display: flex; justify-content: space-between; transform-origin: 0 0; transition: transform .6s cubic-bezier(.5, 1.6, .5, 1); border-top: 3px solid #fff; }
.bunting i { width: 6%; aspect-ratio: 1 / 1.2; clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--yellow); transform-origin: 50% 0; animation: flutter 1.6s ease-in-out infinite; }
.bunting i:nth-child(3n + 2) { background: var(--cyan); animation-delay: -.4s; }
.bunting i:nth-child(3n) { background: var(--pink); animation-delay: -.9s; }

.marquee { left: 50%; top: clamp(40px, 10cqh, 70px); width: min(86cqw, 520px); translate: -50% 0; padding: 7px 10px 6px; text-align: center; background: #ffff00; color: #370076; border: 4px ridge #fff; box-shadow: 5px 5px #000; transform-origin: 6% -40px; z-index: 2; }
.marquee b { display: block; font-size: clamp(12px, 3.2cqw, 20px); font-weight: 900; letter-spacing: .06em; }
.marquee small { display: block; font-size: clamp(9px, 2.2cqw, 12px); font-weight: 900; color: #c4008a; letter-spacing: .08em; }
.chain { position: absolute; top: -44px; width: 4px; height: 44px; background: repeating-linear-gradient(#ddd 0 6px, #777 6px 9px); }
.chain.left { left: 6%; }
.chain.right { right: 6%; transform-origin: 50% 0; }

.jesus { left: 50%; bottom: calc(3cqh + var(--jw) * .25); width: var(--jw); translate: -50% 0; transition: translate 1.1s cubic-bezier(.6, 0, .4, 1), rotate 1.1s; }
.jesus svg { display: block; width: 100%; height: auto; overflow: visible; animation: bob 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.jesus .halo { transform-box: fill-box; transform-origin: center; animation: halo 12s linear infinite; }
.jesus .eye { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
.jesus .brow { transform-box: fill-box; transform-origin: center; transition: transform .25s; }
.jesus .shut, .jesus .x, .jesus .sweat, .jesus .mouth-open, .jesus .mouth-o, .jesus .mouth-flat { display: none; }
.talking .jesus .mouth-open { display: inline; animation: talk .2s steps(2) infinite; }
.talking .jesus .mouth-smile { display: none; }
.eyes-closed .jesus .eye { display: none; }
.eyes-closed .jesus .shut { display: inline; }
[data-mood='gift'] .jesus .pupil, [data-mood='box'] .jesus .pupil { transform: translate(7px, 3px); }
[data-mood='worried'] .jesus .brow-left, [data-mood='panic'] .jesus .brow-left { transform: rotate(-14deg) translateY(-6px); }
[data-mood='worried'] .jesus .brow-right, [data-mood='panic'] .jesus .brow-right { transform: rotate(14deg) translateY(-6px); }
[data-mood='worried'] .jesus .sweat, [data-mood='panic'] .jesus .sweat, [data-mood='hurt'] .jesus .sweat { display: inline; }
[data-mood='hurt'] .jesus .brow-left { transform: rotate(-10deg) translateY(-3px); }
[data-mood='hurt'] .jesus .brow-right { transform: rotate(10deg) translateY(-3px); }
[data-mood='hurt'] .jesus .eye { animation: none; transform: scaleY(.45); }
[data-mood='panic'] .jesus .mouth-o { display: inline; }
[data-mood='panic'] .jesus .mouth-smile, [data-mood='panic'] .jesus .mouth-open { display: none !important; }
[data-mood='panic'] .jesus svg { animation: panic .12s linear infinite; }
.buried .jesus { translate: -50% calc(var(--jw) * .3); rotate: -6deg; }
.dead .jesus .eye, .dead .jesus .shut { display: none; }
.dead .jesus .x { display: inline; }
.dead .jesus .mouth-smile, .dead .jesus .mouth-open { display: none; }
.dead .jesus .mouth-flat { display: inline; }
.dead .jesus .halo { filter: grayscale(.8) brightness(.7); animation: halo-dying 2.4s steps(1) forwards; }
.dead .jesus svg { animation: none; }
/* Fiat lux: for a moment, one eye opens and the other winks. */
.dead.winking .jesus .x { display: none; }
.dead.winking .jesus .eye-right { display: inline; animation: none; }
.dead.winking .jesus .shut-left { display: inline; }
.dead.winking .jesus .halo { filter: none; opacity: 1; }

.table { left: 50%; bottom: 3cqh; width: calc(var(--jw) * 1.25); height: calc(var(--jw) * .3); translate: -50% 0; background: repeating-linear-gradient(90deg, var(--pink) 0 10%, var(--yellow) 10% 20%); border: 5px solid var(--line); border-top: 9px solid #fff; border-radius: 8px 8px 0 0; box-shadow: 0 8px 0 #0006, inset 0 -18px 0 #0003; }

.cake { left: 50%; bottom: calc(var(--table-top) - var(--jw) * .03); width: calc(var(--jw) * .52); translate: -50% 0; touch-action: none; user-select: none; -webkit-user-select: none; z-index: 1; transition: transform .5s cubic-bezier(.5, 0, .5, 1.4); transform-origin: 50% 100%; }
.cake svg { display: block; width: 100%; height: auto; overflow: visible; }
.flame { transform-box: fill-box; transform-origin: 50% 100%; transform: skewX(calc(var(--power, 0) * -38deg)) scale(calc(1 + var(--power, 0) * .15), calc(1 - var(--power, 0) * .5)); transition: transform .08s, opacity .25s; }
.flicker { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker .14s ease-in-out infinite alternate; }
.cake .glow { transition: opacity .3s; opacity: calc(1 - var(--power, 0) * .6); }
.smoke { opacity: 0; }
[data-candles='out'] .flame, [data-candles='gone'] .flame { opacity: 0; transform: scale(.2, .1); }
[data-candles='out'] .glow, [data-candles='gone'] .glow { opacity: 0; }
[data-candles='out'] .smoke, [data-candles='gone'] .smoke { animation: smoke 1.6s ease-out forwards; }
[data-candles='lit'] .flame { transition: transform .45s cubic-bezier(.3, 1.8, .5, 1), opacity .2s; }
.holding .cake .candle { animation: jiggle .1s linear infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.buried .cake { transform: translateY(8%) scale(1.25, .35); }

.gift { left: calc(50% + var(--jw) * .36); bottom: calc(var(--table-top) - var(--jw) * .02); width: calc(var(--jw) * .22); transition: transform 1s cubic-bezier(.6, 0, .4, 1); }
.gift svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 12px #19e3ff99); }
.gift-tag { position: absolute; left: 50%; bottom: 100%; translate: -50% -4px; padding: 2px 5px; background: #fff; color: var(--line); font-size: clamp(8px, 1.7cqw, 11px); font-weight: 900; white-space: nowrap; border: 2px solid var(--line); rotate: 6deg; }
.gift-lid { transform-box: view-box; transform-origin: 70px 68px; }
[data-mood='gift'] .gift svg { animation: gift-glow .6s ease-in-out infinite alternate; }
[data-mood='gift'] .gift-lid { animation: lid-hop .5s ease-in-out infinite; }
/* "See this box? Empty." The lid flips open and a little dust escapes. */
.gift-lid { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.gift-dust { opacity: 0; }
[data-mood='box'] .gift-lid { transform: translate(-10px, -36px) rotate(-24deg); }
[data-mood='box'] .gift-dust { animation: dust-out 1.4s .25s ease-out forwards; }
.buried .gift { transform: translate(40%, 30%) rotate(78deg); }

/* ---------- Blow meter & big banners ---------- */

.meter { right: max(10px, 2.5cqw); bottom: 10cqh; height: 58cqh; width: clamp(30px, 6cqw, 44px); display: grid; grid-template-rows: auto 1fr; gap: 5px; opacity: 0; translate: 140% 0; transition: opacity .3s, translate .4s var(--ease-out); pointer-events: none; }
.blowing .meter { opacity: 1; translate: 0 0; }
.meter-label { text-align: center; font: 400 clamp(12px, 2.4cqw, 16px) var(--display); color: var(--yellow); text-shadow: 2px 2px var(--pink); }
.meter-well { position: relative; border: 4px inset #eee; background: #0a0230; overflow: hidden; }
.meter-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, var(--cyan), var(--yellow) 55%, var(--pink)); transition: height .06s linear; }
.meter-target { position: absolute; left: -4px; right: -4px; height: 0; border-top: 3px dashed #fff; }

.flash { left: 50%; top: 24cqh; width: 96cqw; translate: -50% 0; margin: 0; text-align: center; font: 400 clamp(30px, 11cqw, 92px)/1 var(--display); color: var(--yellow); -webkit-text-stroke: 2px var(--line); text-shadow: 4px 4px var(--pink), 8px 8px var(--night); letter-spacing: .02em; opacity: 0; pointer-events: none; z-index: 5; }
.flash.show { animation: flash 1.9s var(--ease-out) forwards; }

/* ---------- Wind, quake, collapse ---------- */

.wind-1 .bunting i { animation-duration: .5s; }
.wind-2 .bunting { transform: rotate(7deg); }
.wind-2 .bunting i { animation-duration: .3s; }
.wind-3 .chain.right { transform: rotate(-80deg) scaleY(.4); opacity: 0; transition: .3s; }
.wind-3 .marquee { animation: swing 1.4s ease-in-out infinite alternate; }
[data-scene='quake'] .set, [data-scene='quake'] .backdrop { animation: quake .16s linear infinite; }
[data-scene='quake'] .marquee { animation: swing .5s ease-in-out infinite alternate; }

.wreck { left: 50%; bottom: 0; width: calc(var(--jw) * 1.6); height: calc(var(--jw) * .95); translate: -50% 0; pointer-events: none; }
.piece { position: absolute; display: block; opacity: 0; }
.truss { --x: 0; --y: 0; --r: -14deg; --delay: .1s; left: -2%; bottom: 40%; width: 104%; height: 14%; background: repeating-linear-gradient(45deg, #b8b8c8 0 6%, #555 6% 8%, #b8b8c8 8% 14%); border: 5px solid #2a2440; }
.curtain-heap { --r: 0deg; --delay: .45s; left: -6%; bottom: -4%; width: 112%; height: 52%; border-radius: 40% 46% 6% 6%; background: repeating-linear-gradient(100deg, #8a0060 0 6%, #ff2fc0 9% 15%, #b0007c 20% 27%); border: 5px solid var(--line); clip-path: polygon(0 30%, 18% 8%, 36% 20%, 52% 2%, 72% 18%, 90% 8%, 100% 34%, 100% 100%, 0 100%); }
.chunk { left: var(--left); bottom: var(--bottom); width: var(--w); aspect-ratio: 1.3; background: linear-gradient(145deg, #f2e3ff, #a99ad0 50%, #5d4a8e); border: 4px solid var(--line); clip-path: polygon(0 50%, 18% 12%, 47% 20%, 60% 0, 90% 26%, 100% 74%, 78% 100%, 10% 94%); }
.c1 { --left: 4%; --bottom: 10%; --w: 22%; --r: 12deg; --delay: .65s; }
.c2 { --left: 70%; --bottom: 6%; --w: 26%; --r: -18deg; --delay: .8s; }
.c3 { --left: 30%; --bottom: 26%; --w: 16%; --r: 30deg; --delay: .95s; }
.c4 { --left: 56%; --bottom: 34%; --w: 13%; --r: -8deg; --delay: 1.15s; }
.plank { --r: -11deg; --delay: 1.05s; left: 22%; bottom: 14%; width: 52%; height: 24%; display: grid; place-items: center; background: var(--win-blue); color: var(--yellow); border: 6px ridge #ededed; font: 400 clamp(14px, 4cqw, 34px) var(--display); letter-spacing: .1em; text-shadow: 2px 2px var(--pink); }
.dust { left: 50%; bottom: -10%; width: calc(var(--jw) * 2.2); height: calc(var(--jw) * 1.1); translate: -50% 0; border-radius: 50%; background: radial-gradient(#f5ecffcc, #c9b8ff66 45%, #fff0 70%); opacity: 0; pointer-events: none; }

[data-scene='collapse'] .piece { animation: drop .75s var(--delay, 0s) cubic-bezier(.55, 0, 1, .45) forwards; }
[data-scene='collapse'] .curtain { animation: curtain-fall 1.1s .3s cubic-bezier(.6, 0, 1, .5) forwards; }
[data-scene='collapse'] .marquee { animation: sign-fall 1s .15s cubic-bezier(.55, 0, 1, .45) forwards; }
[data-scene='collapse'] .bunting { animation: bunting-fall .9s cubic-bezier(.55, 0, 1, .45) forwards; }
[data-scene='collapse'] .dust { animation: dust 2.6s 1.1s ease-out forwards; }
[data-scene='collapse'] .set { animation: impact .5s 1.25s linear; }
[data-scene='collapse'] .bulbs { animation: none; opacity: .15; }
/* Once buried, everything rests where it fell, whatever scene comes next. */
.buried .piece { animation: none; opacity: 1; transform: rotate(var(--r, 0deg)); }
.buried .curtain { animation: none; transform: translateY(70%) rotate(var(--fall-r)) scaleY(.5); }
.buried .curtain.left { --fall-r: 14deg; }
.buried .curtain.right { --fall-r: -14deg; }
.buried .marquee { animation: none; transform: translateY(calc(100cqh - 30cqh)) rotate(9deg); }
.buried .bunting { animation: none; opacity: 0; }
.buried .bulbs { animation: none; opacity: .15; }
.buried .dust { opacity: .35; animation: none; }
.buried .big33 { opacity: .25; rotate: 14deg; translate: -50% 12cqh; transition: 1s; }

/* ---------- Foreman & Baustelle ---------- */

.worker { right: -60cqw; bottom: 1cqh; height: min(calc(var(--jw) * 1.2), 78cqh); aspect-ratio: 440 / 700; z-index: 3; }
.worker svg { display: block; width: 100%; height: 100%; overflow: visible; }
.worker-mouth-open { display: none; }
[data-scene='foreman'] .worker, .finished .worker { right: max(2cqw, calc(50% - var(--jw) * 1.15)); transition: right 1.6s linear; }
[data-scene='foreman'] .worker svg { animation: walk-bob .4s ease-in-out 4; }
[data-scene='foreman'] .worker-leg-left { animation: step .4s ease-in-out 4; transform-box: fill-box; transform-origin: 50% 0; }
[data-scene='foreman'] .worker-leg-right { animation: step .4s ease-in-out 4 reverse; transform-box: fill-box; transform-origin: 50% 0; }
.typing[data-scene='foreman'] .worker-mouth-open { display: inline; animation: talk .2s steps(2) infinite; }
.installing .worker-arm-right { animation: hammer .35s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0 0; }
.finished .worker-arm-right { animation: none; }

.tape { left: 50%; bottom: calc(var(--jw) * .32); width: calc(var(--jw) * 1.9); translate: -50% 0; rotate: -5deg; padding: 4px 0; overflow: hidden; white-space: nowrap; background: repeating-linear-gradient(-45deg, var(--yellow) 0 18px, #111 18px 36px); border-block: 3px solid #111; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s ease-in-out; z-index: 2; }
.tape span { display: inline-block; padding: 2px 8px; background: var(--yellow); color: #111; font-size: clamp(9px, 2cqw, 13px); font-weight: 900; letter-spacing: .1em; }
.barrier { bottom: 1cqh; width: calc(var(--jw) * .32); height: calc(var(--jw) * .26); background: repeating-linear-gradient(-45deg, #ff2b2b 0 14px, #fff 14px 28px) top / 100% 38% no-repeat, linear-gradient(90deg, #333 0 10%, transparent 10% 90%, #333 90%); border-top: 3px solid #111; opacity: 0; translate: 0 30%; transition: opacity .4s, translate .5s cubic-bezier(.3, 1.6, .5, 1); z-index: 2; }
.barrier.left { left: calc(50% - var(--jw) * .95); }
.barrier.right { left: calc(50% + var(--jw) * .63); }
.beacon { left: calc(50% - var(--jw) * .52); bottom: calc(var(--jw) * .48); width: calc(var(--jw) * .09); aspect-ratio: 1; border-radius: 50% 50% 10% 10%; background: #ff8a00; border: 3px solid #111; box-shadow: 0 0 0 #ff8a00; opacity: 0; z-index: 2; }
.installing .tape, .finished .tape { clip-path: inset(0 0 0 0); }
.installing .barrier, .finished .barrier { opacity: 1; translate: 0 0; }
.installing .beacon, .finished .beacon { opacity: 1; animation: beacon .8s steps(2) infinite; }
.lamp-on .stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 40% 60%, #fff6c844, transparent 60%); mix-blend-mode: screen; }
.lamp-on .backdrop { filter: brightness(1.35) saturate(1.1); }

/* ---------- Dialogue dock ---------- */

.dialogue { position: absolute; z-index: 10; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: 10px; max-width: 860px; margin: 0 auto; min-height: calc(var(--dock) - 22px); padding: 22px 18px 14px; background: #130774f2; border: 6px ridge #eee; outline: 2px solid var(--yellow); box-shadow: 8px 8px var(--night); cursor: pointer; }
.speaker { position: absolute; top: -17px; left: 14px; padding: 4px 10px; background: var(--yellow); color: #210047; border: 4px outset #fff5ad; font-weight: 900; font-size: 12px; letter-spacing: .1em; }
.dialogue[data-who='foreman'] .speaker { background: #ff8a00; border-color: #ffc27a; }
.dialogue[data-who='hint'] { cursor: default; }
.dialogue[data-who='hint'] .speaker { background: var(--pink); color: #fff; border-color: #ff9be2; }
.line { margin: 0; font-weight: 900; font-size: clamp(16px, 2.6vw, 23px); line-height: 1.35; min-height: 1.35em; }
.subline { margin: 6px 0 0; color: var(--yellow); font-weight: 700; font-size: clamp(14px, 2.1vw, 18px); line-height: 1.4; min-height: 1.4em; }
.next { position: absolute; right: 14px; bottom: 8px; color: var(--yellow); animation: blink-hint .8s steps(2) infinite; }
.typing .next, .dialogue[data-who='hint'] .next, .dialogue:has(.choice) .next { display: none; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.choices:empty { display: none; }
.choice { flex: 1 1 180px; min-height: 50px; padding: 10px 14px; background: var(--yellow); color: #210047; border: 5px outset #fff5ad; box-shadow: 4px 4px #000; font-weight: 900; font-size: 15px; text-transform: uppercase; }
.choice + .choice { background: var(--win); border-color: #fff; }
.choice:active { border-style: inset; box-shadow: 1px 1px #000; transform: translate(2px, 2px); }
.hold { flex: 1 1 100%; min-height: 64px; background: var(--pink); color: #fff; border: 6px outset #ff9be2; box-shadow: 5px 5px #000; font: 400 clamp(20px, 4vw, 28px) var(--display); letter-spacing: .08em; text-transform: uppercase; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; animation: hold-pulse 1s ease-in-out infinite; }
.holding .hold { border-style: inset; box-shadow: 1px 1px #000; transform: translate(3px, 3px); animation: none; background: #d4009c; }

/* ---------- Wish upload ---------- */

.upload { position: absolute; z-index: 12; left: 0; right: 0; bottom: 0; height: var(--dock); display: grid; place-items: center; padding: 16px; pointer-events: none; opacity: 0; transition: opacity .25s; }
[data-scene='upload'] .upload { opacity: 1; }
.upload .win { width: min(100%, 420px); }
#upload-label { margin: 0 0 12px; font-weight: 900; font-size: 18px; color: var(--yellow); text-align: center; }
.bar { height: 26px; border: 4px inset #eee; background: #0a0230; padding: 2px; }
.bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--cyan) 0 14px, transparent 14px 18px); }
.upload-note { margin: 10px 0 0; font-size: 11px; color: #c8c0ff; text-align: center; }

/* ---------- GAME OVER / CONTINUE? ---------- */

.arcade-screen { position: absolute; z-index: 14; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; background: repeating-linear-gradient(0deg, #0000 0 3px, #0004 4px), #05001cf0; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
[data-scene='gameover'] .arcade-screen, [data-scene='continue'] .arcade-screen { opacity: 1; visibility: visible; }
.arcade-screen > * { margin: 0; }
.gameover-title { font: 400 clamp(46px, 13cqw, 120px)/1 var(--display); color: #ff3b5c; text-shadow: 5px 5px var(--line), 0 0 30px #ff3b5c88; letter-spacing: .04em; }
[data-scene='gameover'] .gameover-title { animation: flash-in .5s steps(3); }
[data-scene='continue'] .gameover-title { font-size: clamp(20px, 5cqw, 40px); opacity: .6; }
.continue-title { font: 400 clamp(30px, 8cqw, 70px)/1 var(--display); color: var(--cyan); text-shadow: 4px 4px var(--line); visibility: hidden; }
.countdown { font: 400 clamp(80px, 26cqw, 220px)/1 var(--display); color: var(--yellow); text-shadow: 6px 6px var(--pink), 12px 12px var(--line); min-height: 1em; }
.countdown.pop { animation: pop .35s var(--ease-out); }
.stalled .countdown { font-size: clamp(56px, 16cqw, 150px); }
.resurrexit, .epitaph, .coin, .coin-note { visibility: hidden; }
[data-scene='continue'] .continue-title { visibility: visible; }
.stalled .resurrexit, .stalled .epitaph, .stalled .coin, .coined .coin-note { visibility: visible; }
.resurrexit { font-size: clamp(16px, 3.6cqw, 26px); font-weight: 900; color: #fff; letter-spacing: .14em; }
.epitaph { font-size: clamp(11px, 2.2cqw, 15px); color: #c8c0ff; letter-spacing: .2em; }
.coin { margin-top: 10px; padding: 12px 18px; background: var(--yellow); color: #210047; border: 5px outset #fff5ad; box-shadow: 4px 4px #000; font-weight: 900; font-size: 15px; text-transform: uppercase; animation: blink-hint 1s steps(2) infinite; }
.coin:disabled { animation: none; opacity: .5; }
.coin-note { max-width: 32ch; color: var(--cyan); font-weight: 700; font-size: 14px; line-height: 1.5; }

/* ---------- Work order ---------- */

.work-order { position: absolute; z-index: 13; left: 50%; bottom: 12px; width: min(calc(100% - 20px), 520px); max-height: calc(100% - 24px); translate: -50% 0; overflow: auto; opacity: 0; visibility: hidden; transform: translateY(30px); transition: opacity .6s .5s, transform .8s .5s var(--ease-out), visibility .6s .5s; }
.finished .work-order { opacity: 1; visibility: visible; transform: none; }
.work-order .win { background: #f5f0e0; color: #1d1650; outline-color: var(--pink); }
.work-order .win-body { background: repeating-linear-gradient(0deg, transparent 0 23px, #1d165012 24px); padding: 16px 18px 18px; }
.eyebrow { margin: 0 0 6px; color: #9d007f; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.work-order h1 { margin: 0 0 12px; text-align: center; font: 400 clamp(26px, 5cqw, 40px)/.95 var(--display); text-transform: uppercase; letter-spacing: .02em; color: #160277; text-shadow: 3px 3px #ff69e9; }
.work-order h1 em { color: var(--pink); text-shadow: 3px 3px #160277; }
.rows { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0 0 12px; font-size: 13px; }
.rows dt { font-weight: 900; text-transform: uppercase; color: #6b5c9a; white-space: nowrap; }
.rows dt::after { content: ' ....'; color: #b9b0d6; }
.rows dd { margin: 0; font-weight: 900; }
.rows dd:last-of-type { color: #c4008a; }
.progress { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; background: none; border: 0; text-align: left; }
.progress-bar { flex: 1; height: 24px; border: 4px inset #ddd; background: #1d1650; padding: 2px; }
.progress-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #ffb000 0 12px, transparent 12px 16px); }
.finished .progress-bar i { animation: crawl 3.2s 1.4s steps(11) forwards; }
.progress b { font-size: 16px; }
.progress.twitch .progress-bar i { animation: twitch .45s steps(2) 1; width: 33%; }
.nein { min-height: 1.4em; margin: 6px 0 4px; font-size: 13px; font-weight: 900; color: #c45a00; }
.scores { width: 100%; border-collapse: collapse; margin: 4px 0 12px; font-size: 12px; font-weight: 900; background: #12005a; color: #fff; border: 4px ridge #ddd; }
.scores caption { padding: 4px; background: #12005a; color: var(--yellow); letter-spacing: .2em; border: 4px ridge #ddd; border-bottom: 0; }
.scores td { padding: 4px 7px; }
.scores td:nth-child(3) { color: var(--cyan); font-size: 10px; }
.scores td:last-child { text-align: right; color: var(--yellow); font-variant-numeric: tabular-nums; }
.scores tr:first-child { background: #ff2fc044; }
.greeting { margin: 0 0 4px; font-weight: 900; color: #8a006e; font-size: 15px; text-align: center; }
.german, .motto { margin: 0 0 4px; font-size: 12px; font-weight: 700; text-align: center; }
.motto { letter-spacing: .08em; color: #6b5c9a; }
.plaque { display: none; margin: 6px 0 0; font-size: 12px; font-weight: 900; color: #63005a; text-align: center; }
.lamp-on .plaque { display: block; }
.actions { display: flex; justify-content: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

@container stage (min-width: 860px) and (min-aspect-ratio: 1.15) {
  .work-order { left: auto; right: 3%; top: 50%; bottom: auto; translate: 0 -50%; width: min(46%, 520px); }
  .finished .set { translate: -22% 0; }
}
@container stage (max-width: 859px), stage (max-aspect-ratio: 1.15) {
  .finished .set { translate: 0 -24%; }
  .finished .work-order { max-height: 64%; }
}

/* ---------- Boot screen ---------- */

.boot { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 22px 16px; overflow: auto; background: radial-gradient(#ffed82 1px, transparent 2px) 0 0 / 87px 101px, linear-gradient(140deg, #200061f5, #072a74f0 55%, #470061f5); transition: opacity .35s, visibility .35s; }
.started .boot { opacity: 0; visibility: hidden; pointer-events: none; }
.boot .win { width: min(100%, 600px); text-align: center; }
.badge { margin: 0 0 12px; color: #00f9ed; font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.boot h1 { margin: 0 0 10px; font: 400 clamp(46px, 11vw, 84px)/.92 var(--display); color: #fff12d; text-shadow: 4px 4px #f62ccd, 8px 8px var(--night); letter-spacing: .02em; }
.boot h1 span { color: var(--cyan); text-shadow: 4px 4px var(--line); }
.each { margin: 0 0 16px; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.press { margin: 0 0 18px; font-weight: 900; font-size: 14px; color: var(--yellow); animation: blink-hint 1s steps(2) infinite; }
.start-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.start-actions button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 108px; padding: 14px 10px; background: #ffec32; color: #210047; border: 5px outset #fff5ad; box-shadow: 4px 4px #000; }
.start-actions button + button { background: #c8c8c8; border-color: #fff; }
.start-actions button > span { font-size: 24px; line-height: 1; }
.start-actions strong { font-size: 14px; font-weight: 900; }
.start-actions small { font-size: 10px; font-weight: 700; }
.start-actions button:active { border-style: inset; box-shadow: 1px 1px #000; transform: translate(2px, 2px); }
.start-actions button:disabled { cursor: wait; opacity: .7; }
.note { margin: 16px 0 0; font-size: 11px; color: #c8c0ff; }
.statusbar { display: flex; justify-content: space-between; padding: 6px 10px; background: var(--win); color: #282052; border-top: 3px ridge #eee; font-size: 10px; font-weight: 900; }
.statusbar span { padding: 1px 6px; border: 2px inset #eee; }
@media (max-width: 420px) { .start-actions { grid-template-columns: 1fr; } .start-actions button { min-height: 76px; } }

/* ---------- Ticker & extras ---------- */

.ticker { overflow: hidden; white-space: nowrap; padding: 5px 0 max(5px, env(safe-area-inset-bottom)); background: var(--yellow); color: #2d007a; border-top: 4px ridge #fff; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.ticker span { display: inline-block; padding-left: 100%; animation: ticker 28s linear infinite; }
.debug { position: fixed; left: 8px; top: 60px; z-index: 40; margin: 0; padding: 4px 6px; background: #000c; color: #0f0; font-size: 11px; pointer-events: none; }
.debug:empty { display: none; }
.no-js { min-height: 100vh; display: grid; place-items: center; padding: 2rem; text-align: center; background: #12005a; color: #fff; font-family: var(--mono); }
.no-js h1 { font: 400 clamp(2.4rem, 9vw, 5rem)/1 var(--display); color: var(--yellow); text-shadow: 4px 4px var(--pink); }

/* Animations wait for the start button, and stop when the tab is hidden. */
[data-scene='boot'] .set *, [data-scene='boot'] .backdrop *, .paused * { animation-play-state: paused !important; }

/* ---------- Keyframes ---------- */

@keyframes twinkle { 50% { filter: brightness(1.15); } }
@keyframes sweep { from { rotate: -14deg; } to { rotate: 14deg; } }
@keyframes bulbs { 50% { opacity: .35; } }
@keyframes flutter { 50% { rotate: 9deg; } }
@keyframes bob { 50% { translate: 0 -1.2%; } }
@keyframes halo { to { rotate: 360deg; } }
@keyframes halo-dying { 0%, 20%, 40% { opacity: 1; } 10%, 30% { opacity: .2; } 60%, 100% { opacity: .35; } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes talk { 50% { opacity: 0; } }
@keyframes panic { 25% { translate: -1% 0; } 75% { translate: 1% 0; } }
@keyframes flicker { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(.92, 1.08) rotate(3deg); } }
@keyframes smoke { 0% { opacity: .9; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-30px) scaleX(1.6); } }
@keyframes jiggle { 50% { rotate: 1deg; } }
@keyframes gift-glow { to { filter: drop-shadow(0 0 22px #ffe83a); } }
@keyframes lid-hop { 50% { transform: translateY(-8px) rotate(-4deg); } }
@keyframes flash { 0% { opacity: 0; transform: scale(2.2) rotate(-6deg); } 18% { opacity: 1; transform: scale(1) rotate(-3deg); } 80% { opacity: 1; transform: scale(1.04) rotate(-3deg); } 100% { opacity: 0; transform: scale(.9) rotate(-3deg); } }
@keyframes swing { from { rotate: 2deg; } to { rotate: 14deg; } }
@keyframes quake { 25% { translate: -4px 2px; } 50% { translate: 3px -3px; } 75% { translate: -2px -2px; } }
@keyframes drop { 0% { opacity: 1; transform: translateY(-160cqh) rotate(0deg); } 80% { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); } 90% { transform: translateY(-4%) rotate(var(--r, 0deg)); } 100% { opacity: 1; transform: rotate(var(--r, 0deg)); } }
@keyframes curtain-fall { to { transform: translateY(70%) rotate(var(--fall-r, 10deg)) scaleY(.5); } }
.curtain.left { --fall-r: 14deg; }
.curtain.right { --fall-r: -14deg; }
@keyframes sign-fall { 0% { transform: rotate(14deg); } 100% { transform: translateY(calc(100cqh - 30cqh)) rotate(9deg); } }
@keyframes bunting-fall { to { transform: translateY(60cqh) rotate(20deg); opacity: 0; } }
@keyframes dust { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: .95; } 100% { opacity: .35; transform: scale(1.1); } }
@keyframes impact { 20% { translate: 0 10px; } 40% { translate: 0 -6px; } 60% { translate: 0 3px; } }
@keyframes walk-bob { 50% { translate: 0 -2%; } }
@keyframes step { 50% { rotate: 14deg; } }
@keyframes hammer { to { rotate: -24deg; } }
@keyframes beacon { 50% { background: #ffe14a; box-shadow: 0 0 40px 18px #ff8a0088; } }
@keyframes blink-hint { 50% { opacity: .2; } }
@keyframes hold-pulse { 50% { transform: scale(1.02); } }
@keyframes flash-in { 0% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pop { from { transform: scale(1.5); opacity: .3; } }
@keyframes crawl { 0% { width: 0; } 60% { width: 31%; } 70% { width: 33%; } 100% { width: 33%; } }
@keyframes twitch { 0% { width: 34%; } 100% { width: 33%; } }
@keyframes dust-out { 0% { opacity: .9; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-34px) scale(1.8); } }
@keyframes ticker { to { transform: translateX(-100%); } }

/* ---------- Reduced motion: no shaking or flying, the collapse becomes a fade ---------- */

@media (prefers-reduced-motion: reduce) {
  .sky, .beam, .bulbs, .bunting i, .jesus svg, .jesus .halo, .flicker, .marquee, .ticker span, .hold, .press, .coin, .next, .beacon { animation: none !important; }
  [data-scene='quake'] .set, [data-scene='quake'] .backdrop, [data-scene='collapse'] .set, [data-mood='panic'] .jesus svg { animation: none !important; }
  [data-scene='collapse'] .piece { animation: fade 1s var(--delay, 0s) forwards; transform: rotate(var(--r, 0deg)); }
  [data-scene='collapse'] .curtain, [data-scene='collapse'] .marquee, [data-scene='collapse'] .bunting { animation: fade-out 1s forwards; }
  .buried .marquee, .buried .curtain { opacity: 0; }
  .flash.show { animation: fade-flash 1.9s forwards; }
  .jesus, .gift, .cake, .worker, .set { transition-duration: .01s !important; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fade-out { to { opacity: 0; } }
  @keyframes fade-flash { 0%, 100% { opacity: 0; } 15%, 85% { opacity: 1; } }
}