/* games.css — 額外頁的小遊戲（數獨、2048）。
 * 一律用 M3 token 上色，深淺配色都由主題決定；2048 的階級只以「背景色相」區分，圖示本身
 * 沿用前景 token，這樣四種配色（系統／淺／深／純黑）下都讀得清楚。 */

/* style.css centres 額外 both ways — that was right for the one small placeholder card, but the
   games are taller than the viewport, and a centred non-scrolling flex box clips its own top with
   no way to reach it. Anchor to the top and let the page scroll instead. */
#view-extra.active { align-items: stretch; justify-content: flex-start; overflow-y: auto; }
.game-host { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 4px 0 24px; }
.game-tabs { align-self: center; }
.game-pane { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.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; }

/* ---------------- 數獨 ---------------- */
.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; }

.sdk-board {
  width: min(92vw, 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 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: min(92vw, 460px); }
.sdk-key {
  height: 46px; border-radius: 12px; cursor: pointer; font-size: 18px; font-weight: 600;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface);
}
.sdk-key.wide { grid-column: span 5; font-size: 15px; height: 40px; }
.sdk-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sdk-solved .sdk-board { border-color: var(--md-sys-color-primary); }

/* ---------------- 2048 ---------------- */
.g48-board {
  width: min(92vw, 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 { 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 { width: min(92vw, 520px); }
.g48-legend h4 { margin: 0 0 8px; }
.g48-legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.g48-leg {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px;
  font-size: 13px; color: var(--md-sys-color-on-surface-variant);
  background: hsl(var(--g48-h, 0) 62% 52% / .18);
}
.g48-leg .g48-ico { font-size: 15px; color: var(--md-sys-color-on-surface); }
.g48-leg-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- 數獨：模式列與暫停遮罩 ---- */
.sdk-mode { align-self: center; }
.sdk-board-wrap { position: relative; }
.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; }
.quest-lock-ico { font-size: 30px; color: var(--md-sys-color-on-surface-variant); opacity: .7; }
.quest-card {
  width: min(92vw, 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: min(92vw, 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; }