/*
 * anubis-tokens.css — the one visual vocabulary for every SpawnDie web surface.
 *
 * This file is loaded by THREE kinds of page:
 *   1. the ring hub (hub/playtest.html)
 *   2. the ring's own pages (/games/, /profile/)
 *   3. EVERY GAME PAGE on the ring, via the injected social shell
 *
 * Because of (3) it is a hard law here that NOTHING in this file may style a bare element.
 * A game owns its own document; the shell is a guest. Every rule is class-scoped under the
 * `anb-` prefix, and the custom properties are declared on `.anb-root` rather than `:root`
 * so a game's own `--gold` (or anything else) can never be captured or clobbered.
 *
 * Brand: docs/design/brand/anubis-logo-sheet-v1.png — flat gold on engine-dark.
 */

.anb-root {
  /* ── ink: the engine-dark stack ─────────────────────────────────────── */
  --anb-abyss: #07090c;
  --anb-base: #0b0d10;
  --anb-surface: #11151b;
  --anb-raised: #171c24;
  --anb-overlay: #1e242e;

  /* ── gold: the mark's colour, and the only accent that carries weight ─ */
  --anb-gold: #c9a64a;
  --anb-gold-hi: #e8c97a;
  --anb-gold-dim: #8a7233;
  --anb-gold-ink: #14100a;

  /* ── type ────────────────────────────────────────────────────────────── */
  --anb-text: #ede8dc;
  --anb-muted: #99a2b1;
  --anb-faint: #626b79;

  /* ── state ───────────────────────────────────────────────────────────── */
  --anb-live: #3fd0b8;
  --anb-away: #6b7280;
  --anb-danger: #f0616d;
  --anb-mp: #a78bfa;

  /* ── line + shadow ───────────────────────────────────────────────────── */
  --anb-line: rgba(201, 166, 74, 0.16);
  --anb-line-soft: rgba(237, 232, 220, 0.08);
  --anb-shadow: 0 18px 48px rgba(0, 0, 0, 0.62);
  --anb-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.5);

  /* ── geometry: the mark is angular, so the UI is too — small radii only ─ */
  --anb-r-sm: 3px;
  --anb-r: 6px;
  --anb-r-lg: 10px;

  /* ── type stacks ─────────────────────────────────────────────────────── */
  --anb-font: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --anb-font-display: 'Syne', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --anb-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* the shell floats above game canvases, HUDs and the greybox banner alike */
  --anb-z: 2147483000;

  color: var(--anb-text);
  font-family: var(--anb-font);
}

/* ── surfaces ──────────────────────────────────────────────────────────── */

.anb-panel {
  background: linear-gradient(180deg, var(--anb-surface), var(--anb-base));
  border: 1px solid var(--anb-line);
  border-radius: var(--anb-r-lg);
  box-shadow: var(--anb-shadow);
}

.anb-card {
  background: var(--anb-surface);
  border: 1px solid var(--anb-line-soft);
  border-radius: var(--anb-r);
  transition: border-color 140ms ease, transform 140ms ease;
}

.anb-card:hover {
  border-color: var(--anb-line);
  transform: translateY(-2px);
}

/* ── the eyebrow: small, tracked-out, gold — the house label style ─────── */

.anb-eyebrow {
  font: 600 10px/1.2 var(--anb-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--anb-gold-dim);
}

.anb-title {
  font-family: var(--anb-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--anb-text);
  margin: 0;
}

/* ── buttons ───────────────────────────────────────────────────────────── */

.anb-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--anb-r-sm);
  border: 1px solid var(--anb-line);
  background: transparent;
  color: var(--anb-text);
  font: 600 12px/1 var(--anb-font);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.anb-btn:hover:not(:disabled) {
  background: rgba(201, 166, 74, 0.1);
  border-color: var(--anb-gold-dim);
}

.anb-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.anb-btn-primary {
  background: linear-gradient(180deg, var(--anb-gold-hi), var(--anb-gold));
  border-color: var(--anb-gold);
  color: var(--anb-gold-ink);
  text-transform: uppercase;
}

.anb-btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #f3d996, var(--anb-gold-hi));
  border-color: var(--anb-gold-hi);
  color: var(--anb-gold-ink);
}

.anb-btn-ghost {
  border-color: transparent;
  color: var(--anb-muted);
  padding: 6px 8px;
}

.anb-btn-ghost:hover:not(:disabled) {
  color: var(--anb-text);
  background: rgba(237, 232, 220, 0.06);
  border-color: transparent;
}

.anb-btn-danger:hover:not(:disabled) {
  border-color: var(--anb-danger);
  color: var(--anb-danger);
  background: rgba(240, 97, 109, 0.08);
}

/* ── badges ────────────────────────────────────────────────────────────── */

.anb-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--anb-line-soft);
  font: 600 9px/1.5 var(--anb-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--anb-muted);
  white-space: nowrap;
}

/* the multiplayer mark: the one place violet is allowed, so MP reads instantly */
.anb-badge-mp {
  color: var(--anb-mp);
  border-color: rgba(167, 139, 250, 0.36);
  background: rgba(167, 139, 250, 0.1);
}

.anb-badge-solo {
  color: var(--anb-faint);
}

.anb-badge-gold {
  color: var(--anb-gold);
  border-color: rgba(201, 166, 74, 0.34);
  background: rgba(201, 166, 74, 0.09);
}

/* ── presence dot ──────────────────────────────────────────────────────── */

.anb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--anb-away);
  flex: none;
}

.anb-dot-live {
  background: var(--anb-live);
  box-shadow: 0 0 0 3px rgba(63, 208, 184, 0.16);
}

.anb-dot-ingame {
  background: var(--anb-gold);
  box-shadow: 0 0 0 3px rgba(201, 166, 74, 0.18);
}

/* ── the mark ──────────────────────────────────────────────────────────── */

.anb-mark {
  display: block;
  fill: var(--anb-gold);
  flex: none;
}

/* ── scrollbar, scoped so a game's own scrollers are untouched ─────────── */

.anb-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--anb-gold-dim) transparent;
}

.anb-scroll::-webkit-scrollbar { width: 8px; }
.anb-scroll::-webkit-scrollbar-track { background: transparent; }
.anb-scroll::-webkit-scrollbar-thumb {
  background: rgba(201, 166, 74, 0.28);
  border-radius: 999px;
}

/* ── motion ────────────────────────────────────────────────────────────── */

@keyframes anb-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes anb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

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