/* Cinematic illustration remains distinct from the real-time game. */
#titleArt{position:fixed;inset:0;z-index:9;overflow:hidden;background:#102825 url('./textures/v2/title.webp') 30% center/cover no-repeat;transition:opacity .8s}
.title-vignette{position:absolute;inset:0;background:linear-gradient(90deg,#071c20e8 0%,#091e2277 38%,transparent 70%),linear-gradient(0deg,#07191eaa,transparent 35%,transparent 80%,#06161c55)}
.title-motes{position:absolute;inset:-10%;opacity:.4;background-image:radial-gradient(2px 2px at 16% 38%,#f4db9e 60%,transparent),radial-gradient(2px 2px at 49% 69%,#f4db9e 60%,transparent),radial-gradient(1px 1px at 34% 17%,#f4db9e 60%,transparent),radial-gradient(2px 2px at 72% 41%,#f4db9e 60%,transparent);background-size:440px 370px;animation:title-drift 24s linear infinite}
@keyframes title-drift{to{transform:translate(40px,-65px)}}
#title{z-index:12;left:7vw;right:auto;top:50%;bottom:auto;transform:translateY(-50%);width:min(650px,85vw);max-width:none;max-height:calc(100dvh - 130px);padding:18px 0;background:none;border:0;border-radius:0;box-shadow:none;overflow-y:auto;display:block;text-shadow:0 3px 24px #06171b}
#title .eyebrow{font-size:10px;letter-spacing:.35em;color:#d8bc81;margin:0 0 24px}
#title h1{font-size:clamp(54px,6.4vw,98px);line-height:.98;letter-spacing:-.045em;color:#f3e8ce;margin:0;font-weight:400;text-wrap:nowrap}
#title h1 span{font-size:.53em;letter-spacing:.13em;font-variant:small-caps}
.title-rule{display:flex;align-items:center;gap:18px;color:#bc9762;width:min(325px,75%);margin:24px 0 19px;font-size:12px}.title-rule:before,.title-rule:after{content:'';height:1px;background:linear-gradient(90deg,#ac895c,transparent);flex:1}.title-rule:before{transform:rotate(180deg)}
#title .title-tagline{font-size:18px;line-height:1.65;margin:0 0 27px;color:#dfdfd1;letter-spacing:.015em}
.title-menu{width:min(330px,100%)}#title .title-menu button{min-height:48px;width:100%;margin:6px 0;padding:13px 18px;text-align:left;border-radius:2px;font-size:13px;letter-spacing:.06em;box-shadow:none}
#title #startb,#title #continueb{background:#dfcca1;color:#182f2e;border:1px solid #f2e5c6;transition:background .2s,letter-spacing .2s}#title #startb:hover,#title #continueb:hover{background:#f5e7c9;letter-spacing:.085em}#title #continueb span{float:right}
.title-secondary{display:flex;gap:12px}#title .title-secondary .secondary{background:#10272766;border-color:#bfa37670;color:#e5d9ba;min-height:44px;margin-top:6px!important;text-align:center}#title .title-secondary .secondary:hover{background:#30483acc}
#title .fine{font-size:8px!important;letter-spacing:.21em;margin-top:24px;color:#c9c5ae;opacity:.9}
#titleSound{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:7vw;z-index:15;min-height:44px;padding:10px 14px;background:#102725aa;border:1px solid #bca37555;border-radius:2px;color:#e6d5b2;font:12px system-ui;letter-spacing:.04em}#titleSound span{margin-left:8px}
#titleFootnote{position:fixed;z-index:12;right:4vw;bottom:25px;font:9px system-ui;letter-spacing:.26em;color:#dcd7b9;text-shadow:0 2px 8px #000}
#prologue{position:fixed;inset:0;z-index:12;display:flex;align-items:center;pointer-events:none;background:linear-gradient(90deg,#071a20c9,transparent 85%)}
.story-copy{margin-left:9vw;width:min(540px,78vw);color:#f1e5ca;text-shadow:0 3px 22px #000;padding:25px 0}
#storyNumber{font-size:10px;letter-spacing:.26em;color:#d7b97f;margin-bottom:27px}
#storyHeading{font-size:clamp(32px,4.1vw,57px);font-weight:400;line-height:1.08;max-width:none;margin:0 0 26px;text-wrap:balance}
#storyText{font-size:clamp(17px,1.65vw,22px);line-height:1.8;color:#e8e4d5;margin:0}
.story-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px}.story-footer span{font:8px system-ui;letter-spacing:.2em;color:#d0b47d}#storyNext{pointer-events:auto;min-height:44px;padding:10px 14px;background:#142c29c9;border:1px solid #d7b97f99;color:#f1e5ca;border-radius:2px;font:12px system-ui}
.story-track{height:1px;background:#dfc69444;margin-top:18px}.story-track span{display:block;width:calc(var(--story-progress,0)*100%);height:1px;background:#ecd3a0}
.in-prologue #caption{visibility:hidden}.in-prologue #controls{position:relative;z-index:31}.in-prologue #stick{opacity:.22}.in-prologue #stick:active{opacity:.7}
#pause{width:44px;height:44px}.volume-setting input{min-height:44px}
#skipIntro{min-height:44px}
body.gentle-opening .title-motes{animation:none}
@media(prefers-reduced-motion:reduce){.title-motes{animation:none}#titleArt{transition:none}}
@media(max-width:700px){#titleArt{background-position:66% center}.title-vignette{background:linear-gradient(90deg,#071c20d9,#091e2244),linear-gradient(0deg,#07191eed,transparent 90%)}#title{left:8vw;width:84vw;max-height:calc(100dvh - 115px);padding:0}#title h1{font-size:clamp(46px,12vw,76px)}#title .eyebrow{font-size:8px;letter-spacing:.24em;margin-bottom:19px}#title .title-tagline{font-size:16px;margin-bottom:22px}.title-rule{margin:22px 0 17px}#titleSound{left:8vw;bottom:18px}#titleFootnote{display:none}.story-copy{width:84vw;margin:0 8vw;padding-bottom:100px}#storyHeading{font-size:37px}#storyText{font-size:18px;line-height:1.65}.story-footer span{display:none}.story-footer{justify-content:flex-start}#skipIntro{right:18px;bottom:20px;font-size:12px;max-width:calc(100vw - 165px);padding:12px}.in-prologue #stick{bottom:20px}}
@media(max-height:520px){#title{left:6vw;width:88vw;max-height:calc(100dvh - 70px);display:grid;grid-template-columns:1.25fr 1fr;column-gap:38px;padding:0;align-items:center}#title .eyebrow{grid-column:1;grid-row:1;font-size:8px;margin:0 0 10px}#title h1{grid-column:1;grid-row:2;font-size:clamp(40px,7vw,64px)}#title .title-tagline{grid-column:1;grid-row:3;font-size:13px;line-height:1.4;margin:16px 0 0}#title .title-rule,#title .fine{display:none}#title .title-menu{grid-column:2;grid-row:1/4;width:100%}#title .title-menu button{min-height:44px;margin:4px 0;padding:10px 14px}#titleSound{bottom:7px;left:6vw;font-size:10px;padding:7px 12px}#titleFootnote{display:none}.story-copy{width:70vw;margin:0 10vw;padding:25px 0 60px}#storyNumber{margin-bottom:14px}#storyHeading{font-size:32px;margin-bottom:14px}#storyText{font-size:16px;line-height:1.5}.story-footer{margin-top:15px}.story-track{margin-top:10px}#skipIntro{bottom:12px;right:18px;padding:10px 14px;font-size:11px}.in-prologue #stick{width:70px;height:70px;left:15px;bottom:12px}.in-prologue #knob{top:12px;left:12px}}

/* v2 Atlas key art: title, then one illustration per prologue card; gentle Ken-Burns drift. */
#titleArt{background-position:30% 40%;animation:bk-drift 38s ease-in-out infinite alternate;transform-origin:34% 55%}
#titleArt[data-chapter="0"]{background-image:url('./textures/v2/card1.webp');background-position:50% 50%;transform-origin:62% 50%}
#titleArt[data-chapter="1"]{background-image:url('./textures/v2/card2.webp');background-position:50% 45%;transform-origin:50% 55%}
#titleArt[data-chapter="2"]{background-image:url('./textures/v2/card3.webp');background-position:60% 50%;transform-origin:70% 60%}
@keyframes bk-drift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.09) translate(-1.2%,-.8%)}}
body.gentle-opening #titleArt{animation:none;transform:none}
@media(prefers-reduced-motion:reduce){#titleArt{animation:none}}
/* Landscape: the logo sits over the sky (upper left); the menu moves to the lower right, clear of the apprentice. */
@media(min-width:701px) and (min-aspect-ratio:4/3){
 #title{top:5vh;transform:none;max-height:none;width:min(560px,46vw)}
 #title .title-menu{position:fixed;right:5vw;bottom:9vh;width:min(340px,30vw);padding:18px 20px;background:#0c2226cc;border:1px solid #bca37555;border-radius:4px}
 .title-vignette{background:radial-gradient(ellipse 38% 34% at 20% 30%,#071c20b8,transparent 100%),linear-gradient(180deg,#071c20c0 0%,#091e2266 30%,transparent 52%),linear-gradient(0deg,#07191e99,transparent 30%)}
}
/* Portrait phones: crop to the apprentice and the trunk; the text panel keeps the lower half. */
@media(max-width:700px){#titleArt{background-position:30% 30%}#titleArt[data-chapter="0"]{background-position:52% 50%}#titleArt[data-chapter="1"]{background-position:46% 50%}#titleArt[data-chapter="2"]{background-position:72% 50%}}
/* Legibility: the tagline sits over bright sky. */
#title .title-tagline,#title .eyebrow,#title .fine{text-shadow:0 1px 3px #061418,0 0 18px #061418cc}
/* Portrait phones: the key art fills the upper part (apprentice + glowing hollow), the title panel sits in the dark below. */
@media(max-width:700px) and (orientation:portrait){
 #titleArt:not([data-chapter]){background-size:auto 62%;background-position:31% 0;background-color:#0b2023}
 #titleArt:not([data-chapter]) .title-vignette{background:linear-gradient(180deg,transparent 0%,transparent 44%,#0b2023e6 60%,#0b2023 64%)}
 body.at-title #title{top:auto;bottom:max(78px,calc(env(safe-area-inset-bottom) + 70px));transform:none;max-height:44dvh;overflow:auto;padding:0}
 body.at-title #title h1{font-size:40px;margin-bottom:8px}body.at-title #title .title-rule{margin:8px 0}body.at-title #title .title-tagline{margin:6px 0 10px}
}
/* Phone prologue: the card illustration fills the top, the story sits below on a solid band (no gradient over the art);
   the stick stays touchable for move-to-skip but is invisible during the cards. */
@media(max-width:700px) and (orientation:portrait){
 #titleArt[data-chapter]{background-size:auto 56%;background-color:#0b2023;background-position-y:7vh}
 #titleArt[data-chapter] .title-vignette{background:linear-gradient(180deg,transparent 0%,transparent 44%,#0b2023e6 53%,#0b2023 57%)}
 #prologue{background:none;align-items:flex-end}
 #prologue .story-copy{padding-bottom:max(96px,calc(env(safe-area-inset-bottom) + 90px))}
}
body.in-prologue #stick{opacity:0}
/* Round 2 legibility: the title's verb line and every eyebrow read at phone size, on a quiet backing over busy art. */
#title .fine{font-size:11px!important;letter-spacing:.18em;color:#f0e3c2;opacity:1}
#title .eyebrow,#prologue .eyebrow{font-size:11px;color:#f0d49a;letter-spacing:.26em;text-shadow:0 1px 2px #061418,0 0 12px #061418}
@media(max-width:700px){
 #title .eyebrow,#prologue .eyebrow{display:inline-block;padding:5px 9px;background:#0b2023d9;border-radius:3px;font-size:10.5px;letter-spacing:.2em}
 #title .fine{font-size:10.5px!important}
}
/* Prologue card 2 (the guardian at the doors, centre-left of the art): the story moves to the right, off the subject. */
@media(min-width:701px) and (min-aspect-ratio:4/3){
 #titleArt[data-chapter="1"]~#prologue{justify-content:flex-end;background:linear-gradient(270deg,#071a20d9,#071a2099 40%,transparent 80%)}
 #titleArt[data-chapter="1"]~#prologue .story-copy{margin-left:0;margin-right:6vw;width:min(470px,40vw)}
 #titleArt[data-chapter="1"]{background-position:36% 45%}
}
@media(max-width:700px) and (orientation:portrait){
 #titleArt[data-chapter="1"]{background-size:auto 49%;background-position:50% 5vh}
}