/* ================================================================
   荣耀精英 HONOR ELITE — 全套 UI
   布局参考《王者荣耀》HUD，质感参考《和平精英》军事风
   ================================================================ */
:root{
  --gold:#f5c542;          /* 和平精英 战术黄 */
  --gold-dim:#c79a2a;
  --steel:#1b2129;         /* 军事钢铁底色 */
  --steel-2:#242c37;
  --blue:#3da9fc;          /* 我方蓝 */
  --red:#ff5c5c;           /* 敌方红 */
  --hp:#58d68d;
  --mp:#4aa3ff;
  --font-cn:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
  --font-num:"Bahnschrift Condensed","Arial Narrow",Impact,sans-serif;
  --font-title:Impact,"Arial Black","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:var(--font-cn);color:#e8e6e0}
button{font-family:var(--font-cn);cursor:pointer;border:none;background:none;color:inherit}
#app{position:fixed;inset:0}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------------- 通用屏幕 ---------------- */
.screen{position:absolute;inset:0;display:none;z-index:10}
.screen.active{display:block}
.hidden{display:none!important}

.btn-main{
  position:relative;padding:14px 58px;font-size:22px;font-weight:900;letter-spacing:6px;color:#1a1408;
  background:linear-gradient(180deg,#ffe082 0%,var(--gold) 45%,#d19a1f 100%);
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  box-shadow:0 0 24px rgba(245,197,66,.45),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .12s,filter .12s;
}
.btn-main:hover{filter:brightness(1.12);transform:translateY(-2px)}
.btn-main:active{transform:translateY(1px) scale(.98)}
.btn-main:disabled{filter:grayscale(.8) brightness(.6);cursor:not-allowed}
.btn-ghost{
  padding:10px 34px;font-size:15px;letter-spacing:3px;color:#cfd6df;border:1px solid rgba(255,255,255,.35);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);background:rgba(0,0,0,.35);transition:all .15s;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.icon-btn{
  width:40px;height:40px;font-size:20px;color:#dfe5ec;border:1px solid rgba(255,255,255,.25);
  background:rgba(10,14,20,.6);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.icon-btn.small{width:34px;height:34px;font-size:15px}
.icon-btn:hover{color:var(--gold);border-color:var(--gold)}

/* ================= 启动屏 ================= */
#screen-boot{background:#05070a;z-index:100}
.boot-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 30%,rgba(245,197,66,.10),transparent 55%),
    radial-gradient(ellipse at 20% 85%,rgba(61,169,252,.08),transparent 50%),
    repeating-linear-gradient(115deg,transparent 0 60px,rgba(255,255,255,.015) 60px 61px),
    linear-gradient(180deg,#0a0e14 0%,#05070a 100%);
}
.boot-bg::after{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 50% 120%,rgba(245,197,66,.06),transparent 60%);animation:bootPulse 3s ease-in-out infinite}
@keyframes bootPulse{50%{opacity:.4}}
.boot-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px}
.game-logo{text-align:center;animation:logoIn 1.2s cubic-bezier(.2,.9,.3,1.2)}
@keyframes logoIn{0%{opacity:0;transform:scale(1.6);filter:blur(10px)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
.logo-cn{
  font-size:88px;font-weight:900;letter-spacing:14px;line-height:1.1;
  background:linear-gradient(180deg,#fff7e0 5%,var(--gold) 45%,#8a5f10 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 18px rgba(245,197,66,.35));
}
.logo-en{font-family:var(--font-title);font-size:30px;letter-spacing:16px;color:#7d8794;margin-top:6px}
.logo-sub{margin-top:12px;font-size:15px;letter-spacing:8px;color:var(--gold-dim)}
.boot-progress{width:420px;max-width:80vw;text-align:center}
.boot-bar{height:6px;background:rgba(255,255,255,.08);clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%);overflow:hidden}
.boot-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold-dim),var(--gold),#fff2c4);box-shadow:0 0 12px var(--gold);transition:width .2s}
.boot-tip{margin-top:12px;font-size:13px;color:#8b96a5;letter-spacing:2px}
.btn-enter{animation:enterBlink 1.4s ease-in-out infinite}
@keyframes enterBlink{50%{box-shadow:0 0 44px rgba(245,197,66,.85),inset 0 1px 0 rgba(255,255,255,.6)}}
.boot-foot{position:absolute;bottom:20px;font-size:11px;color:#4a545f;letter-spacing:2px}

/* ================= 主菜单 ================= */
#screen-menu{background:#070a0f}
.menu-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 75% 40%,rgba(245,197,66,.13),transparent 50%),
    radial-gradient(ellipse at 15% 75%,rgba(61,169,252,.10),transparent 45%),
    linear-gradient(200deg,#141b26 0%,#0a0e15 55%,#05070b 100%);
}
.menu-bg::before{content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 75%);
}
.menu-scan{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.menu-scan::after{content:'';position:absolute;left:0;right:0;height:120px;top:-140px;
  background:linear-gradient(180deg,transparent,rgba(245,197,66,.05),transparent);animation:scan 5s linear infinite}
@keyframes scan{to{top:110%}}
/* 大厅动态背景画布与装饰 */
#menu-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.menu-emblem{position:absolute;left:3%;top:4%;width:400px;height:400px;pointer-events:none;
  border:1px dashed rgba(245,197,66,.28);border-radius:50%;animation:emblemSpin 70s linear infinite}
.menu-emblem::before{content:'';position:absolute;inset:36px;border-radius:50%;
  border:1px solid rgba(245,197,66,.14);border-top-color:rgba(245,197,66,.55);animation:emblemSpin 8s linear infinite}
.menu-emblem::after{content:'';position:absolute;inset:86px;border-radius:50%;
  border:1px dotted rgba(126,200,255,.28);animation:emblemSpin 22s linear infinite reverse}
@keyframes emblemSpin{to{transform:rotate(360deg)}}
.menu-frame{position:absolute;inset:14px;pointer-events:none;z-index:3}
.menu-frame::before,.menu-frame::after{content:'';position:absolute;width:48px;height:48px;border:2px solid rgba(245,197,66,.45)}
.menu-frame::before{left:0;top:0;border-right:none;border-bottom:none}
.menu-frame::after{right:0;bottom:0;border-left:none;border-top:none}
.menu-stripes{position:absolute;left:0;right:0;bottom:0;height:7px;opacity:.35;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(45deg,var(--gold) 0 16px,transparent 16px 32px)}
.menu-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px 26px;z-index:2}
.player-card{display:flex;align-items:center;gap:14px;background:rgba(8,12,18,.55);padding:8px 22px 8px 10px;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);border-left:3px solid var(--gold)}
.avatar{position:relative;width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#2c3a4d,#151c26);font-size:24px;font-weight:900;color:var(--gold);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.avatar-ring{position:absolute;inset:-3px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border:2px solid var(--gold-dim);opacity:.6}
.player-name{font-size:16px;font-weight:700;letter-spacing:1px}
.player-rank{font-size:12px;color:var(--gold);margin-top:2px}
.menu-currency{display:flex;gap:12px;align-items:center}
.cur{font-family:var(--font-num);font-size:20px;padding:4px 16px;background:rgba(8,12,18,.55);letter-spacing:1px;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.gold-cur{color:var(--gold)} .dia-cur{color:#7ec8ff}
.menu-title{position:absolute;top:16%;left:8%;z-index:2}
.menu-logo-cn{font-size:64px;font-weight:900;letter-spacing:10px;
  background:linear-gradient(180deg,#fff7e0,var(--gold) 55%,#8a5f10);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 14px rgba(245,197,66,.3))}
.menu-logo-en{font-family:var(--font-title);font-size:22px;letter-spacing:12px;color:#6b7683}
.menu-bottom{position:absolute;right:6%;bottom:10%;display:flex;flex-direction:column;align-items:flex-end;gap:22px;z-index:2}
.mode-card{background:linear-gradient(120deg,rgba(20,27,38,.9),rgba(12,16,23,.9));border:1px solid rgba(245,197,66,.35);
  border-left:4px solid var(--gold);padding:16px 26px;min-width:340px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.mode-tag{display:inline-block;font-size:11px;letter-spacing:3px;color:#0f0d06;background:var(--gold);padding:2px 10px;font-weight:700}
.mode-name{font-size:26px;font-weight:900;letter-spacing:3px;margin-top:8px}
.mode-desc{font-size:13px;color:#95a1b0;margin-top:4px;letter-spacing:1px}
.btn-match{padding:18px 72px;font-size:26px}
.btn-match-label{display:block}
.btn-match-sub{display:block;font-family:var(--font-title);font-size:11px;letter-spacing:6px;color:rgba(26,20,8,.65);margin-top:2px}
/* 匹配浮层 */
.match-overlay{position:absolute;inset:0;background:rgba(3,5,8,.82);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:5}
.match-box{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.radar{position:relative;width:150px;height:150px;border-radius:50%;border:2px solid rgba(245,197,66,.5);
  background:radial-gradient(circle,rgba(245,197,66,.06) 0%,transparent 70%)}
.radar::before,.radar::after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(245,197,66,.25)}
.radar::before{inset:24%} .radar::after{inset:44%}
.radar-sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(245,197,66,.5),transparent 70deg,transparent);animation:sweep 1.6s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--gold);animation:blip 1.6s ease-in-out infinite}
.radar i:nth-child(2){top:30%;left:60%;animation-delay:.4s}
.radar i:nth-child(3){top:62%;left:32%;animation-delay:.9s}
.radar i:nth-child(4){top:48%;left:74%;animation-delay:1.2s}
@keyframes blip{0%,100%{opacity:0}30%{opacity:1}}
.match-status{font-size:18px;letter-spacing:3px;color:var(--gold)}
.match-timer{font-family:var(--font-num);font-size:34px;color:#cfd6df;letter-spacing:2px}

/* ================= 英雄选择 ================= */
#screen-select{background:#080b10;display:none;flex-direction:column}
#screen-select.active{display:flex}
.select-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse at 80% 20%,rgba(245,197,66,.08),transparent 50%),
  linear-gradient(180deg,#10151d 0%,#07090e 100%)}
.select-header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:14px 30px;z-index:2;
  border-bottom:1px solid rgba(245,197,66,.2)}
.select-title{font-size:20px;font-weight:900;letter-spacing:4px;color:var(--gold)}
.select-timer{position:relative;width:52px;height:52px}
.select-timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.select-timer circle{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:107;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}
.select-timer span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-num);font-size:24px}
.select-mode{font-size:13px;color:#8b96a5;letter-spacing:2px}
.select-body{position:relative;flex:1;display:flex;gap:16px;padding:18px 30px;z-index:2;min-height:0}
.team-panel{display:flex;flex-direction:column;gap:10px;width:190px}
.tp-slot{display:flex;align-items:center;gap:10px;background:rgba(16,22,31,.8);border-left:3px solid var(--blue);padding:8px 10px;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.tp-slot .tp-ava{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#0c1016;
  font-weight:900;font-size:18px;color:#556;border:1px solid rgba(255,255,255,.12)}
.tp-slot.me .tp-ava{color:var(--gold);border-color:var(--gold)}
.tp-slot.picked .tp-ava{color:#9fd8ff;border-color:var(--blue)}
.tp-name{font-size:13px;color:#aab4c0}
.tp-pick{font-size:11px;color:#5d6874}
.tp-slot.me .tp-name{color:var(--gold)}
.hero-pool{flex:1;display:flex;flex-direction:column;min-width:0}
.pool-label{font-size:13px;letter-spacing:3px;color:#8b96a5;margin-bottom:10px}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fill,110px);gap:14px;align-content:start;overflow-y:auto}
.hero-card{position:relative;width:110px;height:140px;background:linear-gradient(180deg,#1a222e,#0d1118);
  border:1px solid rgba(255,255,255,.1);clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:all .15s;overflow:hidden}
.hero-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,rgba(245,197,66,.14),transparent 60%);opacity:0;transition:opacity .2s}
.hero-card:hover{transform:translateY(-4px);border-color:rgba(245,197,66,.6)}
.hero-card:hover::before{opacity:1}
.hero-card.selected{border-color:var(--gold);box-shadow:0 0 18px rgba(245,197,66,.4)}
.hero-card.selected::before{opacity:1}
.hc-face{width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hc-name{font-size:15px;font-weight:700;letter-spacing:2px}
.hc-role{font-size:10px;letter-spacing:2px;color:#8b96a5}
.hero-detail{width:340px;display:flex;flex-direction:column;background:rgba(12,16,23,.7);border:1px solid rgba(255,255,255,.08);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
#preview-canvas{width:100%;height:220px;display:block;background:radial-gradient(ellipse at 50% 80%,rgba(245,197,66,.1),transparent 60%)}
.detail-info{padding:14px 18px;display:flex;flex-direction:column;gap:8px}
.d-role{display:inline-block;align-self:flex-start;font-size:11px;letter-spacing:3px;background:var(--gold);color:#141006;padding:2px 10px;font-weight:700}
.d-name{font-size:30px;font-weight:900;letter-spacing:4px}
.d-weapon{font-size:13px;color:var(--gold);letter-spacing:1px}
.d-skills{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.d-skill{display:flex;gap:10px;align-items:center;font-size:12px;color:#aab4c0}
.d-skill b{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#1c242f;
  border:1px solid rgba(245,197,66,.4);color:var(--gold);font-size:16px;clip-path:polygon(20% 0,100% 0,100% 80%,80% 100%,0 100%,0 20%)}
.d-diff{font-size:12px;color:#8b96a5}
#d-diff-stars{color:var(--gold)}
.select-footer{position:relative;display:flex;justify-content:center;padding:14px;z-index:2;border-top:1px solid rgba(245,197,66,.15)}

/* ================= 对局加载 ================= */
#screen-loading{background:#05070b}
.loading-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 0%,rgba(61,169,252,.08),transparent 50%),
  radial-gradient(ellipse at 50% 100%,rgba(255,92,92,.08),transparent 50%),
  linear-gradient(180deg,#0b0f16,#060810)}
.loading-teams{position:absolute;inset:0 0 120px 0;display:flex;align-items:center;justify-content:center;gap:40px;padding:0 40px}
.lt-side{display:flex;flex-direction:column;gap:14px}
.lt-card{display:flex;align-items:center;gap:12px;width:250px;padding:10px 14px;background:rgba(14,19,27,.85);
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);opacity:0;transform:translateX(-40px);animation:ltIn .5s forwards}
.lt-red .lt-card{transform:translateX(40px);clip-path:polygon(12px 0,100% 0,100% 100%,0 100%);flex-direction:row-reverse;text-align:right}
@keyframes ltIn{to{opacity:1;transform:translateX(0)}}
.lt-blue .lt-card{border-left:3px solid var(--blue)}
.lt-red .lt-card{border-right:3px solid var(--red)}
.lt-face{width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.lt-info b{display:block;font-size:15px;letter-spacing:1px}
.lt-info em{font-size:11px;color:#8b96a5;font-style:normal}
.lt-vs{display:flex;flex-direction:column;align-items:center;gap:10px}
.lt-vs span{font-family:var(--font-title);font-size:64px;color:var(--gold);text-shadow:0 0 30px rgba(245,197,66,.5)}
.lt-map{font-size:13px;letter-spacing:3px;color:#8b96a5}
.loading-progress{position:absolute;left:15%;right:15%;bottom:52px;text-align:center}
.lp-bar{height:5px;background:rgba(255,255,255,.08);overflow:hidden;clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%)}
#lp-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));box-shadow:0 0 10px var(--gold);transition:width .3s}
.lp-tip{margin-top:10px;font-size:13px;color:#8b96a5;letter-spacing:1px}

/* ================= 游戏 HUD ================= */
.hud{pointer-events:none;z-index:20}
.hud>*{pointer-events:auto}
#banner-layer,#float-layer,#dmg-vignette,#lowhp-vignette,#unitbar-layer,#zone-warning{pointer-events:none!important}

/* 顶部计分板 */
.topbar{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;align-items:stretch;z-index:22;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.tb-side{display:flex;align-items:center;gap:10px;padding:4px 18px;font-family:var(--font-num)}
.tb-blue{background:linear-gradient(90deg,rgba(20,60,100,.85),rgba(24,52,80,.9));clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.tb-red{background:linear-gradient(90deg,rgba(80,26,32,.9),rgba(110,30,36,.85));clip-path:polygon(14px 0,100% 0,100% 100%,0 100%)}
.tb-kills{font-size:30px;line-height:1;color:#fff;min-width:34px;text-align:center}
.tb-tower{font-size:15px;color:#9fc4e8;opacity:.9}
.tb-red .tb-tower{color:#f0a8a8}
.tb-tower::before{content:'♜ '}
.tb-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px 16px;min-width:96px;
  background:linear-gradient(180deg,#232b37,#141a23);border-bottom:2px solid var(--gold)}
.tb-time{font-family:var(--font-num);font-size:22px;line-height:1;color:#fff;letter-spacing:1px}
.tb-gold{font-family:var(--font-num);font-size:13px;color:var(--gold)}

/* 小地图 */
#minimap-wrap{position:absolute;top:8px;left:8px;width:220px;height:220px;z-index:22}
#minimap{width:100%;height:100%;background:rgba(8,11,16,.82);clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.mm-frame{position:absolute;inset:0;pointer-events:none;border:1px solid rgba(245,197,66,.45);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}

/* 右上 KDA */
.hud-topright{position:absolute;top:8px;right:10px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:22}
.kda-chip{display:flex;align-items:center;gap:12px;background:rgba(10,14,20,.72);padding:5px 16px;
  clip-path:polygon(10px 0,100% 0,100% 100%,0 100%);border-right:3px solid var(--gold)}
.kda-chip span{font-family:var(--font-num);font-size:22px;letter-spacing:2px}
.kda-chip em{font-size:12px;color:#9aa6b3;font-style:normal}
.hud-ctl{display:flex;gap:8px}

/* 击杀信息流 */
#killfeed{position:absolute;top:64px;right:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;z-index:21;pointer-events:none}
.kf-item{display:flex;align-items:center;gap:8px;background:rgba(8,11,16,.78);padding:4px 14px;font-size:13px;
  clip-path:polygon(8px 0,100% 0,100% 100%,0 100%);animation:kfIn .25s ease-out;border-right:2px solid rgba(255,255,255,.2)}
.kf-item .k-blue{color:var(--blue);font-weight:700}
.kf-item .k-red{color:var(--red);font-weight:700}
.kf-item .k-x{color:var(--gold);font-family:var(--font-num);font-size:15px}
@keyframes kfIn{from{opacity:0;transform:translateX(30px)}}

/* 中央横幅 */
#banner-layer{position:absolute;top:16%;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:30}
.banner{
  font-size:44px;font-weight:900;letter-spacing:10px;padding:6px 46px;
  color:var(--gold);text-shadow:0 0 24px rgba(245,197,66,.6),0 2px 4px #000;
  background:linear-gradient(90deg,transparent,rgba(8,10,14,.85) 18%,rgba(8,10,14,.85) 82%,transparent);
  animation:bannerIn .4s cubic-bezier(.2,1.4,.4,1)}
.banner.red{color:var(--red);text-shadow:0 0 24px rgba(255,92,92,.6),0 2px 4px #000}
.banner.blue{color:#8fd0ff;text-shadow:0 0 24px rgba(61,169,252,.6),0 2px 4px #000}
@keyframes bannerIn{0%{opacity:0;transform:scale(1.9)}100%{opacity:1;transform:scale(1)}}
.sub-banner{font-size:16px;letter-spacing:4px;color:#d8dee6;background:rgba(8,10,14,.7);padding:4px 26px;animation:bannerIn .4s}

/* 信号圈警告 */
.zone-warning{position:absolute;top:26%;left:50%;transform:translateX(-50%);font-size:16px;letter-spacing:2px;color:#7ec8ff;
  background:rgba(10,20,32,.8);border:1px solid rgba(126,200,255,.5);padding:6px 22px;z-index:29;animation:zwBlink 1s infinite}
@keyframes zwBlink{50%{opacity:.55}}

/* 左下 英雄面板 + 摇杆 */
.hud-bottomleft{position:absolute;left:12px;bottom:10px;z-index:22;display:flex;flex-direction:column;gap:10px}
.hero-plate{display:flex;align-items:center;gap:10px;background:rgba(8,11,16,.72);padding:8px 16px 8px 8px;
  clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);border-left:3px solid var(--gold)}
.hp-portrait{position:relative;width:58px;height:58px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#2b3a4e,#131a24);font-size:26px;font-weight:900;color:var(--gold);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hp-portrait b{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:var(--gold);color:#141006;font-family:var(--font-num);font-size:15px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.plate-bars{display:flex;flex-direction:column;gap:4px;width:190px}
.bar{position:relative;height:16px;background:rgba(0,0,0,.6);clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%);overflow:hidden}
.bar>div{height:100%;width:100%;transition:width .15s}
.hpbar>div{background:linear-gradient(180deg,#7fe3a8,var(--hp) 55%,#2f9d5e)}
.mpbar{height:8px}
.mpbar>div{background:linear-gradient(180deg,#7ec1ff,var(--mp))}
.bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-num);font-size:12px;color:#fff;text-shadow:0 1px 2px #000}
.buff-row{display:flex;gap:4px;min-height:18px}
.buff-ico{width:18px;height:18px;font-size:11px;display:flex;align-items:center;justify-content:center;background:rgba(245,197,66,.18);border:1px solid var(--gold);color:var(--gold)}
.buff-ico.red{background:rgba(255,92,92,.18);border-color:var(--red);color:var(--red)}
.buff-ico.blue{background:rgba(61,169,252,.18);border-color:var(--blue);color:var(--blue)}
.plate-gold{font-family:var(--font-num);font-size:18px;color:var(--gold);align-self:flex-end;padding-bottom:2px}

/* 虚拟摇杆 */
#joystick{position:relative;width:170px;height:170px;touch-action:none}
#joy-base{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.22);
  background:radial-gradient(circle,rgba(20,26,35,.35) 0%,rgba(20,26,35,.6) 100%)}
#joy-base::before{content:'';position:absolute;inset:26%;border-radius:50%;border:1px dashed rgba(255,255,255,.15)}
#joy-knob{position:absolute;width:66px;height:66px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#4a5a70,#232c39 70%);border:2px solid rgba(245,197,66,.5);
  box-shadow:0 4px 12px rgba(0,0,0,.5),inset 0 2px 4px rgba(255,255,255,.15)}

/* 快捷购买 */
.quickbuy{position:absolute;left:12px;top:242px;display:flex;flex-direction:column;gap:8px;z-index:22}
.qb-shop{width:56px;height:56px;font-size:13px;font-weight:700;line-height:1.25;color:var(--gold);
  background:rgba(10,14,20,.78);border:1px solid rgba(245,197,66,.55);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.qb-shop:hover{background:rgba(245,197,66,.15)}
.qb-item{position:relative;width:56px;height:56px;background:rgba(10,14,20,.78);border:1px solid rgba(255,255,255,.2);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:#cfd6df;gap:2px}
.qb-item i{font-style:normal;font-size:20px}
.qb-item em{font-style:normal;font-family:var(--font-num);font-size:12px;color:var(--gold)}
.qb-item.cant em{color:var(--red)}
.qb-item:hover{border-color:var(--gold)}

/* 装备栏 */
.inventory{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;display:flex;gap:6px;z-index:21}
.inv-slot{width:44px;height:44px;background:rgba(10,14,20,.7);border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:20px;position:relative;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.inv-slot.filled{border-color:rgba(245,197,66,.6);background:rgba(30,26,14,.8)}
.inv-slot .lv{position:absolute;right:2px;bottom:0;font-size:9px;color:var(--gold);font-family:var(--font-num)}

/* 技能盘（王者式扇形布局） */
.skillpad{position:absolute;right:14px;bottom:10px;width:330px;height:270px;z-index:22}
.skillpad button{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-radius:50%;color:#eef2f7;background:radial-gradient(circle at 35% 30%,#37455a,#1a212c 75%);
  border:2px solid rgba(255,255,255,.3);box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,255,255,.12);
  transition:transform .08s,border-color .15s}
.skillpad button:active{transform:scale(.92)}
.skillpad button i{font-style:normal;pointer-events:none}
#btn-attack{right:6px;bottom:6px;width:112px;height:112px;font-size:52px;border-color:rgba(245,197,66,.75);
  background:radial-gradient(circle at 35% 30%,#514626,#241d0d 75%);color:var(--gold);
  box-shadow:0 0 22px rgba(245,197,66,.28),0 4px 10px rgba(0,0,0,.5)}
.skill-btn{width:72px;height:72px;font-size:30px}
.skill-btn.s1{right:136px;bottom:8px}
.skill-btn.s2{right:118px;bottom:96px}
.skill-btn.s3{right:44px;bottom:136px}
.skill-btn .sk-lv{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);font-size:9px;color:var(--gold);font-family:var(--font-num);letter-spacing:1px}
.skill-btn.can-up{border-color:#7fe3a8;box-shadow:0 0 14px rgba(88,214,141,.5)}
.pad-mid{width:54px;height:54px;font-size:22px;right:220px;bottom:2px}
.pad-small{width:44px;height:44px;font-size:18px}
#btn-recall{right:288px;bottom:0}
#btn-heal{right:284px;bottom:52px}
.cd-mask{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(5,7,10,.88) var(--cd,0%),transparent 0);pointer-events:none}
.cd-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-num);font-size:24px;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none}
.skillpad button.ready-flash{animation:skReady .5s}
@keyframes skReady{0%{box-shadow:0 0 0 0 rgba(245,197,66,.9)}100%{box-shadow:0 0 0 22px rgba(245,197,66,0)}}
.skillpad button.no-mp{border-color:rgba(74,163,255,.7)}

/* 阵亡遮罩 */
#death-overlay{position:absolute;inset:0;background:radial-gradient(circle,rgba(30,0,0,.35),rgba(8,0,0,.75));z-index:40;
  display:flex;align-items:center;justify-content:center;backdrop-filter:grayscale(.7)}
.death-box{text-align:center}
.death-title{font-size:34px;font-weight:900;letter-spacing:8px;color:var(--red);text-shadow:0 0 20px rgba(255,92,92,.5)}
.death-count{font-family:var(--font-num);font-size:110px;color:#fff;line-height:1.1;text-shadow:0 0 30px rgba(255,92,92,.4)}
.death-sub{font-size:14px;letter-spacing:4px;color:#c8b1b1}

/* 战绩面板 */
#stats-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(860px,92vw);z-index:45;
  background:rgba(10,13,19,.94);border:1px solid rgba(245,197,66,.4);padding:18px 22px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
.sp-title{font-size:18px;font-weight:900;letter-spacing:4px;color:var(--gold);margin-bottom:14px;display:flex;justify-content:space-between}
.sp-close{cursor:pointer;color:#8b96a5;font-size:18px;padding:0 4px}
.sp-close:hover{color:#fff}
.sp-cols{display:flex;gap:20px}
.sp-table{flex:1;border-collapse:collapse;font-size:13px}
.sp-table th{font-size:11px;color:#8b96a5;font-weight:400;padding:4px 6px;text-align:left;border-bottom:1px solid rgba(255,255,255,.12)}
.sp-table td{padding:5px 6px;border-bottom:1px solid rgba(255,255,255,.05);font-family:var(--font-num);font-size:15px;letter-spacing:1px}
.sp-table td.n{font-family:var(--font-cn);font-size:13px}
.sp-table.blue td.n{color:#9fd0ff}
.sp-table.red td.n{color:#ffb3b3}
.sp-table tr.me td{background:rgba(245,197,66,.08)}

/* 商店 */
#shop-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(760px,94vw);max-height:88vh;z-index:46;
  background:rgba(10,13,19,.96);border:1px solid rgba(245,197,66,.45);padding:16px 20px;display:flex;flex-direction:column;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
.shop-head{font-size:18px;font-weight:900;letter-spacing:4px;color:var(--gold);display:flex;align-items:center;gap:14px}
.shop-head em{font-size:11px;color:#8b96a5;font-style:normal;font-weight:400;letter-spacing:1px;flex:1}
.shop-gold{font-family:var(--font-num);font-size:17px;color:var(--gold);margin:8px 0}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;overflow-y:auto;padding-right:4px}
.shop-item{background:rgba(22,28,38,.9);border:1px solid rgba(255,255,255,.12);padding:10px;display:flex;gap:10px;align-items:center;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);transition:all .12s;cursor:pointer}
.shop-item:hover{border-color:var(--gold);background:rgba(38,34,20,.9)}
.shop-item.owned{opacity:.45}
.shop-item.cant{filter:grayscale(.5)}
.shop-item .si-ico{font-size:26px}
.si-meta b{display:block;font-size:13px}
.si-meta em{display:block;font-style:normal;font-size:10px;color:#8b96a5;margin-top:2px}
.si-meta .si-price{font-family:var(--font-num);font-size:14px;color:var(--gold)}
.shop-item.cant .si-price{color:var(--red)}
.shop-tip{margin-top:10px;font-size:12px;color:#8b96a5;min-height:16px}

/* 反馈层 */
#dmg-vignette{position:absolute;inset:0;z-index:35;opacity:0;background:radial-gradient(ellipse,transparent 55%,rgba(255,30,30,.45) 100%);transition:opacity .1s}
#lowhp-vignette{position:absolute;inset:0;z-index:34;opacity:0;background:radial-gradient(ellipse,transparent 58%,rgba(200,0,0,.5) 100%)}
#lowhp-vignette.on{animation:lowhp 1.2s ease-in-out infinite}
@keyframes lowhp{0%,100%{opacity:.25}50%{opacity:.7}}
#float-layer{position:absolute;inset:0;z-index:24;overflow:hidden}
.float-txt{position:absolute;font-family:var(--font-num);font-weight:700;text-shadow:0 1px 3px #000;animation:floatUp 1s ease-out forwards;white-space:nowrap;transform:translate(-50%,-50%)}
@keyframes floatUp{0%{opacity:0;margin-top:0}12%{opacity:1}100%{opacity:0;margin-top:-64px}}
.float-gold{color:var(--gold);font-size:17px}
.float-dmg{color:#ffd3d3;font-size:16px}
.float-crit{color:#ff8c42;font-size:24px}
.float-heal{color:#8dffb8;font-size:16px}
.float-xp{color:#c9a0ff;font-size:14px}
#unitbar-layer{position:absolute;inset:0;z-index:20;overflow:hidden}
.ubar{position:absolute;width:56px;height:6px;background:rgba(0,0,0,.65);transform:translate(-50%,-100%);border:1px solid rgba(0,0,0,.8)}
.ubar>i{display:block;height:100%;background:var(--hp);transition:width .1s}
.ubar.enemy>i{background:var(--red)}
.ubar.hero{width:74px;height:9px}
.ubar.hero .ulv{position:absolute;left:-16px;top:-5px;width:15px;height:15px;font-size:9px;font-family:var(--font-num);display:flex;align-items:center;justify-content:center;background:#0c1016;border:1px solid var(--gold);color:var(--gold)}
.ubar .uname{position:absolute;left:50%;top:-15px;transform:translateX(-50%);font-size:10px;color:#dfe5ec;text-shadow:0 1px 2px #000;white-space:nowrap}

/* 回城读条 */
#recall-cast{position:absolute;left:50%;bottom:26%;transform:translateX(-50%);z-index:26;text-align:center}
#recall-cast .rc-bar{width:220px;height:8px;background:rgba(0,0,0,.6);border:1px solid rgba(126,200,255,.5)}
#rc-fill{height:100%;width:0;background:linear-gradient(90deg,#7ec8ff,#3da9fc)}
#recall-cast span{font-size:12px;color:#9fd0ff;letter-spacing:3px}

/* ================= 结算 ================= */
#screen-result{background:rgba(4,6,9,.92);backdrop-filter:blur(4px);display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px;z-index:60}
#screen-result.active{display:flex}
.result-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(245,197,66,.12),transparent 55%)}
.result-title{position:relative;font-size:110px;font-weight:900;letter-spacing:26px;line-height:1;animation:resultIn .7s cubic-bezier(.2,1.3,.4,1)}
.result-title.win{background:linear-gradient(180deg,#fff8dc,var(--gold) 55%,#96690e);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px rgba(245,197,66,.45))}
.result-title.lose{color:#5d6874;filter:drop-shadow(0 6px 20px rgba(0,0,0,.8));letter-spacing:18px}
@keyframes resultIn{0%{opacity:0;transform:scale(2.2)}100%{opacity:1;transform:scale(1)}}
.result-slogan{position:relative;font-size:20px;letter-spacing:6px;color:#d8dee6}
.result-card{position:relative;display:flex;flex-direction:column;gap:16px;background:rgba(14,18,26,.9);border:1px solid rgba(245,197,66,.3);
  padding:20px 34px;min-width:520px;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.rc-hero{display:flex;align-items:center;gap:14px}
.rc-hero span{width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:var(--gold);
  background:linear-gradient(160deg,#2b3a4e,#131a24);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.rc-hero b{font-size:20px;letter-spacing:2px;display:block}
.rc-hero em{font-size:12px;color:#8b96a5;font-style:normal}
.mvp-badge{margin-left:auto;font-family:var(--font-title);font-size:20px;color:#141006;background:linear-gradient(180deg,#ffe082,var(--gold));padding:4px 16px;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);animation:mvpIn .6s .4s both cubic-bezier(.2,1.5,.4,1)}
@keyframes mvpIn{0%{opacity:0;transform:scale(3) rotate(-12deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.rc-stats{display:flex;gap:12px}
.rs{flex:1;text-align:center;background:rgba(255,255,255,.04);padding:10px 6px}
.rs b{display:block;font-family:var(--font-num);font-size:26px;color:#fff;letter-spacing:1px}
.rs span{font-size:11px;color:#8b96a5}
.result-btns{position:relative;display:flex;gap:18px;align-items:center}

/* ================= 弹窗/设置 ================= */
.modal{position:absolute;inset:0;background:rgba(3,5,8,.75);z-index:70;display:flex;align-items:center;justify-content:center}
.modal-box{width:min(460px,92vw);background:rgba(12,16,23,.97);border:1px solid rgba(245,197,66,.4);padding:20px 26px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.modal-title{font-size:17px;font-weight:900;letter-spacing:4px;color:var(--gold);display:flex;justify-content:space-between;margin-bottom:16px}
.set-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#cfd6df;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.set-row input[type=range]{width:200px;accent-color:var(--gold)}
.set-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--gold)}
.set-keys{margin-top:14px;font-size:12px;color:#8b96a5;line-height:1.9}
.set-keys b{color:var(--gold);letter-spacing:2px}

/* 横屏提示 */
#rotate-hint{display:none;position:fixed;inset:0;z-index:200;background:#05070a;color:var(--gold);
  align-items:center;justify-content:center;font-size:18px;letter-spacing:3px;text-align:center}
@media (orientation:portrait) and (max-width:820px){ #rotate-hint{display:flex} }

/* 小屏适配 */
@media (max-width:1100px){
  #minimap-wrap{width:160px;height:160px}
  .quickbuy{top:180px}
  .logo-cn{font-size:60px}
  .skillpad{transform:scale(.85);transform-origin:bottom right}
  .hud-bottomleft{transform:scale(.85);transform-origin:bottom left}
  .result-title{font-size:72px}
  .hero-detail{width:280px}
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(245,197,66,.35)}
::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}