:root{--bg:#FFFBF2;--ink:#23264A;--muted:#5A5E7A;--line:#E4E0D4;--tint:#EEF0FF;--indigo:#4B5BEA;--indigo-d:#2C3AB8;--indigo-t:#3A47C9;--orange:#FFB020;--orange-d:#C97F00;--mint:#18B99A;--mint-d:#0E8A72;--off:#EFEDE6}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Nunito","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;-webkit-text-size-adjust:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#app{max-width:480px;margin:0 auto;min-height:100dvh}
.page{padding:16px 16px 28px;display:flex;flex-direction:column;gap:14px;min-height:100dvh}
.page.center{justify-content:center;text-align:center}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:14px}.row>*{flex:1}
.grow{flex:1;min-width:0}
.logo{font-weight:900;font-size:34px;line-height:1.2}
.title{font-weight:900;font-size:26px;text-align:center;margin:6px 0;line-height:1.3}
.title small{display:block;font-size:15px;color:var(--indigo);letter-spacing:2px}
.subtitle{font-weight:900;font-size:18px;color:var(--indigo);letter-spacing:3px;margin-top:-4px}
.sub,.hint{color:var(--muted);font-weight:700;margin:0}
.hint{font-size:14px}

.btn{min-height:62px;border:0;border-radius:18px;font-weight:900;font-size:21px;padding:8px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.btn small{font-size:12px;font-weight:800;opacity:.85}
.btn:active{transform:translateY(3px)}
.primary{background:var(--orange);border-bottom:6px solid var(--orange-d)}
.second{background:var(--indigo);border-bottom:6px solid var(--indigo-d);color:#fff}
.third{background:var(--mint);border-bottom:6px solid var(--mint-d);color:#0B2B25}
.plain{background:#fff;border:2px solid var(--line);border-bottom-width:6px;font-size:18px}
.line{background:#1A7F45;border-bottom:6px solid #0F5A30;color:#fff}

.coins{display:flex;gap:8px}
.chip{flex:1;display:flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:7px 12px;font-weight:900;font-size:14px}
.dot{width:14px;height:14px;border-radius:50%;flex:none}
.dot.silver{background:#B7BECC}.dot.gold{background:var(--orange)}.dot.gem{background:var(--mint);border-radius:3px;transform:rotate(45deg)}

.profile{background:var(--indigo);border:0;border-radius:24px;padding:16px;display:flex;gap:14px;align-items:center;color:#fff;text-align:left;width:100%}
.name{font-weight:900;font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{font-weight:800;font-size:13px;margin-top:2px}
.xp{height:12px;border-radius:999px;background:var(--indigo-d);margin:8px 0 2px;overflow:hidden}
.xp div{height:100%;border-radius:999px;background:#FFD45C}
.ref{background:var(--tint);border-radius:16px;padding:12px 16px;display:flex;justify-content:space-between;font-weight:900;font-size:14px}
.ref b{color:var(--indigo-t);letter-spacing:1px}
.foot{text-align:center;color:var(--muted);font-size:12px;font-weight:700;margin-top:auto}

.card{background:#fff;border:2px solid var(--line);border-radius:24px;padding:18px}
.idcard{text-align:center;background:var(--tint);border-color:var(--tint)}
.small{font-size:13px;font-weight:800;color:var(--muted)}
.big{font-weight:900;font-size:34px;letter-spacing:3px;margin:4px 0}
.label{font-weight:900;font-size:15px}
.input{height:54px;border:2px solid var(--line);border-radius:16px;padding:0 16px;font-weight:800;font-size:18px;background:#fff;width:100%}
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pick{background:#fff;border:3px solid var(--line);border-radius:18px;padding:8px 0;display:flex;justify-content:center}
.pick.on{border-color:var(--indigo);background:var(--tint)}

.bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bar h1{margin:0;font-size:20px;font-weight:900}
.bar-r{font-weight:900;font-size:14px;color:var(--indigo-t);min-width:56px;text-align:right}
.back{background:none;border:0;font-weight:900;font-size:15px;color:var(--muted);min-width:56px;min-height:44px;text-align:left;padding:0}
.tabs{display:flex;gap:8px}
.tab{flex:1;height:44px;border-radius:999px;border:2px solid var(--line);background:#fff;font-weight:900;font-size:15px}
.tab.on{background:var(--indigo);border-color:var(--indigo);color:#fff}
.info{background:var(--tint);border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:2px}
.info span{font-size:13px;font-weight:700;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.node{height:68px;border-radius:18px;border:2px solid var(--line);border-bottom-width:6px;background:#fff;font-weight:900;font-size:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0}
.node small{font-size:11px;font-weight:800}
.node.done{background:var(--orange);border-color:var(--orange-d)}
.node.now{background:var(--indigo);border-color:var(--indigo-d);color:#fff}
.node.lock{background:var(--off);color:var(--muted)}

.quiz{gap:12px}
.qtop{display:flex;align-items:center;gap:12px;font-weight:900}
.qtop .back{font-size:26px;min-width:44px;text-align:center}
.prog{flex:1;height:16px;border-radius:999px;background:var(--line);overflow:hidden}
.prog div{height:100%;background:var(--mint);border-radius:999px;transition:width .3s}
.qmeta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:900;font-size:14px;color:var(--muted)}
.question{font-weight:900;font-size:23px;line-height:1.45;min-height:140px;display:flex;align-items:center}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{min-height:64px;background:#fff;border:2px solid var(--line);border-bottom-width:6px;border-radius:18px;font-weight:900;font-size:19px;display:flex;align-items:center;gap:14px;padding:8px 16px;text-align:left}
.opt span{width:34px;height:34px;flex:none;border-radius:10px;background:var(--tint);color:var(--indigo-t);display:flex;align-items:center;justify-content:center;font-size:16px}
.opt:disabled{cursor:default;color:var(--ink)}
.opt.right{background:#E3F7EA;border-color:#1A7F45}
.opt.right span{background:#1A7F45;color:#fff}
.opt.wrong{background:#FDE7EA;border-color:#B5172D}
.opt.wrong span{background:#B5172D;color:#fff}
.feedback{border-radius:16px;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;font-weight:800}
.feedback b{font-size:17px}
.feedback.ok{background:#E3F7EA;color:#0F5A30}
.feedback.no{background:#FDE7EA;color:#8E1022}
.feedback .ans{font-size:14px;margin-top:2px}
.cite{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;white-space:nowrap}
.cite b{font-size:17px}
.cite small{font-size:11px;color:var(--muted);font-weight:700}
.score{text-align:center;font-weight:800;font-size:14px;color:var(--muted);margin-top:auto}
.score b{color:var(--ink);font-size:18px}

.stars{display:flex;justify-content:center;gap:10px}
.star{width:48px;height:48px;background:var(--line);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.star.on{background:var(--orange)}
.stat{display:flex;justify-content:space-around}
.stat div{display:flex;flex-direction:column}
.stat b{font-size:30px;font-weight:900}
.stat span{font-size:13px;font-weight:800;color:var(--muted)}
.reward{background:var(--tint);border-radius:16px;padding:12px 16px;font-weight:900;color:var(--indigo-t);line-height:1.6}
.levelup{background:var(--orange);border-radius:16px;padding:12px 16px;font-weight:900;font-size:18px}

.ptitle{display:inline-block;background:#FFD45C;color:var(--ink);border-radius:999px;padding:1px 10px;font-weight:900;font-size:12px;margin-top:3px}
.frame{display:inline-flex;padding:4px;border-radius:50%;flex:none}
.frame svg{display:block;border-radius:50%;background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-pick{border:2px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-weight:900;font-size:14px;min-height:40px}
.chip-pick.on{background:var(--indigo);border-color:var(--indigo);color:#fff}

/* 倒數長條：寬度與色相由 app.js 更新（--h 由 game.js timerHue 算出） */
.timer{position:relative;height:22px;border-radius:999px;background:var(--off);overflow:hidden;border:2px solid var(--line)}
.timer-fill{height:100%;border-radius:999px;background:hsl(var(--h,140) 72% 46%);transition:width .1s linear,background-color .3s}
.timer.warn .timer-fill{background:hsl(var(--h) 92% 50%)}
.timer.danger .timer-fill{background:hsl(var(--h) 78% 50%);animation:pulse .6s ease-in-out infinite alternate}
.timer.danger{border-color:#F3A3AE}
.timer-num{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-weight:900;font-size:13px;color:var(--ink)}
@keyframes pulse{from{opacity:1}to{opacity:.55}}

/* 徽章：銅／銀／金／白金／鑽石 */
.badge{width:30px;height:30px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:13px;color:#fff;border-radius:50%;background:#D6D3C9;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.badge.lg{width:48px;height:48px;font-size:18px}
.badge.bronze{background:linear-gradient(135deg,#E3A06A,#A8622E)}
.badge.silver{background:linear-gradient(135deg,#E6EAF0,#9AA3B2);color:var(--ink)}
.badge.gold{background:linear-gradient(135deg,#FFE27A,#D99A00);color:var(--ink)}
.badge.plat{background:linear-gradient(135deg,#C9F2EA,#5BB5A5);color:var(--ink)}
.badge.diamond{background:linear-gradient(135deg,#B9D4FF,#6E5CF0)}
.ach{display:flex;gap:12px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:18px;padding:12px 14px}
.ach.soon{opacity:.7}
.ach-name{font-weight:900;font-size:17px;display:flex;gap:6px;align-items:baseline}
.ach-name small{font-size:12px;color:var(--indigo-t)}
.ach-desc{font-size:12px;font-weight:700;color:var(--muted)}
.ach-bar{height:8px;border-radius:999px;background:var(--off);margin:6px 0 4px;overflow:hidden}
.ach-bar div{height:100%;background:var(--mint);border-radius:999px}
.ach-num{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;color:var(--muted)}
.pips{display:flex;gap:3px}
.pip{width:10px;height:10px;border-radius:50%;background:var(--off);border:1px solid var(--line)}
.pip.bronze{background:#C27B45}.pip.silver{background:#AEB6C4}.pip.gold{background:#F2B600}.pip.plat{background:#6CC6B5}.pip.diamond{background:#7D6CF2}
.ach-got{display:flex;gap:10px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:16px;padding:8px 12px;font-weight:800;font-size:14px;text-align:left}

/* 等級之路 */
.road{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.road li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 12px}
.road li>b{min-width:58px;font-size:15px;color:var(--muted)}
.road li div{display:flex;flex-direction:column;gap:3px;font-weight:800;font-size:15px}
.road em{font-style:normal;font-size:11px;font-weight:900;border-radius:6px;padding:1px 6px;margin-right:6px;background:var(--tint);color:var(--indigo-t)}
.road .k-feature em,.unlocks .k-feature span{background:var(--orange);color:var(--ink)}
.road .k-gems em,.unlocks .k-gems span{background:#D4F5EC;color:var(--mint-d)}
.road li.got{background:var(--tint);border-color:var(--tint)}
.road li.got>b{color:var(--indigo-t)}
.road li.next{border-color:var(--orange);box-shadow:0 0 0 3px #FFE6B0}
.road li.next>b{color:var(--orange-d)}
.road li>div{flex:1}
.road-lv{align-self:center;white-space:nowrap;font-size:12px;font-weight:900;color:var(--muted);background:var(--tint);border-radius:999px;padding:3px 8px}
.road li.next .road-lv{background:var(--orange);color:var(--ink)}
.road-h{font-size:15px;margin:4px 2px}
.road-got{margin-top:12px}
.road-got summary{cursor:pointer;font-weight:900;padding:10px 4px;color:var(--indigo-t)}

/* 升級／徽章彈窗 */
.overlay{position:fixed;inset:0;background:rgba(35,38,74,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:10;animation:fade .2s}
.pop{position:relative;background:var(--bg);border-radius:28px;padding:22px 18px 18px;width:100%;max-width:380px;max-height:90dvh;overflow:auto;display:flex;flex-direction:column;gap:12px;text-align:center;animation:popin .45s cubic-bezier(.2,1.6,.4,1)}
.burst{position:absolute;left:50%;top:58px;width:220px;height:220px;margin-left:-110px;margin-top:-110px;border-radius:50%;background:repeating-conic-gradient(#FFE6B0 0 12deg,transparent 12deg 30deg);animation:spin 8s linear infinite;pointer-events:none;opacity:.8}
.up-lv{position:relative;font-weight:900;font-size:52px;line-height:1;color:var(--indigo-t)}
.up-lv small{display:block;font-size:18px;color:var(--orange-d);margin-bottom:4px}
.up-from{position:relative;font-weight:800;color:var(--muted);font-size:14px}
.unlocks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;position:relative}
.unlocks li{display:flex;gap:8px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 12px;font-weight:800;font-size:15px;text-align:left;animation:slidein .4s both;animation-delay:calc(.25s + var(--d,0) * .12s)}
.unlocks li span{font-size:11px;font-weight:900;border-radius:6px;padding:2px 6px;background:var(--tint);color:var(--indigo-t);flex:none}
.pop-reward{font-weight:900;color:var(--indigo-t)}
.pop .label{position:relative}
@keyframes popin{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes slidein{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}}

/* F2：每日簽到、每日任務、貨幣 */
.dot.ticket{background:linear-gradient(135deg,#FF8A5C,#E85D75);border-radius:3px;width:16px;height:11px}
.dot.rare{background:linear-gradient(135deg,#B48CFF,#7A3FD1);border-radius:3px;width:16px;height:11px}
.xp-i{font-style:normal;font-size:9px;font-weight:900;background:var(--indigo);color:#fff;border-radius:5px;padding:1px 4px;line-height:1.3}
.rws{display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:center}
.rw{display:inline-flex;align-items:center;gap:4px;font-weight:900;font-size:13px;white-space:nowrap}
.daily-row .dbtn{position:relative;min-height:58px;font-size:17px}
.dbtn .new{position:absolute;top:8px;right:10px;width:12px;height:12px;border-radius:50%;background:#E8344E;box-shadow:0 0 0 3px #fff;animation:pulse .8s ease-in-out infinite alternate}
.dbtn.has-premium{border-color:#E0A100;background:linear-gradient(180deg,#FFF6D6,#fff)}
.sec{display:flex;flex-direction:column;gap:12px;padding:14px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline}
.sec-h b{font-size:18px;font-weight:900}
.sec-h span{font-size:13px;font-weight:800;color:var(--indigo-t)}
.refresh{font-size:11px;color:var(--muted);white-space:nowrap}
.miss{background:#FFF1D6;color:#7A4B00;border-radius:12px;padding:8px 12px;font-weight:800;font-size:13px}
.week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.week li{position:relative;background:var(--off);border:2px solid var(--line);border-radius:14px;padding:6px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:66px}
.week li small{font-size:11px;font-weight:900;color:var(--muted)}
.week li .rws{flex-direction:column;align-items:center;gap:2px}
.week li.today{background:#FFF1D6;border-color:var(--orange);animation:glow 1.2s ease-in-out infinite alternate}
.week li.got{background:var(--tint);border-color:var(--tint);opacity:.75}
.week li.big{grid-column:span 2;background:linear-gradient(135deg,#FFF1D6,#FFE0F0);border-color:#E0A100}
.week li.big.got{opacity:.75}
.week .ok{position:absolute;top:2px;right:6px;font-style:normal;font-weight:900;color:var(--mint-d)}
.btn[disabled]{opacity:.6;cursor:default}
.btn[disabled]:active{transform:none}
.quests{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.quest{display:flex;gap:10px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 12px}
.quest .rws{justify-content:flex-start}
.quest.claimed{opacity:.6}
.quest.premium{border-color:#E0A100;background:linear-gradient(135deg,#FFF6D6,#FFFFFF 60%,#F3ECFF);box-shadow:0 0 0 3px #FFE6B0}
.quest.chest{background:var(--tint);border-color:var(--tint)}
.q-name{font-weight:900;font-size:16px}
.q-tag{display:inline-block;background:linear-gradient(90deg,#E0A100,#7A3FD1);color:#fff;border-radius:999px;padding:1px 10px;font-size:11px;font-weight:900;margin-bottom:2px}
.q-btn{flex:none;border:0;background:var(--orange);border-bottom:4px solid var(--orange-d);border-radius:12px;min-height:44px;padding:0 16px;font-weight:900;font-size:15px;animation:glow .8s ease-in-out infinite alternate}
.q-num,.q-done{flex:none;font-weight:900;font-size:13px;color:var(--muted);max-width:84px;text-align:right}
.q-done{color:var(--mint-d)}
.center-t{text-align:center}
.quest-hint{border:2px solid var(--orange);background:#FFF1D6;border-radius:16px;padding:10px 14px;font-weight:900;font-size:14px;text-align:left}
.up-head{font-size:34px}
.head-rw{position:relative}
.head-rw .rw{font-size:18px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:4px 10px}
.head-rw .rws{gap:6px}
@keyframes glow{from{box-shadow:0 0 0 2px #FFE6B0}to{box-shadow:0 0 0 6px #FFE6B0}}

/* F3：七階稀有度、道具卡面、抽卡、背包、道具欄、套裝、分享卡 */
.rtag{display:inline-block;background:var(--rc);color:#fff;border-radius:999px;padding:1px 9px;font-size:11px;font-weight:900;line-height:1.6;text-shadow:0 1px 0 rgba(0,0,0,.2);vertical-align:middle}
.art{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;color:#fff;font-weight:900;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0,color-mix(in srgb,var(--rc) 55%,#fff) 22%,var(--rc) 58%,color-mix(in srgb,var(--rc) 55%,#23264A) 100%);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--rc);text-shadow:0 2px 0 rgba(0,0,0,.25)}
.art.card{border-radius:14px;flex-direction:column;justify-content:flex-end;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--rc) 45%,#fff),var(--rc) 55%,color-mix(in srgb,var(--rc) 50%,#23264A))}
.art.card svg{position:absolute;inset:6% 10% auto;width:80%}
.art.card b{position:absolute;left:0;right:0;bottom:0;display:block;background:rgba(35,38,74,.55);font-size:15px;line-height:1.5;padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.art.card.xs b,.art.card.sm b,.art.card.md b{display:none}
.art.xs{width:30px;height:30px;font-size:15px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--rc)}
.art.sm{width:52px;height:52px;font-size:24px}
.art.md{width:64px;height:64px;font-size:30px}
.art.lg{width:120px;height:120px;font-size:58px;box-shadow:0 0 0 4px #fff,0 0 0 7px var(--rc)}
.art.card.xs,.art.card.sm{font-size:56px}.art.card.md{font-size:64px}.art.card.lg{width:110px;height:140px;font-size:110px}
.art.card.sm{width:46px;height:58px}.art.card.md{width:56px;height:70px}
.art.r4,.art.r5,.art.r6{animation:shine 2.4s ease-in-out infinite alternate}
.art.r6::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.65) 45%,transparent 60%);background-size:250% 100%;animation:sweep 2.6s linear infinite}
@keyframes shine{from{filter:brightness(1)}to{filter:brightness(1.15) saturate(1.15)}}
@keyframes sweep{from{background-position:120% 0}to{background-position:-120% 0}}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{position:relative;background:#fff;border:2px solid var(--line);border-bottom:5px solid var(--rc);border-radius:16px;padding:12px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:120px}
.t-name{font-weight:900;font-size:12px;line-height:1.3;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eq{position:absolute;top:4px;right:4px;font-style:normal;font-size:10px;font-weight:900;background:var(--indigo);color:#fff;border-radius:999px;padding:1px 6px}
.lock-note{display:flex;gap:12px;align-items:center;background:#F1EEFF;border:2px dashed #A99BEA;border-radius:16px;padding:12px 14px;text-align:left}
.lock-note div{display:flex;flex-direction:column;gap:2px}
.lock-note b{font-size:15px}.lock-note span{font-size:12px;font-weight:700;color:var(--muted)}
.lock-i{width:26px;height:22px;flex:none;border-radius:6px;background:#7A6BD6;position:relative;margin-top:8px}
.lock-i::before{content:"";position:absolute;left:5px;top:-11px;width:16px;height:14px;border:4px solid #7A6BD6;border-bottom:0;border-radius:10px 10px 0 0;box-sizing:border-box}
.gbtn{min-height:58px;font-size:18px}
.gbtn.locked{opacity:.5;filter:grayscale(.6)}
.luck{background:var(--tint);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;text-align:left}
.luck-h{display:flex;justify-content:space-between;font-weight:900}
.luck small{font-size:12px;font-weight:700;color:var(--muted)}
.luck-bar div{background:linear-gradient(90deg,#8E44D9,#EE7F0E)}
.pity{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:13px;font-weight:800;color:var(--muted)}
.pity b{color:var(--ink);font-size:15px}
.rates{width:100%;border-collapse:collapse;font-weight:800;font-size:14px;text-align:center}
.rates th{font-size:12px;color:var(--muted);padding:4px}
.rates td{border-top:1px solid var(--line);padding:6px 4px}
.rates td.up{color:#8E44D9}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slot{min-height:84px;border:2px dashed var(--line);border-radius:14px;background:var(--off);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:900;font-size:13px;color:var(--muted);padding:6px 0}
.slot.full{border-style:solid;background:#fff;color:var(--ink)}
.slot.partner{border-color:#E0A100}
.slot small{font-size:11px;font-weight:900}
.sets{display:flex;flex-direction:column;gap:10px}
.set{background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.set.claimed{background:var(--tint);border-color:var(--tint)}
.set-h{display:flex;align-items:center;gap:10px}
.set-h b{font-size:16px;font-weight:900}.set-h small{display:block;font-size:12px;font-weight:800;color:var(--muted)}
.pieces{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pieces li{font-size:12px;font-weight:900;border-radius:999px;padding:3px 10px;background:var(--off);color:var(--muted);border:2px solid var(--line)}
.pieces li.got{background:#fff;color:var(--ink);border-color:var(--rc)}
.lookup summary{font-weight:900;cursor:pointer}
.lookup .row{gap:8px}.lookup .btn{flex:0 0 90px;min-height:54px}
.detail{gap:8px}
.d-art{display:flex;justify-content:center;padding:10px 0 6px}
.d-name{font-weight:900;font-size:24px}
.settag{display:inline-block;margin-left:6px;font-size:11px;font-weight:900;background:var(--tint);color:var(--indigo-t);border-radius:999px;padding:1px 9px}
.serial{font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:13px;color:var(--muted);letter-spacing:1px}
.d-lines{list-style:none;margin:0;padding:0;background:#fff;border:2px solid var(--line);border-radius:14px;text-align:left}
.d-lines li{display:flex;justify-content:space-between;gap:8px;padding:7px 12px;font-size:14px;font-weight:800}
.d-lines li+li{border-top:1px solid var(--line)}
.d-lines span{color:var(--muted)}
.d-lines .affix b{color:#8E44D9}
.d-story{margin:0;font-size:13px;font-weight:800;color:var(--muted)}
.d-story small{display:block;color:var(--indigo-t);font-size:12px}
.gacha-pop{max-width:420px}
.gacha-pop .up-lv{font-size:36px;color:var(--rc)}
.gacha-pop .up-lv small{color:var(--muted);font-size:14px}
.big-win .burst{background:repeating-conic-gradient(color-mix(in srgb,var(--rc) 35%,#fff) 0 12deg,transparent 12deg 30deg)}
.g-grid{position:relative;display:grid;gap:6px;grid-template-columns:repeat(5,minmax(0,1fr))}
.g-grid.n10 .art.sm{width:40px;height:40px;font-size:19px}.g-grid.n10 .art.card.sm{width:36px;height:46px}
.g-grid.n1{grid-template-columns:1fr;justify-items:center}
.g-card{position:relative;background:#fff;border:2px solid var(--line);border-bottom:5px solid var(--rc);border-radius:14px;padding:8px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:5px;animation:flip .5s both;animation-delay:calc(.2s + var(--d) * .12s)}
.g-grid.n1 .g-card{width:200px;padding:16px 8px 12px;gap:8px}
.g-grid.n10 .t-name{font-size:10px}
.g-grid.n10 .rtag{font-size:9px;padding:0 5px}
.g-card.r3,.g-card.r4,.g-card.r5,.g-card.r6{box-shadow:0 0 0 3px color-mix(in srgb,var(--rc) 35%,#fff)}
.new-tag,.pity-tag{position:absolute;top:-6px;left:-4px;font-style:normal;font-size:9px;font-weight:900;background:#E8344E;color:#fff;border-radius:6px;padding:1px 4px}
.pity-tag{left:auto;right:-4px;background:#8E44D9}
@keyframes flip{from{transform:rotateY(90deg) scale(.8);opacity:0}to{transform:none;opacity:1}}
.share-img{width:100%;border-radius:16px;box-shadow:0 6px 20px rgba(35,38,74,.25)}
a.btn{text-decoration:none;color:inherit}
.tools{display:flex;gap:8px}
.tool{flex:1;min-width:0;min-height:48px;background:#fff;border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;display:flex;align-items:center;gap:6px;padding:4px 8px;font-weight:900;font-size:12px;position:relative}
.tool span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool i{position:absolute;top:-7px;right:-5px;font-style:normal;background:var(--indigo);color:#fff;border-radius:999px;min-width:20px;height:20px;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.tool[aria-disabled="true"]{opacity:.45}
.tool.on{border-color:var(--mint);background:#E3F7EA;opacity:1}
.tool-msg{background:#E3F7EA;color:#0F5A30;border-radius:12px;padding:6px 12px;font-weight:900;font-size:13px}
.hint-ref{background:#FFF1D6;border:2px solid var(--orange);border-radius:14px;padding:8px 14px;font-weight:800;font-size:15px}
.opt.gone{opacity:.3}
.boost-line,.luck-line{background:#F1EEFF;color:#5B3FB0;border-radius:14px;padding:8px 14px;font-weight:900;font-size:14px}

.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);background:var(--ink);color:#fff;font-weight:800;font-size:15px;padding:12px 18px;border-radius:14px;opacity:0;pointer-events:none;transition:.2s;max-width:86vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---------- F4：登入、訪客提示、同步、排行榜、玩家卡、邀請好友 ---------- */
.legal{font-size:12px;font-weight:700;color:var(--muted);text-align:center;margin:4px 0 0}
.legal a{color:var(--indigo-t)}
.gsi{display:flex;justify-content:center;min-height:44px}
.ref-in{background:#FFF6E5;border:2px dashed #F2C266;border-radius:16px;padding:10px 14px;font-weight:800;display:flex;flex-direction:column;gap:2px}
.ref-in b{color:var(--orange-d);letter-spacing:1px}.ref-in small{color:var(--muted);font-size:12px}
.guest-text{font-weight:800;line-height:1.7;text-align:left;margin:0;background:#FFF6E5;border-radius:16px;padding:12px 14px}
.logins{display:flex;flex-direction:column;gap:10px;padding:14px}
.login-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px}
.login-row .gsi{min-height:40px}
.lg{font-weight:900;font-size:16px;display:flex;align-items:center;gap:8px}
.lg::before{content:'';width:12px;height:12px;border-radius:50%;background:#06C755}
.lg-google::before{background:conic-gradient(#4285F4 0 25%,#34A853 0 50%,#FBBC05 0 75%,#EA4335 0)}
.linked{color:var(--mint-d);font-size:14px}
.btn.small{min-height:40px;font-size:15px;border-radius:999px;padding:4px 16px}
.sync-note{background:#FFF6E5;color:#8A5A00;border-radius:14px;padding:10px 14px;font-weight:800;font-size:13px;line-height:1.5}
button.ref{border:0;width:100%;color:inherit;font-family:inherit}
.dot.blue{background:linear-gradient(135deg,#7FB0FF,#2F6FE0);border-radius:3px;width:16px;height:11px}
.center-t{text-align:center}
.rank-list{display:flex;flex-direction:column;gap:8px}
.rank-row{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:18px;padding:8px 12px;text-align:left;font-family:inherit;color:inherit;width:100%}
.rank-row.me{border-color:var(--indigo);background:var(--tint)}
.rank-row .grow{display:flex;flex-direction:column;min-width:0}
.rank-row .name{font-weight:900;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-row small{font-weight:800;color:var(--muted);font-size:12px}
.rk{width:30px;height:30px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;background:var(--off)}
.rk1{background:linear-gradient(135deg,#FFE08A,#E0A100);color:#fff}.rk2{background:linear-gradient(135deg,#E7EAF0,#A6AEBF);color:#fff}.rk3{background:linear-gradient(135deg,#F6C8A0,#C9793E);color:#fff}
.rv{font-weight:900;color:var(--indigo-t);font-size:15px;white-space:nowrap}
.card-pop{align-items:center}
.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.mini{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid color-mix(in srgb,var(--rc) 40%,#fff);border-radius:14px;padding:8px 4px;font-weight:900;font-size:12px}
.mini small{color:var(--rc);font-size:11px}
.invite-card{text-align:center;background:linear-gradient(135deg,#FFF1D6,#FFE3EC);border:0}
.invite-card .big{font-size:38px;font-weight:900;letter-spacing:4px;color:var(--orange-d)}
.invite-card .small{font-weight:800;font-size:13px;color:var(--muted)}
.istyles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.istyle{border:3px solid transparent;border-radius:14px;background:#fff;padding:4px;font-weight:900;font-size:13px;font-family:inherit;color:inherit;display:flex;flex-direction:column;gap:4px}
.istyle img{width:100%;aspect-ratio:26/17;object-fit:cover;border-radius:10px;display:block}
.istyle.on{border-color:var(--indigo);background:var(--tint)}

/* F5：副本 */
.btn.dungeon{background:var(--mint);border-bottom:6px solid var(--mint-d);color:#fff}
.btn.dungeon.locked{background:#BFE9DF;border-bottom-color:#93D3C4;color:#0B5E4E}
.dg{display:flex;flex-direction:column;gap:12px;padding:16px}
.dg-head{display:flex;align-items:center;gap:12px}
.dg-head b{display:block;font-size:20px;font-weight:900}
.dg-head small{display:block;font-size:13px;font-weight:700;color:var(--muted)}
.dg-art{width:52px;height:52px;border-radius:16px;background:linear-gradient(160deg,#2FD1B0,#118E78);display:flex;align-items:flex-end;justify-content:center;gap:5px;padding:12px 10px;flex:none}
.dg-art i{width:7px;border-radius:4px;background:#fff;animation:eq 1.2s ease-in-out infinite}
.dg-art i:nth-child(1){height:45%}.dg-art i:nth-child(2){height:90%;animation-delay:.2s}.dg-art i:nth-child(3){height:65%;animation-delay:.4s}
@keyframes eq{50%{transform:scaleY(.55)}}
.dg.soon{opacity:.7}.dg.soon .dg-art{background:linear-gradient(160deg,#B9B5A8,#8C887C)}.dg.soon .dg-art i{animation:none}
.dg-lock{background:#FFF3D6;border-radius:12px;padding:8px 12px;font-size:14px;font-weight:800;color:#8A5A00}
.tiers{display:flex;flex-direction:column;gap:10px}
.tier{display:flex;flex-wrap:wrap;align-items:center;gap:10px;text-align:left;border:2px solid var(--line);border-bottom-width:5px;border-radius:18px;background:#fff;padding:10px 12px}
.tier b{display:block;font-size:17px;font-weight:900}
.tier small{display:block;font-size:12px;font-weight:700;color:var(--muted)}
.tier em{font-style:normal;font-size:12px;font-weight:900;color:var(--muted);display:flex;align-items:center;gap:4px;white-space:nowrap}
.tier-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:var(--off);flex:none}
.tier.open{border-color:var(--mint-d);background:#ECFBF7}
.tier.open .tier-n{background:var(--mint);color:#fff}
.tier.open em{color:var(--mint-d)}
.tier.clear .tier-n{background:var(--orange)}
.tier.lock{background:var(--off)}
.tier-bar{flex-basis:100%;height:8px;border-radius:99px;background:#D3F2EA;overflow:hidden}
.tier-bar span{display:block;height:100%;background:var(--mint);border-radius:99px}
.lock-i{width:10px;height:9px;border-radius:2px;background:currentColor;position:relative;margin-top:4px}
.lock-i::before{content:"";position:absolute;left:1px;top:-6px;width:4px;height:5px;border:2px solid currentColor;border-bottom:0;border-radius:5px 5px 0 0}
.dg-tabs .tab.on{background:var(--mint);border-color:var(--mint)}
.dg-info{background:#E3F8F2}
.lyric{margin:0;background:#F4FBF9;border-left:5px solid var(--mint);border-radius:12px;padding:10px 14px;font-weight:800;line-height:1.7;font-size:15px}

/* F6：召會歷史副本（琥珀色、書架圖） */
.dg-history .dg-art{background:linear-gradient(160deg,#FFC15E,#D9780A);gap:3px;padding:11px 9px}
.dg-history .dg-art i{width:8px;border-radius:2px;animation:none}
.dg-history .dg-art i:nth-child(1){height:70%}.dg-history .dg-art i:nth-child(2){height:95%;background:#FFF3D6}.dg-history .dg-art i:nth-child(3){height:62%;transform:rotate(14deg);transform-origin:bottom left}
.dg-history .tier.open{border-color:#D9780A;background:#FFF6E6}
.dg-history .tier.open .tier-n{background:#F29A1F}
.dg-history .tier.open em{color:#B36200}
.dg-history .tier-bar{background:#FBE3BC}.dg-history .tier-bar span{background:#F29A1F}
.dg-tabs.dg-history .tab.on{background:#F29A1F;border-color:#F29A1F;color:#3A2200}
.dg-info.dg-history{background:#FFF1DA}
.lyric.src-quote{background:#FFF8EC;border-left-color:#F29A1F;font-weight:700;font-size:14px}
.src-link{display:block;margin-top:4px;font-size:13px;font-weight:900;color:#B36200}
/* ---------- F7 ---------- */
.btn.locked{opacity:.6;filter:grayscale(.6)}
.lock-lv{display:flex;align-items:center;justify-content:center;gap:4px}
.explain{margin:8px 0;font-size:14px;color:#5A5E7A}
.review{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:10px}
.rv{background:#fff;border:2px solid var(--line);border-left:6px solid #2FA84F;border-radius:14px;padding:12px}
.rv.no{border-left-color:#DC3232}
.rv-h{display:flex;justify-content:space-between;font-size:13px;color:#5A5E7A}
.rv-q{font-weight:800;margin:6px 0}
.rv-a{font-size:14px}.rv-a.right b{color:#2FA84F}
.rv-src{font-size:13px;color:#5A5E7A;margin-top:4px}
.card-got{border:0;width:100%;cursor:pointer}
.cal{margin:12px 0}
.cal-h{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.cal-w,.cal-d{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-w li{font-size:12px;color:#8A8FA8}
.cd span,.cd button{display:block;width:100%;aspect-ratio:1;border-radius:10px;font:inherit;font-weight:800;display:flex;align-items:center;justify-content:center;border:0;background:#F1F0EA;color:#8A8FA8}
.cd.signed span{background:#2FA84F;color:#fff}
.cd.today span{background:#FFE08A;color:#23264A;outline:2px solid #E0A100}
.cd.missed button{background:#fff;color:#DC3232;border:2px dashed #DC3232;cursor:pointer}
.cd.lost span{text-decoration:line-through}
.g-grid.skip *{animation:none!important;opacity:1!important;transform:none!important}
.skip-btn{margin:6px auto}
.big-celebrate{background:linear-gradient(160deg,#FFF6C8,#FFE08A)}
.hundred{font-size:22px;font-weight:900;color:#B07800;text-align:center}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.filters select{flex:1 1 30%;min-width:96px;padding:6px;border-radius:10px;border:2px solid var(--line);background:#fff;font:inherit;font-size:13px}
.bulk{margin:6px 0}
.vgrid{position:relative;height:60vh;overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
.vspace{position:relative}
.vcell{position:absolute;height:126px;padding:3px;box-sizing:border-box}
.vcell .tile{height:100%;width:100%;min-height:0}
.tile.chosen{outline:3px solid #4B5BEA;background:#EEF0FF}
.tile .stack,.tile .lk{position:absolute;top:4px;right:6px;font-style:normal;font-size:12px;font-weight:900;color:#23264A;background:#FFE08A;border-radius:8px;padding:0 5px}
.tile .lk{left:6px;right:auto;background:#DDE}
.tile.ghost{opacity:.85;filter:grayscale(.8)}
.tile .how{font-size:11px;color:#5A5E7A;text-align:center;line-height:1.3}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0}
.shop-slot{background:#fff;border:2px solid var(--line);border-bottom:5px solid var(--rc);border-radius:16px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.shop-slot small{font-size:12px;color:#5A5E7A}
.shop-slot.sold{opacity:.55}
.whos,.chat{list-style:none;padding:0;margin:6px 0;display:flex;flex-direction:column;gap:6px}
.who{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px}
.who small{display:block;color:#8A8FA8;font-size:12px}
.cap{color:#C97F00}
.chat li{background:#F6F5FF;border-radius:12px;padding:6px 10px}
.chat li b{margin-right:8px;color:#4B5BEA}
.big-cta{font-size:20px;padding:16px;margin-top:14px}

/* F8 配搭闖關 */
.btn.second.coop{background:var(--indigo);color:#fff}
.co-make{display:flex;flex-direction:column;gap:10px}
.co-make .row{gap:8px}
.co-code{flex:1;min-height:48px;border:2px solid var(--line);border-radius:14px;font-size:22px;font-weight:900;letter-spacing:.2em;text-align:center;text-transform:uppercase}
.co-invs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.co-inv{display:flex;align-items:center;gap:8px}
.co-inv small{display:block;color:var(--muted);font-size:12px}
.co-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.co-mode{text-align:left;background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:3px}
.co-mode b{font-size:16px}.co-mode em{font-style:normal;font-size:11px;background:var(--orange);border-radius:6px;padding:1px 6px;margin-left:6px}
.co-mode small{font-size:12px;color:var(--muted);font-weight:700}
.co-mode.lock{opacity:.65}
.co-mech{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.co-mech span{display:block;color:var(--muted)}
.co-code-card{text-align:center;display:flex;flex-direction:column;gap:6px}
.co-bigcode{font-size:40px;letter-spacing:.18em;color:var(--indigo-t)}
.co-code-card .row{gap:6px;justify-content:center;flex-wrap:wrap}
.co-mems{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.co-mem{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:8px}
.co-mem small{display:block;font-size:12px;color:var(--muted)}
.co-mem.off{opacity:.55}.co-mem.empty{border-style:dashed;justify-content:center;min-height:58px}
.co-h{display:flex;align-items:center;justify-content:space-between}
.qmark{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);background:#fff;font-weight:900;color:var(--indigo-t)}
.chip-pick.lock{opacity:.6}.chip-pick small{display:block;font-size:11px;font-weight:700}
.co-togs{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.co-tog{display:flex;align-items:center;gap:4px;font-weight:800;font-size:14px}.co-tog small{color:var(--muted);font-size:11px}
.co-tog.lock{opacity:.6}
.co-sel{display:flex;align-items:center;gap:6px;font-weight:800;flex-wrap:wrap}
.co-sel select,.co-sel input{min-height:40px;border:2px solid var(--line);border-radius:12px;font-weight:800;font-size:15px;padding:0 8px;background:#fff}
.co-sel input{width:64px}
.co-phrases{display:flex;flex-wrap:wrap;gap:6px}
.co-phrases .chip-pick{min-height:34px;padding:4px 10px;font-size:13px}
.co-saidrow{display:flex;flex-wrap:wrap;gap:6px}
.co-said{background:var(--tint);border-radius:12px;padding:4px 10px;font-size:13px;font-weight:800}.co-said b{margin-right:4px;color:var(--indigo-t)}
.co-meta{display:flex;align-items:center;gap:8px;justify-content:space-between}
.co-harm{position:relative;flex:1;max-width:140px;height:18px;border-radius:999px;background:var(--tint);overflow:hidden}
.co-harm i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#F7B733,#EE7F0E)}
.co-harm em{position:relative;font-style:normal;font-size:11px;font-weight:900;padding-left:8px;line-height:18px}
.co-team{display:flex;flex-wrap:wrap;gap:6px}
.co-st{font-size:12px;font-weight:900;border-radius:999px;padding:3px 10px;background:#fff;border:2px solid var(--line)}
.co-st.done{background:var(--tint);border-color:var(--tint);color:var(--indigo-t)}
.co-text{font-size:18px;line-height:1.7}
.co-part{display:flex;flex-direction:column;gap:8px}
.co-clue{background:#FFF4D6;border-radius:14px;padding:8px 12px}.co-clue small{display:block;font-size:12px;color:var(--muted)}
.co-seg{text-align:center;display:flex;flex-direction:column;gap:4px}.co-seg b{font-size:20px}
.co-relay{display:flex;align-items:center;gap:6px;font-weight:900}
.co-relay i{width:22px;height:22px;border-radius:50%;background:var(--tint)}
.co-relay i.done{background:var(--mint)}.co-relay i.now{background:var(--orange);box-shadow:0 0 0 3px #FFE6B0}
.opt.picked{border-color:var(--indigo);background:var(--tint)}
.co-rescue{flex-direction:column;align-items:stretch;gap:8px}
.co-per{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
.co-per th,.co-per td{padding:6px 4px;border-bottom:1px solid var(--line);text-align:center}
.co-per td:first-child,.co-per th:first-child{text-align:left}
.co-drop{font-weight:900}
.co-review summary{cursor:pointer;font-weight:900;padding:10px 4px;color:var(--indigo-t)}
.co-help{text-align:left}.co-help-t{font-size:22px;text-align:center}
.co-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.co-steps li{display:flex;align-items:center;gap:10px;font-weight:800}
.co-ic{width:38px;height:38px;border-radius:50%;background:var(--indigo);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:900;flex:none}
.co-make .row .btn{flex:0 0 96px;min-height:52px;white-space:nowrap}
.co-code-card .row .btn{flex:0 0 auto;white-space:nowrap}
.co-play .rv-q,.co-end .rv-q,.co-play .rv-a,.co-end .rv-a,.co-text{overflow-wrap:anywhere;word-break:break-word}
.review .rv{white-space:normal}
.co-code{min-width:0}

/* ---------- F9 號角搶答 ---------- */
body.wide #app{max-width:none}
.btn.horn{background:linear-gradient(135deg,#FFE08A,#E0A100);color:#4A2C00}
.btn.tiny{min-height:32px;font-size:13px;padding:4px 10px;border-radius:10px}
.row.wrap{flex-wrap:wrap}
.hn-hero{display:flex;gap:12px;align-items:center;background:#FFF4D6;border-radius:20px;padding:12px}
.hn-hero b{display:block;font-size:22px}.hn-hero span{color:var(--muted);font-weight:700;font-size:14px}
.hn-horn{position:relative;display:inline-block}
.hn-horn.small svg{width:96px;height:64px}
.hn-horn i{position:absolute;right:-6px;top:6px;width:40px;height:40px;border:4px solid #E0A100;border-left:0;border-bottom:0;border-radius:0 60px 0 0;opacity:0;transform:rotate(20deg)}
.hn-horn.blow svg{animation:hnBlow 1.2s ease-in-out infinite alternate}
.hn-horn.blow i{animation:hnWave 1.2s ease-out infinite}
.hn-horn.blow i:nth-of-type(2){animation-delay:.3s;right:-18px;top:-6px;width:60px;height:60px}
.hn-horn.blow i:nth-of-type(3){animation-delay:.6s;right:-30px;top:-18px;width:84px;height:84px}
@keyframes hnBlow{from{transform:rotate(-6deg) scale(.96)}to{transform:rotate(4deg) scale(1.06)}}
@keyframes hnWave{0%{opacity:.9;transform:rotate(20deg) scale(.6)}100%{opacity:0;transform:rotate(20deg) scale(1.3)}}
.hn-field{display:flex;flex-direction:column;gap:4px;font-weight:800;font-size:14px;color:var(--muted)}
.hn-field input,.hn-field select,.hn-field textarea,#hn-paste,#hn-share{border:2px solid var(--line);border-radius:12px;padding:8px 10px;font:inherit;font-size:16px;color:var(--ink);background:#fff;width:100%}
.hn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:8px 0}
.hn-togs{display:flex;flex-direction:column;gap:6px}
.hn-avs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hn-av{border:3px solid transparent;background:#fff;border-radius:50%;padding:2px;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.hn-av.on{border-color:var(--indigo)}
.hn-pvs,.hn-qs,.hn-setlist,.hn-rank,.hn-review{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:6px}
.hn-pv,.hn-qs>li,.hn-setlist li{display:flex;gap:8px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 10px}
.hn-pv span,.hn-qs span,.hn-setlist span{display:flex;flex-direction:column;font-weight:800;min-width:0;overflow-wrap:anywhere}
.hn-pv small,.hn-qs small,.hn-setlist small{color:var(--muted);font-weight:700}
.hn-qs>li.warn,.hn-editor.warn{background:#FFF6C2;border-color:#E0B800}
.hn-qs>li:has(.hn-editor){display:block;padding:0;border:0}
.hn-editor{display:flex;flex-direction:column;gap:8px;background:#fff;border:2px solid var(--indigo);border-radius:16px;padding:12px}
.hn-warn{margin:0;font-weight:800;color:#8A6A00}
.hn-eopts{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.hn-eopts li{display:flex;gap:6px;align-items:center}.hn-eopts input:not([type]),.hn-eopts input[data-he="opt"]{flex:1;border:2px solid var(--line);border-radius:10px;padding:6px 8px;font:inherit}
.hn-tf{display:flex;gap:16px;font-weight:900}
.hn-left pre{white-space:pre-wrap;background:var(--off);border-radius:10px;padding:8px;margin:6px 0 0;font-size:13px}
.hn-left small{color:#B0362F;font-weight:800}
/* 主持大螢幕 */
.hn-big{max-width:1280px;margin:0 auto;padding:16px 24px;gap:16px}
.hn-top{display:flex;gap:16px;align-items:center;font-weight:800;color:var(--muted)}
.hn-brand{font-size:22px;color:#8A5A12}.hn-code-s b{font-size:22px;color:var(--ink);letter-spacing:2px}
.hn-paused{background:#E21B3C;color:#fff;border-radius:999px;padding:2px 10px}
.hn-lobby{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:24px}
@media (max-width:760px){.hn-lobby{grid-template-columns:1fr}}
.hn-join{background:#fff;border-radius:24px;padding:20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;border:2px solid var(--line)}
.hn-join p{margin:0;font-weight:800}
.hn-bigcode{font-size:56px;font-weight:900;letter-spacing:8px;color:var(--indigo-d)}
.qr{max-width:100%;height:auto;border-radius:8px}
.hn-wait{display:flex;flex-direction:column;gap:12px}.hn-wait h2{margin:0}
.hn-players{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;max-height:52vh;overflow:auto}
.hn-players li{display:flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:3px 8px 3px 3px;font-weight:800}
.hn-players li.teamed{border-color:var(--tc)}
.hn-players select{font:inherit;font-size:13px;border-radius:8px}
.hn-kick{border:0;background:var(--off);border-radius:50%;width:24px;height:24px;font-weight:900;line-height:1}
.hn-tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;border-top:2px dashed var(--line);padding-top:12px}
.hn-tools .btn{min-height:44px;font-size:15px}
.hn-pick{display:flex;align-items:center;gap:12px;justify-content:center;background:#FFF4D6;border-radius:18px;padding:8px;font-size:24px;animation:popin .45s}
.hn-intro{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 0}
.hn-intro h1{font-size:44px;margin:0}.hn-intro .hn-horn svg{width:320px;height:210px}
.hn-q{display:flex;flex-direction:column;gap:14px}
.hn-qhead{display:flex;align-items:center;gap:16px;font-weight:900;font-size:20px;color:var(--muted)}
.hn-answered b{font-size:34px;color:var(--ink)}
.hn-timer{--r:1;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--indigo) calc(var(--r)*360deg),var(--off) 0);display:flex;align-items:center;justify-content:center}
.hn-timer b{width:66px;height:66px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900}
.hn-qtext{font-size:clamp(22px,3.2vw,40px);font-weight:900;background:#fff;border-radius:20px;padding:18px 22px;text-align:center;box-shadow:0 4px 0 var(--line);white-space:pre-wrap}
.hn-qtext.small{font-size:19px;padding:12px}
.hn-img{max-height:32vh;max-width:100%;align-self:center;border-radius:14px}
.hn-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hn-opt{display:flex;align-items:center;gap:12px;background:var(--c);color:#fff;border-radius:16px;padding:16px 18px;font-size:clamp(18px,2.2vw,28px);font-weight:900;transition:opacity .3s}
.hn-opt.dim{opacity:.35}.hn-opt.right{outline:5px solid #fff;box-shadow:0 0 0 9px #26890C}
.hn-opt em{font-style:normal;background:rgba(0,0,0,.2);border-radius:999px;padding:0 12px}
.hn-tiles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.hn-tiles span{background:#fff;border:2px solid var(--line);border-radius:12px;padding:10px 16px;font-size:22px;font-weight:900}
.hn-correct-list{display:flex;flex-direction:column;gap:6px}.hn-correct-list span{background:#E6F6EA;border-radius:12px;padding:8px 14px;font-weight:900;font-size:20px}
.hn-bars{display:flex;gap:18px;justify-content:center;align-items:flex-end;height:180px}
.hn-bar{width:90px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;position:relative}
.hn-bar::before{content:"";width:100%;height:var(--h);min-height:6px;background:var(--c);border-radius:10px 10px 0 0;order:1;transition:height .6s}
.hn-bar em{font-style:normal;font-weight:900;font-size:22px;order:0}.hn-bar svg,.hn-bar span{order:2;font-weight:900}
.hn-bar svg path{fill:var(--c)}
.hn-bar.right em::after{content:" ✓";color:#26890C}
.hn-cloud{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;align-items:center;font-weight:900;min-height:120px}
.hn-reveal{background:#E6F6EA;border-left:6px solid #26890C;border-radius:14px;padding:12px 16px;display:flex;flex-direction:column;gap:4px;font-weight:700}
.hn-reveal b{font-size:20px}.hn-reveal blockquote{margin:4px 0;padding-left:10px;border-left:3px solid #9BD3A8;color:var(--muted)}.hn-reveal p{margin:0}
.hn-big .hn-reveal b{font-size:26px}
.hn-board{display:flex;flex-direction:column;gap:12px;max-width:820px;width:100%;margin:0 auto}.hn-board h1{text-align:center;margin:0;font-size:40px}
.hn-rank li{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:6px 12px;font-weight:900}
.hn-rank li>b{width:30px;text-align:center;font-size:20px}.hn-rank em{font-style:normal;font-size:20px}.hn-rank small{color:var(--muted)}
.hn-rank.top li{font-size:22px;animation:popin .5s both}.hn-rank.top li:nth-child(2){animation-delay:.1s}.hn-rank.top li:nth-child(3){animation-delay:.2s}.hn-rank.top li:nth-child(4){animation-delay:.3s}.hn-rank.top li:nth-child(5){animation-delay:.4s}
.hn-movers{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.hn-movers span{background:#FFB020;color:#4A2C00;border-radius:999px;padding:6px 14px;font-weight:900;animation:popin .5s}
.hn-fire{font-style:normal;display:inline-flex;align-items:center;margin-left:6px;background:linear-gradient(#FFB020,#E2461B);color:#fff;border-radius:999px 999px 999px 4px;padding:0 8px;font-size:14px}
.hn-fire.big{font-size:18px;padding:2px 10px}.hn-fire::before{content:"連對 ";font-size:.8em}
.hn-teams{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.hn-teams div{border-left:8px solid var(--tc);background:#fff;border-radius:12px;padding:6px 12px;display:flex;flex-direction:column}.hn-teams span{color:var(--muted);font-weight:700;font-size:14px}
.hn-podium{position:relative;text-align:center;overflow:hidden;padding:10px 0 0}.hn-podium h1{margin:0 0 10px;font-size:36px}
.hn-steps{display:flex;justify-content:center;align-items:flex-end;gap:10px}
.hn-step{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:900;animation:rise .8s both}
.hn-step.r1{animation-delay:1s}.hn-step.r2{animation-delay:.5s}
.hn-step em{font-style:normal;color:var(--muted)}
.hn-block{width:110px;background:linear-gradient(#FFE08A,#E0A100);border-radius:12px 12px 0 0;display:flex;align-items:flex-start;justify-content:center;font-size:40px;color:#fff;padding-top:6px}
.hn-step.r1 .hn-block{height:150px}.hn-step.r2 .hn-block{height:110px;background:linear-gradient(#E9EEF5,#A9B4C2)}.hn-step.r3 .hn-block{height:80px;background:linear-gradient(#F4C9A0,#C07A3E)}
@keyframes rise{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
.hn-confetti{position:absolute;inset:0;pointer-events:none}
.hn-confetti i{position:absolute;top:-20px;left:var(--x);width:10px;height:16px;background:var(--c);border-radius:2px;animation:fall 3.2s linear var(--d) infinite}
@keyframes fall{to{transform:translateY(520px) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){.hn-confetti,.hn-horn i{display:none}.hn-horn.blow svg,.hn-step{animation:none}}
.hn-endtools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.hn-table{width:100%;border-collapse:collapse;font-size:15px}.hn-table th,.hn-table td{border-bottom:1px solid var(--line);padding:6px;text-align:left;vertical-align:top}.hn-table small{display:block;color:var(--muted)}
/* 參加者手機 */
.hn-me{display:flex;align-items:center;gap:8px;background:#fff;border-radius:16px;padding:6px 10px;border:2px solid var(--line);border-left:8px solid var(--tc,var(--line))}
.hn-me span{display:flex;flex-direction:column}.hn-me small{color:var(--muted);font-weight:800}
.hn-energy{background:#EEF0FF;color:var(--indigo-d);border-radius:999px;padding:2px 10px;font-weight:900;font-size:14px}
.hn-qbar{display:flex;align-items:center;justify-content:space-between;font-weight:900;color:var(--muted)}
.hn-qbar .hn-timer{width:60px;height:60px}.hn-qbar .hn-timer b{width:46px;height:46px;font-size:22px}
.hn-pad{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}
.hn-pad.n2{grid-template-columns:1fr}
.hn-pad-b{border:0;border-radius:18px;background:var(--c);min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;font-weight:900;font-size:18px;box-shadow:0 5px 0 rgba(0,0,0,.25)}
.hn-pad-b:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.hn-pad-b.sel{outline:5px solid var(--ink)}.hn-pad-b:disabled{opacity:.2}
.hn-order{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;touch-action:none}
.hn-order li{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px;font-weight:800;user-select:none}
.hn-order li.drag{border-color:var(--indigo);box-shadow:0 6px 16px rgba(0,0,0,.15)}
.hn-grip{font-size:22px;color:var(--muted);cursor:grab}
.hn-fill{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hn-slot{min-width:80px;border-bottom:3px solid var(--ink);text-align:center;padding:6px;font-weight:900;color:var(--muted)}.hn-slot.on{color:var(--ink)}
.hn-tiles.pick .chip-pick{font-size:18px}.hn-tiles.pick .chip-pick:disabled{opacity:.35}
.hn-powers{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.hn-done{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 0}.hn-done h2{margin:0;font-size:30px}.hn-done p{margin:0;font-weight:700}
.hn-score{font-size:26px;font-weight:900}.hn-score small{display:block;font-size:14px;color:var(--muted)}
.hn-result{text-align:center;border-radius:20px;padding:16px;color:#fff}.hn-result h2{margin:0;font-size:32px}.hn-result p{margin:0}
.hn-result.ok{background:#26890C}.hn-result.no{background:#E21B3C}.hn-result.poll{background:var(--indigo)}
.hn-result .hn-score small{color:#fff}
.hn-teamtag{background:var(--tc);color:#fff;border-radius:999px;padding:4px 14px;font-weight:900}
.hn-review li{background:#fff;border:2px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column}
.hn-review li.ok{border-color:#9BD3A8}.hn-review li.no{border-color:#F2A7A7}.hn-review span,.hn-review small{color:var(--muted);font-weight:700}
.center{text-align:center}

/* 我需要救恩（福音朋友，內部 id entry）：溫和的答案揭曉卡（暖色、不用紅色「答錯」） */
.btn.second.entry{background:linear-gradient(135deg,#FFE7C2,#FFC98A);border-bottom-color:#E09A4A;color:#5A3200}
.entry-card{background:#FFF6E8;border:2px solid #F3D9B1;border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;color:#4A3520}
.entry-card.ok{background:#F0FAF3;border-color:#BFE6CC;color:#1F4A30}
.ec-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.ec-head b{font-size:18px}
.ec-life{display:flex;gap:6px}
.ec-life i{font-style:normal;font-size:12px;font-weight:800;background:#fff;border:1px solid #E8CFA6;border-radius:999px;padding:2px 10px;color:#8A5A1E}
.ec-ans{font-weight:800;font-size:15px}
.ec-quote{margin:0;padding:10px 12px;background:#fff;border-left:4px solid #F0B867;border-radius:10px;font-size:16px;line-height:1.7;font-weight:700;color:var(--ink)}
.ec-src{font-size:13px;font-weight:800;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ec-reveal{margin:0;font-size:15px;line-height:1.7;font-weight:700}
.ec-ph{margin:0;font-size:12px;font-weight:800;color:#9A6A2E}
.co-entry .row{flex-wrap:wrap}
.quiz.entry .opt.wrong{background:#FFF1DE;border-color:#F0C68A;color:#6A4415}
.quiz.entry .opt.wrong span{background:#E0A05A}
.co-entry .co-name{flex:1 1 100%;letter-spacing:0;font-size:18px;text-transform:none}
.co-entry .co-code{min-width:0}
.feedback.soft{background:#FFF1DE;color:#6A4415}
/* 人物之旅 */
.btn.journey-btn{width:100%;margin-bottom:10px;background:linear-gradient(135deg,#E9E2FF,#C9B8FF);border-bottom-color:#8E7AD9;color:#2E1F66}
.btn.journey-btn.locked{opacity:.75}
.jrs,.jr-path{display:flex;flex-direction:column;gap:10px}
.jr,.jr-node{display:flex;flex-wrap:wrap;align-items:center;gap:10px;text-align:left;border:2px solid var(--line);border-bottom-width:5px;border-radius:18px;background:#fff;padding:10px 12px}
.jr b,.jr-node b{display:block;font-size:17px;font-weight:900}
.jr small,.jr-node small{display:block;font-size:12px;font-weight:700;color:var(--muted)}
.jr em{font-style:normal;font-size:12px;font-weight:900;color:var(--muted);white-space:nowrap}
.jr-art{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:20px;flex:none;color:#fff;background:var(--rc);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.jr.lock{background:var(--off)}.jr.lock .jr-art{background:#C9C6BD}
.jr.open{border-color:var(--rc)}
.jr.clear em{color:var(--orange-d)}
.jr-why{display:flex!important;align-items:center;gap:4px;color:#8A5A00!important}
.jr .tier-bar span{background:var(--rc)}
.jr-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:var(--off);flex:none}
.jr-node>small{font-weight:900}
.jr-node.now{border-color:var(--indigo-d);background:#EEF0FF}.jr-node.now .jr-n{background:var(--indigo);color:#fff}
.jr-node.done .jr-n{background:var(--orange)}
.jr-node.lock{background:var(--off);color:var(--muted)}
/* F14 福音與救恩副本：大廳最顯眼的入口（暖色）、副本內兩組闖關、人生的奧祕看圖填空 */
.btn.gospel{min-height:96px;background:linear-gradient(135deg,#FFE7C2,#FFC98A);border-bottom:6px solid #E09A4A;color:#5A3200;font-size:24px;box-shadow:0 0 0 3px #FFF1DE,0 0 0 5px #F3D9B1}
.btn.gospel .gs-meta{font-size:12px;font-weight:800;background:#fff;border-radius:999px;padding:2px 12px;margin-top:4px;color:#8A5A1E}
.gs-info{background:#FFF6E8}
.gs-track{display:flex;align-items:center;gap:12px;text-align:left;border:2px solid #F3D9B1;border-bottom-width:6px;border-radius:20px;background:#fff;padding:12px}
.gs-track b{display:block;font-size:20px;font-weight:900}
.gs-track small{display:block;font-size:13px;font-weight:700;color:var(--muted)}
.gs-track em{font-style:normal;font-size:13px;font-weight:900;color:#8A5A1E;white-space:nowrap}
.gs-track.mystery{border-color:#C9D0FF;background:#F6F7FF}.gs-track.mystery em{color:var(--indigo-t)}
.gs-art{width:64px;height:84px;flex:none;border-radius:12px;overflow:hidden;background:var(--bg);border:2px solid var(--line)}
.gs-art img{width:100%;height:100%;object-fit:cover;display:block}
.ms-fig{margin:0;display:flex;justify-content:center}
.ms-img{width:100%;max-width:340px;max-height:46vh;object-fit:contain;display:block;margin:0 auto;border-radius:18px}
.ms-q{font-size:20px;line-height:1.8}
.ms-blank{display:inline-block;min-width:3em;border-bottom:3px solid var(--indigo);margin:0 4px;text-align:center;color:var(--indigo-t)}
.ms-blank.on{background:#FFF1C9;border-radius:6px 6px 0 0;padding:0 6px}
.ms .opt{justify-content:center}
.ms-end .ms-img{max-width:240px}
/* F10 號角對戰：已選擇提示、主辦人作答區、Kahoot 式排行（200 人：小列表用 content-visibility） */
.hn-chosen{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:#fff;border:3px solid var(--indigo);border-radius:16px;padding:10px 12px;font-weight:900}
.hn-chosen small{flex-basis:100%;color:var(--muted);font-weight:800}
.hn-chosen-i{display:inline-flex;align-items:center;gap:4px;background:var(--c);color:#fff;border-radius:999px;padding:2px 10px 2px 6px}
.hn-pad.picked .hn-pad-b{position:relative;cursor:default}
.hn-pad-b.dim{opacity:.25;box-shadow:none}
.hn-pad-b.chosen{outline:6px solid var(--ink);outline-offset:-2px;transform:scale(1.03)}
.hn-check{position:absolute;top:6px;right:10px;font-style:normal;font-size:26px;background:#fff;color:var(--ink);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.hn-hostplay{margin-top:12px;background:var(--tint);border-radius:18px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.hn-hostplay .hn-pad-b{min-height:64px}
.hn-myres{margin:0;font-weight:900;font-size:20px}.hn-myres.ok{color:var(--mint-d)}.hn-myres.no{color:#B3261E}
.hn-ph{border-radius:50%;object-fit:cover;background:var(--tint);flex:none}
.hn-players li.is-host{border-color:var(--orange)}
.hn-players li small,.hn-hosttag{margin-left:4px;font-size:11px;background:var(--orange);color:#23264A;border-radius:999px;padding:0 6px;font-weight:900}
.hn-powers-note{flex-basis:100%;color:var(--muted);font-weight:700}
.hn-kb{display:flex;flex-direction:column;gap:10px;width:100%}
.hn-kb-podium{display:flex;justify-content:center;align-items:flex-end;gap:10px}
.hn-kb-step{display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:900;text-align:center;min-width:0}
.hn-kb-step b{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hn-kb-step em{font-style:normal;color:var(--muted)}
.hn-kb-step .hn-block{width:96px}
.hn-kb-step.r1 .hn-block{height:110px}.hn-kb-step.r2 .hn-block{height:80px;background:linear-gradient(#E9EEF5,#A9B4C2)}.hn-kb-step.r3 .hn-block{height:60px;background:linear-gradient(#F4C9A0,#C07A3E)}
.hn-kb-step.me b{background:var(--orange);border-radius:8px;padding:0 6px}
.hn-kb-mid,.hn-kb-rest{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
.hn-kb-mid li{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-left:6px solid var(--tc,var(--line));border-radius:14px;padding:5px 12px;font-weight:900;font-size:18px}
.hn-kb-mid li>b{width:28px;text-align:center}.hn-kb-mid em,.hn-kb-rest em{font-style:normal}
.hn-kb-rest li{display:flex;align-items:center;gap:6px;background:#fff;border-radius:10px;padding:2px 8px;font-weight:800;font-size:14px;content-visibility:auto;contain-intrinsic-size:auto 30px}
.hn-kb-rest li>b{width:30px;color:var(--muted);text-align:right}
.hn-kb-rest li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hn-kb-rest.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.hn-kb li.me{background:#FFF1C9;border-color:var(--orange);outline:3px solid var(--orange)}
.hn-done h2 small{font-size:16px;color:var(--muted)}
.hn-big .hn-kb-mid li{font-size:22px}
/* F10 大廳分區：對戰／收集／社交；主要玩法大格、次要中小格 */
.hsec{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.hsec-t{margin:4px 2px 0;font-size:15px;font-weight:900;letter-spacing:3px;color:var(--indigo-t);display:flex;align-items:center;gap:8px}
.hsec-t::after{content:"";flex:1;height:2px;background:var(--line);border-radius:2px}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hgrid.c3{grid-template-columns:repeat(3,1fr)}
.hgrid>.btn{margin:0;min-width:0}
.btn.t-big{grid-column:span 2;min-height:86px;font-size:26px}
.btn.t-wide{grid-column:span 2}
.btn.t-mid{min-height:70px;font-size:19px}
.btn.t-sm{min-height:54px;font-size:15px;padding:6px 8px}
.btn.t-sm small{font-size:11px}
.home .daily-row{gap:10px}
.photo{border-radius:50%;object-fit:cover;background:#EEF0FF;display:block}
.photo-card{display:flex;align-items:center;gap:14px}
.photo-up{position:relative;cursor:pointer}
.photo-up:focus-within{outline:3px solid var(--indigo)}
/* ---------- F10b：道具圖示、道具欄（主動／被動）、開場道具教學、新手導覽、登入按鈕 ---------- */
.art.item svg{width:64%;height:64%;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.ic{display:block;flex:none}
.ic-badge{--rc:#4B5BEA;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;color:#fff;background:radial-gradient(circle at 32% 28%,#fff 0,color-mix(in srgb,var(--rc) 55%,#fff) 22%,var(--rc) 58%,color-mix(in srgb,var(--rc) 55%,#23264A) 100%);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--rc)}
.ic-badge .ic{filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.ibar{display:flex;flex-direction:column;gap:6px;background:#F7F5EE;border:2px dashed var(--line);border-radius:16px;padding:8px}
.ibar .tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.ibar .tool{flex-direction:row;align-items:center;text-align:left;padding:6px 8px;min-height:52px}
.tool-t{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.tool-t b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-t small{font-size:10.5px;font-weight:800;color:var(--muted);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tool i.tool-n small{font-size:9px;margin-left:1px}
.tool.empty i.tool-n{background:#9AA1B2}
.ibar-empty{font-size:12px;font-weight:800;color:var(--muted);padding:4px 2px}
.pas-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.pas{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;background:#F1EEFF;color:#5B3FB0;border:1.5px dashed #B7A6EE;border-radius:999px;padding:3px 8px 3px 5px;font-weight:900;font-size:12px}
.pas-tag{font-style:normal;font-size:10px;background:#5B3FB0;color:#fff;border-radius:6px;padding:0 4px;margin-left:2px}
.hn-powers.ibar{flex-direction:row;flex-wrap:wrap}
.hn-powers.ibar .hn-tool{flex:1 1 30%;min-width:96px}
.hn-tool[disabled]{opacity:.45}
.co-ibar .tool[disabled]{opacity:.5}
.d-why{margin:0;font-size:13px;font-weight:800;background:#FFF6E5;border-radius:12px;padding:8px 12px;text-align:left;line-height:1.6}
.d-why b{display:block;color:var(--orange-d);font-size:12px}
.d-why small{display:block;color:var(--indigo-t);font-size:12px}
.pas-li b{display:inline-flex;align-items:center;gap:4px;color:#5B3FB0}
/* 開場道具教學：全螢幕，收起時縮到道具欄 */
.intro-ov{position:fixed;inset:0;z-index:40;background:rgba(35,38,74,.78);display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .2s;cursor:pointer}
.intro-ov.closing{background:transparent;transition:background .45s}
.intro-panel{width:min(440px,100%);max-height:92dvh;overflow:auto;background:var(--bg);border-radius:24px;padding:18px 16px;box-shadow:0 12px 40px rgba(0,0,0,.35);transform-origin:center}
.intro-h{font-weight:900;font-size:20px;text-align:center;margin-bottom:12px}
.intro-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.intro-list li{display:flex;align-items:center;gap:14px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 12px}
.intro-list li.pas{border-style:dashed;background:#FBFAFF}
.intro-list div>b{display:block;font-size:16px}
.intro-list div>span{display:block;font-weight:800;font-size:14px;color:var(--muted);line-height:1.5}
.intro-foot{text-align:center;font-weight:800;font-size:13px;color:var(--muted);margin-top:12px}
.intro-land{animation:land .6s ease-out}
@keyframes land{0%{box-shadow:0 0 0 0 rgba(255,176,32,.9)}100%{box-shadow:0 0 0 14px rgba(255,176,32,0)}}
/* 新手導覽：聚光燈 */
.tour-ov{position:fixed;inset:0;z-index:45}
.tour-spot{position:fixed;border-radius:20px;box-shadow:0 0 0 9999px rgba(20,22,44,.72),0 0 0 3px #FFD45C inset;transition:all .3s ease;pointer-events:none}
.tour-tip{position:fixed;background:#fff;border-radius:18px;padding:14px 14px 12px;box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:6px;transition:top .3s,left .3s}
.tour-tip b{font-size:18px}
.tour-tip p{margin:0;font-weight:800;font-size:14px;line-height:1.6;color:var(--muted)}
.tour-n{font-weight:900;color:var(--indigo-t);font-size:12px}
.tour-lock{align-self:flex-start;font-weight:900;font-size:13px;background:#FFF0D6;color:#8A5A00;border-radius:999px;padding:2px 10px}
.tour-lock.ok{background:#E3F7EA;color:#0F5A30}
.tour-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.tour-btns .btn{flex:none;min-height:38px}
/* 登入按鈕：配合 Google 官方按鈕（large、pill）的外型；F10c：首頁一起擺的按鈕（含 LINE）都用同一種白底灰框，左圖示右文字 */
.signin{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.signin .gsi{width:100%;max-width:320px;min-height:40px}
.sbtn{position:relative;width:100%;max-width:320px;height:40px;border-radius:20px;border:1px solid #DADCE0;background:#fff;color:#3C4043;font-family:"Google Sans",Roboto,"Noto Sans TC","PingFang TC","Microsoft JhengHei",Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:.25px;display:flex;align-items:center;justify-content:center;padding:0 12px 0 44px;cursor:pointer;transition:background .2s,box-shadow .2s}
.sbtn:hover{box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15)}
.sbtn:active{background:#F1F3F4}
.sbtn-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.sbtn-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbtn-ic img{display:block;width:20px;height:20px}
.sbtn-ic .ic{color:#5F6368}
.login-row .sbtn{width:auto;padding-right:16px}
/* F10d：LINE 按鈕用 LINE 官方綠底白字（品牌規範 #06C755、標誌與文字間細分隔線、滑過加 10% 黑、按下 30% 黑），外型仍和 Google 按鈕一致 */
.sbtn.sbtn-line{background:#06C755;border-color:#06C755;color:#fff}
.sbtn.sbtn-line::before{content:"";position:absolute;left:38px;top:8px;bottom:8px;width:1px;background:rgba(0,0,0,.08)}
.sbtn.sbtn-line:hover{background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1)) #06C755}
.sbtn.sbtn-line:active{background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)) #06C755}
@media (prefers-reduced-motion:reduce){.tour-spot,.tour-tip{transition:none}}
.set-btn{flex-direction:row;gap:6px;align-self:center;padding:4px 16px}
.set-btn small{margin-left:4px}
.settings{display:flex;flex-direction:column;gap:12px;padding:14px;text-align:left}
.set-row{display:flex;flex-direction:column;gap:6px}
.set-row small{color:var(--muted);font-weight:800;font-size:12px}
.settings-pop{display:flex;flex-direction:column;gap:12px}

/* F11 寫信給開發者、站內信、停權說明、檢舉頭像 */
.fb-body{min-height:120px;resize:vertical;font:inherit;line-height:1.6}
.mail-item{display:block;text-align:left;margin-bottom:10px}
.mail-h{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.mail-h small{color:#6b7280}
.mail-body{white-space:pre-wrap;margin:6px 0 0;line-height:1.6}
.mail-reply{margin-top:8px;padding:8px 10px;border-radius:12px;background:#EEF6FF}
.mail-reply small{color:#3b5b8a;font-weight:700}
.mail-reply p{white-space:pre-wrap;margin:4px 0 0;line-height:1.6}
.ban-pop .guest-text{background:#FDECEC}
.photo-wait{color:#9a5b00;font-weight:700}
.card-pop .report{color:#9b1c1c}
.fb-body{height:auto;padding:12px 16px}
/* F12 站內信、留言板、小排、光環、人物組合、小排對戰 */
.btn{position:relative}
.mail-dot{position:absolute;top:6px;right:8px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#E5484D;color:#fff;font-style:normal;font-size:12px;font-weight:900;line-height:20px;text-align:center}
.mails,.posts,.replies,.auras,.tasks,.battles,.combos,.rank-list,.aura-links,.perk{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pm-item,.reply,.aura,.tasks li,.battle,.combo{display:flex;gap:10px;align-items:flex-start;background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 12px}
.pm-item.new{border-color:var(--indigo);background:var(--tint)}
.pm-item p,.reply p{margin:4px 0;white-space:pre-wrap;word-break:break-word}
.pm-item small,.reply small,.aura small,.tasks small,.battle small,.combo small,.rank-list small{display:block;color:var(--muted);font-size:12.5px;line-height:1.45}
.row-s{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.q-btn.on{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.post-row{width:100%;text-align:left;background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px 12px;font:inherit;color:var(--ink)}
.post-row b{display:block}.post-row small{color:var(--muted)}
.post h2{margin:0 0 6px;font-size:19px}.post-body{white-space:pre-wrap;word-break:break-word}
.who-line{display:flex;gap:8px;align-items:center}.who-line small{color:var(--muted)}
.aura.locked{opacity:.55}.aura.on{border-color:#FFB020;background:#FFF6DD}
.aura .story,.combo .story{font-style:normal;color:#7A7E96}
.aura-tag{display:inline-block;background:#FFF6DD;border:1px solid #FFB020;border-radius:999px;padding:0 8px;margin-left:4px;font-size:11.5px;color:#8A5A00}
.sq-tag{color:var(--indigo-t);font-weight:900;margin:0 2px}
.tasks .done{color:var(--mint-d);font-size:13px}
.tasks .xp,.sec .xp{height:8px;border-radius:999px;background:var(--off);overflow:hidden;margin-top:4px}
.tasks .xp div,.sec .xp div{height:100%;background:var(--mint)}
.perk li{font-size:14px;padding:0}
.bt-result{display:grid;gap:8px;margin-top:6px}.bt-side ol{margin:4px 0 0;padding-left:20px;font-size:13.5px}
.combo.done{border-color:var(--mint);background:#EAFBF6}.combo .miss{color:#B0B3C3}.combo .got{color:var(--mint-d);font-weight:900}
.combo-n{font-size:15px;white-space:nowrap}
.list-btns{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.hn-combo{display:block;font-size:12px;color:#8A5A00}
/* F10d 號角結算頁：頒獎台在小螢幕縮小、所有文字正確換行不超出、題目回顧可展開卡片、200 人排名收在捲動框 */
.hn-podium,.hn-kb,.hn-endcard,.hn-done{min-width:0;max-width:100%}
.hn-done h2,.hn-done p{overflow-wrap:anywhere;word-break:normal;line-break:strict}
.hn-steps{gap:clamp(4px,2vw,10px)}
.hn-step{min-width:0;flex:0 1 auto}
.hn-step b,.hn-kb-step b{max-width:min(120px,28vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hn-block{width:clamp(76px,26vw,110px)}
.hn-kb-step .hn-block{width:clamp(70px,24vw,96px)}
.hn-endcard{padding:14px;display:flex;flex-direction:column;gap:10px}
.hn-endhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.hn-endhead b{font-size:20px}.hn-endhead small{color:var(--muted);font-weight:800}
.hn-kb-mid li{min-width:0}.hn-kb-mid li span.grow,.hn-kb-rest li span.grow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hn-kb-mid li em,.hn-kb-rest li em{flex:none;font-variant-numeric:tabular-nums}
.hn-endcard .hn-kb-rest{max-height:min(60vh,520px);overflow-y:auto;overscroll-behavior:contain;padding:4px;border-radius:12px;background:var(--off)}
.hn-rv{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.hn-rv-card{background:#fff;border:2px solid var(--line);border-left-width:6px;border-radius:14px;overflow:hidden;min-width:0}
.hn-rv-card.ok{border-left-color:#26890C}.hn-rv-card.no{border-left-color:#E21B3C}.hn-rv-card.none{border-left-color:#A9B4C2}.hn-rv-card.poll{border-left-color:var(--indigo)}.hn-rv-card.skip{border-left-color:var(--line);opacity:.8}
.hn-rv-card summary{list-style:none;display:grid;grid-template-columns:28px minmax(0,1fr) 62px;align-items:center;gap:10px;padding:10px 12px;cursor:pointer}
.hn-rv-card summary::-webkit-details-marker{display:none}
.hn-rv-card summary:focus-visible{outline:3px solid var(--indigo);outline-offset:-3px}
.hn-rv-no{width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--indigo-d);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:14px}
.hn-rv-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.hn-rv-q{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hn-rv-a{color:#1E6B0A;font-weight:800;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;line-break:strict}
.hn-rv-card.poll .hn-rv-a{color:var(--muted)}
.hn-rv-a i{font-style:normal;margin-right:4px}
.hn-rv-mark{align-self:flex-start;font-size:12px;font-weight:900;border-radius:999px;padding:0 8px;background:var(--off);color:var(--muted)}
.hn-rv-card.ok .hn-rv-mark{background:#E3F4DF;color:#1E6B0A}.hn-rv-card.no .hn-rv-mark{background:#FDE4E8;color:#B0122E}
.hn-rv-rate{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-variant-numeric:tabular-nums}
.hn-rv-rate b{font-size:15px}.hn-rv-rate.na b{color:var(--muted)}
.hn-rv-rate i{display:block;width:100%;height:6px;border-radius:999px;background:linear-gradient(#26890C,#26890C) 0 0/var(--w) 100% no-repeat,var(--off)}
.hn-rv-card[open] summary{border-bottom:1px dashed var(--line)}
.hn-rv-card[open] .hn-rv-q{display:none}
.hn-rv-card[open] .hn-rv-a{-webkit-line-clamp:unset;display:block}
.hn-rv-body{padding:10px 14px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.hn-rv-full{margin:0;font-weight:900;font-size:17px;line-height:1.55}
.hn-rv-body dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;font-size:14px}
.hn-rv-body dt{color:var(--muted);font-weight:800}.hn-rv-body dd{margin:0;font-weight:700}
.hn-rv-body blockquote{margin:0;padding:8px 12px;border-left:4px solid var(--orange);background:#FFF8E6;border-radius:8px;font-size:15px;line-height:1.6}
.hn-rv-note{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.hn-rv-full,.hn-rv-body dd,.hn-rv-body blockquote,.hn-rv-note,.hn-endhead{overflow-wrap:anywhere;word-break:normal;line-break:strict}
.hn-big .hn-rv-card summary{grid-template-columns:34px minmax(0,1fr) 90px;padding:12px 16px}
.hn-big .hn-rv-q{font-size:18px}.hn-big .hn-rv-a{font-size:16px}.hn-big .hn-rv-rate b{font-size:18px}
@media (min-width:900px){.hn-big .hn-rv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.hn-endcard .hn-kb-rest li{content-visibility:visible}