/* ================================================
   小遊戲共用樣式
   ================================================ */
.game-wrap { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:1.25rem; align-items:start; }
@media (max-width: 960px) { .game-wrap { grid-template-columns:1fr; } }

.game-panel { padding:1.1rem; }
.game-panel h3 { font-size:0.95rem; font-weight:800; margin-bottom:0.6rem; }
.game-hud { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; margin-bottom:0.9rem; }
.hud-pill {
  display:inline-flex; align-items:center; gap:0.35rem; padding:0.35rem 0.8rem; border-radius:999px;
  background:rgba(255,255,255,0.05); border:1px solid var(--glass-border);
  font-size:0.82rem; color:var(--text-secondary); font-family:var(--font-en);
}
.hud-pill b { color:var(--text-primary); }
.hud-pill.good b { color:var(--success); }
.hud-pill.warn b { color:var(--warning); }
.hud-pill.bad b { color:var(--danger); }
.hud-restart { cursor:pointer; font-family:inherit; }
.hud-restart:hover { border-color:var(--danger); color:var(--text-primary); }

.game-intro { padding:2rem; text-align:center; }
.game-intro .gi-icon { font-size:3.2rem; }
.game-intro h2 { font-size:1.45rem; font-weight:900; margin:0.5rem 0; }
.game-intro p { color:var(--text-secondary); line-height:1.75; }
.game-intro ul { text-align:left; max-width:520px; margin:1rem auto; line-height:1.9; color:var(--text-secondary); padding-left:1.2rem; }
.choice-row { display:flex; gap:0.4rem; justify-content:center; flex-wrap:wrap; margin:1rem 0; }
.choice-row button {
  padding:0.5rem 1rem; border-radius:999px; cursor:pointer; font-family:inherit; font-size:0.88rem;
  border:1px solid var(--glass-border); background:rgba(255,255,255,0.04); color:var(--text-secondary);
}
.choice-row button.active { background:var(--primary); border-color:var(--primary); color:#fff; font-weight:700; }

.game-msg { padding:0.75rem 0.9rem; border-radius:10px; font-size:0.86rem; line-height:1.65; margin-bottom:0.75rem; }
.game-msg.info { background:rgba(0,180,216,0.08); border:1px solid rgba(0,180,216,0.25); color:var(--text-secondary); }
.game-msg.good { background:rgba(6,214,160,0.08); border:1px solid rgba(6,214,160,0.3); color:var(--success); }
.game-msg.bad { background:rgba(239,71,111,0.08); border:1px solid rgba(239,71,111,0.3); color:#ffb4c2; }
.game-msg.learn { background:rgba(255,209,102,0.08); border:1px solid rgba(255,209,102,0.3); color:var(--text-primary); }
.game-msg.learn::before { content:"📘 小知識　"; color:var(--warning); font-weight:700; }

.game-result { padding:2rem; text-align:center; }
.game-result .score-big { font-family:var(--font-en); font-size:3rem; font-weight:900; color:var(--accent); }
.game-result .actions { display:flex; gap:0.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.2rem; }

.slider-row { display:grid; grid-template-columns:7.5rem 1fr 3.2rem; gap:0.6rem; align-items:center; margin-bottom:0.55rem; font-size:0.84rem; }
.slider-row input[type="range"] { width:100%; accent-color:var(--primary-light); }
.slider-row output { font-family:var(--font-en); text-align:right; color:var(--text-primary); }
.toggle-btn {
  width:100%; padding:0.55rem 0.7rem; margin-bottom:0.45rem; border-radius:10px; cursor:pointer; text-align:left;
  font-family:inherit; font-size:0.84rem; border:1px solid var(--glass-border); background:rgba(255,255,255,0.03);
  color:var(--text-secondary); display:flex; justify-content:space-between; gap:0.5rem;
}
.toggle-btn:hover:not(:disabled) { border-color:var(--primary-light); }
.toggle-btn.on { border-color:var(--success); color:var(--success); background:rgba(6,214,160,0.08); }
.toggle-btn:disabled { opacity:0.45; cursor:not-allowed; }

.event-log { max-height:220px; overflow-y:auto; font-size:0.8rem; line-height:1.7; color:var(--text-secondary); }
.event-log div { padding:0.25rem 0; border-bottom:1px solid rgba(255,255,255,0.04); }

.ok { color:var(--success); }
.bad { color:#ffb4c2; }

/* 排行榜 */
.lb-card { padding:1.1rem; position:sticky; top:calc(var(--navbar-height) + 1rem); }
.lb-tabs { display:flex; gap:0.3rem; margin-bottom:0.7rem; }
.lb-tabs button {
  flex:1; padding:0.35rem; border-radius:8px; cursor:pointer; font-family:inherit; font-size:0.78rem;
  border:1px solid var(--glass-border); background:none; color:var(--text-secondary);
}
.lb-tabs button.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.lb-list { list-style:none; padding:0; margin:0; font-size:0.84rem; }
.lb-list li { display:flex; align-items:center; gap:0.5rem; padding:0.4rem 0.2rem; border-bottom:1px solid rgba(255,255,255,0.04); }
.lb-list li.me { background:rgba(0,180,216,0.08); border-radius:6px; }
.lb-rank { width:1.8rem; text-align:center; font-weight:800; color:var(--text-muted); }
.lb-list li:nth-child(1) .lb-rank { color:#ffd166; }
.lb-list li:nth-child(2) .lb-rank { color:#cfd8dc; }
.lb-list li:nth-child(3) .lb-rank { color:#e0a96d; }
.lb-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-primary); }
.lb-score { font-family:var(--font-en); font-weight:700; color:var(--accent); }
.lb-del { border:none; background:none; color:var(--danger); cursor:pointer; font-size:0.75rem; }
.lb-foot { font-size:0.76rem; color:var(--text-muted); margin-top:0.7rem; line-height:1.6; }
.lb-foot button { font-size:0.74rem; padding:0.15rem 0.5rem; border-radius:6px; cursor:pointer; border:1px solid var(--glass-border); background:none; color:var(--primary-light); }
.lb-empty { text-align:center; color:var(--text-muted); font-size:0.82rem; padding:1rem 0; }

/* 手機：拉桿比較粗，手指比較好拖 */
@media (max-width: 768px) {
  .slider-row input[type="range"] { height: 28px; }
}