:root {
  /* PuckGuru design system — Next Shift black + amber accent */
  --bg: #0d0d0d;
  --bg2: #141414;
  --card: #1a1a1a;
  --card-2: #161616;
  --line: #2e2a1f;
  --line-2: #2e2a1f;
  --text: #e4e8f0;
  --muted: #7a8698;
  --accent: #F5A623;
  --accent-2: #c47d0e;
  --accent-glow: rgba(245, 166, 35, .15);
  --good: #F5A623;
  --bad: #e74c3c;
  --gold: #f1c40f;
  --clip: #ff8c42;
  --team-blue: #4a9eff;
  --team-red:  #ff4a5a;

  /* Radius scale — chips/inputs use --radius-sm; popovers/buttons use
     --radius (default); large cards (scoreboard, drawer, viewerCard) use
     --radius-lg. The bare --radius alias keeps any unaudited callsite
     looking sane until it's bumped explicitly. */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  /* Layered shadows — pair a tight contact shadow with a diffuse glow so
     elements sit on the page rather than floating awkwardly. The 0 0 0 1px
     rim adds a subtle border-light without needing a real border. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.5);
  --shadow-lg: 0 14px 36px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  /* Inner highlight ("rim light") to layer on top of cards via inset
     shadow — adds a 1px highlight along the top edge of the card, which
     reads as depth without needing a gradient. */
  --rim-light: inset 0 1px 0 rgba(255,255,255,.05);

  /* Frosted glass — overlays that float on top of the rink. Opacity is
     low enough that the rink color shows through; saturate(140%) keeps
     team-color accents from going washed out behind the blur. The thin
     white-alpha border + rim-light reads as a polished pane edge. Only
     use on small in-rink HUD elements + popovers — large surfaces
     (full-page panels) blur too many pixels per frame. */
  --glass-bg:        rgba(13, 13, 13, .55);
  --glass-bg-strong: rgba(13, 13, 13, .72);
  --glass-blur:      blur(16px) saturate(140%);
  --glass-border:    1px solid rgba(255, 255, 255, .08);

  --brand-grad-from:  #fff;
  --brand-grad-to:    #F5A623;
  --header-bg-top:    rgba(13,13,13,.98);
  --header-bg-bot:    rgba(13,13,13,.95);
  --page-bg-radial-hi: #0d0d0d;
  --page-bg-conic-lo:  #0d0d0d;
  --page-bg-conic-hi:  #0d0d0d;
}

/* Light-mode removed — dark-only design. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 10% 10%, var(--page-bg-radial-hi), transparent 60%) fixed,
    conic-gradient(from 230deg at 70% 20%, var(--page-bg-conic-lo), var(--page-bg-conic-hi) 25%, var(--page-bg-conic-hi) 75%, var(--page-bg-conic-lo)) fixed,
    var(--bg);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-2); }

.wrap { max-width: 1600px; margin: 0 auto; padding: 8px; }
main.wrap { padding-top: 16px; display: flex; flex-direction: column; gap: 16px; }
main.app-layout {
  max-width: 1600px;
  margin: 0 auto;
  padding: 6px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

/* Header, brand, nav, and optional mod/live links have moved to shell.css
   so the app fragment can mount inside a league-provided page chrome
   without carrying the generic top bar. */

/* App toolbar row: holds the replay picker, local-file input, and the
   currently-loaded status pill. Lives inside <main> rather than the shell
   header so the app fragment is self-contained when embedded in a league
   page that strips the generic header. Flex-wraps on narrow viewports. */
.app-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.app-toolbar[hidden] { display: none; }

/* Generic flex-spacer. Used in toolbars and (formerly) in the shell header
   to push trailing items to the right edge. Lives in app.css so toolbars
   inside the app fragment can rely on it without pulling in shell.css. */
.navspacer { flex: 1; }

.btn, .btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius); font-weight: 600;
  border: 1px solid var(--line-2);
  background: var(--card-2); color: var(--text);
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease, background .12s ease;
  cursor: pointer; font-size: 13px;
}
.btn:hover:not(:disabled) {
  border-color: var(--accent); background: rgba(46,204,113,.08);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.btn-primary {
  background: var(--accent); color: #151927; border-color: transparent;
  box-shadow: 0 4px 12px rgba(46,204,113,.25);
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 8px 18px rgba(46,204,113,.4); color: #151927;
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 4px 12px rgba(46,204,113,.25); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.muted { color: var(--muted); font-size: 12px; }

/* ---------- file input label ---------- */
.file-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius); font-weight: 600;
  background: rgba(46,204,113,.1); color: var(--accent);
  border: 1px solid rgba(46,204,113,.3); cursor: pointer;
  font-size: 13px; user-select: none;
  transition: background .12s ease, border-color .12s ease;
}
.file-btn:hover { background: rgba(46,204,113,.18); border-color: rgba(46,204,113,.5); }
.file-btn[hidden] { display: none; }

/* ---------- replay selector dropdown ---------- */
.replay-select {
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 8px 10px; font: inherit; font-size: 13px;
  min-width: 360px; max-width: 560px;
}
.replay-select:focus { outline: none; border-color: var(--accent-2); }

/* ---------- cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px;
}
.card h3 {
  margin: 0 0 14px; font-size: 22px;
  display: flex; align-items: baseline; gap: 10px;
}
.card h3 .sub { color: var(--muted); font-size: 13px; font-weight: 400; }

/* Rink-first viewer card: stage + controls live inside one rounded clip
   so the rink visually flows into the transport bar without a hard edge.
   Popovers anchor with position:fixed (panels.js positionPopover) so
   overflow:hidden here doesn't trap them. */
#viewerCard {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0;
  box-shadow: var(--shadow-md), var(--rim-light);
}

/* ---------- right-side drawers ---------- */
/* Drawer uses a slightly tinted glass: --glass-bg-strong over a faint
   navy gradient so the brand color reads through without the blur cost
   of a fully transparent panel. Mid-blur (12px) keeps the perf hit
   bounded — the drawer covers ~420×viewport, which is the widest
   surface we glass anywhere. */
.drawer {
  position: fixed;
  top: 52px; right: 0; bottom: 0;
  width: 420px; max-width: 90vw;
  background:
    linear-gradient(180deg, rgba(245, 166, 35, .06), rgba(13, 13, 13, .06)),
    rgba(13, 13, 13, .85);
  border-left: var(--glass-border);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transform: translateX(100%);
  transition: transform .25s ease;
  overflow-y: auto;
  z-index: 18;
  box-shadow: -14px 0 36px rgba(0,0,0,.45), -2px 0 8px rgba(0,0,0,.3), var(--rim-light);
}
.drawer[hidden] { display: block; }  /* hidden attr doesn't hide — transform does */
.drawer.open { transform: translateX(0); }
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: sticky; top: 0;
  background: linear-gradient(180deg, rgba(13, 13, 13, .92), rgba(13, 13, 13, .72));
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  z-index: 1;
}
.drawer-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.drawer-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .15s ease;
}
.drawer-close:hover {
  color: var(--text);
  background: rgba(255,255,255,.06);
  border-color: var(--line);
}
.drawer-body {
  padding: 16px;
}

/* ---------- collapsible sections (below rink) ---------- */
/* Each collapsible is a self-contained rounded card. overflow:hidden
   keeps the body's edges flush with the card radius so the inner
   border-top reads as a clean divider rather than a stray line. */
.collapsible {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg2);
  box-shadow: var(--shadow-sm), var(--rim-light);
}
.collapsible-header {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)) , var(--bg2);
  border: none;
  color: var(--text);
  font-size: 14px; font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  border-radius: var(--radius-lg);
}
/* When the section is open, square off the bottom corners of the header
   so it visually merges with the body below it. */
.collapsible-header[aria-expanded="true"] {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.collapsible-header:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) , var(--card);
  color: var(--accent);
}
.collapsible-header:hover svg { color: var(--accent); }
.collapsible-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.collapsible-header svg {
  color: var(--muted);
  transition: transform .2s ease, color .15s ease;
  flex-shrink: 0;
}
/* Markup ships a downward chevron that rotates 180° when expanded — keep
   that behavior, but also support a sideways triangle (▸-style) by
   honoring aria-expanded for any consumer that wants 90° instead. */
.collapsible-header[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.collapsible-sub {
  color: var(--muted);
  font-size: 12px; font-weight: 400;
  margin-left: auto;
}
.collapsible-body {
  padding: 16px;
  background: var(--card);
  border-top: 1px solid var(--line);
}
.collapsible-body[hidden] { display: none; }

/* ---------- stage (rink) ---------- */
#stage { position: relative; border-radius: 0; overflow: hidden; border: none; background: var(--bg); }
#rink { display: block; width: 100%; height: auto; background: #eef3f9; }
#stage.dark #rink { background: #0d0d0d; }

/* Resize handle between stage and controls */
.rink-resize-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  cursor: ns-resize;
  user-select: none;
  touch-action: none;
  margin: -6px 0;
  position: relative;
  z-index: 2;
}
.rink-resize-knob {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  opacity: 0.5;
  transition: opacity .15s ease, background .15s ease;
}
.rink-resize-handle:hover .rink-resize-knob,
.rink-resize-handle.dragging .rink-resize-knob {
  opacity: 1;
  background: var(--accent);
}

/* Annotation canvas sits on top of the rink at the same pixel size. Default
   to pointer-events:none so it doesn't steal hover/click from the players;
   the draw-mode toggle adds .drawing to enable capture. */
#annot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  touch-action: none;
}
#stage.drawing #annot { pointer-events: auto; cursor: crosshair; }
#stage.drawing #rink  { cursor: crosshair; }

/* During clip export the renderer composites chat, ref, and annotation
   overlays onto the rink canvas (so captureStream grabs them). Hide the
   live DOM/canvas copies while recording so the viewer doesn't see them
   doubled up on top of the canvas-drawn versions. */
#stage.exporting #annot { display: none; }

/* Floating icon button. Nests inside a stage-toolbar; sized to match the
   toolbar's other pill-shaped controls so they align on one row. */
.stage-icon-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer; user-select: none;
  transition: color .12s ease, background .12s ease, border-color .12s ease, transform .12s ease;
}
.stage-icon-btn:hover { color: var(--text); background: rgba(255,255,255,.06); transform: translateY(-1px); }
.stage-icon-btn:active { transform: translateY(0); }

/* Floating toolbar pinned to a top corner of the rink stage. The
   -left variant holds the draw/markup tools; the -right variant holds
   the heatmap tools and the save-screenshot icon. */
.stage-toolbar {
  position: absolute;
  top: 10px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(13,13,13,.9);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 4px 8px;
  z-index: 4;
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-md);
}
.stage-toolbar-left  { left: 10px; }
.stage-toolbar-right { right: 10px; }

/* Vertical draw rail — floats over the top-left corner of the rink */
.draw-rail {
  position: absolute;
  top: 4px; left: 6px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.draw-rail-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: rgba(13,13,13,.9);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  user-select: none;
  transition: all .15s ease;
}
.draw-rail-toggle:hover { color: var(--text); background: rgba(255,255,255,.05); }
.draw-rail-toggle:has(input:checked) {
  color: var(--accent);
  border-color: rgba(245,166,35,.5);
  background: rgba(245,166,35,.14);
}
.draw-rail-tools {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 4px;
  background: rgba(13,13,13,.92);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
}
/* Left section: tool picker + swatches/widths stacked vertically */
.draw-rail-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Vertical separator between tools and actions */
.draw-sep-v {
  width: 1px;
  align-self: stretch;
  background: var(--line-2);
  margin: 0 6px;
}
/* Right section: undo+clear on top row, redo below.
   Stretches to fill the toolbar's full vertical height so the action
   buttons match the height of the tool picker + swatch rows on the left. */
.draw-actions-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-self: stretch;
  align-items: stretch;
}
.draw-actions-row-2 {
  display: flex;
  gap: 3px;
  flex: 1;
}
.draw-actions-col .draw-action-btn {
  flex: 1;
}
.draw-rail-tools .draw-row {
  display: flex; align-items: center; gap: 2px;
}
.swatch-grid {
  display: flex; gap: 2px; align-items: center;
  position: relative;
}
.swatch-grid .swatch.extra { display: none; }
.swatch-grid.expanded .swatch.extra { display: block; }
.width-row { display: flex; gap: 3px; align-items: center; }
.draw-tool-sep {
  width: 1px; height: 20px;
  background: var(--line-2);
  margin: 0 2px;
  align-self: center;
  flex-shrink: 0;
}
.draw-sep {
  width: 1px; height: 16px;
  background: var(--line-2);
  margin: 0 3px;
  flex-shrink: 0;
}
.draw-actions-row {
  /* Legacy — no longer used as a third row; kept for selector compat */
  padding-top: 4px;
  border-top: 1px solid var(--line-2);
}
.draw-action-btn {
  padding: 4px 10px; font-size: 11px;
}

/* Fullscreen button: single floating icon pinned to the bottom-right of
   the rink stage. Shares .stage-icon-btn sizing and hover behavior; adds
   the same pill background the toolbars use so it reads as a control
   rather than a stray icon. */
.stage-fullscreen-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  background: rgba(13,13,13,.9);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-sm);
}

/* Rotate-to-landscape fullscreen (phone). Sits just left of the regular
   fullscreen button and is hidden by default — only phone-width or
   coarse-pointer viewers need it. On click it requests fullscreen and
   tries Screen Orientation Lock to landscape (Android Chrome/Edge);
   iOS silently declines the lock and the user rotates the phone
   physically, which iOS auto-reflows within fullscreen. */
.stage-rotate-fullscreen-btn {
  position: absolute;
  right: 44px;
  bottom: 10px;
  z-index: 4;
  background: rgba(13,13,13,.9);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-sm);
  display: none;
}
@media (hover: none) and (pointer: coarse) {
  .stage-rotate-fullscreen-btn { display: flex; }
}
@media (max-width: 820px) {
  .stage-rotate-fullscreen-btn { display: flex; right: 40px; bottom: 6px; }
}

/* Fullscreen presentation: the whole viewer card (stage + playbar +
   view controls) goes fullscreen so the user keeps transport / toggles
   / clip controls. The card is a flex column: stage flex-grows, and
   #controls + #viewControls take their natural height below it. The
   rink + annot canvases are CSS-sized by JS in transport.js to match
   the stage's flex-allocated box while preserving the 1000:620 aspect.
   HUD/overlay elements remain pinned to the stage's corners. */
#viewerCard:fullscreen {
  background: var(--card);
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
#viewerCard:fullscreen #stage {
  flex: 1 1 auto;
  min-height: 0;
  /* stage bg shows through the canvas's transparent non-rink pixels,
     so DOM overlays (HUD, chat, ref, pp) and canvas-painted ref PNGs
     all share the same background color. */
  background: var(--card);
  border-radius: 0;
  border: none;
  position: relative;
}
/* Canvas fills the stage entirely; the renderer aspect-fits the rink
   inside via baseScale = min(scaleX, scaleY). This keeps overlay
   anchors (right/bottom of stage) aligned with the corresponding edges
   of the canvas bitmap so the ref text bubble stays above the ref PNG
   and the chat/HUD sit at the true corners of the drawing surface. */
#viewerCard:fullscreen #rink,
#viewerCard:fullscreen #annot {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
  max-height: none;
}
#viewerCard:fullscreen #rink {
  background: transparent;  /* let stage bg show through non-rink area */
}
#viewerCard:fullscreen #controls {
  margin: 0;
  padding: 8px 16px;
  background: var(--bg-2, #0b1220);
  border-top: 1px solid var(--line);
}
.stage-toolbar .btn { padding: 4px 10px; font-size: 12px; min-width: 0; }

/* Legacy draw-tools class kept for inactive state selectors */
/* Vertical divider for mode pickers. */
.stage-toolbar .mode-picker::after {
  content: ""; width: 1px; height: 20px;
  background: var(--line-2); margin: 0 2px;
}

.swatches { display: flex; gap: 4px; align-items: center; position: relative; }
.swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
}
.swatch:hover { transform: scale(1.1); }
.swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px rgba(0,0,0,0.4); }
.swatch.extra { display: none; }
.swatches.expanded .swatch.extra { display: block; }
.swatch-expand {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--line-2); background: transparent;
  color: var(--muted); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s, transform .2s ease;
}
.swatch-expand:hover { color: var(--text); border-color: var(--text); }
.swatches.expanded .swatch-expand { transform: rotate(180deg); }

.tool-picker, .tool-grid { display: flex; gap: 3px; }
.tool-picker .tool,
.tool-grid .tool,
.draw-rail-tools .tool {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: rgba(255,255,255,.06); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  cursor: pointer; padding: 0;
  transition: color .12s ease, background .12s ease, border-color .12s ease, transform .12s ease;
}
.tool-picker .tool:hover,
.tool-grid .tool:hover,
.draw-rail-tools .tool:hover {
  color: #fff; background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}
.tool-picker .tool:active,
.tool-grid .tool:active,
.draw-rail-tools .tool:active { transform: translateY(0); }
.tool-picker .tool.active,
.tool-grid .tool.active,
.draw-rail-tools .tool.active {
  color: var(--accent);
  background: rgba(46,204,113,.14);
  border-color: rgba(46,204,113,.45);
  box-shadow: inset 0 0 0 1px rgba(46,204,113,.18);
}

/* ---------- heatmap mode picker ---------- */
.mode-picker { display: inline-flex; gap: 2px; align-items: center; }
.mode-picker .mode {
  display: flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 10px;
  background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: 6px;
  font: 600 11px 'DM Sans', -apple-system, Segoe UI, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.mode-picker .mode:hover { color: var(--text); background: rgba(255,255,255,.05); }
.mode-picker .mode.active {
  color: var(--gold);
  background: rgba(255,209,102,.14);
  border-color: rgba(255,209,102,.45);
}

/* Dim state for stage-toolbar controls.
 *
 * We avoid `opacity` here: the parent `.stage-toolbar` uses
 * `backdrop-filter: blur(4px)`, which in several browsers causes child
 * `opacity` to composite inconsistently against the blurred backdrop -
 * sometimes looking no dimmer than the normal state. Using explicit
 * low-alpha rgba on color/border/background gives the same visual effect
 * but renders reliably because no new stacking context is involved.
 *
 * Two distinct dim triggers:
 *   .inactive   - the whole tool cluster is off (heatmap disabled, or
 *                 draw mode off). All children dim uniformly.
 *   .is-off / :disabled on a .btn - that single button is unavailable
 *                 (Undo/Clear with no strokes yet). */
.mode-picker.inactive,
.draw-tools.inactive,
.draw-rail-tools.inactive {
  pointer-events: none;
}
.mode-picker.inactive .mode,
.mode-picker.inactive .mode.active,
.mode-picker.inactive .mode:hover,
.draw-tools.inactive .tool,
.draw-tools.inactive .tool.active,
.draw-tools.inactive .tool:hover,
.draw-tools.inactive .btn,
.draw-tools.inactive .btn:hover,
.draw-rail-tools.inactive .tool,
.draw-rail-tools.inactive .tool.active,
.draw-rail-tools.inactive .btn,
.draw-rail-tools.inactive .btn:hover {
  color: rgba(169, 179, 199, .32) !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, .05) !important;
  box-shadow: none !important;
}
/* Swatches have inline background colors set from JS, so dim them via
   desaturation instead of background overrides. */
.draw-tools.inactive .swatch,
.draw-tools.inactive .swatch:hover,
.draw-tools.inactive .swatch.active,
.draw-rail-tools.inactive .swatch,
.draw-rail-tools.inactive .swatch:hover,
.draw-rail-tools.inactive .swatch.active {
  filter: grayscale(1) brightness(.45);
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.stage-toolbar .btn:disabled,
.stage-toolbar .btn.is-off {
  color: rgba(169, 179, 199, .32) !important;
  border-color: rgba(255, 255, 255, .05) !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none;
}
.stage-toolbar .btn:disabled:hover,
.stage-toolbar .btn.is-off:hover {
  transform: none !important;
  color: rgba(169, 179, 199, .32) !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, .05) !important;
}

/* ---------- width picker ---------- */
.width-picker { display: flex; gap: 4px; align-items: center; }
.width-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm); cursor: pointer; padding: 0;
  transition: border-color .12s ease, background .12s ease;
}
.width-btn:hover { background: rgba(255,255,255,.06); }
.width-btn.active { border-color: var(--accent); background: rgba(46,204,113,.14); box-shadow: inset 0 0 0 1px rgba(46,204,113,.18); }
.width-dot {
  display: block; border-radius: 50%;
  background: var(--text);
}
.draw-tools.inactive .width-btn,
.draw-tools.inactive .width-btn.active,
.draw-rail-tools.inactive .width-btn,
.draw-rail-tools.inactive .width-btn.active {
  border-color: transparent !important;
  background: transparent !important;
}
.draw-tools.inactive .width-dot,
.draw-rail-tools.inactive .width-dot { opacity: .25; }

/* ---------- text input overlay for annotation text tool ---------- */
.annot-text-input {
  background: transparent; border: none; outline: none;
  font: bold 20px 'DM Sans', system-ui, sans-serif;
  padding: 2px 4px; min-width: 100px;
  caret-color: var(--accent);
}
.annot-text-input::placeholder { color: rgba(255,255,255,.3); }

/* ---------- events timeline ---------- */
.timeline-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 6px;
  padding: 0 2px;
}
.timeline-filter {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 600;
  color: var(--muted); background: var(--card-2);
  border: 1px solid var(--line-2);
  cursor: pointer; user-select: none;
  transition: color .12s, background .12s, border-color .12s, opacity .12s;
}
.timeline-filter.active { color: var(--text); border-color: var(--accent); }
.timeline-filter:not(.active) { opacity: .45; }
.filter-dot, .filter-icon {
  display: inline-block; flex-shrink: 0;
  font-size: 10px; line-height: 1;
}
.timeline-wrap {
  position: relative;
}
#timelineCanvas {
  display: block; width: 100%; cursor: pointer;
  border-radius: 4px;
}
.timeline-tooltip {
  position: absolute; top: -28px;
  transform: translateX(-50%);
  background: rgba(21,25,39,.95);
  color: var(--text); font-size: 11px; font-weight: 600;
  padding: 4px 8px; border-radius: 4px;
  pointer-events: none; white-space: nowrap;
  border: 1px solid var(--line-2);
  z-index: 10;
}

#hud {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}

#possessionPill[hidden] { display: none; }
#possessionPill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass-bg-strong);
  border: var(--glass-border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--muted);
  letter-spacing: .06em;
  pointer-events: auto;
  box-shadow: var(--shadow-sm), var(--rim-light);
}
#possessionPill .possession-label {
  font-size: 9px; letter-spacing: 1px; opacity: .7;
}
#possession { color: var(--text); font-weight: 700; letter-spacing: .02em; text-transform: none; }
#possession[data-team="2"] { color: var(--team-blue); }
#possession[data-team="3"] { color: var(--team-red);  }

/* Cinematic banner shown while the viewer is replaying the seconds leading
   to a goal in the dead window between BlueScore/RedScore and the next
   faceoff. Sits below the scoreboard so it doesn't fight the clock. */
#cinematicBanner {
  position: absolute;
  top: 68px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 18px;
  background: var(--glass-bg-strong);
  border: var(--glass-border);
  border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  pointer-events: none;
  z-index: 5;
  box-shadow: var(--shadow-md), var(--rim-light);
  animation: cinematic-in .25s ease-out;
}
#cinematicBanner[hidden] { display: none; }
#cinematicBanner .cinematic-tag {
  font-size: 10px; color: var(--muted); letter-spacing: .16em;
}
#cinematicBanner[data-team="blue"] {
  border-color: rgba(137,208,255,.55);
  box-shadow: 0 0 18px rgba(137,208,255,.35);
  color: var(--team-blue);
}
#cinematicBanner[data-team="red"] {
  border-color: rgba(255,138,163,.55);
  box-shadow: 0 0 18px rgba(255,138,163,.35);
  color: var(--team-red);
}
@keyframes cinematic-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

#scoreboard {
  display: flex; align-items: stretch;
  background: var(--glass-bg-strong); color: var(--text);
  border-radius: var(--radius-lg); overflow: hidden;
  font-variant-numeric: tabular-nums;
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-lg), var(--rim-light);
}
.sb-team {
  display: flex; align-items: center; gap: 0;
}
.sb-color-bar {
  width: 4px; align-self: stretch;
}
.sb-blue .sb-color-bar { background: var(--team-blue); }
.sb-red  .sb-color-bar { background: var(--team-red); }
.sb-name {
  padding: 7px 12px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sb-blue .sb-name { color: var(--team-blue); }
.sb-red  .sb-name { color: var(--team-red); }
.sb-score {
  padding: 5px 12px;
  font-size: 26px; font-weight: 800;
  color: var(--text);
  min-width: 32px; text-align: center;
}
.sb-center {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 5px 16px;
  border-left: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  background: rgba(0,0,0,.2);
}
.sb-period {
  font-size: 11px; font-weight: 700;
  letter-spacing: .15em;
  color: var(--accent);
  text-transform: uppercase;
}
.sb-clock {
  font-size: 18px; font-weight: 700;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- playback controls ---------- */
/* Lives inside #viewerCard's rounded clip; its background flows down from
   the rink-resize handle into the bottom edge of the card. The thin top
   divider matches the card's interior border tone (not the louder
   --line) so it reads as part of the same enclosure. */
#controls {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--bg2);
  border-top: 1px solid rgba(255,255,255,.04);
}
#controlsSecondary {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 16px 6px;
  background: var(--bg2);
}
#viewControls[hidden] { display: none; }

/* Transport bar spacer pushes trigger buttons right */
.transport-spacer { flex: 1; min-width: 8px; }

/* Icon trigger buttons in transport bar */
.transport-icon-btn {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease;
  flex-shrink: 0;
  padding: 0;
}
.transport-icon-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-glow);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.transport-icon-btn:active { transform: translateY(0); box-shadow: none; }
.transport-icon-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow);
  box-shadow: inset 0 0 0 1px rgba(46,204,113,.18);
}

/* Circular play/pause button */
.transport-play {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: transparent;
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease, filter .15s ease;
  flex-shrink: 0;
  padding: 0;
  box-shadow: 0 0 0 0 var(--accent-glow);
}
.transport-play:hover:not(:disabled) { transform: scale(1.04); }
.transport-play:active:not(:disabled) { transform: scale(0.98); }
.transport-play:disabled { opacity: .4; cursor: not-allowed; }
.transport-play .pause-icon { display: none; }
.transport-play.playing {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 16px var(--accent-glow);
}
.transport-play.playing .play-icon { display: none; }
.transport-play.playing .pause-icon { display: block; }
.transport-play:hover:not(:disabled) {
  background: var(--accent-glow);
}
.transport-play.playing:hover:not(:disabled) {
  background: var(--accent);
  filter: brightness(1.1);
}

/* Skip forward/back buttons */
.transport-skip {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease, transform .12s ease;
  flex-shrink: 0;
  padding: 0;
}
.transport-skip:disabled { opacity: .35; cursor: not-allowed; }
.skip-float {
  position: absolute;
  pointer-events: none;
  font-size: 12px; font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--accent);
  white-space: nowrap;
  animation: skip-float-up .6s ease-out forwards;
}
@keyframes skip-float-up {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-22px); }
}
.transport-skip:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--line);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.transport-skip:active:not(:disabled) { transform: translateY(0); }

/* Speed chip buttons (replace <select>) */
.speed-chips {
  display: flex;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--rim-light);
}
.speed-chip {
  padding: 5px 10px;
  font-size: 11px; font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: transparent;
  color: var(--muted);
  border: none;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
  border-right: 1px solid var(--line-2);
}
.speed-chip:last-child { border-right: none; }
.speed-chip.active {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  box-shadow: inset 0 0 8px rgba(0,0,0,.25), 0 0 12px var(--accent-glow);
}
.speed-chip:hover:not(.active) {
  background: rgba(255,255,255,.06);
  color: var(--text);
}

/* ---------- popovers ---------- */
.popover {
  position: absolute;
  background: var(--glass-bg-strong);
  border: var(--glass-border);
  border-radius: var(--radius);
  padding: 14px;
  z-index: 25;
  box-shadow: var(--shadow-lg), var(--rim-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  min-width: 200px;
}
.popover[hidden] { display: none; }
.popover-header {
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* Toggle switch rows inside view options popover */
.switch-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  font-size: 13px; color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.switch-row:last-child { border-bottom: none; }
.switch-row:hover { color: var(--accent); }
.switch {
  position: relative;
  width: 36px; height: 20px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0; width: 0; height: 0;
  position: absolute;
}
.switch .slider {
  position: absolute; inset: 0;
  background: var(--line-2);
  border-radius: 999px;
  transition: background .15s ease;
  cursor: pointer;
}
.switch .slider::before {
  content: "";
  position: absolute;
  left: 2px; top: 2px;
  width: 16px; height: 16px;
  background: var(--text);
  border-radius: 50%;
  transition: transform .15s ease;
}
.switch input:checked + .slider {
  background: var(--accent);
}
.switch input:checked + .slider::before {
  transform: translateX(16px);
}

/* View-controls rows (player size slider, reset) */
.popover-divider {
  border-top: 1px solid var(--line);
  margin: 6px 0;
}
.view-slider-row,
.view-action-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  font-size: 13px; color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.view-action-row--last { border-bottom: none; }
.view-slider-ctrl {
  display: flex; align-items: center; gap: 6px;
}
.view-slider-ctrl input[type="range"] {
  width: 80px;
  accent-color: var(--accent);
  cursor: pointer;
}
.view-slider-val {
  font-size: 11px; color: var(--muted);
  min-width: 28px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.view-hint {
  font-size: 10px; color: var(--muted); opacity: .7;
  max-width: 130px; line-height: 1.3;
}
.view-ghost-btn {
  padding: 3px 7px;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--muted);
  font-size: 11px; cursor: pointer; white-space: nowrap;
}
.view-ghost-btn:hover { color: var(--text); border-color: var(--muted); }

/* Rotate handle — bottom-right corner of the stage */
.view-rot-handle {
  position: absolute; bottom: 10px; right: 10px;
  display: flex; align-items: center; gap: 0;
  padding: 0;
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--muted);
  font-size: 11px;
  user-select: none;
  z-index: 5;
  overflow: hidden;
}
.view-rot-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent; border: none;
  color: inherit; cursor: pointer;
  transition: color .15s, background .15s;
}
.view-rot-btn:hover { color: var(--text); background: rgba(255,255,255,.08); }
.view-rot-btn:active { background: rgba(255,255,255,.14); }
.view-rot-label {
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: center;
  pointer-events: none;
}

/* Off-puck coverage filter — expands below the switch row */
.diag-coverage-wrap { border-bottom: 1px solid rgba(255,255,255,.03); }
.diag-coverage-wrap .switch-row { border-bottom: none; }
.coverage-filter {
  padding: 6px 0 8px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.coverage-filter[hidden] { display: none; }
.coverage-row-label {
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px; opacity: .7;
}
.coverage-quick-btns {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.coverage-quick {
  padding: 3px 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.coverage-quick:hover { color: var(--text); border-color: var(--accent); }
.coverage-quick.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.coverage-player-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 180px; overflow-y: auto;
  padding-right: 2px;
}
.coverage-player-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  transition: background .1s, color .1s;
}
.coverage-player-row:hover { background: rgba(255,255,255,.05); color: var(--text); }
.coverage-player-row.active { color: var(--text); }
.coverage-player-row.active .coverage-player-dot { opacity: 1; }
.coverage-player-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: .3;
  transition: opacity .1s;
}
.coverage-player-dot[data-team="blue"] { background: var(--team-blue, #5b9bd5); }
.coverage-player-dot[data-team="red"]  { background: var(--team-red,  #d55b5b); }
.coverage-player-num {
  font-weight: 700; min-width: 20px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.coverage-player-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coverage-player-team {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  padding: 1px 5px;
  border-radius: 3px;
  opacity: .7;
}
.coverage-player-team[data-team="blue"] { background: rgba(91,155,213,.25); color: #8bbfe0; }
.coverage-player-team[data-team="red"]  { background: rgba(213,91,91,.25);  color: #e08b8b; }

/* Clip tools popover — warm orange-tinted */
.clip-popover {
  border-color: rgba(255, 168, 92, .28);
  background: linear-gradient(rgba(60, 36, 18, .35), rgba(34, 20, 10, .35)), var(--glass-bg-strong);
}
.clip-header {
  color: var(--clip);
  border-bottom-color: rgba(255, 168, 92, .15);
  display: flex; align-items: center; gap: 6px;
}
.clip-actions {
  display: flex; gap: 6px;
  margin-bottom: 8px;
}
.clip-actions:last-child { margin-bottom: 0; }
.clip-btn {
  padding: 6px 12px; font-size: 12px; min-width: 0;
}
.clip-btn.active {
  color: var(--clip);
  border-color: rgba(255, 168, 92, .75);
  background: rgba(255, 168, 92, .14);
  box-shadow: 0 0 12px rgba(255, 168, 92, .3);
}
.clip-btn-primary {
  background: var(--clip);
  color: #fff;
  border-color: transparent;
}
.clip-btn-primary:hover:not(:disabled) {
  filter: brightness(1.15);
}
.clip-btn-ghost {
  border-color: transparent;
  color: var(--muted);
  background: transparent;
}
.clip-btn-ghost:hover:not(:disabled) {
  color: var(--text);
  background: rgba(255, 255, 255, .04);
  border-color: var(--line-2);
}
.clip-range-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 600;
  color: var(--clip);
  letter-spacing: .02em;
  text-align: center;
  padding: 4px 10px;
  margin-bottom: 8px;
  background: rgba(255, 168, 92, .1);
  border: 1px solid rgba(255, 168, 92, .32);
  border-radius: var(--radius);
  display: block;
}
.clip-range-label.placeholder {
  color: var(--muted);
  background: transparent;
  border-style: dashed;
  border-color: var(--line-2);
  text-transform: none; letter-spacing: 0;
  font-weight: 500;
}

/* Full-page modal while a clip is recording. Blocks input so the user
   doesn't scrub / seek mid-record; the recorder drives playback itself. */
#clipProgress {
  position: fixed; inset: 0;
  background: rgba(3, 6, 13, .72);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
#clipProgress[hidden] { display: none; }
.clip-progress-box {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 20px 26px;
  min-width: 300px;
  text-align: center;
  box-shadow: 0 22px 50px rgba(0,0,0,.55);
}
.clip-progress-title {
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}
.clip-progress-track {
  position: relative; height: 6px;
  background: var(--line); border-radius: 999px;
  overflow: hidden;
}
.clip-progress-bar {
  position: absolute; left: 0; top: 0; height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .08s linear;
}
.clip-progress-pct {
  margin-top: 8px;
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* "Are you still there?" idle modal. Mirrors #clipProgress so it stacks
   above the rink and any HUD overlays without inheriting their styles. */
#idleModal {
  position: fixed; inset: 0;
  background: rgba(3, 6, 13, .72);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
#idleModal[hidden] { display: none; }
.idle-modal-box {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 22px 28px;
  min-width: 320px; max-width: 420px;
  text-align: center;
  box-shadow: 0 22px 50px rgba(0,0,0,.55);
}
.idle-modal-title {
  font-size: 14px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}
.idle-modal-body {
  font-size: 13px; color: var(--text);
  margin-bottom: 16px;
}
.idle-modal-btn {
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #0b1220; border: 0; border-radius: 8px;
  padding: 10px 22px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.idle-modal-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---------- custom scrub bar (YouTube-style) ---------- */
#scrub {
  position: relative; flex: 1; min-width: 240px;
  height: 24px; cursor: pointer;
  display: flex; align-items: center;
  touch-action: none; user-select: none;
  outline: none;
}
#scrub[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
#scrub .track {
  position: relative;
  width: 100%; height: 6px;
  background: var(--line);
  border-radius: 999px;
  transition: height .12s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
#scrub:hover:not([aria-disabled="true"]) .track,
#scrub.dragging .track { height: 9px; }
#scrub .buffered,
#scrub .played {
  position: absolute; left: 0; top: 0; height: 100%;
  border-radius: 999px;
  pointer-events: none;
  width: 0%;
}
#scrub .buffered { background: var(--line-2); }
#scrub .played  {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 8px var(--accent-glow);
}
#scrub:hover:not([aria-disabled="true"]) .played,
#scrub.dragging .played { box-shadow: 0 0 12px rgba(46,204,113,.45); filter: brightness(1.08); }
#scrub .loadbar {
  position: absolute; left: 0; top: 0; height: 100%;
  width: 100%;
  border-radius: 999px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity .2s ease;
}
#scrub.loading .loadbar { opacity: 1; }
#scrub .loadbar::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 28%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(137,208,255,0.75) 50%,
    transparent 100%);
  animation: scrub-loadbar 1.4s linear infinite;
}
@keyframes scrub-loadbar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(460%); }
}
/* Clip range band: shows the [playhead − clipLength, playhead] span that
   will be captured on Export. Extends well above and below the thin scrub
   track so the range is obvious at a glance — the 4 px track alone wasn't
   enough real estate to read. Bold gold edges mark the exact start and end
   ticks; the fill is a low-alpha wash so goal/faceoff markers inside the
   band still read through. Sits under the thumb so the playhead is always
   visible even when it lines up with the band's right edge. */
#scrub .clip-range {
  position: absolute;
  top: -9px; height: calc(100% + 18px);
  background: rgba(255, 168, 92, .18);
  border-left:  3px solid rgba(255, 168, 92, .95);
  border-right: 3px solid rgba(255, 168, 92, .95);
  box-shadow: 0 0 12px rgba(255, 168, 92, .35),
              inset 0 0 0 1px rgba(255, 168, 92, .4);
  border-radius: 4px;
  pointer-events: none;
  width: 0;
}
/* Pending state: only one endpoint is set and the other follows the
   playhead. Dashed edges signal "not final yet" without losing the band. */
#scrub .clip-range.pending {
  background: rgba(255, 168, 92, .08);
  border-left-style:  dashed;
  border-right-style: dashed;
  box-shadow: inset 0 0 0 1px rgba(255, 168, 92, .25);
}
#scrub[aria-disabled="true"] .clip-range { display: none; }
#scrub .clip-range[hidden] { display: none; }

#scrub .markers {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none;
}
.scrub-marker {
  position: absolute;
  top: -4px; height: calc(100% + 8px);
  width: 3px; margin-left: -1.5px;
  border-radius: 2px;
  pointer-events: auto;   /* so tooltips work */
  cursor: pointer;
}
.scrub-marker[data-team="blue"] {
  background: var(--team-blue);
  box-shadow: 0 0 6px rgba(137,208,255,0.7);
}
.scrub-marker[data-team="red"] {
  background: var(--team-red);
  box-shadow: 0 0 6px rgba(255,138,163,0.7);
}
/* Highlighted-player goal/assist markers: match the in-rink player highlight
   ring (cyan for blue team, pink for red team) — see renderer.js drawPlayer. */
.scrub-marker.scorer-highlight {
  width: 4px; margin-left: -2px;
  height: calc(100% + 12px); top: -6px;
  z-index: 2;
}
.scrub-marker.scorer-highlight[data-team="blue"] {
  background: #00e5cc;
  box-shadow: 0 0 10px rgba(0, 229, 204, 0.95);
}
.scrub-marker.scorer-highlight[data-team="red"] {
  background: #ff6b9d;
  box-shadow: 0 0 10px rgba(255, 107, 157, 0.95);
}
.scrub-marker.assist-highlight { z-index: 1; }
.scrub-marker.assist-highlight[data-team="blue"] {
  background: rgba(0, 229, 204, 0.55);
  box-shadow: 0 0 6px rgba(0, 229, 204, 0.45);
}
.scrub-marker.assist-highlight[data-team="red"] {
  background: rgba(255, 107, 157, 0.55);
  box-shadow: 0 0 6px rgba(255, 107, 157, 0.45);
}
/* Faceoff markers are drawn under goal markers — thinner, muted, no glow,
   so the scrub bar isn't overwhelmed by them. They mark where a faceoff
   started (transition INTO GAME_PHASE.FACEOFF). */
.scrub-marker.faceoff-marker {
  top: 0; height: 100%;
  width: 2px; margin-left: -1px;
  background: rgba(169, 179, 199, .38);
  box-shadow: none;
  border-radius: 1px;
}
.scrub-marker.faceoff-marker:hover { height: calc(100% + 8px); top: -4px; background: rgba(169, 179, 199, .7); }
.scrub-marker:hover { height: calc(100% + 14px); top: -7px; }

/* Keynote markers — Game Start, period boundaries, Game End. Visually
   distinct from goal markers: a slim vertical tick (no team color), a
   small notch up top, and a tiny text label floating above the scrub
   track. Hover bumps the label opacity. Always layered above the played
   bar so labels stay legible. */
.scrub-marker.keynote-marker {
  top: -8px; height: calc(100% + 16px);
  width: 2px; margin-left: -1px;
  background: var(--text-2, rgba(220, 226, 240, 0.85));
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
  z-index: 3;
}
.scrub-marker.keynote-marker.keynote-start,
.scrub-marker.keynote-marker.keynote-end {
  background: #f5d04a;
  box-shadow: 0 0 6px rgba(245, 208, 74, 0.6);
}
.scrub-marker.keynote-marker .keynote-label {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  font: 600 9px/1 'DM Sans', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2, rgba(220, 226, 240, 0.85));
  background: rgba(20, 26, 36, 0.78);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.85;
}
.scrub-marker.keynote-marker.keynote-start .keynote-label,
.scrub-marker.keynote-marker.keynote-end   .keynote-label {
  color: #f5d04a;
}
.scrub-marker.keynote-marker:hover { height: calc(100% + 18px); top: -9px; }
.scrub-marker.keynote-marker:hover .keynote-label { opacity: 1; }

/* Power-play bands: translucent team-color fills spanning the PP interval.
   Sit behind goal/faceoff point markers so those still read on top. */
.scrub-pp-band {
  position: absolute;
  top: 0; height: 100%;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 2px;
  opacity: 0.45;
}
.scrub-pp-band[data-team="blue"] { background: var(--team-blue); }
.scrub-pp-band[data-team="red"]  { background: var(--team-red); }
.scrub-pp-band:hover { opacity: 0.75; }

#scrub .thumb {
  position: absolute; top: 50%;
  width: 12px; height: 12px;
  margin-left: -6px; margin-top: -6px;
  background: var(--accent-2);
  border-radius: 50%;
  pointer-events: none;
  left: 0%;
  /* Persistent slim thumb (scaled down) — visible at rest so the user
     can see exactly where the playhead is even before they hover, and
     never feels like the bar is empty. Grows on hover/drag/focus. */
  transform: scale(0.65);
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 0 0 2px rgba(13,13,13,.7), 0 1px 4px rgba(0,0,0,.5);
}
#scrub[aria-disabled="true"] .thumb { transform: scale(0); }
#scrub:hover:not([aria-disabled="true"]) .thumb,
#scrub.dragging .thumb,
#scrub:focus-visible .thumb {
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(137, 208, 255, 0.28), 0 2px 6px rgba(0,0,0,.4);
}

/* ---------- time display & status pill ---------- */
.time-display {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 500;
  color: var(--muted);
  min-width: 90px; text-align: right;
}
#statusPill {
  min-width: 70px; text-align: center;
  background: rgba(255,255,255,.04);
}
#statusPill[data-kind="buffering"],
#statusPill[data-kind="loading"] {
  background: rgba(59,169,255,.14); color: var(--accent-2);
  border-color: rgba(59,169,255,.3);
}
#statusPill[data-kind="streaming"] {
  background: rgba(48,209,88,.12); color: var(--good);
  border-color: rgba(48,209,88,.3);
}
#statusPill[data-kind="playing"] { color: var(--text); }
#statusPill[data-kind="paused"]  { color: var(--muted); }
#statusPill[data-kind="end"]     { color: var(--gold); border-color: rgba(255,209,102,.35); }
#statusPill[data-kind="error"]   {
  background: rgba(255,95,87,.14); color: #ffbcb9;
  border-color: rgba(255,95,87,.4);
}

/* ---------- meta row ---------- */
#meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 24px; font-size: 13px;
}
#meta b { color: var(--muted); font-weight: 700; margin-right: 6px;
          text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }

/* ---------- match summary (top of matchCard) ---------- */
#matchSummary {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 24px;
  padding: 4px 0 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
#matchScore {
  display: flex; align-items: center; gap: 14px;
  font-weight: 800;
}
.mscore-team { display: flex; align-items: center; gap: 10px; }
.mscore-team.red { flex-direction: row-reverse; }
.mscore-label {
  font-size: 12px; letter-spacing: .12em;
  color: var(--muted);
}
.mscore-team.blue .mscore-label { color: var(--team-blue); }
.mscore-team.red  .mscore-label { color: var(--team-red); }
.mscore-val { font-size: 42px; line-height: 1; }
.mscore-team.blue .mscore-val { color: var(--team-blue); }
.mscore-team.red  .mscore-val { color: var(--team-red); }
.mscore-sep { color: var(--muted); font-size: 24px; font-weight: 400; }

#matchTotals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px 24px;
  margin: 0; flex: 1; min-width: 280px;
  font-size: 13px;
}
#matchTotals > div { display: flex; flex-direction: column; gap: 2px; }
#matchTotals dt {
  color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
#matchTotals dd { margin: 0; color: var(--text); }

/* ---------- stats table (shares match-table aesthetic) ---------- */
.match-table { width: 100%; border-collapse: collapse; }
.match-table th, .match-table td {
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.match-table th {
  font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  background: var(--bg2);
  position: sticky; top: 0; z-index: 1;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -1px 0 var(--line);
}
/* Zebra rows: even data rows get a hairline tint so the eye can track
   across long roster rows without mis-reading columns. Sits below
   selection/team-color highlights. */
.match-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.012);
}
.match-table tr:hover td {
  background: rgba(74,158,255,.06);
}
.match-table td.num, .match-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  white-space: nowrap;
}
.match-table td.name { font-weight: 650; }
.match-table td.name .flag {
  display: inline-block; margin-right: 6px;
  width: 18px; height: 13px;
  object-fit: cover;
  vertical-align: -1px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.match-table td.zone { white-space: nowrap; width: 1%; }
.match-table td.steamid { color: var(--muted); font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.match-table td.steamid .steam-link { color: inherit; border-bottom: 1px dotted rgba(169,179,199,.4); }
.match-table td.steamid .steam-link:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }

/* Roster-churn glyphs next to the username. Each conveys a single event
 * via its tooltip; color-codes by category so a scan of the team rows
 * surfaces unusual players fast. */
.churn-badge {
  display: inline-block; margin-left: 6px;
  font-size: 11px; line-height: 1;
  padding: 1px 5px; border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  border: 1px solid transparent;
  cursor: help;
  vertical-align: 1px;
}
.churn-badge.teams { color: var(--team-blue); border-color: rgba(137,208,255,.35); }
.churn-badge.pos   { color: var(--gold);      border-color: rgba(255,209,102,.35); }
.churn-badge.late  { color: var(--good);      border-color: rgba(48,209,88,.35); }
.churn-badge.early { color: var(--bad);       border-color: rgba(255,95,87,.35); }

/* Team color bar at start of each stats row.
 * PlayerTeam enum: 2 = Blue, 3 = Red. */
.match-table td.team-num {
  width: 40px; padding: 0; text-align: center;
}
.match-table td.team-num .team-num-val {
  display: inline-block;
  min-width: 28px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.match-table td.team-num.team-2 .team-num-val { background: var(--team-blue); }
.match-table td.team-num.team-3 .team-num-val { background: var(--team-red); }

/* Team-change divider */
.match-table tr.team-break td { border-top: 2px solid var(--line-2); }

/* Goalie tag */
.match-table tr.goalie td.name::after { content: " (G)"; color: var(--muted); font-size: 11px; font-weight: 400; }

/* Leading-stat highlight: first row of each team (highest-points) gets a gold touch */
/* Top scorer PTS highlighting removed */

/* Cross-panel selection - click a stats row to highlight the player on the rink. */
.match-table tbody tr { cursor: pointer; }
/* Blue team (team=2) highlight: cyan */
.match-table tbody tr.selected td {
  background: rgba(0,229,204,0.08);
}
.match-table tbody tr.selected td.name { color: #00e5cc; font-weight: 700; }
/* Red team (team=3) highlight: pink */
.match-table tbody tr.selected[data-team="3"] td {
  background: rgba(255,107,157,0.08);
}
.match-table tbody tr.selected[data-team="3"] td.name { color: #ff6b9d; font-weight: 700; }

/* Position chip */
.pos-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.02);
  color: var(--muted); min-width: 28px; text-align: center;
}

/* ---------- status pill ---------- */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
  color: var(--muted);
}

/* ---------- responsive ---------- */

/* Touch-specific affordances. `hover: none` + `pointer: coarse` targets
   devices whose primary input is a finger / pen, so every rule here is
   a no-op on mouse/trackpad and can't regress desktop. The main job is
   giving the scrub bar a visible playhead indicator (otherwise the
   playhead is hidden until the user starts dragging — unusable on
   touch) and enlarging pill-sized controls to a finger-friendly size. */
@media (hover: none) and (pointer: coarse) {
  /* Scrub: fatter track + always-visible thumb. Desktop keeps the
     hover-reveal behavior because this block doesn't apply there. */
  #scrub { height: 32px; }
  #scrub .track { height: 6px; }
  #scrub.dragging .track { height: 8px; }
  #scrub .thumb {
    width: 16px; height: 16px;
    margin-left: -8px; margin-top: -8px;
    transform: scale(1);
  }
  #scrub.dragging .thumb {
    transform: scale(1.2);
    box-shadow: 0 0 0 6px rgba(137, 208, 255, 0.28);
  }
  /* Goal/faceoff markers grow slightly and pick up an invisible
     tap-area pad via ::after so fingers can land on the 3-4 px ribbon. */
  .scrub-marker { width: 5px; margin-left: -2.5px; }
  .scrub-marker::after {
    content: "";
    position: absolute;
    left: -7px; right: -7px; top: -6px; bottom: -6px;
  }
  .scrub-marker.faceoff-marker { width: 3px; margin-left: -1.5px; }
  .scrub-marker.scorer-highlight { width: 6px; margin-left: -3px; }

  /* Stage toolbar controls: 26 px was the hover-happy mouse size.
     Bump to ~36 px on touch for comfortable taps without changing the
     toolbar's visual footprint much. */
  .stage-icon-btn,
  .tool-picker .tool { width: 34px; height: 34px; }
  .swatch { width: 26px; height: 26px; }
  .mode-picker .mode { height: 34px; padding: 0 12px; font-size: 12px; }
  #drawToggle { padding: 8px 12px; font-size: 12px; }
  .stage-toolbar { padding: 5px 8px; gap: 6px; }
  .stage-toolbar .btn { padding: 7px 12px; font-size: 12px; }

  /* Row-height on clip buttons. */
  .clip-btn { padding: 10px 14px; min-height: 38px; }

  /* Sticky-hover guard. On touch, :hover state lingers after a tap
     until the user taps elsewhere — the button looks stuck in its
     hover state. Flatten the hover transform so there's no visible
     residue; color changes still apply so active state is still
     obvious. */
  .btn:hover:not(:disabled),
  .btn-primary:hover:not(:disabled) { transform: none; }
}

/* Narrow viewport: phones landscape, small tablets, narrow desktop
   windows. Tightens header + card chrome, stacks the controls rows,
   shrinks the scoreboard/overlays so they don't crowd small rinks.
   Desktop at full width never enters this block. */
@media (max-width: 820px) {
  html { scroll-padding-top: 120px; }
  .wrap { padding: 6px; }
  main.wrap { padding-top: 10px; gap: 12px; }
  main.app-layout { min-height: 0; }

  /* Draw rail: tighter on narrow viewports */
  .draw-rail { top: 6px; left: 6px; }
  .card { padding: 14px; border-radius: 12px; }
  .card h3 { font-size: 18px; }
  .card h3 .sub { font-size: 12px; }

  /* Replay select can flex to fill its row when wrapped. */
  .replay-select { flex: 1 1 240px; min-width: 0; max-width: 100%; }

  /* Match summary: compress gaps so score + totals still fit one row
     when there's room, but stack cleanly when they don't. */
  #matchSummary { gap: 14px; padding-bottom: 14px; margin-bottom: 14px; }
  .mscore-val { font-size: 34px; }
  #matchTotals {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 4px 16px;
    min-width: 220px;
  }
  /* Highlights stack into a single column on narrow screens so each
     visualization gets its own full-width row instead of being squeezed. */
  .match-highlights { grid-template-columns: 1fr; gap: 16px; }

  /* Meta grid: 2 cols instead of auto-fit 220px. (Replaces the old
     800px-only override, extended with other tweaks in this block.) */
  #meta { grid-template-columns: 1fr 1fr; }

  /* Scoreboard overlay: smaller type, still readable. */
  .sb-score { font-size: 18px; padding: 3px 8px; }
  .sb-name { font-size: 9px; padding: 5px 8px; }
  .sb-clock { font-size: 13px; }
  .sb-center { padding: 3px 10px; }
  #possessionPill { font-size: 10px; padding: 2px 8px; }

  /* Cinematic banner moves up to match the smaller scoreboard. */
  #cinematicBanner { top: 58px; font-size: 11px; padding: 4px 12px; letter-spacing: .08em; }

  /* Stage toolbars: thinner padding so they don't crowd a ~360-wide rink.
     At narrow widths the markup toolbar would collide with the swatches
     when expanded — horizontal row of tools + swatches
     + Undo/Clear can easily be wider than half a phone rink. Switching
     to column-reverse puts the toggle chip on top with the expanded tool
     group dropping DOWN beneath it, and hiding inactive groups reclaims
     the space entirely when a side isn't in use. Max-width caps each
     toolbar so the two sides can never meet in the middle. */
  .stage-toolbar {
    top: 6px; padding: 3px 6px; gap: 4px;
    flex-direction: column-reverse;
    max-width: calc(50% - 12px);
  }
  .stage-toolbar-left  { left:  6px; align-items: flex-start; }
  .stage-toolbar-right { right: 6px; align-items: flex-end;   }
  .stage-fullscreen-btn { right: 6px; bottom: 6px; }

  /* Vertical divider between toggle and tools becomes a horizontal sliver
     in column mode — drop it. */
  .draw-tools::after,
  .stage-toolbar .mode-picker::after { display: none; }

  /* Inactive tool group collapses entirely instead of dimming in place.
     On desktop we keep the dim-in-place behavior (tools stay visible as
     a hint) because real estate is cheap there; on phones it's critical
     that the two corners don't grow into each other. */
  .stage-toolbar .draw-tools.inactive,
  .stage-toolbar .mode-picker.inactive { display: none; }

  /* Active tool group wraps its items so a long swatch row folds into
     two shorter rows instead of pushing the toolbar past its max-width. */
  .stage-toolbar .draw-tools,
  .stage-toolbar .mode-picker { flex-wrap: wrap; gap: 4px; }
  .stage-toolbar-right .mode-picker { justify-content: flex-end; }
  .stage-toolbar .draw-tools .btn { padding: 5px 10px; font-size: 11px; }

  /* Controls row: scrub gets its own row so it isn't squeezed. */
  #controls { gap: 8px; padding: 6px 10px; }
  .transport-play { width: 36px; height: 36px; }
  .transport-skip { width: 28px; height: 28px; }
  .transport-skip svg { width: 14px; height: 14px; }
  #scrub { flex: 1 1 100%; order: 5; }
  .time-display { font-size: 11px; min-width: 72px; }
  .speed-chip { padding: 3px 6px; font-size: 10px; }

  /* Popovers: narrower on tablets */
  .popover { min-width: 180px; }

  .draw-rail-toggle { font-size: 10px; padding: 5px 8px; }
  .tool-grid .tool,
  .tool-picker .tool { width: 30px; height: 30px; }
  .draw-rail-tools { padding: 6px; gap: 6px; }

  /* Drawers: full-width on narrow viewports */
  .drawer { width: 100%; max-width: 100%; }
}

/* Phones in portrait (≤520 px). Further compresses card chrome, stats
   rows, and the toolbar controls so a one-hand phone grip still shows
   both teams' data. */
@media (max-width: 520px) {
  .file-btn { padding: 6px 10px; font-size: 12px; }
  .status-pill { font-size: 11px; padding: 2px 8px; }

  #matchTotals { grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .mscore-val { font-size: 28px; }
  .mscore-sep { font-size: 18px; }

  /* Stats table body: tighter padding so more columns are visible per
     scroll-swipe. Table still scrolls horizontally via its wrapper. */
  .match-table th, .match-table td { padding: 7px 8px; font-size: 12px; }
  .match-table td.steamid { font-size: 11px; }

  .card { padding: 10px; }
  .card h3 { font-size: 16px; }

  /* Scoreboard at portrait-phone widths — squeeze tighter so it doesn't
     overlap the stage toolbars on a 320-pt-wide rink. */
  .sb-score { font-size: 16px; padding: 2px 6px; min-width: 22px; }
  .sb-name { font-size: 8px; padding: 4px 6px; }
  .sb-center { padding: 2px 8px; }
  .sb-clock { font-size: 12px; }

  /* Clip popover: narrower on phones */
  .clip-actions { flex-wrap: wrap; }
  .clip-btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* Respect iOS / Android safe-area insets on phones with notches /
   rounded corners. No-op on desktop (env() resolves to 0). */
@supports (padding: max(0px)) {
  main.wrap {
    padding-left:  max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
}

/* ---------- coaching review panel ---------- */
/* Lives inside its own .collapsible card below Player Stats. Reuses the
   existing collapsible chrome — only the body styles are bespoke here. */

/* coach button wrapper — provides positioning context for the player popover */
.coach-btn-wrap {
  position: relative;
  display: inline-flex;
}

.coach-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 6px 12px;
  border-radius: var(--radius);
}
.coach-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
.coach-btn svg {
  flex-shrink: 0;
  color: var(--accent);
}
.coach-btn[disabled] svg {
  color: var(--muted);
}

/* Coach panel controls: focal player selector + regenerate button. Sits
   above the review content so it stays put across loading/error/results
   state swaps (panel.js targets #coachContent, never the controls row). */
.coach-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
}
.coach-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  font-weight: 600;
}
.coach-focal-select {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  padding: 6px 10px;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.coach-focal-select:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.coach-focal-select:focus {
  outline: none;
  border-color: var(--accent);
}
.coach-regen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.coach-regen-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.coach-regen-btn svg {
  flex-shrink: 0;
  color: var(--accent);
}
.coach-regen-btn:disabled svg {
  color: var(--muted);
}

/* Coach button loading state */
.coach-btn-spinner { display: none; }
.coach-btn--loading .coach-btn-star    { display: none; }
.coach-btn--loading .coach-btn-spinner {
  display: block;
  animation: coach-spin 0.85s linear infinite;
  color: var(--accent);
}
.coach-btn--loading .coach-btn-label { opacity: .7; }

/* Player / team picker popover */
.coach-player-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: var(--glass-bg-strong);
  border: var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 22;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.coach-player-popover[hidden] { display: none; }
.coach-player-popover-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 12px 4px;
}
.coach-player-list {
  display: flex;
  flex-direction: column;
  padding: 4px;
}
.coach-player-item {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text);
  text-align: left;
  width: 100%;
  transition: background .1s;
}
.coach-player-item:hover { background: var(--bg2); }
.coach-player-item--team { font-weight: 600; }
.coach-player-item--blue { color: #4a9eff; }
.coach-player-item--red  { color: #ff4a5a; }
.coach-player-item-sep {
  height: 1px;
  background: var(--line-2);
  margin: 4px 8px;
}

/* Review Feedback button (transport bar, beside coach button) */
.coach-feedback-log-btn {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  opacity: 1;
}
.coach-feedback-log-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Feedback modal — wide variant */
.coach-modal--wide {
  width: min(680px, 96vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.coach-modal-body {
  overflow-y: auto;
  padding: 16px;
  flex: 1;
}

.coach-summary {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: var(--rim-light);
}

.coach-summary--pending {
  color: var(--muted);
  font-style: italic;
  padding: 8px 0;
}

.coach-empty,
.coach-error,
.coach-empty--error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.coach-error,
.coach-empty--error {
  color: var(--bad);
}

.coach-gen-loading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.coach-gen-label {
  font-size: 13px;
  font-style: italic;
}
.coach-gen-label::after {
  display: inline-block;
  content: '...';
  width: 0;
  overflow: hidden;
  vertical-align: bottom;
  animation: coach-ellipsis 1.4s steps(4, end) infinite;
}
@keyframes coach-ellipsis {
  to { width: 1.25em; }
}

.coach-spinner {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent) 0%, transparent 70%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 3px));
  animation: coach-spin 0.85s linear infinite;
}
@keyframes coach-spin {
  to { transform: rotate(360deg); }
}

/* --- Now Watching mini-card --- */
#coachNowWatching {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm), var(--rim-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#coachNowWatching[hidden] { display: none; }
#coachNowWatching.feedback-good { border-left-color: var(--good); }
#coachNowWatching.feedback-bad  { border-left-color: var(--bad); }
#coachNowWatching.feedback-warn { border-left-color: #e67e22; }

.coach-nw-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.coach-nw-select {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--line-2);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.coach-nw-select:focus {
  outline: none;
  border-color: var(--accent);
}
.coach-nw-counter {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.coach-nw-nav-btn {
  padding: 4px 9px;
  font-size: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  flex-shrink: 0;
  line-height: 1;
}
.coach-nw-nav-btn:hover:not(:disabled) {
  background: var(--accent-glow);
  border-color: var(--accent);
}
.coach-nw-nav-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.coach-nw-dismiss {
  padding: 3px 8px;
  font-size: 16px;
  line-height: 1;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .12s, border-color .12s;
  flex-shrink: 0;
}
.coach-nw-dismiss:hover {
  color: var(--text);
  border-color: var(--line-2);
}

/* Active moment highlight in the collapsible list */
.coach-moment--active {
  background: var(--accent-glow);
}

.coach-moments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.coach-moment {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm), var(--rim-light);
}
.coach-moment[data-priority="critical"] { border-left-color: var(--team-red); }
.coach-moment[data-priority="notable"]  { border-left-color: var(--clip);     }
.coach-moment[data-priority="minor"]    { border-left-color: var(--muted);    }

.coach-moment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.coach-priority-pip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.coach-moment-title {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.coach-moment-range {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
  background: var(--bg2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.coach-moment-narration {
  margin: 0 0 8px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

.coach-moment-point {
  margin: 0 0 10px 0;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
  color: var(--text);
  background: rgba(245, 166, 35, .07);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.coach-watch-btn {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg2);
  color: var(--accent);
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.coach-watch-btn:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
}

/* --- card footer: watch + feedback side by side --- */
.coach-card-footer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* --- feedback tints on rated cards --- */
.coach-moment.feedback-good { border-left-color: var(--good); }
.coach-moment.feedback-bad  { border-left-color: var(--bad); }
.coach-moment.feedback-warn { border-left-color: #e67e22; }

/* --- feedback row --- */
.coach-feedback-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.coach-feedback-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.coach-feedback-btn {
  font-size: 14px;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  background: var(--bg2);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  line-height: 1;
}
.coach-feedback-btn:hover           { background: var(--bg2); border-color: var(--muted); }
.coach-feedback-btn.active          { border-color: var(--accent); background: var(--accent-glow); }
.coach-feedback-note-wrap {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}
.coach-feedback-note {
  flex: 1;
  font-size: 12px;
  padding: 5px 8px;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 40px;
}
.coach-feedback-note:focus {
  outline: none;
  border-color: var(--accent);
}
.coach-feedback-submit-btn {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  align-self: flex-start;
}

/* --- diagnostic section --- */
.coach-diag {
  margin: 8px 0;
  border-top: 1px solid var(--line-2);
  padding-top: 6px;
}
.coach-diag-toggle {
  font-size: 11px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-weight: 600;
  transition: color .12s;
}
.coach-diag-toggle:hover { color: var(--text); }
.coach-diag-arrow { font-size: 9px; }
.coach-diag-body { margin-top: 8px; }
.coach-diag-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  font-size: 12px;
  margin: 0 0 8px 0;
}
.coach-diag-grid dt {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.coach-diag-grid dd {
  margin: 0;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  word-break: break-word;
}
.coach-diag-raw-btn {
  font-size: 11px;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 3px 8px;
  transition: color .12s, border-color .12s;
}
.coach-diag-raw-btn:hover { color: var(--text); border-color: var(--muted); }

/* --- feedback log view --- */
.coach-feedback-log-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.coach-log-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
  flex-wrap: wrap;
}
.coach-log-back-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
}

.coach-log-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  background: var(--bg2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.coach-log-stat-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  flex-wrap: wrap;
}
.coach-log-stat-type {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text);
  font-weight: 600;
  min-width: 160px;
}
.coach-log-stat-counts { color: var(--muted); flex: 1; }
.coach-log-good  { color: var(--good); font-weight: 600; }
.coach-log-bad   { color: var(--bad);  font-weight: 600; }
.coach-log-warn  { color: #e67e22;     font-weight: 600; }
.coach-log-stat-pct { color: var(--muted); font-size: 11px; white-space: nowrap; }
.coach-log-list-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin: 0 0 8px 0;
}
.coach-log-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.coach-log-entry {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 2px 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg2);
  border-left: 3px solid var(--muted);
  font-size: 12px;
  transition: opacity .15s;
}
.coach-log-entry--good          { border-left-color: var(--good); }
.coach-log-entry--false_positive { border-left-color: var(--bad); }
.coach-log-entry--bad_narration { border-left-color: #e67e22; }
.coach-log-entry-verdict { font-size: 14px; grid-row: 1 / 3; align-self: center; }
.coach-log-entry-type {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}
.coach-log-entry-note { color: var(--muted); font-size: 12px; grid-column: 2; }
.coach-log-entry-ts   { color: var(--muted); font-size: 10px; grid-row: 1; align-self: start; white-space: nowrap; }
.coach-log-entry-curation {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--line-2);
  margin-top: 2px;
}
.curation-approve-btn, .curation-dismiss-btn {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.curation-approve-btn { color: var(--good); border: 1px solid var(--good); background: transparent; }
.curation-approve-btn:hover { background: rgba(245, 166, 35, .12); }
.curation-dismiss-btn { color: var(--muted); border: 1px solid var(--muted); background: transparent; }
.curation-dismiss-btn:hover { background: var(--bg3); }
.curation-status { font-size: 10px; font-weight: 600; }
.curation-status.approved { color: var(--good); }
.curation-status.dismissed { color: var(--muted); }
.curation-status.error { color: #ff4a5a; cursor: help; }
.curated-dismissed { opacity: .5; }

/* --- shared modal overlay --- */
.coach-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
}
.coach-modal {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  max-width: 680px;
  width: 100%;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.coach-modal-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
}
.coach-modal-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  flex: 1;
}
.coach-modal-close {
  font-size: 18px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: color .12s;
}
.coach-modal-close:hover { color: var(--text); }
.coach-modal-pre {
  margin: 0;
  padding: 14px 16px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* ── Feedback FAB + modal ───────────────────────────────────────────────── */

.feedback-fab {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 900;
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px 10px 13px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #0b1220;
  border: none; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 2px 6px rgba(245,166,35,.35);
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.feedback-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 3px 10px rgba(245,166,35,.4);
}
.feedback-fab:active { transform: translateY(0); }
.feedback-fab svg { flex-shrink: 0; }

.feedback-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(3, 6, 13, .72);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1100;
  padding: 16px;
}
.feedback-modal-backdrop[hidden] { display: none; }

.feedback-modal-box {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--rim-light);
  width: 100%; max-width: 440px;
  padding: 22px 24px 20px;
}

.feedback-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.feedback-modal-title {
  font-size: 14px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.feedback-modal-close {
  appearance: none; -webkit-appearance: none;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 20px; line-height: 1;
  padding: 2px 4px; border-radius: 4px;
  transition: color .1s;
}
.feedback-modal-close:hover { color: var(--text); }

.feedback-modal-prompt {
  font-size: 13px; color: var(--text);
  margin: 0 0 12px;
  line-height: 1.5;
}

.feedback-modal-textarea {
  width: 100%; box-sizing: border-box;
  background: var(--bg2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px; font-family: inherit;
  line-height: 1.5;
  padding: 10px 12px;
  resize: vertical; min-height: 110px;
  transition: border-color .12s;
}
.feedback-modal-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.feedback-modal-textarea::placeholder { color: var(--muted); }

.feedback-modal-actions {
  display: flex; justify-content: flex-end;
  margin-top: 12px;
}
.feedback-modal-submit {
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #0b1220; border: none; border-radius: var(--radius);
  padding: 9px 20px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: opacity .12s, transform .1s;
}
.feedback-modal-submit:hover  { opacity: .9; transform: translateY(-1px); }
.feedback-modal-submit:active { transform: translateY(0); }
.feedback-modal-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.feedback-modal-thanks {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 16px 0 4px;
  text-align: center;
}
.feedback-modal-thanks[hidden] { display: none; }
.feedback-modal-thanks p {
  margin: 0;
  font-size: 14px; font-weight: 600; color: var(--text);
}

/* ── Drag-and-drop overlay ───────────────────────────────────────────────── */

body.drag-over::after {
  content: 'Drop replay file to load';
  position: fixed; inset: 0;
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; letter-spacing: .06em;
  color: var(--accent);
  background: rgba(3, 6, 13, .72);
  backdrop-filter: blur(4px);
  border: 3px dashed var(--accent);
  pointer-events: none;
}

/* ── Replay help button + modal ─────────────────────────────────────────── */

.replay-help-btn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 5px;
  background: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 9px 3px 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
  flex-shrink: 0;
}
.replay-help-btn:hover { color: var(--text); border-color: rgba(255,255,255,.25); }

.replay-help-box { max-width: 500px; }

.replay-help-steps {
  margin: 0;
  padding-left: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.replay-help-steps li {
  font-size: 13px; color: var(--text); line-height: 1.55;
}
.replay-help-steps a { color: var(--accent-2); }
.replay-help-steps a:hover { color: var(--text); }

.replay-help-ps {
  display: block;
  margin-top: 4px;
  font-size: 12px; color: var(--muted);
  font-style: normal;
}

.replay-help-path {
  display: block;
  margin-top: 5px;
  padding: 6px 10px;
  background: var(--bg2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--accent);
  word-break: break-all;
}

/* ── Beta tag ───────────────────────────────────────────────────────────── */

.beta-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(241, 196, 15, .15);
  border: 1px solid rgba(241, 196, 15, .4);
  color: var(--gold);
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.5;
  pointer-events: none;
}