/* Ночной сеанс — big screen. Everything is in rem; 1rem = 16px on a 1920×1080 screen. */
html { font-size: min(.8333vw, 1.4815vh); }
body { overflow: hidden; }
#app { position: fixed; inset: 0; overflow: hidden; }
#stage { position: absolute; inset: 0; }

.screen { position: absolute; inset: 0; animation: fade .6s var(--ease) both; }

/* letterbox bars that every screen sits between */
.bars::before, .bars::after {
  content: ''; position: absolute; left: 0; right: 0; height: 3.4rem; background: #000; z-index: 2;
}
.bars::before { top: 0; }
.bars::after { bottom: 0; }

/* ------------------------------------------------------------------ boot */
.boot { display: grid; place-items: center; text-align: center; }
.boot .inner { display: grid; justify-items: center; gap: 2.2rem; animation: rise 1.2s var(--ease-out) both; }
.boot h1 { font-size: 10rem; margin: 0; animation: flicker 6s infinite; }
.boot .sub { font-family: var(--f-mono); font-size: 1.5rem; color: var(--dim); letter-spacing: .04em; }
.boot .btn { min-height: 4.4rem; font-size: 1.5rem; padding: 0 3rem; }
.boot .hint { font-family: var(--f-mono); color: var(--mute); font-size: 1rem; }
.spot {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40% 55% at 50% 42%, rgba(239, 233, 221, .09), transparent 70%);
}

/* ----------------------------------------------------------------- lobby */
.lobby { display: grid; grid-template-columns: 46rem 1fr; gap: 0; }
.lobby .left {
  position: relative; padding: 6.5rem 4rem 5rem 5rem;
  display: flex; flex-direction: column; gap: 2rem;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(239, 233, 221, .03), transparent 40%);
}
.lobby .presents { font-size: 1rem; }
.hero-name { font-size: 8.4rem; line-height: .92; margin: -.4rem 0 0 -.04em; animation: flicker 7s infinite; word-break: break-word; }
.hero-name.long { font-size: 6.4rem; }
.lobby .tagline { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 2.3rem; color: var(--dim); margin: 0; line-height: 1.2; }
.lobby .date { font-family: var(--f-mono); color: var(--mute); font-size: 1.1rem; }

.ticket {
  margin-top: auto;
  display: grid; grid-template-columns: 15rem 1fr;
  background: var(--paper); color: var(--ink);
  position: relative;
  /* notched corners of a cinema ticket */
  -webkit-mask: radial-gradient(circle 1.2rem at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 1.2rem at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 1.2rem at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 1.2rem at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.ticket .qr { padding: 1.3rem; border-right: 2px dashed rgba(10, 10, 9, .35); }
.ticket .qr img { width: 100%; height: auto; image-rendering: pixelated; }
.ticket .info { padding: 1.4rem 1.8rem; display: flex; flex-direction: column; justify-content: center; gap: .3rem; }
.ticket .kicker { color: #57524b; font-size: .85rem; }
.ticket .code { font-family: var(--f-num); font-weight: 500; font-size: 5rem; letter-spacing: .14em; line-height: 1; }
.ticket .url { font-family: var(--f-mono); font-size: 1.05rem; color: #3b3732; word-break: break-all; }

.lobby .right { padding: 6.5rem 5rem 5rem 4rem; display: flex; flex-direction: column; min-height: 0; }
.credits-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-bottom: 1.6rem; }
.credits-head h2 { font-size: 4rem; margin: 0; }
.credits-head .count { font-family: var(--f-mono); color: var(--dim); font-size: 1.3rem; }
.cast {
  --lps: 6rem;
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 1.4rem 1.2rem;
}
.cast-empty {
  flex: 1; display: grid; place-items: center; text-align: center;
  font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 2.8rem; color: var(--mute);
}
.cp {
  width: calc(var(--lps) * 1.85);
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  background: none; border: 0; padding: 0; position: relative;
}
.cp.pop { animation: pop .6s var(--ease-out) both; }
.cp .nm {
  max-width: 100%;
  font-family: var(--f-cond); font-weight: 400; text-transform: uppercase; letter-spacing: .14em;
  font-size: calc(var(--lps) * .19); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp .vip { position: absolute; top: calc(var(--lps) * .82); left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font-family: var(--f-cond); font-weight: 600; font-size: .72rem; line-height: 1; letter-spacing: .16em; padding: .3rem .45rem .28rem .6rem; }
.cp .kick { position: absolute; inset: 0 0 auto; display: none; font-size: .85rem; background: var(--red); color: #fff; padding: .2rem; }
.cp:hover .kick { display: block; }

.programme { display: grid; grid-template-columns: 1fr 1fr 17rem; gap: 1.4rem; margin-top: 2rem; }
.film {
  position: relative; text-align: left;
  border: 1px solid var(--line-2); background: var(--char);
  padding: 1.5rem 1.7rem 1.4rem; min-height: 10.5rem;
  display: flex; flex-direction: column; gap: .35rem;
  transition: border-color .25s, transform .25s var(--ease), background .25s;
}
.film:hover:not([disabled]) { border-color: var(--paper); transform: translateY(-3px); background: var(--smoke); }
.film[disabled] { opacity: .45; cursor: default; }
.film .kicker { font-size: .78rem; }
.film .t { font-family: var(--f-display); font-weight: 600; font-style: italic; font-size: 2.7rem; line-height: 1; }
.film .d { font-family: var(--f-mono); font-size: .95rem; color: var(--dim); }
.film .done { position: absolute; top: 1.2rem; right: 1.2rem; font-family: var(--f-cond); letter-spacing: .2em; font-size: .78rem; color: var(--red); border: 1px solid var(--red); padding: .15rem .5rem; transform: rotate(4deg); }
.film.cer { border-color: rgba(214, 178, 94, .45); }
.film.cer .t { color: var(--gold); font-size: 2.2rem; }
.lobby .vip-hint { margin-top: 1rem; font-family: var(--f-mono); color: var(--mute); font-size: 1rem; }

/* ----------------------------------------------------------------- intro */
.intro { display: grid; place-items: center; text-align: center; }
.intro .inner { display: grid; justify-items: center; gap: 1.6rem; max-width: 90rem; }
.intro .kicker { font-size: 1.2rem; animation: rise .8s .1s var(--ease-out) both; }
.intro h1 { font-size: 8.4rem; margin: 0; animation: rise 1s .25s var(--ease-out) both; }
.intro .tag { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 3rem; color: var(--dim); animation: rise 1s .45s var(--ease-out) both; }
.intro .rules { display: flex; gap: 3.5rem; margin-top: 2rem; animation: rise 1s .7s var(--ease-out) both; }
.intro .rules div { display: grid; gap: .3rem; }
.intro .rules b { font-family: var(--f-num); font-style: normal; font-variant-numeric: lining-nums tabular-nums; font-weight: 300; font-size: 4.4rem; line-height: 1; }
.intro .rules span { font-family: var(--f-mono); font-size: 1.05rem; color: var(--dim); }
.intro .go { margin-top: 2rem; font-family: var(--f-mono); color: var(--mute); font-size: 1.1rem; animation: fade 1s 1.3s both; }

/* ---------------------------------------------------------------- leader */
.leader {
  position: fixed; inset: 0; z-index: 50;
  background: radial-gradient(ellipse at center, #3a3732 0%, #1a1917 60%, #0a0a09 100%);
  display: grid; place-items: center; align-content: center; gap: 2.4rem;
}
.leader-ring { position: relative; width: 36rem; height: 36rem; }
.leader-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--paper); stroke-width: 1.2; opacity: .8; }
.leader-sweep {
  position: absolute; inset: 4%; border-radius: 50%;
  background: conic-gradient(rgba(239, 233, 221, .26) var(--a, 0deg), transparent 0);
}
.leader-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--f-num); font-style: normal; font-variant-numeric: lining-nums tabular-nums; font-weight: 300; font-size: 22rem; line-height: 1; color: var(--paper);
  padding-bottom: .04em; /* optical centre of the figures */
  text-shadow: 0 0 2rem rgba(0, 0, 0, .6);
}
.leader-label { font-family: var(--f-mono); font-size: 1.5rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }

/* ----------------------------------------------------------------- frame */
.frame-screen { display: grid; grid-template-rows: 8.6rem 1fr 8.4rem; padding: 3.4rem 4rem 3.4rem; }
.fhead { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3rem; padding-bottom: .6rem; }
.fhead .kicker { font-size: 1rem; margin-bottom: .5rem; }
.fhead .kicker b { color: var(--paper); font-weight: 500; }
.fhead h2 { margin: 0; font-size: 4.2rem; line-height: 1.05; }

.timer { position: relative; width: 6.4rem; height: 6.4rem; }
.timer svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 5; }
.timer .track { stroke: var(--ash); }
.timer .ring { stroke: var(--paper); stroke-linecap: butt; transition: stroke-dashoffset .25s linear, stroke .3s; }
.timer .num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-num); font-style: normal; font-variant-numeric: lining-nums tabular-nums; font-weight: 400; font-size: 2.3rem; line-height: 1; }
.timer.hot .ring { stroke: var(--red); }
.timer.hot .num { color: var(--red); }
.timer.done { opacity: .25; }

.fbody { display: grid; grid-template-columns: 1fr 40rem; gap: 3rem; min-height: 0; }

/* the film frame: perforated strip around the media */
.reel {
  position: relative; min-height: 0;
  display: flex; gap: 1.6rem;
  transition: gap .6s var(--ease);
}
.pane {
  position: relative; flex: 1 1 0; min-width: 0;
  display: grid; place-items: center;
  background: #000;
  padding: 2.2rem 0;
  transition: flex .8s var(--ease-out), opacity .6s;
}
/* sprocket holes */
.pane::before, .pane::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2.2rem;
  background: radial-gradient(circle at 50% 50%, transparent 0, transparent 0) ,
              repeating-linear-gradient(90deg, transparent 0 .9rem, rgba(239, 233, 221, .16) .9rem 2.1rem, transparent 2.1rem 3rem);
  -webkit-mask: linear-gradient(#000, #000) center / 100% 1.1rem no-repeat;
          mask: linear-gradient(#000, #000) center / 100% 1.1rem no-repeat;
}
.pane::before { top: 0; }
.pane::after { bottom: 0; }
.pane.b { flex: 0 0 0; opacity: 0; padding-left: 0; padding-right: 0; overflow: hidden; }
.reel.split .pane.b { flex: 1 1 0; opacity: 1; }
.pane .tag {
  position: absolute; top: 2.8rem; left: 1rem; z-index: 3;
  font-family: var(--f-cond); font-size: .95rem; letter-spacing: .24em; text-transform: uppercase;
  background: rgba(10, 10, 9, .78); padding: .3rem .7rem; color: var(--paper);
  opacity: 0; transition: opacity .5s .5s;
}
.reel.split .pane .tag { opacity: 1; }
.pane .tag.orig { color: var(--gold); }
.shot { position: relative; overflow: hidden; background: #000; }
.shot img, .shot video { width: 100%; height: 100%; object-fit: contain; }
.unmute {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 4;
  font-family: var(--f-cond); letter-spacing: .14em; text-transform: uppercase; font-size: .95rem;
  background: var(--paper); color: var(--ink); border: 0; padding: .5rem .9rem;
}

/* spotlight on the thing that was swapped */
.hotspot {
  position: absolute; z-index: 2; pointer-events: none;
  border-radius: 50%;
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .62);
  opacity: 0; transform: scale(2.4);
  transition: opacity .8s .2s var(--ease), transform 1.1s .2s var(--ease-out);
}
.hotspot::after { content: ''; position: absolute; inset: -.35rem; border: .3rem solid var(--red); border-radius: 50%; box-shadow: 0 0 2rem var(--red-glow); }
.hotspot.on { opacity: 1; transform: none; }

.opts { display: flex; flex-direction: column; gap: 1rem; min-height: 0; }
.opt {
  position: relative; flex: 1 1 0; min-height: 0;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: 1.3rem;
  align-items: center;
  border: 1px solid var(--line-2); background: var(--char);
  padding: 1.1rem 1.6rem;
  transition: opacity .5s, border-color .4s, background .4s, transform .5s var(--ease-out);
  animation: rise .6s var(--ease-out) both;
}
.opt:nth-child(2) { animation-delay: .08s; } .opt:nth-child(3) { animation-delay: .16s; } .opt:nth-child(4) { animation-delay: .24s; }
.opt .letter { font-size: 1.6rem; grid-row: 1 / span 2; align-self: center; }
.opt .txt { font-family: var(--f-cond); font-weight: 400; font-size: var(--ot, 2.15rem); line-height: 1.15; overflow-wrap: anywhere; }
.opt .vs { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; padding-left: .5rem; min-height: 0; }
.opt .vs .ava { margin-left: -.5rem; border-width: 2px; }
.opt .n { position: absolute; top: .7rem; right: 1rem; font-family: var(--f-num); font-style: normal; font-variant-numeric: lining-nums tabular-nums; font-size: 1.2rem; color: var(--dim); }
.opt .stamp {
  position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%) rotate(-8deg) scale(1.6); opacity: 0;
  font-family: var(--f-cond); font-weight: 600; letter-spacing: .26em; font-size: 1.15rem;
  color: var(--red); border: 2px solid var(--red); padding: .25rem .7rem .25rem .95rem;
  transition: transform .45s .35s var(--ease-out), opacity .3s .35s;
}
.revealed .opt { opacity: .35; }
.revealed .opt.right { opacity: 1; border-color: var(--red); background: linear-gradient(90deg, rgba(225, 38, 44, .16), rgba(225, 38, 44, .04)); }
.revealed .opt.right .letter { background: var(--red); border-color: var(--red); color: #fff; }
.revealed .opt.right .stamp { opacity: 1; transform: translateY(-50%) rotate(-8deg) scale(1); }
.revealed .opt.right .n { color: var(--paper); }

.ffoot { display: flex; align-items: center; gap: 2rem; padding: 1rem 0 .4rem; min-height: 0; }
.ffoot .state { flex: 0 0 auto; font-family: var(--f-mono); font-size: 1.2rem; color: var(--dim); min-width: 13rem; }
.ffoot .state b { display: block; font-family: var(--f-num); font-style: normal; font-variant-numeric: lining-nums tabular-nums; font-weight: 300; font-size: 2.8rem; color: var(--paper); line-height: 1; }
.faces { --fs: 4.4rem; flex: 1; display: flex; flex-wrap: wrap; align-content: center; gap: .55rem; min-width: 0; height: 100%; overflow: hidden; }
.faces .ava { opacity: .28; transform: scale(.92); }
.faces .ava.in { opacity: 1; transform: none; }
.faces .ava.in::after {
  content: ''; position: absolute; right: -.15rem; bottom: -.15rem;
  width: 28%; height: 28%; border-radius: 50%; background: var(--red); border: 2px solid var(--ink);
}
.faces .ava.lit::after { display: none; }
.faces .ava.bump { animation: pop .5s var(--ease-out); }

.caption {
  position: absolute; left: 4rem; right: 47rem; bottom: 3.9rem; z-index: 3;
  display: flex; align-items: baseline; gap: 2rem; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 1.25rem; color: var(--dim);
  animation: rise .7s .7s var(--ease-out) both;
}
.caption .c { color: var(--paper); font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 1.9rem; }
.caption .fast b { color: var(--paper); font-weight: 500; }
.revealed .ffoot .faces, .revealed .ffoot .state { opacity: 0; transition: opacity .4s; }

/* ---------------------------------------------------------------- scores */
.board { display: grid; grid-template-rows: auto 1fr; padding: 6rem 7rem 5.4rem; gap: 2.4rem; }
.board-head { display: flex; justify-content: space-between; align-items: end; }
.board-head h1 { margin: 0; font-size: 6rem; }
.board-head .kicker { font-size: 1.1rem; margin-bottom: .8rem; }
.board-head .meta { font-family: var(--f-mono); color: var(--dim); font-size: 1.2rem; text-align: right; }
.rows { --rh: 4.8rem; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows), var(--rh)); grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: 3rem; row-gap: .5rem; align-content: start; min-height: 0; }
.row {
  display: grid; grid-template-columns: 3.4rem auto minmax(0, 1fr) auto auto 3rem; align-items: center; gap: 1.2rem;
  border-bottom: 1px solid var(--line); padding: 0 .4rem;
  animation: rise .6s var(--ease-out) both;
}
.row.slim { grid-template-columns: 3rem auto minmax(0, 1fr) auto; gap: 1rem; }
.row .rk { font-family: var(--f-num); font-style: normal; font-variant-numeric: lining-nums tabular-nums; font-weight: 300; font-size: calc(var(--rh) * .46); color: var(--dim); text-align: right; }
.row .nm { font-family: var(--f-cond); font-weight: 400; text-transform: uppercase; letter-spacing: .12em; font-size: calc(var(--rh) * .32); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .pts { font-family: var(--f-num); font-style: normal; font-variant-numeric: lining-nums tabular-nums; font-weight: 500; font-size: calc(var(--rh) * .36); }
.row .gain { font-family: var(--f-num); font-style: normal; font-variant-numeric: lining-nums tabular-nums; font-size: calc(var(--rh) * .26); color: var(--red); min-width: 5.5rem; text-align: right; }
.row .mv { font-size: calc(var(--rh) * .24); font-family: var(--f-num); font-style: normal; font-variant-numeric: lining-nums tabular-nums; width: 2.4rem; text-align: center; }
.row .mv.up { color: var(--gold); }
.row .mv.down { color: var(--mute); }
.row.top1 .rk { color: var(--gold); }
.row.top1 .nm { color: var(--gold); }

/* ------------------------------------------------------------ results */
.results { display: grid; grid-template-columns: 1fr 1.15fr; padding: 5.8rem 6rem 5.4rem; gap: 5rem; }
.results .l { display: flex; flex-direction: column; min-height: 0; }
.fin { font-size: 9.6rem; margin: 0; line-height: .9; animation: rise 1.1s var(--ease-out) both; }
.results .sub { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 2.6rem; color: var(--dim); margin: 1rem 0 0; animation: rise 1s .2s var(--ease-out) both; }
.podium { margin-top: auto; display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: end; gap: 1.6rem; }
.pod { display: flex; flex-direction: column; align-items: center; gap: .8rem; animation: rise .9s var(--ease-out) both; }
.pod.p1 { animation-delay: .9s; } .pod.p2 { animation-delay: .5s; } .pod.p3 { animation-delay: .2s; }
.pod .nm { font-family: var(--f-cond); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: 1.5rem; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .pts { font-family: var(--f-num); font-style: normal; font-variant-numeric: lining-nums tabular-nums; color: var(--dim); font-size: 1.2rem; }
.pod .step { width: 100%; display: grid; place-items: center; background: var(--char); border: 1px solid var(--line-2); border-bottom: 0; font-family: var(--f-num); font-style: normal; font-variant-numeric: lining-nums tabular-nums; font-weight: 300; color: var(--dim); }
.pod.p1 .step { height: 12rem; font-size: 6rem; color: var(--gold); border-color: rgba(214, 178, 94, .5); background: linear-gradient(180deg, rgba(214, 178, 94, .14), var(--char)); }
.pod.p2 .step { height: 8rem; font-size: 4.4rem; }
.pod.p3 .step { height: 5.5rem; font-size: 3.4rem; }
.results .r { display: flex; flex-direction: column; min-height: 0; }
.results .r h3 { margin: 0 0 1.4rem; font-family: var(--f-cond); font-weight: 500; letter-spacing: .3em; text-transform: uppercase; font-size: 1.1rem; color: var(--dim); }
.results .rows { --cols: 1; flex: 1; }

/* -------------------------------------------------------------- ceremony */
.final { display: grid; grid-template-columns: 52rem 1fr; padding: 5.4rem 6rem 5rem; gap: 5rem; }
.final .l { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 0; }
.final .kicker { font-size: 1.1rem; }
.palme { position: relative; width: 30rem; height: 30rem; margin: 2.2rem 0 1rem; display: grid; place-items: center; }
.palme svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--gold); filter: drop-shadow(0 0 1.6rem rgba(214, 178, 94, .35)); }
.palme svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.2s .4s var(--ease) forwards; }
.palme .ava { animation: pop 1s 1.6s var(--ease-out) both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.final .winner { font-size: 7rem; margin: .4rem 0 0; animation: rise 1s 2s var(--ease-out) both; }
.final .prize { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 2.8rem; color: var(--gold); margin: .6rem 0 0; animation: rise 1s 2.2s var(--ease-out) both; }
.final .wpts { font-family: var(--f-mono); font-size: 1.3rem; color: var(--dim); margin-top: .6rem; animation: fade 1s 2.4s both; }
.final .runners { display: flex; gap: 3rem; margin-top: auto; animation: rise 1s 2.6s var(--ease-out) both; }
.final .runner { display: flex; align-items: center; gap: 1rem; text-align: left; }
.final .runner .t { font-family: var(--f-cond); letter-spacing: .22em; text-transform: uppercase; font-size: .85rem; color: var(--dim); }
.final .runner .n { font-family: var(--f-cond); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 1.5rem; }
.final .r { display: flex; flex-direction: column; min-height: 0; gap: 2rem; }
.final .r h3 { margin: 0; font-family: var(--f-cond); font-weight: 500; letter-spacing: .3em; text-transform: uppercase; font-size: 1.1rem; color: var(--dim); }
.awards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.awards.three { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.awards.three .award { grid-template-columns: 1fr; gap: .7rem; padding: 1.1rem 1.2rem; }
.awards.three .award .ava { --s: 3.4rem !important; }
.awards.three .award .t { font-size: 1.65rem; }
.award { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; border: 1px solid var(--line-2); padding: 1.2rem 1.4rem; background: var(--char); animation: rise .8s var(--ease-out) both; }
.award .t { font-family: var(--f-display); font-weight: 600; font-style: italic; font-size: 1.9rem; color: var(--gold); line-height: 1.1; }
.award .n { font-family: var(--f-cond); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: 1.15rem; margin-top: .2rem; }
.award .x { font-family: var(--f-mono); font-size: .95rem; color: var(--dim); margin-top: .2rem; }
.final .rows { --cols: 2; flex: 1; }
.dust { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.dust i { position: absolute; top: -2%; width: .35rem; height: .35rem; border-radius: 50%; background: var(--gold); opacity: .0; animation: dust linear infinite; }
@keyframes dust { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .8; } 100% { transform: translateY(110vh) translateX(4rem); opacity: 0; } }

/* -------------------------------------------------------------- controls */
.controls {
  position: fixed; right: 1.4rem; bottom: .55rem; z-index: 60;
  display: flex; gap: .5rem;
  opacity: .35; transition: opacity .3s;
}
.controls:hover, .controls.show { opacity: 1; }
.cbtn {
  height: 2.4rem; min-width: 2.4rem; padding: 0 1rem;
  display: grid; place-items: center;
  background: rgba(27, 26, 24, .9); color: var(--paper);
  border: 1px solid var(--line-2);
  font-family: var(--f-cond); font-size: .95rem; letter-spacing: .16em; text-transform: uppercase;
}
.cbtn.icon { padding: 0; }
.cbtn.main { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cbtn:hover { border-color: var(--paper); }

.sheet { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .78); display: grid; place-items: center; animation: fade .25s both; }
.sheet-card { width: 38rem; display: grid; gap: 1rem; background: var(--char); border: 1px solid var(--line-2); padding: 3rem; }
.sheet-card h2 { margin: 0 0 1rem; font-size: 4rem; }
.sheet-card .btn { font-size: 1.1rem; min-height: 3.4rem; }

.toast {
  position: fixed; left: 50%; top: 4.4rem; transform: translateX(-50%); z-index: 80;
  background: var(--paper); color: var(--ink); padding: .8rem 1.4rem;
  font-family: var(--f-mono); font-size: 1.1rem;
  animation: rise .4s var(--ease-out) both;
}

/* =============================================================== atmosphere */
/* projector light cone, dust in it, light through venetian blinds */
.amb { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.beam {
  position: absolute; left: -6%; top: -18%; width: 95%; height: 150%;
  transform-origin: 0 0;
  background: conic-gradient(from 118deg at 0 0, transparent 0deg, rgba(239, 233, 221, .085) 7deg, rgba(239, 233, 221, .035) 17deg, transparent 27deg);
  filter: blur(14px);
  mix-blend-mode: screen;
  animation: beam 14s ease-in-out infinite alternate, flicker 7s infinite;
}
@keyframes beam { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.blinds {
  position: absolute; inset: -10% -10% -10% 30%;
  background: repeating-linear-gradient(-24deg, transparent 0 2.6rem, rgba(239, 233, 221, .045) 2.6rem 4.6rem);
  -webkit-mask: radial-gradient(ellipse 55% 60% at 60% 42%, #000 15%, transparent 72%);
          mask: radial-gradient(ellipse 55% 60% at 60% 42%, #000 15%, transparent 72%);
  mix-blend-mode: screen;
  animation: blinds 30s ease-in-out infinite alternate;
}
@keyframes blinds { from { transform: translate(-2rem, -1rem) skewX(-2deg); } to { transform: translate(2rem, 1rem) skewX(2deg); } }
.motes i {
  position: absolute; width: .22rem; height: .22rem; border-radius: 50%;
  background: var(--paper); opacity: 0;
  animation: mote linear infinite;
}
@keyframes mote {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: .55; }
  80% { opacity: .35; }
  100% { opacity: 0; transform: translate(6rem, 9rem); }
}

/* a cut on the splicing table */
body.splice #stage { animation: splice .42s steps(4) both; }
body.splice::before {
  content: ''; position: fixed; inset: 0; z-index: 890; pointer-events: none;
  background: #fff; animation: splice-flash .42s ease-out both;
}
@keyframes splice { 0% { transform: translateY(-1.2%); filter: brightness(1.8); } 40% { transform: translateY(.6%); } 100% { transform: none; filter: none; } }
@keyframes splice-flash { 0% { opacity: .55; } 30% { opacity: .08; } 45% { opacity: .22; } 100% { opacity: 0; } }

/* a new guest develops like a print in the darkroom tray */
.cp.pop .ava { animation: develop 2.4s var(--ease) both; }
@keyframes develop {
  0% { filter: brightness(3) contrast(.3) blur(6px) sepia(.8); opacity: .2; }
  45% { filter: brightness(1.5) contrast(.8) blur(2px) sepia(.4); opacity: 1; }
  100% { filter: none; }
}

/* =============================================================== the frame */
/* last seconds: red heat at the edges and the reel-change cue mark */
.urgency {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .4s;
  box-shadow: inset 0 0 14rem rgba(225, 38, 44, .32);
}
.urgency.on { opacity: 1; animation: heat 1s ease-in-out infinite; }
@keyframes heat { 50% { box-shadow: inset 0 0 9rem rgba(225, 38, 44, .18); } }
.cue {
  position: absolute; right: 48.6rem; top: 15.4rem; z-index: 4; pointer-events: none;
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 220, .95) 0 38%, rgba(255, 230, 190, .6) 55%, transparent 72%);
  opacity: 0;
}
.cue.on { animation: cue 1s steps(1) infinite; }
@keyframes cue { 0% { opacity: .95; } 18% { opacity: 0; } 100% { opacity: 0; } }

/* the answer: a spotlight runs down the options, then lands */
.opts { position: relative; }
.opts.sweep .opt { opacity: .55; transition: opacity .3s; }
.opts.sweep::after {
  content: ''; position: absolute; left: -4%; right: -4%; height: 28%; top: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(239, 233, 221, .28), transparent 70%);
  mix-blend-mode: screen;
  animation: sweep 1.25s cubic-bezier(.45, 0, .55, 1) both;
}
@keyframes sweep { 0% { transform: translateY(-20%); } 30% { transform: translateY(260%); } 60% { transform: translateY(40%); } 100% { transform: translateY(300%); opacity: .4; } }
.revealed .opt.right { animation: land .7s var(--ease-out) both; box-shadow: 0 0 3rem rgba(225, 38, 44, .22); }
@keyframes land { 0% { transform: scale(1); } 35% { transform: scale(1.035); } 100% { transform: scale(1); } }

/* =============================================================== the board */
.rows.flip .row { animation: none; transition: transform 1.25s cubic-bezier(.6, 0, .2, 1); }
.rows.flip .row.pre { transition: none; }
.rows.flip .row.pre .gain, .rows.flip .row.pre .mv { opacity: 0; }
.rows.flip .row .gain, .rows.flip .row .mv { transition: opacity .5s 1s; }
.rows.flip { animation: fade .6s both; }

/* =============================================================== ceremony */
/* iris-in: a round hole in black, centred on the winner by JS (--ix/--iy/--ir), opens, holds, then opens the screen */
.iris {
  position: absolute; z-index: 5; pointer-events: none;
  left: calc(var(--ix, 27vw) - var(--ir, 16rem)); top: calc(var(--iy, 42vh) - var(--ir, 16rem));
  width: calc(var(--ir, 16rem) * 2); height: calc(var(--ir, 16rem) * 2);
  border-radius: 50%;
  box-shadow: 0 0 0 300vmax #000;
  transform: scale(0);
}
.iris.go { animation: iris 4.2s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes iris {
  0% { transform: scale(0); }
  30% { transform: scale(1); }
  62% { transform: scale(1); box-shadow: 0 0 0 300vmax #000; }
  100% { transform: scale(9); box-shadow: 0 0 0 300vmax rgba(0, 0, 0, 0); }
}
.winner-beam {
  position: absolute; left: 0; top: 0; width: 55%; height: 100%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 168deg at 50% -8%, transparent 0deg, rgba(214, 178, 94, .12) 10deg, rgba(239, 233, 221, .06) 16deg, transparent 26deg);
  filter: blur(10px); mix-blend-mode: screen;
  animation: fade 2s 1.4s both, flicker 6s 3s infinite;
}