/* Scoped to class selection. Artwork never participates in the chip layout. */
#onboarding{overflow-x:hidden}
#onboarding .topbar{display:block;text-align:center;margin:0 0 22px}
#onboarding .topbar::before{content:'✦';display:block;color:#85878b;font-size:19px;line-height:1;margin:0 auto 17px;width:70%;background:linear-gradient(90deg,transparent,#494c514d 40%,transparent 40%,transparent 60%,#494c514d 60%,transparent) center/100% 1px no-repeat}
#onboarding .title{font-size:32px}
#onboarding .subtitle{max-width:340px;margin:9px auto 0;line-height:1.55}
#onboarding #classGrid{margin-top:0;gap:10px;align-items:stretch;grid-auto-rows:1fr}
#onboarding button.class-card{display:grid;grid-template-rows:auto auto 1fr 24px;align-content:start;justify-content:normal;justify-items:center;gap:0;width:100%;min-width:0;min-height:0;padding:12px 10px 13px;margin:0;border:1px solid #34363b;border-radius:19px;background:#111315;color:var(--text);text-align:center;font-weight:400;overflow:hidden;isolation:isolate}
#onboarding .class-card.selected{border-color:#bcbdbf;box-shadow:inset 0 0 0 1px #d4d4d526;background:#191b1e}
#onboarding .class-card:active{transform:none}
#onboarding .class-portrait-frame{display:block;width:100%;aspect-ratio:1/1.02;margin:0 0 5px}
#onboarding .class-portrait{display:block;width:100%;height:100%;object-fit:contain;user-select:none}
#onboarding .class-name{display:block;font-size:21px;line-height:1.18;font-weight:800;letter-spacing:-.035em;margin:0}
#onboarding .class-short{display:block;font-size:11px;line-height:1.45;color:#a2a5aa;margin:7px 0 10px;max-width:100%;font-weight:400;min-height:3.9em}
#onboarding .class-prompt{display:flex;align-items:center;justify-content:center;min-height:24px;margin:0;font-size:8px;line-height:1.3;letter-spacing:.06em;color:#8c9097;max-width:100%}
#onboarding .class-card.selected .class-prompt{color:#d8d8d9;border:1px solid #85878c;border-radius:99px;padding:3px 15px;font-size:9px;letter-spacing:.12em}
#onboarding #classDetails{margin-top:24px;width:100%;max-width:100%;min-width:0;overflow-x:hidden}

/* Expanded class card: deliberately horizontal and compact. */
#onboarding .class-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);grid-template-rows:auto 1fr;align-items:start;column-gap:8px;row-gap:3px;padding:16px 16px 15px;margin:0;width:100%;max-width:100%;min-width:0;border-color:#42454a;background:#101214;min-height:0}
#onboarding .class-hero-backdrop{position:absolute;inset:0;z-index:-3;display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.69;pointer-events:none}
/* Soft edge/bottom fade hides image boundaries without dimming the white portrait above it. */
#onboarding .class-hero::after{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(11,13,15,.02) 0%,rgba(11,13,15,.04) 48%,rgba(11,13,15,.18) 76%,rgba(11,13,15,.46) 100%),linear-gradient(90deg,rgba(11,13,15,.18) 0%,transparent 12%,transparent 86%,rgba(11,13,15,.20) 100%);pointer-events:none}
#onboarding .class-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,13,15,.74) 0%,rgba(11,13,15,.56) 43%,rgba(11,13,15,.13) 61%,transparent 78%);pointer-events:none}
/* Retain the existing lift of the intrinsically darker Strategist scenery. */
#onboarding .class-hero:has(.class-hero-backdrop[src*="strategist-background"]) .class-hero-backdrop{opacity:.78;filter:brightness(1.18) contrast(1.03)}
#onboarding .class-hero:has(.class-hero-backdrop[src*="strategist-background"])::before{background:linear-gradient(90deg,rgba(11,13,15,.67) 0%,rgba(11,13,15,.48) 43%,rgba(11,13,15,.09) 61%,transparent 78%)}

/* Dark figure cores are embedded in the transparent portrait assets. */
#onboarding .class-hero{opacity:1;mix-blend-mode:normal}
#onboarding .class-hero-art{position:relative;z-index:1;isolation:isolate;opacity:1;mix-blend-mode:normal}
#onboarding .class-hero-art .class-portrait{position:relative;z-index:1;opacity:1;mix-blend-mode:normal}
#onboarding .class-hero-heading{grid-column:1;grid-row:1;min-width:0;max-width:100%;padding-right:1px;align-self:start;overflow:hidden}
/* The small repeated class label added no information and made the card taller. */
#onboarding .class-kicker{display:none}
#onboarding .class-hero-title{font-size:25px;font-weight:800;line-height:1.05;letter-spacing:-.035em;margin:0 0 6px;overflow-wrap:anywhere}
#onboarding .class-hero-short{font-size:11px;line-height:1.38;color:#adb0b5;margin:0;font-weight:400;overflow-wrap:anywhere}
#onboarding .class-hero-art{grid-column:2;grid-row:1/3;display:flex;align-items:flex-start;justify-content:center;width:100%;height:100%;min-height:150px;max-height:182px;min-width:0;padding:0;align-self:start;overflow:hidden}
#onboarding .class-hero-art .class-portrait{width:100%;height:100%;max-width:182px;max-height:182px;object-fit:contain;object-position:center top;transform:scale(1.04);transform-origin:center top}
#onboarding .class-hero-description{grid-column:1;grid-row:2;align-self:start;color:#bec2c9;font-size:11.8px;line-height:1.42;margin:10px 0 0;min-width:0;max-width:100%;overflow-wrap:anywhere}
#onboarding .class-hero-description::after{content:none}

#onboarding .class-base{background:#141619}
#onboarding .class-additional{position:relative;isolation:isolate;overflow:hidden;background:#141619}
#onboarding .class-additional::before{content:'';position:absolute;inset:0;z-index:-2;background:url('../assets/classes/selection/path-background.webp') center center/cover no-repeat;opacity:.90;filter:brightness(1.08);pointer-events:none}
#onboarding .class-additional::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,17,20,.16),rgba(15,17,20,.10) 45%,rgba(15,17,20,.06));pointer-events:none}
#onboarding .class-additional .notice{text-align:center;color:#c0c4ca}
#onboarding #extraChoices{justify-content:center;align-items:center;gap:8px 7px;margin:14px auto 16px}
#onboarding #extraChoices .chip{flex:0 1 auto;text-align:center;background:#202328e8}
#onboarding #extraChoices .chip.selected{background:var(--accent)}
#onboarding #createBtn{position:relative}

@media(max-width:420px){
 #onboarding .class-hero{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:5px;padding:14px 13px 14px}
 #onboarding .class-hero-title{font-size:23px;margin-bottom:5px}
 #onboarding .class-hero-short{font-size:10.5px;line-height:1.35}
 #onboarding .class-hero-description{font-size:11.2px;line-height:1.4;margin-top:8px}
 #onboarding .class-hero-art{min-height:140px;max-height:168px}
 #onboarding .class-hero-art .class-portrait{max-width:168px;max-height:168px;transform:scale(1.06)}
}

@media(max-width:360px){
 #onboarding .title{font-size:29px}
 #onboarding button.class-card{padding:10px 7px 12px;border-radius:17px}
 #onboarding .class-name{font-size:18px}
 #onboarding .class-short{font-size:10px;min-height:4.35em}
 #onboarding .class-prompt{font-size:7px}
 #onboarding .class-hero{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);padding:13px 12px}
 #onboarding .class-hero-title{font-size:21px}
 #onboarding .class-hero-short{font-size:10px}
 #onboarding .class-hero-description{font-size:10.7px;line-height:1.38;margin-top:7px}
 #onboarding .class-hero-art{min-height:126px;max-height:152px}
 #onboarding .class-hero-art .class-portrait{max-width:152px;max-height:152px}
}