/* 0.35 heroes as people: framed portraits, hero draft, hero shop, merged Protocol screen. */
.portrait.hero-portrait{position:relative;display:block;aspect-ratio:1/1;height:auto!important;padding:0;overflow:hidden;filter:none;border:2px solid transparent;border-image:linear-gradient(135deg,#fafcff 0%,#b4bac2 30%,#eef1f5 48%,#969ca4 65%,#d7dce2 82%,#6e747c 100%) 1;background:linear-gradient(rgba(10,14,20,.25),rgba(10,14,20,.25)),var(--hero-bg,#26343f) center/cover;box-shadow:0 0 0 1px #1e2228}
.portrait.hero-portrait img{display:block;width:100%;height:100%;object-fit:cover}
.portrait.hero-portrait svg{width:100%;height:100%;color:#d8e3ea;padding:8%}
.hero-tabs{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.hero-tab .portrait.hero-portrait{width:40px}
.hero-tab.in-reserve{opacity:.75}.hero-tab.in-reserve small{color:#f2d38a}
.paperdoll-hero .portrait.hero-portrait{width:96px;margin:0 auto}
.party-line .portrait.hero-portrait{width:72px;margin:0 auto 6px}
.turn-entry .portrait.hero-portrait{width:29px}
.nexus-tile .nexus-holder .portrait.hero-portrait,.nexus-holder-line .portrait.hero-portrait,.nexus-socket .portrait.hero-portrait{width:22px;border-width:1px}
.badge.personality-badge{background:#3a2440;border-color:#8b5e96;color:#f2c9fa}
.badge.depressed-badge{background:#2a2f3a;border-color:#6b7488;color:#c5cfe0;margin-left:4px}
.personality-box{border:1px solid #5d4366;background:#20182a;border-radius:10px;padding:10px 12px;margin:10px 0}
.personality-box p{margin:0 0 4px;font-size:13px}.personality-box b{display:block;color:#f2c9fa;margin-bottom:4px}
.personality-box .personality-cost{color:#f0b0a4;margin:0}
.personality-lock{border:1px solid #8b5e96;background:#271b2e;border-radius:10px;padding:10px 12px;margin:0 0 12px;font-size:13px;color:#ead9ef}
.rule-card.overridden{opacity:.62}
.main-stat{outline:1px solid #82d8be66;border-radius:6px}
.main-stat b{color:#a4e8d3}
/* Merged Protocol screen: sheet · Protocol · party · reserve. */
.protocol-layout{display:grid;grid-template-columns:minmax(210px,.85fr) minmax(0,1.6fr) minmax(150px,.55fr) minmax(190px,.75fr);gap:16px;margin-top:18px;align-items:start}
.protocol-layout .hero-sheet .hero-title .portrait.hero-portrait{width:84px}
.protocol-layout .hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:10px 0}
.protocol-layout .hero-stats>div{display:flex;align-items:center;justify-content:space-between;gap:4px;background:#132332;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px}
.protocol-layout .hero-stats button{padding:0 7px;min-height:22px;font-size:13px}
.points-left{color:#f2d38a;font-size:13px;margin:6px 0}
.protocol-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 18px}.protocol-actions small{color:var(--muted)}
.protocol-column .skill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.party-column,.reserve-column{padding:12px}
.party-slots,.reserve-list{display:grid;gap:8px;min-height:120px;border-radius:10px;padding:4px}
.party-slot.empty-slot{border:1px dashed var(--line);border-radius:10px;padding:14px 8px;text-align:center;color:var(--muted);font-size:12px}
.roster-hero{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:6px;background:#152535;border-color:var(--line);cursor:grab}
.roster-hero .portrait.hero-portrait{width:42px;flex:none}
.roster-hero strong{display:block;font-size:13px}.roster-hero small{display:block;font-size:11px;color:var(--muted)}
.roster-hero.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.reserve-card{border:1px solid var(--line);border-radius:10px;background:#122130;padding:6px}
.reserve-card.selected{border-color:var(--accent)}
.reserve-card .roster-hero{border:0;background:transparent;padding:2px}
.reserve-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;font-size:10px;color:var(--muted);margin-top:4px}.reserve-stats b{color:var(--text)}
.drop-valid[data-party-drop],.drop-valid[data-reserve-drop]{outline:2px dashed #82d8be88;outline-offset:2px}
.drop-hover[data-party-drop],.drop-hover[data-reserve-drop],.drop-hover[data-party-slot]{background:#1d3a45}
/* Hero cards and inspector (draft and shop). */
.hero-shop-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr);gap:16px;align-items:start}
.hero-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.hero-card{display:grid;justify-items:center;gap:6px;text-align:center;padding:14px;cursor:pointer;transition:transform .12s,border-color .12s}
.hero-card:hover,.hero-card:focus-within{transform:translateY(-3px);border-color:#8fc9e0}
.hero-card.pinned{border-color:#f2d38a;box-shadow:0 0 0 1px #f2d38a}
.hero-card.sold{opacity:.55}
.hero-card .portrait.hero-portrait{width:min(140px,100%)}
.hero-card h3{margin:2px 0 0}
.hero-card-main{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;font-size:12px;color:var(--muted)}.hero-card-main b{color:var(--text)}
.hero-card-hint{font-size:11px;color:var(--muted);margin:0}
.hero-inspector{padding:14px;position:sticky;top:12px}
.hero-inspector .hero-title .portrait.hero-portrait{width:70px}
.hero-inspector .hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:8px 0}
.hero-inspector .hero-stats>div{display:grid;justify-items:center;background:#132332;border:1px solid var(--line);border-radius:8px;padding:5px;font-size:11px}
.inspector-skill{border:1px solid var(--line);border-radius:8px;padding:6px 8px;margin:6px 0;background:#122130}
.inspector-skill.equipped{border-color:#4f8d7c}
.inspector-skill b{display:block;font-size:13px}.inspector-skill small{color:var(--muted);font-size:11px}.inspector-skill p{margin:4px 0 0;font-size:12px}
.inspector-gear{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.inspector-gear span{display:grid;grid-template-columns:22px 1fr;align-items:center;column-gap:6px;font-size:12px}.inspector-gear svg{width:22px;height:22px;grid-row:span 2}.inspector-gear small{color:var(--muted)}
.draft-picked{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px;color:var(--muted);font-size:12px}
.draft-picked span{display:flex;align-items:center;gap:6px}.draft-picked .portrait.hero-portrait{width:34px}.draft-picked em{color:#f2c9fa;font-style:normal}
.shop-tabs{display:flex;gap:8px;margin-bottom:14px}
.shop-tabs button{flex:1;background:#142637}.shop-tabs button.active{border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.shop-tabs small{color:var(--muted);margin-left:6px}
@media(max-width:1100px){.protocol-layout{grid-template-columns:minmax(200px,.9fr) minmax(0,1.6fr)}.party-column{grid-column:1}.reserve-column{grid-column:2}}
@media(max-width:800px){.protocol-layout,.hero-shop-layout{grid-template-columns:1fr}.party-column,.reserve-column{grid-column:auto}.protocol-column .skill-grid{grid-template-columns:1fr}.hero-inspector{position:static}}
/* 0.35 fix: party/reserve cards never overflow their column (long personality names, narrow windows). */
.protocol-layout{grid-template-columns:minmax(210px,.85fr) minmax(0,1.6fr) minmax(175px,.6fr) minmax(200px,.75fr)}
.party-slots,.reserve-list{grid-template-columns:minmax(0,1fr)}
.party-slot,.reserve-card,.roster-hero{min-width:0;max-width:100%;box-sizing:border-box}
.roster-hero>span{min-width:0;overflow:hidden}
.roster-hero strong,.roster-hero small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.party-column>.muted{font-size:12px;margin:10px 0 0}

/* 0.36: guide the player to recruitment; respect reduced-motion preferences. */
.hero-tab-glow{box-shadow:0 0 12px #d7b36d88;animation:hero-shop-pulse 2s ease-in-out infinite;}
@keyframes hero-shop-pulse{50%{box-shadow:0 0 22px #edc779cc;}}
.skill-choice{display:grid;gap:8px;margin-top:18px}.skill-choice button{text-align:left;white-space:normal}.skill-choice small{margin-left:12px}.skill-choice p{font-size:13px;margin:6px 0}
@media(prefers-reduced-motion:reduce){.hero-tab-glow{animation:none;}}

@media(max-width:600px){.level-heroes{grid-template-columns:minmax(0,1fr)}.level-heroes>.card{min-width:0}}