/* ============================================================
 *  百万富翁 · 脑筋急转弯 —— 样式
 *  主题：深蓝夜空 + 金色聚光灯，营造演播厅氛围
 * ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #0b1c3f;
  --navy-2: #112a5c;
  --panel: #0e2150;
  --gold: #ffd34e;
  --gold-2: #f0a500;
  --green: #2ecc71;
  --red: #ff5b5b;
  --text: #eaf1ff;
  --muted: #9fb3d9;
  --blue: #2b6cff;
  --blue-2: #1f4fd6;
}

html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, #1b3c7a 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 110%, #15224d 0%, transparent 55%),
    linear-gradient(160deg, #081634 0%, #050d22 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

#app { max-width: 1180px; margin: 0 auto; padding: 14px 16px 28px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-top: max(14px, env(safe-area-inset-top)); }

/* ---------- 顶部栏 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,211,78,.12), rgba(43,108,255,.10));
  border: 1px solid rgba(255,211,78,.25);
  backdrop-filter: blur(4px);
}
.logo { font-size: 20px; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(90deg, #ffe79a, #ffd34e, #f0a500);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; }
.ctrl-btn {
  cursor: pointer; border: 1px solid rgba(159,179,217,.35);
  background: rgba(255,255,255,.05); color: var(--muted);
  padding: 7px 11px; border-radius: 10px; font-size: 13px; transition: .2s;
}
.ctrl-btn.active { color: #081634; background: linear-gradient(90deg,#ffe79a,#ffd34e);
  border-color: #ffd34e; font-weight: 700; }
.ctrl-btn:hover { transform: translateY(-1px); }

/* 朗读中状态角标 */
.tts-status {
  align-self: center; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  color: #081634; background: linear-gradient(90deg,#ffe79a,#ffd34e);
  border: 1px solid #ffd34e; animation: ttsPulse 1s ease-in-out infinite;
}
@keyframes ttsPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- 主舞台布局 ---------- */
.stage { display: grid; grid-template-columns: 260px 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 820px) { .stage { grid-template-columns: 1fr; } }

/* ---------- 奖金阶梯 ---------- */
.ladder-panel {
  background: var(--panel); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 14px; align-self: start;
  max-height: 82vh; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: rgba(255,211,78,.5) transparent;
}
.ladder-panel::-webkit-scrollbar { width: 7px; }
.ladder-panel::-webkit-scrollbar-thumb { background: rgba(255,211,78,.45); border-radius: 8px; }
.ladder-title { font-size: 14px; color: var(--gold); font-weight: 700;
  text-align: center; margin-bottom: 10px; letter-spacing: 2px; }
.ladder { list-style: none; display: flex; flex-direction: column-reverse; gap: 5px; }
.ladder li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; border-radius: 9px; font-size: 13px;
  background: rgba(255,255,255,.04); color: var(--muted);
  border: 1px solid transparent; transition: .25s;
}
.ladder li .amt { font-weight: 700; letter-spacing: .5px; }
.ladder li.safe { background: rgba(46,204,113,.10); color: #bff5d6; }
.ladder li.safe .amt { color: #6ef0a8; }
.ladder li.current {
  background: linear-gradient(90deg, rgba(255,211,78,.25), rgba(240,165,0,.18));
  border-color: var(--gold); color: #fff; transform: scale(1.03);
  box-shadow: 0 0 18px rgba(255,211,78,.35);
}
.ladder li.done { color: #8aa0c8; }
.ladder li.done .amt { color: #7fd0ff; }

/* ---------- 题目区 ---------- */
.board {
  background: linear-gradient(180deg, rgba(17,42,92,.65), rgba(11,28,63,.65));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; padding: 18px 20px 22px;
}
.host {
  min-height: 52px; display: flex; align-items: center;
  background: rgba(255,211,78,.10); border: 1px solid rgba(255,211,78,.3);
  border-radius: 12px; padding: 10px 14px; font-size: 15px; color: #fff;
  margin-bottom: 16px; line-height: 1.5;
}
.host::before { content: "🎙️"; margin-right: 8px; font-size: 18px; }

.question-wrap { text-align: center; margin: 6px 0 18px; }
.tier-badge {
  display: inline-block; font-size: 12px; font-weight: 700; color: #081634;
  background: linear-gradient(90deg,#ffe79a,#ffd34e); padding: 4px 12px;
  border-radius: 999px; margin-bottom: 10px;
}
.tier-badge.小学 { background: linear-gradient(90deg,#a8f0c0,#5fd98a); }
.tier-badge.初中 { background: linear-gradient(90deg,#bfe0ff,#7fb8ff); }
.tier-badge.高中 { background: linear-gradient(90deg,#e3c2ff,#b98bff); }
.tier-badge.大学 { background: linear-gradient(90deg,#ffd1a8,#ff9d5c); }
.tier-badge.终极 { background: linear-gradient(90deg,#ffb0c0,#ff5b86); }
.question { font-size: 22px; font-weight: 700; line-height: 1.5; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.4); }

/* ---------- 选项（2x2） ---------- */
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
@media (max-width: 560px) { .options { grid-template-columns: 1fr; } }
.option {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: linear-gradient(180deg, rgba(43,108,255,.18), rgba(31,79,214,.12));
  border: 2px solid rgba(120,160,255,.35); border-radius: 12px;
  padding: 14px 16px; font-size: 17px; color: #fff; transition: .18s;
  text-align: left;
}
.option:hover { border-color: var(--gold); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(43,108,255,.3); }
.option .label {
  flex: 0 0 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; font-weight: 800;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
}
.option.removed { opacity: .25; pointer-events: none; filter: grayscale(1); }
.option.correct { background: linear-gradient(180deg, #2ecc71, #22a35a);
  border-color: #7dffb0; box-shadow: 0 0 22px rgba(46,204,113,.6); }
.option.wrong { background: linear-gradient(180deg, #ff5b5b, #d63b3b);
  border-color: #ffb0b0; box-shadow: 0 0 22px rgba(255,91,91,.6); }
.option.disabled { pointer-events: none; }

/* ---------- 观众投票结果 ---------- */
.audience-result { display: none; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.audience-result.show { display: grid; }
.vote-bar { background: rgba(255,255,255,.06); border-radius: 10px; padding: 8px 12px; }
.vote-bar .vb-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.vote-bar .vb-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); margin-top: 6px; overflow: hidden; }
.vote-bar .vb-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,#ffd34e,#f0a500); width: 0; transition: width 1s ease; }

/* ---------- 操作区 ---------- */
.action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.lifeline {
  cursor: pointer; border: 1px solid rgba(255,211,78,.4);
  background: rgba(255,211,78,.08); color: var(--gold);
  padding: 10px 14px; border-radius: 10px; font-weight: 700; font-size: 14px; transition: .2s;
}
.lifeline:hover:not(:disabled) { background: rgba(255,211,78,.18); transform: translateY(-1px); }
.lifeline:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(1); }
.mic-btn {
  cursor: pointer; border: 1px solid rgba(120,200,255,.5);
  background: rgba(43,108,255,.18); color: #cfe6ff;
  padding: 10px 14px; border-radius: 10px; font-weight: 700; font-size: 14px; transition: .2s;
}
.mic-btn.listening { background: linear-gradient(90deg,#ff5b5b,#ff8a5b); color: #fff;
  animation: pulse 1.1s infinite; border-color: #ff8a5b; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(255,91,91,.5);} 50%{ box-shadow:0 0 0 10px rgba(255,91,91,0);} }
.start-btn {
  margin-left: auto; cursor: pointer; border: none;
  background: linear-gradient(90deg,#ffe79a,#ffd34e,#f0a500); color: #081634;
  padding: 12px 26px; border-radius: 12px; font-weight: 800; font-size: 16px; transition: .2s;
  box-shadow: 0 6px 20px rgba(240,165,0,.4);
}
.start-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* ---------- 弹窗 ---------- */
.modal { position: fixed; inset: 0; background: rgba(3,8,20,.78);
  display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal.hidden { display: none; }
.modal-card {
  width: min(560px, 94vw); background: linear-gradient(180deg,#13265a,#0b1c3f);
  border: 1px solid rgba(255,211,78,.4); border-radius: 20px; padding: 28px;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6);
  animation: pop .3s ease;
}
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-card h1 { font-size: 30px; margin-bottom: 10px; }
.modal-card .big { font-size: 46px; font-weight: 900; margin: 12px 0;
  background: linear-gradient(90deg,#ffe79a,#ffd34e,#f0a500);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.modal-card p { color: var(--muted); line-height: 1.6; margin-bottom: 8px; }
.modal-card .cert { border: 1px dashed rgba(255,211,78,.5); border-radius: 12px; padding: 14px; margin: 16px 0; }
.modal-card .btn-row { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.modal-card button { cursor: pointer; border: none; padding: 12px 22px; border-radius: 12px;
  font-weight: 800; font-size: 15px; }
.modal-card .primary { background: linear-gradient(90deg,#ffe79a,#ffd34e,#f0a500); color: #081634; }
.modal-card .ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.2); }

/* ---------- 彩带 ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 14px; opacity: .9;
  animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .2; } }

/* ---------- 失误计数徽章 ---------- */
.mistake-badge {
  margin-left: 8px; padding: 4px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  color: #ffd34e; background: rgba(255,211,78,.12);
  border: 1px solid rgba(255,211,78,.35);
}

/* 触摸设备通用优化 */
* { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }

/* ============================================================
 *  移动端适配（平板 / 手机）
 * ============================================================ */

/* ---------- 平板及以下：单列，题目在上、阶梯在下 ---------- */
@media (max-width: 820px) {
  #app { padding: 10px 12px 22px; }
  .stage { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }

  /* 题目区排到最前，阶梯移到下方 */
  .board { order: 1; }
  .ladder-panel { order: 2; max-height: 220px; }
  /* 阶梯改成从低到高纵向滚动的矮面板 */
  .ladder { flex-direction: column-reverse; }
}

/* ---------- 手机：进一步收紧字号与间距 ---------- */
@media (max-width: 560px) {
  #app { padding: 8px 10px 20px; }

  /* 顶部栏：标题一行，控制按钮换行居中 */
  .topbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
  .logo { font-size: 17px; text-align: center; }
  .controls { justify-content: center; gap: 6px; }
  .ctrl-btn { padding: 6px 9px; font-size: 12px; }
  .mistake-badge { margin-left: 0; font-size: 12px; }

  /* 舞台与题目 */
  .board { padding: 14px 14px 18px; border-radius: 14px; }
  .host { font-size: 14px; padding: 9px 12px; margin-bottom: 12px; min-height: 46px; }
  .host::before { font-size: 16px; margin-right: 6px; }
  .question-wrap { margin: 4px 0 14px; }
  .question { font-size: 19px; line-height: 1.45; }

  /* 选项单列、加大点按区域 */
  .options { grid-template-columns: 1fr; gap: 10px; }
  .option { padding: 14px 14px; font-size: 16px; }
  .option .label { flex: 0 0 28px; height: 28px; }

  /* 观众投票改单列 */
  .audience-result.show { grid-template-columns: 1fr; gap: 8px; }

  /* 操作区：生命线均分一行，语音 / 开始各占整行好点按 */
  .action-row { gap: 8px; margin-top: 14px; }
  .lifeline { flex: 1 1 30%; text-align: center; padding: 11px 8px; font-size: 13px; }
  .mic-btn { flex: 1 1 100%; text-align: center; padding: 13px; font-size: 15px; }
  .start-btn { flex: 1 1 100%; margin-left: 0; padding: 14px; font-size: 16px; }

  /* 阶梯面板更矮，避免占屏 */
  .ladder-panel { max-height: 180px; padding: 10px; }
  .ladder li { padding: 8px 10px; font-size: 13px; }

  /* 结算弹窗适配小屏 */
  .modal-card { padding: 22px 18px; border-radius: 16px; }
  .modal-card h1 { font-size: 24px; }
  .modal-card .big { font-size: 36px; }
  .modal-card .btn-row { flex-direction: column; }
  .modal-card button { width: 100%; }
}

/* ---------- 横屏矮屏（手机横放）：压缩纵向留白 ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .host { min-height: auto; margin-bottom: 10px; }
  .question { font-size: 18px; }
  .ladder-panel { max-height: 60vh; }
}