/* Hero selection and powers share the game's restrained tactical palette. */
.hero-selection{width:100%;max-width:1120px;min-height:100svh;margin:0 auto;padding:32px;display:flex;flex-direction:column;justify-content:center;gap:25px}
.hero-selection-heading{max-width:720px;margin:0 auto;text-align:center}
.hero-selection-heading .eyebrow{color:#89bbdc;letter-spacing:2px;font-size:10px}
.hero-selection-heading h1{margin:8px 0 10px;color:#e5f0f9;font:600 clamp(25px,3vw,35px)/1.2 "Segoe UI",Arial,sans-serif;letter-spacing:.3px}
.hero-selection-heading p{color:#94aec2;font-size:13px;line-height:1.6}
.hero-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.hero-choice-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #3b5971;border-top:2px solid var(--hero-accent,#79b1d4);border-radius:10px;background:linear-gradient(160deg,#192e40,#101d2b 75%);box-shadow:0 14px 35px #0004;transition:border-color .18s,box-shadow .18s}
.hero-choice-card[data-hero-faction="Терраны"],.hero-power-panel[data-hero-faction="Терраны"]{--hero-accent:#83c4ea}
.hero-choice-card[data-hero-faction="Зерги"],.hero-power-panel[data-hero-faction="Зерги"]{--hero-accent:#c5cbbb}
.hero-choice-card[data-hero-faction="Протоссы"],.hero-power-panel[data-hero-faction="Протоссы"]{--hero-accent:#eed19b}
.hero-faction-badge{position:absolute;left:15px;bottom:11px;z-index:2;padding:5px 8px;border:1px solid var(--hero-accent,#79b1d4);border-radius:3px;background:#0e1b2ce6;color:var(--hero-accent,#a9d5f0);font-size:10px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;line-height:1.2}
.hero-choice-card:hover,.hero-choice-card:focus-within{border-color:#79b1d4;box-shadow:0 0 0 1px #6bb2df24,0 16px 38px #0005}
.hero-portrait{position:relative;height:clamp(156px,25svh,226px);flex:none;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#345a72,#162b3d 75%);border-bottom:1px solid #4f78933d}
.hero-portrait img{display:block;position:absolute;left:var(--hero-art-left,70%);top:0;width:var(--hero-art-width,112%);max-width:none;height:auto;min-height:100%;padding:0;object-fit:cover;object-position:center top;transform:translate(-50%,var(--hero-art-shift,-14%));filter:url("assets/heroes/portrait-alpha.svg#solid") drop-shadow(0 5px 9px #0007)}
.hero-choice-card[data-hero-id="mengsk"]{--hero-art-width:160%;--hero-art-left:90%;--hero-art-shift:0%}
.hero-choice-card[data-hero-id="nova"],.hero-choice-card[data-hero-id="stukov"]{--hero-art-width:140%;--hero-art-left:90%;--hero-art-shift:-9%}
.hero-choice-card[data-hero-id="kerrigan"]{--hero-art-shift:-12%}
.hero-choice-card[data-hero-id="abathur"]{--hero-art-left:65%}
.hero-choice-card[data-hero-id="zeratul"]{--hero-art-left:45%;--hero-art-shift:-11%}
.hero-choice-card[data-hero-id="tychus"]{--hero-art-left:50%;--hero-art-shift:-11%}
.hero-choice-card[data-hero-id="tassadar"]{--hero-art-left:52%;--hero-art-width:112%;--hero-art-shift:0%}
.hero-choice-card[data-hero-id="overmind"]{--hero-art-left:50%;--hero-art-width:112%;--hero-art-shift:-4%}
.hero-choice-card[data-hero-id="tassadar"] .hero-portrait img,.hero-choice-card[data-hero-id="overmind"] .hero-portrait img{filter:drop-shadow(0 5px 9px #0007)}
.hero-choice-card[data-hero-id="dehaka"],.hero-choice-card[data-hero-id="alarak"]{--hero-art-left:85%;--hero-art-width:112%;--hero-art-shift:-10%}
.hero-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#06111d0a 45%,#10223330 72%,#102233d9);pointer-events:none}
.hero-choice-copy{display:flex;flex-direction:column;flex:1;min-width:0;padding:18px 20px 20px}
.hero-choice-copy h2{margin:0 0 5px;color:#edf5fb;font:600 21px/1.2 "Segoe UI",Arial,sans-serif;letter-spacing:.1px;overflow-wrap:anywhere}
.hero-choice-copy .subtitle,.hero-choice-subtitle,.hero-subtitle{margin:0 0 16px;color:#7f9fb8;font-size:11px;line-height:1.4}
.hero-power-kind{align-self:flex-start;display:inline-flex;align-items:center;max-width:100%;padding:4px 7px;margin:0 0 9px;border:1px solid #567e9b66;border-radius:3px;color:#a9d5f0;background:#234a653d;font-size:9px;font-weight:600;line-height:1.2;letter-spacing:.8px;text-transform:uppercase}
.hero-power-kind[data-kind="passive"],.hero-power-kind.is-passive{color:#bdcfb9;background:#37544238;border-color:#79977955}
.hero-power-name{margin:0 0 8px;color:#d4e7f5;font:600 16px/1.3 "Segoe UI",Arial,sans-serif}
.hero-power-description{margin:0;color:#a9bfd0;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.hero-choice-copy .hero-power-description{flex:1;min-height:58px}
.hero-power-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:14px 0;color:#7daecb;font-size:11px;line-height:1.4;font-variant-numeric:tabular-nums}
.hero-power-meta span{white-space:normal}.hero-power-meta strong{color:#c3e6fa;font-weight:600}
.hero-choose{width:100%;min-height:44px;margin-top:auto;padding:10px 16px;border:1px solid #a5d8f3;border-radius:5px;background:linear-gradient(125deg,#9bd7f5,#5b9fc6);color:#102b3e;font-size:14px;font-weight:650;line-height:1.2;box-shadow:inset 0 1px #e5f6ff66}
.hero-choose:hover:not(:disabled){border-color:#e0f5ff;background:linear-gradient(125deg,#c3ebff,#78badf);color:#092337}
.hero-choose:focus-visible{outline:2px solid #c8edff;outline-offset:4px}
.hero-selection-menu{align-self:center;width:auto;min-width:210px;max-width:100%;margin:0;padding:9px 16px;border-color:#3e5b72;background:#132737;color:#91b2c9;font-size:11px}
@media(min-width:901px) and (max-height:750px){.hero-selection{padding:23px 30px;gap:20px}.hero-selection-heading h1{font-size:29px;margin-top:6px}.hero-portrait{height:160px}.hero-choice-copy{padding:16px 18px 18px}.hero-choice-copy h2{font-size:20px}.hero-choice-copy .subtitle,.hero-choice-subtitle{margin-bottom:13px}.hero-power-meta{margin:12px 0}}
@media(min-width:601px) and (max-width:900px){.hero-selection{padding:24px 20px;gap:20px}.hero-choice-grid{gap:13px}.hero-portrait{height:180px}.hero-choice-copy{padding:14px}.hero-choice-copy h2{font-size:19px}.hero-power-name{font-size:14px}.hero-power-description{font-size:11px}.hero-power-meta{font-size:10px}.hero-choose{font-size:13px;padding:10px}}
@media(max-width:600px){.hero-selection{min-height:100svh;justify-content:flex-start;padding:24px 18px 30px;gap:21px}.hero-selection-heading h1{font-size:27px;margin:7px 0 9px}.hero-selection-heading p{font-size:12px;line-height:1.5}.hero-choice-grid{grid-template-columns:minmax(0,1fr);gap:18px;max-width:390px;width:100%;margin:0 auto}.hero-portrait{height:190px}.hero-choice-copy{padding:17px 18px 18px}.hero-choice-copy h2{font-size:22px}.hero-choice-copy .subtitle,.hero-choice-subtitle{margin-bottom:14px}.hero-power-name{font-size:16px}.hero-power-description{font-size:12px}.hero-choice-copy .hero-power-description{min-height:0}.hero-power-meta{margin:13px 0;font-size:11px}.hero-choose{min-height:44px}}
@media(prefers-reduced-motion:reduce){.hero-choice-card{transition:none}}

/* The power occupies the existing HUD row; detail and target panels float below it. */
.table-hud.hero-hud{position:relative;z-index:40;grid-template-columns:minmax(150px,1fr) auto minmax(350px,440px) auto;gap:16px;min-height:48px;height:48px;padding:0}
.hero-power-panel{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;gap:7px;min-width:0;height:44px;padding:3px 5px 3px 3px;border:1px solid #3a5870;border-radius:5px;background:linear-gradient(120deg,#1b3347,#132536);box-shadow:inset 0 1px #b8dfff0a}
.hero-panel-portrait{display:block;width:34px;height:36px;object-fit:cover;object-position:center top;border-radius:3px;background:#284255;border:1px solid #526c7e66}
.hero-panel-copy{min-width:0;max-height:36px;overflow:hidden;line-height:1.25}
.hero-panel-name{display:inline;margin:0;color:#8caac1;font-size:10px;line-height:1.25;font-weight:400}
.hero-panel-power-name{display:inline;margin:0 0 0 5px;color:#daecf8;font-size:11px;line-height:1.25;font-weight:600}
.hero-panel-copy .hero-power-meta{display:flex;gap:3px 8px;margin:3px 0 0;color:#83b6d4;font-size:9px;line-height:1.2}
.hero-power-status{display:block;margin:2px 0 0;color:#7897ae;font-size:9px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-power-details{position:static;min-width:0}
.hero-power-details>summary{display:flex;align-items:center;justify-content:center;min-height:28px;padding:5px 7px;border:1px solid #46657d;border-radius:4px;background:#1a3448;color:#a8c9de;cursor:pointer;font-size:10px;line-height:1.2;white-space:nowrap;list-style:none;user-select:none}
.hero-power-details>summary::-webkit-details-marker{display:none}
.hero-power-details>summary:hover,.hero-power-details[open]>summary{border-color:#8abbda;color:#e0f1fb;background:#25475f}
.hero-power-details>summary:focus-visible{outline:2px solid #addfff;outline-offset:2px}
.hero-power-details[open]>.hero-power-detail-content{position:absolute;top:calc(100% + 8px);right:0;z-index:45;width:min(360px,calc(100vw - 32px));max-height:calc(100svh - 170px);overflow:auto;margin:0;padding:14px 16px;border:1px solid #6b91ad;border-radius:6px;background:#102030;box-shadow:0 12px 34px #0009;color:#bdd1e0;font-size:12px;line-height:1.6;letter-spacing:normal;text-align:left;text-transform:none}
.hero-power-reason{margin:10px 0 0;padding-top:10px;border-top:1px solid #55758d55;color:#9bbfd8;font-size:11px;line-height:1.5}
.hero-detail-faction{display:block;margin-bottom:7px;color:var(--hero-accent,#a9d5f0);font-size:10px;letter-spacing:1px;text-transform:uppercase}
.hero-detail-name{display:block;margin-bottom:7px;color:#e1edf6;font-size:13px;font-weight:600}
.hero-power-panel[data-hero-faction]{border-left:2px solid var(--hero-accent,#3a5870)}
.hero-power-panel .hero-panel-copy{max-height:none}
.hero-power-panel .hero-panel-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-power-panel .hero-panel-power-name{display:none}
.hero-power-panel .hero-panel-copy .hero-power-meta{margin-top:2px;font-size:9px}
.hero-power-panel .hero-power-status{font-size:8px}
.combat-status .status-hero-power{display:block;flex-basis:100%;padding:4px 5px;line-height:1.4;color:#dbbfef;border-color:#9b70bc77;background:#593a7130}
.combat-status .status-hero-power b{display:block;margin-top:3px;font-weight:600;color:#e2caf3}
.combat-status .status-hero-power .card-keyword{padding:0;border:0;background:none;color:inherit;font-size:inherit}
.hero-power-button{min-width:75px;min-height:30px;padding:6px 9px;border:1px solid #9bc8e2;border-radius:4px;background:linear-gradient(130deg,#91c9e6,#5795ba);color:#0b283d;font-size:11px;font-weight:650;line-height:1.2;white-space:nowrap}
.hero-power-button:hover:not(:disabled){background:linear-gradient(130deg,#b4e2f8,#76b4d8);border-color:#d9f1ff;color:#082337}
.hero-power-button:disabled{opacity:1;background:#1d3445;border-color:#3f5b70;color:#6e8ba1;cursor:not-allowed}
.hero-power-button[aria-pressed="true"],.hero-power-button[aria-expanded="true"]{background:#b8dff3;border-color:#e1f4ff;color:#0c2d42;box-shadow:0 0 0 2px #91cff43b}
.hero-targets{position:absolute;top:calc(100% + 8px);right:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:7px;width:min(420px,calc(100vw - 32px));max-height:calc(100svh - 180px);overflow:auto;padding:14px;border:1px solid #85bbda;border-radius:7px;background:#12283a;box-shadow:0 14px 35px #000a}
.hero-targets>p,.hero-targets>strong{flex-basis:100%;margin:0 0 3px;color:#d4eafa;font-size:12px;line-height:1.4}
.hero-targets>button{flex:1 1 125px;min-width:0;min-height:36px;padding:8px 10px;border:1px solid #5b87a4;border-radius:4px;background:#20435b;color:#cae8fa;font-size:11px;line-height:1.3;text-align:left;overflow-wrap:anywhere}
.hero-targets>button:hover:not(:disabled),.hero-targets>button:focus-visible{border-color:#b1dff7;background:#2c5771;color:#eef9ff}
.hero-targets>[data-action="cancel-hero-target"],.hero-targets>[data-action="hero-cancel"],.hero-targets>[data-action="hero-target-cancel"]{flex:1 0 100%;text-align:center;border-color:#466279;background:#192f40;color:#9db8ca}
@media(min-width:601px) and (max-width:900px){
  .table-hud.hero-hud{grid-template-columns:minmax(0,1fr) auto auto;gap:7px 15px;height:auto;min-height:0;padding:9px 0}
  .table-hud.hero-hud>.hero-power-panel{grid-column:1/-1;grid-row:2;height:44px}.table-hud.hero-hud>.table-actions{grid-column:3;grid-row:1}
  .hero-power-panel{grid-template-columns:34px minmax(0,1fr) auto auto;gap:9px}.hero-panel-copy{max-height:36px}.hero-power-status{display:inline;margin-left:8px}.hero-panel-copy .hero-power-meta{display:inline-flex;margin-left:8px}
}
@media(max-width:600px){
  .table-hud.hero-hud{grid-template-columns:minmax(0,1fr) auto auto;gap:9px 13px;height:auto;min-height:0;padding:10px 0 12px}
  .table-hud.hero-hud>.hero-power-panel{grid-column:1/-1;grid-row:2}.table-hud.hero-hud>.table-actions{grid-column:3;grid-row:1}
  .hero-power-panel{grid-template-columns:32px minmax(0,1fr) auto auto;gap:6px;height:48px;padding:4px}.hero-panel-portrait{width:32px;height:38px}.hero-panel-copy{max-height:38px}.hero-panel-name{display:block;font-size:9px}.hero-panel-power-name{display:block;margin:1px 0 0;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-panel-copy .hero-power-meta{margin-top:2px;font-size:8px;gap:3px 5px}.hero-power-status{display:none}.hero-power-panel .hero-panel-copy .hero-power-meta{font-size:8px}
  .hero-power-details>summary{padding:6px;font-size:9px;min-height:30px}.hero-power-button{min-width:67px;padding:7px 6px;font-size:10px;min-height:32px}
  .hero-power-details[open]>.hero-power-detail-content{width:min(358px,calc(100vw - 32px));right:0;max-height:calc(100svh - 220px);font-size:12px;padding:13px 14px}
  .hero-targets{width:min(358px,calc(100vw - 32px));max-height:calc(100svh - 220px);padding:12px;gap:7px}.hero-targets>button{flex-basis:115px;min-height:38px;font-size:11px}
}