/* MBTI-style entry, illustrated type families and a single readable profile. */
.universe-page { background:#061321; color:#edf3fb; color-scheme:dark; }
.universe-page [hidden] { display:none!important; }
.universe-shell { --world-line:#26384d; --world-muted:#afbdd0; --world-orange:#ffad78; width:min(1160px,calc(100% - 48px)); margin:100px auto 0; }
.universe-shell h1,.universe-shell h2,.universe-shell h3 { font-weight:700; line-height:1.35; margin:0; }
.universe-shell h1 { font-size:clamp(38px,4.2vw,54px); }
.universe-shell h1 em { color:#9ac6ff; font-style:normal; }
.universe-shell h2 { font-size:clamp(26px,3vw,38px); }
.universe-shell p { line-height:1.75; }
.universe-shell a { text-underline-offset:5px; }
.universe-shell button,.universe-shell select,.universe-shell input { font:inherit; }
.universe-shell :is(a,button,select,input,summary):focus-visible { outline:2px solid #ffad78; outline-offset:5px; }
.boss-navigation { display:flex; justify-content:center; flex-wrap:wrap; gap:30px; padding:10px 0 14px; font-size:13px; color:#aebed2; }
.boss-navigation a { text-decoration:none; padding:8px 0; }
.boss-navigation a:hover { color:#ffad78; }
.world-kicker { font-size:11px; font-weight:600; color:#9ac6ff; letter-spacing:.12em; margin:0 0 18px; }
.world-intro { text-align:center; padding:16px 0 0; }
.world-intro .world-lead { color:#b8c8dc; font-size:17px; max-width:660px; margin:22px auto 0; }
.world-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:25px; font-size:14px; }
.world-intro .world-actions,.world-ending .world-actions { justify-content:center; }
.world-actions a:not(.world-button) { padding:8px 0; }
.world-button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:14px 28px; border:0; border-radius:999px; background:#ffad78; color:#102036; font-weight:700; font-size:15px; text-decoration:none; cursor:pointer; }
.world-button:hover { background:#ffc39a; }
.boss-lineup { position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-items:end; gap:0; width:min(960px,100%); margin:18px auto 0; padding:0 14px 25px; }
.boss-lineup::before { content:''; position:absolute; inset:38% 0 25px; background:#0d2136; clip-path:polygon(0 55%,17% 24%,35% 39%,53% 0,76% 32%,100% 18%,100% 100%,0 100%); }
.boss-lineup img { position:relative; width:100%; height:170px; object-fit:contain; }
.boss-lineup img:nth-child(2),.boss-lineup img:nth-child(5) { height:190px; }
.boss-lineup img:nth-child(3),.boss-lineup img:nth-child(4) { height:210px; }
.boss-lineup figcaption { grid-column:1/-1; margin-top:14px; position:relative; color:#a4bad3; font-size:12px; line-height:1.7; }
.boss-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:25px 0; margin:0; border-block:1px solid var(--world-line); gap:28px; }
.boss-steps li { display:flex; align-items:center; gap:16px; }
.boss-steps img { width:80px; height:100px; flex-shrink:0; object-fit:contain; }
.boss-steps small { display:block; font-size:10px; color:#83b5f5; margin-bottom:6px; }
.boss-steps strong { display:block; font-size:16px; font-weight:600; }
.boss-steps p { font-size:12px; color:var(--world-muted); margin:7px 0 0; }
.world-cast,.partner-lab,.world-ending { padding:64px 0; border-top:1px solid var(--world-line); scroll-margin-top:100px; }
.world-cast { border-top:0; text-align:center; }
.world-muted { font-size:14px; color:var(--world-muted); margin:16px 0 28px; }
.districts { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.districts button { padding:10px 18px; text-align:center; border:1px solid #344962; border-radius:999px; background:transparent; color:#b9cbe1; cursor:pointer; }
.districts button:hover,.districts button[aria-pressed=true] { color:var(--district-color); border-color:var(--district-color); background:#0b1f33; }
.districts strong { font-size:13px; font-weight:500; }
.cast-toolbar { display:flex; justify-content:center; gap:20px; align-items:center; flex-wrap:wrap; margin:20px 0 28px; }
.cast-toolbar button,.world-text-button { background:transparent; padding:8px 0; border:0; color:#9ac4ff; cursor:pointer; text-decoration:underline; text-underline-offset:5px; font-size:13px; }
.cast-toolbar button[aria-pressed=true] { color:#ffad78; }
.cast-toolbar span { color:var(--world-muted); font-size:12px; }
.type-family { padding:32px 24px; border-radius:8px; margin:0 0 20px; background:color-mix(in srgb,var(--family-color) 8%,#071624); border-top:2px solid color-mix(in srgb,var(--family-color) 45%,transparent); }
.type-family h3 { font-size:28px; color:var(--family-color); }
.type-family header p { font-size:13px; color:#afc0d5; margin:8px 0 20px; }
.cast-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; margin:0; list-style:none; gap:16px; }
.cast-member { display:flex; flex-direction:column; padding:14px 10px 18px; border:1px solid transparent; border-radius:6px; text-decoration:none; height:100%; }
.cast-member:hover,.cast-member[aria-current=true] { background:#0c2035; border-color:#35506b; }
.cast-member img { display:block; margin:0 auto 14px; width:100%; height:200px; object-fit:contain; }
.cast-member strong { font-size:20px; line-height:1.4; font-weight:700; color:var(--family-color); }
.cast-code { color:#aec5df; font-size:12px; letter-spacing:.13em; margin:7px 0; }
.cast-quote { font-size:12px; color:#afbed2; line-height:1.7; }
.character-story { display:grid; grid-template-columns:minmax(0,.65fr) minmax(0,1fr); gap:0 55px; padding:60px 0; border-top:1px solid var(--world-line); scroll-margin-top:110px; }
.character-story > :not(.story-portrait) { grid-column:2; }
.story-portrait { grid-column:1; grid-row:1/7; margin:15px 0 0; align-self:start; position:sticky; top:110px; }
.story-portrait img { display:block; width:100%; height:auto; max-height:430px; object-fit:contain; }
.story-portrait figcaption { font-size:12px; color:var(--world-muted); text-align:center; line-height:1.8; margin:16px auto; max-width:320px; }
.character-story .world-kicker { font-size:10px; }
#storyCode { display:block; letter-spacing:.15em; margin-top:14px; color:#92bfff; }
.character-story h2 { font-size:38px; }
.character-story blockquote { color:#ffad78; margin:18px 0; font-size:21px; line-height:1.6; font-weight:600; }
.story-scene { margin:0 0 20px; color:#b9c9dc; font-size:15px; }
.story-reading { margin:0 0 26px; }
.story-reading dt { color:#91a9c5; font-size:12px; margin:18px 0 7px; }
.story-reading dd { margin:0; font-size:16px; font-weight:600; line-height:1.8; }
.repair-mission { border-top:1px solid var(--world-line); padding-top:22px; }
.repair-mission summary { font-size:12px; color:#9bb1c9; cursor:pointer; line-height:1.8; }
.repair-mission summary span { display:block; color:#e7f2ff; font-size:20px; font-weight:600; margin:9px 0; }
.repair-mission ol { list-style:none; padding:0; margin:20px 0; }
.repair-mission li { margin:0 0 14px; font-size:14px; line-height:1.7; }
.repair-mission label { display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.repair-mission input { width:18px; height:18px; margin:4px 0 0; flex-shrink:0; accent-color:#75d6b8; }
.repair-mission input:checked + span { color:#85c9b6; }
.mission-criterion { border-left:2px solid #69d0b2; padding:2px 0 2px 16px; font-size:13px; color:#a9c2cb; }
.mission-criterion b { display:block; color:#79d6bb; font-size:12px; margin-bottom:7px; }
#missionState { font-size:12px; color:var(--world-muted); }
.evolution { color:#a9bad1; font-size:12px; }
.evolution a { display:block; color:#9cc7ff; font-size:16px; margin:8px 0; font-weight:600; }
.evolution small { display:block; font-size:11px; line-height:1.7; }
.episode-line { display:flex; gap:14px; border-top:1px solid var(--world-line); margin:25px 0 0; padding-top:20px; color:#acbbcf; font-size:13px; }
.episode-line small { color:#ffad78; white-space:nowrap; font-size:10px; padding-top:3px; }
.partner-pickers { display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr); align-items:end; gap:14px; border:0; padding:0; margin:30px 0; max-width:760px; }
.partner-pickers label { display:flex; flex-direction:column; gap:10px; font-size:12px; color:var(--world-muted); min-width:0; }
.partner-pickers > span { color:#ffad78; text-align:center; padding-bottom:10px; font-size:24px; }
.partner-pickers select { width:100%; min-width:0; padding:13px 10px; border:1px solid #3a5068; border-radius:5px; background:#0c1f33; color:#eaf4ff; font-size:14px; }
.partner-reading { max-width:760px; font-size:17px; font-weight:600; }
.partner-lab table { width:100%; max-width:760px; border-collapse:collapse; font-size:13px; table-layout:fixed; }
.partner-lab caption { text-align:left; font-size:11px; color:#a5b8cf; padding:18px 0; }
.partner-lab th,.partner-lab td { text-align:left; border-bottom:1px solid #2b3f56; padding:15px 12px 15px 0; line-height:1.6; overflow-wrap:anywhere; }
.partner-lab th { color:#aabbd2; font-size:12px; font-weight:500; }
.world-note { font-size:11px; color:#9eb0c7; max-width:700px; }
.partner-lab .world-button { margin-top:12px; }
#shareStatus { color:#8cd4b6; font-size:13px; }
#shareFallback { display:block; font-size:13px; color:#9bc8ff; overflow-wrap:anywhere; }
.world-ending { text-align:center; padding-bottom:65px; }
.world-ending > img { width:140px; height:175px; object-fit:contain; margin:0 auto 20px; }
.world-ending > p { color:#b1c2d7; }
.world-ending .world-note { margin:25px auto 0; }
.universe-footer { width:min(1160px,calc(100% - 48px)); margin:0 auto; padding:28px 0 40px; border-top:1px solid #2b3b51; display:flex; align-items:center; flex-wrap:wrap; gap:20px; font-size:12px; color:#9db0c7; }
.universe-footer img { width:100px; height:auto; }
.universe-footer small { margin-left:auto; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.universe-skip { position:fixed; top:-80px; left:20px; z-index:200; padding:10px 20px; background:#183550; }
.universe-skip:focus { top:20px; }
@media(max-width:800px) {
 .universe-shell { margin-top:85px; }
 .boss-steps { gap:14px; }
 .boss-steps li { flex-direction:column; text-align:center; gap:8px; }
 .boss-steps img { width:60px; height:75px; }
 .boss-steps strong { font-size:14px; }
 .boss-lineup img { height:145px; }
 .boss-lineup img:nth-child(2),.boss-lineup img:nth-child(5) { height:165px; }
 .boss-lineup img:nth-child(3),.boss-lineup img:nth-child(4) { height:180px; }
 .cast-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .character-story { grid-template-columns:1fr; gap:0; }
 .character-story > :not(.story-portrait) { grid-column:1; }
 .character-story header { grid-row:1; }
 .story-portrait { position:static; grid-row:2; width:75%; max-width:300px; justify-self:center; margin:10px 0 20px; }
 .story-portrait img { max-height:270px; }
 .story-portrait figcaption { margin:5px 0; }
}
@media(max-width:480px) {
 .universe-shell,.universe-footer { width:calc(100% - 36px); }
 .boss-navigation { gap:22px; font-size:12px; }
 .world-intro { padding-top:16px; }
 .universe-shell h1 { font-size:36px; line-height:1.45; }
 .world-intro .world-lead { font-size:14px; }
 .world-intro .world-lead br { display:none; }
 .world-intro .world-actions { flex-direction:column; gap:5px; }
 .boss-lineup { padding:0 0 22px; margin-top:20px; }
 .boss-lineup img { height:88px; }
 .boss-lineup img:nth-child(2),.boss-lineup img:nth-child(5) { height:105px; }
 .boss-lineup img:nth-child(3),.boss-lineup img:nth-child(4) { height:125px; }
 .boss-lineup figcaption { font-size:11px; margin-top:10px; }
 .boss-steps { gap:12px; padding:20px 0; }
 .boss-steps strong { font-size:13px; line-height:1.65; }
 .boss-steps p { display:none; }
 .boss-steps img { width:52px; height:65px; }
 .world-cast,.partner-lab,.world-ending,.character-story { padding:42px 0; }
 .districts { gap:8px; }
 .districts button { padding:8px 13px; }
 .type-family { padding:24px 10px; margin-bottom:14px; }
 .type-family h3 { font-size:23px; }
 .type-family header p { font-size:12px; }
 .cast-grid { gap:8px; }
 .cast-member { padding:10px 4px 15px; }
 .cast-member img { height:160px; }
 .cast-member strong { font-size:17px; }
 .cast-quote { font-size:11px; }
 .character-story h2 { font-size:30px; }
 .partner-pickers { grid-template-columns:1fr; gap:16px; }
 .partner-pickers > span { display:none; }
 .universe-footer { gap:16px; }
 .universe-footer small { margin-left:0; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }