/* ==========================================================================
   EWC ARENA ENGAGEMENT — shared design system
   --------------------------------------------------------------------------
   Built to the official Esports World Cup 2026 brand guidelines:
     • Type:      GEAR (XNarrow Black headings, Regular body) — real brand font
     • Colour:    Off-White #F7F7F7 · Charcoal #231F20 · Gold #D1B26E · Orange #FF3600
     • Gradient:  ALWAYS Gold → Orange → Off-White, left to right
     • Ratio:     ~70% neutral (charcoal/off-white) · 20% gradient · 10% accent
   Edit tokens in :root only — every surface reads from these variables.
   See CLAUDE.md for the full design + extension guide.
   ========================================================================== */

/* ----------------------------- GEAR font family --------------------------- */
@font-face { font-family: 'Gear'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('/assets/fonts/Gear-Light.woff2') format('woff2'), url('/assets/fonts/Gear-Light.woff') format('woff'); }
@font-face { font-family: 'Gear'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/assets/fonts/Gear-Regular.woff2') format('woff2'), url('/assets/fonts/Gear-Regular.woff') format('woff'); }
@font-face { font-family: 'Gear'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('/assets/fonts/Gear-Medium.woff2') format('woff2'), url('/assets/fonts/Gear-Medium.woff') format('woff'); }
@font-face { font-family: 'Gear'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('/assets/fonts/Gear-Bold.woff2') format('woff2'), url('/assets/fonts/Gear-Bold.woff') format('woff'); }
@font-face { font-family: 'Gear'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('/assets/fonts/Gear-Black.woff2') format('woff2'), url('/assets/fonts/Gear-Black.woff') format('woff'); }
@font-face { font-family: 'Gear'; font-weight: 900; font-style: italic; font-display: swap;
  src: url('/assets/fonts/Gear-BlackSlant.woff2') format('woff2'), url('/assets/fonts/Gear-BlackSlant.woff') format('woff'); }

/* Narrow — secondary headings */
@font-face { font-family: 'Gear Narrow'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('/assets/fonts/GearNarrow-Bold.woff2') format('woff2'), url('/assets/fonts/GearNarrow-Bold.woff') format('woff'); }
@font-face { font-family: 'Gear Narrow'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('/assets/fonts/GearNarrow-Black.woff2') format('woff2'), url('/assets/fonts/GearNarrow-Black.woff') format('woff'); }

/* XNarrow — PRIMARY display / hero headlines (the EWC 26 look) */
@font-face { font-family: 'Gear XNarrow'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('/assets/fonts/GearXNarrow-Bold.woff2') format('woff2'), url('/assets/fonts/GearXNarrow-Bold.woff') format('woff'); }
@font-face { font-family: 'Gear XNarrow'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('/assets/fonts/GearXNarrow-Black.woff2') format('woff2'), url('/assets/fonts/GearXNarrow-Black.woff') format('woff'); }
@font-face { font-family: 'Gear XNarrow'; font-weight: 900; font-style: italic; font-display: swap;
  src: url('/assets/fonts/GearXNarrow-BlackSlant.woff2') format('woff2'), url('/assets/fonts/GearXNarrow-BlackSlant.woff') format('woff'); }

/* ------------------------------- Tokens ----------------------------------- */
:root {
  /* --- Raw brand palette (do not theme these; they are the source of truth) --- */
  --ewc-off-white: #F7F7F7;
  --ewc-charcoal:  #231F20;
  --ewc-gold:      #D1B26E;
  --ewc-orange:    #FF3600;

  /* --- The brand gradient: Gold → Orange → Off-White, left to right.
         Reserved for BIG hero text/logos only (e.g. the "26"). --- */
  --ewc-grad:  linear-gradient(95deg, #D1B26E 0%, #FF3600 60%, #F7F7F7 100%);
  /* CTA gradient — tan/gold, restrained (like the site's "VISIT ROAD TO EWC"). */
  --grad-gold: linear-gradient(100deg, #E4CC92 0%, #D1B26E 50%, #BE8C42 100%);
  /* Energy gradient — orange→gold, ONLY for progress/meters (like the site bar). */
  --grad-warm: linear-gradient(90deg, #FF5A1F 0%, #E7AF5E 70%, #D1B26E 100%);
  /* Number/code gradient — a GENTLE 2-stop gold→orange. The full --ewc-grad
     (3 stops incl. off-white) looks harsh clipped onto small glyphs, so codes,
     counts and scores use this smoother ramp instead. */
  --grad-num:  linear-gradient(120deg, #E6CD97 0%, #FF6A2C 100%);

  /* --- Dark theme surfaces (charcoal family) --- */
  --bg:        #141011;
  --bg-2:      #1a1516;
  --surface:   #221d1e;
  --surface-2: #2b2526;
  --surface-3: #382f30;
  --line:      rgba(var(--tint-gold), 0.18);   /* gold hairline */
  --line-soft: rgba(247, 247, 247, 0.08);

  /* --- Accents (aliases kept for backward-compat with existing CSS) --- */
  --gold:        #D1B26E;
  --gold-bright: #E6CD97;
  --gold-deep:   #B28F4E;
  --orange:      #FF3600;
  --orange-soft: #FF6A2C;
  --gold-grad:   var(--grad-gold);          /* legacy name → tan/gold CTA */
  --gold-glow:   rgba(var(--tint-gold), 0.38);

  /* --- Tint triplets ---
     CSS cannot re-alpha a hex token, and the surfaces are full of glazes like
     rgba(gold, .24) that each need their OWN alpha. So the RAW TRIPLET is the
     token: every glaze then follows the active theme instead of pinning one
     customer palette into a hundred rules. --- */
  --tint-gold:        209, 178, 110;
  --tint-orange:      255, 54, 0;
  --tint-orange-soft: 255, 90, 31;

  /* INK — the deep background every scrim, plinth, row and card is glazed with.
     This was written as a literal (rgba(var(--tint-ink),…)) in about sixty rules, which
     is the real reason an unbranded build still read faintly brown: a charcoal
     mixed for a warm palette does not belong on a cool one. One token, and the
     whole wall follows the theme. */
  --tint-ink:         9, 7, 6;
  /* The same job on the LIGHT wall variant, where the ink is the accent-safe
     dark rather than the background. */
  --tint-on-accent:   35, 31, 32;

  /* Status glazes. Same reasoning as above: a status BORDER at .45 and a status
     FILL at .07 are the same colour at two alphas, so the triplet is the token
     and the alpha stays at the call site. */
  --tint-danger:      255, 59, 59;
  --tint-warning:     245, 166, 35;
  --tint-success:     53, 207, 134;

  /* Luminous hero ramp — the full brand gradient reads muddy clipped onto the
     lobby headline, so the hero gets a brighter three-stop of its own. */
  --grad-bright: linear-gradient(95deg, #F6D89C 0%, #FF8038 50%, #FFE1BE 100%);
  --orange-glow: rgba(var(--tint-orange), 0.45);

  /* --- Text --- */
  --text:       #F7F7F7;
  --text-dim:   #b4ada7;
  --text-faint: #6f6863;
  --on-accent:  #231F20;                     /* text that sits ON gold/orange fills */

  /* --- Status --- */
  --success: #35cf86;
  --danger:  #ff3b3b;
  --warning: #f5a623;
  --info:    #4d8dff;
  /* The readable-on-dark tint of each. Error text at full --danger vibrates on
     a dark panel, so the surfaces reached for var(--danger-soft) / var(--warning-soft) by hand — six
     different hand-picked reds between them. Now there is one of each.
     Both of these were written as `var(--danger-soft)` — a self-reference, which
     CSS treats as guaranteed-invalid: every surface that asked for one got
     nothing and the property fell back to `inherit`. The login error, the phone's
     join error, the toast, `.btn-danger`'s label and the takeover banner were all
     rendering in plain body text. --danger-soft is the concept's hover red
     (admin-redesign/players.html:430); --warning-soft is the same step for amber. */
  --danger-soft:  #F16A6E;
  --warning-soft: #F5BC5B;

  /* --- Geometry --- */
  --radius:    14px;
  --radius-sm: 9px;
  --notch:     14px;                          /* angled-corner size for shape language */
  --shadow:      0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 12px 44px -10px var(--orange-glow);

  /* --- Motion ---
     The built-in CSS easings are too weak to read as intentional, so the curves
     are tokens like every colour is. --ease-out for anything ENTERING or
     answering a click: it moves on the first frame, which is where the eye
     already is. --ease-in-out only for something travelling across the screen.
     Never ease-in on UI — it withholds that first frame and a 200ms panel then
     FEELS slower than a 300ms one. Durations stay under 300ms for anything the
     operator triggers; only full panels earn more. --- */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press:   140ms;                       /* press feedback */
  --dur-hover:   180ms;                       /* hover, colour, border */
  --dur-enter:   240ms;                       /* element entering */
  --dur-panel:   320ms;                       /* panels, expanders */

  /* --- Wall type scale ---
     The wall sizes everything in vh, which keeps a layout identical on any LED
     resolution but says nothing about how much INK a given typeface puts down at
     that size. A condensed display face covers roughly half the width of the
     system stack at the same cap height, so a theme that ships one needs its
     type run larger to fill the same panel. --wt is that knob: wall rules read
     calc(N * var(--wt)), themes set --wall-type-scale, and the phone (which
     never sizes in vh) is unaffected. */
  --wall-type-scale: 1;
  --wt: 1vh;

  /* --- Type --- */
  --font-display: 'Gear XNarrow', 'Gear Narrow', 'Gear', 'Arial Narrow', sans-serif;
  --font-narrow:  'Gear Narrow', 'Gear', 'Arial Narrow', sans-serif;
  --font-body:    'Gear', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  /* Two corner glows. Themed, not literal — these were the last thing painting
     an EWC wash across every surface of an unbranded deployment. */
  background:
    radial-gradient(1200px 700px at 82% -12%, rgba(var(--tint-orange), 0.06), transparent 60%),
    radial-gradient(900px 600px at -10% 112%, rgba(var(--tint-gold), 0.07), transparent 55%),
    var(--bg);
}

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.0; }

::selection { background: var(--ewc-off-white); color: var(--ewc-charcoal); }

/* Custom scrollbar. The WebKit pseudo-elements were here; the other two lines
   were not, and both matter. `color-scheme` is what makes the BROWSER's own
   chrome dark — without it a date picker and a number spinner render light
   inside a dark input, which is most of what the console is made of. Firefox
   ignores the pseudo-elements entirely and wants `scrollbar-color`. */
html { color-scheme: dark; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(247, 247, 247, 0.28); }
::-webkit-scrollbar-corner { background: transparent; }

/* ----------------------------- Type helpers ------------------------------- */
/* Primary display: XNarrow Black, uppercase, centrally aligned (brand rule). */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.92;
}
/* Secondary heading: use for longer copy where legibility matters (brand rule). */
.display-narrow {
  font-family: var(--font-narrow);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
/* Gradient text — Gold → Orange → Off-White. Only on solid (never gradient) bg. */
.ewc-grad-text, .gold-text {
  background: var(--ewc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------- Buttons ---------------------------------- */
.btn {
  font-family: var(--font-narrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  text-decoration: none; /* anchors styled as buttons must not underline */
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  display: inline-flex; align-items: center; gap: 9px; justify-content: center;
}
.btn:hover { text-decoration: none; }
.btn:hover { transform: translateY(-1px); border-color: rgba(247, 247, 247, 0.3); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
/* No stark white browser outline on click/space — a soft keyboard-only ring instead. */
.btn:focus { outline: none; }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(247, 247, 247, 0.16); }

/* Primary call-to-action — restrained tan/gold gradient. Text sits in charcoal. */
.btn-gold {
  background: var(--grad-gold);
  color: var(--on-accent);
  border: none;
  box-shadow: var(--shadow-gold);
}
/* Solid dark pill (like the site's "LEARN MORE"). */
.btn-dark { background: var(--ewc-charcoal); color: var(--ewc-off-white); border: none; }
.btn-dark:hover { filter: brightness(1.25); border: none; }
.btn-gold:hover { filter: brightness(1.06); border: none; transform: translateY(-1px); }

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface); }
.btn-danger { background: rgba(var(--tint-danger), 0.12); border-color: rgba(var(--tint-danger), 0.4); color: var(--danger-soft); }
.btn-danger:hover { background: rgba(var(--tint-danger), 0.2); border-color: var(--danger); }
.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn-block { width: 100%; }

/* ------------------------------- Surfaces --------------------------------- */
.panel {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ------------------------------- Inputs ----------------------------------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.field > label {
  font-family: var(--font-narrow);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim);
}
input[type="text"], input[type="number"], input[type="password"], textarea, select {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(247, 247, 247, 0.5);
  box-shadow: 0 0 0 3px rgba(247, 247, 247, 0.12);
}
textarea { resize: vertical; min-height: 64px; }

/* Remove the native number-input spinner arrows (cleaner, per design). */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Custom radios / checkboxes — the native ones are ugly. (The seg-control hides
   its own radios and styles the labels, so this only affects standalone ones.) */
input[type="radio"], input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; flex: 0 0 auto; margin: 0; padding: 0;
  border: 2px solid var(--line); background: var(--bg);
  border-radius: 50%; cursor: pointer; position: relative; vertical-align: middle;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input[type="checkbox"] { border-radius: 5px; }
input[type="radio"]:hover, input[type="checkbox"]:hover { border-color: rgba(247, 247, 247, 0.45); }
input[type="radio"]:checked { border-color: var(--text); }
input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--text); }
input[type="checkbox"]:checked { border-color: var(--text); background: var(--text); }
input[type="checkbox"]:checked::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--bg); font-size: 12px; font-weight: 900; line-height: 1; }
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(247, 247, 247, 0.16); }

select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  cursor: pointer; padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
select:hover { border-color: rgba(247, 247, 247, 0.35); }
select option { background: var(--surface-2); color: var(--text); padding: 10px; }
select:disabled { opacity: 0.5; cursor: not-allowed; }

/* --------------------- Custom dropdown (shared/select.js) -----------------
   Native <select> popups can't be themed cross-browser (the raw blue list),
   so select.js mirrors each <select> into this styled component. The native
   element stays in the DOM (display:none) and remains the source of truth. */
.ewc-select { position: relative; width: 100%; }
.ewc-select-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg); border: 1px solid var(--line-soft); color: var(--text);
  border-radius: var(--radius-sm); padding: 11px 13px; font-family: var(--font-body);
  font-size: 15px; cursor: pointer; text-align: left; transition: border-color 0.15s, box-shadow 0.15s;
}
.ewc-select-btn:hover { border-color: rgba(247, 247, 247, 0.3); }
.ewc-select.open .ewc-select-btn { border-color: rgba(247, 247, 247, 0.5); box-shadow: 0 0 0 3px rgba(247, 247, 247, 0.12); }
.ewc-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ewc-select-label.placeholder { color: var(--text-faint); }
.ewc-select-caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--text-dim); transition: transform 0.16s ease; flex-shrink: 0; }
.ewc-select.open .ewc-select-caret { transform: rotate(180deg); }
.ewc-select-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 7px; max-height: 300px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;        /* breathing room between options */
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ewc-select.open .ewc-select-menu { opacity: 1; transform: none; pointer-events: auto; }
.ewc-select-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text);
  border: 1px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.12s, border-color 0.12s;
}
.ewc-select-opt:hover { background: var(--surface-3); }
/* Selected reads differently from hover: subtle fill + hairline + check (not the same grey). */
.ewc-select-opt.selected { background: rgba(247, 247, 247, 0.05); border-color: var(--line); }
.ewc-select-opt.selected::after { content: '\2713'; color: var(--text-dim); font-size: 12px; }
.ewc-select-opt.selected:hover { background: var(--surface-3); }
/* The empty/"— New … —" entry is a placeholder, not a real value. */
.ewc-select-opt.placeholder { color: var(--text-faint); font-style: italic; }
.ewc-select-opt.disabled { opacity: 0.4; cursor: not-allowed; }

/* ------------------------------- Chips ------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-narrow);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text-dim);
}
.chip.live { color: var(--danger-soft); border-color: rgba(var(--tint-danger),.4); }
.chip.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 0 rgba(var(--tint-danger),.6); animation: pulseDot 1.4s infinite; }

/* --------------------- Shape language (EWC key-icon notch) ---------------- */
/* Angular accent — a single cut corner echoing the EWC shape language.
   Use sparingly on hero/feature blocks. Direction variants provided. */
.notch-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%); }
.notch-tl { clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch)); }
.notch-tr { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }

/* Decorative angled bar (page furniture / dividers). */
.tri {
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 11px solid var(--text); opacity: 0.6;
}

/* ------------------------------- Animations ------------------------------- */
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(var(--tint-danger),.55); } 70% { box-shadow: 0 0 0 7px rgba(var(--tint-danger),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--tint-danger),0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.85); } 60% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.fade-up { animation: fadeUp 0.45s cubic-bezier(.2,.7,.3,1) both; }
.pop-in { animation: popIn 0.4s cubic-bezier(.2,.8,.3,1) both; }

/* ------------------------------- Brand bits ------------------------------- */
.rise-above {
  font-family: var(--font-narrow);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--text-faint); font-size: 13px;
}
.ewc-logo { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.01em; }

.hidden { display: none !important; }