/* ==================================================
   游戏室
   ================================================== */
.game-stage {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 34px;
  align-items: flex-start;
}

.game-main { flex: 0 0 420px; max-width: 100%; min-width: 0; }

.game-stage > div:last-child { flex: 1 1 230px; min-width: 0; }

.g-hud {
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}

.g-hud .g-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.g-hud .g-stat b {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
}

.g-hud .sp { flex: 1 1 auto; }

.g-btn {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
}

.g-btn:hover { color: var(--accent); border-color: var(--accent); }
.g-btn.primary { color: var(--paper); background: var(--accent); border-color: var(--accent); }
.g-btn.primary:hover { opacity: .88; color: var(--paper); }

.g-note {
  max-width: 320px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.85;
  margin: 16px 0 0;
}

.g-note kbd {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
}

/* ---------- 贪吃蛇 ---------- */
.snake-wrap {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--accent-soft);
  touch-action: none;
}

.snake-wrap canvas { display: block; width: 100%; height: 100%; }

.snake-mask {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  padding: 24px;
}

.snake-mask[hidden] { display: none; }
.snake-mask b { font-family: var(--serif); font-size: 19px; font-weight: 500; }
.snake-mask span { color: var(--muted); font-size: 13px; line-height: 1.8; }
.snake-mask .g-btn { justify-self: center; margin-top: 4px; }

/* ---------- 触控方向键 ---------- */
.pad {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
  gap: 6px;
  margin-top: 18px;
  justify-content: start;
}

.pad button {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  border-radius: 9px;
  font-family: var(--mono);
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pad button:active { background: var(--accent-soft); color: var(--accent); }
.pad .up { grid-area: 1 / 2; }
.pad .left { grid-area: 2 / 1; }
.pad .right { grid-area: 2 / 3; }
.pad .down { grid-area: 3 / 2; }

/* ---------- 2048 ---------- */
.b2048 {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 9px;
  padding: 9px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  touch-action: none;
  user-select: none;
}

.b2048 .cell {
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(15px, 4.6vw, 22px);
  color: #2c4238;
  transition: transform .12s ease;
}

.b2048 .cell:not([data-v]) { background: color-mix(in srgb, var(--paper) 58%, var(--accent-soft)); }
.b2048 .cell.new { animation: pop .16s ease; }
@keyframes pop { from { transform: scale(.82); } to { transform: scale(1); } }

.b2048 .cell[data-v="2"] { background: #d8e9de; }
.b2048 .cell[data-v="4"] { background: #c6ddce; }
.b2048 .cell[data-v="8"] { background: #b1d1bc; }
.b2048 .cell[data-v="16"] { background: #9ac4a9; }
.b2048 .cell[data-v="32"] { background: #82b593; }
.b2048 .cell[data-v="64"] { background: #69a37e; color: #fff; }
.b2048 .cell[data-v="128"] { background: #55906e; color: #fff; }
.b2048 .cell[data-v="256"] { background: #447c5f; color: #fff; }
.b2048 .cell[data-v="512"] { background: #386a52; color: #fff; }
.b2048 .cell[data-v="1024"] { background: #2c5742; color: #fff; }
.b2048 .cell[data-v="2048"] { background: #1f4433; color: #fff; }
[data-theme="dark"] .b2048 .cell { color: #dcece3; }
[data-theme="dark"] .b2048 .cell[data-v="2"] { background: #232c27; }
[data-theme="dark"] .b2048 .cell[data-v="4"] { background: #2a352f; }
[data-theme="dark"] .b2048 .cell[data-v="8"] { background: #334038; }
[data-theme="dark"] .b2048 .cell[data-v="16"] { background: #3d5045; }
[data-theme="dark"] .b2048 .cell[data-v="32"] { background: #4a6353; }
[data-theme="dark"] .b2048 .cell[data-v="64"] { background: #557a62; }
[data-theme="dark"] .b2048 .cell[data-v="128"] { background: #5f8d70; }
[data-theme="dark"] .b2048 .cell[data-v="256"] { background: #6da07f; }
[data-theme="dark"] .b2048 .cell[data-v="512"] { background: #7bb48d; color: #12211a; }
[data-theme="dark"] .b2048 .cell[data-v="1024"] { background: #8ac89c; color: #12211a; }
[data-theme="dark"] .b2048 .cell[data-v="2048"] { background: #9ad8aa; color: #12211a; }

.b2048 .g-mask {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}

.b2048 .g-mask[hidden] { display: none; }
.b2048 .g-mask b { font-family: var(--serif); font-size: 20px; font-weight: 500; }

/* ---------- 扫雷 ---------- */
.mine-hud { gap: 14px; }
.mine-grid {
  display: grid;
  gap: 3px;
  width: min(100%, 400px);
  padding: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.mine-grid button {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 4px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(11px, 2.9vw, 15px);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}

.mine-grid button:hover:not(.open) { background: var(--accent-soft); }
.mine-grid button.open { background: transparent; border-color: color-mix(in srgb, var(--line) 60%, transparent); cursor: default; }
.mine-grid button.flag { color: var(--accent); }
.mine-grid button.boom { background: #b4553f; color: #fff; border-color: #b4553f; }
.mine-grid button.wrong { color: #b4553f; }

.mine-grid button[data-n="1"] { color: #3a6ea5; }
.mine-grid button[data-n="2"] { color: #3f7d4f; }
.mine-grid button[data-n="3"] { color: #b4553f; }
.mine-grid button[data-n="4"] { color: #6b4a86; }
.mine-grid button[data-n="5"] { color: #8a5a2a; }
.mine-grid button[data-n="6"] { color: #2f7a7a; }
.mine-grid button[data-n="7"] { color: #4a4a4a; }
.mine-grid button[data-n="8"] { color: var(--muted); }

[data-theme="dark"] .mine-grid button[data-n="1"] { color: #7ea9d6; }
[data-theme="dark"] .mine-grid button[data-n="2"] { color: #86c79c; }
[data-theme="dark"] .mine-grid button[data-n="3"] { color: #d98a72; }
[data-theme="dark"] .mine-grid button[data-n="4"] { color: #b39bd0; }
[data-theme="dark"] .mine-grid button[data-n="5"] { color: #d3a878; }
[data-theme="dark"] .mine-grid button[data-n="6"] { color: #7fc4c4; }

@media (max-width: 820px) {
  .game-stage { flex-direction: column; gap: 18px; align-items: stretch; }
  .game-main { flex: 1 1 auto; }
  .g-note { max-width: none; }
  .pad { justify-content: center; }
  .b2048 { width: min(100%, 340px); margin: 0 auto; }
  .snake-wrap { margin: 0 auto; }
  .mine-grid { margin: 0 auto; }
}