/* ══════════════════════════════════════════════════════════════════════
   theme-gladiators.css — "UNDER THE ARENA LIGHTS" skin
   ──────────────────────────────────────────────────────────────────────
   Site-wide look for Brawley Gladiators, derived from the helmet-crest
   logo: near-black navy → cobalt field, stadium spotlights, a gold glow
   in the corner, gunmetal steel, ink-splatter grit, Roman serif wordmark.

   Load AFTER components.css on every page. This is an additive skin on
   top of the untouched kit (chrome/shell/components/ui-kit stay as-is);
   it only re-maps colours/type and adds atmosphere. tokens.css already
   flips the surfaces to dark — this file fixes the pieces the kit
   hard-codes for a light theme and adds the lighting.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. The arena: page backdrop ─────────────────────────────────────
   html carries the base colour; body goes transparent so the fixed
   pseudo-elements (z-index -1) paint above the base and below content. */
/* v0.15.2: the field is lifted to a true cobalt — the previous navy → cobalt
   sweep still read as near-black. Panels get a blue tint to match so cards
   sit *in* the field instead of punching black holes through it. Gold is
   untouched. --bg stays the kit's dark value (it backs the load gate). */
:root {
  --panel:   #142a52;
  --panel-2: #1a3562;
  --border:  rgba(190,205,235,0.20);
}
html { background: #10254c; }
body { background: transparent; position: relative; }

/* Spotlights + gold corner glow + film grain. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* two cold stadium lights, top-left / top-right */
    radial-gradient(60% 45% at 8% -10%,  rgba(60,120,230,0.28) 0%, transparent 60%),
    radial-gradient(55% 45% at 92% -8%,  rgba(60,120,230,0.22) 0%, transparent 60%),
    /* the logo's gold glow, bottom-right */
    radial-gradient(70% 55% at 100% 105%, rgba(232,171,59,0.22) 0%, transparent 60%),
    /* cobalt mid-field — the logo's electric blue */
    radial-gradient(90% 70% at 50% 45%,  rgba(42,91,184,0.38) 0%, transparent 70%),
    /* base: cobalt field (v0.15.2 — lifted from the navy → cobalt sweep of v0.13.2) */
    linear-gradient(135deg, #10254c 0%, #183b7a 55%, #1f4a96 100%);
}
/* Header: deep navy, a notch lighter than the old near-black (v0.15.3) but still
   darker than the cobalt field so the chrome reads as a separate band. */
.header { background: linear-gradient(180deg, #0a1734 0%, #0d1d40 45%, #11264e 100%); }
/* Grain, so flat surfaces read as grit / ink splatter rather than plastic. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px; mix-blend-mode: overlay;
}

/* ── 1b. Arena smoke (v0.16.1) — live mist drifting across the field.
   Three tiled turbulence wisps (anisotropic 3-octave noise, stretched ~5:1
   horizontally and thresholded high, so they read as thin long streaks with
   open field between them, like the logo's smoke — seamless, no blur),
   pale blue-white, screen-blended over the cobalt. Each layer scrolls
   continuously by exactly one tile period in its own direction and speed, so
   the loop never shows a seam and the layers slide over each other like fog.
   The container breathes (slow scale) and each layer pulses in opacity.
   Transform/opacity only — composited, no per-frame paint. Sits above the base
   sweep (body::before), below the ghost helmet, the grain and all content. */
.arena-smoke {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  mix-blend-mode: screen; contain: strict;
  animation: smoke-breathe 26s ease-in-out infinite alternate;
}
.arena-smoke i {
  position: absolute; display: block; background-repeat: repeat; will-change: transform, opacity;
}
/* Layer 1: 800px tile, drifts up-left, 42s per tile (~19px/s). */
.arena-smoke i:nth-child(1) {
  inset: -800px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='800'%20height='800'%3E%3Cfilter%20id='s'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.0011%200.0052'%20numOctaves='3'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.72%20%200%200%200%200%200.82%20%200%200%200%200%201%20%203.4%200%200%200%20-1.65'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23s)'/%3E%3C/svg%3E"); background-size: 800px 800px; opacity: .42;
  animation: smoke-1 42s linear infinite, smoke-pulse-1 9s ease-in-out infinite alternate;
}
/* Layer 2: 1000px tile, drifts right and slightly up, 58s per tile. */
.arena-smoke i:nth-child(2) {
  inset: -1000px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1000'%20height='1000'%3E%3Cfilter%20id='s'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.0008%200.0042'%20numOctaves='3'%20seed='19'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.72%20%200%200%200%200%200.82%20%200%200%200%200%201%20%203.4%200%200%200%20-1.7'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23s)'/%3E%3C/svg%3E"); background-size: 1000px 1000px; opacity: .34;
  animation: smoke-2 58s linear infinite, smoke-pulse-2 13s ease-in-out infinite alternate;
}
/* Layer 3: 1200px tile of long faint banks, drifts down-left, 80s per tile. Desktop only. */
.arena-smoke i:nth-child(3) {
  inset: -1200px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='1200'%3E%3Cfilter%20id='s'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.0006%200.003'%20numOctaves='3'%20seed='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.72%20%200%200%200%200%200.82%20%200%200%200%200%201%20%203.6%200%200%200%20-1.85'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23s)'/%3E%3C/svg%3E"); background-size: 1200px 1200px; opacity: .30;
  animation: smoke-3 80s linear infinite, smoke-pulse-3 17s ease-in-out infinite alternate;
}
@keyframes smoke-1 { from { transform: translate3d(0,0,0); }            to { transform: translate3d(-800px,-800px,0); } }
@keyframes smoke-2 { from { transform: translate3d(-1000px,0,0); }      to { transform: translate3d(0,-1000px,0); } }
@keyframes smoke-3 { from { transform: translate3d(0,-1200px,0); }      to { transform: translate3d(-1200px,0,0); } }
@keyframes smoke-pulse-1 { from { opacity: .30; } to { opacity: .50; } }
@keyframes smoke-pulse-2 { from { opacity: .38; } to { opacity: .24; } }
@keyframes smoke-pulse-3 { from { opacity: .22; } to { opacity: .36; } }
@keyframes smoke-breathe { from { transform: scale(1); } to { transform: scale(1.09); } }
@media (max-width: 899px) {
  .arena-smoke i:nth-child(3) { display: none; }
  .arena-smoke i:nth-child(1) { inset: -800px -800px; }
}
@media (prefers-reduced-motion: reduce) { .arena-smoke, .arena-smoke i { animation: none; } }

/* Ghosted helmet behind every page (fixed, faded, feathered). */
.arena-ghost {
  position: fixed; z-index: -1; pointer-events: none; right: -6vw; top: 8vh;
  width: min(62vw, 720px); aspect-ratio: 1069 / 1008; opacity: .16;
  background: url('./assets/team-logo.jpg?v=0.24.0') center / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 48%, #000 25%, transparent 70%);
          mask-image: radial-gradient(ellipse 55% 55% at 50% 48%, #000 25%, transparent 70%);
  filter: saturate(1.15) contrast(1.05) blur(.6px);
}
@media (max-width: 899px) { .arena-ghost { width: 92vw; right: -20vw; top: 14vh; opacity: .13; } }

/* ── 2. Type: the wordmark's Roman serif for titles ─────────────────── */
.page-title, .hero h1, .card-name, .card-title, .stage-name, .form-head-h,
.detail-title, .stub-title, .confirm-title, .modal-head, .give-hero h1, .cta-strip h3 {
  font-family: var(--font-display); letter-spacing: .04em;
}
.page-title { font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.card-name  { font-size: 15px; font-weight: 700; letter-spacing: .05em; }
.card-title { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.section-label { color: var(--accent); letter-spacing: .18em; }
.section-label.rule::after { background: linear-gradient(90deg, var(--accent-40), transparent); }
.page-sub { color: var(--muted); }

/* ── 3. Heading colour remap: --brand (navy) is invisible on dark ───── */
.page-title, .card-name, .card-title, .stat-num, .who-name, .detail-title, .kv dd,
.stage-name, .form-head-h, .stub-title, .confirm-title, .modal-head, .row-title,
.side-row-name, .meta-val, .kv-row span:last-child, .big-num, .bar-row-num,
.tile-name, .task-title, .chip.text, .count-pill, .id-name, .detail-empty-h,
.detail-strip, .hdock-btn.active { color: var(--heading); }
.card-open { color: var(--accent-lt); }
.card-desc, .page-sub, .stat-lbl, .who-sub, .row-desc, .task-note, .hint, .side-note { color: var(--muted); }
a { color: var(--accent-lt); }

/* ── 4. Surfaces the kit hard-codes as light ────────────────────────── */
.card, .detail, .form, .table, .stage, .stat, .row-card, .side-card, .empty, .stub, .kv.boxed {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)), var(--panel);
  border-color: var(--border);
}
.card.glass, .tile, .tile-wide { background: rgba(20,42,82,0.84); }
.count-pill { background: rgba(20,42,82,0.84); }
.card.hover:hover, .tile:hover, .tile-wide:hover {
  border-color: var(--accent-40);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55), 0 0 0 1px var(--accent-25), 0 0 32px rgba(232,171,59,0.10);
}
.thead { background: rgba(255,255,255,0.03); }
.trow:hover { background: rgba(232,171,59,0.06); }
.detail-body { background: rgba(255,255,255,0.035); color: var(--text); }
.input, .textarea, .select, .csel-trigger { background: rgba(255,255,255,0.05); color: var(--text); }
.input:focus, .textarea:focus, .csel.open .csel-trigger { background: rgba(255,255,255,0.07); }
.csel-menu, .dropdown-menu, .modal, .account-dropdown { background: #142a52; }
.toast { background: #152c56; border: 1px solid var(--accent-40); }
.skl { background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.10) 37%, rgba(255,255,255,0.05) 63%); background-size: 400% 100%; }

/* Buttons */
.btn { color: #16100a; text-shadow: none; box-shadow: 0 8px 22px rgba(232,171,59,0.28); }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: rgba(255,255,255,0.05); color: var(--heading); border-color: var(--border); }
.btn.ghost:hover { background: rgba(232,171,59,0.10); border-color: var(--accent); color: var(--accent-lt); }
.btn.ghost.danger { color: var(--danger-ink); }
.btn.outline-accent { color: var(--accent-lt); }
.btn.outline-accent:hover { color: #16100a; }
.btn.dashed { color: var(--accent-lt); }
.icon-btn:hover { color: var(--heading); }
.link-btn { color: var(--accent-lt); }
.back-link { color: var(--accent-lt); }
.chev-btn:hover { color: var(--accent-lt); }

/* Segmented control (jump bars on Schedule / Support / Training). The kit's
   hover paints text in --brand, which is near-black on these dark panels, and
   iOS keeps a tapped link in :hover — so the tab you just tapped vanished.
   Hover only where a real pointer exists; keep touch on the muted colour. */
.seg-btn:hover { color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .seg-btn:hover { color: var(--accent-lt); } }
.seg-btn.is-active, .seg-btn.is-active:hover { color: var(--accent-lt); background: rgba(232,171,59,0.10); border-color: var(--accent-40); box-shadow: none; }

/* Chips / tags */
.chip { background: rgba(255,255,255,0.05); color: var(--muted); }
.chip.solid { color: #16100a; }
.filter-chip { background: rgba(255,255,255,0.05); }
.filter-chip.is-active { color: #16100a; }
.tile-tag { color: var(--muted); }

/* Banners & callouts — the kit pins dark ink on these */
.banner.info   { color: var(--text); background: rgba(42,91,184,0.14); border-color: rgba(60,120,230,0.35); }
.banner.info svg { color: #8db0ec; }
.banner.warn   { color: #f6dc9a; background: rgba(232,171,59,0.10); border-color: rgba(232,171,59,0.38); }
.banner.warn svg { color: var(--accent-lt); }
.banner.ok     { color: var(--ok-ink); }
.banner.danger { color: var(--danger-ink); }
.banner.note   { color: var(--muted); background: rgba(255,255,255,0.035); }
.banner-main strong { color: var(--heading); }
.banner-main code { background: rgba(255,255,255,0.08); color: var(--accent-lt); }
.callout.info { background: rgba(42,91,184,0.14); color: var(--text); }
.callout.info strong { color: var(--heading); }
.callout.warn { background: rgba(232,171,59,0.10); color: #f6dc9a; }
.inline-note.off { color: var(--muted); }
.modal-head.warn { color: #f6dc9a; }

/* Icon tiles: light ink on dark tint */
.ico-accent  { background: rgba(232,171,59,0.14); color: var(--accent-lt); }
.ico-warn    { color: var(--warn-ink); }
.ico-ok      { color: var(--ok-ink); }
.ico-danger  { color: var(--danger-ink); }
.ico-info    { color: var(--info-ink); }
.ico-neutral { color: var(--steel); }
.stat-ico, .card-ico, .row-ico, .detail-ico, .form-head-ico { box-shadow: inset 0 0 0 1px rgba(232,171,59,0.18); }
.form-head-ico { background: rgba(232,171,59,0.14); color: var(--accent-lt); }
.stub-ico { background: rgba(255,255,255,0.05); color: var(--accent-lt); }

/* Task checks */
.task-check { background: rgba(255,255,255,0.04); border-color: var(--border); }

/* Header: a slim brushed-gold bar along the bottom edge — the modern read of a
   Roman roof rim. 6px: a metallic vertical sweep, a lit top edge, a soft sheen
   that slides across every 9s, and a gold glow onto the page below. No ornament.
   Header height unchanged (kit border 3px → 1px, header-inner padding shifts). */
.header { border-bottom: 1px solid #a8781c; box-shadow: 0 2px 22px rgba(232,171,59,0.28), 0 12px 40px rgba(0,0,0,0.5); }
.header .header-inner { padding: 17px 0 21px; }
.header::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 2; pointer-events: none;
  background:
    /* sheen: 40%-wide soft highlight, position animated across the bar */
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%) -70% 0 / 40% 100% no-repeat,
    /* lit top edge */
    linear-gradient(#fff4c8, rgba(255,244,200,0)) 0 0 / 100% 2px no-repeat,
    /* brushed metal */
    linear-gradient(180deg, #f3cf6a 0%, #e8ab3b 45%, #c98f24 100%);
  animation: gold-sheen 9s ease-in-out infinite;
}
@keyframes gold-sheen {
  0%, 40%  { background-position: -70% 0, 0 0, 0 0; }
  70%, 100% { background-position: 170% 0, 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .header::before { animation: none; } }
/* Phone header (v0.22.0): the kit's title block repeats "Brawley Gladiators" next to
   the wordmark and ran off the right edge at 375px. On phones show only the page
   name (the eyebrow with the dot), right-aligned and allowed to wrap. */
@media (max-width: 899px) {
  .header-title-top { display: none; }
  .header-title-block { max-width: 34vw; flex-shrink: 1; min-width: 0; }
  .header-title-nav { justify-content: flex-end; text-align: right; white-space: normal; line-height: 1.25; font-size: 10.5px; }
}
.bottom-nav { background: rgba(11,25,56,0.94); border-top: 1px solid rgba(232,171,59,0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-footer { border-top: 1px solid rgba(232,171,59,0.28); }

/* Page head: a title card, with a gold hairline beneath */
.page-head { position: relative; padding-bottom: 16px; }
.page-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(232,171,59,0.35) 35%, transparent 80%);
}
.page-head-icon {
  background: linear-gradient(135deg, #1c3f74 0%, #0a1428 60%);
  box-shadow: 0 0 0 1px rgba(232,171,59,0.45), 0 10px 26px rgba(0,0,0,0.5), 0 0 26px rgba(42,91,184,0.35);
  color: var(--accent-lt);
}

/* Arena band — a reusable dark hero surface any page can use.
   overflow: clip (not hidden): the spotlight beams below extend the band's
   scrollable overflow, and a hidden box can still be scrolled by anchor jumps,
   focus(), or scrollIntoView — which shifted the band's contents up-left.
   clip cannot scroll; hidden stays as the fallback for old browsers. */
.arena-band {
  position: relative; overflow: hidden; overflow: clip; border-radius: var(--r-xl); color: #fff;
  background:
    radial-gradient(70% 60% at 100% 110%, rgba(232,171,59,0.35) 0%, transparent 60%),
    radial-gradient(60% 50% at 0% -10%,   rgba(60,120,230,0.35) 0%, transparent 60%),
    linear-gradient(150deg, #040814 0%, #0a1428 40%, #16336a 100%);
  box-shadow: 0 0 0 1px rgba(232,171,59,0.30), var(--shadow-lg), 0 0 60px rgba(42,91,184,0.18);
}
/* Two spotlight beams sweeping in from the top corners. */
.arena-band::before, .arena-band::after {
  content: ''; position: absolute; top: -40%; width: 26%; height: 180%; pointer-events: none;
  background: linear-gradient(180deg, rgba(160,200,255,0.16) 0%, rgba(160,200,255,0.05) 45%, transparent 75%);
  filter: blur(14px);
}
.arena-band::before { left: 6%;  transform: rotate(18deg); }
.arena-band::after  { right: 6%; transform: rotate(-18deg); }
.arena-band > * { position: relative; z-index: 1; }

/* Feathered helmet: the logo with its square edges dissolved into the scene */
.helmet-art {
  /* Crop to the helmet only (the wordmark baked into the bottom of the
     image is set in type on the page instead), then dissolve the edges. */
  display: block; width: 100%; height: auto; aspect-ratio: 1290 / 880; object-fit: cover; object-position: 50% 8%;
  -webkit-mask-image: radial-gradient(ellipse 56% 62% at 50% 46%, #000 28%, transparent 70%);
          mask-image: radial-gradient(ellipse 56% 62% at 50% 46%, #000 28%, transparent 70%);
  filter: saturate(1.12) contrast(1.06) drop-shadow(0 20px 40px rgba(0,0,0,0.6));
}

/* Testimonial-style quote (Roman epigraph feel) */
.epigraph {
  font-family: var(--font-display); font-size: 15px; letter-spacing: .04em; line-height: 1.6;
  color: var(--heading); text-align: center; padding: 22px 24px; margin-top: 26px;
  border-top: 1px solid rgba(232,171,59,0.35); border-bottom: 1px solid rgba(232,171,59,0.35);
}
.epigraph small { display: block; font-family: var(--font); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-top: 10px; }

/* ── Registration band (home) — two steps: USA Wrestling card, then club fee ── */
.register-band { padding: 28px 26px 22px; margin: 26px 0 30px; scroll-margin-top: 80px; }
.register-head { max-width: 640px; margin-bottom: 20px; }
.register-head .section-label { margin-bottom: 8px; }
.register-head h2 { font-family: var(--font-display); font-size: clamp(22px, 3.2vw, 30px); letter-spacing: .03em; color: #fff; margin: 0 0 8px; line-height: 1.15; }
.register-head p { color: rgba(255,255,255,0.78); font-size: 14px; line-height: 1.6; margin: 0; }
.register-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.register-step { position: relative; background: rgba(4,8,20,0.55); border: 1px solid rgba(232,171,59,0.28); padding-top: 26px; }
.register-step .step-num {
  position: absolute; top: -12px; left: 18px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: #1a1204; background: linear-gradient(160deg, #f6dc9a, var(--accent)); box-shadow: 0 4px 14px rgba(232,171,59,0.45);
}
.register-step .card-desc { color: rgba(255,255,255,0.80); }
.register-step .card-desc strong { color: var(--accent-lt); }
.register-step .step-price { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 14px; }
.register-step .price { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--accent-lt); letter-spacing: .02em; }
.register-step .price-note { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.register-step .actions { margin-top: auto; }
.register-step .btn.is-busy { opacity: .7; pointer-events: none; }
.register-band .banner.ok { margin-bottom: 18px; }
.register-fine { margin: 18px 0 0; font-size: 12.5px; color: rgba(255,255,255,0.6); }
.register-fine a { color: var(--accent-lt); }
@media (max-width: 640px) { .register-band { padding: 24px 18px 18px; } }

@media (prefers-reduced-motion: reduce) { .arena-band::before, .arena-band::after { display: none; } }

/* ── Phone "More" tab + sheet (nav-more.js) ────────────────────────────
   The sheet mirrors the full desktop dock so phone and desktop navigation
   match. Sits just above the bottom bar; the bar stays tappable. */
.nav-tab-more { font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.nav-tab-more[aria-expanded="true"] { color: var(--accent-lt); }
.nav-sheet-backdrop {
  position: fixed; inset: 0; z-index: 190; background: rgba(4,8,18,0.66);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.nav-sheet {
  position: fixed; left: 0; right: 0; z-index: 195;
  bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  max-height: calc(100vh - var(--bottom-nav-h) - 72px); overflow-y: auto;
  background: rgba(11,25,56,0.97); border-top: 1px solid rgba(232,171,59,0.45);
  border-radius: 18px 18px 0 0; padding: 12px 14px 16px;
  box-shadow: 0 -18px 48px rgba(0,0,0,0.55);
  transform: translateY(104%); visibility: hidden;
  transition: transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s linear .26s;
}
html.nav-sheet-open { overflow: hidden; }
html.nav-sheet-open .nav-sheet-backdrop { opacity: 1; pointer-events: auto; }
html.nav-sheet-open .nav-sheet { transform: none; visibility: visible; transition-delay: 0s; }
.nav-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 12px; font-family: var(--font-display); font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-lt);
}
.nav-sheet-x {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75); cursor: pointer; padding: 0;
}
.nav-sheet-x svg { width: 16px; height: 16px; }
.nav-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nav-sheet-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 76px; padding: 10px 6px; border-radius: 12px; text-align: center; text-decoration: none;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.80); font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1.25;
}
.nav-sheet-item svg { width: 22px; height: 22px; flex-shrink: 0; }
.nav-sheet-item:active { background: rgba(255,255,255,0.09); }
.nav-sheet-item.active { color: var(--accent-lt); border-color: rgba(232,171,59,0.6); background: rgba(232,171,59,0.12); }
@media (prefers-reduced-motion: reduce) { .nav-sheet, .nav-sheet-backdrop { transition: none; } }
@media (min-width: 900px) { .nav-tab-more, .nav-sheet, .nav-sheet-backdrop { display: none !important; } }

/* ── Registration v0.22.0: four steps + the family form ─────────────── */
.register-steps { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.register-step { display: flex; flex-direction: column; }
.register-step.is-done { border-color: rgba(60,200,140,0.45); }
.register-step.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-40), 0 0 28px rgba(232,171,59,0.18); }
.register-step .step-state { position: absolute; top: -11px; right: 16px; }
.step-list { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.step-list li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.step-list li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(232,171,59,0.6); }
.step-list li strong { color: var(--accent-lt); }
.step-list li em { color: rgba(255,255,255,0.6); font-style: normal; }

.reg-form { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(232,171,59,0.22); }
.reg-form[hidden] { display: none; }
.reg-form .section-label { margin: 0 0 12px; }
.reg-card { background: rgba(4,8,20,0.55); border: 1px solid rgba(232,171,59,0.28); border-radius: var(--r-lg); padding: 18px 18px 16px; margin-bottom: 14px; }
.reg-card .card-head { margin-bottom: 12px; }
.reg-grid { display: grid; grid-template-columns: 1fr; gap: 12px 14px; }
@media (min-width: 640px) { .reg-grid { grid-template-columns: 1fr 1fr; } .reg-grid .span2 { grid-column: 1 / -1; } }
@media (min-width: 980px) { .reg-grid.cols3 { grid-template-columns: 1fr 1fr 1fr; } }
.reg-form .input, .reg-form .select { width: 100%; background: rgba(255,255,255,0.05); color: var(--heading); border-color: var(--border); }
.reg-form .input:focus, .reg-form .select:focus { background: rgba(255,255,255,0.07); }
.reg-form .label { color: var(--accent); }
.reg-form .label .opt { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 4px; }
.reg-form .hint { font-size: 12px; }
.reg-form .check { color: rgba(255,255,255,0.85); font-weight: 500; font-size: 13px; }

.reg-add { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; }
.reg-add .btn { border-style: dashed; }
.other-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.035); border: 1px solid var(--border-soft); margin-bottom: 10px; }
@media (max-width: 640px) { .other-row { grid-template-columns: 1fr; } }
.btn.icon-x { padding: 8px 10px; }

.wr-card { border-color: rgba(60,120,230,0.35); }
.wr-card.is-collapsed { padding: 12px 16px; cursor: pointer; }
.wr-card.is-collapsed:hover { border-color: var(--accent); }
.wr-card.is-collapsed .wr-body { display: none; }
.wr-head { display: flex; align-items: center; gap: 12px; }
.wr-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(160deg, var(--cobalt), #16306a); box-shadow: 0 0 0 1px rgba(60,120,230,0.5); }
.wr-title { flex: 1; min-width: 0; }
.wr-name { font-size: 15px; font-weight: 800; color: var(--heading); }
.wr-sum { font-size: 12px; color: var(--muted); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.wr-head .btn.sm { padding: 6px 10px; }
.wr-body { margin-top: 14px; }
.doc-box { padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--accent-40); background: rgba(232,171,59,0.05); }
.doc-box .label { margin-bottom: 8px; display: block; }
.doc-or { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 8px 0; text-align: center; }
.file-btn { position: relative; overflow: hidden; display: inline-flex; }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(60,200,140,0.14); border: 1px solid rgba(60,200,140,0.4); color: #9fe3c2; font-size: 12px; font-weight: 700; max-width: 100%; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; display: grid; place-items: center; }
.file-chip button svg { width: 14px; height: 14px; }
.reg-submit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.reg-err { font-size: 13px; color: var(--danger-ink); }
.reg-done { padding: 18px 20px; border-radius: var(--r-lg); background: rgba(60,200,140,0.10); border: 1px solid rgba(60,200,140,0.4); }
.reg-done h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: .04em; color: #fff; margin: 0 0 6px; }
.reg-done p { color: rgba(255,255,255,0.82); font-size: 13.5px; line-height: 1.6; margin: 0 0 10px; }
.reg-done .ref { font-family: 'DM Mono', monospace; color: var(--accent-lt); }

/* ── Registration confirmation rows + USAW warning (v0.22.0) ────────── */
.done-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.done-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft); }
.done-row.is-missing { border-color: rgba(232,171,59,0.6); background: rgba(232,171,59,0.10); }
.done-name { font-weight: 800; color: var(--heading); font-size: 14px; }
.done-sum { font-size: 12px; color: var(--muted); margin-top: 2px; }
.done-row.is-missing .done-sum { color: #f6dc9a; }
.done-row .btn svg, .reg-done .actions .btn svg { width: 14px; height: 14px; }
@media (max-width: 640px) { .done-row { grid-template-columns: 30px 1fr; } .done-row .btn { grid-column: 2; justify-self: start; } }
#usawWarn { margin: 0; }
#usawWarn em { font-style: normal; font-weight: 800; }

/* ── Registration fields: light-blue inputs and selects (v0.22.0) ─────── */
.reg-form .input, .reg-form .select { background: #e8f0fe; color: #12213f; border-color: #c5d6f2; }
.reg-form .input::placeholder { color: #7d8ba3; }
.reg-form .input:focus, .reg-form .select:focus { background: #ffffff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,171,59,0.22); }
.reg-form .select option { color: #12213f; background: #fff; }
.reg-form .input:-webkit-autofill, .reg-form .input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #e8f0fe inset; -webkit-text-fill-color: #12213f; }
.reg-form input[type=date] { color-scheme: light; }

/* ── Registration panels: lighter navy instead of near-black (v0.22.0) ── */
.register-step { background: rgba(28,52,102,0.78); border-color: rgba(232,171,59,0.35); }
.reg-form .reg-card, .reg-form .other-row { background: rgba(255,255,255,0.07); border-color: rgba(120,160,230,0.35); }
.reg-form .doc-box { background: rgba(255,255,255,0.05); border-color: rgba(232,171,59,0.45); }
.reg-form .wr-card { border-color: rgba(120,160,230,0.45); }
.reg-form .reg-done { background: rgba(60,200,140,0.14); }
.done-row { background: rgba(255,255,255,0.07); }

/* ── Registration: more translucent panels (v0.22.0) ───────────────────
   The step cards (medium blue) and the dark band framing them let the
   arena backdrop show through. Scoped to the registration band only. */
.register-band.arena-band {
  background:
    radial-gradient(70% 60% at 100% 110%, rgba(232,171,59,0.22) 0%, transparent 60%),
    radial-gradient(60% 50% at 0% -10%,   rgba(60,120,230,0.25) 0%, transparent 60%),
    linear-gradient(150deg, rgba(4,8,20,0.55) 0%, rgba(10,20,40,0.50) 40%, rgba(22,51,106,0.45) 100%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.register-step { background: rgba(28,52,102,0.42); }
.reg-form .reg-card, .reg-form .other-row { background: rgba(255,255,255,0.05); }

/* ── Registration step status chips: bigger, inside the card (v0.22.0) ── */
.register-step .step-state {
  top: 16px; right: 16px; font-size: 13px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px; border-width: 1.5px; line-height: 1; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.register-step .step-state.live { background: rgba(60,200,140,0.22); color: #9fe3c2; border-color: rgba(60,200,140,0.6); }
.register-step .step-state.warn { background: rgba(232,171,59,0.22); color: #f6dc9a; border-color: rgba(232,171,59,0.7); }
.register-step .card-top { padding-right: 170px; }   /* keep the title clear of the chip */
@media (max-width: 640px) { .register-step .step-state { position: static; display: inline-flex; margin: 0 0 10px; } .register-step .card-top { padding-right: 0; } }

/* ── Step 4 fee summary (v0.22.0) ──────────────────────────────────────── */
.fee-box { margin: 4px 0 16px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(232,171,59,0.35); max-width: 460px; }
.fee-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: rgba(255,255,255,0.85); padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.fee-row span:last-child { color: var(--accent-lt); font-weight: 700; }
.fee-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.fee-amt { font-family: var(--font-display); font-size: 26px; letter-spacing: .02em; color: #fff; }
.fee-box .hint { margin-top: 8px; font-size: 12px; }

/* ── Logo toggle (v0.22.0): New / Classic artwork switch, logo-toggle.js ──
   Only the art swaps; colours stay. The ghosted crest is a CSS background,
   so it follows the html[data-logo] flag rather than an <img> src swap. */
html[data-logo="classic"] .arena-ghost { background-image: url('./assets/team-logo-classic.jpg?v=0.22.0'); }
.logo-toggle {
  position: absolute; right: 0; bottom: 3px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px 2px 6px; border-radius: 999px; cursor: pointer;
  background: rgba(10,22,52,0.55); border: 1px solid rgba(232,171,59,0.35);
  color: rgba(255,255,255,0.7); font-family: inherit; font-size: 8.5px; font-weight: 700; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
  transition: border-color .15s, color .15s, background .15s;
}
.logo-toggle:hover, .logo-toggle:focus-visible { color: #fff; border-color: var(--accent); background: rgba(232,171,59,0.12); outline: none; }
.logo-toggle-lbl { opacity: .7; }
.logo-toggle-val { color: var(--accent-lt); min-width: 38px; text-align: left; }
.logo-toggle-track {
  position: relative; width: 22px; height: 12px; border-radius: 999px; flex-shrink: 0;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); transition: background .2s, border-color .2s;
}
.logo-toggle-knob {
  position: absolute; top: 1px; left: 1px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-lt); box-shadow: 0 0 6px rgba(232,171,59,0.6); transition: transform .2s cubic-bezier(.2,.9,.3,1.2);
}
.logo-toggle[aria-checked="true"] .logo-toggle-track { background: rgba(232,171,59,0.28); border-color: rgba(232,171,59,0.6); }
.logo-toggle[aria-checked="true"] .logo-toggle-knob  { transform: translateX(10px); }
@media (min-width: 900px) { .logo-toggle { bottom: auto; top: 7px; } }