:root{
--player:#42E0FF; --player-deep:#17B4E8; --player-ink:#3BD6F6;
--ai:#FF6A3D; --ai-deep:#E0431A; --ai-ink:#F75A2E;
--bg:#141C2E; --panel:#1D2A44; --panel-line:#33415F;
--floor:#EAF0F8; --floor-line:#D5DEEA;
--text:#EFF4FF; --text-dim:#9FB0CC; --warn:#FF5D5D;
--ob:#55617C;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
background:radial-gradient(1200px 700px at 30% 20%, #22305C 0%, var(--bg) 60%);
color:var(--text); overflow:hidden; user-select:none;
}
#app{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#game-wrap{
position:relative; overflow:hidden; border-radius:0;
width:960px; height:640px;
box-shadow:0 0 0 2px rgba(66,224,255,.14);
}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;background:var(--floor);cursor:crosshair;touch-action:none}
#game-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px rgba(10,18,40,.28);border-radius:18px}

/* ---- HUD ---- */
#hud-top{
position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
padding:10px 14px;z-index:5;pointer-events:none;
background:linear-gradient(180deg,rgba(16,24,44,.82),rgba(16,24,44,0));
}
.hud-side{flex:1;display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.5px}
.hud-side.right{justify-content:flex-end}
.scorebox{width:78px;height:78px;border-radius:16px;display:none;flex-direction:column;align-items:center;justify-content:center;
border:3px solid;position:relative;overflow:hidden}
body.zone-mode .scorebox{display:flex}
body:not(.zone-mode) .scorebox{display:none}
.side-txt{display:none;align-items:center;gap:7px;font-weight:900;font-size:clamp(15px,2.2vw,20px);letter-spacing:.5px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.4)}
body:not(.zone-mode) .side-txt{display:flex}
body.zone-mode .side-txt{display:none}
.side-txt i{font-style:normal;font-variant-numeric:tabular-nums}
.scorebox.p{background:linear-gradient(160deg,rgba(59,214,246,.28),rgba(59,214,246,.08));border-color:var(--player);color:var(--player)}
.scorebox.a{background:linear-gradient(160deg,rgba(255,72,72,.28),rgba(255,72,72,.08));border-color:var(--ai);color:#FF7878}
.scorebox b{font-size:15px;font-weight:900;letter-spacing:3px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.scorebox i{font-style:normal;font-size:30px;font-weight:900;font-variant-numeric:tabular-nums;color:#fff;
text-shadow:0 2px 6px rgba(0,0,0,.45);line-height:1.05}
.scorebox.decrease{animation:scoreshake .5s ease}
@keyframes scoreshake{
0%{transform:scale(1)}
25%{transform:scale(1.14)}
50%{transform:scale(.92);box-shadow:0 0 22px 4px currentColor}
75%{transform:scale(1.07)}
100%{transform:scale(1)}
}
#hud-bar{flex:0 0 44%;height:16px;background:rgba(10,16,32,.55);border-radius:99px;overflow:hidden;position:relative;border:2px solid rgba(255,255,255,.18)}
#hud-bar>i{position:absolute;top:0;bottom:0;left:0;width:50%;transition:width .3s linear}
#hud-bar>i.p{background:var(--player)}
#hud-bar>i.a{background:var(--ai);right:0;left:auto}
#hud-bar.zone{display:none}
#hud-bar>span{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:900;color:#0B1222;z-index:2;letter-spacing:1px;
}
#hud-mid{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px}
#hud-mode-tag{font-size:11px;font-weight:800;letter-spacing:1px;color:rgba(201,214,236,.85);text-shadow:0 1px 3px rgba(0,0,0,.5);white-space:nowrap}
#hud-time{
flex:0 0 auto;min-width:78px;text-align:center;font-weight:900;font-variant-numeric:tabular-nums;
font-size:clamp(20px,3vw,30px);color:var(--text);text-shadow:0 2px 6px rgba(0,0,0,.4);
}
#hud-time.warn{color:var(--warn);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.hud-btn{
pointer-events:auto;border:0;border-radius:10px;background:rgba(13,20,38,.72);color:var(--text-dim);
font-weight:800;font-size:12px;padding:6px 10px;cursor:pointer;font-family:inherit;line-height:1;
transition:transform .12s, background .2s;
}
.hud-btn:hover{background:rgba(30,44,78,.9);color:var(--text)}
.hud-btn:active{transform:scale(.94)}
#mute{position:absolute;top:52px;right:12px;z-index:6;pointer-events:auto}
#mute svg{width:16px;height:16px;fill:currentColor;vertical-align:-2px}

#hint{
position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:5;pointer-events:none;
font-size:clamp(10px,1.3vw,12.5px);color:#C9D6EC;font-weight:600;letter-spacing:.4px;
background:rgba(14,22,42,.62);padding:6px 14px;border-radius:99px;white-space:nowrap;
transition:opacity .9s;
}
#hint.mobile{display:none}

/* ---- 触屏控件（移动端明显易操作） ---- */
#touch-ui{position:absolute;inset:0;z-index:6;pointer-events:none;display:none}
body.touch-mode #touch-ui{display:block}
#stick-base{position:absolute;left:24px;bottom:112px;width:118px;height:118px;border-radius:50%;
border:3px solid rgba(255,255,255,.4);background:radial-gradient(circle at 35% 32%, rgba(255,255,255,.16), rgba(255,255,255,.05));
display:flex;align-items:center;justify-content:center;pointer-events:auto;touch-action:none;
box-shadow:0 6px 22px rgba(0,0,0,.35) inset, 0 0 0 1px rgba(255,255,255,.12)}
#stick-base::after{content:"移动";position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);
font-size:11px;font-weight:800;color:rgba(255,255,255,.75);letter-spacing:2px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
#stick-cap{width:50px;height:50px;border-radius:50%;background:rgba(140,210,255,.85);
border:3px solid rgba(255,255,255,.7);box-shadow:0 5px 16px rgba(0,0,0,.45);transition:transform .05s linear}
#fire-btn{position:absolute;right:24px;bottom:112px;width:112px;height:112px;border-radius:50%;border:none;
background:radial-gradient(circle at 32% 28%, #7fe3ff, #2fa9e0 58%, #14608e);color:#fff;
font-size:16px;font-weight:900;letter-spacing:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
box-shadow:0 8px 24px rgba(47,169,224,.55);pointer-events:auto;touch-action:none;
transition:transform .08s}
#fire-btn svg{width:24px;height:24px}
#fire-btn.active{transform:scale(.9);background:radial-gradient(circle at 32% 28%, #c3f3ff, #3fb9ec 60%, #1b7fb8)}
#fire-btn:active{transform:scale(.9)}

/* ---- overlays ---- */
.overlay{
position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;
background:rgba(5,9,20,.9);
background:rgba(13,20,38,.88);text-align:center;padding:24px;gap:0;
}
.overlay.hide{display:none}
.ov-title-wrap{position:relative;z-index:2}
.ov-title{
font-size:clamp(46px,8vw,78px);font-weight:900;letter-spacing:6px;line-height:1.05;
color:var(--player);
text-shadow:0 0 20px rgba(66,224,255,.5), 4px 4px 0 var(--ai), 9px 9px 0 rgba(0,0,0,.5);
transform:rotate(-1.2deg);animation:titlePop .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes titlePop{from{opacity:0;transform:rotate(-1.2deg) scale(.88) translateY(12px)}to{opacity:1;transform:rotate(-1.2deg)}}
.ov-title-splat{
position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);width:190px;height:24px;pointer-events:none;
background:
    radial-gradient(circle at 7% 50%, rgba(66,224,255,.55) 0 5px, transparent 6px),
    radial-gradient(circle at 17% 38%, rgba(247,90,46,.5) 0 7px, transparent 8px),
    radial-gradient(circle at 31% 62%, rgba(66,224,255,.45) 0 6px, transparent 7px),
    radial-gradient(circle at 45% 42%, rgba(247,90,46,.55) 0 5px, transparent 6px),
    radial-gradient(circle at 59% 60%, rgba(66,224,255,.5) 0 7px, transparent 8px),
    radial-gradient(circle at 73% 40%, rgba(247,90,46,.45) 0 5px, transparent 6px),
    radial-gradient(circle at 87% 56%, rgba(66,224,255,.55) 0 6px, transparent 7px),
    radial-gradient(circle at 96% 44%, rgba(247,90,46,.5) 0 5px, transparent 6px);
filter:blur(.3px);
}
.ov-sub{margin-top:12px;font-size:clamp(13px,1.8vw,17px);color:var(--text-dim);letter-spacing:3px;font-weight:600;position:relative;z-index:2}
.ov-guide{margin-top:12px;font-size:clamp(12px,1.5vw,14px);color:rgba(255,255,255,.58);letter-spacing:1px;position:relative;z-index:2}
.ov-rule{
margin:26px auto 30px;max-width:520px;display:flex;flex-direction:column;gap:10px;
font-size:clamp(12.5px,1.6vw,15px);color:var(--text);font-weight:500;line-height:1.5;
}
.ov-rule>div{background:rgba(255,255,255,.05);border-left:4px solid var(--player);padding:8px 14px;border-radius:6px;text-align:left}
.ov-rule>div:nth-child(2){border-color:var(--ai)}
.ov-rule b{color:var(--player)}
.ov-rule>div:nth-child(2) b{color:var(--ai)}
.ov-btn{
border:0;border-radius:14px;padding:14px 44px;font-size:clamp(16px,2vw,19px);font-weight:900;letter-spacing:4px;
color:#0B1222;background:var(--player);cursor:pointer;font-family:inherit;position:relative;z-index:2;
box-shadow:0 8px 0 #0E7BA6, 0 14px 30px rgba(0,0,0,.35);transition:transform .1s, box-shadow .1s;
}
.ov-btn:hover{transform:translateY(-2px)}
.ov-btn:active{transform:translateY(6px);box-shadow:0 2px 0 #0E7BA6}
.ov-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
#btn-start{
position:relative;overflow:hidden;z-index:2;font-size:clamp(18px,2.4vw,22px);padding:16px 60px;letter-spacing:6px;
background:linear-gradient(135deg,#7DF3FF,var(--player) 55%,#17A3D6);
box-shadow:0 8px 0 #0E7BA6, 0 0 22px rgba(66,224,255,.4), 0 18px 42px rgba(0,0,0,.45);
animation:btnBreath 2.2s ease-in-out infinite;
}
#btn-start::before{
content:"";position:absolute;top:0;left:-75%;width:45%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-20deg);animation:sweep 2.8s ease-in-out infinite;
}
@keyframes sweep{0%{left:-75%}55%{left:135%}100%{left:135%}}
@keyframes btnBreath{
0%,100%{box-shadow:0 8px 0 #0E7BA6,0 0 16px rgba(66,224,255,.3),0 18px 42px rgba(0,0,0,.45)}
50%{box-shadow:0 8px 0 #0E7BA6,0 0 36px rgba(66,224,255,.7),0 18px 42px rgba(0,0,0,.45)}
}
.ov-actions{display:flex;gap:14px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.ov-btn.ghost{background:rgba(255,255,255,.07);color:#C9D6EC;padding:14px 28px;
box-shadow:0 8px 0 rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.18)}
#stats{z-index:20}
.stats-summary{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:18px 0 14px;width:min(96%,560px)}
.stats-summary .st-row{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
border-radius:12px;padding:9px 16px;min-width:84px}
.stats-summary .st-row span{display:block;font-size:11px;color:var(--text-dim);letter-spacing:1px}
.stats-summary .st-row b{display:block;font-size:22px;font-weight:900;color:var(--player);margin-top:2px}
.stats-list{width:min(94%,520px);max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.stats-list .st-item{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);
border-radius:10px;padding:8px 12px;font-size:13px;color:var(--text-dim);flex:none}
.stats-list .st-item.w{border-left:3px solid var(--player)}
.stats-list .st-item.l{border-left:3px solid var(--ai)}
.stats-list .st-t{flex:1;text-align:left;color:var(--text)}
.stats-list .st-m{font-size:10px;color:var(--text-dim);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:1px 7px}
.stats-list .st-p{font-variant-numeric:tabular-nums}
.stats-list .st-s{font-weight:900;color:var(--text);font-variant-numeric:tabular-nums}
.stats-list .st-g{font-weight:900;font-style:italic;width:22px}
.stats-list .st-g.g-S{color:#FFD75E}.stats-list .st-g.g-A{color:#6FD8FF}
.stats-list .st-g.g-B{color:#8EF0A4}.stats-list .st-g.g-C{color:#FFE28A}
.stats-list .st-g.g-D{color:#AEB9CE}
.stats-list .st-empty{text-align:center;padding:26px 0;color:var(--text-dim)}
.pick-grid.compact{max-width:720px}
.pick-grid.compact.modes{grid-template-columns:repeat(2,1fr)}
.pick-grid.compact.controls{grid-template-columns:repeat(3,1fr)}
.pick-grid.compact .pick-card{min-width:120px;padding:12px 10px}
.pick-grid.compact .pick-ico{width:34px;height:34px;margin-bottom:6px}
.pick-grid.compact .pick-name{font-size:clamp(13px,1.7vw,16px)}
.pick-grid.compact .pick-desc{font-size:10.5px;line-height:1.4}
.pick-grid.compact .pick-tag{top:8px;right:8px;font-size:9px;padding:2px 7px}

#end-title{font-size:clamp(42px,7.5vw,70px);font-weight:900;letter-spacing:6px;line-height:1.05}
#end,#stats,#setup{overflow-y:auto;padding:16px 16px 20px}
.setup-actions{margin-top:22px;justify-content:center;position:sticky;bottom:0;padding-top:10px;
background:linear-gradient(180deg,rgba(9,14,30,0),rgba(9,14,30,.92) 30%)}
#end-title.win{color:var(--player);text-shadow:3px 3px 0 var(--ai),6px 6px 0 rgba(0,0,0,.45)}
#end-title.lose{color:var(--ai);text-shadow:3px 3px 0 #7A2310,6px 6px 0 rgba(0,0,0,.45)}
#end-sub{margin-top:10px;font-size:clamp(13px,1.8vw,17px);color:var(--text-dim);letter-spacing:2px}
#end-stats{margin:26px 0 30px;width:min(80%,440px);display:flex;align-items:center;gap:16px}
#end-stats .pct{flex:1;font-weight:900;font-variant-numeric:tabular-nums;font-size:clamp(30px,5vw,46px);line-height:1}
#end-stats .pct.p{color:var(--player);text-align:left}
#end-stats .pct.a{color:var(--ai);text-align:right}
#end-bar{flex:0 0 46%;height:22px;display:flex;gap:5px}
#end-bar .seg{flex:1;height:100%;border-radius:99px;overflow:hidden;background:rgba(10,16,32,.6);border:2px solid rgba(255,255,255,.16);position:relative}
#end-bar i{position:absolute;top:0;bottom:0;left:0;border-radius:99px;transition:width .8s cubic-bezier(.22,1,.36,1)}
#end-bar .p{background:var(--player)}
#end-bar .a{background:var(--ai)}
.end-tag{font-size:11px;font-weight:800;color:var(--text-dim);letter-spacing:1px;margin-top:4px}

@media (pointer:coarse){
#hint.desktop{display:none}
#hint.mobile{display:block}
canvas#game{cursor:default}
}
@media (orientation:portrait){
#hud-top{padding:8px 10px;gap:8px}
.hud-side{font-size:clamp(11px,3.2vw,14px)}
#hud-time{min-width:54px;font-size:clamp(14px,4.5vw,19px)}
.hud-dot{width:12px;height:12px}
#hint{font-size:10px;padding:5px 10px}
#mute{top:44px;right:8px;padding:5px 8px}
}
@media (max-width:600px){
.scorebox{width:62px;height:62px;border-radius:13px;border-width:2.5px}
.scorebox b{font-size:12px;letter-spacing:2px}
.scorebox i{font-size:23px}
#hud-mode-tag{font-size:9px}
#hud-bar>span{font-size:10px}
.hud-btn{font-size:11px;padding:5px 8px}
#mute{top:46px}
}
@media (prefers-reduced-motion:reduce){
#hud-time.warn{animation:none}
#end-bar>i{transition:none}
}

/* ---- 主页：武器 / 道具选择 ---- */
#menu{overflow-y:auto;padding:16px 20px 22px;justify-content:flex-start;gap:0}
.ov-kicker{
font-size:clamp(11px,1.4vw,13px);letter-spacing:3px;color:var(--text-dim);font-weight:800;
margin:14px 0 8px;display:flex;align-items:center;gap:10px;width:min(100%,680px);
}
.ov-kicker::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--panel-line),transparent)}
.pick-grid{
width:min(100%,680px);display:grid;gap:10px;
}
.pick-grid.weapons{grid-template-columns:repeat(4,1fr)}
.pick-grid.gadgets{grid-template-columns:repeat(5,1fr)}
.pick-card{
position:relative;border:2px solid var(--panel-line);border-radius:12px;padding:10px 8px 9px;
background:rgba(255,255,255,.045);cursor:pointer;text-align:center;
transition:transform .12s, border-color .15s, background .15s;display:flex;flex-direction:column;gap:4px;
}
.pick-card:hover{transform:translateY(-2px);border-color:#5B7BB8}
.pick-card.sel{border-color:var(--player);background:rgba(66,224,255,.1)}
.pick-card.sel::after{
content:"✓";position:absolute;top:-9px;right:-7px;width:20px;height:20px;border-radius:50%;
background:var(--player);color:#0B1222;font-size:12px;font-weight:900;line-height:20px;
box-shadow:0 0 8px rgba(66,224,255,.7);
}
.pick-ico{
width:40px;height:40px;margin:0 auto;border-radius:9px;display:flex;align-items:center;justify-content:center;
background:rgba(10,16,32,.5);border:1px solid rgba(255,255,255,.1);
}
.pick-ico svg{width:24px;height:24px}
.pick-name{font-size:clamp(11px,1.4vw,13px);font-weight:900;letter-spacing:1px}
.pick-desc{font-size:clamp(9px,1.05vw,10.5px);color:var(--text-dim);line-height:1.35;min-height:2.7em}
.pick-desc b{color:var(--player)}
.pick-tag{
display:inline-block;font-size:9px;font-weight:800;letter-spacing:1px;color:#0B1222;
background:var(--text-dim);border-radius:99px;padding:2px 7px;align-self:center;
}
.pick-card.sel .pick-tag{background:var(--player)}

/* ---- 手柄灵敏度 ---- */
.pad-sens{
width:min(100%,680px);margin-top:12px;background:rgba(255,255,255,.045);
border:1px solid var(--panel-line);border-radius:12px;padding:10px 14px;
display:flex;flex-direction:column;gap:8px;
}
.pad-sens .ps-head{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:900;letter-spacing:1px}
.pad-sens .ps-head span{color:var(--player);font-variant-numeric:tabular-nums;font-size:16px}
.pad-sens input[type=range]{width:100%;accent-color:var(--player);cursor:pointer}
.pad-sens .ps-note{font-size:10.5px;color:var(--text-dim);line-height:1.4}

/* ---- 主页墨滴背景 ---- */
#menu-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.85}
#menu{background:linear-gradient(180deg,rgba(9,14,30,.68),rgba(13,20,38,.92));
overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
#menu .ov-title-wrap,#menu .ov-sub,#menu .ov-guide,#menu .ov-kicker,#menu .pick-grid,
#menu .ov-btn,#menu .ov-actions,#menu .set-box{position:relative;z-index:1}

/* ---- 对局设置折叠 + 人机 ---- */
.set-box{
width:min(100%,680px);margin-top:16px;text-align:left;
background:rgba(15,25,50,.55);border:1px solid rgba(120,160,255,.25);border-radius:16px;overflow:hidden;
box-shadow:0 14px 34px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.05);
}
.set-box>summary{
cursor:pointer;list-style:none;padding:13px 16px;font-size:14px;font-weight:900;letter-spacing:2px;
color:#EAF2FF;display:flex;align-items:center;gap:10px;user-select:none;transition:background .15s;
background:linear-gradient(120deg,rgba(66,224,255,.16),rgba(157,123,255,.1) 55%,transparent);
}
.set-box>summary::-webkit-details-marker{display:none}
.set-box>summary .set-ico{width:20px;height:20px;color:var(--player);flex:none;animation:gearSpin 7s linear infinite}
@keyframes gearSpin{to{transform:rotate(360deg)}}
.set-box>summary::after{content:"▾";margin-left:auto;color:var(--text-dim);transition:transform .18s;font-size:15px}
.set-box[open]>summary::after{transform:rotate(180deg)}
.set-box>summary:hover{background:linear-gradient(120deg,rgba(66,224,255,.24),rgba(157,123,255,.14) 55%,transparent)}
.set-box .ov-kicker{margin:14px 0 8px}
.pick-grid.compact.ailevel{grid-template-columns:repeat(3,1fr)}
.pick-grid.compact.aicount{grid-template-columns:repeat(3,1fr)}
.pick-grid.compact.ailevel .pick-card,.pick-grid.compact.aicount .pick-card{padding:10px 6px}
.ai-sliders{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ai-sliders .pad-sens{margin-top:0}
.toggle-row .ps-head{width:100%}
.toggle-row{flex-direction:row;flex-wrap:wrap;gap:10px;align-items:center}
.toggle-row .tg{
display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text);
background:rgba(255,255,255,.06);border-radius:99px;padding:6px 12px;cursor:pointer;user-select:none;
}
.toggle-row .tg input{accent-color:var(--player)}
.pad-dot{font-variant-numeric:tabular-nums;color:var(--ob);font-weight:900}
.pad-dot.on{color:var(--player);text-shadow:0 0 8px rgba(66,224,255,.5)}
/* 主页开始按钮吸底（任何屏高都可见可点） */
.start-zone{
position:sticky;bottom:0;z-index:3;margin-top:16px;padding-top:12px;
display:flex;flex-direction:column;align-items:center;gap:0;width:100%;
background:linear-gradient(180deg,rgba(9,14,30,0),rgba(9,14,30,.94) 34%,rgba(9,14,30,.97));
}
/* 时长选择 */
.pick-grid.compact.dur{grid-template-columns:repeat(2,1fr);width:min(100%,420px)}
.pick-grid.compact.dur .pick-card{min-width:0;padding:12px 10px}
/* AI 武器池 */
.ai-weap{margin-top:14px;text-align:left}
.ai-weap-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:1px;color:#C6D4EE;margin-bottom:8px}
.ai-weap-head .ai-weap-hint{font-size:9.5px;font-weight:600;color:var(--text-dim);letter-spacing:.3px}
.pick-grid.compact.aiweap{grid-template-columns:repeat(4,1fr);width:min(100%,440px);gap:8px}
.pick-grid.compact.aiweap .pick-card{padding:10px 6px;min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.pick-grid.compact.aiweap .pick-card .pick-name{font-size:12px;letter-spacing:1px}
.pick-grid.compact.aiweap .pick-card .pick-desc{font-size:9px;letter-spacing:.4px;color:var(--text-dim);margin:0}
.pick-grid.compact.aiweap .pick-card.off{opacity:.4;border-color:rgba(255,90,46,.4);filter:saturate(.4)}
.pick-grid.compact.aiweap .pick-card.off .pick-name{color:var(--text-dim);text-decoration:line-through}
/* VS 阵容确认 */
.vs-board{text-align:center}
.vs-grid{display:grid;grid-template-columns:1fr 92px 1.2fr;gap:14px;align-items:stretch;margin:18px 0 20px}
.vs-side{border-radius:16px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(15,25,50,.5);border:1px solid rgba(120,160,255,.18)}
.vs-p{border-color:rgba(66,224,255,.45);box-shadow:inset 0 0 26px rgba(66,224,255,.08)}
.vs-a{border-color:rgba(247,90,46,.4)}
.vs-role{font-size:12px;font-weight:900;letter-spacing:2px;color:var(--player);margin-bottom:4px}
.vs-a .vs-role{color:var(--ai)}
.vs-w{font-size:20px;font-weight:900;letter-spacing:3px;color:#EAF2FF}
.vs-note{font-size:10px;color:var(--text-dim);letter-spacing:1px}
.vs-mid{display:flex;align-items:center;justify-content:center}
.vs-mid span{font-size:30px;font-weight:900;letter-spacing:2px;color:var(--accent);text-shadow:0 0 18px rgba(255,150,80,.35);writing-mode:vertical-lr}
.vs-ai{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:rgba(247,90,46,.09);border:1px solid rgba(247,90,46,.22);margin-bottom:8px;font-size:13px}
.vs-ai .vs-ai-no{font-weight:900;letter-spacing:1px;color:var(--ai);font-size:12px;flex:none}
.vs-ai .vs-ai-w{color:#FFE9DC;font-weight:800;letter-spacing:1px}
/* 手柄对局外焦点 */
.pad-focus{outline:3px solid var(--player)!important;outline-offset:-2px;box-shadow:0 0 16px rgba(66,224,255,.4)!important}
/* AI 参数折叠 */
.ai-fold{margin-top:12px;text-align:left;background:rgba(15,25,50,.4);border:1px solid rgba(120,160,255,.2);border-radius:12px;overflow:hidden}
.ai-fold>summary{
cursor:pointer;list-style:none;padding:10px 14px;display:flex;align-items:center;gap:9px;
font-size:12.5px;font-weight:900;letter-spacing:1.5px;color:#EAF2FF;user-select:none;
background:linear-gradient(120deg,rgba(66,224,255,.12),rgba(157,123,255,.08) 55%,transparent);
}
.ai-fold>summary::-webkit-details-marker{display:none}
.ai-fold>summary .set-ico{width:17px;height:17px;flex:none}
.ai-fold>summary .ai-fold-hint{font-size:10px;font-weight:600;color:var(--text-dim);letter-spacing:.5px}
.ai-fold>summary::after{content:"▾";margin-left:auto;color:var(--text-dim);transition:transform .18s;font-size:13px}
.ai-fold[open]>summary::after{transform:rotate(180deg)}
.ai-fold .ai-sliders{padding:2px 12px 12px}

/* ---- 主页分区编号徽章 + 卡片引导 ---- */
.ov-kicker .kicker-no{
display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;
border-radius:7px;background:rgba(66,224,255,.13);border:1px solid rgba(66,224,255,.38);
color:var(--player);font-size:10.5px;font-weight:900;letter-spacing:0;
}
.pick-card:hover{transform:translateY(-3px);border-color:#6FA7FF;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.pick-card.sel{
border-color:var(--player);
background:linear-gradient(160deg,rgba(66,224,255,.18),rgba(66,224,255,.05));
}
.pick-card[data-key="shooter"]{border-color:rgba(66,224,255,.35)}
.pick-card .pick-rec{
position:absolute;top:-1px;left:-1px;right:-1px;z-index:2;border-radius:10px 10px 0 0;overflow:hidden;
background:linear-gradient(90deg,rgba(66,224,255,.85),rgba(109,154,255,.85));
color:#08121F;font-size:9px;font-weight:900;letter-spacing:2px;padding:2px 0;text-align:center;
animation:recHint 2.6s ease-in-out infinite;
}
@keyframes recHint{0%,100%{opacity:.85}50%{opacity:1;filter:brightness(1.15)}}

/* ---- 结算：积分与评级 ---- */
#end-grades{display:flex;flex-direction:column;align-items:center;gap:4px;margin:8px 0 0}
#grade-badge{
width:84px;height:84px;border-radius:22px;display:flex;align-items:center;justify-content:center;
font-size:52px;font-weight:900;font-style:italic;line-height:1;
box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 -6px 0 rgba(0,0,0,.22);
}
#grade-badge.g-S{background:linear-gradient(160deg,#FFD75E,#F5A623);color:#4A2F00}
#grade-badge.g-A{background:linear-gradient(160deg,#6FD8FF,#2D9CDB);color:#06324F}
#grade-badge.g-B{background:linear-gradient(160deg,#8EF0A4,#3FCB6F);color:#06401E}
#grade-badge.g-C{background:linear-gradient(160deg,#FFE28A,#E8B23A);color:#4A3500}
#grade-badge.g-D{background:linear-gradient(160deg,#AEB9CE,#7A87A0);color:#1A2338}
#grade-word{font-size:clamp(13px,1.8vw,16px);font-weight:900;letter-spacing:2px;color:var(--text)}
#grade-sub{margin-top:14px;width:min(100%,440px);display:flex;flex-direction:column;gap:8px}
.g-line{
display:flex;align-items:center;justify-content:space-between;gap:12px;
background:rgba(255,255,255,.055);border-radius:9px;padding:8px 14px;
font-size:clamp(12px,1.5vw,14px);font-weight:700;
}
.g-line .k{color:var(--text-dim);font-weight:600}
.g-line .v{font-variant-numeric:tabular-nums;font-weight:900}
.g-line.total{background:rgba(66,224,255,.12);border:1px solid rgba(66,224,255,.45)}
.g-line.total .k{color:var(--text)}
.g-line.total .v{color:var(--player);font-size:clamp(15px,2vw,18px)}
#btn-again{margin-top:18px}
@media (pointer:coarse){
#menu{justify-content:flex-start}
}
@media (max-width:600px){
#app{gap:8px}
#menu{padding:12px 12px 18px}
.ov-title{font-size:clamp(26px,8vw,38px);letter-spacing:2px}
.ov-sub{font-size:11px;letter-spacing:2px;margin-top:6px}
.ov-kicker{margin:10px 0 6px;font-size:11px}
.pick-grid.weapons{grid-template-columns:repeat(2,1fr)}
.pick-grid.gadgets{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr}
.pick-grid.compact.modes{grid-template-columns:repeat(2,1fr)}
.pick-grid.compact.controls{grid-template-columns:repeat(3,1fr)}
.pick-desc{min-height:3.4em}
.pick-card{padding:9px 6px 8px}
#hint{white-space:normal;max-width:92%;text-align:center;line-height:1.4;font-size:10.5px}
.ov-btn{padding:12px 30px;font-size:16px}
.ov-actions{margin-top:16px;gap:10px}
#end-stats{width:min(92%,440px);gap:10px}
.stats-list{max-height:260px}
#setup{text-align:center}
.setup-actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(9,14,30,0),rgba(9,14,30,.9));padding-top:12px;margin-top:16px}
.stats-list .st-item{font-size:12px;gap:7px;padding:7px 10px}
}