:root{
  --u: 0.5px;
  --bg-base:#0E1116;
  --bg-panel:#171C24;
  --bg-panel2:#1F2630;
  --text-primary:#F2F4F8;
  --text-secondary:#9AA3B2;
  --gold:#F5C451;
  --gold-dark:#C99A2E;
  --success:#7ED6A5;
  --danger:#E06C75;
  --line-glow:#FFD98A;
  --ease:cubic-bezier(.22,.68,.28,1);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;background:#07090C;overflow:hidden;font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text-primary);}
body{display:flex;align-items:center;justify-content:center;}
#app{
  position:relative;width:100vw;height:100vh;max-width:560px;max-height:1000px;
  overflow:hidden;background:var(--bg-base);
  box-shadow:0 0 calc(var(--u)*80) rgba(0,0,0,.9);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
#game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;}
#ui-root{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;}
#ui-root .screen{pointer-events:auto;}
#ui-root .screen.hud-screen{pointer-events:none;}
#toast-root{position:absolute;left:0;right:0;top:calc(var(--u)*120);z-index:80;
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*10);pointer-events:none;}
/* 局内改为贴下缘，避开顶部罗盘；菜单/商店仍留在顶部不压按钮 */
#toast-root.in-game{top:auto;bottom:calc(var(--u)*380 + env(safe-area-inset-bottom));}
/* 道具反馈条：图标 + 一行短句，贴近画面下缘，不压罗盘也不挡迷宫中心 */
.toast{
  display:flex;align-items:center;gap:calc(var(--u)*14);max-width:82%;
  background:linear-gradient(180deg,rgba(14,17,22,.9),rgba(9,12,17,.95));
  color:var(--text-primary);font-size:calc(var(--u)*26);line-height:1.35;
  padding:calc(var(--u)*14) calc(var(--u)*24) calc(var(--u)*14) calc(var(--u)*18);
  border-radius:calc(var(--u)*16);
  border-top:calc(var(--u)*2) solid rgba(245,196,81,.34);
  box-shadow:0 calc(var(--u)*8) calc(var(--u)*28) rgba(0,0,0,.45),inset 0 calc(var(--u)*-1) 0 rgba(255,255,255,.04);
  animation:toastIn .22s var(--ease) both;text-align:left;
}
.toast .t-ic{flex:0 0 auto;width:calc(var(--u)*40);height:calc(var(--u)*40);border-radius:calc(var(--u)*12);
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,196,81,.1);border:calc(var(--u)*1) solid rgba(245,196,81,.22);}
.toast .t-ic svg{width:calc(var(--u)*28);height:calc(var(--u)*28);}
.toast .t-tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.toast.warn{border-top-color:rgba(224,108,117,.42);}
.toast.warn .t-tx{color:#F0C97C;}
.toast.hide{animation:toastOut .25s var(--ease) both;}
@keyframes toastIn{from{opacity:0;transform:translateY(calc(var(--u)*14)) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(calc(var(--u)*10))}}

/* ---------- screens ---------- */
.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;opacity:1;}
.screen.fade{animation:screenIn .22s var(--ease) both;}
@keyframes screenIn{from{opacity:0;transform:translateY(calc(var(--u)*8))}to{opacity:1;transform:none}}
/* 方向化转场：进入子页面自下而上滑入，返回时反向滑下 */
.screen.in-up{animation:screenUp .26s var(--ease) both;}
.screen.in-down{animation:screenDown .24s var(--ease) both;}
@keyframes screenUp{from{opacity:0;transform:translateY(calc(var(--u)*46))}to{opacity:1;transform:none}}
@keyframes screenDown{from{opacity:0;transform:translateY(calc(var(--u)*-28))}to{opacity:1;transform:none}}

.pad{padding:calc(var(--u)*48);padding-top:calc(var(--u)*72 + env(safe-area-inset-top));padding-bottom:calc(var(--u)*40 + env(safe-area-inset-bottom));}

/* 界面内可滚动区域统一隐藏原生滚动条（仍可滚动），避免右侧出现灰条破坏全屏观感 */
#ui-root *{scrollbar-width:none;}
#ui-root *::-webkit-scrollbar{display:none;}

/* menu */
.menu{justify-content:space-between;
  background:radial-gradient(120% 70% at 50% 18%, rgba(224,169,74,.14), transparent 60%),
             radial-gradient(100% 60% at 50% 100%, rgba(127,212,160,.07), transparent 60%),
             linear-gradient(180deg,#0b0e12,#0E1116 45%,#090b0e);}
.brand{text-align:center;margin-top:calc(var(--u)*90);}
.brand .logo-line{width:calc(var(--u)*160);height:calc(var(--u)*3);margin:0 auto calc(var(--u)*30);
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.8;}
.brand h1{font-size:calc(var(--u)*96);letter-spacing:calc(var(--u)*12);margin:0;font-weight:700;
  color:#F5C451;text-shadow:0 0 calc(var(--u)*26) rgba(245,196,81,.28);forced-color-adjust:none;
  filter:drop-shadow(0 calc(var(--u)*8) calc(var(--u)*30) rgba(245,196,81,.25));}
@media (hover:hover) and (pointer:fine){
  .brand h1{background:linear-gradient(180deg,#FFF3D2,#F5C451 55%,#B98723);
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;}
}
.brand .en{font-size:calc(var(--u)*24);letter-spacing:calc(var(--u)*14);color:var(--text-secondary);margin-top:calc(var(--u)*14);}
.brand .tag{font-size:calc(var(--u)*26);color:var(--text-secondary);margin-top:calc(var(--u)*34);letter-spacing:calc(var(--u)*2);}
.menu-buttons{display:flex;flex-direction:column;gap:calc(var(--u)*22);margin-bottom:calc(var(--u)*40);}
.menu-row{display:flex;gap:calc(var(--u)*22);}
/* 两列按钮宽度只有整行一半，放大后主文案与说明挤在一行会折字，改为上下排列 */
.menu-row .btn{flex:1;flex-direction:column;gap:calc(var(--u)*2);line-height:1.15;}

/* buttons */
.btn{
  appearance:none;border:none;outline:none;font-family:inherit;cursor:pointer;color:#1A1408;
  background:linear-gradient(180deg,#FFDA84,var(--gold) 55%,#D6A436);
  border-radius:calc(var(--u)*28);font-size:calc(var(--u)*38);font-weight:700;letter-spacing:calc(var(--u)*2);
  min-height:calc(var(--u)*112);padding:0 calc(var(--u)*30);
  box-shadow:0 calc(var(--u)*10) calc(var(--u)*26) rgba(245,196,81,.18), inset 0 calc(var(--u)*-4) 0 rgba(0,0,0,.14);
  transition:transform .12s var(--ease),filter .12s var(--ease),opacity .12s;
  display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*12);
}
.btn:active{transform:scale(.96);filter:brightness(.94);}
.btn.secondary{background:linear-gradient(180deg,#2C3542,#202730);color:var(--text-primary);
  border:calc(var(--u)*2) solid rgba(255,255,255,.1);box-shadow:none;}
.btn.ghost{background:rgba(23,28,36,.7);color:var(--text-secondary);border:calc(var(--u)*2) solid rgba(255,255,255,.08);box-shadow:none;}
.btn.small{min-height:calc(var(--u)*88);font-size:calc(var(--u)*30);border-radius:calc(var(--u)*24);}
.btn.tiny{min-height:calc(var(--u)*72);font-size:calc(var(--u)*24);border-radius:calc(var(--u)*20);padding:0 calc(var(--u)*22);}
.btn:disabled{opacity:.42;pointer-events:none;filter:grayscale(.4);}
/* 未解锁入口改成可点击解释：外观仍按禁用处理，但不再吞掉点击 */
.btn.is-locked{opacity:.42;filter:grayscale(.4);cursor:not-allowed;}
.btn.danger{background:rgba(224,108,117,.12);border:calc(var(--u)*2) solid rgba(224,108,117,.5);color:#FFB3BA;box-shadow:none;}
.btn .sub{font-size:calc(var(--u)*24);opacity:.7;font-weight:500;}
.btn.shop-entry{position:relative;background:linear-gradient(180deg,#2C3542,#202730);color:#FFE3A8;
  border:calc(var(--u)*2) solid rgba(245,196,81,.42);
  box-shadow:0 0 calc(var(--u)*26) rgba(245,196,81,.14),inset 0 0 calc(var(--u)*18) rgba(245,196,81,.05);}
.btn.shop-entry .ic{font-size:calc(var(--u)*30);color:var(--gold);line-height:1;}
.btn.shop-entry .sub{color:#C8B07A;opacity:1;}
.btn.shop-entry .shop-badge{position:absolute;top:calc(var(--u)*-12);right:calc(var(--u)*10);
  padding:calc(var(--u)*4) calc(var(--u)*12);border-radius:calc(var(--u)*999);
  background:linear-gradient(180deg,#FFDA84,#F5C451);color:#2A1D06;
  font-size:calc(var(--u)*18);font-weight:700;line-height:1.25;letter-spacing:calc(var(--u)*1);
  box-shadow:0 0 calc(var(--u)*16) rgba(245,196,81,.55);}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*16);margin-bottom:calc(var(--u)*26);}
.topbar .title{font-size:calc(var(--u)*56);font-weight:700;letter-spacing:calc(var(--u)*2);}
.topbar .sub{font-size:calc(var(--u)*24);color:var(--text-secondary);}
.back-btn{width:calc(var(--u)*88);height:calc(var(--u)*88);border-radius:calc(var(--u)*26);flex:0 0 auto;
  background:rgba(23,28,36,.8);border:calc(var(--u)*2) solid rgba(255,255,255,.08);color:var(--text-secondary);
  font-size:calc(var(--u)*32);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.back-btn:active{transform:scale(.94);}

/* 通用按压反馈：所有带 data-action 的元素按下缩一点、松手回弹，覆盖页签/关卡节点/开关等 */
#ui-root [data-action]{
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s var(--ease),filter .16s var(--ease),
    background .18s,border-color .18s,opacity .16s;
}
#ui-root [data-action]:active{transform:scale(.96);filter:brightness(.93);}
#ui-root .switch:active{transform:scale(.97);}

/* map */
.map{background:linear-gradient(180deg,#0A0D11,#0E1116 55%,#090B0E);}
.tabs{display:flex;gap:calc(var(--u)*12);overflow-x:auto;padding-bottom:calc(var(--u)*16);scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
/* 未解锁页签有两行文案，已解锁页签只有一行；拉伸等高后单行文字会停在顶部、下方空出一大块，
   改用 flex 居中让单行与两行的文字都落在页签垂直中心 */
.tab{flex:1 0 auto;min-width:calc(var(--u)*130);text-align:center;padding:calc(var(--u)*18) calc(var(--u)*10);
  border-radius:calc(var(--u)*22);background:rgba(23,28,36,.8);border:calc(var(--u)*2) solid rgba(255,255,255,.06);
  color:var(--text-secondary);font-size:calc(var(--u)*28);position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
.tab.active{color:#10141A;font-weight:700;background:linear-gradient(180deg,var(--tabc,#E0A94A),var(--tabc2,#B98723));}
.tab.locked{opacity:.45;}
.tab .lock{font-size:calc(var(--u)*20);display:block;}
/* 关卡地图分页：五章横向排列，跟手拖动换章；页签与关卡卡片样式沿用原样 */
.map-pager{flex:1;min-height:0;overflow:hidden;touch-action:pan-y;}
.map-track{display:flex;height:100%;will-change:transform;}
.map-panel{flex:0 0 100%;width:100%;height:100%;overflow:hidden;
  display:flex;flex-direction:column;touch-action:pan-y;}
.map-progress{font-size:calc(var(--u)*24);color:var(--text-secondary);margin:calc(var(--u)*8) 0 calc(var(--u)*18);}
/* 全章通关后：同一行右侧挂总步数，点击展开每关分项 */
.map-progress.has-steps{display:flex;align-items:baseline;justify-content:space-between;gap:calc(var(--u)*16);cursor:pointer;}
.map-progress.has-steps .mp-steps{color:var(--text-secondary);white-space:nowrap;}
.map-progress.has-steps .mp-steps b{color:var(--gold);font-size:calc(var(--u)*28);font-weight:600;}
.map-progress.has-steps.open .mp-steps b{color:var(--line-glow);}
.map-steps-list{
  margin:calc(var(--u)*-8) 0 calc(var(--u)*18);
  padding:calc(var(--u)*8) calc(var(--u)*18);
  border-radius:calc(var(--u)*16);
  background:linear-gradient(160deg,rgba(31,38,48,.92),rgba(20,25,32,.92));
  border:calc(var(--u)*2) solid rgba(245,196,81,.14);
}
.map-steps-list[hidden]{display:none;}
.map-steps-list .ms-row{display:flex;align-items:baseline;gap:calc(var(--u)*12);
  padding:calc(var(--u)*6) 0;font-size:calc(var(--u)*22);color:var(--text-secondary);
  border-bottom:calc(var(--u)*1) solid rgba(255,255,255,.05);}
.map-steps-list .ms-row:last-child{border-bottom:none;}
.map-steps-list .ms-id{color:var(--text-primary);min-width:calc(var(--u)*62);}
.map-steps-list .ms-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.map-steps-list .ms-val{color:var(--line-glow);font-weight:600;}

/* leaderboard：六行入口，左侧色条对应章节主题色 */
.lb-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:calc(var(--u)*14);
  margin-top:calc(var(--u)*10);padding-bottom:calc(var(--u)*8);}
.lb-row{display:flex;align-items:center;gap:calc(var(--u)*14);
  padding:calc(var(--u)*20) calc(var(--u)*20);
  border-radius:calc(var(--u)*22);
  background:linear-gradient(160deg,rgba(31,38,48,.92),rgba(20,25,32,.92));
  border:calc(var(--u)*2) solid rgba(255,255,255,.07);
  border-left:calc(var(--u)*5) solid var(--lc,#B98723);}
.lb-row.locked{opacity:.72;}
.lb-row .lb-main{flex:1;min-width:0;}
.lb-row .lb-name{font-size:calc(var(--u)*25);font-weight:600;}
.lb-row .lb-note{font-size:calc(var(--u)*20);color:var(--text-secondary);margin-top:calc(var(--u)*5);}
.lb-row .lb-score{display:flex;align-items:baseline;gap:calc(var(--u)*4);
  font-size:calc(var(--u)*20);color:var(--text-secondary);white-space:nowrap;}
.lb-row .lb-score b{font-size:calc(var(--u)*32);font-weight:600;color:var(--line-glow);}
.lb-row.locked .lb-score b{color:var(--text-secondary);}
.lb-row .lb-score i{font-style:normal;font-size:calc(var(--u)*28);opacity:.55;}
.lb-row .btn.tiny{min-width:calc(var(--u)*104);flex:0 0 auto;}
.lb-row.grand{background:linear-gradient(160deg,rgba(48,41,25,.94),rgba(24,22,16,.94));
  border-color:rgba(245,196,81,.3);box-shadow:inset 0 0 calc(var(--u)*22) rgba(245,196,81,.06);}
.lb-row.grand .lb-name{color:#FFE3A8;}
.lb-foot{display:flex;justify-content:center;margin-top:auto;padding-top:calc(var(--u)*20);}
.lb-foot .btn{min-width:calc(var(--u)*240);}
.nodes{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(var(--u)*10) 0 calc(var(--u)*40);touch-action:pan-y;}
.node-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--u)*18);}
.node{
  position:relative;border-radius:calc(var(--u)*24);padding:calc(var(--u)*22) calc(var(--u)*24);
  background:linear-gradient(160deg,rgba(31,38,48,.92),rgba(20,25,32,.92));
  border:calc(var(--u)*2) solid rgba(255,255,255,.07);min-height:calc(var(--u)*150);
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
}
.node::after{content:"";position:absolute;top:auto;right:0;bottom:0;left:0;height:calc(var(--u)*3);background:var(--nc,transparent);opacity:.7;}
.node .n-id{font-size:calc(var(--u)*22);color:var(--text-secondary);letter-spacing:calc(var(--u)*2);}
.node .n-name{font-size:calc(var(--u)*32);font-weight:600;margin-top:calc(var(--u)*6);}
.node .n-stars{font-size:calc(var(--u)*26);letter-spacing:calc(var(--u)*4);color:#3A4250;}
.node .n-stars .on{color:var(--gold);text-shadow:0 0 calc(var(--u)*10) rgba(245,196,81,.5);}
.node.current{border-color:rgba(245,196,81,.5);box-shadow:0 0 0 calc(var(--u)*2) rgba(245,196,81,.16), 0 calc(var(--u)*10) calc(var(--u)*30) rgba(0,0,0,.4);}
.node.current::before{content:"";position:absolute;top:calc(var(--u)*-2);right:calc(var(--u)*-2);bottom:calc(var(--u)*-2);left:calc(var(--u)*-2);border-radius:calc(var(--u)*26);
  border:calc(var(--u)*2) solid rgba(245,196,81,.35);animation:breath 2.4s ease-in-out infinite;}
@keyframes breath{0%,100%{opacity:.25}50%{opacity:.85}}
.node.locked{opacity:.42;}
.node.locked .n-name{color:var(--text-secondary);}
.node.cleared .n-stars{color:var(--gold);}

/* ready */
.ready{background:linear-gradient(180deg,#0B0E13,#12161C 60%,#090B0E);}
.ready-card{background:rgba(23,28,36,.86);border:calc(var(--u)*2) solid rgba(255,255,255,.07);
  border-radius:calc(var(--u)*30);padding:calc(var(--u)*36);margin-top:calc(var(--u)*10);}
.ready-head{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--u)*20);}
.ready-head .rid{font-size:calc(var(--u)*24);color:var(--text-secondary);letter-spacing:calc(var(--u)*3);}
.ready-head h2{margin:calc(var(--u)*8) 0 0;font-size:calc(var(--u)*52);}
.big-stars{font-size:calc(var(--u)*42);letter-spacing:calc(var(--u)*6);color:#3A4250;}
.big-stars .on{color:var(--gold);text-shadow:0 0 calc(var(--u)*14) rgba(245,196,81,.4);}
/* 同一行里是 38u 与 26u 两种字号：必须按基线对齐。center 是按盒心对齐，小号「/150」的底边会比
   大号「150」高出约字高的 1/4，读起来像两个错位的字块 */
.big-stars.map-stars{display:flex;align-items:baseline;gap:calc(var(--u)*6);font-size:calc(var(--u)*38);letter-spacing:0;
  padding:calc(var(--u)*8) calc(var(--u)*18);border-radius:calc(var(--u)*999);
  background:rgba(245,196,81,.08);border:calc(var(--u)*2) solid rgba(245,196,81,.22);}
/* 星号不参与基线对齐，仍按居中摆放，否则会跟着基线沉到数字底部 */
.big-stars.map-stars .bs-icon{align-self:center;font-size:calc(var(--u)*32);color:var(--gold);text-shadow:0 0 calc(var(--u)*16) rgba(245,196,81,.7);}
.big-stars .bs-num{color:#FFE3A8;font-weight:700;font-variant-numeric:tabular-nums;}
/* 上限沿用同一暖色系（降亮度做次级信息），再额外拉开一点，避免斜杠贴住后面的 1 */
.big-stars .bs-max{font-size:calc(var(--u)*26);letter-spacing:0;font-weight:600;
  color:rgba(255,227,168,.62);margin-left:calc(var(--u)*3);}

/* 品牌金色：部分手机浏览器的夜间/高对比模式会强制改色，这里显式锁定 */
.hud-stars,.big-stars,.big-stars-anim,.node .n-stars,.brand h1{forced-color-adjust:none;}
.hud-stars .on,.big-stars .on,.big-stars .bs-icon,.big-stars-anim span.lit,
.node .n-stars .on{color:#F5C451 !important;}
.ready-rows{margin-top:calc(var(--u)*28);display:flex;flex-direction:column;gap:calc(var(--u)*14);}
.rrow{display:flex;justify-content:space-between;font-size:calc(var(--u)*28);color:var(--text-secondary);}
.rrow b{color:var(--text-primary);font-variant-numeric:tabular-nums;}
.rrow .gold{color:var(--gold);}
/* 准备页道具改成「图标 + 数字」胶囊：标签固定单行，数值再长也只会横向排列，不会折到下一行 */
.ready-rows .rrow>span{flex:0 0 auto;white-space:nowrap;margin-right:calc(var(--u)*16);}
.ready-rows .chips{display:flex;align-items:center;gap:calc(var(--u)*20);}
.ready-rows .chip{display:flex;align-items:center;gap:calc(var(--u)*5);}
.ready-rows .chip i{display:block;width:calc(var(--u)*34);height:calc(var(--u)*34);}
.ready-rows .chip svg{width:100%;height:100%;display:block;}
.ready-rows .chip b{font-size:calc(var(--u)*30);font-weight:700;color:var(--gold);}
.ready-rows .chip.off{opacity:.42;filter:grayscale(.35);}
.ready-rows .chip.off b{color:var(--text-secondary);}
.hint{margin-top:calc(var(--u)*26);padding:calc(var(--u)*22);border-radius:calc(var(--u)*20);
  background:rgba(245,196,81,.07);border:calc(var(--u)*2) solid rgba(245,196,81,.14);
  color:#E8D7AC;font-size:calc(var(--u)*25);line-height:1.55;}
.ready .btn-main{margin-top:auto;}
.ready-actions{display:flex;flex-direction:column;gap:calc(var(--u)*16);margin-top:calc(var(--u)*24);}

/* HUD */
.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;}
.hud-top{position:absolute;left:calc(var(--u)*48);right:calc(var(--u)*48);top:calc(var(--u)*72 + env(safe-area-inset-top));
  display:flex;align-items:center;gap:calc(var(--u)*16);}
.hud-tag{font-size:calc(var(--u)*26);color:var(--text-secondary);background:rgba(14,17,22,.6);
  padding:calc(var(--u)*10) calc(var(--u)*20);border-radius:calc(var(--u)*16);backdrop-filter:blur(calc(var(--u)*8));}
.hud-tag b{color:var(--text-primary);}
.hud-stars{display:flex;gap:calc(var(--u)*8);font-size:calc(var(--u)*30);color:#3A4250;background:rgba(14,17,22,.55);
  margin-left:auto;padding:calc(var(--u)*10) calc(var(--u)*22);border-radius:calc(var(--u)*999);}
.hud-stars .on{color:var(--gold);text-shadow:0 0 calc(var(--u)*12) rgba(245,196,81,.6);}
.hud-pause{pointer-events:auto;width:calc(var(--u)*88);height:calc(var(--u)*88);border-radius:calc(var(--u)*26);
  background:rgba(20,25,32,.72);border:calc(var(--u)*2) solid rgba(255,255,255,.09);color:var(--text-primary);
  font-size:calc(var(--u)*30);display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(calc(var(--u)*8));}
.hud-pause:active{transform:scale(.94);}
.hud-compass{position:absolute;left:calc(var(--u)*110);right:calc(var(--u)*110);top:calc(var(--u)*178 + env(safe-area-inset-top));
  display:none;flex-direction:column;gap:calc(var(--u)*8);align-items:center;}
.hud-compass.show{display:flex;}
.hud-compass.intro{animation:compassIntro .8s var(--ease) both;}
@keyframes compassIntro{
  0%{opacity:.2;transform:scale(.97);filter:brightness(.45);}
  55%{opacity:1;transform:scale(1.015);filter:brightness(1.35);}
  100%{opacity:1;transform:scale(1);filter:brightness(1);}
}
.cbar{width:100%;height:calc(var(--u)*10);display:flex;gap:calc(var(--u)*6);}
.cbar i{display:block;flex:1 1 0;height:100%;border-radius:calc(var(--u)*999);background:rgba(255,255,255,.1);
  transition:background .22s var(--ease),box-shadow .22s var(--ease);}
.cbar i.on{background:linear-gradient(90deg,#E0A94A,var(--gold),#FFD98A);box-shadow:0 0 calc(var(--u)*10) rgba(245,196,81,.7);}
.ctext{font-size:calc(var(--u)*22);color:var(--text-secondary);letter-spacing:calc(var(--u)*1);font-variant-numeric:tabular-nums;}
.ctext b{color:var(--gold);}
.hud-length{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--u)*240 + env(safe-area-inset-bottom));
  font-size:calc(var(--u)*26);color:var(--text-secondary);background:rgba(14,17,22,.6);
  padding:calc(var(--u)*10) calc(var(--u)*24);border-radius:calc(var(--u)*999);backdrop-filter:blur(calc(var(--u)*8));
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.hud-length b{color:var(--text-primary);font-size:calc(var(--u)*32);}
.hud-tip{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--u)*330 + env(safe-area-inset-bottom));
  font-size:calc(var(--u)*24);color:#FFD98A;background:rgba(14,17,22,.72);
  padding:calc(var(--u)*12) calc(var(--u)*24);border-radius:calc(var(--u)*999);opacity:0;transition:opacity .2s;
  width:max-content;max-width:calc(100% - var(--u)*80);text-align:center;line-height:1.45;}
.hud-tip.show{opacity:1;}
.item-btn{pointer-events:auto;position:absolute;bottom:calc(var(--u)*110 + env(safe-area-inset-bottom));width:calc(var(--u)*128);height:calc(var(--u)*128);
  border-radius:calc(var(--u)*40);background:rgba(23,28,36,.88);border:calc(var(--u)*2) solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(calc(var(--u)*8));
  transition:transform .12s var(--ease),border-color .12s;}
.item-btn:active{transform:scale(.94);}
.item-btn.hammer{right:calc(var(--u)*34);}
.item-btn.torch{left:calc(var(--u)*34);}
.item-btn.aiming{border-color:rgba(245,196,81,.8);box-shadow:0 0 0 calc(var(--u)*4) rgba(245,196,81,.15), 0 0 calc(var(--u)*26) rgba(245,196,81,.25);}
.item-btn.dim{opacity:.4;}
.item-btn.hidden{display:none;}
.item-btn svg{width:calc(var(--u)*68);height:calc(var(--u)*68);}
.item-btn .badge{position:absolute;right:calc(var(--u)*-6);bottom:calc(var(--u)*-6);min-width:calc(var(--u)*46);height:calc(var(--u)*46);
  border-radius:calc(var(--u)*999);background:linear-gradient(180deg,#FFDA84,var(--gold));color:#1A1408;
  font-size:calc(var(--u)*24);font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 calc(var(--u)*8);
  font-variant-numeric:tabular-nums;box-shadow:0 calc(var(--u)*4) calc(var(--u)*12) rgba(0,0,0,.4);}
.item-btn .badge.zero{background:#39404C;color:#8A94A4;}
.item-btn .badge.tick{animation:hudTick .32s var(--ease);}
@keyframes hudTick{0%{transform:scale(1);}35%{transform:scale(1.18);}100%{transform:scale(1);}}
.item-btn .lbl{position:absolute;bottom:calc(var(--u)*-30);left:50%;transform:translateX(-50%);font-size:calc(var(--u)*20);color:var(--text-secondary);white-space:nowrap;}
.item-btn.guide{right:calc(var(--u)*34);bottom:calc(var(--u)*300 + env(safe-area-inset-bottom));}
.item-btn.guide.active{border-color:rgba(245,196,81,.75);}
.item-btn .ring{position:absolute;top:calc(var(--u)*-7);right:calc(var(--u)*-7);bottom:calc(var(--u)*-7);left:calc(var(--u)*-7);border-radius:calc(var(--u)*48);pointer-events:none;opacity:0;transition:opacity .15s;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--u)*9),#000 calc(100% - var(--u)*8));
  mask:radial-gradient(farthest-side,transparent calc(100% - var(--u)*9),#000 calc(100% - var(--u)*8));}
.item-btn .ring.on{opacity:1;}
.left-handed .item-btn.hammer{right:auto;left:calc(var(--u)*34);}
.left-handed .item-btn.torch{left:auto;right:calc(var(--u)*34);}
.left-handed .item-btn.guide{right:auto;left:calc(var(--u)*34);}

/* overlay / pause */
.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(6,8,11,.72);backdrop-filter:blur(calc(var(--u)*10));display:flex;align-items:center;justify-content:center;padding:calc(var(--u)*48);pointer-events:auto;z-index:60;}
.pause-card{width:100%;background:rgba(23,28,36,.96);border:calc(var(--u)*2) solid rgba(255,255,255,.09);
  border-radius:calc(var(--u)*32);padding:calc(var(--u)*40);display:flex;flex-direction:column;gap:calc(var(--u)*18);}
.pause-card h2{margin:0 0 calc(var(--u)*8);font-size:calc(var(--u)*44);text-align:center;}
.pause-card .meta{text-align:center;color:var(--text-secondary);font-size:calc(var(--u)*24);margin-bottom:calc(var(--u)*8);}
/* 主操作与「本局操作」之间的分隔带，把重开/返回地图推离「继续」 */
.pause-card .pause-sep{display:flex;align-items:center;gap:calc(var(--u)*14);height:calc(var(--u)*50);}
.pause-card .pause-sep i{flex:1;height:calc(var(--u)*1);background:rgba(154,163,178,.2);}
.pause-card .pause-sep span{font-size:calc(var(--u)*20);letter-spacing:calc(var(--u)*2);color:var(--text-secondary);white-space:nowrap;}
.pause-card .pause-danger{color:#C9A0A4;}
.pause-card .reset-warn{line-height:1.65;color:#D9B4B8;margin-bottom:calc(var(--u)*14);}

/* result */
.result{background:radial-gradient(90% 50% at 50% 20%, rgba(245,196,81,.14), transparent 65%),linear-gradient(180deg,rgba(10,13,17,.78),rgba(16,20,26,.86) 50%,rgba(9,11,14,.92));}
.result-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*16);}
.result-title{font-size:calc(var(--u)*30);letter-spacing:calc(var(--u)*8);color:var(--text-secondary);}
.big-stars-anim{display:flex;gap:calc(var(--u)*18);margin:calc(var(--u)*10) 0 calc(var(--u)*6);}
.big-stars-anim span{font-size:calc(var(--u)*92);line-height:1;color:#333A46;transform:scale(.8);transition:transform .3s var(--ease),color .3s,text-shadow .3s;}
.big-stars-anim span.lit{color:var(--gold);transform:scale(1.06);text-shadow:0 0 calc(var(--u)*30) rgba(245,196,81,.65);}
.result-sub{font-size:calc(var(--u)*26);color:var(--text-secondary);min-height:calc(var(--u)*36);}
.result-sub.good{color:var(--success);}
.result-stats{width:100%;background:rgba(23,28,36,.8);border:calc(var(--u)*2) solid rgba(255,255,255,.07);
  border-radius:calc(var(--u)*26);padding:calc(var(--u)*10) calc(var(--u)*28);margin-top:calc(var(--u)*16);}
.result-stats .rrow{padding:calc(var(--u)*14) 0;border-bottom:calc(var(--u)*1) solid rgba(255,255,255,.05);}
.result-stats .rrow:last-child{border-bottom:none;}
.result-stats .rrow b.record{color:var(--success);}
.result-stats .rrow b.gold{color:var(--gold);}
/* 结算页标签固定单行：当前数值都很短，加一条保险防止后续文案变长时把标签挤折 */
.result-stats .rrow>span{flex:0 0 auto;white-space:nowrap;margin-right:calc(var(--u)*16);}
.chest-reward{width:100%;margin-top:calc(var(--u)*16);padding:calc(var(--u)*20) calc(var(--u)*24) calc(var(--u)*22);
  border-radius:calc(var(--u)*24);
  background:linear-gradient(180deg,rgba(245,196,81,.10),rgba(23,28,36,.86) 68%);
  border:calc(var(--u)*2) solid rgba(245,196,81,.22);}
.chest-reward .cr-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:calc(var(--u)*14);}
.chest-reward .cr-title{font-size:calc(var(--u)*24);letter-spacing:calc(var(--u)*4);color:#E8D7AC;}
.chest-reward .cr-hint{font-size:calc(var(--u)*20);color:var(--text-secondary);}
.chest-reward .cr-list{display:flex;gap:calc(var(--u)*14);justify-content:center;}
.chest-reward .cr-card{flex:1;max-width:calc(var(--u)*160);display:flex;flex-direction:column;align-items:center;
  gap:calc(var(--u)*9);padding:calc(var(--u)*14) calc(var(--u)*10) calc(var(--u)*12);
  border-radius:calc(var(--u)*20);background:rgba(12,15,20,.55);border:calc(var(--u)*2) solid rgba(245,196,81,.16);}
.chest-reward .cr-icon{width:calc(var(--u)*72);height:calc(var(--u)*72);
  display:flex;align-items:center;justify-content:center;}
.chest-reward .cr-icon svg{width:calc(var(--u)*50);height:calc(var(--u)*50);}
.chest-reward .cr-name{font-size:calc(var(--u)*22);color:var(--text-primary);}
.refill{width:100%;margin-top:calc(var(--u)*14);display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--u)*14);
  font-size:calc(var(--u)*24);color:var(--text-secondary);}
.refill .rf-head{flex-basis:100%;font-size:calc(var(--u)*20);letter-spacing:calc(var(--u)*3);color:#E8D7AC;text-align:center;}
.refill .rf{flex:1;max-width:calc(var(--u)*320);padding:calc(var(--u)*14);border-radius:calc(var(--u)*16);background:rgba(23,28,36,.7);text-align:center;}
.refill .rf b{color:var(--gold);font-variant-numeric:tabular-nums;}
.result-actions{display:flex;flex-direction:column;gap:calc(var(--u)*16);margin-top:calc(var(--u)*24);}
.result-row{display:flex;gap:calc(var(--u)*14);}
.result-row .btn{flex:1;}
.daily-score{font-size:calc(var(--u)*48);color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums;}

/* 引路罗盘授予卡 */
.compass-award{position:relative;width:100%;margin-top:calc(var(--u)*10);padding:calc(var(--u)*22) calc(var(--u)*24) calc(var(--u)*24);
  border-radius:calc(var(--u)*26);text-align:center;overflow:hidden;
  background:linear-gradient(160deg,rgba(245,196,81,.16),rgba(23,28,36,.94) 62%);
  border:calc(var(--u)*2) solid rgba(245,196,81,.42);
  box-shadow:0 calc(var(--u)*14) calc(var(--u)*36) rgba(0,0,0,.35),inset 0 0 calc(var(--u)*30) rgba(245,196,81,.08);
  opacity:0;transform:translateY(calc(var(--u)*14));
  transition:opacity .45s var(--ease),transform .45s var(--ease);}
.compass-award[hidden]{display:none;}
.compass-award.show{opacity:1;transform:none;}
.compass-award .ca-glow{position:absolute;left:50%;top:calc(var(--u)*8);width:calc(var(--u)*300);height:calc(var(--u)*200);
  transform:translateX(-50%);background:radial-gradient(circle,rgba(245,196,81,.22),transparent 70%);pointer-events:none;}
.compass-award .ca-icon{position:relative;width:calc(var(--u)*92);height:calc(var(--u)*92);margin:0 auto calc(var(--u)*6);}
.compass-award .ca-icon svg{width:100%;height:100%;}
.compass-award .ca-label{font-size:calc(var(--u)*22);letter-spacing:calc(var(--u)*6);color:var(--gold);
  opacity:0;transform:translateY(calc(var(--u)*8));transition:opacity .35s var(--ease),transform .35s var(--ease);}
.compass-award .ca-name{font-size:calc(var(--u)*42);letter-spacing:calc(var(--u)*4);color:var(--gold);
  margin:calc(var(--u)*2) 0 calc(var(--u)*6);
  opacity:0;transform:translateY(calc(var(--u)*8));transition:opacity .35s var(--ease),transform .35s var(--ease);}
.compass-award .ca-desc{font-size:calc(var(--u)*25);color:var(--text-secondary);letter-spacing:calc(var(--u)*1);
  opacity:0;transform:translateY(calc(var(--u)*8));transition:opacity .35s var(--ease),transform .35s var(--ease);}
.compass-award.show .ca-label{opacity:.85;transform:none;transition-delay:.12s;}
.compass-award.show .ca-name{opacity:1;transform:none;transition-delay:.24s;}
.compass-award.show .ca-desc{opacity:1;transform:none;transition-delay:.36s;}
.compass-award.show .ca-icon{animation:compassBreathe .9s var(--ease);}
.compass-award.reduced{transition:none;}
.compass-award.reduced .ca-label,.compass-award.reduced .ca-name,.compass-award.reduced .ca-desc{transition:none;}
.compass-award.reduced.show .ca-icon{animation:none;}
@keyframes compassBreathe{
  0%{transform:scale(.9);filter:brightness(.8);}
  55%{transform:scale(1.06);filter:brightness(1.4);}
  100%{transform:scale(1);filter:brightness(1);}
}

/* shop */
.shop{background:linear-gradient(180deg,#0A0D11,#10141A 60%,#090B0E);}
.shop-wallet{display:flex;align-items:center;gap:calc(var(--u)*20);margin-bottom:calc(var(--u)*20);
  background:linear-gradient(135deg,rgba(245,196,81,.14),rgba(23,28,36,.92) 55%);
  border:calc(var(--u)*2) solid rgba(245,196,81,.34);border-radius:calc(var(--u)*26);
  padding:calc(var(--u)*18) calc(var(--u)*24);
  box-shadow:0 calc(var(--u)*10) calc(var(--u)*28) rgba(0,0,0,.28),inset 0 0 calc(var(--u)*22) rgba(245,196,81,.06);}
.shop-wallet .wallet-star{width:calc(var(--u)*68);height:calc(var(--u)*68);border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*34);color:#1A1408;
  background:linear-gradient(180deg,#FFDA84,var(--gold) 60%,#D6A436);
  box-shadow:0 0 calc(var(--u)*20) rgba(245,196,81,.35);}
.shop-wallet .wallet-main{flex:1;min-width:0;}
.shop-wallet .wallet-label{font-size:calc(var(--u)*22);color:var(--text-secondary);letter-spacing:calc(var(--u)*2);}
.shop-wallet .wallet-num{font-size:calc(var(--u)*56);font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1.15;}
.shop-wallet .wallet-num small{font-size:calc(var(--u)*24);color:var(--text-secondary);font-weight:500;margin-left:calc(var(--u)*8);}
/* 余额变化：增加时金色上浮放大，减少时红色下沉再归位 */
.shop-wallet.gain .wallet-num{animation:walletGain .62s var(--ease);}
@keyframes walletGain{
  0%{transform:translateY(0) scale(1);color:var(--gold);}
  32%{transform:translateY(calc(var(--u)*-5)) scale(1.09);color:#FFE6AE;
    text-shadow:0 0 calc(var(--u)*18) rgba(245,196,81,.55);}
  100%{transform:translateY(0) scale(1);color:var(--gold);text-shadow:none;}
}
.shop-wallet.spend .wallet-num{animation:walletSpend .52s var(--ease);}
@keyframes walletSpend{
  0%{transform:translateY(calc(var(--u)*3));color:#E06C75;
    text-shadow:0 0 calc(var(--u)*14) rgba(224,108,117,.45);}
  60%{transform:translateY(calc(var(--u)*1));color:#E06C75;}
  100%{transform:translateY(0);color:var(--gold);text-shadow:none;}
}
.shop-tabs{display:flex;gap:calc(var(--u)*6);padding:calc(var(--u)*6);margin-bottom:calc(var(--u)*18);
  background:rgba(255,255,255,.045);border:calc(var(--u)*2) solid rgba(255,255,255,.05);border-radius:calc(var(--u)*20);}
.shop-tab{flex:1;position:relative;min-height:calc(var(--u)*64);padding:0;cursor:pointer;font-family:inherit;
  border:0;background:transparent;color:var(--text-secondary);font-size:calc(var(--u)*26);font-weight:600;
  border-radius:calc(var(--u)*15);}
.shop-tab.active{background:#2B3442;color:var(--gold);box-shadow:inset 0 0 calc(var(--u)*14) rgba(245,196,81,.08);}
.shop-tab.locked{opacity:.42;}
.shop-tab .dot{position:absolute;top:calc(var(--u)*10);right:calc(var(--u)*14);width:calc(var(--u)*14);height:calc(var(--u)*14);
  border-radius:50%;background:#E06C75;box-shadow:0 0 calc(var(--u)*12) rgba(224,108,117,.8);}
/* 商店分页：四页横向排列，跟手拖动或点页签切换；页签与卡片样式保持不变 */
.shop-pager{flex:1;min-height:0;overflow:hidden;touch-action:pan-y;}
.shop-track{display:flex;height:100%;will-change:transform;}
.shop-panel{flex:0 0 100%;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
  padding-bottom:calc(var(--u)*40);}
.section-title{font-size:calc(var(--u)*24);letter-spacing:calc(var(--u)*4);color:var(--text-secondary);margin:calc(var(--u)*26) 0 calc(var(--u)*14);}
.shop-card{display:flex;gap:calc(var(--u)*20);align-items:center;background:rgba(23,28,36,.84);
  border:calc(var(--u)*2) solid rgba(255,255,255,.07);border-radius:calc(var(--u)*24);padding:calc(var(--u)*22);
  margin-bottom:calc(var(--u)*14);}
/* 购买成功：卡片轻弹 + 金边微亮，给落点一个明确反馈 */
.shop-card.pop{animation:cardPop .46s var(--ease);}
@keyframes cardPop{
  0%{transform:scale(1);border-color:rgba(255,255,255,.07);}
  36%{transform:scale(1.025);border-color:rgba(245,196,81,.55);
    box-shadow:0 0 calc(var(--u)*26) rgba(245,196,81,.22);}
  100%{transform:scale(1);border-color:rgba(255,255,255,.07);box-shadow:none;}
}
.shop-icon{width:calc(var(--u)*92);height:calc(var(--u)*92);border-radius:calc(var(--u)*24);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;background:rgba(245,196,81,.08);border:calc(var(--u)*2) solid rgba(245,196,81,.16);}
.shop-icon svg{width:calc(var(--u)*56);height:calc(var(--u)*56);}
.shop-icon.dot{background:var(--dotc);border-color:rgba(255,255,255,.16);}
.shop-icon.dot i{width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:50%;background:var(--dotc2,#fff);display:block;box-shadow:0 0 calc(var(--u)*18) var(--dotc2,#fff);}
.shop-info{flex:1;min-width:0;}
.shop-info .nm{font-size:calc(var(--u)*30);font-weight:600;}
.shop-info .ds{font-size:calc(var(--u)*22);color:var(--text-secondary);margin-top:calc(var(--u)*4);line-height:1.4;}
.shop-info .own{font-size:calc(var(--u)*22);color:var(--gold);margin-top:calc(var(--u)*6);font-variant-numeric:tabular-nums;}
.shop-info .own .own-keep{font-size:calc(var(--u)*21);color:var(--text-secondary);}
.shop-info .own .own-add{font-size:calc(var(--u)*21);color:#FFD98A;}
.shop-info .own-note{font-size:calc(var(--u)*21);color:#E8D7AC;margin-top:calc(var(--u)*3);font-variant-numeric:tabular-nums;}
.shop-info .own-note.muted{color:var(--text-secondary);}
.shop-act{display:flex;flex-direction:column;gap:calc(var(--u)*8);align-items:stretch;flex:0 0 auto;}
.buy-btn{min-width:calc(var(--u)*150);min-height:calc(var(--u)*66);border-radius:calc(var(--u)*18);border:none;cursor:pointer;
  background:linear-gradient(180deg,#FFDA84,var(--gold));color:#1A1408;font-size:calc(var(--u)*26);font-weight:700;
  padding:0 calc(var(--u)*18);font-variant-numeric:tabular-nums;}
.buy-btn:active{transform:scale(.95);}
.buy-btn:disabled{opacity:.4;filter:grayscale(.5);}
/* 消耗道具分页末尾：一键补齐到本局携带上限，价格随上限与缺口变化 */
.refill-bar{display:flex;align-items:center;gap:calc(var(--u)*16);
  padding:calc(var(--u)*20);margin-top:calc(var(--u)*16);border-radius:calc(var(--u)*22);
  background:linear-gradient(180deg,rgba(245,196,81,.1),rgba(245,196,81,.03));
  border:calc(var(--u)*2) solid rgba(245,196,81,.24);}
.refill-bar .rb-main{flex:1;min-width:0;}
.refill-bar .rb-title{font-size:calc(var(--u)*30);font-weight:700;color:#FFE3A8;letter-spacing:calc(var(--u)*1);}
.refill-bar .rb-sub{font-size:calc(var(--u)*22);color:var(--text-secondary);margin-top:calc(var(--u)*6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.refill-bar .rb-act{display:flex;flex-direction:column;gap:calc(var(--u)*8);flex:0 0 auto;align-items:stretch;}
.refill-bar .rb-act>*{width:100%;}
.refill-bar .buy-btn{flex:0 0 auto;}
.refill-bar .ad-btn{min-width:calc(var(--u)*170);min-height:calc(var(--u)*54);white-space:nowrap;}
.ad-btn{min-width:calc(var(--u)*150);min-height:calc(var(--u)*54);border-radius:calc(var(--u)*16);cursor:pointer;
  background:rgba(127,212,160,.12);border:calc(var(--u)*2) solid rgba(127,212,160,.35);color:var(--success);
  font-size:calc(var(--u)*22);padding:0 calc(var(--u)*14);}
.ad-btn:disabled{opacity:.35;}
.ad-btn.is-busy{opacity:.6;cursor:wait;}
.shop-wallet .wallet-ad{flex:0 0 auto;min-width:calc(var(--u)*210);min-height:calc(var(--u)*76);
  border-radius:calc(var(--u)*20);font-size:calc(var(--u)*24);font-weight:600;line-height:1.25;}
.shop-wallet .wallet-ad small{display:block;font-size:calc(var(--u)*18);font-weight:400;opacity:.75;}

/* settings */
.settings{background:linear-gradient(180deg,#0A0D11,#10141A 60%,#090B0E);}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*20);
  padding:calc(var(--u)*22) 0;border-bottom:calc(var(--u)*1) solid rgba(255,255,255,.06);font-size:calc(var(--u)*28);}
.set-row .lbl{color:var(--text-primary);}
.set-row input[type=range]{flex:0 0 auto;width:calc(var(--u)*280);appearance:none;height:calc(var(--u)*8);border-radius:calc(var(--u)*999);
  background:linear-gradient(90deg,var(--gold) 0 var(--fill,50%),#39404C var(--fill,50%) 100%);outline:none;}
.range-val{flex:0 0 calc(var(--u)*76);text-align:right;font-variant-numeric:tabular-nums;
  color:var(--gold);font-size:calc(var(--u)*26);}
.set-row input[type=range]::-webkit-slider-thumb{appearance:none;width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:50%;
  background:#fff;box-shadow:0 0 calc(var(--u)*10) rgba(245,196,81,.6);}
.switch{width:calc(var(--u)*96);height:calc(var(--u)*54);border-radius:calc(var(--u)*999);background:#333A46;position:relative;cursor:pointer;flex:0 0 auto;transition:background .18s;}
.switch::after{content:"";position:absolute;top:calc(var(--u)*5);left:calc(var(--u)*5);width:calc(var(--u)*44);height:calc(var(--u)*44);
  border-radius:50%;background:#fff;transition:transform .18s var(--ease);}
.switch.on{background:var(--gold);}
.switch.on::after{transform:translateX(calc(var(--u)*42));}
.switch.on::after{background:#FFF6DF;}
.settings-scroll{flex:1;overflow-y:auto;padding-bottom:calc(var(--u)*30);}
.settings-foot{margin-top:calc(var(--u)*30);text-align:center;color:#5C6675;font-size:calc(var(--u)*22);line-height:1.6;}
/* 兑换码：输入框 + 兑换按钮占满行内剩余宽度；字体不小于 16px，避免 iOS 聚焦自动放大 */
.redeem-box{display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--u)*14);flex:1;min-width:0;}
.redeem-input{flex:1;min-width:0;height:calc(var(--u)*72);padding:0 calc(var(--u)*20);border-radius:calc(var(--u)*20);
  border:calc(var(--u)*2) solid rgba(255,255,255,.09);background:rgba(255,255,255,.05);
  color:var(--text-primary);font-family:inherit;font-size:max(16px,calc(var(--u)*26));letter-spacing:calc(var(--u)*2);
  text-transform:uppercase;outline:none;}
.redeem-input::placeholder{color:#5C6675;letter-spacing:0;text-transform:none;}
.redeem-input:focus{border-color:rgba(245,196,81,.5);}

/* daily */
.daily{background:radial-gradient(80% 50% at 50% 25%, rgba(127,166,224,.14), transparent 65%),linear-gradient(180deg,#0A0D11,#10141A 55%,#090B0E);}
.daily-card{background:rgba(23,28,36,.85);border:calc(var(--u)*2) solid rgba(255,255,255,.07);border-radius:calc(var(--u)*30);
  padding:calc(var(--u)*36);margin-top:calc(var(--u)*20);text-align:center;}
.daily-card h2{font-size:calc(var(--u)*50);margin:calc(var(--u)*18) 0 calc(var(--u)*6);}
.daily-card .date{font-size:calc(var(--u)*26);color:var(--text-secondary);}
.daily-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*14);margin-top:calc(var(--u)*28);}
.daily-cell{background:rgba(14,17,22,.6);border-radius:calc(var(--u)*18);padding:calc(var(--u)*20);text-align:left;}
.daily-cell .k{font-size:calc(var(--u)*21);color:var(--text-secondary);}
.daily-cell .v{font-size:calc(var(--u)*34);color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums;margin-top:calc(var(--u)*6);}
.daily-note{margin-top:calc(var(--u)*26);font-size:calc(var(--u)*22);color:var(--text-secondary);line-height:1.6;text-align:left;}
.daily-actions{display:flex;flex-direction:column;gap:calc(var(--u)*16);margin-top:auto;}

/* 每日页模式导航：整体是一个分段控件，金色滑块随页滑动；页签仍可点击 */
.mode-tabs{position:relative;display:flex;gap:calc(var(--u)*6);margin-top:calc(var(--u)*20);
  padding:calc(var(--u)*5);border-radius:calc(var(--u)*999);
  background:rgba(23,28,36,.85);border:calc(var(--u)*2) solid rgba(255,255,255,.07);
  overflow-x:auto;overflow-y:hidden;}
.mode-thumb{position:absolute;top:calc(var(--u)*5);bottom:calc(var(--u)*5);left:0;width:0;
  border-radius:calc(var(--u)*999);pointer-events:none;
  background:linear-gradient(180deg,#FFE6AE,#F5C451);
  box-shadow:0 0 calc(var(--u)*18) rgba(245,196,81,.18);}
.mode-tab{position:relative;z-index:1;flex:1 0 auto;min-width:calc(var(--u)*150);white-space:nowrap;
  appearance:none;-webkit-appearance:none;border:none;outline:none;font-family:inherit;
  padding:calc(var(--u)*12) calc(var(--u)*10);border-radius:calc(var(--u)*999);
  background:transparent;color:var(--text-secondary);font-size:calc(var(--u)*26);cursor:pointer;
  transition:color .18s var(--ease);}
.mode-tab.active{color:#0A0D11;font-weight:700;}
/* 横向分页轨道：跟手拖动，松手吸附；纵向滚动交给面板自身 */
.mode-pager{flex:1;min-height:0;margin-top:calc(var(--u)*12);overflow:hidden;touch-action:pan-y;}
.mode-track{display:flex;height:100%;will-change:transform;}
.mode-panel{flex:0 0 100%;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;
  display:flex;flex-direction:column;padding-bottom:calc(var(--u)*2);}
/* 圆点：2-4 个玩法时提示还有别的页；更多玩法靠可滚动页签 */
.mode-dots{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*8);
  padding-top:calc(var(--u)*10);flex:0 0 auto;}
.mode-dot{width:calc(var(--u)*10);height:calc(var(--u)*10);border-radius:calc(var(--u)*999);
  background:rgba(255,255,255,.18);transition:width .22s var(--ease),background .22s var(--ease);}
.mode-dot.active{width:calc(var(--u)*26);background:var(--gold);}

/* local badge */
.local-badge{position:absolute;right:calc(var(--u)*24);bottom:calc(var(--u)*20 + env(safe-area-inset-bottom));
  font-size:calc(var(--u)*20);color:#66707F;letter-spacing:calc(var(--u)*1);z-index:20;}

/* boot */
.boot{background:#0A0D11;align-items:center;justify-content:center;}
.boot .b-title{font-size:calc(var(--u)*64);letter-spacing:calc(var(--u)*18);color:var(--gold);}
.boot .b-bar{width:calc(var(--u)*360);height:calc(var(--u)*6);background:#1A2028;border-radius:calc(var(--u)*999);margin-top:calc(var(--u)*40);overflow:hidden;}
.boot .b-bar i{display:block;height:100%;width:30%;background:var(--gold);animation:bootbar 1.1s var(--ease) infinite;}
@keyframes bootbar{0%{transform:translateX(-100%)}100%{transform:translateX(360%)}}
.boot .b-err{color:var(--danger);font-size:calc(var(--u)*22);margin-top:calc(var(--u)*30);max-width:80%;line-height:1.5;text-align:center;}

/* rotate */
#rotate-hint{position:fixed;top:0;right:0;bottom:0;left:0;background:#0A0D11;z-index:999;display:none;align-items:center;justify-content:center;}
.rotate-card{text-align:center;color:var(--text-secondary);font-size:24px;display:flex;flex-direction:column;align-items:center;gap:18px;}
.rotate-icon{width:54px;height:88px;border:3px solid var(--gold);border-radius:12px;transform:rotate(90deg);}
@media (orientation:landscape) and (max-height:600px){
  #rotate-hint{display:flex;}
  #app{display:none;}
}

/* misc */
.spacer{flex:1;}
.center{display:flex;align-items:center;justify-content:center;}
.mono{font-variant-numeric:tabular-nums;}
.hidden{display:none !important;}
.corner-note{position:absolute;left:0;right:0;bottom:calc(var(--u)*18 + env(safe-area-inset-bottom));
  text-align:center;font-size:calc(var(--u)*19);color:#4F5866;}

/* ---------- 首次获得与道具教学 ---------- */
.acquire-ghost{position:absolute;z-index:70;width:calc(var(--u)*96);height:calc(var(--u)*96);pointer-events:none;
  filter:drop-shadow(0 0 calc(var(--u)*14) rgba(245,196,81,.75));}
.acquire-ghost svg{width:100%;height:100%;}
.item-btn.acquire-pulse{animation:acquirePulse 1.2s ease-out 2;}
@keyframes acquirePulse{0%{box-shadow:0 0 0 0 rgba(245,196,81,.5);border-color:rgba(245,196,81,.65);}
  100%{box-shadow:0 0 0 calc(var(--u)*30) rgba(245,196,81,0);border-color:rgba(255,255,255,.16);}}

.tut-links{display:flex;gap:calc(var(--u)*10);}
.tut-links .btn{min-height:calc(var(--u)*64);font-size:calc(var(--u)*22);padding:0 calc(var(--u)*14);}

.overlay.tutorial-layer{z-index:70;background:rgba(6,8,11,.78);}
.tutorial-card{width:90%;max-width:calc(var(--u)*680);border-radius:calc(var(--u)*30);overflow:hidden;
  border:calc(var(--u)*2) solid rgba(245,196,81,.28);
  box-shadow:0 calc(var(--u)*24) calc(var(--u)*70) rgba(0,0,0,.65), inset 0 0 calc(var(--u)*50) rgba(245,196,81,.06);}
.tut-scene{position:relative;width:100%;height:0;padding-top:68.49%;overflow:hidden;
  background:radial-gradient(90% 120% at 50% 20%, #171d25, #0b0e13 75%);}
.tut-floor{position:absolute;top:0;right:0;bottom:0;left:0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/calc(var(--u)*54) calc(var(--u)*54),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/calc(var(--u)*54) calc(var(--u)*54);}
.tut-wall{position:absolute;left:24%;top:22%;width:26%;height:32%;border-radius:calc(var(--u)*10);
  background:linear-gradient(160deg,#3b4452,#232932);border:calc(var(--u)*2) solid #4d5765;
  box-shadow:inset 0 calc(var(--u)*-6) calc(var(--u)*10) rgba(0,0,0,.3);}
.tut-crack{position:absolute;left:46%;top:8%;width:calc(var(--u)*4);height:84%;background:#12161c;
  transform:rotate(11deg);box-shadow:0 0 calc(var(--u)*12) rgba(245,196,81,.45);}
.tut-crack::before{content:'';position:absolute;left:calc(var(--u)*-7);top:34%;width:calc(var(--u)*4);height:38%;
  background:#12161c;transform:rotate(-38deg);box-shadow:0 0 calc(var(--u)*10) rgba(245,196,81,.4);}
.tut-ball{position:absolute;left:14%;top:64%;width:11%;height:16.06%;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%,#FFF8E6,#F5C451 46%,#B98723);
  box-shadow:0 0 calc(var(--u)*24) rgba(245,196,81,.5);}
.tut-btn{position:absolute;width:22%;height:32.12%;border-radius:calc(var(--u)*26);
  background:rgba(23,28,36,.95);border:calc(var(--u)*2) solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;}
.tut-btn svg{width:70%;height:70%;}
.tut-btn-hammer,.tut-btn-guide{right:7%;bottom:8%;}
.tut-btn-torch{left:7%;bottom:8%;}
.tut-touch{position:absolute;width:13%;height:18.98%;border-radius:50%;opacity:0;pointer-events:none;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,.18) 58%,transparent 72%);
  border:calc(var(--u)*2) solid rgba(255,255,255,.55);}
.tut-touch::after{content:'';position:absolute;top:-18%;right:-18%;bottom:-18%;left:-18%;border-radius:50%;border:calc(var(--u)*2) solid rgba(255,255,255,.28);}
.tut-reticle{position:absolute;left:37%;top:37%;width:21%;height:30.66%;border-radius:calc(var(--u)*8);opacity:0;
  border:calc(var(--u)*3) dashed rgba(245,196,81,.9);transform:translate(-50%,-50%);
  box-shadow:0 0 calc(var(--u)*18) rgba(245,196,81,.35);}
.tut-light{position:absolute;left:50%;top:46%;width:16%;height:23.36%;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,240,190,.95),rgba(245,196,81,.34) 42%,rgba(245,196,81,0) 70%);
  mix-blend-mode:screen;opacity:.4;}
.tut-scene-torch .tut-ball{left:50%;top:46%;}
.tut-scene-guide .tut-ball{left:24%;top:62%;}
.tut-world{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:50% 60%;}
.tut-path i{position:absolute;width:calc(var(--u)*12);height:calc(var(--u)*12);border-radius:50%;
  background:#FFD98A;box-shadow:0 0 calc(var(--u)*14) rgba(255,217,138,.85);transform:translate(-50%,-50%);
  animation:pathTwinkle 2s ease-in-out infinite;}
.tut-path i:nth-child(2n){animation-delay:.3s;}
.tut-path i:nth-child(3n){animation-delay:.6s;}
@keyframes pathTwinkle{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.7)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}

/* 破墙锤：点按钮 → 墙上出现瞄准框 → 点墙 → 墙碎 */
.tut-scene-hammer .tut-btn{animation:tutBtnGlow 3.6s infinite;}
.tut-scene-hammer .t1{left:81%;top:76%;animation:tutTapBtn 3.6s infinite;}
.tut-scene-hammer .t2{left:37%;top:37%;animation:tutTapWall 3.6s infinite;}
.tut-scene-hammer .tut-reticle{animation:tutReticle 3.6s infinite;}
.tut-scene-hammer .tut-wall{animation:tutWallBreak 3.6s infinite;}
@keyframes tutBtnGlow{0%,10%{box-shadow:none;border-color:rgba(255,255,255,.16)}
  18%,58%{box-shadow:0 0 0 calc(var(--u)*6) rgba(245,196,81,.16),0 0 calc(var(--u)*28) rgba(245,196,81,.4);border-color:rgba(245,196,81,.8)}
  70%,100%{box-shadow:none;border-color:rgba(255,255,255,.16)}}
@keyframes tutTapBtn{0%,6%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
  12%,18%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  20%{transform:translate(-50%,-50%) scale(.78)}
  26%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.05)}}
@keyframes tutReticle{0%,30%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}
  36%,52%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  60%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes tutTapWall{0%,33%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}
  38%,46%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  48%{transform:translate(-50%,-50%) scale(.8)}
  54%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes tutWallBreak{0%,52%{opacity:1;transform:scale(1)}
  58%{opacity:.45;transform:scale(.94)}
  64%,100%{opacity:.12;transform:scale(.82) rotate(-3deg)}}

/* 火把：点按钮 → 光照半径撑开 */
.tut-scene-torch .tut-btn{animation:tutBtnGlow 3s infinite;}
.tut-scene-torch .t1{left:18%;top:76%;animation:tutTapBtn 3s infinite;}
.tut-scene-torch .tut-light{animation:tutLight 3s infinite;}
@keyframes tutLight{0%,26%{width:16%;height:23.36%;opacity:.35}
  34%{width:26%;height:37.96%;opacity:.6}
  52%,80%{width:78%;height:113.88%;opacity:1}
  100%{width:16%;height:23.36%;opacity:.35}}

/* 星引：视角拉远 → 按住小球拖动 → 松手抵达 */
.tut-scene-guide .tut-btn{animation:tutBtnGlowGuide 4s infinite;}
.tut-scene-guide .tut-world{animation:tutZoom 4s infinite;}
.tut-scene-guide .t1{left:24%;top:62%;animation:tutDrag 4s infinite;}
.tut-scene-guide .tut-ball{animation:tutBallMove 4s infinite;}
@keyframes tutZoom{0%{transform:scale(1)}14%,84%{transform:scale(.86)}94%,100%{transform:scale(1)}}
@keyframes tutBtnGlowGuide{0%,12%{box-shadow:none;border-color:rgba(255,255,255,.16)}
  18%,60%{box-shadow:0 0 0 calc(var(--u)*6) rgba(245,196,81,.16),0 0 calc(var(--u)*28) rgba(245,196,81,.4);border-color:rgba(245,196,81,.8)}
  72%,100%{box-shadow:none;border-color:rgba(255,255,255,.16)}}
@keyframes tutDrag{0%,12%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}
  16%,20%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  22%{transform:translate(-50%,-50%) scale(.82)}
  34%{transform:translate(calc(-50% + var(--u)*120),calc(-50% - var(--u)*36)) scale(.82)}
  52%{transform:translate(calc(-50% + var(--u)*240),calc(-50% - var(--u)*72)) scale(.82)}
  64%{transform:translate(calc(-50% + var(--u)*340),calc(-50% - var(--u)*102)) scale(.82)}
  70%,100%{opacity:0;transform:translate(calc(-50% + var(--u)*340),calc(-50% - var(--u)*102)) scale(1)}}
@keyframes tutBallMove{0%,22%{transform:translate(-50%,-50%)}
  64%,100%{transform:translate(calc(-50% + var(--u)*340),calc(-50% - var(--u)*102))}}

.tut-close-dot{position:absolute;left:50%;bottom:calc(var(--u)*58);width:calc(var(--u)*16);height:calc(var(--u)*16);
  border-radius:50%;background:rgba(255,255,255,.55);transform:translateX(-50%);
  animation:tutClosePulse 1.8s ease-out infinite;}
@keyframes tutClosePulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.28)}
  70%{box-shadow:0 0 0 calc(var(--u)*20) rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* 减弱动效：直接展示静态示意图 */
.tutorial-layer.reduced .tut-touch,
.tutorial-layer.reduced .tut-reticle,
.tutorial-layer.reduced .tut-btn,
.tutorial-layer.reduced .tut-wall,
.tutorial-layer.reduced .tut-world,
.tutorial-layer.reduced .tut-ball,
.tutorial-layer.reduced .tut-light,
.tutorial-layer.reduced .tut-path i{animation:none;}
.tutorial-layer.reduced .tut-touch{opacity:1;}
.tutorial-layer.reduced .tut-reticle{opacity:1;}
.tutorial-layer.reduced .tut-btn{box-shadow:0 0 0 calc(var(--u)*6) rgba(245,196,81,.16),0 0 calc(var(--u)*28) rgba(245,196,81,.4);border-color:rgba(245,196,81,.8);}
.tutorial-layer.reduced .tut-wall{opacity:.45;transform:scale(.94);}
.tutorial-layer.reduced .tut-world{transform:scale(.9);}
.tutorial-layer.reduced .tut-light{width:72%;opacity:1;}
.tutorial-layer.reduced .tut-touch.t2{opacity:0;}

/* 性能调试：?noblur=1 时去掉所有毛玻璃，用于 A/B 判断合成开销 */
.noblur .hud-tag,.noblur .hud-pause,.noblur .hud-length,.noblur .item-btn,.noblur .overlay{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;}

/* ---------- 旧版 WebView 兼容：flex gap 失效时的间距兜底 ---------- */
/* Chromium 84 以前 flex 不支持 gap，整块间距会塌成 0（Via 等旧系统 WebView 上界面会明显变挤）。
   main.js 用真实布局探测后给 <html> 加 .no-flexgap，由下面这些 margin 还原同一间距；
   支持 gap 的浏览器不会命中，观感零变化。 */
.no-flexgap #toast-root>*+*{margin-top:calc(var(--u)*10);}
.no-flexgap .toast>*+*{margin-left:calc(var(--u)*14);}
.no-flexgap .menu-buttons>*+*{margin-top:calc(var(--u)*22);}
.no-flexgap .menu-row>*+*{margin-left:calc(var(--u)*22);}
.no-flexgap .btn>.ic{margin-right:calc(var(--u)*12);}
.no-flexgap .btn>.sub{margin-left:calc(var(--u)*12);}
.no-flexgap .menu-row .btn>.sub{margin-left:0;margin-top:calc(var(--u)*2);}
.no-flexgap .topbar>*+*{margin-left:calc(var(--u)*16);}
.no-flexgap .tabs>*+*{margin-left:calc(var(--u)*12);}
.no-flexgap .map-progress.has-steps>*+*{margin-left:calc(var(--u)*16);}
.no-flexgap .map-steps-list .ms-row>*+*{margin-left:calc(var(--u)*12);}
.no-flexgap .lb-list>*+*{margin-top:calc(var(--u)*14);}
.no-flexgap .lb-row>*+*{margin-left:calc(var(--u)*14);}
.no-flexgap .lb-row .lb-score>*+*{margin-left:calc(var(--u)*4);}
.no-flexgap .ready-head>*+*{margin-left:calc(var(--u)*20);}
.no-flexgap .big-stars.map-stars>*+*{margin-left:calc(var(--u)*6);}
.no-flexgap .ready-rows>*+*{margin-top:calc(var(--u)*14);}
.no-flexgap .ready-rows .chips>*+*{margin-left:calc(var(--u)*20);}
.no-flexgap .ready-rows .chip>*+*{margin-left:calc(var(--u)*5);}
.no-flexgap .ready-actions>*+*{margin-top:calc(var(--u)*16);}
.no-flexgap .hud-top>*+*:not(.hud-stars){margin-left:calc(var(--u)*16);}
.no-flexgap .hud-stars>*+*{margin-left:calc(var(--u)*8);}
.no-flexgap .hud-compass>*+*{margin-top:calc(var(--u)*8);}
.no-flexgap .cbar>*+*{margin-left:calc(var(--u)*6);}
.no-flexgap .pause-card>*+*{margin-top:calc(var(--u)*18);}
.no-flexgap .pause-card .pause-sep>*+*{margin-left:calc(var(--u)*14);}
.no-flexgap .result-body>*+*{margin-top:calc(var(--u)*16);}
.no-flexgap .result-body>.big-stars-anim{margin-top:calc(var(--u)*10);}
.no-flexgap .big-stars-anim>*+*{margin-left:calc(var(--u)*18);}
.no-flexgap .chest-reward .cr-list>*+*{margin-left:calc(var(--u)*14);}
.no-flexgap .chest-reward .cr-card>*+*{margin-top:calc(var(--u)*9);}
.no-flexgap .refill>*{margin:calc(var(--u)*7);}
.no-flexgap .result-actions>*+*{margin-top:calc(var(--u)*16);}
.no-flexgap .result-row>*+*{margin-left:calc(var(--u)*14);}
.no-flexgap .shop-wallet>*+*{margin-left:calc(var(--u)*20);}
.no-flexgap .shop-tabs>*+*{margin-left:calc(var(--u)*6);}
.no-flexgap .shop-card>*+*{margin-left:calc(var(--u)*20);}
.no-flexgap .shop-act>*+*{margin-top:calc(var(--u)*8);}
.no-flexgap .refill-bar>*+*{margin-left:calc(var(--u)*16);}
.no-flexgap .rb-act>*+*{margin-top:calc(var(--u)*8);}
.no-flexgap .set-row>*+*{margin-left:calc(var(--u)*20);}
.no-flexgap .daily-actions>*+*{margin-top:calc(var(--u)*16);}
.no-flexgap .mode-tabs .mode-tab+.mode-tab{margin-left:calc(var(--u)*6);}
.no-flexgap .mode-dots>*+*{margin-left:calc(var(--u)*8);}
.no-flexgap .rotate-card>*+*{margin-top:18px;}
.no-flexgap .tut-links>*+*{margin-left:calc(var(--u)*10);}
.no-flexgap .redeem-box>*+*{margin-left:calc(var(--u)*14);}
/* 网格 gap 在更老的引擎上同样会失效，grid-gap 别名可覆盖 Chromium 57-65 */
.node-grid{grid-gap:calc(var(--u)*18);}
.daily-grid{grid-gap:calc(var(--u)*14);}