/* V18 — original title illustration, one hierarchy, conversations over the world. */
:root{--gold:#d9bd84;--paper:#ede4d0;--muted:#aeb8b5;--line:#75654b;--panel:#11191e}
#title-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:flex-start;background:#0a1217;isolation:isolate;padding:5vh 6vw;box-sizing:border-box;overflow:auto;text-align:left}
#title-screen[hidden]{display:none!important}#title-screen:before,#title-screen:after,#title-screen .title-content:before,#title-screen .title-content:after{display:none!important}
.title-art{position:fixed;inset:0 0 0 28%;z-index:-2;background:url('assets/art/v9-title-world.jpg') 68% 38%/cover no-repeat;animation:title-reveal 1.2s ease-out both}
.title-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0a1217,#0a121766 27%,transparent 65%),linear-gradient(0deg,#0a1217,transparent 32%)}
#title-screen .title-content{position:relative;inset:auto;width:min(430px,40vw);max-width:none;min-width:0;transform:none;padding:0;margin:0;background:none;border:0;box-shadow:none;text-align:left;backdrop-filter:none}
#title-screen h1{font:600 clamp(40px,5.1vw,78px)/1 Georgia,serif;letter-spacing:.035em;color:#eee3c9;text-shadow:0 3px 25px #000;margin:20px 0 15px;white-space:nowrap}
#title-screen .eyebrow{font-size:10px;letter-spacing:.26em;color:#b5c3bb;margin:0 0 20px}#title-screen .title-divider{justify-content:flex-start;width:100%;opacity:.65;margin:16px 0}
#title-screen .subtitle{font:italic 24px Georgia,serif;text-transform:none;letter-spacing:0;color:#cfbb91;margin:20px 0}#title-screen .intro{font:16px/1.8 Georgia,serif;color:#b5bfb9;max-width:310px;margin:0 0 28px}
#title-screen #enter,#title-screen #continue{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;max-width:360px;padding:16px 20px;margin:10px 0;font:600 19px Georgia,serif;letter-spacing:.035em;clip-path:none;border-radius:0;border:1px solid #b89b61;background:linear-gradient(100deg,#49352a,#252221);color:#f4e3bf;box-shadow:inset 3px 0 #d4b67a}
#title-screen #continue{background:#15272c;border-color:#729087;font-size:16px}#title-screen #continue[hidden]{display:none}
#title-screen .title-links{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:5px 18px;margin:16px 0;max-width:370px}#title-screen .text-button{padding:6px 0;min-height:34px;border:0;background:none;color:#bcc8c1;font-size:12px;text-transform:none;letter-spacing:.04em;box-shadow:none;clip-path:none}#title-screen .text-button:hover{color:#f1d398}
#title-screen #title-expedition,#title-screen #title-slots{display:none}#active-slot-label{font-size:10px;letter-spacing:.12em;color:#8ea09a;border:0;background:none;padding:0;margin:22px 0 0;text-align:left}
.title-tools{position:fixed;bottom:22px;right:30px;max-width:45vw;text-align:right}.title-runes{position:fixed;right:6vw;top:5vh;color:#e9d7a17a;font:14px Georgia,serif;letter-spacing:.35em}
#title-screen .edition{position:fixed;bottom:20px;left:6vw;right:auto;margin:0;font-size:9px;letter-spacing:.18em;color:#8e9d95}#title-screen #loading{position:fixed;bottom:45px;left:6vw;font-size:10px;color:#84918d;margin:0}
#panel{background:#101a20f7;border:1px solid #837052;box-shadow:0 24px 100px #000b;color:var(--paper);border-radius:0;clip-path:none;width:min(1060px,92vw);max-width:1060px;max-height:90dvh;padding:0;overflow:hidden}#panel:not([open]){display:none!important}
#panel::backdrop{background:#030b12bb;backdrop-filter:blur(4px)}#panel header{padding:28px 36px 20px;border-bottom:1px solid #65756645;background:linear-gradient(105deg,#27322e,#121b22)}#panel .panel-top{position:static;padding:0;margin:0;display:flex;align-items:center;justify-content:space-between;background:none}
#panel-title{font:32px/1.15 Georgia,serif;margin:8px 0;color:#ead9b8}#panel-eyebrow{font:10px/1.5 Arial,sans-serif;letter-spacing:.2em;color:#bfa777}
#panel-body{padding:26px 34px;max-height:59dvh;overflow:auto;overscroll-behavior:contain;margin:0}#panel-footer{padding:16px 34px;display:flex;gap:12px;flex-wrap:wrap;border-top:1px solid #65756645;background:#0b1319;margin:0}
#panel-footer button{min-height:42px;padding:10px 20px;font-size:13px;letter-spacing:.03em;clip-path:none;border-radius:0}#panel button:focus-visible{outline:2px solid #eac987;outline-offset:3px}
#panel .profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0 0}
#panel .profile-card,.vow-grid button{padding:24px 20px;background:linear-gradient(145deg,#24302e,#101920);border:1px solid #626c59;min-height:225px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px;clip-path:none;box-shadow:none}
#panel .profile-card:hover,#panel .profile-card:focus-visible,.vow-grid button:hover{border-color:#ddbd7e;background:linear-gradient(145deg,#394135,#162229);transform:translateY(-3px)}#panel .profile-card>span{font-size:23px;color:#d4bd85}#panel .profile-card strong,.vow-grid strong{font:24px Georgia,serif;color:#eddfbd}#panel .profile-card small,.vow-grid small{font:13px/1.6 Arial,sans-serif;color:#b3c2b9}#panel .profile-card p,#panel .profile-card em{font-size:11px;margin:0;color:#c2b99b}
.creation-lead{max-width:700px}.creation-lead small{letter-spacing:.15em;font-size:9px;color:#bfad85}.creation-lead h3{font:28px/1.35 Georgia,serif;color:#ead9b8;margin:12px 0}.creation-lead p,.creation-note{font-size:13px;line-height:1.7;color:#aebbb6}.vow-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.vow-grid button{min-height:155px}
#panel[data-kind=dialogue]{position:fixed;top:auto;bottom:24px;left:0;right:0;margin:0 auto;width:min(1120px,94vw);max-height:65dvh;display:grid;grid-template-columns:220px 1fr;background:linear-gradient(105deg,#14262cf5,#101620f7);border:1px solid #a18a60;overflow:hidden;animation:dialogue-arrive .22s ease-out;padding:0}
#panel[data-kind=dialogue]::backdrop{background:linear-gradient(0deg,#03090e40,transparent 70%);backdrop-filter:none}
#panel[data-kind=dialogue] #panel-portrait{display:block!important;position:relative!important;inset:auto!important;float:none!important;grid-column:1;grid-row:1/4;min-height:300px;width:220px!important;height:100%!important;margin:0!important;opacity:1;mask-image:none!important;-webkit-mask-image:none!important;background-position:center 20%!important;background-size:cover!important;border:0;filter:none}
#panel[data-kind=dialogue] header{grid-column:2;padding:20px 28px 8px;background:none;border:0}#panel[data-kind=dialogue] #panel-title{font-size:26px;margin:6px 0}#panel[data-kind=dialogue] #panel-body{grid-column:2;padding:0 28px;max-height:25dvh}#panel[data-kind=dialogue] #panel-footer{grid-column:2;padding:12px 28px;background:none;border:0;position:static}
#panel[data-kind=dialogue] .spoken{font:clamp(17px,1.6vw,22px)/1.55 Georgia,serif;min-height:80px;color:#f1e8d6;margin:10px 0}#panel[data-kind=dialogue] .dialogue-count{font-size:10px;color:#96a69f}#panel[data-kind=dialogue] .dialogue-location{font-size:10px;letter-spacing:.1em;color:#a6b7ad;margin:4px 0}#panel:not([data-kind=dialogue]) #panel-portrait{display:none}
#load-screen{padding:0;background:#0a1218;text-align:left;isolation:isolate;overflow:hidden}.loading-landscape{position:absolute;inset:0 0 0 32%;z-index:-2;background:url('assets/art/v9-title-world.jpg') 60% 45%/cover}.loading-landscape:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0a1218,transparent 70%),linear-gradient(0deg,#0a1218 5%,transparent 60%)}
.loading-copy{position:absolute;left:7vw;top:26vh;width:43vw}.loading-copy>small{font:11px Arial,sans-serif;letter-spacing:.3em;color:#cebd91}#load-screen h2{font:clamp(32px,4.5vw,65px)/1.12 Georgia,serif;margin:24px 0;color:#f0dfb8;max-width:580px}.load-divider{color:#bda16c;margin:30px 0}.load-lore{font:17px/1.8 Georgia,serif;color:#aebbb7}
.loading-footer{position:absolute;bottom:13vh;left:7vw;right:7vw;display:flex;align-items:center;gap:22px}.loading-footer>div{flex:1;max-width:520px}.loading-footer .load-emblem{font-size:26px}#load-screen [role=status]{font:11px Arial,sans-serif;color:#d2c4a1;letter-spacing:.09em}#load-screen progress{width:100%;height:3px;margin:16px 0;background:#394038}#load-screen footer{position:absolute;bottom:5vh;left:7vw;max-width:80vw;margin:0;font:12px/1.6 Georgia,serif;color:#9caba3;text-align:left}
#boss-hud{border-color:#bfa470!important;background:linear-gradient(100deg,#24171fee,#101b23ee)!important}#boss-phase{color:#edca88!important;font-size:11px;line-height:1.4;max-width:185px;text-align:right}#boss-phase[data-state=recover]{color:#90d9bb!important}
body.first-death #hud{opacity:0;transition:opacity .4s}body.first-death:after{content:'';pointer-events:none;position:fixed;inset:0;z-index:90;background:#090c11;animation:last-bell 3.2s ease-in forwards}body.first-death #room-banner{z-index:91;opacity:1}
@keyframes last-bell{0%,30%{opacity:0}100%{opacity:1}}@keyframes title-reveal{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}@keyframes dialogue-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:820px),(pointer:coarse){.mobile-layout #panel{padding:0!important;border-radius:0!important;max-height:90dvh!important;overflow:hidden!important}.mobile-layout #panel .panel-top{position:static;margin:0;padding:0;background:none}.mobile-layout #panel-footer{position:static;margin:0;padding:12px 20px!important;background:#0b1319}.mobile-layout #panel[data-kind=dialogue]{padding:0!important;grid-template-columns:85px 1fr;max-height:75dvh!important}.mobile-layout #panel[data-kind=dialogue] #panel-portrait{width:85px!important;height:100%!important;min-height:240px;float:none!important;margin:0!important;mask-image:none!important;-webkit-mask-image:none!important}.mobile-layout #panel[data-kind=dialogue] #panel-title{font-size:21px!important}.mobile-layout #panel[data-kind=dialogue] #panel-footer{padding:8px 14px!important;background:none}.mobile-layout #panel[data-kind=dialogue] #panel-body{max-height:30dvh}.mobile-layout #panel[data-kind=dialogue] header{padding:14px 14px 5px}}
@media(max-width:700px){#title-screen{padding:8vh 7vw}.title-art{inset:0;opacity:.52;background-position:65% center}.title-art:after{background:linear-gradient(90deg,#0a1217e8,#0a121755)}#title-screen .title-content{width:min(430px,86vw)}#title-screen h1{font-size:50px}#title-screen .intro{font-size:15px}.title-tools{right:7vw;bottom:55px;max-width:80vw}.title-tools button{font-size:10px!important}.title-runes{display:none}#title-screen .edition{left:7vw}#title-screen #loading{left:7vw;bottom:36px}#panel .profile-grid,.vow-grid{grid-template-columns:1fr}#panel .profile-card{min-height:155px;padding:18px}#panel-body{padding:20px;max-height:55dvh}#panel header{padding:20px}#panel-footer{padding:14px 20px}#panel-title{font-size:26px}#panel[data-kind=dialogue]{grid-template-columns:85px 1fr;bottom:12px;max-height:75dvh}#panel[data-kind=dialogue] #panel-portrait{width:85px!important;min-height:260px}#panel[data-kind=dialogue] header{padding:14px 14px 5px}#panel[data-kind=dialogue] #panel-title{font-size:20px}#panel[data-kind=dialogue] #panel-body{padding:0 14px;max-height:30dvh}#panel[data-kind=dialogue] #panel-footer{padding:8px 14px}#panel[data-kind=dialogue] .spoken{font-size:17px}.loading-copy{left:7vw;top:20vh;width:80vw}.loading-landscape{inset:0;opacity:.5}#load-screen h2{font-size:42px}.load-lore{font-size:15px}}
@media(max-height:600px){#title-screen h1{font-size:40px;margin:10px 0}#title-screen .intro{margin:10px 0}#title-screen .eyebrow{margin-bottom:8px}#title-screen .subtitle{margin:10px 0}#title-screen .title-links{margin:8px 0}.title-tools{position:static;margin-top:16px;max-width:100%}#title-screen .edition,#title-screen #loading{display:none}#panel[data-kind=dialogue]{max-height:90dvh}#panel[data-kind=dialogue] #panel-portrait{min-height:180px}.loading-copy{top:10vh}.load-divider{margin:12px 0}.load-lore{font-size:14px}}
@media(prefers-reduced-motion:reduce){.title-art,#panel[data-kind=dialogue],body.first-death:after{animation:none!important}body.first-death:after{opacity:.8}#panel .profile-card:hover{transform:none}}

body.first-death:after{content:'LA PRIMERA MUERTE';display:flex;align-items:center;justify-content:center;color:#ceb998;font:24px Georgia,serif;letter-spacing:.18em}
#title-screen{gap:20px}#panel[data-kind=slots] .save-slot{border-color:#687563;background:linear-gradient(135deg,#26332e,#111a23)}#panel[data-kind=slots] .save-slot.empty{background:#111a23}
@media(max-height:600px){#title-screen{flex-wrap:wrap}.title-tools{flex-basis:100%;text-align:left}}
