#heroes-overlay { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:4; }
body[data-heroes="on"] .stage-instruction { display:none; }
@media(min-width:901px){body[data-heroes="on"] .museum-shell{min-height:900px;}body[data-heroes="on"] .stage{min-height:480px;}}
.hero-nameplate { position:absolute; min-height:44px; padding:5px 12px; border:1px solid #bea363; border-radius:2px; background:#252c20f2; color:#eeeddc; font:600 13px/1.3 "Segoe UI",sans-serif; pointer-events:auto; transform:translate(-50%,0); box-shadow:0 3px 12px #15201235; white-space:nowrap; }
.hero-nameplate-name,.hero-nameplate-campaign { display:block; }
.hero-nameplate-name::after { content:' ↗'; color:#d3bb83; }
.hero-nameplate-campaign { margin-top:3px; color:#e2c887; font-size:10px; line-height:1.25; letter-spacing:.06em; }
.hero-nameplate:hover,.hero-nameplate:focus-visible,.hero-nameplate.is-hovered { background:#4e583b; border-color:#f3d494; }
.hero-nameplate:focus-visible { outline:3px solid #f3d494; outline-offset:3px; }
.heroes-bar { display:flex; gap:18px; align-items:center; padding:12px 24px; background:var(--room); border-bottom:1px solid var(--room-line); }
.heroes-bar button { flex-shrink:0; min-height:44px; padding:8px 13px; border:1px solid var(--brass); border-radius:3px; color:var(--room-ink); background:transparent; font:600 13px "Segoe UI",sans-serif; }
.heroes-bar button[aria-pressed="true"] { background:var(--room-raised); }
.heroes-bar p { margin:0; font-size:13px; line-height:1.45; color:var(--room-ink); }
.heroes-bar p span { display:block; margin-top:3px; font-size:11px; color:var(--room-muted); }
.heroes-bar { flex-wrap:wrap; }
.hero-detail-controls { display:flex; gap:6px; margin-left:auto; }
.hero-detail-controls select { min-height:44px; max-width:180px; background:var(--room-raised); color:var(--room-ink); border:1px solid var(--room-line); border-radius:3px; padding:5px 7px; font:13px "Segoe UI",sans-serif; }
.hero-detail-controls select:focus-visible { outline:2px solid var(--brass); outline-offset:2px; }
.story-award-image { display:block; max-width:100%; width:auto; height:280px; object-fit:contain; margin:20px 0; }
.story-award-art { display:flex; flex-wrap:wrap; gap:15px 28px; align-items:center; }
.story-award-art p { flex:1; min-width:180px; font-size:14px; line-height:1.65; }
.story-award-credit { font-size:12px; line-height:1.6; }
.story-award-credit a { color:inherit; }
.story-reconstruction { font-size:12px; line-height:1.6; color:var(--panel-muted); border-top:1px solid var(--panel-line); margin-top:24px; padding-top:16px; }
.story-photo { margin:23px 0 28px; }
.story-photo img { display:block; width:100%; height:auto; max-height:410px; object-fit:contain; object-position:left center; background:color-mix(in srgb,var(--panel) 85%,#252c20); }
.story-photo figcaption { margin-top:9px; font-size:12px; line-height:1.6; color:var(--panel-muted); }
.story-photo figcaption a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.story-photo-credit { display:block; }
.story-photo-unavailable { border-left:2px solid var(--panel-line); padding-left:12px; color:var(--panel-muted); font-size:12px; line-height:1.55; margin:20px 0; }
.story-photo-error { font-size:13px; padding:20px; border:1px solid var(--panel-line); }
@media(max-width:700px){
 .heroes-bar { gap:10px; padding:11px 14px; align-items:flex-start; }
 .heroes-bar button { font-size:12px; padding:8px 10px; }
 .heroes-bar p { font-size:12px; }
 .heroes-bar p span { font-size:10px; }
 .hero-detail-controls { margin-left:0; width:100%; }
 .hero-detail-controls select { flex:1; max-width:none; }
 .hero-nameplate { font-size:11px; padding:4px 7px; min-height:44px; }
 .story-photo img { max-height:360px; }
}

.heroes-load-state{flex-basis:100%;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.heroes-bar .heroes-load-state span{font-size:13px;line-height:1.5;margin:0;color:var(--room-ink)}