/* Game layer: the match HUD (thin timer ring, line-icon "?" and sound buttons, toggle switches), overlays, sheets,
   coach marks. Loaded after style.css and scenes.css; uses the same tokens. */

/* ---------- the match top bar (overrides the base bar in style.css) ----------
   Desktop: brand (wide screens), Back, the game title with the stake under it, the scoreboard in the middle, then "?",
   preview options and sound. Phones: Back, title + stake, the round buttons on the first row; the scoreboard on its own
   row. The stake lives under the title, so the separate stake pill is not shown in a match. */
body[data-view="match"] .match-stake { display: none; }
body[data-view="match"] .match-info { flex: 0 1 auto; max-width: 300px; }
body[data-view="match"] .match-info .pot-sub { display: block; max-width: 100%; font-size: 12.5px; }
body[data-view="match"] .match-info .pot-sub b { font-size: 1.1em; }
@media (max-width: 1279px) { body[data-view="match"] .brand { display: none; } }

/* ---------- the scoreboard (#hud, js/scenes/hud.js) ----------
   You on the left, the opponent on the right (mirrored), each a cream sticker: the mascot head ringed in the side color
   (a "thinking…" / lock badge on it, the role chip beside it), the real name (+ a small AI tag), the game's pieces under
   it (Penalty kick tracker, Shootout ammo). In the middle: your score, the timer ring, their score, the round under it. */
.hud {
  --hud-av: 40px;
  flex: 1 1 auto; min-width: 0; max-width: 820px; margin-inline: auto; display: flex; align-items: stretch; justify-content: center; gap: 8px;
  color: var(--ui-ink);
}
.hud.hidden { display: none; }
.hud-side {
  --side: var(--ui-player);
  flex: 0 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 3px 16px 3px 3px; border-radius: 999px;
  background: var(--ui-cream); border: var(--ink-line); box-shadow: var(--ledge-sm), inset 0 -3px 0 color-mix(in srgb, var(--side) 55%, transparent);
}
.hud-opp { --side: var(--ui-opponent); flex-direction: row-reverse; padding: 3px 3px 3px 16px; }
.hud-av { position: relative; flex: none; display: flex; align-items: center; gap: 6px; }
.hud-opp .hud-av { flex-direction: row-reverse; }
.hud-avatar { --size: var(--hud-av); --side-ring: var(--side); border-width: 2.5px; }
.avatar.mascot-avatar.hud-avatar > svg { width: 116%; height: 116%; margin-top: 8%; }   /* the head with its hat */
.hud-id { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px; justify-items: start; }
.hud-opp .hud-id { justify-items: end; }
.hud-name { display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.hud-opp .hud-name { flex-direction: row-reverse; }
.hud-name b, .hud-name .name-link {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 17px/1.15 var(--font-display); color: var(--ui-ink);
}
.hud-name .name-link { padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline 1.5px color-mix(in srgb, var(--ui-ink) 30%, transparent); text-underline-offset: 3px; }
.hud-ai {
  flex: none; padding: 2px 5px 1px; border-radius: 6px; background: var(--ui-ink); color: var(--ui-cream);
  font: 700 10.5px/1.1 var(--font-body); font-style: normal; letter-spacing: .04em;
}
.hud .scout-btn { flex: none; padding: 1px 8px; font-size: 12px; }
.hud-extra:empty { display: none; }
/* the middle: score · timer · score, the round under it */
.hud-mid {
  flex: none; display: grid; justify-items: center; align-content: center; padding: 1px 12px 3px; border-radius: 16px;
  background: var(--ui-cream); border: var(--ink-line); box-shadow: var(--ledge-sm);
}
.hud-nums { display: flex; align-items: center; gap: 8px; }
.hud-score { min-width: 1ch; font: 700 28px/1 var(--font-display); font-variant-numeric: tabular-nums; text-align: center; }
.hud-score-you { color: var(--ui-player); }
.hud-score-opp { color: var(--ui-opponent); }
.hud-score.bump { animation: hud-bump .55s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes hud-bump { 30% { transform: scale(1.45); color: var(--ui-win); } }
.hud-clock { display: grid; place-items: center; }
.hud-clock > * { grid-area: 1 / 1; }
.hud-dash { display: none; font-style: normal; font: 700 22px/1 var(--font-display); color: var(--ui-ink-2); }
body.is-tutorial .hud-dash, body:not([data-view]) .hud-dash { display: block; }
body:not([data-view]) .hud .timer-ring { display: none; }   /* the scene lab: no timer */
.hud-round { display: flex; align-items: baseline; gap: 6px; font: 700 12px/1.2 var(--font-body); color: var(--ui-ink-2); white-space: nowrap; }
.hud-round .r-main { color: var(--ui-ink); }
.hud-round .r-note::before { content: '· '; }
.hud-round .r-phase { padding: 0 6px; border-radius: 999px; background: var(--ui-ink); color: var(--ui-cream); }
.hud.is-alert .hud-round .r-main { color: var(--ui-play); text-transform: uppercase; letter-spacing: .03em; }
/* the role chip: football boot = kicking, goalkeeper gloves = keeping (Penalty); pointer / looker (Look Away) */
.hud-role {
  --role-c: var(--ui-win);
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--role-c); border: 2px solid var(--edge); box-shadow: 0 2px 0 var(--ledge-c);
}
.hud-role[hidden] { display: none; }
.hud-role[data-role="keep"] { --role-c: var(--ui-money); }
.hud-role[data-role="point"], .hud-role[data-role="look"] { --role-c: var(--ui-cream-2); }
.hud-role .hud-ico { width: 84%; height: 84%; }
.hud-role img.hud-ico { width: 88%; height: 88%; object-fit: contain; }
.hud-role.flip { animation: hud-flip .45s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes hud-flip { from { transform: rotateY(90deg) scale(.7); } }
/* code-drawn icons (boot, glove): cream on the role color, ink lines */
/* "thinking…" (three dots) / locked in (a lock) on the avatar */
.hud-badge {
  position: absolute; bottom: -4px; left: -5px; z-index: 1; display: none; align-items: center; gap: 2px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--ui-cream); border: 1.5px solid var(--edge); box-shadow: 0 1.5px 0 var(--ledge-c);
}
.hud-opp .hud-badge { left: auto; right: -5px; }   /* the outer corner of the avatar: clear of the name and the role chip */
.hud-badge i { width: 4px; height: 4px; border-radius: 50%; background: var(--ui-ink-2); animation: hud-dot 1.2s ease-in-out infinite; }
.hud-badge i:nth-child(2) { animation-delay: .15s; }
.hud-badge i:nth-child(3) { animation-delay: .3s; }
.hud-badge img { display: none; width: 12px; height: 12px; object-fit: contain; }
@keyframes hud-dot { 30% { transform: translateY(-3px); background: var(--ui-ink); } }
.hud-side[data-status="thinking"] .hud-badge, .hud-side[data-status="locked"] .hud-badge { display: flex; }
.hud-side[data-status="locked"] .hud-badge { padding: 0 2px; background: var(--ui-win); }
.hud-side[data-status="locked"] .hud-badge i { display: none; }
.hud-side[data-status="locked"] .hud-badge img { display: block; }
/* the side that just scored lights up */
.hud-side.pulse { animation: hud-pulse .9s ease-out; }
@keyframes hud-pulse {
  30% { transform: scale(1.04); box-shadow: 0 0 0 5px color-mix(in srgb, var(--side) 30%, transparent), 0 0 18px color-mix(in srgb, var(--side) 45%, transparent); }
}
/* Penalty: the kick tracker (● scored, ✗ missed or saved, ○ still to take; a bar before sudden death) */
.hud-marks { display: flex; align-items: center; gap: 4px; }
.hud-opp .hud-marks { flex-direction: row-reverse; }
.hud-marks .mk { width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ui-ink) 38%, transparent); }
.hud-marks .mk-goal { background: var(--side); border-color: var(--side); }
.hud-marks .mk-miss {
  border: 0; border-radius: 0;
  background: linear-gradient(45deg, transparent 40%, var(--ui-ink-2) 40% 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, var(--ui-ink-2) 40% 60%, transparent 60%);
}
.hud-marks .mk-sep { width: 2.5px; height: 13px; border-radius: 2px; background: var(--ui-play); margin: 0 1px; }
/* Shootout: ammo, a cartridge per slot (loaded = brass, empty = a dashed outline) */
.hud-ammo { display: flex; align-items: flex-end; gap: 4px; height: 22px; }
.hud-opp .hud-ammo { flex-direction: row-reverse; }
.hud-ammo .am { width: 12px; height: 22px; display: block; }
.hud-bullet { display: block; width: 100%; height: 100%; overflow: visible; }
.hud-bullet path, .hud-bullet rect { fill: color-mix(in srgb, var(--ui-ink) 7%, transparent); stroke: color-mix(in srgb, var(--ui-ink) 42%, transparent); stroke-width: 1.3; stroke-dasharray: 2.2 1.4; }
.hud-ammo .am.on .hud-bullet path, .hud-ammo .am.on .hud-bullet rect { stroke: var(--ui-ink); stroke-dasharray: none; stroke-width: 1.4; }
.hud-ammo .am.on .b-tip { fill: var(--wood); }
.hud-ammo .am.on .b-case, .hud-ammo .am.on .b-rim { fill: var(--money); }
.hud-ammo .am.pop { animation: am-pop .4s cubic-bezier(.2, .9, .3, 1.4); }
.hud-ammo .am.drop { animation: am-drop .3s ease-out; }
@keyframes am-pop { from { transform: translateY(-10px) scale(.6); opacity: 0; } }
@keyframes am-drop { from { transform: translateY(-6px) rotate(20deg); opacity: .2; } }

.timer-ring { width: 40px; height: 40px; flex-shrink: 0; transform: rotate(-90deg); }
.timer-ring .track { fill: var(--ui-cream-2); stroke: var(--ink-soft); stroke-width: 3; }
.timer-ring .fill { fill: none; stroke: var(--ui-player); stroke-width: 3.5; stroke-linecap: round; }
.timer-ring.low .fill { stroke: var(--ui-play); }
.timer-ring text { transform: rotate(90deg); transform-origin: 22px 22px; fill: var(--ui-ink); font: 700 15px var(--font-display); text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }

/* round icon buttons: "?" (how to play) and sound use the UI icon set (icon-help, icon-sound-on/off) */
.help-btn.pulse { animation: help-pulse 1.4s ease-in-out infinite; }
@keyframes help-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ui-sun) 70%, transparent), var(--ledge-sm); } }
body.is-tutorial .help-btn, body.is-tutorial .timer-ring { display: none; }

/* sound settings */
.sound-wrap { position: relative; flex-shrink: 0; }
.sound-btn .ico-off, .sound-btn.muted .ico-on { display: none; }
.sound-btn.muted .ico-off { display: block; }
.sound-pop {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 50; display: grid; gap: 12px; width: 230px; padding: 14px;
  border-radius: var(--r-md); background: var(--ui-cream); color: var(--ui-ink); border: var(--ink-line); box-shadow: var(--ledge-sm), var(--float);
}
.sound-pop label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ui-ink-2); }
.sound-pop label.sw { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ui-ink); }
.sound-pop input[type="range"] { accent-color: var(--ui-player); width: 100%; }
/* toggle switch (checkbox) */
.sw input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; order: 2; flex-shrink: 0; width: 40px; height: 22px; margin: 0; border-radius: 999px;
  background: var(--ui-cream-2); border: 2px solid var(--edge); position: relative; cursor: pointer; transition: background .15s;
}
.sw input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ui-ink);
  transition: transform .15s, background .15s;
}
.sw input[type="checkbox"]:checked { background: var(--ui-player); }
.sw input[type="checkbox"]:checked::after { transform: translateX(18px); background: var(--ui-cream); }
/* ---------- match view: one scene card under the bar, the controls as an overlay at its bottom ----------
   The page is exactly one screen high (no scroll). .match-stage is the free space; .match-card is the scene's card,
   as wide as the scene can be so that the controls overlay (--ctl-h, measured by app.js) covers at most the
   scene's safeBottom (--safe, a fraction of the scene's height; declared by each scene). The scene sits at the top
   of the card; below it the art continues as a mirrored copy (.scene-ext, kit.js) where the controls sit when
   there is room (phones). --b = the card's outline width. */
body[data-view="match"] { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body[data-view="match"] > .topbar { flex: none; }
.match { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 2px 10px 10px; position: relative; }
.match-stage { flex: 1 1 auto; min-height: 0; position: relative; container-type: size; }
.match-card {
  --r: 1.77778; --b: 3px;
  position: relative; height: 100%; margin: 0 auto; overflow: hidden;
  width: min(100cqw, calc((100cqh - 2 * var(--b)) * var(--r) + 2 * var(--b)),
    calc((100cqh - 2 * var(--b) - var(--ctl-h, 0px)) * var(--r) / (1 - var(--safe, 0)) + 2 * var(--b)));
  border: var(--b) solid var(--edge); border-radius: 26px; background: var(--ui-cream-2); box-shadow: var(--ledge), var(--float);
}
#viewMatch[data-layout="portrait"] .match-card { --r: 0.642857; }
.match .scene-host { position: absolute; inset: 0; display: block; }
.match .scene-frame { width: 100%; border-radius: 0; box-shadow: none; overflow: visible; }
.match .controls:empty { display: none; }
/* the controls overlay: the panel at the bottom of the card, above the scene (the overlay box itself lets taps through) */
.match .controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 0 14px 14px; pointer-events: none; }
.match .controls .scene-controls { pointer-events: auto; max-width: 1040px; margin: 0 auto; }

/* the controls look (final: the compact floating pill; :root keeps these rules above the base ones in every @media) */
:root .match .controls { padding-bottom: 16px; }
:root .match .controls .scene-controls { width: fit-content; max-width: 100%; }
:root .match .ctl-panel { padding: 18px 10px 10px; border-radius: 34px; }
:root .match .ctl-row { gap: 8px; }
:root .match .ctl-chip .ctl-sub { display: none; }   /* the pill is narrow: the short prompt only */
:root .match .ctl {
  flex: 0 0 auto; width: auto; min-width: 104px; max-width: 168px; min-height: 0; padding: 8px 12px 9px;
  flex-direction: column; gap: 3px; border-radius: 22px; font-size: 15px;
}
:root .match .ctl-icon { width: 50px; height: 50px; }
/* the panel in the bottom-right corner (Penalty, def.controls = 'corner'):
   landscape only, a little more compact; phones keep the panel along the bottom */
#viewMatch[data-ctl="corner"][data-layout="landscape"] .controls { padding-right: 16px; }
:root #viewMatch[data-ctl="corner"][data-layout="landscape"] .controls .scene-controls { margin: 0 0 0 auto; }
:root #viewMatch[data-ctl="corner"][data-layout="landscape"] .ctl { min-width: 92px; padding: 7px 10px 8px; }
:root #viewMatch[data-ctl="corner"][data-layout="landscape"] .ctl-icon { width: 46px; height: 46px; }

/* Penalty: the panel shows your role. Kicking = "Pick a target" (the goal with a target), keeping = "Pick a dive" (a
   glove diving), each with its own accent: the chip, the panel's rim, the picked button and the icons. White text on
   either accent passes AA (--ui-win 6.4:1, --ui-money 6.8:1). */
.scene-controls.penalty { --role-c: var(--ui-win); }
.scene-controls.penalty[data-role="keep"] { --role-c: var(--ui-money); }
.scene-controls.penalty .ctl-panel { border-color: var(--role-c); box-shadow: 0 4px 0 color-mix(in srgb, var(--role-c) 50%, transparent), var(--float); }
.scene-controls.penalty[data-state="open"] .ctl-chip { background: var(--role-c); color: var(--ui-on-play); }
.scene-controls.penalty .ctl-chip { align-items: center; }
.scene-controls.penalty .ctl-role { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -2px -4px -2px -10px; border-radius: 50%; background: var(--role-c); border: 1.5px solid var(--ui-cream); }
.scene-controls.penalty .ctl-role .hud-ico { width: 80%; height: 80%; }
.scene-controls.penalty:not([data-state="open"]) .ctl-role { display: none; }
.scene-controls.penalty .ctl[aria-pressed="true"] { background: var(--role-c); box-shadow: 0 4px 0 var(--ledge-c), 0 0 0 5px color-mix(in srgb, var(--role-c) 28%, transparent); }
.scene-controls.penalty .ctl:hover:not(:disabled):not([aria-pressed="true"]) { background: color-mix(in srgb, var(--role-c) 14%, var(--ui-cream)); }
:root #viewMatch .scene-controls.penalty .ctl-icon { width: 64px; }
/* Penalty control sprites (icon-pen-*): the goal / the gloves, keep their shape inside the icon box */
.pk-ico { width: 100%; height: 100%; object-fit: contain; display: block; }

.match-overlay {
  position: absolute; left: 12px; right: 12px; top: 12px; bottom: max(12px, var(--ctl-h, 0px)); z-index: 6;
  display: grid; place-content: center; justify-items: center; gap: 12px; pointer-events: none; text-align: center;
}
.ov-matched {
  padding: 6px 24px 8px; border-radius: 999px; background: var(--ui-cream); color: var(--ui-ink); border: var(--ink-line); box-shadow: var(--ledge-sm);
  font: 700 clamp(22px, 3.4vw, 40px)/1.1 var(--font-display); letter-spacing: -.01em; animation: ov-in .4s cubic-bezier(.2, .8, .3, 1) both;
}
.ov-count {
  font: 700 clamp(76px, 12vw, 140px)/1 var(--font-display); color: var(--ui-cream);
  -webkit-text-stroke: 5px var(--ui-ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ledge-c);
}
.ov-count.tick { animation: ov-tick .9s ease-out both; }
.ov-howto {
  max-width: min(520px, 90%); padding: 12px 18px; border-radius: var(--r-md); background: var(--ui-cream); color: var(--ui-ink);
  border: var(--ink-line); box-shadow: var(--ledge-sm), var(--float); animation: ov-in .45s .2s cubic-bezier(.2, .8, .3, 1) both;
}
.ov-howto b { color: var(--ui-ink); font-family: var(--font-display); font-size: 18px; }
.ov-howto.with-cover { display: flex; align-items: center; gap: 14px; text-align: left; padding: 10px 16px 10px 10px; }
.ov-howto .ov-cover { width: 96px; height: 64px; flex-shrink: 0; border-radius: var(--r-sm); object-fit: cover; border: 2px solid var(--edge); }
.ov-howto p { margin: 4px 0 0; color: var(--ui-ink-2); font-weight: 700; }
@keyframes ov-in { from { transform: translateY(10px) scale(.96); opacity: 0; } }
@keyframes ov-tick { 0% { transform: scale(1.4); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 85% { opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }

/* ---------- sheets above the controls (rules card, Scout, tutorial offer): cream cards ---------- */
.help-sheet, .scout {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 30; width: min(460px, calc(100vw - 24px)); overflow-y: auto;
  padding: 14px 16px; border-radius: var(--r-md); background: var(--ui-cream); color: var(--ui-ink); border: var(--ink-line); box-shadow: var(--ledge-sm), var(--float);
}
.scout { width: min(440px, calc(100vw - 24px)); border-color: var(--ui-opponent); }
.help-sheet h3 { font-size: 18px; }
.help-preview { position: relative; height: 150px; margin: 8px 0; border-radius: var(--r-sm); overflow: hidden; border: 2px solid var(--edge); }
.help-preview .cover-img { border-radius: 0; }
.help-sheet ol { margin: 0; padding-left: 20px; color: var(--ui-ink-2); font-size: 14px; font-weight: 700; }
.help-sheet li { margin-bottom: 4px; }
.help-sheet .note { color: var(--ui-money); font-weight: 700; }
/* the game's keyboard shortcuts (mouse / keyboard only: the control panel shows no key badges) */
.help-keys { margin: 10px 0 4px; padding-top: 8px; border-top: 1.5px dashed var(--ink-soft); }
.help-keys[hidden] { display: none; }
.help-keys h4 { margin: 0 0 6px; font: 700 14px/1.2 var(--font-display); color: var(--ui-ink); }
.help-keys dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; margin: 0; align-items: center; font-size: 14px; }
.help-keys dt { display: flex; gap: 3px; }
.help-keys dd { margin: 0; color: var(--ui-ink-2); font-weight: 700; }
.help-keys kbd {
  min-width: 22px; padding: 1px 6px; border-radius: 6px; text-align: center; background: var(--ui-cream-2); border: 1.5px solid var(--ui-ink-2);
  box-shadow: 0 1.5px 0 var(--ui-ink-2); font: 700 12.5px/1.3 var(--font-body); color: var(--ui-ink);
}
@media (hover: none), (pointer: coarse) { .help-keys { display: none; } }
.scout .rules-link, .help-sheet .rules-link { color: var(--ui-ink-2); }
.scout .note, .scout .summary .row, .scout .summary small { color: var(--ui-ink-2); }
.scout .summary .row b { color: var(--ui-ink); }
.scout .dist-row i { background: linear-gradient(90deg, var(--ui-opponent) var(--w), var(--ui-cream-2) var(--w)); border: 1px solid var(--ink-soft); }
.offer {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 45; width: min(440px, calc(100vw - 24px));
  padding: 14px 16px; border-radius: var(--r-md); background: var(--ui-cream); color: var(--ui-ink); border: var(--ink-line);
  box-shadow: var(--ledge-sm), var(--float); animation: offer-in .3s cubic-bezier(.2, .8, .3, 1) both;
}
.offer p { margin: 0; font-size: 16px; }
.offer .row-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.offer .btn { padding: 10px 16px; }
@keyframes offer-in { from { transform: translate(-50%, 20px); opacity: 0; } }

/* ---------- tutorial coach marks ---------- */
.coach { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.coach-spot {
  position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px color-mix(in srgb, var(--bg) 62%, transparent); outline: 2px solid var(--money);
  animation: spot-pulse 1.6s ease-in-out infinite; transition: left .25s, top .25s, width .25s, height .25s;
}
@keyframes spot-pulse { 50% { outline-offset: 5px; outline-color: color-mix(in srgb, var(--money) 45%, transparent); } }
.coach-arrow {
  position: fixed; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-top: 18px solid var(--money); animation: arrow-bob .9s ease-in-out infinite;
}
.coach-arrow.up { border-top: 0; border-bottom: 18px solid var(--money); }
@keyframes arrow-bob { 50% { transform: translateY(5px); } }
.coach-arrow.up { animation-name: arrow-bob-up; }
@keyframes arrow-bob-up { 50% { transform: translateY(-5px); } }
.coach-bubble {
  position: fixed; pointer-events: auto; padding: 14px 16px 12px; border-radius: var(--r-md); background: var(--text); color: var(--bg);
  box-shadow: var(--lift); animation: ov-in .3s cubic-bezier(.2, .8, .3, 1) both;
}
.coach-text { margin: 0 0 10px; font-weight: 700; font-size: 16px; line-height: 1.35; }
.coach-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); margin-bottom: 10px; }
.coach-cover[hidden] { display: none; }
.coach-row { display: flex; align-items: center; gap: 8px; }
.coach-steps { flex: 1; font-size: 13px; color: color-mix(in srgb, var(--bg) 70%, var(--text)); }
.coach-row .btn { padding: 8px 12px; font-size: 14px; box-shadow: none; }
.coach-row .btn[hidden] { display: none; }
.coach-row .btn-ghost { color: var(--bg); background: transparent; border-color: color-mix(in srgb, var(--bg) 35%, var(--text)); }
.coach-row .btn-primary { background: var(--bg); color: var(--text); }
.coach.waiting .coach-spot, .coach.waiting .coach-arrow, .coach.waiting .coach-bubble { opacity: 0; pointer-events: none; transition: opacity .15s; }
.coach:not(.has-target) .coach-spot { display: none; }
.coach:not(.has-target)::before { content: ''; position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 50%, transparent); }

@media (max-width: 860px) {
  .match { padding: 0 6px 6px; }
  .match-card { --b: 2.5px; border-radius: 22px; }
  .match .controls { padding: 0 8px 8px; }
  :root .match .controls { padding-bottom: 10px; }
  :root .match .controls .scene-controls { width: auto; max-width: 420px; }
  :root .match .ctl-panel { padding: 16px 8px 8px; border-radius: 28px; }
  :root .match .ctl { min-width: 0; flex: 1 1 0; max-width: 112px; padding: 6px 6px 7px; font-size: 13px; border-radius: 18px; }
  :root .match .ctl-icon { width: 40px; height: 40px; }
  .help-preview { height: 120px; }
  .match-actions .rules-link.book { display: none; }  /* Rules lives behind "?" on phones */
  /* the scoreboard takes its own row under Back / title / buttons; the role chip and the status badge sit on the
     avatar's corners */
  body[data-view="match"] .match-info { max-width: none; }
  body[data-view="match"] .match-info .pot-sub { font-size: 11.5px; }
  .hud { --hud-av: 32px; order: 10; flex-basis: 100%; max-width: none; gap: 5px; margin: 0 0 2px; }
  .hud-side { flex: 1 1 0; gap: 5px; padding: 2px 10px 2px 2px; }
  .hud-opp { padding: 2px 2px 2px 10px; }
  .hud-name { gap: 4px; }
  .hud-name b, .hud-name .name-link { font-size: 14px; }
  .hud-ai { font-size: 9px; padding: 1px 3px; border-radius: 4px; }
  .hud .scout-btn { padding: 0 6px; font-size: 10.5px; }
  .hud-role { position: absolute; top: -6px; right: -8px; width: 20px; height: 20px; border-width: 1.5px; box-shadow: none; }
  .hud-opp .hud-role { right: auto; left: -8px; }
  .hud-badge { height: 14px; bottom: -5px; left: -6px; }
  .hud-opp .hud-badge { right: -6px; }
  .hud-badge i { width: 3px; height: 3px; }
  .hud-badge img { width: 10px; height: 10px; }
  .hud-mid { padding: 0 8px 2px; border-radius: 12px; }
  .hud-nums { gap: 5px; }
  .hud-score { font-size: 22px; }
  .hud .timer-ring { width: 30px; height: 30px; }
  .hud-dash { font-size: 18px; }
  .hud-round { font-size: 10.5px; gap: 4px; }
  .hud-round .r-note { display: none; }
  .hud-marks { gap: 2.5px; }
  .hud-marks .mk { width: 8px; height: 8px; border-width: 1.5px; }
  .hud-marks .mk-sep { height: 9px; width: 2px; }
  .hud-ammo { height: 13px; gap: 2px; }
  .hud-ammo .am { width: 7px; height: 13px; }
  :root #viewMatch .scene-controls.penalty .ctl-icon { width: 54px; }
}
@media (max-width: 400px) {
  .hud-side { padding-right: 7px; }
  .hud-opp { padding-left: 7px; }
  .hud-name b, .hud-name .name-link { font-size: 13px; }
  .hud-mid { padding: 0 6px 2px; }
  .hud-round:has(.r-phase) .r-main { display: none; }   /* Minus One: the phase says enough */
}
@media (max-width: 860px) and (max-height: 760px) {
  .match .controls { padding: 0 6px 6px; }
  :root .match .ctl-icon { width: 34px; height: 34px; }
  .help-preview { height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .help-btn.pulse, .coach-spot, .coach-arrow, .hud-badge i, .hud-side.pulse, .hud-role.flip, .hud-score.bump, .hud-ammo .am { animation: none; }
}