/* games.css — 額外頁：首頁的三分頁（劇情／數獨／拼拼）與兩個遊戲本體（數獨、拼拼）。
 * 一律用 M3 token 上色，深淺配色都由主題決定；拼拼的階級只以「背景色相」區分，圖示本身
 * 沿用前景 token，這樣四種配色（系統／淺／深／純黑）下都讀得清楚。
 *
 * ⚠️ 硬規則（操作者 2026-07-26）：**額外頁的任何一個分頁都不得長到需要捲動。**
 * 做法是這一整頁 `overflow: hidden`，每個分頁都是一個 flex column，會伸縮的那一塊
 * （數獨盤面、拼拼盤面、拼拼的階梯）吃掉剩下的高度、其餘按內容高——所以版面永遠是
 * 「一頁」，而不是「一頁再加一點」。優先照顧窄螢幕（9:16 的 compact width）。 */

#view-extra.active { align-items: stretch; justify-content: flex-start; overflow: hidden; min-height: 0; }
.game-host { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0 6px; }
.game-host.hidden { display: none; }
.game-pane { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.game-pane.hidden { display: none; }
.game-head { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.game-head .hint { text-align: center; max-width: 42ch; }
.game-back { align-self: flex-start; flex: 0 0 auto; }

/* ---------------- 額外首頁：三分頁的介紹與配置 ----------------
   劇情＝點數的選擇／數獨＝介紹＋難度與題號＋開始|繼續|已完成／拼拼＝玩法＋階梯。
   遊戲本體要在這裡選定之後才掛出來（games.js）。 */
.game-hub { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 560px; align-self: center;
  display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.game-hub.hidden { display: none; }
.hub-tabs { align-self: center; flex: 0 0 auto; }
.hub-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.hub-pane.hidden { display: none; }
.hub-pane > .hint, .hub-pane > .status { margin: 0; }
.hub-diff { align-self: center; }
.hub-go { align-self: center; flex: 0 0 auto; margin-top: auto; }

/* ---------------- 數獨 ---------------- */
.sdk-note { text-align: center; }
.sdk-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sdk-chip {
  min-width: 34px; height: 34px; border-radius: var(--r-full); cursor: pointer; font-weight: 600;
  border: 1px solid var(--md-sys-color-outline-variant); background: transparent;
  color: var(--md-sys-color-on-surface-variant);
}
.sdk-chip.done { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }
.sdk-chip[aria-pressed="true"] { outline: 2px solid var(--md-sys-color-primary); outline-offset: 1px; }

/* 盤面吃掉「這一頁還剩下的高度」，而不是照寬度算——寬度算出來的正方形在矮螢幕上會超出一頁。
   height:100% ＋ aspect-ratio 讓它兩邊都不超過可用空間，短邊決定大小。 */
.sdk-board {
  height: 100%; max-height: 100%; width: auto; max-width: min(100%, 460px);
  aspect-ratio: 1; display: grid;
  grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr);
  gap: 1px; padding: 3px; border-radius: 12px;
  background: var(--md-sys-color-outline-variant);
  border: 3px solid var(--md-sys-color-outline-variant);
  touch-action: manipulation;
}
.sdk-cell {
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: clamp(15px, 4.2vw, 22px); font-weight: 500; line-height: 1; padding: 0;
  border: 0; background: var(--md-sys-color-surface); color: var(--md-sys-color-primary);
}
.sdk-cell.given { color: var(--md-sys-color-on-surface); font-weight: 700; }
.sdk-cell.peer { background: var(--md-sys-color-surface-container); }
.sdk-cell.same { background: var(--md-sys-color-secondary-container); }
.sdk-cell.sel { background: var(--md-sys-color-primary-container); outline: 2px solid var(--md-sys-color-primary); outline-offset: -2px; }
.sdk-cell.conflict { color: var(--md-sys-color-error); }
/* 3×3 box seams — a thicker rule every third column/row, drawn as an inset shadow so the cells all
   stay exactly the same size (a margin here would shrink rows 3 and 6). The third rule is the
   four cells that need both a left seam and a bottom seam; box-shadow doesn't merge across rules. */
.sdk-cell:nth-child(9n+4), .sdk-cell:nth-child(9n+7) { box-shadow: inset 2px 0 0 var(--md-sys-color-outline-variant); }
.sdk-cell:nth-child(n+19):nth-child(-n+27), .sdk-cell:nth-child(n+46):nth-child(-n+54) { box-shadow: inset 0 -2px 0 var(--md-sys-color-outline-variant); }
.sdk-cell:nth-child(22), .sdk-cell:nth-child(25), .sdk-cell:nth-child(49), .sdk-cell:nth-child(52) {
  box-shadow: inset 2px 0 0 var(--md-sys-color-outline-variant), inset 0 -2px 0 var(--md-sys-color-outline-variant);
}
.sdk-marks {
  font-size: clamp(7px, 1.9vw, 10px); line-height: 1.15; letter-spacing: .08em; white-space: pre-wrap;
  color: var(--md-sys-color-on-surface-variant); font-weight: 400; word-break: break-all; padding: 1px;
}

/* 數字鍵一排九顆（「清除」在工具列）。盤面之外每多一排，一頁裡就少一排——所以不再折行。 */
.sdk-pad { flex: 0 0 auto; display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; width: 100%; max-width: 460px; }
.sdk-key {
  height: 42px; border-radius: 10px; cursor: pointer; font-size: 17px; font-weight: 600; padding: 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface);
}
.sdk-tools { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sdk-tools .sdk-key { height: auto; width: auto; }
.sdk-solved .sdk-board { border-color: var(--md-sys-color-primary); }

/* ---------------- 拼拼（2048） ---------------- */
.g48-board {
  height: 100%; max-height: 100%; width: auto; max-width: min(100%, 420px);
  aspect-ratio: 1; display: grid;
  grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: 8px; padding: 8px; border-radius: 16px;
  background: var(--md-sys-color-surface-container-high, var(--md-sys-color-surface-container));
  touch-action: none;
}
.g48-cell {
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface);
  font-size: clamp(20px, 7vw, 34px);
}
.g48-ico { display: inline-flex; align-items: center; justify-content: center; }
.g48-ico .svg-inline--fa { width: 1em; height: 1em; }

/* Tier tint: hue only. The icon keeps the theme's foreground colour so every scheme stays legible. */
.g48-cell.t1,  .g48-leg.t1  { --g48-h: 100; }
.g48-cell.t2,  .g48-leg.t2  { --g48-h: 190; }
.g48-cell.t3,  .g48-leg.t3  { --g48-h: 215; }
.g48-cell.t4,  .g48-leg.t4  { --g48-h: 135; }
.g48-cell.t5,  .g48-leg.t5  { --g48-h: 285; }
.g48-cell.t6,  .g48-leg.t6  { --g48-h: 20; }
.g48-cell.t7,  .g48-leg.t7  { --g48-h: 50; }
.g48-cell.t8,  .g48-leg.t8  { --g48-h: 320; }
.g48-cell.t9,  .g48-leg.t9  { --g48-h: 170; }
.g48-cell.t10, .g48-leg.t10 { --g48-h: 30; }
.g48-cell.t11, .g48-leg.t11 { --g48-h: 250; }
.g48-cell.t12, .g48-leg.t12 { --g48-h: 200; }
.g48-cell.t13, .g48-leg.t13 { --g48-h: 15; }
.g48-cell.t14, .g48-leg.t14 { --g48-h: 80; }
.g48-cell.t15, .g48-leg.t15 { --g48-h: 0; }
.g48-cell[class*=" t"] { background: hsl(var(--g48-h) 62% 52% / .22); }
.g48-cell.t9, .g48-cell.t10, .g48-cell.t11, .g48-cell.t12 { background: hsl(var(--g48-h) 62% 52% / .32); }
.g48-cell.t13, .g48-cell.t14 { background: hsl(var(--g48-h) 66% 52% / .42); }
.g48-cell.t15 { background: hsl(var(--g48-h) 70% 52% / .55); }

.g48-tools { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.g48-over .g48-board { outline: 2px solid var(--md-sys-color-error); outline-offset: 3px; }

/* 階梯（首頁的「拼拼」分頁）：十五格擠進一頁——列高與字級都收緊，格子自己吃掉剩下的高度。 */
.g48-legend { flex: 1 1 auto; min-height: 0; width: 100%; }
.g48-legend-grid {
  height: 100%; display: grid; gap: 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  grid-auto-flow: column;
}
@media (min-width: 560px) {
  .g48-legend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); }
}
.g48-leg {
  display: flex; align-items: center; gap: 6px; padding: 2px 7px; border-radius: 9px;
  min-height: 26px; font-size: 12.5px; color: var(--md-sys-color-on-surface-variant);
  background: hsl(var(--g48-h, 0) 62% 52% / .18);
}
.g48-leg .g48-ico { font-size: 14px; color: var(--md-sys-color-on-surface); flex: 0 0 auto; }
.g48-leg-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- 數獨：模式列與暫停遮罩 ---- */
.sdk-mode { align-self: center; flex: 0 0 auto; }
/* 盤面的容器就是「這一頁扣掉其他東西之後剩下的空間」；盤面自己縮到放得進去。 */
.sdk-board-wrap { position: relative; flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center; }
.sdk-key[aria-pressed="true"] { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border-color: transparent; }
/* Pause overlay: the clock only runs while this page is really in front of the player, so when it
   stops we say so and block the board — otherwise you could keep solving with the timer parked.
   The tint is theme-neutral grey so it reads correctly in all four schemes. */
.sdk-pause {
  position: absolute; inset: 0; z-index: 5; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(127 127 127 / .38); backdrop-filter: blur(3px);
}
.sdk-pause.hidden { display: none; }
.sdk-pause-box {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 16px 20px; border-radius: 16px; max-width: 80%;
  background: var(--md-sys-color-surface); box-shadow: 0 8px 28px -10px rgb(0 0 0 / .5);
}

/* ---- 劇情分頁（點數的選擇；主線解鎖前整組停用） ---- */
.quest-locked { max-width: 460px; align-self: center; }
.quest-lock-ico { font-size: 30px; color: var(--md-sys-color-on-surface-variant); opacity: .7; }
.quest-card {
  width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; border-radius: 16px;
  background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline-variant);
}
.quest-card.done { border-color: var(--md-sys-color-primary); }
.quest-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.quest-title { font-weight: 600; }
.quest-state { font-size: 12px; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.quest-bar { height: 8px; border-radius: var(--r-full); background: var(--md-sys-color-surface); overflow: hidden; }
.quest-bar span { display: block; height: 100%; background: var(--md-sys-color-primary); }
.quest-card .status { margin: 0; }
.quest-route { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 8px; }
.quest-route-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quest-route-row select { flex: 1 1 auto; max-width: 60%; }
.quest-rest { margin: 2px 0; }