/* Webfonts must be imported before any rule or the @import is dropped, so this
   sits at the very top of the file. Barlow Condensed = display/nav/buttons,
   Inter = UI copy, JetBrains Mono = telemetry (ETs, prices, ranks, timers).
   Every one has a system fallback stack in :root, so a private host with no
   internet degrades to the original Arial Narrow / Segoe UI / Consolas look. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

/* ============ 1320 Legends — public site theme ============
   Palette: black background, white text, grey surfaces, red accent. */

:root {
  --bg: #0a0a0b;
  --bg-elevated: #141416;
  --surface: #1c1c1f;
  --surface-2: #232326;
  --border: #333338;
  --text: #f4f4f5;
  --muted: #9a9aa1;
  --red: #e2222c;
  --red-bright: #ff2e3a;
  --red-dim: #6e1015;
  --live: #ff2e3a;
  --font: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Arial Narrow", Impact, var(--font);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  width: min(1180px, 100% - 32px);
  margin-inline: auto;
}

.guide-layout,
.guide-page-layout {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  justify-content: start;
  justify-items: stretch;
}

.guide-page-article {
  min-width: 0;
  width: 100%;
}

.guide-sidebar {
  position: sticky;
  top: 90px;
  padding: 16px 14px;
  justify-self: start;
  width: 100%;
}

.guide-sidebar h2 {
  margin: 0 0 14px;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.guide-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guide-group {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 8px;
}

.guide-group:first-child {
  border-top: none;
  padding-top: 0;
}

.guide-group details {
  border-radius: 10px;
  overflow: hidden;
}

.guide-group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.15s ease, transform 0.15s ease;
}

.guide-group summary::-webkit-details-marker {
  display: none;
}

.guide-group summary::after {
  content: "+";
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--muted);
}

.guide-group details[open] summary::after {
  content: "−";
}

.guide-group summary:hover,
.guide-group summary:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(2px);
}

.group-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(226, 34, 44, 0.12);
  color: var(--red-bright);
  font-size: 0.9rem;
}

.guide-group ul {
  list-style: none;
  padding: 8px 0 4px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.guide-group a {
  display: block;
  padding: 7px 10px 7px 34px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.84rem;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.guide-group a:hover,
.guide-group a:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  transform: translateX(2px);
}

.guide-content {
  display: grid;
  gap: 12px;
}

.guide-panel {
  padding: 18px 20px;
}

.guide-panel h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.18rem;
}

.guide-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.guide-copy-block {
  display: grid;
  gap: 12px;
  margin-bottom: 10px;
}

.guide-diagram-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.racer-central-layout {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.racer-sidebar {
  position: sticky;
  top: 90px;
  padding: 12px 12px 10px;
}

.racer-central-content {
  display: grid;
  gap: 10px;
}

.racer-module {
  padding: 12px 14px;
}

.racer-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.racer-search-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}

.racer-preview {
  margin-top: 12px;
}

.racer-preview-box {
  max-width: 480px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}

.racer-preview-header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.racer-preview-body {
  padding: 16px 14px;
  color: var(--muted);
}

.racer-preview-body p {
  margin: 0 0 10px;
}

.muted-copy {
  color: var(--muted);
  font-style: italic;
}

.email-demo {
  display: grid;
  gap: 18px;
  margin: 12px 0 18px;
}

.email-demo-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 280px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.015);
}

.email-demo-sidebar {
  background: rgba(255,255,255,0.02);
  border-right: 1px solid var(--border);
  padding: 12px 10px;
}

.email-demo-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 6px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.email-demo-list {
  display: grid;
  gap: 8px;
}

.email-thread {
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 10px 10px 9px;
  background: rgba(255,255,255,0.015);
  color: var(--muted);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.email-thread.active {
  border-color: rgba(226, 34, 44, 0.7);
  background: rgba(226, 34, 44, 0.08);
  color: var(--text);
}

.email-thread strong {
  display: block;
  font-size: 0.82rem;
  color: var(--text);
}

.email-thread small {
  display: block;
  font-size: 0.72rem;
  opacity: 0.75;
  margin-top: 2px;
}

.email-demo-main {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.email-demo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.01);
}

.email-demo-toolbar-left,
.email-demo-toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.email-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.email-demo-body {
  padding: 14px;
  display: grid;
  gap: 14px;
}

.email-message-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.8rem;
}

.email-message-meta strong {
  color: var(--text);
}

.email-message {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  padding: 14px;
  color: var(--muted);
  line-height: 1.7;
}

.email-demo-compose {
  border-top: 1px solid var(--border);
  padding: 14px;
  display: grid;
  gap: 10px;
  background: rgba(255,255,255,0.01);
}

.email-field-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: center;
}

.email-field-row label {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.email-field-row input,
.email-field-row textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  color: var(--text);
  padding: 9px 10px;
  font: inherit;
}

.email-field-row textarea {
  min-height: 96px;
  resize: vertical;
}

.email-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.guide-list,
.guide-sub-list {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  line-height: 1.7;
}

.guide-list > li,
.guide-sub-list > li {
  margin-bottom: 8px;
  color: var(--muted);
}

.guide-sub-list {
  margin-top: 8px;
  padding-left: 18px;
}

.guide-note {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid rgba(226, 34, 44, 0.8);
  color: #f7c9ce;
  font-size: 0.9rem;
}

.nested-list {
  margin-top: 8px;
  padding-left: 18px;
}

.mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 5px;
  background: rgba(255,255,255,0.04);
  font-size: 0.78rem;
}

/* ---------- Header / Nav ---------- */
.site-header {
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg));
  border-bottom: 2px solid var(--red-dim);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  flex-wrap: wrap;
}

.leaderboard-filter-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.leaderboard-filter-label {
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.leaderboard-filter {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 220px;
  font: inherit;
}

.brand {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.brand-logo {
  height: 42px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(226, 34, 44, 0.22));
}

.main-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.main-nav a {
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.main-nav a:hover {
  color: var(--text);
  background: var(--surface);
}

.main-nav a.active {
  color: var(--text);
  border-bottom-color: var(--red-bright);
}

.header-actions {
  position: relative;
  z-index: 12;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-discord {
  background: #1e5bff;
  border-color: #1e5bff;
  color: #fff;
}

.btn-discord:hover {
  background: #174fe0;
  border-color: #174fe0;
}

.login-menu {
  position: relative;
  z-index: 200;
}

.login-trigger {
  position: relative;
  z-index: 201;
  padding-inline: 18px;
}

.login-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 190px;
  display: none;
  flex-direction: column;
  background: rgba(20, 20, 22, 0.98);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  z-index: 200;
}

.login-menu:hover .login-menu-panel,
.login-menu:focus-within .login-menu-panel {
  display: flex;
}

.login-menu-panel a {
  padding: 10px 14px;
  color: var(--text);
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.login-menu-panel a:last-child {
  border-bottom: 0;
}

.login-menu-panel a:hover {
  background: var(--surface);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 18px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn:hover { background: var(--surface-2); border-color: #4a4a52; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.btn-primary:hover { background: var(--red-bright); border-color: var(--red-bright); }

.btn-ghost {
  background: transparent;
}

.btn-danger {
  background: transparent;
  border-color: var(--red-dim);
  color: var(--red-bright);
}
.btn-danger:hover { background: var(--red-dim); color: #fff; }

.btn-small { padding: 6px 12px; font-size: 0.75rem; }

/* ---------- Hero ---------- */
.hero {
  padding: 64px 0 40px;
  background:
    radial-gradient(ellipse at top right, rgba(226, 34, 44, 0.18), transparent 55%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}

.hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-logo {
  display: block;
  max-width: min(100%, 900px);
  height: auto;
  margin: 0 auto 18px;
}

.hero p {
  color: var(--muted);
  max-width: 60ch;
  font-size: 1.05rem;
  margin: 0;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Section headings ---------- */
.section {
  padding: 46px 0;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.section-head h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.5rem;
  margin: 0;
  border-left: 4px solid var(--red-bright);
  padding-left: 12px;
}

.section-head .muted-link {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
}
.section-head .muted-link:hover { color: var(--text); }

/* ---------- Cards / grids ---------- */
.grid {
  display: grid;
  gap: 18px;
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.card p { color: var(--muted); margin: 0 0 6px; font-size: 0.92rem; }

.news-card { border-left: 3px solid var(--border); }
.news-card.pinned { border-left-color: var(--red-bright); }

.spotlight-list {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.spotlight-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-left: 4px solid var(--red-bright);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));
}

.spotlight-card .news-meta,
.spotlight-card h4,
.spotlight-card p {
  padding-left: 20px;
  padding-right: 20px;
}

.spotlight-card .news-meta {
  padding-top: 18px;
  margin-bottom: 8px;
}

.spotlight-card h4 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: var(--text);
}

.spotlight-card p {
  padding-bottom: 18px;
  margin: 0;
  line-height: 1.65;
}

.news-image {
  width: 100%;
  max-height: 260px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}

.news-image img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.news-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.pin-badge {
  background: var(--red-dim);
  color: #ffd2d5;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
}

/* ---------- Tournaments ---------- */
.tournament-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tournament-media {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}

.tournament-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tournament-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.tournament-copy {
  flex: 1;
  min-width: 0;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.status-live { background: rgba(255, 46, 58, 0.15); color: var(--live); }
.status-live .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--live);
  animation: pulse 1.4s infinite;
}
.status-upcoming { background: rgba(255,255,255,0.06); color: var(--muted); }
.status-ended { background: rgba(255,255,255,0.04); color: #6b6b70; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,46,58,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(255,46,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,46,58,0); }
}

@font-face {
  font-family: "DigitalClock";
  src: url("/assests/font/digital_clock_2/digital-clock.ttf") format("truetype");
}

.tournament-timer-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.tournament-timer-label {
  color: #f3f3f3;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}

.tournament-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  padding: 10px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(52, 42, 14, 1), rgba(19, 16, 8, 1));
  border: 1px solid rgba(255, 230, 108, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 108, 0.25), 0 0 18px rgba(255, 214, 60, 0.55), 0 0 30px rgba(255, 214, 60, 0.25);
  color: #ffe66d;
  font-family: "DigitalClock", monospace;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 214, 60, 0.95), 0 0 28px rgba(255, 214, 60, 0.55);
}

.tournament-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 10px;
}
.tournament-meta-row strong { color: var(--text); }

/* ---------- Tables (leaderboard / racer central) ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

table.legends-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.legends-table th, .legends-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}

.legends-table th {
  background: var(--bg-elevated);
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.legends-table tbody tr:hover { background: var(--surface-2); }

.rank-cell { font-family: var(--font-display); font-weight: 800; }
.rank-1 { color: #ffd166; }
.rank-2 { color: #d8d8de; }
.rank-3 { color: #cd8b53; }

.leaderboard-rank-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.leaderboard-rank-flag {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.04);
}

.team-tag {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
}

/* ---------- Shop ---------- */
.currency-pill {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.currency-points { background: rgba(255,255,255,0.08); color: #d8d8de; }
.currency-cash { background: rgba(46, 204, 113, 0.15); color: #7ee0a3; }

.shop-cart-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.shop-cart-summary {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
}

.shop-checkout-btn,
.shop-confirm-btn,
.shop-cancel-btn,
.shop-clear-btn,
.shop-close-btn {
  border: none;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

.shop-checkout-btn,
.shop-confirm-btn {
  background: linear-gradient(180deg, var(--red), var(--red-bright));
  color: #fff;
  padding: 10px 16px;
}

.shop-cancel-btn,
.shop-clear-btn {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 10px 16px;
}

.shop-close-btn {
  background: transparent;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 6px;
}

.shop-checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-checkout-modal.hidden {
  display: none;
}

.shop-checkout-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 12, 0.72);
}

.shop-checkout-panel {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 32px));
  background: linear-gradient(180deg, rgba(10,12,18,0.96), rgba(16,18,26,0.98));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

.shop-checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.shop-checkout-header h3 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shop-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.95fr);
  gap: 18px;
}

.shop-checkout-summary,
.shop-checkout-payment-panel {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 18px;
}

.checkout-section-label {
  display: block;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
}

.shop-cart-list {
  display: grid;
  gap: 10px;
  margin-bottom: 0;
}

.checkout-payment-options {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.payment-option:hover {
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}

.payment-option.active {
  border-color: rgba(255, 46, 58, 0.7);
  background: rgba(226, 34, 44, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 46, 58, 0.3);
}

.payment-option strong,
.payment-option small {
  display: block;
}

.payment-option small {
  margin-top: 3px;
  color: var(--muted);
}

.payment-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 900;
  color: var(--text);
}

.payment-option-icon.paypal {
  background: linear-gradient(135deg, #0a4fb5, #5ea5ff);
  border-color: rgba(94, 165, 255, 0.7);
  color: #fff;
  font-weight: 900;
}

.shop-success-wrap {
  display: grid;
  gap: 18px;
  text-align: center;
}

.shop-success-heading {
  display: grid;
  gap: 6px;
}

.shop-success-heading h3 {
  margin: 0;
  font-size: 1.65rem;
}

.shop-success-heading p {
  margin: 0;
  color: var(--muted);
}

.shop-success-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shop-customer-row,
.shop-order-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}

.shop-success-list {
  display: grid;
  gap: 10px;
  text-align: left;
}

.shop-success-row,
.shop-success-total,
.shop-success-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.shop-success-total,
.shop-success-balance {
  color: var(--muted);
}

.shop-success-total strong,
.shop-success-balance strong {
  color: var(--text);
}

.shop-success-btn {
  width: 100%;
}

.shop-discount-box {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.shop-discount-box label {
  margin: 0;
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  font-weight: 800;
  text-transform: uppercase;
}

.shop-discount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.shop-discount-row input {
  min-width: 0;
}

.shop-apply-discount-btn {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border-radius: 8px;
  padding: 0 14px;
  font-weight: 800;
  cursor: pointer;
}

.shop-discount-applied {
  color: #7ee0a3;
  font-size: 0.8rem;
  font-weight: 700;
}

.shop-checkout-totals {
  display: grid;
  gap: 8px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.total-row {
  font-size: 1.05rem;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.total-row strong {
  font-size: 1.2rem;
  color: #fff;
}

.shop-checkout-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 760px) {
  .shop-checkout-layout {
    grid-template-columns: 1fr;
  }

  .shop-checkout-panel {
    padding: 18px 14px;
  }
}

.shop-cart-item,
.shop-cart-total-row,
.shop-wallet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shop-cart-item {
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.shop-cart-item-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shop-cart-item-name small {
  color: var(--muted);
  font-size: 0.72rem;
}

.shop-cart-item-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-qty-btn,
.shop-remove-btn {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}

.shop-qty-btn {
  width: 28px;
  height: 28px;
  font-size: 1.1rem;
  line-height: 1;
}

.shop-qty-input {
  width: 52px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  color: var(--text);
  text-align: center;
  font-weight: 700;
}

.shop-remove-btn {
  padding: 6px 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.shop-cart-total-row,
.shop-wallet-row {
  padding-top: 10px;
  color: var(--muted);
}

.shop-cart-total-row strong,
.shop-wallet-row strong {
  color: var(--text);
}

.shop-wallet-row.negative strong {
  color: #ff9a9a;
}

.shop-success-wrap {
  display: grid;
  gap: 16px;
  text-align: center;
}

.shop-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 204, 113, 0.15);
  color: #7ee0a3;
  font-size: 2rem;
  font-weight: 900;
}

.shop-success-wrap h3 {
  margin: 0;
  font-size: 1.5rem;
}

.shop-success-wrap p {
  margin: 0;
  color: var(--muted);
}

.shop-customer-row,
.shop-order-number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  color: var(--muted);
}

.shop-customer-row strong,
.shop-order-number strong {
  color: var(--text);
}

.shop-success-list {
  display: grid;
  gap: 10px;
  text-align: left;
}

.shop-success-row,
.shop-success-total,
.shop-success-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.shop-success-total,
.shop-success-balance {
  color: var(--muted);
}

.shop-success-total strong,
.shop-success-balance strong {
  color: var(--text);
}

.shop-checkout-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.shop-cat-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}

.shop-cat-tabs button {
  border: 1px solid transparent;
  background: rgba(255,255,255,0.02);
  color: var(--muted);
  padding: 9px 15px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}

.shop-cat-tabs button:hover {
  border-color: rgba(255,255,255,0.12);
  color: var(--text);
}

.shop-cat-tabs button.active {
  background: linear-gradient(180deg, #ff3a3f, #cc1b24);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
  box-shadow: 0 8px 18px rgba(255, 58, 63, 0.25);
}

.shop-item-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

.shop-item-card h3 {
  letter-spacing: 0.02em;
}

.shop-item-card p {
  min-height: 44px;
}

.shop-item-image {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.03);
  padding: 8px;
}

.item-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}

.item-price {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
}

.shop-buy-box {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.shop-buy-box label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shop-buy-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  overflow: hidden;
  min-height: 46px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.dollar-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 46px;
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-weight: 900;
  border-right: 1px solid rgba(255,255,255,0.12);
}

.shop-cash-input {
  width: 100%;
  height: 46px;
  border: none;
  background: transparent;
  color: #f5f7ff;
  font-size: 1.08rem;
  font-weight: 800;
  padding: 0 12px 0 10px;
  outline: none;
  text-align: right;
  letter-spacing: 0.02em;
  appearance: none;
  -moz-appearance: textfield;
}

.shop-cash-input::-webkit-outer-spin-button,
.shop-cash-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.shop-actions {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: 8px;
  margin-top: 12px;
}

.shop-detail-btn,
.shop-buy-btn {
  border: none;
  border-radius: 10px;
  font-weight: 900;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 11px 10px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.shop-detail-btn {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.12);
}

.shop-buy-btn {
  background: linear-gradient(180deg, #ff3a3f, #cc1b24);
  color: #fff;
  box-shadow: 0 8px 18px rgba(255, 58, 63, 0.28);
}

.shop-detail-btn:hover,
.shop-buy-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.shop-buy-btn:hover {
  box-shadow: 0 12px 24px rgba(255, 58, 63, 0.35);
}

.shop-detail-page {
  padding: 32px 0 56px;
}

.shop-detail-card {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  background: rgba(10, 12, 22, 0.76);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}

.shop-detail-image {
  width: 100%;
  height: 100%;
  min-height: 360px;
  max-height: 540px;
  object-fit: contain;
  background: rgba(255,255,255,0.04);
  padding: 18px;
}

.shop-detail-body {
  padding: 28px;
}

.shop-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.shop-detail-price {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.1;
  margin: 14px 0 18px;
}

.shop-detail-desc {
  margin: 0 0 22px;
  color: var(--muted);
  line-height: 1.7;
}

.shop-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.shop-detail-page .shop-buy-btn,
.shop-detail-page .shop-detail-btn {
  width: auto;
  min-width: 150px;
}

.shop-detail-buybox {
  margin-top: 22px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}

.shop-detail-buybox-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.shop-detail-buybox-row label {
  margin: 0;
  color: var(--muted);
}

.shop-detail-qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}

.shop-detail-qty-btn {
  width: 36px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
}

.shop-detail-qty-input {
  width: 60px;
  height: 38px;
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
}

.shop-detail-buybox-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
}

.shop-detail-buybox-total strong {
  color: var(--text);
  font-size: 1.4rem;
}

.shop-detail-primary-btn {
  width: 100%;
  margin: 0;
}

@media (max-width: 760px) {
  .shop-detail-card {
    grid-template-columns: 1fr;
  }

  .shop-detail-page .shop-buy-btn,
  .shop-detail-page .shop-detail-btn {
    width: 100%;
  }
}

.image-preview-box {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  color: var(--muted);
  padding: 8px;
  overflow: hidden;
}

.image-preview-box.has-image {
  border-style: solid;
}

.image-preview-box img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  gap: 14px;
  max-width: 560px;
}

label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}

input, textarea, select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 0.92rem;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--red-bright);
}

textarea { min-height: 120px; resize: vertical; }

.form-note {
  color: var(--muted);
  font-size: 0.85rem;
}

.alert {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-bottom: 16px;
}
.alert-success { background: rgba(46, 204, 113, 0.12); color: #7ee0a3; border: 1px solid rgba(46,204,113,0.3); }
.alert-error { background: rgba(226, 34, 44, 0.12); color: #ff9ba0; border: 1px solid rgba(226,34,44,0.35); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0;
  margin-top: 40px;
  color: var(--muted);
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }

.shop-maintenance-banner {
  grid-column: 1 / -1;
  padding: 22px 24px;
  border: 1px solid rgba(255, 46, 58, 0.5);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(226, 34, 44, 0.14), rgba(14, 16, 22, 0.9));
  box-shadow: 0 18px 40px rgba(226, 34, 44, 0.12);
}

.shop-maintenance-title {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.shop-maintenance-message {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.6;
}

.empty-state {
  color: var(--muted);
  font-style: italic;
  padding: 20px 0;
}

@media (max-width: 640px) {
  .site-header-inner { justify-content: center; text-align: center; }
  .main-nav { justify-content: center; width: 100%; }
}

/* ============================================================================
   LEGENDS THEME LAYER
   ----------------------------------------------------------------------------
   Restyles the v3 bundle in the language of the original site (site/index.html
   + assets/index-H5Cgou69.css): deep-black-to-crimson grounds, condensed
   uppercase display type with heavy shadow, letter-spaced "eyebrow" labels,
   red gradient panel headers, an orange-to-amber clipped CTA, and mono numerals
   for anything telemetric (ETs, prices, ranks).

   Appended rather than rewritten on purpose: every selector below already
   exists above, so the bundle's markup and all JS-generated HTML keep working
   untouched. Tokens are the old site's :root, verbatim.
   ========================================================================== */

:root {
  /* legacy palette */
  --black: #030100;
  --black-2: #090403;
  --deep-red: #350604;
  --red: #ff2a1f;
  --red-2: #9b100b;
  --orange: #ff8700;
  --amber: #ffb02e;
  --green: #9cff35;

  --bg: var(--black);
  --bg-elevated: #0d0706;
  --surface: #0f0807;
  --surface-2: #150b09;
  --border: #ffffff1f;
  --line-red: #ff2a1f6b;
  --text: #fff7ef;
  --muted: #b8a39b;
  --dim: #77625c;
  --red-bright: #ff4a3a;
  --red-dim: #5f0605;
  --live: var(--red);
  --panel: #0d0706e6;
  --shadow: 0 32px 90px #00000094;

  --font: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Arial Narrow", "Roboto Condensed", Impact, Haettenschweiler, sans-serif;
  --font-telemetry: "Cascadia Mono", "Roboto Mono", Consolas, "Courier New", monospace;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---- ground: red bloom + vignette + scanlines ---------------------------- */
body {
  background:
    radial-gradient(1200px 620px at 50% -6%, #5f060542 0%, transparent 62%),
    radial-gradient(900px 500px at 88% 12%, #9b100b2e 0%, transparent 60%),
    radial-gradient(760px 520px at 6% 34%, #35060499 0%, transparent 64%),
    var(--black);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
body::before {   /* CRT scanlines, very low contrast */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(to bottom, #ffffff07 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
body > * { position: relative; z-index: 1; }

::selection { background: var(--red); color: #fff; }

/* ---- header -------------------------------------------------------------- */
.site-header {
  background: linear-gradient(180deg, #0a0403f2, #06020199);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-red);
  box-shadow: 0 1px 0 #ffffff0f, 0 18px 50px #000000a6;
}
.main-nav a {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding-bottom: 4px;
  transition: color .18s var(--ease);
}
.main-nav a:hover { color: var(--text); }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, var(--red), var(--orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
  box-shadow: 0 0 14px #ff2a1fcc;
}
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active { color: var(--text); }
.brand-logo { filter: drop-shadow(0 4px 18px #ff2a1f5c); }

/* ---- buttons ------------------------------------------------------------- */
.btn {
  font-family: var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #1a0f0d, #0c0605);
  color: var(--text);
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* the old site's angled orange CTA */
.btn-primary, .shop-buy-btn, .shop-detail-primary-btn, .shop-confirm-btn, .shop-success-btn {
  background: linear-gradient(100deg, var(--red-2) 0%, var(--orange) 45%, var(--amber) 100%);
  border: none;
  color: #1a0b00;
  font-weight: 800;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow: 0 10px 30px #ff870040, inset 0 1px 0 #ffffff5c;
  text-shadow: none;
}
.btn-primary:hover, .shop-buy-btn:hover, .shop-detail-primary-btn:hover, .shop-confirm-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 14px 40px #ff870066, inset 0 1px 0 #ffffff70;
}
.btn-ghost, .shop-detail-btn {
  background: #ffffff08;
  border: 1px solid var(--line-red);
  color: var(--text);
}
.btn-ghost:hover, .shop-detail-btn:hover { background: #ff2a1f1f; border-color: var(--red); }
.btn-discord {
  background: linear-gradient(100deg, #4752c4 0%, #5865f2 45%, #7289da 100%);
  border: none;
  color: #fff;
  font-weight: 800;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow: 0 10px 30px #5865f240, inset 0 1px 0 #ffffff5c;
  text-shadow: none;
}
.btn-discord:hover {
  filter: brightness(1.1);
  box-shadow: 0 14px 40px #5865f266, inset 0 1px 0 #ffffff70;
}

/* ---- hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  border-bottom: 1px solid var(--line-red);
  background:
    radial-gradient(760px 420px at 50% 8%, #ff2a1f24, transparent 66%),
    linear-gradient(180deg, #1b0402 0%, #0a0201 72%, var(--black) 100%);
  overflow: hidden;
}
.hero::after {   /* asphalt streak */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--red), var(--orange), var(--red), transparent);
  opacity: .8;
}
.hero h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .94;
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  text-shadow: 0 4px 0 #00000059, 0 18px 60px #ff2a1f4d;
}
.hero p { color: var(--muted); font-size: 1.06rem; }
.hero-logo { filter: drop-shadow(0 18px 46px #ff2a1f59); }

/* ---- section heads: eyebrow + display ------------------------------------ */
.section-head h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  text-shadow: 0 3px 0 #0000004d;
  border-left: 4px solid var(--red);
  padding-left: 14px;
  box-shadow: -4px 0 20px -4px #ff2a1fa6;
}
.section-head .muted-link {
  font-family: var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
}
.section-head .muted-link:hover { color: var(--orange); }

/* ---- cards / panels ------------------------------------------------------ */
.card, .guide-panel, .racer-module, .tournament-card, .news-card, .spotlight-card, .shop-item-card {
  position: relative;
  background: linear-gradient(180deg, #14090799 0%, #0a04039e 100%);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 18px 50px #00000080;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.card::before, .tournament-card::before, .shop-item-card::before, .spotlight-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-red), transparent);
}
.card:hover, .tournament-card:hover, .shop-item-card:hover, .spotlight-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-red);
  box-shadow: 0 26px 64px #000000a6, 0 0 0 1px #ff2a1f2e;
}
.card h3, .guide-panel h3, .shop-item-card h3, .spotlight-card h4, .news-card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.news-card.pinned { border-color: var(--line-red); box-shadow: 0 0 0 1px #ff2a1f33, 0 22px 58px #000000a6; }
.pin-badge {
  background: linear-gradient(100deg, var(--red-2), var(--red));
  color: #fff;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-family: var(--font-display);
  box-shadow: 0 0 18px #ff2a1f66;
}
.news-meta, .spotlight-card .news-meta {
  font-family: var(--font-telemetry);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  font-size: .74rem;
}

/* ---- tournaments --------------------------------------------------------- */
.tournament-media { background: radial-gradient(circle at 50% 40%, #ff2a1f1f, transparent 70%); }
.tournament-media img { filter: drop-shadow(0 10px 26px #00000099); }
.status-badge {
  font-family: var(--font-display);
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 2px;
}
.status-live {
  background: linear-gradient(100deg, #6b0a06, #ff2a1f);
  color: #fff;
  box-shadow: 0 0 22px #ff2a1f73;
  animation: legends-pulse 2.2s ease-in-out infinite;
}
@keyframes legends-pulse {
  0%, 100% { box-shadow: 0 0 18px #ff2a1f59; }
  50%      { box-shadow: 0 0 30px #ff2a1fab; }
}
.status-upcoming { background: #ffb02e1f; color: var(--amber); border: 1px solid #ffb02e4d; }
.status-ended { background: #ffffff0f; color: var(--dim); border: 1px solid var(--border); }
.tournament-timer {
  font-family: var(--font-telemetry);
  color: var(--amber);
  letter-spacing: .08em;
  text-shadow: 0 0 22px #ffb02e8c;
}
.tournament-timer-label, .checkout-section-label, .shop-buy-box label {
  font-family: var(--font-display);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
}
.tournament-meta-row strong { color: var(--amber); font-family: var(--font-telemetry); }

/* ---- tables -------------------------------------------------------------- */
.table-wrap { border: 1px solid var(--border); border-radius: 3px; overflow: hidden; background: #0a0403a6; }
.legends-table th {
  font-family: var(--font-display);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  background: linear-gradient(180deg, #1c0a08, #0c0504);
  border-bottom: 1px solid var(--line-red);
}
.legends-table td { border-bottom: 1px solid #ffffff0f; }
.legends-table tbody tr { transition: background .16s var(--ease); }
.legends-table tbody tr:hover { background: #ff2a1f12; }
.legends-table td:nth-child(n+3) { font-family: var(--font-telemetry); }
.rank-cell { font-family: var(--font-display); letter-spacing: .06em; }
.rank-1 { color: var(--amber); text-shadow: 0 0 20px #ffb02e8c; }
.rank-2 { color: #d9d9e3; text-shadow: 0 0 16px #ffffff59; }
.rank-3 { color: var(--orange); text-shadow: 0 0 16px #ff870073; }
.team-tag {
  font-family: var(--font-telemetry);
  letter-spacing: .06em;
  background: #ff2a1f14;
  border: 1px solid #ff2a1f3d;
  color: #ffb9b2;
  border-radius: 2px;
}
.leaderboard-rank-flag { filter: drop-shadow(0 0 8px #ff2a1f73); }

/* ---- shop ---------------------------------------------------------------- */
.shop-cat-tabs button {
  font-family: var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: #ffffff08;
  color: var(--muted);
  transition: all .18s var(--ease);
}
.shop-cat-tabs button:hover { color: var(--text); border-color: var(--line-red); }
.shop-cat-tabs button.active {
  background: linear-gradient(100deg, var(--red-2), var(--red));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 22px #ff2a1f5c;
}
.shop-item-image { filter: drop-shadow(0 12px 28px #000000a6); }
.shop-cash-input, .shop-detail-price, .item-price, .shop-detail-buybox-total strong {
  font-family: var(--font-telemetry);
  color: var(--amber);
}
.dollar-sign { color: var(--amber); font-family: var(--font-telemetry); }
.shop-cart-bar {
  background: linear-gradient(180deg, #14090799, #0a0403cc);
  border: 1px solid var(--line-red);
  border-radius: 3px;
  font-family: var(--font-telemetry);
}
.currency-points { background: #ffb02e1f; color: var(--amber); border: 1px solid #ffb02e4d; }
.currency-cash { background: #9cff351f; color: var(--green); border: 1px solid #9cff354d; }

/* ---- guide / racer central ----------------------------------------------- */
.guide-sidebar h2, .racer-sidebar h2 {
  font-family: var(--font-display);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text);
}
.guide-group summary {
  font-family: var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.guide-group a { color: var(--muted); border-left: 2px solid transparent; transition: all .16s var(--ease); }
.guide-group a:hover { color: var(--text); border-left-color: var(--red); background: #ff2a1f0f; }
.guide-group a.active { color: var(--red); border-left-color: var(--red); }

/* ---- forms / misc -------------------------------------------------------- */
input, select, textarea {
  background: #0a0403;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 2px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px #ff2a1f26;
}
.alert-success { background: #9cff3514; border: 1px solid #9cff354d; color: var(--green); }
.alert-error { background: #ff2a1f14; border: 1px solid var(--line-red); color: #ff8b80; }
.empty-state { color: var(--dim); font-family: var(--font-telemetry); letter-spacing: .06em; }
.muted-copy, .form-note { color: var(--muted); }

.site-footer {
  border-top: 1px solid var(--line-red);
  background: linear-gradient(180deg, transparent, #0a0403);
  font-family: var(--font-telemetry);
  letter-spacing: .06em;
  color: var(--dim);
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--red); }

.shop-maintenance-banner {
  background: linear-gradient(100deg, #2a0705, #150403);
  border: 1px solid var(--line-red);
  box-shadow: 0 0 0 1px #ff2a1f26, 0 18px 50px #000000a6;
}
.shop-maintenance-title {
  font-family: var(--font-display);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}

/* ---- status ticker (injected by js/site.js renderChrome) ------------------ */
.legends-ticker {
  background: linear-gradient(90deg, #2a0705, #0a0201 45%, #2a0705);
  border-bottom: 1px solid var(--line-red);
  overflow: hidden;
  font-family: var(--font-display);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .76rem;
  color: #ffbdb6;
}
.legends-ticker-track {
  display: flex;
  gap: 2.6rem;
  padding: 7px 0;
  white-space: nowrap;
  width: max-content;
  animation: legends-ticker 34s linear infinite;
}
.legends-ticker-track span { display: inline-flex; align-items: center; gap: .6rem; }
.legends-ticker-track span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
}
@keyframes legends-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .status-live { animation: none; }
  .legends-ticker-track { animation: none; }
  .card, .tournament-card, .shop-item-card, .spotlight-card, .btn { transition: none; }
}

/* hero headline: the display face is condensed, so the original clamp ran far too
   large and pushed everything below the fold. Cap it and hold it to a measure. */
.hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}
.hero .container { padding-top: 2.6rem; padding-bottom: 2.6rem; }
.hero-logo { max-width: min(320px, 62vw); }

/* Every page hero is <h2>Page name</h2> + <h1>Headline</h1>. Render that h2 as the
   old site's red letter-spaced eyebrow instead of a second, competing heading. */
.hero h2 {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 .7rem;
  text-shadow: 0 0 22px #ff2a1f73;
}

/* Phone: the wide display tracking that reads well on desktop turns the nav into
   five stacked rows, so tighten tracking and scale the hero down with it. */
@media (max-width: 640px) {
  .main-nav a { font-size: .92rem; letter-spacing: .08em; }
  .hero h1 { font-size: clamp(1.7rem, 8.2vw, 2.3rem); max-width: 16ch; }
  .hero h2 { letter-spacing: .24em; font-size: .72rem; }
  .hero .container { padding-top: 1.8rem; padding-bottom: 1.8rem; }
  .hero-logo { max-width: 56vw; }
  .legends-ticker { font-size: .66rem; letter-spacing: .14em; }
  .section-head h2 { font-size: 1.5rem; padding-left: 10px; }
  .btn { letter-spacing: .1em; }
}

/* ============================================================================
   ANIMATED HERO (home only — .hero.hero-animated)
   ----------------------------------------------------------------------------
   A drag strip receding to a vanishing point with scrolling lane dashes, the
   christmas tree running its real sequence (pre-stage, stage, three ambers on
   a 0.4s cadence, then green), and two speed streaks across the frame.

   Everything here is decorative and lives in .hero-stage, which is aria-hidden
   and carries no IDs, so home.js keeps addressing #page-hero-* exactly as
   before. Pointer events are off so the CTAs stay clickable. The whole thing
   is switched off under prefers-reduced-motion at the bottom of this block.
   ========================================================================== */

.hero-animated { isolation: isolate; }

.hero-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-animated .container { position: relative; z-index: 2; }

/* ---- the strip: a plane tilted away to a vanishing point ------------------ */
.hero-strip {
  position: absolute;
  left: 50%;
  bottom: -14%;
  width: 190%;
  height: 78%;
  transform: translateX(-50%) perspective(420px) rotateX(64deg);
  transform-origin: 50% 100%;
  background:
    linear-gradient(180deg, transparent 0%, #12080699 34%, #180a07 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 82%, transparent 100%);
}

/* centre lane dashes, scrolling toward the viewer */
.hero-strip-lanes {
  position: absolute;
  inset: 0;
  background-image:
    /* centre dashes */
    repeating-linear-gradient(180deg, #ffb02e99 0 42px, transparent 42px 104px),
    /* outer guide rails */
    linear-gradient(90deg, transparent 17%, #ff2a1f3d 17.4%, transparent 17.8%),
    linear-gradient(90deg, transparent 82.2%, #ff2a1f3d 82.6%, transparent 83%);
  background-size: 9px 104px, 100% 100%, 100% 100%;
  background-position: 50% 0, 0 0, 0 0;
  background-repeat: repeat-y, no-repeat, no-repeat;
  animation: hero-strip-run 1.15s linear infinite;
}
@keyframes hero-strip-run {
  from { background-position: 50% 0, 0 0, 0 0; }
  to   { background-position: 50% 104px, 0 0, 0 0; }
}

/* ---- speed streaks ------------------------------------------------------- */
.hero-streaks { position: absolute; inset: 0; }
.hero-streaks span {
  position: absolute;
  left: -30%;
  height: 2px;
  width: 30%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ff2a1f00 10%, var(--red), #ffb02e, transparent);
  filter: blur(.4px);
  opacity: 0;
  animation: hero-streak 4.8s linear infinite;
}
.hero-streaks span:nth-child(1) { top: 24%; animation-delay: .2s; }
.hero-streaks span:nth-child(2) { top: 58%; width: 22%; animation-delay: 2.1s; }
.hero-streaks span:nth-child(3) { top: 79%; width: 38%; animation-delay: 3.4s; }
@keyframes hero-streak {
  0%       { transform: translateX(0) scaleX(.6); opacity: 0; }
  8%       { opacity: .85; }
  34%      { opacity: .85; }
  48%, 100%{ transform: translateX(460%) scaleX(1.5); opacity: 0; }
}

/* ---- christmas tree ------------------------------------------------------ */
.hero-tree {
  position: absolute;
  top: 50%;
  right: clamp(18px, 6vw, 96px);
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
  padding: 16px 13px;
  border: 1px solid #ffffff1a;
  border-radius: 4px;
  background: linear-gradient(180deg, #0b0504e6, #05020199);
  box-shadow: 0 22px 60px #000000a6, inset 0 1px 0 #ffffff12;
}
.hero-bulb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1c1210;
  box-shadow: inset 0 1px 2px #00000099;
  animation: hero-bulb 5.4s linear infinite;
}
/* the real tree order: pre-stage + stage, then three ambers .4s apart, then green */
.bulb-pre   { --bulb: #fff2d2; animation-delay: 0s;   }
.bulb-stage { --bulb: #fff2d2; animation-delay: .3s;  }
.bulb-a1    { --bulb: #ff8700; animation-delay: 1.5s; }
.bulb-a2    { --bulb: #ff8700; animation-delay: 1.9s; }
.bulb-a3    { --bulb: #ff8700; animation-delay: 2.3s; }
.bulb-go    { --bulb: #9cff35; animation-delay: 2.7s; animation-name: hero-bulb-go; }

@keyframes hero-bulb {
  0%, 3%    { background: #1c1210; box-shadow: inset 0 1px 2px #00000099; }
  6%, 28%   { background: var(--bulb); box-shadow: 0 0 18px var(--bulb), 0 0 34px var(--bulb), inset 0 0 4px #ffffffcc; }
  32%, 100% { background: #1c1210; box-shadow: inset 0 1px 2px #00000099; }
}
/* green holds longer, like a real launch */
@keyframes hero-bulb-go {
  0%, 3%    { background: #1c1210; box-shadow: inset 0 1px 2px #00000099; }
  6%, 40%   { background: var(--bulb); box-shadow: 0 0 22px var(--bulb), 0 0 46px var(--bulb), inset 0 0 4px #ffffffcc; }
  46%, 100% { background: #1c1210; box-shadow: inset 0 1px 2px #00000099; }
}

/* the whole hero flashes faintly green on the launch beat */
.hero-animated::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(760px 300px at 78% 50%, #9cff3521, transparent 70%);
  opacity: 0;
  animation: hero-launch 5.4s linear infinite;
  animation-delay: 2.7s;
}
@keyframes hero-launch {
  0%, 5%   { opacity: 0; }
  8%, 30%  { opacity: 1; }
  44%, 100%{ opacity: 0; }
}

/* ---- content entrance ---------------------------------------------------- */
.hero-animated .container > * {
  animation: hero-rise .7s cubic-bezier(.2, .7, .3, 1) backwards;
}
.hero-animated .hero-logo      { animation-delay: .05s; }
.hero-animated h2              { animation-delay: .14s; }
.hero-animated h1              { animation-delay: .2s;  }
.hero-animated p               { animation-delay: .3s;  }
.hero-animated .hero-actions   { animation-delay: .4s;  }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* logo idle float + heat glow */
.hero-animated .hero-logo {
  animation: hero-rise .7s cubic-bezier(.2, .7, .3, 1) backwards,
             hero-float 6s ease-in-out 1s infinite;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0);     filter: drop-shadow(0 18px 46px #ff2a1f59); }
  50%      { transform: translateY(-7px);  filter: drop-shadow(0 26px 58px #ff2a1f8c); }
}

/* the bottom edge streak sweeps rather than sitting static */
.hero-animated::after {
  background: linear-gradient(90deg, transparent, var(--red), var(--orange), var(--amber), var(--red), transparent);
  background-size: 220% 100%;
  animation: hero-edge 3.2s linear infinite;
}
@keyframes hero-edge {
  from { background-position: 200% 0; }
  to   { background-position: 0 0; }
}

/* ---- phones: keep the tree, drop the busier layers ----------------------- */
@media (max-width: 640px) {
  .hero-tree { right: 10px; gap: 8px; padding: 11px 9px; transform: translateY(-50%) scale(.82); }
  .hero-streaks { display: none; }
}

/* ---- motion safety ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-strip-lanes,
  .hero-streaks span,
  .hero-bulb,
  .hero-animated::before,
  .hero-animated::after,
  .hero-animated .container > *,
  .hero-animated .hero-logo {
    animation: none;
  }
  .hero-streaks { display: none; }
  /* leave the tree lit on green rather than dark and meaningless */
  .bulb-go { background: #9cff35; box-shadow: 0 0 22px #9cff35, 0 0 46px #9cff35; }
}

/* The first pass put transform-origin at the bottom with a short perspective, which
   flattened the strip to a ~110px sliver pinned to the hero's bottom edge. Longer
   perspective + a shallower tilt keeps the recede but leaves it actually visible. */
.hero-animated .hero-strip {
  bottom: 0;
  height: 62%;
  width: 240%;
  transform: translateX(-50%) perspective(900px) rotateX(72deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 88%, transparent 100%);
}
.hero-animated .hero-strip-lanes {
  background-image:
    repeating-linear-gradient(180deg, #ffb02ecc 0 54px, transparent 54px 128px),
    linear-gradient(90deg, transparent 16.6%, #ff2a1f5c 17.2%, transparent 17.8%),
    linear-gradient(90deg, transparent 82.2%, #ff2a1f5c 82.8%, transparent 83.4%);
  background-size: 14px 128px, 100% 100%, 100% 100%;
}
@keyframes hero-strip-run {
  from { background-position: 50% 0, 0 0, 0 0; }
  to   { background-position: 50% 128px, 0 0, 0 0; }
}

/* rotateX(72deg) is near edge-on: cos(72) flattens a 446px plane to ~94px, so the
   dashes never read. 56deg keeps the recede while leaving real surface area. */
.hero-animated .hero-strip {
  height: 72%;
  transform: translateX(-50%) perspective(1100px) rotateX(56deg);
  opacity: .9;
}

/* A single centre dash column runs straight up through the headline. Two dashed
   lanes flanking the copy read as an actual strip and leave the text alone. */
.hero-animated .hero-strip-lanes {
  background-image:
    repeating-linear-gradient(180deg, #ffb02ecc 0 54px, transparent 54px 128px),
    repeating-linear-gradient(180deg, #ffb02ecc 0 54px, transparent 54px 128px),
    linear-gradient(90deg, transparent 15.6%, #ff2a1f66 16.4%, transparent 17.2%),
    linear-gradient(90deg, transparent 82.8%, #ff2a1f66 83.6%, transparent 84.4%);
  background-size: 13px 128px, 13px 128px, 100% 100%, 100% 100%;
  background-position: 33% 0, 67% 0, 0 0, 0 0;
  background-repeat: repeat-y, repeat-y, no-repeat, no-repeat;
}
@keyframes hero-strip-run {
  from { background-position: 33% 0,     67% 0,     0 0, 0 0; }
  to   { background-position: 33% 128px, 67% 128px, 0 0, 0 0; }
}

/* On a phone the vertically-centred tree lands on top of the headline. Drop it to
   the bottom-right corner, clear of the copy. */
@media (max-width: 640px) {
  .hero-animated .hero-tree {
    top: auto;
    bottom: 14px;
    right: 12px;
    transform: scale(.74);
    transform-origin: 100% 100%;
    opacity: .92;
  }
}

/* ============================================================================
   TYPOGRAPHY
   ----------------------------------------------------------------------------
   Three faces, one job each:
     display   Barlow Condensed  — headings, nav, buttons, table headers, badges
     ui        Inter             — body copy, form controls
     telemetry JetBrains Mono    — anything numeric the reader compares: ETs,
                                   prices, ranks, counts, timers
   Plus the digital-clock face already bundled at site/assests/font (local, so
   it works with no internet) for the tournament countdown, where a 7-segment
   look is the point.

   Each var keeps the previous system stack as its fallback, so if the webfonts
   fail to load the page degrades to exactly what it rendered before.
   ========================================================================== */

/* Bundled with the site bundle already — see its license.txt beside the file. */
@font-face {
  font-family: "Legends Digital";
  src: url("/assests/font/digital_clock_2/digital-clock.ttf") format("truetype");
  font-display: swap;
}

:root {
  --font: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --font-telemetry: "JetBrains Mono", "Cascadia Mono", "Roboto Mono", Consolas, "Courier New", monospace;
  --font-digital: "Legends Digital", var(--font-telemetry);
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .005em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Barlow Condensed is a true condensed face, so it needs LESS tracking than the
   faux-narrow system stack did, and it can run tighter leading without collision. */
h1, h2, h3, h4,
.hero h1, .section-head h2, .card h3, .news-card h3, .shop-item-card h3, .spotlight-card h4,
.guide-panel h3, .main-nav a, .btn, .legends-table th, .status-badge, .pin-badge,
.shop-cat-tabs button, .guide-sidebar h2, .racer-sidebar h2, .guide-group summary {
  font-family: var(--font-display);
  font-feature-settings: "kern" 1, "liga" 1;
}

/* ---- the hero headline --------------------------------------------------- */
.hero h1 {
  font-weight: 800;
  font-size: clamp(2.3rem, 5vw, 4.1rem);
  line-height: .92;
  letter-spacing: -.005em;   /* large condensed type needs negative tracking */
  max-width: 17ch;
  text-wrap: balance;        /* even line lengths instead of a short last line */
  margin-left: auto;
  margin-right: auto;
}
.hero h2 {                   /* the eyebrow */
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .36em;
}
.hero p {
  font-family: var(--font);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.55;
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

/* ---- section + card headings --------------------------------------------- */
.section-head h2 {
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  letter-spacing: .012em;
}
.card h3, .news-card h3, .shop-item-card h3, .guide-panel h3 {
  font-weight: 700;
  font-size: 1.16rem;
  line-height: 1.16;
  letter-spacing: .022em;
}
.spotlight-card h4 { font-weight: 700; font-size: 1.05rem; line-height: 1.2; letter-spacing: .024em; }
.card p, .news-card p, .shop-item-card p, .spotlight-card p, .guide-panel p {
  font-family: var(--font);
  font-size: .93rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---- nav / buttons / tabs ------------------------------------------------- */
.main-nav a { font-weight: 600; font-size: 1rem; letter-spacing: .13em; }
.btn { font-weight: 700; font-size: .92rem; letter-spacing: .12em; }
.btn-small { font-size: .82rem; }
.shop-cat-tabs button { font-weight: 600; font-size: .88rem; letter-spacing: .12em; }
.status-badge, .pin-badge { font-weight: 700; font-size: .68rem; letter-spacing: .16em; }

/* ---- tables: tabular figures so columns line up -------------------------- */
.legends-table th { font-weight: 600; font-size: .78rem; letter-spacing: .14em; }
.legends-table td {
  font-size: .94rem;
  font-variant-numeric: tabular-nums;
}
.legends-table td:nth-child(n+3) {
  font-family: var(--font-telemetry);
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.rank-cell { font-weight: 700; font-size: 1rem; }
.team-tag { font-size: .74rem; letter-spacing: .04em; }

/* ---- telemetry: everything numeric the reader compares ------------------- */
.shop-cash-input, .item-price, .shop-detail-price, .shop-detail-buybox-total strong,
.shop-cart-bar, .tournament-meta-row strong, .news-meta, .empty-state, .site-footer {
  font-variant-numeric: tabular-nums;
}
.item-price, .shop-detail-price { font-weight: 700; }
.shop-cash-input { font-weight: 700; font-size: 1.05rem; }

/* the countdown gets the bundled 7-segment face — this is the one place a
   display-clock look actually reads as information, not decoration */
.tournament-timer {
  font-family: var(--font-digital);
  font-size: 1.45rem;
  letter-spacing: .06em;
}

/* ---- guide / long-form copy ---------------------------------------------- */
.guide-page-article p, .guide-copy-block p, .guide-sub-list, .muted-copy, .info-copy {
  font-family: var(--font);
  font-size: .96rem;
  line-height: 1.68;
  text-wrap: pretty;
}
.guide-page-article h3 { letter-spacing: .02em; }
.guide-sidebar h2, .racer-sidebar h2 { font-weight: 700; font-size: 1rem; letter-spacing: .18em; }
.guide-group summary { font-weight: 600; font-size: .88rem; letter-spacing: .13em; }
.guide-group a { font-family: var(--font); font-size: .9rem; }

/* ---- ticker -------------------------------------------------------------- */
.legends-ticker { font-weight: 600; font-size: .74rem; letter-spacing: .2em; }
.legends-ticker-track { font-variant-numeric: tabular-nums; }

/* ---- forms --------------------------------------------------------------- */
input, select, textarea, button { font-family: var(--font); font-size: .95rem; }
.btn, .shop-cat-tabs button { font-family: var(--font-display); }
label, .form-note { font-family: var(--font); }

/* ---- phone: rebalance the scale ------------------------------------------ */
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.5rem); max-width: 15ch; line-height: .95; }
  .hero h2 { letter-spacing: .26em; font-size: .7rem; }
  .hero p { font-size: .98rem; }
  .section-head h2 { font-size: 1.45rem; }
  .main-nav a { font-size: .95rem; letter-spacing: .07em; }
  .tournament-timer { font-size: 1.2rem; }
}

/* ============================================================================
   HERO — SECOND MOTION PASS
   ----------------------------------------------------------------------------
   Everything here hangs off the same 5.4s cycle as the christmas tree, so the
   whole hero behaves like one run rather than a pile of unrelated loops:

     0.0s  pre-stage / stage bulbs
     1.5s  amber, amber, amber (0.4s apart)
     2.7s  GREEN  -> both cars launch, tyres smoke, tach sweeps to redline,
                     shift light flashes, horizon blooms
     5.4s  reset

   Ambient layers (embers, rail markers, horizon shimmer) run free so the frame
   is never completely still between runs. Transform/opacity only — no layout
   thrash — and the whole block is disabled under prefers-reduced-motion.
   ========================================================================== */

/* ---- horizon bloom at the vanishing point -------------------------------- */
.hero-horizon {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(760px, 78%);
  height: 190px;
  transform: translate(-50%, -50%);
  background: radial-gradient(60% 100% at 50% 100%, #ff8700 0%, #ff2a1f47 34%, transparent 72%);
  filter: blur(18px);
  opacity: .32;
  animation: hero-horizon-breathe 5.4s ease-in-out infinite;
}
@keyframes hero-horizon-breathe {
  0%, 44%   { opacity: .26; transform: translate(-50%, -50%) scaleY(1); }
  52%       { opacity: .72; transform: translate(-50%, -50%) scaleY(1.22); }  /* launch bloom */
  70%, 100% { opacity: .26; transform: translate(-50%, -50%) scaleY(1); }
}

/* ---- guardrail marker lights running up both rails ----------------------- */
.hero-rails { position: absolute; inset: 0; overflow: hidden; }
.hero-rails span {
  position: absolute;
  bottom: 0;
  width: 26%;
  height: 46%;
  background-image: repeating-linear-gradient(180deg, #ffb02e 0 3px, transparent 3px 58px);
  background-size: 2px 58px;
  background-repeat: repeat-y;
  opacity: .5;
  animation: hero-rail-run 1.15s linear infinite;
}
.hero-rails span:nth-child(1) { left: 11%;  background-position: 100% 0; transform: skewX(13deg); }
.hero-rails span:nth-child(2) { right: 11%; background-position: 0 0;    transform: skewX(-13deg); }
@keyframes hero-rail-run {
  from { background-position-y: 0; }
  to   { background-position-y: 58px; }
}

/* ---- the launch: a light pod per lane, coming at the camera -------------- */
.hero-launch { position: absolute; inset: 0; }
.hero-pod {
  position: absolute;
  top: 48%;
  width: 52px;
  height: 13px;
  border-radius: 50%;
  /* twin headlights with a hot core */
  background:
    radial-gradient(circle at 26% 50%, #fff6e0 0 22%, transparent 60%),
    radial-gradient(circle at 74% 50%, #fff6e0 0 22%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, #ff8700a8 0 50%, transparent 78%);
  filter: blur(.6px);
  opacity: 0;
  animation: hero-pod-run 5.4s cubic-bezier(.5, 0, .85, .5) infinite;
  animation-delay: 2.72s;    /* on the green */
}
.pod-l { left: 33%; }
.pod-r { left: 67%; }
.pod-r { animation-delay: 2.78s; }   /* a beat late — nobody cuts a perfect light */
@keyframes hero-pod-run {
  0%        { transform: translate(-50%, 0) scale(.16); opacity: 0; }
  3%        { opacity: .95; }
  26%       { transform: translate(-50%, 210px) scale(1.5); opacity: 1; }
  40%       { transform: translate(-50%, 330px) scale(2.5); opacity: 0; }
  41%, 100% { opacity: 0; transform: translate(-50%, 0) scale(.16); }
}

/* ---- drifting embers ----------------------------------------------------- */
.hero-embers { position: absolute; inset: 0; }
.hero-embers span {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  opacity: 0;
  animation: hero-ember 9s linear infinite;
}
.hero-embers span:nth-child(1)  { left:  6%; animation-delay: 0s;    animation-duration: 8.5s; }
.hero-embers span:nth-child(2)  { left: 14%; animation-delay: 1.4s;  animation-duration: 10s;  }
.hero-embers span:nth-child(3)  { left: 22%; animation-delay: 3.1s;  animation-duration: 9.2s; }
.hero-embers span:nth-child(4)  { left: 29%; animation-delay: 5.2s;  animation-duration: 11s;  }
.hero-embers span:nth-child(5)  { left: 38%; animation-delay: .7s;   animation-duration: 9.8s; }
.hero-embers span:nth-child(6)  { left: 46%; animation-delay: 4.3s;  animation-duration: 8.2s; }
.hero-embers span:nth-child(7)  { left: 55%; animation-delay: 2.2s;  animation-duration: 10.4s;}
.hero-embers span:nth-child(8)  { left: 63%; animation-delay: 6.1s;  animation-duration: 9s;   }
.hero-embers span:nth-child(9)  { left: 71%; animation-delay: 3.8s;  animation-duration: 11.2s;}
.hero-embers span:nth-child(10) { left: 79%; animation-delay: 1.1s;  animation-duration: 8.8s; }
.hero-embers span:nth-child(11) { left: 88%; animation-delay: 5.6s;  animation-duration: 10.1s;}
.hero-embers span:nth-child(12) { left: 94%; animation-delay: 2.7s;  animation-duration: 9.4s; }
@keyframes hero-ember {
  0%   { transform: translate(0, 0) scale(.6);  opacity: 0; }
  10%  { opacity: .85; }
  50%  { transform: translate(18px, -46vh) scale(1); }
  85%  { opacity: .5; }
  100% { transform: translate(-10px, -96vh) scale(.4); opacity: 0; }
}

/* the strip surface kicks slightly faster right after the green, then settles */
.hero-animated .hero-strip-lanes { animation-duration: 1.15s; }

/* ---- phones: keep the launch, drop the fiddly instruments ---------------- */
@media (max-width: 640px) {
  .hero-rails { display: none; }
  .hero-embers span:nth-child(n+7) { display: none; }
  .hero-horizon { width: 92%; height: 130px; }
}

/* ---- motion safety ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-horizon, .hero-rails span, .hero-pod,
  .hero-embers span {
    animation: none;
  }
  .hero-launch, .hero-embers, .hero-rails { display: none; }
}

/* ---- News Feed / Racer Spotlight post cards ------------------------------- */
.post-card { padding: 0; overflow: hidden; }
.post-card .post-content { padding: 20px 24px 22px; }
.post-card .news-meta { flex-wrap: wrap; gap: 8px 12px; margin: 0 0 10px; padding: 0; }
.post-card .post-tag { color: var(--red-bright); font-weight: 700; }
.post-card h4 {
  margin: 0 0 12px; padding: 0;
  font-size: 1.25rem; line-height: 1.2;
  overflow-wrap: anywhere;
}
.post-card .post-body p { margin: 0 0 12px; padding: 0; line-height: 1.65; overflow-wrap: anywhere; }
.post-card .post-body p:last-child { margin-bottom: 0; }
.post-card .post-body.clamped { max-height: 7.6em; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.post-toggle {
  margin-top: 10px; padding: 6px 14px; cursor: pointer;
  background: transparent; color: var(--red-bright);
  border: 1px solid var(--border); border-radius: 3px;
  font: inherit; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
}
.post-toggle:hover { border-color: var(--red-bright); }
.spotlight-card.post-card h4, .spotlight-card.post-card .post-body p { padding-left: 0; padding-right: 0; }
.spotlight-card.post-card .news-meta { padding: 0; }
.spotlight-card.post-card p { padding-bottom: 0; }
@media (min-width: 760px) {
  .spotlight-card.post-card:has(.news-image) { display: grid; grid-template-columns: 240px 1fr; }
  .spotlight-card.post-card .news-image { max-height: none; height: 100%; border-bottom: 0; border-right: 1px solid var(--border); }
  .spotlight-card.post-card .news-image img { height: 100%; min-height: 200px; }
}