/* Travel pages occupy the available table; only the route changes direction. */
body:is([data-screen=character],[data-screen=intro],[data-screen=map]) #app{display:flex;flex-direction:column;min-height:100svh}
.topbar,.relic-strip,.game-footer{flex-shrink:0}
.game-footer{margin-top:auto}
.map-lines-horizontal{display:none}

.character-screen{width:100%;max-width:2200px;min-height:100svh;padding:clamp(24px,3vh,48px) clamp(24px,5vw,112px) 40px;display:flex;flex-direction:column}
.character-header{align-items:center;gap:32px;flex-shrink:0;padding-bottom:20px;border-bottom:1px solid var(--line)}
.character-header .page-heading{margin:0}.character-header h1{font-size:clamp(30px,2.6vw,54px)}
.character-header .page-heading p{margin-top:6px}
.character-layout{flex:1;grid-template-columns:minmax(210px,.68fr) minmax(320px,1.25fr) minmax(350px,1fr);gap:clamp(30px,3vw,72px);padding-top:28px}
.character-choices{align-self:center;gap:16px}
.character-choice{min-height:160px;padding:20px;gap:12px;transition:border-color .16s,background .16s}
.character-choice:not(.chosen):hover{border-color:var(--gold);background:#faf6eb}
.character-choice img{height:115px;width:68px}.character-choice strong{font-size:28px}
.character-choice small{font-size:13px}.character-choice>b{font-size:13px}
.character-choice.chosen{border-left:4px solid var(--blue)}
.character-portrait{height:clamp(540px,72svh,1040px);min-height:0}
.character-portrait>img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.character-copy{max-width:600px;justify-self:stretch}
.character-copy h2{font-size:clamp(52px,3.9vw,82px);line-height:1.2}
.character-copy h3{font-size:clamp(21px,1.4vw,30px);margin-top:8px}
.character-copy>p{font-size:clamp(14px,.85vw,18px);line-height:1.9}
.character-copy .character-tagline{font-size:clamp(18px,1.1vw,24px)}
.character-mechanics{margin:24px 0;padding:20px 0}.character-mechanics strong{font-size:17px}
.character-mechanics p{font-size:clamp(13px,.75vw,16px);line-height:1.85}
.character-copy .seed-label{font-size:14px}.seed-label input{min-height:48px}
.character-copy>.primary{min-height:50px;padding:11px 24px;font-size:16px}
.character-copy>.text-button{display:flex;margin-top:8px;justify-content:flex-start;font-size:14px}

.chapter-intro{width:100%;max-width:2200px;margin:auto;min-height:0;flex:1;display:grid;grid-template-columns:minmax(340px,1fr) minmax(420px,1.1fr);align-items:center;gap:clamp(40px,5vw,130px);padding:36px clamp(30px,7vw,160px);text-align:left;background:transparent;border:0}
.intro-portrait{min-width:0;height:clamp(480px,72svh,990px);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.intro-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 7px #32496718)}
.intro-content{min-width:0;max-width:790px;padding:30px 0}
.intro-label{display:flex;align-items:center;gap:16px;color:var(--gold);font-size:16px;margin-bottom:32px}
.chapter-emblem{width:44px;height:44px}
.chapter-intro h1{font-size:clamp(40px,3.4vw,78px);line-height:1.35}
.chapter-intro .intro-sub{font-size:clamp(23px,1.6vw,34px);line-height:1.8;margin-top:24px;max-width:none;text-wrap:balance}
.intro-story{font-size:clamp(15px,1vw,20px);line-height:2;max-width:40ch;margin:28px 0}
.intro-carry{font-size:14px;line-height:1.9;margin:20px 0}
.intro-content>.btn{min-height:52px;min-width:175px;margin-top:12px;font-size:17px}

.map-screen{width:100%;max-width:2200px;flex:1;margin:0 auto;padding:32px clamp(24px,4vw,90px);gap:40px}
.map-copy .page-heading h1{font-size:clamp(32px,2.6vw,54px)}
.map-copy .page-heading p{font-size:15px;line-height:1.8}
.map-hint{font-size:15px}.map-legend{gap:14px 20px}.map-legend>span{font-size:13px}
.route-journal{border-color:var(--line)}.route-journal p{font-size:14px}
.map-node.reachable:hover .node-medallion{background:#f4e3b4;border-color:#856b37}
.map-node.reachable:focus-visible{outline:2px solid var(--blue);outline-offset:8px;border-radius:4px}
@media(min-width:1100px){
 .map-screen{grid-template-columns:minmax(240px,.8fr) minmax(0,3fr);align-items:center;gap:clamp(28px,3vw,68px)}
 .map-copy{padding-top:0;align-self:center}.map-scroll{width:100%;overflow:visible}
 .route-map{width:100%;max-width:none;height:clamp(520px,65svh,950px);border:1px solid #d8ccb6;border-radius:6px;background:#fffdf8c9}
 .map-lines-vertical{display:none}.map-lines-horizontal{display:block;height:100%;width:100%}
 .map-node{left:var(--wide-x);top:var(--wide-y);width:clamp(88px,7.5vw,150px);transform:translate(-50%,calc(clamp(44px,3vw,62px) / -2))}
 .map-node strong{font-size:clamp(16px,.95vw,21px)}.map-node small{font-size:clamp(11px,.65vw,14px)}
 .node-medallion{width:clamp(44px,3vw,62px);height:clamp(44px,3vw,62px);margin-bottom:9px}
 .node-medallion .icon{width:28px;height:28px}.map-end-note{bottom:16px;font-size:14px}
}
@media(min-width:1800px){
 .topbar{min-height:68px}.relic-strip{min-height:44px}
 .character-layout{grid-template-columns:minmax(260px,.7fr) minmax(420px,1.3fr) minmax(470px,1fr)}
 .character-choice{min-height:190px}.character-choice img{height:140px;width:88px}
 .character-choice strong{font-size:34px}.character-choice small,.character-choice>b{font-size:15px}
 .map-legend>span,.map-hint,.map-copy .page-heading p{font-size:17px}.route-journal p{font-size:16px}
}
@media(min-width:761px) and (max-width:1099px){
 .character-screen{padding:24px 32px 36px}.character-layout{grid-template-columns:220px minmax(0,1fr);gap:24px}
 .character-copy{grid-column:1/-1;max-width:720px;width:100%;margin:12px auto 0}
 .character-portrait{height:520px}.character-choice{min-height:155px;padding:14px}
 .chapter-intro{grid-template-columns:1fr 1.15fr;gap:28px;padding:32px}.intro-portrait{height:530px}
 .chapter-intro h1{font-size:38px}.chapter-intro .intro-sub{font-size:22px}
 .map-screen{grid-template-columns:240px minmax(0,1fr);gap:24px;padding:28px 24px}
 .route-map{max-width:none}.map-legend{gap:12px}.map-copy .page-heading h1{font-size:32px}
}
@media(max-width:760px){
 .topbar{gap:8px;padding:5px 10px}.top-actions{gap:4px}.brand{flex-shrink:0}
 .character-screen{padding:20px 18px 32px;min-height:100svh}.character-header{display:block;padding-bottom:16px}
 .character-header>.btn{margin-bottom:12px}.character-header h1{font-size:28px}
 .character-layout{grid-template-columns:130px minmax(0,1fr);gap:12px;padding-top:18px;align-items:center}
 .character-choice{min-height:118px;padding:9px;gap:5px}.character-choice img{height:65px;width:37px}
 .character-choice strong{font-size:21px}.character-choice small,.character-choice>b{font-size:10px}
 .character-portrait{height:330px}.character-copy{grid-column:1/-1;margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line);max-width:none}
 .character-copy h2{font-size:44px}.character-copy h3{font-size:22px}.character-copy>p{font-size:14px}
 .character-copy .character-tagline{font-size:18px}.character-mechanics p{font-size:13px}.character-copy>.primary{width:100%}
 .chapter-intro{grid-template-columns:minmax(0,1fr);gap:12px;padding:22px 24px 36px;margin:0;flex:1}
 .intro-portrait{height:280px}.intro-content{padding:12px 0}.intro-label{font-size:13px;margin-bottom:18px;gap:10px}
 .chapter-emblem{width:32px;height:32px}.chapter-intro h1{font-size:34px}.chapter-intro .intro-sub{font-size:21px;margin-top:16px;max-width:none}
 .intro-story{font-size:14px;margin:18px 0;max-width:none}.intro-content>.btn{width:100%;margin-top:6px;font-size:15px}
 .map-screen{display:flex;flex-direction:column;padding:24px 16px;gap:22px;margin:0}.map-copy .page-heading h1{font-size:30px}
 .map-copy .page-heading p,.map-hint{font-size:13px}.map-legend>span{font-size:12px}
 .map-scroll{overflow-x:auto}.route-map{height:800px;max-width:none;min-width:340px}
 .map-lines-vertical{display:block;height:800px}.map-lines-horizontal{display:none}.map-node{left:var(--x);top:var(--y);width:100px}
}