/* ============ 奔跑吧，大肥鱼！ · 深海霓虹 ============ */
:root{
  --cyan:#2ff3ff;
  --teal:#3affd0;
  --pink:#ff4fb0;
  --gold:#ffd34d;
  --gem:#a6f0ff;
  --bg:#02101e;
  --panel:rgba(7,24,42,.66);
  --line:rgba(80,200,230,.22);
  --text:#eafbff;
  --muted:#7fa6c0;
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font)}
body{position:fixed;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
#app{position:relative;width:100%;height:100%;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none !important}

/* 氛围叠层 */
#app.shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate3d(-3px,1px,0)}20%,80%{transform:translate3d(6px,-2px,0)}30%,50%,70%{transform:translate3d(-9px,2px,0)}40%,60%{transform:translate3d(9px,-2px,0)}}
#app.flash::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,79,176,.35),transparent 70%);animation:flash .5s ease-out forwards}
#app.flashg::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(58,255,208,.4),transparent 70%);animation:flash .5s ease-out forwards}
@keyframes flash{to{opacity:0}}

/* ============ HUD ============ */
#hud{position:absolute;inset:0;pointer-events:none;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left))}
.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.hud-stat{display:flex;flex-direction:column;line-height:1}
.hud-stat .lbl{font:600 9px/1.4 var(--mono);letter-spacing:.22em;color:var(--muted)}
.hud-stat b{font:800 clamp(26px,5.5vw,40px)/1 var(--mono);letter-spacing:-.03em;color:#fff;text-shadow:0 0 16px rgba(47,243,255,.7),0 0 38px rgba(47,243,255,.3);font-variant-numeric:tabular-nums}
.hud-stat:nth-child(2) b{font-size:clamp(18px,3.6vw,26px);color:var(--gold);text-shadow:0 0 14px rgba(255,211,77,.6)}
.hud-stat:nth-child(3) b{font-size:clamp(18px,3.6vw,26px);color:var(--teal);text-shadow:0 0 14px rgba(58,255,208,.6)}
.hud-stat:nth-child(3) b small{font-size:.55em;opacity:.7}
.hud-stat{margin-right:auto}
.hud-top .icon-btn{margin-left:6px}
.icon-btn{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--panel);backdrop-filter:blur(10px);color:var(--text);font:700 15px/1 var(--mono);cursor:pointer;transition:.2s;pointer-events:auto}
.icon-btn:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 14px rgba(47,243,255,.3)}
.icon-btn.off{opacity:.4}

.hud-row2{display:flex;gap:10px;margin-top:12px}
.hud-pick{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);backdrop-filter:blur(10px);font:800 16px/1 var(--mono);font-variant-numeric:tabular-nums}
.hud-pick .ico{font-size:15px}
.hud-pick:nth-child(1){color:var(--gold);border-color:rgba(255,211,77,.3)}
.hud-pick:nth-child(2){color:var(--gem);border-color:rgba(166,240,255,.3)}
.hud-pick:nth-child(3){color:var(--cyan);border-color:rgba(47,243,255,.28)}

/* 任务 */
.mission{position:absolute;left:50%;top:max(16px,env(safe-area-inset-top));transform:translateX(-50%);width:min(300px,72vw);border:1px solid var(--line);border-radius:12px;background:var(--panel);backdrop-filter:blur(10px);padding:9px 12px}
.mission-label{font:700 10px/1 var(--mono);letter-spacing:.18em;color:var(--pink)}
.mission-text{font-size:12.5px;color:var(--text);margin:5px 0 7px;font-weight:600}
.mission-bar{height:5px;border-radius:5px;background:rgba(47,243,255,.16);overflow:hidden}
.mission-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--teal));box-shadow:0 0 12px var(--cyan);border-radius:5px;transition:width .25s}

/* 道具状态 */
.powerups{position:absolute;right:max(16px,env(safe-area-inset-right));top:96px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.pu{display:flex;align-items:center;gap:6px;font-size:20px;opacity:.22;filter:grayscale(1);transition:.25s;transform:translateX(6px)}
.pu span{background:var(--panel);border:1px solid var(--line);border-radius:10px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.pu i{width:46px;height:5px;border-radius:5px;background:linear-gradient(90deg,var(--teal),var(--cyan));box-shadow:0 0 10px var(--cyan);transform-origin:left;transform:scaleX(0);display:none}
.pu.active{opacity:1;filter:none;transform:translateX(0)}
.pu.active span{box-shadow:0 0 16px rgba(47,243,255,.5);border-color:var(--cyan)}
.pu.active i{display:block}
@keyframes puTimer{from{transform:scaleX(1)}to{transform:scaleX(0)}}

.combo{position:absolute;top:21%;left:50%;transform:translateX(-50%);font:800 26px/1 var(--mono);letter-spacing:.06em;color:var(--gold);text-shadow:0 0 20px rgba(255,211,77,.85);opacity:0;transition:opacity .2s}
.combo.show{opacity:1;animation:comboPop .35s ease-out}
@keyframes comboPop{from{transform:translateX(-50%) scale(.6)}to{transform:translateX(-50%) scale(1)}}
.float-layer{position:absolute;inset:0;overflow:hidden}
.float-tip{position:absolute;font:800 20px/1 var(--mono);color:var(--gold);text-shadow:0 0 14px rgba(255,211,77,.9);animation:floatUp .85s ease-out forwards;pointer-events:none}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,0) scale(.7)}20%{opacity:1;transform:translate(-50%,-10px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-70px) scale(1)}}

/* ============ 屏幕通用 ============ */
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px max(20px,env(safe-area-inset-right)) 24px max(20px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 38%,rgba(6,30,52,.30),rgba(2,12,26,.88) 80%);backdrop-filter:blur(3px);overflow-y:auto;z-index:5}
#startScreen{background:radial-gradient(ellipse at 50% 34%,rgba(8,40,68,.10),rgba(2,12,26,.58) 78%)}
.screen-inner,.start-inner,.over-inner,.pause-inner{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;animation:rise .5s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

.game-title{font-size:clamp(32px,8vw,54px);font-weight:900;line-height:1.05;letter-spacing:.04em;color:#fff;white-space:nowrap;text-shadow:0 0 24px rgba(47,243,255,.55),0 0 64px rgba(47,243,255,.25);margin-top:2px}
.game-title .accent{color:var(--pink);text-shadow:0 0 24px rgba(255,79,176,.7),0 0 64px rgba(255,79,176,.3)}
.subtitle{font:700 12px/1 var(--mono);letter-spacing:.34em;color:rgba(165,220,245,.85);margin-top:2px}

.name-row{display:flex;flex-direction:column;gap:7px;width:min(300px,80vw);text-align:left;margin:6px 0}
.name-row label{font:600 11px/1 var(--mono);letter-spacing:.18em;color:#b9dcea}
.name-row input{height:44px;border:1px solid var(--line);border-radius:12px;background:var(--panel);backdrop-filter:blur(10px);color:#fff;font:600 15px/1 var(--font);padding:0 14px;outline:none;transition:.2s}
.name-row input:focus{border-color:var(--cyan);box-shadow:0 0 16px rgba(47,243,255,.3)}

/* 排行榜 */
.lb-wrap{width:min(340px,86vw);border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(10,34,56,.82),rgba(4,16,30,.82));backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);padding:14px 16px;margin:4px 0}
.lb-head{font:700 12px/1 var(--mono);letter-spacing:.1em;color:var(--cyan);display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.lb-status{font:600 9px/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.lb-status.ok{color:var(--teal)}
.lb-status.err{color:var(--gold)}
.leaderboard{list-style:none;display:flex;flex-direction:column;gap:5px;max-height:230px;overflow-y:auto}
.leaderboard li{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.03);font-size:13px}
.leaderboard li .rk{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font:800 12px/1 var(--mono);background:rgba(47,243,255,.12);color:var(--cyan);flex:none}
.leaderboard li:nth-child(1) .rk{background:linear-gradient(135deg,#ffd34d,#ff9d2f);color:#3a2400;box-shadow:0 0 12px rgba(255,211,77,.6)}
.leaderboard li:nth-child(2) .rk{background:linear-gradient(135deg,#e8f4ff,#9fb6c8);color:#2a3640}
.leaderboard li:nth-child(3) .rk{background:linear-gradient(135deg,#ffb27a,#c9732f);color:#3a1f00}
.leaderboard li .nm{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.leaderboard li .sc{font:800 14px/1 var(--mono);color:#fff;font-variant-numeric:tabular-nums}
.leaderboard li .ds{font:600 10px/1 var(--mono);color:var(--muted);margin-left:2px}
.leaderboard li.me{outline:1.5px solid var(--pink);background:rgba(255,79,176,.12)}
.lb-empty{justify-content:center;color:var(--muted);font-size:12px;background:none !important}

/* 操作说明 */
.howto{display:flex;gap:10px;width:min(440px,92vw);text-align:left}
.howto-col{flex:1;border:1px solid var(--line);border-radius:12px;background:var(--panel);backdrop-filter:blur(10px);padding:11px 12px;display:flex;flex-direction:column;gap:5px}
.howto-col b{font-size:12px;color:var(--cyan);letter-spacing:.06em;margin-bottom:2px}
.howto-col span{font-size:11px;color:#b9d4e4;line-height:1.5}

/* 按钮 */
.big-btn{width:100%;max-width:320px;height:56px;border:none;border-radius:14px;cursor:pointer;font:800 17px/1 var(--font);letter-spacing:.1em;color:#022;background:linear-gradient(100deg,var(--cyan),var(--teal));box-shadow:0 0 26px rgba(47,243,255,.45),0 10px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .15s,box-shadow .2s}
.big-btn:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(47,243,255,.7),0 14px 34px rgba(0,0,0,.45)}
.big-btn:active{transform:translateY(1px) scale(.985)}
.ghost-btn{background:none;border:1px solid var(--line);border-radius:12px;color:var(--muted);height:44px;padding:0 28px;font:600 13px/1 var(--font);letter-spacing:.08em;cursor:pointer;transition:.2s}
.ghost-btn:hover{color:var(--text);border-color:var(--cyan)}

/* 结算 */
.over-title{font-size:clamp(40px,11vw,62px);font-weight:900;letter-spacing:.06em;color:#fff;line-height:1;text-shadow:0 0 30px rgba(47,243,255,.55)}
.record{font:800 15px/1 var(--mono);letter-spacing:.16em;color:var(--gold);text-shadow:0 0 18px rgba(255,211,77,.8);animation:blink 1s ease-in-out infinite alternate}
@keyframes blink{to{opacity:.45}}
.final-rank{font:700 12px/1 var(--mono);letter-spacing:.08em;color:var(--cyan);padding:7px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.result-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;width:min(360px,92vw);background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.result-grid .res{background:rgba(6,18,34,.92);padding:13px 6px;display:flex;flex-direction:column;gap:7px}
.result-grid span{font-size:10px;letter-spacing:.08em;color:var(--muted)}
.result-grid b{font:800 19px/1 var(--mono);color:var(--cyan);font-variant-numeric:tabular-nums}
.result-grid b small{font-size:11px;margin-left:2px;opacity:.7}
.over-mission{font-size:12px;color:var(--teal);font-weight:600;min-height:18px}
.over-btns{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}

.pause-title{font-size:44px;font-weight:900;letter-spacing:.1em;color:#fff;text-shadow:0 0 26px rgba(47,243,255,.6)}

/* 移动端虚拟按键（新布局） */
.touch-pad{position:absolute;left:0;right:0;bottom:max(20px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;padding:0 18px;z-index:4;pointer-events:none}
.touch-pad>div{pointer-events:auto;width:62px;height:62px;border:1px solid rgba(47,243,255,.35);border-radius:50%;background:rgba(7,20,38,.5);backdrop-filter:blur(8px);color:var(--cyan);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s}
.touch-pad>div:active{background:rgba(47,243,255,.25);transform:scale(.92)}
.tp-jump{margin-right:auto;margin-left:14px}
.tp-slide{margin-left:auto;margin-right:14px}

.toast{position:absolute;top:13%;left:50%;transform:translate(-50%,-12px);padding:10px 18px;border:1px solid rgba(47,243,255,.4);border-radius:10px;background:rgba(7,18,38,.92);font:600 12px/1 var(--mono);letter-spacing:.08em;color:var(--cyan);opacity:0;pointer-events:none;transition:.25s;z-index:9;max-width:80vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* 小屏适配 */
@media (max-width:600px){
  .screen{align-items:flex-start;padding-top:max(24px,env(safe-area-inset-top))}
  .screen-inner,.start-inner,.over-inner{gap:14px;margin:auto 0}
  .howto{flex-wrap:wrap}.howto-col{min-width:calc(50% - 5px)}
  .result-grid{grid-template-columns:1fr 1fr 1fr}
  .big-btn{height:52px;font-size:16px}
  .mission{width:min(260px,70vw)}
  .powerups{top:88px}
}
@media (max-height:680px){
  .game-title{font-size:clamp(34px,9vw,52px)}
  .howto{display:none}
  .lb-wrap{padding:10px 12px}
  .leaderboard{max-height:150px}
  .result-grid .res{padding:9px 4px}.result-grid b{font-size:16px}
}