/* ============================================================================
   justspeedai · 加速按钮 —— 样式表（移动端优先，430×900 基准视口）
   ----------------------------------------------------------------------------
   硬约束（继承自 CONTRACT）：
   · 不使用 color-mix()（旧内核不支持会让渐变文字整行隐形）
   · 零外链：不引任何字体/CDN，只用系统字体栈
   · 渐变文字一律配 @supports 兜底，不支持时回退纯色（绝不整行隐形）
   双色板：加速态=冷（青→紫） / 加油态=暖（橙→玫红），只换 CSS 变量
   ========================================================================== */

:root{
  --bg:#05070C; --bg2:#080B14; --fg:#E8ECF6; --dim:#8A93A8; --dim2:#5A6377;
  /* 加速态：冷（青 → 紫） */
  --c1:#22D3EE; --c2:#7C3AED; --c1-lite:#A5F3FC; --c1-text:#CFFAFE;
  --c1-soft:rgba(34,211,238,.20); --c2-soft:rgba(124,58,237,.17);
  --glow:rgba(34,211,238,.60);    --glow2:rgba(124,58,237,.50);
  --c1-line:rgba(34,211,238,.42);
  --card:rgba(255,255,255,.042); --card2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.16);
  --ok:#34D399;
  --r-sm:11px; --r-md:14px; --r-lg:18px; --r-xl:22px;
  --shadow-card:0 18px 46px -26px rgba(0,0,0,.95);
}
/* 加油态：暖（橙 → 玫红）—— 只换变量，旧内核同样生效 */
:root.cheer{
  --c1:#FB923C; --c2:#F43F5E; --c1-lite:#FDBA74; --c1-text:#FFEDD5;
  --c1-soft:rgba(251,146,60,.20); --c2-soft:rgba(244,63,94,.17);
  --glow:rgba(251,146,60,.60);    --glow2:rgba(244,63,94,.50);
  --c1-line:rgba(251,146,60,.42);
}

@property --p{syntax:'<number>';inherits:false;initial-value:0}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  user-select:none;-webkit-user-select:none;
  display:flex;flex-direction:column;min-height:100%;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* 极光底色：两团柔光随状态换色 */
body::before{
  content:"";position:fixed;inset:-22%;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 32% at 50% 30%, var(--c1-soft), transparent 68%),
    radial-gradient(42% 30% at 82% 88%, var(--c2-soft), transparent 70%),
    radial-gradient(50% 40% at 12% 96%, rgba(124,58,237,.10), transparent 72%);
  transition:background .6s ease;
  animation:breathe 7s ease-in-out infinite;
}
/* 细网格 + 暗角：给纯色背景一点质感，不引任何图片 */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask:radial-gradient(118% 78% at 50% 26%, #000 0%, transparent 74%);
  mask:radial-gradient(118% 78% at 50% 26%, #000 0%, transparent 74%);
}
@keyframes breathe{0%,100%{opacity:.72}50%{opacity:1}}
.wrap{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;min-height:0}

button{font:inherit;touch-action:manipulation}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

/* ── 顶栏：品牌 + 状态 ─────────────────────────────────────────── */
header{padding:13px 16px 0;flex:none}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px}
.brand{display:inline-flex;align-items:center;gap:8px;min-width:0}
.brand-mark{
  width:23px;height:23px;border-radius:7px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  box-shadow:0 5px 16px -6px var(--glow), inset 0 1px 0 rgba(255,255,255,.38);
  transition:background .45s ease;
}
.brand-name{
  font-size:15.5px;font-weight:700;letter-spacing:.015em;color:#fff;line-height:1;
  white-space:nowrap;text-shadow:0 1px 10px rgba(0,0,0,.5);
}
/* 品牌字渐变高光（同样要 @supports 兜底，避免整块隐形） */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand-name{
    background:linear-gradient(100deg,#fff 0%,#fff 34%,var(--c1-lite) 50%,#fff 66%,#fff 100%);
    background-size:230% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:sheen 7s ease-in-out infinite;
  }
}
@keyframes sheen{0%,100%{background-position:130% 0}50%{background-position:-30% 0}}

.gmeta{display:flex;gap:12px;align-items:center;font-size:11.5px;color:var(--dim);flex:none}
.gm{display:inline-flex;align-items:center;white-space:nowrap}
.gm .mono{color:#C6CFE2;margin-left:4px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);display:inline-block;margin-right:5px;
     box-shadow:0 0 9px var(--ok);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.32}}

.glabel{margin-top:13px;text-align:center;font-size:10.5px;letter-spacing:.26em;color:var(--dim2);text-transform:uppercase}
.gnum{
  margin-top:2px;text-align:center;color:#fff;
  font:700 clamp(30px,9.4vw,46px)/1.12 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;letter-spacing:.005em;
  transition:filter .2s;
}
/* 渐变数字需要 background-clip:text；不支持时保留纯白，避免整行隐形 */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gnum{
    background:linear-gradient(180deg,#fff 32%,var(--c1-text));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.gnum.pulse{filter:brightness(1.6)}

/* ── 舞台：能量核心按钮 ───────────────────────────────────────── */
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:10px 18px;min-height:0}
.stage{position:relative;display:grid;place-items:center;isolation:isolate}
/* 外圈极光 */
.stage::before{
  content:"";position:absolute;inset:-32%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle, var(--glow) 0%, var(--glow2) 34%, transparent 68%);
  filter:blur(30px);opacity:.5;animation:aura 5.2s ease-in-out infinite;transition:background .45s;
}
@keyframes aura{0%,100%{opacity:.4;transform:scale(.96)}50%{opacity:.62;transform:scale(1.03)}}
/* 轨道光弧：绕核心缓慢旋转，给「速度感」 */
.stage::after{
  content:"";position:absolute;inset:-15%;border-radius:50%;pointer-events:none;z-index:0;opacity:.8;
  background:conic-gradient(from 0deg, transparent 0 58%, var(--c1-line) 76%, rgba(255,255,255,.55) 87%, transparent 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.2px));
  animation:spin 7.5s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.core{
  position:relative;z-index:1;width:min(54vw,208px);aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;
  color:#fff;display:grid;place-content:center;gap:5px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 36%),
    radial-gradient(circle at 50% 36%, var(--c1-lite) 0%, var(--c1) 28%, var(--c2) 66%, #130820 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 2px 10px rgba(255,255,255,.18),
    0 26px 74px -20px var(--glow),
    0 0 120px -26px var(--glow2);
  transition:transform .13s cubic-bezier(.2,1.6,.4,1), box-shadow .32s, background .45s, filter .22s;
  animation:coreFloat 5s ease-in-out infinite;
  touch-action:manipulation;
}
@keyframes coreFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.core:active{transform:scale(.935);filter:brightness(1.08)}
.core:focus-visible{outline:3px solid var(--c1);outline-offset:7px}
.core.pop{animation:pop .28s cubic-bezier(.2,1.7,.4,1)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.075)}100%{transform:scale(1)}}
/* 呼吸光环 */
.core::after{
  content:"";position:absolute;inset:-13px;border-radius:50%;pointer-events:none;
  border:1px solid var(--c1-line);animation:halo 3.2s ease-out infinite;
}
@keyframes halo{0%{transform:scale(.95);opacity:.85}100%{transform:scale(1.17);opacity:0}}
.core.cooling{filter:grayscale(.75) brightness(.8);animation:none}
.core.cooling::after{animation:none;opacity:.3}
.core-label{
  font-size:clamp(29px,9vw,40px);font-weight:800;letter-spacing:.08em;line-height:1.05;
  text-shadow:0 2px 16px rgba(0,0,0,.42), 0 0 34px rgba(255,255,255,.22);
}
.core-sub{font-size:11.5px;opacity:.86;letter-spacing:.045em}

/* 进度环（conic 进度条） */
.ring{
  position:absolute;inset:-26px;border-radius:50%;pointer-events:none;z-index:0;opacity:.92;
  /* from 0deg = 从 12 点方向顺时针（from -90deg 会让进度从 9 点方向起，视觉上是歪的） */
  background:conic-gradient(from 0deg, #fff calc(var(--p,0)*1%), rgba(255,255,255,.10) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));
  filter:drop-shadow(0 0 7px var(--glow));
  transition:--p .3s;
}
/* 进度为 0 时用纯底色，避免 conic-gradient 在两个重合色标处留下一条白色发丝线 */
.ring.zero{background:rgba(255,255,255,.10);filter:none}

/* ── 进度 ─────────────────────────────────────────────────────── */
.prog{width:min(80vw,344px);text-align:center}
.bar{
  height:8px;border-radius:99px;background:rgba(255,255,255,.075);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line), inset 0 1px 3px rgba(0,0,0,.5);
}
.bar>i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  box-shadow:0 0 14px -2px var(--glow);
  transition:width .28s cubic-bezier(.2,.9,.3,1);
}
.ptext{margin-top:10px;font-size:13.5px;color:#C9D2E4;letter-spacing:.005em}
.ptext b{color:#fff;font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.hint{font-size:11.5px;color:var(--dim2);margin-top:4px}

.msg{
  min-height:40px;display:grid;place-items:center;padding:0 8px;text-align:center;margin:0;
  font-size:14.5px;color:#DCE3F2;max-width:min(88vw,520px);letter-spacing:.005em;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.msg.flash{animation:flash .45s ease}
@keyframes flash{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}

/* ── 底部个人面板 ─────────────────────────────────────────────── */
footer{padding:0 13px calc(13px + env(safe-area-inset-bottom));flex:none}
.card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:13px 14px 11px;box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:2px}
.stat{position:relative;min-width:0;text-align:center;padding:1px 0}
.stat+.stat::before{
  content:"";position:absolute;left:-1px;top:16%;height:68%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line),transparent);
}
.stat span{
  display:block;font-size:10px;color:var(--dim2);letter-spacing:.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stat b{
  display:block;margin-top:3px;font-size:18px;font-weight:700;line-height:1.15;color:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;
}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btns-main{margin-top:12px}
.btns-main .btn{flex:1 1 0;min-width:0}
.btns-sub{margin-top:8px;justify-content:flex-end}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);background:var(--card2);color:#DCE3F2;font-size:12.5px;
  padding:8px 12px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;min-height:38px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  transition:background .18s,border-color .18s,transform .12s,color .18s;
  touch-action:manipulation;
}
.btn:hover{background:rgba(255,255,255,.105);border-color:var(--line2)}
.btn:active{transform:scale(.965)}
.btn:focus-visible{outline:2px solid var(--c1);outline-offset:2px}
.btn .ico{font-style:normal;font-size:14px;line-height:1;opacity:.95}
.btn-ghost{background:rgba(255,255,255,.035);color:#AFB9CC;min-height:34px;padding:6px 12px}
.btn[aria-pressed="true"]{border-color:var(--c1-line);background:var(--c1-soft);color:#fff}
.fine{margin-top:10px;font-size:10.5px;color:var(--dim2);text-align:center;line-height:1.55}
.brand-foot{
  margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:10.5px;color:#4E5668;letter-spacing:.07em;
}
.bf-name{font-weight:700;color:#78839A;letter-spacing:.09em}
.bf-sep{color:#3A4152}

/* ── 特效层 ───────────────────────────────────────────────────── */
#fx{position:fixed;inset:0;z-index:5;pointer-events:none;width:100%;height:100%}
.wave{position:absolute;border-radius:50%;border:2px solid var(--c1);pointer-events:none;
      animation:wave .5s ease-out forwards}
@keyframes wave{from{width:0;height:0;opacity:.85;transform:translate(-50%,-50%)}
                to{width:340px;height:340px;opacity:0;transform:translate(-50%,-50%)}}
.float{position:absolute;pointer-events:none;font-weight:800;font-size:19px;color:#fff;
       text-shadow:0 2px 12px var(--glow);animation:up .8s ease-out forwards}
@keyframes up{from{opacity:1;transform:translate(-50%,-50%) scale(.7)}
              to{opacity:0;transform:translate(-50%,-190%) scale(1.15)}}
.shake{animation:shake .16s}
@keyframes shake{25%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,1px)}}

#toast{
  position:fixed;left:50%;bottom:112px;transform:translateX(-50%) translateY(14px);z-index:9;
  background:rgba(16,20,31,.97);border:1px solid var(--line2);color:#E8ECF6;padding:11px 16px;
  border-radius:var(--r-md);font-size:13px;opacity:0;transition:.3s;pointer-events:none;
  max-width:86vw;text-align:center;box-shadow:0 16px 40px -16px rgba(0,0,0,.9);
}
#toast.on{opacity:1;transform:translateX(-50%)}

/* ── Turnstile 懒加载遮罩 ─────────────────────────────────────── */
.ts-overlay{
  position:fixed;inset:0;z-index:20;display:grid;place-items:center;
  background:rgba(5,7,12,.8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
}
.ts-overlay[hidden]{display:none}
.ts-box{
  background:rgba(16,20,31,.97);border:1px solid var(--line2);border-radius:var(--r-lg);
  padding:18px 20px;text-align:center;max-width:88vw;box-shadow:0 24px 60px -22px rgba(0,0,0,.95);
}
.ts-text{margin:0 0 12px;font-size:13.5px;color:#DCE3F2}

.noscript{position:relative;z-index:2;padding:24px;text-align:center;color:var(--dim)}

/* ── 短屏适配 ─────────────────────────────────────────────────── */
@media (max-height:760px){
  .core{width:min(46vw,176px)}
  main{gap:14px}
  .gnum{font-size:clamp(25px,7.2vw,36px)}
  .glabel{margin-top:9px}
  .brand-foot{margin-top:6px;padding-top:6px}
  .fine{margin-top:7px}
}
@media (max-width:379px){
  .brand-name{font-size:14px}
  .gmeta{gap:8px;font-size:10.5px}
  .stat span{font-size:9px}
  .stat b{font-size:16px}
}
/* ── 宽屏（桌面）─────────────────────────────────────────────── */
@media (min-width:700px){
  .wrap{max-width:560px;margin:0 auto;width:100%}
  .core{width:224px}
}

/* ══════════════════════════════════════════════════════════════════════════
   M2 增量（CONTRACT-M2.md §4）
   · 战报浮层 / 里程碑横幅 + 烟花 / 今日榜抽屉 / 成就面板 + 排队 toast
   · 仍然：零依赖、移动端优先、不使用 color-mix()
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 里程碑横幅 ───────────────────────────────────────────────── */
.ms-banner{
  position:fixed;left:0;right:0;top:0;z-index:40;display:flex;align-items:center;gap:10px;
  padding:calc(11px + env(safe-area-inset-top)) 14px 11px;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  color:#fff;font-size:13.5px;font-weight:600;line-height:1.45;
  box-shadow:0 12px 38px -14px rgba(0,0,0,.9);animation:msIn .34s cubic-bezier(.2,.9,.3,1);
}
.ms-banner[hidden]{display:none}
@keyframes msIn{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
.ms-text{flex:1;min-width:0}
.ms-close{
  flex:none;width:30px;height:30px;border-radius:50%;cursor:pointer;padding:0;
  border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.22);
  color:#fff;font-size:13px;line-height:1;touch-action:manipulation;
}
.ms-close:active{transform:scale(.94)}

/* ── 烟花层（独立 canvas，压在点击特效之上、浮层之下）─────────── */
.fw-layer{position:fixed;inset:0;z-index:7;pointer-events:none;width:100%;height:100%}
.fw-layer[hidden]{display:none}

/* ── 成就面板（点击徽章展开；未解锁灰显且不剧透条件）─────────── */
.ach-panel{margin-top:11px;border-top:1px solid var(--line);padding-top:10px}
.ach-panel[hidden]{display:none}
.ach-head{font-size:10.5px;letter-spacing:.18em;color:var(--dim2);text-transform:uppercase;margin-bottom:8px}
.ach-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
          max-height:216px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ach-item{
  display:flex;gap:7px;align-items:center;padding:7px 9px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:rgba(255,255,255,.028);
  font-size:11.5px;color:var(--dim);min-width:0;transition:border-color .2s,background .2s;
}
.ach-item.on{border-color:var(--c1-line);background:var(--c1-soft);color:#fff}
.ach-item.locked{opacity:.42}
.ach-icon{font-size:16px;flex:none;line-height:1}
.ach-tx{display:flex;flex-direction:column;min-width:0;text-align:left}
.ach-tx b{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ach-tx i{font-style:normal;font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 成就解锁 toast（★ 排队：同一时刻只允许一个可见）────────── */
.ach-toast{
  position:fixed;left:50%;bottom:170px;z-index:29;transform:translateX(-50%) translateY(16px);
  display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:var(--r-md);
  background:rgba(16,20,31,.98);border:1px solid var(--c1-line);color:#fff;
  box-shadow:0 16px 44px -16px rgba(0,0,0,.95);opacity:0;pointer-events:none;
  transition:opacity .26s ease,transform .26s ease;max-width:88vw;
}
.ach-toast.on{opacity:1;transform:translateX(-50%)}
.ach-toast .ach-tx b{display:block;font-size:12.5px;font-weight:700}
.ach-toast .ach-sub{display:block;font-size:11px;color:var(--dim);margin-top:2px}

/* ── 底部抽屉（今日榜 / 战报）────────────────────────────────── */
.sheet-overlay{
  position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(5,7,12,.76);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
}
.sheet-overlay[hidden]{display:none}
.sheet{
  width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;
  background:rgba(12,16,25,.99);border:1px solid var(--line);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  box-shadow:0 -22px 60px -20px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05);
  animation:sheetIn .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes sheetIn{from{transform:translateY(20px);opacity:.35}to{transform:none;opacity:1}}
.sheet-grab{width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.15);margin:8px auto 0;flex:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
            padding:12px 16px 9px;flex:none}
.sheet-title{margin:0;font-size:15.5px;font-weight:700;letter-spacing:.01em}
.sheet-x{
  flex:none;width:32px;height:32px;border-radius:50%;cursor:pointer;padding:0;
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:#DCE3F2;
  font-size:13px;line-height:1;touch-action:manipulation;transition:background .18s;
}
.sheet-x:hover{background:rgba(255,255,255,.12)}
.sheet-x:active{transform:scale(.94)}
.sheet-meta{padding:0 16px 8px;font-size:11.5px;color:var(--dim);flex:none}
.sheet-body{flex:1;min-height:80px;overflow-y:auto;padding:0 12px 6px;-webkit-overflow-scrolling:touch}
.sheet-foot{padding:10px 16px 2px;border-top:1px solid var(--line);flex:none;
            font-size:13px;color:#DCE3F2;line-height:1.5}
.lb-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;font-size:13px}
.lb-row[data-me="1"]{background:var(--c1-soft);box-shadow:inset 0 0 0 1px var(--c1-line);color:#fff}
.lb-rank{width:42px;flex:none;text-align:right;color:var(--dim);
         font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.lb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-val{flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
        font-variant-numeric:tabular-nums;color:#fff}
.lb-state{padding:34px 16px;text-align:center;color:var(--dim);font-size:13px;line-height:1.6}
.lb-state .btn{margin-top:12px}

/* ── 战报浮层 ─────────────────────────────────────────────────── */
.sheet-share{max-height:92vh}
.share-preview{flex:1;min-height:0;overflow:auto;display:grid;place-items:center;padding:2px 16px}
#shareCv{
  width:min(60vw,248px);height:auto;display:block;border-radius:var(--r-md);
  border:1px solid var(--line);background:#0A0D15;
  box-shadow:0 22px 58px -22px rgba(0,0,0,.95);
}
.share-note{padding:8px 16px 0;min-height:17px;text-align:center;font-size:11.5px;color:var(--dim)}
.share-actions{display:flex;gap:10px;padding:8px 16px 2px;flex:none}
.btn-primary{
  flex:1;border-color:transparent;color:#fff;font-weight:700;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  box-shadow:0 10px 28px -12px var(--glow);
}
.btn-primary:hover{background:linear-gradient(90deg,var(--c1),var(--c2))}
.btn-primary:disabled{opacity:.45;cursor:default}
.btn-primary:disabled:active{transform:none}

/* ── 宽屏 ─────────────────────────────────────────────────────── */
@media (min-width:700px){
  .sheet-overlay{align-items:center}
  .sheet{border-radius:var(--r-xl);max-height:86vh}
}

/* ── 无障碍：减少动效 ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  body::before{opacity:.9}
}

/* ══════════════════════════════════════════════════════════════════════════
   M4 增量（CONTRACT-M4.md §7）
   · 顶栏账号入口 / 登录注册抽屉 / 恢复码页 / 账号面板 / 他人主页 / 忘记密码
   · 按钮变身（.core.ready，§7.4）
   · 仍然：零依赖、移动端优先、不使用 color-mix()、输入框 font-size ≥16px
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 顶栏账号入口（#btnAuth）──────────────────────────────────── */
.btn-auth{
  display:inline-flex;align-items:center;gap:5px;flex:none;max-width:132px;min-height:28px;
  padding:4px 10px;border-radius:99px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line);background:var(--card2);color:#DCE3F2;font-size:12px;line-height:1.2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:background .18s,border-color .18s,transform .12s,color .18s;
  touch-action:manipulation;
}
.btn-auth:hover{background:rgba(255,255,255,.10);border-color:var(--line2)}
.btn-auth:active{transform:scale(.96)}
.btn-auth:focus-visible{outline:2px solid var(--c1);outline-offset:2px}
.btn-auth.on{border-color:var(--c1-line);background:var(--c1-soft);color:#fff}
.auth-ava{flex:none;font-size:13px;line-height:1}
.auth-ava:empty{display:none}
.auth-txt{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* 顶栏在窄屏折成两行：① 品牌 + 账号入口 ② 在线/距重置（右对齐）
   —— 三块并排时 430px 会挤到溢出，折行后 320px 也不横向滚动 */
@media (max-width:620px){
  .topbar{flex-wrap:wrap;row-gap:6px}
  .gmeta{order:3;flex:1 1 100%;justify-content:flex-end}
}

/* ── 表单型抽屉（登录/注册 · 恢复码 · 账号面板 · 他人主页 · 重置密码）── */
.sheet-form{max-height:90vh}
.sheet-form .sheet-body{padding:0 16px 6px}
.field{display:block;margin:0 0 11px}
.field[hidden]{display:none}
.field-label{display:block;font-size:11.5px;color:var(--dim);margin-bottom:5px;letter-spacing:.02em}
.inp{
  display:block;width:100%;padding:11px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:rgba(255,255,255,.045);color:var(--fg);
  font-family:inherit;font-size:16px;line-height:1.35;      /* ★ ≥16px：iOS 聚焦不缩放 */
  -webkit-appearance:none;appearance:none;
  user-select:text;-webkit-user-select:text;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.inp::placeholder{color:var(--dim2)}
.inp:focus{outline:none;border-color:var(--c1-line);background:rgba(255,255,255,.075);box-shadow:0 0 0 3px var(--c1-soft)}
.form-err{min-height:17px;margin:2px 0 8px;font-size:12px;color:#FCA5A5;line-height:1.45}
.form-err:empty{min-height:0;margin:0 0 4px}
.form-submit{width:100%;min-height:44px;font-size:14px}
.link-btn{
  display:block;margin:12px auto 2px;padding:6px 8px;border:0;background:none;cursor:pointer;
  color:var(--c1-text);font-size:12.5px;text-decoration:underline;text-underline-offset:3px;
}
.link-btn:hover{color:#fff}
.btn-danger{border-color:rgba(244,63,94,.45);color:#FDA4AF;background:rgba(244,63,94,.10)}
.btn-danger:hover{background:rgba(244,63,94,.18);border-color:rgba(244,63,94,.65)}

/* ── 登录 / 注册 tab ──────────────────────────────────────────── */
.auth-tabs{
  display:flex;gap:6px;padding:3px;margin:0 0 14px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.auth-tab{
  flex:1;min-height:36px;border:0;border-radius:9px;cursor:pointer;background:none;
  color:var(--dim);font-size:13px;font-weight:600;
  transition:background .18s,color .18s,box-shadow .18s;
}
.auth-tab.on{background:linear-gradient(90deg,var(--c1),var(--c2));color:#fff;box-shadow:0 6px 18px -10px var(--glow)}
.auth-tab:focus-visible{outline:2px solid var(--c1);outline-offset:2px}

/* ── 恢复码页 ─────────────────────────────────────────────────── */
.rc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:2px 0 6px}
.rc-code{
  padding:10px 8px;border-radius:var(--r-sm);border:1px dashed var(--line2);
  background:rgba(255,255,255,.04);text-align:center;color:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;letter-spacing:.06em;
  user-select:text;-webkit-user-select:text;
}
.rc-actions{display:flex;gap:8px;padding:6px 16px 0;flex:none}
.rc-actions .btn{flex:1}
.rc-check{display:flex;align-items:center;gap:9px;padding:12px 16px 0;font-size:13px;color:#DCE3F2;cursor:pointer}
.rc-check input{width:19px;height:19px;flex:none;accent-color:var(--c1);cursor:pointer}
.rc-foot{padding:10px 16px 2px;flex:none}
.rc-foot .btn{width:100%;min-height:44px}

/* ── 账号面板 ─────────────────────────────────────────────────── */
.acc-head{display:flex;align-items:center;gap:12px;padding:2px 0 12px}
.acc-ava{
  width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(135deg,var(--c1-soft),var(--c2-soft));border:1px solid var(--c1-line);
  user-select:none;-webkit-user-select:none;
}
.acc-id{min-width:0;display:flex;flex-direction:column;gap:2px}
.acc-nm{font-size:16px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-em{font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:0 0 12px}
.acc-cell{
  padding:8px 9px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:rgba(255,255,255,.03);text-align:center;min-width:0;
}
.acc-cell span{display:block;font-size:10px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-cell b{
  display:block;margin-top:3px;font-size:15px;color:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;
}
.acc-sec{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.acc-sec-title{font-size:10.5px;letter-spacing:.16em;color:var(--dim2);text-transform:uppercase;margin-bottom:10px}
.acc-line{font-size:12.5px;color:#DCE3F2;margin-bottom:9px}
.acc-btns{display:flex;gap:8px;flex-wrap:wrap}
.acc-btns .btn{flex:1 1 auto}
.acc-box{margin-top:10px;padding:11px;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.acc-box[hidden]{display:none}
.acc-box-danger{border-color:rgba(244,63,94,.45);background:rgba(244,63,94,.08)}
.acc-warn{margin:0 0 10px;font-size:12px;color:#FCA5A5;line-height:1.5}
.ava-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin:0 0 12px}
.ava-item{
  aspect-ratio:1;display:grid;place-items:center;font-size:17px;cursor:pointer;padding:0;
  border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  transition:background .16s,border-color .16s,transform .12s;
  touch-action:manipulation;
}
.ava-item:hover{background:rgba(255,255,255,.09)}
.ava-item:active{transform:scale(.94)}
.ava-item.on{border-color:var(--c1-line);background:var(--c1-soft);box-shadow:0 0 0 1px var(--c1-line)}
.ava-item:focus-visible{outline:2px solid var(--c1);outline-offset:1px}

/* ── 他人主页（/api/u/:uid）───────────────────────────────────── */
.user-head{display:flex;align-items:center;gap:12px;padding:2px 0 14px}
.user-ava{
  width:56px;height:56px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:28px;
  background:linear-gradient(135deg,var(--c1-soft),var(--c2-soft));border:1px solid var(--c1-line);
  user-select:none;-webkit-user-select:none;
}
.user-nm{font-size:17px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-sub{font-size:11.5px;color:var(--dim);margin-top:3px}
.user-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 14px}
.user-chip{
  font-size:11px;color:#C9D2E4;padding:4px 9px;border-radius:99px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
}
.user-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.user-state{padding:26px 4px;text-align:center;color:var(--dim);font-size:13px;line-height:1.6}

/* ── 榜单里的头像与可点昵称（§7.2：从榜单点昵称进他人主页）──── */
.lb-ava{flex:none;width:18px;font-size:14px;line-height:1;text-align:center}
.lb-link{
  cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.22);text-underline-offset:2px;
}
.lb-link:hover{color:#fff;text-decoration-color:var(--c1-line)}
.lb-link:focus-visible{outline:2px solid var(--c1);outline-offset:2px;border-radius:4px}

/* ── §7.4 按钮变身：下一次点击就会拿到一次加速 ────────────────── */
/* 视觉 = 更亮的能量色 + 呼吸脉冲；prefers-reduced-motion 下动画被全局关掉，
   只剩静态高亮（filter/box-shadow 仍在，不会退化成无反馈）。 */
.core.ready{
  filter:brightness(1.15) saturate(1.14);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 2px 14px rgba(255,255,255,.26),
    0 30px 86px -18px var(--glow),
    0 0 150px -20px var(--glow2);
  animation:coreFloat 5s ease-in-out infinite, readyPulse 1.5s ease-in-out infinite;
}
.core.ready:active{filter:brightness(1.28) saturate(1.22)}
.core.ready::after{border-color:var(--c1);animation:readyHalo 1.5s ease-out infinite}
@keyframes readyPulse{
  0%,100%{filter:brightness(1.08) saturate(1.10)}
  50%{filter:brightness(1.26) saturate(1.20)}
}
@keyframes readyHalo{0%{transform:scale(.96);opacity:.95}100%{transform:scale(1.22);opacity:0}}

/* ── 窄屏收口（360px 不横向滚动）──────────────────────────────── */
@media (max-width:379px){
  .btn-auth{max-width:104px;padding:4px 8px}
  .ava-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .acc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rc-list{grid-template-columns:1fr}
  .acc-ava{width:46px;height:46px;font-size:23px}
}