/* Halbieren (public/arcade/half.js). A black CRT with one food on it, flat colour over the cabinets' hard darker offset.
   The bold thing is the cut: a phosphor knife line run edge to edge, then the two pieces slide apart wearing their
   weights, and the bottom reads how far off half you were in big Jersey (neon under 1%). */
.ag-stage[data-kind="half"] .hv { position: absolute; inset: 0; color: var(--ac-marquee); font-family: var(--ac-pixel); overflow: hidden; }
.ag-stage[data-kind="half"] .hv [hidden] { display: none !important; }
.ag-stage[data-kind="half"] .hv p { margin: 0; }
.ag-stage[data-kind="half"] .hv-crt { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair;
  -webkit-tap-highlight-color: transparent; }

.ag-stage[data-kind="half"] .hv-hud { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 10px 14px 0; pointer-events: none; }
.ag-stage[data-kind="half"] .hv-name { font-size: 36px; line-height: 1; white-space: nowrap; }
.ag-stage[data-kind="half"] .hv-name span { font-size: 22px; color: var(--ac-ink-2); margin-left: 6px; }
.ag-stage[data-kind="half"] .hv-pips { display: flex; gap: 5px; margin-top: 8px !important; }
.ag-stage[data-kind="half"] .hv-pips i { width: 16px; height: 6px; background: var(--ac-line); }
.ag-stage[data-kind="half"] .hv-pips i.now { background: var(--ac-p0); }
.ag-stage[data-kind="half"] .hv-pips i.done { background: var(--ac-marquee); }
.ag-stage[data-kind="half"] .hv-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ag-stage[data-kind="half"] .hv-clock { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.ag-stage[data-kind="half"] .hv-clock.low { color: var(--ac-p0); animation: hv-blink 1s steps(1) infinite; }
.ag-stage[data-kind="half"] .hv-them { font-size: 20px; line-height: 1; color: var(--ac-ink-2); text-align: right; }
.ag-stage[data-kind="half"] .hv-them.done { color: var(--ac-marquee); }
@keyframes hv-blink { 50% { opacity: .35; } }

/* the foot: what to do, then how it went */
.ag-stage[data-kind="half"] .hv-ask { position: absolute; left: 24px; right: 24px; bottom: 26px; text-align: center; pointer-events: none;
  font: 400 16px/1.35 var(--font); color: var(--ac-ink-2); }
.ag-stage[data-kind="half"] .hv-res { position: absolute; left: 12px; right: 12px; bottom: 14px; text-align: center; pointer-events: none; }
.ag-stage[data-kind="half"] .hv-big { font-size: clamp(44px, 12vmin, 64px); line-height: .95; font-variant-numeric: tabular-nums; color: var(--ac-marquee); }
.ag-stage[data-kind="half"] .hv-big.great { text-shadow: 0 0 6px #ff3b44, 0 0 18px #d3121c; }
.ag-stage[data-kind="half"] .hv-sub { display: flex; justify-content: center; gap: 14px; font-size: 22px; line-height: 1.1; color: var(--ac-ink-2); margin-top: 2px !important; }
.ag-stage[data-kind="half"] .hv-sub b { font-weight: 400; color: var(--ac-marquee); }

/* a swipe that wasn't a cut */
.ag-stage[data-kind="half"] .hv-msg { position: absolute; left: 16px; right: 16px; bottom: 60px; text-align: center; pointer-events: none;
  font-size: 28px; line-height: 1.1; color: #ff9aa2; }
.ag-stage[data-kind="half"] .hv.shake .hv-msg { animation: hv-shake .3s steps(4); }
@keyframes hv-shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }
.ag-stage[data-kind="half"] .hv.is-over .hv-hud, .ag-stage[data-kind="half"] .hv.is-over .hv-ask { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ag-stage[data-kind="half"] .hv-clock.low, .ag-stage[data-kind="half"] .hv.shake .hv-msg { animation: none; }
}