/* ══════════════════════════════════════════════════════════════
   NEW 2048 — 主题变量、方块配色、元素外观
   ══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* 底色 / 面板 */
  --c-bg: #070a14;
  --c-bg-2: #0b1020;
  --c-panel: rgba(19, 25, 44, 0.86);
  --c-panel-solid: #131a2c;
  --c-line: rgba(126, 152, 214, 0.16);
  --c-line-strong: rgba(126, 152, 214, 0.34);

  /* 文字 */
  --c-text: #e8eefc;
  --c-text-dim: #97a3c0;
  --c-text-faint: #66718c;

  /* 强调色 */
  --c-accent: #00e5ff;
  --c-accent-2: #a97bff;
  --c-gold: #ffc857;
  --c-danger: #ff4d6d;
  --c-ok: #37e59a;

  /* 评级色 */
  --r-nice: #e8eefc;
  --r-good: #5fd0ff;
  --r-great: #a97bff;
  --r-amazing: #ffc857;
  --r-unreal: #ff5f6d;

  /* 棋盘几何 */
  --gap: clamp(7px, 2.1vmin, 13px);
  --radius: clamp(8px, 2.2vmin, 14px);
  --speed-slide: 122ms;
  --speed-pop: 190ms;
  --speed-fade: 260ms;

  /* 字体 */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-num: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --shadow-panel: 0 24px 60px -18px var(--shadow-color);
  --shadow-tile: 0 6px 14px -6px var(--shadow-color);

  /* ── 主题变量默认值（= 霓虹裂隙皮肤）──────────────────────
     所有皮肤都是覆盖这些变量，组件样式本身不再写死颜色。 */
  --bg-glow-1: #14204a;
  --bg-glow-2: #2a1046;
  --grad-primary: linear-gradient(135deg, #00e5ff, #4d7cff 55%, #a97bff);
  --grad-text: linear-gradient(160deg, #fff, #7fe9ff 40%, #a97bff 75%, #ff2e63);
  --grad-progress: linear-gradient(90deg, #00e5ff, #a97bff, #ff2e63);
  --grad-energy: linear-gradient(90deg, #2e6bff, #00e5ff 60%, #b6f7ff);
  --glow-1: rgba(0, 229, 255, 0.18);
  --glow-2: rgba(169, 123, 255, 0.22);
  --accent-soft: rgba(0, 229, 255, 0.16);
  --accent-line: rgba(0, 229, 255, 0.45);
  --surface-weak: rgba(255, 255, 255, 0.04);
  --surface-mid: rgba(255, 255, 255, 0.09);
  --surface-card: rgba(13, 18, 33, 0.9);
  --cell-bg: rgba(255, 255, 255, 0.045);
  --tile-inset: rgba(255, 255, 255, 0.12);
  --shadow-color: rgba(0, 0, 0, 0.75);
  --board-bg-0: linear-gradient(160deg, #101728, #0a0e1c);
  --board-bg-1: linear-gradient(160deg, #10203a, #0a1020);
  --board-bg-2: linear-gradient(160deg, #142048, #0d1130);
  --board-bg-3: radial-gradient(120% 120% at 20% 0%, #1b1140, #06070f 70%);
  --board-bg-4: radial-gradient(130% 130% at 50% -10%, #150c33, #03040a 72%);
  --board-glow-0: rgba(0, 229, 255, 0);
  --board-glow-1: rgba(0, 229, 255, 0.16);
  --board-glow-2: rgba(169, 123, 255, 0.24);
  --board-glow-3: rgba(255, 200, 87, 0.24);
  --board-glow-4: rgba(255, 95, 109, 0.3);

  /* 宠物默认配色（= 霓虹皮肤） */
  --pet-body: #3ad6ff;
  --pet-bodyDark: #1b7fa8;
  --pet-belly: #d8f6ff;
  --pet-eye: #0a1220;
  --pet-cheek: #ff9ec4;
  --pet-accent: #a97bff;
}

/* 棋盘背景随分数升级：低分朴素 → 中分霓虹 → 高分赛博 → 超高分虚空
   （具体颜色由皮肤提供，这里只做阶段映射） */
#app[data-board-stage="0"] { --board-bg: var(--board-bg-0); --board-glow: var(--board-glow-0); }
#app[data-board-stage="1"] { --board-bg: var(--board-bg-1); --board-glow: var(--board-glow-1); }
#app[data-board-stage="2"] { --board-bg: var(--board-bg-2); --board-glow: var(--board-glow-2); }
#app[data-board-stage="3"] { --board-bg: var(--board-bg-3); --board-glow: var(--board-glow-3); }
#app[data-board-stage="4"] { --board-bg: var(--board-bg-4); --board-glow: var(--board-glow-4); }

/* ── 方块数值配色 ───────────────────────────────────────────── */
:root {
  --tile-text: #f4f8ff;
  --t-2: #2a3352;      --t-2-t: #c3d2f5;
  --t-4: #333f6d;      --t-4-t: #cfdcff;
  --t-8: #2f6fa8;
  --t-16: #2689b8;
  --t-32: #1fa393;
  --t-64: #35ad57;
  --t-128: #93bf2c;
  --t-256: #d9ae33;
  --t-512: #ea862c;
  --t-1024: #ef5a37;
  --t-2048: #ff2e63;
  --t-4096: #b14cff;
  --t-8192: #6a4dff;
  --t-16384: #00d5ff;
  --t-32768: #ff4dd2;
  --t-super: #ffd166;
}

/* ── 元素外观 ───────────────────────────────────────────────── */
:root {
  --el-fire: #ff7a29;
  --el-ice: #8fe3ff;
  --el-poison: #86ff5c;
  --el-star: #ffd75e;
  --el-thunder: #c08bff;
}