/* ═══════════════ 2048（2026-10-22 新增） ═══════════════
   面板样式跟随 runner.css 变量（--theme / --border 等），亮暗主题自适应。 */
#g2048-root {
  max-width: 460px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;            /* 滑动手势由页面接管，别让浏览器滚动 */
}
.g2048-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.g2048-stat {
  font-size: 14px;
  color: var(--secondary, #5b6470);
}
.g2048-stat b {
  color: var(--primary, #1f1f1f);
  font-variant-numeric: tabular-nums;
}
.g2048-btn {
  min-height: 34px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary, #1f1f1f);
  background: var(--theme, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  cursor: pointer;
}
.g2048-btn:hover { border-color: var(--secondary, #999); }
.g2048-btn:focus-visible { outline: 2px solid #4f8cff; outline-offset: 2px; }
.g2048-btn-primary {
  color: #fff;
  background: #3b82f6;
  border-color: #3b82f6;
}
.g2048-btn-primary:hover { background: #2f6fe0; }
.g2048-hint { flex: 1 1 100%; font-size: 12px; color: var(--secondary, #5b6470); }

/* ── 棋盘 ── */
.g2048-board {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--border, #e0e0e0);
  border-radius: 12px;
  padding: 8px;
  box-sizing: border-box;
}
.g2048-cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.g2048-cell {
  background: rgba(127, 127, 127, 0.16);
  border-radius: 8px;
}
.g2048-tiles { position: absolute; inset: 8px; }
/* 方块：位置与尺寸由 JS 用 CSSOM 赋值（CSP 禁内联 style 属性） */
.g2048-tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  border-radius: 8px;
  transition: top 0.09s ease, left 0.09s ease;
  will-change: top, left;
}
.g2048-tile.is-new { animation: g2048-pop 0.14s ease; }
.g2048-tile.is-merged { animation: g2048-bump 0.16s ease; }
@keyframes g2048-pop {
  from { transform: scale(0.4); opacity: 0.4; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes g2048-bump {
  0% { transform: scale(1); } 50% { transform: scale(1.14); } 100% { transform: scale(1); }
}

/* 方块配色：低数值暖色渐进，高数值蓝紫（不跟随主题，保证辨识度） */
.g2048-tile[data-v="2"]    { background: #f4e9d8; color: #6b5b45; }
.g2048-tile[data-v="4"]    { background: #ecd9b0; color: #6b5b45; }
.g2048-tile[data-v="8"]    { background: #f2b179; color: #fff; }
.g2048-tile[data-v="16"]   { background: #f59563; color: #fff; }
.g2048-tile[data-v="32"]   { background: #f67c5f; color: #fff; }
.g2048-tile[data-v="64"]   { background: #f65e3b; color: #fff; }
.g2048-tile[data-v="128"]  { background: #edcf72; color: #fff; }
.g2048-tile[data-v="256"]  { background: #edcc61; color: #fff; }
.g2048-tile[data-v="512"]  { background: #edc850; color: #fff; }
.g2048-tile[data-v="1024"] { background: #5b8def; color: #fff; }
.g2048-tile[data-v="2048"] { background: #6366f1; color: #fff; box-shadow: 0 0 14px rgba(99, 102, 241, 0.65); }
.g2048-tile[data-v="big"]  { background: #312e81; color: #fff; }

/* ── 结束弹窗（与 snake-over 同款风格） ── */
.g2048-over {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(127, 127, 127, 0.45);
  border-radius: 12px;
}
.g2048-over-box {
  width: min(78%, 300px);
  padding: 18px 20px;
  text-align: center;
  background: var(--theme, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 12px;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.55);
}
.g2048-over-t { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--primary, #1f1f1f); }
.g2048-over-s { margin: 0 0 12px; font-size: 13px; color: var(--secondary, #5b6470); }
.g2048-over-actions { display: flex; gap: 10px; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .g2048-tile { transition: none; animation: none; }
}
html.a11y-calm .g2048-tile { transition: none; animation: none; }