/**
 * theme.css — Artecks MiniGames shared design system
 * Link this in <head>, BEFORE each page's own <style> block, so page-specific
 * rules can still override where a game genuinely needs to.
 *
 * Consolidated from the per-game :root blocks and hardcoded color values
 * that had drifted across the 14 game pages (see dead-code-audit.md-style
 * survey — only 2048/index.html and Snake/index.html defined :root at all;
 * everything else hardcoded the same handful of values inline). Values here
 * are the majority/most-used ones found in the existing pages, not new
 * choices — this is a consolidation, not a redesign.
 */

:root {
  /* Core palette */
  --accent: #a855f7;
  --accent-dark: #7c3aed;       /* hover/pressed state for accent buttons */
  --accent-dim: rgba(168, 85, 247, 0.15);
  --accent-glow: rgba(168, 85, 247, 0.4);

  --bg: #080614;                /* majority background across all pages */
  --surface: rgba(255, 255, 255, 0.04);   /* card/tile fill */
  --surface-hover: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);

  /* Text tiers */
  --text: #fff;
  --text-dim: rgba(255, 255, 255, 0.4);   /* secondary copy, labels */
  --text-faint: rgba(255, 255, 255, 0.22); /* de-emphasized copy — see Phase 4 contrast audit before using for body text */

  /* Semantic */
  --success: #4ade80;
  --danger: #f87171;
  --warning: #f59e0b;

  /* Glass panel treatment */
  --glass-bg: rgba(8, 6, 20, 0.88);
  --glass-blur: 12px;
}

/* ── Shared topnav chrome ─────────────────────────────────────────────
 * Markup contract:
 * <nav class="topnav">
 *   <a class="topnav-back" href="../">
 *     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
 *          stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
 *     Games
 *   </a>
 *   <div class="topnav-center">
 *     <div class="topnav-dot"></div>
 *     <span class="topnav-brand">ARTECKS</span>
 *     <span class="topnav-game">Game Name</span>
 *   </div>
 *   <div class="topnav-spacer"></div>
 * </nav>
 */
.topnav {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: rgba(7, 5, 15, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 1rem;
}
.topnav-back {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  /* 44x44 minimum tap target — see Phase 5 mobile audit */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.topnav-back:hover { color: var(--accent); }
.topnav-back svg { width: 14px; height: 14px; }
.topnav-center {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.75rem;
}
.topnav-dot { display: none; }
/* Matches the hub's .nav-brand wordmark exactly (Artecks Games/index.html)
   so the same brand identity appears on every individual game page, not
   just the hub. */
.topnav-brand { font-size: 1rem; font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; }
.topnav-brand-accent { color: var(--accent); }
.topnav-game  { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-dim); }
.topnav-game::before { content: "·"; margin-right: 0.5rem; color: var(--text-faint); }
.topnav-spacer { flex: 1; }

/* ── Shared glass-card treatment ───────────────────────────────────────
 * For anything currently styled as a dark panel: modals, difficulty
 * cards, celebration overlays, stat/score boxes. Apply alongside a
 * game's own layout classes (position/size stay game-specific); this
 * class only owns the "glass" look — blur, border, internal glow.
 */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.06) inset,
    0 8px 32px rgba(0, 0, 0, 0.4);
}
.glass-card.accent-glow {
  border-color: rgba(168, 85, 247, 0.25);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.1) inset,
    0 0 32px rgba(168, 85, 247, 0.12),
    0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ── Low-emphasis "back to hub" link ──────────────────────────────────
 * For game-over / no-reward-earned states, alongside the primary restart
 * button. Mirrors the ar-cel-btn-tertiary treatment game-api.js's reward
 * celebration overlay already uses for its Main Menu link, so both exit
 * paths look and feel the same regardless of which screen a game landed
 * on. Usage: <a class="menu-link" href="../">Main Menu</a>
 */
.menu-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.menu-link:hover { color: var(--text); }

/* ── Keyboard focus states (WCAG 2.1.1) ───────────────────────────────
 * :focus-visible only shows the ring for keyboard/assistive-tech focus,
 * not mouse clicks, so it doesn't add visual noise for mouse/touch users.
 * Covers the shared nav/link/card components here; games with their own
 * bespoke buttons should add the same treatment to those locally.
 */
.topnav-back:focus-visible,
.menu-link:focus-visible,
.game-card:focus-visible,
.platform-card:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
