/* Reserve the actual control-bar height so panels never extend behind it. */
:root{--game-controls-height:200px;--game-header-height:106px}
footer{z-index:6;max-height:35dvh;overflow:auto;align-content:start;scrollbar-width:thin}
footer>button{flex-shrink:0}
.hero,.right{top:calc(var(--game-header-height) + 20px);max-height:calc(100dvh - var(--game-header-height) - var(--game-controls-height) - 44px);overflow:auto;scrollbar-width:thin;overscroll-behavior:contain;z-index:3}
.hero{padding:16px}
.hero h2{margin:12px 0 16px}
.hero .label{margin:10px 0 6px}
.hero .wallet{margin-top:12px;padding:10px 0}
.hero .quest{padding-top:12px}
.hero .quest h3{font-size:14px;line-height:1.45;margin:10px 0}
.hero .quest p{margin:8px 0}
.hero .quest button{display:block;width:100%;min-height:40px;margin-top:8px}
.caption{left:294px;bottom:calc(var(--game-controls-height) + 16px);max-width:calc(100vw - 580px)}
.caption h1{font-size:24px;margin:8px 0}
.caption p{margin:6px 0}
#talkOpen,#gather{bottom:calc(var(--game-controls-height) + 12px);z-index:4}
#venueActions{top:calc(var(--game-header-height) + 12px);max-height:calc(100dvh - var(--game-header-height) - var(--game-controls-height) - 36px);overflow:auto}
#quality{position:static}
@media(max-width:1000px){.hero,.right{top:calc(var(--game-header-height) + 14px)}.caption{display:none}}
@media(max-width:650px){
 .hero,.right{top:calc(var(--game-header-height) + 36px);max-height:calc(100dvh - var(--game-header-height) - var(--game-controls-height) - 60px)}
 .hero .quest{display:block;padding-top:8px;margin-top:8px}
 .hero .quest>.eyebrow,.hero .quest h3,.hero .quest p{display:none}
 .hero .quest button{font-size:11px;padding:8px 5px;min-height:40px}
 footer{padding-left:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));justify-content:center}
 .touchpad{bottom:calc(var(--game-controls-height) + 10px);z-index:4}
 #gather{left:auto;right:10px;bottom:calc(var(--game-controls-height) + 58px);transform:none}
}

/* Compact notebook layout, including browser zoom and short viewports. */
dialog{max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
dialog input,dialog select{max-width:100%;min-width:0}
.hero .quest>#missionsOpen,.hero .quest>#levelsOpen{display:block}
@media(max-width:1440px),(max-height:760px){
 header{padding:12px 16px;gap:10px}
 .brand{font-size:32px}.brand span{font-size:18px;letter-spacing:2px}
 .phase{gap:8px;min-width:0}.phase b{font-size:14px;overflow-wrap:anywhere}
 .hero{left:16px;width:200px;padding:12px}
 .right{right:16px;width:172px}
 .hero h2{font-size:21px;margin:8px 0 12px;gap:6px}
 .hero .quest h3{font-size:12px;margin:8px 0}
 .hero .quest{padding-top:8px}.hero .wallet{padding:8px 0;margin-top:8px}
 .hero .quest button{font-size:11px;padding:8px;min-height:40px}
 .map{padding:10px}.map canvas{height:90px}
 .equipment{padding:10px;margin-top:8px}.equipment p{margin:10px 0}
 footer{min-height:0;padding:10px 16px;gap:7px;justify-content:center;max-height:30dvh}
 footer>.controls{display:none}
 footer>button{font-size:11px;padding:9px;min-height:40px;white-space:normal}
 .abilities{gap:6px}.abilities button{min-width:74px;padding:6px 10px}
 .abilities button>span{font-size:22px}.abilities b{font-size:10px;margin:3px 0}
 .abilities kbd{display:none}
 .caption{display:none}
 dialog{padding:20px}dialog h2{font-size:26px}dialog p{font-size:13px;line-height:1.55}
}
@media(max-width:650px){
 .hero{left:10px;width:150px;padding:10px}.right{right:10px;width:130px}
 header{padding:10px;gap:6px}.brand span{font-size:14px}
 .hero .quest>#missionsOpen,.hero .quest>#levelsOpen{display:block}
 footer>button{max-width:100%;overflow-wrap:anywhere}
 .abilities button{min-width:60px;padding:6px}
 #talkOpen{max-width:calc(100vw - 170px);right:10px}
 dialog{padding:16px}#shopItems{grid-template-columns:1fr}
 .reading-controls{gap:8px}.reading-controls label{width:100%}
}
@media(max-height:500px){
 .hero,.right{max-height:calc(100dvh - var(--game-header-height) - var(--game-controls-height) - 28px);top:calc(var(--game-header-height) + 8px)}
 footer{max-height:28dvh}.hero .quest h3,.hero .quest>.eyebrow{display:none}
 .right .map{display:none}#talkOpen{padding:8px;font-size:11px}
}

.hero .quest>#phaseGoalOpen{display:block;white-space:normal;line-height:1.4;text-align:left;color:var(--accent)}
.phase-goal-card{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}.phase-goal-card button{width:100%;min-height:40px}

#constructionProgress{width:100%;height:8px;accent-color:#bba26e}#constructionWorkStatus{font-size:12px;line-height:1.4;margin:8px 0 4px}