/*
   GeneralsRemastered web app — visual parity with the WinUI 3
   Discombobulator launcher (Launcher/GeneralsLauncher). Palette and
   typography are lifted from Themes/ZeroHour.xaml + Shared.xaml so
   the website reads as a sibling to the desktop app.

   Default theme = Zero Hour (sapphire blues). To switch to Classic
   amber, swap the values inside :root.
*/

/* ─── Embedded fonts (mirrors Shared.xaml HeadlineFontFamily etc.) ─── */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/InstrumentSerif-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/InstrumentSerif-Italic.ttf") format("truetype");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InstrumentSans-Variable.ttf") format("truetype-variations"),
       url("/assets/fonts/InstrumentSans-Variable.ttf") format("truetype");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InstrumentSans-Italic-Variable.ttf") format("truetype-variations"),
       url("/assets/fonts/InstrumentSans-Italic-Variable.ttf") format("truetype");
}

/* ─── Palette ──────────────────────────────────────────────────────── */
/*
   Two themes, both lifted verbatim from the WPF launcher:
     :root              → Themes/ZeroHour.xaml (sapphire, default)
     body.theme-classic → Themes/Classic.xaml  (gold "OG Generals")

   Theme is selected per-page by setting ViewData["BodyClass"] in the
   PageModel. The fade-nav script in site.js swaps body.className at
   the midpoint of a hero crossfade so the new colours resolve as the
   new hero element renders.
*/

:root {
  --generals-navy:        #000000;
  --generals-deep-blue:   #0d132d;
  --generals-border-blue: #2c3e78;
  --generals-accent-blue: #5b8def;
  --generals-light-blue:  #9fb8ff;
  --generals-gray:        #7a8290;
  --generals-dark-panel:  #0a0a0e;
  --generals-mid-panel:   #111116;
  --button-bg:            #0d0d12;
  --button-fg:            #f2f2f2;
  --button-secondary-hover-bg: #1a1a24;
  /* Primary button background tracks the theme accent colour so the
     CTA always reads as the dominant action on the page. The previous
     white-on-dark version was indistinguishable from a disabled button. */
  --button-primary-bg:    #5b8def;
  --button-primary-fg:    #0a0f22;
  --button-primary-hover-bg: #7aa8ff;
  --button-primary-pressed-bg: #3f6bcb;
}

body.theme-classic {
  --generals-deep-blue:   #1a1000;
  --generals-border-blue: #6b5520;
  --generals-accent-blue: #c8a84b;
  --generals-light-blue:  #e8cb7a;
  --generals-gray:        #8a8070;
  --generals-dark-panel:  #0e0b04;
  --generals-mid-panel:   #100c02;
  --button-secondary-hover-bg: #1a1500;
  /* Classic primary button: gold accent base, brighter gold on hover,
     dimmer gold on press. */
  --button-primary-bg:    #c8a84b;
  --button-primary-hover-bg: #e6c95a;
  --button-primary-pressed-bg: #a88a30;
}

/* ─── Reset / page chrome ──────────────────────────────────────────── */

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--generals-navy);
  color: #ffffff;
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Opt-in per page: allow the page to scroll when content exceeds the
   viewport. The fixed video backdrop + scrim stay anchored. Pages that
   don't want this (landing, auth forms) keep the default clipped layout. */
body.body-scroll {
  overflow-y: auto;
}
body.body-scroll .hero {
  justify-content: flex-start;
}

/* ─── Layer 1: video backdrop ──────────────────────────────────────── */

.backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* WPF Stretch="UniformToFill" */
  opacity: 0.75;           /* matches MediaElement Opacity="0.75" */
  pointer-events: none;
  z-index: 0;
}

/* ─── Layer 2: dark scrim ──────────────────────────────────────────── */

.scrim {
  position: fixed;
  inset: 0;
  background: #000000;
  opacity: 0.8;            /* matches Rectangle Fill="#000000" Opacity="0.8" */
  pointer-events: none;
  z-index: 1;
}

/* ─── Top-right account button ────────────────────────────────────── */

.top-account-btn {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--generals-border-blue);
  border-radius: 2px;
  color: var(--generals-light-blue);
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}

.top-account-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: var(--generals-accent-blue);
  color: #ffffff;
}

.top-account-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ─── Layer 3: hero block ──────────────────────────────────────────── */

.hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px 120px;   /* bottom padding clears the legal footer */
  text-align: center;
  /*
     Default fade-in animation runs on every fresh render — both initial
     page load and the JS-driven hero swap (when site.js inserts a new
     .hero element it gets this animation automatically). For the
     fade-OUT half, .hero-fading-out below overrides this declaration.
  */
  animation: hero-fade-in 280ms ease both;
}

.hero-fading-out {
  animation: hero-fade-out 280ms ease forwards;
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@keyframes hero-fade-out {
  from { opacity: 1; transform: translateY(0);    }
  to   { opacity: 0; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero-fading-out {
    animation: none;
  }
}

.hero-emblem {
  width: 128px;
  height: 128px;
  margin-bottom: 8px;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.6));
}

/*
   Headline rhythm replicates MainMenuPage.xaml:
   – italic super-title at ~55px
   – hero "GENERALS" at ~130px, pulled up so it tucks into the line above
   – italic accent sub-title at ~55px, also pulled up
*/
.hero-supertitle {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4.5vw, 55px);
  margin: 0;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.hero-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(72px, 12vw, 130px);
  line-height: 1;
  margin: -0.1em 0 0 0;
  color: #ffffff;
  letter-spacing: 0.005em;
}

.hero-subtitle {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4.5vw, 55px);
  margin: -0.3em 0 0 0;
  color: var(--generals-accent-blue);
}

.hero-divider {
  display: block;
  width: 120px;
  height: 1px;
  background: var(--generals-border-blue);
  margin: 28px 0 24px;
}

.hero-tagline {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
  margin: 0 0 32px;
  line-height: 1.5;
}

/* ─── Horizontal button row ────────────────────────────────────────── */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;                  /* matches StackPanel Margin="0,0,12,0" */
}

/*
   Button base — mirrors GeneralsButtonStyle / GeneralsPrimaryButtonStyle.
   Sharp corners (2px radius), Instrument Sans semibold, 240px min width
   to line up with the launcher's Width="240" buttons.
*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 240px;
  padding: 14px 24px;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid var(--generals-border-blue);
  background: var(--button-bg);
  color: var(--button-fg);
  transition: border-color 120ms ease,
              background-color 120ms ease,
              color 120ms ease,
              transform 120ms ease;
  user-select: none;
}

.btn:hover {
  background: var(--button-secondary-hover-bg);
  border-color: var(--generals-accent-blue);
}

.btn:focus-visible {
  outline: none;
  border-color: var(--generals-light-blue);
  box-shadow: 0 0 0 2px rgba(159, 184, 255, 0.25);
}

.btn:active {
  transform: translateY(1px);
}

/* Primary CTA — accent-coloured surface, deep navy type. The accent
   tracks the active theme (gold in Classic, sapphire in Zero Hour) so
   the primary button always reads as the dominant action regardless
   of which palette is loaded. */
.btn-primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  border-color: var(--button-primary-bg);
  font-weight: 700;
  padding: 14px 28px;
}

.btn-primary:hover {
  background: var(--button-primary-hover-bg);
  border-color: var(--button-primary-hover-bg);
  color: var(--button-primary-fg);
}

.btn-primary:active {
  background: var(--button-primary-pressed-bg);
  border-color: var(--button-primary-pressed-bg);
}

.btn-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ─── Layer 4: legal footer ────────────────────────────────────────── */

.legal-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.66);   /* matches Grid Background="#AA000000" */
  padding: 16px 30px;
  pointer-events: none;              /* matches IsHitTestVisible="False" */
  text-align: center;
}

.legal-footer p {
  margin: 0;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);   /* matches Foreground="#80FFFFFF" */
  letter-spacing: 0.02em;
}

/* ─── Responsive trims ─────────────────────────────────────────────── */

@media (max-width: 720px) {
  .hero {
    padding: 48px 20px 140px;
  }
  .hero-emblem {
    width: 96px;
    height: 96px;
  }
  .hero-divider {
    margin: 20px 0 18px;
  }
  .hero-tagline {
    font-size: 13px;
    margin-bottom: 24px;
  }
  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }
  .btn {
    width: 100%;
    min-width: 0;
  }
}

/* ─── Auth / account forms ────────────────────────────────────────── */

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 48px 40px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--generals-border-blue);
  border-radius: 4px;
  text-align: left;
}

.auth-card-wide {
  max-width: 820px;
}

/* Dashboard uses the wide auth-card shell but needs a bit more horizontal
   real estate for the 4-column stats grid to stay legible with money/time
   values. Falls back gracefully via the responsive rules below. */
.auth-card-dashboard {
  max-width: 880px;
  padding: 40px 36px;
}

.auth-title {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--generals-accent-blue);
  margin: 0 0 8px;
}

.auth-subtitle {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--generals-gray);
  margin: 0 0 32px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--generals-light-blue);
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--generals-dark-panel);
  border: 1px solid var(--generals-border-blue);
  border-radius: 2px;
  color: #ffffff;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 120ms ease;
}

.form-input:focus {
  border-color: var(--generals-accent-blue);
}

.form-input::placeholder {
  color: var(--generals-gray);
}

.form-input.input-error {
  border-color: #ff6b6b;
}

.form-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-hint {
  font-size: 11px;
  color: var(--generals-gray);
}

.field-error {
  font-size: 12px;
  color: #ff6b6b;
  min-height: 0;
  overflow: hidden;
  transition: min-height 150ms ease, opacity 150ms ease;
  opacity: 0;
}

.field-error:not(:empty) {
  min-height: 16px;
  opacity: 1;
}

.password-strength {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.password-strength-fill {
  height: 100%;
  width: 0;
  background: #ff6b6b;
  border-radius: 2px;
  transition: width 200ms ease, background 200ms ease;
}

.form-error {
  padding: 10px 14px;
  margin-bottom: 8px;
  background: rgba(200, 50, 50, 0.15);
  border: 1px solid rgba(200, 50, 50, 0.35);
  border-radius: 2px;
  color: #ff6b6b;
  font-size: 13px;
  line-height: 1.4;
  animation: shake 300ms ease;
}

.form-error[hidden] {
  display: none;
}

.btn-loading {
  opacity: 0.7;
  cursor: wait;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.form-success {
  padding: 8px 12px;
  background: rgba(50, 200, 100, 0.15);
  border: 1px solid rgba(50, 200, 100, 0.3);
  border-radius: 2px;
  color: #6bff9b;
  font-size: 13px;
}

/* ─── Color picker ────────────────────────────────────────────────── */

.color-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-picker-input {
  width: 44px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--generals-border-blue);
  border-radius: 2px;
  background: var(--generals-dark-panel);
  cursor: pointer;
}

.color-picker-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker-input::-webkit-color-swatch { border: none; border-radius: 1px; }

.color-hex {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  color: var(--generals-light-blue);
  letter-spacing: 1px;
}

/* ─── Player identity badge (dashboard) ──────────────────────────── */

.player-identity {
  display: flex;
  align-items: center;
  gap: 16px;
}

.player-shader-badge {
  --team-color: #5B8DEF;
  width: 56px;
  height: 56px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid var(--generals-border-blue);
  border-radius: 4px;
  flex-shrink: 0;
}

.player-shader-preview {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--team-color);
  /* Subtle outline so very light team colours (near-white) don't vanish
     against the dark badge backdrop; inner shadow adds depth without
     washing out saturated colours. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    inset 0 0 6px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}

.player-shader-label {
  margin-top: 4px;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--generals-gray);
}

/* ─── Shader picker ──────────────────────────────────────────────── */

.shader-grid {
  --team-color: #5B8DEF;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}

.shader-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid var(--generals-border-blue);
  border-radius: 2px;
  cursor: pointer;
  color: var(--generals-light-blue);
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: border-color 150ms ease, background 150ms ease, transform 100ms ease;
}

.shader-tile:hover:not(:disabled) {
  border-color: var(--generals-accent-blue);
  background: rgba(0, 0, 0, 0.65);
}

.shader-tile.selected {
  border-color: var(--generals-accent-blue);
  background: rgba(91, 141, 239, 0.12);
  color: #ffffff;
}

.shader-tile:active { transform: translateY(1px); }
.shader-tile:disabled { opacity: 0.5; cursor: wait; }

.shader-name {
  font-size: 10px;
  letter-spacing: 1px;
  color: inherit;
}

/* Preview swatch — animated per-effect */
.shader-preview {
  width: 60px;
  height: 36px;
  border-radius: 2px;
  background: var(--team-color);
  position: relative;
  overflow: hidden;
}

/* 0: stock — plain team color, no animation */

/* 1: pulse — scale in/out */
.shader-fx-pulse {
  animation: fx-pulse 1.4s ease-in-out infinite;
}
@keyframes fx-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(0.85); filter: brightness(1.3); }
}

/* 2: rainbow — hue shift */
.shader-fx-rainbow {
  animation: fx-rainbow 3s linear infinite;
}
@keyframes fx-rainbow {
  0%   { filter: hue-rotate(0deg)   saturate(1.3); }
  100% { filter: hue-rotate(360deg) saturate(1.3); }
}

/* 3: shimmer — diagonal sheen sweep */
.shader-fx-shimmer {
  position: relative;
}
.shader-fx-shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.9) 50%, transparent 70%);
  animation: fx-shimmer 1.5s linear infinite;
}
@keyframes fx-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 4: chrome — metallic gradient */
.shader-fx-chrome {
  background: linear-gradient(135deg, #e8ecf0 0%, #6d7a88 50%, #b8c0ca 100%);
  box-shadow: inset 0 0 8px rgba(255,255,255,0.5);
}

/* 5: holographic — rotating gradient */
.shader-fx-holographic {
  background: linear-gradient(45deg, #ff33ff, #33ffff, #ffff33, #33ff99, #ff33ff);
  background-size: 200% 200%;
  animation: fx-holo 3s linear infinite;
}
@keyframes fx-holo {
  0%   { background-position: 0%   0%; }
  100% { background-position: 200% 200%; }
}

/* 6: hex camo — two-tone with diagonal stripes */
.shader-fx-camo {
  background:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,0.25) 0 4px,
      transparent 4px 10px),
    var(--team-color);
}

/* 7: frost — cyan glow */
.shader-fx-frost {
  background: linear-gradient(135deg, #cceeff, #66ccff);
  box-shadow: 0 0 12px rgba(102, 204, 255, 0.8);
}

/* ─── Auth overlay (loading / success screen) ─────────────────────── */

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: overlay-in 300ms ease both;
}

.auth-overlay[hidden] {
  display: none;
}

.auth-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.auth-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--generals-accent-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.auth-overlay-text {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
  color: #ffffff;
}

@keyframes overlay-in {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(12px); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.auth-submit {
  margin-top: 8px;
  width: 100%;
}

.auth-link {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--generals-gray);
}

.auth-link a {
  color: var(--generals-accent-blue);
  text-decoration: none;
}

.auth-link a:hover {
  text-decoration: underline;
}

.form-divider {
  border: none;
  border-top: 1px solid var(--generals-border-blue);
  margin: 32px 0;
}

.form-section-title {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--generals-accent-blue);
  margin: 0 0 16px;
}

/* ─── Settings tabs ──────────────────────────────────────────────── */

.settings-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 24px;
}

.settings-tab {
  flex: 1;
  min-width: 0;
  padding: 12px 8px;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  background: var(--button-bg);
  color: var(--button-fg);
  border: 1px solid var(--generals-border-blue);
  border-radius: 2px;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
  user-select: none;
}

.settings-tab:hover {
  background: var(--button-secondary-hover-bg);
  border-color: var(--generals-accent-blue);
}

.settings-tab:focus-visible {
  outline: none;
  border-color: var(--generals-light-blue);
  box-shadow: 0 0 0 2px rgba(159, 184, 255, 0.25);
}

.settings-tab.active {
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  border-color: var(--button-primary-bg);
  font-weight: 700;
}

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

.tab-panel.active {
  animation: tabFadeIn 150ms ease both;
}

@keyframes tabFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Dashboard ───────────────────────────────────────────────────── */

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.dashboard-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-actions .btn {
  min-width: auto;
  padding: 8px 16px;
  font-size: 11px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 28px;
}

.stats-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stat-card {
  padding: 16px 12px;
  background: var(--generals-dark-panel);
  border: 1px solid var(--generals-border-blue);
  border-radius: 2px;
  text-align: center;
  min-width: 0;                              /* allow shrinking inside grid */
}

.stat-value {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  color: #ffffff;
  overflow-wrap: anywhere;                    /* long numbers don't overflow */
  word-break: break-word;
}

/* Favourite-faction / favourite-unit values are strings rather than
   numbers; drop the font-size a notch so longer labels like
   "USA · Superweapon General" still fit comfortably on one line on
   desktop. */
.stat-value-text {
  font-size: 18px;
  letter-spacing: 0.5px;
}

.stat-label {
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--generals-gray);
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.section-title {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--generals-accent-blue);
  margin: 8px 0 10px;
}

/* ── Stat card with thumbnail ────────────────────────────────────
   Horizontal layout with a 60×48 unit portrait on the left and the
   favorite-unit label/count on the right. Thumb source is PNGs
   extracted from the engine's .tga atlases into /img/thumbs/unit/. */
.stat-card-with-thumb {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  justify-content: flex-start;
}
.stat-card-with-thumb .stat-value,
.stat-card-with-thumb .stat-label {
  text-align: left;
}
.stat-thumb {
  width: 60px;
  height: 48px;
  object-fit: cover;
  border: 1px solid rgba(44, 62, 120, 0.6);
  /* Retain the pixel-art feel — the source portraits are 60×48 */
  image-rendering: pixelated;
  flex: 0 0 auto;
}

/* ── Activity heatmap (GitHub-style) ─────────────────────────────
   53-week × 7-day grid of games played per day. The SVG viewBox
   is fixed at (53 × 13) × (7 × 13) px units; the wrapper scales
   it via max-width so it stays responsive on narrow cards. */
.activity-heatmap {
  margin-bottom: 16px;
  padding: 8px 12px;
  border: 1px solid var(--generals-border-blue, rgba(44, 62, 120, 0.6));
  background: #0a0a0e;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.activity-heatmap-svg {
  display: block;
  width: 100%;
  min-width: 560px;  /* keeps the 53 columns visible on small screens via horizontal scroll */
  max-width: 820px;
  height: auto;
}
.activity-cell { fill: #161b22; }          /* level 0 — no games */
.activity-cell-0 { fill: #161b22; }
.activity-cell-1 { fill: #1f4d1f; }
.activity-cell-2 { fill: #2f6e2f; }
.activity-cell-3 { fill: #3fa03f; }
.activity-cell-4 { fill: #5dd15d; }

.activity-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--generals-gray, #8898b0);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.activity-legend-label { margin: 0 4px; }
.activity-cell-swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
}
.activity-cell-swatch.activity-cell-0 { background: #161b22; }
.activity-cell-swatch.activity-cell-1 { background: #1f4d1f; }
.activity-cell-swatch.activity-cell-2 { background: #2f6e2f; }
.activity-cell-swatch.activity-cell-3 { background: #3fa03f; }
.activity-cell-swatch.activity-cell-4 { background: #5dd15d; }

.recent-games-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 8px;
  /* Faint edge mask hints that horizontal scrolling is available on
     narrow viewports where the table overflows the card. */
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
}

.recent-games-table table {
  width: 100%;
  min-width: 480px;                           /* keeps columns legible on mobile */
  border-collapse: collapse;
  font-size: 13px;
}

.recent-games-table th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--generals-gray);
  border-bottom: 1px solid var(--generals-border-blue);
  white-space: nowrap;
}

.recent-games-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #ccc;
  white-space: nowrap;
}

.recent-games-table td:first-child {
  white-space: normal;                        /* map names may wrap */
  min-width: 120px;
}

.recent-games-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.result-cell {
  font-weight: 600;
}

tr.result-win .result-cell         { color: #6bff9b; }
tr.result-loss .result-cell        { color: #ff6b6b; }
tr.result-draw .result-cell        { color: #ffd76b; }
tr.result-disconnect .result-cell  { color: var(--generals-gray); }
tr.result-unknown .result-cell     { color: var(--generals-gray); }

/* ─── Dashboard responsive ─────────────────────────────────────────── */

@media (max-width: 720px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat-value {
    font-size: 22px;
  }
  .stat-value-text {
    font-size: 15px;
  }
  .dashboard-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-actions {
    width: 100%;
  }
  .dashboard-actions .btn {
    flex: 1;
  }
  .dashboard-actions form {
    flex: 1;
  }
  .dashboard-actions form .btn {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .stats-grid-2 {
    grid-template-columns: 1fr;
  }
  .stat-value {
    font-size: 20px;
  }
  .recent-games-table table {
    font-size: 12px;
  }
  .recent-games-table th,
  .recent-games-table td {
    padding: 6px 8px;
  }
}

/* ─── Docs layout ───────────────────────────────────────────────────
   Two-column reading environment for the blog-style docs engine.
   Everything lives inside a .hero.hero-docs so the fade-nav in site.js
   still replaces the whole docs shell on navigation — the video
   backdrop + legal footer stay mounted across article switches.
*/

.body-docs { overflow-y: auto; }

.hero-docs {
  /* Override the landing-page centered flex layout. */
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "toolbar toolbar"
    "nav     article";
  align-items: stretch;
  justify-content: stretch;
  text-align: left;
  padding: 0;
  min-height: 100vh;
  gap: 0;
  /* Extra tint so long-form text stays legible on top of the video. */
  background: rgba(0, 0, 0, 0.35);
}

/* ── Toolbar ── */

.docs-toolbar {
  grid-area: toolbar;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 32px;
  padding-right: 200px;           /* clear the fixed .top-account-btn */
  background: rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid var(--generals-border-blue);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.docs-brand {
  text-decoration: none;
  color: #ffffff;
  flex-shrink: 0;
}

.docs-brand-mark {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.01em;
  color: var(--generals-accent-blue);
}

.docs-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--generals-gray);
  min-width: 0;
}

.docs-crumb {
  color: var(--generals-gray);
  text-decoration: none;
  transition: color 120ms ease;
}

.docs-crumb:hover { color: var(--generals-light-blue); }

.docs-crumb-current { color: #ffffff; }

.docs-crumb-sep {
  color: var(--generals-border-blue);
  font-weight: 400;
}

/* ── Left nav tree ── */

.docs-nav {
  grid-area: nav;
  background: rgba(0, 0, 0, 0.55);
  border-right: 1px solid var(--generals-border-blue);
  overflow-y: auto;
  max-height: calc(100vh - 1px);   /* toolbar already inside the grid */
  position: sticky;
  top: 0;
  align-self: start;
  padding: 20px 0 80px;             /* bottom clears the legal footer */
}

.docs-nav-drawer > summary { display: none; }     /* desktop: always open */
.docs-nav-inner { padding: 0 20px; }

.docs-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-nav-group { margin-bottom: 6px; }

.docs-nav-group details { margin: 0; }

.docs-nav-section {
  cursor: pointer;
  display: block;
  padding: 8px 10px 8px 0;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--generals-accent-blue);
  list-style: none;
  position: relative;
}

.docs-nav-section::-webkit-details-marker { display: none; }

.docs-nav-section::before {
  content: "▸";
  display: inline-block;
  width: 14px;
  color: var(--generals-border-blue);
  transition: transform 120ms ease;
}

details[open] > .docs-nav-section::before {
  transform: rotate(90deg);
}

/* Nested lists indent under their section summary. */
.docs-nav-group > details > .docs-nav-list {
  padding-left: 14px;
  border-left: 1px solid rgba(44, 62, 120, 0.5);   /* border-blue, softer */
  margin-left: 6px;
}

.docs-nav-leaf { margin: 0; }

.docs-nav-item {
  display: block;
  padding: 6px 10px;
  margin-left: -10px;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 2px 2px 0;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.docs-nav-item:hover {
  color: #ffffff;
  background: rgba(91, 141, 239, 0.08);
}

.docs-nav-item.active {
  color: #ffffff;
  background: rgba(91, 141, 239, 0.15);
  border-left-color: var(--generals-accent-blue);
  font-weight: 600;
}

/* ── Content column ── */

.docs-content {
  grid-area: article;
  padding: 40px 48px 120px;        /* bottom clears the fixed legal footer */
  overflow-x: hidden;
}

.doc-article {
  max-width: 760px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--generals-border-blue);
  border-radius: 2px;
  padding: 40px 48px;
  color: #e8e8ee;
  font-family: "Instrument Sans", system-ui, sans-serif;
}

.doc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--generals-accent-blue);
  margin: 0 0 12px;
}

.doc-meta-label { color: var(--generals-accent-blue); }
.doc-meta-sep { color: var(--generals-border-blue); }
.doc-meta-date { color: var(--generals-gray); }

.doc-title,
.doc-article h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 16px;
  letter-spacing: 0.005em;
}

.doc-lede {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--generals-light-blue);
  margin: 0 0 32px;
}

.doc-body {
  font-size: 15px;
  line-height: 1.65;
  color: #e8e8ee;
}

.doc-body > :first-child { margin-top: 0; }
.doc-body > :last-child { margin-bottom: 0; }

.doc-body h2 {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--generals-accent-blue);
  margin: 40px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--generals-border-blue);
}

.doc-body h3 {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--generals-light-blue);
  margin: 28px 0 10px;
}

.doc-body h4 {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #ffffff;
  margin: 24px 0 8px;
}

.doc-body p {
  margin: 0 0 16px;
}

.doc-body a {
  color: var(--generals-accent-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(91, 141, 239, 0.35);
  transition: color 120ms ease, border-color 120ms ease;
}

.doc-body a:hover {
  color: var(--generals-light-blue);
  border-bottom-color: var(--generals-light-blue);
}

.doc-body ul,
.doc-body ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.doc-body li {
  margin-bottom: 6px;
}

.doc-body li > p { margin: 0; }

.doc-body code {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  padding: 1px 6px;
  background: rgba(91, 141, 239, 0.12);
  color: var(--generals-light-blue);
  border-radius: 2px;
}

.doc-body pre {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--generals-dark-panel);
  border: 1px solid var(--generals-border-blue);
  border-left: 2px solid var(--generals-accent-blue);
  border-radius: 2px;
  overflow-x: auto;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.55;
}

.doc-body pre code {
  background: none;
  color: #e8e8ee;
  padding: 0;
  font-size: inherit;
}

.doc-body blockquote {
  margin: 0 0 20px;
  padding: 4px 20px;
  border-left: 3px solid var(--generals-accent-blue);
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--generals-light-blue);
}

.doc-body blockquote p:last-child { margin-bottom: 0; }

.doc-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 0 0 20px;
}

.doc-body thead th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--generals-gray);
  border-bottom: 1px solid var(--generals-border-blue);
}

.doc-body tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #ccc;
}

.doc-body hr {
  border: none;
  border-top: 1px solid var(--generals-border-blue);
  margin: 32px 0;
}

.doc-body img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}

/* ── Prev/next pager ── */

.doc-prev-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--generals-border-blue);
}

.doc-prev-next .btn {
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 12px 16px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  line-height: 1.3;
  gap: 2px;
}

.doc-prev-next .doc-next { align-items: flex-end; }

.doc-prev-next-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--generals-accent-blue);
}

.doc-prev-next-title {
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Docs home tiles ── */

.doc-article-home { max-width: 960px; }

.docs-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.docs-tile {
  display: block;
  padding: 20px 22px;
  background: var(--generals-dark-panel);
  border: 1px solid var(--generals-border-blue);
  border-radius: 2px;
  text-decoration: none;
  color: #ffffff;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.docs-tile:hover {
  border-color: var(--generals-accent-blue);
  background: var(--button-secondary-hover-bg);
  transform: translateY(-1px);
}

.docs-tile-title {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--generals-accent-blue);
  margin: 0 0 6px;
  border: none;
  padding: 0;
}

.docs-tile-count {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 12px;
  color: var(--generals-gray);
  margin: 0;
}

.docs-tile-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.45;
}

.doc-empty {
  padding: 24px;
  background: var(--generals-dark-panel);
  border: 1px dashed var(--generals-border-blue);
  border-radius: 2px;
  color: var(--generals-gray);
  font-size: 13px;
}

/* ── Top-chrome DOCS link (sibling of .top-account-btn) ── */

.top-docs-btn {
  position: fixed;
  top: 16px;
  right: 180px;                      /* left of .top-account-btn */
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--generals-border-blue);
  border-radius: 2px;
  color: var(--generals-light-blue);
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}

.top-docs-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: var(--generals-accent-blue);
  color: #ffffff;
}

/* ── Responsive: single-column on narrow viewports ── */

@media (max-width: 960px) {
  .hero-docs {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "toolbar"
      "nav"
      "article";
  }

  .docs-toolbar { padding-right: 180px; }

  .docs-nav {
    position: static;
    max-height: none;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--generals-border-blue);
  }

  .docs-nav-drawer > summary {
    display: block;
    cursor: pointer;
    padding: 14px 28px;
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--generals-accent-blue);
  }

  .docs-nav-drawer > summary::-webkit-details-marker { display: none; }
  .docs-nav-drawer > summary::before {
    content: "☰ ";
    color: var(--generals-border-blue);
  }

  .docs-nav-drawer[open] > summary::before { content: "✕ "; }

  .docs-nav-inner { padding: 8px 20px 20px; }

  .docs-content {
    padding: 24px 20px 140px;
  }

  .doc-article {
    padding: 28px 24px;
  }

  .doc-title, .doc-article h1 { font-size: 30px; }
  .doc-lede { font-size: 16px; }

  .doc-prev-next {
    grid-template-columns: 1fr;
  }

  .top-docs-btn {
    right: 170px;
    font-size: 11px;
    padding: 5px 10px;
  }
}

@media (max-width: 560px) {
  .top-docs-btn {
    display: none;                  /* Tight on space — DOCS lives inside toolbar anyway once on /docs */
  }
}

/* ─── Game Details page ──────────────────────────────────────────────
   Per-match stats view at /Games/Details. Reuses the dashboard's
   .auth-card-dashboard shell + .section-title spacing; layers on a
   widened shell, a roster strip, a scoreboard table, dark-themed
   Chart.js containers, and a scrollable chat log.
*/

/* Clickable row affordance on the dashboard's Recent Games table. The
   underlying <tr> still carries the result-* background tint; the
   nested anchor stretches to fill the cell so the hit target matches
   the full row width. */
.recent-games-row { cursor: pointer; }

.recent-games-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.recent-games-link:hover { color: var(--generals-light-blue); }

/* Widen the details shell a touch more than the dashboard so the
   9-column scoreboard and multi-series charts breathe. Falls back
   to auth-card-dashboard's rules at mobile widths. */
.game-details-card {
  max-width: 1080px;
}

.game-details-meta {
  margin-top: 6px;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.8px;
  color: var(--generals-gray);
}

/* ── Player roster ── */

.game-details-players {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin: 0 0 28px;
}

.game-details-player {
  --player-color: #5B8DEF;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--generals-dark-panel);
  border: 1px solid var(--generals-border-blue);
  border-left: 3px solid var(--player-color);
  border-radius: 2px;
}

.game-details-player-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--player-color);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    inset 0 0 4px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}

.game-details-player-body {
  flex: 1;
  min-width: 0;
}

.game-details-player-name {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-details-player-sub {
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--generals-gray);
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.game-details-player-dot { opacity: 0.6; }

.game-details-player-result {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ── Scoreboard table ── */

.game-details-scoreboard {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 28px;
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
}

.game-details-scoreboard table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}

.game-details-scoreboard th {
  text-align: right;
  padding: 8px 10px;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--generals-gray);
  border-bottom: 1px solid var(--generals-border-blue);
  white-space: nowrap;
}

.game-details-scoreboard th:first-child { text-align: left; }

.game-details-scoreboard td {
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #ccc;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.game-details-scoreboard td:first-child {
  text-align: left;
  color: #ffffff;
  font-weight: 500;
}

.scoreboard-player-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scoreboard-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.game-details-scoreboard tr.result-win    td:first-child { color: #6bff9b; }
.game-details-scoreboard tr.result-loss   td:first-child { color: #ff6b6b; }
.game-details-scoreboard tr.result-draw   td:first-child { color: #ffd76b; }

/* ── Chart cards ── */

.chart-card {
  position: relative;
  height: 280px;
  padding: 12px;
  background: var(--generals-dark-panel);
  border: 1px solid var(--generals-border-blue);
  border-radius: 2px;
  margin: 0 0 20px;
}

.chart-card canvas {
  width: 100% !important;
  height: 100% !important;
}

.chart-card-unavailable::after {
  content: "Charts unavailable";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--generals-gray);
}

/* ── Chat log ── */

.game-details-chat {
  max-height: 280px;
  overflow-y: auto;
  padding: 12px 14px;
  background: var(--generals-dark-panel);
  border: 1px solid var(--generals-border-blue);
  border-radius: 2px;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 13px;
  color: #ccc;
}

.game-details-chat-line {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  align-items: baseline;
  flex-wrap: wrap;
}

.game-details-chat-line + .game-details-chat-line {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.game-details-chat-time {
  color: var(--generals-gray);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  min-width: 52px;
}

.game-details-chat-name {
  color: var(--generals-light-blue);
  font-weight: 600;
}

.game-details-chat-text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

@media (max-width: 720px) {
  .chart-card { height: 220px; }
  .game-details-player-name { font-size: 13px; }
  .game-details-scoreboard table { font-size: 12px; }
  .game-details-scoreboard th,
  .game-details-scoreboard td { padding: 6px 8px; }
}