/* =====================================================================
 * BZZT! 디자인 시스템 — 공용 토큰 + 본문 폰트
 * 루트 허브(index.html)와 microgames/ 두 페이지가 같이 씁니다.
 * url() 은 이 파일 기준으로 풀리므로 페이지 깊이와 무관하게 동작합니다.
 * ===================================================================== */
/* Pretendard — self-hosted (SIL/OFL). 본문 폰트만 자체 호스팅이고,
   타이틀(Black Han Sans)·라틴 라벨(Chakra Petch)·Phosphor 아이콘은 각 페이지에서 CDN 으로 받습니다. */
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pretendard-regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-display: swap;
  src: url(fonts/pretendard-bold.woff2) format('woff2');
}

/* ===== BZZT! design tokens (from Claude Design project export) ===== */
:root {
  /* ── 표면 (Surfaces) ─────────────────────────────── */
  --bzzt-void:        #05060f;
  --bzzt-abyss:       #0b1020;
  --bzzt-deep:        #0f172a;
  --bzzt-panel:       #111a2e;
  --bzzt-panel-hi:    #1b2440;
  --bzzt-slate:       #1e293b;

  /* ── 네온 (Neon core) ────────────────────────────── */
  --neon-violet:      #8b5cf6;
  --neon-violet-deep: #5b21b6;
  --neon-violet-lit:  #c4b5fd;
  --neon-magenta:     #ec4899;
  --neon-magenta-deep:#9d174d;
  --neon-magenta-lit: #f9a8d4;
  --neon-cyan:        #06b6d4;
  --neon-cyan-deep:   #0e7490;
  --neon-cyan-lit:    #67e8f9;

  /* ── 브랜드 / 보상 ───────────────────────────────── */
  --bhaptics-yellow:  #ffd400;
  --gold:             #facc15;
  --gold-lit:         #fde047;

  /* ── 시맨틱 ─────────────────────────────────────── */
  --ok:               #10b981;
  --ok-deep:          #047857;
  --ok-lit:           #6ee7b7;
  --fail:             #ef4444;
  --fail-deep:        #991b1b;
  --fail-lit:         #fca5a5;
  --warn:             #f59e0b;

  /* ── 텍스트 사다리 ──────────────────────────────── */
  --text-hi:          #ffffff;
  --text:             #e2e8f0;
  --text-mid:         #cbd5e1;
  --text-low:         #94a3b8;
  --text-faint:       #64748b;

  /* ── 선 ─────────────────────────────────────────── */
  --line:             rgba(148,163,184,0.22);
  --line-strong:      rgba(148,163,184,0.45);
  --line-violet:      rgba(139,92,246,0.55);
  --line-cyan:        rgba(6,182,212,0.55);

  /* ── 그라디언트 ─────────────────────────────────── */
  --grad-hero:   linear-gradient(135deg, var(--neon-violet), var(--neon-magenta));
  --grad-cool:   linear-gradient(145deg, #22d3ee, var(--neon-cyan-deep));
  --grad-ok:     linear-gradient(145deg, var(--ok), var(--ok-deep));
  --grad-fail:   linear-gradient(145deg, var(--fail), #b91c1c);
  --grad-panel:  linear-gradient(160deg, var(--bzzt-panel-hi), var(--bzzt-abyss));
  --grad-stage:  radial-gradient(ellipse at center, rgba(30,27,75,0.6), rgba(15,23,42,0.92));
  /* 로비 배경: 15초 순환 (소스의 bg-shift 계승) */
  --grad-lobby:  linear-gradient(-45deg, #1e1b4b, #0f172a, #4c1d95, #164e63, #0f172a);

  /* ── 시맨틱 별칭 ────────────────────────────────── */
  --surface-app:    var(--bzzt-abyss);
  --surface-panel:  var(--grad-panel);
  --surface-stage:  var(--grad-stage);
  --accent-primary: var(--neon-violet);
  --accent-play:    var(--neon-magenta);
  --accent-info:    var(--neon-cyan);
  --accent-reward:  var(--gold);
}

:root {
  --font-display: 'Black Han Sans', 'Pretendard', sans-serif;  /* 대형 타이틀 (한글 중심) */
  --font-arcade:  'Chakra Petch', 'Pretendard', sans-serif;     /* 라틴 대문자 라벨·스코어 */
  --font-ui:      'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-readout: 'Courier New', ui-monospace, monospace;    /* 계측기 LCD */

  --fs-hero:   88px;
  --fs-title:  44px;
  --fs-h2:     32px;
  --fs-h3:     24px;
  --fs-lg:     18px;
  --fs-body:   16px;
  --fs-sm:     14px;
  --fs-xs:     12px;

  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-body:   1.55;

  --ls-hero:   0.02em;
  --ls-arcade: 0.06em;
  --ls-key:    0.05em;

  --fw-body:    500;
  --fw-strong:  700;
  --fw-black:   900;
}

:root {
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-14: 56px;
  --s-18: 72px;

  --stage-w:  1920px;   /* 16:9 FHD 스테이지 — 뷰포트에 스케일 피팅 */
  --stage-h:  1080px;
  --content-max: 1680px;
  --hud-h:    40px;     /* 헤더 버튼·상태 필의 고정 높이 */
}

:root {
  /* ── 라운드 (5단계로 통일) ──────────────────────── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ── 청키 3D 리프트 (아케이드 버튼의 핵심) ───────── */
  --lift-violet:  0 6px 0 rgba(88,28,135,0.75),  0 12px 26px rgba(0,0,0,0.45);
  --lift-magenta: 0 6px 0 rgba(157,23,77,0.75),  0 12px 26px rgba(0,0,0,0.45);
  --lift-cyan:    0 6px 0 rgba(14,116,144,0.75), 0 12px 26px rgba(0,0,0,0.45);
  --lift-ok:      0 6px 0 rgba(4,120,87,0.75),   0 12px 22px rgba(0,0,0,0.4);
  --lift-fail:    0 6px 0 rgba(127,29,29,0.75),  0 12px 22px rgba(0,0,0,0.4);
  --lift-neutral: 0 4px 0 rgba(15,23,42,0.8),    0 8px 18px rgba(0,0,0,0.4);
  --lift-pressed: 0 1px 0 rgba(15,23,42,0.8),    0 3px 10px rgba(0,0,0,0.4);

  /* ── 글로우 ─────────────────────────────────────── */
  --glow-violet:  0 0 32px rgba(139,92,246,0.45);
  --glow-magenta: 0 0 32px rgba(236,72,153,0.45);
  --glow-cyan:    0 0 32px rgba(6,182,212,0.45);
  --glow-ok:      0 0 26px rgba(16,185,129,0.6);
  --glow-fail:    0 0 26px rgba(239,68,68,0.55);
  --glow-gold:    0 0 26px rgba(250,204,21,0.55);

  /* ── 내부 음영 ──────────────────────────────────── */
  --inset-deep:  inset 0 0 30px rgba(0,0,0,0.45);
  --inset-hair:  inset 0 1px 0 rgba(255,255,255,0.07);

  /* ── 텍스트 네온 ────────────────────────────────── */
  --text-glow-violet: 0 0 10px rgba(236,72,153,0.9), 0 0 22px rgba(139,92,246,0.7), 0 0 44px rgba(139,92,246,0.4);
  --text-glow-cyan:   0 0 10px rgba(6,182,212,0.9), 0 0 24px rgba(6,182,212,0.5);
  --text-glow-gold:   0 0 12px rgba(250,204,21,0.85), 0 0 28px rgba(245,158,11,0.5);

  /* ── 모션 ───────────────────────────────────────── */
  --ease-pop:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-gate: cubic-bezier(0.66, 0, 0.28, 1);
  --t-press:   0.08s;
  --t-hover:   0.15s;
  --t-scene:   0.36s;

  /* 상호작용 규칙: hover = translateY(-2px) + brightness(1.08)
     press = translateY(4px) + --lift-pressed
     disabled = opacity 0.45, cursor default, 리프트 유지 */
  --hover-rise:  translateY(-2px);
  --press-sink:  translateY(4px);
}