/* =====================================================================
 * Elysian Arcade — design tokens
 * Shared by the hub AND every mini-game (copy into a game's <style> or
 * link this file). Sleek modern minimal, on-brand with the main site
 * (Inter, violet accent, deep navy surface). Lasers pop on dark.
 *
 * Every game MUST theme from these variables so the arcade feels like
 * one product, not five bolted-together games.
 * ===================================================================== */
:root {
  /* Brand (mirrors the main site tokens) */
  --ec-accent:        #7c3aed;   /* primary violet */
  --ec-accent-2:      #a855f7;   /* lighter violet */
  --ec-accent-soft:   #7c6df0;
  --ec-accent-dark:   #5b21b6;

  /* Arcade surfaces (dark stage) */
  --arc-bg:           #07060f;
  --arc-surface:      #0f172a;
  --arc-surface-2:    #1b1438;
  --arc-card:         rgba(255,255,255,0.05);
  --arc-card-border:  rgba(255,255,255,0.10);

  /* Text */
  --arc-ink:          #f5f7fb;
  --arc-muted:        #9aa3b8;
  --arc-faint:        #6b7280;

  /* Semantic */
  --arc-good:         #34d399;
  --arc-bad:          #f43f5e;
  --arc-gold:         #fbbf24;
  --arc-info:         #22d3ee;

  /* Per-game accent — each game overrides --game-accent */
  --game-accent:      var(--ec-accent);

  /* Shape & motion */
  --arc-radius-sm:    10px;
  --arc-radius-md:    14px;
  --arc-radius-lg:    20px;
  --arc-radius-xl:    28px;
  --arc-shadow:       0 18px 50px rgba(124,58,237,0.35);
  --arc-ease:         cubic-bezier(.2,.8,.2,1);

  /* Type */
  --arc-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Helper surface for the stage background — games can use this as the
   <body>/canvas backdrop so transitions between hub and game are seamless. */
.arc-stage-bg {
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(124,58,237,0.18), transparent 60%),
    radial-gradient(900px 600px at 100% 110%, rgba(168,85,247,0.12), transparent 55%),
    linear-gradient(180deg, var(--arc-surface) 0%, #160f2e 55%, var(--arc-bg) 100%);
}

/* Standard primary button used by hub + games for visual consistency. */
.arc-btn {
  cursor: pointer; border: none; font-family: var(--arc-font);
  font-weight: 700; font-size: 16px; color: #fff;
  padding: 14px 32px; border-radius: 999px;
  background: linear-gradient(135deg, var(--game-accent) 0%, #c026d3 100%);
  box-shadow: 0 14px 40px rgba(124,58,237,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform .12s var(--arc-ease), box-shadow .12s var(--arc-ease);
}
.arc-btn:hover  { transform: translateY(-2px); }
.arc-btn:active { transform: translateY(1px) scale(.98); }

.arc-card {
  background: var(--arc-card); border: 1px solid var(--arc-card-border);
  border-radius: var(--arc-radius-lg);
}
