:root{--night:#071b23;--deep:#0a2b32;--panel:#f7f1df;--paper:#fffaf0;--ink:#172c2e;--muted:#557074;--teal:#0b8f87;--teal2:#16b8a6;--orange:#f28b30;--sun:#ffd166;--red:#c5483d;--line:#b9d6cf}
*{box-sizing:border-box}
html{background:var(--night)}
body[data-chance-game-version]{margin:0;color:#eafaf6;background:radial-gradient(circle at 15% 8%,rgba(22,184,166,.25),transparent 25rem),radial-gradient(circle at 88% 32%,rgba(242,139,48,.18),transparent 22rem),linear-gradient(155deg,var(--night),#0d3438 58%,#122c2e);font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;line-height:1.65;min-height:100vh}
body[data-chance-game-version]::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.2;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,#000,transparent 80%)}
a{color:#8ee7da}nav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px clamp(16px,4vw,56px);background:rgba(5,24,30,.93);border-bottom:1px solid rgba(142,231,218,.2);backdrop-filter:blur(14px)}
.brand{font-family:"Noto Serif TC","PMingLiU",serif;font-size:1.08rem;font-weight:900;text-decoration:none;color:#fff}.links{display:flex;gap:14px;flex-wrap:wrap}.links a{text-decoration:none;color:#c6e7e2;font-size:.86rem}.crumb{padding:8px clamp(16px,4vw,56px);font-size:.82rem;color:#94b9b6;background:rgba(3,18,23,.72)}.crumb a{text-decoration:none}
header{padding:clamp(24px,5vw,58px) clamp(16px,4vw,56px) 28px}.wrap,main{max-width:1220px;margin:auto}.title{font-family:"Noto Serif TC","PMingLiU",serif;font-size:clamp(1.8rem,4.2vw,3.35rem);font-weight:900;line-height:1.15;color:#fff;text-shadow:0 5px 26px rgba(0,0,0,.4)}.sub{max-width:850px;color:#b9d9d4;margin-top:12px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pill{display:inline-flex;gap:6px;align-items:center;padding:6px 11px;border:1px solid rgba(142,231,218,.22);border-radius:999px;color:#cceae6;background:rgba(255,255,255,.05);font-size:.8rem}
.btn{border:1px solid rgba(142,231,218,.42);background:#123f43;color:#fff;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;text-decoration:none}.btn:hover,.btn:focus-visible{transform:translateY(-1px);outline:3px solid rgba(255,209,102,.45)}.btn.primary{background:linear-gradient(135deg,var(--orange),#d85c32);border-color:#ffb36e}.btn.good{background:linear-gradient(135deg,var(--teal),#08756f)}main{padding:0 clamp(14px,3vw,34px) 48px}
.mission-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:18px;margin-bottom:18px}.hero-copy,.progress-card,.mission-console,.side-card,.reset-zone{border:1px solid rgba(142,231,218,.2);border-radius:24px;box-shadow:0 20px 58px rgba(0,0,0,.24)}.hero-copy{padding:24px;background:linear-gradient(140deg,rgba(11,143,135,.24),rgba(255,255,255,.05))}.eyebrow{color:#7cf0df;font-weight:900;letter-spacing:.12em;font-size:.78rem}.hero-copy h1{font-family:"Noto Serif TC","PMingLiU",serif;margin:.35rem 0 .6rem;font-size:clamp(1.35rem,3vw,2.15rem)}.hero-copy p{margin:0;color:#c0dcda}
.progress-card{padding:20px;background:linear-gradient(145deg,#fff6dc,#f3e7c5);color:var(--ink)}.progress-head{display:flex;justify-content:space-between;gap:10px;font-weight:900}.progress-meter{height:14px;border-radius:99px;background:#d7c99f;overflow:hidden;margin:12px 0}.progress-meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--orange));transition:width .5s ease}.milestone-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.milestone{padding:8px 4px;border-radius:10px;text-align:center;background:#e5dbc0;color:#806f50;font-size:.72rem}.milestone.on{background:#147f78;color:#fff;box-shadow:0 0 0 3px rgba(11,143,135,.15)}
.game-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:18px}.mission-console{padding:clamp(16px,3vw,28px);background:var(--panel);color:var(--ink)}.side-stack{display:grid;gap:14px;align-content:start}.side-card{padding:18px;background:rgba(8,40,44,.9)}.side-card h2{font-family:"Noto Serif TC","PMingLiU",serif;margin:0 0 10px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.stat{padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--paper);text-align:center}.stat b{display:block;font-size:1.25rem;color:var(--teal)}.small{font-size:.83rem;color:var(--muted)}label{font-weight:800;color:#3e5f61}select,input{border:1px solid #a8c7c1;border-radius:10px;background:#fffdf6;color:var(--ink);padding:10px 11px;min-height:42px}.grow{flex:1}
.mission-stage{position:relative;margin:18px 0;padding:18px;border-radius:20px;background:linear-gradient(145deg,#082d33,#0e5554);color:#fff;overflow:hidden}.mission-stage::after{content:"";position:absolute;width:220px;height:220px;border:34px solid rgba(255,209,102,.1);border-radius:50%;right:-90px;top:-90px}.mission-status{position:relative;z-index:1;color:#ffd98b;font-weight:900}.chart-title{position:relative;z-index:1;margin:8px 0 12px;font-weight:900}.bar-chart{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:12px;min-height:190px;border-bottom:2px solid rgba(255,255,255,.36);padding:0 6px}.bar-item{display:grid;grid-template-rows:1fr auto auto;align-items:end;height:180px;text-align:center}.bar{width:min(72px,80%);margin:auto;border-radius:14px 14px 3px 3px;background:linear-gradient(180deg,var(--sun),var(--orange));min-height:4px;box-shadow:0 8px 22px rgba(242,139,48,.25);animation:bar-rise .55s ease both}.bar-value{font-weight:900;color:#fff}.bar-label{font-size:.78rem;color:#c9ece7;white-space:normal}.compare-charts{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:12px}.mini-chart{padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(255,255,255,.06)}.mini-chart h3{margin:0 0 8px}.mini-bars{display:grid;gap:7px}.hbar{display:grid;grid-template-columns:72px 1fr 36px;gap:7px;align-items:center;font-size:.75rem}.hbar-track{height:16px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden}.hbar-fill{height:100%;background:linear-gradient(90deg,var(--teal2),var(--sun));border-radius:99px}
.q{padding:16px;border:2px solid #8bc8bf;border-radius:16px;background:#fffdf6;font-size:1.05rem;font-weight:800;white-space:pre-wrap}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.choice{min-height:68px;padding:12px;border:2px solid #b8d6d0;border-radius:15px;background:#fff;color:var(--ink);font-weight:850;text-align:left;cursor:pointer}.choice:hover,.choice:focus-visible{border-color:var(--teal);box-shadow:0 5px 18px rgba(11,143,135,.14);outline:none}.choice.selected{border-color:var(--orange);background:#fff0d8}.choice.correct{border-color:var(--teal);background:#dcf5ed}.choice.wrong{border-color:var(--red);background:#ffe5df}
.answer-row{padding:10px;border-radius:14px;background:#e8f3ef}.answer-row input{flex:1;min-width:180px}.banner{padding:11px 13px;border-radius:12px;margin-top:12px;background:#edf4f1;border:1px solid #bed5cf}.banner.ok{background:#dff5ea;border-color:#79bda8}.banner.bad{background:#ffe7e0;border-color:#df8c7c}.hint,.sol{margin-top:9px;padding:11px;border-left:4px solid var(--teal);border-radius:10px;background:#eef7f4;white-space:pre-wrap}.btn-next{display:none;width:100%;margin-top:10px;padding:13px;border:0;border-radius:12px;background:var(--teal);color:#fff;font-weight:900}.btn-next.show{display:block}.concept-list{display:grid;gap:8px}.concept{padding:9px 11px;border-left:3px solid var(--orange);background:rgba(255,255,255,.05);border-radius:9px;color:#cce7e2}.reset-zone{margin-top:18px;padding:18px;text-align:center;background:rgba(5,28,32,.74)}.reset-zone p{color:#9fc3bf}.achievement-note{font-size:.76rem;color:#5f6f64}
.result-pulse{animation:result-pulse .55s ease}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
footer{padding:26px;text-align:center;border-top:1px solid rgba(142,231,218,.15)}
@keyframes bar-rise{from{height:0!important;opacity:.2}}@keyframes result-pulse{50%{transform:scale(1.012);box-shadow:0 0 0 8px rgba(255,209,102,.15)}}
@media(max-width:900px){.mission-hero,.game-layout{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr 1fr}.links{display:none}}@media(max-width:620px){.stats{grid-template-columns:1fr 1fr}.choice-grid,.side-stack,.compare-charts{grid-template-columns:1fr}.mission-stage{padding:14px}.bar-chart{gap:5px;min-height:165px}.bar-item{height:155px}.row.controls>*{flex:1 1 46%}.row.controls label{flex:0 0 auto}.milestone-grid{grid-template-columns:1fr 1fr}.answer-row .btn{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}