/* The analytics page in the site's look: the copied dashboard styles (vendor/overlay.css, vendor/dashboard.css) are
   driven by a few variables (--surface, --text, --accent, ...); here they are the site's tokens (src/styles/tokens.css,
   light and dark), and the few fixed dark colours and fonts of the dashboard are replaced. The site frame (top bar,
   header, footer) is the site's own (src/analytics-main.jsx). */

html {
  background: var(--surface-base);
}

.an-body {
  --bg: var(--surface-raised);
  --surface: var(--surface-raised);
  --panel: var(--surface-raised);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --accent: var(--accent-text);
  --danger: var(--accent-danger);
  --ok: var(--accent-success);
  --border: var(--surface-border);
  --hub-radius: 0.5rem;
  --dash-text: var(--text-primary);
  --dash-muted: var(--text-secondary);
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-base);
}

/* The site's page column is 1000px; the analytics keeps it. */
.an-main {
  min-width: 0;
}

.an-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Panels: the site's card (radius, border, raised surface, its shadow). */
.an-body .results-matchup,
.an-body .server-hero-matchup,
.an-body .results-scoreboard-wrap,
.an-body .match-timeline-panel,
.an-body .match-analytics-panel,
.an-body .stat-card {
  border-radius: 0.5rem;
  border-color: var(--surface-border);
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}

/* Titles in the site's display face (Rajdhani, upper case), primary text colour. */
.an-body .match-page-title,
.an-body .results-detail-hero-main h2,
.an-body .match-timeline-head h3,
.an-body .match-analytics-panel h3,
.an-body .match-section-title,
.an-body .results-scoreboard-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.an-body .match-page-title,
.an-body .results-detail-hero-main h2 {
  font-size: 1.375rem;
  line-height: 1.2;
  margin: 0;
}

.an-body .match-page-meta {
  color: var(--text-secondary);
}

/* The match-up line over the map: the names in the display face, the score in the site's accent. */
.an-body .results-matchup-name {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  color: var(--text-primary);
}

/* Tables (scoreboard, accuracy): the site's table lines. */
.an-body table th {
  color: var(--text-secondary);
  font-weight: 600;
}

.an-body table td,
.an-body table th {
  border-color: var(--surface-border);
}

/* The map: no dark frame of its own. The toolbar gets a strip of its own above the map (it overlapped the map's
   score and pickup lines), and the map square is scaled to the column width: the widget (map-widget.js applyFit)
   scales .map-layout by the column width over the layout's own width, so the layout is as wide as the map. */
.an-body .match-map-widget,
.an-body .map-widget-root {
  background: transparent;
}

.an-body .match-map-widget {
  padding-top: 52px;
}

/* The map as wide as the page column (the timeline block): the widget scales the map square to its width. */
.an-body .results-map-stack {
  max-width: none;
  margin: 0;
}

.an-body .map-layout {
  width: max-content;
}

/* The lines over the map keep their size when the map is scaled (js/live.js keepHudSize). */
.an-body #map-match-timer,
.an-body #map-lifecycle-banner,
.an-body #map-asset-warning,
.an-body #map-score {
  zoom: var(--an-map-unzoom, 1);
}

/* The site's base styles give every img max-width: 100%; the map's sprites sit in zero-width anchors (the player
   marker, an effect point), so the weapon in hand, projectiles and impacts shrank to 0 px. */
.an-body .map-weapon-icon,
.an-body .map-fx-projectile-sprite,
.an-body .map-fx-impact-sprite {
  max-width: none;
}

/* Replay controls of a finished game in a video player's layout (vendor/analytics-shared.js renderReplayBar): round
   icon buttons without a frame, time "now / length", the speed as a pill, "to the end" at the right. */
.an-body .an-pb {
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--surface-border);
}

.an-pb-side {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.an-pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.an-pb-btn:hover {
  background: var(--surface-border);
}

.an-pb-btn:focus-visible,
.an-pb-speed-select:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.an-pb-icon {
  width: 24px;
  height: 24px;
}

.an-pb-play {
  width: 44px;
  height: 44px;
}

.an-pb-play .an-pb-icon {
  width: 28px;
  height: 28px;
}

.an-pb-play .an-pb-icon-pause,
.an-pb-play.is-playing .an-pb-icon-play {
  display: none;
}

.an-pb-play.is-playing .an-pb-icon-pause {
  display: block;
}

.an-pb-time {
  margin-left: 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-secondary);
}

.an-body .an-pb-time .match-timeline-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.an-pb-speed-select {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--surface-border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font: 600 13px var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.an-pb-speed-select:hover {
  background: var(--surface-border);
}

.an-pb-speed-select option {
  background: var(--surface-raised);
  color: var(--text-primary);
}

/* The engine's own replay bar shows in full screen (vendor/overlay.css .map-replay-speed): its speed select as the
   page's pill above; its options had no colours of their own (light text on the browser's white list). */
.an-body .map-widget-root .map-replay-speed {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--surface-border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font: 600 13px var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.an-body .map-widget-root .map-replay-speed:hover {
  background: var(--surface-border);
}

.an-body .map-widget-root .map-replay-speed:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.an-body .map-widget-root .map-replay-speed option {
  background: var(--surface-raised);
  color: var(--text-primary);
}

.an-status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.an-status--error {
  color: var(--accent-danger);
}

.an-link {
  color: var(--accent-text);
}

.an-hint {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.an-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.an-delay {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-warning);
}

.an-delay--live {
  color: var(--accent-danger);
}

/* The public page has no 3D (no assets were copied), no zoom (the map fits the column), no settings modal opener,
   no calibration. */
.an-body #map-tb-view3d,
.an-body #map-tb-view3d + .map-tb-caret,
.an-body #map-tb-zoom,
.an-body .map-tb-zoom-popover,
.an-body #map-spawns-toggle {
  display: none !important;
}

/* The engine's "no map picture" line can wrap: let the pill grow instead of overlapping its lines. */
.an-body .map-asset-warning {
  height: auto;
  max-width: 90%;
  white-space: normal;
  line-height: 1.35;
  text-align: center;
}

/* Weapons: each player's table is as wide as its columns; the dashboard capped the column at 200px and the left table
   ran under the right one. */
.an-body .ql-ws-player-col {
  max-width: none;
}

/* Drawing over the map (js/draw.js): the pen at the right of the strip above the map, the picker under it, the
   canvas over every map layer. The canvas lets the pointer through unless the pen is on. */
.an-draw {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.an-draw-toggle,
.an-draw-btn,
.an-draw-swatch,
.an-draw-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}

.an-draw-toggle {
  width: 38px;
  height: 38px;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(17, 22, 34, 0.82);
  color: #e6ebf5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.an-draw-toggle svg {
  width: 20px;
  height: 20px;
}

.an-draw-toggle[aria-pressed="true"] {
  background: rgba(94, 160, 255, 0.28);
  border-color: rgba(120, 175, 255, 0.6);
}

.an-draw-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  max-width: min(92vw, 420px);
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(17, 22, 34, 0.9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  color: #e6ebf5;
}

.an-draw-panel[hidden] {
  display: none;
}

.an-draw-colors,
.an-draw-sizes {
  display: flex;
  gap: 4px;
}

.an-draw-swatch {
  width: 24px;
  height: 24px;
  border-color: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
}

.an-draw-size {
  width: 28px;
  height: 28px;
}

.an-draw-size-dot {
  display: block;
  border-radius: 50%;
}

.an-draw-swatch[aria-checked="true"],
.an-draw-size[aria-checked="true"] {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(120, 175, 255, 0.8);
}

.an-draw-btn {
  height: 28px;
  padding: 0 8px;
  border-color: rgba(255, 255, 255, 0.2);
  color: #e6ebf5;
  font-size: 12px;
}

.an-draw-btn:hover,
.an-draw-toggle:hover {
  border-color: rgba(120, 175, 255, 0.6);
}

.an-draw-sep {
  width: 1px;
  height: 20px;
  margin: 0 2px;
  background: rgba(255, 255, 255, 0.14);
}

.an-draw-canvas {
  position: absolute;
  inset: 0;
  z-index: 40;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.an-draw-canvas--on {
  pointer-events: auto;
  cursor: crosshair;
  touch-action: none;
}