/* ==========================================================================
   小游戏：游戏首页（/games）、地图点位、选手 Bingo
   颜色、字号、圆角只用 _design_tokens.html 里的变量；区块用全站 .panel
   ========================================================================== */

.games-layout {
  --game-green: var(--color-green);
  --game-red: var(--color-red);
  --game-orange: var(--color-t);
}

/* 整页：窄版居中，区块之间统一间距 */
.game-page,
.games-hub { display: grid; gap: var(--space-md); width: min(100%, var(--narrow-width)); margin: 0 auto; color: var(--text-primary); }

.game-breadcrumb { display: flex; align-items: center; gap: 7px; min-height: 22px; color: var(--text-muted); font-size: var(--font-xs); }
.game-breadcrumb a { color: var(--text-link); }
.game-mode-tabs { justify-self: start; }
.game-mode-tabs a { min-width: 96px; text-align: center; }

.game-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg) var(--space-xl); box-shadow: inset 3px 0 0 var(--accent); }
.game-heading h1 { margin: 3px 0; font-size: var(--font-xl); line-height: 1.2; }
.game-heading p { margin: 0; color: var(--text-muted); font-size: var(--font-sm); }
.game-kicker { color: var(--accent); font-size: var(--font-xs); font-weight: 700; }
.game-counter { flex: 0 0 auto; color: var(--text-muted); font-size: var(--font-sm); }

/* ---------- 1. 地图点位：截图（越猜越放大看全）、答题表单、作答记录 ---------- */
.map-quiz-panel,
.bingo-panel { padding: var(--space-lg); }
.map-quiz-figure { position: relative; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; background: var(--color-dark); border-radius: var(--radius-md); }
.map-quiz-figure picture { display: block; width: 100%; height: 100%; }
.map-quiz-figure img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.32); transform-origin: 50% 52%; transition: transform 260ms ease; }
.map-quiz-figure.reveal-1 img { transform: scale(1.16); }
.map-quiz-figure.reveal-2 img,
.map-quiz-figure.reveal-3 img,
.map-quiz-figure.is-finished img { transform: scale(1); }
.map-quiz-figure figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; gap: 10px; padding: 7px var(--space-md); color: var(--color-white); background: var(--overlay); font-size: var(--font-xs); }

.map-quiz-form { display: grid; grid-template-columns: 180px minmax(0, 1fr) 120px; gap: var(--space-sm); margin-top: var(--space-md); }
.map-quiz-form label,
.bingo-pick-form label { display: grid; gap: 4px; color: var(--text-muted); font-size: var(--font-xs); }
.map-quiz-form select,
.map-quiz-form input,
.bingo-pick-form input { width: 100%; height: var(--control-h); }
.map-quiz-form button,
.bingo-pick-form > button { align-self: end; }

/* 作答记录：一行一次，对的那格绿色 */
.map-attempts { display: grid; gap: 6px; margin-top: var(--space-md); }
.map-attempts article { display: grid; grid-template-columns: 40px repeat(2, minmax(0, 1fr)); min-height: 44px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.map-attempts article > strong,
.map-attempts article > span { display: flex; align-items: center; gap: var(--space-sm); padding: 7px var(--space-md); border-right: 1px solid var(--border-color); font-size: var(--font-sm); }
.map-attempts article > span:last-child { border-right: 0; }
.map-attempts small { margin-left: auto; color: inherit; opacity: .78; }
.map-attempts .is-correct { color: var(--color-white); background: var(--game-green); }
.map-attempts .is-wrong { color: var(--text-primary); background: var(--surface-soft); }

/* ---------- 2. 结果、再来一局、我的记录、题目来源 ---------- */
.game-result { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-md) var(--space-xl); box-shadow: inset 3px 0 0 var(--game-green); }
.game-result.is-loss { box-shadow: inset 3px 0 0 var(--game-red); }
.game-result div { display: grid; gap: 3px; }
.game-result span,
.game-result small,
.game-result a { color: var(--text-muted); font-size: var(--font-xs); }
.game-result strong { font-size: var(--font-lg); }
.game-new-round { display: flex; justify-content: flex-end; }

.game-stats { overflow: hidden; }
.game-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.game-stat-grid > div { display: grid; gap: 2px; padding: var(--space-md); border-right: 1px solid var(--border-color); text-align: center; }
.game-stat-grid > div:last-child { border-right: 0; }
.game-stat-grid strong { font-size: var(--font-xl); font-variant-numeric: tabular-nums; }
.game-stat-grid span,
.game-source-note { color: var(--text-muted); font-size: var(--font-xs); }
.game-source-note { margin: 0 2px; }
.game-source-note a { color: var(--text-link); }

/* ---------- 3. 选手 Bingo：3×3 题板（行列是条件），选格子后在下面填选手 ---------- */
.bingo-score { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 6px; text-align: right; }
.bingo-score strong,
.bingo-score b { font-size: var(--font-lg); }
.bingo-score span { color: var(--text-muted); font-size: var(--font-xs); white-space: nowrap; }
.bingo-scroll { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.bingo-board { width: 100%; min-width: 660px; border-collapse: collapse; table-layout: fixed; }
.bingo-board th,
.bingo-board td { border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.bingo-board tr > :last-child { border-right: 0; }
.bingo-board tbody tr:last-child > * { border-bottom: 0; }
.bingo-board th { width: 25%; height: 46px; padding: 7px; color: var(--text-primary); background: var(--surface-soft); font-size: var(--font-xs); text-align: center; }
.bingo-board .bingo-corner { color: var(--text-muted); }
.bingo-board td { height: 108px; padding: 0; background: var(--bg-card); vertical-align: middle; }
.bingo-board td.is-line { box-shadow: inset 0 -4px 0 var(--game-green); }
.bingo-cell-pick { display: grid; place-content: center; gap: 4px; width: 100%; height: 108px; color: var(--text-muted); background: transparent; border: 0; transition: background var(--transition-fast); }
.bingo-cell-pick span { color: var(--accent); font-size: var(--font-2xl); line-height: 1; }
.bingo-cell-pick small { font-size: var(--font-xs); }
.bingo-cell-pick:hover,
.bingo-cell-pick.is-selected { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.bingo-player { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: var(--space-sm); text-align: center; }
.bingo-player > span { min-height: 18px; font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: var(--font-lg); }
.bingo-player strong,
.bingo-player small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bingo-player strong { color: var(--accent); font-size: var(--font-sm); }
.bingo-player small { color: var(--text-muted); font-size: var(--font-xs); }
.bingo-pick-form { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: var(--space-sm); margin-top: var(--space-md); }
.bingo-pick-form input:disabled { cursor: not-allowed; opacity: .55; }
.bingo-pick-form p { grid-column: 1 / -1; min-height: 16px; margin: -2px 0 0; color: var(--game-red); font-size: var(--font-xs); }

/* ---------- 4. 游戏首页：三张游戏卡，上面图、下面说明和模式入口 ---------- */
.games-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-gap); }
.game-card { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); transition: border-color var(--transition-fast); }
.game-card:hover { border-color: var(--border-strong); }
.game-card-visual { position: relative; display: grid; place-items: center; height: 150px; overflow: hidden; background: var(--surface-soft); border-bottom: 1px solid var(--border-color); }
.game-card-visual > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.game-card-player .game-card-visual > img { width: 72px; height: 72px; object-fit: contain; }
.game-card-player .game-card-visual > div { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 4px; }
.game-card-player .game-card-visual b,
.game-card-map .game-card-visual strong { padding: 3px 7px; color: var(--color-white); background: var(--overlay); border-radius: var(--radius-sm); font-size: var(--font-xs); }
.game-card-map .game-card-visual strong { position: absolute; right: 10px; bottom: 10px; }
.bingo-preview { grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(3, 38px); place-content: center; place-items: stretch; gap: 4px; }
.bingo-preview i { display: grid; place-items: center; color: var(--accent); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-style: normal; font-weight: 700; }
.bingo-preview i:nth-child(odd) { color: var(--game-green); }
.game-card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: var(--space-lg); }
.game-card-body > span { color: var(--accent); font-size: var(--font-xs); font-weight: 700; }
.game-card-body h2 { margin: 3px 0 6px; font-size: var(--font-lg); }
.game-card-body p { min-height: 44px; margin: 0; color: var(--text-muted); font-size: var(--font-sm); line-height: 1.55; }
.game-card-body nav { display: flex; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-md); }
.game-card-body nav a { flex: 1 1 0; padding: 7px 5px; color: var(--text-primary); background: var(--surface-soft); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: var(--font-sm); font-weight: 600; text-align: center; transition: border-color var(--transition-fast), color var(--transition-fast); }
.game-card-body nav a:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 760px) {
  .game-page,
  .games-hub { width: 100%; }
  .game-mode-tabs { justify-self: stretch; }
  .game-mode-tabs a { flex: 1; min-width: 0; }
  .game-heading { align-items: flex-start; padding: var(--space-md); }
  .game-heading h1 { font-size: var(--font-lg); }
  .game-heading p { max-width: 270px; line-height: 1.45; }
  .map-quiz-panel,
  .bingo-panel { padding: var(--space-sm); }
  .map-quiz-form { grid-template-columns: 1fr 1fr; }
  .map-quiz-form button { grid-column: 1 / -1; }
  .map-attempts article { grid-template-columns: 34px repeat(2, minmax(0, 1fr)); }
  .map-attempts article > strong,
  .map-attempts article > span { display: grid; gap: 1px; padding: 6px; }
  .map-attempts small { margin: 0; }
  .bingo-board { min-width: 0; }
  .bingo-board th { height: 42px; padding: 4px; }
  .bingo-board td,
  .bingo-cell-pick { height: 92px; }
  .bingo-player { padding: 5px 3px; }
  .bingo-player strong { font-size: var(--font-xs); }
  .bingo-player small { display: none; }
  .bingo-pick-form { grid-template-columns: minmax(0, 1fr) 92px; }
  .game-result { padding: var(--space-md); }
  .game-stat-grid > div { padding: var(--space-sm) 4px; }
  .game-stat-grid strong { font-size: var(--font-lg); }
  .games-list { grid-template-columns: 1fr; }
  .game-card { display: grid; grid-template-columns: 128px minmax(0, 1fr); }
  .game-card-visual { height: 100%; min-height: 148px; border-right: 1px solid var(--border-color); border-bottom: 0; }
  .game-card-body p { min-height: 34px; }
  .bingo-preview { grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(3, 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .map-quiz-figure img { transition: none; }
}