/* Bright crystal arena: compact chrome, generous art, and four owned grid rows. */
:root{--bg:#172940;--panel:#203b50;--text:#f5f7fd;--muted:#b9d4dd;--gold:#ffdf89;--cyan:#83fff0;--rail:194px;--right-rail:170px;--shop-height:164px}
body{background:radial-gradient(ellipse at 15% 0,#70549365,transparent 55%),radial-gradient(ellipse at 90% 60%,#45a89044,transparent 65%),#162b3b}
.game-shell{padding:8px;gap:9px;grid-template-rows:52px minmax(0,1fr) 218px;min-height:884px}
.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding:0 12px;gap:0;border-radius:8px;background:linear-gradient(110deg,#28515d,#1d354d 50%,#334e5c);border-color:#80bea576;box-shadow:inset 0 1px #d9fff133,0 3px 10px #12233144}
.topbar-start,.topbar-end{display:flex;align-items:center;gap:12px;min-width:0}.topbar-end{justify-content:flex-end;gap:7px}
.brand{width:104px}.brand img{height:43px}.commander{min-width:0;gap:8px}.commander>img{width:32px;height:32px;border-color:#f5d48b;outline-offset:2px}.commander .eyebrow{display:none}.commander strong{font-size:12px}.commander>b{font-size:19px}.commander-life{height:3px}
.round-banner{position:relative;margin:0;width:234px;min-width:0;height:51px;border:0;border-bottom:3px solid #82f2dc;border-radius:0;background:linear-gradient(135deg,#2e5c5a,#163b4b);display:grid;grid-template-columns:64px 1fr;grid-template-rows:30px 15px;gap:0 12px;padding:0 25px;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);box-shadow:inset 0 0 0 1px #efd28977}
.round-banner strong{font:21px/1 ArenaDisplay,Georgia,serif;grid-row:1;grid-column:1;letter-spacing:1px;align-self:center;color:#fff3cf}.round-banner #phase-label{grid-column:1/-1;font-size:9px;letter-spacing:1px;margin:0;line-height:1.2;color:#d4f7e9}
.round-track{display:flex;align-items:center;justify-content:center;gap:9px;grid-row:1;grid-column:2}.round-track i{width:12px;height:12px;transform:rotate(45deg);background:#659592;border:2px solid #345452;box-shadow:0 1px 2px #0005}.round-track .current{background:#ffdf82;border-color:#b39547;box-shadow:0 0 8px #ffdc7155}
.rival-commander{min-width:0;margin-left:0;margin-right:8px;gap:1px}.rival-commander .eyebrow{font-size:8px;letter-spacing:.9px}.rival-commander strong{font:13px 'Segoe UI',Arial,sans-serif;font-weight:600}.icon-button{width:29px;height:29px;background:#244858;border-color:#75aaa38c;color:#e2f8ee}.icon-button .arena-icon{width:18px;height:18px}
.play-layout{grid-template-columns:var(--rail) minmax(0,1fr) var(--right-rail);gap:10px}.panel{background:linear-gradient(145deg,#284451ee,#1d3348ed);border-color:#668b96;border-radius:8px;box-shadow:inset 0 1px #cbfff218}.panel-heading{margin-bottom:12px}.panel-heading h2{color:#ffedbf;font-size:19px}.eyebrow{color:#bfd6df}
.synergy.active{background:linear-gradient(90deg,#d3b87833,#30475d55)}.synergy[data-tier="2"]{background:linear-gradient(90deg,#a4dbdd33,#30475d55)}.synergy[data-tier="3"]{background:linear-gradient(90deg,#ffdf7038,#30475d55)}.synergy:hover{background:#456075}.trait-count{background:#c6e9ef12}.trait-levels{color:#a7c4cf}.synergy:not(.active):not(.present){color:#a7c2cf}.synergy:not(.active):not(.present) .trait-badge{opacity:.8}
.arena-column{grid-template-rows:minmax(0,1fr) 24px 80px;min-height:0}.arena{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:28px;padding:30px 6% 28px;min-height:510px;border:2px solid #83b6ae;border-radius:10px;background:#4d6d55;box-shadow:inset 0 0 0 3px #fff3bd33,0 3px 14px #122b3477;--unit-height:100px}
.arena-scenery{background:linear-gradient(180deg,#183b4410,#12293618),url('../image/ui/tft_board/alap.webp') center/cover;filter:none}.arena:after{inset:4px;border-color:#ffe8aa33}
.enemy-grid,.player-grid{position:relative;left:auto;right:auto;top:auto;bottom:auto;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:18px 8px;width:100%;height:100%;align-items:center;justify-items:center;min-height:0}.enemy-grid{grid-row:1}.player-grid{grid-row:2}
.board-slot{width:100%;max-width:calc(var(--unit-height)*.76);height:var(--unit-height);min-width:0;max-height:100%;border-radius:4px}.board-slot.empty{border:1px solid #fff4c43b;background:radial-gradient(ellipse,#fafff00c,transparent)}.enemy-slot.empty{border-color:#fff8dc20;background:transparent}.board-slot.empty>.arena-icon{color:#ffffdd;opacity:.22}.board-slot.can-place{border-color:#a8fff2;box-shadow:inset 0 0 20px #93fff533}
.side-label{font-size:9px;letter-spacing:1.2px;background:#254354bd;padding:3px 7px;border-radius:4px;color:#ffe9d4;left:12px}.enemy-label{top:7px}.player-label{bottom:6px;color:#d6fff1}.arena-team-count{position:absolute;bottom:8px;right:14px;z-index:3;padding:2px 7px;border-radius:4px;background:#234957c9;color:#bcffef;font-size:11px;font-weight:650}
.unit{border:2px solid var(--rarity);border-radius:4px;background:var(--rarity);box-shadow:0 0 0 1px #142936,0 4px 9px #112a3b70}.unit-art{inset:0;border-radius:1px}.unit-art:after{background:linear-gradient(180deg,transparent 28%,#1722331c 45%,#122332e6 78%)}.unit-info{bottom:5px;left:5px;right:4px}.unit-info strong{font-size:13px}.unit-crests{gap:4px;margin-top:3px}.unit .stars{top:-15px}.healthbar{top:2px;left:2px;right:2px;height:4px}.manabar{top:7px;left:2px;right:2px}.unit:hover:not(:disabled){border-color:var(--rarity);box-shadow:0 0 0 2px #e7ffed,0 5px 15px #113143aa}.unit.selected{outline-color:#9bfff0}.unit.dead{opacity:.3}.unit.attacking{translate:0 -1px}
.bench{grid-template-columns:repeat(10,64px);justify-content:center;gap:7px;padding:8px 12px;background:linear-gradient(180deg,#345d66,#244453);border-color:#84b6af;box-shadow:inset 0 1px #efffce26;border-radius:8px;overflow-x:auto;scrollbar-width:thin}.bench-slot{width:64px;height:64px;max-width:64px;max-height:64px;border:1px solid #789ba0;border-radius:4px;background:linear-gradient(145deg,#456875,#2e4b5e);box-shadow:inset 0 1px #dafbed13}.bench-slot:before{display:none}.bench-slot>.arena-icon{color:#a7c7ce;opacity:.4}.bench-avatar{border:3px solid var(--rarity);border-radius:4px;box-shadow:0 2px 5px #12333c88}.bench-avatar .unit-art{inset:0;border-radius:0}.bench-avatar .stars{right:3px;bottom:3px;top:auto}.bench-avatar .unit-art:after{background:linear-gradient(180deg,transparent 75%,#0d263859)}.bench-heading{color:#d2e8e5;font-size:10px}.bench-heading b{color:#ffe397}
.rivals-panel{background:linear-gradient(180deg,#234e58ee,#1d3b4cee);padding:12px 7px;border-color:#8db7b580;overflow:auto}.rivals-panel .panel-heading{padding:0 5px}.rivals-panel .panel-heading .eyebrow{display:none}.rivals-panel .panel-heading h2{font:13px 'Segoe UI',Arial,sans-serif;text-transform:uppercase;letter-spacing:1.1px;margin:0 0 17px;color:#cee7e9}
#standings{position:relative;display:flex;flex-direction:column;gap:4px;padding:0 5px}#standings:before{content:'';position:absolute;right:27px;top:20px;bottom:20px;width:2px;background:linear-gradient(#e8cd86,#98c6b399);opacity:.5}
.rival-row{position:relative;display:flex;align-items:center;gap:7px;margin:0;padding:6px 0;min-height:65px;border:0;border-radius:0;background:none!important;box-shadow:none;opacity:1}.rival-detail{flex:1;min-width:0;text-align:right}.rival-detail>strong{display:block;font-size:11px;color:#e3f0ec;white-space:normal;line-height:1.2}.rival-life{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:4px;background:linear-gradient(90deg,transparent,#173542);padding:2px 5px;border:1px solid #a78e5855;border-radius:3px}.rival-life b{font-size:15px;line-height:1.1;color:#ffe6aa}.rival-life i{font-style:normal;font-size:8px;color:#c6dacf;letter-spacing:.6px}.rival-avatar{display:block;width:45px;height:45px;flex-shrink:0;position:relative;border:2px solid #dbbc79;border-radius:50%;background:#1a4654;box-shadow:0 0 0 2px #173542,inset 0 0 0 1px #ecffff88}.rival-avatar img{width:100%;height:100%;border-radius:50%;border:0;box-shadow:none;object-fit:cover}.rival-avatar small{position:absolute;bottom:-4px;right:-2px;width:15px;height:15px;display:grid;place-items:center;background:#244a53;border:1px solid #bca268;border-radius:50%;font-size:9px;color:#fff0c9}.rival-row.self{min-height:77px}.rival-row.self .rival-avatar{width:54px;height:54px;border-color:#83ffe9;box-shadow:0 0 0 2px #204855,0 0 15px #72ffdf33}.rival-row.self .rival-life b{color:#b7fff0}.rival-row.current .rival-avatar{border-color:#ffe284;box-shadow:0 0 0 3px #f8d37b33}.rival-row.out .rival-avatar{filter:grayscale(1);opacity:.45}.rival-row.out .rival-detail{opacity:.45}.rival-hp{height:2px;margin-top:4px;background:#8bb2b92a}.rival-hp i{background:linear-gradient(90deg,#d7a0ef,#adf0e3)}.rival-row.self .rival-hp i{background:#8cffe6}
.shop-dock{grid-template-columns:var(--rail) minmax(0,1fr) var(--right-rail);padding:11px 10px;gap:14px;border-color:#8bbdb0;background:linear-gradient(120deg,#315769,#213c53 55%,#355a61);box-shadow:inset 0 1px #e4ffd929}.level-emblem{background:linear-gradient(145deg,#326a76,#294660);box-shadow:0 0 0 3px #203f51,0 0 0 4px #ffd68644}.wallet>strong{color:#ffe78b}.wallet small{color:#c1dae2}.economy-button{background:linear-gradient(120deg,#346980,#2b5369);border-color:#86bac4}.gold-button{background:linear-gradient(120deg,#8b7442,#605839);border-color:#dcbe79}.xp-track{background:#b3dcdf29}.shop-heading{color:#d4eced}#lock-button{background:linear-gradient(120deg,#80673f,#53563d);border-color:#e3c587;color:#fff0b7}#lock-button[aria-pressed=true]{background:linear-gradient(120deg,#ad8b37,#6b6d37);border-color:#ffe49a}.fight-button{background:radial-gradient(ellipse at 50% 30%,#ba935d66,#496157 52%,#254958);box-shadow:0 0 20px #fed78622,inset 0 0 0 5px #264752,inset 0 0 0 6px #ffdc8588}.battle-controls>span,.speed-button{color:#cae4e5}
.hero-tooltip{position:fixed;z-index:36;width:min(358px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;padding:16px;border:2px solid var(--rarity);border-radius:9px;background:linear-gradient(140deg,#284c63fa,#183447fc);box-shadow:0 12px 35px #09233099,inset 0 1px #c6fff026;backdrop-filter:blur(12px);scrollbar-width:thin;color:#f2f7fd}.hero-tooltip-head{display:flex;align-items:center;gap:11px}.hero-tooltip-head>img{width:53px;height:53px;object-fit:cover;border-radius:6px;border:2px solid var(--rarity)}.hero-tooltip-head>div{flex:1}.hero-tooltip-head strong{font-size:21px;display:block;line-height:1.2}.tooltip-stars{display:flex;color:#ffe397;gap:2px;margin-top:5px}.tooltip-stars .arena-icon{width:13px;height:13px}.hero-tooltip-head>b{display:flex;align-items:center;gap:4px;color:#ffe59b;font-size:18px}.hero-tooltip-head>b .arena-icon{width:19px;height:19px}.hero-tags{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0}.hero-tags>span{display:flex;align-items:center;gap:5px;background:#7dacc52a;border-radius:5px;padding:4px 8px;font-size:12px;color:#d6f4eb}.hero-tags .arena-icon{width:17px;height:17px}.hero-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.hero-stat-grid>div{padding:8px 10px;border:1px solid #82b6c637;border-radius:5px;background:#102e3d66;display:flex;flex-direction:column;gap:2px}.hero-stat-grid span{font-size:11px;color:#b8d4de}.hero-stat-grid b{font-size:16px;color:#eefcff}.hero-spell{margin-top:14px;padding:12px;background:linear-gradient(130deg,#a683d626,#74dcbd13);border:1px solid #b499db66;border-radius:7px}.hero-spell>.eyebrow{font-size:9px;color:#d0c1ff}.hero-spell>strong{display:block;font-size:17px;margin-top:3px;color:#f1ddff}.hero-spell p{font-size:12px;color:#c9dee9;margin:5px 0 10px}.hero-spell>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.hero-spell b{font-size:14px;color:#ffe5a3}.hero-spell>div>span,.hero-spell>small{font-size:11px;color:#c6d8e5}.hero-spell>small{display:block;margin-top:9px;line-height:1.4}.hero-tooltip-foot{font-size:10px;margin-top:12px;display:flex;justify-content:space-between;gap:12px;color:#a9c9d5}.hero-tooltip-foot b{color:#efdfab;white-space:nowrap}.synergy-tooltip{background:linear-gradient(135deg,#325365fa,#1d3a50fc)}
@media(min-width:2200px){:root{--rail:218px;--right-rail:188px;--shop-height:206px}.game-shell{grid-template-rows:56px minmax(0,1fr) 262px;min-height:944px;padding:10px;gap:10px}.topbar{padding:0 15px}.round-banner{height:55px;width:260px}.round-banner strong{font-size:23px}.commander strong{font-size:14px}.commander>b{font-size:22px}.brand{width:120px}.arena-column{grid-template-rows:minmax(0,1fr) 26px 90px}.bench{grid-template-columns:repeat(10,72px);gap:7px}.bench-slot{width:72px;height:72px;max-height:72px;max-width:72px}.rival-row{min-height:76px}.rival-row.self{min-height:88px}.rival-avatar{width:52px;height:52px}.rival-row.self .rival-avatar{width:61px;height:61px}.rival-detail>strong{font-size:12px}.rival-life b{font-size:18px}#standings:before{right:30px}.unit-info strong{font-size:16px}}
@media(max-width:1100px){.game-shell{height:auto;min-height:100dvh;grid-template-rows:52px 720px auto}.play-layout{grid-template-columns:180px minmax(0,1fr)}.rivals-panel{display:none}.shop-dock{grid-template-columns:180px minmax(0,1fr) 140px}.rival-commander{display:none}.topbar-start{gap:8px}.brand{width:85px}.commander strong{font-size:11px}.round-banner{width:194px;padding:0 22px;gap:0 8px}.bench{justify-content:start;grid-template-columns:repeat(10,62px);gap:7px;padding:8px}.bench-slot{width:62px;height:62px;max-height:62px}.arena{padding-left:4%;padding-right:4%}}
@media(max-width:750px){.game-shell{grid-template-rows:66px auto auto;padding:6px;gap:8px;min-height:100dvh}.topbar{padding:4px 7px;gap:0;flex-wrap:nowrap}.topbar-start{gap:0}.topbar-end{display:grid;grid-template-columns:repeat(2,26px);gap:4px}.topbar .brand,.commander>div,.rival-commander{display:none}.commander{min-width:0;gap:7px;flex:initial}.commander>img{width:29px;height:29px}.commander>b{font-size:17px}.round-banner{width:146px;height:57px;grid-template-columns:1fr;grid-template-rows:24px 12px 13px;padding:0 15px;gap:0;align-self:start;margin:0;order:initial;min-height:0}.round-banner strong{font-size:21px;grid-column:1;grid-row:1}.round-track{grid-column:1;grid-row:2;gap:7px}.round-track i{width:8px;height:8px;border-width:1px}.round-banner #phase-label{grid-column:1;grid-row:3;font-size:8px;letter-spacing:.5px}.icon-button{width:26px;height:26px;order:initial}.icon-button .arena-icon{width:16px;height:16px}.play-layout{display:flex;height:auto}.arena-column{grid-template-rows:558px 25px 84px}.arena{height:558px;min-height:558px;padding:30px 10px 28px;gap:28px}.enemy-grid,.player-grid{left:auto;right:auto;top:auto;bottom:auto;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 6px;justify-content:initial}.board-slot{width:100%;max-width:calc(var(--unit-height)*.76);height:var(--unit-height)}.unit-info{left:4px;right:3px;bottom:5px}.unit-info strong{font-size:12px}.bench{grid-template-columns:repeat(10,62px);gap:6px;padding:8px;justify-content:start}.bench-slot{width:62px;height:62px}.shop-dock{grid-template-columns:114px minmax(0,1fr);padding:9px 7px;gap:11px}.synergy-panel{order:2}.rivals-panel{display:none}.bench-heading{font-size:10px}.arena-team-count{font-size:10px}.fight-button{box-shadow:inset 0 0 0 3px #295361,inset 0 0 0 4px #ffe8ab55}.hero-tooltip{padding:13px}.hero-tooltip-head strong{font-size:19px}}
@media(max-width:360px){.round-banner{width:132px}.commander{gap:5px}.commander>img{width:26px;height:26px}.commander>b{font-size:15px}.topbar-end{gap:3px}.topbar{padding:4px}.unit-info strong{font-size:12px}.unit-crests>span{width:15px;height:15px}.unit-crests .trait-symbol{width:13px;height:13px}}
.round-banner #phase-label{text-align:center;justify-self:stretch}
.inspect-hero{display:grid;place-items:center;flex-shrink:0;width:27px;height:27px;border:1px solid #98c8d0;border-radius:5px;background:#3c6474;margin-left:auto;color:#d5fff0}.inspect-hero .arena-icon{width:18px;height:18px}#hero-dialog{width:min(390px,94vw);padding:35px 17px 19px;background:linear-gradient(140deg,#2c5166,#193747);border-color:#95cfd0}#hero-dialog-content{min-width:0}.hero-tooltip-head{padding-right:0}.hero-tooltip-foot{flex-wrap:wrap}
@media(max-width:750px){.hero-tooltip{pointer-events:none}.selected-hero>div{flex:1}.selected-hero{min-width:0}.selected-hero span{font-size:11px}.selection-panel[data-selected=true]{gap:8px}}
/* Midnight violet and blue chrome; rarity colours keep their own identity. */
:root{--bg:#0b0d1b;--panel:#17172c;--muted:#b9bdd7;--cyan:#a5baff}
body{background:radial-gradient(ellipse at 12% 0,#47236a33,transparent 55%),radial-gradient(ellipse at 90% 60%,#223d7033,transparent 65%),#0b0d1b}
.topbar{background:linear-gradient(110deg,#20182f,#111b30 50%,#1b172c);border-color:#7164906b;box-shadow:inset 0 1px #b9a9ef17,0 3px 12px #07091366}
.panel{background:linear-gradient(145deg,#201930f5,#111b2ff5);border-color:#5b5576;box-shadow:inset 0 1px #c3b7ff12}
.rivals-panel{background:linear-gradient(180deg,#21182ff2,#111a2ff5);border-color:#5b5576}
.shop-dock{background:linear-gradient(120deg,#231a34,#131c32 55%,#211a32);border-color:#645581;box-shadow:inset 0 1px #cabdff18}
.bench{background:linear-gradient(120deg,#211a32,#131d32);border-color:#5c577d;box-shadow:inset 0 1px #b6b4ff14}
.bench-slot{background:linear-gradient(145deg,#29233e,#182238);border-color:#55516d}.bench-slot>.arena-icon{color:#a4a5ca}
.hero-tooltip,.synergy-tooltip{background:linear-gradient(140deg,#251d3bfc,#121f36fc);box-shadow:0 12px 35px #050616aa,inset 0 1px #d3b7ff20}
#hero-dialog{background:linear-gradient(140deg,#251d3b,#121f36)}
.hero-stat-grid>div{background:#10162988;border-color:#9f95c733}.hero-tags>span{background:#9298dc25;color:#dde1ff}.hero-stat-grid span,.hero-tooltip-foot{color:#bfc0da}
.eyebrow,.shop-heading,.bench-heading,.battle-controls>span,.speed-button{color:#bbc4e5}.trait-levels{color:#b7b5cf}.synergy:hover{background:#4e41643f}
.synergy.active{background:linear-gradient(90deg,#d3b87826,#45315a33)}.synergy[data-tier="2"]{background:linear-gradient(90deg,#bfc5ef24,#243a6733)}.synergy[data-tier="3"]{background:linear-gradient(90deg,#ffdf7030,#45315a33)}
.round-banner{background:linear-gradient(120deg,#372147,#192944);border-bottom-color:#b7a0ff;box-shadow:inset 0 0 0 1px #b9a1ee66}.round-banner #phase-label{color:#ddd4ff}.round-track i{background:#647199;border-color:#343153}
.icon-button,.inspect-hero{background:linear-gradient(135deg,#332643,#1a2941);border-color:#80749388;color:#dedbff}
.level-emblem{background:linear-gradient(145deg,#342345,#172a45);box-shadow:0 0 0 3px #17172b,0 0 0 4px #ffd68644}.economy-button{background:linear-gradient(120deg,#343052,#203453);border-color:#7879a7}.gold-button{background:linear-gradient(120deg,#675130,#423343);border-color:#ae9462}
.fight-button{background:radial-gradient(ellipse at 50% 30%,#9b73554d,#34233e 52%,#17233b);box-shadow:0 0 20px #c593d122,inset 0 0 0 5px #181b32,inset 0 0 0 6px #ffdc8566}
.rival-life{background:linear-gradient(90deg,transparent,#181c32)}.rival-avatar{background:#1c2440;box-shadow:0 0 0 2px #161a2e,inset 0 0 0 1px #ecffff66}.rival-avatar small{background:#292039}.rival-row.self .rival-avatar{border-color:#a7baff;box-shadow:0 0 0 2px #201c37,0 0 15px #a58cff33}.rival-row.self .rival-life b{color:#c7d4ff}.rival-hp i{background:linear-gradient(90deg,#bb8fee,#8eaaff)}.rival-row.self .rival-hp i{background:#a8bcff}
.arena{border-color:#7b72a0}.side-label,.arena-team-count{background:#201a36cf;color:#e2dcff}.board-slot.can-place{border-color:#bbadff;box-shadow:inset 0 0 20px #a98aff33}.unit.selected{outline-color:#c1b0ff}.drag-over{outline-color:#c5b6ff!important;background:#9471e333!important}

/* A compact commander card with a portrait crest and a separate health badge. */
.commander{display:flex;align-items:center;gap:9px;min-width:0;padding:4px 9px 4px 5px;border:1px solid #9a81c43b;border-radius:7px;background:linear-gradient(110deg,#48305833,#17284055);box-shadow:inset 0 1px #e4caff0f;flex:0 1 300px}
.commander-portrait{position:relative;display:block;flex:0 0 34px;width:34px;height:34px;border:1px solid #e7c18b;border-radius:50%;box-shadow:0 0 0 2px #171a2d,0 0 0 3px #a887ca44;overflow:visible}
.commander-portrait img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}.commander-portrait>i{position:absolute;right:-2px;bottom:0;width:8px;height:8px;transform:rotate(45deg);border:1px solid #f7dfa8;background:#a388cf;box-shadow:0 0 0 2px #211b34}
.commander-identity{min-width:0;flex:1}.commander .eyebrow{display:block;font-size:7px;letter-spacing:1.5px;color:#c4addf;line-height:1.3;margin-bottom:1px}.commander strong{display:block;font:600 12px/1.35 'Segoe UI',Arial,sans-serif;color:#f4edff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.commander-life{height:3px;margin-top:3px;background:#b6a5d329;border-radius:3px;overflow:hidden}.commander-life i{background:linear-gradient(90deg,#a58bff,#88baff);box-shadow:0 0 8px #ab9aff66}
.commander-health{display:flex;align-items:center;flex-direction:column;justify-content:center;min-width:40px;padding-left:9px;margin-left:2px;border-left:1px solid #c4a6df33;line-height:1}.commander-health b{font:700 19px/1 'Segoe UI',Arial,sans-serif;color:#d4c5ff}.commander-health small{font-size:7px;letter-spacing:1px;color:#b8b2cf;margin-top:3px}
@media(min-width:2200px){.commander{flex-basis:325px}.commander strong{font-size:14px}.commander-health b{font-size:21px}}
@media(max-width:1100px){.commander{gap:7px;padding-right:7px}.commander strong{font-size:11px}.commander-portrait{flex-basis:30px;width:30px;height:30px}.commander-health{padding-left:7px;min-width:32px}.commander-health b{font-size:17px}}
@media(max-width:750px){.commander{flex:initial;padding:4px;gap:5px;background:#3c28513d;border-color:#9a81c44a}.commander-health{padding-left:5px;margin:0;min-width:29px}.commander-health b{font-size:16px}.commander-health small{font-size:6px}.commander-portrait{flex-basis:27px;width:27px;height:27px}.commander-portrait>i{width:6px;height:6px}.fight-button{box-shadow:inset 0 0 0 3px #181b32,inset 0 0 0 4px #ffdc8566}}
@media(max-width:360px){.commander{gap:3px;padding:3px}.commander-portrait{flex-basis:23px;width:23px;height:23px}.commander-health{min-width:24px;padding-left:3px}.commander-health b{font-size:14px}}

/* The recruitment area becomes a gold sell target only while dragging an owned hero. */
.shop-area{position:relative;min-width:0}.sell-drop-preview{position:absolute;inset:0;z-index:8;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px;text-align:center;border:2px dashed #e5c177;border-radius:7px;background:radial-gradient(ellipse at 50% 60%,#735b375c,transparent 70%),linear-gradient(120deg,#20172cf5,#121b2ef5);box-shadow:inset 0 0 35px #edc97f0d,0 0 0 1px #e5c17722;transition:border-color .15s,background .15s,box-shadow .15s}
.sell-drop-preview[hidden]{display:none}.sell-drop-icon{color:#f9d796}.sell-drop-icon .arena-icon{width:27px;height:27px}.sell-drop-preview>strong{font-size:17px;color:#fff0cb}.sell-drop-hero{font-size:12px;color:#d4c8e1}.sell-drop-preview>b{display:flex;align-items:center;gap:6px;font-size:27px;color:#ffe29a;line-height:1.3}.sell-drop-preview>b .arena-icon{width:23px;height:23px}.sell-drop-preview>b>span{font-size:10px;letter-spacing:1.2px;margin-left:3px}.sell-drop-preview>small{font-size:11px;color:#c5b6d2}.sell-over .sell-drop-preview{border-style:solid;border-color:#ffe6a4;background:radial-gradient(ellipse at 50% 60%,#8d6a4175,transparent 75%),linear-gradient(120deg,#302035fa,#18243afa);box-shadow:inset 0 0 45px #edc97f22,0 0 18px #f5cd782f}.sell-ready .shop{visibility:hidden}.dragging-unit{opacity:.45}
@media(max-width:750px){.sell-drop-preview{padding:8px;gap:6px}.sell-drop-preview>strong{font-size:14px}.sell-drop-preview>b{font-size:24px}.sell-drop-preview>small{font-size:10px}}
.ui-vfx-layer{position:fixed;inset:0;width:100%;height:100%;z-index:30;pointer-events:none;overflow:hidden;contain:strict}
.ui-vfx-label{font:700 14px 'Segoe UI',Arial,sans-serif;letter-spacing:.7px;paint-order:stroke fill;stroke:#0b2236;stroke-width:3px;stroke-linejoin:round;filter:drop-shadow(0 2px 4px #092134aa)}
@media(max-width:750px){.ui-vfx-label{font-size:12px}}