/* ===== 百萬富翁 卡通版 — 版面（參考亞視 2001–2005 節目風格） ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: "Noto Sans CJK HK", "PingFang HK", "Microsoft JhengHei", sans-serif;
  background: #02081c;
  color: #eaf2ff;
  overflow-x: hidden;
  user-select: none;
}

.screen { display: none; min-height: 100dvh; position: relative; }
.screen.active { display: block; }

/* ---------- 開始畫面 ---------- */
#screen-start {
  background:
    radial-gradient(ellipse 80% 55% at 50% 108%, rgba(30, 96, 220, .55), transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% -10%, rgba(20, 70, 180, .45), transparent 70%),
    linear-gradient(180deg, #01050f 0%, #04122f 55%, #061a44 100%);
  overflow: hidden;
}
.start-glow {
  position: absolute; left: 50%; top: 42%;
  width: 130vmin; height: 130vmin; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(46, 120, 255, .28) 0%, transparent 62%);
  pointer-events: none;
}
.start-inner {
  position: relative; z-index: 2;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 28px 18px calc(28px + env(safe-area-inset-bottom));
  text-align: center;
}
.logo-block { line-height: 1.05; }
.logo-top {
  font-size: clamp(15px, 4vw, 20px); letter-spacing: .55em; color: #9fc4ff;
  text-indent: .55em; margin-bottom: 6px;
}
.logo {
  font-size: clamp(52px, 15vw, 96px); font-weight: 900;
  background: linear-gradient(180deg, #fff5c8 8%, #ffd85e 40%, #f5a400 72%, #b96a00 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 14px rgba(255, 176, 0, .45));
}
.logo-sub {
  font-size: clamp(10px, 2.6vw, 13px); letter-spacing: .5em; text-indent: .5em;
  color: #7ea6e8; margin-top: 6px;
}
.host-big {
  width: min(46vw, 240px); max-height: 36dvh; object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 60, 180, .55));
}
.rules {
  background: rgba(6, 22, 58, .72); border: 1px solid rgba(94, 150, 255, .35);
  border-radius: 14px; padding: 12px 16px; max-width: 560px;
  font-size: clamp(13px, 3.4vw, 15px); line-height: 1.7; color: #cfe0ff;
}
.rules b { color: #ffd85e; }
.btn-main {
  font-family: inherit; font-size: clamp(17px, 4.6vw, 21px); font-weight: 800;
  color: #08122b; padding: 14px 54px; border: none; border-radius: 999px;
  background: linear-gradient(180deg, #ffe58a, #ffb400 60%, #ef8d00);
  box-shadow: 0 8px 24px rgba(255, 164, 0, .4), inset 0 1px 0 rgba(255,255,255,.7);
  cursor: pointer; transition: transform .12s;
}
.btn-main:active { transform: scale(.96); }
.start-note { font-size: 11.5px; color: #6f8cc4; }

/* ---------- 遊戲畫面 ---------- */
#screen-game {
  background:
    radial-gradient(ellipse 90% 50% at 50% 112%, rgba(28, 92, 220, .5), transparent 62%),
    linear-gradient(180deg, #01040e 0%, #04112c 60%, #06173f 100%);
  display: flex; flex-direction: column; min-height: 100dvh;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 4px; gap: 10px;
}
.mini-logo {
  font-weight: 900; font-size: clamp(15px, 4vw, 19px); letter-spacing: .1em;
  background: linear-gradient(180deg, #fff3c0, #ffb400);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lifelines { display: flex; gap: 8px; }
.ll {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: clamp(54px, 14vw, 66px); height: clamp(44px, 11vw, 54px);
  border-radius: 12px; cursor: pointer; font-family: inherit;
  background: linear-gradient(180deg, #123a86, #0a2358);
  border: 1.5px solid #4d8dff; color: #eaf3ff;
  box-shadow: 0 3px 10px rgba(0, 40, 120, .6), inset 0 1px 0 rgba(255,255,255,.18);
}
.ll:active { transform: scale(.95); }
.ll.used { opacity: .32; filter: grayscale(.9); pointer-events: none; }
.ll-ico { font-size: clamp(13px, 3.4vw, 16px); font-weight: 900; }
.ll-txt { font-size: 10px; color: #a9c6ff; }

/* 舞台 + 獎金梯 */
.stage-row {
  display: flex; flex: 1 1 auto; min-height: 0; gap: 8px;
  padding: 6px 12px 0; align-items: stretch;
}
.stage {
  position: relative; flex: 1 1 auto; min-width: 0;
  border-radius: 16px 16px 0 0; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 46% at 50% 96%, rgba(52, 130, 255, .45), transparent 70%),
    radial-gradient(ellipse 55% 40% at 50% 8%, rgba(30, 90, 210, .4), transparent 72%),
    linear-gradient(180deg, #03102c, #071c4d);
}
.spotlight {
  position: absolute; inset: 0;
  background:
    conic-gradient(from 200deg at 50% -12%, transparent 0deg, rgba(140, 190, 255, .16) 14deg, transparent 30deg),
    conic-gradient(from 320deg at 50% -12%, transparent 0deg, rgba(140, 190, 255, .13) 16deg, transparent 34deg);
  pointer-events: none;
}
.floor {
  position: absolute; left: 50%; bottom: -18%; transform: translateX(-50%);
  width: 150%; height: 55%;
  background: radial-gradient(ellipse at center, rgba(80, 150, 255, .5), rgba(10, 30, 80, 0) 65%);
  pointer-events: none;
}
.host {
  position: absolute; left: 4%; bottom: 0; height: 96%; width: auto;
  max-width: 78%; object-fit: contain; object-position: bottom left;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .55));
}
.host-bubble {
  position: absolute; left: 6%; top: 7%; max-width: 62%;
  background: rgba(240, 247, 255, .96); color: #0b2550;
  font-size: clamp(12px, 3.2vw, 15px); font-weight: 700; line-height: 1.5;
  padding: 9px 13px; border-radius: 14px 14px 14px 4px;
  box-shadow: 0 6px 18px rgba(0, 20, 70, .5);
  opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.host-bubble.show { opacity: 1; transform: translateY(0); }

/* 獎金梯 */
.ladder {
  width: clamp(132px, 33vw, 210px); flex: 0 0 auto;
  display: flex; flex-direction: column-reverse; justify-content: center;
  gap: 3px; padding: 8px 0; border-radius: 16px;
  background: rgba(3, 14, 40, .78);
  border: 1px solid rgba(80, 140, 255, .35);
  align-self: stretch;
}
.rung {
  display: flex; align-items: center; gap: 7px;
  padding: clamp(3px, .9vh, 7px) 9px; border-radius: 8px;
  font-size: clamp(11.5px, 3vw, 14.5px); font-weight: 700; color: #9fbcf3;
  white-space: nowrap;
}
.rung .no { color: #5d7fc4; font-size: .84em; width: 1.4em; text-align: right; }
.rung .amt { margin-left: auto; letter-spacing: .01em; }
.rung.haven { color: #ffd85e; }
.rung.haven .no { color: #d9a63c; }
.rung.done { color: #4f74bd; }
.rung.done .no { color: #3f5d9e; }
.rung.current {
  background: linear-gradient(90deg, #b45f00, #ff9d00 55%, #ffbe3d);
  color: #1a0e00; box-shadow: 0 2px 10px rgba(255, 156, 0, .5);
}
.rung.current .no { color: #553000; }

/* 題目區 */
.play-area { padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); }
.statusbar {
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(12px, 3.2vw, 14px); color: #a9c6ff; margin-bottom: 7px;
}
#lbl-prize { color: #ffd85e; font-weight: 800; }
.btn-quit {
  margin-left: auto; font-family: inherit; font-size: 12px; font-weight: 700;
  color: #cfe0ff; background: rgba(20, 52, 120, .8);
  border: 1px solid #3f6fd0; border-radius: 999px; padding: 5px 13px; cursor: pointer;
}
.btn-quit:active { transform: scale(.95); }

.question {
  position: relative;
  background: linear-gradient(180deg, #0d2f74 0%, #071c4d 100%);
  border: 2px solid #5aa2ff; border-radius: 14px;
  min-height: clamp(74px, 17vh, 130px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 14px clamp(14px, 4vw, 30px);
  font-size: clamp(15px, 4.2vw, 21px); font-weight: 800; line-height: 1.55;
  box-shadow: 0 6px 22px rgba(0, 40, 120, .55), inset 0 1px 0 rgba(255,255,255,.15);
}
.answers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px;
}
.ans {
  display: flex; align-items: center; gap: 9px; text-align: left;
  font-family: inherit; cursor: pointer;
  min-height: clamp(54px, 12vh, 74px); padding: 9px 13px;
  background: linear-gradient(180deg, #10367f 0%, #071c4d 100%);
  border: 2px solid #4d8dff; border-radius: 12px;
  color: #eaf3ff; font-size: clamp(13.5px, 3.6vw, 17px); font-weight: 700; line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0, 30, 90, .5), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .1s;
}
.ans:active { transform: scale(.98); }
.ans .letter {
  flex: 0 0 auto; width: clamp(24px, 6vw, 30px); height: clamp(24px, 6vw, 30px);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffd85e, #f59300);
  color: #25130a; font-weight: 900; font-size: clamp(13px, 3.4vw, 16px);
  border-radius: 7px;
}
.ans .text { flex: 1 1 auto; min-width: 0; }
.ans.removed { opacity: .18; pointer-events: none; filter: grayscale(1); }
.ans.picked {
  background: linear-gradient(180deg, #ffd85e, #f59300);
  color: #25130a; border-color: #ffe9a8;
}
.ans.picked .letter { background: #0b2550; color: #ffd85e; }
.ans.correct {
  background: linear-gradient(180deg, #27c26a, #0f8f47) !important;
  color: #fff; border-color: #7dffc0;
}
.ans.correct .letter { background: #04351d; color: #7dffc0; }
.ans.wrong {
  background: linear-gradient(180deg, #e64545, #9d1c1c) !important;
  color: #fff; border-color: #ff9d9d;
}
.ans.wrong .letter { background: #3d0808; color: #ffc9c9; }
.ans.dim { opacity: .35; }

/* 提示條（解說） */
.toast {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px); width: min(92vw, 640px);
  background: rgba(8, 26, 66, .97); border: 1px solid #4d8dff;
  border-radius: 14px; padding: 12px 16px;
  font-size: clamp(13px, 3.5vw, 15.5px); line-height: 1.65; color: #dce9ff;
  box-shadow: 0 10px 30px rgba(0, 20, 70, .6);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 40;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast b { color: #ffd85e; }

/* 錦囊彈窗 */
.modal-wrap {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(1, 6, 18, .72);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  width: min(92vw, 460px);
  background: linear-gradient(180deg, #0b2a6b, #061741);
  border: 2px solid #5aa2ff; border-radius: 18px; padding: 20px;
  text-align: center; box-shadow: 0 18px 50px rgba(0, 20, 70, .7);
}
.modal h3 { font-size: 18px; color: #ffd85e; margin-bottom: 12px; }
.aud-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; font-size: 14px; font-weight: 700; }
.aud-row .bar-wrap { flex: 1 1 auto; height: 16px; background: rgba(255,255,255,.1); border-radius: 8px; overflow: hidden; }
.aud-row .bar { height: 100%; background: linear-gradient(90deg, #2e7bff, #7db4ff); border-radius: 8px; transition: width .6s; }
.aud-row .pct { width: 3.2em; text-align: right; color: #a9c6ff; }
.modal .friend {
  font-size: clamp(14px, 4vw, 16.5px); line-height: 1.7; color: #eaf3ff;
  background: rgba(255,255,255,.07); border-radius: 12px; padding: 14px;
}
.modal .btn-main { margin-top: 16px; padding: 10px 34px; font-size: 16px; }

/* 結局 */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: radial-gradient(ellipse at 50% 40%, rgba(20, 70, 180, .9), rgba(1, 5, 16, .96) 70%);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.result-card {
  width: min(92vw, 520px); text-align: center;
  background: rgba(5, 18, 50, .92); border: 2px solid #ffd85e;
  border-radius: 20px; padding: 30px 22px;
  box-shadow: 0 20px 60px rgba(0, 10, 50, .8);
}
.result-title { font-size: clamp(20px, 5.5vw, 26px); font-weight: 900; color: #eaf3ff; }
.result-prize {
  font-size: clamp(38px, 11vw, 64px); font-weight: 900; margin: 10px 0 6px;
  background: linear-gradient(180deg, #fff5c8, #ffb400);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 12px rgba(255, 176, 0, .4));
}
.result-note { font-size: clamp(13px, 3.6vw, 15px); line-height: 1.7; color: #cfe0ff; margin-bottom: 18px; }

.hidden { display: none !important; }

/* 桌機：左右佈局 */
@media (min-width: 760px) {
  #screen-game { max-width: 1100px; margin: 0 auto; }
  .stage-row { min-height: 40dvh; }
  .question { min-height: 110px; }
}