:root{color-scheme:dark;background:#112225;font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
.shell{width:100%;height:100%;display:grid;place-items:center;background:#112225}
.stage{position:relative;width:min(100vw,177.7778vh);aspect-ratio:16/9;background:#14242e;overflow:hidden}
canvas{width:100%;height:100%;display:block;image-rendering:pixelated;touch-action:none;outline:none}
button,a{display:grid;place-items:center;width:42px;height:42px;padding:10px;border:1px solid #b3c6ae65;border-radius:7px;background:#102626cf;color:#eee9d7;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:hover,a:hover{background:#314c41;border-color:#e4d29a}
button:focus-visible,a:focus-visible{outline:3px solid #f2d18a;outline-offset:2px}
button svg,a svg,.closed-road svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
[hidden]{display:none!important}.controls{position:absolute;right:12px;top:12px;display:flex;gap:6px}
#interact{position:absolute;right:12px;bottom:12px;width:48px;height:48px}
#interact[data-nearby=true]{border-color:#f2d18a;color:#f2d18a}
#loading-screen,#pause-screen{position:absolute;inset:0;display:grid;place-items:center;background:#102426a0}
#loading-screen{background:#112225}#resume{width:62px;height:62px;padding:17px}
.spinner{width:28px;height:28px;border:2px solid #738a7550;border-top-color:#dfcf99;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none;border-style:dotted}}
dialog{width:min(740px,calc(100% - 24px));max-height:calc(100% - 24px);padding:16px;border:1px solid #829083;border-radius:10px;background:#182e31;color:#eee9d7;overflow:auto;box-shadow:0 20px 80px #0007}
dialog::backdrop{background:#071517c9}button[data-close]{margin-left:auto}
.destinations{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}
.destination{display:block;width:100%;height:auto;padding:0;overflow:hidden;aspect-ratio:16/9}
.destination img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.destination[aria-current=true]{outline:2px solid #edd18a;outline-offset:2px}
.closed-road{height:42px;display:flex;justify-content:center;color:#bba574;border:1px dashed #758179;border-radius:5px;padding:8px;background:#263839}
.closed-road svg{width:26px}.shell:fullscreen .stage{width:min(100vw,177.7778vh)}
@media(max-width:620px){.controls{top:7px;right:7px;gap:4px}button,a{width:36px;height:36px;padding:8px}#interact{right:7px;bottom:7px;width:40px;height:40px}.destinations{grid-template-columns:repeat(2,1fr);gap:9px}dialog{padding:12px}}
/* Use the portrait letterbox so the toolbar does not cover the Pocket exit. */
@media(max-aspect-ratio:1/1){.controls{position:fixed}}