:root {
  --ink: #05060c;
  --navy: #0a0e22;
  --amber: #ffb648;
  --bulb: #ffdc94;
  --cream: #fff1cf;
  --red: #ff3b4e;
  --magenta: #ff3fa4;
  --cyan: #4fe3ff;
  --muted: #b9b2a3;
  --brass-1: #f2c677;
  --brass-2: #8a5a22;
  --board: min(calc(100vw - 56px), 41dvh);
  --n: 7;
  --cell: calc(var(--board) / var(--n));
  --marquee-font: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --title-font: 'Limelight', 'Bebas Neue', Georgia, serif;
  --text-font: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--text-font);
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

#bg, #fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#bg { z-index: 0; }
#fx { z-index: 60; }
#flyLayer { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }

#app {
  position: relative; z-index: 1;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
  gap: 8px;
  max-width: 1180px; margin: 0 auto;
}

/* ---------- Now Showing header ---------- */
.poster {
  position: relative; flex: none;
  display: flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 10px 0 14px;
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255, 190, 110, .35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 235, 200, .25);
}
.poster-art {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 8, 20, .82), rgba(6, 8, 20, .42) 55%, rgba(6, 8, 20, .85)), url(../art/poster.jpg) center 42% / cover;
}
.poster-text { position: relative; flex: 1; min-width: 0; line-height: 1; }
.now-showing {
  display: block; font-family: var(--marquee-font); letter-spacing: .2em; font-size: 13px;
  color: #ff8a94;
  text-shadow: 0 0 6px var(--red), 0 0 16px var(--red);
  animation: neon 7s infinite;
}
.poster h1 {
  margin: 3px 0 0; font: 400 clamp(20px, 6vw, 28px)/1 var(--title-font);
  color: var(--cream); text-shadow: 0 0 14px rgba(255, 180, 80, .6), 0 2px 2px #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes neon {
  0%, 18%, 22%, 60%, 63%, 100% { opacity: 1; }
  20%, 61.5% { opacity: .42; }
}
.score-ticket {
  position: relative; flex: none; text-align: right;
  padding: 4px 12px 3px; border-radius: 7px;
  background: linear-gradient(180deg, #fff3d4, #f4cf8a);
  color: #24140a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .55), 0 0 14px rgba(255, 180, 80, .4);
  min-width: 68px;
}
.score-ticket span { display: block; font: 700 9px/1 var(--text-font); letter-spacing: .14em; text-transform: uppercase; }
.score-ticket b { font: 400 24px/1 var(--marquee-font); }
.score-ticket.bump { animation: bump .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bump { 40% { transform: scale(1.16) rotate(-2deg); } }

.round-btn {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255, 200, 130, .45);
  background: rgba(12, 12, 24, .7);
  color: var(--bulb); font-size: 17px; line-height: 1;
}

/* ---------- Layout ---------- */
.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.marquee-column { flex: none; display: flex; justify-content: center; }
.console-column { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.clue-list { display: none; }

/* ---------- Bulb-lit marquee ---------- */
.marquee {
  position: relative; padding: 22px; border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 235, 195, .22), transparent 30%),
    linear-gradient(180deg, #4b2c12, #2a180a 45%, #3b220e);
  box-shadow:
    0 0 0 1px #000, 0 0 0 3px var(--brass-2), 0 0 0 4px var(--brass-1),
    0 14px 38px rgba(0, 0, 0, .75), 0 0 46px rgba(255, 160, 70, .22);
}
.marquee.flash-big { animation: frameBig 1.25s ease-out; }
.marquee.flash-mid { animation: frameMid .8s ease-out; }
@keyframes frameBig { 18% { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--brass-2), 0 0 0 4px #fff0c8, 0 14px 38px rgba(0, 0, 0, .75), 0 0 110px rgba(255, 190, 90, .85); } }
@keyframes frameMid { 22% { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--brass-2), 0 0 0 4px #ffe6b5, 0 14px 38px rgba(0, 0, 0, .75), 0 0 74px rgba(255, 180, 90, .55); } }

.bulbs { position: absolute; inset: 0; pointer-events: none; }
.bulb {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff6dc, #ffc873 55%, #a46420);
  box-shadow: 0 0 5px rgba(255, 190, 100, .75);
  animation: idle 5.4s ease-in-out infinite;
}
@keyframes idle { 50% { filter: brightness(.62); } }
.bulb.lit {
  animation: none;
  background: radial-gradient(circle at 40% 35%, #fff, #fff0c4 60%, #ffc35f);
  box-shadow: 0 0 7px 2px #fff0c4, 0 0 20px 6px rgba(255, 190, 90, .9);
}

/* ---------- Letter board ---------- */
.board {
  position: relative;
  width: var(--board); height: var(--board);
  display: grid; grid-template: repeat(var(--n), 1fr) / repeat(var(--n), 1fr); gap: 3px;
  padding: 0; border-radius: 6px;
  background: #07070b;
  box-shadow: 0 0 0 5px #07070b, inset 0 0 18px #000;
  perspective: 900px;
}
.cell { position: relative; min-width: 0; min-height: 0; cursor: pointer; touch-action: none; }
.cell.void { cursor: default; border-radius: 3px; background: rgba(255, 190, 110, .022); }
.tile {
  position: absolute; inset: 0; border-radius: 3.5px; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #2b2013, #1a130b);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 120, .17);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.tile::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.face { font: 400 calc(var(--cell) * .74)/1 var(--marquee-font); color: #101016; padding-top: .06em; }
.cell.in-word .tile {
  background: linear-gradient(180deg, #5a3a15, #3d2810);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 120, .55);
}
.cell.filled .tile {
  background: linear-gradient(180deg, #fff9e6, #ffe8b4 62%, #f7d088);
  box-shadow: 0 0 9px rgba(255, 186, 90, .4), inset 0 -2px 0 rgba(130, 80, 10, .24);
}
.cell.locked .tile {
  background: linear-gradient(180deg, #ffffff, #fff0c6 58%, #ffd894);
  box-shadow: 0 0 13px 2px rgba(255, 196, 100, .66), inset 0 -2px 0 rgba(150, 95, 20, .25);
}
.cell.in-word.filled .tile { box-shadow: 0 0 10px 2px rgba(255, 186, 90, .62), inset 0 0 0 1.5px var(--amber); }
/* Unchecked letters look pencilled in, the same whether they are right or wrong. */
.cell.filled:not(.locked) .face { color: #6a4f33; }
.cell.cursor .tile { outline: 2px solid var(--cyan); outline-offset: -2px; box-shadow: 0 0 14px rgba(79, 227, 255, .75); }
.num {
  position: absolute; z-index: 2; left: 2.5px; top: 1.5px;
  font: 700 max(7px, calc(var(--cell) * .19))/1 var(--text-font);
  color: rgba(255, 228, 180, .8); pointer-events: none;
}
.cell.filled .num { color: rgba(60, 35, 5, .72); }
.cell.div-r::after, .cell.div-b::after {
  content: ''; position: absolute; z-index: 3; background: var(--red);
  box-shadow: 0 0 5px var(--red); pointer-events: none; border-radius: 2px;
}
.cell.div-r::after { top: 10%; bottom: 10%; right: -2.5px; width: 2px; }
.cell.div-b::after { left: 10%; right: 10%; bottom: -2.5px; height: 2px; }

.tile.drop { animation: drop .3s cubic-bezier(.3, .9, .4, 1); }
@keyframes drop {
  0% { transform: translateY(-75%) scale(1.3) rotate(-5deg); opacity: 0; }
  58% { transform: translateY(2%) scale(1, .92); opacity: 1; }
  78% { transform: translateY(-12%) scale(1, 1.02); }
  100% { transform: none; }
}
.tile.shake { animation: shake .36s linear; }
@keyframes shake {
  0%, 100% { transform: none; }
  15% { transform: translateX(-11%) rotate(-5deg); }
  35% { transform: translateX(11%) rotate(5deg); }
  55% { transform: translateX(-8%) rotate(-3deg); }
  75% { transform: translateX(7%) rotate(3deg); }
}
.tile.flip { animation: flip .48s ease-in-out both; animation-delay: calc(var(--i, 0) * 75ms); }
@keyframes flip {
  0% { transform: rotateX(0); }
  46% { transform: rotateX(-88deg); filter: brightness(1.45); }
  54% { transform: rotateX(88deg); filter: brightness(1.45); }
  100% { transform: rotateX(0); }
}
.tile.jump { animation: jump .85s cubic-bezier(.3, .5, .4, 1) both; animation-delay: var(--d, 0ms); }
@keyframes jump {
  0%, 100% { transform: none; }
  32% { transform: translateY(-38%) scale(1.08) rotate(-3deg); }
  62% { transform: translateY(6%) scale(1.05, .92); }
  82% { transform: translateY(-9%); }
}
.fly-tile {
  position: absolute; left: 0; top: 0; display: grid; place-items: center;
  font-family: var(--marquee-font); color: #101016; border-radius: 4px;
  background: linear-gradient(180deg, #fff9e6, #ffe8b4 62%, #f7d088);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .6);
}
/* Scorched by the oil barrel, or punched through by the machine gun. */
.fly-tile.charred { color: #ffb36b; background: radial-gradient(circle at 40% 35%, #6b4426, #2a1a0e 70%); box-shadow: 0 0 14px rgba(255, 120, 30, .75); }
.fly-tile.shot { background: radial-gradient(circle at 55% 45%, #140d08 0 3px, transparent 4px), linear-gradient(180deg, #fff9e6, #ffe8b4 62%, #f7d088); }
.score-pop {
  position: fixed; z-index: 65; pointer-events: none;
  font-family: var(--marquee-font); color: var(--cream);
  transform: translate(-50%, -50%);
  animation: rise 1.25s ease-out forwards;
}
.score-pop.type { font-size: 76px; color: #fff; text-shadow: 0 0 12px var(--amber), 0 0 32px var(--amber), 0 3px 2px #000; }
.score-pop.wheel { font-size: 50px; text-shadow: 0 0 10px var(--amber), 0 2px 2px #000; }
.score-pop.choice { font-size: 32px; text-shadow: 0 2px 3px #000; }
@keyframes rise {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); }
  18% { opacity: 1; transform: translate(-50%, -60%) scale(1.12); }
  32% { transform: translate(-50%, -65%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -170%); }
}

/* ---------- Ticket-booth console ---------- */
.booth {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 7px;
  padding: 9px 10px 10px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(38, 34, 54, .82), rgba(14, 14, 28, .92));
  border: 1px solid rgba(255, 200, 130, .34);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 245, 225, .3);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.booth-gloss {
  position: absolute; inset: 0 0 auto 0; height: 92px; pointer-events: none;
  background: linear-gradient(177deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .02) 58%, transparent 60%);
}
.clue-head { position: relative; flex: none; display: flex; align-items: center; gap: 6px; }
.clue-head .round-btn.nav { width: 27px; height: 27px; font-size: 15px; }
.clue-meta { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.clue-number { font: 400 17px/1 var(--marquee-font); letter-spacing: .03em; color: var(--bulb); white-space: nowrap; }
.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 5px;
  border-radius: 999px; font: 700 9.5px/1 var(--text-font); letter-spacing: .04em;
  color: #0b0d18; background: var(--cyan); white-space: nowrap;
}
.tag svg { width: 13px; height: 13px; fill: currentColor; }
.tag b { font-weight: 700; }
.tag i { font-style: normal; font-weight: 500; opacity: .72; letter-spacing: 0; }
.tag[data-tag="FILM"] { background: var(--amber); }
.tag[data-tag="CHARACTER"] { background: #ff8aa0; }
.tag[data-tag="ACTOR"] { background: #ffd65e; }
.tag[data-tag="ITEM"] { background: #8fe6b0; }
.tag[data-tag="PLACE"] { background: #9cc4ff; }
.tag[data-tag="WORD"] { background: var(--cyan); }
.worth {
  flex: none; font: 400 20px/1 var(--marquee-font); color: var(--cream); text-align: right;
}
.worth small { display: block; font: 700 8px/1 var(--text-font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
.worth.drop-val { animation: tear .5s ease; }
@keyframes tear { 30% { color: var(--red); transform: scale(1.3) rotate(-4deg); } }
.list-btn {
  flex: none; height: 27px; padding: 0 7px; border-radius: 7px;
  font: 700 10.5px/1 var(--text-font); letter-spacing: 0; color: var(--bulb);
  border: 1px solid rgba(255, 200, 130, .4); background: rgba(12, 12, 24, .55);
}
/* The question sits on a bright card so the eye lands on it straight away. */
.clue-body {
  position: relative; flex: none; min-height: 62px; padding: 7px 11px; border-radius: 9px;
  display: flex; flex-direction: column; justify-content: center; color: #1c130a;
  background: linear-gradient(180deg, #fff9ea, #ffe6b5);
  box-shadow: 0 0 16px rgba(255, 196, 110, .38), inset 0 -2px 0 rgba(150, 95, 20, .22);
}
.clue-body.swap { animation: bodyIn .28s ease-out; }
@keyframes bodyIn { from { opacity: 0; transform: translateX(14px); } }
.clue-body p { margin: 0; }
.text { font-size: clamp(16px, 2.2dvh, 19px); line-height: 1.26; font-weight: 700; }
.quote { font-size: clamp(18px, 2.6dvh, 22px); line-height: 1.2; font-weight: 700; font-style: italic; }
.blank {
  display: inline-block; width: 58px; height: 1em; vertical-align: -2px; margin: 0 2px;
  border-bottom: 3px solid #a8460b;
}
.context { margin-top: 3px !important; font-size: 13px; color: #5c4a32; }
.pattern { font-style: normal; font-weight: 700; color: #a8460b; white-space: nowrap; }

/* Tabs */
.tabs { position: relative; flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tab {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 37px; border-radius: 8px;
  font: 400 17px/1 var(--marquee-font); letter-spacing: .06em; color: var(--bulb);
  background: rgba(10, 10, 22, .68); border: 1px solid rgba(255, 200, 130, .3);
  transition: background .18s, color .18s, transform .18s;
}
.tab > span { display: inline-flex; align-items: center; gap: 4px; }
.tab b { font: 700 11px/1 var(--text-font); opacity: .78; letter-spacing: 0; }
.tab.active {
  color: #1f1206; background: linear-gradient(180deg, #ffe6aa, #ffb648);
  border-color: #ffe9bf; box-shadow: 0 0 15px rgba(255, 180, 80, .5), inset 0 1px 0 #fff6dc;
}
.tab.locked { opacity: .42; text-decoration: line-through; }
.tab .lock { width: 12px; height: 12px; }
.tab.shake { animation: shake .36s linear; }

.mode-area { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }

/* Keyboard */
.kbd { display: flex; flex-direction: column; gap: 5px; width: 100%; max-width: 520px; margin: 0 auto; }
.kbd-row { display: flex; justify-content: center; gap: 4px; }
.key {
  flex: 1 1 0; max-width: 46px; height: clamp(34px, 5.5dvh, 48px); border-radius: 6px;
  font: 400 clamp(17px, 2.7dvh, 22px)/1 var(--marquee-font); padding-top: 2px;
  color: #17110a; background: linear-gradient(180deg, #fff6df, #e8cf9b);
  box-shadow: 0 2px 0 #8f6b33, 0 3px 6px rgba(0, 0, 0, .5);
  touch-action: none;
}
.key.back { flex: 1.5 1 0; max-width: 66px; color: var(--cream); background: linear-gradient(180deg, #55334a, #3a2132); box-shadow: 0 2px 0 #1f1019; }
.key.press { animation: press .16s ease-out; }
@keyframes press { 40% { transform: translateY(2px) scale(.94); filter: brightness(1.2); } }

/* Wheel */
.wheel-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.wheel-word {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font: 400 24px/1 var(--marquee-font); letter-spacing: .08em; color: var(--bulb); text-shadow: 0 2px 4px #000;
}
.wheel { position: relative; flex: 1; min-height: 0; width: 100%; max-width: 330px; touch-action: none; cursor: grab; }
.wheel-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wheel-lines polyline { fill: none; stroke: var(--amber); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 7px rgba(255, 180, 70, .85)); }
.node {
  position: absolute; width: var(--node); height: var(--node); margin: calc(var(--node) / -2) 0 0 calc(var(--node) / -2);
  display: grid; place-items: center; border-radius: 50%;
  font: 400 calc(var(--node) * .62)/1 var(--marquee-font); padding-top: 2px; color: #17110a;
  background: radial-gradient(circle at 36% 28%, #fffaf0, #f5d597 62%, #c68f3f);
  box-shadow: 0 0 0 2px #6c4619, 0 0 0 3px #f0c67a, 0 6px 12px rgba(0, 0, 0, .55);
  animation: nodeIn .34s cubic-bezier(.3, 1.6, .5, 1) backwards;
}
.node.on { background: radial-gradient(circle at 40% 30%, #fff, #ffd98c 62%, #ffae3a); box-shadow: 0 0 0 2px #6c4619, 0 0 0 3px #fff2cf, 0 0 20px 3px rgba(255, 186, 80, .85); }
@keyframes nodeIn { from { transform: scale(.2); opacity: 0; } }
.chip {
  position: absolute; left: 0; top: 0; width: 38px; height: 44px; border-radius: 5px; display: grid; place-items: center; z-index: 3;
  font: 400 32px/1 var(--marquee-font); color: #101016; pointer-events: none;
  background: linear-gradient(180deg, #fff9e6, #ffdf9e);
  box-shadow: 0 7px 14px rgba(0, 0, 0, .55), 0 0 12px rgba(255, 190, 90, .55);
}

/* Multiple choice */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt {
  position: relative; display: flex; align-items: center; gap: 8px; height: clamp(46px, 7.4dvh, 62px); padding: 0 14px 0 8px;
  font: 400 clamp(19px, 3dvh, 25px)/1 var(--marquee-font); letter-spacing: .04em; color: var(--cream); text-align: left;
  background: linear-gradient(180deg, #24305e, #121938 62%, #1a2448);
  border: 1px solid rgba(120, 190, 255, .55);
  border-radius: 24px 8px 24px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .22);
  animation: optIn .36s cubic-bezier(.2, 1.1, .4, 1) backwards;
}
.opt em {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 700 12px/1 var(--text-font); font-style: normal; color: #101016; background: var(--amber);
}
.opt span { padding-top: 2px; }
.opt.gone { visibility: hidden; }
.opt.right { background: linear-gradient(180deg, #ffe6aa, #ffb648); color: #1a1006; border-color: #fff0cf; }
.fly-opt { position: absolute !important; left: 0; top: 0; animation: none !important; }
@keyframes optIn { from { opacity: 0; transform: translateX(40px) rotate(3deg); } }

/* Fact reveal */
.fact-card {
  position: relative; display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
  padding: 10px 12px 11px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 196, 110, .16), rgba(255, 196, 110, .04));
  border: 1px solid rgba(255, 200, 130, .35);
  animation: factIn .4s cubic-bezier(.2, 1.2, .4, 1);
}
@keyframes factIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.fact-answer { display: flex; flex-wrap: wrap; gap: 3px 12px; }
.fact-word { display: inline-flex; gap: 2px; }
.fact-word i {
  width: 25px; height: 32px; display: grid; place-items: center; font: 400 27px/1 var(--marquee-font); font-style: normal; color: #101016; border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ffe2a4);
  box-shadow: 0 0 9px rgba(255, 186, 90, .55);
  animation: drop .35s backwards;
}
.fact-points { display: flex; align-items: baseline; gap: 8px; position: absolute; right: 12px; top: 10px; }
.fact-points span { font: 700 10px/1 var(--text-font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fact-points b { font: 400 25px/1 var(--marquee-font); color: var(--amber); text-shadow: 0 0 10px rgba(255, 180, 70, .7); }
.fact-text { margin: 0; font-size: clamp(14px, 2dvh, 16px); line-height: 1.32; }
.drop-card { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 110, 90, .75); background: #3a1218; animation: factIn .25s ease-out; }
.drop-card h4 { margin: 0; font: 400 24px/1 var(--marquee-font); letter-spacing: .05em; color: var(--bulb); }
.drop-card p { margin: 0; font-size: 14px; line-height: 1.3; }
.drop-actions { display: flex; gap: 8px; }
.drop-actions button { flex: 1; height: 38px; border-radius: 8px; font: 400 17px/1 var(--marquee-font); letter-spacing: .05em; }
.drop-no { color: var(--bulb); background: rgba(10, 10, 22, .7); border: 1px solid rgba(255, 200, 130, .4); }
.drop-yes { color: #1f1206; background: linear-gradient(180deg, #ffe6aa, #ffb648); }
.tile.sweep { animation: sweep .42s ease-out calc(var(--i) * 45ms) backwards; }
@keyframes sweep { 0% { filter: brightness(2.4); transform: scale(1.14); } 100% { filter: none; transform: none; } }
#trivia {
  position: fixed; z-index: 65; top: max(6px, env(safe-area-inset-top)); left: 50%; width: min(520px, calc(100vw - 20px));
  padding: 8px 13px 9px; border-radius: 10px; cursor: pointer; color: #1c130a;
  background: linear-gradient(180deg, #fff3d2, #ffcf80); box-shadow: 0 8px 24px rgba(0, 0, 0, .7), 0 0 0 2px #8a5a22;
  transform: translate(-50%, -130%); opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(.2, 1.1, .4, 1), opacity .2s;
}
#trivia.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
#trivia small { display: block; font: 400 13px/1 var(--marquee-font); letter-spacing: .14em; color: #8a3f0a; margin-bottom: 3px; }
#trivia p { margin: 0; font-size: 14px; line-height: 1.28; font-weight: 500; }
.how-btn { display: block; margin: 14px auto 0; padding: 8px 14px; font: 500 14px/1 var(--text-font); color: var(--bulb); background: none; text-decoration: underline; }
/* Summary rating: film reels earned, VHS tapes for the ones missed. */
.reels { display: flex; justify-content: center; gap: 8px; margin: 2px 0 4px; }
.reels span { width: 42px; height: 42px; animation: reel-in .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.reels svg { width: 100%; height: 100%; display: block; }
.reels .reel { color: var(--amber); filter: drop-shadow(0 0 9px rgba(255, 180, 80, .75)); }
.reels .reel svg { animation: reel-spin 4s linear infinite; }
.reels .vhs { color: #5b586f; opacity: .85; }
@keyframes reel-in { from { opacity: 0; transform: scale(.2) rotate(-120deg); } to { opacity: 1; transform: none; } }
@keyframes reel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .reels span, .reels .reel svg { animation: none; } }
#tutSpot { position: fixed; z-index: 62; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(4, 4, 12, .66), 0 0 0 2px var(--amber), 0 0 18px rgba(255, 180, 80, .8); }
#tutBubble { position: fixed; z-index: 68; left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 24px)); padding: 11px 14px; border-radius: 12px; color: #1c130a; background: linear-gradient(180deg, #fff9ea, #ffe0a8); box-shadow: 0 10px 28px rgba(0, 0, 0, .7), 0 0 0 2px #8a5a22; }
#tutBubble p { margin: 0 0 8px; font-size: 15px; line-height: 1.32; font-weight: 500; }
.tut-actions { display: flex; justify-content: space-between; align-items: center; }
#tutSkip { padding: 6px 2px; font: 500 13px/1 var(--text-font); color: #6a4f33; background: none; }
#tutNext { height: 34px; padding: 0 18px; border-radius: 8px; font: 400 17px/1 var(--marquee-font); letter-spacing: .06em; color: #fff4dc; background: #5b3a15; }
.pic-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pic { flex: none; width: clamp(84px, 13dvh, 124px); aspect-ratio: 1; padding: 3px; border-radius: 6px; background: linear-gradient(135deg, #c98e3f, #7a5120); box-shadow: 0 4px 10px rgba(0, 0, 0, .45); }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.pic-len { font: 400 30px/1 var(--marquee-font); letter-spacing: .04em; }
.next-btn {
  align-self: flex-end; height: 37px; padding: 0 16px; border-radius: 8px;
  font: 400 18px/1 var(--marquee-font); letter-spacing: .07em; color: #1f1206;
  background: linear-gradient(180deg, #ffe6aa, #ffb648);
  box-shadow: 0 0 14px rgba(255, 180, 80, .45);
}
.curtain-btn {
  position: relative; flex: none; height: 37px; width: 100%; border-radius: 8px;
  font: 400 19px/1 var(--marquee-font); letter-spacing: .09em; color: #1f1206;
  background: linear-gradient(180deg, #ffe6aa, #ffb648);
  animation: curtainGlow 1.5s ease-in-out infinite alternate;
}
@keyframes curtainGlow {
  from { box-shadow: 0 0 8px rgba(255, 180, 80, .4); }
  to { box-shadow: 0 0 22px 3px rgba(255, 180, 80, .85); }
}
.checking { margin: 0; text-align: center; font: 400 26px/1 var(--marquee-font); letter-spacing: .08em; color: var(--amber); }

#toast {
  position: fixed; z-index: 70; left: 50%; bottom: 22px; transform: translate(-50%, 18px);
  padding: 9px 15px; border-radius: 999px; max-width: 88vw; text-align: center;
  font-size: 13px; font-weight: 500; background: rgba(12, 12, 26, .94); border: 1px solid rgba(255, 200, 130, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Clue list */
.sheet-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); }
.sheet {
  position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; max-height: 72dvh; overflow-y: auto; padding: 8px 14px 22px;
  border-radius: 18px 18px 0 0; background: #11132a; border-top: 1px solid rgba(255, 200, 130, .5);
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .9, .3, 1);
}
.sheet.open { transform: none; }
.sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: rgba(255, 220, 170, .4); margin: 0 auto 8px; }
.clue-list h3, .sheet h3 { margin: 10px 2px 4px; font: 400 16px/1 var(--marquee-font); letter-spacing: .14em; color: var(--amber); }
.li { display: flex; align-items: flex-start; gap: 7px; width: 100%; text-align: left; padding: 6px 4px; border-radius: 6px; font-size: 13.5px; line-height: 1.25; }
.li-n { flex: none; width: 17px; font: 400 17px/1 var(--marquee-font); color: var(--bulb); padding-top: 1px; }
.li-icon { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--muted); }
.li-icon svg { width: 100%; height: 100%; fill: currentColor; }
.li-text { flex: 1; }
.li small { color: var(--amber); font-weight: 700; }
.li em { flex: none; font: 400 16px/1 var(--marquee-font); color: var(--amber); font-style: normal; }
.li.current { background: rgba(255, 190, 110, .17); }
.li.done .li-text { opacity: .55; text-decoration: line-through; text-decoration-color: rgba(255, 220, 170, .5); }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(4, 5, 12, .88); overflow-y: auto; }
.pic-zoom img { max-width: 92vw; max-height: 86vh; border-radius: 8px; box-shadow: 0 0 0 4px #e8c07a, 0 0 70px rgba(255, 180, 90, .45); }
.menu-look { background: #06070f; }
.menu-look::before {
  content: ''; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 3px);
}
.menu-look::after {
  content: ''; position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.intro-art { position: fixed; inset: 0; background: linear-gradient(180deg, rgba(6, 7, 15, .34), rgba(6, 7, 15, .92) 72%), url(../art/poster.jpg) center / cover; }
.intro-card, .summary-card { position: relative; z-index: 4; width: min(440px, 100%); text-align: center; padding: 8px 4px; }
.neon { margin: 0; font: 400 20px/1 var(--marquee-font); letter-spacing: .3em; animation: neon 6s infinite; }
.neon-red { color: #ff9aa2; text-shadow: 0 0 8px var(--red), 0 0 24px var(--red); }
.neon-cyan { color: #b7f4ff; text-shadow: 0 0 8px var(--cyan), 0 0 24px var(--cyan); }
.intro-card h2 { margin: 10px 0 8px; font: 400 clamp(50px, 15vw, 70px)/.95 var(--title-font); color: var(--cream); text-shadow: 0 0 22px rgba(255, 180, 80, .75), 0 4px 4px #000; }
.intro-sub { margin: -4px 0 10px; font: 400 15px/1 var(--marquee-font); letter-spacing: .28em; text-transform: uppercase; color: var(--bulb); }
.intro-lead { margin: 0 auto 14px; max-width: 320px; font-size: 16px; line-height: 1.3; }
.ticket-btn {
  position: relative; display: inline-block; padding: 15px 50px 13px;
  font: 400 26px/1 var(--marquee-font); letter-spacing: .12em; color: #2a1505;
  background: linear-gradient(180deg, #fff3d0, #ffb648);
  -webkit-mask: radial-gradient(circle 10px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 10px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  transition: transform .15s;
}
.ticket-btn:hover { transform: rotate(-1.5deg) scale(1.04); }
.ticket-btn small { display: block; margin-bottom: 4px; font: 700 10px/1 var(--text-font); letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.sum-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.next-feature { font: 400 18px/1 var(--marquee-font); letter-spacing: .1em; color: var(--bulb); padding: 6px 10px; }
.summary-card h2 { margin: 8px 0 2px; font: 400 clamp(36px, 10vw, 50px)/1 var(--title-font); color: var(--cream); text-shadow: 0 0 22px rgba(255, 180, 80, .75); }
.sum-score { display: flex; justify-content: center; align-items: baseline; gap: 8px; }
.sum-score b { font: 400 76px/1 var(--marquee-font); color: var(--amber); text-shadow: 0 0 24px rgba(255, 180, 70, .75); }
.sum-score span { font-size: 15px; color: var(--muted); }
.sum-best, .sum-note { margin: 2px 0; font-size: 14px; }
.sum-note { color: var(--muted); }
.credits { list-style: none; margin: 12px 0 18px; padding: 0; text-align: left; }
.credit-fact { display: none; flex: 0 0 100%; margin: 2px 0 4px; font-size: 13px; line-height: 1.32; color: var(--cream); }
.credits li.open .credit-fact { display: block; }
.credits li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 4px 4px; cursor: pointer; border-bottom: 1px dotted rgba(255, 220, 170, .2); animation: credit .45s ease-out backwards; }
.credits span { font: 400 19px/1 var(--marquee-font); letter-spacing: .04em; color: var(--cream); }
.credits small { flex: 1; font-size: 12px; color: var(--muted); }
.credits b { font: 400 19px/1 var(--marquee-font); color: var(--amber); }
@keyframes credit { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Roomy and short screens ---------- */
@media (max-height: 700px) {
  /* Short phones: everything except the board is compacted, and the board takes the rest. */
  :root { --board: min(calc(100vw - 56px), calc(100dvh - 390px)); }
  .poster { height: 38px; }
  .poster h1 { font-size: 19px; }
  .now-showing { display: none; }
  .marquee { padding: 15px; }
  .key { height: 30px; }
  .kbd { gap: 4px; }
}
/* Shorter phones: the mode tabs tuck into the corner beside the circle so it can grow. */
@media (max-width: 899px) and (max-height: 760px) {
  .booth.wheel-mode .tabs, .booth.wheel-mode .curtain-btn { position: absolute; z-index: 4; left: 10px; bottom: 10px; width: 64px; }
  .booth.wheel-mode .tabs { grid-template-columns: 1fr; gap: 4px; }
  .booth.wheel-mode .tab { height: 30px; gap: 4px; font-size: 14px; }
  .booth.wheel-mode .tab b { font-size: 10px; }
  .booth.wheel-mode .curtain-btn { height: 66px; padding: 0 4px; font-size: 15px; line-height: 1.05; }
  .booth.wheel-mode .pic { width: 60px; }}
@media (min-width: 900px) and (min-height: 560px) {
  :root { --board: min(66dvh, 46vw); }
  .poster { height: 68px; flex: none; }
  .poster h1 { font-size: 32px; }
  .stage { flex-direction: row; align-items: center; gap: 22px; }
  .marquee-column { flex: 1; }
  .marquee { padding: 26px; }
  .console-column { flex: 0 0 410px; height: 100%; }
  .booth { flex: none; min-height: 380px; }
  .mode-area { flex: none; height: 208px; }
  .clue-list { display: block; flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; border-radius: 12px; background: rgba(14, 14, 28, .72); border: 1px solid rgba(255, 200, 130, .2); }
  #openList { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bulb, .now-showing, .neon { animation: none; }
}

/* Long board names shrink so the phone header doesn't cut them off. */
.poster h1.long { font-size: clamp(16px, 4.8vw, 32px); }