/* =========================================================
   ELVIS BRAINSTORM 艾維斯燒腦所 — 設計系統 Design Tokens
   風格定調：「深空電競競技場」— 深邃背景 + 高彩霓虹五色系統
   六角形語言呼應品牌 Logo，動畫聚焦於互動回饋而非裝飾
   ========================================================= */

:root {
  /* ===== 色彩系統 ===== */
  --bg-void: #0E0C24;           /* 主背景：深邃太空紫黑 */
  --bg-surface: #181530;         /* 卡片表面 */
  --bg-surface-2: #211D42;       /* 卡片表面（懸浮/高層） */
  --bg-surface-3: #2A2454;       /* 輸入框等更淺表面 */

  --neon-purple: #7B5CFF;        /* AI對決 主色 */
  --neon-cyan: #00D4FF;          /* 急速競技 主色 */
  --neon-pink: #FF6B9D;          /* 字詞迷城 主色 */
  --neon-gold: #FFD166;          /* 腦力工廠 主色 */
  --neon-green: #00E28A;         /* 接龍大亂鬥 主色 */
  --neon-red: #FF5C7A;           /* 錯誤/警示 */
  --neon-arena-a: #B026FF;       /* 成語填字擂台 主色（漸層起點：electric紫） */
  --neon-arena-b: #FF2E9A;       /* 成語填字擂台 主色（漸層終點：螢光洋紅） */
  --gradient-arena: linear-gradient(135deg, var(--neon-arena-a), var(--neon-arena-b));
  --glow-arena: 0 0 28px rgba(176,38,255,0.55), 0 0 50px rgba(255,46,154,0.25);

  --text-primary: #F5F3FF;
  --text-secondary: #B8B2E0;
  --text-muted: #7A749E;

  --border-soft: rgba(255,255,255,0.08);
  --border-glow: rgba(123,92,255,0.4);

  /* ===== 字體 ===== */
  --font-display: "Baloo 2", "Varela Round", "Noto Sans TC", sans-serif;
  --font-body: "Noto Sans TC", "Inter", -apple-system, sans-serif;

  /* ===== 間距 ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ===== 圓角 ===== */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ===== 陰影/發光 ===== */
  --glow-purple: 0 0 24px rgba(123,92,255,0.5);
  --glow-cyan: 0 0 24px rgba(0,212,255,0.5);
  --glow-pink: 0 0 24px rgba(255,107,157,0.5);
  --glow-gold: 0 0 24px rgba(255,209,102,0.5);
  --glow-green: 0 0 24px rgba(0,226,138,0.5);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.35);

  --transition-fast: 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg-void);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(123,92,255,0.15) 0%, transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(0,212,255,0.12) 0%, transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(255,107,157,0.10) 0%, transparent 45%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

h1, h2, h3, h4, .elvis-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

::selection { background: var(--neon-purple); color: #fff; }

/* 可及性：鍵盤焦點可見 */
:focus-visible {
  outline: 3px solid var(--neon-cyan);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

.elvis-main {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-8);
}

.elvis-icon-sm svg { width: 18px; height: 18px; display: block; }
.elvis-icon-md svg { width: 28px; height: 28px; display: block; }
.elvis-icon-lg svg { width: 48px; height: 48px; display: block; }

/* 星星背景動畫層（首頁氛圍用） */
.elvis-starfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.elvis-star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.5;
  animation: elvis-twinkle 3s ease-in-out infinite;
}
@keyframes elvis-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.4); }
}