/* Illustrated exploration tools: decorative strokes, generous interactive targets. */
.explore-controls,.sky-controls{--tool-ink:#36564a;color:var(--tool-ink);position:absolute;z-index:4}
html[data-night=true] .explore-controls,html[data-night=true] .sky-controls{--tool-ink:#deece7}
html[data-twilight=true] .explore-controls,html[data-twilight=true] .sky-controls{--tool-ink:var(--ink)}
.explore-controls{left:39%;right:5%;bottom:108px;height:220px;pointer-events:none}
.map-arc{position:absolute;inset:0;width:100%;height:100%;stroke:currentColor;stroke-width:.7;fill:none;opacity:.5;transition:opacity .3s}
.close-view .map-arc{opacity:.16}
.explore-controls .map-control{position:absolute;pointer-events:auto;display:grid;place-items:center;width:48px;height:48px;min-height:44px;padding:9px;border:1px solid currentColor;border-radius:50%;color:inherit;background:var(--paper);transform:translateX(-50%);transition:background .2s,opacity .2s}
.map-control svg,.sky-controls svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;width:28px;height:28px}
.map-control:hover,.sky-controls button:hover{background:color-mix(in srgb,var(--tool-ink) 10%,var(--paper))}
.map-control:disabled{opacity:.35;cursor:default}
#rotate-left{left:5%;top:4px}#rotate-right{left:95%;top:4px}#zoom-out{left:34%;bottom:26px}#zoom-in{left:66%;bottom:26px}#reset-view{left:50%;bottom:14px;width:54px;height:54px}
.map-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;opacity:0;pointer-events:none;padding:3px 7px;background:var(--paper);border-radius:4px}
.map-control:hover .map-tooltip,.map-control:focus-visible .map-tooltip{opacity:1}
.explore-hint{position:absolute;bottom:-15px;width:100%;text-align:center;font-size:11px;margin:0;opacity:.8;transition:opacity .3s}.explored .explore-hint{opacity:0}.hint{display:none}
.sky-controls{top:86px;right:4vw;display:flex;gap:16px;align-items:center}
.sky-controls button{font:inherit;color:inherit;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:44px;padding:4px 8px;cursor:pointer;border-radius:8px}
.sky-controls #time-cycle{border-left:1px solid color-mix(in srgb,var(--tool-ink) 25%,transparent);border-radius:0;padding-left:20px}
.sky-controls .light-orbit{width:116px;height:32px}.light-thumb{fill:currentColor;transition:transform .3s}#light[aria-pressed=false] .light-thumb{transform:translateX(28px)}
.control-label{font-size:11px;white-space:nowrap}.play-glyph{display:none}#time-cycle[aria-pressed=false] .play-glyph{display:block}#time-cycle[aria-pressed=false] .pause-glyph{display:none}
@media(min-width:761px) and (min-height:501px){#world{bottom:155px}.asset-note{bottom:162px}}
@media(max-width:760px){.chapters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sky-controls{top:5px;right:10px;gap:8px;z-index:6}.sky-controls button{padding:2px 5px;gap:1px}.sky-controls .control-label{font-size:9px}.sky-controls #time-cycle{padding-left:12px}.sky-controls .light-orbit{width:96px;height:28px}.sky-controls svg{width:26px;height:26px}.explore-controls{left:22px;right:22px;bottom:132px;height:64px}.map-arc{opacity:.28}.explore-controls .map-control{width:44px;height:44px;padding:9px;top:6px;bottom:auto}#rotate-left{left:7%}#zoom-out{left:29%}#reset-view{left:50%;width:46px;height:46px;top:10px}#zoom-in{left:71%}#rotate-right{left:93%}.map-tooltip{display:none}.explore-hint{display:none}#world,body.near #world{bottom:165px}.asset-note{bottom:205px}}
@media(max-height:500px) and (orientation:landscape){.sky-controls{top:3px;right:12px;gap:6px}.sky-controls .control-label{font-size:9px}.explore-controls{left:43%;right:4%;bottom:76px;height:48px}.map-arc,.explore-hint{display:none}.explore-controls .map-control{width:40px;height:40px;min-height:40px;top:0;bottom:auto}#rotate-left{left:6%}#zoom-out{left:28%}#reset-view{left:50%}#zoom-in{left:72%}#rotate-right{left:94%}#world,body.near #world{bottom:128px}}
@media(prefers-reduced-motion:reduce){.explore-controls *,.sky-controls *{transition:none!important}}

.sky-controls button:hover{background:transparent;color:var(--accent)}

/* Draw behind the floating tools and navigation: avoid a visible canvas cutoff. */
#world,body.near #world{bottom:0}

/* Fade scene tools only on devices with a precise, hovering pointer. */
@media(hover:hover) and (pointer:fine){
 .explore-controls,.sky-controls{opacity:.3;transition:opacity .25s ease}
 .explore-controls:hover,.sky-controls:hover,
 .explore-controls:has(:focus-visible),.sky-controls:has(:focus-visible){opacity:1}
}
@media(prefers-reduced-motion:reduce){.explore-controls,.sky-controls{transition:none}}

/* Keep the loading poster aligned with the desktop camera pan. */
@media(min-width:761px) and (min-height:501px){
 .scene-poster img{left:calc(50% + 3.5vw);top:calc(-1 * clamp(24px,calc(6svh - 4.2px),52px))}
}

/* Translucent header; extend rendering upward without changing the framing. */
header{background:linear-gradient(to bottom,color-mix(in srgb,var(--paper) 92%,transparent) 0%,color-mix(in srgb,var(--paper) 75%,transparent) 35%,color-mix(in srgb,var(--paper) 35%,transparent) 70%,transparent 100%);}
@media(min-width:761px) and (min-height:501px){
 #world{top:0}
 .scene-poster img{height:calc(100% - 70px);top:calc(70px - clamp(24px,calc(6svh - 4.2px),52px))}
}