/* Not My Event: the look of "The Great Thanksgiving Cover-Up" (public/templates/great-thanksgiving-cover-up.html), a '90s Saturday-morning mystery: a VHS tape, a tube-TV guide, sticker headlines
   with hard ink shadows, Memphis squiggles, a Trapper Keeper for the clue notebook, a case board and a laminated detective certificate. Bungee for the headlines, Permanent Marker for the
   handwriting, VT323 for the on-screen display, DM Sans for everything a person has to read.
   Only transform and opacity are animated, nothing blurs, and every animation is switched off by the page's .rm class (reduced motion, or the host's "perfectly still"). */
:root {
  --ink: #1B1240; --a: #FF3EA5; --a2: #D81C86; --b: #19D3C5; --b2: #0E9C93; --c: #FFE14D; --orange: #FF8A1F; --purple: #7B3FF2; --purple2: #4B22A8; --navy: #241A5E;
  --paper: #FFFBEF; --cream: #FFF3D6; --wood: #D9954F; --wood2: #B8743A; --ui: rgba(27, 18, 64, .92); --hair: rgba(27, 18, 64, .18);
  --f-disp: 'Bungee', Impact, 'Arial Black', sans-serif;
  --f-hand: 'Permanent Marker', 'Segoe Print', 'Comic Sans MS', cursive;
  --f-osd: 'VT323', 'Courier New', monospace;
  --f-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
body[data-preset="mall"] { --a: #7B3FF2; --a2: #5B24C8; --b: #FF8A1F; --b2: #D96A00; }
body[data-preset="harvest"] { --a: #FF8A1F; --a2: #D96A00; --b: #19D3C5; --b2: #0E9C93; }

* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow: hidden; background: #1B1240; color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 8px; top: -64px; z-index: 200; padding: 12px 18px; background: var(--c); color: var(--ink); font-weight: 800; text-decoration: none; border-radius: 10px; border: 3px solid var(--ink); }
.skip:focus { top: 8px; }
:focus-visible { outline: 4px solid var(--c); outline-offset: 3px; box-shadow: 0 0 0 7px var(--ink); }
.art { display: block; width: 100%; height: 100%; }

/* ---------- Buttons, chips and the things that float over every scene ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 3px solid var(--ink); border-radius: 999px; background: var(--a); color: #fff; font-family: var(--f-disp); font-size: 15px; letter-spacing: .02em; text-shadow: 2px 2px 0 var(--ink); box-shadow: 0 5px 0 var(--ink); text-decoration: none; text-align: center; line-height: 1.15; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn.ghost { background: var(--paper); color: var(--ink); text-shadow: none; }
.btn.alt { background: var(--b); color: var(--ink); text-shadow: none; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.pulse { animation: btnpulse 1.4s ease-in-out infinite; }
@keyframes btnpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid #fff; background: var(--ui); color: #fff; font-size: 14px; font-weight: 700; }
.linkish { background: none; border: 0; padding: 10px 6px; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.hud { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: max(10px, env(safe-area-inset-top, 0px)) 66px 0 max(10px, env(safe-area-inset-left, 0px)); pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-btn { min-width: 44px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 2px solid #fff; background: var(--ui); color: #fff; font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.dots { display: flex; align-items: center; gap: 0; margin-left: auto; }
.dot { width: 36px; height: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; }
.dot::before { content: ""; width: 12px; height: 12px; border-radius: 3px; transform: rotate(45deg); background: #fff; box-shadow: 0 0 0 2.5px var(--ink); transition: transform .25s, background .25s; }
.dot[aria-current="step"]::before { transform: rotate(45deg) scale(1.4); background: var(--c); }
.dock { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px; padding: 14px max(10px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); background: linear-gradient(rgba(27, 18, 64, 0), rgba(27, 18, 64, .8)); pointer-events: none; }
.dock > * { pointer-events: auto; }
.pill { white-space: nowrap; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); font-weight: 800; font-size: 14.5px; box-shadow: 0 4px 0 var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.pill.pri { background: var(--c); }
.pill .keeper { width: 22px; height: 22px; }
.pill:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
#cap { position: fixed; z-index: 60; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; max-width: 86vw; padding: 6px 12px; background: rgba(0, 0, 0, .86); color: #fff; font-family: var(--f-osd); font-size: 21px; line-height: 1.1; letter-spacing: .02em; opacity: 0; pointer-events: none; transition: opacity .2s; text-align: center; }
#cap.on { opacity: 1; }
#net { position: fixed; z-index: 120; left: 0; right: 0; top: 0; padding: 10px 16px; background: var(--a2); color: #fff; text-align: center; font-weight: 700; font-size: 14px; }
body.cine-on .hud, body.cine-on .dock { visibility: hidden; }
body.busy #stage { pointer-events: none; }

/* ---------- Scenes: each one is a full picture with its own scrolling layer on top ---------- */
#stage { position: fixed; inset: 0; }
.scene { position: absolute; inset: 0; overflow: hidden; display: none; background: var(--navy); color: #fff; }
.scene.on { display: block; }
.scene.z1 { z-index: 1; } .scene.z2 { z-index: 2; }
.bg { position: absolute; inset: 0; }
.shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(27, 18, 64, .45) 100%); }
.scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: calc(64px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) calc(100px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; align-items: center; }
.col { width: 100%; max-width: 560px; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.scene:focus { outline: none; }
.eyebrow { font-family: var(--f-disp); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--b); border: 3px solid var(--ink); padding: 4px 12px 3px; border-radius: 6px; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--ink); text-align: center; }
.h2 { font-family: var(--f-disp); font-weight: 400; font-size: clamp(28px, 8vw, 42px); line-height: 1.02; text-align: center; color: var(--c); text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); text-wrap: balance; }
.lead { font-size: 16px; color: #fff; text-align: center; max-width: 30em; text-shadow: 0 2px 0 var(--ink), 0 0 6px var(--ink); font-weight: 600; }
.hand { font-family: var(--f-hand); }
.card { width: 100%; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; padding: 18px 16px; box-shadow: 6px 6px 0 var(--ink); }
.card h3 { font-family: var(--f-disp); font-weight: 400; font-size: 21px; line-height: 1.1; color: var(--purple2); }
.hint { font-size: 13.5px; color: #4a3f7a; margin-top: 6px; }
.note { font-size: 13.5px; color: #4a3f7a; line-height: 1.4; }
.note b { color: var(--a2); }
.sc-hint { font-family: var(--f-hand); font-size: 22px; color: #fff; text-shadow: 2px 2px 0 var(--ink); text-align: center; }

/* ---------- The opening: a VHS tape in the player, the camera pushing through the lit window into the kitchen ---------- */
#cine { position: fixed; inset: 0; z-index: 80; background: #000; display: none; overflow: hidden; }
#cine.on { display: block; animation: cineout .45s ease 4.4s forwards; }
.cine-house, .cine-room { position: absolute; inset: 0; }
.cine-house { transform-origin: 50% 46%; opacity: 0; animation: housepush 4.2s cubic-bezier(.45, 0, .55, 1) both; }
.cine-room { transform-origin: 50% 46%; opacity: 0; animation: roompush 4.2s ease-in-out both; }
.cine-vhs { position: absolute; inset: 0; pointer-events: none; font-family: var(--f-osd); font-size: 26px; color: #fff; text-shadow: 2px 2px 0 #000; }
.osd { position: absolute; letter-spacing: .05em; }
.osd-play { left: 18px; top: calc(16px + env(safe-area-inset-top, 0px)); animation: osdplay 4.2s steps(1) both; }
.osd-rec { right: 70px; top: calc(16px + env(safe-area-inset-top, 0px)); color: #ff4a4a; animation: osdrec 1s steps(2) infinite; }
.osd-date { left: 18px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); color: var(--c); }
.cine-track { position: absolute; left: 0; right: 0; height: 22px; top: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 3px, rgba(255, 255, 255, .15) 3px 9px, rgba(255, 255, 255, .6) 9px 11px, transparent 11px 20px); opacity: 0; animation: tracking 4.2s linear both; }
.cine-tape { position: absolute; left: 50%; top: 50%; width: min(70vw, 360px); translate: -50% -50%; animation: tapeout 4.2s ease-in both; }
.cine-cap { position: absolute; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); text-align: center; font-family: var(--f-hand); font-size: 26px; color: #fff; text-shadow: 3px 3px 0 var(--ink); animation: capin 4.2s both; padding: 0 20px; }
#cine-skip { position: absolute; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
@keyframes housepush { 0%, 14% { transform: scale(1); opacity: 0; } 20% { opacity: 1; } 50% { transform: scale(1.25); opacity: 1; } 78% { transform: scale(3.6); opacity: 1; } 100% { transform: scale(4.6); opacity: 0; } }
@keyframes roompush { 0%, 62% { transform: scale(1.5); opacity: 0; } 82% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes tapeout { 0% { opacity: 1; transform: scale(1); } 12% { opacity: 1; transform: scale(1.08); } 18%, 100% { opacity: 0; transform: scale(1.4); } }
@keyframes tracking { 0% { opacity: .9; transform: translateY(20vh); } 8% { opacity: .9; transform: translateY(85vh); } 14% { opacity: 0; } 40% { opacity: 0; transform: translateY(30vh); } 44% { opacity: .55; transform: translateY(46vh); } 50%, 100% { opacity: 0; } }
@keyframes osdplay { 0%, 22% { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes osdrec { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cineout { to { opacity: 0; visibility: hidden; } }
@keyframes capin { 0%, 16% { opacity: 0; transform: translateY(8px); } 28%, 62% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; } }
@keyframes fadein { to { opacity: 1; } }

/* ---------- Scene 1: the incident ---------- */
.sc1 { gap: 14px; }
.card-note { position: relative; width: min(94vw, 480px); background: var(--paper) repeating-linear-gradient(transparent 0 29px, rgba(75, 34, 168, .14) 29px 30px); color: var(--ink); border: 3px solid var(--ink); border-top: 22px solid var(--a); border-radius: 6px; padding: 14px 18px 18px; text-align: center; box-shadow: 7px 7px 0 var(--ink); transform: rotate(-1.2deg); }
.card-note.slide { animation: cardslide .9s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes cardslide { from { opacity: 0; transform: translateX(-70vw) rotate(-12deg); } to { opacity: 1; transform: rotate(-1.2deg); } }
.n-kick { font-family: var(--f-osd); font-size: 21px; letter-spacing: .12em; text-transform: uppercase; color: var(--a2); }
.n-title { font-family: var(--f-disp); font-weight: 400; font-size: clamp(30px, 9vw, 46px); line-height: 1; margin: 4px 0 8px; color: var(--ink); text-wrap: balance; }
.n-sub { font-family: var(--f-hand); font-size: clamp(18px, 4.8vw, 22px); line-height: 1.25; color: var(--purple2); text-wrap: balance; }
.dio { position: relative; width: min(100%, 480px); aspect-ratio: var(--ar, 360 / 280); background: var(--cream); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 7px 7px 0 var(--ink); }
.dio-counter { --ar: 360 / 280; } .dio-lab { --ar: 400 / 420; } .dio-fridge { --ar: 360 / 300; }
.dio > .art, .dio > .dio-art { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; }
.dio-art > .art { width: 100%; height: 100%; }
.hot { position: absolute; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; }
.hot::after { content: ""; position: absolute; inset: 3%; border-radius: 12px; border: 3px dashed rgba(255, 225, 77, 0); transition: border-color .2s; }
.hot:hover::after, .hot:focus-visible::after { border-color: var(--c); }
.hot.new::before { content: "?"; position: absolute; right: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--c); border: 2.5px solid var(--ink); color: var(--ink); font-family: var(--f-disp); font-size: 14px; line-height: 19px; text-align: center; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.mw-clock { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.dome { transform-box: view-box; transform-origin: 168px 190px; transition: transform .7s cubic-bezier(.3, 1.2, .4, 1); }
.lifted .dome { transform: translate(34px, -46px) rotate(16deg); }
@keyframes wiggle { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(3px, -5px) rotate(5deg); } }
.server { transform-box: view-box; }
.lifted .server { animation: bob 1.4s ease-in-out infinite; }
.kettle { transform-box: view-box; transform-origin: 330px 206px; }
.kettle.puff { animation: shake .5s ease-in-out 2; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px) rotate(-3deg); } 60% { transform: translateX(4px) rotate(3deg); } }
.cc { min-height: 34px; width: 100%; text-align: center; font-family: var(--f-osd); font-size: 24px; line-height: 1.1; color: #fff; text-shadow: 0 0 0 #000; }
.cc span { display: inline-block; background: rgba(0, 0, 0, .86); padding: 3px 10px; animation: fadein .3s both; opacity: 0; letter-spacing: .02em; }
.evidence { width: 100%; background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); color: var(--ink); padding: 12px 14px; display: grid; grid-template-columns: 54px 1fr; gap: 4px 12px; align-items: center; animation: pop .3s cubic-bezier(.2, 1.4, .4, 1) both; }
.evidence .clue-ic, .evidence .a-peek { width: 54px; height: 54px; }
.evidence .a-peek { border: 3px solid var(--ink); border-radius: 50%; }
.evidence > span:first-child { grid-row: 1 / span 2; }
.ev-t { font-family: var(--f-disp); font-size: 16px; color: var(--purple2); line-height: 1.1; }
.ev-x { font-size: 15px; line-height: 1.35; grid-column: 2; }
.ev-a { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.ev-a .btn { min-height: 46px; font-size: 13px; padding: 0 16px; }
.ev-ok { font-weight: 800; color: var(--b2); font-size: 14px; }
.ev-al, .ev-cr { grid-column: 1 / -1; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.ev-al { color: var(--b2); }
.ev-cr { color: var(--a2); }
@keyframes pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.guide { width: min(92vw, 420px); background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); border-radius: 4px; overflow: hidden; }
.g-head { background: var(--b); border-bottom: 3px solid var(--ink); padding: 3px 10px; font-family: var(--f-disp); font-size: 12px; letter-spacing: .06em; display: flex; justify-content: space-between; }
.guide dl { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; padding: 8px 12px 10px; }
.guide dt { font-family: var(--f-osd); font-size: 20px; color: var(--a2); text-transform: uppercase; }
.guide dd { font-weight: 800; font-size: 16px; line-height: 1.25; margin-bottom: 4px; }
.guide .ph { font-style: italic; opacity: .6; font-weight: 600; }
.resume { width: 100%; max-width: 420px; }

/* ---------- Scene 2: the suspect list (six frames: who was standing where) ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 440px; }
.frame { position: relative; padding: 0; border: 0; background: none; aspect-ratio: 120 / 150; transform: rotate(var(--r, 0deg)); transition: transform .2s; }
.frame:nth-child(1) { --r: -2.5deg; } .frame:nth-child(2) { --r: 1.5deg; } .frame:nth-child(3) { --r: -1deg; } .frame:nth-child(4) { --r: 2deg; } .frame:nth-child(5) { --r: -1.5deg; } .frame:nth-child(6) { --r: 1deg; }
.frame .art { filter: none; }
.frame:hover, .frame:focus-visible { transform: rotate(0) scale(1.05); }
.frame[aria-pressed="true"] { transform: rotate(0) scale(1.08); z-index: 2; }
.frame[aria-pressed="true"]::after { content: ""; position: absolute; inset: -4px; border-radius: 12px; border: 4px solid var(--c); pointer-events: none; }
.frame.seen::before { content: "✓"; position: absolute; right: 2px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--b); border: 2.5px solid var(--ink); color: var(--ink); font-weight: 900; font-size: 13px; line-height: 17px; z-index: 3; }
.oldp { grid-column: 2; justify-self: center; width: 78%; padding: 0; border: 0; background: none; transform: rotate(-9deg); transition: transform .6s cubic-bezier(.3, 1.4, .4, 1); }
.oldp.straight { transform: none; }
.panel .p-top { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; }
.panel .a-portrait { width: 92px; height: 115px; }
.p-name { font-family: var(--f-disp); font-size: 19px; line-height: 1.05; color: var(--purple2); }
.p-line { font-weight: 700; font-size: 15px; margin-top: 4px; }
.p-quote { font-family: var(--f-hand); font-size: 20px; line-height: 1.25; margin-top: 10px; color: var(--a2); }
.p-where { font-size: 15px; font-weight: 700; line-height: 1.3; margin-top: 10px; }
.p-where b { font-family: var(--f-osd); font-weight: 400; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; color: var(--a2); margin-right: 4px; }
.p-clear { display: inline-block; margin-top: 10px; padding: 3px 12px; border: 3px solid var(--b2); border-radius: 6px; color: var(--b2); font-family: var(--f-disp); font-size: 14px; transform: rotate(-3deg); }
.p-next { font-size: 14px; font-weight: 600; color: #4a3f7a; margin-top: 8px; }
.sprog { font-family: var(--f-osd); font-size: 24px; text-align: center; color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.panel.go .arm { animation: sneak .9s ease-in-out infinite alternate; transform-box: fill-box; }
.panel.go .pcard { animation: waggle .8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.panel.go .bub { animation: rise 1.6s ease-in infinite; transform-box: fill-box; }
.panel.go .stack { animation: wobble .7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.panel.go .pat { animation: patpat .5s ease-in-out infinite alternate; transform-box: fill-box; }
.panel.go .gloves { animation: wave .6s ease-in-out infinite alternate; transform-box: fill-box; }
.panel.go .foilp { animation: waggle .8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.panel.go .flourp { animation: rise 1.8s ease-in infinite; transform-box: fill-box; }
@keyframes sneak { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-14px, -12px) rotate(-12deg); } }
@keyframes waggle { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } }
@keyframes rise { 0% { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-16px); opacity: 0; } }
@keyframes wobble { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes patpat { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes wave { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.opts { display: grid; gap: 8px; margin: 12px 0 8px; }
.opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-radius: 12px; border: 3px solid var(--ink); background: #fff; text-align: left; font-weight: 700; font-size: 16px; color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.opt[aria-checked="true"] { background: var(--c); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.opt .mk { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; }
.opt[aria-checked="true"] .mk { background: var(--ink); }
.opt.crossed .opt-t { text-decoration: line-through; text-decoration-thickness: 2.5px; text-decoration-color: var(--a2); opacity: .75; }

/* ---------- Scene 3: the kitchen investigation (six places to search; each one opens right on the picture) ---------- */
.dio-lab .art { overflow: hidden; }
.dio-lab { width: min(100%, 480px, calc(46vh * 400 / 420)); width: min(100%, 480px, calc(46dvh * 400 / 420)); }
.fr-door { transform-box: view-box; transform-origin: 8px 250px; transition: transform .6s cubic-bezier(.3, 1.1, .4, 1); }
.fridge-open .fr-door { transform: scaleX(.14); }
.fr-stack { transition: transform .7s cubic-bezier(.3, 1.1, .4, 1); }
.fridge-moved .fr-stack { transform: translateX(46px); }
.glint { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.fridge-open .glint { opacity: 1; animation: twinkle 1.1s ease-in-out infinite alternate; }
.fridge-moved .glint { opacity: 0; animation: none; }
@keyframes twinkle { from { transform: scale(.6) rotate(0); } to { transform: scale(1.25) rotate(25deg); } }
.hatch-blind { transform-box: view-box; transform-origin: 190px 42px; transition: transform .7s cubic-bezier(.3, 1, .4, 1); }
.table-open .hatch-blind { transform: scaleY(.1); }
.mw-door { transform-box: view-box; transform-origin: 138px 209px; transition: transform .5s cubic-bezier(.3, 1.1, .4, 1); }
.mw-open .mw-door { transform: scaleX(.12); }
.ov-door { transform-box: view-box; transform-origin: 292px 336px; transition: transform .6s cubic-bezier(.3, 1.1, .4, 1); }
.oven-open .ov-door { transform: scaleY(.12); }
.pn-door { transform-box: view-box; transform-origin: 394px 164px; transition: transform .6s cubic-bezier(.3, 1.1, .4, 1); }
.pantry-open .pn-door { transform: scaleX(.12); }
.tr-bag { opacity: 0; transition: opacity .2s .15s; }
.trash-open .tr-bag { opacity: 1; }
.tr-lid { transform-box: view-box; transform-origin: 342px 280px; transition: transform .5s cubic-bezier(.3, 1.3, .4, 1); }
.trash-open .tr-lid { transform: rotate(-78deg); }
.lids { transform-box: view-box; transform-origin: 237px 242px; }
.lids.rattle { animation: shake .5s ease-in-out 2; }
.tag { position: absolute; z-index: 2; width: 11%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 3px solid var(--ink); background: #fff; overflow: hidden; box-shadow: 2px 2px 0 var(--ink); pointer-events: none; animation: pop .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.tag svg { display: block; width: 100%; height: 100%; }
.kprog { font-family: var(--f-osd); font-size: 24px; text-align: center; color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.stars { display: flex; justify-content: center; gap: 5px; margin-top: 4px; }
.stars i { width: 18px; height: 18px; background: rgba(255, 255, 255, .35); clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }
.stars i.on { background: var(--c); }

/* ---------- The case board: five things that could have happened, crossed off as the clues come in ---------- */
.board h3 { font-family: var(--f-disp); font-weight: 400; font-size: 21px; line-height: 1.1; color: var(--purple2); }
.bd { list-style: none; display: grid; gap: 6px; margin-top: 10px; }
.bd li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; font-weight: 700; font-size: 15px; line-height: 1.25; }
.bd-n { width: 24px; height: 24px; border-radius: 50%; background: var(--c); border: 2.5px solid var(--ink); display: grid; place-items: center; font-family: var(--f-disp); font-size: 12px; }
.bd li.x { background: #EDE9F8; color: #6a6296; }
.bd li.x .bd-t { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--a2); }
.bd li.last { background: #FFF6B8; }
.bd-s { font-family: var(--f-osd); font-weight: 400; font-size: 17px; letter-spacing: .05em; color: var(--a2); transform: rotate(-4deg); white-space: nowrap; }
.hide { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-weight: 700; font-size: 14px; }
.hide > span { padding: 2px 10px; border: 2.5px solid var(--ink); border-radius: 99px; background: #fff; font-size: 13.5px; font-weight: 800; }
.hide .empty { background: #EDE9F8; color: #6a6296; text-decoration: line-through; }
.hide .lead { background: var(--c); }
.hide .found { background: var(--b); }

/* ---------- Scene 4: make your call (what happened, and who) ---------- */
.faces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.face { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 6px 4px 8px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.face .art { width: 64px; height: 80px; }
.face > span { font-size: 12.5px; font-weight: 800; line-height: 1.15; text-align: center; }
.face[aria-checked="true"] { background: var(--c); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.face.clear::before { content: "✓"; position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--b); border: 2.5px solid var(--ink); color: var(--ink); font-weight: 900; font-size: 12px; line-height: 15px; z-index: 2; }
.verdict { text-align: center; animation: pop .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.verdict.right { background: #E6FBF8; }
.verdict.miss { background: #FFF1F8; }
.v-t { font-family: var(--f-disp); font-size: 21px; line-height: 1.1; color: var(--purple2); }
.v-x { margin-top: 8px; font-weight: 600; }
.v-h { margin-top: 8px; font-family: var(--f-hand); font-size: 19px; line-height: 1.25; color: var(--a2); }
.call-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.call-actions .btn { flex: 1 1 180px; }

/* ---------- The rotating platter (at the end now: the pie has been found, who is bringing the rest?) ---------- */
#platter-card { position: relative; }
.platter { display: grid; justify-items: center; gap: 10px; }
.susan-wrap { position: relative; width: min(60vw, 230px); }
.susan-wrap .wheel { transform-box: view-box; transform-origin: 110px 110px; transform: rotate(var(--sr, 0deg)); transition: transform .8s cubic-bezier(.3, 1.1, .4, 1); }
.dishes { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dish { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 4px; min-height: 196px; padding: 10px 10px 12px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); text-align: left; box-shadow: 4px 4px 0 var(--ink); }
.dish.wide { grid-column: 1 / -1; min-height: 0; grid-template-columns: 96px 1fr; grid-template-rows: auto; align-items: center; }
.dish.spot { background: #FFF6B8; transform: rotate(-1deg); }
.dish .art { width: 100%; height: 86px; }
.dish.wide .art { width: 96px; height: 76px; }
.dish .d-n { font-family: var(--f-disp); font-size: 16px; line-height: 1.05; color: var(--purple2); }
.dish .d-q { font-size: 13.5px; line-height: 1.3; color: #4a3f7a; }
.dish .d-s { align-self: end; justify-self: start; padding: 3px 10px; border-radius: 99px; background: #D9F8F4; border: 2px solid var(--ink); color: var(--ink); font-size: 12.5px; font-weight: 800; }
.dish .d-s.full { background: #FFD6E8; }
.dish .d-s.mine { background: var(--a); color: #fff; }
.dish.taken { opacity: .9; }
.pot-note { width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--ui); color: #fff; font-size: 14.5px; line-height: 1.4; text-align: center; }
.cran-btn { position: absolute; right: -4px; top: -26px; width: 52px; height: 52px; padding: 0; border: 0; background: none; transform: rotate(12deg); }
.note-fly { position: fixed; left: 50%; bottom: 22%; width: 74px; z-index: 75; pointer-events: none; opacity: 0; margin-left: -37px; }
.note-fly.go { animation: noteflap 1.5s ease-in-out both; }
@keyframes noteflap { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.7); } 25% { opacity: 1; transform: translate(70px, -130px) rotate(26deg) scale(1.1); } 50% { opacity: 1; transform: translate(-60px, -250px) rotate(-22deg) scale(1.2); } 75% { opacity: 1; transform: translate(40px, -360px) rotate(18deg) scale(1); } 100% { opacity: 0; transform: translate(0, -470px) rotate(0) scale(.6); } }

/* ---------- Scene 5: the case is closed ---------- */
#bg-finale { opacity: 1; }
.dimmer { position: absolute; inset: 0; background: rgba(27, 18, 64, .78); pointer-events: none; transition: opacity 1.4s ease; }
#s-finale.f-bloomed .dimmer { opacity: 0; }
.bloom { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(60% 50% at 50% 46%, rgba(255, 250, 205, .98), rgba(255, 214, 120, .9) 45%, rgba(255, 170, 60, 0) 75%); }
#s-finale.f-bloom .bloom { animation: bloomp 2.2s ease-in-out both; }
@keyframes bloomp { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.8); } }
.reveal { width: 100%; display: grid; justify-items: center; gap: 12px; transition: opacity 1s, transform 1s; }
#s-finale.f-bloomed .reveal .dio-fridge { opacity: 0; max-height: 0; overflow: hidden; border-width: 0; margin: -12px 0; box-shadow: none; aspect-ratio: auto; pointer-events: none; }
.fd-door { transform-box: view-box; transform-origin: 58px 150px; transition: transform 1.1s cubic-bezier(.5, 0, .3, 1); }
.f-open .fd-door { transform: scaleX(.1); }
.pie-glow { opacity: 0; transition: opacity 1s .4s; }
.f-open .pie-glow { opacity: 1; }
.pie-hot { left: 34%; top: 36%; width: 32%; height: 22%; }
.notecard { width: min(92vw, 440px); background: #FFF176; color: var(--ink); border: 3px solid var(--ink); padding: 18px 18px 14px; box-shadow: 6px 6px 0 var(--ink); transform: rotate(1.4deg); opacity: 0; transition: opacity .5s, transform .5s; }
#s-finale.f-note .notecard, #s-finale.f-bloomed .notecard { opacity: 1; }
.nc-text { font-family: var(--f-hand); font-size: clamp(22px, 6vw, 28px); line-height: 1.2; }
.nc-sign { font-family: var(--f-hand); font-size: 22px; text-align: right; margin-top: 8px; color: var(--a2); }
.dry { font-family: var(--f-disp); font-size: clamp(17px, 4.8vw, 22px); line-height: 1.15; text-align: center; color: #fff; text-shadow: 2px 2px 0 var(--ink); max-width: 22em; opacity: 0; transition: opacity .6s; text-wrap: balance; }
#s-finale.f-dry .dry, #s-finale.f-bloomed .dry { opacity: 1; }
.foil-line { font-family: var(--f-disp); font-size: clamp(18px, 5vw, 24px); line-height: 1.15; text-align: center; color: var(--c); text-shadow: 2px 2px 0 var(--ink); max-width: 22em; opacity: 0; transition: opacity .6s; text-wrap: balance; }
#s-finale.f-foil .foil-line, #s-finale.f-bloomed .foil-line { opacity: 1; }
.recap { font-family: var(--f-hand); font-size: 20px; line-height: 1.25; text-align: center; color: #fff; text-shadow: 2px 2px 0 var(--ink); max-width: 24em; text-wrap: balance; }
.cert { position: relative; width: 100%; background: var(--paper); color: var(--ink); padding: 26px 18px 24px; text-align: center; border: 4px solid var(--ink); border-radius: 12px; box-shadow: 7px 7px 0 var(--ink); background-image: linear-gradient(135deg, rgba(25, 211, 197, .18) 0 16%, transparent 16% 84%, rgba(255, 62, 165, .18) 84%); }
.cert::before { content: ""; position: absolute; inset: 9px; border: 3px dashed var(--a); border-radius: 6px; pointer-events: none; }
.cert .c-kick { font-family: var(--f-osd); font-size: 21px; letter-spacing: .14em; color: var(--a2); }
.cert .c-title { font-family: var(--f-disp); font-size: clamp(20px, 5.6vw, 28px); line-height: 1.05; color: var(--ink); text-wrap: balance; margin-top: 2px; }
.cert .c-body { font-size: clamp(16px, 4.4vw, 19px); line-height: 1.4; font-weight: 600; margin-top: 12px; text-wrap: balance; }
.cert .c-name { font-family: var(--f-hand); font-size: 1.55em; color: var(--purple2); padding: 0 .1em; border-bottom: 3px solid var(--a); overflow-wrap: anywhere; }
.c-theory { margin-top: 10px; font-family: var(--f-hand); font-size: 20px; color: var(--a2); }
.c-badge { display: inline-grid; gap: 2px; margin-top: 12px; padding: 10px 16px; background: var(--c); border: 3px solid var(--ink); border-radius: 12px; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--ink); max-width: 100%; }
.c-badge b { font-family: var(--f-disp); font-weight: 400; font-size: 17px; letter-spacing: .02em; }
.c-badge span { font-size: 13px; font-weight: 600; }
.c-status { display: inline-block; margin-top: 14px; padding: 7px 14px; border-radius: 4px; background: var(--ink); color: #fff; font-family: var(--f-osd); font-size: 22px; letter-spacing: .08em; }
.c-status.ok { background: #0E9C93; }
.c-stamp { position: absolute; right: -8px; bottom: 54px; width: 150px; opacity: 0; transform: rotate(-14deg) scale(2.2); pointer-events: none; }
#s-finale.stamped .c-stamp { opacity: .92; transform: rotate(-14deg) scale(1); transition: transform .3s cubic-bezier(.2, 1.5, .4, 1), opacity .1s; }
.c-holo { position: absolute; left: 12px; bottom: 12px; width: 54px; height: 54px; animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tagline { font-family: var(--f-disp); font-size: clamp(16px, 4.6vw, 21px); line-height: 1.2; text-align: center; color: #fff; text-shadow: 2px 2px 0 var(--ink); text-wrap: balance; }
.det { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 10px; }
.det > div { grid-column: span 1; padding: 11px 2px; border-top: 2px dashed var(--hair); min-width: 0; }
.det > div.wide { grid-column: 1 / -1; }
.det > div:first-child { border-top: 0; }
.det dt { font-family: var(--f-osd); font-size: 19px; letter-spacing: .1em; text-transform: uppercase; color: var(--a2); margin-bottom: 1px; }
.det dd { font-weight: 800; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.det .small dd { font-weight: 600; font-size: 15.5px; }
.det .x, .det .dir { display: block; font-weight: 500; font-size: 14.5px; color: #4a3f7a; }
.det .ph { font-style: italic; opacity: .7; }
.det a { color: var(--a2); font-weight: 800; text-underline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.actions .btn { flex: 1 1 150px; min-height: 48px; font-size: 13px; padding: 0 14px; }
.card .btn.ghost { background: #fff; }

/* ---------- Forms, sheets, the notebook ---------- */
.field { display: grid; gap: 5px; margin-top: 12px; }
.field label, .flabel, legend { font-weight: 800; font-size: 14px; color: var(--ink); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 10px; border: 3px solid var(--ink); background: #fff; color: var(--ink); font-size: 16px; }
.field textarea { min-height: 72px; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.choices { display: grid; gap: 8px; margin-top: 6px; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-radius: 12px; border: 3px solid var(--ink); background: #fff; font-weight: 700; cursor: pointer; }
.choice input { width: 22px; height: 22px; accent-color: var(--a); }
.choice:has(input:checked) { background: var(--c); }
.check { display: flex; align-items: center; gap: 10px; margin-top: 12px; min-height: 44px; font-weight: 700; font-size: 15px; }
.check input { width: 22px; height: 22px; accent-color: var(--a); }
.stepper { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; }
.stepper button { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; color: var(--ink); font-size: 24px; font-weight: 800; }
.stepper output { min-width: 28px; text-align: center; font-size: 22px; font-weight: 800; }
.err { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #FFD6E8; border: 2px solid var(--a2); color: #7a0a40; font-weight: 700; font-size: 14.5px; }
.ok-box { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #D9F8F4; border: 2px solid var(--b2); color: #05433e; font-weight: 700; }
.sheet-wrap { position: fixed; inset: 0; z-index: 110; display: grid; align-items: end; justify-items: center; background: rgba(27, 18, 64, .7); }
.sheetp { position: relative; width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; background: var(--paper); color: var(--ink); border: 4px solid var(--ink); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 22px 18px calc(24px + env(safe-area-inset-bottom, 0px)); animation: sheetup .3s cubic-bezier(.2, .9, .3, 1) both; overscroll-behavior: contain; }
@keyframes sheetup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheetp > .x { position: absolute; right: 8px; top: 8px; width: 48px; height: 48px; border: 0; background: none; font-size: 30px; color: var(--ink); }
.sheetp h2 { font-family: var(--f-disp); font-weight: 400; font-size: 26px; line-height: 1.05; color: var(--purple2); padding-right: 44px; }
.sheetp .lead { color: var(--ink); text-shadow: none; text-align: left; margin-top: 6px; font-weight: 500; }
.s-art { width: 150px; height: 120px; margin: 4px auto 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tags span { padding: 3px 10px; border-radius: 99px; background: #D9F8F4; border: 2px solid var(--ink); font-size: 12.5px; font-weight: 800; }
.keeper-sheet { background: var(--purple); color: #fff; }
.keeper-sheet h2 { color: var(--c); text-shadow: 2px 2px 0 var(--ink); }
.keeper-sheet .hint { color: #E6DBFF; }
.keeper-sheet > .x { color: #fff; }
.clues { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
.clues li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 8px 12px; box-shadow: 3px 3px 0 var(--ink); }
.clues li.none { background: rgba(255, 255, 255, .22); color: #fff; border-style: dashed; box-shadow: none; }
.clues .clue-ic { width: 48px; height: 48px; }
.clues b { font-family: var(--f-disp); font-weight: 400; font-size: 15px; color: var(--purple2); display: block; line-height: 1.1; }
.clues li.none b { color: #fff; }
.keeper-sheet .board { margin-top: 14px; padding: 14px 12px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); }
.keeper-sheet .board .hint { color: #4a3f7a; }
.clues span { font-size: 14px; line-height: 1.35; }

/* ---------- Hand-overs between scenes: flour drifts, the swinging kitchen door, a cranberry rolls, the note flutters into the pantry light ---------- */
.scene.out-pan { animation: pan-out .7s ease-in forwards; }
.scene.in-pan { animation: pan-in .8s ease-out .3s both; }
.scene.out-steam { animation: fade-out .6s ease-in .4s forwards; }
.scene.in-steam { animation: fade-in .9s ease-out .6s both; }
.scene.out-fade { animation: fade-out .25s ease forwards; }
.scene.in-fade { animation: fade-in .3s ease both; }
@keyframes pan-out { to { transform: translateX(-32%); opacity: 0; } }
@keyframes pan-in { from { transform: translateX(32%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
#veil { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
#veil > * { position: absolute; }
.v-flour .fl { top: 0; bottom: 0; width: 70vw; background: radial-gradient(50% 40% at 50% 50%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%); opacity: 0; animation: flourdrift 1.3s ease-in-out both; }
.v-flour .fl.b { top: 22%; animation-delay: .12s; } .v-flour .fl.c { top: -20%; animation-delay: .24s; }
@keyframes flourdrift { 0% { transform: translateX(80vw) scale(.7); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateX(-70vw) scale(1.4); opacity: 0; } }
.v-door .dl, .v-door .dr { top: 0; bottom: 0; width: 50%; }
.v-door .dl { left: 0; transform-origin: 0 50%; animation: doorsl 1.05s ease-in-out both; }
.v-door .dr { right: 0; transform-origin: 100% 50%; animation: doorsr 1.05s ease-in-out both; }
.v-door .art { width: 100%; height: 100%; }
@keyframes doorsl { 0% { transform: scaleX(.05); } 28%, 52% { transform: scaleX(1); } 100% { transform: scaleX(.05); } }
@keyframes doorsr { 0% { transform: scaleX(.05); } 28%, 52% { transform: scaleX(1); } 100% { transform: scaleX(.05); } }
.v-cran { left: 0; bottom: 30%; width: 64px; animation: rollby 1.2s ease-in-out both; }
.v-cran .cran { width: 100%; height: auto; }
@keyframes rollby { from { transform: translateX(-20vw) rotate(0); } to { transform: translateX(118vw) rotate(900deg); } }
.v-bloom .s-a { inset: -10%; background: radial-gradient(60% 50% at 50% 60%, rgba(255, 252, 230, .98), rgba(255, 252, 230, 0) 72%); animation: steama 1.7s ease-in-out both; }
.v-bloom .s-b { inset: -10%; background: radial-gradient(70% 60% at 50% 55%, rgba(255, 214, 120, .95), rgba(255, 170, 60, 0) 74%); animation: steamb 1.7s ease-in-out both; }
.v-bloom.cool .s-a { background: radial-gradient(60% 50% at 50% 60%, rgba(232, 251, 255, .98), rgba(232, 251, 255, 0) 72%); }
.v-bloom.cool .s-b { background: radial-gradient(70% 60% at 50% 55%, rgba(170, 225, 255, .95), rgba(120, 200, 255, 0) 74%); }
@keyframes steama { 0% { opacity: 0; transform: scale(.8); } 38% { opacity: 1; transform: scale(1.25); } 62% { opacity: .85; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes steamb { 0%, 40% { opacity: 0; transform: scale(.9); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }

/* ---------- Falling leaves, small screens, and a perfectly still version ---------- */
#drift { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
#drift .lf { position: absolute; top: -30px; left: var(--x); width: var(--s); height: var(--s); animation: fall var(--t) linear var(--d) infinite; opacity: .85; }
@keyframes fall { from { transform: translate3d(0, -40px, 0) rotate(0); } to { transform: translate3d(var(--w), 110vh, 0) rotate(var(--r)); } }
@media (max-width: 380px) { .dishes { gap: 8px; } .gallery { gap: 6px; } .pill { padding: 0 12px; font-size: 13.5px; } }
@media (min-width: 900px) { body { font-size: 18px; } .col { max-width: 600px; } .dio { width: min(100%, 540px); } .dio-lab { width: min(100%, 540px, calc(46vh * 400 / 420)); width: min(100%, 540px, calc(46dvh * 400 / 420)); } }
@media (orientation: landscape) and (max-height: 520px) { .scroll { padding-top: 56px; } }
html.rm *, html.rm *::before, html.rm *::after { animation: none !important; transition: none !important; }
html.rm #cine, html.rm #veil, html.rm #drift { display: none !important; }
html.rm .cc span, html.rm .dry, html.rm .foil-line { opacity: 1; }
html.rm .notecard { opacity: 1; }
html.rm .c-stamp { opacity: .92; transform: rotate(-14deg); }
html.rm .cert .c-holo { animation: none; }
html.lite #drift, html.lite .steam { display: none; }
@media (prefers-reduced-motion: reduce) { #cine, #veil, #drift { display: none !important; } }
@media print { .hud, .dock, #drift, #cine, #veil, .skip { display: none !important; } body { overflow: visible; background: #fff; } }