/* 小窝本地重构游戏 · 第三批（华容道 / 数独 / 乒乓 / 太空入侵 / 吃豆人 / 泡泡射手 / 打字大师）
 * 复用 native/common.css 的 .native-game-* 视觉令牌，这里只放各游戏专属布局。 */

/* ===== 打字大师 ===== */
.typemaster .tm-text {
  width: min(100%, 560px);
  margin: 4px auto 10px;
  padding: 10px 12px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  background: var(--game-surface);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .3px;
  word-break: break-all;
}
.typemaster .tm-ch { color: var(--muted); transition: color .12s ease; }
.typemaster .tm-ch.is-ok { color: var(--text); }
.typemaster .tm-ch.is-bad { color: #fb7185; background: rgba(251, 113, 133, .18); border-radius: 3px; }
.typemaster .tm-ch.is-cur { color: var(--game-accent); border-bottom: 2px solid var(--game-accent); }
.typemaster .tm-input {
  width: min(100%, 560px);
  display: block;
  margin: 0 auto;
  padding: 11px 13px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-size: 15px;
  outline: none;
}
.typemaster .tm-input:focus { border-color: var(--game-accent); }

/* ===== 打字大师 v2（重做版补充） ===== */
.typemaster .tm-progress {
  width: min(100%, 560px); height: 8px; margin: 2px auto 0;
  border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden;
}
.typemaster .tm-progress-bar {
  height: 100%; border-radius: 999px; transition: width .3s ease, background .3s ease;
}
.typemaster .tm-progress-bar.is-good { background: linear-gradient(90deg, #10b981, #34d399); }
.typemaster .tm-progress-bar.is-warn { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.typemaster .tm-progress-bar.is-bad { background: linear-gradient(90deg, #ef4444, #f87171); }
.typemaster .tm-word {
  width: min(100%, 560px); margin: 14px auto 6px;
  text-align: center; font-size: clamp(22px, 6vw, 30px);
  font-weight: 800; letter-spacing: 1px; color: var(--game-accent);
  min-height: 1.4em; word-break: break-all;
}
.typemaster .tm-word.tm-pop { animation: tm-pop .3s ease-out; }
@keyframes tm-pop {
  from { transform: scale(.86); opacity: .4; }
  to { transform: scale(1); opacity: 1; }
}
.typemaster .tm-input.is-bad { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
@keyframes tm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* ===== 数独 ===== */
.sudoku .sd-board {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 2px;
  width: min(100%, 360px);
  min-height: 320px;
  margin: 4px auto 0;
  aspect-ratio: 1;
  touch-action: manipulation;
  user-select: none;
}
.sudoku .sd-cell {
  width: 100%;
  height: 100%;
  min-width: 0; min-height: 0; padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 4px;
  color: var(--game-accent);
  background: rgba(255, 255, 255, .05);
  font-size: clamp(13px, 4.4vw, 22px);
  font-weight: 800; cursor: pointer;
}
.sudoku .sd-cell.is-given { color: var(--text); background: rgba(255, 255, 255, .025); cursor: default; }
.sudoku .sd-cell.is-wrong { color: #fb7185; background: rgba(251, 113, 133, .16); }
.sudoku .sd-cell.is-selected { border-color: var(--game-accent); background: rgba(34, 211, 238, .14); }
.sudoku .sd-cell.sd-br { border-right: 2px solid var(--game-line); }
.sudoku .sd-cell.sd-bb { border-bottom: 2px solid var(--game-line); }
.sudoku .sd-pad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  width: min(100%, 360px);
  margin: 10px auto 0;
}
.sudoku .sd-num {
  min-height: 38px;
  border: 1px solid var(--game-line);
  border-radius: 10px;
  color: var(--text);
  background: var(--game-surface);
  font-size: 16px; font-weight: 800; cursor: pointer;
}
.sudoku .sd-num:hover { border-color: var(--game-accent); background: var(--game-surface-strong); }
.sudoku .sd-num.sd-erase { color: var(--game-warm); }

/* ===== 数独 v2（重做版补充） ===== */
.sudoku .sd-diffs { display: flex; gap: 6px; width: min(100%, 360px); margin: 10px auto 0; }
.sudoku .sd-diff {
  flex: 1; padding: 6px 0;
  border: 1px solid var(--game-line); border-radius: 8px;
  color: var(--muted); background: var(--game-surface);
  font-size: 12px; cursor: pointer;
}
.sudoku .sd-diff.is-active { color: var(--game-accent); border-color: var(--game-accent); background: rgba(34,211,238,.1); }
.sudoku .sd-cell.is-high { background: rgba(255,255,255,.09); }
.sudoku .sd-cell.is-correct { color: #34d399; background: rgba(52,211,153,.18); animation: sd-correct-pulse 1s ease; }
@keyframes sd-correct-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ===== 华容道 · 人物形象版 ===== */
.klotski .kl-stage {
  position: relative;
  width: min(100%, 320px);
  margin: 8px auto 0;
  aspect-ratio: 4 / 5;
  border: 2px solid rgba(212, 175, 55, .35);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(20, 30, 48, .95), rgba(10, 18, 32, .98)),
    repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(212,175,55,.04) 24px, rgba(212,175,55,.04) 25px),
    repeating-linear-gradient(0deg, transparent, transparent 24px, rgba(212,175,55,.04) 24px, rgba(212,175,55,.04) 25px);
  box-shadow: inset 0 0 30px rgba(0,0,0,.5), 0 0 20px rgba(212,175,55,.08);
  overflow: hidden;
}
.klotski .kl-exit {
  position: absolute; left: 25%; bottom: 0; width: 50%; height: 7px;
  background: linear-gradient(180deg, #34d399, #059669);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -2px 8px rgba(52,211,153,.4);
}

/* ── 棋子基础：3D 玉石/木块质感 ── */
.klotski .kl-piece {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px;
  color: #fff; font-weight: 800; letter-spacing: 1px;
  cursor: pointer;
  transition: left .18s ease, top .18s ease, filter .14s ease, box-shadow .14s ease, transform .14s ease;
  overflow: hidden;
  /* 立体内嵌 + 投影 */
  box-shadow:
    inset 2px 2px 5px rgba(255,255,255,.18),
    inset -2px -2px 5px rgba(0,0,0,.3),
    4px 6px 16px rgba(0,0,0,.4);
  border: 1.5px solid rgba(255,255,255,.12);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* 人物头像区域（::before）—— 所有棋子共用基础 */
.klotski .kl-piece::before {
  content: '';
  display: block;
  flex-shrink: 0;
}
/* 装饰元素（::after）—— 印章/徽记 */
.klotski .kl-piece::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
/* 选中态 */
.klotski .kl-piece.is-selected {
  box-shadow:
    inset 2px 2px 5px rgba(255,255,255,.25),
    inset -2px -2px 5px rgba(0,0,0,.3),
    0 0 0 3px var(--game-accent),
    0 0 20px rgba(34,211,238,.35),
    4px 6px 16px rgba(0,0,0,.4);
  transform: scale(1.03);
  z-index: 3;
}

/* ══════════════════════════════════════
   曹操 · 2×2 · 帝王
   ══════════════════════════════════════ */
.klotski .kl-piece.caocao,
.klotski .kl-piece.kl-caocao {
  background: linear-gradient(145deg, #b91c1c 0%, #dc2626 25%, #f59e0b 60%, #d97706 100%);
  font-size: 15px;
}
.klotski .kl-piece.caocao::before,
.klotski .kl-piece.kl-caocao::before {
  width: 48px; height: 26px;
  margin-bottom: 4px;
  border-radius: 50% 50% 8px 8px / 40% 40% 8px 8px;
  background:
    radial-gradient(ellipse 16px 12px at 50% 45%, rgba(255,235,180,.9) 0%, transparent 100%),
    radial-gradient(ellipse 6px 8px at 35% 42%, #1a1a1a 50%, transparent 100%),
    radial-gradient(ellipse 6px 8px at 65% 42%, #1a1a1a 50%, transparent 100%),
    radial-gradient(ellipse 10px 6px at 50% 58%, #c2410c 60%, transparent 100%),
    linear-gradient(180deg, #fef3c7 0%, #fcd34d 40%, #d97706 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  /* 冠冕 */
  border-top: 3px solid #fbbf24;
}
.klotski .kl-piece.caocao::after,
.klotski .kl-piece.kl-caocao::after {
  right: 5px; top: 5px;
  width: 18px; height: 18px;
  background: rgba(220,38,38,.75);
  border: 1.5px solid #fbbf24;
  border-radius: 3px;
  font-size: 9px; line-height: 18px; text-align: center; color: #fbbf24;
  font-weight: 900; letter-spacing: 0;
  content: '魏';
  text-shadow: none;
}

/* ══════════════════════════════════════
   关羽 · 1×2 横 · 武圣
   ══════════════════════════════════════ */
.klotski .kl-piece.guanyu,
.klotski .kl-piece.kl-guanyu {
  background: linear-gradient(145deg, #065f46 0%, #059669 40%, #10b981 70%, #34d399 100%);
  font-size: 13px;
}
.klotski .kl-piece.guanyu::before,
.klotski .kl-piece.kl-guanyu::before {
  width: 36px; height: 28px;
  margin-bottom: 2px;
  border-radius: 50% 50% 30% 30% / 45% 45% 25% 25%;
  background:
    radial-gradient(ellipse 12px 10px at 50% 40%, #fecaca 0%, #ef4444 60%, #b91c1c 100%),
    radial-gradient(ellipse 4px 5px at 38% 38%, #1a1a1a 50%, transparent 100%),
    radial-gradient(ellipse 4px 5px at 62% 38%, #1a1a1a 50%, transparent 100%),
    radial-gradient(ellipse 8px 4px at 50% 54%, #7f1d1d 60%, transparent 100%);
  /* 长须 */
  box-shadow: 0 8px 0 2px #15803d, 0 12px 0 2px #166534, 0 16px 0 2px #166534;
}
.klotski .kl-piece.guanyu::after,
.klotski .kl-piece.kl-guanyu::after {
  left: 4px; bottom: 4px;
  width: 14px; height: 14px;
  background: rgba(239,68,68,.7);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  content: '义';
  font-size: 8px; line-height: 14px; text-align: center; color: #fff;
  font-weight: 900; letter-spacing: 0; text-shadow: none;
}

/* ══════════════════════════════════════
   张飞 · 1×2 竖 · 猛将
   ══════════════════════════════════════ */
.klotski .kl-piece.kl-zhangfei {
  background: linear-gradient(145deg, #450a0a 0%, #7f1d1d 40%, #991b1b 70%, #b91c1c 100%);
  font-size: 11px;
}
.klotski .kl-piece.kl-zhangfei::before {
  width: 32px; height: 30px;
  margin-bottom: 2px;
  border-radius: 8px 8px 12px 12px;
  background:
    radial-gradient(ellipse 14px 12px at 50% 38%, #fed7aa 0%, #ea580c 60%, #9a3412 100%),
    /* 怒目 */
    linear-gradient(180deg, transparent 30%, #1a1a1a 31%, #1a1a1a 36%, transparent 37%) no-repeat left 8px top 38% / 4px 8px,
    linear-gradient(180deg, transparent 30%, #1a1a1a 31%, #1a1a1a 36%, transparent 37%) no-repeat right 8px top 38% / 4px 8px,
    /* 粗眉 */
    linear-gradient(0deg, transparent 33%, #1a1a1a 34%, #1a1a1a 38%, transparent 39%) no-repeat 4px 32% / 10px 3px,
    linear-gradient(0deg, transparent 33%, #1a1a1a 34%, #1a1a1a 38%, transparent 39%) no-repeat 18px 32% / 10px 3px,
    /* 大嘴 */
    radial-gradient(ellipse 8px 4px at 50% 58%, #7f1d1d 50%, transparent 100%);
  border-top: 3px solid #1a1a1a;
}

/* ══════════════════════════════════════
   赵云 · 1×2 立常胜将军
   ══════════════════════════════════════ */
.klotski .kl-piece.kl-zhaoyun {
  background: linear-gradient(145deg, #374151 0%, #6b7280 30%, #e5e7eb 60%, #f3f4f6 100%);
  color: #1f2937;
  font-size: 11px;
  text-shadow: 0 1px 2px rgba(255,255,255,.4);
}
.klotski .kl-piece.kl-zhaoyun::before {
  width: 32px; height: 30px;
  margin-bottom: 2px;
  border-radius: 8px;
  background:
    radial-gradient(ellipse 13px 11px at 50% 40%, #bfdbfe 0%, #3b82f6 50%, #1d4ed8 100%),
    radial-gradient(ellipse 3.5px 4.5px at 37% 38%, #1e3a5f 50%, transparent 100%),
    radial-gradient(ellipse 3.5px 4.5px at 63% 38%, #1e3a5f 50%, transparent 100%),
    radial-gradient(ellipse 6px 3px at 50% 55%, #dbeafe 60%, transparent 100%);
  /* 龙胆亮银枪 hint — 顶部银色装饰线 */
  border-top: 3px solid #93c5fd;
  box-shadow: 0 0 8px rgba(59,130,246,.3);
}
.klotski .kl-piece.kl-zhaoyun::after {
  right: 4px; top: 4px;
  width: 12px; height: 12px;
  background: #3b82f6;
  border-radius: 50%;
  border: 1.5px solid #93c5fd;
  content: '龙';
  font-size: 7px; line-height: 12px; text-align: center; color: #fff;
  font-weight: 900; text-shadow: none;
}

/* ══════════════════════════════════════
   马超 · 1×2 竖 · 锦马超
   ══════════════════════════════════════ */
.klotski .kl-piece.kl-machao {
  background: linear-gradient(145deg, #1e3a8a 0%, #2563eb 40%, #3b82f6 70%, #60a5fa 100%);
  font-size: 11px;
}
.klotski .kl-piece.kl-machao::before {
  width: 32px; height: 30px;
  margin-bottom: 2px;
  border-radius: 8px;
  background:
    radial-gradient(ellipse 13px 11px at 50% 40%, #ffe4e6 0%, #f43f5e 40%, #be123c 100%),
    radial-gradient(ellipse 3.5px 4.5px at 37% 38%, #1e1b4b 50%, transparent 100%),
    radial-gradient(ellipse 3.5px 4.5px at 63% 38%, #1e1b4b 50%, transparent 100%),
    radial-gradient(ellipse 6px 3px at 50% 55%, #fda4af 60%, transparent 100%);
  /* 马盔翼 */
  border-top: 3px solid #93c5fd;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  box-shadow: 0 0 8px rgba(59,130,246,.25);
}

/* ══════════════════════════════════════
   黄忠 · 1×2 竖 · 老当益壮
   ══════════════════════════════════════ */
.klotski .kl-piece.kl-huangzhong {
  background: linear-gradient(145deg, #78350f 0%, #b45309 35%, #d97706 65%, #fbbf24 100%);
  font-size: 10px;
}
.klotski .kl-piece.kl-huangzhong::before {
  width: 32px; height: 30px;
  margin-bottom: 2px;
  border-radius: 8px;
  background:
    radial-gradient(ellipse 13px 11px at 50% 40%, #fef3c7 0%, #f59e0b 45%, #b45309 100%),
    radial-gradient(ellipse 3.5px 4.5px at 37% 38%, #451a03 50%, transparent 100%),
    radial-gradient(ellipse 3.5px 4.5px at 63% 38%, #451a03 50%, transparent 100%),
    radial-gradient(ellipse 6px 3px at 50% 55%, #78350f 60%, transparent 100%);
  /* 老将白须 hint */
  box-shadow: 0 6px 0 1px rgba(251,191,36,.5), 0 10px 0 1px rgba(251,191,36,.3);
  border-top: 3px solid #fde68a;
}
.klotski .kl-piece.kl-huangzhong::after {
  right: 4px; bottom: 4px;
  width: 12px; height: 12px;
  background: rgba(120,53,15,.7);
  border-radius: 2px;
  border: 1px solid #fbbf24;
  content: '弓';
  font-size: 7px; line-height: 12px; text-align: center; color: #fbbf24;
  font-weight: 900; text-shadow: none;
}

/* ══════════════════════════════════════
   兵 · 1×1 · 卒
   ══════════════════════════════════════ */
.klotski .kl-piece.soldier {
  background: linear-gradient(145deg, #1f2937 0%, #374151 40%, #4b5563 70%, #6b7280 100%);
  font-size: 10px;
}
.klotski .kl-piece.soldier::before {
  width: 26px; height: 22px;
  margin-bottom: 2px;
  border-radius: 6px 6px 10px 10px;
  background:
    radial-gradient(ellipse 10px 9px at 50% 42%, #d1d5db 0%, #9ca3af 50%, #6b7280 100%),
    radial-gradient(ellipse 3px 3.5px at 40% 40%, #374151 50%, transparent 100%),
    radial-gradient(ellipse 3px 3.5px at 60% 40%, #374151 50%, transparent 100%),
    radial-gradient(ellipse 4px 2.5px at 50% 54%, #4b5563 60%, transparent 100%);
  /* 戍卒巾帻 */
  border-top: 2.5px solid #9ca3af;
}
.klotski .kl-controls { width: min(100%, 320px); margin: 10px auto 0; text-align: center; }
.klotski .kl-dir { width: 46px; height: 38px; margin: 3px; border: 1px solid var(--game-line); border-radius: 10px; color: var(--text); background: var(--game-surface); font-size: 15px; cursor: pointer; }
.klotski .kl-dir:active { border-color: var(--game-accent); background: rgba(34, 211, 238, .12); }
.klotski .kl-dir-row { display: inline-block; }

/* ===== 华容道 v2（重做版补充） ===== */
.klotski .kl-levels { display: flex; gap: 6px; width: min(100%, 320px); margin: 10px auto 0; }
.klotski .kl-level {
  flex: 1; padding: 6px 0;
  border: 1px solid var(--game-line); border-radius: 8px;
  color: var(--muted); background: var(--game-surface);
  font-size: 12px; cursor: pointer;
}
.klotski .kl-level.is-active { color: var(--game-accent); border-color: var(--game-accent); background: rgba(34,211,238,.1); }
.klotski .kl-level.is-done::after { content: ' ✓'; color: #34d399; }
.klotski .kl-stage .kl-exit-label {
  position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%);
  color: var(--muted); font-size: 11px; letter-spacing: 2px;
}
.klotski .kl-piece.is-hint { animation: kl-hint 1s ease; }
@keyframes kl-hint {
  0%, 100% { box-shadow: 0 0 0 2px transparent; }
  50% { box-shadow: 0 0 0 3px var(--game-accent); filter: brightness(1.25); }
}
.klotski .kl-dir-indicator {
  position: absolute; z-index: 5; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--game-accent);
  color: var(--text); background: rgba(10, 22, 38, .92);
  font-size: 14px; cursor: pointer; line-height: 1;
}
.klotski .kl-dir-indicator:active { background: var(--game-accent); color: #04121a; }
.klotski .kl-particle {
  position: absolute; z-index: 6; width: 7px; height: 7px; border-radius: 50%;
  pointer-events: none; animation: kl-particle .5s ease-out forwards;
}
@keyframes kl-particle {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to { transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px))) scale(.4); opacity: 0; }
}

/* ===== 通用 canvas 包裹 + 覆盖层 ===== */
.pingpong .pp-canvas-wrap,
.spaceinvaders .si-canvas-wrap,
.pacman .pm-canvas-wrap,
.bubbleshooter .bs-canvas-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--game-line);
  border-radius: 14px;
  background: #0c1626;
  line-height: 0;
  margin-top: 4px;
}
.pingpong canvas,
.spaceinvaders canvas,
.pacman canvas,
.bubbleshooter canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
}
.pingpong .pp-canvas-wrap { aspect-ratio: 3 / 2; }
.spaceinvaders .si-canvas-wrap { aspect-ratio: 6 / 5; }
.pacman .pm-canvas-wrap { aspect-ratio: 1 / 1; }
.bubbleshooter .bs-canvas-wrap { aspect-ratio: 58 / 65; }

/* 泡泡射手关卡特性通知 */
.bubbleshooter .bs-level-notice {
  position: absolute; top: 12px; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 6px 16px; border-radius: 999px;
  background: rgba(12, 22, 38, .92); border: 1px solid var(--game-line);
  color: var(--game-accent); font-size: 13px; font-weight: 700;
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
  pointer-events: none; z-index: 3; white-space: nowrap;
}
.bubbleshooter .bs-level-notice.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.pingpong .pp-overlay,
.spaceinvaders .si-overlay,
.pacman .pm-overlay,
.bubbleshooter .bs-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: linear-gradient(180deg, rgba(5, 12, 24, .1), rgba(5, 12, 24, .72));
  text-align: center; line-height: 1.6;
}
.pingpong .pp-overlay.is-hidden,
.spaceinvaders .si-overlay.is-hidden,
.pacman .pm-overlay.is-hidden,
.bubbleshooter .bs-overlay.is-hidden { display: none; }
.pingpong .pp-overlay-inner,
.spaceinvaders .si-overlay-inner,
.pacman .pm-overlay-inner,
.bubbleshooter .bs-overlay-inner { max-width: 300px; }
.pingpong .pp-overlay strong,
.spaceinvaders .si-overlay strong,
.pacman .pm-overlay strong,
.bubbleshooter .bs-overlay strong {
  display: block; margin-bottom: 6px; color: #f8fbff; font-size: 22px;
}
.pingpong .pp-overlay span,
.spaceinvaders .si-overlay span,
.pacman .pm-overlay span,
.bubbleshooter .bs-overlay span {
  display: block; margin-bottom: 14px; color: #aeb9cd; font-size: 12px; line-height: 1.6;
}

/* 吃豆人方向按钮（仅在 overlay 内显示） */
.pacman .pm-dir-row { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 10px; }
.pacman .pm-dir-row-inner { display: flex; gap: 4px; }
.pacman .pm-dir {
  width: 44px; height: 40px;
  border: 1px solid var(--game-line); border-radius: 10px;
  color: var(--text); background: var(--game-surface); font-size: 16px; cursor: pointer;
  font-family: inherit;
}
.pacman .pm-dir:active { border-color: var(--game-accent); background: rgba(34,211,238,.12); }

/* 太空入侵触摸控制条（←/🔫/→，常驻，移动端必需） */
.spaceinvaders .si-pad {
  display: flex; justify-content: center; gap: 10px;
  width: min(100%, 300px); margin: 10px auto 0;
}
.spaceinvaders .si-pad-btn {
  flex: 1; min-height: 42px;
  border: 1px solid var(--game-line); border-radius: 10px;
  color: var(--text); background: var(--game-surface);
  font-size: 17px; cursor: pointer; font-family: inherit;
}
.spaceinvaders .si-pad-btn.is-fire { color: var(--game-warm); font-size: 19px; }
.spaceinvaders .si-pad-btn:active { border-color: var(--game-accent); background: rgba(34,211,238,.12); }

/* 吃豆人 canvas 包裹特殊：原版 28×31 约 9:10，不像 1:1 */
.pacman .pm-canvas-wrap { aspect-ratio: 28 / 31; }