/* 小窝本地游戏共享视觉层。游戏规则和渲染逻辑分别保留在各自模块。 */
.native-game {
  --game-surface: rgba(255, 255, 255, .045);
  --game-surface-strong: rgba(255, 255, 255, .08);
  --game-line: var(--border, rgba(255, 255, 255, .12));
  --game-accent: var(--accent, #22d3ee);
  --game-accent-2: var(--accent2, #a78bfa);
  --game-warm: var(--warm, #f4b740);
  width: 100%;
  min-width: 0;
  color: var(--text, #e8ecf4);
  font-family: var(--font, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif);
}

.native-game,
.native-game * {
  box-sizing: border-box;
}

.native-game button,
.native-game input {
  font: inherit;
}

.native-game button {
  -webkit-tap-highlight-color: transparent;
}

.native-game-shell {
  width: 100%;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--game-line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(20, 32, 51, .96), rgba(10, 16, 28, .98));
}

html[data-theme="light"] .native-game-shell,
html:not([data-theme="dark"]) .native-game-shell {
  background: linear-gradient(145deg, rgba(246, 249, 255, .98), rgba(235, 241, 250, .98));
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .native-game-shell { background: linear-gradient(145deg, rgba(20, 32, 51, .96), rgba(10, 16, 28, .98)); }
}

.native-game-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.native-game-kicker {
  margin-bottom: 4px;
  color: var(--game-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.native-game-title {
  margin: 0;
  color: var(--text, #e8ecf4);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .4px;
}

.native-game-subtitle {
  margin: 4px 0 0;
  color: var(--muted, #8b95a7);
  font-size: 12px;
  line-height: 1.55;
}

.native-game-actions,
.native-game-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.native-game-btn {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--game-line);
  border-radius: 999px;
  color: var(--text, #e8ecf4);
  background: var(--game-surface);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.native-game-btn:hover {
  border-color: var(--game-accent);
  background: var(--game-surface-strong);
  transform: translateY(-1px);
}

.native-game-btn:focus-visible,
.native-game-tile:focus-visible {
  outline: 2px solid var(--game-accent);
  outline-offset: 2px;
}

.native-game-btn.is-primary {
  border-color: transparent;
  color: #04121a;
  background: linear-gradient(135deg, var(--game-accent), var(--game-accent-2));
}

.native-game-btn.is-active {
  border-color: var(--game-accent);
  color: var(--game-accent);
  background: rgba(34, 211, 238, .1);
}

.native-game-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.native-game-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 12px;
}

.native-game-stat {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--game-line);
  border-radius: 10px;
  background: var(--game-surface);
}

.native-game-stat-label {
  display: block;
  margin-bottom: 2px;
  color: var(--faint, #5b6478);
  font-size: 10px;
}

.native-game-stat-value {
  display: block;
  overflow: hidden;
  color: var(--text, #e8ecf4);
  font-size: 17px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-game-note {
  min-height: 20px;
  margin: 10px 0 0;
  color: var(--muted, #8b95a7);
  font-size: 12px;
  line-height: 1.55;
}

.native-game-note.is-success { color: #34d399; }
.native-game-note.is-danger { color: #fb7185; }

.native-game-footnote {
  margin: 10px 0 0;
  color: var(--faint, #5b6478);
  font-size: 11px;
  line-height: 1.6;
}

/* 扫雷 */
.minesweeper .native-game-head { align-items: center; }
.minesweeper .ms-difficulty { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.minesweeper .ms-board-wrap { width: min(100%, 500px); margin: 0 auto; padding: 8px; border: 1px solid var(--game-line); border-radius: 14px; background: rgba(1, 7, 16, .46); }
.minesweeper .ms-board { display: grid; gap: 3px; width: 100%; aspect-ratio: 1; touch-action: manipulation; user-select: none; }
.minesweeper .ms-cell { min-width: 0; min-height: 0; padding: 0; border: 1px solid rgba(255, 255, 255, .08); border-radius: 4px; color: var(--text); background: rgba(255, 255, 255, .07); font-size: clamp(12px, 3vw, 18px); font-weight: 800; cursor: pointer; }
.minesweeper .ms-cell:hover:not(.is-open) { border-color: var(--game-accent); background: rgba(34, 211, 238, .14); }
.minesweeper .ms-cell.is-open { border-color: transparent; color: var(--muted); background: rgba(255, 255, 255, .025); cursor: default; }
.minesweeper .ms-cell.is-flag { color: var(--game-warm); background: rgba(244, 183, 64, .12); }
.minesweeper .ms-cell.is-mine { color: #fb7185; background: rgba(251, 113, 133, .18); }
.minesweeper .ms-cell[data-count="1"] { color: #38bdf8; }
.minesweeper .ms-cell[data-count="2"] { color: #34d399; }
.minesweeper .ms-cell[data-count="3"] { color: #fb7185; }
.minesweeper .ms-cell[data-count="4"],
.minesweeper .ms-cell[data-count="5"],
.minesweeper .ms-cell[data-count="6"],
.minesweeper .ms-cell[data-count="7"],
.minesweeper .ms-cell[data-count="8"] { color: var(--game-accent-2); }

/* 打砖块 */
.breakout .native-game-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.breakout .bo-canvas-wrap { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--game-line); border-radius: 14px; background: #07101d; line-height: 0; }
.breakout canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; touch-action: none; }
.breakout .bo-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, .74)); text-align: center; }
.breakout .bo-overlay.is-hidden { display: none; }
.breakout .bo-overlay-inner { max-width: 300px; }
.breakout .bo-overlay strong { display: block; margin-bottom: 6px; color: #f8fbff; font-size: 22px; }
.breakout .bo-overlay span { display: block; margin-bottom: 14px; color: #aeb9cd; font-size: 12px; line-height: 1.6; }
.breakout .bo-touch { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.breakout .bo-touch button { width: 76px; height: 36px; border: 1px solid var(--game-line); border-radius: 10px; color: var(--text); background: var(--game-surface); cursor: pointer; }
.breakout .bo-touch button:active { border-color: var(--game-accent); background: rgba(34, 211, 238, .12); }

/* 拼图 */
.jigsaw .native-game-head { align-items: center; }
.jigsaw .jp-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, .42fr); gap: 12px; align-items: start; }
.jigsaw .jp-board-wrap { min-width: 0; padding: 8px; border: 1px solid var(--game-line); border-radius: 14px; background: rgba(1, 7, 16, .46); }
.jigsaw .jp-board { display: grid; gap: 3px; width: 100%; aspect-ratio: 1; touch-action: manipulation; user-select: none; }
.jigsaw .jp-tile { min-width: 0; min-height: 0; padding: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); border-radius: 5px; background-color: #162236; background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; transition: transform .16s ease, border-color .16s ease, filter .16s ease; }
.jigsaw .jp-tile.is-hint { border-color: var(--game-warm); box-shadow: 0 0 0 2px rgba(244, 183, 64, .18); }
.jigsaw .jp-tile:hover { border-color: var(--game-accent); filter: brightness(1.12); transform: translateY(-1px); }
.jigsaw .jp-tile.is-selected { border: 2px solid var(--game-accent); box-shadow: 0 0 0 2px rgba(34, 211, 238, .2); transform: scale(.96); }
.jigsaw .jp-tile.is-correct { border-color: rgba(52, 211, 153, .65); }
.jigsaw .jp-preview { padding: 10px; border: 1px solid var(--game-line); border-radius: 12px; background: var(--game-surface); }
.jigsaw .jp-preview-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: var(--muted); font-size: 11px; }
.jigsaw .jp-preview canvas { display: block; width: 100%; height: auto; border-radius: 8px; }
.jigsaw .jp-difficulty { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

@media (max-width: 700px) {
  .native-game-shell { padding: 11px; }
  .native-game-head { align-items: flex-start !important; flex-direction: column; }
  .native-game-actions { width: 100%; }
  .native-game-actions .native-game-btn { flex: 1; }
  .jigsaw .jp-layout { grid-template-columns: 1fr; }
  .jigsaw .jp-preview { display: grid; grid-template-columns: 86px 1fr; align-items: center; gap: 10px; }
  .jigsaw .jp-preview-label { display: block; margin: 0; }
  .jigsaw .jp-preview-label button { display: block; margin-top: 7px; }
}

@media (max-width: 420px) {
  .native-game-shell { padding: 9px; border-radius: 13px; }
  .native-game-title { font-size: 18px; }
  .native-game-stats { gap: 5px; }
  .native-game-stat { padding: 7px 8px; }
  .native-game-stat-value { font-size: 15px; }
  .native-game-btn { padding-inline: 9px; font-size: 11px; }
  .breakout .native-game-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 六款本地游戏共用现有根节点，不额外套页面外壳。 */
#gsMount > .native-game,
#gsMount > .rsnake,
#gsMount > .g2048,
#gsMount > .gplane {
  width: 100%;
  min-width: 0;
  margin-inline: auto;
}

@media (max-height: 960px) {
  .native-game .native-game-footnote { display: none; }
  .minesweeper .ms-board-wrap {
    width: min(100%, 500px, calc(100dvh - 490px));
  }
}

@media (max-height: 840px) {
  .native-game .native-game-shell { padding: 10px; }
  .native-game .native-game-head { gap: 8px; margin-bottom: 8px; }
  .native-game .native-game-stats { gap: 6px; margin-bottom: 8px; }
  .native-game .native-game-stat { padding: 6px 8px; }
  .native-game .native-game-stat-value { font-size: 15px; }
  .native-game .native-game-note { margin-top: 6px; line-height: 1.35; }
  .minesweeper .ms-board-wrap {
    width: min(100%, 500px, calc(100dvh - 430px));
  }
  .jigsaw .jp-layout {
    --jp-board-size: min(322px, calc(100dvh - 460px));
    grid-template-columns: minmax(0, var(--jp-board-size)) minmax(150px, 1fr);
  }
  .jigsaw .jp-board-wrap { width: 100%; }
}

@media (max-height: 840px) and (max-width: 700px) {
  .jigsaw .jp-layout { grid-template-columns: 1fr; }
  .jigsaw .jp-board-wrap {
    max-width: min(100%, calc(100dvh - 430px));
    margin-inline: auto;
  }
}

@media (max-height: 840px) and (min-width: 701px) {
  .breakout .bo-touch { margin-top: 6px; }
}