:root{
  --bg1:#2a1060; --bg2:#4b1fa3; --bg3:#1a0a3d;
  --card:#ffffff; --ink:#2a1d4a; --muted:#8b7fb0;
  --gold:#ffc83d; --orange:#ff7a3d; --pink:#ff4f8b; --green:#22c47a; --red:#ff4b5c; --blue:#3a8dff; --violet:#8b5cf6;
  --radius:18px;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:radial-gradient(1200px 600px at 50% -10%,#6a35d6 0%,var(--bg1) 45%,var(--bg3) 100%) fixed;color:#fff;overflow:hidden}
button{font:inherit;border:0;cursor:pointer;color:inherit;background:none}
input{font:inherit}
#app{position:relative;max-width:520px;height:100%;margin:0 auto;overflow:hidden}
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.active{display:flex;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.scroll{flex:1;overflow-y:auto;padding:12px 16px 24px}

/* avatar */
.avatar{position:relative;display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(145deg,#fff,#e9e1ff);font-size:30px;box-shadow:0 0 0 3px rgba(255,255,255,.6),0 4px 10px rgba(0,0,0,.25);flex-shrink:0}
.avatar.sm{width:38px;height:38px;font-size:22px}
.avatar.xs{width:24px;height:24px;font-size:14px;box-shadow:0 0 0 2px #fff}
.avatar.lg{width:84px;height:84px;font-size:50px;box-shadow:0 0 0 4px #fff,0 8px 20px rgba(0,0,0,.35)}
.avatar.xl{width:110px;height:110px;font-size:66px}

/* home */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.me-chip{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;background:rgba(255,255,255,.12);padding:6px 16px 6px 6px;border-radius:40px;text-align:left;min-width:180px}
.me-chip .avatar{grid-row:1/3}
.me-info{display:flex;gap:8px;align-items:baseline}
.me-info small{color:var(--gold);font-weight:700}
.xpbar{height:6px;background:rgba(0,0,0,.3);border-radius:4px;overflow:hidden}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--orange));transition:width .6s}
.icon-btn{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);font-size:20px}
.logo{text-align:center;margin:18px 0 22px}
.logo .crown{font-size:46px;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(-6deg)}}
.logo h1{font-size:44px;letter-spacing:2px;font-weight:900;text-shadow:0 4px 0 #1a0a3d,0 8px 18px rgba(0,0,0,.4)}
.logo h1 span{color:var(--gold)}
.logo p{color:#d6c9ff;margin-top:6px;letter-spacing:1px}
.home-actions{display:flex;flex-direction:column;gap:14px;padding:0 22px;flex:1}
.big-btn{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;text-align:left;align-items:center;padding:14px 18px;border-radius:22px;box-shadow:0 6px 0 rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.25);transition:transform .1s}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.big-btn span{grid-row:1/3;font-size:34px}
.big-btn b{font-size:22px}
.big-btn small{opacity:.85}
.big-btn.orange{background:linear-gradient(135deg,#ffb03d,#ff6a3d)}
.big-btn.purple{background:linear-gradient(135deg,#c06bff,#7b3df2)}
.big-btn.blue{background:linear-gradient(135deg,#4fc3ff,#3a6dff)}
.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(0,0,0,.25);padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
.bottom-nav button{display:flex;flex-direction:column;align-items:center;font-size:13px;color:#d6c9ff;gap:2px}
.bottom-nav span{font-size:24px}

/* navbar */
.navbar{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;padding:10px 8px;background:rgba(0,0,0,.18)}
.navbar h2{text-align:center;font-size:19px}
.back{font-size:34px;line-height:1;height:44px}
.label{font-size:15px;color:#d6c9ff;margin:18px 2px 10px;display:flex;justify-content:space-between;align-items:center}
.link{color:var(--gold);font-size:14px}
.foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(0,0,0,.2)}
.foot.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cta{display:block;width:100%;padding:15px;border-radius:16px;font-size:19px;font-weight:800;text-align:center;background:linear-gradient(180deg,#ffd75e,#ffa41b);color:#4a2500;box-shadow:0 5px 0 #c46a00;transition:transform .1s}
.cta:active{transform:translateY(3px);box-shadow:0 2px 0 #c46a00}
.cta.ghost{background:rgba(255,255,255,.15);color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.25)}
.cta:disabled{filter:grayscale(1);opacity:.6}
.pill{padding:8px 14px;border-radius:30px;background:rgba(255,255,255,.15);font-size:14px}
.pill.danger{background:rgba(255,75,92,.25)}

/* pick */
.cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cert{position:relative;background:#fff;color:var(--ink);border-radius:16px;padding:12px;text-align:left;border:3px solid transparent;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.cert .ic{font-size:26px}
.cert b{display:block;font-size:15px;margin-top:2px}
.cert small{color:var(--muted);font-size:12px}
.cert::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:14px 0 0 14px;background:var(--c)}
.cert.on{border-color:var(--gold);transform:scale(1.02);box-shadow:0 0 0 3px rgba(255,200,61,.35),0 4px 0 rgba(0,0,0,.18)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 14px;border-radius:30px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.25);font-size:14px}
.chip small{opacity:.7;margin-left:4px}
.chip.on{background:var(--gold);color:#4a2500;border-color:var(--gold);font-weight:700}
.seg{display:flex;background:rgba(0,0,0,.25);border-radius:14px;padding:4px}
.seg button{flex:1;padding:9px 0;border-radius:10px;font-weight:700;color:#d6c9ff}
.seg button.on{background:#fff;color:var(--ink)}
.pool-info{margin-top:16px;text-align:center;color:#d6c9ff;font-size:14px}
.pool-info b{color:var(--gold)}

/* join */
.center-box{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}
.big-emoji{font-size:64px}
.code-input{width:100%;max-width:300px;text-align:center;font-size:38px;letter-spacing:12px;font-weight:900;padding:12px;border-radius:16px;border:0;text-transform:uppercase;color:var(--ink)}
.center-box .cta{max-width:300px}

/* lobby */
.room-code{text-align:center;background:rgba(255,255,255,.1);border-radius:var(--radius);padding:14px}
.room-code small{color:#d6c9ff}
.room-code b{display:block;font-size:44px;letter-spacing:10px;color:var(--gold);font-weight:900}
.room-code .row{display:flex;gap:8px;justify-content:center;margin-top:8px}
.room-cfg{margin-top:12px;background:#fff;color:var(--ink);border-radius:var(--radius);padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.room-cfg .t{font-weight:800;font-size:17px}
.room-cfg .d{color:var(--muted);font-size:13px;grid-column:1}
.room-cfg button{grid-row:1/3;grid-column:2;background:var(--violet);color:#fff;padding:8px 12px;border-radius:12px;font-size:14px}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:14px;background:rgba(255,255,255,.1);min-height:104px}
.slot.empty{border:2px dashed rgba(255,255,255,.25);background:none;justify-content:center;color:rgba(255,255,255,.4);font-size:26px}
.slot.me{background:rgba(255,200,61,.22)}
.slot .nm{font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.slot .host{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:16px}
.slot .kick{position:absolute;top:2px;right:4px;font-size:12px;opacity:.7}
.wait{text-align:center;color:#d6c9ff;padding:14px}

/* VS */
.vs-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:20px;background:linear-gradient(115deg,rgba(255,122,61,.35) 0 50%,rgba(58,141,255,.35) 50% 100%)}
.vs-cert{background:#fff;color:var(--ink);padding:8px 18px;border-radius:30px;font-weight:800}
.vs-stage{display:flex;align-items:center;justify-content:center;gap:16px;width:100%}
.vs-stage.duel .side{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.vs-stage.duel .side.l{animation:slideL .6s cubic-bezier(.2,1.4,.4,1)}
.vs-stage.duel .side.r{animation:slideR .6s cubic-bezier(.2,1.4,.4,1)}
.vs-stage .nm{font-weight:800;font-size:18px;text-shadow:0 2px 4px rgba(0,0,0,.4)}
.vs-stage .vs{font-size:56px;font-weight:900;font-style:italic;color:var(--gold);text-shadow:0 4px 0 #a33,0 0 20px rgba(255,200,61,.8);animation:pop .5s .4s both}
.vs-stage.multi{flex-wrap:wrap;gap:14px}
.vs-stage.multi .side{display:flex;flex-direction:column;align-items:center;gap:4px;width:22%;animation:pop .4s both}
.vs-stage.multi .nm{font-size:13px}
@keyframes slideL{from{transform:translateX(-120%)}}
@keyframes slideR{from{transform:translateX(120%)}}
@keyframes pop{from{transform:scale(0);opacity:0}}
.vs-count{font-size:28px;font-weight:800;color:#fff;opacity:.9}

/* game */
.game-top{padding:10px 12px 4px}
.duel-head{display:none;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
#game.duel .duel-head{display:grid}
.duel-head .p{display:flex;align-items:center;gap:8px}
.duel-head .p.r{flex-direction:row-reverse;text-align:right}
.duel-head .p .nm{font-size:13px;opacity:.9;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duel-head .p .sc{font-size:26px;font-weight:900;color:var(--gold);line-height:1}
.duel-head .mid{font-weight:900;color:#d6c9ff}
.multi-board{display:none;justify-content:center;gap:6px;overflow-x:auto;padding-bottom:4px}
#game.multi .multi-board{display:flex}
.mb{position:relative;display:flex;flex-direction:column;align-items:center;min-width:56px;padding:4px 2px;border-radius:12px;background:rgba(255,255,255,.1)}
.mb.me{background:rgba(255,200,61,.25)}
.mb.off{opacity:.4}
.mb .nm{font-size:11px;max-width:54px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb .sc{font-weight:900;color:var(--gold);font-size:15px}
.mb .rk{position:absolute;top:-2px;left:2px;font-size:11px;font-weight:900}
.done-dot{position:absolute;top:0;right:2px;width:16px;height:16px;border-radius:50%;background:var(--green);font-size:10px;display:none;place-items:center}
.answered .done-dot{display:grid}
.game-body{flex:1;display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:0 8px;min-height:0}
.sbar{width:14px;background:rgba(0,0,0,.3);border-radius:10px;position:relative;overflow:hidden;margin:10px 0 18px;display:none}
#game.duel .sbar{display:block}
.sbar i{position:absolute;left:0;right:0;bottom:0;height:0;border-radius:10px;transition:height .8s cubic-bezier(.2,1.2,.4,1)}
.sbar.left i{background:linear-gradient(0deg,#ff6a3d,#ffc83d)}
.sbar.right i{background:linear-gradient(0deg,#3a6dff,#4fc3ff)}
.qzone{display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding-bottom:10px}
.round-tag{text-align:center;font-weight:800;margin:4px 0;color:#d6c9ff}
.round-tag.double{color:var(--gold);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.timer{display:flex;justify-content:center;margin:2px 0 8px}
.timer-ring{position:relative;width:62px;height:62px}
.timer-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer-ring circle{fill:none;stroke-width:4}
.timer-ring .bg{stroke:rgba(255,255,255,.18)}
.timer-ring .fg{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:106.8;stroke-dashoffset:0}
.timer-ring.low .fg{stroke:var(--red)}
.timer-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:900}
.qcard{background:#fff;color:var(--ink);border-radius:var(--radius);padding:14px 16px;box-shadow:0 6px 0 rgba(0,0,0,.2);min-height:110px;display:flex;flex-direction:column;justify-content:center}
.qcard small{color:var(--muted);font-size:12px;margin-bottom:4px}
.qcard p{font-size:18px;font-weight:700;line-height:1.5}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.opt{position:relative;display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;background:#f3eeff;color:var(--ink);font-size:16px;font-weight:700;text-align:left;box-shadow:0 4px 0 #c9b9f2;transition:transform .08s,background .2s}
.opt:active{transform:translateY(2px)}
.opt .k{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-size:14px}
.opt.picked{background:#ffe9a8;box-shadow:0 4px 0 #e2b23a}
.opt.correct{background:var(--green);color:#fff;box-shadow:0 4px 0 #128a52;animation:pulse .5s}
.opt.correct .k{background:#fff;color:var(--green)}
.opt.wrong{background:var(--red);color:#fff;box-shadow:0 4px 0 #b3202f;animation:shake .4s}
.opt.wrong .k{background:#fff;color:var(--red)}
.opt.dim{opacity:.55}
.opt:disabled{cursor:default}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.opt .who{margin-left:auto;display:flex;gap:-4px}
.opt .who .avatar{margin-left:-6px}
.wait-tip{text-align:center;color:#d6c9ff;font-size:13px;min-height:20px;margin-top:10px}
.emote-bar{display:flex;justify-content:center;gap:6px;padding:6px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(0,0,0,.2)}
.emote-bar button{font-size:22px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1)}
.emote-pop{position:absolute;font-size:34px;pointer-events:none;animation:floatUp 1.8s ease-out forwards;z-index:20}
@keyframes floatUp{0%{transform:scale(.3);opacity:0}15%{transform:scale(1.2);opacity:1}100%{transform:translateY(-70px);opacity:0}}
.gain{position:absolute;font-weight:900;font-size:22px;color:var(--gold);text-shadow:0 2px 0 #7a3b00;pointer-events:none;animation:floatUp 1.4s ease-out forwards;z-index:20}
.banner{position:absolute;left:0;right:0;top:40%;text-align:center;font-size:30px;font-weight:900;padding:14px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.6),transparent);display:none;z-index:30;text-shadow:0 3px 0 #000}
.banner.show{display:block;animation:pop .35s}

/* result */
.res-head{text-align:center;padding:10px 0 4px}
.res-head .title{font-size:44px;font-weight:900;text-shadow:0 4px 0 rgba(0,0,0,.3)}
.res-head .title.win{color:var(--gold)}
.res-head .title.lose{color:#a7b4ff}
.res-head .sub{color:#d6c9ff}
.res-duel{display:flex;justify-content:space-around;align-items:center;margin:14px 0}
.res-duel .p{display:flex;flex-direction:column;align-items:center;gap:6px}
.res-duel .p .sc{font-size:34px;font-weight:900;color:var(--gold)}
.res-duel .p.winner .avatar{box-shadow:0 0 0 4px var(--gold),0 0 24px var(--gold)}
.rank-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.rank-row{display:grid;grid-template-columns:36px auto 1fr auto;gap:10px;align-items:center;background:rgba(255,255,255,.1);border-radius:14px;padding:8px 12px}
.rank-row.me{background:rgba(255,200,61,.25)}
.rank-row .rk{font-size:22px;font-weight:900;text-align:center}
.rank-row .nm small{display:block;color:#d6c9ff;font-size:12px}
.rank-row .sc{font-size:22px;font-weight:900;color:var(--gold)}
.res-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.res-stats div{background:#fff;color:var(--ink);border-radius:14px;padding:10px;text-align:center}
.res-stats b{display:block;font-size:22px}
.res-stats small{color:var(--muted)}
.levelup{grid-column:1/-1;background:linear-gradient(90deg,#ffd75e,#ffa41b)!important;font-weight:800}
.review{background:rgba(255,255,255,.08);border-radius:14px;padding:10px 12px}
.review summary{cursor:pointer;font-weight:700}
.rv{background:#fff;color:var(--ink);border-radius:12px;padding:10px 12px;margin-top:10px;font-size:14px}
.rv .q{font-weight:700;margin-bottom:6px}
.rv ol{padding-left:22px}
.rv li.ans{color:var(--green);font-weight:800}
.rv li.my{color:var(--red)}
.rv .e{margin-top:6px;color:#5a4d80;background:#f3eeff;padding:6px 8px;border-radius:8px}
.rv .tag{font-size:12px;font-weight:700;padding:1px 6px;border-radius:6px;margin-left:6px}
.rv .tag.ok{background:#d6f7e6;color:#128a52}
.rv .tag.no{background:#ffe0e3;color:#b3202f}

/* bank / stats */
.note{background:rgba(255,255,255,.1);border-radius:14px;padding:12px;font-size:14px;line-height:1.6;color:#e8e0ff}
.note.small{font-size:13px;margin-top:12px}
.note code{background:rgba(0,0,0,.3);padding:0 4px;border-radius:4px}
.bank-card{background:#fff;color:var(--ink);border-radius:14px;padding:10px 12px;margin-top:10px}
.bank-card .h{display:flex;justify-content:space-between;font-weight:800}
.bank-card .ys{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bank-card .y{font-size:12px;background:#f3eeff;padding:3px 8px;border-radius:8px}
.bank-card .y.c{background:#fff1c9}
.bank-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bank-actions .cta{font-size:16px;padding:12px}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat-grid div{background:#fff;color:var(--ink);border-radius:14px;padding:12px;text-align:center}
.stat-grid b{display:block;font-size:24px}
.stat-grid small{color:var(--muted)}
.acc-row{display:grid;grid-template-columns:110px 1fr 54px;gap:8px;align-items:center;margin-top:10px;font-size:14px}
.acc-row .bar{height:12px;background:rgba(0,0,0,.3);border-radius:8px;overflow:hidden}
.acc-row .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#7cf0b2)}
.profile-card{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:12px}
.profile-card input{width:100%;max-width:280px;text-align:center;font-size:20px;padding:10px;border-radius:14px;border:0;color:var(--ink)}
.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.avatar-grid button{font-size:30px;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.12);border:3px solid transparent}
.avatar-grid button.on{border-color:var(--gold);background:rgba(255,200,61,.25)}
.help h3{margin:16px 0 6px;color:var(--gold)}
.help p{line-height:1.7;color:#e8e0ff;margin-bottom:6px}

.toast{position:absolute;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:rgba(20,8,50,.92);padding:10px 18px;border-radius:30px;opacity:0;pointer-events:none;transition:.25s;max-width:90%;text-align:center;z-index:99}
.toast.show{opacity:1;transform:translateX(-50%)}
@media (max-height:680px){.logo{margin:6px 0 12px}.logo h1{font-size:36px}.big-btn{padding:10px 16px}.qcard p{font-size:16px}.opt{padding:10px 12px;font-size:15px}}

.org-h{grid-column:1/-1;font-size:13px;color:#d6c9ff;margin:6px 2px -2px;font-weight:700;letter-spacing:1px}
.cert b{font-size:14px;line-height:1.3}
.rv .src{display:block;color:var(--muted);font-size:12px;margin-bottom:2px}
.chips{max-height:none}

/* ===== v5：知識王風格特效、多輪賽制、關注題庫 ===== */
.qsrc{display:block;margin-top:6px;font-size:12px;font-weight:600;color:var(--muted)}
.pts-note{font-size:13px;color:#d6c9ff;margin:8px 2px 0}
.pts-note b{color:var(--gold)}
#roundSeg button,#ptsSeg button,#srcSeg button{font-size:14px}
/* 倒數心跳 */
.timer-ring.beat{animation:beat .35s}
@keyframes beat{40%{transform:scale(1.12)}}
.timer-ring.low b{color:var(--red)}
/* 選擇的閃電 */
.zap{position:absolute;width:110px;height:150px;pointer-events:none;z-index:40;animation:zap .75s ease-out forwards}
.zap svg{position:absolute;width:62px;height:124px;fill:#fff36b;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #ffd000) drop-shadow(0 0 24px #ff9d00)}
.zap svg+svg{left:44px;top:26px;width:40px;height:80px;transform:rotate(18deg);fill:#fff}
@keyframes zap{0%{opacity:0;transform:translateY(-40px) scale(.6)}12%{opacity:1;transform:none}24%{opacity:.25}36%{opacity:1}50%{opacity:.4}62%{opacity:1}100%{opacity:0;transform:translateY(8px) scale(1.15)}}
.flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 60%,rgba(255,250,200,.55),transparent 60%);opacity:0;z-index:35}
.flash.on{animation:flash .35s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
.opt.spark{box-shadow:0 0 0 3px #fff36b,0 0 18px 4px rgba(255,214,0,.85),0 4px 0 #e2b23a}
.opt.correct.spark{box-shadow:0 0 0 3px #fff,0 0 20px 6px rgba(34,196,122,.9),0 4px 0 #128a52}
.opt.wrong.spark{box-shadow:0 0 0 3px #fff,0 0 20px 6px rgba(255,75,92,.9),0 4px 0 #b3202f}
/* COMBO 字體 */
.combo{position:absolute;left:0;right:0;top:30%;display:none;flex-direction:column;align-items:center;pointer-events:none;z-index:45;
  font-family:"Arial Black","Impact","Helvetica Neue",sans-serif;font-style:italic;font-weight:900;line-height:.9;transform:skewX(-8deg)}
.combo.show{display:flex;animation:comboIn 1.3s cubic-bezier(.2,1.6,.4,1) forwards}
.combo .cw{font-size:40px;letter-spacing:2px;background:linear-gradient(180deg,#fff9c4 0%,#ffd84d 45%,#ff8a00 55%,#ff5e00 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #5a1800;filter:drop-shadow(0 4px 0 #3b0f00) drop-shadow(0 0 12px rgba(255,150,0,.7))}
.combo .cn{font-size:72px;background:linear-gradient(180deg,#ffffff 0%,#ffe36b 40%,#ff9a00 60%,#ff3d00 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:3px #5a1800;filter:drop-shadow(0 5px 0 #3b0f00) drop-shadow(0 0 16px rgba(255,120,0,.8))}
@keyframes comboIn{0%{opacity:0;transform:skewX(-8deg) scale(2.6)}18%{opacity:1;transform:skewX(-8deg) scale(.92)}28%{transform:skewX(-8deg) scale(1.05)}75%{opacity:1;transform:skewX(-8deg) scale(1)}100%{opacity:0;transform:skewX(-8deg) translateY(-40px) scale(1.1)}}
.gain{font-family:"Arial Black","Impact",sans-serif;font-style:italic;font-size:26px;-webkit-text-stroke:1px #5a1800}
.duel-head .p .tot,.mb .tot{font-size:11px;color:#d6c9ff;font-weight:700}
.mb .tot::before{content:"積分 "}
/* 輪次 */
.vs-round{display:flex;flex-direction:column;align-items:center;gap:2px}
.vs-round:empty{display:none}
.round-big{font-family:"Arial Black","Impact",sans-serif;font-style:italic;font-weight:900;font-size:46px;letter-spacing:2px;color:var(--gold);-webkit-text-stroke:2px #5a1800;text-shadow:0 5px 0 #3b0f00;animation:pop .5s both}
.vs-round small{color:#fff;font-weight:700}
.vs-stage.standings{flex-direction:column;gap:6px;max-width:360px}
.st-row{display:grid;grid-template-columns:28px auto 1fr auto auto;gap:8px;align-items:center;background:rgba(255,255,255,.12);border-radius:12px;padding:6px 12px;width:100%;animation:pop .35s both}
.st-row.me{background:rgba(255,200,61,.3)}
.st-row .rk{font-weight:900;text-align:center}
.st-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-row b{font-size:20px;color:var(--gold)}
.st-row b small{font-size:11px;color:#d6c9ff}
.st-row .hist{color:#d6c9ff;font-size:11px}
.standings{display:flex;flex-direction:column;gap:6px}
#roundres .res-head .title{font-size:34px}
.rank-row .pts{font-family:"Arial Black","Impact",sans-serif;font-style:italic;font-size:24px;color:#7cf0b2;-webkit-text-stroke:1px #0b4d2e}
.res-duel .p .sc small{font-size:14px;color:#d6c9ff}
/* 關注題庫 */
.focus-box:empty{display:none}
.focus-box{background:rgba(255,255,255,.1);border-radius:14px;padding:12px;margin-bottom:12px}
.fb-h{font-weight:800;color:var(--gold);margin-bottom:6px}
.fb-note{font-size:13px;color:#e8e0ff;line-height:1.6;margin-bottom:6px}
.fb-note b{color:var(--gold)}
.fb-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto;margin:6px 0 10px}
.fb-item{display:grid;grid-template-columns:22px 56px 1fr;gap:8px;align-items:start;background:#fff;color:var(--ink);border-radius:10px;padding:8px;font-size:13px;cursor:pointer}
.fb-item input{width:18px;height:18px;margin-top:2px;accent-color:var(--violet)}
.fb-item .t{font-weight:900;font-size:18px;color:var(--violet);line-height:1.1}
.fb-item .t small{font-size:11px;margin-left:1px}
.fb-item .t em{display:block;font-style:normal;font-size:11px;color:#fff;background:var(--orange);border-radius:6px;padding:0 4px;width:fit-content;margin-top:2px}
.fb-item.slow .t{color:var(--orange)}
.fb-item .q small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.cta.small{font-size:16px;padding:11px}
.focus-row{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;background:#fff;color:var(--ink);border-radius:12px;padding:8px 10px;margin-top:8px;font-size:14px}
.focus-row .pill{color:#fff;background:var(--violet);padding:6px 10px}
.focus-row .pill.danger{background:var(--red)}
.muted.small{font-size:13px;color:#d6c9ff}
.rv .src{display:block;margin-top:2px;font-weight:400}
.rv .tm{font-size:11px;color:var(--muted);margin-left:6px}
.rv-round{margin:12px 0 -4px;font-weight:900;color:var(--gold)}

/* 帳號 */
#homeCloud{font-style:normal;font-size:13px}
.acct-box{background:#fff;color:var(--ink);border-radius:var(--radius);padding:12px 14px}
.acct-box b{font-size:16px}
.acct-box p{font-size:13px;color:#5a4d80;line-height:1.6;margin:6px 0 10px}
.acct-box small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.acct-box input{display:block;width:100%;font-size:16px;padding:10px 12px;border-radius:12px;border:2px solid #e2d8ff;margin-bottom:8px;color:var(--ink)}
.acct-box .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acct-box .cta.ghost{background:#efe8ff;color:var(--violet);box-shadow:0 5px 0 #c9b9f2}
.acct-box .pill{color:#fff;background:var(--violet);padding:9px}
.acct-box .pill.danger{background:var(--red)}

/* 第一次開啟的登入畫面 */
.auth-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px 22px 30px}
.auth-wrap .logo{margin:0 0 6px}
.auth-card{width:100%;max-width:380px;background:#fff;color:var(--ink);border-radius:22px;padding:14px;box-shadow:0 8px 0 rgba(0,0,0,.2),0 14px 30px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:10px}
.auth-card .seg{background:#efe8ff}
.auth-card .seg button{color:var(--violet)}
.auth-card .seg button.on{background:var(--violet);color:#fff}
.auth-card input{width:100%;font-size:17px;padding:12px 14px;border-radius:14px;border:2px solid #e2d8ff;color:var(--ink)}
.auth-card input:focus{outline:none;border-color:var(--violet)}
.auth-hint{font-size:12px;color:var(--muted);line-height:1.6;text-align:center}
.auth-hint.light{color:#d6c9ff;max-width:380px}
.guest-btn{margin-top:4px;padding:12px 22px;border-radius:30px;background:rgba(255,255,255,.15);font-weight:700;font-size:16px}

/* ===== v7：知識王 LIVE 風格 ===== */
:root{--bg1:#16213a;--bg2:#24365e;--bg3:#0b1222}
body{background:radial-gradient(900px 600px at 50% -10%,#2f4a7d 0%,#16213a 50%,#0b1222 100%) fixed}
#game{background:linear-gradient(180deg,rgba(10,18,36,.55),rgba(10,18,36,.85)),radial-gradient(600px 400px at 50% 30%,#2a3f69,#0d1528)}
/* 頂部 */
.g-top{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:10px 12px 0;min-height:96px}
.pf{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:78px}
.pf.l{justify-self:start}.pf.r{justify-self:end}
#game.multi .pf,#game.multi .tube{display:none}
.ph{display:grid;place-items:center;width:62px;height:62px;background:#fff;padding:4px;border-radius:3px;box-shadow:0 3px 10px rgba(0,0,0,.5);transform:rotate(-2deg)}
.pf.r .ph{transform:rotate(2deg)}
.ph .em{display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(160deg,#9fb4d6,#5d769f);font-size:34px}
.ph.big{width:96px;height:96px;padding:6px}.ph.big .em{font-size:56px}
.pn{font-size:11px;background:#fff;color:#333;padding:0 6px;border-radius:2px;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-8px;transform:rotate(-2deg);box-shadow:0 2px 4px rgba(0,0,0,.3)}
.pf .badge{position:absolute;top:-6px;right:2px;width:22px;height:22px;border-radius:50%;display:none;place-items:center;font-style:normal;font-weight:900;font-size:13px;color:#fff;box-shadow:0 0 0 2px #fff}
.pf .badge.wait{display:grid;background:#7b8aa6}
.pf .badge.ok{display:grid;background:#2fbf71;animation:pop .3s}
.pf .badge.no{display:grid;background:#e5484d;animation:pop .3s}
.pf.l .badge{right:auto;left:2px}
/* 刻度計時圈 */
.ring{position:relative;width:74px;height:74px;margin-top:2px}
.ring svg{position:absolute;inset:0;width:100%;height:100%}
.ring line{stroke:#fff;stroke-width:3.2;stroke-linecap:round;transition:opacity .2s}
.ring line.off{opacity:.12}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;font-weight:300;font-family:"Helvetica Neue",Arial,sans-serif}
.ring.low line:not(.off){stroke:#ff6b6b}.ring.low b{color:#ff8080}
.ring.beat{animation:beat .35s}
#game.multi .ring{grid-column:2}
#game.multi .multi-board{grid-column:1/4;margin-top:8px}
#game.duel .multi-board{display:none}
/* 中段：左右分數管 */
.g-mid{flex:1;display:grid;grid-template-columns:44px 1fr 44px;gap:6px;padding:0 6px;min-height:0}
#game.multi .g-mid{grid-template-columns:1fr}
.tube{display:flex;flex-direction:column;align-items:center;padding:30px 0 12px;min-height:0}
.tube b{font-family:"Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:22px;line-height:1;letter-spacing:-1px}
.tube small{font-size:10px;color:#9fb0d0;min-height:12px}
.tube .tb{flex:1;width:16px;margin-top:6px;border-radius:10px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 2px rgba(255,255,255,.65);position:relative;overflow:hidden}
.tube .tb i{position:absolute;left:3px;right:3px;bottom:3px;height:0;border-radius:6px;background:linear-gradient(0deg,#ffe9a8,#fff8dc);box-shadow:0 0 8px #ffe08a;transition:height .8s cubic-bezier(.2,1.2,.4,1)}
.qzone{display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding-bottom:8px}
.round-tag{font-size:12px;color:#9fb0d0;margin:2px 0 0}
.qbox{min-height:96px;display:flex;align-items:center;justify-content:center;padding:6px 4px}
.qbox p{font-size:18px;font-weight:600;line-height:1.55;text-align:center;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.qsrc{display:block;margin-top:6px;font-size:11px;font-weight:400;color:#9fb0d0;text-shadow:none}
/* 標題卡「第 N 題」 */
.q-intro{display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;flex:1;min-height:260px}
#game.intro .q-intro{display:flex}
#game.intro .qbox,#game.intro .opts,#game.intro .wait-tip{display:none}
.q-intro .cat{background:#d9572b;color:#fff;font-size:13px;font-weight:700;padding:2px 12px;border-radius:3px;animation:pop .35s both}
.q-intro h2{font-size:44px;font-weight:400;letter-spacing:10px;animation:introIn .5s cubic-bezier(.2,1.4,.4,1) both}
.q-intro .dbl{color:#ffd76a;font-weight:800;animation:pulse 1s infinite}
@keyframes introIn{from{opacity:0;transform:scale(1.6)}to{opacity:1;transform:none}}
/* 選項：淺灰圓角長條，兩端 ○ ✕ */
.opts{gap:12px;margin-top:6px;padding:0 4px}
.opt{display:grid;grid-template-columns:24px 1fr 24px;align-items:center;gap:4px;min-height:52px;padding:8px 10px;border-radius:6px;background:linear-gradient(180deg,#fafafa,#e3e5ea);color:#333;font-size:16px;font-weight:500;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.25);animation:optIn .3s both}
@keyframes optIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.opt .tx{grid-column:2;line-height:1.35}
.opt .k{display:none}
.opt .mk{font-style:normal;font-size:20px;font-weight:900;color:#fff;text-align:center;line-height:1}
.opt .who{grid-column:1/4;display:flex;justify-content:center;gap:2px;margin-top:-2px}
.opt .who:empty{display:none}
.opt.picked{background:linear-gradient(180deg,#fff,#dfe7ff)}
.opt.correct{background:linear-gradient(180deg,#45c08a,#2d9d6c);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.7),0 0 18px rgba(69,192,138,.7);animation:none}
.opt.wrong,.opt.wrong-o{background:linear-gradient(180deg,#e0605f,#c43f45);color:#fff;animation:shake .4s}
.opt.dim{opacity:.85}
.opt.gone{opacity:0;transform:scale(.96);transition:opacity .4s,transform .4s}
.opt.spark,.opt.correct.spark,.opt.wrong.spark{box-shadow:0 0 0 2px #fff,0 0 26px 6px rgba(150,200,255,.9)}
.wait-tip{color:#c9d6f0}
/* 閃電：橫向電弧 */
.zap{position:absolute;pointer-events:none;z-index:40;animation:none}
.zap svg{position:absolute;inset:0;overflow:visible;width:auto;height:auto;fill:none;filter:none}
.zap path{fill:none;stroke-linejoin:round;stroke-linecap:round}
.zap path.glow{stroke:#7fc8ff;stroke-width:12;opacity:.55;filter:blur(4px)}
.zap path.core{stroke:#fff;stroke-width:3.2;filter:drop-shadow(0 0 4px #bfe3ff) drop-shadow(0 0 10px #5fb4ff)}
.zap path.thin{stroke:#d8f0ff;stroke-width:1.4;opacity:.85}
.zap .burst{position:absolute;left:50%;top:50%;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(190,225,255,.6) 25%,rgba(120,180,255,.15) 50%,transparent 70%);animation:burst .45s ease-out forwards}
@keyframes burst{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.4);opacity:0}}
.zap.out{opacity:0;transition:opacity .25s}
.flash{background:radial-gradient(circle at 50% 65%,rgba(220,240,255,.5),transparent 60%)}
/* 連續答對橫幅 */
.cbanner{position:absolute;top:104px;z-index:30;display:none;pointer-events:none}
.cbanner.l{left:0}.cbanner.r{right:0}
.cbanner.show{display:block;animation:cbIn 2.2s cubic-bezier(.2,1.3,.4,1) forwards}
.cbanner.r.show{animation-name:cbInR}
.cbanner b{display:block;background:linear-gradient(90deg,#0d1a3a 70%,rgba(13,26,58,0));color:#fff;font-size:19px;font-weight:900;font-style:italic;padding:4px 40px 4px 12px;letter-spacing:1px;transform:skewX(-8deg);box-shadow:0 2px 0 rgba(0,0,0,.4)}
.cbanner.r b{background:linear-gradient(270deg,#0d1a3a 70%,rgba(13,26,58,0));padding:4px 12px 4px 40px;text-align:right}
.cbanner b em{font-style:italic;font-size:26px;color:#ffe066;margin:0 2px}
.cbanner .mul{display:inline-block;background:#c8322f;color:#fff;font-size:11px;font-weight:700;padding:1px 6px;margin:0 0 2px 10px;border-radius:2px}
.cbanner.r .mul{float:right;margin:0 10px 2px 0}
.cbanner .cool{position:absolute;right:-8px;top:-16px;font-family:"Arial Black","Impact",sans-serif;font-style:italic;font-weight:900;font-size:24px;background:linear-gradient(180deg,#ffffff 0%,#bfe6ff 40%,#3fa2ff 60%,#1b62d6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px #0b2a66;filter:drop-shadow(0 2px 0 #06173a);transform:rotate(-6deg)}
.cbanner.r .cool{right:auto;left:-8px}
@keyframes cbIn{0%{opacity:0;transform:translateX(-110%)}14%{opacity:1;transform:translateX(0)}85%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-30px)}}
@keyframes cbInR{0%{opacity:0;transform:translateX(110%)}14%{opacity:1;transform:translateX(0)}85%{opacity:1;transform:none}100%{opacity:0;transform:translateX(30px)}}
.gain{color:#ffe066}
/* VS 開場相框 */
.vs-stage .side .ph{margin-bottom:6px}
.vs-stage .ai-tier{font-size:12px;color:#ffd76a;margin-top:6px}
.round-big.boss{color:#ff5d5d}
/* 多人排行條 */
.mb{background:rgba(255,255,255,.08)}
/* 道具列 */
.item-bar{display:flex;justify-content:center;gap:8px;padding:0 8px 4px}
.item-bar:empty{display:none}
.item-bar button{background:rgba(255,255,255,.12);border-radius:20px;padding:6px 14px;font-size:14px;font-weight:700}
.item-bar button:disabled{opacity:.35}
.emote-bar{background:rgba(0,0,0,.3)}
.addbot-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;font-size:13px;color:#c9d6f0}
.addbot-row .pill{background:rgba(255,255,255,.14);padding:6px 10px;border-radius:16px;color:#fff;font-size:13px}
.bot-tag{font-size:11px;color:#ffd76a}

/* ===== v7：闖關、金幣、商店 ===== */
.big-btn.green{background:linear-gradient(135deg,#4fd69c,#1f9e6a)}
.home-actions{gap:10px}
.home-actions .big-btn{padding-top:12px;padding-bottom:12px}
.coin-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(0,0,0,.35);border:1px solid rgba(255,215,90,.5);color:#ffd85a;font-weight:800;border-radius:20px;padding:6px 12px;margin-left:auto;margin-right:8px;font-size:14px}
.coin-chip.sm{margin:0;padding:4px 10px;font-size:13px}
.me-info small span#homeTitle{color:#9fd3ff;font-weight:600}
.ai-seg{flex-wrap:wrap}
.ai-seg button{flex:1 1 30%;font-size:13px;padding:8px 4px;display:flex;flex-direction:column;align-items:center}
.ai-seg button small{font-size:10px;opacity:.8}
.ai-seg button.lock{opacity:.45}
.camp-tip{font-size:13px;color:#c9d6f0;line-height:1.7;margin:4px 2px 10px}
.camp-cert{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;width:100%;text-align:left;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border-left:5px solid var(--c);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.camp-cert .ic{font-size:28px;text-align:center}
.camp-cert .t b{display:block;font-size:15px}
.camp-cert .t small{color:#9fb0d0;font-size:12px}
.camp-cert .st{color:#ffd85a;font-weight:900;font-size:16px}
.camp-cert .st small{color:#9fb0d0;font-size:11px}
/* 地圖 */
.map-stars{text-align:center;color:#ffd85a;font-weight:900;padding:4px 0 2px}
.map-scroll{background:radial-gradient(500px 300px at 50% 20%,rgba(80,120,200,.25),transparent)}
.map-path{position:relative;display:flex;flex-direction:column;align-items:stretch;padding:6px 0 60px}
.chap{margin:18px auto 8px;background:linear-gradient(90deg,transparent,rgba(217,87,43,.9),transparent);padding:4px 60px;font-weight:800;letter-spacing:2px;text-align:center}
.chap b{margin-right:8px;color:#ffe2a8}
.node-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;margin:4px 0;position:relative}
.node-wrap.l{align-self:flex-start;margin-left:18%}.node-wrap.r{align-self:flex-end;margin-right:18%}.node-wrap.c{align-self:center}
.node{position:relative;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7fb4ff,#2f62c9);box-shadow:0 5px 0 #173a80,0 8px 16px rgba(0,0,0,.4),inset 0 0 0 3px rgba(255,255,255,.5);font-size:22px;font-weight:900}
.node.done{background:radial-gradient(circle at 35% 30%,#ffe08a,#e8a21a);box-shadow:0 5px 0 #9a6406,0 8px 16px rgba(0,0,0,.4),inset 0 0 0 3px rgba(255,255,255,.6);color:#5a3500}
.node.lock{background:radial-gradient(circle at 35% 30%,#6b7486,#3a4150);box-shadow:0 5px 0 #23272f,inset 0 0 0 3px rgba(255,255,255,.2);color:#9aa3b5}
.node.boss{width:84px;height:84px;background:radial-gradient(circle at 35% 30%,#ff8a7a,#b8202a);box-shadow:0 6px 0 #6d0d14,0 0 24px rgba(255,80,80,.5),inset 0 0 0 4px rgba(255,220,180,.7)}
.node.boss.lock{background:radial-gradient(circle at 35% 30%,#6b7486,#3a4150);box-shadow:0 6px 0 #23272f}
.node .bav{font-size:44px}
.node.boss.lock .bav{filter:grayscale(1) brightness(.6)}
.node .lk{position:absolute;right:-4px;bottom:-4px;font-style:normal;font-size:18px}
.node.cur{animation:nodePulse 1.2s infinite}
@keyframes nodePulse{50%{transform:scale(1.1);filter:brightness(1.2)}}
.node-wrap .stars{color:#ffd85a;font-size:13px;letter-spacing:1px;min-height:16px;text-shadow:0 1px 2px #000}
.node-wrap:not(:last-child)::after{content:"";position:absolute;top:100%;width:4px;height:10px;background:repeating-linear-gradient(#fff6 0 3px,transparent 3px 6px)}
/* 關卡視窗 */
.sheet{position:absolute;inset:0;background:rgba(0,0,0,.55);display:none;align-items:flex-end;z-index:50}
.sheet.show{display:flex;animation:fadeIn .2s}
.sh-card{width:100%;background:linear-gradient(180deg,#22345c,#121c33);border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));text-align:center;box-shadow:0 -6px 30px rgba(0,0,0,.5)}
.sh-h{font-size:22px;font-weight:900}
.sh-h small{display:block;font-size:12px;color:#9fb0d0;font-weight:500;margin-top:2px}
.sh-vs{display:flex;align-items:center;justify-content:center;gap:18px;margin:14px 0 4px}
.sh-vs b{font-size:30px;font-style:italic;color:#ffd85a}
.sh-op{font-weight:800;font-size:17px}
.sh-op small{display:block;font-size:12px;color:#ffd76a;font-weight:500}
.sh-rule{margin:6px auto;background:rgba(255,255,255,.1);display:inline-block;padding:4px 14px;border-radius:12px;font-size:14px}
.sh-star{font-size:28px;color:#ffd85a;letter-spacing:4px;margin:4px 0}
.sh-tip{font-size:12px;color:#c9d6f0;line-height:1.7;margin-bottom:12px}
.sh-card .row{display:grid;grid-template-columns:1fr 2fr;gap:10px}
.cta.ghost{background:rgba(255,255,255,.14);box-shadow:none;color:#fff}
/* 結算獎勵 */
.res-stars{display:flex;justify-content:center;gap:8px;margin:4px 0}
.res-stars span{font-size:44px;color:rgba(255,255,255,.18);animation:starIn .5s cubic-bezier(.2,1.6,.4,1) both}
.res-stars span.on{color:#ffd85a;text-shadow:0 0 14px rgba(255,200,60,.8)}
@keyframes starIn{from{transform:scale(0) rotate(-90deg)}to{transform:none}}
.reward{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.reward span{background:rgba(0,0,0,.35);border-radius:14px;padding:5px 12px;font-size:14px}
.reward b{color:#ffd85a;margin-left:4px}
.reward em{font-style:normal;font-size:11px;background:#d9572b;border-radius:6px;padding:0 5px;margin-left:6px}
/* 商店 */
.shop-row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;background:rgba(255,255,255,.1);border-radius:14px;padding:10px 12px}
.shop-row .ic{font-size:30px;text-align:center}
.shop-row small{display:block;color:#9fb0d0;font-size:12px}
.buy{background:linear-gradient(180deg,#ffd85a,#f0a81c);color:#4a2b00;font-weight:900;border-radius:14px;padding:7px 12px;box-shadow:0 3px 0 #a86d00}
.shop-avs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.shop-av{display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(255,255,255,.08);border-radius:14px;padding:10px 4px}
.shop-av small{font-size:12px;color:#9fb0d0}
.shop-av.own{outline:2px solid #4fd69c}
.shop-av .buy{font-size:12px;padding:5px 8px}
.titles{display:flex;flex-wrap:wrap;gap:6px}
.titles span{background:rgba(255,255,255,.08);border-radius:12px;padding:4px 10px;font-size:13px;color:#7f8aa3}
.titles span.on{background:rgba(79,214,156,.2);color:#bff5dc}
#avatarGrid button.locked{position:relative;opacity:.4}
#avatarGrid button.locked i{position:absolute;right:2px;bottom:0;font-style:normal;font-size:12px}
.bottom-nav{grid-template-columns:repeat(5,1fr)}
.navbar{grid-template-columns:48px 1fr auto}
.logo{margin:6px 0 12px}.logo .crown{font-size:36px}.logo h1{font-size:38px}

/* ===== v8：題目框、難度 ===== */
.qbox{margin:4px 2px 2px;padding:12px 14px;min-height:104px;border-radius:10px;background:linear-gradient(180deg,rgba(14,26,52,.92),rgba(10,19,40,.92));border:1.5px solid rgba(160,190,240,.55);box-shadow:0 0 0 4px rgba(10,18,36,.6),0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);position:relative;z-index:2}
.qbox::before,.qbox::after{content:"";position:absolute;width:14px;height:14px;border:2px solid #ffd76a}
.qbox::before{left:-2px;top:-2px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.qbox::after{right:-2px;bottom:-2px;border-left:0;border-top:0;border-radius:0 0 8px 0}
.qbox p{font-size:17px;text-shadow:none}
.g-mid{gap:8px}
.tube{padding-top:34px}
.q-intro .dlv{font-size:14px;color:#c9d6f0;letter-spacing:1px}
.q-intro .dlv b{letter-spacing:3px;font-weight:400}
.dlv.d1 b,.dlv.d2 b{color:#5fe0a0}.dlv.d3 b{color:#ffd76a}.dlv.d4 b,.dlv.d5 b{color:#ff7a6b}
.dtag{font-style:normal;margin-left:6px;padding:0 6px;border-radius:6px;font-size:10px;background:rgba(255,255,255,.12)}
.dtag.d1,.dtag.d2{color:#5fe0a0}.dtag.d3{color:#ffd76a}.dtag.d4,.dtag.d5{color:#ff9a8b}

/* ===== v9：答對／答錯特效 ===== */
.rays{position:absolute;width:520px;height:520px;margin:-260px 0 0 -260px;pointer-events:none;z-index:4;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.55) 0deg 5deg,rgba(255,255,255,0) 5deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0%,rgba(0,0,0,.8) 25%,transparent 65%);mask:radial-gradient(circle,#000 0%,rgba(0,0,0,.8) 25%,transparent 65%);
  animation:rays .95s ease-out forwards}
.rays::after{content:"";position:absolute;inset:35%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(160,255,200,.4) 40%,transparent 70%)}
@keyframes rays{0%{opacity:0;transform:scale(.3) rotate(0)}20%{opacity:1}100%{opacity:0;transform:scale(1.15) rotate(40deg)}}
.opts,.opt{position:relative}
.opt{overflow:hidden;z-index:5}
.opt.shine::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);animation:shine .7s .1s ease-out forwards}
@keyframes shine{to{left:120%}}
.opt.correct.shine{animation:okPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes okPop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.fly-pts{position:absolute;z-index:60;pointer-events:none;font-family:"Arial Black","Impact",sans-serif;font-style:italic;font-size:30px;color:#ffe066;-webkit-text-stroke:1.5px #6b3d00;text-shadow:0 3px 0 #3b2100,0 0 12px rgba(255,220,90,.8);animation:flyPts 1.15s cubic-bezier(.4,0,.2,1) forwards}
@keyframes flyPts{0%{opacity:0;transform:translate(0,10px) scale(.5)}20%{opacity:1;transform:translate(0,-26px) scale(1.25)}45%{transform:translate(0,-26px) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.5)}}
.bad-flash{position:absolute;inset:0;pointer-events:none;z-index:45;opacity:0;background:radial-gradient(ellipse at 50% 55%,rgba(255,60,80,.35),rgba(220,20,50,.75));mix-blend-mode:screen}
.bad-flash.on{animation:badFlash .6s ease-out}
@keyframes badFlash{0%{opacity:0}12%{opacity:1}35%{opacity:.55}50%{opacity:.85}100%{opacity:0}}
#game.shake{animation:gShake .45s}
@keyframes gShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.opt.crack{background:linear-gradient(180deg,#e0605f,#b8343b)}
.opt.crack::before{content:"";position:absolute;inset:0;background:
  linear-gradient(115deg,transparent 46%,rgba(255,255,255,.55) 47%,transparent 48.5%),
  linear-gradient(60deg,transparent 60%,rgba(255,255,255,.4) 61%,transparent 62%),
  linear-gradient(160deg,transparent 30%,rgba(255,255,255,.35) 31%,transparent 32%);animation:crackIn .25s ease-out}
@keyframes crackIn{from{opacity:0;transform:scale(1.2)}to{opacity:1}}

/* ===== v9：首頁（深藍＋相框＋Q 版） ===== */
#home{background:radial-gradient(500px 360px at 50% 18%,rgba(90,140,230,.35),transparent 70%)}
.topbar{gap:8px}
.me-card{display:flex;align-items:center;gap:10px;text-align:left;flex:1;min-width:0}
.me-card .ph{width:54px;height:54px;padding:3px;flex-shrink:0}
.me-card .ph .em{font-size:30px}
.me-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.me-txt b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvl{display:flex;align-items:center;gap:6px;font-size:12px;color:#9fd3ff;margin:2px 0 4px}
.lvl em{font-style:normal;font-weight:900;background:linear-gradient(180deg,#ffe36b,#f0a81c);color:#4a2b00;border-radius:8px;padding:0 6px}
.me-txt .xpbar{height:6px;border-radius:4px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);max-width:150px}
.coin-chip{margin:0}
.logo{position:relative;margin:2px 0 14px}
.logo-ring{position:relative;width:96px;height:96px;margin:0 auto -6px;display:grid;place-items:center}
.logo-ring svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 30s linear infinite}
.logo-ring line{stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.25;animation:tickGlow 1.5s ease-in-out infinite}
@keyframes tickGlow{50%{opacity:1;stroke:#ffd76a}}
@keyframes spin{to{transform:rotate(360deg)}}
.logo-ring .crown{font-size:46px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.logo h1{font-size:40px;text-shadow:0 4px 0 #0b1222,0 0 18px rgba(120,170,255,.35)}
.logo h1 span{background:linear-gradient(180deg,#fff5b0,#ffd23d 50%,#ff9d1c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #5a3500)}
.logo p{color:#9fb0d0}
.home-actions{gap:12px;padding:0 18px}
.hero-tile{position:relative;display:grid;grid-template-columns:70px 1fr 24px;align-items:center;gap:10px;text-align:left;padding:16px 14px;border-radius:22px;
  background:linear-gradient(135deg,#ffb347 0%,#ff7a3d 55%,#e8513a 100%);box-shadow:0 6px 0 #a3321f,0 12px 26px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.4);overflow:hidden;transition:transform .1s}
.hero-tile::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 15% 50%,rgba(255,255,255,.12) 0 8deg,transparent 8deg 22deg);pointer-events:none}
.hero-tile:active,.tile:active{transform:translateY(4px)}
.hero-ic{font-size:50px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25));animation:bob 2.4s ease-in-out infinite;position:relative}
.hero-txt{position:relative}
.hero-txt b{display:block;font-size:24px;font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.hero-txt small{opacity:.95;font-size:13px}
.hero-prog{display:inline-block;margin-top:6px;background:rgba(0,0,0,.25);border-radius:10px;padding:2px 10px;font-size:12px;font-weight:700;color:#ffeaa0}
.hero-tile .go{font-size:34px;font-weight:900;opacity:.8;position:relative}
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px 12px;border-radius:20px;
  background:linear-gradient(180deg,rgba(40,62,108,.95),rgba(22,36,68,.95));border:1.5px solid rgba(160,190,240,.35);box-shadow:0 5px 0 #0b1530,0 10px 20px rgba(0,0,0,.35);transition:transform .1s}
.tile .bub{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;font-size:32px;margin-bottom:4px;box-shadow:0 4px 0 rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.45)}
.tile b{font-size:17px;font-weight:900}
.tile small{font-size:12px;color:#9fb0d0}
.t-green .bub{background:radial-gradient(circle at 35% 30%,#7ff0b8,#1f9e6a)}
.t-purple .bub{background:radial-gradient(circle at 35% 30%,#d8a6ff,#7b3df2)}
.t-blue .bub{background:radial-gradient(circle at 35% 30%,#9fe0ff,#3a6dff)}
.t-pink .bub{background:radial-gradient(circle at 35% 30%,#ffb3cf,#e0457b)}
.tile:hover .bub,.hero-tile:hover .hero-ic{animation:wobble .5s}
@keyframes wobble{25%{transform:rotate(-10deg) scale(1.08)}75%{transform:rotate(10deg) scale(1.08)}}
.bottom-nav{background:rgba(6,12,26,.75);border-top:1px solid rgba(160,190,240,.2)}
.bottom-nav button{color:#9fb0d0}
.navbar{background:rgba(6,12,26,.55);border-bottom:1px solid rgba(160,190,240,.15)}
/* 其他頁面卡片配色跟著深藍主題 */
.big-btn{border:0}
.cta{background:linear-gradient(180deg,#ffd23d,#ff9d1c);color:#4a2b00;box-shadow:0 5px 0 #b25e00}
.cta:disabled{filter:grayscale(.8);opacity:.6}
.seg{background:rgba(0,0,0,.3)}
.seg button.on{background:linear-gradient(180deg,#5b8cff,#3a63d8);color:#fff}
.label{color:#9fd3ff}

/* ===== v10：背景改回第一、二版的紫色漸層 ===== */
:root{--bg1:#2a1060;--bg2:#4b1fa3;--bg3:#1a0a3d}
body{background:radial-gradient(1200px 600px at 50% -10%,#6a35d6 0%,#2a1060 45%,#1a0a3d 100%) fixed}
#home{background:radial-gradient(500px 360px at 50% 18%,rgba(160,110,255,.35),transparent 70%)}
#game{background:radial-gradient(700px 500px at 50% 0%,rgba(122,70,230,.55),transparent 70%),linear-gradient(180deg,#2d1268 0%,#1f0b4a 55%,#160837 100%)}
.qbox{background:linear-gradient(180deg,rgba(38,16,88,.95),rgba(26,10,64,.95));border-color:rgba(200,170,255,.55);box-shadow:0 0 0 4px rgba(20,8,50,.55),0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.qsrc,.round-tag,.tube small,.wait-tip{color:#cbb9f5}
.tube .tb{background:rgba(10,0,30,.45)}
.ph .em{background:linear-gradient(160deg,#c4b2f0,#7b62c4)}
.cbanner b{background:linear-gradient(90deg,#2a0f63 70%,rgba(42,15,99,0))}
.cbanner.r b{background:linear-gradient(270deg,#2a0f63 70%,rgba(42,15,99,0))}
.tile{background:linear-gradient(180deg,rgba(84,44,170,.95),rgba(50,22,112,.95));border-color:rgba(200,170,255,.35);box-shadow:0 5px 0 #1c0a44,0 10px 20px rgba(0,0,0,.35)}
.tile small,.logo p,.camp-cert .t small,.camp-tip,.sh-tip,.muted.small{color:#cbb9f5}
.bottom-nav{background:rgba(20,6,50,.7);border-top-color:rgba(200,170,255,.2)}
.bottom-nav button{color:#d6c9ff}
.navbar{background:rgba(20,6,50,.45);border-bottom-color:rgba(200,170,255,.15)}
.label{color:#d6c9ff}
.seg button.on{background:#fff;color:var(--ink)}
.map-scroll{background:radial-gradient(500px 300px at 50% 20%,rgba(160,110,255,.25),transparent)}
.sh-card{background:linear-gradient(180deg,#3d1a8a,#1f0b4a)}
.lvl{color:#e3d6ff}
.logo h1{text-shadow:0 4px 0 #1a0a3d,0 8px 18px rgba(0,0,0,.4)}
.logo h1 span{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--gold);filter:none;-webkit-text-stroke:0}
.logo h1 span{color:#ffd23d;text-shadow:0 4px 0 #8a5a00,0 0 16px rgba(255,200,60,.55)}

/* ===== v11：承上題、依序作答 ===== */
.qbox{flex-direction:column}
.pre-box{display:none;width:100%;margin-top:8px}
.pre-box.has{display:block}
.pre-btn{display:block;margin:0 auto;background:rgba(255,215,106,.18);border:1px solid rgba(255,215,106,.6);color:#ffe08a;font-size:13px;font-weight:700;padding:4px 12px;border-radius:14px;animation:prePulse 1.6s ease-in-out 3}
@keyframes prePulse{50%{box-shadow:0 0 0 4px rgba(255,215,106,.25)}}
.pre-body{display:none;margin-top:8px;max-height:40vh;overflow-y:auto;text-align:left;background:rgba(0,0,0,.3);border-radius:8px;padding:8px 10px;font-size:13px;line-height:1.55;color:#eee}
.pre-box.open .pre-body{display:block;animation:fadeIn .2s}
.pre-q+.pre-q{border-top:1px dashed rgba(255,255,255,.25);margin-top:6px;padding-top:6px}
.pre-q ol{padding-left:20px;margin-top:4px;color:#cbb9f5}
.rv-pre{margin:6px 0;font-size:13px;color:#555}
.rv-pre summary{cursor:pointer;color:var(--violet);font-weight:700}
.rv-pre ol{padding-left:20px}
.pts-note .link{margin-left:6px;font-size:12px}
.qbox .pre-q p{font-size:13px;font-weight:400;text-align:left;line-height:1.55;text-shadow:none}
.pre-body{max-height:26vh}
/* 題目框不被壓縮，內容太長時整個作答區往下捲，不會超出框外 */
.qbox{flex:0 0 auto;justify-content:safe center;overflow:visible;height:auto}
.qbox p#qText{width:100%;overflow-wrap:anywhere}
.qzone{overflow-y:auto;overscroll-behavior:contain}
.pre-body{overflow-wrap:anywhere}