:root {
  --size: min(calc(100vw - 28px), calc(100vh - 170px), 760px);
  --ink: #e4f4ff;
  --muted: #7f9ab8;
  --accent: #7fe3ff;
  --spd: 1;                 /* 游戏速度倍率，JS 切换 1 / 2；所有游戏动效时长 = ms / var(--spd) */
  --deep: #0b2a4a;          /* 浅色方块上的深字色：深蓝，不用棕色 */
}
@supports (height: 100dvh) {
  :root { --size: min(calc(100vw - 28px), calc(100dvh - 170px), 760px); }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #03091a;
  color: var(--ink);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: radial-gradient(120% 70% at 50% 0%, #0d2b52 0%, #061429 45%, #02060f 100%);
  background-color: #03091a;
}

button { font-family: inherit; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#app {
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom));
}

/* ---------- 顶部 ---------- */
.top {
  width: var(--size);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brand { display: flex; align-items: baseline; gap: 8px; }
.brand h1 {
  margin: 0;
  font-size: 30px;
  letter-spacing: 0.04em;
  color: #9fe8ff;
  text-shadow: 0 0 18px rgba(90, 200, 255, 0.5);
}
.brand span { font-size: 12px; color: var(--muted); letter-spacing: 0.12em; }

.scores { display: flex; gap: 8px; }

.sbox {
  min-width: 76px;
  padding: 6px 10px 5px;
  border-radius: 12px;
  text-align: center;
  background: rgba(12, 40, 72, 0.62);
  border: 1px solid rgba(120, 200, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sbox span {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.sbox b {
  display: block;
  font-size: 20px;
  line-height: 1.25;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.sbox.bump { animation: bump 0.28s ease-out; }

@keyframes bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ---------- 工具栏 ---------- */
.toolbar {
  width: var(--size);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.toolbar button {
  padding: 9px 6px;
  font-size: 13px;
  color: #d2ecff;
  background: linear-gradient(180deg, rgba(40, 104, 164, 0.6), rgba(18, 52, 94, 0.7));
  border: 1px solid rgba(130, 210, 255, 0.3);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.2s ease;
}
.toolbar button:active { transform: scale(0.95); }
.toolbar button:disabled { opacity: 0.4; cursor: default; }
.toolbar button[aria-pressed="false"] { opacity: 0.55; }

/* ---------- 棋盘（5x5：格子 = 1/5 棋盘宽） ---------- */
.stage { flex: none; display: flex; }

.shaker {
  position: relative;
  width: var(--size);
  height: var(--size);
  will-change: transform;
}

/* 不设 overflow，飘字和连击光效可以越过棋盘边缘 */
.board {
  position: relative;
  overflow: visible;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  background: radial-gradient(120% 90% at 50% 0%, #123a6a 0%, #0a2246 55%, #071933 100%);
  box-shadow:
    inset 0 0 0 1px rgba(140, 210, 255, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.07),
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 0 90px rgba(40, 140, 255, 0.14);
  touch-action: none;
}

.cells, .tiles {
  position: absolute;
  inset: 3%;
}

.popups, .fx, .over {
  position: absolute;
  inset: 0;
}

.fx {
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.cell {
  position: absolute;
  left: 0;
  top: 0;
  width: 20%;
  height: 20%;
}
.cell i {
  position: absolute;
  inset: 5%;
  border-radius: 16%;
  background: rgba(110, 180, 235, 0.07);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(150, 220, 255, 0.06);
}

/* 方块：外层负责位移（transition），内层负责缩放动画 */
.tile {
  position: absolute;
  left: 0;
  top: 0;
  width: 20%;
  height: 20%;
  z-index: 2;
  transition: transform calc(130ms / var(--spd)) cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}
.tile.gone { z-index: 1; }

.face {
  position: absolute;
  inset: 5%;
  border-radius: 16%;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: inline-size;   /* 字号按方块宽度（cqw）自适应 */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -5px 0 rgba(0, 0, 0, 0.14),
    0 10px 22px rgba(0, 0, 0, 0.32);
}
.face .num {
  position: relative;
  z-index: 2;
  display: block;
  white-space: nowrap;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  /* 单一纯色文字 + 一层柔和外发光，不做描边 */
  text-shadow: 0 0 8px var(--glow, rgba(255, 255, 255, 0.4));
  /* 旧浏览器兜底；支持 cqw 的浏览器用下一行 */
  font-size: calc(var(--size) * 0.05);
  /* 按字符数（--len）压缩：「128k」「1.5m」等长文本保持在方块内 */
  font-size: min(42cqw, calc(118cqw / var(--len, 2)));
}

/* ---------- 配色档位（与 game.js 的 classFor / PAL / HI 一一对应） ---------- */

/* 2 ~ 512：蓝白渐变（保留） */
.face.v2    { background: linear-gradient(160deg, #ffffff, #cfeeff); color: #1c4c74; --glow: #bfe9ff; }
.face.v4    { background: linear-gradient(160deg, #e6f9ff, #a8e4ff); color: #17456b; --glow: #9fe0ff; }
.face.v8    { background: linear-gradient(160deg, #a6e7ff, #62c9f5); color: #0b3556; --glow: #7fd6ff; }
.face.v16   { background: linear-gradient(160deg, #79d2fb, #2f9fe3); color: #ffffff; --glow: #58c4ff; }
.face.v32   { background: linear-gradient(160deg, #55b0f2, #2171d4); color: #ffffff; --glow: #4aa8ff; }
.face.v64   { background: linear-gradient(160deg, #3b8fe6, #1a58b8); color: #ffffff; --glow: #3f95ff; }
.face.v128  { background: linear-gradient(160deg, #43d0dc, #1b93ab); color: #ffffff; --glow: #3fd5e6; }
.face.v256  { background: linear-gradient(160deg, #55e3cf, #1ea995); color: #042a2a; --glow: #4fe6d0; }
.face.v512  { background: linear-gradient(160deg, #9af3ff, #3ad6f0 60%, #2f9fe3); color: #03243c; --glow: #8ff0ff; }

/* 1k / 2k：柔和金，实色底 + 柔光，深蓝字 */
.face.g1 {
  --c: #f3d27a; --glow: #ffe08a;
  background: var(--c); color: var(--deep);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 0 18px rgba(255, 220, 130, 0.45), 0 10px 22px rgba(0, 0, 0, 0.3);
}
.face.g2 {
  --c: #ffe49a; --glow: #fff0b8;
  background: var(--c); color: var(--deep);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 0 26px rgba(255, 228, 154, 0.7), 0 10px 22px rgba(0, 0, 0, 0.3);
}

/* 4k / 8k：浅橙，实色底 */
.face.o1 {
  --c: #ffc79a; --glow: #ffd6b4;
  background: var(--c); color: var(--deep);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 0 20px rgba(255, 199, 154, 0.5), 0 10px 22px rgba(0, 0, 0, 0.3);
}
.face.o2 {
  --c: #ffb27a; --glow: #ffc49a;
  background: var(--c); color: var(--deep);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 0 22px rgba(255, 178, 122, 0.55), 0 10px 22px rgba(0, 0, 0, 0.3);
}

/* 16k / 32k：橙到橙红，低饱和 */
.face.r1 {
  --c: #f59a84; --glow: #ffb8a6;
  background: var(--c); color: var(--deep);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 0 22px rgba(245, 154, 132, 0.55), 0 10px 22px rgba(0, 0, 0, 0.3);
}
.face.r2 {
  --c: #e8806e; --glow: #f5a392;
  background: var(--c); color: var(--deep);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 0 24px rgba(232, 128, 110, 0.6), 0 10px 22px rgba(0, 0, 0, 0.3);
}

/* 64k 起：8 档柔和色相轮换（hc0 … hc7），深蓝字 + 轻微流动高光 */
.face.hi {
  background: var(--c); color: var(--deep);
  --glow: var(--c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -5px 0 rgba(0, 0, 0, 0.06),
    0 0 22px var(--c), 0 10px 22px rgba(0, 0, 0, 0.3);
}
.face.hc0 { --c: #c3b8ff; }   /* 浅蓝紫 */
.face.hc1 { --c: #a8e6c1; }   /* 浅绿 */
.face.hc2 { --c: #f5b5d6; }   /* 浅粉 */
.face.hc3 { --c: #a6e8f0; }   /* 浅青 */
.face.hc4 { --c: #d7eca0; }   /* 浅黄绿 */
.face.hc5 { --c: #f7b3a0; }   /* 浅珊瑚 */
.face.hc6 { --c: #d6b8f2; }   /* 浅紫 */
.face.hc7 { --c: #9fd0f5; }   /* 浅蓝 */

/* 流动高光：低饱和白色斜光带，只动伪元素，不用混合模式 */
.face.hi::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
  background-size: 260% 100%;
  opacity: 0.55;
  animation: sheen 3.6s linear infinite;
}
@keyframes sheen {
  from { background-position: 150% 0; }
  to   { background-position: -150% 0; }
}

/* 合成：弹出回弹 1 → 1.35 → 0.95 → 1 + 光晕 */
.face.merge {
  animation: mergePop calc(540ms / var(--spd)) ease-out both;
}
.face.merge::after {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: inherit;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle, var(--glow, #bfe9ff) 0%, rgba(0, 0, 0, 0) 68%);
  opacity: 0;
  animation: glowRing calc(560ms / var(--spd)) ease-out both;
}
@keyframes mergePop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  55%  { transform: scale(0.95); }
  78%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes glowRing {
  0%   { opacity: 0; transform: scale(0.7); }
  25%  { opacity: 0.85; }
  100% { opacity: 0; transform: scale(1.55); }
}

/* 涟漪：合成格周围一格内的方块轻微缩放 + 高光 */
.face.ripple {
  animation: ripple calc(420ms / var(--spd)) ease-out both;
}
@keyframes ripple {
  0%   { transform: scale(1); filter: brightness(1); }
  35%  { transform: scale(1.07); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* 新方块：错开出现，0.4 → 1 + 淡入（延迟由 JS 行内 animation-delay 指定） */
.face.spawn {
  animation: spawnIn calc(300ms / var(--spd)) cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}
@keyframes spawnIn {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ---------- 飘字：统一字号，颜色取目标方块主色（--pc），纯色 + 柔光 + 轻投影，无描边 ---------- */
.popups { pointer-events: none; z-index: 5; }

.pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: calc(var(--size) * 0.038);
  font-weight: 800;
  color: var(--pc, #e6f8ff);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px var(--pc, #7fe3ff);
  filter: drop-shadow(0 2px 4px rgba(0, 8, 20, 0.5));
  animation: fly calc(1250ms / var(--spd)) ease-out forwards;
}
@keyframes fly {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
  14%  { opacity: 1; transform: translate(-50%, -60%) scale(1.12); }
  30%  { opacity: 1; transform: translate(-50%, -90%) scale(1); }
  68%  { opacity: 1; transform: translate(-50%, -160%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -270%) scale(1); }
}

/* ---------- 连击乘数 x2 ~ x10：三档强度，全部 ≤ 700ms；纯色字 + 柔光，无描边、无渐变字 ---------- */
#combo {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  height: 0;
  z-index: 7;
  text-align: center;
  font-size: calc(var(--size) * 0.12);
  font-weight: 900;
  font-style: italic;
  color: #ffffff;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 0 22px rgba(127, 227, 255, 0.9);
  opacity: 0;
  pointer-events: none;
}

/* x2 ~ x3：白色大字，短促放大后消失，轻微旋转 */
#combo.t1 { animation: cT1 calc(520ms / var(--spd)) ease-out forwards; }
@keyframes cT1 {
  0%   { opacity: 0; transform: translateY(-50%) scale(0.4) rotate(-6deg); }
  25%  { opacity: 1; transform: translateY(-50%) scale(1.15) rotate(2deg); }
  45%  { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translateY(-60%) scale(0.96); }
}

/* x4 ~ x6：更大，柔和金色实字，金色柔光，光环外扩 */
#combo.t2 {
  font-size: calc(var(--size) * 0.17);
  color: #ffe49a;
  text-shadow: 0 0 24px rgba(255, 220, 130, 0.85);
  animation: cT2 calc(620ms / var(--spd)) ease-out forwards;
}
@keyframes cT2 {
  0%   { opacity: 0; transform: translateY(-50%) scale(0.3) rotate(-8deg); }
  18%  { opacity: 1; transform: translateY(-50%) scale(1.3) rotate(3deg); }
  35%  { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
  78%  { opacity: 1; transform: translateY(-50%) scale(1.02); }
  100% { opacity: 0; transform: translateY(-62%) scale(1.06); }
}

/* x7 ~ x10：最大字号（约棋盘宽的一半），白色实字 + 蓝金双层柔光，抖动 */
#combo.t3 {
  font-size: calc(var(--size) * 0.28);
  color: #ffffff;
  text-shadow: 0 0 18px rgba(255, 228, 154, 0.95), 0 0 42px rgba(127, 227, 255, 0.6);
  animation: cT3 calc(700ms / var(--spd)) ease-out forwards;
}
@keyframes cT3 {
  0%   { opacity: 0; transform: translateY(-50%) scale(0.2) rotate(-10deg); }
  14%  { opacity: 1; transform: translateY(-50%) scale(1.3) rotate(-3deg); }
  24%  { opacity: 1; transform: translateY(-50%) scale(1.22) rotate(2deg) translateX(4px); }
  34%  { opacity: 1; transform: translateY(-50%) scale(1.25) rotate(-2deg) translateX(-4px); }
  44%  { opacity: 1; transform: translateY(-50%) scale(1.15) rotate(1deg) translateX(3px); }
  56%  { opacity: 1; transform: translateY(-50%) scale(1) rotate(0) translateX(0); }
  80%  { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-60%) scale(1.08); }
}

/* 外扩光环（x4 起）；x7 起用更粗更亮的大圈 */
#cring {
  position: absolute;
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  border: 3px solid rgba(255, 228, 154, 0.9);
  box-shadow: 0 0 22px rgba(255, 228, 154, 0.7), inset 0 0 18px rgba(255, 228, 154, 0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
#cring.on { animation: cRing calc(620ms / var(--spd)) ease-out forwards; }
#cring.big {
  border-width: 5px;
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 34px rgba(127, 227, 255, 0.9), inset 0 0 26px rgba(127, 227, 255, 0.5);
}
#cring.big.on { animation: cRingBig calc(700ms / var(--spd)) ease-out forwards; }
@keyframes cRing {
  0%   { opacity: 0.95; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(2.2); }
}
@keyframes cRingBig {
  0%   { opacity: 1; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(2.9); }
}

/* 放射线（x7 起）：白蓝色，transform + 遮罩 */
#crays {
  position: absolute;
  left: -25%;
  top: -25%;
  width: 150%;
  height: 150%;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(190, 236, 255, 0.55) 0deg 5deg, rgba(190, 236, 255, 0) 5deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 8%, rgba(0, 0, 0, 0.6) 40%, transparent 70%);
  mask: radial-gradient(circle, #000 8%, rgba(0, 0, 0, 0.6) 40%, transparent 70%);
}
#crays.on { animation: rays calc(700ms / var(--spd)) ease-out forwards; }
@keyframes rays {
  0%   { opacity: 0; transform: scale(0.35) rotate(-18deg); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25) rotate(22deg); }
}

/* 全屏泛光（x7 起）：蓝白柔光，普通叠加，不混合、不过曝 */
#cflash {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(200, 240, 255, 0.45), rgba(120, 200, 255, 0.16) 38%, transparent 70%);
}
#cflash.on { animation: cflash calc(600ms / var(--spd)) ease-out forwards; }
@keyframes cflash {
  0%   { opacity: 0; }
  14%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- 结束面板 ---------- */
.over {
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 40%, rgba(14, 52, 96, 0.55), rgba(2, 6, 15, 0.9));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.over.show { opacity: 1; pointer-events: auto; }

.over .panel {
  width: min(300px, 100%);
  padding: 22px 20px 18px;
  text-align: center;
  background: rgba(8, 22, 44, 0.9);
  border: 1px solid rgba(110, 200, 255, 0.28);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  transform: translateY(14px) scale(0.95);
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.over.show .panel { transform: none; }

.over h2 {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: #9fe8ff;
}
.over p {
  margin: 0 0 8px;
  font-size: 13px;
  color: #a9c4dc;
}
.over p b {
  font-size: 22px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.over .row { display: flex; gap: 8px; margin-top: 14px; }
.over button {
  flex: 1;
  padding: 11px;
  font-size: 15px;
  font-weight: 700;
  color: #04202f;
  background: linear-gradient(180deg, #9deaff, #4bb8ee);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(70, 180, 240, 0.32);
  transition: transform 0.1s ease;
}
.over button:active { transform: scale(0.97); }
.over button.ghost {
  color: #cfe9ff;
  background: rgba(26, 68, 112, 0.6);
  border: 1px solid rgba(130, 210, 255, 0.3);
  box-shadow: none;
}
.over button:disabled { opacity: 0.4; }

.hint {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
}

@media (max-height: 560px) {
  .brand h1 { font-size: 22px; }
  .hint { display: none; }
  #app { gap: 8px; }
}

/* ---------- 屏幕方向键（触摸设备 / 窄屏） ---------- */
.dpad {
  display: none;
  grid-template-columns: repeat(3, 60px);
  grid-template-rows: repeat(3, 60px);
  gap: 6px;
  margin: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

@media (pointer: coarse), (max-width: 900px) {
  .dpad { display: grid; }
  :root { --size: min(calc(100vw - 28px), calc(100vh - 380px), 760px); }
}
@supports (height: 100dvh) {
  @media (pointer: coarse), (max-width: 900px) {
    :root { --size: min(calc(100vw - 28px), calc(100dvh - 380px), 760px); }
  }
}

.dpad button {
  position: relative;
  width: 60px;
  height: 60px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d2ecff;
  background: radial-gradient(circle at 50% 30%, rgba(64, 146, 216, 0.9), rgba(14, 40, 74, 0.95));
  border: 1px solid rgba(130, 215, 255, 0.38);
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, background 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}

.dpad button svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  filter: drop-shadow(0 0 4px rgba(120, 220, 255, 0.5));
  pointer-events: none;
}

/* 按下：缩放 + 高亮（JS 的 .on 与 :active 同效果，保证触摸和鼠标都有反馈） */
.dpad button.on,
.dpad button:active {
  transform: scale(0.9);
  color: #04202f;
  background: radial-gradient(circle at 50% 30%, #d6f6ff, #63d2ff 70%);
  border-color: rgba(200, 245, 255, 0.9);
  box-shadow: 0 0 22px rgba(120, 220, 255, 0.85), inset 0 -3px 0 rgba(0, 40, 70, 0.18);
}
.dpad button.on svg { filter: none; }

.dpad .dp-up    { grid-column: 2; grid-row: 1; }
.dpad .dp-left  { grid-column: 1; grid-row: 2; }
.dpad .dp-c     { grid-column: 2; grid-row: 2; place-self: center; width: 10px; height: 10px; border-radius: 50%; background: rgba(120, 200, 255, 0.22); }
.dpad .dp-right { grid-column: 3; grid-row: 2; }
.dpad .dp-down  { grid-column: 2; grid-row: 3; }

/* ---------- 双倍速按钮（激活态高亮） ---------- */
.toolbar button.on {
  color: #04202f;
  background: linear-gradient(180deg, #9deaff, #4bb8ee);
  border-color: rgba(200, 245, 255, 0.9);
  box-shadow: 0 0 14px rgba(120, 220, 255, 0.45);
}

@media (max-width: 380px) {
  .toolbar button { font-size: 12px; padding: 9px 2px; }
}