* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #101a2a; color: #cad7e8; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
[hidden] { display: none !important; }
main { position: fixed; inset: 0; }
main canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; }
body.looking main canvas { cursor: grabbing; }
header { position: fixed; z-index: 2; top: 24px; left: 28px; letter-spacing: .16em; pointer-events: none; color: #c3d0e4bb; text-shadow: 0 1px 8px #030a13; }
header a { color: inherit; text-decoration: none; pointer-events: auto; }
#status { position: fixed; inset: 50% 24px auto; text-align: center; letter-spacing: .04em; }
#navigation { position: fixed; z-index: 3; left: 28px; bottom: 24px; display: flex; align-items: center; max-width: calc(100vw - 56px); pointer-events: none; text-shadow: 0 1px 8px #030a13; }
#sound-toggle { flex: none; min-height: 36px; padding: 8px 0; border: 0; background: transparent; color: #c3d0e4bb; font: inherit; font-size: 9px; letter-spacing: .12em; text-shadow: inherit; cursor: pointer; touch-action: manipulation; pointer-events: auto; }
#sound-toggle:hover { color: #e5f3ff; }
#sound-toggle:focus-visible { outline: 2px solid #b7d3ef; outline-offset: 3px; }
#sound-toggle[data-state="playing"] { color: #e5f3ff; }
#sound-toggle:disabled { opacity: .5; cursor: default; }
#joystick { display: none; position: fixed; z-index: 3; left: 24px; bottom: 40px; width: 124px; height: 124px; border-radius: 50%; border: 1px solid #c9dff33d; background: #a5c3e20a; touch-action: none; user-select: none; -webkit-user-select: none; }
#joystick-thumb { position: absolute; left: 40px; top: 40px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #dbefff69; background: #bed6ed24; pointer-events: none; }
#joystick.active { display: block; background: #0b1a3040; border-color: #d4e7fa69; }
#joystick.active #joystick-thumb { background: #bed6ed52; }
body.ui-hidden header, body.ui-hidden .lil-gui, body.ui-hidden #map { display: none; }
#map { position: fixed; bottom: 24px; right: 28px; box-sizing: content-box; width: var(--map-width); height: auto; padding: 10px; background: #07101de0; border: 1px solid #7a97bc30; pointer-events: none; image-rendering: pixelated; }
.lil-gui.root { top: 20px; right: 28px; }
.lil-gui.root, .lil-gui.root .lil-gui {
  --background-color: #111d2bea; --text-color: #c3d1e3;
  --title-background-color: transparent; --title-text-color: #d8e5f5;
  --widget-color: #2b3a4e; --hover-color: #3b4d64; --focus-color: #506580;
  --number-color: #a9c8f1; --string-color: #a9c8f1; --font-size: 11px;
}
.lil-gui.root, .lil-gui.root * { text-transform: uppercase; }
.lil-gui.root.closed, .lil-gui.root .lil-gui { background-color: transparent; }
.lil-gui.root.closed > .title { color: #c3d0e4bb; }
.lil-gui.root .title { text-align: center; }
.lil-gui.root .title::before { position: static; padding-right: 2px; }
@media (max-width: 650px) {
  header { top: 20px; left: 16px; font-size: 10px; letter-spacing: .06em; }
  .lil-gui.root { right: 16px; top: 52px; }
  #navigation { left: 16px; bottom: 16px; max-width: calc(100vw - 32px); }
  #sound-toggle { min-height: 44px; font-size: 8px; }
  #map { right: 16px; bottom: 84px; width: calc(var(--map-width) * .75); }
}
/* WebXR (createXR 0.2.24): buttons appear only when the browser supports the session mode. */
#xr-buttons { position: fixed; z-index: 3; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; gap: 20px; pointer-events: none; text-shadow: 0 1px 8px #030a13; }
.xr-button { flex: none; min-height: 36px; padding: 8px 0; border: 0; background: transparent; color: #c3d0e4bb; font: inherit; font-size: 9px; letter-spacing: .12em; text-shadow: inherit; cursor: pointer; touch-action: manipulation; pointer-events: auto; }
.xr-button:hover { color: #e5f3ff; }
.xr-button:focus-visible { outline: 2px solid #b7d3ef; outline-offset: 3px; }
.xr-button:disabled { opacity: .5; cursor: default; }