/* ============================================================
 * 内置游戏公共样式（所有 games/* 共用，零外部依赖）
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: radial-gradient(1200px 700px at 20% -10%, #1C2050 0%, #0B0D20 55%, #05060F 100%);
  color: #E9ECFF;
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}
canvas { touch-action: none; }
.g-wrap {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; gap: 12px;
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(12px + env(safe-area-inset-right));
}

.g-bar { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 520px; flex-wrap: wrap; }
.g-chip {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 7px 13px; font-size: 13px; letter-spacing: .02em;
  display: flex; align-items: center; gap: 7px; backdrop-filter: blur(8px); white-space: nowrap;
}
.g-chip b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.g-chip.grow { margin-left: auto; }
.g-chip.gold b { color: #FFD166; }
.g-chip.cyan b { color: #7CE8FF; }

.g-btn {
  background: linear-gradient(135deg, #6C5CE7, #4FA8F5); border: 0; color: #fff;
  border-radius: 12px; padding: 8px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 18px rgba(108,92,231,.35); transition: transform .14s, box-shadow .14s;
}
.g-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(108,92,231,.45); }
.g-btn:active { transform: translateY(1px); }
.g-btn.ghost { background: rgba(255,255,255,.08); box-shadow: none; border: 1px solid rgba(255,255,255,.16); }

.g-stage { position: relative; border-radius: 18px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10); padding: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.g-tip { font-size: 12.5px; color: rgba(233,236,255,.55); text-align: center; max-width: 520px; line-height: 1.7; }
.g-tip b { color: rgba(233,236,255,.85); }

.g-mask {
  position: absolute; inset: 0; display: none; place-items: center; text-align: center;
  background: rgba(6,8,20,.86); backdrop-filter: blur(8px); border-radius: 18px; z-index: 20; padding: 20px;
}
.g-mask.show { display: grid; }
.g-mask h2 { font-size: 24px; margin: 0 0 6px; letter-spacing: -.02em; }
.g-mask p { color: rgba(233,236,255,.7); font-size: 13.5px; margin: 0 0 16px; }
.g-mask .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.g-big { font-size: 40px; font-weight: 800; background: linear-gradient(120deg,#fff,#7CE8FF); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 通用棋盘 */
.board { display: grid; gap: 8px; }
.cell { border-radius: 10px; background: rgba(255,255,255,.06); }

/* ============================================================
 * 移动端适配（2026-10-27）
 * 目标：390×844 竖屏与 844×390 横屏都不溢出、按钮不被挤出屏幕
 * 全部走公共样式覆盖，游戏本体不需要逐个改
 * ============================================================ */

/* ① 窄屏：状态栏按钮缩小，必要时换行 */
@media (max-width: 480px) {
  .g-wrap { padding: 8px; gap: 8px; padding-left: calc(8px + env(safe-area-inset-left)); padding-right: calc(8px + env(safe-area-inset-right)); }
  .g-bar { gap: 6px; }
  .g-chip { padding: 5px 10px; font-size: 12px; border-radius: 10px; }
  .g-chip b { font-size: 15px; }
  .g-chip.grow { margin-left: auto; }
  .g-btn { padding: 6px 12px; font-size: 12.5px; border-radius: 10px; }
  .g-stage { padding: 8px; border-radius: 16px; }
  .g-tip { font-size: 11.5px; line-height: 1.65; }
  .g-mask h2 { font-size: 20px; }
  .g-mask p { font-size: 12.5px; }
  .g-big { font-size: 32px; }
  .g-mask .row { gap: 8px; }
  .g-mask .g-btn { padding: 8px 16px; font-size: 13px; }
}

/* ② 矮屏（手机横屏）：隐藏说明文字，画布按可用高度等比缩放 */
@media (max-height: 560px) {
  .g-wrap { padding: 6px; gap: 6px; }
  .g-bar { gap: 6px; }
  .g-chip { padding: 4px 9px; font-size: 11.5px; }
  .g-chip b { font-size: 14px; }
  .g-btn { padding: 5px 11px; font-size: 12px; }
  .g-tip { display: none; }
  .g-stage { padding: 6px; border-radius: 14px; }
  .g-stage canvas {
    width: auto !important; height: auto !important;
    max-width: 100%; max-height: calc(100vh - 74px);
  }
}