/* ===================================================================
   CINEMA SLAUGHTER — round-flow styles (voting model)
   Vote · Tally · Act cards · Slate · Act break · Credits · Explainer
   Builds on styles.css tokens (--blood, --bone, --chroma-*, fonts).
   =================================================================== */

/* ---------- centered structure stages ---------- */
.actcard-stage, .slate-stage, .explainer-stage { display: grid; place-items: center; }

/* ===================================================================
   VOTE
   =================================================================== */
.vote-prompt { max-width: 980px; margin: 0 auto 18px; }
.vote-prompt.slim .prompt-card { padding: 16px 22px 12px; }
.vote-prompt.slim .prompt-quote { font-size:calc((clamp(18px, 2.4cqw, 28px)) * var(--text-scale,1)); }

.vote-grid { margin-top: 6px; }
.sub-card.votable { cursor: pointer; }
.sub-card.votable: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.votable:hover { box-shadow: 0 0 0 3px var(--blood), 0 22px 38px -16px rgba(0,0,0,.9); }
.sub-card.ranked { box-shadow: 0 0 0 3px var(--chroma-c), 0 18px 34px -16px rgba(0,0,0,.9); transform: translateY(-4px); }
.sub-card.own { opacity: .7; outline: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); outline-offset: -8px; }

.rank-badge {
  position: absolute; top: -14px; right: -10px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  min-width: 38px; padding: 6px 8px; border-radius: 4px;
  font-family: 'Anton', sans-serif; font-size:calc((15px) * var(--text-scale,1)); color: var(--ink);
  background: var(--chroma-c); border: 2px solid var(--ink);
  box-shadow: 0 4px 10px rgba(0,0,0,.55); animation: pop .22s cubic-bezier(.2,1.5,.4,1);
}
.rank-badge b { font-family: 'Space Mono', monospace; font-weight: 700; font-size:calc((9px) * var(--text-scale,1)); margin-top: 2px; letter-spacing: .02em; }
.rank-badge.r1 { background: var(--chroma-c); }
.rank-badge.r2 { background: var(--chroma-b); color: #04201f; border-color: #04201f; }
.rank-badge.r3 { background: var(--chroma-a); color: #2a0014; border-color: #2a0014; }

.own-tag { color: var(--blood-deep) !important; font-weight: 700; }

.vote-bar { padding-top: 14px; }
.vote-progress { display: inline-flex; align-items: center; gap: 10px; }
.vp-dots { display: inline-flex; gap: 4px; }
.vp-dots i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--bone) 22%, transparent); transition: .2s; }
.vp-dots i.in { background: var(--chroma-b); box-shadow: 0 0 8px color-mix(in srgb, var(--chroma-b) 60%, transparent); }

/* ===================================================================
   TALLY (Jackbox-style reveal)
   =================================================================== */
.tally-stage { width: 100%; }
.tally-list { display: flex; flex-direction: column; gap: 12px; max-width: 920px; margin: 18px auto 0; }
.tally-row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 16px 18px; border-radius: 6px; position: relative;
  background: linear-gradient(160deg, color-mix(in srgb, var(--card-paper) 90%, #000), var(--card-paper));
  color: var(--ink); box-shadow: 0 14px 28px -16px rgba(0,0,0,.85), inset 0 0 0 1px rgba(0,0,0,.18);
}
.tally-row.ghost {
  background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bone) 12%, transparent);
  min-height: 64px; border-radius: 6px;
}
.tally-row.reveal { animation: tallyIn .5s cubic-bezier(.2,.9,.3,1) both; }
@keyframes tallyIn { from { transform: translateY(18px) scale(.97); opacity: 0; } }
.tally-row.winner { box-shadow: 0 0 0 3px var(--chroma-c), 0 18px 34px -16px rgba(0,0,0,.9); }
.tally-row.crowned { animation: winflash .5s ease both; box-shadow: 0 0 0 4px var(--chroma-c), 0 0 50px color-mix(in srgb, var(--chroma-c) 45%, transparent); }
.tally-row .crown { position: absolute; top: -18px; left: 50%; transform: translateX(-50%) rotate(0); font-size:calc((30px) * var(--text-scale,1)); filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.tr-combo { font-family: 'Libre Caslon Display', serif; font-size:calc((clamp(15px, 1.7cqw, 21px)) * var(--text-scale,1)); line-height: 1.2; overflow-wrap: anywhere; }
.tr-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; }
.tr-side { display: flex; align-items: center; gap: 14px; }
.tr-breakdown { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.tr-breakdown .bd { font-size:calc((10px) * var(--text-scale,1)); letter-spacing: .04em; padding: 2px 6px; border-radius: 2px; color: var(--ink); }
.bd.b1 { background: var(--chroma-c); } .bd.b2 { background: var(--chroma-b); } .bd.b3 { background: var(--chroma-a); color: #2a0014; }
.bd.zero { background: color-mix(in srgb, var(--ink) 12%, transparent); color: color-mix(in srgb, var(--ink) 55%, transparent); }
.tr-points { display: flex; flex-direction: column; align-items: center; min-width: 56px; line-height: 1; }
.tr-points b { font-family: 'Anton', sans-serif; font-size:calc((32px) * var(--text-scale,1)); color: var(--blood); }
.tr-points span { font-family: 'Space Mono', monospace; font-size:calc((9px) * var(--text-scale,1)); letter-spacing: .08em; color: color-mix(in srgb, var(--ink) 60%, transparent); margin-top: 2px; }
.tr-author { display: flex; align-items: center; gap: 6px; font-family: 'Space Mono', monospace; font-size:calc((11px) * var(--text-scale,1)); color: color-mix(in srgb, var(--ink) 70%, transparent); min-width: 70px; }
.tr-author .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; }
.tally-cont { text-align: center; margin-top: 26px; animation: toastin .4s ease both; }

@media (max-width: 620px) {
  .tally-row { grid-template-columns: 1fr; }
  .tr-side { justify-content: space-between; }
}

/* ===================================================================
   ACT CARD
   =================================================================== */
.actcard { text-align: center; padding: 30px; max-width: 760px; }
.ac-kicker { display: flex; align-items: center; justify-content: center; gap: 14px; font-size:calc((12px) * var(--text-scale,1)); letter-spacing: .3em; color: var(--blood); text-transform: uppercase; }
.ac-kicker .strip { width: 60px; height: 1px; background: repeating-linear-gradient(90deg, var(--blood) 0 6px, transparent 6px 12px); }
.ac-act { font-family: 'Space Mono', monospace; letter-spacing: .5em; color: var(--bone); opacity: .7; margin: 26px 0 -6px; font-size:calc((16px) * var(--text-scale,1)); }
.ac-title { font-size: clamp(80px, 22cqw, 220px); line-height: .82; color: var(--bone); text-transform: uppercase; text-shadow: 5px 5px 0 var(--blood), 10px 10px 0 rgba(0,0,0,.5); margin: 0; }
.actcard.finale .ac-title { font-size: clamp(54px, 13cqw, 130px); }
.actcard.finale .ac-title .slay { color: var(--blood); -webkit-text-stroke: 2px var(--bone); }
.ac-sub { margin: 18px auto 30px; max-width: 44ch; line-height: 1.6; font-size:calc((13px) * var(--text-scale,1)); color: color-mix(in srgb, var(--bone) 70%, transparent); }
.ac-sub b { color: var(--chroma-c); }
.big-start { font-size:calc((18px) * var(--text-scale,1)); padding: 16px 30px; }

/* ===================================================================
   ROUND SLATE (between-reels)
   =================================================================== */
.slate-card {
  width: min(420px, 90cqw); background: #0c0c0c; border: 2px solid #000; border-radius: 6px; overflow: hidden;
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.95); animation: clapin .4s cubic-bezier(.2,1.2,.3,1) both;
}
.slate-sticks { height: 40px; display: flex; }
.slate-sticks i { flex: 1; background: #f4ecdf; transform: skewX(-22deg); }
.slate-sticks i:nth-child(odd) { background: #0c0c0c; }
.slate-rows { padding: 20px 22px 6px; display: flex; flex-direction: column; gap: 8px; }
.slate-rows div { display: flex; justify-content: space-between; gap: 12px; font-size:calc((12px) * var(--text-scale,1)); color: color-mix(in srgb, #f4ecdf 55%, transparent); border-bottom: 1px dashed rgba(255,255,255,.12); padding-bottom: 6px; }
.slate-rows b { color: var(--chroma-c); letter-spacing: .06em; }
.slate-take { padding: 6px 22px 22px; font-size:calc((40px) * var(--text-scale,1)); color: #f4ecdf; text-transform: uppercase; text-shadow: 2px 2px 0 var(--blood); }
.slate-take::after { content: ""; animation: dots 1.2s steps(4) infinite; }
.slate-skip { margin-top: 16px; font-size:calc((11px) * var(--text-scale,1)); letter-spacing: .14em; color: color-mix(in srgb, var(--bone) 45%, transparent); text-transform: uppercase; text-align: center; }

/* ===================================================================
   ACT BREAK
   =================================================================== */
.actbreak { max-width: 560px; margin: 10px auto 0; padding: 10px 0 40px; }

/* ===================================================================
   END CREDITS
   =================================================================== */
.credits-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--blood-deep) 22%, transparent), transparent 60%); }
.credits-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, var(--bg) 0%, transparent 16%, transparent 84%, var(--bg) 100%); }
.credits-scroll { position: absolute; left: 0; right: 0; top: 0; padding: 0 24px; text-align: center; transform: translateY(100%); animation: creditsRoll linear forwards; }
@keyframes creditsRoll { from { transform: translateY(100%); } to { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .credits-scroll { animation-duration: 1s !important; } }
.cr-marquee { padding: 60px 0 40px; }
.cr-marquee.end { padding: 60px 0 120px; }
.cr-presents { font-size:calc((12px) * var(--text-scale,1)); letter-spacing: .32em; color: var(--blood); }
.cr-title { font-size: clamp(40px, 9cqw, 90px); color: var(--bone); text-transform: uppercase; line-height: .9; margin: 12px 0; text-shadow: 3px 3px 0 var(--blood); }
.cr-title .slay { color: var(--blood); -webkit-text-stroke: 1px var(--bone); }
.cr-feature { font-size:calc((11px) * var(--text-scale,1)); letter-spacing: .22em; color: color-mix(in srgb, var(--bone) 60%, transparent); }
.cr-section { font-size:calc((12px) * var(--text-scale,1)); letter-spacing: .3em; color: var(--chroma-c); margin: 46px 0 24px; text-transform: uppercase; }
.cr-reel { margin: 0 auto 30px; max-width: 620px; }
.cr-reel-no { font-size:calc((10px) * var(--text-scale,1)); letter-spacing: .2em; color: var(--blood); margin-bottom: 8px; }
.cr-quote { font-size:calc((clamp(18px, 2.6cqw, 26px)) * var(--text-scale,1)); color: var(--bone); line-height: 1.25; }
.cr-quote .ans { font-family: 'Archivo Black', sans-serif; background: var(--chroma-c); color: var(--ink); padding: .02em .26em; box-decoration-break: clone; font-size: .8em; text-transform: uppercase; }
.cr-won { font-size:calc((11px) * var(--text-scale,1)); letter-spacing: .12em; color: color-mix(in srgb, var(--bone) 65%, transparent); margin-top: 10px; text-transform: uppercase; }
.cr-src { color: color-mix(in srgb, var(--bone) 45%, transparent); }
.cr-cast { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.cr-cast-row { display: flex; align-items: baseline; gap: 12px; }
.cr-cast-name { color: var(--bone); font-size:calc((16px) * var(--text-scale,1)); white-space: nowrap; }
.cr-cast-dots { flex: 1; border-bottom: 2px dotted color-mix(in srgb, var(--bone) 30%, transparent); transform: translateY(-4px); }
.cr-cast-score { color: var(--chroma-c); font-size:calc((26px) * var(--text-scale,1)); }
.credits-skip { position: absolute; right: 18px; bottom: 18px; z-index: 5; }

/* ===================================================================
   EXPLAINER (how-to)
   =================================================================== */
.explainer-card {
  width: min(760px, 94cqw); background: #0c0c0c; border: 2px solid #000; border-radius: 10px; overflow: hidden;
  box-shadow: 0 60px 110px -40px rgba(0,0,0,.95); color: #f4ecdf; animation: clapin .45s cubic-bezier(.2,1.2,.3,1) both;
}
.exp-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid color-mix(in srgb, var(--blood) 40%, #000); }
.exp-kicker { font-size:calc((11px) * var(--text-scale,1)); letter-spacing: .2em; color: var(--blood); display: flex; align-items: center; gap: 8px; }
.exp-skip { font-size:calc((11px) * var(--text-scale,1)); letter-spacing: .12em; color: color-mix(in srgb, #f4ecdf 55%, transparent); }
.exp-skip:hover { color: var(--bone); }
.exp-body { display: grid; grid-template-columns: 230px 1fr; gap: 4px; align-items: stretch; }
.exp-art { position: relative; display: grid; place-items: center; background: linear-gradient(155deg, #160f1f, #0b0907); overflow: hidden; min-height: 260px; }
.exp-copy { padding: 34px 34px 30px; }
.exp-tag { font-size:calc((11px) * var(--text-scale,1)); letter-spacing: .22em; color: var(--chroma-c); }
.exp-title { font-size: clamp(30px, 5cqw, 50px); line-height: .94; color: var(--bone); text-transform: uppercase; margin: 12px 0 16px; text-shadow: 2px 2px 0 var(--blood); }
.exp-title em { font-style: normal; color: var(--blood); }
.exp-text { font-size:calc((clamp(15px, 1.9cqw, 19px)) * var(--text-scale,1)); line-height: 1.5; color: #e7ddc8; }
.exp-text b { color: var(--chroma-c); font-family: 'Archivo Black', sans-serif; }
.exp-foot { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 22px; border-top: 1px solid color-mix(in srgb, var(--bone) 12%, transparent); }
.exp-dots { display: flex; gap: 8px; }
.exp-dot { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--bone) 24%, transparent); }
.exp-dot.on { background: var(--blood); box-shadow: 0 0 8px color-mix(in srgb, var(--blood) 60%, transparent); }
@media (max-width: 620px) { .exp-body { grid-template-columns: 1fr; } .exp-art { min-height: 150px; } }

/* explainer art bits */
.ea-cards { position: relative; width: 140px; height: 120px; }
.ea-card { position: absolute; left: 50%; bottom: 0; width: 56px; height: 90px; border-radius: 4px; background: var(--card-paper); border: 1px solid #000; transform-origin: bottom center; transform: translateX(-50%) rotate(calc((var(--n) - 1.5) * 16deg)); box-shadow: 0 8px 16px -8px rgba(0,0,0,.8); }
.ea-card::after { content: ""; position: absolute; inset: 6px; border-radius: 2px; background: repeating-linear-gradient(0deg, var(--ink) 0 2px, transparent 2px 7px); opacity: .25; }
.ea-vote { display: flex; gap: 12px; }
.ea-ballot { width: 50px; height: 64px; border-radius: 4px; display: grid; place-items: center; font-family: 'Anton', sans-serif; font-size:calc((30px) * var(--text-scale,1)); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 8px 16px -8px rgba(0,0,0,.8); }
.ea-ballot.b1 { background: var(--chroma-c); transform: rotate(-6deg) translateY(-6px); }
.ea-ballot.b2 { background: var(--chroma-b); transform: rotate(2deg); }
.ea-ballot.b3 { background: var(--chroma-a); transform: rotate(8deg) translateY(6px); }
.ea-chaos { position: relative; width: 140px; height: 120px; display: grid; place-items: center; }
.ea-clap { width: 92px; height: 70px; background: #0c0c0c; border: 2px solid var(--bone); border-radius: 4px; position: relative; z-index: 2; }
.ea-clap::before { content: ""; position: absolute; left: -2px; right: -2px; top: -14px; height: 16px; background: repeating-linear-gradient(90deg, #f4ecdf 0 12px, #0c0c0c 12px 24px); transform: skewX(-12deg) rotate(-12deg); transform-origin: left; }
.ea-strobe { position: absolute; inset: -40px; background: repeating-conic-gradient(from 0deg, transparent 0 12deg, color-mix(in srgb, var(--blood) 20%, transparent) 12deg 24deg); animation: spin 8s linear infinite; }
.ea-trophy { position: relative; display: grid; place-items: center; }
.ea-reel { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #0c0c0c 16%, transparent 17%), radial-gradient(circle at 50% 16%, #0c0c0c 8%, transparent 9%), radial-gradient(circle at 84% 50%, #0c0c0c 8%, transparent 9%), radial-gradient(circle at 50% 84%, #0c0c0c 8%, transparent 9%), radial-gradient(circle at 16% 50%, #0c0c0c 8%, transparent 9%), var(--blood); box-shadow: 0 0 0 4px var(--ink), 0 0 30px color-mix(in srgb, var(--blood) 60%, transparent); animation: spin 7s linear infinite; }
.ea-star { position: absolute; font-size:calc((40px) * var(--text-scale,1)); color: var(--chroma-c); filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }

/* ---------- director event: system targets ---------- */
.evt-targets { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.evt-target { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 40px; background: rgba(255,255,255,.06); border: 1px solid color-mix(in srgb, var(--chroma-c) 40%, transparent); color: #f4ecdf; font-family: 'Space Mono', monospace; font-size:calc((13px) * var(--text-scale,1)); }
.evt-target .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size:calc((11px) * var(--text-scale,1)); color: #fff; font-family: 'Archivo Black', sans-serif; }