/* 参考主流电子游戏自走棋的全屏幻想竞技场 HUD */
:root{
  --arena-ink:#eff7ef;
  --arena-muted:#8ca6a6;
  --arena-deep:#07171c;
  --arena-panel:#071216e8;
  --arena-panel-2:#10262be8;
  --arena-gold:#c8a45a;
  --arena-gold-hi:#f0cf79;
  --arena-teal:#42c6c8;
  --arena-red:#dc5a51;
}

html,body{width:100%;height:100%;overflow:hidden;background:#061116}
body.arena-ui:before{
  inset:0;
  background:
    linear-gradient(#03101512,#03101536),
    url("assets/arena-background-v3.png") center/cover no-repeat;
  filter:none;
  transform:none;
}
body.arena-ui:after{
  inset:0;
  background:
    radial-gradient(ellipse at 50% 40%,transparent 30%,#0207094f 82%,#010405a8 100%),
    linear-gradient(90deg,#02090b8f 0 10%,transparent 25% 75%,#02090b8f 90% 100%);
}

.arena-ui .game-shell{
  width:100vw;height:100vh;max-width:none;margin:0;padding:0;gap:0;
  border:0;border-radius:0;background:transparent;box-shadow:none;
}

/* 顶部：居中回合控制条 */
.arena-ui .topbar{
  position:absolute;z-index:45;left:50%;top:0;transform:translateX(-50%);
  width:min(780px,58vw);height:64px;padding:7px 18px;gap:14px;
  border:1px solid #927746;border-top:0;border-radius:0 0 12px 12px;
  clip-path:polygon(7% 0,93% 0,100% 72%,95% 100%,5% 100%,0 72%);
  background:linear-gradient(180deg,#152f35f5,#08171cf7 72%,#030a0df8);
  box-shadow:inset 0 -2px #c39d52,0 8px 25px #000b,0 0 28px #1e8f9440;
}
.arena-ui .topbar:before{
  content:"ARENA LINK // LOCAL";left:50%;top:3px;transform:translateX(-50%);
  color:#6d9d9d;font:700 7px/1 Consolas,monospace;letter-spacing:2px;
}
.arena-ui .topbar:after{left:9%;right:9%;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#c9a052,#60d8d4,#c9a052,transparent)}
.arena-ui .brand{min-width:235px;gap:9px}
.arena-ui .brand-mark{
  width:39px;height:39px;border:2px solid #d0aa5e;border-radius:50%;
  background:radial-gradient(circle,#0c2428 0 35%,#3bc5c4 37% 42%,#07161a 44% 67%,#c6a151 69%);
  color:#ffe196;box-shadow:0 0 16px #35c8c56e;
}
.arena-ui .brand b{font-size:22px;color:#fff1c7;text-shadow:0 2px #000;letter-spacing:1px}
.arena-ui .brand small{font-size:9px;color:#65d6d1;letter-spacing:2px}
.arena-ui .round-card{
  margin:auto;min-width:210px;justify-content:center;padding:7px 18px;
  border:1px solid #765f38;border-radius:3px;
  background:linear-gradient(180deg,#10282d,#061115);
  box-shadow:inset 0 0 0 1px #1e4549,0 3px 9px #0009;
}
.arena-ui .round-card span{font-size:13px;color:#c2ad78}.arena-ui .round-card b{font-size:17px;color:#f2d57f}
.arena-ui .top-actions{gap:5px}
.arena-ui .icon-btn{
  width:34px;height:34px;border:1px solid #765f3c;border-radius:50%;
  background:radial-gradient(circle,#16373b,#071317);color:#c9bc91;
  box-shadow:inset 0 0 0 2px #03090b,0 2px 5px #000;
}
.arena-ui .icon-btn:hover{color:#8ffff4;border-color:#5ed2cc;background:radial-gradient(circle,#1f5052,#08191c)}

/* 主舞台：中央棋盘、左右悬浮信息 */
.arena-ui .main-grid{
  position:absolute;inset:0;min-height:0;padding:70px 10px 318px;
  grid-template-columns:205px minmax(640px,1fr) 280px;gap:6px;
}
.arena-ui .panel,.arena-ui .arena-panel{
  border:0;border-radius:0;backdrop-filter:none;box-shadow:none;
}
.arena-ui .left-panel,.arena-ui .right-panel{
  align-self:start;height:calc(100vh - 352px);margin-top:14px;padding:8px;
  background:linear-gradient(90deg,#051014e8,#07161ad1 76%,transparent);
  overflow:visible;
}
.arena-ui .right-panel{background:linear-gradient(270deg,#051014e8,#07161ad1 76%,transparent)}
.arena-ui .panel:after{display:none}
.arena-ui .section-title{
  min-height:38px;margin:0 0 7px;padding:7px 9px;
  border:1px solid #6d5836;border-left:4px solid #c59d50;border-radius:2px;
  background:linear-gradient(90deg,#15282ceb,#081417e8);
  box-shadow:inset 0 0 0 1px #071012,0 4px 12px #0007;
}
.arena-ui .section-title b{font-size:17px;color:#f3d47e}.arena-ui .section-title span{font-size:10px;color:#73cbc7}
.arena-ui .visual-code{display:none}
.arena-ui .trait-list{max-height:calc(100vh - 325px)!important;padding:0 4px 0 0;gap:5px}
.arena-ui .trait{
  min-height:46px;padding:5px 7px;grid-template-columns:34px minmax(0,1fr) auto;
  border:1px solid #334347;border-left:3px solid #695d3f;border-radius:2px;
  background:linear-gradient(90deg,#0b171adf,#101f22cd);
  box-shadow:inset 0 1px #ffffff0b,0 3px 8px #0005;
  opacity:.73;filter:saturate(.65);
}
.arena-ui .trait:hover{opacity:1;transform:translateX(4px);border-color:#8d7548}
.arena-ui .trait.active{
  border-color:#cfaa5d!important;border-left-color:#ffe092!important;
  background:linear-gradient(90deg,#28443fd9,#112523e8)!important;
  box-shadow:inset 4px 0 #f1ca70,0 0 14px #3dc7ba3e!important;
}
.arena-ui .trait-icon{
  width:31px;height:31px;border:1px solid #9d814a;border-radius:3px;
  background:linear-gradient(145deg,#253b3d,#081114);color:#f4d77f;
}
.arena-ui .trait b{font-size:14px}.arena-ui .trait small{font-size:10px}.arena-ui .trait strong{font-size:13px;color:#f3cf77}

.arena-ui .arena-panel{
  position:relative;height:100%;padding:0 8px;display:flex;flex-direction:column;align-items:center;
  background:transparent;overflow:visible;
}
.arena-ui .arena-panel:before,.arena-ui .arena-panel:after{display:none}
.arena-ui .enemy-banner{
  position:fixed;z-index:24;left:calc(50% - 26vh*4/3 - 10px);top:72px;transform:translateX(-100%);
  width:220px;height:auto;min-height:68px;margin:0;padding:9px 12px;display:block;
  border:1px solid #74603b;border-radius:2px;
  background:linear-gradient(145deg,#14292ded,#061216f5);
  box-shadow:inset 0 0 0 1px #17383b,0 7px 18px #000b;
}
.arena-ui .enemy-banner>span{display:block;margin-bottom:5px;color:#a9bbb8;font-size:11px;letter-spacing:2px}
.arena-ui .enemy-banner b,.arena-ui .enemy-banner b strong,.arena-ui .enemy-banner b small{display:block}
.arena-ui .enemy-banner b strong{color:#ff9c84;font-size:18px;line-height:1.1}
.arena-ui .enemy-banner b small{margin-top:5px;color:#d7e2df;font-size:11px;line-height:1.35}
.arena-ui .attack-projectile{
  will-change:left,top,opacity,transform;backface-visibility:hidden;transform:translate3d(-50%,-50%,0) rotate(var(--angle));
}
.arena-ui .attack-projectile:before{
  content:"";position:absolute;right:65%;top:50%;width:34px;height:2px;transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,currentColor);opacity:.58;filter:blur(.4px);pointer-events:none;
}
.arena-ui .attack-projectile.rocket:before{width:42px;height:5px;background:linear-gradient(90deg,transparent,#ff6b27)}
.arena-ui .attack-projectile.pulse:before,.arena-ui .attack-projectile.gear:before{width:22px;background:linear-gradient(90deg,transparent,#64e6d2)}
.arena-ui .attack-projectile.ufo{width:26px;height:4px;background:linear-gradient(90deg,transparent,#65f7ff 45%,#fff);box-shadow:0 0 8px #65f7ff,0 0 18px #4b8dff}
.arena-ui .attack-projectile.ufo:after{border-left-color:#bffcff}
.arena-ui .damage-pop{
  position:absolute;z-index:60;width:max-content;min-width:36px;padding:1px 3px;text-align:center;
  transform:translate(calc(-50% + var(--drift-x)),calc(-50% + var(--rise-y))) scale(var(--pop-scale));
  font:900 21px/1 Consolas,"Microsoft YaHei",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.5px;
  pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 3px 2px #000c);
}
.arena-ui .damage-pop.damage-friendly{
  color:#fff;-webkit-text-stroke:2px #17b95d;
  paint-order:stroke fill;text-shadow:0 0 5px #18db6e,0 2px 2px #000;
}
.arena-ui .damage-pop.damage-received{
  color:#f0322d;-webkit-text-stroke:1.5px #fff;
  paint-order:stroke fill;text-shadow:0 0 5px #ff302b,0 2px 2px #000;
}
.arena-ui .sausage-drop{
  position:absolute;z-index:66;width:0;height:0;pointer-events:none;filter:drop-shadow(0 3px 3px #000a);
}
.arena-ui .sausage-icon{
  position:absolute;left:0;top:0;font:30px/1 "Segoe UI Emoji",sans-serif;transform-origin:center;will-change:transform,opacity;
}
.arena-ui .sausage-heal{
  position:absolute;left:0;top:0;width:max-content;color:#d8ffe1;-webkit-text-stroke:2px #0a8f45;
  paint-order:stroke fill;font:900 22px/1 Consolas,"Microsoft YaHei",sans-serif;text-shadow:0 0 8px #39ef7f,0 2px 2px #000;
  font-style:normal;will-change:transform,opacity;
}
.arena-ui .sausage-ring{
  position:absolute;left:0;top:0;width:44px;height:22px;border:3px solid #6dff9d;border-radius:50%;
  background:radial-gradient(ellipse,#77ff9d66 0 28%,transparent 65%);box-shadow:0 0 14px #3bff7faa,inset 0 0 9px #c8ffd9;
  will-change:transform,opacity;
}
.arena-ui .light-king-summon{
  position:absolute;z-index:68;width:86px;height:92px;transform:translate(-50%,-82%);pointer-events:auto;cursor:pointer;
  filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px #62ddff);will-change:opacity;
}
.arena-ui .light-king-summon b{
  position:absolute;inset:0;background-image:url("assets/hero-atlas-cutout-v3.png");background-size:800% 500%;background-repeat:no-repeat;
}
.arena-ui .light-king-summon i{
  position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:max-content;padding:2px 7px;border-radius:10px;
  color:#fffbd1;background:#09202dda;font:900 12px/1.2 "Microsoft YaHei",sans-serif;text-shadow:0 0 5px #66e8ff;font-style:normal;
}
.arena-ui .light-king-summon.enemy{filter:hue-rotate(285deg) drop-shadow(0 0 9px #ff7f9c) drop-shadow(0 0 18px #a84dff)}
.arena-ui .king-beam{
  position:absolute;z-index:67;height:7px;transform:translateY(-50%) rotate(var(--beam-angle));transform-origin:left center;pointer-events:none;
  border-radius:999px;background:linear-gradient(90deg,#fff,#8af8ff 28%,#fff6b2 72%,#ff8f50);box-shadow:0 0 7px #fff,0 0 16px #63eaff,0 0 28px #ffcf59;
}
.arena-ui .king-beam.enemy{filter:hue-rotate(285deg)}
.arena-ui .ufo-support{
  position:absolute;z-index:62;transform:translate(-50%,-50%);font:34px/1 "Segoe UI Emoji",sans-serif;pointer-events:auto;cursor:pointer;
  filter:drop-shadow(0 5px 3px #0009) drop-shadow(0 0 9px #6cf6ff);animation:ufoHover 1.15s ease-in-out infinite alternate;
}
.arena-ui .ufo-support.enemy{filter:hue-rotate(300deg) drop-shadow(0 5px 3px #0009) drop-shadow(0 0 9px #ff718e)}
.arena-ui .unit-token.summon-wolf .portrait-traits{display:none!important}
.arena-ui .unit-token.summon-wolf .unit-character{
  left:50%;bottom:7%;width:172%;height:138%;background-image:url("assets/wolf-summon-beast-v1.png")!important;
  background-size:contain!important;background-position:center bottom!important;background-repeat:no-repeat!important;
  filter:drop-shadow(0 7px 4px #000c) drop-shadow(0 0 9px #66dfffa8);
}
.arena-ui .summon-mark{
  position:absolute;z-index:42;right:-4px;top:12px;font-size:18px;filter:drop-shadow(0 2px 2px #000);
}
@keyframes ufoHover{from{transform:translate(-50%,-56%) rotate(-4deg)}to{transform:translate(-50%,-44%) rotate(4deg)}}
.arena-ui .unit-token.summon-wolf{cursor:pointer}
.arena-ui .cell:has(.deploy-summon-token){z-index:9}
.arena-ui .deploy-summon-token{
  position:absolute;z-index:10;inset:-5px;display:flex;align-items:flex-end;justify-content:center;
  overflow:visible;cursor:grab;transition:transform .16s,filter .16s;
}
.arena-ui .deploy-summon-token:hover{transform:translateY(-3px);filter:brightness(1.12)}
.arena-ui .deploy-summon-token.selected{filter:drop-shadow(0 0 9px #ffe277) drop-shadow(0 0 16px #ffe277)}
.arena-ui .deploy-summon-visual{position:relative;width:100%;height:100%;overflow:visible;transform:translateY(-13%)}
.arena-ui .deploy-summon-base{
  position:absolute;z-index:2;left:50%;bottom:2%;width:90%;height:30%;transform:translateX(-50%);
  border:3px solid #8be7f0;border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%,#b9fbff77 0 10%,transparent 38%),linear-gradient(180deg,#356e78 0 48%,#132c33 50% 100%);
  box-shadow:inset 0 3px 5px #ffffff35,inset 0 -7px 8px #0009,0 8px 6px #000b,0 0 13px #56dcea99;
}
.arena-ui .deploy-summon-base:after{
  content:"";position:absolute;left:10%;right:10%;bottom:-12%;height:35%;border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,#ffffff18,#12262c);border-bottom:2px solid #040809;
}
.arena-ui .deploy-summon-art{
  position:absolute;z-index:5;left:50%;bottom:7%;width:172%;height:138%;transform:translateX(-50%);
  background-repeat:no-repeat;background-position:center bottom;background-size:contain;
  filter:drop-shadow(0 7px 4px #000c) drop-shadow(0 0 9px #66dfffa8);pointer-events:none;
}
.arena-ui .deploy-wolf .deploy-summon-art{background-image:url("assets/wolf-summon-beast-v1.png")}
.arena-ui .deploy-ufo .deploy-summon-art{
  display:grid;place-items:center;width:112%;height:112%;bottom:8%;font:clamp(32px,4.1vh,58px)/1 "Segoe UI Emoji",sans-serif;
  animation:ufoDeployHover 1.15s ease-in-out infinite alternate;filter:drop-shadow(0 7px 4px #000b) drop-shadow(0 0 12px #6cf6ff);
}
.arena-ui .deploy-summon-token .healthbar{
  position:absolute;z-index:25;top:-5%;left:5%;width:90%;height:8px;border:1px solid #d9fff0;background:#152326;border-radius:6px;overflow:hidden;
}
.arena-ui .deploy-summon-token .healthbar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#23b85b,#7ee576);box-shadow:0 0 7px #35db70}
.arena-ui .invincible-mark{
  position:absolute;z-index:26;left:50%;top:-7%;transform:translateX(-50%);padding:1px 8px;border:1px solid #85f4ff;border-radius:10px;
  background:#071b20e8;color:#d8fdff;font:900 15px/1.15 Georgia,serif;text-shadow:0 0 8px #65eeff;box-shadow:0 2px 5px #000b,0 0 10px #46dfe477;
}
@keyframes ufoDeployHover{from{transform:translateX(-50%) translateY(-4px) rotate(-4deg)}to{transform:translateX(-50%) translateY(4px) rotate(4deg)}}
.arena-ui .summon-info-head{
  display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid #4f7779;
}
.arena-ui .summon-info-head>div{display:flex;flex-direction:column;gap:4px}
.arena-ui .summon-info-head strong{color:#fff0a8;font-size:20px;line-height:1.1}
.arena-ui .summon-info-head small{color:#99bdc0;font-size:12px;letter-spacing:1px}
.arena-ui .summon-info-art{
  position:relative;display:block;flex:0 0 92px;width:92px;height:78px;border:1px solid #5da5a9;border-radius:5px;
  background-color:#061418;box-shadow:inset 0 0 18px #3bd4da22,0 4px 10px #0009;overflow:hidden;
}
.arena-ui .summon-info-art.wolf{
  background-image:url("assets/wolf-summon-beast-v1.png");background-size:118% auto;background-position:center 54%;background-repeat:no-repeat;
}
.arena-ui .summon-info-art.ufo{
  display:grid;place-items:center;font:52px/1 "Segoe UI Emoji",sans-serif;background:radial-gradient(circle,#43cddf45,transparent 60%),#061418;
}
.arena-ui .summon-info-art.light-king b{
  position:absolute;inset:-8px;background-image:url("assets/hero-atlas-cutout-v3.png");background-size:800% 500%;background-repeat:no-repeat;
  filter:drop-shadow(0 0 8px #67e9ff);
}
.arena-ui .summon-number-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px;
}
.arena-ui .summon-number-grid span{
  display:flex;min-height:48px;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 3px;
  border:1px solid #38585b;border-radius:3px;background:#071316;color:#8fb0b3;font-size:11px;text-align:center;
}
.arena-ui .summon-number-grid b{color:#ecfbf7;font-size:17px;font-variant-numeric:tabular-nums}
.arena-ui .summon-hover-card,.arena-ui .summon-detail-card{padding:4px}
.arena-ui .hover-tooltip:has(.summon-hover-card){width:360px}

/* 全屏底图中的小型中央棋盘，交互层仍是严格 8×6 正方形网格 */
.arena-ui .board-stage{
  position:fixed;z-index:5;left:50%;top:5vh;transform:translateX(-50%);
  width:calc(52vh*4/3);height:52vh;aspect-ratio:4/3;margin:0;
  border:1px solid #79d3cc8a;border-radius:3px;background:transparent;
  box-shadow:0 0 0 2px #07141666,0 8px 24px #0008,0 0 24px #36aaa738;
  overflow:visible;isolation:isolate;
}
.arena-ui .board-stage:before{display:none}
.arena-ui .phase-banner{top:25%}
.arena-ui .battlefield{
  position:absolute!important;z-index:2;inset:0!important;
  width:100%!important;height:100%!important;min-height:0!important;aspect-ratio:4/3;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  grid-template-rows:repeat(6,minmax(0,1fr))!important;
  gap:0!important;padding:0!important;border:2px solid #6ac6c475!important;border-radius:2px!important;
  background:linear-gradient(180deg,#87394416 0 49.5%,#2b8b7b14 50.5% 100%)!important;
  box-shadow:inset 0 0 30px #06131442,0 0 12px #54cbc74a!important;
  overflow:hidden;
}
.arena-ui .battlefield:before{display:none}
.arena-ui .battlefield:after{
  content:"";display:block;position:absolute;z-index:1;left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,transparent,#f1ca708f 15% 85%,transparent);
  box-shadow:0 0 8px #e4bb65;pointer-events:none;
}
.arena-ui .board-stage .cell{
  aspect-ratio:1/1;z-index:2;border:1px solid #7ccbc557;border-radius:0;
  background:#05191a0c;box-shadow:inset 0 0 10px #0320250d;filter:none;
}
.arena-ui .board-stage .cell:nth-child(even){background:#0c333416}
.arena-ui .board-stage .cell.enemy-zone{border-color:#da81744b;background:#702a3112}
.arena-ui .board-stage .cell.player-zone{border-color:#5bd1ca66;background:#0e626018}
.arena-ui .board-stage .cell.player-zone:hover{
  background:#40d8cb38;box-shadow:inset 0 0 0 2px #75eee4,inset 0 0 20px #38ccc259;
}
.arena-ui .cell:nth-child(8n+1):before{display:none}
.arena-ui .board-caption{
  position:fixed;z-index:21;left:calc(50% + 26vh*4/3 + 10px);top:calc(58vh - 10px);transform:none;
  width:118px;height:20px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;pointer-events:none;
  color:#d3867d;font-size:11px;text-shadow:0 1px #000;
}
.arena-ui .board-caption>span{display:none}
.arena-ui .board-caption b{
  width:100%;padding:2px 9px;border:1px solid #b99a5b;border-radius:2px;text-align:center;
  background:#071418e8;color:#ffe08b;box-shadow:0 2px 8px #0008;
}

/* 候补席贴住棋盘下沿，类似棋子托盘 */
.arena-ui .bench-inline{
  position:fixed;z-index:18;left:50%;top:calc(58vh + 14px);bottom:auto;transform:translateX(-50%);flex:none;
  width:calc(52vh*4/3)!important;height:auto!important;margin:0!important;padding:5px 6px 7px!important;
  border:1px solid #8e7446!important;border-top:2px solid #c9a35a!important;border-radius:3px!important;
  background:linear-gradient(180deg,#132a2edb,#061115f2)!important;
  box-shadow:inset 0 0 0 1px #061013,0 8px 20px #000b!important;
  backdrop-filter:blur(5px);
}
.arena-ui .bench-label{height:21px;padding:0 3px}.arena-ui .bench-label b{font-size:13px;color:#f3d078}
.arena-ui .bench-label span,.arena-ui .bench-label em{font-size:10px}
.arena-ui .bench{height:auto!important;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px!important;align-items:stretch}
.arena-ui .bench-slot{
  width:100%;height:auto;aspect-ratio:1/1;border:1px solid #496064!important;border-radius:3px!important;
  background:linear-gradient(145deg,#26383b,#10191c)!important;
  box-shadow:inset 0 0 0 1px #071113,0 2px 5px #0008!important;
}
.arena-ui .bench-slot:before{
  content:"+";inset:0;border:0;border-radius:0;display:grid;place-items:center;
  color:#54777a!important;font:400 18px/1 Consolas,monospace;
}
.arena-ui .bench-slot:hover{border-color:#6fd8d2!important;background:linear-gradient(145deg,#315457,#13292c)!important}
.arena-ui .battle-controls{
  position:fixed;z-index:22;left:calc(50% + 36vh);right:auto;top:calc(58vh + 18px);bottom:auto;height:34px;gap:6px;
}
.arena-ui .battle-controls button{
  padding:7px 13px;border:1px solid;border-radius:2px;box-shadow:0 3px 8px #0008;
  font-size:12px;
}

/* 右侧八人战局榜：头像悬停可侦察阵容 */
.arena-ui .right-panel .section-title{border-left:1px solid #6d5836;border-right:4px solid #c59d50}
.arena-ui .contestant-list{display:grid;gap:3px;margin-bottom:7px}
.arena-ui .contestant-row{
  position:relative;display:grid;grid-template-columns:20px 38px minmax(0,1fr) 40px;align-items:center;gap:7px;
  min-height:45px;padding:3px 6px;border:1px solid #33494c;border-radius:3px;
  background:linear-gradient(90deg,#102226eb,#071216ed);box-shadow:inset 0 1px #ffffff0a;color:#dbe7e6;cursor:help;
}
.arena-ui .contestant-row:hover{border-color:#79d7d0;background:linear-gradient(90deg,#17383bed,#092023f2);transform:translateX(-3px)}
.arena-ui .contestant-row>em{font:900 14px/1 Consolas,sans-serif;color:#8ca19f;text-align:center}
.arena-ui .contestant-row>div{min-width:0}.arena-ui .contestant-row>div b,.arena-ui .contestant-row>div small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.arena-ui .contestant-row>div b{font-size:14px;color:#eef7f4}.arena-ui .contestant-row>div small{font-size:10px;color:#9ab0ae}
.arena-ui .contestant-row>strong{font:900 14px/1 Consolas,sans-serif;color:#7ff1bd;text-align:right}
.arena-ui .contestant-row.is-player{border-color:#c9a55d;background:linear-gradient(90deg,#3c321dea,#111b1ded)}
.arena-ui .contestant-row.is-player>div b{color:#ffe18a}
.arena-ui .contestant-row.current-opponent{border-color:#ef7f70;box-shadow:inset 3px 0 #ef6c5b,0 0 10px #ef5d4e4d}
.arena-ui .contestant-row.current-opponent:after{content:"对手";position:absolute;right:39px;top:2px;color:#ff8a79;font-size:8px}
.arena-ui .contestant-row.eliminated{filter:grayscale(1);opacity:.45}.arena-ui .contestant-row.eliminated>strong{color:#929c9c}
.arena-ui .contestant-avatar{position:relative;width:30px;height:30px;border:1px solid #61777a;border-radius:50%;overflow:hidden;background:radial-gradient(circle,#29484b,#071114)}
.arena-ui .contestant-piece{position:absolute;inset:-5px;background-image:url("assets/hero-atlas-cutout-v3.png");background-size:800% 500%;background-repeat:no-repeat}
.arena-ui .contestant-piece.sprite-legend{background-image:url("assets/legend-atlas-cutout-v3.png");background-size:200% 200%}
.arena-ui .contestant-initial{display:grid;place-items:center;width:100%;height:100%;font-weight:900;color:#f0cf79}
.arena-ui .unit-title{min-height:29px;margin-bottom:5px;padding:4px 8px}
.arena-ui .right-panel .selected-card{
  min-height:125px;padding:7px;border:1px solid #6f5c39;border-radius:3px;
  background:linear-gradient(145deg,#10262ae8,#061115ef);
  box-shadow:inset 0 0 0 1px #0b2023,0 5px 15px #0007;
}
.arena-ui .detail-portrait{border-radius:4px;border-color:#c6a255}
.arena-ui .detail-portrait.sprite-regular,.arena-ui .hover-portrait.sprite-regular,.arena-ui .trait-roster-portrait.sprite-regular{
  background-image:url("assets/hero-atlas-cutout-v3.png")!important;background-size:800% 500%!important;background-repeat:no-repeat!important;
}
.arena-ui .detail-portrait.sprite-legend,.arena-ui .hover-portrait.sprite-legend,.arena-ui .trait-roster-portrait.sprite-legend{
  background-image:url("assets/legend-atlas-cutout-v3.png")!important;background-size:200% 200%!important;background-repeat:no-repeat!important;
}
.arena-ui .detail-portrait,.arena-ui .hover-portrait,.arena-ui .trait-roster-portrait{
  background-color:#102226!important;filter:drop-shadow(0 4px 3px #0009);background-clip:padding-box;
}
.arena-ui .skill-box{background:#061115d9;border-color:#40575a;border-left-color:#c5a052}
.arena-ui .log-title{margin-top:8px}
.arena-ui .battle-log{
  max-height:calc(100vh - 535px);padding:7px;border:1px solid #384d50;border-radius:2px;
  background:#030c0fe6;font-size:11px;line-height:1.5;
}

.arena-ui .scout-head{display:flex;justify-content:space-between;gap:18px;padding-bottom:9px;border-bottom:1px solid #426063}
.arena-ui .scout-head strong,.arena-ui .scout-head span{display:block}.arena-ui .scout-head strong{font-size:22px;color:#ffe08a}.arena-ui .scout-head span{font-size:13px;color:#91aaa8}
.arena-ui .scout-head>b{color:#7ef0bb;font-size:16px}.arena-ui .scout-power{padding:9px 0;color:#a9bdbb;font-size:13px}.arena-ui .scout-power b{color:#fff}
.arena-ui .scout-resources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:9px 0}
.arena-ui .scout-resources span{padding:7px;border:1px solid #3e585b;background:#091a1ef2;color:#8fa8a6;font-size:11px;text-align:center}
.arena-ui .scout-resources b{display:block;margin-top:4px;color:#ffe083;font-size:15px}
.arena-ui .scout-roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.arena-ui .scout-unit{position:relative;min-width:0;padding:2px 2px 4px;border:1px solid #3f5558;border-radius:3px;background:#071519;text-align:center}
.arena-ui .scout-unit-portrait{display:block;width:56px;height:56px;margin:auto;background-image:url("assets/hero-atlas-cutout-v3.png");background-size:800% 500%;background-repeat:no-repeat}
.arena-ui .scout-unit-portrait.sprite-legend{background-image:url("assets/legend-atlas-cutout-v3.png");background-size:200% 200%}
.arena-ui .scout-unit b{display:block;overflow:hidden;color:#e7efee;font-size:11px;white-space:nowrap;text-overflow:ellipsis}.arena-ui .scout-unit em{color:#ffe474;font-size:12px}
.arena-ui .scout-traits{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}.arena-ui .scout-traits>span{padding:3px 5px;border:1px solid #6c5c3c;border-radius:2px;background:#172327;color:#dbe6e4;font-size:10px}.arena-ui .scout-traits b{color:#ffe07f}
.arena-ui .scout-empty{grid-column:1/-1;color:#718886;font-size:11px}
.arena-ui .hover-tooltip:has(.scout-roster){width:520px;max-height:calc(100vh - 20px);overflow:auto}
.arena-ui .result-rank{margin:10px auto;padding:8px 22px;border:1px solid #d5ac57;border-radius:3px;background:#241c0d;color:#ffe184;font-size:28px;font-weight:900}

/* 底部：横向卡牌商店 HUD */
.arena-ui .bottom-dock{
  position:absolute;z-index:40;left:50%;bottom:0;transform:translateX(-50%);
  width:min(1480px,calc(100vw - 240px));height:310px!important;padding:9px 12px 12px;
  grid-template-columns:174px minmax(760px,1fr);gap:10px;
  border:1px solid #9b7c47;border-bottom:0;border-radius:9px 9px 0 0;
  background:linear-gradient(180deg,#153039f5 0,#08161bf8 15%,#030b0efb 100%);
  box-shadow:inset 0 2px #d0aa5e,inset 0 0 0 2px #071114,0 -10px 28px #000a,0 0 35px #2da4a338;
  clip-path:polygon(2% 0,98% 0,100% 12%,100% 100%,0 100%,0 12%);
}
.arena-ui .shop-wrap{
  padding:4px 7px 7px;border:1px solid #5d5137;border-radius:3px;
  background:linear-gradient(180deg,#102428,#050e11);
  box-shadow:inset 0 0 0 1px #020708;
}
.arena-ui .player-economy-bar{
  height:40px;display:grid;grid-template-columns:minmax(260px,1fr) minmax(150px,190px) minmax(240px,1fr);
  align-items:stretch;gap:8px;margin-bottom:4px;
}
.arena-ui .player-economy-left{display:grid;grid-template-columns:minmax(105px,.72fr) minmax(160px,1.28fr);gap:5px;min-width:0}
.arena-ui .player-stat{
  padding:4px 7px;border:1px solid #3e5557;border-radius:2px;
  background:linear-gradient(#152b2e,#071214);
}
.arena-ui .player-stat span{font-size:11px}.arena-ui .player-stat b{font-size:15px}
.arena-ui .gold-stat{
  position:relative;z-index:2;justify-content:center;padding:2px 15px;border-color:#c29b47;
  background:linear-gradient(180deg,#3d321a,#17130a 70%);box-shadow:inset 0 1px #ffe39a73,0 0 12px #e6b94d52;
  clip-path:polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%);
}
.arena-ui .gold-stat span{position:absolute;left:11px;top:3px;color:#bca66f;font-size:9px}
.arena-ui .gold-stat b{margin:0!important;color:#ffe17a!important;font-size:25px!important;line-height:1;text-shadow:0 2px 2px #000,0 0 12px #f6c64d}
.arena-ui .gold-stat b em{font-size:29px!important}
.arena-ui .hp-stat{justify-content:flex-end;gap:12px;padding:4px 10px;border-color:#74433d;background:linear-gradient(180deg,#321d1c,#120c0c)}
.arena-ui .hp-stat span{margin-right:auto;color:#d7aaa2}.arena-ui .hp-stat b{margin-left:0;color:#ff8c75;font-size:19px}
.arena-ui .hp-stat>i{left:10px;right:10px;height:5px}
.arena-ui .shop-head{height:29px;padding:1px 3px}.arena-ui .shop-head b{font-size:16px;color:#f0cf78}
.arena-ui .shop-head small,.arena-ui .shop-head button,.arena-ui .sell-hint{font-size:9px}
.arena-ui .shop-head button{padding:3px 7px;border:1px solid #66573a;border-radius:2px;background:#102327}
.arena-ui .shop{height:210px;gap:8px;perspective:none}
.arena-ui .shop-card{
  display:block;width:100%;height:100%;min-height:0;border:0!important;border-radius:2px;
  box-shadow:inset 0 0 0 1px #ffffff20,0 3px 8px #000a;
  transform:none;overflow:hidden;
}
.arena-ui .shop-card:before{inset:2px;border:0!important;border-radius:0}
.arena-ui .shop-card:hover:not(:disabled){transform:translateY(-5px);box-shadow:inset 0 0 0 1px #ffffff38,0 8px 16px #000d}
.arena-ui .shop-portrait{
  position:absolute;z-index:2;left:auto;right:-2%;top:calc(50% - 18px);bottom:auto;transform:translateY(-50%);isolation:isolate;
  width:72%!important;height:auto!important;min-height:0!important;max-width:none!important;max-height:none!important;
  aspect-ratio:1/1!important;border:0;border-radius:0;background:none!important;box-shadow:none;overflow:visible;
}
.arena-ui .shop-portrait .unit-character{
  bottom:-4%;width:112%!important;height:112%!important;aspect-ratio:1/1!important;
  filter:drop-shadow(0 7px 4px #000b) drop-shadow(0 0 5px #ffffff2b);
}
.arena-ui .shop-portrait .chess-piece-base{bottom:1%;width:74%;height:24%}
.arena-ui .shop-traits{
  position:absolute;z-index:13;left:8px;top:35px;width:47%;display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  pointer-events:none;
}
.arena-ui .shop-traits>span{
  display:flex;align-items:center;max-width:100%;min-height:27px;padding:3px 7px 3px 3px;border-radius:3px;
  background:linear-gradient(90deg,#061014e8,#0b1719bf 78%,transparent);color:#f0f5f4;
  text-shadow:0 2px 3px #000;font-size:13px;white-space:nowrap;
}
.arena-ui .shop-traits i{
  display:grid;place-items:center;flex:0 0 23px;width:23px;height:23px;margin-right:5px;border:1px solid #8e815f;border-radius:50%;
  background:#101b1e;color:#f7d77d;font-style:normal;font-size:14px;box-shadow:0 2px 4px #000a;
}
.arena-ui .shop-traits .race i{border-color:#5dabb0;color:#8be9e7}
.arena-ui .shop-traits b{overflow:hidden;text-overflow:ellipsis;font-size:13px}
.arena-ui .shop-footer{
  position:absolute;z-index:16;left:0;right:0;bottom:0;height:36px;display:flex;align-items:center;gap:6px;padding:0 8px;
  border-top:1px solid #ffffff38;background:linear-gradient(90deg,#081214f5,#102327f0);color:#fff;
  box-shadow:0 -5px 12px #0008;text-shadow:0 2px 3px #000;pointer-events:none;
}
.arena-ui .shop-name{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:16px;white-space:nowrap}
.arena-ui .shop-cost{
  position:static!important;z-index:auto;margin-left:auto;display:flex;min-width:0;height:auto;padding:0!important;border:0!important;border-radius:0!important;
  background:none!important;color:#ffe18a!important;font-size:16px!important;white-space:nowrap;box-shadow:none!important;
}
.arena-ui .shop-card .owned-mark,.arena-ui .shop-card .upgrade-arrow{top:5px}
.arena-ui .shop-card .owned-mark,.arena-ui .shop-card .upgrade-arrow{border:0!important}
.arena-ui .shop-card.owned,.arena-ui .shop-card.upgrade-ready{outline:0!important}
.arena-ui .shop-actions{
  align-self:end;height:212px;display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;
}
.arena-ui .economy-btn{
  align-self:stretch!important;width:100%;height:auto!important;border:1px solid;border-radius:3px;
  box-shadow:inset 0 1px #ffffff4f,0 5px 13px #000a;
}
.arena-ui .economy-btn span{font-size:13px!important}.arena-ui .economy-btn b{font-size:16px!important}.arena-ui .economy-btn small{font-size:9px!important}
.arena-ui .xp-action{background:linear-gradient(155deg,#176f72,#0b353c);border-color:#54d2cf}
.arena-ui .reroll-btn{background:linear-gradient(155deg,#9a5c2f,#4b291b);border-color:#db9b57}

/* 棋子与浮层保持清晰、游戏化 */
.arena-ui .unit-portrait{border-radius:50%;box-shadow:0 0 0 2px #071013,0 4px 10px #000c,0 0 11px #49c5c35c}
.arena-ui .unit-nameplate{bottom:-4px;border-radius:2px;background:#061115ed;border-color:#6b684e}

/* 场上与候补席：费用色和星级同时可见 */
.arena-ui .unit-portrait,.arena-ui .mini-portrait{position:relative;overflow:hidden}
.arena-ui .unit-quality,.arena-ui .unit-star-level{
  position:absolute;z-index:12;top:2px;display:grid;place-items:center;height:18px;padding:0 4px;
  border:1px solid #ffffffb8;border-radius:3px;color:#fff;font:900 10px/1 "Microsoft YaHei",sans-serif;
  text-shadow:0 1px 2px #000;box-shadow:0 2px 5px #000b;pointer-events:none;
}
.arena-ui .unit-quality{left:2px;min-width:23px}.arena-ui .unit-star-level{right:2px;min-width:23px;background:#101719e8;color:#ffe783;border-color:#d7b75c}
.arena-ui .quality-1{background:#9aa7aa;color:#172024}.arena-ui .quality-2{background:#2fa85c}.arena-ui .quality-3{background:#327fd0}.arena-ui .quality-4{background:#884fc5}.arena-ui .quality-5{background:#e4a72d;color:#2a1a04}
.arena-ui .star-level-2{color:#bce8ff;border-color:#66bce8;background:#12344be8}.arena-ui .star-level-3{color:#fff0a0;border-color:#f2c854;background:#4b3409ed;box-shadow:0 0 8px #ffd34d}
.arena-ui .unit-token.rarity-1,.arena-ui .bench-slot.rarity-1{--unit-quality:#aeb9bc}
.arena-ui .unit-token.rarity-2,.arena-ui .bench-slot.rarity-2{--unit-quality:#45cc74}
.arena-ui .unit-token.rarity-3,.arena-ui .bench-slot.rarity-3{--unit-quality:#4b9cf0}
.arena-ui .unit-token.rarity-4,.arena-ui .bench-slot.rarity-4{--unit-quality:#a767e8}
.arena-ui .unit-token.rarity-5,.arena-ui .bench-slot.rarity-5{--unit-quality:#f1b53b}
.arena-ui .unit-token .unit-nameplate{border-left:4px solid var(--unit-quality,#aeb9bc)}
.arena-ui .bench-slot[class*="rarity-"]{border-bottom:3px solid var(--unit-quality)!important}

/* 透明人物层 + 固定圆形底座：允许人物向上溢出单格，棋盘整体仍负责外缘裁切 */
.arena-ui .unit-token,.arena-ui .unit-visual,.arena-ui .unit-portrait,
.arena-ui .bench-slot,.arena-ui .mini-unit,.arena-ui .mini-portrait{overflow:visible!important}
.arena-ui .battlefield{overflow:hidden!important}
.arena-ui .cell:has(.unit-token){z-index:8}
.arena-ui .unit-portrait,.arena-ui .mini-portrait{
  isolation:isolate;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
}
.arena-ui .unit-character{
  position:absolute;z-index:5;left:50%;bottom:11%;width:142%;height:142%;transform:translateX(-50%);
  display:block;background-image:url("assets/hero-atlas-cutout-v3.png");background-size:800% 500%;
  background-repeat:no-repeat;filter:drop-shadow(0 7px 4px #000b) drop-shadow(0 2px 2px #0008);
  pointer-events:none;transform-origin:50% 82%;
}
.arena-ui .unit-character.sprite-legend{background-image:url("assets/legend-atlas-cutout-v3.png");background-size:200% 200%}
.arena-ui .mini-portrait .unit-character{bottom:10%;width:126%;height:126%;filter:drop-shadow(0 5px 3px #000c)}
.arena-ui .chess-piece-base{
  position:absolute;z-index:2;left:50%;bottom:2%;width:90%;height:30%;transform:translateX(-50%);
  border:3px solid var(--unit-quality,#aeb9bc);border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%,#ffffff4d 0 8%,transparent 34%),linear-gradient(180deg,var(--piece-top,#435659) 0 48%,var(--piece-side,#182427) 50% 100%);
  box-shadow:inset 0 3px 5px #ffffff2e,inset 0 -7px 8px #0009,0 7px 5px #000a,0 10px 13px #0007;
  pointer-events:none;
}
.arena-ui .chess-piece-base:before{
  content:"";position:absolute;inset:7% 8% 28%;border:1px solid #ffffff45;border-radius:50%;
  background:radial-gradient(ellipse at 50% 42%,var(--piece-glow,#587174),var(--piece-top,#34484b) 68%,#101719 72%);
  box-shadow:inset 0 2px 7px #ffffff25,inset 0 -5px 8px #0009;
}
.arena-ui .chess-piece-base:after{
  content:"";position:absolute;left:10%;right:10%;bottom:-12%;height:35%;border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,#ffffff18,var(--piece-side,#182427));border-bottom:2px solid #05090a;opacity:.95;
}
.arena-ui .race-sausage{--piece-top:#8b5638;--piece-side:#3c2118;--piece-glow:#c47b4e}
.arena-ui .race-tribe{--piece-top:#814374;--piece-side:#351a38;--piece-glow:#d56bc6}
.arena-ui .race-light{--piece-top:#397788;--piece-side:#18323c;--piece-glow:#65d5e9}
.arena-ui .race-ystar{--piece-top:#4b91a4;--piece-side:#1d3f4b;--piece-glow:#7eeeff}
.arena-ui .race-wolf{--piece-top:#646d72;--piece-side:#2b3034;--piece-glow:#aeb8bc}
.arena-ui .race-ancient{--piece-top:#91713e;--piece-side:#3e2e1d;--piece-glow:#d8aa57}
.arena-ui .unit-token.star-1 .chess-piece-base,.arena-ui .bench-slot.star-1 .chess-piece-base{border-color:#aeb9bc}
.arena-ui .unit-token.star-2 .chess-piece-base,.arena-ui .bench-slot.star-2 .chess-piece-base{border-color:#5ab8f5;box-shadow:inset 0 3px 5px #ffffff2e,inset 0 -7px 8px #0009,0 7px 5px #000a,0 0 14px #48aefa}
.arena-ui .unit-token.star-3 .chess-piece-base,.arena-ui .bench-slot.star-3 .chess-piece-base{border-color:#f0c548;box-shadow:inset 0 3px 5px #ffffff3d,inset 0 -7px 8px #0009,0 7px 5px #000a,0 0 18px #ffd14f;animation:pieceBaseGlow 1.1s ease-in-out infinite alternate}
.arena-ui .unit-token.star-3 .unit-portrait{animation:none}
.arena-ui .unit-token.melee-attacking .unit-portrait{animation:meleeLunge .32s cubic-bezier(.2,.8,.25,1)}
.arena-ui .unit-token.cast-attacking .unit-portrait{animation:spellCast .42s ease-out}
.arena-ui .unit-token.hit-react .unit-portrait{animation:hitReact .25s ease-out}
.arena-ui .unit-visual .healthbar{top:-31%;z-index:25}
.arena-ui .unit-visual .manabar{top:calc(-31% + 9px);z-index:25}
.arena-ui .unit-quality,.arena-ui .unit-star-level{z-index:18}
.arena-ui .portrait-traits{z-index:18}
.arena-ui .mini-name{z-index:20}
.arena-ui .unit-token .unit-nameplate,.arena-ui .bench-slot .mini-name{display:none!important}

/* 底座前沿信息行：费用｜星级｜职业与种族 */
.arena-ui .unit-quality,.arena-ui .unit-star-level{
  top:auto;bottom:-3px;height:17px;min-width:21px;padding:0 3px;border-radius:3px;font-size:9px;
}
.arena-ui .unit-quality{left:1px}.arena-ui .unit-star-level{left:24px;right:auto}
.arena-ui .unit-portrait .portrait-traits,.arena-ui .mini-portrait .portrait-traits{
  right:1px;bottom:-3px;gap:1px;flex-direction:row-reverse;flex-wrap:nowrap;
}
.arena-ui .unit-portrait .portrait-traits i,.arena-ui .mini-portrait .portrait-traits i{
  width:15px;height:15px;font-size:10px;border-radius:2px;
}

/* 第一排敌军使用安全构图，完整留在棋盘上边界内 */
.arena-ui .cell:nth-child(-n+8) .unit-token.enemy .unit-character{
  top:-4%;bottom:auto;width:112%;height:112%;
}
.arena-ui .cell:nth-child(-n+8) .unit-token.enemy.summon-wolf .unit-character{
  top:0;bottom:auto;width:148%;height:118%;background-position:center bottom!important;
}
.arena-ui .cell:nth-child(-n+8) .unit-token.enemy .chess-piece-base{width:84%;height:27%;bottom:2%}
.arena-ui .cell:nth-child(-n+8) .unit-token.enemy .healthbar{top:1px}
.arena-ui .cell:nth-child(-n+8) .unit-token.enemy .manabar{top:10px}

/* 棋盘棋子整体重心上移：允许顶部突出，底座与信息行完整收进格子 */
.arena-ui .unit-token .unit-visual{transform:translateY(-13%);transform-origin:50% 100%}
.arena-ui .cell:nth-child(-n+8) .unit-token.enemy .unit-visual{transform:translateY(0)}

/* 战场星级以纯星星数量显示，并紧贴血条上方 */
.arena-ui .unit-token .unit-star-level{
  top:calc(-31% - 25px);bottom:auto;left:50%;right:auto;transform:translateX(-50%);
  width:auto;min-width:28px;height:22px;padding:0 7px;border:2px solid #ead06f;border-radius:12px;
  background:linear-gradient(180deg,#263237f2,#071014f5)!important;
  color:#fff0a0;font-size:17px;letter-spacing:1px;text-shadow:0 2px 2px #000,0 0 9px #ffd548;box-shadow:0 2px 5px #000d,0 0 10px #e8bb42a6;
}
.arena-ui .unit-token .unit-star-level.star-level-2{color:#d8f4ff;border-color:#72cfff;background:linear-gradient(180deg,#173b55f5,#07131cf5)!important;text-shadow:0 2px 2px #000,0 0 10px #52c4ff;box-shadow:0 2px 5px #000d,0 0 13px #49bdf0}
.arena-ui .unit-token .unit-star-level.star-level-3{color:#fff5a5;border-color:#ffd75a;background:linear-gradient(180deg,#5b430ef5,#171003f5)!important;text-shadow:0 2px 2px #000,0 0 11px #ffcf31;box-shadow:0 2px 5px #000d,0 0 17px #ffca34;animation:starBadgePulse 1s ease-in-out infinite alternate}
.arena-ui .cell:nth-child(-n+8) .unit-token.enemy .unit-star-level{top:-3px}

/* 候补席星级固定到角色头顶，不再占用底座信息行 */
.arena-ui .bench-slot .unit-star-level{
  top:-30%;bottom:auto;left:50%;right:auto;transform:translateX(-50%);
  width:auto;min-width:28px;height:22px;padding:0 7px;border:2px solid #ead06f;border-radius:12px;
  background:linear-gradient(180deg,#263237f2,#071014f5)!important;
  color:#fff0a0;font-size:17px;letter-spacing:1px;text-shadow:0 2px 2px #000,0 0 9px #ffd548;box-shadow:0 2px 5px #000d,0 0 11px #e8bb42a6;
}
.arena-ui .bench-slot .unit-star-level.star-level-2{color:#d8f4ff;border-color:#72cfff;background:linear-gradient(180deg,#173b55f5,#07131cf5)!important;text-shadow:0 2px 2px #000,0 0 10px #52c4ff;box-shadow:0 2px 5px #000d,0 0 13px #49bdf0}
.arena-ui .bench-slot .unit-star-level.star-level-3{color:#fff5a5;border-color:#ffd75a;background:linear-gradient(180deg,#5b430ef5,#171003f5)!important;text-shadow:0 2px 2px #000,0 0 11px #ffcf31;box-shadow:0 2px 5px #000d,0 0 17px #ffca34;animation:starBadgePulse 1s ease-in-out infinite alternate}
.arena-ui .detail-head .stars,.arena-ui .hover-stars{
  display:inline-block;padding:1px 5px;border:1px solid #d8b84f;border-radius:9px;background:#0a1114;color:#ffe477;font-size:15px;letter-spacing:1px;text-shadow:0 0 8px #ffc52f;box-shadow:0 0 7px #d9ac326b;
}
.arena-ui .hover-stars.star-level-2{color:#bcecff;border-color:#62bde9;text-shadow:0 0 8px #49baf0}.arena-ui .hover-stars.star-level-3{color:#fff29a;border-color:#ffd04a;text-shadow:0 0 10px #ffcc32}
@keyframes starBadgePulse{to{filter:brightness(1.22);transform:translateX(-50%) scale(1.08);box-shadow:0 2px 6px #000d,0 0 23px #ffd13d}}

/* 升星瞬间：持续 2 秒的战术光柱、扩散环与星芒 */
.arena-ui .unit-token.upgrade-effect .unit-visual:before,
.arena-ui .bench-slot.upgrade-effect .mini-unit:before{
  content:"";position:absolute;z-index:3;left:50%;bottom:-16%;width:145%;height:190%;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent 8%,#fff6ae38 27%,#fffbd4c9 50%,#ffcf4f45 73%,transparent 92%);
  filter:blur(2px);mix-blend-mode:screen;pointer-events:none;animation:upgradeBeam2s 2s ease-out both;
}
.arena-ui .unit-token.upgrade-effect .unit-visual:after,
.arena-ui .bench-slot.upgrade-effect .mini-unit:after{
  content:"★ 升星 ★";position:absolute;z-index:30;left:50%;top:-54%;width:185%;height:185%;display:flex;align-items:flex-start;justify-content:center;
  transform:translateX(-50%) scale(.25);border:3px solid #ffe372;border-radius:50%;color:#fff3a0;
  font:900 15px/1 "Microsoft YaHei",sans-serif;letter-spacing:1px;text-shadow:0 1px 2px #000,0 0 10px #ffc928;
  box-shadow:0 0 8px #fff6b2,inset 0 0 15px #ffe16c,0 0 28px #ffc52f;pointer-events:none;animation:upgradeRing2s 2s cubic-bezier(.16,.75,.2,1) both;
}
.arena-ui .unit-token.upgrade-effect .unit-character,
.arena-ui .bench-slot.upgrade-effect .unit-character{animation:upgradeCharacter2s 2s ease-out both}
@keyframes upgradeBeam2s{0%{opacity:0;transform:translateX(-50%) scaleX(.15)}12%{opacity:1;transform:translateX(-50%) scaleX(1)}72%{opacity:.9}100%{opacity:0;transform:translateX(-50%) scaleX(.65)}}
@keyframes upgradeRing2s{0%{opacity:0;transform:translateX(-50%) scale(.18) rotate(-25deg)}12%{opacity:1}58%{opacity:1;transform:translateX(-50%) scale(.88) rotate(5deg)}100%{opacity:0;transform:translateX(-50%) scale(1.18) rotate(12deg)}}
@keyframes upgradeCharacter2s{0%{filter:brightness(1) drop-shadow(0 7px 4px #000b)}18%{filter:brightness(2) drop-shadow(0 0 13px #fff4ad)}55%{filter:brightness(1.35) drop-shadow(0 0 9px #ffd34d)}100%{filter:brightness(1) drop-shadow(0 7px 4px #000b)}}
@keyframes pieceBaseGlow{to{filter:brightness(1.18);box-shadow:inset 0 3px 5px #ffffff4d,inset 0 -7px 8px #0009,0 7px 5px #000a,0 0 25px #ffe16a}}

/* 左侧羁绊：0 不渲染；未激活灰色；激活档位依次为铜、银、金 */
.arena-ui .trait.pending{
  opacity:.88;filter:saturate(.2);border-color:#596064!important;border-left-color:#737b7e!important;
  background:linear-gradient(90deg,#343a3ce8,#1a2022e8)!important;
  box-shadow:inset 4px 0 #747d80,0 3px 8px #0006!important;
}
.arena-ui .trait.pending .trait-icon{border-color:#747b7d;background:linear-gradient(145deg,#3d4345,#151a1c);color:#aeb4b5}
.arena-ui .trait.pending strong{color:#c1c6c7}
.arena-ui .trait.active:after{content:""!important}
.arena-ui .trait.active.tier-bronze{border-color:#b9773e!important;border-left-color:#d59150!important;background:linear-gradient(90deg,#54351fe8,#211b17ed)!important;box-shadow:inset 4px 0 #c77f40,0 0 15px #b86f3148!important}
.arena-ui .trait.active.tier-bronze .trait-icon{border-color:#bd7a41;color:#ffd0a2}.arena-ui .trait.active.tier-bronze strong{color:#e6a565}
.arena-ui .trait.active.tier-silver{border-color:#aebcc2!important;border-left-color:#e1edf0!important;background:linear-gradient(90deg,#3e4a4ee8,#192124ed)!important;box-shadow:inset 4px 0 #cbd8dc,0 0 16px #b9dae050!important}
.arena-ui .trait.active.tier-silver .trait-icon{border-color:#bbc8cc;color:#eefcff}.arena-ui .trait.active.tier-silver strong{color:#e2edf0}
.arena-ui .trait.active.tier-gold{border-color:#d4aa4f!important;border-left-color:#ffe08a!important;background:linear-gradient(90deg,#59451de8,#241d12ed)!important;box-shadow:inset 4px 0 #f0c75c,0 0 18px #e1b13e59!important}
.arena-ui .trait.active.tier-gold .trait-icon{border-color:#e0b657;color:#fff0a9}.arena-ui .trait.active.tier-gold strong{color:#ffe287}
.arena-ui .trait.active.tier-prismatic{
  border-color:#8ef4ed!important;border-left-color:#fff4a8!important;
  background:linear-gradient(90deg,#234f55ed,#3f285ced 48%,#60451fed)!important;
  box-shadow:inset 4px 0 #a7fff3,0 0 21px #91eaff73,0 0 10px #ffd77855!important;
}
.arena-ui .trait.active.tier-prismatic .trait-icon{border-color:#c8fff7;color:#fff7b0;box-shadow:0 0 12px #8ff8ed88}
.arena-ui .trait.active.tier-prismatic strong{color:#fff2a8;text-shadow:0 0 7px #8df8ef}
.arena-ui .hover-tooltip{
  border:1px solid #b39453;border-radius:3px;
  background:linear-gradient(145deg,#10282deF,#041013f5);
  box-shadow:inset 0 0 0 1px #17383c,0 15px 38px #000e;
}
.arena-ui .modal{background:#02080bd1;backdrop-filter:blur(9px)}
.arena-ui.starter-confirming{overflow:hidden}
.arena-ui.starter-confirming .game-shell{
  filter:brightness(.08) saturate(.3) blur(8px);
  pointer-events:none;
  user-select:none;
}
.arena-ui #startModal{
  z-index:1000;
  background:rgba(1,5,8,.97);
  backdrop-filter:blur(16px) brightness(.18);
}
.arena-ui .modal-card{
  border:2px solid #ae8d50;border-radius:7px;
  background:linear-gradient(150deg,#173238,#061216);
  box-shadow:inset 0 0 0 2px #020709,0 28px 80px #000e,0 0 42px #32aaa64a;
}
.arena-ui .start-card{width:min(1040px,calc(100vw - 40px));max-height:calc(100vh - 24px);padding:20px 30px 16px;overflow:auto}
.arena-ui .start-card .title-creature{width:68px;height:68px;margin:-47px auto 3px;font-size:37px}
.arena-ui .start-card h1{font-size:34px;margin:1px}.arena-ui .start-card .eyebrow{margin:1px}
.arena-ui .start-lead{margin:3px 0 8px!important;font-size:13px!important;line-height:1.4!important;color:#aebfc0!important}
.arena-ui .rookie-guide{position:relative;margin:0;text-align:left}
.arena-ui .rookie-guide>header{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;color:#f1d17d}
.arena-ui .rookie-guide>header b{font-size:18px}.arena-ui .rookie-guide>header span{font-size:12px;color:#8fa6a7}
.arena-ui .rookie-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.arena-ui .rookie-step{min-width:0;padding:7px 8px 8px;border-radius:5px;background:linear-gradient(155deg,#203033,#091113);box-shadow:inset 0 0 0 1px #ffffff17,0 4px 10px #0007}
.arena-ui .rookie-step h3{display:flex;align-items:center;gap:6px;margin:5px 0 3px;color:#fff;font-size:15px}
.arena-ui .rookie-step h3 em{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#c69a43;color:#101515;font-style:normal;font-weight:900}
.arena-ui .rookie-step p{min-height:49px;margin:0!important;color:#aebabb!important;font-size:12px!important;line-height:1.35!important}
.arena-ui .rookie-step p b{color:#ffe08b}
.arena-ui .rookie-visual{position:relative;height:60px;border-radius:4px;background:radial-gradient(circle at 50% 60%,#39606466,#071012 72%);overflow:hidden}
.arena-ui .coin-visual{display:flex;align-items:center;justify-content:center;gap:4px;color:#ffe182}
.arena-ui .coin-visual>span{font-size:30px;filter:drop-shadow(0 3px 3px #000)}.arena-ui .coin-visual>b{font-size:25px}
.arena-ui .coin-visual>i{position:absolute;right:7px;bottom:5px;padding:2px 5px;border-radius:8px;background:#173c2e;color:#8df0b7;font-size:10px;font-style:normal}
.arena-ui .guide-piece{display:block;width:66px;height:66px;background:url("assets/hero-atlas-cutout-v3.png") 0 0/800% 500% no-repeat;filter:drop-shadow(0 4px 3px #000b)}
.arena-ui .shop-visual .guide-piece{position:absolute;left:8px;bottom:-8px}
.arena-ui .shop-visual>i{position:absolute;right:7px;padding:3px 6px;border-radius:8px;background:#122529;color:#d9e8e8;font-size:10px;font-style:normal}.arena-ui .shop-visual>i:nth-of-type(1){top:9px}.arena-ui .shop-visual>i:nth-of-type(2){bottom:8px;color:#ffd390}
.arena-ui .trait-visual{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:7px}
.arena-ui .trait-visual>span{display:flex;justify-content:space-between;padding:4px 7px;border-radius:3px;background:#172729;color:#dce9e7;font-size:11px}.arena-ui .trait-visual>span:last-child{background:#352741}.arena-ui .trait-visual b{color:#ffe17f}
.arena-ui .merge-visual{display:flex;align-items:center;justify-content:center;gap:3px;overflow:visible}
.arena-ui .merge-group{display:flex}.arena-ui .merge-group .guide-piece{width:34px;height:34px;margin-left:-8px}.arena-ui .merge-group .guide-piece:first-child{margin-left:0}
.arena-ui .merge-visual>b{color:#ffe27b;font-size:20px}.arena-ui .merge-result{position:relative}.arena-ui .merge-result .guide-piece{width:53px;height:53px}.arena-ui .merge-result>em{position:absolute;left:50%;top:-1px;transform:translateX(-50%);color:#ffe35e;font:900 12px/1 sans-serif;text-shadow:0 1px 3px #000}
.arena-ui .starter-reward-head{display:flex;align-items:center;justify-content:space-between;margin:12px 0 7px;color:#f2dfac}
.arena-ui .starter-reward-head b{font-size:19px}.arena-ui .starter-reward-head span{font-size:15px}.arena-ui .starter-reward-head em{font-style:normal;color:#ffd768;font-weight:900}
.arena-ui .starter-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;height:142px;margin-bottom:11px}
.arena-ui .starter-card{
  position:relative;min-width:0;overflow:hidden;border:3px solid var(--rarity,#9db2bc);border-radius:5px;
  background:linear-gradient(145deg,#284548,#10191b);box-shadow:inset 0 0 0 1px #ffffff38,inset 0 -25px 30px #0007,0 7px 12px #000a;
}
.arena-ui .starter-card.rarity-1{background:linear-gradient(145deg,#dce5e6,#68787b)}
.arena-ui .starter-card.rarity-2{background:linear-gradient(145deg,#286e43,#102e1d)}
.arena-ui .starter-card.rarity-3{background:linear-gradient(145deg,#2d6ca9,#112b50)}
.arena-ui .starter-card.rarity-4{background:linear-gradient(145deg,#7040a7,#2a174b)}
.arena-ui .starter-card.rarity-5{background:linear-gradient(145deg,#e2ad3e,#67450f)}
.arena-ui .starter-card-portrait{position:absolute;inset:0;isolation:isolate;overflow:visible}
.arena-ui .starter-card .unit-character{bottom:-5%;width:auto;height:112%;aspect-ratio:1/1;filter:drop-shadow(0 7px 4px #000c)}
.arena-ui .starter-card .chess-piece-base{bottom:1%;width:70%;height:24%}
.arena-ui .starter-card-info{position:absolute;z-index:14;left:7px;right:7px;top:8px;color:#fff;text-align:center;text-shadow:-1px -1px #000,1px -1px #000,-1px 1px #000,1px 1px #000,0 2px 5px #000}
.arena-ui .starter-card-info b,.arena-ui .starter-card-info span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arena-ui .starter-card-info b{font-size:19px}.arena-ui .starter-card-info span{margin-top:3px;font-size:14px}
.arena-ui .starter-card>em{position:absolute;z-index:15;right:6px;bottom:6px;padding:5px 8px;border:1px solid #e5c36d;border-radius:50%;background:#17130dcc;color:#ffe38b;font:900 14px/1 "Microsoft YaHei",sans-serif}
.arena-ui .starter-card .portrait-traits{right:auto;left:6px;bottom:6px;flex-direction:row}

@media(max-height:820px){
  .arena-ui .start-card{padding-top:14px;padding-bottom:12px}
  .arena-ui .start-card .title-creature{display:none}
  .arena-ui .start-card h1{font-size:29px}
  .arena-ui .rookie-visual{height:52px}
  .arena-ui .rookie-step p{min-height:44px;font-size:11px!important}
  .arena-ui .starter-cards{height:118px}
  .arena-ui .starter-card .unit-character{height:105%}
  .arena-ui .starter-reward-head{margin-top:8px}
  .arena-ui .start-card>small{margin-top:5px}
}

@media(max-width:1250px){
  .arena-ui .main-grid{grid-template-columns:180px minmax(590px,1fr) 240px}
  .arena-ui .bottom-dock{width:calc(100vw - 24px);grid-template-columns:142px minmax(0,1fr)}
  .arena-ui .brand{min-width:205px}.arena-ui .brand b{font-size:19px}
  .arena-ui .right-panel .selected-card{min-height:165px}
}
@media(max-height:980px){
  .arena-ui .main-grid{padding:62px 8px 288px}
  .arena-ui .topbar{height:58px}
  .arena-ui .round-path{top:57px}
  .arena-ui .board-stage{top:5vh;width:calc(44vh*4/3);height:44vh}
  .arena-ui .enemy-banner{left:calc(50% - 22vh*4/3 - 8px);top:64px;width:205px;min-height:61px;padding:7px 10px}
  .arena-ui .enemy-banner b strong{font-size:16px}.arena-ui .enemy-banner b small{font-size:10px}
  .arena-ui .board-caption{left:calc(50% + 22vh*4/3 + 8px);top:calc(50vh - 9px);width:106px}
  .arena-ui .bottom-dock{height:280px!important}
  .arena-ui .bench-inline{position:fixed;top:calc(50vh + 11px);bottom:auto;width:calc(44vh*4/3)!important;height:auto!important;padding:4px 5px 5px!important}
  .arena-ui .bench-label{height:17px}.arena-ui .bench-label span{display:none}
  .arena-ui .battle-controls{left:calc(50% + 30vh);top:calc(50vh + 15px);bottom:auto}
  .arena-ui .shop{height:180px}
  .arena-ui .shop-actions{height:182px}
  .arena-ui .shop-portrait{width:70%!important}
  .arena-ui .shop-portrait .unit-character{width:108%!important;height:108%!important}
  .arena-ui .shop-traits{top:30px;gap:5px}.arena-ui .shop-traits>span{min-height:24px;font-size:11px}.arena-ui .shop-traits i{width:20px;height:20px;flex-basis:20px;font-size:12px}
  .arena-ui .shop-name,.arena-ui .shop-cost{font-size:14px!important}
  .arena-ui .left-panel,.arena-ui .right-panel{height:calc(100vh - 320px)}
  .arena-ui .trait-list{max-height:calc(100vh - 368px)!important}
  .arena-ui .contestant-list{gap:2px;margin-bottom:4px}
  .arena-ui .contestant-row{min-height:34px;grid-template-columns:16px 29px minmax(0,1fr) 32px;gap:4px;padding:2px 4px}
  .arena-ui .contestant-avatar{width:28px;height:28px}.arena-ui .contestant-row>div b{font-size:11px}.arena-ui .contestant-row>div small{font-size:9px}
  .arena-ui .right-panel .selected-card{min-height:82px;max-height:104px;overflow:auto}
  .arena-ui .right-panel .section-title{min-height:31px;padding:4px 7px}.arena-ui .unit-title{min-height:25px;margin-bottom:3px}
  .arena-ui .log-title{margin-top:4px}.arena-ui .battle-log{max-height:58px}
}