/* The Live Duel (bundles/_duel_live): board, Swing chart, calls, moments and games. Pages arrange shared components; colours, sizes,
   radii and shadows come from tokens.css. You are lime (the accent), the other player amber (the warning text colour), the home side
   ivory-pale and the away side blue, so a chart never needs a key to say whose line it is. */

.duel-live { --duel-you: var(--accent); --duel-rival: var(--text-warning); --duel-home: var(--text-body); --duel-away: var(--text-info); min-width: 0; }
.duel-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.duel-section-head h2, .duel-section-title, .duel-game__swing-head h2 { margin: 0; font: var(--type-h3); color: var(--text-strong); }
.duel-section-title { margin-bottom: var(--space-3); }
.duel-section-head .duel-section-title { margin: 0; }
.duel-live .num { font-family: var(--font-display); font-weight: var(--weight-display); font-variant-numeric: tabular-nums lining-nums; line-height: var(--lh-num); }

/* ---- Layout ---- */
.duel-lower { display: grid; gap: var(--space-5); align-items: start; }
.duel-side { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
@media (min-width: 700px) and (max-width: 1279px) { .duel-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .duel-lower { grid-template-columns: minmax(0, 1fr) 380px; } }

/* ---- Board ---- */
.duel-board-box { container-type: inline-size; }
.duel-board { display: grid; gap: var(--space-3); }
.duel-board__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: var(--space-6); }
.duel-board__sides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.duel-board__side { display: grid; justify-items: center; gap: var(--space-2); min-width: 0; text-align: center; }
.duel-board__avatar { display: inline-flex; width: 56px; height: 56px; border-radius: var(--radius-avatar); transition: box-shadow var(--dur-slow) var(--ease-out); }
.duel-board__avatar .avatar { width: 100% !important; height: 100% !important; }
.duel-board__avatar .avatar-marked, .duel-board__avatar .avatar-premium { width: 100%; height: 100%; }
.duel-board__side.is-lead .duel-board__avatar { box-shadow: 0 0 0 3px var(--duel-you), var(--glow-accent); }
.duel-board__side--rival.is-lead .duel-board__avatar { box-shadow: 0 0 0 3px var(--duel-rival), 0 0 22px -4px color-mix(in srgb, var(--duel-rival) 55%, transparent); }
.duel-board__name { font: var(--type-label); font-weight: var(--weight-bold); color: var(--text-strong); overflow-wrap: anywhere; }
.duel-board__points { font-size: var(--fs-num-l); color: var(--text-muted); white-space: nowrap; transition: color var(--dur-base); }
.duel-board__side.is-lead .duel-board__points { color: var(--text-strong); }
.duel-board__points.is-dim { opacity: .6; }
.duel-board__points small { font: var(--type-label); color: var(--text-on-hero); margin-left: var(--space-1); }
.duel-board__mid { display: grid; gap: var(--space-3); }
.duel-board__lead { display: flex; justify-content: center; }
.duel-chip { display: inline-flex; align-items: center; height: var(--control-h-sm); padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--veil-dark); color: var(--text-strong); font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-h3); box-shadow: var(--shadow-chip); white-space: nowrap; }
.duel-chip--you { background: var(--duel-you); color: var(--text-on-accent); box-shadow: var(--shadow-key); }
.duel-chip--rival { background: var(--duel-rival); color: var(--text-on-accent); }
.duel-tug { position: relative; height: var(--space-3); border-radius: var(--radius-pill); background: var(--veil-dark); box-shadow: var(--shadow-well); }
.duel-tug::after { content: ""; position: absolute; left: 50%; top: calc(-1 * var(--space-1)); bottom: calc(-1 * var(--space-1)); width: 2px; margin-left: -1px; background: var(--text-on-hero); opacity: .6; }
.duel-tug__fill { position: absolute; top: 2px; bottom: 2px; width: 0; border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out); }
.duel-tug__fill--you { right: 50%; background: var(--duel-you); }
.duel-tug__fill--rival { left: 50%; background: var(--duel-rival); }
.duel-board__foot { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font: var(--type-caption); color: var(--text-on-hero); }
.duel-board__foot span { display: inline-flex; align-items: center; gap: var(--space-2); }
.duel-board__foot b { font-size: var(--fs-label); color: var(--text-strong); }
@container (min-width: 640px) {
  .duel-board { grid-template-columns: minmax(0, 1fr) minmax(200px, 300px) minmax(0, 1fr); grid-template-areas: "top top top" "you mid rival" "foot foot foot"; align-items: center; gap: var(--space-3) var(--space-4); }
  .duel-board__top { grid-area: top; } .duel-board__foot { grid-area: foot; font: var(--type-label); } .duel-board__mid { grid-area: mid; } .duel-board__foot b { font-size: var(--fs-lead); }
  .duel-board__sides { display: contents; }
  .duel-board__side { grid-template-columns: auto 1fr; grid-template-areas: "ava name" "ava pts"; justify-items: start; text-align: left; align-items: end; column-gap: var(--space-3); row-gap: 0; grid-area: you; }
  .duel-board__side--rival { grid-area: rival; grid-template-columns: 1fr auto; grid-template-areas: "name ava" "pts ava"; justify-items: end; text-align: right; }
  .duel-board__avatar { grid-area: ava; align-self: center; }
  .duel-board__name { grid-area: name; align-self: end; } .duel-board__points { grid-area: pts; align-self: start; }
}
@container (min-width: 820px) {
  .duel-board { column-gap: var(--space-5); grid-template-columns: minmax(0, 1fr) minmax(240px, 360px) minmax(0, 1fr); }
  .duel-board__side { column-gap: var(--space-4); } .duel-board__avatar { width: 80px; height: 80px; } .duel-board__name { font: var(--type-h3); } .duel-board__points { font-size: var(--fs-num-xl); }
}
@container (min-width: 1000px) { .duel-board__points { font-size: var(--fs-num-2xl); } .duel-board__avatar { width: 96px; height: 96px; } }

/* A compact scoreboard that follows the page once the board has scrolled away. */
.duel-mini { position: fixed; left: 0; right: 0; top: 0; z-index: var(--z-sticky); display: flex; justify-content: center; padding: var(--space-2) var(--gutter); pointer-events: none; transform: translateY(-130%); transition: transform var(--dur-slow) var(--ease-out); }
.duel-mini.is-on { transform: none; }
.duel-mini__inner { pointer-events: auto; display: flex; align-items: center; gap: var(--space-3); min-width: 0; max-width: 460px; width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: var(--surface-glass); backdrop-filter: blur(var(--blur-scrim)); box-shadow: var(--shadow-pop); }
.duel-mini__side { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; }
.duel-mini__side--rival { flex-direction: row-reverse; }
.duel-mini__side b { font-size: var(--fs-num-s); color: var(--text-muted); }
.duel-mini__side.is-lead b { color: var(--text-strong); }
.duel-mini__mid { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.duel-mini__mid b { font-size: var(--fs-num-s); color: var(--text-strong); }
@media (min-width: 960px) { .duel-mini { left: var(--layout-rail); } }

/* ---- Game card ---- */
.duel-game { padding: 0; overflow: hidden; }
.duel-game__head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--card-pad) var(--card-pad) var(--space-4); }
.duel-team { display: grid; justify-items: center; gap: var(--space-2); text-align: center; min-width: 0; }
.duel-team .team-crest { --crest-size: 48px !important; }
.duel-team b { font: var(--type-label); font-weight: var(--weight-bold); color: var(--text-strong); overflow-wrap: anywhere; }
.duel-score { display: grid; justify-items: center; gap: var(--space-2); }
.duel-score__tiles { display: flex; align-items: center; gap: var(--space-2); color: var(--text-subtle); }
.duel-score .score-tile { width: 44px; height: 56px; font-size: var(--fs-num-m); }
@media (min-width: 700px) {
  .duel-game__head { max-width: 760px; width: 100%; margin-inline: auto; padding-bottom: var(--space-5); }
  .duel-team .team-crest { --crest-size: 64px !important; } .duel-team b { font: var(--type-h3); }
  .duel-score .score-tile { width: 60px; height: 76px; font-size: var(--fs-num-l); }
}
.duel-game__swing { padding: var(--space-4) var(--card-pad) var(--card-pad); border-top: var(--border-width) solid var(--border-faint); display: grid; gap: var(--space-3); }
.duel-game__swing-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.swing-legend { display: flex; gap: var(--space-2) var(--space-5); font: var(--type-caption); color: var(--text-muted); flex-wrap: wrap; }
.swing-legend__group { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.swing-legend__group b { color: var(--text-strong); font-weight: var(--weight-bold); }
.swing-key { display: inline-block; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-xs); margin-right: var(--space-1); vertical-align: -1px; }
.swing-key--home { background: var(--duel-home); } .swing-key--away { background: var(--duel-away); } .swing-key--you { background: var(--duel-you); } .swing-key--rival { background: var(--duel-rival); }

/* ---- Swing chart ---- */
.swing { position: relative; display: grid; gap: var(--space-3); }
.swing__plot { position: relative; touch-action: pan-y; user-select: none; border-radius: var(--radius-md); min-height: 220px; }
.swing__plot:focus-visible { outline-offset: var(--space-1); }
.swing__plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.swing__plot text { font-family: var(--font-body); font-size: var(--fs-caption); fill: var(--text-subtle); paint-order: stroke; stroke: var(--surface-card); stroke-width: 4px; stroke-linejoin: round; }
.swing__plot text.swing__pill-text { stroke: none; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--fs-label); fill: var(--text-inverse); }
.swing__plot text.swing__pill-text--light { fill: var(--text-on-danger); }
.swing__tag { position: absolute; left: 0; display: block; border-radius: var(--radius-avatar); overflow: hidden; pointer-events: none; }
.swing__tag--crest { overflow: visible; border-radius: 0; }
.swing__tag:has(.avatar-marked, .avatar-premium) { overflow: visible; }
.swing__tag .avatar-marked, .swing__tag .avatar-premium { width: 100%; height: 100%; }
.swing__tag .avatar { width: 100% !important; height: 100% !important; }
.swing__tag .team-crest { --crest-size: 100% !important; width: 100%; height: 100%; }
.swing__tag img:not(.avatar-type-coin) { width: 100%; height: 100%; object-fit: cover; }
.swing__tag[hidden] { display: none; }
.swing__empty { position: absolute; display: grid; place-items: center; text-align: center; color: var(--text-muted); font: var(--type-label); pointer-events: none; }
.swing__empty span { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--surface-sunken); }
.swing__readout { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-height: var(--space-6); }
.swing__readout b { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-label); color: var(--text-strong); }
.swing__note { display: flex; align-items: center; gap: var(--space-2); font: var(--type-caption); color: var(--text-muted); }
.swing-draw { animation: swing-draw 700ms var(--ease-out) both; }
@keyframes swing-draw { from { clip-path: inset(-40px 100% -40px 0); } to { clip-path: inset(-40px -20px -40px 0); } }

/* Shared first-half pressure track. */
.duel-pressure__bar { display: flex; height: var(--space-3); border-radius: var(--radius-pill); overflow: hidden; gap: 3px; background: var(--progress-track); }
.duel-pressure__bar i { display: block; height: 100%; min-width: 0; }
.duel-pressure__home { background: var(--duel-home); }
.duel-pressure__away { background: var(--duel-away); }

/* ---- Half-time and full-time ---- */
.duel-panel { display: grid; gap: var(--space-4); }
.duel-panel__cols { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .duel-panel__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; } }
.duel-pressure { display: grid; gap: var(--space-2); }
.duel-pressure__row { display: flex; justify-content: space-between; align-items: center; font: var(--type-label); color: var(--text-strong); gap: var(--space-3); }
.duel-pressure__row span { display: inline-flex; align-items: center; gap: var(--space-2); }
.duel-pressure__row .team-crest { --crest-size: 24px !important; }
.duel-deciders ul { display: grid; gap: var(--space-2); }
.duel-deciders li { display: grid; grid-template-columns: var(--control-h-sm) 1fr; gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--shadow-well); }
.duel-deciders b { display: block; font: var(--type-label); font-weight: var(--weight-bold); color: var(--text-strong); }
.duel-deciders span { font: var(--type-caption); color: var(--text-muted); }
.duel-turns { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.duel-turn { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4); align-items: center; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--shadow-well); }
.duel-turn > .num { font-size: var(--fs-num-l); color: var(--text-strong); }
.duel-turn b { display: block; font: var(--type-label); font-weight: var(--weight-bold); color: var(--text-strong); }
.duel-turn div span { font: var(--type-caption); color: var(--text-muted); }

/* ---- Moments and games ---- */
.duel-feed, .duel-game-list { display: grid; gap: var(--space-2); }
.duel-feed li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--shadow-well); }
.duel-feed__minute { font-size: var(--fs-num-s); color: var(--text-strong); }
.duel-feed b { display: block; font: var(--type-label); font-weight: var(--weight-bold); color: var(--text-strong); }
.duel-feed small { display: block; font: var(--type-caption); color: var(--text-muted); }
.duel-feed .duel-feed__flip { display: flex; align-items: center; gap: var(--space-1); color: var(--text-accent); font-weight: var(--weight-bold); }
.duel-feed__gain { display: grid; gap: 2px; justify-items: end; text-align: right; }
.duel-feed__gain b { font-size: var(--fs-lead); }
.duel-feed__gain--you { color: var(--text-accent) !important; } .duel-feed__gain--rival { color: var(--duel-rival) !important; }
.duel-booking { display: inline-block; width: var(--space-3); height: var(--space-4); border-radius: var(--radius-xs); vertical-align: -2px; margin-right: var(--space-1); }
.duel-booking--yellow { background: var(--text-warning); } .duel-booking--red { background: var(--text-danger); }
.duel-game-list li { border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--shadow-well); }
.duel-game-list li.is-focus { box-shadow: inset 0 0 0 2px var(--accent-line); }
.duel-game-list__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3); min-height: var(--control-h); border-radius: var(--radius-md); }
.duel-game-list__teams { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.duel-game-list__teams .team-crest { --crest-size: 28px !important; }
.duel-game-list__teams b { font-size: var(--fs-lead); color: var(--text-strong); margin-left: var(--space-1); }
.duel-game-list__state { display: flex; align-items: center; gap: var(--space-3); }
.duel-game-list__points { display: flex; gap: var(--space-3); font-size: var(--fs-lead); }
.duel-game-list__points .is-you { color: var(--text-accent); } .duel-game-list__points .is-rival { color: var(--duel-rival); }
.duel-game-list__sealed span { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); font: var(--type-caption); color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) { .swing-draw { animation: none; } .duel-mini { transition: none; } }