/* ===========================================================
   比例消除 — Sunset Gems 視覺主題
   來自 Claude Design 設計檔（warm gem aesthetic）
   疊加在 style.css 之後，覆蓋外觀但不動結構
   =========================================================== */

:root {
  --font-display: "Fredoka", "Baloo 2", "Noto Sans TC", system-ui, sans-serif;
  --font-body: "Noto Sans TC", "Fredoka", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --c-bg-deep: #2a1410;
  --c-bg: #3a1c14;
  --c-bg-soft: #4a2418;
  --c-surface: #5a2c1c;
  --c-card: rgba(255, 240, 220, 0.06);
  --c-card-strong: rgba(255, 240, 220, 0.12);
  --c-line: rgba(255, 200, 140, 0.18);

  --c-text: #fff5e8;
  --c-text-soft: #f5d9b8;
  --c-text-mute: #c8a888;
  --c-text-dim: #8a6a52;

  --c-amber: oklch(0.78 0.18 70);
  --c-orange: oklch(0.72 0.20 45);
  --c-ruby: oklch(0.65 0.24 25);
  --c-rose: oklch(0.70 0.22 10);
  --c-magenta: oklch(0.65 0.24 350);
  --c-violet: oklch(0.62 0.22 305);
  --c-gold: oklch(0.85 0.16 90);

  --c-success: oklch(0.78 0.18 145);
  --c-warn: oklch(0.82 0.20 85);
  --c-danger: oklch(0.65 0.26 25);

  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
}

/* ===== Google Fonts：已改由 index.html <link> 載入，此處 @import 移除 ===== */

/* ===== 全域底色：暖色 radial 漸層 + 星點 ===== */
html, body {
  background: var(--c-bg-deep) !important;
  color: var(--c-text) !important;
  font-family: var(--font-body) !important;
}
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, oklch(0.45 0.12 45 / .55), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, oklch(0.40 0.20 25 / .35), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 90%, oklch(0.50 0.16 60 / .28), transparent 60%),
    var(--c-bg-deep) !important;
  min-height: 100vh;
  position: relative;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 20% 12%, rgba(255,230,180,.55), transparent),
    radial-gradient(1px 1px at 80% 25%, rgba(255,210,160,.45), transparent),
    radial-gradient(1.5px 1.5px at 33% 80%, rgba(255,240,200,.5), transparent),
    radial-gradient(1px 1px at 65% 70%, rgba(255,200,140,.4), transparent),
    radial-gradient(1px 1px at 90% 40%, rgba(255,220,170,.45), transparent),
    radial-gradient(1.5px 1.5px at 10% 60%, rgba(255,230,180,.45), transparent);
}
.screen { position: relative; z-index: 1; }

/* ===== 標題 ===== */
h1, h2, h3 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.01em;
}
h1 {
  font-weight: 800 !important;
  background: linear-gradient(180deg, oklch(0.95 0.15 55), oklch(0.78 0.22 35));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 12px oklch(0.65 0.22 35 / 0.5));
  color: transparent !important;
}
h2 { color: var(--c-text) !important; font-weight: 700 !important; }
h3 { color: var(--c-text-soft) !important; font-weight: 700 !important; }
.subtitle { color: var(--c-text-mute) !important; }
p, label, .hint, .small { color: var(--c-text-soft); }
a { color: oklch(0.85 0.16 70); }

/* ===== 卡片 / 區塊容器 ===== */
.card, .panel, .lobby-section, .end-card,
.rules-paper, .info-card, .home-qr-card,
.waiting-qr-block, .opponent-hud,
.leaderboard-table, .room-row, .mode-card {
  background: var(--c-card) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-text) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.05) inset !important;
  border-radius: var(--r-lg) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ===== 輸入框 ===== */
input[type=text], input[type=number], textarea, select {
  background: rgba(0,0,0,.25) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-text) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-body);
}
input::placeholder { color: var(--c-text-dim); }

/* ===== 按鈕：juicy 3D gem button ===== */
button {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  color: #fff !important;
  background: linear-gradient(180deg, oklch(0.78 0.22 45) 0%, oklch(0.62 0.24 45) 100%) !important;
  box-shadow:
    0 5px 0 oklch(0.42 0.22 45),
    0 10px 20px oklch(0.50 0.22 45 / 0.4),
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -2px 4px rgba(0,0,0,.2) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  cursor: pointer;
  padding: 12px 24px !important;
  transition: transform .1s, box-shadow .1s;
}
button:hover {
  filter: brightness(1.06);
}
button:active {
  transform: translateY(3px);
  box-shadow:
    0 2px 0 oklch(0.42 0.22 45),
    0 4px 8px oklch(0.50 0.22 45 / 0.3),
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -2px 4px rgba(0,0,0,.2) !important;
}
button.primary {
  background: linear-gradient(180deg, oklch(0.78 0.22 25) 0%, oklch(0.62 0.26 25) 100%) !important;
  box-shadow:
    0 5px 0 oklch(0.42 0.24 25),
    0 10px 20px oklch(0.50 0.24 25 / 0.5),
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -2px 4px rgba(0,0,0,.2) !important;
}
button.primary.big {
  font-size: 1.2em !important;
  padding: 16px 32px !important;
}
button.link {
  background: transparent !important;
  color: var(--c-text-mute) !important;
  box-shadow: none !important;
  text-shadow: none;
  font-weight: 500 !important;
}
button.link:hover { color: var(--c-text-soft) !important; }
button.link.small { font-size: 0.85em !important; padding: 4px 10px !important; }

/* ===== Hero 區塊 ===== */
.hero {
  background: linear-gradient(135deg, oklch(0.45 0.18 35), oklch(0.35 0.20 20)) !important;
  border: 1px solid var(--c-line);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

/* ===== 結束情緒圖容器 ===== */
.end-image-wrap {
  border: 1px solid var(--c-line);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

/* ===== 棋盤 ===== */
.game-board {
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, oklch(0.30 0.12 30 / .8), transparent 70%),
    linear-gradient(160deg, oklch(0.18 0.06 25), oklch(0.10 0.04 20)) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:
    inset 0 4px 12px rgba(0,0,0,.5),
    0 12px 40px rgba(0,0,0,.6),
    0 0 0 1px oklch(0.50 0.16 35 / .25) !important;
  padding: 10px !important;
  gap: 4px !important;
}

/* ===== 寶石單元：保留原 style.css 風格（淺底、彩色數字）===== */

/* ===== HUD pill 樣式 ===== */
.hud {
  background: var(--c-card) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-pill) !important;
  padding: 12px 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.4) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hud-item {
  padding: 4px 10px;
  border-right: 1px solid var(--c-line);
}
.hud-item:last-child { border-right: none; }
.hud-label {
  font-size: 0.7em !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-mute) !important;
  font-weight: 600;
}
.hud-value {
  font-family: var(--font-display) !important;
  font-size: 1.6em !important;
  font-weight: 800 !important;
  color: oklch(0.92 0.14 50) !important;
  text-shadow: 0 0 14px oklch(0.70 0.20 50 / 0.7);
}
.hud-value.gold {
  color: oklch(0.92 0.16 90) !important;
  text-shadow: 0 0 14px oklch(0.85 0.16 90 / 0.7);
}

/* ===== 連擊高亮 ===== */
#comboHudItem.hot .hud-value {
  color: oklch(0.85 0.26 25) !important;
  text-shadow: 0 0 18px oklch(0.75 0.28 25 / 0.95) !important;
  font-size: 1.8em !important;
  animation: combo-pulse 0.6s ease-in-out infinite !important;
}

/* ===== 拖曳路徑（svg overlay）：路徑顏色已含 stroke,額外 drop-shadow
   在 iPad Safari 拖曳期間每幀重新光柵化整個 SVG layer,容易 GPU OOM 當機。
   桌機保留發光效果,行動裝置全面停用 ===== */
@media (min-width: 1101px) {
  .path-overlay { filter: drop-shadow(0 0 6px oklch(0.85 0.20 50 / 0.8)); }
}

/* ===== 行動裝置（含 iPad）GPU 減壓:大量 backdrop-filter 在 iPad Safari 連續觸控
   時容易 GPU OOM,改成單純玻璃底 ===== */
@media (max-width: 1100px) {
  .card, .panel, .info-card, .home-qr-card,
  .waiting-qr-block, .opp-card,
  .leaderboard-table, .room-row, .mode-card,
  .hud, .quiz-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* 棋盤背景簡化:多重 radial-gradient 在 iPad 渲染昂貴 */
  .game-board {
    background: linear-gradient(160deg, oklch(0.18 0.06 25), oklch(0.10 0.04 20)) !important;
  }
  /* 標題的 drop-shadow 也簡化 */
  h1 { filter: none !important; }

  /* body 多層 radial-gradient + body::before 6 個星點 → 全螢幕大型 paint layer
     iPad Safari 隨時間累積 GPU 記憶體。改純色底 + 隱藏星點 */
  body {
    background: var(--c-bg-deep) !important;
  }
  body::before { display: none !important; }

  /* 關閉所有「box-shadow / outline-color / background」的 infinite animation
     iPad Safari 對這類 paint-heavy 動畫會持續累積 raster memory */
  .cell.hint:not(.chained) {
    animation: none !important;
    /* 保留靜態視覺辨識:橘色虛線框 + 暖底 */
    outline: 3px dashed #FF6B4A !important;
    outline-offset: -3px;
    background: rgba(255, 107, 74, 0.18) !important;
    box-shadow: 0 0 12px rgba(255, 107, 74, 0.45) !important;
  }
  .cell.unknown {
    animation: none !important;
    /* 維持紫色辨識但不脈動 */
    box-shadow: 0 2px 10px rgba(142, 68, 173, 0.5) !important;
  }
  #comboHudItem.hot .hud-value {
    animation: none !important;
  }
  /* 對手卡分數差也別閃 */
  .opp-score-diff.flash {
    animation: none !important;
  }

  /* === 棋盤 / cell 級別優化:減少 GPU 合成層、限制 paint 範圍 === */
  /* 限制棋盤的 layout / paint 不外溢,WebKit 可獨立管理該區 */
  .game-board {
    contain: layout style paint;
  }
  /* cell 不再開啟過渡(每次 chain class 變動都不觸發 paint/transform 過渡)
     iPad WebKit 對連續 transition 累積合成層回收不乾淨 */
  .cell {
    transition: none !important;
    /* 用 border 代替 box-shadow,paint 較廉價 */
    box-shadow: none !important;
    /* 強制告訴 browser 不要主動 promote 成 GPU layer */
    will-change: auto !important;
  }
  /* hover 在觸控裝置會 sticky,且我們不需要 */
  .cell:hover:not(.empty) {
    transform: none !important;
    box-shadow: none !important;
  }
  /* chained 用簡單 outline 取代 box-shadow,並移除 scale 過渡 */
  .cell.chained {
    transform: none !important;
    box-shadow: none !important;
    outline: 3px solid var(--c-gold) !important;
    outline-offset: -2px;
    background: oklch(0.40 0.16 75 / 0.35) !important;
    z-index: 2;
  }
  /* 棋盤上各種彩色數字仍有顏色辨識,但取消個別陰影,大幅減少 layer 數 */
  .cell.empty { box-shadow: none !important; }
  .cell.stone {
    box-shadow: inset 0 -2px 4px rgba(0,0,0,.4) !important;
    /* 簡化漸層,iPad 渲染更便宜 */
  }
  /* 路徑線條可保留(SVG 內部繪製,不會新增 GPU layer) */
}

/* ===== 對手浮動小視窗（取代舊 .opponent-hud 橫條）===== */
.opp-card {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 220px;
  z-index: 50;
  padding: 12px 14px !important;
  background:
    linear-gradient(160deg, oklch(0.32 0.10 25 / 0.95), oklch(0.20 0.08 20 / 0.95)) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--c-text) !important;
  font-size: 0.9em;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.opp-card.collapsed {
  transform: translateX(calc(100% - 56px));
  opacity: 0.85;
}
.opp-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.opp-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, oklch(0.62 0.24 35), oklch(0.45 0.22 25));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
.opp-meta { flex: 1; min-width: 0; }
.opp-name {
  font-size: 0.65em;
  letter-spacing: 0.15em;
  color: var(--c-text-mute);
  text-transform: uppercase;
}
.opp-id {
  font-size: 0.95em;
  font-weight: 700;
  color: var(--c-gold) !important;
  text-shadow: 0 0 8px oklch(0.85 0.16 90 / 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opp-card-toggle {
  background: transparent !important;
  color: var(--c-text-soft) !important;
  border: none !important;
  padding: 2px 8px !important;
  font-size: 1.3em !important;
  margin: 0 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  flex: 0 0 auto;
}
.opp-card-toggle:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* 分數差顯示 */
.opp-score-row {
  text-align: center;
  margin: 4px 0 6px;
}
.opp-score-label {
  font-size: 0.62em;
  color: var(--c-text-mute);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.opp-score-diff {
  font-family: var(--font-mono);
  font-size: 1.4em;
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.1;
}
.opp-score-diff.lead {
  color: oklch(0.85 0.20 145) !important;
  text-shadow: 0 0 10px oklch(0.75 0.20 145 / 0.55);
}
.opp-score-diff.behind {
  color: oklch(0.82 0.22 25) !important;
  text-shadow: 0 0 10px oklch(0.70 0.22 25 / 0.55);
}
.opp-score-diff.flash {
  animation: diff-flash 0.7s ease-in-out infinite;
}
@keyframes diff-flash {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); filter: drop-shadow(0 0 12px currentColor); }
}

/* 雙條進度比較 */
.opp-bars { margin: 4px 0; }
.opp-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
}
.opp-bar-tag {
  flex: 0 0 18px;
  font-size: 0.72em;
  text-align: center;
  font-weight: 800;
  font-family: var(--font-display);
}
.opp-bar-tag.me  { color: oklch(0.85 0.20 145); }
.opp-bar-tag.opp { color: oklch(0.82 0.22 25); }
.opp-bar-track {
  flex: 1;
  height: 9px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.opp-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 5px;
  transition: width 0.45s cubic-bezier(0.34, 1.15, 0.64, 1);
}
.opp-bar-fill.me {
  background: linear-gradient(90deg, oklch(0.55 0.22 145), oklch(0.78 0.20 145));
  box-shadow: 0 0 8px oklch(0.70 0.20 145 / 0.5);
}
.opp-bar-fill.opp {
  background: linear-gradient(90deg, oklch(0.50 0.24 25), oklch(0.78 0.22 25));
  box-shadow: 0 0 8px oklch(0.65 0.24 25 / 0.5);
}
.opp-bar-val {
  flex: 0 0 36px;
  font-size: 0.85em;
  text-align: right;
  color: var(--c-text);
  font-weight: 700;
}

/* 統計行 + 石頭計數 */
.opp-stats, .opp-stones {
  display: flex;
  justify-content: space-between;
  font-size: 0.78em;
  color: var(--c-text-soft);
  margin: 4px 0 0;
}
.opp-stats b   { color: var(--c-text); font-family: var(--font-mono); }
.opp-stones    { padding-top: 6px; border-top: 1px dashed var(--c-line); margin-top: 6px; }
.opp-stones b  { font-family: var(--font-mono); }
.opp-stone-out { color: oklch(0.85 0.20 145); }
.opp-stone-out b { color: oklch(0.90 0.20 145); }
.opp-stone-in  { color: oklch(0.82 0.22 25); }
.opp-stone-in  b { color: oklch(0.90 0.22 25); }

/* 普通消除：卡片輕微脈衝（不發 toast） */
@keyframes opp-pulse-anim {
  0%   { transform: none; box-shadow: 0 12px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); }
  50%  { transform: scale(1.04); box-shadow: 0 14px 40px oklch(0.65 0.24 25 / 0.6), inset 0 1px 0 rgba(255,255,255,.15); }
  100% { transform: none; box-shadow: 0 12px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); }
}
.opp-card.opp-pulse { animation: opp-pulse-anim 0.55s ease-out; }
.opp-card.collapsed.opp-pulse { animation: none; }

/* 對手連擊新高 toast */
.opp-toast {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translate(-50%, 8px);
  padding: 8px 14px;
  background: linear-gradient(180deg, oklch(0.72 0.26 25), oklch(0.55 0.24 22));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  border-radius: 18px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  font-size: 0.88em;
  box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 18px oklch(0.65 0.26 25 / 0.6);
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
  z-index: 51;
}
.opp-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* RWD：手機 / iPad / 中型平板 — 改為 in-flow 橫條，
   避開 Edge / Chrome / Safari 行動瀏覽器邊緣 sidebar / AI 面板等 UI 干擾 */
@media (max-width: 1100px) {
  .opp-card {
    position: static !important;
    width: auto;
    margin: 4px 0 8px;
    padding: 8px 12px !important;
    font-size: 0.88em;
    transform: none !important;
    opacity: 1 !important;
  }
  .opp-card.collapsed { transform: none !important; opacity: 1 !important; }
  /* 標頭壓縮：隱藏「對手」標籤 + 收合按鈕 */
  .opp-card-header {
    margin-bottom: 6px;
    gap: 10px;
  }
  .opp-avatar { flex: 0 0 30px; width: 30px; height: 30px; font-size: 0.95em; }
  .opp-name { display: none; }
  .opp-id { font-size: 1em; }
  .opp-card-toggle { display: none; }
  /* 分數差顯示變橫向 */
  .opp-score-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
  }
  .opp-score-label { font-size: 0.65em; }
  .opp-score-diff { font-size: 1.1em; }
  .opp-bars { margin: 4px 0 6px; }
  .opp-bar-track { height: 7px; }
  .opp-bar-val { flex: 0 0 32px; font-size: 0.82em; }
  .opp-stats, .opp-stones { font-size: 0.78em; }
  .opp-stones { padding-top: 4px; margin-top: 4px; }
  /* Toast 移到卡片下方且固定在頁面，避免外溢 */
  .opp-toast {
    position: fixed;
    top: auto;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 8px);
  }
  .opp-toast.show { transform: translate(-50%, 0); }
  /* in-flow 模式下棋盤不需要 padding 騰出右側 */
  #screen-play .board-wrap { padding-right: 0 !important; }
}

/* ===== 房間列表 / 排行榜：高對比深底 ===== */
table {
  background: transparent !important;
  color: var(--c-text) !important;
}
th { color: var(--c-gold) !important; border-bottom-color: var(--c-line) !important; }
td { border-bottom-color: var(--c-line) !important; color: var(--c-text) !important; }
tr:hover { background: rgba(255, 200, 140, 0.10) !important; }

/* 排行榜表頭 / 名次列：覆蓋舊 CSS 的奶白底 */
.leaderboard-table th {
  background: rgba(0, 0, 0, 0.35) !important;
  color: var(--c-gold) !important;
  border-bottom: 1px solid var(--c-line) !important;
}
.leaderboard-table td { color: var(--c-text) !important; }
.leaderboard-table tr.top-rank {
  background: linear-gradient(90deg,
    oklch(0.50 0.22 35 / 0.35),
    oklch(0.45 0.20 25 / 0.20)) !important;
}
.leaderboard-table tr.top-rank td {
  color: oklch(0.95 0.16 80) !important;
  font-weight: 700;
  text-shadow: 0 0 12px oklch(0.80 0.20 50 / 0.5);
}
.tabs button, .tab {
  background: rgba(0, 0, 0, 0.25) !important;
  color: var(--c-text-soft) !important;
}
.tabs button.active, .tab.active {
  background: linear-gradient(180deg, oklch(0.62 0.24 35), oklch(0.45 0.22 25)) !important;
  color: #fff !important;
}

/* ===== 房號顯示 ===== */
.big-code, .mono {
  font-family: var(--font-mono) !important;
  color: var(--c-gold) !important;
  text-shadow: 0 0 18px oklch(0.85 0.16 90 / 0.7);
}

/* ===== Quiz overlay ===== */
.quiz-overlay { background: rgba(20, 8, 6, .75) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.quiz-modal {
  background: var(--c-bg-soft) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-text) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.7) !important;
}

/* Quiz 選項：覆寫全域 button !important，確保答對/答錯顏色正確顯示 */
.quiz-choice {
  border-radius: 12px !important;
  padding: 16px 0 !important;
}
.quiz-choice:disabled {
  opacity: 1 !important;       /* 抵銷 iOS Safari 對 disabled 按鈕套用的 opacity:0.4 */
  cursor: default !important;
}
.quiz-choice.correct {
  background: #56B38A !important;
  color: #fff !important;
  border: 3px solid #2E7A52 !important;
  box-shadow: 0 0 0 4px rgba(86, 179, 138, 0.4) !important;
}
.quiz-choice.wrong {
  background: #E85A5A !important;
  color: #fff !important;
  border: 3px solid #A83030 !important;
}

/* ===== 規則資訊圖卡：高對比深底 ===== */
.info-card {
  background: rgba(0, 0, 0, 0.30) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-text) !important;
}
.info-card h3, .info-card-header h3 { color: var(--c-gold) !important; }
.info-card p, .info-card li, .info-card td, .info-card th { color: var(--c-text) !important; }
.info-card .small, .info-card .hint { color: var(--c-text-soft) !important; }
.info-card code, .rules code {
  background: rgba(0, 0, 0, 0.45) !important;
  color: oklch(0.90 0.16 70) !important;
  border: 1px solid var(--c-line);
}
.info-icon {
  background: linear-gradient(180deg, oklch(0.55 0.22 45), oklch(0.42 0.20 30)) !important;
  color: #fff !important;
}

/* 模式卡（規則頁三模式） */
.mode-item {
  background: rgba(0, 0, 0, 0.30) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-text) !important;
}
.mode-item h4 { color: var(--c-gold) !important; }
.mode-item p { color: var(--c-text-soft) !important; }

/* 石頭流程說明 */
.stone-step {
  background: rgba(0, 0, 0, 0.30) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-text) !important;
}
.stone-step p { color: var(--c-text) !important; }
.stone-step-head { color: var(--c-gold) !important; }
.stone-step-head .step-num {
  background: linear-gradient(180deg, oklch(0.55 0.10 35), oklch(0.40 0.08 25)) !important;
  color: #fff !important;
}

/* 警告框 */
.warn-box {
  background: rgba(220, 100, 50, 0.18) !important;
  border: 1px solid oklch(0.65 0.22 35 / 0.5) !important;
  color: oklch(0.90 0.16 50) !important;
}
.combo-pill {
  background: var(--c-card-strong) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-text-soft) !important;
}
.combo-pill.hot {
  background: linear-gradient(180deg, oklch(0.62 0.26 25), oklch(0.45 0.24 20)) !important;
  color: #fff !important;
  border-color: oklch(0.70 0.24 25) !important;
}

/* ===== Mode card / CTA ===== */
.mode-card {
  background: var(--c-card) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-text) !important;
}
.mode-card:hover {
  background: var(--c-card-strong) !important;
  border-color: oklch(0.70 0.20 50 / .5) !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}

/* ===== flash message ===== */
.flash {
  background: var(--c-card-strong) !important;
  border: 1px solid var(--c-line);
  color: var(--c-text) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.flash.ok { border-color: oklch(0.65 0.22 145 / .6) !important; color: oklch(0.85 0.20 145) !important; }
.flash.warn { border-color: oklch(0.70 0.24 25 / .6) !important; color: oklch(0.85 0.22 25) !important; }

/* ===== 對戰結束結果卡（贏 / 輸 / 平）：強化字的對比度 ===== */
/* 原 style.css 的淺色底 + 全域 p { color: 淡桃 } 造成「幹得好！」幾乎看不見 */
.battle-result {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.battle-result.win {
  background: linear-gradient(180deg, oklch(0.30 0.14 145 / 0.55), oklch(0.20 0.10 145 / 0.40)) !important;
  border: 1px solid oklch(0.65 0.22 145 / 0.5) !important;
  color: oklch(0.92 0.20 145) !important;
}
.battle-result.lose {
  background: linear-gradient(180deg, oklch(0.32 0.18 25 / 0.50), oklch(0.20 0.12 20 / 0.35)) !important;
  border: 1px solid oklch(0.65 0.24 25 / 0.5) !important;
  color: oklch(0.92 0.22 25) !important;
}
.battle-result.tie {
  background: linear-gradient(180deg, oklch(0.30 0.10 70 / 0.50), oklch(0.22 0.08 60 / 0.35)) !important;
  border: 1px solid oklch(0.70 0.16 80 / 0.5) !important;
  color: oklch(0.92 0.16 80) !important;
}
/* 內部段落 / 文字繼承色（覆寫全域 p { color: var(--c-text-soft) }） */
.battle-result p,
.battle-result span,
.battle-result b {
  color: inherit !important;
  font-weight: 800 !important;
}

/* ===== 打字錯誤 / 錯誤訊息 ===== */
.error { color: oklch(0.78 0.22 25) !important; }
.notice { background: var(--c-card-strong) !important; border-color: var(--c-line) !important; color: var(--c-text-soft) !important; }

/* ===========================================================
   對比度全面修正：補強 style.css 淺色主題在暗主題下會看不到的部分
   原則：保留色彩語義（綠/紅/金）但全面改用暗色玻璃底 + 高彩文字
   =========================================================== */

/* 1. 對戰大廳房間列表：房號(navy on dark = 看不見) / 建房者(灰 on dark) */
.room-code {
  color: var(--c-gold) !important;
  text-shadow: 0 0 12px oklch(0.85 0.16 90 / 0.6);
}
.room-host { color: var(--c-text-soft) !important; }
.room-count {
  background: rgba(0, 0, 0, 0.35) !important;
  color: var(--c-text-soft) !important;
  border: 1px solid var(--c-line);
}

/* 2. 等待對手畫面大房號 .big-code：原本淺米色底洗掉金字 */
.big-code {
  background: linear-gradient(135deg, oklch(0.22 0.08 70 / 0.70), oklch(0.14 0.04 55 / 0.50)) !important;
  border: 3px dashed oklch(0.65 0.18 80 / 0.65) !important;
  color: var(--c-gold) !important;
  text-shadow: 0 0 24px oklch(0.85 0.16 90 / 0.7) !important;
}

/* 3. 大廳輔助元件 */
.lobby-join-by-code input,
.id-input,
input[type=text]:not(.no-dark-fix) {
  background: rgba(0, 0, 0, 0.35) !important;
  color: var(--c-text) !important;
  border-color: var(--c-line) !important;
}
.id-input::placeholder,
.lobby-join-by-code input::placeholder { color: var(--c-text-dim) !important; }
.id-label { color: var(--c-gold) !important; }

/* 4. 對戰結束統計表 .battle-final-table */
.battle-final-table th {
  background: rgba(0, 0, 0, 0.40) !important;
  color: var(--c-gold) !important;
  border-bottom-color: var(--c-line) !important;
}
.battle-final-table td {
  color: var(--c-text) !important;
  border-bottom-color: var(--c-line) !important;
}
.battle-final-table td:first-child {
  color: var(--c-text-mute) !important;
}

/* 5. 比例式顯示 .equation：暗色玻璃底 */
.equation {
  background: linear-gradient(180deg, oklch(0.22 0.06 60 / 0.55), oklch(0.14 0.04 55 / 0.35)) !important;
  border: 2px dashed oklch(0.55 0.10 70 / 0.5) !important;
  color: var(--c-text) !important;
}
.equation.hint {
  background: transparent !important;
  color: var(--c-text-mute) !important;
  border-color: var(--c-line) !important;
}
.equation.valid {
  background: linear-gradient(180deg, oklch(0.30 0.14 145 / 0.50), oklch(0.20 0.10 145 / 0.30)) !important;
  border: 2px dashed oklch(0.65 0.20 145 / 0.6) !important;
  color: oklch(0.90 0.20 145) !important;
}
.equation.invalid {
  background: linear-gradient(180deg, oklch(0.30 0.18 25 / 0.50), oklch(0.20 0.12 20 / 0.30)) !important;
  border: 2px dashed oklch(0.65 0.24 25 / 0.6) !important;
  color: oklch(0.90 0.22 25) !important;
}

/* 6. 訊息提示 .message.ok/.warn/.info */
.message.ok {
  background: linear-gradient(180deg, oklch(0.30 0.14 145 / 0.45), oklch(0.20 0.08 145 / 0.30)) !important;
  border: 1px solid oklch(0.65 0.20 145 / 0.5) !important;
  color: oklch(0.85 0.18 145) !important;
}
.message.warn {
  background: linear-gradient(180deg, oklch(0.32 0.18 25 / 0.45), oklch(0.20 0.12 20 / 0.30)) !important;
  border: 1px solid oklch(0.65 0.24 25 / 0.5) !important;
  color: oklch(0.88 0.22 25) !important;
}
.message.info {
  background: linear-gradient(180deg, oklch(0.30 0.14 240 / 0.45), oklch(0.22 0.10 240 / 0.30)) !important;
  border: 1px solid oklch(0.65 0.18 240 / 0.5) !important;
  color: oklch(0.85 0.16 240) !important;
}

/* 7. 名字輸入 + 上傳成功 */
.name-input-block {
  background: rgba(0, 0, 0, 0.30) !important;
  border: 2px dashed oklch(0.65 0.16 80 / 0.55) !important;
  color: var(--c-text) !important;
}
.name-input-block label {
  color: var(--c-gold) !important;
}
.name-input-block input {
  background: rgba(0, 0, 0, 0.40) !important;
  border: 2px solid var(--c-line) !important;
  color: var(--c-text) !important;
}
.submitted-block .success-msg {
  background: linear-gradient(180deg, oklch(0.30 0.14 145 / 0.50), oklch(0.20 0.10 145 / 0.30)) !important;
  border: 2px solid oklch(0.65 0.20 145 / 0.55) !important;
  color: oklch(0.90 0.20 145) !important;
}
.name-error { color: oklch(0.85 0.22 25) !important; }

/* 8. 遊戲中提示按鈕 .hint-toggle（原本淺黃底深咖色）*/
.hint-toggle {
  background: linear-gradient(180deg, oklch(0.62 0.18 80), oklch(0.50 0.20 75)) !important;
  border: 2px solid oklch(0.65 0.16 80 / 0.7) !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.hint-toggle.off {
  background: rgba(0, 0, 0, 0.40) !important;
  border-color: var(--c-line) !important;
  color: var(--c-text-mute) !important;
}

/* 9. 規則頁範例卡 .example*（在 .info-card 內，原本三種淺色底）*/
.info-card .example {
  background: rgba(0, 0, 0, 0.30) !important;
  border-left: 5px solid var(--c-line) !important;
}
.info-card .example-ok {
  background: oklch(0.30 0.14 145 / 0.30) !important;
  border-left-color: oklch(0.65 0.20 145) !important;
}
.info-card .example-bad {
  background: oklch(0.30 0.18 25 / 0.30) !important;
  border-left-color: oklch(0.65 0.22 25) !important;
}
.info-card .example-eq { color: var(--c-gold) !important; }
.info-card .example-ok .example-note { color: oklch(0.88 0.18 145) !important; }
.info-card .example-bad .example-note { color: oklch(0.88 0.22 25) !important; }

/* 10. 規則頁迷你提示 .mini / .tiny-hint */
.info-card .mini {
  background: rgba(0, 0, 0, 0.30) !important;
  border-left: 3px solid var(--c-gold) !important;
  color: var(--c-text-soft) !important;
}
.info-card .mini code {
  background: rgba(0, 0, 0, 0.40) !important;
  color: var(--c-gold) !important;
}
.info-card .tiny-hint { color: var(--c-text-mute) !important; }

/* 11. 規則頁兩欄對比 */
.info-card .ok-item {
  background: oklch(0.30 0.14 145 / 0.35) !important;
  border: 2px solid oklch(0.65 0.20 145 / 0.55) !important;
  color: oklch(0.90 0.18 145) !important;
}
.info-card .bad-item {
  background: oklch(0.30 0.18 25 / 0.35) !important;
  border: 2px solid oklch(0.65 0.22 25 / 0.55) !important;
  color: oklch(0.90 0.22 25) !important;
}

/* 12. 規則頁未知數 quiz 預覽 */
.info-card .unknown-demo {
  background: rgba(0, 0, 0, 0.25) !important;
}
.info-card .quiz-preview {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 2px dashed oklch(0.65 0.16 80 / 0.55) !important;
}
.info-card .quiz-eq { color: var(--c-gold) !important; }
.info-card .quiz-opts span {
  background: rgba(0, 0, 0, 0.45) !important;
  border-color: var(--c-line) !important;
  color: var(--c-text-soft) !important;
}
.info-card .quiz-opts span.correct {
  background: linear-gradient(180deg, oklch(0.55 0.20 145), oklch(0.42 0.22 145)) !important;
  border-color: oklch(0.65 0.20 145) !important;
  color: #fff !important;
}

/* 13. 規則頁分數柱與柱旁文字 */
.info-card .score-bar {
  background: linear-gradient(90deg, oklch(0.85 0.16 90), var(--c-gold)) !important;
  color: oklch(0.20 0.06 60) !important;
}
.info-card .score-val { color: var(--c-gold) !important; }

/* 14. 規則頁步驟卡 */
.info-card .step {
  background: rgba(0, 0, 0, 0.30) !important;
  border: 2px solid var(--c-line) !important;
  color: var(--c-text) !important;
}
.info-card .step p { color: var(--c-text) !important; }
.info-card .step small { color: var(--c-text-mute) !important; }
.info-card .step-num {
  background: linear-gradient(180deg, oklch(0.62 0.20 45), oklch(0.45 0.22 35)) !important;
  color: #fff !important;
}

/* 15. 規則頁警告框 */
.info-card .warn-box {
  background: oklch(0.32 0.18 25 / 0.30) !important;
  border: 2px solid oklch(0.65 0.22 25 / 0.55) !important;
  color: oklch(0.88 0.22 25) !important;
}

/* 16. 等待提示文字、QR 提示 */
.waiting-qr-hint { color: var(--c-text-soft) !important; }
.loading { color: var(--c-text-mute) !important; }
.loading-dots span { color: var(--c-text-soft); }

/* 17. 首頁副標題 / 模式卡描述 */
.subtitle { color: var(--c-text-mute) !important; }
.mode-desc { color: var(--c-text-soft) !important; }
.mode-card.disabled .mode-desc { color: var(--c-text-dim) !important; }
.card .hint, .small, .hint { color: var(--c-text-mute) !important; }

/* 18. HUD 內小字 */
.hud-item.small .hud-value { color: var(--c-text-soft) !important; }
.hud-label { color: var(--c-text-mute) !important; }

/* 19. 連線按鈕（小） */
button.link, button.link.small { color: var(--c-text-mute) !important; }
button.link:hover { color: var(--c-text-soft) !important; }

/* ===== 列印模式：保留淺色（學習單）===== */
@media print {
  html, body {
    background: #fff !important;
    color: #000 !important;
  }
  body::before { display: none; }
  .cell, .cell::before, .cell::after { all: revert; }
}