/* Vesperfall II — original character selection and companion interface. */
.hero{width:min(1060px,100%)}
.hero h1{font-size:clamp(54px,7.5vw,110px);margin:14px 0 15px}
.hero .lead{max-width:830px;margin:0}
.hero .features{margin:19px 0 25px}
.loadout-heading{display:flex;justify-content:space-between;align-items:center;margin:15px 0 10px;gap:16px}
.loadout-heading>span:last-child{color:#8eabb2;font-size:11px;letter-spacing:.03em}
.loadouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.loadout{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;min-height:145px;border:1px solid #7195a366;background:linear-gradient(135deg,#123443cf,#10212eec);padding:16px;color:#e9f3ed;transition:background .18s,border-color .18s,transform .18s}
.loadout:hover,.loadout:focus-visible{border-color:#e6c58d;transform:translateY(-2px)}
.loadout.selected{border:1px solid #eec788;box-shadow:inset 0 0 35px #eec78816,0 0 0 1px #eec7883e;background:linear-gradient(135deg,#203f49,#111f2c)}
.loadout-number{font-weight:800;font-size:9px;color:#eac88f;letter-spacing:.16em}
.loadout b{font-size:24px;letter-spacing:-.05em}
.loadout>span:not(.loadout-number){font-size:11px;color:#b6d4d2}
.loadout small{font-size:9px;color:#8ac6bb;letter-spacing:.1em}
.hero .start-actions{margin:20px 0}
.squad{position:absolute;left:35px;top:280px;width:264px;max-width:36vw;border-top:1px solid #a4cad04e;padding:15px 0}
.squad .eyebrow{display:flex;justify-content:space-between;align-items:center;letter-spacing:.13em}
.squad small{color:#90aab2;line-height:1.55;font-size:11px;display:block;margin-top:10px}
.squad-card{display:flex;align-items:center;gap:9px;margin-top:10px;padding:8px 10px;background:linear-gradient(110deg,#113342be,#0c202cc7);border-left:3px solid var(--echo-color,#76e5d8)}
.squad-symbol{width:29px;height:29px;border:1px solid var(--echo-color,#76e5d8);display:grid;place-items:center;color:var(--echo-color,#76e5d8);font-size:15px;font-weight:800}
.squad-card .squad-meta{display:flex;flex-direction:column;gap:2px}
.squad-card b{font-size:11px;letter-spacing:.04em}
.squad-card span{font-size:9px;color:#9bb6bd}
.loadout-label{color:#edc68f;font-weight:900;font-size:10px;letter-spacing:.16em;margin-top:10px}
.overlay.active{background:linear-gradient(100deg,#05131cf2,#061522db 75%,#152b357e)}
.primary{transition:transform .16s,background .16s}.primary:hover{transform:translateY(-2px)}
#loading.no-webgl{inset:auto 12px 12px;max-width:min(550px,calc(100% - 24px));padding:15px 22px;letter-spacing:.05em;font-size:11px;text-align:center;background:#301d29;border:1px solid #df8f8f;color:#ffdada;box-shadow:0 12px 40px #000a}
.primary:disabled{opacity:.48;cursor:not-allowed;transform:none}
@media(max-width:760px){
 .hero h1{font-size:clamp(46px,11vw,70px)}
 .loadouts{grid-template-columns:1fr;gap:7px}
 .loadout{min-height:70px;padding:11px 12px;gap:2px}
 .loadout b{font-size:20px}
 .loadout>span:not(.loadout-number){font-size:10px}
 .loadout small{font-size:8px}
 .hero .features{margin:12px 0 17px}
 .loadout-heading>span:last-child{display:none}
 .squad{left:14px;top:220px;width:192px;max-width:50vw;padding:9px 0}
 .squad-card{gap:5px;padding:6px;margin-top:5px}
 .squad-symbol{width:24px;height:24px;flex-shrink:0}
 .squad-card b{font-size:9px}
 .squad-card span{font-size:8px}
 .squad small{font-size:9px}
 .loadout-label{font-size:8px}
}