/* The start menu shares one alignment system: 24px outer gutters and 12px gaps.
   All navigation artwork is SVG, with identical icon and label rows. */
body[data-screen=home] #appFrame { grid-template-rows:0 minmax(0,1fr) calc(74px + var(--dock-gesture-inset)); }
body[data-screen=home] .shell-head { top:22px; left:24px; right:24px; max-width:672px; height:42px; padding:0; z-index:6; }
body[data-screen=home] .shell-head .wordmark { display:flex; align-items:center; gap:11px; height:42px; }
body[data-screen=home] .brand-mark { width:31px; height:31px; color:#dec197; flex-shrink:0; }
body[data-screen=home] .wordmark .brand-name { display:block; margin:0; font:20px Georgia,serif; letter-spacing:.21em; color:#f1e9db; }
body[data-screen=home] .shell-head .quiet { display:grid; place-items:center; width:42px; height:42px; padding:0; background:#0e202b66; border:1px solid #c2b09255; color:#eddbc0; border-radius:50%; }
body[data-screen=home] .chapterbar { position:absolute; z-index:5; top:83px; left:24px; right:24px; width:auto; max-width:672px; margin:auto; min-height:0; padding:0; justify-content:flex-start; gap:10px; background:none; border:0; }
body[data-screen=home] .chapterbar label { position:relative; display:flex; align-items:center; gap:8px; font-size:0; }
body[data-screen=home] .chapterbar label::after { content:""; width:5px; height:5px; border-right:1px solid #cbbb9f; border-bottom:1px solid #cbbb9f; transform:rotate(45deg); position:absolute; right:10px; top:12px; pointer-events:none; }
body[data-screen=home] .chapterbar select { appearance:none; -webkit-appearance:none; width:100%; max-width:none; min-height:34px; padding:3px 24px 3px 0; color:#ded5c5; font:11px system-ui!important; letter-spacing:.035em; }
body[data-screen=home] .chapterbar .info { display:grid; place-items:center; width:32px; height:32px; border:0; background:none; color:#c4b69e; }
body[data-screen=home] #home { height:100%; min-height:510px; padding:0; overflow:hidden; background:linear-gradient(180deg,#06131dd9 0%,#06131d55 20%,#07182108 36%,#09191f55 48%,#09181fea 75%,#09181f 100%),var(--chapter-art) center 38%/cover; }
body[data-screen=home] .landscape { flex:1 1 auto; min-height:300px; margin:0; }
body[data-screen=home] .landscape::before { display:none; }
body[data-screen=home] .hero-copy { left:24px; right:24px; bottom:28px; text-align:left; max-width:none; margin:0; }
body[data-screen=home] .hero-copy h1 { font:clamp(42px,6.7svh,60px)/1.02 Georgia,serif; font-weight:400; margin:0; color:#f6eee1; letter-spacing:-.045em; text-shadow:0 3px 28px #06151b55; }
body[data-screen=home] .hero-copy h1 em { font-style:normal; font-weight:400; color:#dcc19a; }
#home #personalHome { display:flex; align-items:center; gap:10px; margin:0 0 18px; color:#d4c4aa; font:9px system-ui; letter-spacing:.15em; text-transform:uppercase; white-space:nowrap; }
.start-player-rule { width:24px; height:1px; background:#c9a777; flex-shrink:0; }
.start-player-level { color:#e2c294; flex-shrink:0; }
.start-player-name { padding-left:10px; border-left:1px solid #cab39355; overflow:hidden; text-overflow:ellipsis; }
body[data-screen=home] .home-content { flex:0 0 auto; width:100%; padding:0 24px 26px; max-width:720px; align-self:center; }
.start-continue { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:84px; padding:18px 22px; border:1px solid #ddbd8c; border-radius:8px; background:linear-gradient(110deg,#e0c398,#c6a172); box-shadow:0 8px 32px #020a102e,inset 0 1px #fff5; color:#1a292d; text-align:left; }
.start-continue small { display:block; margin:0 0 7px; font:8px system-ui; letter-spacing:.17em; color:#3e4b48; }
.start-continue strong { display:block; font:25px Georgia,serif; letter-spacing:-.025em; }
.start-continue .start-arrow { width:30px; height:30px; margin-left:12px; flex-shrink:0; }
.start-destinations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
.start-destination { display:flex; align-items:center; gap:12px; min-width:0; min-height:83px; margin:0; padding:17px 14px; border:1px solid #c3ae8a33; border-radius:8px; background:linear-gradient(125deg,#23343780,#15283066); color:#e9dcc7; text-align:left; }
.start-destination > svg { width:29px; height:29px; flex-shrink:0; color:#c9af87; }
.start-destination > span { min-width:0; }
.start-destination strong { display:block; font:17px Georgia,serif; font-weight:400; white-space:nowrap; }
.start-destination small { display:block; margin-top:6px; color:#a6b1ae; font:9px system-ui; white-space:nowrap; }
.start-continue:focus-visible,.start-destination:focus-visible { outline:2px solid #ffe0b3; outline-offset:4px; }
/* Equal icon boxes and text baselines across all five destinations. */
#dockLayer { height:calc(74px + var(--dock-gesture-inset)); background:#09181f; border-top:1px solid #c4af862b; }
#expeditionNav { height:73px; padding:6px 12px; gap:4px; }
#expeditionNav button,#expeditionNav #placesButton { position:relative; display:grid; grid-template-rows:26px 14px; align-content:center; justify-items:center; align-items:center; row-gap:5px; height:60px; padding:5px 0; border-radius:0; color:#9caeae; font:10px system-ui; }
#expeditionNav button > svg { display:block; width:23px; height:23px; stroke-linecap:round; stroke-linejoin:round; }
#expeditionNav button > span:last-child { line-height:14px; }
#expeditionNav button[aria-current=true] { background:none; color:#e6c599; }
#expeditionNav button[aria-current=true]::before { content:""; position:absolute; top:0; width:20px; height:2px; border-radius:2px; background:#d7b17c; }
#expeditionNav .compass-face { display:grid; place-items:center; width:26px; height:26px; border:0; border-radius:0; background:none; box-shadow:none; color:inherit; }
#expeditionNav .compass-face svg { display:block; width:25px; height:25px; }
/* Match the shared dock row to its content on every route. */
#appFrame { grid-template-rows:auto minmax(0,1fr) calc(74px + var(--dock-gesture-inset)); }
.app-update { position:absolute; top:0; left:0; right:0; z-index:100; }
@media(max-width:359px) {
 body[data-screen=home] .shell-head { left:20px; right:20px; }
 body[data-screen=home] .chapterbar { left:20px; right:20px; }
 body[data-screen=home] .hero-copy { left:20px; right:20px; }
 body[data-screen=home] .home-content { padding-left:20px; padding-right:20px; }
 .start-destination { gap:8px; padding:14px 10px; }
 .start-destination > svg { width:24px; height:24px; }
 .start-destination strong { font-size:16px; }
 .start-destination small { font-size:8px; }
 .start-continue strong { font-size:23px; }
}
@media(max-height:700px) {
 body[data-screen=home] #home { min-height:440px; }
 body[data-screen=home] .shell-head { top:14px; }
 body[data-screen=home] .chapterbar { top:64px; }
 body[data-screen=home] .landscape { min-height:240px; }
 body[data-screen=home] .hero-copy { bottom:18px; }
 body[data-screen=home] .hero-copy h1 { font-size:40px; }
 #home #personalHome { margin-bottom:12px; }
 body[data-screen=home] .home-content { padding-bottom:18px; }
 .start-continue { min-height:74px; padding:14px 18px; }
 .start-destination { min-height:70px; padding-top:12px; padding-bottom:12px; }
}