/* ===== 所有遊戲頁共用的樣式 =====
   各頁自己的配色、遊戲區大小仍寫在頁面內的 <style>，會蓋過這裡的設定 */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: "Segoe UI","Microsoft JhengHei",system-ui,sans-serif; min-height: 100vh; }
header { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid #2a2e3f; }
header a { color: var(--muted); text-decoration: none; font-size: 14px; }
header a:hover { color: var(--text); }
header h1 { font-size: 18px; }
main { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; padding: 24px 16px; }
.stage { text-align: center; }
.panel { background: var(--panel); border-radius: 14px; padding: 18px 20px; width: 260px; align-self: flex-start; }
.panel h2 { font-size: 15px; margin-bottom: 12px; }
.panel ol { padding-left: 22px; }
.panel li { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; border-bottom: 1px solid #262a3a; }
.panel li::marker { color: var(--muted); }
.bp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.muted { color: var(--muted); font-size: 13px; }
.overlay { position: fixed; inset: 0; background: rgba(10,12,18,.82); display: none; align-items: center; justify-content: center; z-index: 9; }
.overlay.show { display: flex; }
.dialog { background: var(--panel); border-radius: 16px; padding: 30px 36px; text-align: center; min-width: 280px; }
.dialog h2 { font-size: 22px; margin-bottom: 10px; }

/* ===== 手機版（螢幕寬 ≤ 700px）=====
   選擇器刻意多加一層（如 body > header、.stage .hud），
   才能蓋過各頁 <style> 裡寫死的寬度；電腦版完全不受影響 */
@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; }
  body > header { padding: 10px 14px; gap: 12px; }
  body > header h1 { font-size: 16px; }
  body > main { padding: 8px 8px 32px; gap: 16px; }
  main .stage { width: 100%; }
  main .panel { width: 100%; }
  .stage .hud { width: 100%; max-width: none; margin-bottom: 8px; }
  .stage .hint { font-size: 12px; }
  .overlay .dialog { min-width: 0; width: min(320px, 92vw); padding: 24px 20px; }

  /* 遊戲畫布：撐滿寬度，但高度不超過「螢幕高 − 上下要留給標題列、操作鍵的空間」
     --ar＝寬/高比、--reserve＝要保留的高度，寫在各頁 canvas 的 style 上 */
  canvas.fit {
    width: min(100%, calc((100vh - var(--reserve, 200px)) * var(--ar, 1)));
    width: min(100%, calc((100svh - var(--reserve, 200px)) * var(--ar, 1)));
    height: auto; max-width: none; max-height: none;
  }
}

/* 只對鍵盤有用的提示，觸控裝置上隱藏，把空間讓給遊戲 */
@media (pointer: coarse) {
  .kbd-only { display: none; }
}