/*
 * Race page themes. Each skin is scoped under body[data-theme="..."] and only
 * overrides what's needed — accent (--gold), background and logo keep coming
 * from branding so the owner's colours still show through. Default theme is
 * the base race.css; no attribute set means default.
 */

/* ---------- 8-bit — chunky pixel arcade ---------- */
body[data-theme="8bit"] {
  --display: "Press Start 2P", "Courier New", monospace;
  --mono: "Press Start 2P", "Courier New", monospace;
  --line: rgba(255, 255, 255, 0.22);
  image-rendering: pixelated;
  text-rendering: optimizeSpeed;
}
body[data-theme="8bit"] {
  background: var(--bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
}
body[data-theme="8bit"] * { letter-spacing: 0 !important; }
body[data-theme="8bit"] h1,
body[data-theme="8bit"] h2,
body[data-theme="8bit"] .lb-owner-name,
body[data-theme="8bit"] .lb-amt,
body[data-theme="8bit"] .lb-place-rank,
body[data-theme="8bit"] .lb-place-wager,
body[data-theme="8bit"] .lb-place-prize,
body[data-theme="8bit"] .lb-tagline,
body[data-theme="8bit"] .lb-button,
body[data-theme="8bit"] .lb-social,
body[data-theme="8bit"] .lb-metric,
body[data-theme="8bit"] .lb-r,
body[data-theme="8bit"] .lb-n {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 400;
}
body[data-theme="8bit"] h1 { font-size: 1.4rem; line-height: 1.3; }
body[data-theme="8bit"] .lb-place,
body[data-theme="8bit"] .lb-table,
body[data-theme="8bit"] .lb-button,
body[data-theme="8bit"] .lb-social,
body[data-theme="8bit"] .lb-metric {
  border-radius: 0 !important;
  border: 2px solid var(--gold) !important;
  box-shadow:
    4px 4px 0 var(--gold-deep, #000),
    inset 0 0 0 2px rgba(0, 0, 0, 0.3) !important;
}
body[data-theme="8bit"] .lb-button {
  background: var(--gold);
  color: #000;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}
body[data-theme="8bit"] .lb-button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--gold-deep, #000) !important; }
body[data-theme="8bit"] .lb-social {
  background: #000;
  border-width: 2px !important;
  box-shadow: 3px 3px 0 var(--gold, #fff) !important;
}
body[data-theme="8bit"] .lb-glow { display: none; }

/* ---------- Terminal — green-on-black CRT ---------- */
body[data-theme="terminal"] {
  --display: "JetBrains Mono", "Courier New", monospace;
  --mono: "JetBrains Mono", "Courier New", monospace;
  --bg: #000000;
  --text: #33ff66;
  --muted: #1f8a3c;
  --line: rgba(51, 255, 102, 0.25);
  background: #000;
  color: var(--text);
  text-shadow: 0 0 3px rgba(51, 255, 102, 0.4);
}
body[data-theme="terminal"] * {
  font-family: var(--mono) !important;
  border-radius: 0 !important;
}
body[data-theme="terminal"]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 3px
  );
  z-index: 100;
  mix-blend-mode: multiply;
}
body[data-theme="terminal"] .lb-glow { display: none; }
body[data-theme="terminal"] .lb-place,
body[data-theme="terminal"] .lb-table,
body[data-theme="terminal"] .lb-metric,
body[data-theme="terminal"] .lb-social,
body[data-theme="terminal"] .lb-button {
  background: #000 !important;
  border: 1px solid var(--text) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 1px rgba(51, 255, 102, 0.08), inset 0 0 20px rgba(51, 255, 102, 0.05) !important;
}
body[data-theme="terminal"] .lb-button {
  text-transform: uppercase;
}
body[data-theme="terminal"] .lb-button::before { content: "> "; }
body[data-theme="terminal"] .lb-social::before { content: "["; }
body[data-theme="terminal"] .lb-social::after { content: "]"; }
body[data-theme="terminal"] h1,
body[data-theme="terminal"] h2,
body[data-theme="terminal"] .lb-amt,
body[data-theme="terminal"] .lb-place-rank,
body[data-theme="terminal"] .lb-owner-name {
  color: var(--text);
}
body[data-theme="terminal"] .lb-top::before {
  content: "$ cat /race/live";
  display: block;
  width: 100%;
  flex-basis: 100%;
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: lowercase;
  order: -1;
}

/* ---------- Minimal — clean light look for a tidy stream ---------- */
body[data-theme="minimal"] {
  --bg: #fafafa;
  --bg-raised: #ffffff;
  --bg-row: #f5f5f5;
  --text: #0b0d12;
  --muted: #6b7280;
  --line: #e5e7eb;
  color-scheme: light;
}
body[data-theme="minimal"] .lb-glow { display: none; }
body[data-theme="minimal"] .lb-place,
body[data-theme="minimal"] .lb-table,
body[data-theme="minimal"] .lb-metric {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03) !important;
  color: var(--text) !important;
}
body[data-theme="minimal"] .lb-social {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
body[data-theme="minimal"] .lb-button {
  background: var(--text) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}
body[data-theme="minimal"] .lb-tagline,
body[data-theme="minimal"] .lb-muted,
body[data-theme="minimal"] .lb-label { color: var(--muted) !important; }

/* ---------- Theme mobile polish ----------
 * Chunky themes (8-bit borders + offset drop-shadows, terminal frames)
 * blow up on phones. Keep the look but shrink type and spacing so a race
 * reads at one glance without horizontal shuffling. */
@media (max-width: 540px) {
  body[data-theme="8bit"] { font-size: 11px; }
  body[data-theme="8bit"] h1 { font-size: 1.05rem; }
  body[data-theme="8bit"] .lb-place,
  body[data-theme="8bit"] .lb-table,
  body[data-theme="8bit"] .lb-button,
  body[data-theme="8bit"] .lb-social,
  body[data-theme="8bit"] .lb-metric {
    border-width: 2px !important;
    box-shadow: 3px 3px 0 var(--gold-deep, #000), inset 0 0 0 2px rgba(0,0,0,0.3) !important;
  }
  body[data-theme="8bit"] .lb-button { padding: 10px 12px !important; }
  body[data-theme="8bit"] .lb-social { padding: 6px 10px !important; min-height: 32px !important; box-shadow: 2px 2px 0 var(--gold, #fff) !important; }

  body[data-theme="terminal"] { font-size: 13px; }
  body[data-theme="terminal"] .lb-top::before { font-size: 0.65rem; }
  body[data-theme="terminal"] .lb-button { padding: 9px 12px !important; }
  body[data-theme="terminal"] .lb-social { padding: 6px 10px !important; min-height: 32px !important; font-size: 0.78rem !important; }

  body[data-theme="minimal"] .lb-social { padding: 7px 12px !important; }
}