:root{
  --tabs-height:49px;
  --line:#1A1433; --bg:#9BD7F0; --panel:#FFFDF5; --panel2:#E6F4FF; --text:#1A1433; --muted:#57527E;
  --tomato:#F2543D; --matcha:#5DBB4A; --yolk:#FFC83D; --sakura:#FF8FB1;
  box-sizing:border-box;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --line:#0C0A24; --bg:#1C1A45; --panel:#2E2A6B; --panel2:#3A3584; --text:#FFF6DD; --muted:#BDB7EA; }
}
:root[data-theme="dark"]{ --line:#0C0A24; --bg:#1C1A45; --panel:#2E2A6B; --panel2:#3A3584; --text:#FFF6DD; --muted:#BDB7EA; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{height:100%}
body{margin:0;padding-top:env(safe-area-inset-top,0px);background:var(--bg);color:var(--text);
  font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei","Heiti TC",system-ui,sans-serif;
  font-size:15px;line-height:1.5;-webkit-tap-highlight-color:transparent}
.num{font-family:"Press Start 2P",ui-monospace,"Courier New",monospace;letter-spacing:0}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--yolk);outline-offset:2px}
h2{font-size:17px;margin:0 0 10px;font-weight:900}
.app{max-width:480px;margin:0 auto;padding:12px 14px calc(120px + env(safe-area-inset-bottom,0px))}
.app.withstart{padding-bottom:calc(200px + env(safe-area-inset-bottom,0px))}
#app.rank-page{display:flex;flex-direction:column;min-height:calc(100vh - env(safe-area-inset-top,0px));min-height:calc(100dvh - env(safe-area-inset-top,0px))}
#app.rank-page main{display:flex;flex:1;flex-direction:column}
#app.rank-page #tab-rank{flex:1}
.box{background:var(--panel);border:3px solid var(--line);box-shadow:4px 4px 0 var(--line)}
.pad{padding:14px;margin-top:14px}
.muted{color:var(--muted);font-size:13px}
.hrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px}
.lv{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.lvn{background:var(--tomato);color:#fff;border:3px solid var(--line);font-size:11px;padding:8px 6px;white-space:nowrap}
.lvt{font-weight:900;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xpbar{height:8px;background:var(--panel2);border:2px solid var(--line);margin-top:3px}
.xpbar i{display:block;height:100%;background:var(--matcha);width:0}
.chips{display:flex;gap:6px}
.chip{display:flex;align-items:center;gap:6px;background:var(--panel2);border:2px solid var(--line);padding:5px 7px;font-size:11px}
.coinic{display:inline-block;width:14px;height:14px;background:var(--yolk);border:2px solid var(--line);box-shadow:inset -3px -3px 0 #E09A1A;flex:none;vertical-align:-2px}
.fireic{width:12px;height:15px;background:var(--tomato);flex:none;
  clip-path:polygon(33% 0,50% 0,50% 20%,67% 20%,67% 40%,84% 40%,84% 27%,100% 27%,100% 100%,0 100%,0 40%,16% 40%,16% 20%,33% 20%)}

/* home stage */
.stage{margin-top:14px;position:relative;overflow:hidden}
.stage canvas{width:100%;height:auto}
.arr{position:absolute;top:50%;transform:translateY(-70%);width:40px;height:48px;background:rgba(255,253,245,.92);color:#1A1433;border:3px solid var(--line);font-weight:900;font-size:18px}
.arr:active{transform:translateY(-65%)}
.arr.l{left:8px}.arr.r{right:8px}
.stage-cap{position:absolute;left:8px;right:8px;bottom:8px;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;pointer-events:none}
.stage-cap b{background:var(--line);color:#FFF6DD;font-size:13px;padding:3px 8px}
.stage-cap span{background:rgba(255,253,245,.92);color:#1A1433;font-size:12px;padding:3px 8px;border:2px solid var(--line);text-align:right}
.stage-idx{position:absolute;top:8px;left:8px;background:var(--line);color:#FFF6DD;font-size:9px;padding:4px 6px}

/* today */
.today{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.today div{background:var(--panel2);border:2px solid var(--line);padding:7px 8px}
.today span{display:block;font-size:12px;color:var(--muted)}
.today b{display:block;font-size:13px;margin-top:4px}
.week{margin-top:10px}
.week .bar{height:14px;background:var(--panel2);border:2px solid var(--line);margin-top:4px}
.week .bar i{display:block;height:100%;background:var(--matcha)}
.linkish{background:none;border:0;padding:0;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:3px}

/* bpm control */
.bpm-ctl{display:grid;grid-template-columns:44px 44px 1fr 44px 44px;gap:6px;align-items:center}
.sq{height:44px;background:var(--panel2);border:3px solid var(--line);box-shadow:0 3px 0 var(--line);font-weight:900}
.sq:active{transform:translateY(3px);box-shadow:none}
.bpm-big{text-align:center;font-size:34px;line-height:1;color:var(--tomato);text-shadow:3px 3px 0 var(--line)}
input[type=range]{width:100%;margin:14px 0 6px;accent-color:var(--tomato);height:28px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pill{background:var(--panel2);border:2px solid var(--line);padding:6px 11px;font-size:13px;font-weight:700;white-space:nowrap}
.pill[aria-pressed="true"]{background:var(--yolk);color:#1A1433}
.pill[disabled]{opacity:.45}
.hint{margin:10px 0 0;font-size:13px;color:var(--muted);background:var(--panel2);padding:8px 10px;border-left:5px solid var(--matcha)}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode{text-align:left;background:var(--panel2);border:3px solid var(--line);padding:9px 10px;font-weight:900;font-size:14px}
.mode small{display:block;font-weight:400;font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px}
.mode[aria-pressed="true"]{background:var(--matcha);color:#10240F;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.mode[aria-pressed="true"] small{color:#1E3D1B}
.scenes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.scene{position:relative;border:3px solid var(--line);padding:0;background:none}
.scene canvas{width:100%;height:auto}
.scene b{position:absolute;left:4px;bottom:4px;background:var(--line);color:#FFF6DD;font-size:12px;padding:1px 6px}
.scene[aria-pressed="true"]{outline:4px solid var(--yolk);outline-offset:-1px}
.scene[disabled] canvas{filter:grayscale(1) brightness(.55)}
.scene small{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#FFF6DD;font-size:12px;font-weight:800;text-align:center;padding:4px}
.btn{border:3px solid var(--line);box-shadow:0 5px 0 var(--line);background:var(--yolk);color:#1A1433;font-weight:900;padding:10px 16px}
.btn:active{transform:translateY(5px);box-shadow:none}
.btn.red{background:var(--tomato);color:#fff}
.btn.ghost{background:#FFF6DD}
.btn.green{background:var(--matcha);color:#10240F}
.btn[disabled]{opacity:.45;pointer-events:none}
.start{display:block;width:100%;font-size:21px;padding:13px;letter-spacing:3px}
.startbar{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + var(--tabs-height));z-index:19;padding:14px 14px 10px;
  background:linear-gradient(to bottom,transparent,var(--bg) 40%);display:none}
.startbar.on{display:block}
.startbar>div{max-width:480px;margin:0 auto}
.startbar small{display:block;text-align:center;font-size:12px;color:var(--muted);margin-top:8px;font-weight:700}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--panel);border-top:3px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs-in{max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr)}
.tabs button{background:none;border:0;height:46px;font-size:13px;font-weight:800;color:var(--muted);position:relative;padding:0}
.tabs button[aria-selected="true"]{background:var(--yolk);color:#1A1433}
.tabs .dot{position:absolute;top:6px;right:14%;width:8px;height:8px;background:var(--tomato);border:2px solid var(--line);display:none}
.tabs .dot.on{display:block}
.tab{display:none}.tab.on{display:block}

/* campaign */
.world{margin-top:14px;overflow:hidden}
.world-head{position:relative}
.world-head canvas{width:100%;height:auto;max-height:120px;object-fit:cover}
.world-head .wt{position:absolute;left:10px;bottom:10px;background:var(--line);color:#FFF6DD;padding:4px 10px;font-weight:900}
.world-head .ws{position:absolute;right:10px;bottom:10px;background:#FFF6DD;color:#1A1433;border:2px solid var(--line);padding:4px 8px;font-size:10px}
.world.locked .world-head canvas{filter:grayscale(1) brightness(.5)}
.world-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#FFF6DD;font-weight:900;text-align:center;padding:10px}
.lvgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px}
.lvbtn{text-align:left;background:var(--panel2);border:3px solid var(--line);padding:8px 10px}
.lvbtn b{display:block;font-size:14px}
.lvbtn small{display:block;font-size:12px;color:var(--muted)}
.lvbtn .st{font-size:15px;letter-spacing:2px;color:var(--panel);text-shadow:1px 1px 0 var(--line)}
.lvbtn .st .on{color:var(--yolk)}
.lvbtn[disabled]{opacity:.5}
.lvbtn.clear{background:var(--panel)}
.segchart{display:flex;align-items:flex-end;gap:2px;height:80px;border-bottom:3px solid var(--line);margin:10px 0 4px}
.segchart div{background:var(--tomato);border:2px solid var(--line);border-bottom:0;min-width:3px}
.segchart div.ramp{background:var(--yolk)}
.crit{list-style:none;padding:0;margin:8px 0}
.crit li{padding:4px 0;font-size:14px}
.crit .ok{color:var(--matcha);font-weight:900}
.crit .no{color:var(--muted)}

/* quests */
.q{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:2px dashed var(--panel2)}
.q:last-child{border-bottom:0}
.q .qt{flex:1;min-width:0;font-weight:700;font-size:14px}
.q .qb{height:8px;background:var(--panel2);border:2px solid var(--line);margin-top:4px}
.q .qb i{display:block;height:100%;background:var(--yolk)}
.q .rw{font-size:10px;display:flex;align-items:center;gap:4px;color:var(--muted);justify-content:flex-end}
.q button{font-size:13px;padding:6px 10px;box-shadow:0 3px 0 var(--line)}
.q .ok{font-size:13px;color:var(--matcha);font-weight:900}
.streak{display:flex;align-items:center;gap:14px}
.streak .big{font-size:30px;color:var(--tomato);text-shadow:3px 3px 0 var(--line)}
.badges{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.badge{border:2px solid var(--line);padding:8px 10px;background:var(--panel2)}
.badge b{display:block;font-size:14px}
.badge span{font-size:12px;color:var(--muted)}
.badge.got{background:var(--yolk);color:#1A1433}
.badge.got span{color:#5A4700}
.badge:not(.got){opacity:.6}

/* characters */
.chars{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{border:3px solid var(--line);background:var(--panel2);padding:10px;display:flex;flex-direction:column;gap:6px}
.card canvas{width:80px;height:72px;margin:0 auto;background:var(--panel);border:2px solid var(--line)}
.card .nm{font-weight:900;text-align:center}
.card .pk{font-size:12px;color:var(--muted);text-align:center;min-height:36px}
.card .btn{font-size:13px;padding:7px;box-shadow:0 3px 0 var(--line);margin-top:auto}
.card.cur{background:var(--yolk);color:#1A1433}
.card.cur .pk{color:#5A4700}

/* records */
.sum{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sum div{border:2px solid var(--line);background:var(--panel2);padding:8px 10px}
.sum b{display:block;font-size:14px;margin-top:4px}
.sum span{font-size:12px;color:var(--muted)}
.chart{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:130px;padding-top:8px}
.chart .c{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.chart .bar{width:70%;background:var(--matcha);border:2px solid var(--line);min-height:3px}
.chart .bar.today{background:var(--tomato)}
.chart small{font-size:11px;color:var(--muted)}
.chart em{font-style:normal;font-size:8px}
.hist{list-style:none;margin:0;padding:0}
.hist li{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:2px dashed var(--panel2);font-size:13px}
.hist li:last-child{border-bottom:0}
.hist .st{color:var(--yolk);text-shadow:1px 1px 0 var(--line);letter-spacing:1px}
.empty{font-size:14px;color:var(--muted);padding:6px 0}

/* settings */
.set-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:2px dashed var(--panel2)}
.set-row:last-child{border-bottom:0}
.toggle{width:58px;height:30px;border:3px solid var(--line);background:var(--panel2);position:relative;flex:none}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--muted);transition:left .12s}
.toggle[aria-pressed="true"]{background:var(--matcha)}
.toggle[aria-pressed="true"]::after{left:30px;background:var(--line)}
.set-row input[type=number]{width:84px;font:inherit;padding:6px;border:3px solid var(--line);background:var(--panel2);color:var(--text)}
.guide p{margin:0 0 8px;font-size:14px}
.guide p:last-child{margin:0}
textarea{width:100%;min-height:90px;font:12px/1.4 ui-monospace,monospace;border:3px solid var(--line);background:var(--panel2);color:var(--text);padding:8px;margin:8px 0}

/* run overlay */
.run{position:fixed;inset:0;z-index:50;display:none;flex-direction:column;gap:10px;background:#1C1A45;color:#FFF6DD;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px calc(env(safe-area-inset-bottom,0px) + 14px);overflow-y:auto}
.run.on{display:flex}
.run>*{width:100%;max-width:480px;margin-left:auto;margin-right:auto}
.run-top{display:flex;justify-content:space-between;align-items:flex-end}
.lbl{font-size:12px;color:#BDB7EA}
.big2{font-size:18px;margin-top:4px}
.stg{background:#FFC83D;color:#1A1433;font-weight:900;font-size:13px;padding:3px 10px;border:3px solid #0C0A24;text-align:center}
.run-scene{position:relative;border:3px solid #0C0A24;box-shadow:4px 4px 0 #0C0A24}
.run-scene canvas{width:100%;height:auto}
.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;color:#FFC83D;
  text-shadow:4px 4px 0 #0C0A24;background:rgba(28,26,69,.45);text-align:center;line-height:1.4;padding:10px}
.countdown.small{font-size:16px;font-family:"PingFang TC","Noto Sans TC",system-ui,sans-serif;font-weight:900}
.countdown[hidden]{display:none}
.floaters{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fl{position:absolute;font-size:11px;color:#FFC83D;text-shadow:2px 2px 0 #0C0A24;animation:up 1.2s steps(8) forwards}
@keyframes up{to{transform:translateY(-40px);opacity:0}}
.chestpop{position:absolute;right:10px;top:10px;display:none;flex-direction:column;align-items:center;gap:4px;
  background:#FFF6DD;color:#1A1433;border:3px solid #0C0A24;padding:8px 10px;font-size:11px}
.chestpop.on{display:flex;animation:pop .5s steps(5)}
.chestpop canvas{width:48px;height:36px}
@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.run-bpm{text-align:center}
.bpmN{font-size:52px;line-height:1.1;color:#FFC83D;text-shadow:4px 4px 0 #0C0A24;display:inline-block}
.bpmN.beat{animation:beat .12s steps(2)}
@keyframes beat{0%{transform:scale(1.1)}100%{transform:scale(1)}}
.dots{display:flex;justify-content:center;gap:10px;margin-bottom:8px}
.dots i{width:14px;height:14px;background:#3A3584;border:2px solid #0C0A24}
.dots i.on{background:#F2543D}
.nextseg{display:inline-block;margin-top:6px;background:#3A3584;border:2px solid #0C0A24;padding:3px 10px;font-size:13px;font-weight:800}
.nextseg:empty{display:none}
.run-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.run-stats div{background:#2E2A6B;border:3px solid #0C0A24;padding:8px 4px}
.run-stats b{display:block;font-size:14px;margin-top:4px}
.chestbar{display:flex;align-items:center;gap:10px;font-size:12px;color:#BDB7EA}
.chestbar .bar{flex:1;height:12px;background:#2E2A6B;border:2px solid #0C0A24}
.chestbar .bar i{display:block;height:100%;background:#FFC83D;width:0}
.tip{background:#FFF6DD;color:#1A1433;border:3px solid #0C0A24;padding:10px 12px;font-weight:700;font-size:15px;min-height:48px}
.run-ctl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:auto}
.run-ctl .btn{font-size:18px;padding:12px}

/* modal + toast */
.modal{position:fixed;inset:0;z-index:80;background:rgba(12,10,36,.7);display:none;align-items:center;justify-content:center;padding:20px}
.modal.on{display:flex}
.mbox{width:100%;max-width:400px;max-height:88vh;overflow-y:auto;padding:18px}
.res-h{font-size:21px;font-weight:900;text-align:center}
.stars{text-align:center;font-size:40px;letter-spacing:6px;color:var(--panel2);text-shadow:3px 3px 0 var(--line);margin:4px 0}
.stars .on{color:var(--yolk)}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.res-grid div{border:2px solid var(--line);background:var(--panel2);padding:8px;text-align:center}
.res-grid b{display:block;font-size:13px}
.res-grid span{font-size:12px;color:var(--muted)}
.rw-list{border:2px solid var(--line);padding:8px 10px;font-size:14px}
.rw-list div{display:flex;justify-content:space-between;padding:2px 0}
.rw-list .tot{border-top:2px dashed var(--line);margin-top:4px;padding-top:6px;font-weight:900}
.notice{margin-top:10px;background:var(--matcha);color:#10240F;border:2px solid var(--line);padding:8px 10px;font-weight:800;font-size:14px}
.notice.y{background:var(--yolk);color:#1A1433}
.mclose{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:16px}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 130px);transform:translateX(-50%);z-index:90;
  background:var(--line);color:#FFF6DD;padding:10px 14px;font-size:14px;font-weight:700;display:none;max-width:90%;text-align:center}
.toast.on{display:block}
.evbanner{display:block;width:100%;margin-top:14px;text-align:left;background:var(--sakura);color:#1A1433;border:3px solid var(--line);box-shadow:4px 4px 0 var(--line);padding:10px 12px;font-weight:900;font-size:15px}
.evbanner small{display:block;font-weight:700;font-size:12px;margin-top:2px}
.evbox{border-color:var(--line);background:linear-gradient(var(--panel),var(--panel))}
.card canvas{height:94px}
.card .cl{font-size:12px;text-align:center;color:var(--muted);font-weight:700}
.card.cur .cl{color:#5A4700}
.card .clbar{height:7px;background:var(--panel);border:2px solid var(--line)}
.card .clbar i{display:block;height:100%;background:var(--sakura)}
.card .row2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto}
.card .row2 .btn{margin-top:0}
.dresscv{width:150px;height:160px;margin:10px auto;background:var(--panel2);border:3px solid var(--line)}
.hbtn{width:34px;height:34px;flex:none;border:2px solid var(--line);background:var(--panel2);font-weight:900;font-size:16px;position:relative;padding:0;line-height:1}
.hbtn .dot{position:absolute;top:-5px;right:-5px;width:10px;height:10px;background:var(--tomato);border:2px solid var(--line);display:none}
.hbtn .dot.on{display:block}
.chips{align-items:center}
.today{grid-template-columns:1fr 1fr}
.today b{font-size:14px}
.weeksub{font-size:12px;color:var(--muted);margin-top:6px}
.rank{list-style:none;margin:10px 0 0;padding:0}
.rank li{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;padding:9px 6px;border-bottom:2px dashed var(--panel2)}
.rank li.me{background:var(--yolk);color:#1A1433;border:2px solid var(--line)}
.rank .rk{font-size:12px;text-align:center}
.rank li:nth-child(1) .rk{color:#C9961A}.rank li:nth-child(2) .rk{color:#8C8FA8}.rank li:nth-child(3) .rk{color:#B86B2E}
.rank .nm{font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .nm small{font-weight:400;color:var(--muted);margin-left:2px}
.rank li.me .nm small{color:#5A4700}
.rank .vv{font-size:11px}
.myrank{margin-top:10px;background:var(--panel2);border:2px solid var(--line);padding:8px 10px;font-weight:800;font-size:14px}
.sync{font-size:13px;padding:8px 10px;border:2px solid var(--line);background:var(--panel2);margin-top:8px}
.sync.warn{background:#FFE3DE}
.sync.ok{background:#DDF3D5}
.nickin{width:100%;font:inherit;font-size:17px;padding:10px;border:3px solid var(--line);background:var(--panel2);color:var(--text);margin:6px 0}
.privacy{background:#FFF1C9;color:#1A1433;border:2px solid var(--line);padding:9px 10px;font-size:13px;margin:8px 0}
.privacy b{display:block;margin-bottom:2px}
.obdots{display:flex;justify-content:center;gap:8px;margin:10px 0}
.obdots i{width:10px;height:10px;border:2px solid var(--line);background:var(--panel2)}
.obdots i.on{background:var(--tomato)}
.obcv{width:120px;height:130px;margin:6px auto;display:block}
.oblist{margin:8px 0;padding-left:1.2em;font-size:14px}
.oblist li{margin:4px 0}
.row2b{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.reccode{font-size:22px;text-align:center;letter-spacing:4px;background:var(--panel2);border:3px dashed var(--line);padding:14px;margin:10px 0;user-select:all}
.sharebox{margin-top:12px;border:3px solid var(--line);background:var(--sakura);color:#1A1433;padding:10px 12px;text-align:center}
.sharebox .muted{color:#4A2A3A}
.sharebox .btn{margin-top:8px;width:100%}
.shareimg{display:block;width:100%;max-width:320px;margin:10px auto;border:3px solid var(--line)}
.sharegrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.sharegrid .btn{font-size:13px;padding:9px 4px;white-space:nowrap}
.helptabs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.helpbody p,.helpbody li{font-size:14px}
.helpbody ul{padding-left:1.2em;margin:6px 0}
.helpbody h3{font-size:15px;margin:12px 0 4px}
.updbar{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);transform:translateX(-50%);z-index:95;background:var(--line);color:#FFF6DD;padding:8px 10px;display:none;gap:10px;align-items:center;font-size:14px;font-weight:700;max-width:92%}
.updbar.on{display:flex}
.updbar button{background:var(--yolk);color:#1A1433;border:2px solid #0C0A24;font-weight:900;padding:4px 10px}
.acctbar{display:block;width:100%;margin-top:14px;text-align:left;background:var(--yolk);color:#1A1433;border:3px solid var(--line);box-shadow:4px 4px 0 var(--line);padding:10px 12px;font-weight:900}
.acctbar small{display:block;font-weight:700;font-size:12px}
.metric{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.metric .pill{font-size:12px;padding:4px 9px}
.pausep{background:#2E2A6B;border:3px solid #0C0A24;box-shadow:4px 4px 0 #0C0A24;padding:12px;display:grid;gap:12px}
.pausep[hidden]{display:none}
.pausep h3{margin:0;font-size:16px;color:#FFC83D}
.pausep .prow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pausep .plab{font-size:13px;color:#BDB7EA;font-weight:700;min-width:44px}
.pausep .pb{min-width:44px;height:40px;background:#3A3584;color:#FFF6DD;border:2px solid #0C0A24;font-weight:900}
.pausep .pb:active{transform:translateY(2px)}
.pausep .pv{flex:1;text-align:center;font-size:20px;color:#FFC83D}
.pausep .pn{flex:1;text-align:center;font-weight:900}
.pausep .pill{background:#3A3584;color:#FFF6DD;border-color:#0C0A24}
.pausep .pill[aria-pressed="true"]{background:#FFC83D;color:#1A1433}
.pausep .pnote{font-size:12px;color:#BDB7EA}
.pausep input[type=range]{margin:0;flex:1}
.run.paused .tip,.run.paused .chestbar{display:none}
@media (prefers-reduced-motion:reduce){ .bpmN.beat,.chestpop.on,.fl{animation:none} }

/* ====== 內容更新系統 ====== */
.ann{display:flex;gap:10px;align-items:flex-start;width:100%;margin-top:14px;text-align:left;padding:10px 12px;border:2px solid var(--line);background:#FFF4A8;color:#26325A;font-weight:800;font-size:14px;border-radius:12px;box-shadow:0 3px 0 var(--sh,rgba(0,0,0,.15))}
.ann.warn{background:#FFD6D0}.ann.gift{background:#FFD6E3}.ann.upd{background:#D5F5EA}
.ann small{display:block;font-weight:600;font-size:12px;opacity:.85;margin-top:2px}
.ann .x{margin-left:auto;flex:none;border:0;background:none;font-size:20px;font-weight:900;line-height:1;padding:0 2px;color:inherit}
.ci{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:10px 0}
.ci div{border:2px solid var(--line);border-radius:10px;background:var(--panel2);text-align:center;padding:6px 0 4px;font-size:11px;font-weight:800}
.ci div b{display:block;font-size:13px;margin-top:2px}
.ci .on{background:var(--yolk);color:#26325A}
.ci .today{outline:3px solid var(--tomato);outline-offset:1px}
.rdm{display:flex;gap:8px;margin-top:8px;align-items:center}.rdm input{flex:1;margin:0;text-transform:uppercase;letter-spacing:1px}
.mrow{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:2px dashed var(--panel2)}.mrow:last-child{border-bottom:0}

/* Mobile readability pass: enlarge helper copy while preserving compact pixel layout. */
@media (max-width:480px){
  body{font-size:clamp(16px,3.95vw,17px)}
  .app{padding-left:12px;padding-right:12px}
  h2{font-size:clamp(18px,4.55vw,20px);line-height:1.25}
  .muted,.linkish,.hint,.weeksub,.privacy,.sync,.lbl,.helpbody p,.helpbody li,.guide p{
    font-size:clamp(14px,3.55vw,15px)
  }
  .top{gap:7px;padding:8px}
  .top .lv{gap:7px}
  .lvn{font-size:12px}
  .lvt{font-size:clamp(14px,3.7vw,16px)}
  .chips{gap:5px}
  .chip{font-size:12px;padding:5px 6px}
  .stage-cap{gap:6px}
  .stage-cap b{font-size:clamp(13px,3.55vw,15px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .stage-cap span{font-size:clamp(12px,3.2vw,14px);max-width:64%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stage-idx{font-size:11px}
  .today span{font-size:clamp(12px,3.25vw,13px)}
  .today b{font-size:clamp(14px,3.7vw,16px)}
  .pill{font-size:clamp(14px,3.65vw,15px);padding:7px 10px}
  .hint{line-height:1.45}
  .mode{font-size:clamp(15px,3.9vw,16px);padding:10px}
  .mode small{font-size:clamp(13px,3.35vw,14px);line-height:1.45}
  .scene b{font-size:13px}
  .scene small{font-size:clamp(11px,3.05vw,13px)}
  .startbar small,.lvbtn small,.badge span,.card .pk,.card .cl,.res-grid span,.weeksub,.chestbar,.nextseg,.q .rw,.q .ok,.ann small,.evbanner small,.acctbar small,.sharebox .muted,.helpbody h3,.weeksub{
    font-size:clamp(13px,3.35vw,14px)
  }
  .tabs button{height:52px;font-size:clamp(14px,3.7vw,16px);white-space:nowrap}
  .start{font-size:clamp(21px,5.4vw,23px)}
  .q .qt{font-size:clamp(15px,3.9vw,16px)}
  .q button,.card .btn,.sharegrid .btn{font-size:14px}
  .card .pk{min-height:40px}
  .ci div{font-size:clamp(10.5px,2.8vw,12px);padding-left:1px;padding-right:1px}
  .ci div b{font-size:clamp(12px,3.15vw,13px)}
  .rank .rk{font-size:13px}
  .rank .vv{font-size:clamp(12px,3.2vw,13px)}
  .myrank{font-size:15px}
  .res-h{font-size:clamp(22px,5.3vw,24px)}
  .res-grid b{font-size:15px}
  .rw-list{font-size:15px}
  .notice,.ann{font-size:15px}
  .toast{font-size:15px;max-width:92%;width:max-content}
  .evbanner{font-size:clamp(15px,3.9vw,16px)}
  .updbar{font-size:14px}
  .acctbar{font-size:16px}
  .run-stats b{font-size:15px}
  .reccode{font-size:clamp(22px,6vw,26px);letter-spacing:clamp(2px,.7vw,4px)}
  .sharegrid{gap:7px}
  .sharegrid .btn{white-space:nowrap;padding-left:3px;padding-right:3px}
  .rank .nm{font-size:15px}
  .hbtn{width:36px;height:36px}
  .muted{font-size:clamp(14px,3.55vw,15px)!important}
  .lvbtn b,.badge b{font-size:15px}
  .sum b{font-size:15px}
  .sum span,.chart small{font-size:13px}
  .chart em{font-size:10px}
  .hist li{font-size:14px}
  .crit li{font-size:15px}
  .world-head .ws{font-size:12px}
  .helpbody p,.helpbody li{font-size:clamp(14px,3.55vw,15px)}
}
@media (max-width:375px){
  .top{gap:5px;padding:7px}
  .chips{gap:4px}
  .chip{gap:4px;padding-left:5px;padding-right:5px}
  .tabs button{font-size:14px}
  .bpm-ctl{grid-template-columns:42px 42px 1fr 42px 42px;gap:5px}
  .stage-cap span{max-width:62%}
}
@media (max-width:480px){
  :root{--tabs-height:55px}
  .tabs::after{content:"";position:absolute;top:100%;left:0;right:0;height:calc(env(safe-area-inset-bottom,0px) + 16px);background:var(--panel);pointer-events:none}
}
.brand-footer{padding:16px 4px 12px;text-align:center;color:var(--muted);font-size:12px;line-height:1.4;letter-spacing:.03em;white-space:nowrap}