/* ==========================================================================
   MEGA63 Live — shared design tokens + primitives
   ONE look across landing / room / overlay / host-widget / status.
   Loaded via <link rel="stylesheet" href="/theme.css"> on every page.
   No external fonts (offline-safe): condensed system stack for display,
   system sans for body. Only external dep in the product is hls.js.
   ========================================================================== */

:root {
  /* --- brand palette (near-black + gold) --- */
  --gold:      #B0842E;   /* primary gold  */
  --gold-lite: #E8C877;   /* bright gold accent / highlights */
  --gold-deep: #8A6316;   /* darker gold for gradients/hover */

  --bg:      #0b0a08;     /* app background (near-black, warm) */
  --panel:   #161410;     /* raised surface */
  --panel-2: #1d1a14;     /* input / nested surface */
  --line:    #2a251b;     /* hairline borders */

  --text:  #e8dcc0;       /* primary text (warm off-white) */
  --muted: #8a806a;       /* secondary text */
  --faint: #54524c;       /* footnotes */

  /* --- status colors --- */
  --live:    #ff3b2f;     /* LIVE dot / red */
  --deposit: #F5B335;     /* deposit events */
  --win:     #2fbf71;     /* win events */

  /* --- shape + spacing scale --- */
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 14px;
  --sp-4: 20px;
  --sp-5: 28px;

  /* --- typography --- */
  --font-display: "Oswald", "Bebas Neue", "Franklin Gothic Medium",
                  "Arial Narrow", Impact, system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;

  --shadow-soft: 0 6px 22px #0008;
  --shadow-lift: 0 18px 50px #0009;
}

/* --- reset (pages also carry their own, this is the shared baseline) --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

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

/* ==========================================================================
   Shared primitives — used by name across pages
   ========================================================================== */

/* display / heading treatment */
.u-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .02em;
}

/* section eyebrow label */
.u-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* wordmark: MEGA63 with gold 63 */
.u-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text);
}
.u-wordmark span { color: var(--gold-lite); }

/* LIVE / OFFLINE badge (pill) */
.u-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 800; letter-spacing: .05em;
  color: #fff; background: #000a;
  box-shadow: 0 0 0 1.5px var(--gold);
}
.u-badge .u-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 3px #ff3b2f44;
}
.u-badge.is-off { box-shadow: 0 0 0 1.5px var(--muted); color: var(--muted); }
.u-badge.is-off .u-dot { background: var(--muted); box-shadow: none; }

/* primary gold button */
.u-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 18px;
  background: var(--gold); color: #1a1206;
  border: 0; border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 14px; font-weight: 800;
  cursor: pointer; transition: background .15s, transform .1s;
}
.u-btn:hover { background: var(--gold-lite); }
.u-btn:active { transform: translateY(1px); }
.u-btn:disabled { opacity: .45; cursor: default; }

/* secondary / ghost button */
.u-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 16px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.u-btn-ghost:hover { border-color: var(--gold); color: var(--gold-lite); }

/* footer bar */
.u-footer {
  color: var(--faint); font-size: 11px; text-align: center;
  letter-spacing: .04em; line-height: 1.6;
}
.u-footer .u-rule {
  width: 40px; height: 2px; background: var(--gold);
  margin: 0 auto var(--sp-3); border-radius: 2px; opacity: .7;
}

/* ==========================================================================
   Accessibility baselines — apply everywhere
   ========================================================================== */

/* visible, on-brand focus ring for keyboard users */
:focus-visible {
  outline: 2px solid var(--gold-lite);
  outline-offset: 2px;
  border-radius: 4px;
}

/* honour reduced-motion: kill non-essential animation/transition */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}