/* An expansive gallery around the game's original heroes and lore. */
#loreDialog{--lore-edge:16px;--lore-console-height:calc(var(--card-height)*2 + 82px);width:calc(100vw - var(--lore-edge)*2);height:calc(100dvh - var(--lore-edge)*2);max-width:none;max-height:none;margin:auto;border:1px solid #d4b6d448;border-radius:24px;background:#211b2c;box-shadow:0 30px 140px #090612b3;isolation:isolate}
#loreDialog[open]{display:grid;grid-template-rows:92px minmax(0,1fr) var(--lore-console-height)}
#loreDialog::backdrop{background:#100d1bcd;backdrop-filter:none}
#loreDialog>header{height:auto;min-height:0;padding:16px 26px;align-items:center;gap:20px;background:linear-gradient(115deg,#34283d,#242032 65%,#292133);border-bottom:1px solid #f1d4af24}
#loreDialog>header>.lore-heading{display:block;width:auto;min-width:0;flex:1}
#loreDialog header small{font-size:9px;letter-spacing:2px;color:#d0b58a}
#loreDialog h2{font-size:32px;font-weight:750;letter-spacing:-.9px;line-height:1.12;margin:4px 0}
#loreDialog header p{font-size:12px;line-height:1.4;color:#c4b4ca;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lore-header-actions{display:flex!important;align-items:center!important;gap:8px!important;width:auto!important;flex:none!important}
.lore-position{font-variant-numeric:tabular-nums;color:#b7a6bd;font-size:12px;margin-right:14px;letter-spacing:2px}
#loreDialog .lore-step,#loreDialog .dialog-close{display:grid;place-items:center;width:42px;height:42px;border:1px solid #f4d9c226;background:#ffffff05;border-radius:12px;color:#eee4ec;font-size:22px;flex:none}
#loreDialog .dialog-close{margin-left:8px;background:#f2d8b812;color:#f7ddba}
#loreDialog .lore-step:hover,#loreDialog .dialog-close:hover{background:#ffffff12;border-color:#f4d9c266}
#loreDialog .lore-body{display:grid;grid-template-columns:minmax(280px,.87fr) minmax(0,1.13fr);gap:0;height:auto;min-height:0;max-height:none;overflow:hidden;padding:0;background:#1d1928}
#loreDialog .lore-showcase{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0;min-width:0;min-height:0;padding:18px 22px 12px}
#loreDialog .lore-stage{position:relative;flex:1;height:auto;min-height:80px;border:1px solid #e7d0e52b;border-radius:19px;isolation:isolate;background:linear-gradient(180deg,#32264136,#221b35a6),url('assets/scene-r4/clouds-rainbow-planets.png') center 45%/cover}
#loreDialog.lore-night .lore-stage{background-image:linear-gradient(180deg,#21193125,#21193199),url('assets/night-r6/moonlit-clouds-planets.png')}
#loreDialog .lore-stage:before{content:'';position:absolute;left:20%;right:20%;top:calc(var(--demo-floor,90%) - 5px);bottom:auto;height:11px;background:radial-gradient(ellipse,#1c1426b3,transparent 72%);border:0;border-radius:50%;z-index:1}
#loreDialog .lore-stage:after{content:'';position:absolute;left:0;right:0;bottom:0;height:20%;background:#805640 url('assets/stage-r2/walnut-stage.png') center/100% 100%;border-top:1px solid #f1cb9c66;z-index:0}
#loreDialog .lore-stage canvas{z-index:2}
.lore-family-badge{position:absolute;top:14px;left:14px;padding:7px 10px;background:#241c33c9;border:1px solid #f3d4b42e;border-radius:8px;color:#f1dcc1;font-size:9px;letter-spacing:1.6px;z-index:3;pointer-events:none}
#loreDialog #loreMoodLabel{left:auto;right:12px;top:14px;bottom:auto;transform:none;background:#201b2bc9;border:1px solid #f3d4b426;font-size:10px;padding:6px 10px;z-index:3;max-width:55%;text-overflow:ellipsis;overflow:hidden}
.lore-instrument-name{position:absolute;bottom:5px;left:12px;right:12px;z-index:3;color:#f6e5c8;text-shadow:0 1px 4px #1b101f;font-size:10px;text-align:center;pointer-events:none}
#loreDialog .lore-demo-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;flex:none;overflow:visible}
#loreDialog .lore-moods{display:flex;gap:4px;flex:1;min-width:150px;padding:4px;background:#15121f73;border:1px solid #eee1e31c;border-radius:12px}
#loreDialog .lore-moods button{flex:1;min-width:0;min-height:36px;padding:7px 12px;border:0;border-radius:8px;font-size:12px;background:transparent;color:#b8a9c4}
#loreDialog .lore-moods button[aria-pressed=true]{background:#f3d6ad;color:#2b1f30;box-shadow:0 2px 10px #110d1c26}
#loreDialog .lore-playback{display:flex;gap:6px;margin:0;flex:1;flex-wrap:nowrap}
#loreDialog .lore-playback button{flex:1;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid #e4d2eb2b;font-size:11px;white-space:nowrap;background:#ffffff05}
#loreDialog .lore-playback button[aria-pressed=true]{border-color:#e0bf9180;background:#cfaa7730}
#loreDialog .lore-playback small{display:none}
.lore-stage-details{font-size:10px;color:#b4a1be;flex:none}
.lore-stage-details summary{cursor:pointer;list-style:none;line-height:1.6}.lore-stage-details summary:after{content:' ＋';color:#d8bf9e}.lore-stage-details[open] summary:after{content:' −'}
#loreDialog .lore-stage-details .lore-footnote{display:block;font-size:10px!important;color:#b4a1be!important;margin:6px 0 0;padding:6px 0 0;border-color:#ffffff14;line-height:1.55}
#loreDialog .lore-reading{min-width:0;min-height:0;display:flex;gap:16px;flex-direction:column;padding:24px 32px 20px;background:linear-gradient(125deg,#f8f1e8,#eee4d8);color:#352c3d;box-shadow:-10px 0 40px #0b071b14}
.lore-reading-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#8b7e86;font-size:10px;line-height:1.6;letter-spacing:.3px}
.lore-chapter{letter-spacing:1.3px;font-weight:650;color:#816b62}
#loreDialog .lore-reading>blockquote{font-family:Georgia,'Times New Roman',serif;font-size:clamp(20px,1.7vw,30px);line-height:1.4;font-weight:400;color:#624652;margin:0;padding:0 0 16px;border-bottom:1px solid #92796e33}
#loreDialog .lore-tabs{display:flex;flex-wrap:nowrap;gap:4px;flex:none;padding:0 0 10px;border-bottom:1px solid #92796e26}
#loreDialog .lore-tabs button{font-size:12px;font-weight:600;min-height:40px;padding:8px 14px;border-radius:10px;border:1px solid transparent;background:transparent;color:#887581;white-space:nowrap}
#loreDialog .lore-tabs button[aria-selected=true]{background:#4c3549;color:#fbf1e5;border-color:#4c3549;box-shadow:0 3px 10px #4c354918}
#loreDialog .lore-tabs button:hover{background:#745a6c14}#loreDialog .lore-tabs button[aria-selected=true]:hover{background:#4c3549}
#loreDialog .lore-reading :focus-visible{outline-color:#765269}
#loreDialog .lore-pages{min-height:0;flex:1;overflow:auto;padding:0 10px 0 0;scrollbar-width:thin;scrollbar-color:#9f8297 #b9a5af26;scroll-padding:12px;overscroll-behavior:contain}
#loreDialog .lore-pages p{font-size:15px;line-height:1.85;color:#514352;margin:0 0 18px;max-width:74ch}
#loreDialog .lore-pages dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
#loreDialog .lore-pages dl>div{padding:14px 15px;border-radius:12px;background:#fffcf780;border:1px solid #92796e26}
#loreDialog .lore-pages dt{font-size:9px;font-weight:650;letter-spacing:1px;color:#90736f}
#loreDialog .lore-pages dd{margin-top:5px;font-size:13px;line-height:1.65;color:#514352}
#loreDialog .lore-pages .lore-link{border-color:#92796e33;background:#fffcf773;padding:15px 17px;border-radius:12px;color:#574251;font-size:14px;line-height:1.65;margin:0 0 10px}
#loreDialog .lore-pages h3{font-size:21px;color:#624652;line-height:1.4;margin:0 0 18px}
#loreDialog .lore-pages ol{padding-left:23px;margin:0}
#loreDialog .lore-pages li{font-size:15px;line-height:1.8;color:#514352;padding:0 0 16px 7px}
#loreDialog .lore-pages li::marker{color:#a07762;font-weight:700}
.lore-console{display:grid;grid-template-rows:36px minmax(0,1fr);min-width:0;min-height:0;padding:12px 20px 16px;gap:8px;border-top:1px solid #e8cfb52e;background:linear-gradient(145deg,#302438,#201c2c 75%)}
.lore-console-heading{display:flex;align-items:center;gap:22px;min-width:0;justify-content:space-between}
.lore-console-title{display:flex;align-items:center;gap:14px;flex-shrink:0}.lore-console-title strong{font-size:9px;letter-spacing:2px;color:#e7cba6}.lore-cast-count{font-size:10px;color:#a492af}
.lore-filters{display:flex;align-items:center;gap:6px;flex:1}.lore-filters button{font-size:11px;min-height:32px;padding:5px 12px;border:1px solid transparent;border-radius:8px;color:#b9a6c6}.lore-filters button[aria-pressed=true]{color:#f4ddbd;background:#f2d7b511;border-color:#f2d7b52b}
.lore-search{display:flex;max-width:240px;min-width:140px}.lore-search input{width:100%;height:34px;background:#1713206b;border:1px solid #e5c8e324;border-radius:9px;color:#f4e8ef;padding:7px 12px;font-size:11px}.lore-search input::placeholder{color:#ac98b7}
.lore-library-rail{position:relative}.lore-library{padding:0 3px 0 0}
#loreDialog .lore-character-card{position:relative;cursor:pointer;flex-shrink:0}
#loreDialog .lore-character-card.active{border-color:var(--hero-color);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hero-color) 20%,transparent);background:#ffffff07}
#loreDialog .lore-character-card .thumb{opacity:1;filter:none}
.lore-no-results{position:absolute;top:22px;left:0;right:20px;margin:0;text-align:center;color:#d7c7dd;font-size:13px;line-height:1.6}
@media(min-width:1900px) and (min-height:950px){#loreDialog[open]{grid-template-rows:104px minmax(0,1fr) var(--lore-console-height)}#loreDialog .lore-showcase{padding:24px 28px 18px}#loreDialog .lore-reading{padding:32px 44px 24px;gap:20px}#loreDialog .lore-pages p{font-size:17px}#loreDialog .lore-pages dd{font-size:14px}#loreDialog .lore-tabs button{font-size:13px}#loreDialog h2{font-size:36px}}
@media(max-width:1050px){#loreDialog .lore-reading{padding:20px;gap:12px}#loreDialog .lore-showcase{padding:14px;gap:8px}#loreDialog .lore-demo-controls{gap:7px}#loreDialog .lore-moods,#loreDialog .lore-playback{flex-basis:100%}#loreDialog .lore-tabs button{padding:8px 10px;font-size:11px}.lore-reading-heading{font-size:9px}.lore-reading-heading>span:last-child{display:none}#loreDialog .lore-pages dl{grid-template-columns:1fr}}
@media(max-width:700px){#loreDialog{--lore-edge:6px;--lore-console-height:calc(var(--card-height)*2 + 82px);border-radius:17px}#loreDialog[open]{grid-template-rows:86px minmax(0,1fr) var(--lore-console-height)}#loreDialog>header{padding:12px 14px;gap:9px}#loreDialog h2{font-size:25px;letter-spacing:-.6px}#loreDialog header small{font-size:7px;letter-spacing:1.3px}#loreDialog header p{font-size:10px;max-width:220px}.lore-position{display:none}.lore-header-actions{gap:5px!important}#loreDialog .lore-step{width:32px;height:36px;border-radius:9px;font-size:17px}#loreDialog .dialog-close{width:36px;height:36px;margin-left:2px;border-radius:9px;font-size:22px}#loreDialog .lore-body{display:block;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}#loreDialog .lore-showcase{padding:12px;gap:8px}#loreDialog .lore-stage{height:270px;flex:none;min-height:0}#loreDialog .lore-demo-controls{display:flex;flex-wrap:nowrap;gap:6px}#loreDialog .lore-moods{flex:1;min-width:0}#loreDialog .lore-playback{flex:1.1;min-width:0}#loreDialog .lore-moods button{min-height:36px;font-size:10px;padding:6px 4px}#loreDialog .lore-playback button{font-size:9px;min-height:44px;padding:7px 4px}#loreDialog .lore-reading{min-height:330px;padding:20px 18px 24px;gap:14px}#loreDialog .lore-reading>blockquote{font-size:22px}#loreDialog .lore-tabs{gap:2px}#loreDialog .lore-tabs button{padding:7px 9px;font-size:10px}#loreDialog .lore-pages{flex:none;max-height:330px;padding-right:4px}#loreDialog .lore-pages p{font-size:14px;line-height:1.8}#loreDialog .lore-pages dl{grid-template-columns:1fr}#loreDialog .lore-pages dd{font-size:13px}#loreDialog .lore-pages .lore-link{font-size:13px}.lore-console{padding:10px 12px 14px;grid-template-rows:36px minmax(0,1fr);gap:8px}.lore-console-heading{gap:5px;flex-wrap:nowrap}.lore-console-title{gap:6px}.lore-console-title strong{font-size:8px;letter-spacing:1px}.lore-cast-count{font-size:9px}.lore-filters{justify-content:flex-end;gap:1px}.lore-filters button{padding:6px 8px;font-size:10px;min-height:34px}.lore-search{display:none}}
@media(max-width:370px){#loreDialog .lore-step{display:none}#loreDialog h2{font-size:23px}.lore-console-heading{gap:2px}.lore-filters button{padding:5px 6px}.lore-cast-count{display:none}#loreDialog .lore-demo-controls{flex-wrap:wrap}#loreDialog .lore-moods,#loreDialog .lore-playback{flex-basis:100%}#loreDialog .lore-tabs button{font-size:9px;padding:6px 8px}}
@media(max-height:650px) and (min-width:701px){#loreDialog{--lore-edge:8px}#loreDialog[open]{grid-template-rows:64px minmax(0,1fr) var(--lore-console-height)}#loreDialog>header{padding:8px 16px}#loreDialog h2{font-size:23px}#loreDialog header small{font-size:7px}#loreDialog header p{font-size:10px}#loreDialog .lore-showcase{padding:9px 14px;gap:5px}#loreDialog .lore-stage{min-height:55px}#loreDialog .lore-reading{padding:12px 20px;gap:8px}#loreDialog .lore-reading>blockquote{font-size:18px;padding-bottom:8px}.lore-reading-heading{display:none}#loreDialog .lore-tabs{padding-bottom:6px}#loreDialog .lore-tabs button{min-height:32px;padding:6px 10px;font-size:10px}#loreDialog .lore-pages p{font-size:13px;line-height:1.7}.lore-stage-details{display:none}#loreDialog .lore-demo-controls{flex-wrap:nowrap}#loreDialog .lore-moods,#loreDialog .lore-playback{flex:1;min-width:0}#loreDialog .lore-moods button{font-size:9px;min-height:28px;padding:4px}#loreDialog .lore-playback button{font-size:9px;min-height:36px;padding:4px 6px}.lore-console{padding:8px 16px 12px}}
@media(prefers-reduced-motion:reduce){#loreDialog *,#loreDialog *:before,#loreDialog *:after{scroll-behavior:auto!important;transition:none!important}}

/* Keep portrait and text equally accessible on a narrow screen. */
.lore-view-switch{display:none}
#loreDialog h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){
 #loreDialog[open]{grid-template-rows:86px 42px minmax(0,1fr) var(--lore-console-height)}
 .lore-view-switch{display:flex;gap:4px;padding:4px 12px;border-bottom:1px solid #eee1e31c;background:#292132}
 .lore-view-switch button{flex:1;min-height:32px;border-radius:8px;color:#bfaec8;font-size:11px}
 .lore-view-switch button[aria-pressed=true]{background:#f3d6ad;color:#2b1f30}
 #loreDialog .lore-body{overflow:hidden}
 #loreDialog .lore-showcase{height:100%;display:flex;flex-direction:column;min-height:0}
 #loreDialog .lore-stage{height:auto;flex:1;min-height:80px}
 #loreDialog .lore-reading{height:100%;min-height:0}
 #loreDialog .lore-pages{flex:1;max-height:none;min-height:0}
 #loreDialog[data-lore-view=portrait] .lore-reading{display:none}
 #loreDialog[data-lore-view=reading] .lore-showcase{display:none}
}
@media(max-height:650px) and (min-width:701px){
 #loreDialog .lore-reading{display:block;overflow:auto;scrollbar-width:thin;scrollbar-color:#9f8297 #b9a5af26}
 #loreDialog .lore-reading>blockquote{margin-bottom:8px}
 #loreDialog .lore-tabs{margin-bottom:10px}
 #loreDialog .lore-pages{overflow:visible;max-height:none;flex:none}
}
/* A short desktop window keeps a large hero by moving the same picker aside. */
@media(max-height:650px) and (min-width:1050px){
 #loreDialog[open]{grid-template-columns:minmax(0,1fr) calc(var(--card-width)*2 + 64px);grid-template-rows:64px minmax(0,1fr)}
 #loreDialog>header{grid-column:1/-1;grid-row:1}
 #loreDialog .lore-body{grid-column:1;grid-row:2;grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr)}
 #loreDialog .lore-showcase{padding:14px;gap:8px}
 #loreDialog .lore-stage{min-height:100px}
 #loreDialog .lore-demo-controls{flex-wrap:wrap}
 #loreDialog .lore-moods,#loreDialog .lore-playback{flex-basis:100%}
 #loreDialog .lore-moods button{min-height:32px;font-size:11px}
 #loreDialog .lore-playback button{min-height:36px;font-size:10px}
 #loreDialog .lore-reading{display:flex;padding:20px;gap:12px;overflow:hidden}
 #loreDialog .lore-reading>blockquote{margin:0;font-size:21px}
 #loreDialog .lore-tabs{margin:0}
 #loreDialog .lore-pages{flex:1;overflow:auto;min-height:0}
 #loreDialog .lore-pages p{font-size:14px}
 #loreDialog .lore-console{grid-column:2;grid-row:2;height:100%;padding:12px;gap:10px;grid-template-rows:36px minmax(0,1fr);border-top:0;border-left:1px solid #e8cfb52e}
 #loreDialog .lore-console-heading{gap:4px;flex-wrap:nowrap}
 #loreDialog .lore-console-title{gap:0}
 #loreDialog .lore-console-title strong{display:none}
 #loreDialog .lore-cast-count{font-size:9px}
 #loreDialog .lore-filters{flex:1;gap:1px;justify-content:flex-end}
 #loreDialog .lore-filters button{font-size:10px;padding:4px 7px}
 #loreDialog .lore-search{display:none}
 #loreDialog .lore-library-rail{height:calc(var(--card-height)*2 + 9px);align-self:start}
}
/* r9: one continuous dossier, with a quieter header and editorial typography. */
#loreDialog[open]{grid-template-rows:80px minmax(0,1fr) var(--lore-console-height)}
#loreDialog>header{padding:12px 24px}
#loreDialog h2{font-size:29px;margin:3px 0 0}
#loreDialog header .lore-heading small{font-size:8px;letter-spacing:2px}
.lore-age-pill{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:9px;row-gap:1px;margin-right:15px;padding:7px 13px;border:1px solid #e9c8a038;border-radius:12px;background:linear-gradient(125deg,#f4d3a512,#f4d3a505);min-height:44px}
#loreDialog header .lore-age-pill>small{font-size:8px;letter-spacing:1.1px;color:#bd9e88}
.lore-age-pill strong{font-size:17px;color:#f2dbb9;font-weight:650;white-space:nowrap;letter-spacing:-.3px}
.lore-age-basis{grid-column:2;color:#bca8bc;font-size:8px}
#loreDialog .lore-reading{padding:16px 20px 16px 0;background:#1d1928;box-shadow:none;gap:0}
#loreDialog .lore-dossier{position:relative;isolation:isolate;flex:1;min-height:0;padding:28px 30px 32px;border-radius:20px;border:1px solid #e9dacb;background:radial-gradient(ellipse at 100% 0,#eadbc866,transparent 45%),linear-gradient(130deg,#faf6ee,#f1e8dc);box-shadow:0 8px 28px #0d081a26;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#9e8595 #bca6ac24;scroll-padding:24px}
.lore-dossier-mark{font-size:8px;font-weight:700;letter-spacing:2.2px;line-height:1.6;color:#a18a79;margin-bottom:10px}
#loreDialog .lore-profile-role{margin:0 0 10px;font-size:12px;line-height:1.6;color:#8a6a76;letter-spacing:.2px}
#loreDialog .lore-quote{font-family:Georgia,'Times New Roman',serif;font-size:clamp(24px,2.1vw,34px);font-weight:400;line-height:1.35;letter-spacing:-.35px;color:#624652;margin:0 0 26px;padding:0 0 23px;border-bottom:1px solid #b69d8640;max-width:28ch}
#loreDialog .lore-dossier-section{margin:0 0 27px}
#loreDialog .lore-dossier-section:last-child{margin-bottom:0}
#loreDialog .lore-dossier-section>h3{display:flex;align-items:center;gap:12px;margin:0 0 17px;font-family:inherit;font-size:10px;font-weight:700;line-height:1.5;letter-spacing:1.5px;text-transform:uppercase;color:#947365}
#loreDialog .lore-dossier-section>h3:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,#b69d863b,transparent)}
#loreDialog .lore-dossier p{font-size:15px;line-height:1.85;letter-spacing:.05px;color:#554854;margin:0 0 16px;max-width:76ch}
#loreDialog .lore-dossier dl{grid-template-columns:1fr 1fr;gap:10px;margin:0}
#loreDialog .lore-dossier dl>div{padding:15px 16px;border:1px solid #ac8a7326;border-radius:13px;background:#fffdf775;box-shadow:0 2px 5px #71524503}
#loreDialog .lore-dossier dl>.lore-instrument-fact{grid-column:1/-1;background:linear-gradient(120deg,#e8d9c7a6,#f9f1e466);border-color:#b79d7940}
#loreDialog .lore-dossier dl>.lore-limit-fact{border-color:#bb968c59;background:#f1e0da69}
#loreDialog .lore-dossier dt{font-size:9px;letter-spacing:1px;color:#997a69;font-weight:650;line-height:1.5}
#loreDialog .lore-dossier dd{font-size:13px;color:#574551;line-height:1.7;margin:5px 0 0}
#loreDialog .lore-dossier .lore-instrument-fact dd{font-size:18px;font-weight:600;color:#624652;margin-top:3px}
#loreDialog .lore-dossier .lore-relation{display:flex;align-items:center;gap:12px;padding:12px 15px;border:1px solid #ad8e7e30;border-radius:13px;background:#fffcf77a;margin:0 0 9px;width:100%;text-align:left;color:#594551;box-shadow:0 2px 4px #71524503}
#loreDialog .lore-dossier .lore-relation:hover{background:#fffdf8;border-color:#a47e8880;filter:none}
.lore-relation-portrait{display:block;width:48px;height:48px;flex:none;border-radius:10px;background:linear-gradient(135deg,#dfd0cb,#f2e7d9);border:1px solid #cbb3aa4d}
.lore-relation-copy{min-width:0;display:grid;gap:3px}
.lore-relation-copy strong{font-size:12px;font-weight:650;color:#624652}
.lore-relation-copy>span{font-size:12px;line-height:1.65;color:#85717b}
.lore-relation-arrow{margin-left:auto;font-size:18px;color:#aa8b82;flex:none}
@media(min-width:1900px) and (min-height:950px){#loreDialog[open]{grid-template-rows:88px minmax(0,1fr) var(--lore-console-height)}#loreDialog .lore-reading{padding:22px 28px 22px 0}#loreDialog .lore-dossier{padding:34px 40px 40px}#loreDialog .lore-dossier p{font-size:17px}#loreDialog .lore-dossier dd{font-size:14px}#loreDialog h2{font-size:33px}}
@media(max-width:1050px){#loreDialog .lore-reading{padding:14px 14px 14px 0}#loreDialog .lore-dossier{padding:23px 22px 28px}#loreDialog .lore-dossier dl{grid-template-columns:1fr}#loreDialog .lore-dossier p{font-size:14px}.lore-age-pill{margin-right:3px}.lore-position{margin-right:5px}}
@media(max-width:700px){
 #loreDialog[open]{grid-template-rows:76px 42px minmax(0,1fr) var(--lore-console-height)}
 #loreDialog>header{padding:11px 13px;gap:10px}
 #loreDialog h2{font-size:25px}
 #loreDialog header .lore-heading small{font-size:7px;letter-spacing:1.5px}
 #loreDialog .lore-step{display:none}
 .lore-age-pill{padding:5px 9px;margin-right:4px;column-gap:0;grid-template-columns:1fr;min-height:43px;border-radius:10px;text-align:center}
 #loreDialog header .lore-age-pill>small{font-size:6px;letter-spacing:1px}
 .lore-age-pill strong{font-size:14px}.lore-age-basis{grid-column:1;font-size:7px}
 #loreDialog .lore-reading{padding:0 10px 10px;background:#1d1928}
 #loreDialog .lore-dossier{padding:20px 18px 26px;border-radius:15px;border-top:0}
 #loreDialog .lore-profile-role{font-size:11px;line-height:1.65;margin-bottom:9px}
 #loreDialog .lore-quote{font-size:24px;line-height:1.4;letter-spacing:-.2px;margin-bottom:22px;padding-bottom:18px}
 #loreDialog .lore-dossier-section{margin-bottom:23px}
 #loreDialog .lore-dossier-section>h3{font-size:9px;letter-spacing:1.3px;margin-bottom:13px}
 #loreDialog .lore-dossier p{font-size:14px;line-height:1.8}
 #loreDialog .lore-dossier dl{grid-template-columns:1fr;gap:8px}
 #loreDialog .lore-dossier dl>div{padding:12px 13px;border-radius:11px}
 #loreDialog .lore-dossier dd{font-size:13px}
 #loreDialog .lore-dossier .lore-instrument-fact dd{font-size:16px}
 #loreDialog .lore-dossier .lore-relation{gap:9px;padding:10px}
 .lore-relation-portrait{width:40px;height:40px}
 .lore-relation-copy>span{font-size:11px}.lore-relation-copy strong{font-size:12px}
}
@media(max-height:650px) and (min-width:701px){#loreDialog[open]{grid-template-rows:60px minmax(0,1fr) var(--lore-console-height)}#loreDialog h2{font-size:24px}#loreDialog>header{padding:8px 17px}.lore-age-pill{padding:4px 10px;min-height:39px}#loreDialog .lore-reading{display:flex;overflow:hidden;padding:10px 12px 10px 0}#loreDialog .lore-dossier{padding:19px 22px}#loreDialog .lore-dossier p{font-size:14px}#loreDialog .lore-quote{font-size:24px}#loreDialog .lore-dossier dl{grid-template-columns:1fr}}
@media(max-height:650px) and (min-width:1050px){#loreDialog[open]{grid-template-columns:minmax(0,1fr) calc(var(--card-width)*2 + 64px);grid-template-rows:60px minmax(0,1fr)}#loreDialog .lore-reading{padding:12px 14px 12px 0}#loreDialog .lore-dossier{padding:22px 24px}#loreDialog .lore-dossier dl{grid-template-columns:1fr 1fr}}

/* r11: name and age together; content uses the actual available reading width. */
#loreDialog[open]{grid-template-rows:72px minmax(0,1fr) var(--lore-console-height)}
#loreDialog>header>.lore-heading{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#loreDialog h2{font-size:clamp(25px,2.1vw,36px);margin:0;line-height:1.15;max-width:100%;white-space:normal;overflow-wrap:anywhere}
#loreDialog .lore-age-pill{display:flex;align-items:baseline;gap:5px;padding:0;margin:0;min-height:0;border:0;border-radius:0;background:none;text-align:left;flex-shrink:0}
#loreDialog .lore-age-pill strong{font-size:clamp(17px,1.4vw,23px);color:#d4b995;letter-spacing:0;font-weight:500}
#loreDialog .lore-age-basis{font-size:10px;color:#baa4bc}
#loreDialog .lore-reading{container-type:inline-size;container-name:lore-reading;padding:18px 22px 18px 0}
#loreDialog .lore-dossier{padding:clamp(20px,2vw,32px);width:100%;max-width:1500px;align-self:center;overflow:auto;scrollbar-gutter:auto}
#loreDialog .lore-dossier-section{min-width:0;margin:0 0 24px}
#loreDialog .lore-dossier-section:last-child{margin-bottom:0}
#loreDialog .lore-dossier-section>h3{font-size:11px;margin-bottom:14px;letter-spacing:1.4px}
#loreDialog .lore-dossier p{font-size:clamp(15px,1.05vw,18px);line-height:1.7;margin:0 0 16px;max-width:none;overflow-wrap:break-word}
#loreDialog .lore-dossier p:last-child{margin-bottom:0}
#loreDialog .lore-dossier dl{grid-template-columns:1fr;gap:8px}
#loreDialog .lore-dossier dl>div{padding:11px 14px}
#loreDialog .lore-dossier dd{font-size:14px;line-height:1.55;overflow-wrap:break-word}
#loreDialog .lore-dossier .lore-instrument-fact dd{font-size:17px}
#loreDialog .lore-dossier .lore-relation{padding:10px 12px;gap:10px}
#loreDialog .lore-relation-copy>span{font-size:13px;line-height:1.5;overflow-wrap:break-word}
#loreDialog .lore-relation-copy strong{font-size:13px}
#loreDialog .lore-relation-portrait{width:42px;height:42px}
@container lore-reading (min-width:760px){
 #loreDialog .lore-dossier{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:28px;align-content:start}
 #loreDialog .lore-dossier> .lore-dossier-section{margin:0}
 #loreDialog .lore-dossier-aside{min-width:0;padding-left:24px;border-left:1px solid #b69d8633}
}
@media(min-width:1600px) and (min-height:800px){
 #loreDialog .lore-body{grid-template-columns:minmax(340px,.74fr) minmax(0,1.26fr)}
 #loreDialog .lore-showcase{padding:18px 22px}
}
@media(max-width:1050px){#loreDialog .lore-reading{padding:14px 14px 14px 0}#loreDialog .lore-dossier{padding:22px}#loreDialog>header>.lore-heading{gap:10px}}
@media(max-width:700px){
 #loreDialog[open]{grid-template-rows:76px 42px minmax(0,1fr) var(--lore-console-height)}
 #loreDialog>header>.lore-heading{flex-direction:column;align-items:flex-start;gap:3px;flex-wrap:nowrap}
 #loreDialog h2{font-size:24px;line-height:1.1}
 #loreDialog .lore-age-pill strong{font-size:15px}
 #loreDialog .lore-age-basis{font-size:9px}
 #loreDialog .lore-reading{padding:0 10px 10px}
 #loreDialog .lore-dossier{padding:20px 18px}
 #loreDialog .lore-dossier p{font-size:15px;line-height:1.7}
 #loreDialog .lore-dossier dd{font-size:14px}
}
@media(max-height:650px) and (min-width:701px){#loreDialog[open]{grid-template-rows:60px minmax(0,1fr) var(--lore-console-height)}#loreDialog h2{font-size:24px}#loreDialog .lore-reading{padding:10px 12px 10px 0}#loreDialog .lore-dossier{padding:20px}}
@media(max-height:650px) and (min-width:1050px){#loreDialog[open]{grid-template-columns:minmax(0,1fr) calc(var(--card-width)*2 + 64px);grid-template-rows:60px minmax(0,1fr)}}

@container lore-reading (min-width:760px){
 #loreDialog .lore-dossier{padding:24px;gap:24px}
 #loreDialog .lore-dossier-aside{padding-left:20px}
 #loreDialog .lore-dossier-aside dl{gap:6px}
 #loreDialog .lore-dossier-aside dl>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px;align-items:baseline;padding:9px 11px}
 #loreDialog .lore-dossier-aside dd{margin:0;font-size:14px;line-height:1.45}
 #loreDialog .lore-dossier-aside .lore-instrument-fact dd{font-size:16px}
 #loreDialog .lore-dossier-aside dt{font-size:8px;letter-spacing:.7px}
 #loreDialog .lore-dossier-aside .lore-dossier-section{margin-bottom:18px}
 #loreDialog .lore-dossier-aside .lore-dossier-section:last-child{margin-bottom:0}
 #loreDialog .lore-dossier-section>h3{margin-bottom:10px}
 #loreDialog .lore-dossier .lore-relation{padding:8px 10px;margin-bottom:7px}
 #loreDialog .lore-relation-copy>span{font-size:13px;line-height:1.4}
}
@media(min-width:1600px) and (min-height:800px){
 #loreDialog[open]{grid-template-rows:64px minmax(0,1fr) var(--lore-console-height)}
 #loreDialog>header{padding-top:8px;padding-bottom:8px}
 #loreDialog .lore-reading{padding-top:12px;padding-bottom:12px}
}
@container lore-reading (min-width:760px){
 #loreDialog .lore-dossier{padding:20px 24px}
 #loreDialog .lore-dossier-aside dl{gap:4px}
 #loreDialog .lore-dossier-aside .lore-dossier-section{margin-bottom:14px}
 #loreDialog .lore-dossier .lore-relation{padding-top:6px;padding-bottom:6px}
}

/* r12: a large centered identity, equal scene/text columns, one reading flow. */
#loreDialog[open]{grid-template-columns:minmax(0,1fr);grid-template-rows:112px minmax(0,1fr) var(--lore-console-height)}
#loreDialog>header{position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding:14px 240px;justify-items:center;gap:0}
#loreDialog>header>.lore-heading{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;flex-wrap:nowrap;width:100%;text-align:center}
#loreDialog h2{font-size:clamp(36px,2.7vw,54px);line-height:1.08;letter-spacing:-1px;margin:0;text-align:center}
#loreDialog .lore-age-pill{justify-content:center;align-items:baseline;gap:6px;text-align:center}
#loreDialog .lore-age-pill strong{font-size:clamp(24px,1.55vw,31px);line-height:1.15;color:#ead2b0;font-weight:550}
#loreDialog .lore-age-basis{font-size:13px}
#loreDialog .lore-header-actions{position:absolute;right:24px;top:50%;transform:translateY(-50%)}
#loreDialog .lore-body{grid-column:1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#loreDialog .lore-showcase{padding:18px 12px 16px 20px;gap:10px;min-width:0}
#loreDialog .lore-stage{border-radius:20px;min-height:100px}
#loreDialog .lore-family-badge,#loreDialog #loreMoodLabel{display:none!important}
#loreDialog .lore-reading{padding:18px 20px 16px 12px;container-type:normal}
#loreDialog .lore-dossier{display:block;width:100%;max-width:none;align-self:stretch;padding:28px 32px;border-radius:20px;background:linear-gradient(135deg,#faf6ee,#f1e8dc);scrollbar-gutter:stable;scroll-padding:24px}
#loreDialog .lore-dossier-section{margin:0 0 28px}
#loreDialog .lore-dossier-section:last-child{margin-bottom:0}
#loreDialog .lore-dossier-section>h3{font-size:14px;line-height:1.4;font-weight:750;letter-spacing:1.3px;color:#896758;margin-bottom:16px}
#loreDialog .lore-dossier-section>h3:after{background:#b49b8338}
#loreDialog .lore-dossier p{font-size:clamp(19px,1.15vw,24px);line-height:1.62;letter-spacing:0;color:#493d49;margin-bottom:18px;max-width:none}
#loreDialog .lore-dossier dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
#loreDialog .lore-dossier dl>div{display:block;padding:17px 18px;border-radius:14px;background:#fffdfa8c;border-color:#aa8a7333}
#loreDialog .lore-dossier dl>div:last-child{grid-column:1/-1}
#loreDialog .lore-dossier .lore-instrument-fact{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;padding:17px 18px}
#loreDialog .lore-dossier dt{font-size:12px;line-height:1.4;letter-spacing:1px;color:#8b6a59}
#loreDialog .lore-dossier dd{font-size:clamp(18px,1.05vw,22px);line-height:1.5;margin:7px 0 0;color:#493d49}
#loreDialog .lore-dossier .lore-instrument-fact dd{font-size:clamp(21px,1.2vw,25px);line-height:1.4;margin:0;font-weight:650}
#loreDialog .lore-dossier .lore-relation{padding:15px;gap:14px;margin:0 0 12px;border-radius:14px}
#loreDialog .lore-relation-portrait{width:56px;height:56px;border-radius:12px}
#loreDialog .lore-relation-copy{gap:5px}
#loreDialog .lore-relation-copy strong{font-size:19px}
#loreDialog .lore-relation-copy>span{font-size:18px;line-height:1.5;color:#705e69}
#loreDialog .lore-relation-arrow{font-size:22px}
#loreDialog .lore-console{grid-column:1;grid-row:3;border-left:0;border-top:1px solid #e8cfb52e;height:auto}
/* Short landscape windows keep equal halves; the original picker stays below. */
@media(max-height:650px) and (min-width:701px){
 #loreDialog[open]{grid-template-columns:minmax(0,1fr);grid-template-rows:86px minmax(0,1fr) var(--lore-console-height)}
 #loreDialog>header{padding:8px 215px}
 #loreDialog h2{font-size:34px}
 #loreDialog .lore-age-pill strong{font-size:24px}
 #loreDialog .lore-showcase{padding:10px;gap:6px}
 #loreDialog .lore-stage{min-height:70px}
 #loreDialog .lore-reading{padding:10px 12px 10px 2px;display:flex;overflow:hidden}
 #loreDialog .lore-dossier{padding:22px}
 #loreDialog .lore-demo-controls{flex-wrap:nowrap}
 #loreDialog .lore-moods,#loreDialog .lore-playback{flex:1;min-width:0}
 #loreDialog .lore-moods button{font-size:10px;padding:5px}
 #loreDialog .lore-playback button{font-size:10px;padding:5px}
 #loreDialog .lore-console{padding:8px 16px 12px;grid-template-rows:36px minmax(0,1fr)}
 #loreDialog .lore-console-heading{gap:20px;justify-content:space-between}
 #loreDialog .lore-console-title strong{display:block}
 #loreDialog .lore-filters{justify-content:flex-start}
 #loreDialog .lore-library-rail{height:auto;align-self:stretch}
}
@media(max-width:1050px){
 #loreDialog>header{padding-left:190px;padding-right:190px}
 #loreDialog .lore-header-actions{right:16px}
 #loreDialog .lore-position{display:none}
 #loreDialog .lore-showcase{padding:14px 7px 14px 14px}
 #loreDialog .lore-reading{padding:14px 14px 14px 7px}
 #loreDialog .lore-dossier{padding:24px}
 #loreDialog .lore-dossier dl{grid-template-columns:1fr}
}
@media(max-width:700px){
 #loreDialog[open]{grid-template-rows:100px 42px minmax(0,1fr) var(--lore-console-height)}
 #loreDialog>header{grid-row:1;padding:10px 52px}
 #loreDialog>header>.lore-heading{align-items:center;gap:4px}
 #loreDialog h2{font-size:32px;letter-spacing:-.7px}
 #loreDialog .lore-age-pill strong{font-size:23px}
 #loreDialog .lore-age-basis{font-size:11px}
 #loreDialog .lore-header-actions{right:10px}
 #loreDialog .lore-view-switch{grid-row:2}
 #loreDialog .lore-body{grid-row:3;display:block}
 #loreDialog .lore-console{grid-row:4}
 #loreDialog .lore-showcase{padding:12px}
 #loreDialog .lore-reading{padding:0 10px 10px}
 #loreDialog .lore-dossier{padding:22px 18px;border-radius:15px}
 #loreDialog .lore-dossier p{font-size:19px;line-height:1.6}
 #loreDialog .lore-dossier dl>div{padding:15px}
 #loreDialog .lore-dossier dd{font-size:18px}
 #loreDialog .lore-relation-copy>span{font-size:17px}
 #loreDialog .lore-relation-copy strong{font-size:18px}
 #loreDialog .lore-relation-portrait{width:44px;height:44px}
}
@media(max-width:700px){#loreDialog .lore-heading[data-long-name=true] h2{font-size:28px}}