/* Hero screen coordinates follow the 1080-wide reference. */
main.game-shell.equipment-mode>.controls{padding:0!important;overflow:hidden!important;display:flex;flex:1;min-height:0}
main.game-shell .mobile-panel[data-panel="equipment"].active{display:flex;flex-direction:column;min-height:0;height:100%;width:100%;padding:0;background:#f6ebbb;overflow:hidden}
main.game-shell [data-panel="equipment"]>.panel-header{display:none}
main.game-shell #heroStatus{position:relative;display:grid;grid-template-columns:54.7% 45.3%;flex:0 0 auto;width:100%;height:calc(842 * var(--hu));min-height:0;padding:0;margin:0;border:0;border-bottom:6px solid #f2c789;border-radius:0!important;background:#394146 url('assets/ui/hero-room-890.png') center/100% 100% no-repeat;overflow:hidden;gap:0;box-shadow:none}
main.game-shell #heroStatus .hero-loadout{position:relative;width:100%;height:100%;min-height:0;margin:0;padding:0;background:transparent!important;border:0;border-radius:0!important;overflow:visible}
main.game-shell #heroStatus .loadout-hero{position:absolute;left:50%;top:auto;bottom:38%;width:30.6%;height:23.4%;max-width:none;max-height:none;object-fit:contain;transform:translateX(-50%);margin:0}
main.game-shell #heroStatus .equipped-slots{position:absolute;inset:13.5% 6.5% 23.5%;display:grid;grid-template-columns:22% 22%;grid-template-rows:repeat(3,1fr);justify-content:space-between;align-items:center;gap:0;padding:0;width:auto;height:auto}
main.game-shell #heroStatus .equipped-slots>div{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1;border:2px solid #c8bc95;border-radius:5px;background:#e6dfc9;box-shadow:inset 0 0 0 1px #fffbea;display:grid;place-items:center}
main.game-shell #heroStatus .equipped-slots>div:nth-child(-n+3){grid-column:1}
main.game-shell #heroStatus .equipped-slots>div:nth-child(1),main.game-shell #heroStatus .equipped-slots>div:nth-child(4){grid-row:1}
main.game-shell #heroStatus .equipped-slots>div:nth-child(2),main.game-shell #heroStatus .equipped-slots>div:nth-child(5){grid-row:2}
main.game-shell #heroStatus .equipped-slots>div:nth-child(3),main.game-shell #heroStatus .equipped-slots>div:nth-child(6){grid-row:3}
main.game-shell #heroStatus .equipped-slots>div:nth-child(n+4){grid-column:2}
main.game-shell #heroStatus .equipped-slots>.empty>img{opacity:.16}
main.game-shell #heroStatus .hero-growth{position:absolute;left:30%;right:30%;bottom:27%;width:auto;height:auto;padding:5px 8px;background:#20272ecc;border:0;border-radius:10px}
main.game-shell #heroStatus .growth-head{justify-content:center;margin:0;padding:0}
main.game-shell #heroStatus .growth-head>span,main.game-shell #heroStatus .growth-head>b,main.game-shell #heroStatus .fragment-head,main.game-shell #heroStatus .fragment-bar{display:none}
main.game-shell #heroStatus .growth-head>strong{display:flex;justify-content:center;gap:2px}
main.game-shell #heroStatus .growth-head i{width:calc(34 * var(--hu));height:calc(34 * var(--hu));font-size:0;background:url('assets/ui/star-empty-932.png') center/contain no-repeat}
main.game-shell #heroStatus .growth-head i.filled{background-image:url('assets/ui/star-filled-casual.png')}
main.game-shell #heroStatus .hero-info{position:relative;display:flex;flex-direction:column;gap:0;margin:calc(26 * var(--hu)) calc(24 * var(--hu)) calc(29 * var(--hu)) 0;padding:calc(26 * var(--hu));border:1px solid #71623a;border-radius:10px;background:#20282e;min-width:0;overflow:hidden;font-family:'Malgun Gothic',system-ui,sans-serif}
main.game-shell #heroStatus .profile-identity{display:block;margin:0;padding:0;border:0;background:none}
main.game-shell #heroStatus .profile-identity>div{position:relative;display:block}
main.game-shell #heroStatus .profile-identity small{display:inline-block;padding:3px 9px;border-radius:15px;background:#574b28;color:#e7c35d;font-size:calc(22 * var(--hu));font-weight:700}
main.game-shell #heroStatus .profile-identity strong{display:block;margin:calc(18 * var(--hu)) 0;font-size:calc(42 * var(--hu));line-height:1.2;color:#fff}
main.game-shell #heroStatus .profile-identity>div>span:not(.hero-profile-level){display:none}
main.game-shell #heroStatus .hero-profile-level{position:absolute;right:0;bottom:0;display:flex;gap:2px;margin:0;font-size:calc(30 * var(--hu));line-height:1.2;font-weight:800}
main.game-shell #heroStatus .hero-profile-level em{color:#ffe074;font-style:normal}.hero-profile-level i{color:#b5b7b9;font-style:normal}
main.game-shell #heroStatus .profile-identity>b{display:flex;justify-content:space-between;align-items:center;width:100%;margin:calc(16 * var(--hu)) 0 0;padding:calc(14 * var(--hu));background:#302917;border:1px solid #977934;border-radius:5px;color:#eccc60;font-size:calc(25 * var(--hu));line-height:1.3}
main.game-shell #heroStatus .profile-identity>b .hero-power-value{color:white;font-variant-numeric:tabular-nums}
main.game-shell #heroStatus .profile-stats{display:flex;flex-direction:column;gap:0;padding:calc(12 * var(--hu)) calc(16 * var(--hu));margin:0;background:none;border:0}
main.game-shell #heroStatus .profile-stats>div{display:flex;justify-content:space-between;align-items:center;min-height:calc(49 * var(--hu));padding:0;margin:0;border:0;background:none;gap:8px}
main.game-shell #heroStatus .profile-stats>div>span,main.game-shell #heroStatus .profile-stats>div>b{font-family:inherit;font-size:calc(24 * var(--hu));line-height:1.4;letter-spacing:0;text-shadow:none;-webkit-text-stroke:0}
main.game-shell #heroStatus .profile-stats>div>span{color:#b4b7b8;font-weight:500}
main.game-shell #heroStatus .profile-stats>div>b{color:#fff;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
main.game-shell #heroStatus .profile-stats>.trait-stat{margin-top:calc(22 * var(--hu));padding-top:calc(14 * var(--hu));border-top:1px solid #a08535}
main.game-shell #heroStatus .trait-stat b span{font:inherit}
main.game-shell #heroStatus .profile-fixed-rules,main.game-shell #heroStatus .star-next-effect{display:none}
main.game-shell #heroStatus .hero-upgrade-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;padding:0;border:0}
main.game-shell #heroStatus .hero-upgrade-actions button{height:calc(60 * var(--hu));min-height:0;margin:0;padding:0;font-size:calc(23 * var(--hu));border-radius:4px}
main.game-shell #heroStatus .hero-art-preview-button{position:absolute;right:calc(25 * var(--hu));top:calc(22 * var(--hu));width:calc(44 * var(--hu));height:calc(44 * var(--hu));z-index:3}
main.game-shell [data-panel="equipment"]>.hero-roster-heading{flex:0 0 48px;margin:14px 13px 0;padding:8px 14px;background:#fffbed;border-radius:15px 15px 0 0;align-items:center}
main.game-shell [data-panel="equipment"]>#equipmentHeroes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:calc(270 * var(--hu));gap:6px;align-content:start;flex:1;min-height:0;width:auto;margin:0 13px 18px;padding:4px 12px 8px;background:#fffbed;border-radius:0 0 15px 15px;overflow-y:auto;scrollbar-width:none}
main.game-shell #equipmentHeroes>button{width:100%;height:100%;min-height:0;margin:0;border:2px solid #c8c2a7;border-radius:12px;background:linear-gradient(#fffdf1,#f6f0d9);box-shadow:0 1px 2px #0002}
main.game-shell #equipmentHeroes>button.selected{border-color:#c79e31;background:linear-gradient(#fcf3cd,#efd778)}
main.game-shell #equipmentHeroes>button .portrait{width:100%;height:78%;margin:0}
main.game-shell #equipmentHeroes>button .portrait img{width:100%;height:100%;object-fit:contain}
main.game-shell #heroStatus .hero-loadout:before{content:none}
main.game-shell #heroStatus .hero-info{height:auto;align-self:stretch}
main.game-shell #heroStatus .profile-identity>b>span{display:block;font-size:inherit;font-weight:800;color:inherit}
main.game-shell #heroStatus .profile-identity>b>.hero-power-value{color:#fff}
main.game-shell #heroStatus .star-next-effect{display:flex;justify-content:space-between;border:0;margin:0 8px;padding:4px 0;background:none;font-size:10px;color:#a79d82}
main.game-shell #heroStatus .star-next-effect>b{font-size:inherit}
main.game-shell #equipmentHeroes{grid-template-rows:none}
main.game-shell #equipmentHeroes>button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px}
main.game-shell #equipmentHeroes .roster-stars{display:flex;justify-content:center;gap:0;height:15%;width:100%}
main.game-shell #equipmentHeroes .roster-stars img{width:calc(31 * var(--hu));height:calc(31 * var(--hu));object-fit:contain;filter:none}
main.game-shell #equipmentHeroes>button.locked .portrait{filter:grayscale(1);opacity:.5}
main.game-shell #equipmentHeroes>button.locked .hero-lock{display:block;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:18px;z-index:2}
main.game-shell #equipmentHeroes>button.locked .roster-stars{opacity:.35}
main.game-shell [data-panel="equipment"]>.hero-roster-heading{display:flex;justify-content:space-between;font-size:18px}
.hero-roster-filter{height:30px;min-width:90px;padding:0 10px;background:#fffdf6;color:#28333e;border:1px solid #ded8c5;border-radius:8px;font:700 12px 'Malgun Gothic',sans-serif}
main.game-shell #equipmentHeroes>button[hidden]{display:none}
main.game-shell #equipmentHeroes>button .portrait{flex:0 0 78%;max-width:none;max-height:none;background:none}
main.game-shell #equipmentHeroes>button .portrait img{max-width:none;max-height:none;transform:none}
main.game-shell #equipmentHeroes>button.locked .hero-lock{opacity:1!important;visibility:visible!important;color:#fff9dd;font-size:18px!important;line-height:1;background:none;width:auto;height:auto}
/* Restore the established magnifier artwork and remove the retired effect row. */
main.game-shell #heroStatus .hero-art-preview-button{left:auto;border:2px solid #a98b50;border-radius:6px;background:#292820e8 url('assets/ui/hero-preview-magnifier.png') center/70% 70% no-repeat;box-shadow:inset 0 0 0 2px #4d402b,0 2px 3px #0008}
main.game-shell #heroStatus .hero-art-preview-button:before,main.game-shell #heroStatus .hero-art-preview-button:after{display:none}
main.game-shell #heroStatus .star-next-effect{display:none}
/* Name and level share a baseline and the same edges as the power row. */
main.game-shell #heroStatus .profile-identity>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:6px;row-gap:calc(18 * var(--hu))}
main.game-shell #heroStatus .profile-identity small{grid-column:1 / -1;justify-self:start}
main.game-shell #heroStatus .profile-identity strong{grid-column:1;grid-row:2;margin:0;min-width:0}
main.game-shell #heroStatus .hero-profile-level{position:static;grid-column:2;grid-row:2;align-self:baseline;justify-self:end;align-items:baseline;margin:0;white-space:nowrap}
main.game-shell #heroStatus .hero-profile-level em,main.game-shell #heroStatus .hero-profile-level i{font-size:inherit;line-height:inherit}
main.game-shell #heroStatus .profile-identity>div{width:100%;padding:0;margin:0;box-sizing:border-box}
main.game-shell #heroStatus .hero-profile-level{width:auto;max-width:none;padding:0;inset:auto;transform:none}
/* Remove legacy relative offsets and share the badge/magnifier row. */
main.game-shell #heroStatus .profile-identity>div{inset:auto;transform:none;translate:none;grid-template-rows:calc(44 * var(--hu)) auto}
main.game-shell #heroStatus .profile-identity small{inset:auto;transform:none;translate:none;align-self:center}
main.game-shell #heroStatus .hero-art-preview-button{top:calc(26 * var(--hu));right:calc(26 * var(--hu))}
/* Match power typography to the stats and separate their sections. */
main.game-shell #heroStatus .profile-identity>b{font-size:calc(24 * var(--hu))}
main.game-shell #heroStatus .profile-stats{margin-top:calc(16 * var(--hu))}
/* Use the new trait border only, without the legacy pseudo-element divider. */
main.game-shell #heroStatus .profile-stats>.trait-stat:before{content:none}
/* Give the rarity/weapon badge more vertical padding only. */
main.game-shell #heroStatus .profile-identity small{padding-top:5px;padding-bottom:5px}
/* Place one divider midway between equal-height stat rows. */
main.game-shell #heroStatus .profile-stats>.trait-stat{position:relative;margin-top:16px;padding-top:0;border-top:0;min-height:calc(49 * var(--hu))}
main.game-shell #heroStatus .profile-stats>.trait-stat:before{content:'';position:absolute;left:0;right:0;top:-8.5px;height:1px;background:#a08535;pointer-events:none}
main.game-shell #heroStatus .profile-stats>.attack-speed-stat>b{margin-top:0}
/* Keep the trait divider subtle against the dark panel. */
main.game-shell #heroStatus .profile-stats>.trait-stat:before{background:#655f4c}
/* Use a single bottom-center anchor for every hero portrait. */
main.game-shell #heroStatus .loadout-hero{left:50%;right:auto;translate:none;transform:translateX(-50%);transform-origin:50% 100%;object-position:center bottom}
/* Taller upgrade actions, preserving their horizontal layout. */
main.game-shell #heroStatus .hero-upgrade-actions button{height:calc(72 * var(--hu))}
/* Softer corners on the hero upgrade buttons. */
main.game-shell #heroStatus .hero-upgrade-actions button{border-radius:8px}
/* Translucent hero information panel without an outline. */
main.game-shell #heroStatus .hero-info{border-color:transparent;background:rgb(32 40 46 / 70%);box-shadow:none}
/* Align the identity with the stat text and balance action insets. */
main.game-shell #heroStatus .profile-identity>div{padding-inline:0}
main.game-shell #heroStatus .hero-art-preview-button{right:calc(26 * var(--hu))}
main.game-shell #heroStatus .hero-upgrade-actions{left:12px;right:12px;bottom:12px;width:auto}

main.game-shell #heroStatus .profile-identity strong{margin-left:calc(8 * var(--hu))}
main.game-shell #heroStatus .hero-profile-level{margin-right:calc(8 * var(--hu))}

/* Four equipment slots on either side of the hero. */
main.game-shell #heroStatus .equipped-slots{grid-template-rows:repeat(4,1fr)}
main.game-shell #heroStatus .equipped-slots>div:nth-child(1){grid-column:1;grid-row:1}
main.game-shell #heroStatus .equipped-slots>div:nth-child(2){grid-column:1;grid-row:2}
main.game-shell #heroStatus .equipped-slots>div:nth-child(3){grid-column:1;grid-row:3}
main.game-shell #heroStatus .equipped-slots>div:nth-child(4){grid-column:1;grid-row:4}
main.game-shell #heroStatus .equipped-slots>div:nth-child(5){grid-column:2;grid-row:1}
main.game-shell #heroStatus .equipped-slots>div:nth-child(6){grid-column:2;grid-row:2}
main.game-shell #heroStatus .equipped-slots>div:nth-child(7){grid-column:2;grid-row:3}
main.game-shell #heroStatus .equipped-slots>div:nth-child(8){grid-column:2;grid-row:4}

/* Increase vertical spacing between the four equipment rows. */
main.game-shell #heroStatus .equipped-slots{bottom:17.5%}

/* Floating rarity stars with a dark halo instead of a pill. */
main.game-shell #heroStatus .hero-growth{background:transparent;box-shadow:none;border:0}
main.game-shell #heroStatus .growth-head i{flex-shrink:0;filter:drop-shadow(0 0 2px #0005) drop-shadow(0 1px 2px #0003)}

/* Enlarge the hero information rarity stars. */
main.game-shell #heroStatus .growth-head i{width:calc(60 * var(--hu));height:calc(60 * var(--hu))}

/* Tighten the gap below the hero name and level. */
main.game-shell #heroStatus .profile-identity>b{margin-top:calc(8 * var(--hu))}
main.game-shell #heroStatus .profile-identity{height:88px;min-height:0}

/* Center the rarity row two pixels above the hero's bottom anchor. */
main.game-shell #heroStatus .hero-growth{left:50%;right:auto;top:calc(62% + 38 * var(--hu));bottom:auto;width:max-content;padding:0;transform:translateX(-50%)}
/* Put the locked hero pill at the same anchor as the rarity stars. */
main.game-shell #heroStatus .locked-hero-preview .profile-lock{inset:auto;left:50%;top:calc(62% - 2px);width:max-content;height:calc(60 * var(--hu));padding:0;transform:translateX(-50%);gap:0}
main.game-shell #heroStatus .locked-hero-preview .profile-lock>span{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%)}

/* Center the unavailable hero indicator inside the stats panel. */
main.game-shell #heroStatus .hero-info>.profile-lock{position:absolute;inset:auto;left:50%;top:50%;width:max-content;height:auto;padding:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
main.game-shell #heroStatus .hero-info>.profile-lock>span{position:static;flex:0 0 30px;width:30px;height:30px;font-size:0;background:url('assets/ui/hero-locked-padlock-923.png') center/contain no-repeat;filter:grayscale(1) brightness(.6);transform:none}
main.game-shell #heroStatus .hero-info>.profile-lock>b{margin:0;min-width:56px;height:24px;display:grid;place-items:center;padding:0 12px;border-radius:999px;line-height:1}
/* Muted information typography for heroes that are not unlocked. */
main.game-shell #heroStatus:has(.locked-hero-preview) .hero-info .profile-identity strong,
main.game-shell #heroStatus:has(.locked-hero-preview) .hero-info .profile-identity small,
main.game-shell #heroStatus:has(.locked-hero-preview) .hero-info .profile-identity>b,
main.game-shell #heroStatus:has(.locked-hero-preview) .hero-info .profile-identity>b>span{color:#929597}
main.game-shell #heroStatus:has(.locked-hero-preview) .hero-info .profile-identity small{background:#424548}
main.game-shell #heroStatus:has(.locked-hero-preview) .hero-info .profile-identity>b{background:#303538;border-color:#55595b}
main.game-shell #heroStatus:has(.locked-hero-preview) .hero-info .profile-traits{color:#929597}
main.game-shell #heroStatus:has(.locked-hero-preview) .hero-info .profile-traits b{color:#929597;border-color:#55595b;background:#303538}
main.game-shell #heroStatus .hero-info>.profile-lock{color:#929597;text-shadow:none}
/* Show only the supplied lock artwork, without the old label or decoration. */
main.game-shell #heroStatus .hero-info>.profile-lock>b{display:none}
main.game-shell #heroStatus .hero-info>.profile-lock>span{font-size:0;color:transparent;text-shadow:none}
main.game-shell #heroStatus .hero-info>.profile-lock>span:before,
main.game-shell #heroStatus .hero-info>.profile-lock>span:after{content:none;display:none}
/* Larger locked-state icon and smaller roster portraits. */
main.game-shell #heroStatus .hero-info>.profile-lock>span{flex-basis:38px;width:38px;height:38px}
main.game-shell #equipmentHeroes>button .portrait img{width:72%;height:72%}
/* Anchor roster artwork at its bottom center. */
main.game-shell #equipmentHeroes>button .portrait{display:flex;align-items:flex-end;justify-content:center}
main.game-shell #equipmentHeroes>button .portrait img{object-position:center bottom;transform-origin:50% 100%;margin:0}
/* Raise roster hero artwork while keeping its bottom-center origin. */
main.game-shell #equipmentHeroes>button .portrait img{translate:0 -30px}
/* Shorten roster cards from the bottom; preserve hero artwork position. */
main.game-shell [data-panel="equipment"]>#equipmentHeroes{grid-auto-rows:calc(270 * var(--hu) - 20px)}
main.game-shell #equipmentHeroes>button .portrait{flex-basis:calc(78% + 15.6px);height:calc(78% + 7.8px);transform:translateY(10px)}
main.game-shell #equipmentHeroes .roster-stars{height:calc(15% + 3px);flex-shrink:0;transform:translateY(-10px)}

/* Match loadout actions to the upgrade row across the panel. */
main.game-shell #heroStatus .hero-loadout .loadout-actions{left:50%;right:auto;top:auto;bottom:calc(29 * var(--hu) + 13px);width:calc((100% / .547 * .453) - 24 * var(--hu) - 26px);display:grid;grid-template-columns:1fr 1fr;gap:8px;transform:translateX(-50%)}
main.game-shell #heroStatus .hero-loadout .loadout-actions button{width:100%;height:calc(72 * var(--hu));min-height:0;margin:0;border-radius:8px;font-size:calc(23 * var(--hu));box-shadow:none}
/* Use the same complete button sizing rules as the upgrade actions. */
main.game-shell #heroStatus .hero-loadout .loadout-actions button{box-sizing:border-box;min-width:0;padding:0;line-height:normal;font-family:Arial,sans-serif;font-weight:400;display:flex;align-items:center;justify-content:center;border-width:2px;scale:1}

/* Keep identical star sizing and spacing for every rarity. */
main.game-shell #equipmentHeroes .roster-stars{gap:0;justify-content:center}
main.game-shell #equipmentHeroes .roster-stars img{flex:0 0 calc(31 * var(--hu));min-width:0;margin:0;scale:1;translate:none;transform:none}
/* Subtle breathing for the owned hero portrait only. */
@keyframes heroProfileBreathing{0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(1.025)}}
main.game-shell #heroStatus .hero-loadout:not(.locked-hero-preview) .loadout-hero{animation:heroProfileBreathing 2.4s ease-in-out infinite;transform-origin:50% 100%}
main.game-shell #heroStatus .locked-hero-preview .loadout-hero{animation:none}
@media(prefers-reduced-motion:reduce){main.game-shell #heroStatus .hero-loadout .loadout-hero{animation:none}}
/* Separate the roster heading and filter from the card panel. */
main.game-shell [data-panel="equipment"]>.hero-roster-heading{background:transparent;border:0;border-radius:0;box-shadow:none;margin-bottom:8px}
main.game-shell [data-panel="equipment"]>#equipmentHeroes{border-radius:15px;padding-top:10px}
/* Match the battle controls background and meet the bottom navigation. */
main.game-shell [data-panel="equipment"]>#equipmentHeroes{background:#f8e9b8;margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
/* Use the same surface treatment as the main menu icons. */
main.game-shell [data-panel="equipment"]>#equipmentHeroes{background:#f9f5e4;border-radius:20px 20px 0 0;box-shadow:0 -1px 7px #79643b33}
/* Equal inner spacing and a scrollable roster without a visible scrollbar. */
main.game-shell [data-panel="equipment"]>#equipmentHeroes{padding:12px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-y}
main.game-shell [data-panel="equipment"]>#equipmentHeroes::-webkit-scrollbar{display:none;width:0;height:0}
main.game-shell [data-panel="equipment"]>#equipmentHeroes{scroll-snap-type:none}
/* Tighten the roster heading's vertical spacing. */
main.game-shell [data-panel="equipment"]>.hero-roster-heading{flex-basis:38px;margin-top:6px;margin-bottom:6px;padding-top:4px;padding-bottom:4px}
/* Blend the roster filter with the surrounding warm background. */
main.game-shell .hero-roster-filter{background-color:#fff5d3;border-color:#c6b783;color:#665a3c}
/* Asset icon before the roster filter label. */
.hero-roster-filter-wrap{position:relative;display:inline-flex;align-items:center}
.hero-roster-filter-wrap:before{content:'';position:absolute;left:9px;top:50%;transform:translateY(-50%);width:16px;height:16px;background:#665a3c;mask:url('assets/ui/roster-filter-950.png') center/contain no-repeat;-webkit-mask:url('assets/ui/roster-filter-950.png') center/contain no-repeat;pointer-events:none}
main.game-shell .hero-roster-filter{padding-left:28px;min-width:108px}
/* Warm focus outline for the roster filter. */
main.game-shell .hero-roster-filter:focus,
main.game-shell .hero-roster-filter:focus-visible{outline:none;outline-offset:0;border-color:#e2bd59;box-shadow:none}
/* A single equipment action occupies the center while retaining its normal width. */
main.game-shell #heroStatus .hero-loadout .loadout-actions:has(>button:only-child){grid-template-columns:1fr;justify-items:center}
main.game-shell #heroStatus .hero-loadout .loadout-actions>button:only-child{width:calc((100% - 8px)/2)}

main.game-shell .mobile-panel[data-panel="equipment"].active{background-color:#f3e8cf}

/* Softer outer shadow around the menu surface. */
main.game-shell [data-panel="equipment"]>#equipmentHeroes{box-shadow:0 -1px 7px #79643b1a}