/* Army screen layout (docs/ui-style-guide.md §0a, §4, §5, §8). Art comes from the WRUI components in ui-system.css
   (.wr-card, .wr-portrait, .wr-hex, .wr-slot-head, .wr-btn, .wr-bar, .wr-tray, .wr-counter, .wr-plaque); this file only
   arranges them and adds the army-only pieces (slot tiers, coin row, filter icons, slot upgrades, ascension burst).
   Colours and fonts use the shared --wr-* tokens; no textures. ":is(#lobby-panel,body)" lifts specificity above the
   old "#lobby-panel button" skin wherever the army uses real buttons. */

/* ---------- Tier palette for army slots (smooth metal gradients) ---------- */
.army-slot,.army-upgrade-slot{--tier-hi:#8f6a48;--tier:#5a3e28;--tier-lo:#2e1f14;--tier-rim:#a07a52}
.army-slot--bronze,.army-upgrade-slot--bronze{--tier-hi:#e0a372;--tier:#a8693a;--tier-lo:#5a3418;--tier-rim:#f0c08e}
.army-slot--silver,.army-upgrade-slot--silver{--tier-hi:#dfe4ee;--tier:#8e97aa;--tier-lo:#474e60;--tier-rim:#f4f6fb}
.army-slot--gold,.army-upgrade-slot--gold{--tier-hi:#ffe08a;--tier:#d29a32;--tier-lo:#7a4f12;--tier-rim:#fff0bf}
.army-slot--diamond,.army-upgrade-slot--diamond{--tier-hi:#a8f4ff;--tier:#b48cff;--tier-lo:#e46fc4;--tier-rim:#e8fbff}
.wr-slot-head--diamond{--t:linear-gradient(180deg,#f2feff,#8fe9ff 30%,#b48cff 62%,#ff9ad9 88%,#6a3a9a);color:#eafcff}

/* ---------- Screen column ---------- */
.wr-army{display:flex;flex-direction:column;gap:10px;width:100%;max-width:560px;margin:0 auto;color:var(--wr-text);font-family:var(--wr-font-body)}
.wr-army h2{margin:0}

/* Leader portrait coins: horizontally scrolling row; the active leader is raised with a gold glow. */
.wr-army__leaders{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:8px 10px 14px;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:8px;background:linear-gradient(180deg,#7a4a26,#5a3418);box-shadow:inset 0 1px 0 #ffd9a055,inset 0 -2px 0 #0006,0 0 0 1px var(--wr-ink),0 4px 10px #0008}
.wr-army__leaders::-webkit-scrollbar{display:none}
.wr-army__leaders.is-picking{box-shadow:inset 0 1px 0 #ffd9a055,0 0 0 2px var(--wr-cyan),0 0 16px 2px #7fe3f088}
.army-coin{position:relative;flex:none;display:grid;place-items:center;width:64px;height:70px;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.army-coin:focus-visible .army-coin__ring{outline:2px solid var(--wr-gold-hi);outline-offset:2px}
.army-coin[aria-disabled="true"]{cursor:default}
.army-coin .army-coin__ring{width:58px;height:58px;transition:transform .14s}
:is(#lobby-panel,body) .army-coin__ring>img{width:100%;height:100%;max-width:none;margin:0;padding:0;border:0;background:none;box-shadow:none;object-fit:cover;object-position:50% 0;border-radius:50%;transform:scale(1.55);transform-origin:50% 8%;clip-path:circle(31% at 50% 31%)}
.army-coin__ring{overflow:visible}
/* Coin face: a round window over the champion art, framed per portrait (--hx/--hy/--ar set from online-army.js FRAME) so
   the head and shoulders sit in the coin centre instead of a blown-up crop. */
.army-coin__face{position:absolute;inset:0;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 35%,#5a6894,#1d2338)}
:is(#lobby-panel,body) .army-coin__face>img{position:absolute;left:50%;top:calc(42% - var(--hy,.12) * 240% * var(--ar,1.133));width:240%;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;object-fit:contain;transform:translateX(calc(-1 * var(--hx,50%)));clip-path:none}
.army-coin .army-coin__level{bottom:-9px;z-index:2}
.army-coin .army-coin__level .wr-hex{min-width:26px;height:20px;font-size:13px}
/* Family pennants (coins and cards): gold-trimmed banner in the family colour carrying the family emblem. */
.army-coin__family,.army-card .army-card__family{--fam-hi:#6a76a0;--fam-lo:#262c45;--fam2-hi:#6a76a0;--fam2-lo:#262c45;position:absolute;z-index:3;display:flex;justify-content:center;align-items:flex-start;clip-path:polygon(0 0,100% 0,100% 76%,50% 100%,0 76%);background:linear-gradient(#fff0b8,#d9a743 45%,#7a4f12);box-shadow:none;filter:drop-shadow(0 1px 1px #000a)}
.army-coin__family::before,.army-card .army-card__family::before{content:'';position:absolute;inset:0 2px 2px;clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%);background:linear-gradient(var(--fam-hi),var(--fam-lo))}
.army-coin__family>img,.army-card .army-card__family>img{position:relative;z-index:1;object-fit:contain;border-radius:50%;filter:drop-shadow(0 1px 1px #000c)}
.army-coin__family>img+img,.army-card .army-card__family>img+img{display:none}
.army-coin__family{left:-2px;top:-1px;width:24px;height:30px;padding-top:2px}
.army-coin__family>img{width:20px;height:20px}
/* Split-family leaders (two families): two half-ribbons side by side, each in its family colour and carrying its emblem,
   divided by a gold seam. Both emblems stay visible; the banner widens so each half keeps a readable icon. */
:is(.army-coin__family,.army-card .army-card__family).is-split{gap:1px}
:is(.army-coin__family,.army-card .army-card__family).is-split::before{background:linear-gradient(#fff0b8,#7a4f12) 50% 0/2px 100% no-repeat,linear-gradient(var(--fam2-hi),var(--fam2-lo)) 100% 0/50% 100% no-repeat,linear-gradient(var(--fam-hi),var(--fam-lo)) 0 0/50% 100% no-repeat}
:is(.army-coin__family,.army-card .army-card__family).is-split>img+img{display:block}
.army-coin__family.is-split{left:-8px;width:36px}
.army-coin__family.is-split>img{width:15px;height:15px;margin-top:1px}
:is(.army-coin__family,.army-card__family)[data-family2=Kingdom]{--fam2-hi:#5b8fe6;--fam2-lo:#173a78}
:is(.army-coin__family,.army-card__family)[data-family2=Warband]{--fam2-hi:#e0574a;--fam2-lo:#5e150d}
:is(.army-coin__family,.army-card__family)[data-family2=Grovebound]{--fam2-hi:#4fb05a;--fam2-lo:#17491b}
:is(.army-coin__family,.army-card__family)[data-family2=Wildclaw]{--fam2-hi:#c8a46a;--fam2-lo:#5a4020}
:is(.army-coin__family,.army-card__family)[data-family2=Shadowborn]{--fam2-hi:#9a62d0;--fam2-lo:#331a4a}
:is(.army-coin__family,.army-card__family)[data-family2=Stonebound]{--fam2-hi:#e07a34;--fam2-lo:#5a2a0c}
:is(.army-coin__family,.army-card__family)[data-family=Kingdom]{--fam-hi:#5b8fe6;--fam-lo:#173a78}
:is(.army-coin__family,.army-card__family)[data-family=Warband]{--fam-hi:#e0574a;--fam-lo:#5e150d}
:is(.army-coin__family,.army-card__family)[data-family=Grovebound]{--fam-hi:#4fb05a;--fam-lo:#17491b}
:is(.army-coin__family,.army-card__family)[data-family=Wildclaw]{--fam-hi:#c8a46a;--fam-lo:#5a4020}
:is(.army-coin__family,.army-card__family)[data-family=Shadowborn]{--fam-hi:#9a62d0;--fam-lo:#331a4a}
:is(.army-coin__family,.army-card__family)[data-family=Stonebound]{--fam-hi:#e07a34;--fam-lo:#5a2a0c}
.army-coin[data-family="Kingdom"] .army-coin__ring{--wr-ring:linear-gradient(#a9c8ff,#3b72d0 45%,#173a78)}
.army-coin[data-family="Warband"] .army-coin__ring{--wr-ring:linear-gradient(#ffb0a0,#c2402f 45%,#5e150d)}
.army-coin[data-family="Grovebound"] .army-coin__ring{--wr-ring:linear-gradient(#b8f0a6,#46a043 45%,#1a4d1c)}
.army-coin[data-family="Wildclaw"] .army-coin__ring{--wr-ring:linear-gradient(#f2d8a8,#b08a52 45%,#5a4020)}
.army-coin[data-family="Shadowborn"] .army-coin__ring{--wr-ring:linear-gradient(#e0b8ff,#8a4cc8 45%,#3a1660)}
.army-coin[data-family="Stonebound"] .army-coin__ring{--wr-ring:linear-gradient(#ffcf9a,#c86a28 45%,#5a2a0c)}
.army-coin.is-active .army-coin__ring{transform:translateY(-3px);box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-gold),0 0 14px 3px #ffd77a88,0 5px 8px #000a}

/* Hint bar for swap / equip / leader choice modes. */
.wr-army__hint{flex-wrap:wrap;margin:0 0 8px}
.wr-army__hint .army-equip-hint{flex:1 1 160px;margin:0;color:var(--wr-gold-hi);font:800 15px/1.25 var(--wr-font-body);letter-spacing:0;text-align:left}

/* Board: slot medallions over the leader double card and the 3×2 troop tray, then the stats strip. */
.wr-army__board{display:flex;flex-direction:column;gap:10px}
.wr-army__tray{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 5px;padding:10px 6px 8px}
.army-slot{position:relative;display:flex;flex-direction:column;min-width:0;padding:19px 2px 2px;border-radius:8px;background:linear-gradient(180deg,#ffffff2e,#fff0 22%,#00000040) padding-box,linear-gradient(180deg,var(--tier-hi),var(--tier) 40%,var(--tier-lo)) padding-box;box-shadow:0 0 0 1px var(--wr-ink),inset 0 1px 0 var(--tier-rim),inset 0 -2px 3px #0006,0 3px 6px #0008}
.army-slot--leader{grid-row:span 2}
.army-slot--brown{filter:saturate(.8)}
.army-slot__head.wr-slot-head{position:absolute;z-index:3;left:50%;top:-9px;width:30px;height:30px;transform:translateX(-50%);border-width:2px;font-size:13px}
.army-slot__head.wr-slot-head>img{width:20px;height:20px;border-radius:50%}
.army-slot__head.wr-slot-head>svg{width:20px;height:20px}
.army-slot__head.is-matched{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 2px #7ee08f,0 0 10px 2px #7ee08f99}
.army-slot.is-target{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-cyan),0 0 14px 3px #7fe3f088;animation:army-target 1.4s ease-in-out infinite}
.army-slot.is-source{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-gold),0 0 14px 3px #ffd77a88}
@keyframes army-target{50%{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-cyan),0 0 4px 1px #7fe3f044}}

/* Cards (pressable divs, art from .wr-card). Leader art fills its double height. */
.army-card.wr-card{flex:1;padding:3px 3px 2px;border-width:2px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;outline:none}
.army-card.wr-card:focus-visible{outline:2px solid var(--wr-gold-hi);outline-offset:2px}
.army-card .wr-card__art{flex:none;min-height:0;aspect-ratio:1/1.08}
.army-card.wr-card--leader .wr-card__art{flex:1;aspect-ratio:auto;min-height:150px;container-type:size}
.army-card .wr-card__art>img{position:absolute;inset:0}
/* Leader portrait: framed per champion (--hx head centre, --ar image aspect) so the whole hero stands inside the double
   card with head and shoulders clear of the slot medallion and the badges on the floor line below the feet. */
:is(#lobby-panel,body) .army-card.wr-card--leader .wr-card__art>img{inset:auto;left:50%;bottom:30px;width:min(185cqw,calc((100cqh - 36px) / var(--ar,1.133)));height:auto;max-width:none;max-height:none;margin:0;object-fit:contain;object-position:50% 100%;transform:translateX(calc(-1 * var(--hx,50%)))}
.army-card.wr-card--leader .wr-card__art::after{content:'';position:absolute;left:8%;right:8%;bottom:24px;height:14px;border-radius:50%;background:radial-gradient(ellipse,#0009,#0000 70%);pointer-events:none}
/* Corner badges live inside the art window: cost bottom-left, talent bottom-right; pennant top-left, upgrade top-right. */
.army-card .wr-card__cost{z-index:3;left:3px;bottom:3px;top:auto;transform:none;width:24px;height:24px;font-size:14px}
.army-card .wr-card__name{margin:2px 0 1px;font-size:11px}
.army-card .wr-card__foot{height:20px;gap:2px}
.army-card .wr-card__foot>.wr-hex-wrap{padding:1.5px}
.army-card .wr-hex{min-width:20px;height:16px;padding:0 3px;font-size:11px}
.army-card .wr-card__xp{height:9px;min-width:12px}
.army-card .wr-card__xp>span{display:none}
.army-card .army-card__talent{position:absolute;z-index:3;right:3px;bottom:3px;width:28px;height:28px;padding:0;border:2px solid transparent;border-radius:7px;background:linear-gradient(#232a44,#0d1020) padding-box,linear-gradient(#fff0b8,#e0a93a 45%,#7a4f12) border-box;box-shadow:0 0 0 1px var(--wr-ink),0 2px 4px #000c;overflow:hidden;cursor:pointer}
.army-card .army-card__talent:focus-visible{outline:2px solid var(--wr-gold-hi);outline-offset:1px}
.army-card .army-card__talent>.talent-icon{display:block;box-sizing:border-box;width:100%!important;height:100%!important;min-width:0;min-height:0;margin:0!important;padding:0!important;border:0!important;border-radius:4px;box-shadow:none!important;float:none;object-fit:cover;background-color:transparent}
.army-card .army-card__talent.empty{width:24px;height:24px;color:var(--wr-gold-hi);font:900 16px/1 var(--wr-font-body);border:2px dashed #e9c063aa;background:#0d1020b3;box-shadow:0 0 0 1px #0008;opacity:.85}
.army-card .army-card__family{left:8px;top:5px;width:28px;height:36px;padding-top:3px}
.army-card .army-card__family>img{width:22px;height:22px;margin:0}
.army-card .army-card__family.is-split{width:44px;left:5px}
.army-card .army-card__family.is-split>img{width:19px;height:19px}
/* Phones: the art window is only ~65px wide, so a full-size pennant hid the unit's face. A smaller pennant hangs off the
   card's top-left corner instead (cards do not clip), covering only the art's empty corner; split leaders keep both halves. */
@media (max-width:650px){
 .army-card .army-card__family{left:-4px;top:-5px;width:20px;height:26px;padding-top:2px}
 .army-card .army-card__family>img{width:15px;height:15px}
 .army-card .army-card__family.is-split{left:-5px;width:30px;gap:0}
 .army-card .army-card__family.is-split>img{width:12px;height:12px}
}
/* Upgrade ready: a round green badge tucked inside the top-right corner, with a gentle pulse (still when motion is reduced). */
.army-card .wr-card__up{right:7px;top:7px;width:22px;height:22px;clip-path:none;border-radius:50%;background:radial-gradient(circle at 50% 30%,#d4ffb0,#5fd23a 55%,#227a16);box-shadow:0 0 0 1.5px #0d1a08,0 0 0 3px #e8ffd0,0 2px 4px #000a;filter:none;pointer-events:none;animation:army-up-pulse 1.8s ease-in-out infinite}
.army-card .wr-card__up::before{content:'';position:absolute;inset:4px 5px 3px;background:#fff;clip-path:polygon(50% 0,100% 50%,68% 50%,68% 100%,32% 100%,32% 50%,0 50%);filter:drop-shadow(0 1px 0 #1a5a0e)}
@keyframes army-up-pulse{50%{transform:scale(1.1);box-shadow:0 0 0 1.5px #0d1a08,0 0 0 3px #e8ffd0,0 0 10px 3px #9effa0cc}}
.army-card .slot-bonus{flex:none;padding:0 3px;border-radius:4px;color:#eaffea;font:900 11px/14px var(--wr-font-body);text-shadow:0 1px 0 #000;background:linear-gradient(var(--wr-emerald-hi),var(--wr-emerald-lo));box-shadow:0 0 0 1px var(--wr-ink)}
.army-card.is-menu{z-index:2;transform:translateY(-3px);box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-cyan),0 0 16px 4px #7fe3f099,0 8px 12px #0008}
.wr-army:has(.army-card.is-menu) .army-card.is-selected:not(.is-menu){transform:none;box-shadow:0 0 0 1px var(--wr-ink),0 4px 8px #0008}
.army-card.drop-ready{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-cyan),0 0 16px 4px #7fe3f099}
.army-card.is-target{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-cyan),0 0 12px 2px #7fe3f088}

/* Stats strip: Avg Lv · Army Upgrades · Avg Cost. */
.wr-army__stats{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px}
.wr-army__stats .wr-army__stat{justify-content:center;min-width:0;height:32px;padding:0 6px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#lobby-panel,body) .wr-army .army-upgrades-button{min-height:40px;padding:4px 12px 5px;font-size:15px!important}
:is(#lobby-panel,body) .wr-army .army-save{align-self:center;padding:4px 16px 5px}
/* The Army tab keeps no status line: saving is silent, so the line only takes space while it shows an error. */
#lobby-panel[data-page="army"]>#lobby-status:empty{display:none}

/* Collection: Troops header, filter icon rows, card grid. */
.wr-army__collection{display:flex;flex-direction:column;gap:8px}
.wr-army__colhead{position:relative;min-height:54px;padding:6px 10px}
:is(#lobby-panel,body) .wr-army .army-filter-toggle{flex:none;width:44px;min-width:44px;height:44px;min-height:44px;padding:0}
.army-filter-toggle>svg{width:24px;height:24px}
.wr-army__coltitle{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
:is(#lobby-panel,body) .wr-army__coltitle h2{margin:0;color:var(--wr-text);font:900 20px/1.05 var(--wr-font-display);letter-spacing:.02em;text-shadow:var(--wr-text-shadow)}
.wr-army__coltitle>span{color:var(--wr-text-dim);font:700 13px/1.1 var(--wr-font-body)}
:is(#lobby-panel,body) .wr-army .army-filter-clear{flex:none;padding:4px 12px 5px}
/* Sort button mirrors the filter button on the right of the Troops row; a small arrow chip shows the active direction. */
:is(#lobby-panel,body) .wr-army .army-sort-toggle{position:relative;flex:none;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;margin-left:auto}
.army-sort-toggle>svg{width:24px;height:24px}
.army-sort-toggle__dir{position:absolute;right:-5px;bottom:-5px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:#3a2206;font:900 9px/1 var(--wr-font-body);background:linear-gradient(#fff0b8,#e0a93a 55%,#9a6618);box-shadow:0 0 0 1.5px var(--wr-ink),0 1px 2px #000a;pointer-events:none}
.collection-sort{padding:8px}
.army-sort-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
:is(#lobby-panel,body) .wr-army :is(.army-sort-option,.army-sort-dir){min-width:0;min-height:36px;margin:0;padding:6px 12px;color:var(--wr-text);font:800 13px/1 var(--wr-font-body);white-space:nowrap;border:2px solid transparent;border-radius:18px;background:linear-gradient(#4a5680,#1a2038) padding-box,var(--wr-iron) border-box;box-shadow:0 0 0 1px var(--wr-ink),0 2px 4px #0009;cursor:pointer}
:is(#lobby-panel,body) .wr-army .army-sort-option.is-active{background:linear-gradient(var(--wr-sapphire-hi),var(--wr-sapphire-lo)) padding-box,var(--wr-brass) border-box;box-shadow:0 0 0 1px var(--wr-ink),0 0 10px 2px #7fb8ff99}
:is(#lobby-panel,body) .wr-army .army-sort-dir{color:#3a2206;background:linear-gradient(#fff0b8,#e0a93a 55%,#9a6618) padding-box,var(--wr-brass) border-box}
.collection-filters{display:flex;flex-direction:column;gap:8px;padding:10px 8px}
.army-filter-row{display:grid;grid-template-columns:repeat(7,minmax(0,44px));justify-content:center;gap:6px 5px}
.army-filter-row--traits{grid-template-columns:repeat(5,minmax(0,44px))}
:is(#lobby-panel,body) .wr-army .army-filter{display:grid;place-items:center;width:100%;height:auto;aspect-ratio:1;min-width:0;min-height:0;padding:0;color:var(--wr-text);font:900 13px/1 var(--wr-font-body);border:2px solid transparent;border-radius:50%;background:radial-gradient(circle at 50% 35%,#4a5680,#1a2038) padding-box,var(--wr-iron) border-box;box-shadow:0 0 0 1px var(--wr-ink),inset 0 2px 4px #0008,0 2px 4px #0009;cursor:pointer}
:is(#lobby-panel,body) .wr-army .army-filter>img{width:76%;height:76%;object-fit:contain;border-radius:50%}
:is(#lobby-panel,body) .wr-army .army-filter.is-active{background:radial-gradient(circle at 50% 35%,var(--wr-sapphire-hi),var(--wr-sapphire-lo)) padding-box,var(--wr-brass) border-box;box-shadow:0 0 0 1px var(--wr-ink),0 0 10px 2px #7fb8ff99}
.army-filter-count{margin:0;text-align:center;font-size:14px}
.wr-army__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px;padding:10px 8px}

/* Unit detail actions (Equip / Swap). */
.inspector-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:10px 0}
:is(#lobby-panel,body) .inspector-actions .wr-btn{padding:4px 16px 5px}

/* First leader choice. */
.wr-army--first{align-items:center;text-align:center}
.first-leader-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
:is(#lobby-panel,body) .first-leader-choices>button{display:flex;flex-direction:column;align-items:center;gap:8px;width:110px;padding:10px 6px;color:var(--wr-text);border:2px solid transparent;border-radius:10px;background:linear-gradient(#2b3350,#1d2338) padding-box,var(--wr-brass) border-box;box-shadow:0 0 0 1px var(--wr-ink),0 4px 10px #0009}
.first-leader-choices .army-coin__ring{width:76px;height:76px}
.first-leader-choices strong{display:grid;place-items:center;width:100%;min-height:3.45em;font:800 14px/1.15 var(--wr-font-body);text-align:center;overflow-wrap:anywhere}
.first-leader-choices>button>.wr-btn{margin-top:auto}

/* ---------- Army slot upgrades (ref "slot tier" view) ---------- */
dialog.army-upgrades-dialog{width:min(440px,94vw);max-height:94dvh;overflow:auto;padding:12px 14px 16px;color:var(--wr-text);font-family:var(--wr-font-body)}
dialog.army-upgrades-dialog[open]{display:flex;flex-direction:column;gap:10px}
.army-upgrades__top{display:flex;justify-content:flex-end}
.army-upgrades__valor{height:32px}
.army-upgrades__valor>img{order:2;margin:-4px -12px -4px 0}
dialog.army-upgrades-dialog .army-upgrades__title{max-width:100%;margin:0 auto;font-size:17px}
.army-upgrade-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(122px,auto);gap:6px;padding:8px;border-radius:10px;background:linear-gradient(#141826,#20263b);box-shadow:inset 0 2px 8px #000c,0 0 0 1px var(--wr-ink),0 1px 0 #ffffff1a}
.army-upgrade-board .army-upgrade-leader{grid-row:span 2}
.army-upgrade-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:8px 3px 8px;color:#fff;font-family:var(--wr-font-body);text-align:center;cursor:pointer;border:2px solid transparent;border-radius:9px;
 background:linear-gradient(180deg,#ffffff40,#fff0 30%,#00000030 100%) padding-box,linear-gradient(180deg,var(--tier-hi),var(--tier) 45%,var(--tier-lo)) padding-box,linear-gradient(180deg,var(--tier-rim),var(--tier-lo)) border-box;
 box-shadow:0 0 0 1px var(--wr-ink),inset 0 -3px 6px #0005,0 3px 6px #0009;transition:transform .14s,box-shadow .14s;overflow:hidden}
.army-upgrade-slot:focus-visible{outline:2px solid var(--wr-gold-hi);outline-offset:2px}
.army-upgrade-slot .army-upgrade-slot__medal{flex:none;width:44px;height:44px}
.army-upgrade-slot .army-upgrade-slot__medal>img{width:30px;height:30px;border-radius:50%}
.army-upgrade-slot .army-upgrade-slot__medal>svg{width:28px;height:28px}
.army-upgrade-slot strong{max-width:100%;font:800 13px/1.1 var(--wr-font-body);text-shadow:0 1px 0 #000,0 0 3px #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.army-upgrade-slot__tier{font:700 11px/1 var(--wr-font-body);color:#fff;opacity:.9;text-shadow:0 1px 0 #000}
.army-upgrade-slot__pips{display:flex;gap:3px;margin-top:auto}
.army-upgrade-slot__pips>i{width:12px;height:13px;background:linear-gradient(#1a1622,#3a3348);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.army-upgrade-slot__pips>i.is-on{background:linear-gradient(#fff6cf,#f4cf6a 40%,#a8711f)}
.army-upgrade-slot--diamond .army-upgrade-slot__pips>i.is-on{background:linear-gradient(#ffffff,#8fe9ff 45%,#b48cff)}
.army-upgrade-slot--diamond::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#fff0 35%,#ffffff70 48%,#fff0 60%);background-size:260% 100%;animation:army-shimmer 3.2s ease-in-out infinite;pointer-events:none}
@keyframes army-shimmer{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
.army-upgrade-slot.is-selected{transform:translateY(-2px);box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-cyan),0 0 16px 3px #7fe3f099,0 5px 8px #000a}
.army-upgrades__info{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;text-align:center}
.army-upgrades__info>strong{font:800 16px/1.2 var(--wr-font-body);color:var(--wr-gold-hi)}
.army-upgrades__info>span{font:700 14px/1.2 var(--wr-font-body);color:var(--wr-text-dim)}
.army-upgrades__info>.wr-btn{flex-basis:auto}
.slot-trait-choices:empty{display:none}
.slot-trait-choices h3{margin:0 0 8px;text-align:center;font-size:16px}
.slot-trait-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.slot-trait-grid>button{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:64px;padding:6px 2px;color:var(--wr-text);font:700 12px/1.1 var(--wr-font-body);border:1.5px solid transparent;border-radius:8px;background:linear-gradient(#2b3350,#1d2338) padding-box,linear-gradient(var(--wr-gold),var(--wr-gold-lo)) border-box;box-shadow:0 0 0 1px var(--wr-ink),0 2px 4px #0009;cursor:pointer}
.slot-trait-grid>button>img{width:30px;height:30px;object-fit:contain;border-radius:50%}
.slot-trait-grid>button:disabled{filter:grayscale(.8) brightness(.7);cursor:not-allowed}
/* Rune Dust slot type change (bottom row) */
.army-upgrades__top{gap:8px}
.army-upgrades__arclight>img{width:26px;height:26px;object-fit:contain}
.army-upgrades__change.wr-btn{gap:8px}
.army-upgrades__cost--small{padding:1px 2px 1px 8px;font-size:13px}
.army-upgrades__cost--small>img{width:20px;height:20px}
.army-upgrades__note{flex-basis:100%;font:700 12px/1.3 var(--wr-font-body);color:var(--wr-text-dim)}
.army-upgrades__note.is-short{color:#ff9d8a}
dialog.army-upgrades-dialog .slot-trait-choices:not(:empty){display:block;flex:none;padding:10px;border-radius:10px;background:linear-gradient(#1d2338,#151a2b);box-shadow:0 0 0 1px var(--wr-ink),inset 0 0 0 1px #e9c06340,inset 0 2px 6px #0008}
.slot-trait-choices__head{display:grid;gap:2px;margin:0 0 8px;text-align:center}
.slot-trait-choices__head h3{margin:0;color:var(--wr-gold-hi)}
.slot-trait-choices__head small{font:700 12px/1.3 var(--wr-font-body);color:var(--wr-text-dim)}
.slot-trait-choices__short{margin:0 0 8px;text-align:center;font:800 13px/1.3 var(--wr-font-body);color:#ff9d8a}
.slot-trait-grid>button:not(:disabled):hover,.slot-trait-grid>button:not(:disabled):focus-visible{background:linear-gradient(#3a4468,#262e4a) padding-box,linear-gradient(var(--wr-gold-hi),var(--wr-gold)) border-box;outline:none}
.slot-trait-grid>button:not(:disabled):active{transform:translateY(2px)}
.army-upgrades__actions{display:flex;flex-direction:column;align-items:center;gap:6px}
.army-upgrades__upgrade.wr-btn{gap:12px;min-width:200px}
.army-upgrades__cost{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 10px;border-radius:6px;background:#0005;box-shadow:inset 0 1px 3px #000a}
.army-upgrades__cost>img{width:24px;height:24px;object-fit:contain;margin:-4px 0}
.army-upgrades__hint{margin:0;font:700 13px/1.3 var(--wr-font-body);color:var(--wr-text-dim);text-align:center}
.army-upgrade-explanation{margin:0;font-size:13px;line-height:1.4;text-align:center}
.army-upgrades__close{align-self:center;position:relative}

/* Diamond ascension: pop, flash, sparks and a "Diamond!" banner. Reduced motion keeps a still glow. */
.army-upgrade-slot.is-ascending{z-index:2;animation:army-ascend .9s cubic-bezier(.3,1.5,.5,1) both}
.army-upgrade-slot.is-ascending.still{animation:none;box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px #e8fbff,0 0 22px 6px #b48cffaa}
@keyframes army-ascend{0%{transform:scale(.82);filter:brightness(2.4) saturate(.4)}45%{transform:scale(1.14);filter:brightness(1.6)}100%{transform:scale(1);filter:none}}
.slot-ascend{position:absolute;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle,#ffffffc0,#b48cff55 40%,#0000 72%);animation:army-flash 1.2s ease-out both}
.army-upgrade-slot .slot-ascend strong{max-width:none;overflow:visible;padding:4px 6px;border-radius:6px;background:linear-gradient(#3a2a6acc,#1d1638cc);box-shadow:0 0 0 1px #e8fbff99,0 0 12px #b48cff99}
.slot-ascend strong{position:relative;z-index:1;color:#fff;font:900 15px/1 var(--wr-font-display);letter-spacing:.02em;text-shadow:0 0 8px #b48cff,0 1px 0 #000,0 0 3px #000;animation:army-banner .7s cubic-bezier(.2,1.5,.4,1) .15s both;white-space:normal}
.slot-ascend i{position:absolute;left:50%;top:45%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#eafcff;box-shadow:0 0 6px #8fe9ff,0 0 10px #ff9ad9;animation:army-spark 1s ease-out .1s both}
.slot-ascend.still{background:radial-gradient(circle,#ffffff80,#0000 70%);animation:none}
.slot-ascend.still strong{animation:none}
@keyframes army-flash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@keyframes army-banner{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes army-spark{from{transform:rotate(var(--a)) translateX(0);opacity:1}to{transform:rotate(var(--a)) translateX(var(--d,60px));opacity:0}}

/* ---------- Responsive: phone first; desktop keeps the centred column ---------- */
@media (max-width:380px){.wr-army__tray{gap:7px 3px;padding:10px 4px 6px}.army-card .wr-card__name{font-size:10px}.wr-army__grid{gap:7px 4px;padding:8px 5px}}
@media (min-width:700px){.wr-army__grid{grid-template-columns:repeat(5,minmax(0,1fr))}.army-card .army-card__talent{width:32px;height:32px}.army-card .army-card__family{width:32px;height:40px}.army-card .army-card__family>img{width:26px;height:26px}.army-card .wr-card__cost{width:28px;height:28px;font-size:16px}.army-card .wr-card__up{width:26px;height:26px}}

html.reduce-motion :is(.army-slot.is-target,.army-upgrade-slot.is-ascending,.slot-ascend,.slot-ascend strong,.slot-ascend i,.army-card .wr-card__up){animation:none!important}
@media (prefers-reduced-motion:reduce){:is(.army-slot.is-target,.army-upgrade-slot.is-ascending,.slot-ascend,.slot-ascend strong,.slot-ascend i,.army-card .wr-card__up){animation:none!important}.army-coin .army-coin__ring,.army-upgrade-slot{transition:none}.army-upgrade-slot--diamond::after{animation:none!important}}
html.reduce-motion .army-upgrade-slot--diamond::after{animation:none!important}


/* Newly unlocked leader/troop: NEW tag until tapped; a second Army tap pulses the first one. */
.army-card.is-new,.army-coin.is-new{position:relative}
.army-new-tag{position:absolute;top:-6px;right:-4px;z-index:4;padding:1px 6px;border-radius:8px;background:linear-gradient(#ff6a55,#c8261e);color:#fff;font:700 10px/14px Rubik,system-ui,sans-serif;letter-spacing:.04em;box-shadow:0 1px 3px #0009,inset 0 1px 0 #fff6;pointer-events:none}
.is-pointed{animation:wr-point-new 1.6s ease-out}
@keyframes wr-point-new{0%,35%{box-shadow:0 0 0 3px #ffd54a,0 0 22px 8px #ffd54acc}100%{box-shadow:0 0 0 0 #ffd54a00}}
@media (prefers-reduced-motion:reduce){.is-pointed{animation:none;outline:3px solid #ffd54a}}
/* Slot not upgraded yet (before bronze): keep the space, hide the empty medallion. */
.army-slot__head.is-unset{visibility:hidden}

/* Approved first champion screen; isolated from other Army UI. */
:is(#lobby-panel,body) .wr-first-champion header{position:static!important;display:block!important;inset:auto!important;transform:none!important;width:auto!important;height:auto!important;max-width:none;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;z-index:auto}
:is(#lobby-panel,body) .wr-first-champion *{box-sizing:border-box}:is(#lobby-panel,body) .wr-first-champion{margin:0;min-height:100dvh;color:#f8edda;background:radial-gradient(ellipse at 50% 0,#35445c,#101624 65%,#090d15);font-family:var(--wr-font-body,system-ui)}:is(#lobby-panel,body) .wr-first-champion button{font:inherit;cursor:pointer}:is(#lobby-panel,body) .wr-first-champion button:focus-visible{outline:3px solid #ffe19a;outline-offset:4px}:is(#lobby-panel,body) .wr-first-champion .preview{padding:8px 16px;text-align:center;color:#d1c4ad;font-size:12px;background:#080c14;border-bottom:1px solid #7c643b}:is(#lobby-panel,body) .wr-first-champion{max-width:1080px;margin:28px auto;padding:0 24px 30px}:is(#lobby-panel,body) .wr-first-champion header{text-align:center;margin-bottom:22px}:is(#lobby-panel,body) .wr-first-champion header small{color:#cfad68;letter-spacing:.16em;font-weight:800}:is(#lobby-panel,body) .wr-first-champion h1{font-family:var(--wr-font-display,serif);color:#ffe1a0;font-size:clamp(28px,5vw,42px);text-shadow:0 3px #39240e;margin:8px 0}:is(#lobby-panel,body) .wr-first-champion header p{color:#bfc5d0;margin:6px 0}:is(#lobby-panel,body) .wr-first-champion .leaders{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}:is(#lobby-panel,body) .wr-first-champion .leader{position:relative;display:grid;grid-template-columns:74px 1fr;align-items:center;gap:12px;text-align:left;min-height:108px;padding:12px 16px;border:2px solid #65533e;border-radius:12px;background:linear-gradient(#30384d,#1b2132);color:#eee5d5;box-shadow:inset 0 0 0 1px #080b13,0 5px 12px #0005}:is(#lobby-panel,body) .wr-first-champion .leader[aria-pressed=true]{border-color:#f3c976;background:linear-gradient(#4f4a3b,#262a34);box-shadow:inset 0 0 0 1px #92703a,0 0 20px #edc17420}:is(#lobby-panel,body) .wr-first-champion .leader img{width:74px;height:74px;object-fit:cover;object-position:50% 15%;border-radius:50%;border:3px solid #bd9555;background:#252e42}:is(#lobby-panel,body) .wr-first-champion .leader strong{display:block;min-height:2.4em;font-family:var(--wr-font-display,serif);font-size:19px;line-height:1.2;color:#ffe3a7}:is(#lobby-panel,body) .wr-first-champion .leader small{display:block;color:#b9c3d2;font-size:12px;margin-top:4px}:is(#lobby-panel,body) .wr-first-champion .selection{--accent:#7ac9ff;display:grid;grid-template-columns:34% 1fr;border:2px solid #ae8b51;border-radius:15px;overflow:hidden;box-shadow:inset 0 0 0 2px #17121a,0 16px 36px #0008;background:#1b2234}:is(#lobby-panel,body) .wr-first-champion .hero{position:relative;isolation:isolate;padding:24px 22px;text-align:center;background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--accent) 20%,#273146),#151c2c 74%);border-right:1px solid #806541}:is(#lobby-panel,body) .wr-first-champion .family{display:inline-block;padding:5px 18px;border:1px solid #ad874a;background:linear-gradient(#50658b,#263a5c);color:#f5e0ad;font-weight:800;font-size:12px;letter-spacing:.08em}:is(#lobby-panel,body) .wr-first-champion .figure{height:250px;position:relative;display:grid;place-items:center;margin:8px 0 14px}:is(#lobby-panel,body) .wr-first-champion .figure:after{content:'';position:absolute;bottom:0;width:180px;height:35px;border-radius:50%;background:linear-gradient(#697383,#323d51);border:3px solid #b69453;box-shadow:0 7px #151b29,0 12px 16px #0008;z-index:-1}:is(#lobby-panel,body) .wr-first-champion .figure img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 6px 5px #0008)}:is(#lobby-panel,body) .wr-first-champion .hero h2{font:900 28px/1.12 var(--wr-font-display,serif);color:#ffe2a3;margin:16px 0 8px}:is(#lobby-panel,body) .wr-first-champion .hero .style{font-weight:800;color:var(--accent);font-size:14px;margin:0}:is(#lobby-panel,body) .wr-first-champion .hero .blurb{font-size:14px;line-height:1.5;color:#d6dae3;max-width:280px;margin:12px auto}:is(#lobby-panel,body) .wr-first-champion .army{padding:22px 26px;background:linear-gradient(135deg,#30394d,#1c2538)}:is(#lobby-panel,body) .wr-first-champion .army-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}:is(#lobby-panel,body) .wr-first-champion .army h3{font:900 25px var(--wr-font-display,serif);color:#f0d6a3;margin:0}:is(#lobby-panel,body) .wr-first-champion .seal{white-space:nowrap;font-size:12px;font-weight:800;color:#b8dda2;background:#253b30;border:1px solid #5b7c4f;border-radius:20px;padding:6px 10px}:is(#lobby-panel,body) .wr-first-champion .army>p{margin:8px 0 16px;color:#bfc9d9;font-size:13px}:is(#lobby-panel,body) .wr-first-champion .troops{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}:is(#lobby-panel,body) .wr-first-champion .troop{position:relative;padding:8px 7px 10px;text-align:center;border:2px solid #86704d;border-radius:9px;background:linear-gradient(#465471,#242f47);box-shadow:inset 0 0 0 1px #111828,0 4px 5px #0004}:is(#lobby-panel,body) .wr-first-champion .troop img{height:100px;width:100%;object-fit:contain;filter:drop-shadow(0 3px 3px #0006)}:is(#lobby-panel,body) .wr-first-champion .troop strong{display:grid;place-items:center;min-height:2.5em;font-size:13px;line-height:1.2;color:#f9edcf}:is(#lobby-panel,body) .wr-first-champion .troop small{font-size:11px;color:#c1ccdf}:is(#lobby-panel,body) .wr-first-champion .cost{position:absolute;top:7px;left:7px;display:grid;place-items:center;width:24px;height:24px;border:2px solid #754a14;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffeabe,#dca73e 60%,#a7731e);color:#fff;font-weight:900;text-shadow:0 1px 2px #281508}:is(#lobby-panel,body) .wr-first-champion .summary{display:flex;justify-content:space-between;margin:17px 0 12px;padding:10px 0;border-top:1px solid #77829c44;color:#c8d2e3;font-size:12px}:is(#lobby-panel,body) .wr-first-champion .choose{width:100%;min-height:48px;border:2px solid #7e551d;border-radius:9px;color:#38230c;font:900 19px var(--wr-font-display,serif);background:linear-gradient(#ffe7ac,#e0af57 55%,#b98230);box-shadow:inset 0 0 0 1px #ffebb4,0 4px #483218}:is(#lobby-panel,body) .wr-first-champion .choose:hover{filter:brightness(1.1)}:is(#lobby-panel,body) .wr-first-champion .promise{text-align:center!important;color:#9facbf!important;font-size:11px!important;margin:10px 0 0!important}:is(#lobby-panel,body) .wr-first-champion #result{min-height:25px;text-align:center;color:#ffe1a0;margin-top:16px}:is(#lobby-panel,body) .wr-first-champion footer{text-align:center;color:#8f9db2;font-size:12px;margin-top:14px}
@media(max-width:720px){:is(#lobby-panel,body) .wr-first-champion{padding:0 12px 24px;margin-top:20px}:is(#lobby-panel,body) .wr-first-champion .leaders{gap:8px}:is(#lobby-panel,body) .wr-first-champion .leader{grid-template-columns:1fr;justify-items:center;gap:6px;padding:10px 5px;text-align:center;min-height:145px}:is(#lobby-panel,body) .wr-first-champion .leader img{width:62px;height:62px}:is(#lobby-panel,body) .wr-first-champion .leader strong{font-size:14px;min-height:3.6em;display:grid;place-items:center}:is(#lobby-panel,body) .wr-first-champion .leader small{display:none}:is(#lobby-panel,body) .wr-first-champion .selection{grid-template-columns:1fr}:is(#lobby-panel,body) .wr-first-champion .hero{border-right:0;border-bottom:1px solid #806541;padding:16px}:is(#lobby-panel,body) .wr-first-champion .figure{height:180px;max-width:240px;margin:5px auto 12px}:is(#lobby-panel,body) .wr-first-champion .hero h2{font-size:25px}:is(#lobby-panel,body) .wr-first-champion .hero .blurb{max-width:330px}:is(#lobby-panel,body) .wr-first-champion .army{padding:18px 14px}:is(#lobby-panel,body) .wr-first-champion .army h3{font-size:21px}:is(#lobby-panel,body) .wr-first-champion .troops{gap:8px}:is(#lobby-panel,body) .wr-first-champion .troop img{height:88px}:is(#lobby-panel,body) .wr-first-champion .troop strong{font-size:12px;min-height:3.6em}:is(#lobby-panel,body) .wr-first-champion .summary{font-size:11px}:is(#lobby-panel,body) .wr-first-champion .seal{font-size:10px;padding:5px 7px}}:is(#lobby-panel,body) .wr-first-champion .figure img{position:absolute;inset:0;max-height:100%;min-height:0}
@media(prefers-reduced-motion:no-preference){:is(#lobby-panel,body) .wr-first-champion .leader,:is(#lobby-panel,body) .wr-first-champion .choose{transition:filter .15s,border-color .15s}}

:is(#lobby-panel,body) .wr-first-champion{min-height:0;width:100%;margin:0 auto;padding:20px 16px;background:transparent}:is(#lobby-panel,body) .wr-first-champion .choice-error{color:#ffb7a8;text-align:center;font-size:13px;margin-top:12px}:is(#lobby-panel,body) .wr-first-champion button:disabled{cursor:wait;opacity:.65}

/* Unit info uses the same family pennant art as the army cards, at showcase size. */
.inspector-dialog .inspector-family-pennant{left:12px;top:10px;width:54px;height:72px;padding-top:6px;z-index:4;}
.inspector-dialog .inspector-family-pennant>img{width:42px!important;height:42px!important;margin:0!important;float:none;object-fit:contain;}
.inspector-dialog .inspector-family-pennant.is-split{left:12px;width:84px;gap:4px;}
.inspector-dialog .inspector-family-pennant.is-split>img{width:34px!important;height:34px!important;margin-top:4px!important;}
/* Mirror just these army portraits; models and other screens keep their orientation. */
.army-card .wr-card__art>img.is-army-mirrored{transform:scaleX(-1);}
/* Army QoL (approved Army mockup): slot bonus preview while swapping / equipping, and the receiving slot's settle. */
.army-card.is-slot-match{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 2px #7ee08f,0 0 12px 4px #7ee08fa6}
.army-card.is-target.is-slot-match{box-shadow:0 0 0 1px var(--wr-ink),0 0 0 3px var(--wr-cyan),0 0 12px 4px #7ee08fa6}
.army-card.is-slot-match .wr-hex-wrap{filter:drop-shadow(0 0 3px #7ee08f) drop-shadow(0 2px 1px #0008)}
.army-card .slot-bonus{cursor:help}
.army-slot__chip{position:absolute;z-index:4;left:calc(50% + 14px);top:-6px;padding:0 3px;border-radius:4px;color:#eaffea;font:900 11px/14px var(--wr-font-body);text-shadow:0 1px 0 #000;background:linear-gradient(var(--wr-emerald-hi),var(--wr-emerald-lo));box-shadow:0 0 0 1px var(--wr-ink);cursor:help;-webkit-tap-highlight-color:transparent}
.army-slot__head:not(.is-unset){cursor:help;-webkit-tap-highlight-color:transparent}
.wr-army__tray .army-slot.is-settling{z-index:2;animation:army-settle .5s cubic-bezier(.3,1.5,.5,1) 1;animation-delay:var(--settle-t,0ms)}
.wr-army__tray .army-slot.is-settling::after{content:'';position:absolute;inset:-3px;z-index:5;border-radius:10px;pointer-events:none;box-shadow:0 0 0 3px var(--wr-gold),0 0 16px 4px #ffd77a99;opacity:0;animation:army-settle-rim 1.5s ease-out 1;animation-delay:var(--settle-t,0ms)}
@keyframes army-settle{0%{transform:scale(.92)}50%{transform:scale(1.05)}100%{transform:none}}
@keyframes army-settle-rim{0%,35%{opacity:1}100%{opacity:0}}
/* Reduced motion: no settle; the gold rim simply shows for a moment (online-army.js removes the class). */
@media (prefers-reduced-motion:reduce){.wr-army__tray .army-slot.is-settling{animation:none!important}.wr-army__tray .army-slot.is-settling::after{animation:none!important;opacity:1}}
html.reduce-motion .wr-army__tray .army-slot.is-settling{animation:none!important}html.reduce-motion .wr-army__tray .army-slot.is-settling::after{animation:none!important;opacity:1}

/* ===== Army phone fixes (412px review, A1-A7): compact leader band, two-line names, icon stat chips, swap strip,
   icon-only Army Upgrades. Every size here stays at 11px or more. ===== */
/* A1: leader band hugs its coins; a short list centres, a long one scrolls sideways. */
.wr-army__leaders{gap:14px;padding:4px 8px 10px}
.wr-army__leaders>.army-coin:first-child{margin-left:auto}
.wr-army__leaders>.army-coin:last-child{margin-right:auto}
.army-coin{width:60px;height:62px}
.army-coin .army-coin__ring{width:54px;height:54px}
.army-coin .army-coin__level{bottom:-8px}
/* A2: full unit names on two lines; every card reserves both lines so a row keeps one height. */
.army-card .wr-card__name{display:flex;align-items:center;justify-content:center;height:24px;margin:2px 0 1px;font:700 11px/12px var(--wr-font-body);letter-spacing:-.01em;white-space:normal;text-overflow:clip;overflow:hidden;text-align:center;overflow-wrap:break-word}
/* A3: no gap above Troops; Avg Lv / Avg Cost are a level hex and a gold coin. */
.wr-army .wr-army__colhead{margin:0}
.wr-army__stats .wr-army__stat{justify-self:center;display:inline-flex;align-items:center;justify-content:center;height:auto;min-width:0;padding:2px;overflow:visible;cursor:help;-webkit-tap-highlight-color:transparent}
.wr-army__stat--level .wr-hex{min-width:46px;height:28px;padding:0 8px;font-size:15px}
.army-gold-coin{display:inline-grid;place-items:center;min-width:46px;height:28px;padding:0 9px;box-sizing:border-box;border:2px solid var(--wr-ink);border-radius:14px;color:#fff;font:800 15px/1 var(--wr-font-body);text-shadow:var(--wr-text-shadow);background:radial-gradient(ellipse 70% 45% at 50% 20%,#fffbe0,#fff0 70%),linear-gradient(180deg,#ffd75a,#e0961c);box-shadow:inset 0 -2px 0 #a8640c,0 2px 4px #0009}
.wr-army__stat.tap-bubble-open .wr-hex-wrap,.wr-army__stat.tap-bubble-open .army-gold-coin{filter:drop-shadow(0 0 4px #ffd77a) drop-shadow(0 2px 1px #0008)}
/* A7: swap / equip / leader-choice strip: portrait, arrow, target, Cancel. Sticky so it stays while scrolling to the troops. */
.wr-army>.army-swap-strip{position:sticky;top:4px;z-index:6;justify-content:flex-start;gap:8px;min-height:0;padding:5px 6px 5px 8px;box-shadow:inset 0 1px 0 #ffe2b04d,0 0 0 2px var(--wr-cyan),0 0 12px 2px #7fe3f066,0 3px 8px #0009}
.army-swap-strip__face{flex:none;display:grid;place-items:center;width:40px;height:40px;overflow:hidden;border:2px solid transparent;border-radius:8px;background:radial-gradient(circle at 50% 35%,#5a6894,#1d2338) padding-box,linear-gradient(#fff0b8,#d9a743 45%,#7a4f12) border-box;box-shadow:0 0 0 1px var(--wr-ink)}
:is(#lobby-panel,body) .army-swap-strip__face>img{width:100%;height:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;object-fit:cover;object-position:50% 12%}
.army-swap-strip__face>svg{width:28px;height:28px}
.army-swap-strip__arrow{flex:none;display:grid;width:32px;height:20px}
.army-swap-strip--leader .army-swap-strip__arrow{transform:rotate(-90deg)}
.army-swap-strip__arrow>svg,.army-swap-strip__target>svg{width:100%;height:100%}
.army-swap-strip__target{flex:none;display:grid;width:32px;height:32px;animation:army-strip-target 1.4s ease-in-out infinite}
.army-swap-strip--leader .army-swap-strip__target{display:none}
@keyframes army-strip-target{50%{transform:scale(.86);opacity:.75}}
:is(#lobby-panel,body) .wr-army .army-swap-strip__cancel{margin-left:auto;min-height:40px;padding:3px 14px 6px}
@media (prefers-reduced-motion:reduce){.army-swap-strip__target{animation:none!important}}
html.reduce-motion .army-swap-strip__target{animation:none!important}
/* A6: Army Upgrades: the leader is one short row on top, then the 3x2 slots like the tray; tiers are pips only. */
.army-upgrade-board{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto}
.army-upgrade-board .army-upgrade-leader{grid-row:auto;grid-column:1/-1;flex-direction:row;justify-content:center;gap:10px;min-height:0;padding:6px 10px}
.army-upgrade-board .army-upgrade-leader .army-upgrade-slot__medal{width:38px;height:38px}
.army-upgrade-board .army-upgrade-leader .army-upgrade-slot__pips{margin:0 0 0 6px}
.army-upgrade-slot{min-height:96px;padding:8px 3px 9px}
.army-upgrade-board .army-upgrade-slot.army-upgrade-leader{min-height:0}
.army-chip{display:inline-flex;align-items:center;gap:4px;cursor:help;-webkit-tap-highlight-color:transparent}
.army-upgrades__effect .wr-hex{min-width:34px;height:24px;font-size:14px}
.army-upgrades__info{gap:6px 10px}
.army-upgrades__need:empty{display:none}
.army-upgrades__need{display:flex;justify-content:center}
.army-upgrades__lock{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;border-radius:16px;background:#0006;box-shadow:inset 0 1px 3px #000a,0 0 0 1px #e9c06340;cursor:help;-webkit-tap-highlight-color:transparent}
.army-lock-icon{display:grid;width:22px;height:22px}
.army-lock-icon>svg{width:100%;height:100%}
.army-chip--sigils,.army-chip--valor,.army-chip--dust{padding:2px 8px;border-radius:12px;color:var(--wr-text);font:800 14px/1 var(--wr-font-body);background:linear-gradient(#2b3350,#1d2338);box-shadow:0 0 0 1px var(--wr-ink)}
.army-chip--sigils>img,.army-chip--valor>img,.army-chip--dust>img{width:20px;height:20px;object-fit:contain}
.army-chip.is-short,.army-chip--valor{color:#ff9d8a}
.army-chip--pips{gap:3px}
.army-chip--pips>i{width:12px;height:13px;background:linear-gradient(#1a1622,#3a3348);box-shadow:inset 0 0 0 1px #e9c06355;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.army-chip--pips>i.is-on{background:linear-gradient(#fff6cf,#f4cf6a 40%,#a8711f)}
.army-upgrades__cost.is-short{color:#ff9d8a}
.army-chip--pips.is-bronze>i{background:linear-gradient(#e0a372,#a8693a 50%,#5a3418);opacity:.55}
/* Army QoL 3 (online-army.js): saved-army tabs over the tray (Q5), the green upgrade-ready chip by the filter (Q6) and the
   one-second gold glow on the last viewed card after a battle (Q15). Painted to match the approved mockup. */
.wr-army .army-loadouts{display:flex;justify-content:center;gap:6px;margin:-2px 0 -4px}
:is(#lobby-panel,body) .wr-army .army-loadout{display:grid;place-items:center;width:42px;min-width:42px;height:28px;min-height:28px;padding:0;border:2px solid var(--wr-ink,#10142a);border-radius:8px 8px 12px 12px;background:linear-gradient(180deg,#3d4870,#262d48);color:#c4cadb;font:900 15px/1 var(--wr-font-display);box-shadow:0 2px 0 #0007;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
:is(#lobby-panel,body) .wr-army .army-loadout.is-active{border-color:#3a2306;background:radial-gradient(ellipse 90% 60% at 50% 0,#fff6d2,#fff0 70%),linear-gradient(180deg,#ffd75a,#f2a92a);color:#3a2306;box-shadow:0 2px 0 #0007,0 0 10px #ffcf4d88}
:is(#lobby-panel,body) .wr-army .army-loadout.is-empty{border:2px dashed #8f97ae;background:#1d2338;color:#8f97ae;font-size:17px;box-shadow:none}
:is(#lobby-panel,body) .wr-army .army-loadout:disabled{opacity:.6;cursor:default}
:is(#lobby-panel,body) .wr-army .army-loadout:focus-visible{outline:2px solid #ffe27a;outline-offset:2px}
:is(#lobby-panel,body) .wr-army .army-ready-toggle{position:relative;flex:none;display:grid;place-items:center;width:46px;min-width:46px;height:44px;min-height:44px;padding:0;border-radius:10px}
.army-ready-toggle__icon{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 0 1px #10142a) drop-shadow(0 1px 0 #10142a);pointer-events:none}
.army-ready-toggle__count{position:absolute;top:-8px;right:-8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;border:2px solid #2b1a0d;background:radial-gradient(circle at 35% 30%,#ff8a73,#d12a1c 60%,#8d140b);color:#fff;font:800 11px/14px var(--wr-font-body);text-align:center;box-shadow:0 2px 0 #0006;pointer-events:none}
/* .wr-btn paints box-shadow with !important, so the pressed filter shows as a gold outline and glow */
:is(#lobby-panel,body) .wr-army .army-ready-toggle.is-active{outline:3px solid #ffe27a;outline-offset:1px;filter:drop-shadow(0 0 6px #ffcf4dcc)}
.army-card.is-recalled::after{content:'';position:absolute;inset:-3px;z-index:6;border-radius:10px;pointer-events:none;box-shadow:0 0 0 3px #ffe27a,0 0 18px 5px #ffcf4daa;animation:army-recall 1s ease-out 1 forwards;animation-delay:var(--recall-t,0ms)}
@keyframes army-recall{0%{opacity:0}15%,60%{opacity:1}100%{opacity:0}}
html.reduce-motion .army-card.is-recalled::after{animation:none}
@media (prefers-reduced-motion:reduce){.army-card.is-recalled::after{animation:none}}