/* Half Slack — UI 设计令牌 v3：Boss Gaze Game UI
 * 业界最佳实践：Don't Get Caught / Popcorn Thief / Sip Simulator / Office Kissing
 */
:root {
  /* ===== 基础背景 ===== */
  --bg: #0a0e14;
  --bg-elevated: #11161d;
  --bg-overlay: rgba(10, 14, 20, 0.92);
  --bg-panel: rgba(17, 22, 29, 0.85);

  /* ===== 文字层级 ===== */
  --ink: #e8ecf1;
  --ink-dim: #9aa0ad;
  --ink-muted: #6b7280;
  --ink-inverse: #0a0e14;

  /* ===== 语义状态色（双通道：颜色 + 形状/位置）===== */
  --safe: #22c55e;
  --safe-glow: rgba(34, 197, 94, 0.4);
  --safe-ring: rgba(34, 197, 94, 0.15);

  --warning: #fbbf24;
  --warning-glow: rgba(251, 191, 36, 0.45);
  --warning-ring: rgba(251, 191, 36, 0.15);

  --danger: #ef4444;
  --danger-glow: rgba(239, 68, 68, 0.5);
  --danger-ring: rgba(239, 68, 68, 0.15);

  --slack: #f97316;
  --slack-glow: rgba(249, 115, 22, 0.4);

  --multiplier: #a855f7;
  --multiplier-glow: rgba(168, 85, 247, 0.45);

  --accent: #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.4);

  /* ===== 中性边框/分割 ===== */
  --line: #1e293b;
  --line-hover: #334155;
  --line-focus: #3b82f6;

  /* ===== 面板层级 ===== */
  --panel: #111827;
  --panel-hover: #1f2937;
  --panel-border: #1f2937;

  /* ===== 间距系统 (4px 基准) ===== */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ===== 圆角阶梯 ===== */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px; --r-full: 50%;

  /* ===== 阴影分层 ===== */
  --sh-1: 0 1px 2px rgba(0,0,0,.3);
  --sh-2: 0 4px 8px rgba(0,0,0,.35);
  --sh-3: 0 8px 24px rgba(0,0,0,.4);
  --sh-4: 0 16px 48px rgba(0,0,0,.5);
  --sh-glow-safe: 0 0 16px rgba(34,197,94,.35);
  --sh-glow-danger: 0 0 20px rgba(239,68,68,.45);
  --sh-glow-warning: 0 0 18px rgba(251,191,36,.4);
  --sh-glow-slack: 0 0 16px rgba(249,115,22,.35);
  --sh-glow-mult: 0 0 16px rgba(168,85,247,.35);

  /* ===== 触控尺度 ===== */
  --tap: 44px; --tap-lg: 48px; --tap-xl: 56px;

  /* ===== 字体系统 ===== */
  --font-sans: 'Inter', 'SF Pro Text', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --fs-xs: clamp(10px, 0.85vw, 11px);
  --fs-sm: clamp(11px, 0.95vw, 12px);
  --fs-base: clamp(12px, 1.05vw, 13px);
  --fs-md: clamp(13px, 1.15vw, 14px);
  --fs-lg: clamp(15px, 1.3vw, 17px);
  --fs-xl: clamp(18px, 1.6vw, 20px);
  --fs-2xl: clamp(22px, 2vw, 26px);
  --fs-3xl: clamp(28px, 3vw, 36px);
  --fs-4xl: clamp(36px, 4vw, 48px);
  --fs-5xl: clamp(44px, 5vw, 60px);

  /* ===== 动效系统 ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 100ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --dur-slower: 400ms;

  /* ===== Z-index 层级 ===== */
  --z-bg: 0;
  --z-game: 10;
  --z-hud: 100;
  --z-danger: 200;      /* 危险指示器最高 */
  --z-toast: 300;
  --z-modal: 400;
  --z-splash: 500;

  /* ===== 安全区 ===== */
  --safe-t: max(env(safe-area-inset-top), var(--sp-4));
  --safe-b: max(env(safe-area-inset-bottom), var(--sp-4));
  --safe-l: max(env(safe-area-inset-left), var(--sp-4));
  --safe-r: max(env(safe-area-inset-right), var(--sp-4));

  /* ===== 游戏专用 Canvas 颜色 ===== */
  --game-safe: #22c55e;
  --game-danger: #ef4444;
  --game-warning: #fbbf24;
  --game-slack: #f97316;
  --game-mult: #a855f7;
  --game-accent: #3b82f6;
}

/* ===== 基础重置 ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* ===== 触控目标最小尺寸 ===== */
button, .btn, [role="button"], .icon-btn, .seg-item, select, input, .touch-target {
  min-height: var(--tap);
  min-width: var(--tap);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

/* ===== 焦点可见 ===== */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ===== 通用工具类 ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.text-center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }