/* One safe-area layout for all controls; the game art stays edge to edge. */
:root{--safe-left:max(7px,env(safe-area-inset-left));--safe-right:max(7px,env(safe-area-inset-right));--safe-top:max(3px,env(safe-area-inset-top));--safe-bottom:max(5px,env(safe-area-inset-bottom));--hud-height:clamp(64px,10.5vw,151px);--footer-height:clamp(51px,8.5vw,125px)}
#game{width:100%;height:100dvh;inset:0;padding:0;margin:0;transform:none}
#hud.reference-hud{inset:var(--safe-top) var(--safe-right) auto var(--safe-left);height:var(--hud-height);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.12fr);gap:clamp(2px,.45vw,8px);align-items:center;padding:0;background:none}
#controls{display:contents}
#hud .profile,#hud .resources,#hud .clock,#hud .rail{position:relative;inset:auto;transform:none;margin:0;min-width:0;width:100%;max-width:none}
#hud .profile{grid-column:1;height:100%;padding:6% 7% 7% 2%;gap:3%;background-size:100% 100%}
#hud .profile .avatar{width:42%;height:auto;aspect-ratio:1;border-width:clamp(3px,.48vw,7px);flex-shrink:0}
#hud .profile .identity{width:53%;flex:1}
#hud .profile .identity b{font-size:clamp(15px,2.1vw,32px);overflow:hidden;text-overflow:ellipsis;line-height:1.1}
#hud .profile .level-pill{width:100%;font-size:clamp(10px,1.37vw,21px);padding:2px 0;border-width:2px;margin-top:3px}
#hud .profile .xp-bar{height:clamp(15px,1.9vw,29px);line-height:clamp(11px,1.65vw,25px);font-size:clamp(8px,.98vw,15px);border-width:2px;margin-top:4px}
#hud .resources{grid-column:2;height:74%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;align-self:center}
#hud .resource{width:100%;height:100%;min-width:0;display:grid;grid-template-columns:55% 45%;grid-template-rows:1fr auto;gap:0;padding:14% 11% 18%;align-items:center}
#hud .resource .stone-icon{grid-area:1/1;width:100%;height:auto;aspect-ratio:1;align-self:center}
#hud .resource b{grid-area:1/2;align-self:center;text-align:center;font-size:clamp(12px,1.5vw,23px);color:#fff1cb;text-shadow:0 2px 2px #45240c;overflow:hidden;text-overflow:ellipsis}
#hud .resource small{grid-area:2/1/3/3!important;font-size:clamp(7px,.73vw,11px);line-height:1.1;text-align:center;margin:0;color:#38210d}
#hud .clock{grid-column:3;height:77%;display:flex!important;padding:5% 5%;gap:2%;align-items:center}
#hud .clock>.sun{width:17%;flex:0 0 17%}.sun .stone-icon{width:100%;height:auto;aspect-ratio:1}
#hud #clock-text{min-width:0;width:23%;font-size:clamp(9px,1.3vw,20px);flex:0 0 23%}
#hud .clock .speeds{gap:3%;display:flex;width:56%;margin:0;flex:1}
#hud .clock button{width:23%;height:auto;aspect-ratio:1;flex:1;min-height:0;min-width:0;font-size:clamp(9px,1.15vw,18px);border-width:2px;padding:0}
#hud .rail{grid-column:4;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1%;height:82%;align-items:stretch}
#hud .rail button{width:100%;height:100%;min-width:0;min-height:0;padding:8% 3% 12%;display:flex;justify-content:center;gap:3%;background-size:100% 100%}
#hud .rail .stone-icon{width:96%;height:auto;aspect-ratio:1;flex-shrink:1}
#hud .rail button>span:last-child{font-size:clamp(7px,.73vw,11px);line-height:1.1}
#owned-roster{position:absolute;left:0;top:calc(var(--hud-height) + 10px);width:25%;max-height:44vh;overflow:auto;gap:4px}
#owned-roster button{max-width:clamp(45px,6vw,92px);flex-basis:clamp(45px,6vw,92px)}
#level{left:var(--safe-left);right:auto;top:calc(var(--safe-top) + var(--hud-height) + 4px);transform:translateX(0);width:32px;height:25px;min-height:25px;font-size:12px;z-index:8}
#hud #owned-roster{top:calc(var(--hud-height) + 37px)}
body.hud-off #level{top:var(--safe-top);left:var(--safe-left);width:36px;height:30px}
.camera-tools,body.panel-open .camera-tools{top:calc(var(--safe-top) + var(--hud-height) + 4px);right:var(--safe-right)}
#bottom-dock{left:50%;bottom:var(--safe-bottom);width:49%;max-width:710px}
#bottom-nav{height:var(--footer-height);gap:3px}
#bottom-nav button{min-width:0;flex:1;padding:4% 2% 3%;justify-content:center}
#bottom-nav button .stone-icon{width:auto;height:64%;aspect-ratio:1}
#bottom-nav button>span:last-child{font-size:clamp(9px,1.2vw,18px);line-height:1.1}
#bottom-nav button.active{background:var(--stone-panel) center/100% 100% no-repeat;box-shadow:none}
.gold-button{bottom:var(--safe-bottom);height:var(--footer-height);width:19%;padding:1%;font-size:clamp(15px,1.9vw,29px)}
.shop-button{left:var(--safe-left)}.missions-button{right:var(--safe-right);width:17%;font-size:clamp(13px,1.65vw,25px)}
.gold-button .stone-icon{height:85%;width:auto;aspect-ratio:1;margin:0}
.parchment{bottom:calc(var(--footer-height) + 7px);height:auto;min-height:0;max-height:calc(100dvh - var(--hud-height) - var(--footer-height) - 30px);padding:5% 6%;overflow:auto}
body.panel-open #bottom-content,body.panel-open #queue{display:none!important}
#queue{bottom:calc(var(--footer-height) + 7px)}
#panel.panel{inset:calc(var(--safe-top) + var(--hud-height) + 16px) var(--safe-right) calc(var(--safe-bottom) + var(--footer-height) + 9px) auto;width:min(42%,610px);min-height:0;max-height:none;padding:clamp(11px,1.6vw,25px) clamp(14px,2vw,31px);display:flex;flex-direction:column}
#panel header{flex:0 0 auto;padding:0 0 5px;min-height:29px}
#panel header button{width:clamp(29px,3.7vw,57px);height:clamp(29px,3.7vw,57px);min-height:0;flex-shrink:0}
#panel h1{font-size:clamp(16px,1.9vw,29px);margin:0}
#panel-body{min-height:0;flex:1;overflow:auto;padding:5px 2px;overscroll-behavior:contain}
#panel .card{padding:clamp(5px,.7vw,11px);margin-bottom:6px}
#panel .card h2{margin:3px 0 7px;font-size:clamp(15px,1.6vw,25px)}
#panel .card p{margin:5px 0 9px;line-height:1.35;font-size:clamp(11px,1.2vw,18px)}
#panel .card button{min-height:32px;padding:6px 10px;margin:3px 0;font-size:clamp(11px,1.2vw,18px)}
#panel .object-detail button{clear:both;display:inline-flex;align-items:center;gap:5px;margin-right:5px}
#village-life{top:calc(var(--safe-top) + var(--hud-height) + 42px);right:var(--safe-right);max-height:calc(100dvh - var(--hud-height) - var(--footer-height) - 70px);overflow:auto}
body.panel-open #village-life{display:none!important}
.placement{bottom:calc(var(--footer-height) + var(--safe-bottom) + 8px);max-width:80%;font-size:12px}
#loading,#intro{inset:0;width:100%;height:100%;min-width:0;max-width:none;max-height:none;padding:0;margin:0;transform:none}
#loading>img,#opening-video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center}
#intro>#intro-play{position:absolute;inset:auto;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:max-content;max-width:80%;height:auto;min-height:42px;padding:12px 22px;font-size:16px}
#intro>#intro-play:active{transform:translate(-50%,-50%)}
#intro .intro-controls{right:var(--safe-right);bottom:var(--safe-bottom)}
#world-atlas{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;max-width:none;max-height:none;padding:0;margin:0;transform:none;border:0;border-radius:0;overflow:hidden;box-sizing:border-box}
#world-atlas .atlas-geography,#world-atlas .atlas-nodes{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;max-width:none;max-height:none;margin:0;padding:0;transform:none}
#world-atlas .atlas-geography{background-size:100% 100%}
#world-atlas .atlas-backdrop{display:none}
#world-atlas .atlas-brand{left:calc(var(--safe-left) + 1%);top:2%;margin:0;padding:0;border:0;background:none;width:auto;max-width:24%;height:auto;display:flex}
#world-atlas .atlas-brand b{font-size:clamp(24px,4.1vw,68px)}
#world-atlas .atlas-resources{right:calc(var(--safe-right) + 5%);top:2%;width:auto;max-width:52%;min-width:0;margin:0;padding:2px 5px}
#world-atlas .atlas-close{right:var(--safe-right);top:2%;min-height:0}
#world-atlas .atlas-quest{right:var(--safe-right);top:13%;max-width:27%}
#world-atlas .atlas-tabs{left:var(--safe-left);bottom:var(--safe-bottom);width:auto;max-width:44%;margin:0;padding:0}
#world-atlas .atlas-chapters{right:var(--safe-right);bottom:var(--safe-bottom);max-width:45%}
#world-atlas .atlas-region:active{transform:translate(-50%,-50%)}
#cave-door{position:absolute;inset:auto;display:flex;align-items:flex-end;justify-content:center;background:transparent;border:0;box-shadow:none;padding:0;min-height:0;z-index:2;border-radius:45% 45% 10% 10%;transform:none;cursor:pointer}
#cave-door>.stone-icon{display:none}
#cave-door>span:last-child{font-size:clamp(9px,1vw,14px);padding:3px 7px;background:#513519cc;border:1px solid #d6b77b88;border-radius:12px;color:#ffedbf;transform:translateY(8px);box-shadow:0 2px 5px #0005}
#cave-door:focus-visible,#cave-door:hover{outline:2px solid #f7d576;box-shadow:0 0 18px #ebc07088}
#cave-door:active{transform:none}
.object-art{display:block;float:left;width:clamp(65px,8vw,118px);height:clamp(70px,8vw,126px);object-fit:contain;margin:0 10px 7px 0;filter:drop-shadow(0 3px 2px #65442555)}
.blueprint-card{display:flow-root}.blueprint-card .cost{display:block;font-size:11px;margin:7px 0}
@media(max-width:700px){:root{--hud-height:68px;--footer-height:52px}#hud.reference-hud{gap:2px;grid-template-columns:1.1fr .95fr 1fr 1.08fr}#hud .profile .avatar{width:38%}#hud .profile{padding-left:3%;padding-right:7%}#hud .profile .identity b{font-size:14px}#hud .profile .level-pill{font-size:9px}#hud .profile .xp-bar{font-size:7px}#hud .resource b{font-size:11px}#hud .clock>.sun{display:none}#hud #clock-text{width:27%;flex-basis:27%;font-size:9px}#hud .clock .speeds{width:68%}#panel.panel{width:43%;top:calc(var(--safe-top) + var(--hud-height) + 11px)}#world-atlas .atlas-region b{font-size:9px}#world-atlas .atlas-tabs button{padding:4px 7px;font-size:9px}#world-atlas .atlas-brand b{font-size:25px}}

#scene-fade{position:absolute;inset:0;z-index:81;background:#211a11;opacity:0;pointer-events:none;transition:opacity .3s}.door-transition #scene-fade{opacity:1}
#loading>img{object-position:center 85%}#opening-video{object-position:center 75%}