/* ===================================================================
   CINEMA SLAUGHTER — THE CUT (elimination layer)
   Takes meters, the per-take "for the cut" control, and the cut reveal.
   Reads in the grindhouse vocabulary: blood-red danger, acid-yellow podium,
   Anton / Space Mono, film terminology.
   =================================================================== */

/* ---------- Takes meter (lives) ---------- */
.take-meter { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.take-meter .tk {
  width: 11px; height: 11px; border-radius: 2px; box-sizing: border-box;
  background: #fff;
  box-shadow: inset 0 0 0 1px #ffffffb3, 0 0 4px #ffffff26;
  position: relative; transition: background .25s, box-shadow .25s, opacity .25s;
}
.take-meter .tk::after {                       /* sprocket hole — reads as a film cell */
  content: ""; position: absolute; inset: 3px; border-radius: 1px;
  background: rgba(0,0,0,.32);
}
.take-meter .tk.spent {
  background: #8e2923; box-shadow: inset 0 0 0 1px #e95c50;
  opacity: 1;
}
.take-meter .tk.spent::after { background: transparent; }
.take-meter .tk.just { animation: tkBurn .9s cubic-bezier(.2,.9,.3,1) both; }
@keyframes tkBurn {
  0%   { background: var(--blood); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blood) 55%, transparent), 0 0 18px var(--blood); transform: scale(1.5); }
  40%  { background: #ff7568; box-shadow: 0 0 0 4px #e95c5055; transform: scale(1.4) rotate(-8deg); }
  100% { background: #8e2923; box-shadow: inset 0 0 0 1px #e95c50; transform: scale(1); }
}
.take-meter.compact .tk { width: 7px; height: 7px; border-radius: 1px; }
.take-meter.compact .tk::after { inset: 2px; }
.take-meter.dead { opacity: .8; }
.take-meter .tk-dead { color: var(--blood); font-size:calc((13px) * var(--text-scale,1)); line-height: 1; margin-left: 2px; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--blood) 60%, transparent)); }

/* pip in the top bar gets the meter between name + score */
.pip .take-meter { margin: 0 1px; }
.pip.pip-dead { opacity: .62; border-color: color-mix(in srgb, var(--blood) 55%, transparent); }
.pip.pip-dead .nm { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--blood) 70%, transparent); }

/* ---------- vote: the "for the cut" note + control ---------- */
.cut-note {
  margin-top: 12px; padding: 9px 12px; border-radius: 4px; line-height: 1.5;
  font-size:calc((12px) * var(--text-scale,1)); color: var(--bone); max-width: 60ch;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blood) 16%, transparent), color-mix(in srgb, var(--blood) 7%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blood) 45%, transparent);
}
.cut-note b { color: var(--chroma-c); }
.cut-note-tag {
  display: inline-block; margin-right: 8px; padding: 2px 7px; border-radius: 2px;
  font-weight: 700; letter-spacing: .14em; font-size:calc((10px) * var(--text-scale,1)); color: var(--bone);
  background: var(--blood); box-shadow: 0 2px 0 var(--blood-deep);
}
.cut-note-tag.dead { background: #000; color: var(--blood); box-shadow: inset 0 0 0 1px var(--blood); }
.cut-note-safe { color: color-mix(in srgb, var(--bone) 70%, transparent); }
.cut-note.elim { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.3)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blood) 60%, transparent); }

/* the cut toggle that sits on each rival take */
.cut-btn {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; width: 100%;
  justify-content: center; padding: 7px 10px; border-radius: 3px;
  font-size:calc((11px) * var(--text-scale,1)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--bone) 78%, transparent);
  background: rgba(0,0,0,.32);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blood) 42%, transparent);
  transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.cut-btn:hover { color: var(--bone); background: color-mix(in srgb, var(--blood) 22%, transparent); box-shadow: inset 0 0 0 1px var(--blood); }
.cut-btn:active { transform: translateY(1px); }
.cut-btn:disabled { opacity: .5; cursor: default; }
.cut-btn.on {
  color: #fff; background: var(--blood);
  box-shadow: inset 0 0 0 1px #000, 0 4px 14px -4px var(--blood);
  animation: cutPop .22s cubic-bezier(.2,1.5,.4,1);
}
@keyframes cutPop { from { transform: scale(.9); } }

/* a take flagged for the cut */
.sub-card.cut { box-shadow: 0 0 0 3px var(--blood), 0 18px 34px -16px rgba(0,0,0,.9) !important; }
.sub-card.cut.ranked { box-shadow: 0 0 0 3px var(--blood), 0 0 0 6px color-mix(in srgb, var(--chroma-c) 70%, transparent), 0 18px 34px -16px rgba(0,0,0,.9) !important; }
.cut-slash {
  position: absolute; top: 8px; left: 10px; z-index: 4; font-size:calc((22px) * var(--text-scale,1)); line-height: 1;
  color: var(--blood); filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); transform: rotate(-12deg);
  pointer-events: none; animation: cutPop .22s cubic-bezier(.2,1.5,.4,1);
}

/* lock-bar state chip */
.cut-state { font-size:calc((11px) * var(--text-scale,1)); letter-spacing: .06em; color: color-mix(in srgb, var(--bone) 55%, transparent); }
.cut-state.set { color: var(--blood); }

/* ---------- the cut reveal (round result) ---------- */
.cut-banner {
  max-width: 620px; margin: 4px auto 22px; padding: 16px 22px 18px; border-radius: 6px; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blood) 18%, #0c0a0c), rgba(0,0,0,.55));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blood) 55%, transparent), 0 22px 44px -20px rgba(0,0,0,.85);
  position: relative; overflow: hidden;
}
.cut-banner::before {                          /* perforated film edge */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: repeating-linear-gradient(90deg, var(--blood) 0 8px, transparent 8px 16px); opacity: .5;
}
.cb-kicker { font-size:calc((12px) * var(--text-scale,1)); letter-spacing: .26em; color: var(--blood); margin-bottom: 4px; }
.cb-title { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size:calc((clamp(22px, 3.4cqw, 36px)) * var(--text-scale,1)); line-height: .95; color: var(--bone); }
.cb-title em { font-style: normal; color: var(--blood); }
.cb-combo {
  font-family: 'Libre Caslon Display', serif; font-size:calc((clamp(13px, 1.6cqw, 17px)) * var(--text-scale,1)); line-height: 1.3;
  margin: 8px auto 0; max-width: 52ch; color: color-mix(in srgb, var(--bone) 88%, transparent); overflow-wrap: anywhere;
}
.cb-combo .ans { font-family: 'Archivo Black', sans-serif; background: var(--chroma-c); color: var(--ink); padding: .02em .26em; box-decoration-break: clone; }
.cb-sub { font-size:calc((11.5px) * var(--text-scale,1)); letter-spacing: .04em; color: color-mix(in srgb, var(--bone) 62%, transparent); margin-top: 9px; line-height: 1.5; }

.cut-banner.elim {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blood) 30%, #000), rgba(0,0,0,.7));
  box-shadow: inset 0 0 0 2px var(--blood), 0 0 50px -10px color-mix(in srgb, var(--blood) 55%, transparent), 0 22px 44px -20px rgba(0,0,0,.9);
  animation: cutSlam .5s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes cutSlam { 0% { transform: scale(1.05); opacity: 0; } 60% { transform: scale(.99); } 100% { transform: scale(1); opacity: 1; } }
.cut-banner.safe { background: linear-gradient(180deg, color-mix(in srgb, var(--chroma-c) 12%, #0c0a0c), rgba(0,0,0,.5)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chroma-c) 50%, transparent), 0 22px 44px -20px rgba(0,0,0,.85); }
.cut-banner.safe::before { background: repeating-linear-gradient(90deg, var(--chroma-c) 0 8px, transparent 8px 16px); }
.cut-banner.safe .cb-kicker { color: var(--chroma-c); }
.cut-banner.safe .cb-title em { color: var(--chroma-c); }

/* ---------- eliminated rows in standings ---------- */
.final-row.eliminated, .score-row.eliminated { opacity: .6; border-color: color-mix(in srgb, var(--blood) 35%, transparent); }
.final-row.eliminated .nm { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--blood) 75%, transparent); }
.final-row.eliminated .rank { color: var(--blood); }
.cr-cast-row.eliminated { opacity: .55; }
.cr-cast-row.eliminated .cr-cast-name { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--blood) 70%, transparent); }

/* eliminated chip in the who's-acted rail */
.wait-chip.cut-out { opacity: .6; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blood) 45%, transparent); }
.wait-chip.cut-out .state { color: var(--blood); }

/* lobby sub-rule indent */
.rule-line.sub-rule { padding-left: 14px; opacity: .92; }
.rule-line.sub-rule .rl-lbl { font-size:calc((11px) * var(--text-scale,1)); }

@media (prefers-reduced-motion: reduce) {
  .take-meter .tk.just, .cut-btn.on, .cut-slash, .cut-banner.elim { animation: none !important; }
}