/* ============================================================================
   GAMERS ESCAPE — WATCH PARTY BRAND TOKENS
   Mint-teal + deep purple on a dark "arena" canvas. Russo One + Chakra Petch.
   Imported by every page: <link rel="stylesheet" href="/css/brand.css">
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Russo+One&display=swap');

:root {
  /* Neon core — matched to the gamersescapeiq.com homepage (cyan + purple + pink) */
  --ge-mint:        #22D3EE;
  --ge-mint-bright: #67E8F9;
  --ge-mint-deep:   #0E9DC0;
  --ge-purple:      #7C3AED;
  --ge-purple-lt:   #A78BFA;
  --ge-purple-deep: #3B1E78;

  /* Arena surfaces (homepage dark canvas) */
  --ge-bg:        #08060F;
  --ge-bg-2:      #0F0F23;
  --ge-surface:   #16132E;
  --ge-surface-2: #1E1942;
  --ge-border:    #2C2658;
  --ge-border-lt: #473C82;

  /* Status / accents */
  --ge-gold: #FFC24B;
  --ge-hot:  #FF2D9B;
  --ge-win:  #22D3EE;

  /* Text */
  --ge-text:      #ECEAF6;
  --ge-text-dim:  #B9AEDB;
  --ge-text-mute: #9A93B8;

  /* Type */
  --font-display: 'Russo One', system-ui, sans-serif;
  --font-body:    'Chakra Petch', ui-monospace, 'Segoe UI', sans-serif;

  /* Radius / spacing */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Glow */
  --glow-mint:   0 0 28px rgba(34, 211, 238, 0.45);
  --glow-purple: 0 0 36px rgba(124, 58, 237, 0.55);
  --glow-gold:   0 0 30px rgba(255, 194, 75, 0.5);

  --z-toast: 60;
  --z-modal: 50;
  --z-nav:   30;
}

* { box-sizing: border-box; }

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

/* Arena backdrop: solid base + localized radial glows + faint grid.
   (No full-screen linear gradients — they band on projectors.) */
.ge-arena {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(1100px 620px at 18% -8%, rgba(34,211,238,0.10), rgba(8,6,15,0) 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(124,58,237,0.22), rgba(8,6,15,0) 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(255,45,155,0.16), rgba(8,6,15,0) 60%),
    var(--ge-bg);
  overflow-x: hidden;
}
.ge-arena::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(124,58,237,0.07) 1px, rgba(8,6,15,0) 1px),
    linear-gradient(90deg, rgba(124,58,237,0.07) 1px, rgba(8,6,15,0) 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 35%, #000 0%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0) 100%);
  z-index: 0;
}

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.5px; }

a { color: var(--ge-mint); text-decoration: none; }
a:hover { color: var(--ge-mint-bright); }

/* ---- Reusable bits ------------------------------------------------------- */
.ge-kicker {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  color: var(--ge-mint);
}

.ge-card {
  background: linear-gradient(180deg, var(--ge-surface), var(--ge-bg-2));
  border: 1px solid var(--ge-border);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}

.ge-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.4px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
}
.ge-btn:focus-visible { outline: 3px solid var(--ge-mint); outline-offset: 2px; }
.ge-btn:active { transform: translateY(1px) scale(0.99); }

.ge-btn--primary {
  background: var(--ge-mint);
  color: #07221d;
  box-shadow: var(--glow-mint);
}
.ge-btn--primary:hover { background: var(--ge-mint-bright); box-shadow: 0 0 38px rgba(91,255,224,0.6); }

.ge-btn--ghost {
  background: rgba(91,71,160,0.16);
  color: var(--ge-text);
  border-color: var(--ge-border-lt);
}
.ge-btn--ghost:hover { background: rgba(91,71,160,0.32); border-color: var(--ge-mint); }

.ge-btn--gold { background: var(--ge-gold); color: #2a1c00; box-shadow: var(--glow-gold); }
.ge-btn--gold:hover { filter: brightness(1.06); }

.ge-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

.ge-input, select.ge-input, textarea.ge-input {
  font-family: var(--font-body);
  font-size: 16px;
  width: 100%;
  padding: 14px 16px;
  background: var(--ge-bg-2);
  border: 1px solid var(--ge-border-lt);
  border-radius: var(--r);
  color: var(--ge-text);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ge-input::placeholder { color: var(--ge-text-mute); }
.ge-input:focus { outline: none; border-color: var(--ge-mint); box-shadow: var(--glow-mint); }

label { font-weight: 600; color: var(--ge-text-dim); font-size: 14px; }

.ge-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid var(--ge-border-lt); color: var(--ge-text-dim);
  background: rgba(91,71,160,0.14);
}
.ge-chip--live { color: var(--ge-bg); background: var(--ge-hot); border-color: transparent; }
.ge-chip--open { color: #07221d; background: var(--ge-mint); border-color: transparent; }
.ge-chip--gold { color: #2a1c00; background: var(--ge-gold); border-color: transparent; }

.ge-logo-glow { filter: drop-shadow(0 6px 22px rgba(46,230,192,0.35)); }

.live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; display: inline-block;
  box-shadow: 0 0 0 0 currentColor;
  animation: gePulse 1.6s infinite;
}
@keyframes gePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,45,155,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255,45,155,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,45,155,0); }
}

.ge-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}