/* The TV: 1920x1080 first, scales with vw. */
html, body { height: 100%; }
body { overflow: hidden; background: #0b0611; font-size: 1.1vw; }
.tv { position: fixed; inset: 0; overflow: hidden; }
/* scene layers */
.scene { position: absolute; inset: 0; }
.scene svg, .scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene .grain { position: absolute; inset: 0; background: var(--grain); opacity: .28; mix-blend-mode: overlay; pointer-events: none; }
.scene .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 55% 50%, transparent 40%, rgba(5,2,8,.75) 100%); pointer-events: none; }
.scene .wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,6,17,.72) 0%, rgba(11,6,17,.45) 38%, rgba(11,6,17,0) 62%); pointer-events: none; transition: opacity 1s; }
.scene.plain .wash { opacity: .2; }
#fog-back, #fog-front { animation: fog 60s ease-in-out infinite alternate; }
#fog-front { animation-duration: 45s; animation-direction: alternate-reverse; }
@keyframes fog { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
#bats { animation: bats 38s linear infinite; }
@keyframes bats { from { transform: translateX(-8%); } to { transform: translateX(14%); } }
#sparkles { animation: twinkle 2.6s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
#moon { animation: moonglow 6s ease-in-out infinite alternate; transform-origin: center; }
@keyframes moonglow { from { filter: brightness(1); } to { filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { #fog-back, #fog-front, #bats, #sparkles, #moon { animation: none; } }
/* stage layer */
.stage { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 3.2vw 3.6vw 2.4vw; }
.scenebox { position: relative; }
.view { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; pointer-events: none; display: grid; align-content: start; gap: 1.4vw; }
.view.on { opacity: 1; pointer-events: auto; }
.brand { display: grid; gap: .3vw; }
.brand .eyebrow { font-size: .95vw; letter-spacing: .32em; color: var(--paper-dim); }
.brand h1 { font-size: 4.4vw; line-height: 1; max-width: 52vw; }
.brand .tag { font-style: italic; color: var(--paper-dim); font-size: 1.35vw; max-width: 40vw; }
.brand.small h1 { font-size: 2.6vw; }
.brand.small .tag { display: none; }
.foot { display: flex; justify-content: space-between; align-items: flex-end; color: var(--haze); font-size: .95vw; letter-spacing: .22em; text-transform: uppercase; }
.foot .st { display: flex; align-items: center; gap: .6vw; }
.foot .st .dot { width: .6vw; height: .6vw; border-radius: 50%; background: var(--haze); }
.foot .st.live .dot { background: var(--moss); box-shadow: 0 0 .8vw var(--moss); }
/* in-view pieces */
.welcome { font-family: var(--heading); font-size: 2.1vw; color: var(--paper); max-width: 44vw; line-height: 1.25; text-shadow: 0 .2vw 1vw rgba(0,0,0,.8); }
.suspects { display: flex; gap: 1.6vw; align-items: flex-end; margin-top: auto; flex-wrap: wrap; max-width: 60vw; }
.suspect { display: grid; justify-items: center; gap: .5vw; width: 7vw; text-align: center; }
.suspect .em { width: 5vw; height: 5vw; border-radius: 50%; background: rgba(34,20,47,.85); box-shadow: 0 0 0 .15vw var(--pumpkin-deep) inset, 0 .5vw 1.5vw rgba(0,0,0,.6); display: grid; place-items: center; transition: transform .4s, box-shadow .4s; }
.suspect .em img { max-width: 3.2vw; max-height: 3.4vw; }
.suspect b { font-family: var(--heading); font-weight: 400; font-size: 1vw; color: var(--paper); line-height: 1.1; }
.suspect.lit .em { box-shadow: 0 0 0 .18vw var(--pumpkin) inset, 0 0 2vw var(--pumpkin-glow); transform: translateY(-.4vw); }
.suspect.dim { opacity: .4; }
.receipt { background: var(--receipt); color: #1f1a16; font-family: var(--type); font-size: 1.45vw; line-height: 1.5; padding: 1.6vw 2vw 2.2vw; border-radius: .2vw; position: relative; width: 46vw; box-shadow: 0 2vw 4vw -1.5vw rgba(0,0,0,.9); transform: rotate(-.6deg); }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.5vw; height: .6vw; background: radial-gradient(circle at .5vw 0, var(--receipt) .42vw, transparent .48vw) 0 0/1vw .6vw repeat-x; }
.receipt .hd { display: flex; align-items: center; gap: .8vw; border-bottom: 1px dashed var(--paper-rule); padding-bottom: .6vw; margin-bottom: .8vw; font-size: 1vw; letter-spacing: .16em; text-transform: uppercase; }
.receipt .hd img { width: 2vw; }
.receipt ol { padding-left: 1.8vw; gap: .55vw; }
.receipt li { opacity: 0; transform: translateY(.5vw); animation: lineIn .7s ease forwards; }
@keyframes lineIn { to { opacity: 1; transform: none; } }
.banner { display: grid; gap: .6vw; }
.banner .big { font-family: var(--display); font-size: 5vw; color: var(--pumpkin); text-shadow: 0 .2vw 0 var(--pumpkin-deep), 0 0 2vw var(--pumpkin-glow); line-height: 1; }
.banner .sub { font-family: var(--heading); font-size: 1.9vw; color: var(--paper); }
.rotating { font-family: var(--type); font-size: 1.35vw; color: var(--paper-dim); max-width: 44vw; min-height: 4.5vw; }
.rotating span { display: block; animation: lineIn .8s ease; }
.order { display: grid; gap: .6vw; width: 40vw; }
.order .row { display: grid; grid-template-columns: 2.6vw 3.4vw 1fr; align-items: center; gap: 1vw; padding: .5vw 1vw; border-radius: .6vw; background: rgba(34,20,47,.6); color: var(--paper-dim); font-family: var(--heading); font-size: 1.5vw; transition: all .5s ease; border: .1vw solid transparent; }
.order .row .i { font-family: var(--type); color: var(--haze); }
.order .row img { max-width: 2.6vw; max-height: 2.8vw; justify-self: center; }
.order .row.now { background: var(--paper); color: var(--heading-ink); transform: scale(1.06) translateX(1vw); box-shadow: 0 0 3vw var(--pumpkin-glow); border-color: var(--pumpkin); font-size: 1.8vw; }
.order .row.now .i { color: var(--pumpkin-deep); }
.order .row.was { opacity: .45; }
.spot { display: grid; grid-template-columns: 11vw 1fr; gap: 2vw; align-items: center; width: 54vw; padding: 2vw; background: rgba(243,230,207,.96); color: var(--ink); border-radius: .4vw 1.2vw .4vw 1.4vw; box-shadow: 0 2.5vw 5vw -2vw rgba(0,0,0,.95); animation: spotIn .7s cubic-bezier(.2,.7,.2,1); }
@keyframes spotIn { from { opacity: 0; transform: translateY(2vw) scale(.96); } }
.spot .em { width: 11vw; height: 11vw; border-radius: 50%; background: var(--paper-3); box-shadow: 0 0 0 .25vw var(--pumpkin-deep) inset; display: grid; place-items: center; }
.spot .em img { max-width: 7vw; max-height: 7.5vw; }
.spot h2 { font-size: 3.4vw; color: var(--heading-ink); line-height: 1; }
.spot .role { font-style: italic; color: var(--ink-soft); font-size: 1.4vw; }
.spot .acc { margin-top: 1vw; display: grid; gap: .3vw; }
.spot .acc .eyebrow { color: #8a6a3f; font-size: .95vw; }
.spot .acc b { font-family: var(--display); font-size: 3.6vw; color: var(--blood-ink); line-height: 1; animation: stampIn .6s cubic-bezier(.3,1.5,.5,1); display: inline-block; }
@keyframes stampIn { from { transform: scale(2.2) rotate(-6deg); opacity: 0; } }
.spot .acc i { font-size: 1.5vw; color: var(--ink); }
.spot .waiting { font-family: var(--type); font-size: 1.3vw; color: var(--ink-soft); margin-top: 1vw; }
.board { display: grid; gap: .4vw; width: 44vw; margin-top: auto; }
.board .row { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: .8vw; align-items: center; padding: .45vw 1vw; background: rgba(34,20,47,.7); border-radius: .5vw; font-family: var(--heading); font-size: 1.25vw; color: var(--paper); animation: lineIn .6s ease; }
.board .row .arrow { color: var(--pumpkin); font-family: var(--type); }
.board .row .v { font-family: var(--type); font-size: 1vw; letter-spacing: .1em; text-transform: uppercase; }
.board .row .v.ok { color: var(--moss); }
.board .row .v.no { color: var(--blood); }
.board .row .who { color: var(--paper-dim); }
.culprit { display: grid; grid-template-columns: 12vw 1fr; gap: 2vw; align-items: center; width: 56vw; padding: 2vw; background: rgba(243,230,207,.97); color: var(--ink); border-radius: .4vw 1.2vw .4vw 1.4vw; box-shadow: 0 0 6vw var(--pumpkin-glow); animation: spotIn .9s; }
.culprit .em { width: 12vw; height: 12vw; border-radius: 50%; background: var(--paper-3); box-shadow: 0 0 0 .3vw var(--blood-ink) inset; display: grid; place-items: center; }
.culprit .em img { max-width: 8vw; }
.culprit h2 { font-family: var(--display); font-size: 4vw; color: var(--blood-ink); line-height: 1; }
.culprit p { font-size: 1.4vw; margin-top: .6vw; }
.culprit .stamp { font-size: 1.1vw; margin-top: .8vw; transform: rotate(-4deg); }
.awards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4vw; width: 58vw; }
.award { background: rgba(34,20,47,.78); border: .1vw solid var(--night-4); border-radius: .8vw; padding: 1.2vw 1.4vw; display: grid; gap: .7vw; min-height: 11vw; backdrop-filter: blur(4px); }
.award h3 { font-size: 1.5vw; color: var(--pumpkin); display: flex; justify-content: space-between; align-items: baseline; }
.award h3 small { font-family: var(--type); font-size: .9vw; color: var(--haze); letter-spacing: .08em; }
.award .bar { display: grid; grid-template-columns: 7.5vw 1fr 2vw; gap: .6vw; align-items: center; font-size: 1.05vw; color: var(--paper); font-family: var(--heading); }
.award .bar .track { height: .9vw; background: rgba(243,230,207,.12); border-radius: .5vw; overflow: hidden; }
.award .bar .fill { height: 100%; background: linear-gradient(90deg, var(--pumpkin-deep), var(--pumpkin)); border-radius: .5vw; transition: width .8s cubic-bezier(.2,.7,.2,1); }
.award .bar .n { font-family: var(--type); text-align: right; color: var(--paper-dim); }
.award.won { background: linear-gradient(135deg, #f8e7b5, #e9c766); border-color: var(--gold); color: var(--ink); animation: spotIn .8s; }
.award.won h3 { color: var(--heading-ink); }
.award.won .winner { display: grid; grid-template-columns: 4.6vw 1fr; gap: 1vw; align-items: center; }
.award.won .winner .em { width: 4.6vw; height: 4.6vw; border-radius: 50%; background: rgba(255,255,255,.6); display: grid; place-items: center; box-shadow: 0 0 0 .15vw var(--pumpkin-deep) inset; }
.award.won .winner img { max-width: 3vw; max-height: 3.2vw; }
.award.won .winner b { font-family: var(--display); font-size: 2.2vw; color: var(--heading-ink); line-height: 1; }
.award.won .winner small { font-family: var(--type); font-size: .95vw; color: var(--ink-soft); }
.cake { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(20,12,28,.6), rgba(11,6,17,.92)); animation: lineIn 1s; }
.cake .in { text-align: center; display: grid; gap: 1vw; justify-items: center; }
.cake h2 { font-family: var(--display); font-size: 7vw; color: var(--pumpkin); text-shadow: 0 .3vw 0 var(--pumpkin-deep), 0 0 3vw var(--pumpkin-glow); line-height: 1; }
.cake p { font-family: var(--heading); font-size: 2vw; color: var(--paper); }
.cake .candles { display: flex; gap: 1vw; }
.cake .candles img { width: 2.2vw; animation: flicker .5s ease-in-out infinite alternate; }
.cake .candles img:nth-child(2n) { animation-delay: .2s; }
@keyframes flicker { from { transform: scaleY(1); } to { transform: scaleY(1.06) translateY(-.1vw); } }
canvas.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* begin overlay */
.begin { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(11,6,17,.94); cursor: pointer; transition: opacity 1.2s; }
.begin .in { text-align: center; display: grid; gap: 1.2vw; justify-items: center; }
.begin h1 { font-size: 5vw; }
.begin p { font-family: var(--heading); font-size: 1.6vw; color: var(--paper-dim); }
.begin small { font-family: var(--type); font-size: 1vw; color: var(--haze); letter-spacing: .14em; text-transform: uppercase; }
.begin.gone { opacity: 0; pointer-events: none; }
@media (max-aspect-ratio: 4/3) { body { font-size: 2.2vw; } .stage { padding: 6vw 5vw; } .brand h1 { font-size: 11vw; max-width: 90vw; } .brand .tag { font-size: 3.6vw; max-width: 90vw; } .welcome { font-size: 4.6vw; max-width: 90vw; } .receipt, .order, .spot, .board, .culprit, .awards { width: 90vw; } .suspects { display: none; } .foot { font-size: 2.4vw; } .scene .wash { background: linear-gradient(rgba(11,6,17,.75), rgba(11,6,17,.5)); } .begin h1 { font-size: 12vw; } .begin p { font-size: 4vw; } .begin small { font-size: 2.6vw; } }

.board.two { grid-template-columns: 1fr 1fr; width: 56vw; gap: .4vw .8vw; }
.board.two .row { font-size: 1.15vw; }
.award.won .winners { display: flex; flex-wrap: wrap; gap: .5vw; }
.award.won .chip { display: inline-flex; align-items: center; gap: .4vw; padding: .3vw .8vw .3vw .4vw; background: rgba(255,255,255,.55); border-radius: 2vw; font-family: var(--heading); font-size: 1.2vw; color: var(--heading-ink); }
.award.won .chip img { width: 1.6vw; height: 1.6vw; object-fit: contain; }
.award.won .blurb { font-family: var(--type); font-size: .9vw; color: var(--ink-soft); }
.culprit { width: 50vw; }