/* ============ 雷电·无尽弹幕 3D — 全局样式 ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; height:100%; overflow:hidden; background:#05070d; }
body {
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  color:#dfe9f5; user-select:none; -webkit-user-select:none; touch-action:none;
  position:fixed; inset:0;
  background:radial-gradient(1200px 800px at 50% 20%, #0b1626 0%, #05070d 60%, #020306 100%);
}
#app { position:absolute; inset:0; }
#stage { position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); overflow:hidden;
  box-shadow:0 0 60px rgba(0,180,255,.12), 0 0 0 1px rgba(90,160,255,.15); }
#gl { position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ---------- 屏幕两侧装饰（宽屏时） ---------- */
body::before, body::after {
  content:""; position:absolute; top:0; bottom:0; width:50%; pointer-events:none; z-index:0;
}
body::before { right:100%; background:linear-gradient(270deg, rgba(20,60,110,.18), transparent 70%); }
body::after  { left:100%;  background:linear-gradient(90deg,  rgba(20,60,110,.18), transparent 70%); }

/* ============ HUD ============ */
#hud { position:absolute; inset:0; pointer-events:none; z-index:10; display:none; }
#hud.on { display:block; }

#hudTL { position:absolute; top:calc(8px + env(safe-area-inset-top)); left:10px; width:44%; max-width:250px; }
.barwrap { height:13px; border-radius:8px; background:rgba(8,14,26,.72); border:1px solid rgba(120,180,255,.28);
  overflow:hidden; position:relative; margin-bottom:5px; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.barwrap .bar { position:absolute; inset:0; transform-origin:left center; transition:transform .12s linear; }
#hpBar .bar { background:linear-gradient(90deg,#19e36e,#8cff9c); }
#hpBar.low .bar { background:linear-gradient(90deg,#ff3b30,#ff8a70); }
#shieldWrap .bar { background:linear-gradient(90deg,#28b7ff,#a8e9ff); }
.barlabel { position:absolute; inset:0; font-size:9px; line-height:12px; text-align:center; color:#fff;
  text-shadow:0 1px 2px #000; font-weight:700; letter-spacing:1px; }
#lvTag { font-size:12px; font-weight:800; color:#ffd257; text-shadow:0 1px 3px #000; letter-spacing:1px; }
#lvTag small { color:#9fc1e8; font-weight:600; }

#hudTR { position:absolute; top:calc(8px + env(safe-area-inset-top)); right:10px; text-align:right; }
#scoreVal { font-size:21px; font-weight:900; color:#fff; text-shadow:0 0 10px rgba(80,180,255,.8), 0 1px 2px #000;
  font-variant-numeric:tabular-nums; letter-spacing:1px; line-height:1.05; }
#waveInfo { font-size:11px; color:#9fc1e8; font-weight:700; text-shadow:0 1px 2px #000; margin-top:1px; }
.hudbtns { margin-top:5px; pointer-events:auto; }
.hudbtns button { background:rgba(10,20,38,.7); border:1px solid rgba(120,180,255,.3); color:#bcd6f5;
  border-radius:7px; font-size:11px; padding:4px 9px; margin-left:5px; cursor:pointer; font-weight:700; }
.hudbtns button:active { transform:scale(.94); }

/* 连击 */
#comboTag { position:absolute; top:15%; right:10px; text-align:right; opacity:0; transition:opacity .2s; }
#comboTag.on { opacity:1; }
#comboNum { font-size:26px; font-weight:900; font-style:italic; color:#ffd257;
  text-shadow:0 0 12px rgba(255,160,40,.9), 0 2px 2px #000; }
#comboNum.hot { color:#ff6a3d; text-shadow:0 0 14px rgba(255,80,30,.95), 0 2px 2px #000; }
#comboSub { font-size:10px; color:#ffe3ae; font-weight:700; }
#comboTimer { height:3px; width:64px; margin-left:auto; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden; margin-top:3px; }
#comboTimer i { display:block; height:100%; background:#ffd257; transform-origin:right; }

/* 技能列表 */
#skillList { position:absolute; left:8px; bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex; flex-wrap:wrap-reverse; gap:4px; max-width:56%; max-height:84px; overflow:hidden; align-content:flex-end; }
.skillChip { position:relative; width:30px; height:30px; border-radius:8px; background:rgba(6,12,24,.78);
  border:1px solid rgba(255,255,255,.14); box-shadow:0 2px 6px rgba(0,0,0,.5); flex:0 0 auto; }
.skillChip img { width:100%; height:100%; border-radius:7px; display:block; }
.skillChip .n { position:absolute; right:-3px; bottom:-4px; min-width:15px; height:15px; line-height:14px; padding:0 3px;
  background:#132c4e; border:1px solid rgba(140,200,255,.5); color:#fff; font-size:9px; font-weight:800;
  border-radius:8px; text-align:center; }
.skillChip.new { animation:chipPop .45s ease; }
@keyframes chipPop { 0%{transform:scale(2.1); filter:brightness(2.2);} 100%{transform:scale(1);} }

/* 大招按钮 */
#bombBtn { position:absolute; right:14px; bottom:calc(16px + env(safe-area-inset-bottom)); width:74px; height:74px;
  border-radius:50%; border:2px solid rgba(120,190,255,.45); background:radial-gradient(circle at 35% 30%, rgba(40,90,160,.55), rgba(8,16,32,.85));
  color:#cfe7ff; font-weight:900; font-size:12px; letter-spacing:2px; pointer-events:auto; cursor:pointer;
  box-shadow:0 0 18px rgba(40,120,255,.35), inset 0 0 14px rgba(60,140,255,.25); transition:transform .08s; z-index:12; display:none; }
#hud.on #bombBtn { display:block; }
#bombBtn.ready { border-color:#ffd257; color:#fff; background:radial-gradient(circle at 35% 30%, rgba(255,170,40,.5), rgba(60,30,6,.9));
  box-shadow:0 0 26px rgba(255,170,40,.65), inset 0 0 16px rgba(255,190,80,.35); animation:bombPulse 1.2s infinite; }
#bombBtn:active { transform:scale(.9); }
#bombBtn .cnt { display:block; font-size:20px; line-height:1; margin-top:2px; }
@keyframes bombPulse { 0%,100%{ box-shadow:0 0 18px rgba(255,170,40,.45), inset 0 0 14px rgba(255,190,80,.3);} 50%{ box-shadow:0 0 34px rgba(255,190,60,.85), inset 0 0 20px rgba(255,210,90,.5);} }

/* BOSS 血条 */
#bossBar { position:absolute; top:calc(52px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  width:72%; max-width:420px; display:none; z-index:11; }
#bossBar.on { display:block; }
#bossName { text-align:center; font-size:12px; font-weight:900; letter-spacing:3px; color:#ffb0b0;
  text-shadow:0 0 8px rgba(255,60,60,.8), 0 1px 2px #000; margin-bottom:3px; }
#bossHpWrap { height:10px; border-radius:6px; background:rgba(10,5,8,.8); border:1px solid rgba(255,110,110,.4); overflow:hidden; }
#bossHp { height:100%; transform-origin:left; background:linear-gradient(90deg,#ff2d20,#ff8a5c,#ffd257); transition:transform .15s linear; }
#bossPips { text-align:center; margin-top:3px; }
#bossPips i { display:inline-block; width:18px; height:4px; border-radius:2px; margin:0 2px; background:rgba(255,255,255,.18); }
#bossPips i.on { background:#ff5c47; box-shadow:0 0 6px rgba(255,80,50,.9); }

/* 受击红晕 / 闪光 */
#vignette { position:absolute; inset:0; pointer-events:none; opacity:0; z-index:9;
  box-shadow:inset 0 0 90px 30px rgba(255,30,20,.75); transition:opacity .35s; }
#flash { position:absolute; inset:0; pointer-events:none; opacity:0; background:#fff; z-index:20; }
#lowhp { position:absolute; inset:0; pointer-events:none; opacity:0; z-index:9;
  box-shadow:inset 0 0 70px 18px rgba(255,40,20,.5); }
#lowhp.on { animation:lowhp 1s infinite; }
@keyframes lowhp { 0%,100%{opacity:.15;} 50%{opacity:.6;} }

/* 横幅提示 */
#banner { position:absolute; top:32%; left:0; right:0; text-align:center; pointer-events:none; z-index:15; }
#banner .b1 { font-size:30px; font-weight:900; letter-spacing:6px; color:#fff;
  text-shadow:0 0 18px rgba(80,180,255,.95), 0 2px 4px #000; }
#banner .b2 { font-size:13px; letter-spacing:3px; color:#9fd0ff; margin-top:4px; font-weight:700; text-shadow:0 1px 3px #000; }
#banner.show { animation:bannerIn 2.2s ease forwards; }
@keyframes bannerIn { 0%{opacity:0; transform:scale(1.5);} 12%{opacity:1; transform:scale(1);} 78%{opacity:1;} 100%{opacity:0; transform:translateY(-14px);} }

/* 拾取/得分浮字 */
#popups { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:14; }
.pop { position:absolute; transform:translate(-50%,-50%); font-weight:900; white-space:nowrap;
  text-shadow:0 0 8px rgba(0,0,0,.8), 0 1px 2px #000; animation:popUp 1s ease forwards; }
@keyframes popUp { 0%{opacity:0; transform:translate(-50%,-40%) scale(.6);} 15%{opacity:1; transform:translate(-50%,-55%) scale(1.15);}
  30%{transform:translate(-50%,-60%) scale(1);} 100%{opacity:0; transform:translate(-50%,-160%) scale(1);} }

/* 技能掉落提示 */
#dropHint { position:absolute; top:22%; left:0; right:0; text-align:center; opacity:0; pointer-events:none; z-index:14;
  font-size:12px; font-weight:800; letter-spacing:4px; color:#ffe9b0; text-shadow:0 0 10px rgba(255,190,60,.8); }
#dropHint.show { animation:hintIn 1.1s ease forwards; }
@keyframes hintIn { 0%{opacity:0; transform:translateY(10px);} 25%{opacity:1; transform:translateY(0);} 75%{opacity:1;} 100%{opacity:0;} }

/* 技能掉落（DOM 投影：图标+铭牌一体点击热区，直接点击即拾取） */
#dropLabels { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:13; }
.skillHit { position:absolute; left:-999px; top:-999px; transform:translate(-50%,-50%);
  width:100px; height:124px; pointer-events:auto; cursor:pointer;
  -webkit-tap-highlight-color:transparent; will-change:left,top; }
.skillHit .skillTag { position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
  padding:2px 8px; border-radius:7px; background:rgba(7,13,25,.82); border:1px solid #8fd4ff;
  font-size:12px; font-weight:800; letter-spacing:1px; white-space:nowrap;
  text-shadow:0 1px 2px #000; animation:tagFloat 1.5s ease-in-out infinite alternate; }
.skillHit:hover .skillTag { border-color:#fff; box-shadow:0 0 14px rgba(140,200,255,.55); }
.skillHit:active .skillTag { filter:brightness(1.5); box-shadow:0 0 18px rgba(180,230,255,.8); }
@keyframes tagFloat { from { margin-top:0; } to { margin-top:3px; } }

/* ============ 全屏面板（菜单 / 结算） ============ */
.panel { position:absolute; inset:0; z-index:30; display:none; flex-direction:column; align-items:center;
  overflow-y:auto; overflow-x:hidden; padding:max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  background:radial-gradient(120% 100% at 50% 0%, rgba(10,24,48,.88), rgba(3,6,12,.96)); backdrop-filter:blur(6px); }
.panel.on { display:flex; }
.panel h1 { font-size:32px; font-weight:900; letter-spacing:5px; margin-top:2.5vh;
  background:linear-gradient(180deg,#eaf6ff,#5fb6ff 55%,#2a6cd8); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(70,160,255,.55)); text-align:center; }
.panel h1 small { display:block; font-size:10px; letter-spacing:8px; color:#7fb2e8; margin-top:5px; -webkit-text-fill-color:#7fb2e8; }
.subttl { font-size:11px; color:#7fa8d8; letter-spacing:4px; font-weight:700; margin:14px 0 7px;
  width:100%; text-align:center; }
.subttl::before, .subttl::after { content:"—— "; color:#3a5c88; }
.subttl::after { content:" ——"; }

.btnrow { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; justify-content:center; }
.bigbtn { min-width:132px; padding:11px 20px; border-radius:13px; border:1px solid rgba(110,190,255,.45);
  background:linear-gradient(180deg, rgba(40,110,210,.35), rgba(16,40,86,.65)); color:#eaf5ff; font-size:16px; font-weight:900;
  letter-spacing:4px; cursor:pointer; box-shadow:0 4px 18px rgba(20,90,200,.35), inset 0 1px 0 rgba(160,220,255,.35); transition:transform .1s, box-shadow .2s; }
.bigbtn:active { transform:scale(.95); }
.bigbtn.primary { border-color:rgba(255,190,90,.6);
  background:linear-gradient(180deg, rgba(255,150,40,.38), rgba(120,60,10,.7));
  box-shadow:0 4px 22px rgba(255,140,30,.35), inset 0 1px 0 rgba(255,220,160,.4); }
.bigbtn.ghost { background:rgba(10,20,40,.5); box-shadow:none; }
.bigbtn small { display:block; font-size:10px; letter-spacing:1px; color:#9dbfe8; font-weight:600; margin-top:3px; }

/* 战机选择（手机一行三个） */
#shipRow { display:flex; gap:7px; margin-top:6px; width:100%; max-width:480px; justify-content:center; flex-wrap:nowrap; }
.shipCard { flex:1 1 0; min-width:0; background:rgba(10,22,44,.75); border:1px solid rgba(110,170,255,.25); border-radius:13px;
  padding:8px 4px 7px; text-align:center; cursor:pointer; transition:transform .12s, border-color .2s, box-shadow .2s; }
.shipCard canvas, .shipCard img { width:66px; height:66px; display:block; margin:0 auto;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.55)); }
.shipCard .nm { font-size:12px; font-weight:900; letter-spacing:1px; margin-top:1px; }
.shipCard .ds { font-size:9px; color:#8fb4dd; margin-top:1px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shipCard .st { display:flex; gap:2px; justify-content:center; margin-top:4px; flex-wrap:wrap; }
.shipCard .st b { font-size:8px; color:#7fa0c8; font-weight:700; letter-spacing:0; transform:scale(.92); }
.shipCard.sel { border-color:#57c2ff; box-shadow:0 0 16px rgba(60,160,255,.45); transform:translateY(-2px); background:rgba(16,38,76,.85); }
.shipCard.sel .nm { color:#8fd4ff; }

/* 成就 */
.achGrid { display:flex; flex-direction:column; gap:7px; width:100%; max-width:440px; }
.achItem { display:flex; align-items:center; gap:10px; background:rgba(10,20,40,.6); border:1px solid rgba(100,160,240,.18);
  border-radius:11px; padding:8px 12px; }
.achItem .ic { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px;
  background:rgba(30,50,90,.6); border:1px solid rgba(120,180,255,.25); flex:0 0 auto; filter:grayscale(1); opacity:.45; }
.achItem.done .ic { filter:none; opacity:1; background:rgba(60,110,30,.5); border-color:rgba(190,255,120,.5); box-shadow:0 0 10px rgba(160,255,80,.3); }
.achItem .tx b { font-size:13px; display:block; }
.achItem .tx span { font-size:10px; color:#8fb0d8; }
.achItem.done .tx b { color:#c9ff8f; }

/* 模式按钮：两框等大等高等宽 */
.btnrow.modeRow { width:100%; max-width:480px; gap:9px; }
.btnrow.modeRow .bigbtn { flex:1 1 0; min-width:0; height:66px; padding:8px 8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; letter-spacing:3px; }
.btnrow.modeRow .bigbtn small { font-size:9px; letter-spacing:0.5px; margin-top:3px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* 首页双榜单（闯关 + 无尽 同屏） */
.homeBoards { display:flex; gap:9px; width:100%; max-width:480px; margin-top:2px; align-items:stretch; }
.boardCard { flex:1 1 0; min-width:0; background:linear-gradient(180deg, rgba(14,28,54,.72), rgba(8,16,32,.72));
  border:1px solid rgba(100,160,240,.22); border-radius:13px; padding:8px 8px 6px;
  box-shadow:0 4px 14px rgba(0,10,30,.35); }
.boardCard .bh { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px;
  padding-bottom:5px; border-bottom:1px solid rgba(110,160,220,.18); }
.boardCard .bt { font-size:11px; font-weight:900; letter-spacing:2px; color:#8fd4ff; }
.boardCard .blink { background:none; border:none; color:#6f92bd; font-size:10px; font-weight:700;
  cursor:pointer; padding:2px 4px; letter-spacing:1px; }
.boardCard .blink:active { transform:scale(.92); }
.boardCard .bl { min-height:76px; }
.boardCard .empty { text-align:center; color:#5f7ea8; padding:20px 0 14px; font-size:10px; letter-spacing:1px; }
.boardCard .row2 { padding:3px 4px 4px; border-bottom:1px dashed rgba(110,160,220,.14); }
.boardCard .row2:last-child { border-bottom:none; }
.boardCard .row2 .r1 { display:flex; align-items:baseline; gap:5px; font-size:11px; color:#c6d9f2; }
.boardCard .row2 .r1 .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.boardCard .row2 .r1 .rn { font-size:9px; font-weight:900; color:#7fa0c8; font-style:italic; }
.boardCard .row2 .r1 .rk1 { color:#ffd257; } .boardCard .row2 .r1 .rk2 { color:#cfd8e6; } .boardCard .row2 .r1 .rk3 { color:#e0a06a; }
.boardCard .row2 .r2 { display:flex; justify-content:space-between; font-size:9px; color:#7fa0c8; margin-top:1px; }
.boardCard .row2 .r2 b { color:#ffd257; font-variant-numeric:tabular-nums; }
.boardCard .row2.me { background:rgba(255,210,87,.09); border-radius:7px; }
.boardCard .row2.me .r1 .nm { color:#ffe9b0; font-weight:900; }

/* 排行榜 */
.leadList { width:100%; max-width:440px; font-size:12px; max-height:52vh; overflow-y:auto; }
.leadHead { display:grid; grid-template-columns:34px 1fr 62px 62px 92px; width:100%; max-width:440px;
  font-size:11px; color:#7fa0c8; font-weight:700; letter-spacing:1px; padding:0 10px 6px;
  border-bottom:1px solid rgba(110,160,220,.25); }
.leadList .row { display:grid; grid-template-columns:34px 1fr 62px 62px 92px; align-items:center;
  padding:6px 10px; border-bottom:1px dashed rgba(110,160,220,.16); color:#bcd4f0; }
.leadList .row .rk { color:#7fa0c8; font-weight:800; }
.leadList .row .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:6px; }
.leadList .row b { color:#ffd257; font-variant-numeric:tabular-nums; text-align:right; }
.leadList .row.me { background:rgba(255,210,87,.09); border-left:2px solid #ffd257; }
.leadList .row.me .nm { color:#ffe9b0; font-weight:900; }
.leadList .row.top1 .rk { color:#ffd257; }
.leadList .row.top2 .rk { color:#cfd8e6; }
.leadList .row.top3 .rk { color:#e0a06a; }
.leadList .empty { text-align:center; color:#5f7ea8; padding:16px 0; }

/* 榜单模式分栏（居中） */
.leadTabs { display:flex; gap:8px; margin-bottom:10px; width:100%; justify-content:center; }
.leadTab { padding:7px 18px; border-radius:10px; border:1px solid rgba(110,170,255,.3);
  background:rgba(10,20,40,.6); color:#9fc1e8; font-size:13px; font-weight:800;
  letter-spacing:2px; cursor:pointer; transition:background .15s, border-color .15s; }
.leadTab.on { color:#fff; border-color:#57c2ff; background:rgba(30,80,160,.55);
  box-shadow:0 0 14px rgba(60,160,255,.35); }
.leadTab:active { transform:scale(.95); }

/* 本机标识 */
.idChip { margin-top:10px; text-align:center; font-size:12px; color:#9fc1e8; letter-spacing:1px;
  background:rgba(10,20,40,.55); border:1px solid rgba(110,170,255,.25); border-radius:12px;
  padding:7px 14px; max-width:460px; }
.idChip b { color:#8fd4ff; font-weight:900; font-size:14px; letter-spacing:2px; }
.idChip .idTip { display:block; font-size:10px; color:#5f7ea8; margin-top:3px; letter-spacing:0; }
.idChip.pulse { animation:idPulse 1.6s ease 4; }
@keyframes idPulse {
  0%,100% { border-color:rgba(110,170,255,.25); box-shadow:none; }
  50% { border-color:#ffd257; box-shadow:0 0 18px rgba(255,190,60,.45); }
}

.idBar { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:4px;
  font-size:12px; color:#9fc1e8; margin-bottom:10px; }
.idBar b { color:#8fd4ff; font-weight:900; letter-spacing:1px; }
.idBar .idTip { width:100%; text-align:center; font-size:10px; color:#5f7ea8; }
#overIdHint { text-align:center; font-size:10px; color:#5f7ea8; margin-top:6px; }

/* 返回按钮 与 面板内容列 */
.backBtn { position:absolute; top:max(12px, env(safe-area-inset-top)); left:12px; padding:7px 14px; font-size:12px; }
.panel .inner { width:100%; max-width:520px; display:flex; flex-direction:column; align-items:center; }

/* 结算（游戏结束 / 通关 / 关卡完成 报告页） */
.resultBox { position:relative; overflow:hidden; background:linear-gradient(180deg, rgba(14,30,58,.92), rgba(6,12,26,.95));
  border:1px solid rgba(110,170,255,.3); border-radius:18px; padding:20px 22px 16px;
  margin-top:14px; min-width:280px; max-width:420px; width:100%;
  box-shadow:0 14px 48px rgba(0,20,60,.7), inset 0 1px 0 rgba(160,210,255,.14);
  animation:rbIn .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes rbIn { 0% { opacity:0; transform:translateY(18px) scale(.94); } 100% { opacity:1; transform:none; } }
.rbTop { position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, #57c2ff 30%, #9fe8ff 50%, #57c2ff 70%, transparent); }
.resultBox h2 { text-align:center; font-size:25px; letter-spacing:6px; margin-bottom:4px; }
.resultBox h2.win { color:#9dffb0; text-shadow:0 0 16px rgba(80,255,120,.55), 0 2px 2px #000; }
.resultBox h2.lose { color:#ff8a7a; text-shadow:0 0 16px rgba(255,80,60,.55), 0 2px 2px #000; }

/* 得分主视觉（数字滚动动画由 JS 驱动） */
.heroScore { text-align:center; margin:8px 0 2px; }
.heroScore .hsLabel { font-size:10px; color:#7fa8d8; letter-spacing:5px; font-weight:700; }
.heroScore .hsNum { font-size:40px; font-weight:900; line-height:1.15; color:#ffd257;
  font-variant-numeric:tabular-nums; letter-spacing:1px;
  text-shadow:0 0 22px rgba(255,190,60,.5), 0 2px 4px #000; }

/* 榜单排名徽标（异步填充） */
.rankLine { text-align:center; margin:6px 0 2px; font-size:12px; color:#9fe8ff; letter-spacing:1px; }
.rankLine b { color:#fff; font-size:14px; font-weight:900; }

/* 数据网格 */
.statGrid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:12px 0 8px; }
.stat { display:flex; align-items:center; gap:6px; background:rgba(20,42,76,.5);
  border:1px solid rgba(110,170,255,.18); border-radius:10px; padding:7px 10px; font-size:11px; color:#9fc1e8; }
.stat .si { font-size:13px; }
.stat .sl { flex:1; letter-spacing:1px; }
.stat b { color:#fff; font-size:15px; font-weight:900; font-variant-numeric:tabular-nums; }

.rrow { display:flex; justify-content:space-between; font-size:13px; padding:4px 2px; color:#b9d2ee; }
.rrow b { color:#fff; font-variant-numeric:tabular-nums; }
.rrow.sub { font-size:12px; color:#8fb0d8; padding:4px 4px; border-top:1px dashed rgba(110,160,220,.16); }
.rrow.sub b { color:#cfe4ff; font-weight:800; }
.newbest { text-align:center; color:#ffd257; font-weight:900; font-size:13px; letter-spacing:2px;
  margin-top:9px; padding:7px 10px; border-radius:10px;
  background:linear-gradient(90deg, rgba(255,190,60,.2), rgba(255,190,60,.06), rgba(255,190,60,.2));
  border:1px solid rgba(255,200,80,.45); box-shadow:0 0 18px rgba(255,180,50,.22);
  animation:bestBlink 1s infinite; }
@keyframes bestBlink { 0%,100%{opacity:1;} 50%{opacity:.5;} }

/* 帮助 */
.helpBox { font-size:12px; line-height:2; color:#a9c4e4; max-width:420px; text-align:left; }
.helpBox b { color:#8fd4ff; }
.kbd { display:inline-block; padding:1px 7px; border:1px solid rgba(140,190,255,.4); border-bottom-width:2px; border-radius:5px;
  background:rgba(20,40,70,.7); color:#dff0ff; font-size:11px; font-weight:700; margin:0 2px; }

/* 轻量全局提示 */
#gameToast { position:fixed; left:50%; bottom:12%; transform:translateX(-50%) translateY(12px); z-index:70;
  background:rgba(8,18,36,.95); border:1px solid rgba(120,180,255,.45); border-radius:12px;
  color:#dff0ff; font-size:13px; font-weight:700; letter-spacing:1px; padding:10px 18px;
  box-shadow:0 10px 30px rgba(0,10,30,.65), 0 0 16px rgba(60,140,255,.2);
  opacity:0; pointer-events:none; max-width:86vw; text-align:center;
  transition:opacity .25s, transform .25s; }
#gameToast.on { opacity:1; transform:translateX(-50%) translateY(0); }

/* 竖屏提示 */
#rotateHint { position:absolute; inset:0; z-index:60; display:none; align-items:center; justify-content:center; flex-direction:column;
  background:rgba(3,6,12,.92); color:#9fc1e8; font-size:14px; letter-spacing:2px; gap:10px; text-align:center; }
#rotateHint .ph { font-size:44px; animation:rot 2s infinite; display:inline-block; }
@keyframes rot { 0%,20%{transform:rotate(0);} 60%,100%{transform:rotate(90deg);} }

@media (max-height:640px) { .panel h1 { margin-top:2vh; font-size:28px; } }