#hero-choice[hidden],#hero-status[hidden]{display:none!important}
#level-dialog:has(#hero-choice:not([hidden])){width:1020px;max-width:calc(100vw - 28px)}
.hero-choice-heading{margin:24px 0 14px;border-top:1px solid #b5ae8750;padding-top:19px}
.hero-choice-heading h3{font-size:24px;margin:5px 0;font-weight:500}.hero-choice-heading p{font-size:12px}
.hero-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}
.hero-choice-card{border:1px solid #8d8d6c66;background:radial-gradient(ellipse at 50% 35%,#53705c 0,#253c33 44%,#162a24 100%);color:#f1e6c6;position:relative;overflow:hidden;border-radius:8px}
.hero-choice-card.chosen{border:2px solid #dbbf7c;box-shadow:0 0 0 2px #dbbf7c22}
.hero-choice-card>button:first-child{padding:0;display:block;width:100%;height:315px;border:0;color:inherit;text-align:left;background:none;position:relative;overflow:hidden}
.hero-choice-card img{width:100%;height:258px;object-fit:contain;object-position:center 6px;filter:drop-shadow(0 8px 12px #081710);transition:transform .25s}
.hero-choice-card.chosen img{transform:scale(1.035)}
.hero-choice-caption{display:flex;flex-direction:column;position:absolute;inset:auto 0 0;background:linear-gradient(transparent,#142920 28%);padding:28px 15px 12px;gap:3px}
.hero-choice-caption small{color:var(--hero-color);font-size:11px}.hero-choice-caption b{font-size:25px;letter-spacing:.12em}.hero-choice-caption span{font-size:11px;color:#d2d1b6}.hero-choice-caption em{font-size:11px;color:#ebd397;font-style:normal;margin-top:5px}
.hero-detail-link{min-height:48px;width:100%;background:#233a30!important;color:#ded8b9!important;border:0!important;border-top:1px solid #80917b55!important;font-size:12px!important}
#hero-status{display:flex;align-items:center;gap:14px;padding:8px 13px;background:linear-gradient(110deg,#172e28,#304a39);color:#ede1bb;border-top:1px solid #a6aa7966;min-height:66px}
#hero-status>button{min-height:48px;border:1px solid #a7b18a55;background:#1d332a;color:#e5dec0;padding:7px 12px}
#hero-status [data-hero-select]{display:flex;gap:9px;text-align:left;align-items:center;min-width:155px;position:relative;overflow:hidden}
#hero-status [aria-pressed=true]{outline:2px solid #d9c381;outline-offset:-2px}
#hero-status img{height:46px;width:38px;object-fit:cover;object-position:50% 13%;transform:scale(1.8);margin-right:6px}
#hero-status [data-hero-select]>span{position:relative;min-width:88px;background:#1d332ac9}
#hero-status b{display:block;font-size:14px}#hero-status small{font-size:11px;font-weight:400;color:#c6cbae}
.hero-meter{display:block;height:4px;background:#0c241e;margin-top:5px;width:100%;overflow:hidden}.hero-meter i{display:block;height:100%;background:#c1d899}.hero-meter.xp{height:2px;margin-top:3px}.hero-meter.xp i{background:#ceb9e6}
.hero-status-text{font-size:12px;flex:1}.hero-status-text small{display:block;margin-top:5px}
#hero-dialog{width:660px;max-width:calc(100vw - 24px)}#hero-dialog button{min-height:48px;min-width:48px}
.hero-skill-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.hero-skill-tabs button{flex:1;min-width:110px;font-size:12px}.hero-skill-tabs button[aria-pressed=true]{background:#3b5641;color:#f3e5bc}
.hero-upgrade-box{background:#75825a18;border:1px solid #93987955;padding:16px;margin-top:18px}.hero-upgrade-box h3{margin:0 0 8px}.hero-upgrade-box button{width:100%}.hero-skill-description{border-top:1px solid #8b967b44;padding:9px 0}
#hero-dialog .close{width:48px;height:48px}#battlefield{touch-action:none}
@media(max-width:720px){.hero-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hero-choice-card>button:first-child{height:280px}.hero-choice-card img{height:230px}.hero-choice-caption{padding:27px 10px 10px}.hero-choice-caption b{font-size:23px}#hero-status{gap:8px;padding:7px;flex-wrap:wrap}#hero-status [data-hero-select]{min-width:145px}#hero-status>button:last-child{font-size:12px}.hero-status-text{min-width:130px}.hero-choice-heading h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){.hero-choice-card img{transition:none;transform:none!important}}

@media(max-width:720px){.hero-choice-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:3px 3px 12px}.hero-choice-card{flex:0 0 min(72vw,250px);scroll-snap-align:start}#hero-status{flex-shrink:0}}