/* ===================================================================
   CINEMA SLAUGHTER — styles
   Grindhouse × Jackbox × punk zine. VHS-sleeve cards.
   Theme tokens are set on <html data-theme="..."> and via CS.Settings vars.
   =================================================================== */

/* ---------- THEME PALETTES ---------- */
:root {
  --paper:    #ece3cf;
  --paper-2:  #ddd0b2;
  --ink:      #15110f;
  --bg:       #0b0a0c;
  --bg-2:     #16131a;
  --blood:    #c91414;
  --blood-deep:#7d0a0a;
  --chroma-a: #ff2d7e;   /* VHS magenta */
  --chroma-b: #1fe3e8;   /* VHS cyan     */
  --chroma-c: #f7e029;   /* acid yellow  */
  --bone:     #f3ecd9;
  --grain-opacity: .10;
  --scan-opacity:  .14;
  --vignette: .55;
  --card-paper: var(--paper);
  --halftone-opacity: 0;
}

html[data-theme="nasty"] {
  --paper:    #120d18;
  --paper-2:  #1c1326;
  --ink:      #f4ecff;
  --bg:       #06060a;
  --bg-2:     #0e0a16;
  --blood:    #ff2d7e;
  --blood-deep:#9c0e57;
  --chroma-a: #19e0e6;
  --chroma-b: #ff2d7e;
  --chroma-c: #b06bff;
  --bone:     #1c1326;
  --grain-opacity: .08;
  --scan-opacity:  .26;
  --vignette: .68;
  --card-paper: #160f1f;
  --halftone-opacity: 0;
}

html[data-theme="giallo"] {
  --paper:    #f2dd5c;
  --paper-2:  #e7c83a;
  --ink:      #1a1305;
  --bg:       #0c0f0c;
  --bg-2:     #0f1a16;
  --blood:    #b4181b;
  --blood-deep:#6c0f12;
  --chroma-a: #18a89b;
  --chroma-b: #b4181b;
  --chroma-c: #f2dd5c;
  --bone:     #f5e98e;
  --grain-opacity: .12;
  --scan-opacity:  .10;
  --vignette: .5;
  --card-paper: #f3e07f;
  --halftone-opacity: 0;
}

html[data-theme="xerox"] {
  --paper:    #efece4;
  --paper-2:  #d9d4c6;
  --ink:      #0a0a0a;
  --bg:       #111010;
  --bg-2:     #1a1918;
  --blood:    #e0140f;
  --blood-deep:#8c0a07;
  --chroma-a: #e0140f;
  --chroma-b: #111010;
  --chroma-c: #e0140f;
  --bone:     #f4f1ea;
  --grain-opacity: .16;
  --scan-opacity:  .06;
  --vignette: .45;
  --card-paper: #f1eee7;
  --halftone-opacity: .5;
}

/* ---------- RESET / BASE ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Archivo Black', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%3E%3Cpath%20d='M4,3L4,21L9,16L12,23L15,22L12,15L19,15Z'%20fill='%23c91414'%20stroke='%23ece3cf'%20stroke-width='1.4'%20stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto;
}
button, a, input, select, [tabindex], .vhs.pickable, .sub-card.judgeable, .pack-toggle, .seat .lock, .kick, .chooser .opt, label.fld {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%3Cpath%20d='M4,3L4,21L9,16L12,23L15,22L12,15L19,15Z'%20fill='%23f7e029'%20stroke='%2315110f'%20stroke-width='1.4'%20stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, pointer;
}
button:disabled { cursor: not-allowed; }
.hide-cursor, .hide-cursor * { cursor: none !important; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--blood); color: var(--bone); }

/* ---------- FONT ROLES ---------- */
.f-poster { font-family: 'Anton', 'Archivo Black', sans-serif; font-weight: 400; letter-spacing: .01em; }
.f-zine   { font-family: 'Archivo Black', sans-serif; }
.f-quote  { font-family: 'Libre Caslon Display', Georgia, serif; }
.f-mono   { font-family: 'Space Mono', ui-monospace, monospace; }

/* ===================================================================
   APP SHELL + FILM TEXTURES
   =================================================================== */
.cs-root {
  position: relative;
  min-height: 100cqh; height: 100cqh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--blood-deep) 30%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 70%);
  isolation: isolate;
}
/* film grain */
.cs-root::before {
  content: ""; position: fixed; inset: -50%; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  animation: grain 0.5s steps(3) infinite;
}
@keyframes grain {
  0%{transform:translate(0,0)} 33%{transform:translate(-4%,2%)} 66%{transform:translate(3%,-3%)} 100%{transform:translate(0,0)}
}
/* scanlines + vignette */
.cs-root::after {
  content: ""; position: fixed; inset: 0; z-index: 61; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,calc(var(--scan-opacity) * var(--scan-strength,1))) 0 1px, transparent 1px 3px),
    radial-gradient(130% 110% at 50% 50%, transparent 55%, rgba(0,0,0,var(--vignette)) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .cs-root::before { animation: none; }
}

/* ===================================================================
   TOP BAR / MARQUEE
   =================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, black), color-mix(in srgb, var(--bg) 80%, transparent));
  border-bottom: 2px solid color-mix(in srgb, var(--blood) 70%, black);
  backdrop-filter: blur(4px);
}
.brand {
  display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto;
}
.brand .reel {
  width: 26px; height: 26px; align-self: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--bg) 18%, transparent 19%),
    radial-gradient(circle at 50% 18%, var(--bg) 7%, transparent 8%),
    radial-gradient(circle at 82% 50%, var(--bg) 7%, transparent 8%),
    radial-gradient(circle at 50% 82%, var(--bg) 7%, transparent 8%),
    radial-gradient(circle at 18% 50%, var(--bg) 7%, transparent 8%),
    var(--blood);
  box-shadow: 0 0 0 2px var(--ink), 0 0 14px color-mix(in srgb, var(--blood) 60%, transparent);
  animation: spin 6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.brand h1 {
  margin: 0; font-size:calc((clamp(18px, 2.4cqw, 26px)) * var(--text-scale,1)); line-height: .9;
  color: var(--bone); text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--blood), 4px 4px 0 rgba(0,0,0,.6);
}
.brand h1 .slay { color: var(--blood); -webkit-text-stroke: 1px var(--bone); }

.topbar .spacer { flex: 1; }

.score-strip { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; min-width: 0; padding-bottom: 2px; scrollbar-width: none; }
.score-strip::-webkit-scrollbar { display: none; }
.score-strip > * { flex: 0 0 auto; }

.menu-btn { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 12px; border-radius: 4px; color: var(--bone);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bone) 26%, transparent); background: rgba(0,0,0,.32); transition: .15s; }
.menu-btn:hover { box-shadow: inset 0 0 0 1px var(--blood); background: color-mix(in srgb, var(--blood) 18%, transparent); }
.menu-btn .mb-bars { display: flex; flex-direction: column; gap: 3px; }
.menu-btn .mb-bars i { width: 16px; height: 2px; background: currentColor; display: block; }
.menu-btn .mb-lbl { font-size:calc((11px) * var(--text-scale,1)); letter-spacing: .14em; }

/* pause / intermission menu */
.pause-card { width: min(420px, 92cqw); background: #0c0c0c; border: 2px solid #000; border-radius: 8px; padding: 30px 28px;
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.95); color: #f4ecdf; animation: clapin .4s cubic-bezier(.2,1.2,.3,1) both; }
.pause-title { font-family: 'Anton', sans-serif; font-size: clamp(40px, 9cqw, 64px); text-transform: uppercase; color: #f4ecdf; text-shadow: 3px 3px 0 var(--blood); line-height: .9; margin: 10px 0 22px; }
.pause-actions { display: flex; flex-direction: column; gap: 10px; }
.pause-actions .leave:hover { box-shadow: inset 0 0 0 2px var(--blood); color: var(--blood); }
.pause-hint { margin-top: 18px; font-size:calc((11px) * var(--text-scale,1)); font-family: 'Space Mono', monospace; color: color-mix(in srgb, #f4ecdf 50%, transparent); text-align: center; line-height: 1.5; }
.round-chip {
  font-family: 'Space Mono', monospace; font-size:calc((11px) * var(--text-scale,1)); letter-spacing: .12em;
  color: var(--bone); opacity: .8; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--bone) 30%, transparent);
  padding: 4px 8px; border-radius: 2px;
}
.target-chip { color: var(--chroma-c); border-color: color-mix(in srgb, var(--chroma-c) 50%, transparent); opacity: 1; }

/* player pip in score strip */
.pip {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 3px; border-radius: 40px;
  background: rgba(0,0,0,.35);
  border: 1px solid color-mix(in srgb, var(--bone) 16%, transparent);
}
.pip.is-director { border-color: var(--blood); box-shadow: 0 0 12px color-mix(in srgb, var(--blood) 50%, transparent); }
.pip.is-you { border-color: var(--chroma-b); }
.pip .av {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-family: 'Archivo Black', sans-serif; font-size:calc((11px) * var(--text-scale,1)); color: #fff;
}
.pip .nm { font-family: 'Space Mono', monospace; font-size:calc((11px) * var(--text-scale,1)); color: var(--bone); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pip .sc { font-family: 'Anton', sans-serif; font-size:calc((16px) * var(--text-scale,1)); color: var(--chroma-c); line-height: 1; min-width: 14px; text-align: center; }
.pip .star { font-size:calc((10px) * var(--text-scale,1)); color: var(--blood); }

/* ===================================================================
   STAGE LAYOUT
   =================================================================== */
.stage {
  position: relative; z-index: 1;
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 22px 18px 60px;
}
.stage > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.stage > .stage-head { width: 100%; margin-bottom: 26px; }

/* play column: scrollable content above a docked hand tray */
.play-col { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; z-index: 1; }
.play-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 18px 18px; }
.play-scroll-inner { max-width: 1180px; margin: 0 auto; }
.hand-dock { flex: 0 0 auto; }
.stage-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.now-showing {
  font-family: 'Space Mono', monospace; font-size:calc((12px) * var(--text-scale,1)); letter-spacing: .3em;
  text-transform: uppercase; color: var(--blood);
  display: flex; align-items: center; gap: 10px;
}
.now-showing::before { content: "●"; color: var(--blood); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.phase-title {
  font-family: 'Anton', sans-serif; text-transform: uppercase;
  font-size: clamp(26px, 5cqw, 52px); line-height: .92; color: var(--bone);
  margin: 6px 0 0; text-wrap: balance;
}
.phase-title em { font-style: normal; color: var(--blood); }
.phase-sub { font-family: 'Space Mono', monospace; font-size:calc((12px) * var(--text-scale,1)); color: color-mix(in srgb, var(--bone) 65%, transparent); margin-top: 8px; max-width: 46ch; line-height: 1.5; }

/* compact prompt + tighter head inside the play column (submit/wait) */
.play-scroll .stage-head { margin-bottom: 10px; }
.play-scroll .now-showing { display: none; }
.play-scroll .phase-title { font-size:calc((clamp(17px, 2.6cqw, 24px)) * var(--text-scale,1)); margin: 0; }
.play-scroll .phase-sub { margin-top: 3px; font-size:calc((11px) * var(--text-scale,1)); }
.play-scroll .prompt-card { padding: 18px 22px 14px; }
.play-scroll .prompt-quote { font-size:calc((clamp(20px, 2.8cqw, 30px)) * var(--text-scale,1)); line-height: 1.12; }
.play-scroll .reel-tag { margin-bottom: 8px; }
.play-scroll .prompt-credits { margin-top: 12px; padding-top: 9px; }

/* ===================================================================
   PROMPT CARD — the marquee / film still
   =================================================================== */
.prompt-card {
  position: relative; border-radius: 4px; overflow: hidden;
  background:
    linear-gradient(135deg, #1b1410, #0b0907);
  border: 1px solid color-mix(in srgb, var(--blood) 40%, #000);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.9), inset 0 0 0 6px rgba(0,0,0,.4), inset 0 0 0 7px color-mix(in srgb, var(--chroma-c) 30%, transparent);
  padding: 30px 30px 22px;
  color: var(--bone);
}
.prompt-card .marquee-bulbs {
  position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, var(--chroma-c) 0 6px, transparent 6px 18px) top/100% 4px no-repeat,
    repeating-linear-gradient(90deg, var(--chroma-c) 0 6px, transparent 6px 18px) bottom/100% 4px no-repeat;
  opacity: .5;
}
.prompt-card .reel-tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-family: 'Space Mono', monospace; font-size:calc((11px) * var(--text-scale,1)); letter-spacing: .2em; text-transform: uppercase;
  color: var(--chroma-c);
}
.prompt-card .reel-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blood); box-shadow: 0 0 8px var(--blood); }
.prompt-quote {
  font-family: 'Libre Caslon Display', serif; font-weight: 400;
  font-size: clamp(24px, 4.4cqw, 46px); line-height: 1.12; letter-spacing: .005em;
  text-wrap: balance;
}
.prompt-quote .blank {
  display: inline-block; min-width: 1.6em; margin: 0 .12em; padding: 0 .25em;
  border-bottom: 4px solid var(--blood);
  color: transparent; position: relative; transform: translateY(2px);
}
.prompt-quote .blank.n::after {
  content: attr(data-n); position: absolute; top: -.7em; left: 50%; transform: translateX(-50%);
  font-family: 'Space Mono', monospace; font-size: .32em; color: var(--blood); letter-spacing: 0;
}
.prompt-quote .blank.filled {
  border-bottom-color: var(--chroma-c); color: var(--ink);
  background: var(--chroma-c); padding: .04em .3em; transform: rotate(-1deg) translateY(-2px);
  font-family: 'Archivo Black', sans-serif; font-size: .6em; box-decoration-break: clone;
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
.prompt-credits {
  margin-top: 22px; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--bone) 28%, transparent);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: 'Space Mono', monospace; font-size:calc((12px) * var(--text-scale,1)); color: color-mix(in srgb, var(--bone) 75%, transparent);
}
.prompt-credits .movie { color: var(--bone); text-transform: uppercase; letter-spacing: .06em; }
.medium-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--chroma-b) 50%, transparent); color: var(--chroma-b);
  font-size:calc((10px) * var(--text-scale,1)); letter-spacing: .18em;
}
.pick-badge {
  font-family: 'Anton', sans-serif; color: var(--ink); background: var(--chroma-c);
  padding: 3px 10px; transform: rotate(-2deg); letter-spacing: .04em; font-size:calc((13px) * var(--text-scale,1));
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}

/* ===================================================================
   VHS SLEEVE — the answer card
   =================================================================== */
.vhs {
  --w: 200px;
  position: relative; width: var(--w); aspect-ratio: 100 / 162;
  border-radius: 5px 6px 5px 5px;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--card-paper) 86%, #000) 0 14px, var(--card-paper) 14px);
  color: var(--ink);
  box-shadow: 0 16px 30px -16px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.25);
  overflow: hidden; user-select: none;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, filter .18s;
}
/* spine */
.vhs::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 14px; width: 2px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 6px, transparent 6px 12px);
}
/* halftone option (xerox) */
.vhs::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--halftone-opacity);
  background-image: radial-gradient(rgba(0,0,0,.55) 1px, transparent 1.4px);
  background-size: 4px 4px; mix-blend-mode: multiply;
}
.vhs .spine-text {
  position: absolute; left: 2px; top: 0; bottom: 0; width: 14px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Space Mono', monospace; font-size:calc((7px) * var(--text-scale,1)); letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 60%, transparent); white-space: nowrap; overflow: hidden;
}
.vhs .sleeve {
  position: absolute; inset: 0 0 0 18px; padding: 8px 10px 9px; display: flex; flex-direction: column;
  overflow: hidden;
}
.vhs .chroma {
  height: 6px; display: flex; margin-bottom: 6px; border-radius: 1px; overflow: hidden; flex: 0 0 auto;
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.vhs .chroma i { flex: 1; }
.vhs .chroma i:nth-child(1){ background: var(--chroma-a); }
.vhs .chroma i:nth-child(2){ background: var(--chroma-b); }
.vhs .chroma i:nth-child(3){ background: var(--chroma-c); }
.vhs .chroma i:nth-child(4){ background: var(--blood); }
.vhs .label-top {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; flex: 0 0 auto;
  font-family: 'Space Mono', monospace; font-size:calc((8px) * var(--text-scale,1)); letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.vhs .rating {
  border: 1.5px solid var(--ink); padding: 1px 4px; border-radius: 1px; color: var(--ink);
  font-family: 'Archivo Black', sans-serif; font-size:calc((8px) * var(--text-scale,1)); letter-spacing: .04em;
}
.vhs .answer-text {
  font-family: 'Archivo Black', sans-serif;
  font-size:calc((clamp(12px, 1.05cqw, 15px)) * var(--text-scale,1)); line-height: 1.08; text-transform: uppercase;
  color: var(--ink); margin: 1px 0; flex: 1 1 auto;
  display: block;
  letter-spacing: -.01em; text-wrap: balance;
  /* NOT break-word. useFitText (cards.jsx) shrinks this text until it fits,
     and it can only do that if over-long text actually overflows. With
     break-word the browser split words instead — "A HUMAN CENTIPE/DE",
     "SALTBUR/N'S BATHTUB" — so nothing ever overflowed and the shrink never
     ran, which is the opposite of what that hook is documented to do. */
  overflow-wrap: normal; min-width: 0; min-height: 0; overflow: hidden;
}
.vhs.small .answer-text { font-size:calc((12px) * var(--text-scale,1)); }
.vhs .ref {
  font-family: 'Space Mono', monospace; font-size:calc((8px) * var(--text-scale,1)); letter-spacing: .04em; flex: 0 0 auto;
  color: var(--blood-deep); text-transform: uppercase; margin-top: 4px; opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
}
.vhs .ref::before { content: "▸"; }
.vhs .barcode {
  height: 12px; margin-top: 5px; flex: 0 0 auto;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 2px, var(--ink) 2px 4px, transparent 4px 5px, var(--ink) 5px 7px, transparent 7px 9px);
  filter: contrast(1.4);
}
.vhs .foot {
  display: flex; align-items: center; justify-content: space-between; margin-top: 3px; flex: 0 0 auto;
  font-family: 'Space Mono', monospace; font-size:calc((7px) * var(--text-scale,1)); letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* interactive states */
.vhs.pickable { cursor: pointer; }
.vhs.pickable:hover { transform: translateY(-10px) rotate(-1deg); box-shadow: 0 26px 40px -18px rgba(0,0,0,.95); filter: saturate(1.1); }
.vhs.selected {
  transform: translateY(-16px) rotate(0deg);
  box-shadow: 0 0 0 3px var(--chroma-c), 0 26px 44px -16px rgba(0,0,0,.95);
}
.vhs .pick-num {
  position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; z-index: 3;
  background: var(--chroma-c); color: var(--ink); border-radius: 50%;
  display: grid; place-items: center; font-family: 'Anton', sans-serif; font-size:calc((17px) * var(--text-scale,1));
  box-shadow: 0 4px 10px rgba(0,0,0,.6); border: 2px solid var(--ink);
  animation: pop .2s cubic-bezier(.2,1.5,.4,1);
}
@keyframes pop { from { transform: scale(0); } }

/* card-back (VHS spine only) for opponents / deck */
.vhs-back {
  width: var(--w, 200px); aspect-ratio: 100 / 162; border-radius: 5px;
  background:
    repeating-linear-gradient(0deg, #0e0a0a 0 8px, #161010 8px 16px);
  border: 1px solid #000; position: relative; overflow: hidden;
  box-shadow: 0 12px 24px -14px rgba(0,0,0,.9);
}
.vhs-back::after {
  content: "CINEMA SLAUGHTER"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: 'Anton', sans-serif; font-size:calc((10px) * var(--text-scale,1)); letter-spacing: .2em; color: var(--blood);
  writing-mode: vertical-rl; text-orientation: mixed; opacity: .6;
}

/* ===================================================================
   HAND (player's 10 cards)
   =================================================================== */
.hand-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; pointer-events: none; }
.hand-bar {
  pointer-events: auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent), color-mix(in srgb, var(--bg) 94%, black) 40%);
  border-top: 1px solid color-mix(in srgb, var(--blood) 40%, transparent);
  padding: 12px 12px 12px;
}
/* hand cards scale to viewport height so prompt always has room above */
.hand-scroll .vhs { height: clamp(158px, 34cqh, 222px); width: auto; }
.hand-scroll .vhs .answer-text { font-size:calc((clamp(11px, 1.5cqh, 14px)) * var(--text-scale,1)); }
.hand-scroll {
  display: flex; gap: 12px; overflow-x: auto; padding: 12px 12px 6px; scroll-snap-type: x mandatory;
  justify-content: flex-start; align-items: flex-end;
}
.hand-scroll.center { justify-content: center; }
.hand-scroll::-webkit-scrollbar { height: 8px; }
.hand-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--blood) 70%, black); border-radius: 4px; }
.hand-card { scroll-snap-align: center; flex: 0 0 auto; }
.hand-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1180px; margin: 0 auto; padding: 0 8px;
  font-family: 'Space Mono', monospace; font-size:calc((12px) * var(--text-scale,1)); color: color-mix(in srgb, var(--bone) 70%, transparent);
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase; letter-spacing: .04em;
  font-size:calc((15px) * var(--text-scale,1)); padding: 13px 24px; border-radius: 3px; color: var(--bone);
  background: var(--blood);
  box-shadow: 0 5px 0 var(--blood-deep), 0 10px 22px -8px rgba(0,0,0,.8);
  transition: transform .1s, box-shadow .1s, background .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--blood-deep), 0 14px 26px -8px rgba(0,0,0,.85); }
.btn:active { transform: translatey(3px); box-shadow: 0 2px 0 var(--blood-deep); }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: 0 5px 0 var(--blood-deep); transform: none; filter: grayscale(.4); }
.btn.ghost { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bone) 40%, transparent); }
.btn.ghost:hover { box-shadow: inset 0 0 0 2px var(--bone); transform: translateY(-2px); }
.btn.gold { background: var(--chroma-c); color: var(--ink); box-shadow: 0 5px 0 color-mix(in srgb, var(--chroma-c) 60%, #000), 0 10px 22px -8px rgba(0,0,0,.8); }
.btn.gold:hover { box-shadow: 0 7px 0 color-mix(in srgb, var(--chroma-c) 60%, #000), 0 14px 26px -8px rgba(0,0,0,.85); }
.btn.cyan { background: var(--chroma-b); color: #04201f; box-shadow: 0 5px 0 color-mix(in srgb, var(--chroma-b) 55%, #000), 0 10px 22px -8px rgba(0,0,0,.8); }
.btn.sm { font-size:calc((12px) * var(--text-scale,1)); padding: 9px 14px; box-shadow: 0 4px 0 var(--blood-deep); }

/* ===================================================================
   SUBMISSIONS GRID (judging / reveal)
   =================================================================== */
.subs-grid {
  display: grid; gap: 18px; margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: start;
}
.sub-tile { position: relative; }
.sub-card {
  position: relative; border-radius: 6px; padding: 18px 18px 16px; cursor: default;
  background: linear-gradient(160deg, color-mix(in srgb, var(--card-paper) 90%, #000), var(--card-paper));
  color: var(--ink);
  box-shadow: 0 14px 28px -14px rgba(0,0,0,.85), inset 0 0 0 1px rgba(0,0,0,.2);
  min-height: 130px; display: flex; flex-direction: column; gap: 10px;
  transition: transform .16s, box-shadow .16s;
}
.sub-card .ticket-no {
  position: absolute; top: -12px; left: 14px;
  font-family: 'Anton', sans-serif; font-size:calc((13px) * var(--text-scale,1)); color: var(--bone);
  background: var(--ink); padding: 4px 10px; transform: rotate(-2deg);
  letter-spacing: .1em; box-shadow: 2px 2px 0 var(--blood);
}
.sub-card .combo { font-family: 'Libre Caslon Display', serif; font-size:calc((clamp(16px, 1.7cqw, 22px)) * var(--text-scale,1)); line-height: 1.22; overflow-wrap: anywhere; }
.sub-card .combo .ans {
  font-family: 'Archivo Black', sans-serif; background: var(--chroma-c); color: var(--ink);
  padding: .02em .26em; box-decoration-break: clone; box-shadow: 1px 1px 0 rgba(0,0,0,.5);
  font-size: .82em; text-transform: uppercase;
}
.sub-card.judgeable { cursor: pointer; }
.sub-card.judgeable:hover { transform: translateY(-6px) rotate(.4deg); box-shadow: 0 0 0 3px var(--chroma-b), 0 22px 38px -16px rgba(0,0,0,.9); }
.sub-card.worst.judgeable:hover { box-shadow: 0 0 0 3px var(--blood), 0 22px 38px -16px rgba(0,0,0,.9); }
.sub-card.winner { animation: winflash .5s ease both; box-shadow: 0 0 0 4px var(--chroma-c), 0 0 50px color-mix(in srgb, var(--chroma-c) 40%, transparent); }
.sub-card.dim { opacity: .42; filter: grayscale(.5); }
@keyframes winflash { 0%{ transform: scale(.9); } 60%{ transform: scale(1.05); } 100%{ transform: scale(1); } }
.sub-author {
  display: flex; align-items: center; gap: 8px; margin-top: auto;
  font-family: 'Space Mono', monospace; font-size:calc((11px) * var(--text-scale,1)); color: color-mix(in srgb, var(--ink) 65%, transparent);
}
.sub-author .av { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size:calc((9px) * var(--text-scale,1)); color: #fff; font-family: 'Archivo Black', sans-serif; }
.crown {
  position: absolute; top: -16px; right: -10px; font-size:calc((26px) * var(--text-scale,1)); transform: rotate(14deg);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); animation: pop .3s cubic-bezier(.2,1.6,.4,1);
}

/* ===================================================================
   RESULT SCREEN
   =================================================================== */
.result-combo {
  max-width: 820px; margin: 0 auto; text-align: center;
  background:
    linear-gradient(135deg, #1b1410, #0b0907);
  border: 1px solid color-mix(in srgb, var(--chroma-c) 35%, #000);
  border-radius: 5px; padding: clamp(24px, 4cqw, 46px);
  box-shadow: 0 40px 70px -30px rgba(0,0,0,.9), inset 0 0 0 6px rgba(0,0,0,.4);
  color: var(--bone); position: relative; overflow: hidden;
}
.result-combo .quote {
  font-family: 'Libre Caslon Display', serif; font-size:calc((clamp(24px, 3.6cqw, 40px)) * var(--text-scale,1)); line-height: 1.18; text-wrap: balance;
}
.result-combo .quote .ans {
  font-family: 'Archivo Black', sans-serif; background: var(--chroma-c); color: var(--ink);
  padding: .04em .28em; box-decoration-break: clone; text-transform: uppercase; font-size: .8em;
  box-shadow: 2px 2px 0 rgba(0,0,0,.5); display: inline-block; transform: rotate(-1deg);
}
.result-winner-tag {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size:calc((18px) * var(--text-scale,1)); color: var(--chroma-c);
}
.result-ref { margin-top: 22px; font-family: 'Space Mono', monospace; font-size:calc((12px) * var(--text-scale,1)); color: color-mix(in srgb, var(--bone) 60%, transparent); }
.result-actions { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

/* ===================================================================
   DIRECTOR EVENT OVERLAY (clapperboard)
   =================================================================== */
.event-veil {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--blood-deep) 55%, transparent), rgba(0,0,0,.92) 70%);
  animation: veilin .3s ease both;
}
@keyframes veilin { from { opacity: 0; } }
.clap {
  width: min(560px, 94cqw); border-radius: 6px; overflow: hidden;
  background: #0c0c0c; color: #f4ecdf; border: 2px solid #000;
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.95);
  animation: clapin .5s cubic-bezier(.2,1.2,.3,1) both;
}
@keyframes clapin { from { transform: translateY(30px) scale(.92) rotate(-1deg); opacity: 0; } }
.clap .sticks {
  height: 46px; background: #0c0c0c; position: relative; overflow: hidden;
  border-bottom: 3px solid #000; transform-origin: left top; animation: snap 1s ease both;
}
@keyframes snap { 0%{ transform: rotate(-20deg); } 35%{ transform: rotate(-20deg);} 55%{ transform: rotate(0); } 60%{ transform: rotate(-3deg);} 100%{ transform: rotate(0);} }
.clap .sticks i { position: absolute; top: 0; bottom: 0; width: 34px; background: #f4ecdf; transform: skewX(-26deg); }
.clap .sticks i:nth-child(odd){ background: #0c0c0c; }
.clap .sticks i:nth-child(1){ left: 0; } .clap .sticks i:nth-child(2){ left: 28px; }
.clap .sticks i:nth-child(3){ left: 56px; } .clap .sticks i:nth-child(4){ left: 84px; }
.clap .sticks i:nth-child(5){ left: 112px; } .clap .sticks i:nth-child(6){ left: 140px; }
.clap .sticks i:nth-child(7){ left: 168px; } .clap .sticks i:nth-child(8){ left: 196px; }
.clap .sticks i:nth-child(9){ left: 224px; } .clap .sticks i:nth-child(10){ left: 252px; }
.clap .sticks i:nth-child(11){ left: 280px; } .clap .sticks i:nth-child(12){ left: 308px; }
.clap .sticks i:nth-child(13){ left: 336px; } .clap .sticks i:nth-child(14){ left: 364px; }
.clap .sticks i:nth-child(15){ left: 392px; } .clap .sticks i:nth-child(16){ left: 420px; }
.clap-body { padding: 26px 28px 28px; }
.clap-kicker { font-family: 'Space Mono', monospace; font-size:calc((11px) * var(--text-scale,1)); letter-spacing: .3em; text-transform: uppercase; color: var(--blood); display: flex; align-items: center; gap: 10px; }
.clap-kicker .strip { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--blood) 0 6px, transparent 6px 12px); }
.clap-name { font-family: 'Anton', sans-serif; font-size: clamp(28px, 5.4cqw, 50px); text-transform: uppercase; line-height: .94; margin: 10px 0 20px; color: #f4ecdf; text-shadow: 3px 3px 0 var(--blood); text-wrap: balance; }
.clap-rule { font-family: 'Libre Caslon Display', serif; font-size:calc((clamp(16px, 2.2cqw, 21px)) * var(--text-scale,1)); line-height: 1.35; color: #e7ddc8; }
.clap-note { margin-top: 16px; font-family: 'Space Mono', monospace; font-size:calc((11px) * var(--text-scale,1)); color: color-mix(in srgb, #f4ecdf 55%, transparent); line-height: 1.5; }
.clap-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.clap-slate { display:flex; gap:14px; font-family:'Space Mono',monospace; font-size:calc((10px) * var(--text-scale,1)); letter-spacing:.1em; color: color-mix(in srgb, #f4ecdf 50%, transparent); margin-top: 14px; text-transform: uppercase; }
.clap-slate b { color: var(--chroma-c); }

/* ===================================================================
   SUBMIT COUNTDOWN + DIRECTOR ALERT
   =================================================================== */
.countdown { display: flex; align-items: center; gap: 8px; }
.cd-track { width: 64px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; }
.cd-fill { display: block; height: 100%; background: var(--chroma-b); border-radius: 3px; transition: width 1s linear; }
.countdown.low .cd-fill { background: var(--blood); }
.cd-num { font-size:calc((12px) * var(--text-scale,1)); color: var(--bone); min-width: 26px; text-align: right; }
.countdown.low .cd-num { color: var(--blood); animation: cdpulse .5s steps(2) infinite; }
@keyframes cdpulse { 50% { opacity: .35; } }
.dir-clock { margin-left: 14px; color: color-mix(in srgb, var(--bone) 70%, transparent); }
.dir-clock b { color: var(--chroma-c); }

.event-veil.alert-veil { overflow:hidden; isolation:isolate; background: #120202; animation: alertFlash .5s steps(2) infinite; }
@keyframes alertFlash { 0%,100% { background: #200404; } 50% { background: #0a0000; } }
.evt-alert { position: relative; z-index:1; text-align: center; padding: 30px; overflow: hidden; animation: alertShake .26s steps(2) 7; }
@media (prefers-reduced-motion: reduce) { .evt-alert { animation: none; } .event-veil.alert-veil { animation: none; background: #160303; } }
@keyframes alertShake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-4px,2px); } 75% { transform: translate(4px,-2px); } }
.alert-strobe { position:absolute; z-index:0; left:50%; top:50%; width:200vmax; height:200vmax; translate:-50% -50%; pointer-events:none;
  background: repeating-conic-gradient(from 0deg, rgba(201,20,20,0) 0 10deg, rgba(201,20,20,.14) 10deg 20deg);
  animation: spin 9s linear infinite; }
.alert-kicker { position: relative; color: var(--blood); letter-spacing: .3em; font-size:calc((13px) * var(--text-scale,1)); animation: blink .6s steps(2) infinite; }
.alert-title { position: relative; font-size: clamp(48px, 13cqw, 132px); color: var(--bone); text-transform: uppercase; line-height: .82; margin: 14px 0; text-shadow: 4px 4px 0 var(--blood), 0 0 44px rgba(201,20,20,.6); }
.alert-sub { position: relative; color: color-mix(in srgb, var(--bone) 72%, transparent); letter-spacing: .24em; font-size:calc((12px) * var(--text-scale,1)); }
.alert-bars { position: relative; height: 13px; max-width: 460px; margin: 16px auto; opacity: .9;
  background: repeating-linear-gradient(45deg, var(--chroma-c) 0 18px, #000 18px 36px); background-size: 51px 100%; }
.alert-bars.top { animation: barscroll .5s linear infinite; }
.alert-bars.bot { animation: barscroll .5s linear infinite reverse; }
@keyframes barscroll { to { background-position: 51px 0; } }
.chooser { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chooser .opt {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 40px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #f4ecdf;
  font-family: 'Space Mono', monospace; font-size:calc((12px) * var(--text-scale,1)); cursor: pointer; transition: .15s;
}
.chooser .opt:hover { border-color: var(--chroma-c); transform: translateY(-2px); }
.chooser .opt.sel { background: var(--chroma-c); color: #1a1305; border-color: var(--chroma-c); }
.chooser .opt .av { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size:calc((9px) * var(--text-scale,1)); color: #fff; font-family: 'Archivo Black', sans-serif; }

/* ===================================================================
   WAITING / STATUS
   =================================================================== */
.waiting-rail { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.wait-chip {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 4px;
  background: rgba(0,0,0,.35); border: 1px solid color-mix(in srgb, var(--bone) 14%, transparent);
  font-family: 'Space Mono', monospace; font-size:calc((12px) * var(--text-scale,1)); color: var(--bone);
  transition: .25s;
}
.wait-chip.done { border-color: var(--chroma-b); }
.wait-chip.done .state { color: var(--chroma-b); }
.wait-chip .state { color: color-mix(in srgb, var(--bone) 50%, transparent); text-transform: uppercase; font-size:calc((10px) * var(--text-scale,1)); letter-spacing: .12em; display: flex; align-items: center; gap: 6px; }
.wait-chip .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size:calc((11px) * var(--text-scale,1)); color: #fff; font-family: 'Archivo Black', sans-serif; }
.dots::after { content: ""; animation: dots 1.4s steps(4) infinite; }
@keyframes dots { 0%{content:"";} 25%{content:".";} 50%{content:"..";} 75%{content:"...";} }

.thinking {
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 4px;
  background: rgba(0,0,0,.4); border: 1px solid color-mix(in srgb, var(--blood) 40%, transparent);
  font-family: 'Space Mono', monospace; font-size:calc((13px) * var(--text-scale,1)); color: var(--bone); margin-top: 20px;
}
.thinking .reel { width: 18px; height: 18px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--bone) 25%, transparent); border-top-color: var(--blood); animation: spin .8s linear infinite; }

/* ===================================================================
   GAME OVER
   =================================================================== */
.gover { text-align: center; padding: 26px 24px; }
.gover .stamp {
  font-family: 'Anton', sans-serif;
  /* Sized against the LOGICAL canvas — #res-stage is the size container (res.css).
     This was 12cqw, which measures the window: in locked-resolution mode the stage is
     scaled by a transform, so the title sized itself against the monitor instead of
     the frame it lives in and ran off both edges. The cap also has to survive Anton
     failing to load, since the fallback grotesque is far wider per character. */
  font-size: clamp(30px, 7cqw, 84px); line-height: .86;
  text-transform: uppercase; color: var(--bone);
  text-shadow: .055em .055em 0 var(--blood), .11em .11em 0 rgba(0,0,0,.5);
  margin: 0; text-wrap: balance; overflow-wrap: break-word;
}
/* the second line is a player NAME (up to 20 chars, e.g. "The Festival Darling
   wins"), so it can't carry the headline's size */
.gover .winner-name { color: var(--chroma-c); display: block; font-size: .66em; margin-top: .1em; }
@supports not (width: 1cqw) {
  .gover .stamp { font-size: clamp(30px, 6.5cqw, 84px); }
}
.final-board { max-width: 460px; margin: 30px auto 0; display: flex; flex-direction: column; gap: 10px; }
.final-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 4px;
  background: rgba(0,0,0,.4); border: 1px solid color-mix(in srgb, var(--bone) 14%, transparent);
}
.final-row.top { border-color: var(--chroma-c); box-shadow: 0 0 24px color-mix(in srgb, var(--chroma-c) 25%, transparent); }
.final-row .rank { font-family: 'Anton', sans-serif; font-size:calc((22px) * var(--text-scale,1)); color: color-mix(in srgb, var(--bone) 55%, transparent); width: 26px; }
.final-row .nm { flex: 1; text-align: left; font-family: 'Archivo Black', sans-serif; color: var(--bone); font-size:calc((15px) * var(--text-scale,1)); }
.final-row .sc { font-family: 'Anton', sans-serif; font-size:calc((26px) * var(--text-scale,1)); color: var(--chroma-c); }

/* ===================================================================
   TOASTS / SAVED COMBOS
   =================================================================== */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90;
  background: var(--ink); color: var(--bone); border: 1px solid var(--blood);
  padding: 12px 18px; border-radius: 4px; font-family: 'Space Mono', monospace; font-size:calc((13px) * var(--text-scale,1));
  box-shadow: 0 16px 30px -12px rgba(0,0,0,.8); animation: toastin .3s ease both;
  display: flex; align-items: center; gap: 10px;
}
@keyframes toastin { from { transform: translate(-50%, 16px); opacity: 0; } }

/* ===================================================================
   MISC / UTIL
   =================================================================== */
.deal-anim { animation: dealIn .5s cubic-bezier(.2,.9,.3,1) both; }
@keyframes dealIn { from { transform: translateY(40px) rotate(6deg); opacity: 0; } }
.flip-in { animation: flipIn .5s cubic-bezier(.2,.8,.3,1) both; }
@keyframes flipIn { from { transform: rotateY(90deg); opacity: 0; } }
.glitch-in { animation: glitchIn .45s steps(2) both; }
@keyframes glitchIn {
  0% { clip-path: inset(0 0 90% 0); transform: translateX(-6px); filter: hue-rotate(40deg); }
  30% { clip-path: inset(40% 0 20% 0); transform: translateX(5px); }
  60% { clip-path: inset(10% 0 50% 0); transform: translateX(-3px); }
  100% { clip-path: inset(0 0 0 0); transform: none; filter: none; }
}
.shake { animation: shake .4s; }
@keyframes shake { 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }

.center-col { display: flex; flex-direction: column; align-items: center; }
.hidden { display: none !important; }
.tap-hint { font-family: 'Space Mono', monospace; font-size:calc((12px) * var(--text-scale,1)); color: color-mix(in srgb, var(--bone) 55%, transparent); }

/* small screens */
@media (max-width: 640px) {
  .vhs { --w: 150px; }
  .vhs-back { width: 150px; }
  .stage { padding: 16px 12px 150px; }
  .brand h1 { font-size:calc((18px) * var(--text-scale,1)); }
  .pip .nm { max-width: 56px; }
}

@media(prefers-reduced-motion:reduce){.alert-strobe{animation:none}}