@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('vendor/fonts/IBMPlexMono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('vendor/fonts/IBMPlexMono-600.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('vendor/fonts/Sora-600.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('vendor/fonts/Sora-600.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('vendor/fonts/Sora-700.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('vendor/fonts/Sora-700.woff2') format('woff2')}
:root{
  --paper:#F6F1E7; --paper2:#FCFAF3; --oat:#E7DDCB; --oat2:#CDBFA6;
  --ink:#27231C; --ink2:#6E6454; --line:rgba(39,35,28,.16); --hair:rgba(39,35,28,.08);
  --brand:#C1502E; --safe:#2E7D52; --warn:#B9862E; --bad:#B04E3A;
  --mono:'IBM Plex Mono',monospace; --sans:'Noto Sans TC','PingFang TC','Microsoft JhengHei','Sora',system-ui,sans-serif; --geo:'Sora','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  --shadow:0 10px 28px rgba(39,35,28,.14),0 2px 6px rgba(39,35,28,.08);
  --frame:2px solid rgba(39,35,28,.22);   /* 面板粗框（原 1px 淡線太輕，字小又看不清） */
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--sans);color:var(--ink);background-color:var(--paper);
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:26px 26px;overflow:hidden;min-width:1140px;user-select:none;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
svg{display:block}

/* ---------- top bar ---------- */
#topbar{height:68px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:var(--frame);background:rgba(246,241,231,.92);backdrop-filter:blur(6px);position:relative;z-index:30}
.logo{display:flex;align-items:center;gap:9px;padding-right:13px;border-right:1px solid var(--line)}
.logo b{font-family:var(--geo);font-weight:700;font-size:16px;letter-spacing:.1em}
.logo span{font-family:var(--mono);font-size:9px;color:var(--ink2);letter-spacing:.08em;margin-top:3px}
.hchip{display:flex;align-items:center;gap:9px;height:44px;padding:0 14px;background:var(--paper2);border:var(--frame);border-radius:12px;font-family:var(--mono);font-size:16px;font-weight:600}
.hchip svg{color:var(--ink2);flex:none}
.hchip .big{font-size:20px}
#chipMoney.pulse{animation:pulse .4s}
@keyframes pulse{40%{transform:scale(1.08)}}
.minibar{width:56px;height:6px;border-radius:3px;background:var(--oat);overflow:hidden}
.minibar i{display:block;height:100%;border-radius:3px;background:var(--safe);width:50%;transition:width .4s,background .3s}
#dayWrap{display:flex;flex-direction:column;gap:5px;justify-content:center;min-width:300px}
#dayWrap .row{display:flex;align-items:baseline;gap:9px;font-family:var(--mono);font-size:15px;font-weight:700}
#dayWrap .row small{font-family:var(--mono);font-size:14px;color:var(--ink2);font-weight:600}
#dayFill{width:100%;height:6px;border-radius:3px;background:var(--oat);overflow:hidden}
#dayFill i{display:block;height:100%;width:0;background:var(--brand);transition:width .4s linear} #dayFill.late i{background:var(--warn)} #dayFill[hidden]{display:none}
.spacer{flex:1}
.seg{position:relative;display:flex;background:var(--oat);border-radius:8px;padding:3px;border:1px solid var(--line)}
.seg .thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(33.333% - 2px);background:var(--ink);border-radius:6px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.seg button{position:relative;z-index:1;width:42px;height:32px;display:grid;place-items:center;color:var(--ink2);font-family:var(--mono);font-size:13.5px;font-weight:700;transition:color .25s}
.seg button.on{color:var(--paper2)}
.brandbtn{display:flex;align-items:center;gap:8px;padding:8px 12px;border:var(--frame);border-radius:10px;background:var(--paper2);font-family:var(--mono);font-size:13px}
.brandbtn:hover{border-color:var(--ink2)}
.brandbtn .sw{width:15px;height:15px;border-radius:50%;background:var(--brand);border:2px solid var(--paper2);box-shadow:0 0 0 1px var(--line)}
.tbtn{display:flex;align-items:center;gap:8px;font-family:var(--geo);font-weight:700;font-size:14.5px;padding:10px 14px;border-radius:10px;border:var(--frame);background:var(--paper2)}
.tbtn:hover{border-color:var(--ink2)}
.tbtn.on{background:var(--ink);color:var(--paper2);border-color:var(--ink)}
.tbtn.icon{padding:8px 9px}

/* ---------- brand popover ---------- */
#brandPop{position:absolute;top:64px;right:170px;background:var(--paper2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:14px;width:250px;z-index:60;display:none}
#brandPop.open{display:block;animation:pop .18s cubic-bezier(.22,1,.36,1)}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}}
#brandPop h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--ink2);margin-bottom:10px}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:11px}
.swatches button{width:26px;height:26px;border-radius:50%;border:2px solid var(--paper2);box-shadow:0 0 0 1px var(--line);transition:transform .15s}
.swatches button:hover{transform:scale(1.15)}
.swatches button.on{box-shadow:0 0 0 2px var(--ink)}
.customrow{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink2)}
.customrow input[type=color]{width:34px;height:26px;border:1px solid var(--line);border-radius:6px;background:none;padding:2px;cursor:pointer}

/* ---------- layout ---------- */
#main{display:flex;height:calc(100vh - 58px)}
#shop{width:242px;flex:none;border-right:1px solid var(--line);background:rgba(252,250,243,.78);overflow-y:auto;padding:12px 12px 20px;transition:margin-left .4s cubic-bezier(.22,1,.36,1)}
#shop.hidden{margin-left:-242px}
#shop::-webkit-scrollbar{width:8px}#shop::-webkit-scrollbar-thumb{background:var(--oat2);border-radius:4px}
.shead{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--ink2);margin:4px 2px 9px}
.shead.later{margin-top:16px}
#styleGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.styleCard{border:1px solid var(--line);border-radius:9px;padding:8px 9px 9px;text-align:left;background:var(--paper2);transition:border-color .2s}
.styleCard:hover{border-color:var(--ink2)}
.styleCard.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.styleCard .sn{font-family:var(--geo);font-weight:700;font-size:11.5px}
.styleCard .dots{display:flex;gap:4px;margin-top:6px}
.styleCard .dots i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(39,35,28,.22)}
.bcard{display:flex;align-items:center;gap:10px;width:100%;padding:6px;border-radius:9px;border:1px solid transparent;text-align:left;transition:all .15s;margin-bottom:3px}
.bcard:hover{background:var(--paper2);border-color:var(--line)}
.bcard.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--paper2))}
.bcard.poor{opacity:.45}
.bcard.locked{opacity:.4;filter:grayscale(.75)}
.bcard .mt em.lock{color:var(--bad)}
#tasks .tsum.warn{color:var(--bad)}
.bcard canvas{width:54px;height:40px;flex:none;background:var(--paper2);border:1px solid var(--line);border-radius:6px}
.bcard .nm{font-family:var(--geo);font-weight:700;font-size:14px;line-height:1.2}
.bcard .mt{font-family:var(--mono);font-size:11.5px;color:var(--ink2);margin-top:3px}
.bcard .mt em{font-style:normal;color:var(--safe)}
.snote{font-family:var(--mono);font-size:11.5px;color:var(--ink2);line-height:1.7;margin:14px 4px 0;padding-top:10px;border-top:1px dashed var(--line)}

/* ---------- stage ---------- */
#stage{flex:1;position:relative;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hud{position:absolute;background:var(--paper2);border:var(--frame);border-radius:16px;box-shadow:0 8px 22px rgba(39,35,28,.12)}
#wishCard{left:16px;top:16px;width:290px;padding:13px 15px;display:flex;gap:12px;align-items:flex-start}
#wishCard .av{width:38px;height:38px;border-radius:50%;background:var(--oat);display:grid;place-items:center;font-weight:700;font-size:16px;flex:none;margin-top:1px}
#wishCard .wt{font-size:14.5px;line-height:1.5;color:var(--ink)}
#wishCard .wn{font-family:var(--geo);font-weight:700;font-size:13.5px;margin-bottom:2px}
#wishCard .wr{margin-left:auto;font-family:var(--mono);font-size:14px;color:var(--safe);flex:none;font-weight:700}
#wishCard.done{border-color:var(--safe)}
#wishCard.done .wt{opacity:.55}
#wishCard.done .wr::after{content:' ✓'}
#todayCard{left:16px;bottom:16px;width:236px;padding:14px 16px}
#todayCard .lab{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink2);display:flex;justify-content:space-between;margin-bottom:8px}
.trow{display:flex;justify-content:space-between;font-size:15px;padding:3px 0;color:var(--ink2)}
.trow b{font-family:var(--mono);font-weight:600;color:var(--ink)}
#ctrlHint{right:16px;bottom:16px;padding:12px 15px;font-family:var(--mono);font-size:12.5px;color:var(--ink2);line-height:1.9}
#ctrlHint b{color:var(--ink);font-weight:600}
/* 生涯入口暫時下架（使用者決定：先做一關一關的關卡）。程式與玩家存檔都留著，拿掉 html.noCareer 就回來 */
html.noCareer #btnSolo,html.noCareer #btnNewCareer,html.noCareer #saveNote{display:none}
html.noCareer #btnChallenge{order:-1}
html.noCareer #btnLvCareer{display:none}
/* 手機的關卡 HUD：頂列一排（倒數／分數／隊伍／設定）、票帶在下、教學卡再下一層；視角鈕與修飾符收掉 */
html.lvHud[data-layout="compact"] #topbar{height:auto;min-height:0;padding:calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left));gap:6px;row-gap:6px}
html.lvHud[data-layout="compact"] #topbar .spacer{flex:1 1 auto;height:auto;order:0}
html.lvHud[data-layout="compact"] #hudNext,html.lvHud[data-layout="compact"] #chipMod,html.lvHud[data-layout="compact"] #chipCritic,html.lvHud[data-layout="compact"] #chipStreak,html.lvHud[data-layout="compact"] #viewSeg{display:none}
html.lvHud[data-layout="compact"] #chipScore,html.lvHud[data-layout="compact"] #dayWrap{padding:5px 10px;border-radius:12px}
html.lvHud[data-layout="compact"] #chipScore .big{font-size:17px} html.lvHud[data-layout="compact"] #dayWrap .row{font-size:16px}
html.lvHud[data-layout="compact"] #tasks.strip{top:calc(60px + env(safe-area-inset-top))}
/* 票帶蓋到自己的角色或剛點的目標：整條淡出（滑鼠移上去恢復）；3D 畫面也整體往下讓出票帶的高度（scene.setTopShift） */
html.lvHud #tasks.strip .tkt{transition:opacity .2s,transform .12s} html.lvHud #tasks.strip.peek .tkt{opacity:.28} html.lvHud #tasks.strip.peek .tkt:hover,html.lvHud #tasks.strip.peek .tkt:focus-visible{opacity:1}
html.lvHud[data-layout="compact"] #tut{left:8px;right:8px;top:calc(152px + env(safe-area-inset-top));bottom:auto;width:auto;max-width:none;padding:6px 10px;text-align:center}
html.lvHud[data-layout="compact"] #hint{top:auto;bottom:calc(152px + env(safe-area-inset-bottom))}
/* 手機操作：左下搖桿＋右下互動鈕（只在 compact 出現）。尺寸與位置含 iOS 安全區 */
#touch{position:absolute;inset:0;pointer-events:none;z-index:9}
#stick{position:absolute;left:calc(16px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));width:124px;height:124px;border-radius:50%;background:rgba(252,250,243,.34);border:2px solid rgba(39,35,28,.18);pointer-events:auto;touch-action:none;transition:background .15s}
#stick.on{background:rgba(252,250,243,.5)}
#stickKnob{position:absolute;left:50%;top:50%;width:54px;height:54px;border-radius:50%;background:rgba(252,250,243,.92);border:2px solid rgba(39,35,28,.22);box-shadow:0 4px 12px rgba(20,16,10,.25);transform:translate(-50%,-50%);pointer-events:none}
#btnAct{position:absolute;right:calc(18px + env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));width:84px;height:84px;border-radius:50%;background:var(--brand);color:var(--paper2);border:2px solid rgba(255,255,255,.35);box-shadow:0 6px 18px rgba(20,16,10,.3);pointer-events:auto;touch-action:none;display:grid;place-items:center;gap:1px;font-weight:700;font-size:12.5px;transition:transform .1s}
#btnAct.on{transform:scale(.93)}
html[data-layout="compact"].wide #stick{width:112px;height:112px} html[data-layout="compact"].wide #btnAct{width:78px;height:78px}
/* 關卡的訂單票：頂部中央橫帶，一張票只有票號、圖、品名、耐心條——沒有句子 */
html.lvHud #tasks.strip{position:absolute;top:62px;left:50%;right:auto;transform:translateX(-50%);width:auto;max-width:calc(100% - 32px);max-height:none;overflow:visible;background:none;border:0;box-shadow:none;padding:0;display:flex;gap:8px;align-items:flex-start;z-index:7}
.tkt{width:112px;min-height:84px;background:var(--paper2);border:var(--frame);border-radius:14px;padding:6px 8px 7px;display:grid;justify-items:center;gap:3px;box-shadow:0 6px 18px rgba(20,16,10,.18);cursor:pointer;transition:transform .12s}
.tkt:active,.tkt.hit{transform:scale(.96)}
.tkt .tkTop{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11.5px;color:var(--ink2);min-height:13px}
.tkt .tkTop .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.tkt img{width:38px;height:38px} .tkt .tkIco{width:38px;height:38px;display:grid;place-items:center;color:var(--ink2)}
.tkt .tkN{font-size:13px;line-height:1.15;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tkt .tpat{width:100%;height:6px;border-radius:3px;background:var(--oat);overflow:hidden;margin-top:1px} .tkt .tpat i{display:block;height:100%;background:var(--safe)}
.tkt.urgent{border-color:var(--bad)} .tkt.urgent .tpat i{background:var(--bad)}
.tkt.claimed{box-shadow:0 6px 18px rgba(20,16,10,.18),0 0 0 2px color-mix(in srgb,var(--brand) 55%,transparent)}
.tkt.more,.tkt.warn{width:auto;min-width:62px;min-height:0;align-content:center;padding:10px 12px;font-family:var(--mono);font-weight:700;color:var(--ink2)}
.tkt.warn{border-color:var(--warn)}
html[data-layout="compact"] .tkt{width:92px;min-height:74px;padding:5px 6px 6px} html[data-layout="compact"] .tkt img,html[data-layout="compact"] .tkt .tkIco{width:30px;height:30px} html[data-layout="compact"] .tkt .tkN{font-size:12px}
html[data-layout="compact"] html.lvHud #tasks.strip,html.lvHud[data-layout="compact"] #tasks.strip{top:calc(52px + env(safe-area-inset-top));gap:6px}
/* 關卡（合作動作關）的營業 HUD：畫面只永久顯示三件事——時間、分數／星、訂單。頂欄變透明浮層，經營與佈置元素退出 */
html.lvHud #topbar{background:transparent;border-bottom:0;backdrop-filter:none;height:56px;position:absolute;left:0;right:0;top:0;z-index:30;pointer-events:none}
html.lvHud #topbar > *{pointer-events:auto}
html.lvHud #btnCamAll.on{background:var(--ink);color:var(--paper2);border-color:var(--ink)}
html.lvHud .logo,html.lvHud #hudDay,html.lvHud #speedSeg,html.lvHud #btnHeat,html.lvHud #btnDocs,html.lvHud #btnAch,html.lvHud #btnSkills,html.lvHud #btnUndo,html.lvHud #brandBtn,html.lvHud #btnBuild,html.lvHud #ctrlHint{display:none}
html.lvHud #dayWrap .row{font-size:20px;font-family:var(--mono);font-weight:700}
html.lvHud #chipScore,html.lvHud #dayWrap,html.lvHud #chipMod,html.lvHud #chipCritic,html.lvHud #chipStreak{background:rgba(252,250,243,.9);border:var(--frame);border-radius:14px;padding:6px 12px;backdrop-filter:blur(6px)}
html.lvHud #main{height:100vh;height:100dvh}   /* 頂欄變浮層：舞台吃滿整個視窗（dvh 讓 iOS 網址列收合時不跳動） */
#stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,0) 42%,rgba(12,10,8,.18) 72%,rgba(8,7,6,.46) 100%)}   /* 舞台暗角：沒有 postprocessing 套件時最划算的聚焦手段 */
html[data-layout="compact"] #stage::after{background:radial-gradient(ellipse at 50% 46%,rgba(0,0,0,0) 46%,rgba(12,10,8,.12) 74%,rgba(8,7,6,.3) 100%)}   /* 手機暗角要輕，不然搖桿那一角看不清 */
#hint{z-index:8;position:absolute;top:14px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);font-size:16px;padding:12px 20px;border-radius:24px;box-shadow:var(--shadow);opacity:0;transition:opacity .3s;pointer-events:none;max-width:64%;text-align:center}
#hint.show{opacity:1}
#hint b{color:#E8C7A8}

/* ---------- selection panel ---------- */
#selPanel{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:none;background:var(--paper2);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:11px 15px 13px;z-index:6;min-width:400px}
#selPanel.show{display:block;animation:pop .18s cubic-bezier(.22,1,.36,1)}
.spTop{display:flex;align-items:center;gap:10px;margin-bottom:9px}
#selName{font-family:var(--geo);font-weight:700;font-size:13.5px}
.spTop .gap{flex:1}
.spTop button{height:28px;border-radius:7px;display:flex;align-items:center;gap:5px;padding:0 10px;font-family:var(--mono);font-size:11px;font-weight:600;border:1px solid var(--line);background:var(--paper)}
.spTop button:hover{border-color:var(--ink2)}
.spTop button.sell:hover{border-color:var(--safe);color:var(--safe)}
.spRow{display:flex;align-items:center;gap:9px;margin-top:7px}
.spRow label{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink2);width:32px;flex:none}
.sws{display:flex;gap:5px;flex-wrap:wrap}
.sws button{width:21px;height:21px;border-radius:50%;border:2px solid var(--paper2);box-shadow:0 0 0 1px var(--line);transition:transform .12s}
.sws button:hover{transform:scale(1.18)}
.sws button.on{box-shadow:0 0 0 2px var(--ink)}
.spNote{font-family:var(--mono);font-size:10px;color:var(--ink2);margin-top:4px}

/* ---------- toasts ---------- */
#toasts{pointer-events:none;position:fixed;top:70px;right:18px;z-index:200;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper2);font-size:15px;padding:11px 16px;border-radius:12px;box-shadow:var(--shadow);animation:tin .3s cubic-bezier(.22,1,.36,1)}
.toast .d{width:8px;height:8px;border-radius:50%;background:var(--safe);flex:none}
.toast.bad .d{background:var(--bad)} .toast.brand .d{background:var(--brand)} .toast.warn .d{background:var(--warn)}
.toast.out{opacity:0;transform:translateX(10px);transition:all .3s}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;background:rgba(31,27,21,.5);z-index:100;display:none;align-items:center;justify-content:center}
.modal.open{display:flex}
.mcard{width:480px;background:var(--paper2);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.4);padding:28px 30px 26px;animation:mIn .35s cubic-bezier(.22,1,.36,1);max-height:88vh;overflow-y:auto}
@keyframes mIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
.mcard h2{font-family:var(--geo);font-weight:700;font-size:26px;letter-spacing:.04em}
.mcard .sub{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink2);margin:4px 0 18px}
.rules{display:flex;flex-direction:column;gap:11px;margin-bottom:20px}
.rule{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.65}
.rule .ic{width:32px;height:32px;flex:none;border-radius:9px;background:var(--oat);display:grid;place-items:center;color:var(--ink)}
.dtable{border-top:1px solid var(--line);margin-bottom:18px}
.dtable .r{display:flex;justify-content:space-between;align-items:baseline;padding:9px 2px;border-bottom:1px dashed var(--line);font-size:15px;color:var(--ink2)}
.dtable .r b{font-family:var(--mono);font-weight:600;color:var(--ink);font-size:16px}
.dtable .r.grand{border-bottom:none;border-top:2px solid var(--ink);margin-top:2px;padding-top:11px}
.dtable .r.grand span,.dtable .r.grand b{color:var(--ink);font-family:var(--geo);font-weight:700;font-size:16px}
.dtable .r.grand b.neg{color:var(--bad)} .dtable .r.grand b.pos{color:var(--safe)}
.note{font-size:14.5px;color:var(--ink);background:var(--paper);border-left:3px solid var(--brand);padding:8px 11px;border-radius:0 8px 8px 0;margin-bottom:8px;line-height:1.65}
.mcard .foot{display:flex;justify-content:flex-end;gap:10px;align-items:center}
.starline{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--ink2);margin-bottom:14px}

/* ---------- 設計筆記（說明分頁） ---------- */
#modalDocs{z-index:120}
.doccard{width:min(1020px,94vw);height:min(700px,90vh);padding:0;display:flex;position:relative;overflow:hidden}
.docnav{width:212px;flex:none;border-right:1px solid var(--line);background:var(--paper);padding:20px 12px 16px;display:flex;flex-direction:column;gap:2px}
.docnav .dn-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--ink2);margin:0 8px 10px;line-height:1.7}
.docnav .dn-sec{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--ink2);margin:14px 8px 6px;opacity:.7}
.docnav button{text-align:left;padding:8px 10px;border-radius:8px;font-family:var(--geo);font-weight:700;font-size:12.5px;color:var(--ink2);display:flex;gap:8px;align-items:center;line-height:1.4}
.docnav button:hover{background:var(--paper2);color:var(--ink)}
.docnav button.on{background:var(--ink);color:var(--paper2)}
.docnav button i{font-style:normal;font-family:var(--mono);font-size:10px;opacity:.6;flex:none}
.docbody{flex:1;overflow-y:auto;padding:30px 36px 46px;background:var(--paper2)}
.docbody::-webkit-scrollbar{width:9px}.docbody::-webkit-scrollbar-thumb{background:var(--oat2);border-radius:5px}
.docpage{display:none;max-width:660px}
.docpage.on{display:block;animation:pop .22s cubic-bezier(.22,1,.36,1)}
.docpage h3{font-family:var(--geo);font-weight:700;font-size:22px;letter-spacing:.03em;margin-bottom:2px}
.docpage .dsub{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink2);margin-bottom:18px}
.docpage h4{font-family:var(--geo);font-weight:700;font-size:14px;margin:22px 0 6px;display:flex;align-items:center;gap:8px}
.docpage h4::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
.docpage p{font-size:13.5px;line-height:1.95;margin:8px 0;color:var(--ink)}
.docpage p b{font-weight:700}
.docpage ul,.docpage ol{margin:8px 0 8px 0;padding-left:0;list-style:none}
.docpage li{font-size:13px;line-height:1.85;padding-left:20px;position:relative;margin:4px 0}
.docpage ul.plain li::before{content:'·';position:absolute;left:6px;color:var(--ink2);font-weight:700}
.docpage ul.good li::before{content:'✓';position:absolute;left:2px;color:var(--safe);font-weight:700}
.docpage ul.bad li::before{content:'✕';position:absolute;left:2px;color:var(--bad);font-weight:700}
.docpage ol{counter-reset:dli}
.docpage ol li{counter-increment:dli;padding-left:26px}
.docpage ol li::before{content:counter(dli);position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--oat);font-family:var(--mono);font-size:10px;font-weight:600;display:grid;place-items:center;color:var(--ink)}
.docpage table{width:100%;border-collapse:collapse;font-size:12.5px;margin:12px 0}
.docpage th{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--ink2);text-align:left;padding:7px 8px;border-bottom:2px solid var(--ink);font-weight:600}
.docpage td{padding:8px 8px;border-bottom:1px dashed var(--line);vertical-align:top;line-height:1.7}
.docpage td b{font-family:var(--mono);font-size:12px}
.formula{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--brand);padding:11px 15px;border-radius:0 10px 10px 0;font-family:var(--mono);font-size:12px;line-height:2;margin:12px 0;color:var(--ink)}
.formula small{display:block;color:var(--ink2);font-size:10px;line-height:1.7}
.kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--oat2);border-bottom-width:2.5px;border-radius:5px;padding:1px 6px;background:var(--paper2);white-space:nowrap}
.tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;padding:2px 8px;border-radius:9px;background:var(--oat);color:var(--ink);margin:0 2px}
.callout{background:var(--paper);border:1px dashed var(--oat2);border-radius:10px;padding:11px 14px;font-size:12.5px;line-height:1.85;margin:12px 0;color:var(--ink)}
.callout b{color:var(--brand)}
.docfoot{margin-top:30px;padding-top:14px;border-top:1px dashed var(--line);font-family:var(--mono);font-size:10px;color:var(--ink2);line-height:1.9}
.docx{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--ink2);z-index:2}
.docx:hover{background:var(--oat);color:var(--ink)}

/* ---------- 大廳 ---------- */
.mcard.lobby{width:600px}
.lobbyLead{font-size:13px;color:var(--ink2);line-height:1.7;margin:6px 0 16px}
.lobbyLead b{color:var(--ink)}
.lobbyGrid{display:flex;gap:22px;align-items:flex-start;margin-bottom:14px}
.lbField{display:flex;flex-direction:column;gap:7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--ink2)}
.lbField input{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink);width:170px;height:38px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:var(--paper);letter-spacing:0}
.lbField input:focus{outline:none;border-color:var(--ink2)}
.charPick{display:flex;gap:7px}
.charPick button{display:flex;flex-direction:column;align-items:center;gap:5px;width:60px;padding:7px 4px 6px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-family:var(--sans);font-size:10.5px;letter-spacing:0;color:var(--ink2);transition:all .15s}
.charPick button:hover{border-color:var(--ink2)}
.charPick button.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand);color:var(--ink);background:var(--paper2)}
.charPick .dot{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 -5px 0 rgba(39,35,28,.12),0 0 0 1px var(--line)}
.charPick img{width:36px;height:36px;object-fit:contain}
.lobbyBtns{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:14px;border-top:1px dashed var(--line)}
.lbSep{width:1px;height:26px;background:var(--line);margin:0 4px}
#lbCode{width:88px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
#lbCode:focus{outline:none;border-color:var(--ink2)}
.lbStatus{font-family:var(--mono);font-size:10.5px;color:var(--warn);margin-left:auto;min-height:1em}
.lobbyBtns button:disabled{opacity:.45;cursor:not-allowed}
.lobbyRoom{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.lbShare{--pshare-bg:var(--paper);--pshare-fg:var(--ink);--pshare-accent:var(--ink);--pshare-btn:var(--paper2);margin:10px 0 2px;padding:8px 10px;border:1px solid var(--line)}
.lbShare .pshare-head{display:none}   /* 房號已在 lbRoomHead 顯示，面板只留分享鍵 */
.lbShare .pshare-row button{border:var(--frame);font-family:var(--geo);font-weight:700}
.lbShare .pshare-line{background:#06C755;color:#fff;border-color:#06C755}
.tbtn.busy{cursor:progress;opacity:.75}
.tbtn.busy::after{content:"";width:11px;height:11px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:busySpin .8s linear infinite}
@keyframes busySpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tbtn.busy::after{animation:none}}
.lbRoomHead{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2)}
.lbRoomHead .code{font-family:var(--mono);font-size:18px;letter-spacing:.22em;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:3px 10px}
.lbPlayers{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 4px}
.lbPlayers li{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--paper);font-size:13px}
.lbPlayers li .dot{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:inset 0 -4px 0 rgba(39,35,28,.12),0 0 0 1px var(--line)}
.lbPlayers li .host.away{color:var(--ink2);margin-left:6px} .lbPlayers li .host{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--brand)}
.lbPlayers li.me{border-color:var(--brand)}
.lbPlayers li.empty{color:var(--ink2);border-style:dashed;justify-content:center;font-family:var(--mono);font-size:10.5px}
.lbHint{font-family:var(--mono);font-size:10px;color:var(--ink2)}
.lbHint b{color:var(--ink)}
.waitnote{font-family:var(--mono);font-size:10.5px;color:var(--ink2)}
.tteam{display:flex;align-items:center;gap:9px}
.tteam .dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 0 1px var(--line)}
.tteam .mvp{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--brand);border:1px solid var(--brand);border-radius:5px;padding:1px 5px}
.dtable .r .tstats{font-family:var(--mono);font-size:11px;color:var(--ink2);font-weight:500}
.dtable .r .tstats b{font-size:12px;margin:0 1px}

/* ---------- 法定分級標示（GAME-RATING.md：官方原圖 60×60、寫死 HTML、中文） ---------- */
.bnbRating{display:flex;align-items:center;gap:10px;margin:-6px 0 14px;padding:7px 11px;background:var(--paper);border:1px solid var(--line);border-radius:10px;text-align:left}
.bnbRating img{flex:none;width:60px;height:60px}
.bnbRating p{margin:0;font-size:11px;line-height:1.5;color:var(--ink2);font-family:var(--sans)}
.bnbRating p b{color:var(--ink);margin-right:4px}
.lbTitle{display:flex;align-items:flex-start;gap:12px}
.lbTitle > div:first-child{flex:1}
#badgeMount{flex:none;margin-top:2px}

/* ---------- 園區好友面板（shared/client/social.js）：配合紙色主題，放到頂列下方避免蓋住按鈕 ---------- */
:root{--soc-bg:var(--paper2);--soc-fg:var(--ink);--soc-line:var(--line);--soc-radius:9px;--soc-sheet:var(--paper2);--soc-ink:var(--ink);--soc-card:var(--paper);--soc-cardfg:var(--ink)}
.soc-dock{top:68px!important;right:16px!important}
#toasts{top:124px}

#phaseChip{font-size:11.5px;color:var(--ink2)}
#btnOpen{animation:pulseBtn 1.6s ease-in-out infinite}
@keyframes pulseBtn{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 28%,transparent)}}

/* ---------- 待辦板 ---------- */
#dayWrap .row #hudLeft.left{color:var(--brand);font-weight:700;margin-left:2px;font-size:15px}
#dayWrap .row #hudLeft.left.closing{color:var(--warn)}
#dayWrap .row #hudLeft.left.soon{color:var(--bad);animation:hudPulse 1s ease-in-out infinite}
@keyframes hudPulse{0%,100%{opacity:1}50%{opacity:.35}}
#dayBar{height:6px;border-radius:2px;background:var(--line);margin-top:4px;overflow:hidden} #dayBar i{display:block;height:100%;width:0;background:var(--brand);transition:width .4s linear} #dayBar.late i{background:var(--warn)} #dayBar[hidden]{display:none}
#tasks{right:16px;top:132px;width:300px;max-height:calc(100vh - 490px);overflow-y:auto;padding:12px 12px 10px;z-index:5}   /* 上限＝視窗 − 頂欄 68 − top 132 − 視角鈕（bottom 236＋高 38）− 16：720 高的筆電也不壓到視角鈕 */
#tasks::-webkit-scrollbar{width:6px}#tasks::-webkit-scrollbar-thumb{background:var(--oat2);border-radius:3px}
#tasks .lab{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink2);display:flex;justify-content:space-between;margin:0 2px 10px}
.trow2{display:grid;grid-template-columns:40px 1fr auto;grid-template-rows:auto auto;column-gap:10px;row-gap:6px;align-items:center;padding:9px 10px 8px;border:var(--frame);border-radius:14px;margin-bottom:8px;cursor:pointer;background:var(--paper);transition:border-color .15s,transform .15s}
.trow2:hover{border-color:var(--ink2)} .trow2.hit{transform:scale(.97)}
.trow2 img{width:40px;height:40px;flex:none;grid-row:1/3} .trow2 .tico{width:40px;height:40px;border-radius:10px;background:var(--oat);display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--ink2);flex:none;grid-row:1/3} .trow2 .tico svg{width:20px;height:20px}
.saveNote{display:block;width:100%;font-size:11px;color:var(--ink2);margin-top:4px} .saveNote.warn{color:var(--warn)}
.skillTeam{margin-top:10px;border-top:1px solid var(--line);padding-top:8px} .skillTeam h3{font-size:12px;margin:0 0 4px;color:var(--ink2)} .skillTeam .r{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:2px 0} .skillTeam .r b{font-weight:600;text-align:right}
.trow2 .tmain{min-width:0;font-size:15.5px;line-height:1.25;grid-column:2/4} .trow2 .who{float:right;font-style:normal;font-family:var(--geo);font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--oat);color:var(--ink2);margin-left:6px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top} .trow2 .who.me{background:var(--ink);color:var(--paper2)} .trow2.claimed:not(.urgent){opacity:.72} .trow2 .tmain b{font-family:var(--mono);font-size:15.5px} .trow2 .tmain small{display:block;font-size:12.5px;color:var(--ink2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow2 .tpat{grid-column:2/4;grid-row:2;width:100%;height:8px;border-radius:4px;background:var(--oat);overflow:hidden} .trow2 .tpat i{display:block;height:100%;background:var(--safe);transition:width .3s linear} .trow2 .urg{grid-column:3;grid-row:1;width:18px;height:18px;color:var(--bad)}
.trow2.making{border-color:color-mix(in srgb,var(--brand) 55%,var(--line))} .trow2.making .tpat i{background:var(--brand)}
.trow2.self{opacity:.6}
.trow2.urgent{border-color:var(--bad);animation:urg 1s ease-in-out infinite} .trow2.urgent .tpat i{background:var(--bad)}
@keyframes urg{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 25%,transparent)}}
.trow2.chore{background:var(--paper2);grid-template-rows:auto;row-gap:0} .trow2.chore img,.trow2.chore .tico{grid-row:1}
.tsum{font-family:var(--mono);font-size:13px;color:var(--ink2);margin:0 2px 10px} .tsum b{color:var(--ink)}
.tempty{font-size:14px;color:var(--ink2);padding:4px 2px 2px;line-height:1.5}
#ctrlHint{max-width:460px;white-space:nowrap}

/* ---------- 成就 / 星等 ---------- */
.achGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.skillGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;max-height:56vh;overflow:auto;padding:2px}
.skill{border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:9px 11px;display:flex;flex-direction:column;gap:5px;opacity:.7}
.skill.on{opacity:1;border-color:var(--brand)}
.skill .skh{display:flex;justify-content:space-between;align-items:center;font-family:var(--geo);font-size:12.5px}
.skill .lvl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;border:1px solid var(--line);border-radius:999px;padding:1px 7px;color:var(--ink2)}
.skill.on .lvl{border-color:var(--brand);color:var(--brand)}
.skill .skbar{height:6px;border-radius:3px;background:var(--paper2);border:1px solid var(--line);overflow:hidden}
.skill .skbar i{display:block;height:100%;background:var(--brand)}
.skill small{font-size:10.5px;color:var(--ink2)}
#modalSkills .snote.warn{color:var(--bad)}
#modalSkills .snote{font-size:12px;color:var(--ink2);margin:6px 0 0;line-height:1.5}
.ach{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--paper);opacity:.55}
.ach.on{opacity:1;border-color:var(--brand)}
.ach .badge{width:22px;height:22px;border-radius:50%;background:var(--oat);display:grid;place-items:center;color:var(--paper2);flex:none}
.ach.on .badge{background:var(--brand)}
.ach b{font-size:12.5px;display:block} .ach small{font-size:10.5px;color:var(--ink2);line-height:1.4}
.dstars{display:inline-flex;gap:3px} .dstars svg{width:18px;height:18px;color:var(--oat2)} .dstars svg.on{color:var(--warn)}

/* ---------- 設定 ---------- */
.setRows{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.setRow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--paper);font-size:13px}
.setRow select{font-family:var(--sans);font-size:13px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--paper2);color:var(--ink)}
.setRow input[type=range]{width:160px;accent-color:var(--brand)} .setRow input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand)}
.dn-en{font-family:var(--mono);font-size:9.5px;color:var(--ink2);margin-bottom:8px} .dn-en:empty{display:none}

/* ---------- 新手教學 ---------- */
#tut{left:16px;top:156px;width:290px;padding:12px 14px 10px;z-index:5;max-height:calc(100vh - 156px - 420px);overflow-y:auto}   /* 教學卡在委託卡下面、視角鈕與今日卡上面，不重疊 */
#tut .lab{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink2);display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
#tut .lab button{color:var(--ink2);display:grid;place-items:center;width:20px;height:20px;border-radius:6px} #tut .lab button:hover{background:var(--oat)}
#tut ol{list-style:none} #tut li{display:flex;align-items:center;gap:10px;font-size:14px;padding:6px 0;border-bottom:1px dashed var(--line);color:var(--ink)} #tut li:last-child{border-bottom:none}
#tut li .tk{width:24px;height:24px;border-radius:50%;background:var(--oat);display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink2);flex:none}
#tut li.on{color:var(--ink2);text-decoration:line-through} #tut li.on .tk{background:var(--safe);color:var(--paper2)}

/* ---------- 視角預設 ---------- */
.seg.views .thumb{width:calc(25% - 1.5px)}
.seg.views button{width:36px;height:28px}
#viewSeg.hud{position:absolute;right:16px;bottom:236px;z-index:6;border-radius:9px;box-shadow:0 6px 18px rgba(39,35,28,.10);padding:3px}
.hchip,.logo b{white-space:nowrap}

#dayWrap .row{white-space:nowrap}
#topbar .tbtn{white-space:nowrap}

/* 挑戰關卡 */
.lvGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:52vh;overflow:auto;padding:2px}
.lv{text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:4px;font-family:inherit}
.lv:hover{border-color:var(--ink2)} .lv.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(193,80,46,.18)} .lv:disabled{cursor:default;opacity:.7}
.lv .lvh{display:flex;align-items:center;gap:6px;font-family:var(--geo);font-weight:700;font-size:13px}
.lv .hardBtn{display:inline-flex;align-items:center;gap:6px;margin-top:6px;align-self:flex-start;font-family:var(--geo);font-weight:700;font-size:11px;padding:3px 9px;border-radius:999px;background:var(--ink);color:var(--paper2);cursor:pointer}
.lv .hardBtn.dis{opacity:.5;cursor:default}
.lv .hardBtn:hover:not(.dis){background:var(--brand)}
.lv .hardLock{font-size:10px;color:var(--ink2);margin-top:4px}
.lv .tier{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:1px 6px}
.lv .lvt{font-size:11px;color:var(--ink2);line-height:1.45}
.lv .lvm{display:flex;flex-wrap:wrap;gap:4px} .lv .lvm em,#wishCard .lvm em{font-style:normal;font-size:10px;padding:1px 6px;border-radius:999px;background:var(--oat);color:var(--ink2)}
.stars{display:inline-flex;gap:1px;vertical-align:middle} .lv .stars,#wishCard .stars{margin-left:auto} .stars svg{width:12px;height:12px;color:var(--line)} .stars svg.on{color:var(--warn)} .dtable .r b .stars svg{width:14px;height:14px;margin-left:2px} .dtable .r.grand b .stars svg{width:22px;height:22px}
#wishCard.level{width:290px} #wishCard.level .goal span:first-child{white-space:nowrap} #wishCard.level .goal{display:flex;align-items:center;gap:6px;font-size:11.5px;padding:2px 0;border-bottom:1px dashed var(--line)} #wishCard.level .goal:last-child{border-bottom:none}
#wishCard.level .goal b{font-family:var(--mono);font-weight:600;font-size:11.5px;margin-left:auto} #wishCard.level .lvm{margin-top:5px}

/* 介面大小：只縮 UI 層，不動 3D 畫面 */
:root{--ui:1}
#chipScore{gap:8px} #chipScore .big{font-size:20px;font-variant-numeric:tabular-nums} #chipScore #hudStars{display:inline-flex;gap:1px} #chipScore #hudStars svg{width:13px;height:13px;color:var(--oat2)} #chipScore #hudStars svg.on{color:#D9A441} #chipScore small{color:var(--ink2);font-size:11.5px;white-space:nowrap}
#topbar,#shop,#stage .hud,#hint,#toasts,.mcard{zoom:var(--ui)}
.keyGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.keyBtn{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper2);font-family:inherit;font-size:12px;color:var(--ink);cursor:pointer}
.keyBtn:hover{border-color:var(--ink2)} .keyBtn.wait{border-color:var(--brand);box-shadow:0 0 0 2px rgba(193,80,46,.18)}
.keyBtn kbd{font-family:var(--mono);font-size:11px;padding:1px 7px;border-radius:5px;background:var(--oat);color:var(--ink2);min-width:26px;text-align:center}

/* 可及性：焦點看得見、減少動畫、急件非顏色標記 */
button:focus-visible,[role=button]:focus-visible,input:focus-visible,select:focus-visible,.lv:focus-visible,.trow2:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.trow2 .urg{color:var(--bad);flex:none;margin-left:4px}
@media (prefers-reduced-motion: reduce){.trow2.urgent,.mcard,.toast{animation:none !important}}
html.reduceMotion .trow2.urgent,html.reduceMotion .mcard,html.reduceMotion .toast{animation:none !important}

/* 入口畫面 */
.title{position:fixed;inset:0;z-index:95;background:#F6F1E7 url("assets/scenes/title_bg.webp") center/cover no-repeat;display:flex;align-items:flex-start;justify-content:flex-start;padding:5vh 5vw}
.title[hidden]{display:none}
.tCard{max-width:440px;background:rgba(246,241,231,.86);backdrop-filter:blur(6px);border:1px solid rgba(58,53,44,.12);border-radius:18px;padding:26px 28px 20px;box-shadow:0 20px 60px rgba(60,40,20,.18)}
.tLogo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tLogo .tZh{font-family:var(--geo);font-weight:800;font-size:54px;letter-spacing:.06em;color:var(--brand);line-height:1}
.tLogo .tEn{font-family:var(--mono);font-size:12px;letter-spacing:.32em;color:var(--ink2)}
.tLead{font-size:13.5px;line-height:1.7;color:var(--ink);margin:14px 0 18px}
.tBtns{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tbtn.big{padding:12px 26px;font-size:14px}
.tRating{margin:18px 0 0}
.tCredit{position:absolute;right:18px;bottom:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:rgba(58,53,44,.7);background:rgba(246,241,231,.6);padding:4px 10px;border-radius:999px}
@media (max-width:720px){.title{padding:3vh 4vw;align-items:flex-end}.tLogo .tZh{font-size:40px}}
.helpList{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;max-height:56vh;overflow:auto}
.helpList li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.helpList .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand);color:var(--paper2);font-family:var(--geo);font-weight:700;font-size:13px;display:grid;place-items:center}
.helpList b{display:block;font-family:var(--geo);font-size:13px;margin-bottom:2px} .helpList p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink2)}

.trow2 .chain{display:flex;gap:4px;margin-top:3px}
.trow2 .chain i{font-style:normal;font-family:var(--mono);font-size:9.5px;padding:1px 6px;border-radius:999px;border:1px solid var(--line);color:var(--ink2)}
.trow2 .chain i.ok{border-color:var(--safe);color:var(--safe);text-decoration:line-through}
.bcard .mt .season{color:#8A6647;font-style:normal;font-weight:700}
.bcard .mt .mylv{color:var(--brand);font-style:normal}
.bcard .mt .makes{display:inline-block;font-weight:700;color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent);padding:1px 6px;border-radius:999px}
.lv.lock{opacity:.55;filter:grayscale(.4)}

/* ---------- 手機／窄螢幕：入口畫面與 modal 要能正常顯示（遊戲本體仍以桌面為主） ---------- */
.modal .mcard{max-width:96vw;max-height:94vh;overflow:auto;box-sizing:border-box}
@media (max-width:1139px){
  body{min-width:0}
  #topbar{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}   /* 窄桌面：頂欄橫向捲動，高度維持 58，遊戲區不被推出視口 */
}
@media (max-width:720px){
  #topbar{flex-wrap:wrap;height:auto;min-height:58px;padding:6px 10px;gap:8px;overflow:visible}
  #main{height:auto;min-height:calc(100vh - 58px)}
}
@media (max-width:720px){
  .title{padding:0;align-items:flex-end;justify-content:center;background-position:58% 38%}
  .tCard{width:100%;max-width:none;border-radius:18px 18px 0 0;padding:18px 18px 14px;background:rgba(246,241,231,.94)}
  .tLogo .tZh{font-size:clamp(34px,9vw,44px)} .tLogo .tEn{font-size:11px;letter-spacing:.24em}
  .tLead{font-size:13px;margin:10px 0 14px}
  .tBtns{gap:8px} .tbtn.big{padding:11px 18px;flex:1 1 auto;justify-content:center}
  .tRating{margin-top:12px} .tRating img{width:45px;height:45px} .tRating p{font-size:11px}
  .tCredit{position:static;display:none}
  .mcard,.mcard.lobby{width:100% !important;max-width:100vw;border-radius:16px 16px 0 0;padding:20px 18px 18px}
  .modal{align-items:flex-end}
  .lobbyGrid{flex-direction:column;gap:12px} .charPick{flex-wrap:wrap} .lbField{width:100%}
  .lobbyBtns{gap:6px} .lobbyBtns .tbtn{flex:1 1 auto;justify-content:center}
  .helpList{max-height:52vh}
}
@media (max-width:720px) and (orientation:landscape){
  .title{align-items:center;justify-content:flex-start;padding:2vh 3vw;background-position:70% center}
  .tCard{width:min(440px,56vw);border-radius:16px;padding:14px 16px 12px}
  .tLogo .tZh{font-size:30px} .tLead{margin:6px 0 10px;font-size:12px} .tRating{display:none}
  .modal{align-items:center} .mcard,.mcard.lobby{border-radius:14px;max-height:96vh}
}

.gpFocus{outline:2px solid var(--brand) !important;outline-offset:2px;border-radius:8px}

.hchip.status{font-family:var(--sans);font-size:12px;font-weight:600} .hchip.status.warn{border-color:var(--warn);color:var(--ink)} .hchip.status.hot{border-color:var(--brand)} .hchip.status.hot svg{color:var(--brand)} .hchip.status.big3{background:var(--brand);color:var(--paper2)} .hchip.status.big3 svg{color:var(--paper2)}

/* 逐步教學：目前這一步放大、目標元素脈動外框 */
#tut li.cur{color:var(--ink);font-weight:700;background:color-mix(in srgb,var(--brand) 10%,transparent);border-radius:8px;padding:6px 6px;margin:2px -6px} #tut li.cur .tk{background:var(--brand);color:var(--paper2)}
.tutTarget{outline:2px solid var(--brand);outline-offset:3px;border-radius:10px;animation:tutPulse 1.2s ease-in-out infinite}
@keyframes tutPulse{50%{outline-color:transparent}}
html.reduceMotion .tutTarget{animation:none}
.crown{color:var(--brand);letter-spacing:.08em}

/* ---------- 頂欄精簡（Overcooked 式：只留錢、時間、速度、選單；狀態 chip 搬到左下卡） ---------- */
#todayCard{width:300px}
#todayCard .chips{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 10px}
#todayCard .chips .hchip{height:38px;padding:0 10px;font-size:14px;gap:7px;min-width:0;overflow:hidden;white-space:nowrap}
#todayCard .chips .hchip .minibar{width:36px}
.tbtn.icon{width:42px;height:42px;padding:0;justify-content:center}
#topbar .tbtn:not(.icon){white-space:nowrap}
@media (max-width:1560px){.logo span{display:none} .logo{gap:8px}}
@media (max-width:1400px){#btnLevels span,#btnBuild span,#brandBtn span{display:none} #btnLevels,#btnBuild,#brandBtn{padding:0 11px}}

/* ---- 大廳重整：三個入口、和朋友一起（房間列表）、房間名單的店主／房主／工具 ---- */
.lobbyHome{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px dashed var(--line)}
.lbMain{width:100%;justify-content:flex-start;padding:12px 16px;gap:14px;text-align:left}
.lbMain>svg{flex:none}
.lbMain span{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.lbMain b{font-size:17px} .lbMain small{font-family:var(--body);font-weight:500;font-size:12.5px;color:var(--ink2)}
.lbMain.dark small{color:inherit;opacity:.72}
.lbHomeFoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .lbHomeFoot .snote{margin:0;padding:0;border:0;flex:1 1 220px}
.lobbyFriends{display:flex;flex-direction:column;gap:12px;padding-top:14px;border-top:1px dashed var(--line)}
.lbInvite{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border:var(--frame);border-radius:12px;background:var(--paper)}
.lbOpt{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2)} .lbOpt select{font:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper2);color:var(--ink)} .lbOpt.chk input{width:16px;height:16px}
.lbJoinRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink2)} .lbJoinRow input{width:110px}
.roomList{display:flex;flex-direction:column;gap:8px;max-height:36vh;overflow:auto;padding:2px}
.rcard{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font:inherit;cursor:pointer;color:var(--ink)}
.rcard:hover:not(:disabled){border-color:var(--ink2)} .rcard.full{opacity:.55;cursor:default}
.rcard .sw{width:6px;height:34px;border-radius:3px;flex:none} .rcard .dot{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:inset 0 -4px 0 rgba(39,35,28,.12),0 0 0 1px var(--line)}
.rcard .rmain{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .rcard .rmain b{font-family:var(--geo);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rcard small{font-size:11.5px;color:var(--ink2)}
.rcard .rside{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-family:var(--mono)} .rcard .rside b{font-size:13px} .rcard .rside small.open{color:var(--safe)} .rcard .rside small.report{color:var(--warn)}
.lbStatus{display:block;min-height:1.4em;margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--brand)} .lbStatus.ok{color:var(--safe)}
.lbRoomHead .rkind{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.lbPlayers li .pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lbPlayers li .host.own{color:var(--ink);margin-left:auto} .lbPlayers li .host.own+.host{margin-left:6px}
.lbPlayers li .tools{display:flex;gap:4px;margin-left:6px} .tbtn.mini{padding:3px 8px;font-size:11px;border-radius:7px}
.lbPlayers li.isAway{opacity:.7}
.lbRoomNote{display:block;margin-top:8px;color:var(--warn)}
.lv .lvfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lv .lvRoom{display:inline-flex;align-items:center;margin-top:6px;font-family:var(--geo);font-weight:700;font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--paper2);color:var(--ink)} .lv .lvRoom:hover{border-color:var(--ink2)}
@media (max-width:720px){ .lbInvite,.lbJoinRow{flex-direction:column;align-items:stretch} .lbJoinRow input{width:100%} }

/* ---- 頒獎典禮（日結一人一卡）、今日偏好卡、大廳履歷 ---- */
.tcards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.tcard{border:var(--frame);border-radius:12px;background:var(--paper);padding:10px 12px;display:flex;flex-direction:column;gap:5px;animation:tIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes tIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.tcard.me{border-color:var(--brand);box-shadow:0 0 0 2px rgba(193,80,46,.14)}
.tcard.mvp{background:linear-gradient(180deg,rgba(217,164,65,.14),var(--paper))}
.tcard .th{display:flex;align-items:center;gap:8px} .tcard .th .dot{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:0 0 0 1px var(--line)}
.tcard .tn{font-family:var(--geo);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcard .mvp{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:#8a6a1e;border:1px solid #d9a441;border-radius:999px;padding:1px 7px;margin-left:auto}
.tcard .rd{font-family:var(--mono);color:var(--safe);font-weight:700;min-width:1em;text-align:right} .tcard .mvp+.rd{margin-left:6px} .tcard .th .rd:only-of-type{margin-left:auto}
.tcard .ttl{display:inline-block;font-family:var(--geo);font-weight:700;font-size:13px;padding:2px 9px;border-radius:999px;background:var(--brand);color:#fff} .tcard .ttl.none{background:var(--oat);color:var(--ink2);font-weight:500}   /* 不能叫 .title：那是入口畫面的全螢幕 class */
.tcard .ts{font-family:var(--mono);font-size:10.5px;color:var(--ink2);line-height:1.5} .tcard .tb{font-family:var(--geo);font-weight:700;font-size:13px;color:var(--safe)} .tcard .tb.none{color:var(--ink2);font-weight:500}
#btnReady.on{background:var(--safe);color:#fff;border-color:var(--safe)}
#prefCard{right:16px;top:132px;width:300px;padding:12px 14px;z-index:5;max-height:calc(100vh - 490px);overflow-y:auto}   /* 佈置期放待辦板的位置（待辦板營業中才出現，兩者不同時） */ #prefCard .lab{display:flex;flex-direction:column;gap:2px;margin-bottom:8px} #prefCard .lab span:last-child{font-family:var(--body);font-weight:500;letter-spacing:0;font-size:11.5px;color:var(--ink2);text-transform:none}
.prefs{display:flex;flex-direction:column;gap:6px}
.pref{display:flex;flex-direction:column;gap:2px;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font:inherit;color:var(--ink);cursor:pointer;position:relative}
.pref:hover:not(:disabled){border-color:var(--ink2)} .pref.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(193,80,46,.16)} .pref:disabled{cursor:default;opacity:.8}
.pref b{font-family:var(--geo);font-size:13.5px} .pref small{font-size:11px;color:var(--ink2);line-height:1.4}
.pref .who{position:absolute;right:8px;top:8px;display:flex;gap:3px} .pref .who .dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.lbCareer{display:block;font-family:var(--mono);font-size:11px;color:var(--ink2);margin-top:4px}

/* ---- 咖啡豆章與造型（熟練度面板） ---- */
.cosmBox{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.cosmHead{display:flex;align-items:center;justify-content:space-between} .cosmHead b{font-family:var(--geo);font-size:15px} .cosmHead .beans{font-family:var(--mono);font-size:13px;color:var(--brand);font-weight:700}
.cosmRow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0} .cosmRow .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink2);width:64px;flex:none}
.cosm{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font:inherit;color:var(--ink);cursor:pointer;min-width:74px}
.cosm:hover{border-color:var(--ink2)} .cosm.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(193,80,46,.16)} .cosm.lock{opacity:.75}
.cosm .sw{width:26px;height:26px;border-radius:50%;background:var(--oat2);box-shadow:inset 0 -4px 0 rgba(39,35,28,.12),0 0 0 1px var(--line)} .cosm .sw.frame{border-radius:8px;width:34px;height:20px;background:transparent;box-shadow:none;border:4px solid var(--oat2)} .cosm .sw.frame[style]{border-color:currentColor;background:transparent !important}
.cosm b{font-size:11.5px;font-family:var(--geo)} .cosm small{font-size:10px;color:var(--ink2)} .cosm small.cost{color:var(--brand);font-weight:700}

/* ==================== 依裝置尺寸的三種版面（html[data-layout]，由 js/ui/layout.js 判定） ====================
   desktop：寬 ≥1140 且高 ≥700（現有版面）
   medium ：寬 900–1139 或高 560–699（平板橫向／小筆電）——窄一點、收掉鍵盤提示、教學只留目前這步
   compact：寬 <900 或高 <560（手機直橫向、小平板直向）——頂欄兩列、商店變底部抽屜、卡片由 JS 依實際高度堆疊、不重疊、不出畫面 */
html[data-layout="medium"] #shop{width:212px;padding:10px 10px 16px} html[data-layout="medium"] #shop.hidden{margin-left:-212px}
html[data-layout="medium"] #wishCard,html[data-layout="medium"] #tut{width:256px} html[data-layout="medium"] #tut{top:132px}
html[data-layout="medium"] #wishCard .wt{font-size:13px} html[data-layout="medium"] #wishCard{padding:10px 12px}
html[data-layout="medium"] #todayCard{width:256px;padding:10px 12px} html[data-layout="medium"] #todayCard .chips .hchip{height:32px;font-size:12.5px}
html[data-layout="medium"] .trow{font-size:13px;padding:2px 0}
html[data-layout="medium"] #tasks,html[data-layout="medium"] #prefCard{width:260px;top:120px} html[data-layout="medium"] #tasks,html[data-layout="medium"] #prefCard{max-height:calc(100vh - 404px);overflow-y:auto}
html[data-layout="medium"] #ctrlHint{display:none}
html[data-layout="medium"] #tut li:not(.cur):not(.on){display:none} html[data-layout="medium"] #tut li.on{display:none}
html[data-layout="medium"] #viewSeg.hud{bottom:auto;top:76px}
html[data-layout="medium"] #dayWrap{min-width:200px} html[data-layout="medium"] .logo span,html[data-layout="medium"] #brandHex{display:none}
html[data-layout="medium"] #btnLevels span,html[data-layout="medium"] #btnBuild span,html[data-layout="medium"] #brandBtn span:not(.sw){display:none}

html[data-layout="compact"] #topbar,html[data-layout="compact"] #shop,html[data-layout="compact"] #stage .hud,html[data-layout="compact"] #hint,html[data-layout="compact"] #toasts,html[data-layout="compact"] .mcard{zoom:1}   /* 手機不吃介面縮放設定 */
html[data-layout="compact"] #topbar{flex-wrap:wrap;height:auto;min-height:0;padding:5px 6px;gap:4px;overflow:hidden;row-gap:5px}   /* overflow hidden：內容再寬也不能撐出橫向捲動（否則點擊會把整頁往左捲） */
html[data-layout="compact"] #topbar .spacer{flex:0 0 100%;height:0;order:0}   /* 強制換列：前面是錢／時間／開店，後面是工具列 */
html[data-layout="compact"] .logo{order:-4;padding-right:8px;gap:0} html[data-layout="compact"] .logo b,html[data-layout="compact"] .logo span{display:none}
html[data-layout="compact"] #chipMoney{order:-3;height:36px;padding:0 10px;font-size:13px} html[data-layout="compact"] #chipMoney .big{font-size:16px}
html[data-layout="compact"] #dayWrap{order:-2;min-width:0;flex:1 1 90px;gap:3px} html[data-layout="compact"] #dayWrap .row{font-size:12px;gap:6px} html[data-layout="compact"] #dayWrap .row small{font-size:11.5px} html[data-layout="compact"] #dayWrap .row #hudLeft.left{font-size:12px}
html[data-layout="compact"] #btnOpen{order:-1;padding:8px 12px;font-size:13px} html[data-layout="compact"] #btnOpen svg{display:none}
html[data-layout="compact"] #chipMod,html[data-layout="compact"] #chipCritic,html[data-layout="compact"] #chipStreak{order:1;height:30px;font-size:11px;padding:0 8px}
html[data-layout="compact"] #topbar .tbtn.icon{width:32px;height:32px} html[data-layout="compact"] #topbar .tbtn:not(.icon){padding:7px 9px;font-size:12.5px}
html[data-layout="compact"] .seg button{width:30px;height:26px;font-size:11.5px} html[data-layout="compact"] #speedSeg .thumb{width:calc(33.333% - 2px)}
html[data-layout="compact"] #btnHeat,html[data-layout="compact"] #btnDocs,html[data-layout="compact"] #btnAch,html[data-layout="compact"] #brandHex,html[data-layout="compact"] #brandBtn svg{display:none}   /* 熱圖／筆記／成就手機收掉（成就在設定裡也有入口）；品牌色只留色塊 */
html[data-layout="compact"] #brandBtn{padding:6px 8px} html[data-layout="compact"] #btnLevels span,html[data-layout="compact"] #btnBuild span{display:none}
html[data-layout="compact"] #phaseChip{font-size:11px;height:30px;padding:0 8px}
html[data-layout="compact"] #brandPop{right:8px;left:8px;width:auto;top:auto}
html[data-layout="compact"] #main{display:block;position:relative;height:auto;flex:1;min-height:0}
html[data-layout="compact"] body{display:flex;flex-direction:column}
html[data-layout="compact"] #stage{position:absolute;inset:0}
html[data-layout="compact"] #shop{position:absolute;left:0;right:0;bottom:0;top:auto;width:auto;height:min(46vh,380px);border-right:0;border-top:var(--frame);z-index:25;margin-left:0 !important;transition:bottom .32s cubic-bezier(.22,1,.36,1);padding:8px 10px 14px;background:rgba(252,250,243,.97);border-radius:14px 14px 0 0;box-shadow:0 -8px 24px rgba(39,35,28,.12)}
html[data-layout="compact"] #shop.hidden{bottom:calc(-1 * min(46vh,380px) - 40px);box-shadow:none}   /* 用 bottom 收合（transform 百分比在 zoom 元素上量出來不對） */
html[data-layout="compact"] #shop .shead{font-size:11px;margin:6px 0} html[data-layout="compact"] #styleGrid{grid-template-columns:repeat(4,1fr)} html[data-layout="compact"] #shop .snote{display:none}
html[data-layout="compact"].wide #bcards{display:grid;grid-template-columns:1fr 1fr;gap:6px}   /* 橫式：家具卡兩欄 */
html[data-layout="compact"] .hud{border-radius:12px;box-shadow:0 4px 14px rgba(39,35,28,.12)}
html[data-layout="compact"] #wishCard{left:8px;top:8px;right:auto;width:auto;max-width:calc(100% - 16px);padding:7px 10px;gap:8px;align-items:center}
html[data-layout="compact"] #wishCard .av{width:26px;height:26px;font-size:12px;margin:0} html[data-layout="compact"] #wishCard .wn{font-size:12px;margin:0} html[data-layout="compact"] #wishCard .wt{font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw} html[data-layout="compact"] #wishCard .wr{font-size:12px}
html[data-layout="compact"] #wishCard.level{max-width:calc(100% - 16px)} html[data-layout="compact"] #wishCard.level .goal{font-size:11px}
html[data-layout="compact"] #tut{left:8px;width:auto;max-width:calc(100% - 16px);padding:6px 10px;max-height:none;overflow:visible}
html[data-layout="compact"] #tut .lab{margin-bottom:0;font-size:10.5px} html[data-layout="compact"] #tut li{font-size:12.5px;padding:3px 0;border:0} html[data-layout="compact"] #tut li:not(.cur){display:none} html[data-layout="compact"] #tut li.cur{margin:0;padding:3px 0;background:none}
html[data-layout="compact"] #todayCard{left:8px;right:8px;bottom:8px;width:auto;padding:7px 10px 6px}
html[data-layout="compact"] #todayCard .lab{font-size:10.5px;margin-bottom:5px}
html[data-layout="compact"] #todayCard .chips{grid-template-columns:repeat(4,1fr);gap:4px;margin:0 0 5px} html[data-layout="compact"] #todayCard .chips .hchip{height:28px;font-size:11.5px;padding:0 6px;gap:4px} html[data-layout="compact"] #todayCard .chips .hchip .minibar{width:26px}
html[data-layout="compact"] #todayCard .trow{display:inline-flex;gap:5px;font-size:11.5px;padding:0;margin-right:10px} html[data-layout="compact"] #todayCard .trow b{font-size:11.5px}
html[data-layout="compact"] #ctrlHint{display:none}
html[data-layout="compact"] #viewSeg.hud{right:8px;bottom:auto;padding:2px} html[data-layout="compact"] .seg.views button{width:32px;height:26px}
html[data-layout="compact"] #tasks,html[data-layout="compact"] #prefCard{right:8px;width:min(300px,calc(100% - 16px));padding:8px 10px}
html[data-layout="compact"] #tasks .lab{font-size:10.5px;margin-bottom:6px} html[data-layout="compact"] .trow2{padding:6px 8px;margin-bottom:6px;grid-template-columns:32px 1fr auto} html[data-layout="compact"] .trow2 img,html[data-layout="compact"] .trow2 .tico{width:32px;height:32px} html[data-layout="compact"] .trow2 .tmain{font-size:13px}
html[data-layout="compact"] #prefCard .lab span:first-child{font-size:11px} html[data-layout="compact"] #prefCard .lab span:last-child{display:none} html[data-layout="compact"] .pref{padding:6px 8px} html[data-layout="compact"] .pref b{font-size:12.5px} html[data-layout="compact"] .pref small{font-size:10.5px}
html[data-layout="compact"] #hint{top:8px;font-size:13px;padding:8px 14px;max-width:calc(100% - 24px);white-space:normal;text-align:center}
html[data-layout="compact"] #toasts{top:auto;bottom:calc(env(safe-area-inset-bottom) + 130px);right:8px} html[data-layout="compact"] .toast{font-size:13px;padding:8px 12px;max-width:calc(100vw - 24px)}
html[data-layout="compact"] #selPanel{bottom:auto;top:8px;transform:translateX(-50%);max-width:calc(100% - 16px)}
html[data-layout="compact"] .mcard,html[data-layout="compact"] .mcard.lobby{width:100% !important;max-width:100vw;max-height:100vh;border-radius:0;padding:14px 14px 16px}
html[data-layout="compact"] .modal{align-items:flex-end}
html[data-layout="compact"] .tcards{grid-template-columns:1fr} html[data-layout="compact"] .lvGrid{grid-template-columns:1fr;max-height:46vh}
html[data-layout="compact"].wide .tcards{grid-template-columns:1fr 1fr} html[data-layout="compact"].wide .lvGrid{grid-template-columns:1fr 1fr}
html[data-layout="compact"] .dtable .r{font-size:13.5px;padding:6px 2px} html[data-layout="compact"] .dtable .r b{font-size:14px}
html[data-layout="compact"] .mcard h2{font-size:21px} html[data-layout="compact"] .mcard .sub{margin:2px 0 10px}
html[data-layout="compact"] .lbMain{padding:9px 12px;gap:10px} html[data-layout="compact"] .lbMain b{font-size:15px} html[data-layout="compact"] .lbMain small{font-size:11.5px}
html[data-layout="compact"] .bnbRating:not(.tRating){display:none}   /* 分級標示在入口畫面已有，大廳裡手機省空間；入口那張（.tRating）不能藏 */
html[data-layout="compact"] .lobbyLead{font-size:12px;line-height:1.55;margin:4px 0 10px}
html[data-layout="compact"] .charPick button{width:56px} html[data-layout="compact"] .charPick img{width:32px;height:32px}

html[data-layout="compact"].wide .lobbyLead{display:none} html[data-layout="compact"].wide .lobbyGrid{flex-direction:row;gap:12px} html[data-layout="compact"].wide .lbField{width:auto}

/* compact 補強：頂欄第一列的日期文字不能溢到開店鈕下面；品牌鈕收掉（風格套組在商店裡）；偏好卡限高可捲；toast 改左下（不壓視角鈕） */
html[data-layout="compact"] #dayWrap{overflow:hidden} html[data-layout="compact"] #dayWrap .row{white-space:nowrap;overflow:hidden;min-width:0} html[data-layout="compact"] #hudClock{display:none}
html[data-layout="compact"] #brandBtn{display:none}
html[data-layout="compact"] #prefCard{overflow-y:auto}
html[data-layout="compact"] #toasts{left:8px;right:auto;align-items:flex-start}
html[data-layout="compact"] #hint{z-index:8}

/* 少字：委託卡只留名字與獎勵（說明在名字裡就夠） */
#wishCard #wName{display:none} #wishCard.level #wName{display:inline}   /* 委託卡只留說明句（就是任務本身）與獎勵，不再多一個名字 */

/* =========================================================================
   2026-09-18 園區語彙重製（UI-DESIGN-STANDARD v1.0；參考實作米花爆；與 codex 討論稿 codex-ui-1.md）
   奶油卡 + 深木頭列 + 蜂蜜黃主鍵 + 暖褐字。放在檔尾後蓋：上面的舊規則只留版面與定位，顏色、字體、
   邊角、陰影全部在這裡重定義。不動任何 id/class/事件；大廳改成全景場景（html:not(.inGame)），
   對局內 HUD 走 wood-dark chip 才壓得住米牆與木地板。
   ========================================================================= */
:root{
  --ui-cream-0:#fffdf7; --ui-cream-1:#fff8e8; --ui-cream-2:#f6e8c8;
  --ui-ink:#3a2c12; --ui-muted:#806d4d; --ui-gold:#f5a91b; --ui-gold-dark:#9d6508;
  --ui-blue:#2e8fd6; --ui-green:#35ad58; --ui-danger:#d94b52;
  --ui-radius-sm:11px; --ui-radius-md:18px; --ui-radius-lg:24px;
  --ui-shadow-card:0 14px 38px rgba(63,42,19,.22), inset 0 1px 0 rgba(255,255,255,.75);
  --ui-speed-fast:160ms; --ui-speed:220ms;
  /* 語彙 */
  --card:linear-gradient(rgba(255,253,247,.95),rgba(255,248,232,.92));
  --card-edge:2.5px solid #fff;
  --card-shadow:0 10px 30px rgba(60,40,20,.24),0 3px 0 rgba(184,121,15,.12),inset 0 2px 0 rgba(255,255,255,.6);
  --wood:rgba(50,32,14,.78); --wood-edge:1.5px solid rgba(255,230,160,.35); --wood-fg:#fff5dc; --wood-hi:#ffd45e;
  --honey:linear-gradient(#ffe08a,#f5a91b); --honey-hover:linear-gradient(#fff0bb,#ffbe3d); --honey-edge:#ffedb0; --honey-fg:#5a3800; --honey-base:#c9871a;
  --sign:linear-gradient(#a8743f,#7a4f26); --sign-edge:#d0a06a; --sign-fg:#ffe9a8; --sign-base:#5a3618;
  /* 舊 token 重新指向新色票：上面所有規則自動換色 */
  --paper:#fff8e8; --paper2:#fffdf7; --oat:#f6e8c8; --oat2:#e2cfa5;
  --ink:#3a2c12; --ink2:#6b5327; --ink3:#93805f; --line:rgba(150,115,55,.22); --hair:rgba(150,115,55,.08);
  --safe:#35ad58; --warn:#e0930f; --bad:#d94b52;
  --shadow:0 10px 30px rgba(60,40,20,.22),0 2px 6px rgba(60,40,20,.10);
  --frame:2.5px solid #fff;
}
body{background-color:var(--ui-cream-1);background-image:none}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button:focus-visible,[role=button]:focus-visible,input:focus-visible,select:focus-visible,.lv:focus-visible,.trow2:focus-visible,.tkt:focus-visible{outline:3px solid rgba(46,143,214,.78);outline-offset:2px}
.gpFocus{outline:3px solid rgba(46,143,214,.78) !important;outline-offset:2px}

/* ---- 按鈕：次鍵＝奶油、主鍵（.dark／.on）＝蜂蜜黃、圖示鍵 44px ---- */
.tbtn{min-height:44px;padding:9px 16px;border-radius:14px;border:2px solid #fff;background:rgba(255,252,244,.95);color:var(--ink2);
  font-family:var(--sans);font-weight:700;font-size:15px;box-shadow:0 3px 0 rgba(150,110,40,.18),0 6px 14px rgba(60,40,20,.12);
  transition:transform var(--ui-speed-fast),box-shadow var(--ui-speed-fast),background var(--ui-speed-fast)}
.tbtn:hover{border-color:#fff;background:#fff;transform:translateY(-1px)}
.tbtn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(150,110,40,.18)}
.tbtn.dark,.tbtn.on,#btnOpen,#btnStart,#btnCreate,#helpGo,#tStart{background:var(--honey);border-color:var(--honey-edge);color:var(--honey-fg);box-shadow:0 5px 0 var(--honey-base),0 10px 22px rgba(120,70,10,.28),inset 0 2px 0 rgba(255,255,255,.5)}
.tbtn.dark:hover,.tbtn.on:hover,#btnOpen:hover,#btnStart:hover,#btnCreate:hover,#helpGo:hover,#tStart:hover{background:var(--honey-hover);border-color:var(--honey-edge)}
.tbtn.dark:active,#btnOpen:active,#btnStart:active,#tStart:active{transform:translateY(3px);box-shadow:0 2px 0 var(--honey-base),0 6px 14px rgba(120,70,10,.22)}
.tbtn.dark svg,#btnOpen svg{color:#8a5a10}
.tbtn.icon{width:44px;height:44px;min-height:44px;padding:0;border-radius:14px}
.tbtn.mini{min-height:30px;padding:3px 10px;font-size:12px;border-radius:9px;box-shadow:0 2px 0 rgba(150,110,40,.16)}
.tbtn:disabled,.lobbyBtns button:disabled{opacity:.5;cursor:not-allowed;transform:none}
.brandbtn{min-height:44px;border-radius:14px;border:2px solid #fff;background:rgba(255,252,244,.95);font-family:var(--sans);font-weight:700;font-size:13px;color:var(--ink2);box-shadow:0 3px 0 rgba(150,110,40,.18)}
.brandbtn:hover{border-color:#fff}
.seg{background:var(--wood);border:var(--wood-edge);border-radius:999px;padding:3px;backdrop-filter:blur(8px)}
.seg .thumb{background:var(--honey);border-radius:999px;box-shadow:0 2px 0 var(--honey-base)}
.seg button{color:var(--wood-fg);font-family:var(--geo);font-weight:700;border-radius:999px}
.seg button.on{color:var(--honey-fg)}
.hchip{border:2px solid #fff;border-radius:999px;background:rgba(255,252,244,.95);color:var(--ink);font-family:var(--geo);font-weight:700;font-size:15px;box-shadow:0 3px 0 rgba(150,110,40,.14)}
.hchip svg{color:var(--ui-gold-dark)}
.hchip .big{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.minibar{background:rgba(150,115,55,.18)} .minibar i{background:var(--ui-green)}

/* ---- 頂欄（佈置／生涯模式）：奶油列、白邊 ---- */
#topbar{background:rgba(255,248,232,.92);border-bottom:2px solid rgba(255,255,255,.9);box-shadow:0 6px 18px rgba(60,40,20,.08)}
.logo b{font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:.02em;color:var(--ink)}
.logo span{font-family:var(--geo);font-weight:700;font-size:9.5px;letter-spacing:.14em;color:var(--ui-gold-dark)}
.logo svg{color:var(--ink)} .logo svg path{stroke:currentColor} .logo svg path:last-child{stroke:#c9502a}
.logo{border-right:1px solid var(--line)}
#dayWrap .row{font-family:var(--sans);font-weight:700;color:var(--ink)} #dayWrap .row small{font-family:var(--mono);color:var(--ink2)}
#dayFill{background:rgba(150,115,55,.16);border-radius:999px} #dayFill i{background:var(--honey)} #dayFill.late i{background:linear-gradient(#ffb15c,#e4652f)}
#dayWrap .row #hudLeft.left{color:#c9502a} #dayWrap .row #hudLeft.left.closing{color:#e0930f} #dayWrap .row #hudLeft.left.soon{color:var(--bad)}
#phaseChip{font-family:var(--sans);font-weight:700;font-size:12.5px;color:var(--ink2)}
#btnOpen{animation:none;min-height:48px;padding:0 20px;font-size:16px}
#btnOpen::after{content:"";position:absolute;inset:-6px;border-radius:20px;border:2px solid rgba(245,169,27,.45);animation:openRing 1.8s ease-out infinite;pointer-events:none}
#btnOpen{position:relative}
@keyframes openRing{0%{opacity:.9;transform:scale(.94)}100%{opacity:0;transform:scale(1.12)}}

/* ---- 商店側欄（佈置）：奶油面板 ---- */
#shop{background:rgba(255,250,240,.92);border-right:2px solid rgba(255,255,255,.9)}
.shead{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--ui-gold-dark)}
.styleCard,.bcard{border:2px solid #fff;background:rgba(255,255,255,.72);border-radius:14px;box-shadow:0 2px 0 rgba(150,110,40,.10)}
.styleCard:hover,.bcard:hover{border-color:#fff;background:#fff}
.styleCard.on,.bcard.on{border-color:var(--ui-gold);box-shadow:0 0 0 2px rgba(245,169,27,.25)}
.bcard.on{background:linear-gradient(#fff6dc,#fff)}
.styleCard .sn,.bcard .nm{font-family:var(--sans);font-weight:700}
.bcard .mt{font-family:var(--sans);font-weight:600;font-size:11.5px;color:var(--ink3)} .bcard .mt em{color:var(--ui-green)}
.bcard canvas{border:2px solid #fff;border-radius:10px;background:#fff}
.snote{font-family:var(--sans);font-weight:500;color:var(--ink3);border-top:1px dashed var(--line)}

/* ---- HUD 卡片（委託／今日／教學／待辦）：奶油卡 ---- */
.hud{background:var(--card);border:var(--card-edge);border-radius:18px;box-shadow:var(--card-shadow)}
#wishCard .av{background:var(--honey);color:var(--honey-fg)} #wishCard .wn{font-family:var(--sans)} #wishCard .wr{color:var(--ui-green)} #wishCard.done{border-color:var(--ui-green)}
#todayCard .lab,#tasks .lab,#tut .lab,#prefCard .lab span:first-child{font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.04em;color:var(--ui-gold-dark)}
.trow{color:var(--ink2);font-weight:600} .trow b{font-family:var(--mono);color:var(--ink)}
#ctrlHint{font-family:var(--sans);font-weight:600;color:var(--ink3);font-size:12.5px} #ctrlHint b{font-family:var(--mono);color:var(--ink);background:rgba(150,115,55,.12);border-radius:6px;padding:0 5px}
#tut li{font-weight:600;border-bottom:1px dashed var(--line)} #tut li .tk{background:rgba(150,115,55,.14);color:var(--ink2);font-family:var(--geo)}
#tut li.cur{background:linear-gradient(90deg,rgba(255,224,138,.55),rgba(255,224,138,.12));border-left:4px solid var(--ui-gold);padding-left:8px;border-radius:0 10px 10px 0;color:var(--ink)} #tut li.cur .tk{background:var(--honey);color:var(--honey-fg)}
#tut li.on{color:var(--ink3)} #tut li.on .tk{background:var(--ui-green);color:#fff}
#tut .lab button{color:var(--ink2);width:28px;height:28px;border-radius:9px} #tut .lab button:hover{background:rgba(150,115,55,.12)}
.tutTarget{outline:3px solid var(--ui-gold);outline-offset:3px;border-radius:12px;animation:tutPulse 1.2s ease-in-out infinite}
.trow2{border:2px solid #fff;background:rgba(255,255,255,.75);border-radius:16px;box-shadow:0 2px 0 rgba(150,110,40,.10)} .trow2:hover{border-color:var(--ui-gold)}
.trow2 .tico{background:rgba(245,169,27,.16);color:var(--ui-gold-dark)} .trow2 .who{font-family:var(--sans);background:rgba(150,115,55,.14);color:var(--ink2)} .trow2 .who.me{background:var(--honey);color:var(--honey-fg)}
.trow2 .tpat{background:rgba(150,115,55,.16);border-radius:999px} .trow2 .tpat i{background:var(--ui-green)} .trow2.making{border-color:var(--ui-gold)} .trow2.making .tpat i{background:var(--honey)}
.trow2.urgent{border-color:var(--bad)} .trow2.urgent .tpat i{background:var(--bad)} .trow2 .tmain b{font-family:var(--mono)}
.tsum{font-family:var(--sans);font-weight:600;color:var(--ink3)} .tsum b{color:var(--ink)}
.pref{border:2px solid #fff;background:rgba(255,255,255,.75);border-radius:14px} .pref.on{border-color:var(--ui-gold);box-shadow:0 0 0 2px rgba(245,169,27,.25)} .pref b{font-family:var(--sans)}
#prefCard .lab span:last-child{color:var(--ink3)}
#viewSeg.hud{background:var(--wood);border:var(--wood-edge);border-radius:999px;padding:3px;box-shadow:0 8px 20px rgba(50,30,10,.28);backdrop-filter:blur(8px)}
.seg.views button{width:40px;height:34px;color:var(--wood-fg)} .seg.views button.on{color:var(--honey-fg)} .seg.views .thumb{width:calc(25% - 1.5px)}
#hint{background:var(--wood);border:var(--wood-edge);color:var(--wood-fg);font-weight:600;border-radius:999px;box-shadow:0 10px 26px rgba(50,30,10,.3);backdrop-filter:blur(8px);padding:11px 20px}
#hint b{color:var(--wood-hi)}
.toast{background:var(--wood);border:var(--wood-edge);color:var(--wood-fg);font-weight:600;border-radius:999px;backdrop-filter:blur(8px);box-shadow:0 10px 26px rgba(50,30,10,.3)}
.toast .d{background:var(--ui-green)} .toast.bad .d{background:var(--bad)} .toast.brand .d{background:var(--ui-gold)} .toast.warn .d{background:#ffb15c}
#selPanel{background:var(--card);border:var(--card-edge);border-radius:18px;box-shadow:var(--card-shadow)}
#selName{font-family:var(--sans)} .spTop button{border:2px solid #fff;background:rgba(255,255,255,.8);border-radius:10px;height:34px;font-family:var(--sans);font-weight:700;font-size:12px;color:var(--ink2);box-shadow:0 2px 0 rgba(150,110,40,.12)}
.spTop button:hover{border-color:var(--ui-gold)} .spRow label{font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.04em;color:var(--ink3)} .sws button.on{box-shadow:0 0 0 2px var(--ui-gold)}
.spNote{font-family:var(--sans);font-weight:500;color:var(--ink3)}
#brandPop{background:var(--card);border:var(--card-edge);border-radius:18px;box-shadow:var(--card-shadow)} #brandPop h4{font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.04em;color:var(--ui-gold-dark)}
.swatches button.on{box-shadow:0 0 0 2px var(--ui-gold)}
.hchip.status{font-weight:700} .hchip.status.warn{border-color:#ffd58a} .hchip.status.hot{border-color:#ffb15c} .hchip.status.hot svg{color:#e4652f} .hchip.status.big3{background:linear-gradient(#ffb15c,#e4652f);color:#fff;border-color:#ffd9b0} .hchip.status.big3 svg{color:#fff}
#chipScore #hudStars svg{color:rgba(150,115,55,.28)} #chipScore #hudStars svg.on{color:var(--ui-gold)} #chipScore small{color:var(--ink3)}

/* ---- 對局 HUD（關卡模式 html.lvHud）：即時數字全部 wood-dark，壓在 3D 上才看得清 ---- */
html.lvHud #chipScore,html.lvHud #dayWrap,html.lvHud #chipMod,html.lvHud #chipCritic,html.lvHud #chipStreak{background:var(--wood);border:var(--wood-edge);color:var(--wood-fg);border-radius:999px;padding:0 18px;min-height:48px;display:flex;align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(50,30,10,.28)}
html.lvHud #chipScore svg{color:var(--ui-gold)} html.lvHud #chipScore .big{color:#fff;font-size:22px} html.lvHud #chipScore #hudStars svg{width:18px;height:18px;color:rgba(255,245,220,.28)} html.lvHud #chipScore #hudStars svg.on{color:var(--ui-gold);filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))} html.lvHud #chipScore small{color:#ffe9a8;font-weight:700;font-size:12px}
html.lvHud #dayWrap{flex-direction:column;align-items:stretch;justify-content:center;gap:5px;padding:6px 18px;min-width:280px}
html.lvHud #dayWrap .row{color:var(--wood-fg);font-size:18px;font-family:var(--sans)} html.lvHud #dayWrap .row small{color:#ffe9a8;font-family:var(--mono);font-size:15px}
html.lvHud #dayWrap .row #hudLeft.left{color:var(--wood-hi);font-family:var(--mono);font-size:17px} html.lvHud #dayWrap .row #hudLeft.left.closing{color:#ffb15c} html.lvHud #dayWrap .row #hudLeft.left.soon{color:#ff8b7a}
html.lvHud #dayFill{background:rgba(255,255,255,.18);height:6px} html.lvHud #dayFill i{background:var(--honey)} html.lvHud #dayFill.late i{background:linear-gradient(#ffb15c,#ff7b6b)}
html.lvHud .hchip.status{font-size:13px} html.lvHud .hchip.status svg{color:var(--wood-hi)} html.lvHud .hchip.status.warn{border-color:rgba(255,213,138,.6)} html.lvHud .hchip.status.hot svg{color:#ffb15c} html.lvHud .hchip.status.big3{background:linear-gradient(#ffb15c,#e4652f);color:#fff}
html.lvHud #topbar .tbtn.icon{background:var(--wood);border:var(--wood-edge);color:var(--wood-fg);width:46px;height:46px;border-radius:15px;box-shadow:0 6px 16px rgba(50,30,10,.28);backdrop-filter:blur(8px)}
html.lvHud #topbar .tbtn.icon:hover{background:rgba(50,32,14,.9)} html.lvHud #btnCamAll.on{background:var(--honey);color:var(--honey-fg);border-color:var(--honey-edge)}
html.lvHud #topbar .tbtn:not(.icon):not(#btnOpen){background:rgba(255,252,244,.95);border-color:#fff;color:var(--ink2);min-height:46px}
html.lvHud #btnOpen{min-height:52px;padding:0 22px;font-size:17px;border-radius:16px}
html.lvHud #hint{top:64px}
html.lvHud #topbar{height:64px}
/* 訂單票：奶油卡＋頂端夾具色條，耐心條整條在下 */
html.lvHud #tasks.strip{top:72px}
.tkt{width:150px;min-height:100px;background:var(--card);border:var(--card-edge);border-radius:16px;padding:12px 10px 9px;gap:4px;box-shadow:var(--card-shadow);position:relative;overflow:hidden}
.tkt::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,#c9502a,#f5a91b)}
.tkt.ask::before{background:linear-gradient(90deg,#5cc3f2,#2e8fd6)}
.tkt .tkTop{font-family:var(--mono);font-weight:700;font-size:12px;color:var(--ink2)} .tkt .tkTop .dot{border:2px solid #fff;box-shadow:0 0 0 1px rgba(60,40,20,.2)}
.tkt img,.tkt .tkIco{width:44px;height:44px} .tkt .tkIco{color:var(--ui-blue)}
.tkt .tkN{font-family:var(--sans);font-weight:700;font-size:14px;color:var(--ink)}
.tkt .tpat{height:8px;border-radius:999px;background:rgba(150,115,55,.16);margin-top:2px} .tkt .tpat i{background:var(--ui-green);border-radius:999px;transition:width .3s linear}
.tkt.making .tpat i{background:var(--honey)}
.tkt.urgent{border-color:#ffb3aa} .tkt.urgent::before{background:linear-gradient(90deg,#ff8b7a,#d94b52)} .tkt.urgent .tpat i{background:var(--bad)} .tkt.urgent .tkTop{color:var(--bad)}
.tkt.claimed{box-shadow:var(--card-shadow),0 0 0 3px rgba(245,169,27,.45)}
.tkt.more,.tkt.warn{background:var(--wood);border:var(--wood-edge);color:var(--wood-fg);font-family:var(--sans);font-weight:700;backdrop-filter:blur(8px)} .tkt.more::before,.tkt.warn::before{display:none}
.tkt.warn .tkIco{color:var(--wood-hi)} .tkt.warn .tkN{color:var(--wood-fg)}
.tkt:hover{transform:translateY(-2px)}
/* 手機搖桿與互動鈕 */
#stick{background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.4);box-shadow:0 8px 24px rgba(50,30,10,.2)}
#stick.on{background:rgba(255,255,255,.22)}
#stickKnob{background:rgba(255,248,232,.92);border:2.5px solid #fff;box-shadow:0 4px 0 rgba(150,110,40,.25),0 8px 18px rgba(50,30,10,.3)}
#btnAct{background:linear-gradient(#ffb15c,#e4652f);color:#fff;border:3px solid #fff3c9;box-shadow:0 6px 0 #a83f1c,0 14px 26px rgba(60,20,10,.35);font-family:var(--sans);font-weight:700;font-size:13px;transition:transform .1s,box-shadow .1s}
#btnAct span{text-shadow:0 1px 0 rgba(0,0,0,.2)} #btnAct.on{transform:translateY(3px) scale(.96);box-shadow:0 3px 0 #a83f1c,0 8px 16px rgba(60,20,10,.3)}

/* ---- Modal 共用殼：奶油漸層、3px 白邊、24px；標題暖褐、眉題金棕；關閉右上 44px ---- */
.modal{background:rgba(40,26,12,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.mcard{background:var(--card);border:3px solid #fff;border-radius:24px;box-shadow:0 22px 58px rgba(55,35,15,.34),inset 0 1px 0 #fff;padding:26px 28px 24px;color:var(--ink)}
.mcard h2{font-family:var(--sans);font-weight:700;font-size:27px;letter-spacing:0;color:var(--ink);line-height:1.2}
.mcard .sub{font-family:var(--geo);font-weight:700;font-size:11.5px;letter-spacing:.12em;color:var(--ui-gold-dark);text-transform:uppercase;margin:4px 0 16px}
.mcard .sub .crown{color:#c9502a}
.lbTitle .tbtn.icon{flex:none;margin-left:auto}
.mcard .foot .waitnote,.waitnote{font-family:var(--sans);font-weight:600;color:var(--ink3);font-size:12.5px}
.mcard .lab{font-family:var(--sans) !important;font-weight:700;letter-spacing:.04em !important;color:var(--ui-gold-dark) !important;font-size:12px !important}
.note{background:linear-gradient(90deg,rgba(255,224,138,.4),rgba(255,224,138,.08));border-left:4px solid var(--ui-gold);border-radius:0 12px 12px 0;color:var(--ink);font-weight:600}
.dtable{border-top:2px solid rgba(150,115,55,.18)} .dtable .r{border-bottom:1px dashed var(--line);font-weight:600;color:var(--ink2)} .dtable .r b{font-family:var(--mono);color:var(--ink)}
.dtable .r.grand{border-top:2.5px solid var(--ink);font-size:17px} .dtable .r.grand span,.dtable .r.grand b{font-family:var(--sans);font-size:17px}
.starline{font-family:var(--sans);font-weight:700;color:var(--ink2);font-size:13px} .dstars svg{width:34px;height:34px;color:rgba(150,115,55,.22)} .dstars svg.on{color:var(--ui-gold);filter:drop-shadow(0 2px 0 rgba(160,100,10,.35))}
#modalDay .dstars.stars svg{width:44px;height:44px}
.tcard{border:2px solid #fff;background:rgba(255,255,255,.75);border-radius:16px;box-shadow:0 3px 0 rgba(150,110,40,.10)}
.tcard.me{border-color:var(--ui-gold);box-shadow:0 0 0 2px rgba(245,169,27,.25),0 3px 0 rgba(150,110,40,.10)} .tcard.mvp{background:linear-gradient(180deg,rgba(255,224,138,.45),rgba(255,255,255,.8))}
.tcard .tn{font-family:var(--sans)} .tcard .mvp{font-family:var(--sans);color:#8a5a10;border-color:var(--ui-gold);background:rgba(255,224,138,.5)} .tcard .rd{color:var(--ui-green)}
.tcard .ttl{font-family:var(--sans);background:var(--honey);color:var(--honey-fg)} .tcard .ttl.none{background:rgba(150,115,55,.14);color:var(--ink2)}
.tcard .ts{font-family:var(--sans);font-weight:500;color:var(--ink3);font-size:11.5px} .tcard .tb{font-family:var(--sans);color:var(--ui-green)}
#btnReady.on{background:linear-gradient(#8fe58f,#35ad58);color:#fff;border-color:#c9f5c9;box-shadow:0 5px 0 #237a3c}
.rules .rule .ic{background:rgba(245,169,27,.18);color:var(--ui-gold-dark);border-radius:12px}
.helpList li{border:2px solid #fff;background:rgba(255,255,255,.75);border-radius:16px;box-shadow:0 3px 0 rgba(150,110,40,.10);padding:12px 14px}
.helpList .n{background:var(--honey);color:var(--honey-fg);font-family:var(--geo);width:30px;height:30px;box-shadow:0 2px 0 var(--honey-base)}
.helpList b{font-family:var(--sans);font-size:14.5px} .helpList p{font-weight:500;color:var(--ink2);font-size:13px}
/* 設定：三區、每列 54px、金色滑桿與勾選 */
.setSec{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--ui-gold-dark);margin:6px 2px -4px}
.setSec:first-child{margin-top:0}
.setRow{min-height:54px;border:2px solid #fff;background:rgba(255,255,255,.72);border-radius:14px;font-weight:600;font-size:14.5px;color:var(--ink);box-shadow:0 2px 0 rgba(150,110,40,.10)}
.setRow select,.lbOpt select{font-weight:600;border:2px solid rgba(150,115,55,.22);border-radius:10px;background:#fff;color:var(--ink);padding:7px 10px;min-height:38px}
.setRow input[type=range]{accent-color:var(--ui-gold)} .setRow input[type=checkbox],.lbOpt.chk input{width:22px;height:22px;accent-color:var(--ui-gold)}
.setRow #setUiV{font-family:var(--mono)}
.keyBtn{border:2px solid #fff;background:rgba(255,255,255,.75);border-radius:12px;font-weight:600;font-size:12.5px;min-height:40px;box-shadow:0 2px 0 rgba(150,110,40,.10)} .keyBtn:hover{border-color:var(--ui-gold)} .keyBtn.wait{border-color:var(--ui-gold);box-shadow:0 0 0 3px rgba(245,169,27,.28)}
.keyBtn kbd{background:var(--wood);color:var(--wood-fg);border-radius:7px;font-weight:700;padding:2px 8px}
/* 熟練度／成就 */
.skill{border:2px solid #fff;background:rgba(255,255,255,.72);border-radius:16px;opacity:1;box-shadow:0 2px 0 rgba(150,110,40,.10);padding:11px 13px} .skill.on{border-color:var(--ui-gold)}
.skill .skh{font-family:var(--sans);font-weight:700;font-size:14px} .skill .lvl{font-family:var(--geo);font-weight:700;background:rgba(150,115,55,.12);border-color:transparent;color:var(--ink2);padding:2px 9px} .skill.on .lvl{background:var(--honey);color:var(--honey-fg);border-color:transparent}
.skill .skbar{height:12px;border:0;border-radius:999px;background:rgba(150,115,55,.16)} .skill .skbar i{background:var(--honey);border-radius:999px} .skill small{font-weight:500;color:var(--ink3);font-size:11.5px}
.skillTeam{border-top:1px dashed var(--line)} .skillTeam h3{font-family:var(--sans);font-weight:700;color:var(--ui-gold-dark);font-size:12px;letter-spacing:.04em}
.ach{border:2px solid #fff;background:rgba(255,255,255,.55);border-radius:14px;opacity:1;color:var(--ink3)} .ach.on{background:rgba(255,255,255,.8);border-color:var(--ui-gold);color:var(--ink);box-shadow:0 3px 0 rgba(150,110,40,.10)}
.ach .badge{background:rgba(150,115,55,.14);width:26px;height:26px} .ach.on .badge{background:linear-gradient(#8fe58f,#35ad58);color:#fff}
.ach b{font-family:var(--sans);font-size:13px} .ach small{font-weight:500}
.cosmHead b{font-family:var(--sans)} .cosmHead .beans{font-family:var(--geo);color:var(--ui-gold-dark)} .cosmRow .lab{font-family:var(--sans);font-weight:700;letter-spacing:.04em;color:var(--ink3)}
.cosm{border:2px solid #fff;background:rgba(255,255,255,.72);border-radius:14px;box-shadow:0 2px 0 rgba(150,110,40,.10)} .cosm.on{border-color:var(--ui-gold);box-shadow:0 0 0 2px rgba(245,169,27,.25)} .cosm b{font-family:var(--sans)} .cosm small.cost{color:var(--ui-gold-dark)}
#modalSkills .snote{font-weight:500}
/* 選關：卡片更大、星星 22px、鎖定灰褐遮罩＋鎖圖示、專家條件深木小條、開房蜂蜜黃 */
#modalLevels .mcard{width:920px}
.lvGrid{gap:12px;max-height:62vh;padding:4px}
.lv{border:2px solid #fff;background:rgba(255,255,255,.72);border-radius:18px;padding:14px 16px 13px;min-height:150px;gap:6px;box-shadow:0 4px 0 rgba(150,110,40,.12);transition:transform var(--ui-speed-fast),box-shadow var(--ui-speed-fast),border-color var(--ui-speed-fast);position:relative}
.lv:hover{border-color:var(--ui-gold)} .lv.on{border-color:var(--ui-gold);box-shadow:0 0 0 3px rgba(245,169,27,.28),0 6px 0 rgba(150,110,40,.12);transform:translateY(-2px)} .lv:disabled{opacity:1}
.lv .lvh{font-family:var(--sans);font-weight:700;font-size:17px;color:var(--ink)}
.lv .tier{font-family:var(--geo);font-weight:700;font-size:10.5px;letter-spacing:.06em;background:rgba(245,169,27,.18);color:var(--ui-gold-dark);border-color:transparent;padding:2px 8px}
.lv .stars svg,#wishCard .stars svg{width:22px;height:22px;color:rgba(150,115,55,.22)} .lv .stars svg.on,#wishCard .stars svg.on{color:var(--ui-gold);filter:drop-shadow(0 1px 0 rgba(160,100,10,.35))}
.lv .lvt{font-weight:500;color:var(--ink2);font-size:13px;line-height:1.5}
.lv .lvm em,#wishCard .lvm em{font-weight:600;font-size:11px;background:rgba(150,115,55,.12);color:var(--ink2);padding:2px 8px}
.lv .lvfoot{margin-top:auto;gap:8px}
.lv .hardBtn{background:var(--wood);color:var(--wood-fg);font-family:var(--sans);font-size:12px;padding:5px 11px;margin-top:2px;border:1.5px solid rgba(255,230,160,.35)} .lv .hardBtn:hover:not(.dis){background:rgba(50,32,14,.95)} .lv .hardBtn .stars svg{width:13px;height:13px;color:rgba(255,245,220,.3)} .lv .hardBtn .stars svg.on{color:var(--ui-gold)}
.lv .hardLock{font-weight:600;color:var(--ink3);font-size:11.5px;margin-top:2px}
.lv .lvRoom{background:var(--honey);color:var(--honey-fg);border:2px solid var(--honey-edge);font-family:var(--sans);font-size:12.5px;padding:5px 12px;box-shadow:0 3px 0 var(--honey-base);margin-top:2px;margin-left:auto} .lv .lvRoom:hover{border-color:var(--honey-edge);background:var(--honey-hover)}
.lv.lock,.lv.lock:hover{opacity:1;filter:none;background:rgba(120,95,60,.14);border-color:rgba(255,255,255,.55);color:var(--ink3);box-shadow:none}
.lv.lock .lvh{color:var(--ink3)} .lv.lock .lvt{color:var(--ink3)} .lv.lock .tier{background:rgba(150,115,55,.14);color:var(--ink3)} .lv.lock .lvm em{opacity:.7}
.lv.lock::after{content:"";position:absolute;right:14px;bottom:12px;width:28px;height:28px;background:var(--ink3);opacity:.75;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10.5' width='16' height='10.5' rx='2.5'/><path d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/><circle cx='12' cy='15.5' r='1.4' fill='black'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10.5' width='16' height='10.5' rx='2.5'/><path d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/><circle cx='12' cy='15.5' r='1.4' fill='black'/></svg>") center/contain no-repeat}
#lvNote{font-weight:600}
/* 分級標示（法定，原圖 60×60）：入口收成一列 ---- */
.bnbRating{border:2px solid #fff;background:rgba(255,255,255,.7);border-radius:14px}
.bnbRating p{font-weight:500;color:var(--ink2)} .bnbRating p b{font-weight:700;color:var(--ink)}
/* 園區共用面板：只設變數 */
:root{--soc-bg:var(--ui-cream-0);--soc-fg:var(--ui-ink);--soc-line:rgba(150,115,55,.22);--soc-radius:14px;
  --soc-sheet:linear-gradient(rgba(255,253,247,.98),rgba(255,248,232,.96));--soc-edge:#fff;--soc-ink:#3a2c12;--soc-secfg:#6b5327;
  --soc-card:linear-gradient(rgba(255,255,255,.85),rgba(255,250,240,.85));--soc-cardfg:#3a2c12;--soc-accent:#f5a91b;
  --pshare-bg:#fffdf7;--pshare-fg:#3a2c12;--pshare-accent:#f5a91b;--pshare-btn:#f5a91b}

/* ---- 入口畫面：背景是主角（五隻在店裡），左上一座奶油浮台；手機用直式 re-frame，浮台貼底 ---- */
.title{padding:0;align-items:flex-start;justify-content:flex-start;background:#3a2c12 url("assets/scenes/title_bg.webp") center/cover no-repeat}
.title::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(60,35,10,.10),rgba(60,35,10,0) 30%,rgba(60,35,10,0) 70%,rgba(60,35,10,.22))}
.tCard{position:absolute;left:clamp(24px,5vw,80px);top:clamp(24px,6vh,72px);width:min(460px,calc(100vw - 48px));max-width:none;z-index:1;
  background:var(--card);border:3px solid #fff;border-radius:24px;box-shadow:0 22px 58px rgba(55,35,15,.30),0 3px 0 rgba(184,121,15,.12),inset 0 2px 0 rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:26px 26px 18px;
  animation:mIn .45s cubic-bezier(.22,1,.36,1)}
.tLogo{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.tLogo .tZh{font-family:var(--sans);font-weight:700;font-size:60px;letter-spacing:.04em;line-height:1.05;color:#c9502a;
  paint-order:stroke fill;-webkit-text-stroke:7px #fff8e8;text-shadow:0 4px 0 rgba(120,60,20,.22),0 10px 24px rgba(60,35,10,.18)}
.tLogo .tEn{font-family:var(--geo);font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--ui-gold-dark);margin-left:4px}
.tLead{font-size:15px;font-weight:600;line-height:1.6;color:var(--ink2);margin:12px 0 18px}
.tBtns{display:grid;grid-template-columns:1fr 52px;gap:10px;align-items:stretch}
#tStart{grid-column:1/-1;min-height:60px;font-size:22px;letter-spacing:.06em;border-radius:18px;border-width:3px;justify-content:center;box-shadow:0 8px 0 var(--honey-base),0 16px 30px rgba(120,70,10,.3),inset 0 2px 0 rgba(255,255,255,.55)}
#tStart:active{transform:translateY(5px);box-shadow:0 3px 0 var(--honey-base),0 8px 18px rgba(120,70,10,.25)}
#tHelp{min-height:50px;font-size:15.5px;justify-content:center;padding:0 14px}
#btnSettingsTitle{width:52px;height:52px;min-height:52px}
/* 分級標識的法定下限是 45x45（~/bonmipang/GAME-RATING.md），以下各尺寸都不得低於它 */
.tRating{margin:16px 0 0;padding:6px 10px;gap:10px} .tRating img{width:45px;height:45px} .tRating p{font-size:11.5px;line-height:1.45}
.tCredit{position:absolute;right:18px;bottom:14px;z-index:1;background:var(--wood);border:var(--wood-edge);color:var(--wood-fg);font-family:var(--geo);font-weight:700;font-size:11px;letter-spacing:.1em;padding:6px 14px;border-radius:999px;backdrop-filter:blur(8px)}
@media (orientation:portrait){.title{background-image:url("assets/scenes/title_bg_tall.webp");background-position:center top}}
@media (max-width:720px){
  .title{padding:0;align-items:flex-end;justify-content:center;background-position:center top}
  .tCard{position:absolute;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));top:auto;width:auto;max-width:none;border-radius:24px;padding:18px 16px 14px;background:linear-gradient(rgba(255,253,247,.96),rgba(255,248,232,.94))}
  .tLogo .tZh{font-size:clamp(38px,11vw,46px);-webkit-text-stroke:5px #fff8e8} .tLogo .tEn{font-size:11.5px;letter-spacing:.16em}
  .tLead{font-size:13.5px;margin:8px 0 14px}
  .tBtns{gap:8px} #tStart{min-height:56px;font-size:20px} #tHelp{min-height:48px;font-size:14.5px} #btnSettingsTitle{width:48px;height:48px;min-height:48px}
  .tBtns{grid-template-columns:1fr 48px}
  .tRating{margin-top:12px;padding:5px 8px} .tRating img{width:45px;height:45px} .tRating p{font-size:11px}
  .tCredit{display:none}
}
@media (max-width:720px) and (orientation:landscape){
  .title{align-items:center;justify-content:flex-start;padding:0;background-image:url("assets/scenes/title_bg.webp");background-position:70% center}
  .tCard{left:12px;right:auto;top:50%;bottom:auto;transform:translateY(-50%);width:min(400px,54vw);padding:14px 16px 12px;animation:none}
  .tLogo .tZh{font-size:32px} .tLead{margin:6px 0 10px;font-size:12.5px} #tStart{min-height:48px;font-size:17px} #tHelp{min-height:42px}
  .tRating{display:flex;margin-top:8px;padding:4px 8px;gap:8px} .tRating img{width:45px;height:45px} .tRating p{font-size:10px;line-height:1.35}
}
@media (min-width:821px) and (max-height:600px){
  .tCard{top:16px;left:24px;padding:16px 20px 12px} .tLogo .tZh{font-size:40px} .tLead{margin:6px 0 10px;font-size:13px} #tStart{min-height:50px;font-size:18px}
  .tRating{margin-top:10px;padding:4px 8px} .tRating img{width:45px;height:45px} .tRating p{font-size:10.5px;line-height:1.35}
}

/* ---- 大廳：第一局開始前是全景場景（無角色咖啡廳背景＋開放式舞台），開局後打開是壓在 3D 上的浮層 ---- */
html:not(.inGame) #modalIntro{z-index:50;background:#3a2c12 url("assets/scenes/lobby_bg_wide.webp") center/cover no-repeat;backdrop-filter:none;-webkit-backdrop-filter:none;display:none;align-items:stretch;justify-content:stretch;overflow:auto;overscroll-behavior:contain}
html:not(.inGame) #modalIntro.open{display:flex}
html:not(.inGame) #modalIntro::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(60,35,10,.14),rgba(60,35,10,0) 26%,rgba(60,35,10,0) 62%,rgba(60,35,10,.30))}
@media (orientation:portrait){html:not(.inGame) #modalIntro{background-image:url("assets/scenes/lobby_bg_tall.webp");background-position:center top}}
html:not(.inGame) #modalIntro .mcard.lobby{position:relative;width:100%;max-width:none;max-height:none;min-height:100%;margin:0;background:none;border:0;box-shadow:none;border-radius:0;overflow:visible;animation:none;
  display:flex;flex-direction:column;align-items:center;padding:calc(14px + env(safe-area-inset-top)) clamp(16px,3vw,40px) 24px;gap:0}
html:not(.inGame) .soc-dock{top:max(14px,env(safe-area-inset-top)) !important;right:max(14px,env(safe-area-inset-right)) !important}
/* 標題畫面 .title 是 z-index:95 的全螢幕層, 園區那一排(60)、它開的面板(61)與通知都被整個蓋住,
   首頁看不到園區／好友／登入入口。標題顯示時把它們抬到標題上面, 仍低於說明 modal(100)。 */
.title:not([hidden]) ~ .soc-dock{z-index:96}
.title:not([hidden]) ~ .soc-wrap,.title:not([hidden]) ~ .soc-toasts{z-index:97}
/* 頂列：左邊 logo 貼紙、右邊通行證身分（園區 dock 在它右邊，用 --park-dock-w 讓位） */
.mcard.lobby .lbTitle{order:0;width:100%;align-items:center;gap:14px;padding-right:calc(var(--park-dock-w,0px) + 12px)}
html:not(.inGame) .mcard.lobby .lbTitle h2{font-size:38px;color:#c9502a;paint-order:stroke fill;-webkit-text-stroke:6px #fff8e8;text-shadow:0 3px 0 rgba(120,60,20,.22),0 8px 20px rgba(60,35,10,.22);letter-spacing:.04em}
html:not(.inGame) .mcard.lobby .lbTitle .sub{color:#fff5dc;text-shadow:0 1px 4px rgba(60,35,10,.6);margin:2px 0 0;font-size:11px}
.lbCareer{font-family:var(--sans);font-weight:600;color:#fff5dc;text-shadow:0 1px 4px rgba(60,35,10,.6);font-size:12px}
html:not(.inGame) .mcard.lobby #badgeMount{display:flex;align-items:center;gap:8px}
/* 舞台：選中的角色站在店裡，腳下是名字 */
.lbStage{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;width:100%;height:clamp(200px,32vh,320px);position:relative}
.lbStage::before{content:"";position:absolute;left:50%;bottom:26px;width:min(360px,60%);height:38px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(60,35,10,.30),rgba(60,35,10,0) 70%);pointer-events:none}
.lbStage img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 14px 18px rgba(60,35,10,.35));position:relative;z-index:1;animation:heroFloat 6s ease-in-out infinite}
.lbStage img.in{animation:heroIn .24s cubic-bezier(.22,1,.36,1),heroFloat 6s ease-in-out .24s infinite}
.lbStage img[hidden]{display:none}
.lbHeroName{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:2;font-family:var(--sans);font-weight:700;font-size:15px;color:var(--sign-fg);background:var(--sign);border:2px solid var(--sign-edge);border-radius:12px;padding:5px 16px;box-shadow:0 4px 0 var(--sign-base),0 8px 18px rgba(60,35,10,.3);text-shadow:0 1px 0 rgba(60,35,10,.5);white-space:nowrap}
.lbHeroName:empty{display:none}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes heroIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
html.inGame .lbStage{display:none}
/* 名字＋五張臉：舞台下一排 */
.mcard.lobby .lobbyGrid{order:1;flex-direction:column;align-items:center;gap:14px;margin:0 0 18px;width:100%}
html:not(.inGame) .mcard.lobby .lobbyGrid{margin-top:8px}
.lbField{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.04em;color:#fff5dc;text-shadow:0 1px 4px rgba(60,35,10,.6);align-items:center}
html.inGame .lbField{color:var(--ui-gold-dark);text-shadow:none}
.lbField input{width:300px;height:50px;font-size:16px;font-weight:700;text-align:center;border:2.5px solid #fff;border-radius:16px;background:rgba(255,253,247,.95);color:var(--ink);box-shadow:0 4px 0 rgba(150,110,40,.16),0 8px 18px rgba(60,40,20,.14)}
.lbField input:focus{border-color:var(--ui-gold);box-shadow:0 0 0 4px rgba(245,169,27,.18),0 4px 0 rgba(150,110,40,.16)}
.charPick{gap:10px;flex-wrap:wrap;justify-content:center}
.charPick button{width:74px;padding:8px 4px 7px;gap:4px;border:2.5px solid #fff;border-radius:16px;background:rgba(255,253,247,.92);color:var(--ink2);font-family:var(--sans);font-weight:700;font-size:12px;box-shadow:0 4px 0 rgba(150,110,40,.16),0 8px 18px rgba(60,40,20,.14);transition:transform var(--ui-speed-fast),box-shadow var(--ui-speed-fast),border-color var(--ui-speed-fast)}
.charPick button:hover{border-color:#fff;transform:translateY(-2px)}
.charPick button.on{border-color:var(--ui-gold);background:linear-gradient(#fff6dc,#fffdf7);color:var(--ink);transform:translateY(-4px);box-shadow:0 0 0 3px rgba(245,169,27,.3),0 6px 0 rgba(150,110,40,.16),0 10px 22px rgba(60,40,20,.18)}
.charPick img{width:42px;height:42px} .charPick .dot{width:34px;height:34px}
/* 三個入口：唯一蜂蜜黃主鍵＝開始遊戲，和朋友一起＝奶油 */
.mcard.lobby .lobbyHome{order:2;width:min(420px,100%);border-top:0;padding-top:0;gap:12px;align-items:stretch}
.lbMain{min-height:60px;border-radius:18px;padding:10px 18px;gap:14px;justify-content:flex-start}
.lbMain b{font-family:var(--sans);font-size:19px;letter-spacing:.02em} .lbMain small{font-weight:600;font-size:12.5px;color:var(--ink3)}
html.noCareer #btnChallenge{min-height:66px;border-width:3px;box-shadow:0 8px 0 var(--honey-base),0 16px 30px rgba(120,70,10,.3),inset 0 2px 0 rgba(255,255,255,.55)}
html.noCareer #btnChallenge:active{transform:translateY(5px);box-shadow:0 3px 0 var(--honey-base),0 8px 18px rgba(120,70,10,.25)}
#btnChallenge b{font-size:21px} #btnChallenge small{color:#8a5a10;opacity:1} #btnChallenge>svg{width:24px;height:24px}
#btnFriends{background:rgba(255,252,244,.95)} #btnFriends>svg{color:var(--ui-blue)}
.lbMain.dark small{color:#8a5a10}
.lbHomeFoot{justify-content:center} .lbHomeFoot .snote{text-align:center;color:#fff5dc;text-shadow:0 1px 4px rgba(60,35,10,.6)} html.inGame .lbHomeFoot .snote{color:var(--ink3);text-shadow:none}
/* 和朋友一起／房間：奶油卡；房號是木牌；返回、離開在右上 */
.mcard.lobby .lobbyFriends,.mcard.lobby .lobbyRoom{order:2;width:min(720px,100%);margin:0;padding:18px 20px 20px;border-top:0;background:var(--card);border:3px solid #fff;border-radius:22px;box-shadow:var(--card-shadow)}
html.inGame .mcard.lobby .lobbyFriends,html.inGame .mcard.lobby .lobbyRoom{background:none;border:0;box-shadow:none;padding:14px 0 0;border-top:1px dashed var(--line);border-radius:0;width:100%}
.lbRoomHead{font-weight:600;color:var(--ink2);gap:10px;flex-wrap:wrap} .lbRoomHead>b:first-child{font-family:var(--sans);font-weight:700;font-size:20px;color:var(--ink)}
.lbRoomHead .code{font-family:var(--mono);font-weight:700;font-size:22px;letter-spacing:.22em;color:var(--sign-fg);background:var(--sign);border:2px solid var(--sign-edge);border-radius:12px;padding:5px 16px;box-shadow:0 4px 0 var(--sign-base);text-shadow:0 1px 0 rgba(60,35,10,.5)}
.lbRoomHead .rkind{font-family:var(--sans);font-weight:700;background:rgba(245,169,27,.18);color:var(--ui-gold-dark);border-color:transparent;padding:3px 10px}
.lbInvite{border:2px solid #fff;background:rgba(255,255,255,.7);border-radius:16px;padding:12px 14px;box-shadow:0 2px 0 rgba(150,110,40,.10)}
.lbOpt{font-weight:600;color:var(--ink2)} .lbOpt select{min-height:36px;padding:4px 8px}
.lbJoinRow{font-weight:700;color:var(--ink2)} .lbJoinRow input,#lbCode{height:44px;border:2px solid #fff;border-radius:12px;background:#fff;font-family:var(--mono);font-weight:700;font-size:15px;color:var(--ink);box-shadow:0 2px 0 rgba(150,110,40,.10);width:130px}
#lbCode:focus{border-color:var(--ui-gold)}
.rcard{border:2px solid #fff;background:rgba(255,255,255,.75);border-radius:14px;min-height:56px;box-shadow:0 2px 0 rgba(150,110,40,.10)} .rcard:hover:not(:disabled){border-color:var(--ui-gold)}
.rcard .rmain b{font-family:var(--sans)} .rcard small{font-weight:600} .rcard .rside{font-family:var(--geo)} .rcard .rside small.open{color:var(--ui-green)} .rcard .rside small.report{color:var(--ui-gold-dark)}
.lbPlayers li{border:2px solid #fff;background:rgba(255,255,255,.75);border-radius:14px;min-height:48px;font-weight:700;color:var(--ink);box-shadow:0 2px 0 rgba(150,110,40,.10)}
.lbPlayers li.me{border-color:var(--ui-gold);box-shadow:0 0 0 2px rgba(245,169,27,.25),0 2px 0 rgba(150,110,40,.10)}
.lbPlayers li.empty{border-style:dashed;border-color:rgba(150,115,55,.3);background:rgba(255,255,255,.35);color:var(--ink3);font-family:var(--sans);font-weight:600;font-size:12px}
.lbPlayers li .host{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.02em;color:var(--ui-gold-dark);background:rgba(245,169,27,.18);border-radius:999px;padding:2px 8px} .lbPlayers li .host.own{color:#fff;background:var(--ink)} .lbPlayers li .host.away{color:var(--ink3);background:rgba(150,115,55,.12)}
.lbStatus{font-family:var(--sans);font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(60,35,10,.7);font-size:13px;order:3;text-align:center;margin-top:12px} .lbStatus.ok{color:#b9f5c6} .lbStatus:empty{margin:0}
html.inGame .lbStatus{color:#c9502a;text-shadow:none} html.inGame .lbStatus.ok{color:var(--ui-green)}
.lbHint,.waitnote{font-family:var(--sans)}
#btnStart{min-height:52px;padding:0 28px !important;font-size:17px}
#lbWait{font-weight:600;color:var(--ink3)}
.lbRoomNote{color:var(--ui-gold-dark);font-weight:600}
/* 底列：設定（右上，園區 dock 左邊）；分級標示縮小到左下 */
.mcard.lobby>.foot{order:0;position:absolute;top:calc(14px + env(safe-area-inset-top));right:calc(var(--park-dock-w,0px) + clamp(16px,3vw,40px) + 10px);z-index:2;justify-content:flex-end}
html.inGame .mcard.lobby>.foot{position:static;order:4;justify-content:flex-start;margin-top:10px}
.mcard.lobby>.bnbRating{order:5;margin:20px 0 0;width:min(520px,100%);background:rgba(255,253,247,.86);gap:10px;padding:6px 10px} .mcard.lobby>.bnbRating img{width:45px;height:45px} .mcard.lobby>.bnbRating p{font-size:11px}
html.inGame .mcard.lobby>.bnbRating{display:none}
/* 子面板打開時舞台讓位（:has 沒支援的瀏覽器就維持原高） */
.mcard.lobby:has(#lobbyMenu[hidden]) .lbStage{height:clamp(110px,16vh,150px)}
.mcard.lobby:has(#lobbyMenu[hidden]) .lobbyGrid{margin-bottom:14px}
.mcard.lobby:has(#lobbyMenu[hidden]) .charPick button{width:60px;padding:6px 3px 5px;font-size:11px} .mcard.lobby:has(#lobbyMenu[hidden]) .charPick img{width:32px;height:32px}
.mcard.lobby:has(#lobbyMenu[hidden]) .lbField input{height:44px;width:260px}

/* ---- 大廳／入口：壓縮桌機與矮視窗 ---- */
@media (min-width:821px) and (max-height:820px){
  .lbStage{height:clamp(150px,24vh,220px)} .mcard.lobby .lobbyGrid{gap:10px} .lbMain{min-height:54px} html.noCareer #btnChallenge{min-height:60px}
  html:not(.inGame) .mcard.lobby .lbTitle h2{font-size:32px}
}
@media (max-height:560px){ .lbStage{display:none} .mcard.lobby>.bnbRating{display:none} }

/* ---- 手機（compact／≤820）：大廳單欄一個捲動容器，卡片同寬；入口與 modal 近全屏 ---- */
@media (max-width:820px){
  html:not(.inGame) #modalIntro .mcard.lobby{padding:calc(10px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));align-items:stretch}
  .mcard.lobby .lbTitle{gap:10px;padding-right:calc(var(--park-dock-w,0px) + 8px);min-height:48px}
  html:not(.inGame) .mcard.lobby .lbTitle h2{font-size:30px;-webkit-text-stroke:5px #fff8e8}
  .lbStage{height:clamp(160px,28vh,240px)}
  .charPick{gap:6px;flex-wrap:nowrap;width:100%;justify-content:space-between}
  .charPick button{width:0;flex:1 1 0;min-width:0;padding:7px 2px 6px;font-size:11px;border-radius:14px} .charPick img{width:36px;height:36px}
  .lbField{width:100%} .lbField input{width:100%}
  .mcard.lobby .lobbyHome{width:100%} .lbMain{min-height:56px} html.noCareer #btnChallenge{min-height:60px}
  .mcard.lobby .lobbyFriends,.mcard.lobby .lobbyRoom{width:100%;padding:14px 14px 16px}
  .mcard.lobby>.foot{right:calc(var(--park-dock-w,0px) + 24px);top:calc(10px + env(safe-area-inset-top))}
  .mcard.lobby>.bnbRating{width:100%}
  .lbPlayers{grid-template-columns:1fr}
}
html[data-layout="compact"] .mcard,html[data-layout="compact"] .mcard.lobby{border-radius:24px 24px 0 0;border-bottom:0;padding:16px 14px calc(16px + env(safe-area-inset-bottom));max-height:calc(100vh - 8px)}
html[data-layout="compact"]:not(.inGame) #modalIntro .mcard.lobby{border-radius:0;max-height:none;padding:calc(10px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom))}
html[data-layout="compact"] .mcard h2{font-size:23px}
html[data-layout="compact"] .lbMain{padding:9px 14px;gap:12px} html[data-layout="compact"] .lbMain b{font-size:17px} html[data-layout="compact"] #btnChallenge b{font-size:19px} html[data-layout="compact"] .lbMain small{font-size:12px}
html[data-layout="compact"] .charPick button{width:0} html[data-layout="compact"] .charPick img{width:36px;height:36px}
html[data-layout="compact"] .lv{min-height:0;padding:12px 14px} html[data-layout="compact"] .lvGrid{max-height:56vh}
html[data-layout="compact"] .tkt{width:108px;min-height:86px;padding:10px 6px 7px} html[data-layout="compact"] .tkt img,html[data-layout="compact"] .tkt .tkIco{width:34px;height:34px} html[data-layout="compact"] .tkt .tkN{font-size:12px}
html.lvHud[data-layout="compact"] .tkt{min-height:0;padding:9px 6px 6px;gap:2px} html.lvHud[data-layout="compact"] .tkt img,html.lvHud[data-layout="compact"] .tkt .tkIco{width:28px;height:28px}   /* 手機票矮一點：少蓋一截後牆 */
html[data-layout="compact"] .hud{border-radius:16px}
html.lvHud[data-layout="compact"] #chipScore,html.lvHud[data-layout="compact"] #dayWrap{min-height:44px;padding:0 14px;border-radius:999px} html.lvHud[data-layout="compact"] #dayWrap{padding:5px 14px;min-width:0}
html.lvHud[data-layout="compact"] #chipScore .big{font-size:18px} html.lvHud[data-layout="compact"] #dayWrap .row{font-size:15px} html.lvHud[data-layout="compact"] #dayWrap .row #hudLeft.left{font-size:15px}
html.lvHud[data-layout="compact"] #topbar .tbtn.icon{width:40px;height:40px;border-radius:13px}
html.lvHud[data-layout="compact"] #btnOpen{min-height:46px;padding:0 16px;font-size:15px}
html.lvHud[data-layout="compact"] #topbar .tbtn:not(.icon):not(#btnOpen){min-height:40px;padding:0 12px;font-size:13px}
html.lvHud[data-layout="compact"] #tasks.strip{top:calc(58px + env(safe-area-inset-top))}
html[data-layout="compact"] #hint{border-radius:18px}
html[data-layout="compact"] #tut{border-radius:16px}
html[data-layout="compact"] .setRow{min-height:50px;font-size:14px}
html[data-layout="compact"] #topbar{background:rgba(255,248,232,.94)}
/* 手機橫向（高度不到 520）：入口與大廳照手機版面，舞台再縮 */
@media (max-height:520px){
  .lbStage{height:110px} .mcard.lobby>.bnbRating{display:none}
  html:not(.inGame) .mcard.lobby .lbTitle h2{font-size:26px}
  .mcard.lobby .lobbyHome{flex-direction:row;width:100%;max-width:640px} .lbMain{flex:1 1 0;min-height:52px} html.noCareer #btnChallenge{min-height:56px}
}

/* ---- 動效與減少動畫 ---- */
.mcard{animation:mIn .28s cubic-bezier(.2,.75,.2,1)}
@media (prefers-reduced-motion:reduce){
  .lbStage img,.lbStage img.in,#btnOpen::after,.tutTarget,.trow2.urgent,.mcard,.toast,.tCard{animation:none !important}
  .tbtn,.lv,.charPick button,.tkt{transition:none}
}
html.reduceMotion .lbStage img,html.reduceMotion .lbStage img.in,html.reduceMotion #btnOpen::after,html.reduceMotion .tCard{animation:none !important}
/* ---- 第一輪截圖修正 ---- */
#modalLevels .mcard{width:min(920px,96vw) !important}
#btnLvClose,#btnLvRoom{background:rgba(255,252,244,.95);border-color:#fff;color:var(--ink2);box-shadow:0 3px 0 rgba(150,110,40,.18),0 6px 14px rgba(60,40,20,.12)}   /* 選關畫面的主要動作是點關卡卡；底列兩顆都是次鍵 */
.lv .lvRoom{background:var(--wood);color:var(--wood-fg);border:1.5px solid rgba(255,230,160,.35);box-shadow:none} .lv .lvRoom:hover{background:rgba(50,32,14,.95);border-color:rgba(255,230,160,.35)}
.lv .lvh{flex-wrap:nowrap} .lv .lvh .stars{flex:none}
html.lvHud #hint{top:auto;bottom:24px}   /* 關卡：提示條放底部中央，不跟票帶／頂列搶位 */
html.lvHud[data-layout="compact"] #hint{top:auto;bottom:calc(152px + env(safe-area-inset-bottom))}
.mcard.lobby .lbTitle{padding-right:calc(var(--park-dock-w,0px) + 12px + 56px)}   /* 右邊要讓出園區 dock ＋ 自家設定鈕 */
html:not(.inGame) .mcard.lobby #badgeMount{flex:none;max-width:40vw}
@media (max-width:820px){
  html:not(.inGame) .mcard.lobby .lbTitle .sub{display:none}
  .mcard.lobby .lbTitle{padding-right:calc(var(--park-dock-w,0px) + 8px + 52px)}
  html:not(.inGame) .mcard.lobby .lbTitle h2{font-size:28px}
}
.lbStatus{width:100%;margin-left:0}
html.inGame .lbStatus{text-align:left}
.lbOpt.chk{min-height:44px} .lbOpt.chk input{width:24px;height:24px}
@media (max-width:820px){ .mcard.lobby:has(#lobbyMenu[hidden]) .lbField input{width:100%} }
/* 手機橫向（compact.wide／max-height 520）：舞台收掉、名字與五張臉同一列、兩顆入口並排；對局提示條貼底部中央、教學卡縮到左側窄欄 */
html[data-layout="compact"] .charPick{flex-wrap:nowrap;justify-content:center;gap:6px} html[data-layout="compact"] .charPick button{flex:1 1 0;min-width:0;max-width:74px}
@media (max-height:520px){
  .lbStage{display:none}
  .mcard.lobby .lobbyGrid{flex-direction:row;justify-content:center;align-items:flex-end;gap:18px;margin-bottom:12px}
  .lbField{width:auto} .lbField input{width:240px;height:46px}
  .charPick{flex-wrap:nowrap;width:auto} .charPick button,html[data-layout="compact"] .charPick button{flex:none;width:62px;padding:6px 3px 5px;font-size:11px} .charPick img{width:32px;height:32px}
  .mcard.lobby>.foot{top:8px}
}
html.lvHud[data-layout="compact"].wide #hint{top:auto;bottom:calc(10px + env(safe-area-inset-bottom));max-width:calc(100% - 320px);padding:8px 14px}
html.lvHud[data-layout="compact"].wide #tut{left:8px;right:auto;width:236px;top:calc(58px + env(safe-area-inset-top));text-align:left}