/* Nişancı (plan 97 §3.4, §7, §8; v2 plan 102 §3.3): the sharpshooter stage. The top bar keeps the round and the
   clock; the blue half (side 0) and the orange half (side 1) each hold the side's own prompt card above its own
   number line in the side's colour, a crosshair marker, ◀ ▶ nudges and Kilitle. The reveal drops a gold bullseye
   on each half's own true point and draws that half's own distance.
   Colours come from tokens.css (light, dark, high contrast). Only transform, opacity and colour animate, and only
   on inner elements, so every measured box (ticks, markers, true point, bars) is still while it moves. No filters,
   no animated shadows; halves and the card are contained. Reduced motion stops everything on the stage. */

#arenaBody:has(> .sniper-arena) { display: flex; flex-direction: column; overflow: hidden; padding: 12px 16px; }
.sniper-arena { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; }
.sniper-arena > #arenaPlay.arena-play--sniper { display: flex; flex: 1; min-height: 0; margin: 0; padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none; }

.sniper-stage {
  display: grid;
  flex: 1;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

/* ---------- Top bar: round chip and dots · the navy clock capsule ---------- */
.sniper-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; pointer-events: none; }
.sniper-bar__left { display: flex; align-items: center; gap: 14px; }
.sniper-bar__round { margin: 0; padding: 6px 14px; color: var(--ink); background: var(--gold-tint); border: 2px solid var(--gold-base); border-radius: 999px; font-size: 16px; font-weight: 900; white-space: nowrap; }
.sniper-dots { display: flex; gap: 7px; margin: 0; padding: 0; list-style: none; }
.sniper-dots li { width: 14px; height: 14px; background: var(--surface); border: 2px solid var(--line-strong); border-radius: 50%; transition: background-color .25s ease, border-color .25s ease, transform .25s ease; }
.sniper-dots li.is-current { border-color: var(--ink); transform: scale(1.25); }
.sniper-dots li[data-winner="none"] { background: var(--surface-3); border-style: dashed; }
.sniper-dots li[data-winner="0"] { background: var(--player-a); border-color: var(--player-a); }
.sniper-dots li[data-winner="1"] { background: var(--player-b); border-color: var(--player-b); }
.sniper-dots li[data-exact="true"] { border-color: var(--gold-base); box-shadow: 0 0 0 2px var(--gold-base); }
.sniper-timer { position: relative; display: grid; justify-self: end; min-width: 132px; justify-items: center; gap: 4px; }
.sniper-timer strong { min-width: 5ch; padding: 5px 16px 6px; color: var(--on-inverse, #fff); background: var(--inverse); border: 3px solid var(--bg); border-radius: 999px; box-shadow: var(--shadow-sm); font-size: 24px; font-weight: 900; line-height: 1; text-align: center; }
.sniper-timer__track { width: 100%; height: 6px; overflow: hidden; background: var(--surface-3); border-radius: 999px; }
.sniper-timer__track i { display: block; width: 100%; height: 100%; background: var(--brand, var(--primary)); transform-origin: left center; }
.sniper-timer.is-urgent strong { background: var(--red-base); }
.sniper-stage[data-phase="reveal"] .sniper-timer, .sniper-stage[data-phase="finished"] .sniper-timer { opacity: .55; }

/* Each half's own prompt card, under the half's head and above its lines; the stripe is the side's colour. */
.sniper-card {
  position: relative;
  display: grid;
  flex: none;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 12px 16px 8px;
  overflow: hidden;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  contain: layout paint;
  text-align: center;
}
.sniper-card::before { position: absolute; top: 0; right: 0; left: 0; height: 5px; background: var(--side); content: ""; }
.sniper-card.is-new { animation: sniper-card-in .34s cubic-bezier(.2, .9, .3, 1); }
@keyframes sniper-card-in { from { opacity: 0; transform: translateY(8px); } }
.sniper-card__prompt { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .4em; margin: 0; color: var(--ink-2); font-size: clamp(16px, 1.35vw, 20px); font-weight: 750; line-height: 1.25; }
.sniper-card__target { color: var(--ink); font-size: clamp(28px, 2.6vw, 38px); font-weight: 900; letter-spacing: -.01em; line-height: 1.05; white-space: nowrap; }
.sniper-card__prompt.is-sentence { display: block; color: var(--ink); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.35; }
.sniper-card__prompt.is-sentence .sniper-card__target { display: inline; padding: 0 .04em; font-size: 1.18em; background: color-mix(in srgb, var(--focus) 14%, transparent); border-radius: 6px; box-shadow: inset 0 -3px 0 var(--focus); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* The hint and the reveal share one cell: the hint keeps its room while the reveal covers it, so the card does
   not change height when the round is revealed. */
.sniper-card__foot { display: grid; }
.sniper-card__foot > * { grid-area: 1 / 1; }
.sniper-card__hint { margin: 0; color: var(--ink-3); font-size: 14px; font-weight: 700; }
.sniper-card.is-revealed .sniper-card__hint { visibility: hidden; }
.sniper-reveal { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 10px; margin: 0; }
.sniper-reveal[hidden] { display: none; }
.sniper-reveal:not([hidden]) { animation: sniper-rise .3s cubic-bezier(.2, .9, .3, 1); }
@keyframes sniper-rise { from { transform: translateY(10px); } }
.sniper-reveal__tag { padding: 1px 9px; color: var(--gold-ink); background: var(--gold-tint); border: 1.5px solid var(--gold-base); border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.sniper-reveal__target { font-size: 18px; font-weight: 900; }
.sniper-reveal__why { color: var(--ink-2); font-size: 15px; font-weight: 700; }

/* ---------- The two halves ---------- */
.sniper-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; min-height: 0; }
.sniper-side {
  --side: var(--player-a);
  --side-ink: var(--player-a-ink);
  --side-tint: var(--player-a-tint);
  --side-line: var(--player-a-line);
  --on-side: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 12px 14px 14px;
  color: var(--ink);
  background: linear-gradient(180deg, var(--side-tint), color-mix(in srgb, var(--side-tint) 40%, var(--surface)));
  border: 2px solid var(--side-line);
  border-radius: 22px;
  contain: layout paint;
  container: sniperhalf / inline-size;
  transition: border-color .25s ease, background-color .25s ease;
}
.sniper-side.side-1 { --side: var(--player-b); --side-ink: var(--player-b-ink); --side-tint: var(--player-b-tint); --side-line: var(--player-b-line); }
.sniper-side[data-locked="true"] { border-color: var(--side); }
.sniper-side.won-round { border-color: var(--side); background: var(--side-tint); }
.sniper-side.is-exact { border-color: var(--gold-base); }
.sniper-side__head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 44px; }
.sniper-side__who { display: grid; min-width: 0; gap: 2px; }
.sniper-side__name { overflow: hidden; color: var(--side-ink); font-size: clamp(17px, 1.5vw, 21px); font-weight: 900; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }
.sniper-side__role { justify-self: start; padding: 1px 8px; color: var(--side-ink); background: var(--surface); border: 1.5px solid var(--side-line); border-radius: 999px; font-size: 12px; font-weight: 800; }
.sniper-side__badge:empty { display: none; }
.sniper-side__badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; color: var(--side-ink); background: var(--surface); border: 2px solid var(--side); border-radius: 999px; font-size: 14px; font-weight: 900; animation: sniper-pop .26s cubic-bezier(.2, 1.5, .4, 1); }
.sniper-side__badge::before { width: 9px; height: 9px; background: var(--side); border-radius: 50%; content: ""; }
.sniper-side__points { display: grid; justify-items: end; gap: 2px; }
.sniper-side__score { color: var(--ink); font-size: clamp(20px, 1.9vw, 28px); font-weight: 900; line-height: 1.05; white-space: nowrap; }
.sniper-side__score.is-up { animation: sniper-bump .4s cubic-bezier(.2, 1.5, .4, 1); }
.sniper-side__gained { display: inline-flex; align-items: baseline; gap: 6px; color: var(--green-ink); font-size: 20px; font-weight: 900; line-height: 1.1; white-space: nowrap; animation: sniper-bump .45s .3s cubic-bezier(.2, 1.5, .4, 1) both; }
.sniper-side__gained[hidden] { display: none; }
.sniper-side__gained.is-miss, .sniper-side__gained.is-zero { color: var(--ink-3); }
.sniper-side__gained.is-exact { padding: 2px 10px; color: var(--gold-ink); background: var(--gold-tint); border: 2px solid var(--gold-base); border-radius: 999px; }
.sniper-side__gained b { font-size: 14px; letter-spacing: .03em; text-transform: uppercase; }
@keyframes sniper-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { transform: none; } }
/* Measured and visibility-checked elements only scale, never fade, so they read as shown at once. */
@keyframes sniper-bump { 0% { transform: scale(.7); } 70% { transform: scale(1.1); } 100% { transform: none; } }

/* ---------- Number lines ---------- */
/* The lines sit on the half's controls, with any spare height above them: the two halves have equal heights and
   equal controls, and fitLabels gives both lines blocks the same tightness, so the halves' lines line up whatever
   each card's text wraps to (a size container cannot be a subgrid, so the halves cannot share the card's row). */
.sniper-lines {
  --inset: var(--inset-wide, 40px);
  --play-h: 134px;
  --axis-y: 80px;
  --head: 40px;
  --needle: 22px;
  --top-h: 60px;
  --top-axis: 48px;
  --bridge: 40px;
  position: relative;
  flex: none;
  margin-top: auto;
}
.sniper-lines.is-top-tight { --top-h: 84px; --top-axis: 72px; }
.sniper-line { position: relative; color: var(--ink); }
.sniper-line__track { position: absolute; top: 0; right: var(--inset); bottom: 0; left: var(--inset); }
.sniper-line--play { height: var(--play-h); cursor: crosshair; pointer-events: auto; touch-action: none; border-radius: 16px; }
.sniper-line--play.is-tight { height: calc(var(--play-h) + 26px); }
.sniper-lines.is-bot .sniper-line--play { cursor: default; pointer-events: none; }
html[data-input="mouse"] .sniper-side:not([data-locked="true"]) .sniper-line--play:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.sniper-line__axis { position: absolute; top: calc(var(--axis-y) - 2.5px); right: -4px; left: -4px; height: 5px; background: var(--side-ink); border-radius: 3px; }
.sniper-line__minor { position: absolute; top: calc(var(--axis-y) - 9px); left: 0; width: 100%; height: 18px; overflow: visible; }
.sniper-line__minor path { fill: none; stroke: var(--side-line); stroke-width: 2.5; }
.sniper-tick { position: absolute; top: 0; bottom: 0; left: var(--at); width: 0; }
.sniper-tick__mark { position: absolute; top: calc(var(--axis-y) - 15px); left: -2px; width: 4px; height: 30px; background: var(--side-ink); border-radius: 2px; }
.sniper-tick__label { position: absolute; top: calc(var(--axis-y) + 20px); left: 0; color: var(--ink); font-size: clamp(16px, 1.6vw, 23px); font-weight: 850; line-height: 1.1; white-space: nowrap; transform: translateX(-50%); }
.sniper-line--play.is-tight .sniper-tick.is-odd .sniper-tick__label { top: calc(var(--axis-y) + 46px); }

/* The double number line: a neutral top line (the given scale) at half the length, its value c marked below it. */
.sniper-line--top { height: var(--top-h); margin-bottom: var(--bridge); pointer-events: none; }
.sniper-line--top .sniper-line__track { right: auto; width: calc((100% - 2 * var(--inset)) * .5); }
.sniper-line--top .sniper-line__axis { top: calc(var(--top-axis) - 2px); height: 4px; background: var(--ink-2); }
.sniper-line--top .sniper-line__minor { top: calc(var(--top-axis) - 6px); height: 12px; }
.sniper-line--top .sniper-line__minor path { stroke: var(--ink-3); stroke-width: 1.5; }
.sniper-line--top .sniper-tick__mark { top: calc(var(--top-axis) - 10px); left: -1.5px; width: 3px; height: 20px; background: var(--ink-2); }
.sniper-line--top .sniper-tick__label { top: calc(var(--top-axis) - 38px); color: var(--ink-2); font-size: clamp(15px, 1.35vw, 19px); }
.sniper-line--top.is-tight .sniper-tick.is-odd .sniper-tick__label { top: calc(var(--top-axis) - 62px); }
.sniper-topmark { position: absolute; top: calc(var(--top-axis) + 2px); left: var(--at); z-index: 2; display: grid; justify-items: center; transform: translateX(-50%); }
.sniper-topmark__arrow { width: 0; height: 0; border-right: 8px solid transparent; border-bottom: 10px solid var(--inverse); border-left: 8px solid transparent; }
.sniper-topmark__label { padding: 2px 10px; color: var(--on-inverse, #fff); background: var(--inverse); border-radius: 8px; font-size: clamp(14px, 1.3vw, 18px); font-weight: 900; white-space: nowrap; }
.sniper-bridge { position: absolute; top: var(--top-axis); left: var(--inset); width: calc(100% - 2 * var(--inset)); height: calc(var(--top-h) - var(--top-axis) + var(--bridge) + var(--axis-y)); overflow: visible; pointer-events: none; }
.sniper-bridge__link { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 6 6; }

/* The crosshair marker: a scope head on a needle down to the line. Own markers lead; rivals (reveal) are slimmer. */
.sniper-marker { --mk: var(--player-a); --mk-ink: var(--player-a-ink); position: absolute; top: calc(var(--axis-y) - var(--head) - var(--needle)); left: var(--at); z-index: 3; width: var(--head); height: calc(var(--head) + var(--needle)); pointer-events: none; transform: translateX(-50%); }
.sniper-marker.side-1 { --mk: var(--player-b); --mk-ink: var(--player-b-ink); }
.sniper-marker__pin { position: absolute; inset: 0; transform-origin: 50% 100%; }
.sniper-marker__pin::after { position: absolute; top: calc(var(--head) - 2px); bottom: -2px; left: 50%; width: 4px; margin-left: -2px; background: var(--mk); border-radius: 2px; content: ""; }
.sniper-marker__scope { position: absolute; top: 0; left: 0; width: var(--head); height: var(--head); background: var(--surface); border: 4px solid var(--mk); border-radius: 50%; box-shadow: 0 3px 0 var(--mk-ink); }
.sniper-marker__scope::before, .sniper-marker__scope::after { position: absolute; top: 50%; left: 50%; background: var(--mk); content: ""; transform: translate(-50%, -50%); }
.sniper-marker__scope::before { width: 64%; height: 3px; border-radius: 2px; }
.sniper-marker__scope::after { width: 3px; height: 64%; border-radius: 2px; }
.sniper-marker.is-locked .sniper-marker__scope { background: var(--mk); }
.sniper-marker.is-locked .sniper-marker__scope::before, .sniper-marker.is-locked .sniper-marker__scope::after { background: var(--surface); }
.sniper-marker.is-rival .sniper-marker__pin { opacity: .92; transform: scale(.84); }
.sniper-marker.is-new .sniper-marker__pin { animation: sniper-pin-in .22s cubic-bezier(.2, 1.5, .4, 1); }
.sniper-marker.is-locked .sniper-marker__scope { animation: sniper-lock .26s ease-out; }
@keyframes sniper-pin-in { from { opacity: 0; transform: translateY(-10px) scale(.7); } }
@keyframes sniper-lock { 40% { transform: scale(.78); } 100% { transform: none; } }

/* The reveal: a gold bullseye drops onto the true point, a ring spreads, both distance bars grow out of it. */
.sniper-truth { position: absolute; top: 0; left: var(--at); z-index: 4; width: 30px; height: calc(var(--axis-y) + 1px); pointer-events: none; transform: translateX(-50%); }
.sniper-truth::before { position: absolute; top: 2px; bottom: 0; left: 50%; border-left: 2px dashed var(--gold-base); content: ""; }
.sniper-truth { width: 36px; }
.sniper-truth__drop { position: absolute; right: 0; bottom: -16px; left: 0; height: 32px; animation: sniper-drop .5s cubic-bezier(.3, 1.45, .5, 1) both; }
.sniper-truth__flag { display: block; width: 32px; height: 32px; margin: 0 auto; background: radial-gradient(circle, var(--gold-ink) 0 4px, var(--gold-base) 4.5px 8px, var(--surface) 8.5px 11px, var(--gold-base) 11.5px 16px); border-radius: 50%; box-shadow: 0 0 0 2px var(--gold-ink); }
.sniper-truth__ring { position: absolute; top: var(--axis-y); left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 3px solid var(--gold-base); border-radius: 50%; opacity: 0; animation: sniper-ring .8s .4s ease-out; }
@keyframes sniper-drop { 0% { opacity: 0; transform: translateY(-60px); } 30% { opacity: 1; } 100% { transform: none; } }
@keyframes sniper-ring { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.7); } }
.sniper-burst { position: absolute; top: var(--axis-y); left: 50%; width: 108px; height: 108px; margin: -54px 0 0 -54px; background: repeating-conic-gradient(var(--gold-base) 0 9deg, transparent 9deg 30deg); border-radius: 50%; opacity: 0; -webkit-mask: radial-gradient(circle, transparent 0 38%, #000 39% 68%, transparent 69%); mask: radial-gradient(circle, transparent 0 38%, #000 39% 68%, transparent 69%); animation: sniper-burst .9s .45s ease-out both; }
@keyframes sniper-burst { 0% { opacity: 1; transform: scale(.2) rotate(0); } 60% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35) rotate(40deg); } }
.sniper-gap { --mk: var(--player-a); position: absolute; top: calc(var(--axis-y) - 17px); z-index: 2; height: 7px; pointer-events: none; }
.sniper-gap.side-1 { --mk: var(--player-b); }
.sniper-gap__fill { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--mk) 0 8px, color-mix(in srgb, var(--mk) 55%, var(--surface)) 8px 12px); border-radius: 3px; transform-origin: right center; animation: sniper-gap .42s .42s ease-out both; }
.sniper-gap.from-right .sniper-gap__fill { transform-origin: left center; }
@keyframes sniper-gap { from { transform: scaleX(0); } }

/* ---------- Controls: ◀ Kilitle ▶ (each half's own), or the computer's status ---------- */
.sniper-controls { display: flex; justify-content: center; align-items: stretch; gap: 14px; }
.sniper-nudge, .sniper-lock { position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-width: 72px; min-height: 72px; padding: 6px 14px; color: var(--side-ink); background: var(--surface); border: 3px solid var(--side-line); border-radius: 20px; box-shadow: 0 5px 0 var(--side-line); font: inherit; cursor: pointer; touch-action: none; transition: transform .1s ease, background-color .15s ease, color .15s ease, border-color .15s ease; }
.sniper-nudge { width: 72px; }
.sniper-nudge__arrow { font-size: 28px; line-height: 1; }
.sniper-nudge kbd, .sniper-lock kbd { position: absolute; right: 6px; bottom: 5px; min-width: 20px; padding: 0 5px; color: var(--side-ink); background: var(--surface); border: 1.5px solid var(--side-line); border-bottom-width: 3px; border-radius: 6px; font: 800 12px/1.35 var(--font-sans); text-align: center; }
.sniper-lock { min-width: 210px; padding-inline: 22px 34px; font-size: clamp(20px, 1.9vw, 26px); font-weight: 900; letter-spacing: .01em; }
.sniper-lock[data-ready="true"] { color: var(--on-side); background: var(--side); border-color: var(--side); box-shadow: 0 5px 0 var(--side-ink); }
.sniper-lock[data-ready="true"]::after { position: absolute; inset: -6px; border: 3px solid var(--side); border-radius: 24px; content: ""; opacity: 0; pointer-events: none; animation: sniper-ready 1.2s ease-out infinite; }
@keyframes sniper-ready { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06, 1.2); } }
.sniper-lock[data-done="true"] { color: var(--side-ink); background: var(--side-tint); border-color: var(--side); box-shadow: 0 2px 0 var(--side); transform: translateY(3px); }
.sniper-lock__icon { position: relative; flex: none; width: 18px; height: 14px; margin-top: 8px; background: currentColor; border-radius: 3px; }
.sniper-lock__icon::before { position: absolute; top: -12px; left: 3px; width: 12px; height: 13px; border: 3px solid currentColor; border-bottom: 0; border-radius: 8px 8px 0 0; box-sizing: border-box; content: ""; transition: transform .18s ease; }
.sniper-lock:not([data-done="true"]) .sniper-lock__icon::before { transform: translate(4px, -3px); }
html[data-input="mouse"] .sniper-nudge:hover, html[data-input="mouse"] .sniper-lock:not([data-done="true"]):hover { border-color: var(--side); }
.sniper-nudge:active, .sniper-lock:not([data-done="true"]):active { transform: translateY(4px); box-shadow: 0 1px 0 var(--side-line); }
.sniper-nudge:focus-visible, .sniper-lock:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.sniper-side[data-locked="true"] .sniper-nudge { opacity: .45; }
.sniper-stage:not([data-phase="aiming"]) .sniper-nudge, .sniper-stage:not([data-phase="aiming"]) .sniper-lock { opacity: .55; }
.sniper-stage:not([data-phase="aiming"]) .sniper-lock[data-ready="true"]::after { display: none; }
/* As tall as the controls, so the computer's line sits level with the player's. */
.sniper-bot { display: grid; place-items: center; min-height: 72px; margin: 0; padding: 8px 12px; color: var(--side-ink); background: color-mix(in srgb, var(--surface) 70%, transparent); border: 2px dashed var(--side-line); border-radius: 16px; font-size: 16px; font-weight: 850; }
.sniper-side[data-locked="true"] .sniper-bot { border-style: solid; border-color: var(--side); }

/* Dark theme: dark text on the lighter dark-theme player colours, a lifted clock capsule. */
html[data-theme="dark"] .sniper-side { --on-side: #0b1628; }
html[data-theme="dark"] .sniper-timer strong { color: var(--ink); background: var(--surface-3); border-color: var(--line-strong); }
html[data-theme="dark"] .sniper-topmark__arrow { border-bottom-color: var(--surface-3); }
html[data-theme="dark"] .sniper-topmark__label { color: var(--ink); background: var(--surface-3); box-shadow: 0 0 0 1.5px var(--line-strong); }

/* ---------- Referee and pause ---------- */
.sniper-arena > .referee-region { position: absolute; z-index: 8; pointer-events: none; }
#arenaDialog:not([data-referee-phase="playing"]) .sniper-arena > .referee-region, #arenaDialog .sniper-arena > .referee-region[data-count] { top: 50%; left: 50%; display: grid; width: min(300px, calc(100% - 24px)); padding: 12px 16px; gap: 6px; background: var(--glass-strong); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 12px 30px rgba(15, 23, 42, .18); transform: translate(-50%, -50%); }
#arenaDialog:not([data-referee-phase="playing"]) .sniper-arena > .referee-region .referee-art, #arenaDialog .sniper-arena > .referee-region[data-count] .referee-art { width: 176px; margin: 0 auto; }
#arenaDialog .sniper-arena > .referee-region[data-count]:not([data-count="BAŞLA!"]) .referee-art { translate: calc(-.2 * 176px) 0; }
#arenaDialog .sniper-arena > .referee-region .referee-message { min-height: 0; font-size: 14px; text-align: center; }
#arenaDialog[data-referee-phase="playing"] .sniper-arena > .referee-region:not([data-count]) { bottom: 4px; left: 50%; width: 46px; transform: translateX(-50%); }
#arenaDialog[data-referee-phase="playing"] .sniper-arena > .referee-region:not([data-count]) .referee-art { width: 46px; }
#arenaDialog[data-referee-phase="playing"] .sniper-arena > .referee-region:not([data-count]) .referee-message { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#arenaDialog.is-finished .sniper-arena > .referee-region { display: none; }
.sniper-arena > .arena-paused { position: absolute; top: 50%; left: 50%; z-index: 9; width: min(360px, calc(100% - 32px)); padding: 22px 20px; background: var(--glass-strong); border: 2px solid var(--line-strong); border-radius: 22px; box-shadow: var(--shadow-lg); transform: translate(-50%, -50%); }
.sniper-arena > .arena-paused h3 { margin: 0 0 12px; }
.sniper-arena.is-paused .sniper-stage { opacity: .6; }
.arena-dialog.live-surface .sniper-arena > .arena-paused { pointer-events: auto; }
#arenaDialog:has(.sniper-arena) > .pregame-plates { overflow: hidden; }

/* ---------- Result ---------- */
.sniper-chart__exact { fill: var(--gold-base); stroke: var(--surface); stroke-width: 2; }

/* ---------- High contrast: solid outline once locked, ink lines and markers ---------- */
body.high-contrast .sniper-side, body.high-contrast .sniper-card, body.high-contrast .sniper-nudge, body.high-contrast .sniper-lock { border-color: var(--ink); }
body.high-contrast .sniper-side { border-style: dashed; }
body.high-contrast .sniper-side[data-locked="true"] { border-style: solid; outline: 4px solid var(--ink); outline-offset: 2px; }
body.high-contrast .sniper-line__axis, body.high-contrast .sniper-tick__mark { background: var(--ink); }
body.high-contrast .sniper-marker__scope { border-color: var(--ink); }
body.high-contrast .sniper-truth__flag { box-shadow: 0 0 0 3px var(--ink); }
body.high-contrast .sniper-side__gained.is-exact { color: var(--ink); background: #fff; border: 3px solid var(--ink); }

/* ---------- Narrow halves (tablets, phones): end labels lean inward so the line can use the whole width ---------- */
@container sniperhalf (max-width: 540px) {
  .sniper-lines { --inset: 10px; --play-h: 88px; --axis-y: 50px; --head: 28px; --needle: 16px; --top-h: 42px; --top-axis: 32px; --bridge: 28px; }
  .sniper-lines.is-top-tight { --top-h: 58px; --top-axis: 48px; }
  .sniper-tick__mark { top: calc(var(--axis-y) - 11px); height: 22px; }
  .sniper-truth__flag { width: 26px; height: 26px; }
  .sniper-truth__drop { bottom: -13px; height: 26px; }
  .sniper-burst { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
  .sniper-tick.is-first .sniper-tick__label { transform: translateX(-3px); }
  .sniper-tick.is-last .sniper-tick__label { transform: translateX(calc(-100% + 3px)); }
  .sniper-tick__label { top: calc(var(--axis-y) + 15px); font-size: 15px; }
  .sniper-line--top .sniper-tick__label { top: calc(var(--top-axis) - 26px); font-size: 13px; }
  .sniper-line--top.is-tight .sniper-tick.is-odd .sniper-tick__label { top: calc(var(--top-axis) - 42px); }
  .sniper-line--play.is-tight .sniper-tick.is-odd .sniper-tick__label { top: calc(var(--axis-y) + 33px); }
  .sniper-line--play.is-tight { height: calc(var(--play-h) + 20px); }
  .sniper-gap { top: calc(var(--axis-y) - 14px); height: 6px; }
  .sniper-topmark__label { font-size: 13px; }
  .sniper-lock { min-width: 150px; }
}

/* ---------- Smaller screens: tighter halves; below 640 px the halves stack ---------- */
@media (max-width: 900px) {
  #arenaBody:has(> .sniper-arena) { overflow: auto; padding: 8px; }
  .sniper-stage { gap: 8px; }
  .sniper-bar { gap: 8px; }
  .sniper-bar__left { gap: 10px; }
  .sniper-timer { min-width: 0; }
  .sniper-card { padding: 9px 12px 6px; border-radius: 14px; }
  .sniper-bar__round { padding: 4px 10px; font-size: 14px; }
  .sniper-timer strong { padding: 4px 12px; font-size: 19px; }
  .sniper-grid { gap: 8px; }
  .sniper-side { gap: 8px; padding: 8px 10px 10px; border-radius: 16px; }
  .sniper-side__head { min-height: 36px; gap: 6px; }
  .sniper-side__score { font-size: 20px; }
  .sniper-side__gained { font-size: 17px; }
  .sniper-nudge, .sniper-lock { min-height: 56px; border-radius: 16px; }
  .sniper-bot { min-height: 56px; }
  .sniper-nudge { width: 60px; min-width: 60px; }
  .sniper-lock { min-width: 120px; font-size: 19px; }
  #arenaDialog[data-referee-phase="playing"] .sniper-arena > .referee-region:not([data-count]) { display: none; }
  #arenaDialog:has(.sniper-arena) .pregame-plate { overflow: hidden; padding: 6px 10px; }
  #arenaDialog:has(.sniper-arena) .pregame-plate__line { font-size: 20px; }
  #arenaDialog:has(.sniper-arena) .pregame-plate small { font-size: 11px; }
}
@media (max-width: 640px) {
  .sniper-dots li { width: 10px; height: 10px; }
  .sniper-dots { gap: 4px; }
  .sniper-card__prompt { font-size: 15px; }
  .sniper-card__target { font-size: 26px; }
  .sniper-card__prompt.is-sentence { font-size: 15px; }
  .sniper-card__hint, .sniper-reveal__why { font-size: 12px; }
  .sniper-reveal__target { font-size: 16px; }
  .sniper-grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked halves keep their full content height (each holds its own card now); when both do not fit, the arena
     body scrolls instead of clipping a half. */
  .sniper-side { gap: 4px; min-height: auto; padding: 6px 8px 8px; }
  .sniper-side__head { min-height: 30px; }
  .sniper-side__points { display: flex; flex-direction: row-reverse; align-items: baseline; gap: 8px; }
  .sniper-side__name { font-size: 16px; }
  .sniper-side__badge { padding: 1px 8px 1px 7px; font-size: 12px; }
  .sniper-lines { --play-h: 66px; --axis-y: 34px; --head: 22px; --needle: 10px; --top-h: 34px; --top-axis: 26px; --bridge: 22px; }
  .sniper-lines.is-top-tight { --top-h: 50px; --top-axis: 42px; }
  .sniper-tick__label { top: calc(var(--axis-y) + 12px); font-size: 13px; }
  .sniper-line--play.is-tight { height: calc(var(--play-h) + 16px); }
  .sniper-line--play.is-tight .sniper-tick.is-odd .sniper-tick__label { top: calc(var(--axis-y) + 27px); }
  .sniper-line--top .sniper-tick__label { top: calc(var(--top-axis) - 22px); font-size: 12px; }
  .sniper-line--top.is-tight .sniper-tick.is-odd .sniper-tick__label { top: calc(var(--top-axis) - 38px); }
  .sniper-gap { top: calc(var(--axis-y) - 11px); height: 5px; }
  .sniper-controls { gap: 10px; }
  .sniper-nudge, .sniper-lock { min-height: 48px; border-radius: 14px; box-shadow: 0 3px 0 var(--side-line); }
  .sniper-nudge { width: 56px; min-width: 56px; }
  .sniper-lock { flex: 1; max-width: 220px; min-width: 0; font-size: 17px; }
  .sniper-nudge kbd, .sniper-lock kbd { display: none; }
  .sniper-bot { min-height: 34px; padding: 4px 8px; font-size: 13px; }
  /* Against the computer its half is a strip: name, score, status and its own target; its line is not drawn. */
  .sniper-stage[data-solo="true"] .sniper-side.is-bot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; }
  .sniper-stage[data-solo="true"] .sniper-side.is-bot .sniper-side__head { grid-column: 1 / -1; }
  .sniper-stage[data-solo="true"] .sniper-side.is-bot .sniper-lines,
  .sniper-stage[data-solo="true"] .sniper-side.is-bot .sniper-card__lead,
  .sniper-stage[data-solo="true"] .sniper-side.is-bot .sniper-card__hint,
  .sniper-stage[data-solo="true"] .sniper-side.is-bot .sniper-reveal__why { display: none; }
  .sniper-stage[data-solo="true"] .sniper-side.is-bot .sniper-card { padding: 7px 10px 4px; }
  .sniper-stage[data-solo="true"] .sniper-side.is-bot .sniper-card__target { font-size: 20px; }
  .sniper-stage[data-solo="true"] .sniper-side.is-bot .sniper-card__prompt.is-sentence .sniper-card__target { font-size: 20px; }
  .sniper-stage[data-solo="true"] .sniper-side.is-bot .sniper-reveal__target { font-size: 14px; }
}

/* ---------- Reduced motion (setting or OS): nothing on the stage transitions or animates ---------- */
body.reduced-motion .sniper-stage, body.reduced-motion .sniper-stage *, body.reduced-motion .sniper-stage *::before, body.reduced-motion .sniper-stage *::after { transition: none !important; animation: none !important; }
body.reduced-motion .sniper-lock[data-ready="true"] { outline: 3px solid var(--side); outline-offset: 3px; }
body.reduced-motion .sniper-burst { display: none; }
body.reduced-motion .sniper-truth__ring { opacity: .9; }
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-on) .sniper-stage, body:not(.motion-on) .sniper-stage *, body:not(.motion-on) .sniper-stage *::before, body:not(.motion-on) .sniper-stage *::after { transition: none !important; animation: none !important; }
  body:not(.motion-on) .sniper-lock[data-ready="true"] { outline: 3px solid var(--side); outline-offset: 3px; }
  body:not(.motion-on) .sniper-burst { display: none; }
  body:not(.motion-on) .sniper-truth__ring { opacity: .9; }
}