/* ============================================================
   游戏门户大厅 · Design Tokens v1.0
   视觉方向：暗夜霓虹 Lounge（统一外壳 × 专属情绪）
   作者：视频导演（美术）｜ 2026-09-27
   ------------------------------------------------------------
   用法：
   1. 全局底座（色彩/字体/间距/圆角/阴影/动效）在 :root 定义，
      所有页面共用，直接引用这些变量即可。
   2. 每款游戏页面在根容器挂对应主题类名（.theme-xxx），
      只需覆盖 --game / --game-glow / --game-deep 三个变量即可换肤，
      零改结构。
   3. 变量命名与 public/style.css 语义对齐：背景/面板/文字/强调分层一致，
      老页面硬编码色值迁移时按注释映射替换。
   ============================================================ */

:root {
  /* ---------- 色彩 · 全局底座（所有页面共用） ---------- */
  --bg-deep: #0A0E17;                 /* 深空黑 · 页面背景（原 body #141018 的升级映射） */
  --bg-grad: #101A2B;                 /* 藏青 · 背景渐变端 */
  --bg-soft: #0E1524;                 /* 次级背景（工具栏/侧栏/输入容器） */
  --panel: #16202E;                   /* 深藏青 · 面板（原 .panel 底 rgba(30,26,40,.92) 的升级映射） */
  --panel-2: #1E2A3C;                 /* 面板高亮层（hover 面板/次按钮底） */
  --panel-glass: rgba(22, 32, 46, 0.72); /* 玻璃面板（悬浮卡片） */
  --text-hi: #E9EEF5;                 /* 主文字（原 #e8e3d5 的升级映射） */
  --text-mid: #B6C2D2;                /* 次要文字（原 #ccc/#9f9a8c 的升级映射） */
  --text-low: #7C8AA0;                /* 弱化文字（原 #8a8578 的升级映射） */
  --line: rgba(148, 170, 200, 0.16);  /* 分割线 / 弱描边 */
  --line-strong: rgba(148, 170, 200, 0.28); /* 强调描边 / hover 边框 */
  --accent: #3BD8C4;                  /* 全局主色 · 青湖蓝（大厅/通用导航/在线状态） */
  --accent-dim: rgba(59, 216, 196, 0.14);   /* 主色弱底（标签底/提示底） */
  --ok: #34D399;                      /* 成功 / 在线 / 猜对 */
  --warn: #FBBF24;                    /* 警告 / 倒计时紧张 */
  --danger: #F87171;                  /* 危险 / 报错 / 血量 */

  /* ---------- 字体 ---------- */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 12px;      /* 辅助标签 / 徽标 */
  --fs-sm: 13px;      /* 次要说明 / 玩家名 */
  --fs-md: 15px;      /* 正文 / 按钮 */
  --fs-lg: 18px;      /* 区块标题 */
  --fs-xl: 24px;      /* 页面标题 */
  --fs-2xl: 32px;     /* 大标题 / 结算 */
  --fs-hero: 44px;    /* Hero / 首屏 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* ---------- 间距（4px 基准） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---------- 圆角 ---------- */
  --radius-sm: 8px;       /* 输入框 / 工具小按钮 */
  --radius-md: 12px;      /* 主按钮 / 控件 / 工具条 */
  --radius-lg: 16px;      /* 卡片 / 面板 / 弹窗（原 .panel 16px 对齐） */
  --radius-full: 999px;   /* 胶囊标签 / 头像 / 状态点 */

  /* ---------- 阴影 ---------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 20px var(--game-glow, rgba(59, 216, 196, 0.25)); /* 主题光晕，跟随 --game-glow */

  /* ---------- 动效曲线与时长 ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* 进场 / 卡片上浮 */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹出 / 徽标 / 结算跳字 */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);    /* 标准反馈 / 颜色过渡 */
  --dur-fast: 120ms;    /* hover / 按下 */
  --dur-base: 220ms;    /* 常规反馈 / 倒计时变色 */
  --dur-slow: 380ms;    /* 转场 / 面板进出 */
  --dur-slower: 600ms;  /* 结算演出 / 称号弹出 */

  /* ---------- 游戏主题色（默认 = 门户主色；每款游戏覆盖下面 3 项即换肤） ---------- */
  --game: #3BD8C4;                               /* 主题色：主按钮/选中态/高亮 */
  --game-glow: rgba(59, 216, 196, 0.35);         /* 主题光晕 / 描边 / 阴影 */
  --game-deep: linear-gradient(135deg, #3BD8C4, #0F766E); /* 主按钮渐变底 */
}

/* ============================================================
   六款游戏主题变量（页面根容器挂类名，如 <body class="theme-draw">）
   换肤只变这三个变量，不改结构。
   ============================================================ */
.theme-dungeon    { --game: #F97316; --game-glow: rgba(249, 115, 22, 0.35); --game-deep: linear-gradient(135deg, #F97316, #B45309); }
.theme-gobang     { --game: #2DD4A7; --game-glow: rgba(45, 212, 167, 0.35); --game-deep: linear-gradient(135deg, #2DD4A7, #0F766E); }
.theme-undercover { --game: #8B5CF6; --game-glow: rgba(139, 92, 246, 0.35); --game-deep: linear-gradient(135deg, #8B5CF6, #4C1D95); }
.theme-chengyu    { --game: #E5484D; --game-glow: rgba(229, 72, 77, 0.35);  --game-deep: linear-gradient(135deg, #E5484D, #991B1B); }
.theme-doudizhu   { --game: #F5A623; --game-glow: rgba(245, 166, 35, 0.35); --game-deep: linear-gradient(135deg, #F5A623, #B45309); }
.theme-draw       { --game: #FF6B9D; --game-glow: rgba(255, 107, 157, 0.35); --game-deep: linear-gradient(135deg, #FF6B9D, #F43F5E); }
.theme-ludo       { --game: #5A8AE0; --game-glow: rgba(90, 138, 224, 0.35); --game-deep: linear-gradient(135deg, #5A8AE0, #2E5BB8); }
.theme-fireice    { --game: #F43F5E; --game-glow: rgba(244, 63, 94, 0.35); --game-deep: linear-gradient(135deg, #F43F5E, #0EA5E9); }

/* ============================================================
   统一组件基类（DS1号 可 import 后直接用，也可覆盖细节）
   全部消费上面的 token；不需要的类可不引入。
   ============================================================ */

/* 页面底色（暗夜渐变） */
.app-bg {
  background:
    radial-gradient(1200px 520px at 15% -8%, rgba(59, 216, 196, 0.08), transparent 60%),
    radial-gradient(1000px 500px at 90% 4%, var(--game-glow, rgba(139, 92, 246, 0.08)), transparent 55%),
    linear-gradient(160deg, var(--bg-deep), var(--bg-grad) 60%, var(--bg-deep));
}

/* 主按钮（主题色渐变 + 悬浮光晕） */
.btn-primary {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--game-deep);
  border: 0;
  border-radius: var(--radius-md);
  padding: 12px 26px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-standard), filter var(--dur-base) var(--ease-standard);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
  filter: brightness(1.08);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

/* 次按钮 */
.btn-secondary {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-hi);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 26px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out);
}
.btn-secondary:hover { border-color: var(--line-strong); background: var(--panel-2); transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(0) scale(0.98); }

/* 输入框 */
.input {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--text-hi);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.input::placeholder { color: var(--text-low); }
.input:focus {
  outline: none;
  border-color: var(--game);
  box-shadow: 0 0 0 3px var(--game-glow);
}

/* 面板 / 卡片 */
.card {
  background: linear-gradient(180deg, rgba(22, 32, 46, 0.9), rgba(13, 20, 33, 0.92));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--shadow-glow); border-color: var(--game-glow); }

/* 胶囊标签（多人联机 / 状态徽标） */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--game);
  background: var(--accent-dim);
  border: 1px solid var(--game-glow);
  border-radius: var(--radius-full);
  padding: 4px 12px;
}

/* 系统提示 Toast */
.toast {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--text-hi);
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 12px 22px;
  box-shadow: var(--shadow-md);
  animation: toast-in var(--dur-slow) var(--ease-out);
}
.toast.ok    { border-color: var(--ok); }
.toast.warn  { border-color: var(--warn); }
.toast.danger{ border-color: var(--danger); }

/* ---------- 基础动效关键帧（供 A4 演出规范引用） ---------- */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.86); }
  60%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 10px var(--game-glow); }
  50%      { box-shadow: 0 0 26px var(--game-glow); }
}
@keyframes float-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-pop     { animation: pop-in var(--dur-slow) var(--ease-spring) both; }
.anim-float   { animation: float-up var(--dur-slow) var(--ease-out) both; }
.anim-glow    { animation: glow-pulse 2.4s ease-in-out infinite; }

/* 动效偏好：减少动态（无障碍） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}