/* matölye arena stage (task 74): the in-game "classroom game show" and the result reveal.
   Loaded last. Colours come from tokens.css and the side identity properties, so both themes and
   high contrast follow. Layout that competes with mobile.css is scoped to wider screens; phones keep
   the compact one-screen layouts from task 64. Motion is transform/opacity/colour only. */

/* ---------- Live indicator in the game header ---------- */
#arenaDialog[data-referee-phase="playing"]:not(.is-finished) .arena-header p::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  vertical-align: .08em;
  background: var(--red-base);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--red-tint);
  content: "";
  animation: stage-live 1.6s ease-in-out infinite;
}
@keyframes stage-live { 50% { opacity: .35; } }

/* ---------- Stage floor: soft light from each player's side ---------- */
#arenaPlay:has(.duel-lanes),
#arenaPlay[data-activity="multiply"]:has(.duel-lanes) {
  background:
    radial-gradient(70% 60% at 0% 100%, var(--player-a-tint), transparent 72%),
    radial-gradient(70% 60% at 100% 100%, var(--player-b-tint), transparent 72%),
    radial-gradient(var(--bg-grid) 1.2px, transparent 1.4px) 0 0 / 22px 22px,
    var(--bg);
}
#arenaPlay:has(.duel-lanes--online),
#arenaPlay:has(.duel-lanes--solo) {
  background:
    radial-gradient(80% 60% at 30% 100%, var(--player-a-tint), transparent 72%),
    radial-gradient(var(--bg-grid) 1.2px, transparent 1.4px) 0 0 / 22px 22px,
    var(--bg);
}

/* ---------- Broadcast clock: a capsule riding on the match track (wide screens; phones keep mobile.css) ---------- */
@media (min-width: 681px) and (min-height: 521px) {
  .duel-timer {
    position: relative;
    display: grid;
    width: min(880px, 100%);
    margin: 0 auto 10px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
  }
  .duel-timer > div,
  .duel-timer__track { grid-row: 1; grid-column: 1; }
  .duel-timer__track {
    width: 100%;
    height: 10px;
    background: var(--surface-3);
    box-shadow: inset 0 1px 2px rgba(15, 12, 40, .12);
  }
  .duel-timer__track i { background: linear-gradient(90deg, var(--player-a), var(--brand) 50%, var(--player-b)); }
  .duel-timer > div {
    z-index: 1;
    align-items: baseline;
    gap: 8px;
    padding: 6px 18px 7px;
    color: var(--on-inverse, #fff);
    background: var(--inverse);
    border: 3px solid var(--bg);
    border-radius: 999px;
    box-shadow: var(--shadow-md);
  }
  .duel-timer span,
  .duel-timer small { color: rgba(255, 255, 255, .72); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .duel-timer small { letter-spacing: 0; text-transform: none; }
  .duel-timer strong { min-width: 3.4ch; color: #fff; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; text-align: center; }
  .duel-timer.is-urgent > div { background: var(--red-base); box-shadow: 0 0 0 0 var(--red-tint); animation: stage-urgent 1s ease-in-out infinite; }
  .duel-timer.is-urgent strong { color: #fff; }
  @keyframes stage-urgent { 50% { box-shadow: 0 0 0 8px var(--red-tint); } }
}

/* ---------- Rules as quiet chips instead of a sentence ---------- */
.duel-rules {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 12px;
}
.duel-rules > span {
  padding: 3px 10px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.duel-rules > .duel-rules__mode { color: var(--brand-ink); background: var(--brand-tint); border-color: transparent; }
.duel-rules > .duel-rules__warn { color: var(--red-ink); background: var(--red-tint); border-color: transparent; }

/* ---------- Lanes: identity light, a score bug and key-cap answers ---------- */
#arenaPlay[data-activity] .duel-side {
  color: var(--side-identity-fg);
  /* The lane fill itself carries the player identity (visual.spec contract); the surface rises from the
     bottom so answers sit on a calm ground. */
  background-color: var(--side-identity-bg);
  background-image: linear-gradient(180deg, transparent 18%, var(--surface) 92%);
  border: 2px solid var(--side-identity-border);
  box-shadow: inset 0 6px 0 var(--side-identity-border), 0 22px 44px -28px var(--side-identity-shadow), var(--shadow-sm);
}
#arenaPlay[data-activity] .duel-side.side-0 { --side-bug-ink: var(--player-a-ink); }
#arenaPlay[data-activity] .duel-side.side-1 { --side-bug-ink: var(--player-b-ink); }
#arenaPlay[data-activity] .duel-side h3 { display: flex; align-items: center; gap: 10px; }
#arenaPlay[data-activity] .duel-side h3::before {
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--side-identity-border);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--side-identity-bg);
  content: "";
}
#arenaPlay[data-activity] .duel-side header strong {
  color: var(--side-bug-ink, var(--side-identity-fg));
  background: var(--surface);
  border: 2px solid var(--side-identity-border);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--side-identity-shadow);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
#arenaPlay[data-activity] .duel-side header strong small { font-size: 13px; font-weight: 800; opacity: .8; }
#arenaPlay[data-activity] .duel-progress { color: var(--ink-2); font-size: 14px; }
#arenaPlay[data-activity] .duel-side .arena-problem {
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
#arenaPlay[data-activity] .duel-options .button {
  color: var(--side-bug-ink, var(--side-identity-fg));
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 2px solid var(--side-identity-border);
  border-radius: 18px;
  box-shadow: 0 5px 0 var(--side-identity-border), 0 12px 22px -16px var(--side-identity-shadow);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  transition: transform .09s ease, box-shadow .09s ease, background-color .15s ease;
}
html:not([data-input="touch"]) #arenaPlay[data-activity] .duel-options .button:hover:not(:disabled) {
  background: var(--side-identity-bg);
  box-shadow: 0 5px 0 var(--side-identity-border), 0 14px 26px -14px var(--side-identity-shadow);
}
#arenaPlay[data-activity] .duel-options .button:active:not(:disabled) {
  color: var(--on-brand, #fff);
  background: var(--side-identity-border);
  box-shadow: 0 1px 0 var(--side-identity-border);
  transform: translateY(4px);
}
#arenaPlay[data-activity] .duel-feedback { color: var(--ink); }
#arenaPlay[data-activity] .duel-side.is-locked { box-shadow: inset 0 6px 0 var(--side-identity-border), inset 0 0 0 6px var(--red-tint); }

/* Lane geometry for tablets, laptops and boards; phones keep mobile.css's compact lane. */
@media (min-width: 681px) and (min-height: 521px) {
  #arenaPlay[data-activity] .duel-side { padding: clamp(14px, 1.7vw, 26px); border-radius: 26px; }
  #arenaPlay[data-activity] .duel-side header { flex: none; min-height: 0; align-items: center; padding-bottom: 10px; border-bottom: 1px dashed var(--side-identity-border); }
  #arenaPlay[data-activity] .duel-side header > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
  #arenaPlay[data-activity] .duel-side .duel-combo { margin-top: 0; }
  /* The key's 5px bottom edge is a shadow, so the options reserve it; the block may not shrink below its keys. */
  #arenaPlay[data-activity] .duel-question { min-height: min-content; }
  #arenaPlay[data-activity] .duel-options { gap: clamp(9px, 1.4vh, 14px); padding-bottom: 6px; }
  #arenaPlay[data-activity] .duel-options .button { min-height: clamp(52px, 7.4vh, 84px); padding-block: 0; line-height: 1.1; }
  #arenaPlay[data-activity] .duel-feedback { min-height: 24px; margin-top: clamp(10px, 1.4vh, 14px); }
  #arenaPlay[data-activity] .duel-side .arena-problem { margin-block: clamp(8px, 1.6vh, 20px); font-size: clamp(30px, min(4.2vw, 7.2vh), 64px); }
  #arenaPlay[data-activity] .duel-side header strong { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 14px 5px; }
}

/* The rival strip (online, computer, record) matches the lane styling. */
.duel-opponent {
  background: radial-gradient(120% 70% at 50% 0%, var(--side-identity-bg, var(--surface-2)), transparent 75%), var(--surface);
  border-width: 2px;
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
}

/* ---------- Referee podium: a spot of light and a soft floor shadow under the panda ---------- */
.duel-lanes > .referee-region .referee-art,
.arena-referee-header > .referee-region .referee-art { position: relative; isolation: isolate; }
.duel-lanes > .referee-region .referee-art::before,
.arena-referee-header > .referee-region .referee-art::before {
  position: absolute;
  inset: -14% -18% 4%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--gold-tint), transparent);
  border-radius: 50%;
  content: "";
}
.duel-lanes > .referee-region .referee-art::after,
.arena-referee-header > .referee-region .referee-art::after {
  position: absolute;
  right: 12%;
  bottom: -4px;
  left: 12%;
  z-index: -1;
  height: 12px;
  background: radial-gradient(closest-side, rgba(15, 12, 40, .28), transparent);
  border-radius: 50%;
  content: "";
}
.duel-lanes > .referee-region .referee-message,
.arena-referee-header > .referee-region .referee-message {
  padding: 5px 10px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
}
.duel-lanes > .referee-region .referee-message:empty,
.arena-referee-header > .referee-region .referee-message:empty { visibility: hidden; }

/* ---------- Turn and question games: a centred scoreboard with the referee between the sides ---------- */
@media (min-width: 681px) {
  .arena-referee-header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px clamp(12px, 2vw, 28px);
    margin: 4px 0 14px;
  }
  .arena-referee-header .arena-scores { display: contents; }
  .arena-referee-header .arena-side { grid-row: 1; min-width: min(260px, 100%); }
  .arena-referee-header .arena-side.side-0 { grid-column: 1; justify-self: end; }
  .arena-referee-header > .referee-region { grid-row: 1; grid-column: 2; }
  .arena-referee-header .arena-side.side-1 { grid-column: 3; justify-self: start; }
  .arena-referee-header .arena-scores > span { grid-row: 2; grid-column: 1 / -1; justify-self: center; color: var(--ink-2); font-weight: 800; }
  .arena-referee-header .arena-scores > span:empty { display: none; }
  .arena-referee-header .arena-scores > #arenaClock:not(:empty) {
    padding: 4px 14px;
    color: #fff;
    background: var(--inverse);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
  }
}
.arena-referee-header .arena-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name score" "turn score";
  align-items: center;
  gap: 2px 18px;
  padding: 12px 20px;
  background: radial-gradient(120% 90% at 0% 0%, var(--side-identity-bg), transparent 80%), var(--surface);
  border: 2px solid var(--side-identity-border);
  border-radius: 20px;
  box-shadow: 0 4px 0 var(--side-identity-shadow);
  transition: box-shadow .25s ease, opacity .25s ease;
}
.arena-referee-header .arena-side > span { grid-area: name; font-size: 17px; font-weight: 900; overflow-wrap: anywhere; }
.arena-referee-header .arena-side > strong { grid-area: score; font-size: clamp(30px, 3vw, 42px); line-height: 1; font-variant-numeric: tabular-nums; }
.arena-referee-header .arena-side > small {
  grid-area: turn;
  justify-self: start;
  padding: 2px 9px;
  color: var(--on-brand, #fff);
  background: var(--side-identity-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}
.arena-referee-header .arena-side.active {
  box-shadow: 0 0 0 4px var(--side-identity-border), 0 16px 34px -18px var(--side-identity-shadow);
}
.arena-referee-header .arena-side:not(.active):not(.arena-side--record) { opacity: .82; }
/* Phone: two cards share about 230 px beside the panda, so the name takes the card's full width over the turn chip and
   the score, and breaks only between words ("Oyuncu" and "Bilgisayar" whole). */
@media (max-width: 680px) {
  .arena-referee-header .arena-side { grid-template-areas: "name name" "turn score"; gap: 4px 6px; padding: 8px 10px; }
  .arena-referee-header .arena-side > span { font-size: 15px; line-height: 1.2; overflow-wrap: break-word; }
  .arena-referee-header .arena-side > strong { font-size: 28px; }
  .arena-referee-header .arena-side > small { padding: 2px 7px; white-space: nowrap; }
  /* The corner panda's rays (wider than the panda, transparent between bursts) end at its column, so the arena never
     scrolls sideways; the countdown's centred panda is positioned outside the column and keeps its full burst. */
  .arena-referee-header > .referee-region { overflow-x: clip; }
}
#arenaBody > #arenaPlay.arena-play:not(:has(.duel-lanes)) {
  background: var(--surface);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
}

/* ---------- Nim: real pebbles ---------- */
.nim-pile {
  display: grid;
  grid-template-columns: minmax(150px, 38%) minmax(0, 1fr);
  align-items: center;
  gap: 14px 18px;
  margin: 10px 0;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.nim-pile > div { display: flex; flex-wrap: wrap; gap: 8px; }
.nim-pile__stones { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: 30px; color: var(--ink-2); font-weight: 800; }
.nim-pile__stones i {
  width: 26px;
  height: 22px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .85), transparent 38%), linear-gradient(160deg, var(--brand-tint-2, var(--brand-tint)), var(--brand) 120%);
  border-radius: 48% 52% 46% 54% / 55% 50% 50% 45%;
  box-shadow: 0 3px 0 var(--brand-ink), 0 6px 10px -6px rgba(15, 12, 40, .5);
  animation: stage-pebble .35s cubic-bezier(.3, 1.5, .5, 1) both;
  animation-delay: calc(var(--k, 0) * 35ms);
}
@keyframes stage-pebble { from { opacity: 0; transform: translateY(-8px) scale(.6); } }
@media (max-width: 680px) {
  /* The İpucu sits beside the rule line, so it is on the first screen however many piles follow. */
  #arenaPlay:has(> .nim-pile) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: center; column-gap: 10px; }
  #arenaPlay:has(> .nim-pile) > h3 { grid-column: 1; margin: 0 0 4px; font-size: 17px; line-height: 1.3; }
  #arenaPlay:has(> .nim-pile) > [data-arena="logic-hint"] { grid-column: 2; grid-row: 1; align-self: start; min-height: 44px; margin: 0; }
  #arenaPlay:has(> .nim-pile) > .nim-pile { grid-column: 1 / -1; }
  .nim-pile { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 6px 0; padding: 8px 10px; }
  .nim-pile__stones { min-height: 22px; }
  .nim-pile__stones i { width: 20px; height: 17px; }
  .nim-pile > div { gap: 6px; }
  .nim-pile > div .button { min-width: 48px; min-height: 44px; padding: 0 10px; }
}

/* ---------- Result: the reveal ---------- */
#arenaDialog #arenaBody:has(> .arena-result) {
  padding: clamp(12px, 2.2vw, 30px);
  background:
    radial-gradient(60% 50% at 10% 0%, var(--player-a-tint), transparent 70%),
    radial-gradient(60% 50% at 90% 0%, var(--player-b-tint), transparent 70%),
    var(--bg);
}
.arena-dialog .arena-result {
  /* Wide enough on a 1366 px board for each card's tiles to share one row and the chart to sit beside the talk. */
  width: min(1240px, 100%);
  padding: 0 0 clamp(14px, 1.8vw, 24px);
  place-items: stretch;
  justify-items: stretch;
  gap: clamp(12px, 1.6vw, 18px);
  overflow: clip;
  text-align: left;
  background: var(--surface);
  border-radius: 30px;
}
.arena-dialog .arena-result::before { display: none; }
.arena-result > :not(.arena-result__hero):not(.arena-result__badge) { margin-inline: clamp(14px, 2.6vw, 34px); }

.arena-result__hero {
  --hero-tint: var(--brand-tint);
  --hero-line: var(--brand);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* Top-anchored: a title that wraps differently (long names, a disqualification) never moves the panda
     or the heading, keeping the normal and disqualification results aligned (task 57 contract). */
  align-items: start;
  gap: clamp(12px, 2vw, 26px);
  padding: clamp(10px, 1.4vw, 16px) clamp(18px, 3vw, 38px);
  background:
    radial-gradient(50% 120% at 12% 50%, var(--gold-tint), transparent 70%),
    linear-gradient(110deg, var(--hero-tint) 0%, var(--surface) 78%);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 6px 0 var(--hero-line);
}
.arena-result[data-winner="0"] .arena-result__hero { --hero-tint: var(--player-a-tint); --hero-line: var(--player-a); }
.arena-result[data-winner="1"] .arena-result__hero { --hero-tint: var(--player-b-tint); --hero-line: var(--player-b); }
.arena-result--disqualification .arena-result__hero { --hero-line: var(--red-base); }
.arena-result__hero .arena-result__art { width: clamp(84px, 9vw, 112px); margin: 0; }
.arena-result__hero .arena-result__art .referee-message { min-height: 0; max-width: 140px; font-size: 12px; }
.arena-result__hero .arena-result__art .referee-art { width: clamp(64px, 6.5vw, 88px); }
.arena-result__hero .arena-result__art .mw-mascot { width: 100%; }
.arena-result__hero .arena-result__announcement { justify-items: start; padding-top: clamp(4px, 1.2vw, 14px); text-align: left; }
.arena-dialog .arena-result__hero h3 { font-size: clamp(30px, 3.8vw, 52px); letter-spacing: -.035em; text-wrap: balance; }
.arena-result__hero .arena-result__announcement h3::after { width: 72px; margin: 8px 0 0; background: var(--hero-line); }
.arena-result__hero .arena-result__kicker { color: var(--ink-2); }
.arena-result__badge { z-index: 2; }

/* Scoreboard: two equal cards with a VS disc; the winner is lit, never moved. */
.arena-result .arena-scores--final {
  position: relative;
  width: auto;
  margin-block: 0;
  justify-self: stretch;
  gap: clamp(14px, 2.4vw, 30px);
}
.arena-result .arena-scores--final:not(.arena-scores--solo)::after {
  position: absolute;
  top: 22px;
  left: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--ink-2);
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  content: "VS";
  translate: -50% 0;
}
.arena-result .arena-scores--final .arena-side {
  padding: 12px 20px 14px;
  gap: 4px 16px;
  color: var(--side-identity-fg);
  background: radial-gradient(120% 90% at 0% 0%, var(--side-identity-bg), transparent 75%), var(--surface);
  border: 2px solid var(--side-identity-border);
  border-radius: 24px;
  box-shadow: inset 0 5px 0 var(--side-identity-border), var(--shadow-sm);
}
.arena-result .arena-scores--final .arena-side > span { font-size: 18px; font-weight: 900; }
.arena-result .arena-scores--final .arena-side strong {
  position: relative;
  font-size: clamp(42px, 5.2vw, 66px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.03em;
  text-align: right;
}
.arena-result .arena-scores--final .arena-side.is-winner {
  background:
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 48%, transparent 61%) -180% 0 / 55% 100% no-repeat,
    radial-gradient(130% 110% at 0% 0%, var(--side-identity-bg), transparent 78%),
    var(--surface);
  box-shadow: inset 0 5px 0 var(--side-identity-border), 0 0 0 3px var(--side-identity-border), 0 26px 50px -24px var(--side-identity-shadow);
  animation: stage-shine 1.4s .6s ease-out both;
}
@keyframes stage-shine { to { background-position: 280% 0, 0 0, 0 0; } }
.arena-result .arena-scores--final .arena-side:not(.is-winner):not(.is-tied):not(.is-record) { opacity: .9; }

/* Stat tiles: value over label; the sentence text is unchanged for screen readers and tests.
   A tile never wraps its value or label: tiles are as wide as their text at least, share a row in equal widths
   while they fit and move to the next row when they do not (one row on a board card, two on a phone). */
.arena-result .arena-side__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.arena-result .arena-side__stats > span,
.arena-result .arena-side__stats .stat-tile {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: max-content;
  /* A tile left alone on a row keeps a column's width instead of spanning the card. */
  max-width: calc((100% - 16px) / 3);
  white-space: nowrap;
  padding: 6px 10px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
}
.stat-tile b { order: -1; color: var(--side-bug-ink, var(--side-identity-fg)); font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; }
.arena-side.side-0 { --side-bug-ink: var(--player-a-ink); }
.arena-side.side-1 { --side-bug-ink: var(--player-b-ink); }
.arena-result .arena-side__stats .stat-tile small { color: var(--ink-2); font-size: 12px; font-weight: 800; }
.stat-tile--text small { color: var(--ink); font-size: 13px; }

/* Count-up: the real score stays in the DOM; an overlay counts to it. */
@property --count-now { syntax: "<integer>"; inherits: false; initial-value: 0; }
.arena-result .arena-side strong.is-counting { color: transparent; }
.arena-result .arena-side strong.is-counting::after {
  position: absolute;
  inset: 0;
  color: var(--side-identity-fg);
  text-align: inherit;
  counter-reset: stage-score var(--count-now);
  content: counter(stage-score);
  animation: stage-count var(--count-duration, 1.1s) cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes stage-count { from { --count-now: 0; } to { --count-now: var(--count-to); } }

/* Story row: the race chart beside the facts and commentary on wide screens. */
.arena-result__story { display: grid; gap: clamp(12px, 1.6vw, 18px); align-items: start; }
@media (min-width: 980px) { .arena-result__story { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.arena-result__talk { display: grid; gap: 10px; min-width: 0; }
.arena-result__talk > *, .arena-result__story .arena-result__facts { margin: 0; }

.race-chart {
  container: racechart / inline-size;
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 12px 14px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-xs);
}
.race-chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; color: var(--ink-2); font-size: 13px; font-weight: 750; }
.race-chart figcaption strong { color: var(--ink); font-size: 15px; font-weight: 900; }
.race-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.race-chart__tick line { stroke: var(--line); stroke-dasharray: 3 5; }
.race-chart__tick text, .race-chart__time { fill: var(--ink-3); font-family: var(--font-sans); font-size: 12px; font-weight: 800; }
.race-chart__line { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.race-chart__line.side-0, .race-chart__end.side-0 { stroke: var(--player-a); }
.race-chart__line.side-1, .race-chart__end.side-1 { stroke: var(--player-b); }
.race-chart__end { stroke-width: 3; }
.race-chart__end.side-0 { fill: var(--player-a); stroke: var(--surface); }
.race-chart__end.side-1 { fill: var(--player-b); stroke: var(--surface); }
.race-chart__flip { fill: var(--surface); stroke: var(--gold-base); stroke-width: 3; }
.race-chart__dq path { fill: none; stroke: var(--red-base); stroke-width: 3; stroke-linecap: round; }
.race-chart__record line { stroke: var(--gold-base); stroke-width: 2; stroke-dasharray: 7 6; }
.race-chart__record text { fill: var(--gold-ink); font-family: var(--font-sans); font-size: 12px; font-weight: 900; }
.race-chart__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 12px; font-weight: 800; }
.race-chart__legend li { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); background: none; }
.race-chart__legend i { width: 16px; height: 4px; border-radius: 4px; background: var(--brand); }
.race-chart__legend .side-0 i { background: var(--player-a); }
.race-chart__legend .side-1 i { background: var(--player-b); }
.race-chart__legend .race-chart__legend-flip i { width: 10px; height: 10px; background: var(--surface); border: 3px solid var(--gold-base); border-radius: 50%; }
/* The 640-unit chart shrinks with a narrow card (to about half on a phone), so its labels grow in chart units
   to stay at least 10 px tall on screen. */
@container racechart (max-width: 560px) { .race-chart svg text { font-size: 18px; } }
@container racechart (max-width: 440px) { .race-chart svg text { font-size: 21px; } }

/* Facts, commentary and closing notes. */
.arena-result .arena-result__facts { justify-content: flex-start; gap: 6px; margin-block: 0; }
.arena-result .arena-result__facts span { padding: 4px 10px; color: var(--ink-2); background: var(--surface-2); border: 0; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.arena-result:not(:has(.arena-result__story)) .arena-result__facts { justify-content: center; }
.arena-dialog .arena-result .arena-result__commentary {
  position: relative;
  justify-self: stretch;
  width: auto;
  max-width: none;
  margin-block: 0;
  padding: 14px 18px 14px 20px;
  color: var(--ink);
  text-align: left;
  background: linear-gradient(90deg, var(--brand-tint), var(--surface) 65%);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: 18px;
  box-shadow: none;
}
.arena-result__commentary::before {
  display: block;
  margin-bottom: 4px;
  color: var(--brand-ink);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  content: "Hakem yorumu";
}
.arena-result__commentary span:first-child { font-size: 17px; }
.arena-dialog .arena-result .arena-result__prompt { justify-self: stretch; width: auto; max-width: none; margin-block: 0; }
.arena-dialog .arena-result .arena-result__disqualification { text-align: left; border-radius: 16px; }
.arena-result .online-series,
.arena-result .arena-result__review { justify-self: stretch; width: auto; }

/* Actions stay reachable: they ride the bottom of the scrolling result until their place arrives. */
.arena-result .arena-result__actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block: 0;
  margin-inline: 0 !important;
  padding: 12px clamp(14px, 2.6vw, 34px) 12px;
  background: var(--glass-strong, var(--surface));
  border-top: 1px solid var(--line);
  box-shadow: 0 -14px 28px -22px rgba(15, 12, 40, .35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.arena-dialog .arena-result { padding-bottom: 0; }
.arena-result .arena-result__review { margin-bottom: clamp(14px, 1.8vw, 22px); }

/* Reveal choreography. Measured anchors (title, cards) only fade: transforms would move their boxes
   while layout tests and the disqualification alignment contract read them. */
.arena-result__hero h3 { animation: stage-fade .5s ease-out both; }
.arena-result .arena-scores--final .arena-side { animation: stage-fade .45s ease-out both; }
.arena-result .arena-scores--final .arena-side:nth-child(2) { animation-delay: .1s; }
.arena-result .arena-scores--final .arena-side.is-winner { animation: stage-fade .45s ease-out both, stage-shine 1.4s .7s ease-out both; }
.arena-result .arena-side__stats > span { animation: stage-rise .4s ease-out both; animation-delay: calc(.35s + var(--i, 0) * 40ms); }
.race-chart__line { animation: stage-draw 1.3s .35s cubic-bezier(.4, 0, .2, 1) both; }
.race-chart__line.side-1 { animation-delay: .5s; }
.race-chart__end, .race-chart__flip, .race-chart__dq { animation: stage-rise .35s 1.5s ease-out both; }
@keyframes stage-fade { from { opacity: 0; } }
@keyframes stage-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes stage-draw { from { stroke-dashoffset: 1; } }

/* Short screens (a 768px laptop or board): the referee's words become screen-reader text and the
   hero tightens so the scoreboard, chart and actions share one screen. */
@media (max-height: 820px) {
  #arenaDialog #arenaBody:has(> .arena-result) { padding-block: 12px; }
  .arena-result__hero .arena-result__art { width: 72px; }
  .arena-result__hero .arena-result__art .referee-art { width: 64px; }
  .arena-result__hero .arena-result__art .referee-message {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Short wide screens (the 1366×768 board, 1280×720 labs): the hero, the gaps and the action bar give back their
   spare height so the headline, both cards, the whole race chart and the referee comment share one screen above
   the actions. Text keeps its board sizes; only padding and margins shrink. */
@media (max-height: 820px) and (min-width: 681px) {
  .arena-dialog .arena-result { gap: 12px; }
  .arena-result__hero { padding-block: 6px 8px; }
  .arena-result__hero .arena-result__announcement { padding-top: 0; }
  .arena-result__hero .arena-result__kicker { margin-bottom: 2px; }
  .arena-result__hero .arena-result__announcement h3::after { height: 4px; margin-top: 4px; }
  .arena-result .arena-scores--final .arena-side { padding-block: 10px 12px; }
  .arena-result .arena-result__actions { padding-block: 9px; }
  .arena-result .arena-result__actions .button { min-height: 52px; }
}
/* Equal halves there: the chart is drawn smaller (so shorter) and the talk column wraps less. */
@media (max-height: 820px) and (min-width: 980px) {
  .arena-result__story { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arena-result__story .race-chart { padding: 10px 14px 8px; }
}

/* Phones: a compact side-by-side hero, wrapping tiles and paired actions (mobile.css sizes the dialog). */
@media (max-width: 680px) {
  .arena-result__hero { grid-template-columns: auto minmax(0, 1fr); padding: 10px 14px; gap: 10px; }
  .arena-result__hero .arena-result__art { width: 64px; }
  .arena-result__hero .arena-result__art .referee-art { width: 58px; }
  .arena-result__hero .arena-result__art .referee-message {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .arena-dialog .arena-result__hero h3 { font-size: clamp(24px, 7.4vw, 32px); }
  .arena-result .arena-result__actions { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  .arena-result .arena-result__actions .button { flex: 1 1 0; min-width: 0; min-height: 52px; height: auto; padding-inline: 10px; }
  .arena-result .arena-result__actions .online-rematch-status { flex: 1 0 100%; }
  .arena-result .arena-result__actions:has(.online-rematch-status) { flex-wrap: wrap; }
  #arenaDialog #arenaPlay .duel-side header strong { padding: 1px 8px; border-width: 1.5px; border-radius: 10px; box-shadow: none; }
  .arena-result .arena-scores--final:not(.arena-scores--solo)::after { top: 14px; width: 34px; height: 34px; font-size: 11px; }
  .arena-result .arena-scores--final .arena-side { padding: 12px 12px; border-radius: 18px; }
  .arena-result .arena-scores--final .arena-side strong { font-size: clamp(30px, 9vw, 40px); }
  .arena-result .arena-side__stats { gap: 6px; }
  .arena-result .arena-side__stats .stat-tile { padding: 6px 8px; }
  .stat-tile b { font-size: 17px; }
  .arena-result > :not(.arena-result__hero):not(.arena-result__badge) { margin-inline: 12px; }
}
/* Small phones: the two cards stay side by side (about 140 px inside each), so every tile takes the card's full
   width as one column of value-over-label rows; nothing wraps and both cards list their facts at the same height. */
@media (max-width: 480px) {
  #arenaDialog .arena-result .arena-scores--final .arena-side__stats { gap: 5px; }
  #arenaDialog .arena-result .arena-scores--final .arena-side__stats .stat-tile { flex-basis: 100%; max-width: none; padding: 4px 8px; }
}

/* High contrast: solid outlines, no tints or shine. */
body.high-contrast .arena-result__hero { background: var(--surface); box-shadow: inset 0 6px 0 var(--navy); }
body.high-contrast .arena-result .arena-scores--final .arena-side,
body.high-contrast .arena-result .arena-scores--final .arena-side.is-winner { background: var(--surface); border-color: var(--navy); animation: none; }
body.high-contrast .race-chart, body.high-contrast .stat-tile { border-color: var(--navy); }
body.high-contrast #arenaPlay[data-activity] .duel-options .button { border: 2px solid var(--navy); box-shadow: 0 4px 0 var(--navy); }

/* Reduced motion: every stage animation is off, the chart is static and scores appear at once. */
body.reduced-motion #arenaDialog .arena-header p::before,
body.reduced-motion .duel-timer.is-urgent > div,
body.reduced-motion .nim-pile__stones i,
body.reduced-motion .arena-result__hero h3,
body.reduced-motion .arena-result .arena-scores--final .arena-side,
body.reduced-motion .arena-result .arena-side__stats > span,
body.reduced-motion .race-chart__line,
body.reduced-motion .race-chart__end,
body.reduced-motion .race-chart__flip,
body.reduced-motion .race-chart__dq { animation: none !important; }
body.reduced-motion #arenaPlay[data-activity] .duel-options .button:active:not(:disabled) { transform: none; }
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-on) #arenaDialog .arena-header p::before,
  body:not(.motion-on) .duel-timer.is-urgent > div,
  body:not(.motion-on) .nim-pile__stones i,
  body:not(.motion-on) .arena-result__hero h3,
  body:not(.motion-on) .arena-result .arena-scores--final .arena-side,
  body:not(.motion-on) .arena-result .arena-side__stats > span,
  body:not(.motion-on) .race-chart__line,
  body:not(.motion-on) .race-chart__end,
  body:not(.motion-on) .race-chart__flip,
  body:not(.motion-on) .race-chart__dq { animation: none !important; }
  body:not(.motion-on) #arenaPlay[data-activity] .duel-options .button:active:not(:disabled) { transform: none; }
}