*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0;overflow:hidden;background:#081426;color:#e6f0fa;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0}
/* ============ 顶部栏 ============ */
.topbar{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:54px;padding:0 10px;background:linear-gradient(180deg,#17324f 0%,#0d1e33 100%);border-bottom:1px solid rgba(120,180,240,.16);box-shadow:0 2px 14px rgba(0,0,0,.45);position:relative;z-index:40}
.tb-left{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.tb-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid rgba(130,180,240,.2);background:rgba(255,255,255,.05);color:#bcd6f2;font-size:15px;line-height:1;text-decoration:none!important;cursor:pointer;transition:background .18s,color .18s,transform .12s,border-color .18s;padding:0;outline:none}
.tb-btn:hover,.tb-btn:focus{background:rgba(90,160,240,.22);border-color:rgba(120,190,255,.5);color:#fff;text-decoration:none}
.tb-btn:active{transform:scale(.93)}
.tb-btn.is-on{background:rgba(80,200,140,.22);border-color:rgba(80,220,150,.55);color:#86f0bd}
.tb-btn.is-off{opacity:.5}
.tb-title{display:flex;flex-direction:column;line-height:1.15;padding-left:2px;white-space:nowrap}
.tb-title b{font-size:15px;letter-spacing:.5px;color:#fff;font-weight:700}
.tb-title span{font-size:11px;color:#7fa8cf;letter-spacing:.5px}
/* 对战进度条 HUD */
.tb-hud{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;overflow:hidden}
.vs-hud{display:flex;align-items:center;gap:8px;flex:0 1 520px;min-width:0}
.vs-side{display:flex;flex-direction:column;gap:2px;flex:1 1 0;min-width:0}
.vs-side.me{align-items:flex-end}
.vs-side.rival{align-items:flex-start}
.vs-name-row{display:flex;align-items:center;gap:4px;font-size:11.5px;color:#9dc2e6;white-space:nowrap;max-width:100%}
.vs-name-row .badge{display:inline-block;padding:0 5px;border-radius:6px;font-size:10px;font-weight:700;background:rgba(94,224,138,.2);color:#5ee08a;border:1px solid rgba(94,224,138,.4);margin-left:4px}
.vs-name-row .badge.behind{background:rgba(255,107,107,.2);color:#ff6b6b;border-color:rgba(255,107,107,.4)}
.vs-name{font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;max-width:96px}
.vs-pct{font-size:14.5px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.vs-side.me .vs-pct{color:#8ee6ff}
.vs-side.rival .vs-pct{color:#ffb3c6}
.vs-bar{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;width:100%;min-width:60px}
.vs-bar>i{position:absolute;top:0;bottom:0;left:0;border-radius:3px;transition:width .18s linear}
.vs-side.me .vs-bar>i{background:linear-gradient(90deg,#3fa0ff,#8ee6ff);box-shadow:0 0 8px rgba(63,160,255,.5)}
.vs-side.rival .vs-bar>i{background:linear-gradient(90deg,#ff7b9c,#ffb3c6);box-shadow:0 0 8px rgba(255,123,156,.5)}
.vs-center{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:0;min-width:56px}
.vs-center .time{font-size:12px;font-weight:700;color:#ffd35a;font-variant-numeric:tabular-nums;line-height:1.2}
.vs-center .vs-badge{font-size:10px;font-weight:800;color:#9fc0de;letter-spacing:1px}
.tb-tools{display:flex;align-items:center;gap:6px;flex:0 0 auto}
@media(max-width:1180px){.vs-name{max-width:70px}}
@media(max-width:960px){.vs-hud{max-width:none}.vs-center .vs-badge{display:none}}
@media(max-width:720px){.tb-title span{display:none}.vs-name{max-width:56px;font-size:10.5px}.vs-pct{font-size:12.5px}.topbar{gap:5px;padding:0 7px}.vs-hud{gap:4px}}
@media(max-width:560px){.tb-title b{font-size:13px}.tb-btn{width:30px;height:30px;font-size:13px}.vs-center .time{font-size:11px}}
/* ============ 舞台 ============ */
.stage-wrap{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px;position:relative;background:radial-gradient(ellipse at 50% 0%,rgba(40,90,150,.35) 0%,rgba(8,20,38,0) 62%),#081426}
.stage{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.62),0 0 0 1px rgba(120,180,240,.16);background:#0c1d2f;line-height:0}
#cv{display:block;width:100%;height:100%}
.ime-input{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);width:60%;max-width:420px;height:34px;opacity:0;border:none;outline:none;background:transparent;color:transparent;caret-color:transparent;font-size:16px;padding:0;margin:0;z-index:5;pointer-events:auto}
.input-tip{position:absolute;left:50%;bottom:calc(2% + 44px);transform:translateX(-50%);background:rgba(12,24,40,.9);border:1px solid rgba(255,211,90,.4);border-radius:10px;padding:6px 14px;font-size:12.5px;color:#ffd35a;pointer-events:none;opacity:0;transition:opacity .25s;z-index:6;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.input-tip.show{opacity:1}
/* ============ 覆盖层 ============ */
.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:none;overflow-y:auto;overflow-x:hidden;padding:20px 16px;background:rgba(5,12,22,.78);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:200}
.overlay.show{display:flex}
.overlay>.panel{margin:auto;width:100%;max-width:560px;padding:26px 24px 22px;border-radius:18px;background:linear-gradient(180deg,#1c3a5c 0%,#102338 100%);border:1px solid rgba(120,180,240,.26);box-shadow:0 26px 70px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.09);text-align:center;position:relative;z-index:1;animation:panelIn .3s cubic-bezier(.2,.9,.3,1.25)}
@keyframes panelIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.panel h2{margin:0 0 6px;font-size:24px;font-weight:800;color:#fff;letter-spacing:.5px}
.panel .p-sub{margin:0 0 16px;font-size:13.5px;line-height:1.7;color:#9fc0de}
.match-spinner{width:72px;height:72px;margin:8px auto 18px;border-radius:50%;border:3px solid rgba(120,180,240,.18);border-top-color:#ffd35a;border-right-color:#6fb4ff;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.match-count{font-size:44px;font-weight:800;color:#ffd35a;font-variant-numeric:tabular-nums;margin:6px 0 4px;text-shadow:0 0 24px rgba(255,211,90,.45)}
.match-count small{font-size:14px;color:#9fc0de;font-weight:600;margin-left:4px}
.match-queue-status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#9fc0de;margin-top:8px}
.match-queue-status .dot{width:8px;height:8px;border-radius:50%;background:#5ee08a;animation:pulseDot 1.2s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
.ready-count{font-size:96px;font-weight:900;color:#ffd35a;line-height:1;margin:6px 0;text-shadow:0 0 40px rgba(255,200,60,.6);animation:readyPulse .95s ease-in-out infinite}
@keyframes readyPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.ready-vs{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 4px;font-size:14px;color:#9fc0de}
.ready-vs .vs{color:#ffd35a;font-weight:800;font-size:20px}
.ready-vs .side{display:flex;align-items:center;gap:6px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ready-vs .side .glyphicon{color:#6fb4ff;flex:0 0 auto}
.end-icon{width:78px;height:78px;margin:0 auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:38px;position:relative}
.end-icon.win{background:radial-gradient(circle at 50% 35%,#ffd35a 0%,#e8a41c 68%,#b57708 100%);color:#4a2c00;box-shadow:0 0 0 8px rgba(255,211,90,.13),0 12px 30px rgba(230,160,30,.5);animation:iconPulse 1.6s ease-in-out infinite}
.end-icon.lose{background:radial-gradient(circle at 50% 35%,#6a8bb0 0%,#3b5a7d 68%,#26405c 100%);color:#d6e6f6;box-shadow:0 0 0 8px rgba(120,170,220,.1),0 12px 30px rgba(30,60,95,.5);animation:iconSad 2.4s ease-in-out infinite}
@keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes iconSad{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(3px) rotate(-3deg)}}
.end-title{font-size:26px;font-weight:800;margin:0 0 4px}
.end-title.win{color:#ffd35a;text-shadow:0 0 22px rgba(255,200,60,.5)}
.end-title.lose{color:#a9c7e4}
.end-score{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:4px 0 18px}
.end-score b{font-size:46px;font-weight:800;line-height:1;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 26px rgba(120,200,255,.45)}
.end-score small{font-size:13px;color:#7fa8cf}
.end-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.es-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:11px;background:rgba(255,255,255,.055);border:1px solid rgba(120,180,240,.14)}
.es-item .glyphicon{font-size:15px;color:#6fa8dd;margin-bottom:2px}
.es-item b{font-size:16px;color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.es-item small{font-size:10.5px;color:#7fa8cf}
.end-lines{text-align:left;margin-bottom:18px;border-radius:11px;overflow:hidden;border:1px solid rgba(120,180,240,.14)}
.end-lines>div{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;font-size:13px;background:rgba(255,255,255,.04)}
.end-lines>div:nth-child(odd){background:rgba(255,255,255,.075)}
.end-lines span{color:#8fb4d6;display:flex;align-items:center;gap:7px}
.end-lines span .glyphicon{font-size:12px;opacity:.85}
.end-lines b{color:#fff;font-weight:700}
.p-actions{display:flex;flex-direction:column;gap:9px}
.btn-row{display:flex;flex-wrap:wrap;gap:9px;align-items:stretch}
.btn-row>*{flex:1 1 auto;min-width:104px}
.btn-gold,.btn-ghost,.btn-quiet{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 14px;border-radius:11px;font-size:14px;font-weight:700;border:1px solid transparent;cursor:pointer;text-decoration:none!important;transition:transform .12s,box-shadow .2s,background .2s,border-color .2s;outline:none;white-space:nowrap}
.btn-gold{background:linear-gradient(180deg,#ffd964,#e7a91c);color:#3a2300;box-shadow:0 8px 22px rgba(230,170,30,.35)}
.btn-gold:hover,.btn-gold:focus{color:#3a2300;box-shadow:0 10px 28px rgba(230,170,30,.55);transform:translateY(-1px)}
.btn-ghost{background:rgba(90,150,220,.18);border-color:rgba(120,180,240,.34);color:#d5e8fb}
.btn-ghost:hover,.btn-ghost:focus{background:rgba(90,150,220,.32);color:#fff;transform:translateY(-1px)}
.btn-quiet{background:transparent;border-color:rgba(120,180,240,.2);color:#8fb4d6}
.btn-quiet:hover,.btn-quiet:focus{background:rgba(255,255,255,.07);color:#fff}
.btn-gold:active,.btn-ghost:active,.btn-quiet:active{transform:scale(.97)}
@media(max-width:480px){.btn-row>*{min-width:130px}}
.end-actions{display:flex;flex-wrap:nowrap;gap:7px;align-items:stretch}
.end-actions>*{flex:1 1 0;min-width:0;padding:0 8px;font-size:13px;height:46px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.end-actions #btnAgain{flex:1.3 1 0}
@media(max-width:440px){.end-actions{flex-wrap:wrap}.end-actions>*{min-width:100px;font-size:12.5px;padding:0 6px}}
.p-hint{margin:14px 0 0;font-size:12px;color:#6f96bb;line-height:1.7}
.p-hint kbd{display:inline-block;padding:1px 6px;margin:0 1px;border-radius:5px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);box-shadow:0 1px 0 rgba(0,0,0,.35);font-family:Menlo,Consolas,monospace;font-size:11px;color:#cfe3f7}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 4px;border-bottom:1px solid rgba(120,180,240,.12);text-align:left;flex-wrap:wrap}
.opt-row:last-child{border-bottom:none}
.opt-row.disabled{opacity:.5;pointer-events:none}
.opt-row .opt-label{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#cfe3f7;flex:1 1 auto;min-width:0}
.opt-row .opt-label .glyphicon{color:#6fa8dd;font-size:14px;flex:0 0 auto}
.opt-row .opt-desc{display:block;font-size:11.5px;color:#7799ba;margin-top:2px}
.seg{display:inline-flex;border-radius:9px;overflow:hidden;border:1px solid rgba(120,180,240,.26);flex:0 0 auto}
.seg button{border:none;background:transparent;color:#9dc2e6;padding:7px 13px;font-size:12.5px;cursor:pointer;transition:background .18s,color .18s;outline:none;white-space:nowrap}
.seg button+button{border-left:1px solid rgba(120,180,240,.2)}
.seg button.on{background:linear-gradient(180deg,#ffd964,#e7a91c);color:#3a2300;font-weight:700}
.seg button:disabled{cursor:not-allowed;opacity:.6}
.rule-list{text-align:left;margin:0 0 18px;padding:0;list-style:none}
.rule-list li{display:flex;gap:10px;padding:9px 2px;font-size:13.5px;line-height:1.65;color:#bcd6f2;border-bottom:1px dashed rgba(120,180,240,.14)}
.rule-list li:last-child{border-bottom:none}
.rule-list .glyphicon{color:#ffd35a;font-size:13px;margin-top:4px;flex:0 0 auto}
.rule-list em{color:#ffd35a;font-style:normal;font-weight:700}
.toast-layer{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none;z-index:500}
.toast{max-width:84vw;padding:12px 22px;border-radius:12px;background:rgba(16,34,56,.96);border:1px solid rgba(120,180,240,.35);box-shadow:0 14px 40px rgba(0,0,0,.55);color:#e6f0fa;font-size:14px;font-weight:600;display:flex;align-items:center;gap:9px;animation:toastIn .28s cubic-bezier(.2,.9,.3,1.3);margin-top:-20px}
.toast .glyphicon{color:#ffd35a;font-size:15px}
.toast.success{border-color:rgba(94,224,138,.55);background:rgba(24,52,44,.96)}
.toast.success .glyphicon{color:#5ee08a}
.toast.danger{border-color:rgba(255,107,107,.55);background:rgba(52,24,28,.96)}
.toast.danger .glyphicon{color:#ff6b6b}
.toast.out{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:scale(.86) translateY(10px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:scale(.9) translateY(-8px)}}
#confettiLayer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:400;display:none}
#confettiLayer.show{display:block}
.confetti{position:absolute;top:-14vh;width:10px;height:16px;opacity:.95;border-radius:2px;animation:confettiFall linear forwards;will-change:transform}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(126vh) rotate(720deg);opacity:.6}}
.confetti.rain{width:3px;height:22px;border-radius:2px;opacity:.55}
.tb-btn:focus-visible,.btn-gold:focus-visible,.btn-ghost:focus-visible,.btn-quiet:focus-visible{outline:2px solid #6fb4ff;outline-offset:2px}