@font-face{font-family:Nora;src:url('assets/UntitledHand-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
html{font-family:Nora,cursive;font-weight:400;font-synthesis:none}
*{box-sizing:border-box;font-family:inherit}
body{margin:0;background:#000;color:#fff5d9}
#viewport{width:100%;height:100dvh;display:flex;align-items:center;justify-content:center;background:#000}
#stage{position:relative;width:min(100vw,calc(100dvh * 16 / 9));aspect-ratio:16/9;flex:none;overflow:hidden;background:#d9e9d0;isolation:isolate}
canvas{display:block;width:100%;height:100%;touch-action:none}
button{font-size:20px;font-weight:400;border:1px solid #e1c78b66;border-radius:12px;background:#244b42;color:#fff2d1;padding:10px 18px;cursor:pointer;touch-action:manipulation}
button:hover{background:#386454}
button:focus-visible,canvas:focus-visible{outline:3px solid #ffdc8b;outline-offset:-3px}
#map-tools{position:absolute;top:8%;right:6%;display:flex;gap:12px}
.icon-button{display:grid;place-items:center;width:62px;height:62px;padding:7px;background:transparent;border:0;border-radius:0;color:#fff;filter:drop-shadow(0 2px 2px #193b3380)}
.icon-button:hover{background:transparent;opacity:.8}
.icon-button:focus-visible{outline:2px dashed #fff;outline-offset:2px}
.icon-button svg{width:46px;height:46px;transform:rotate(-4deg)}
#fullscreen svg{transform:rotate(3deg)}
#sound[data-muted="true"] .sound-on,#sound[data-muted="false"] .sound-off,#fullscreen[data-fullscreen="false"] .fullscreen-exit,#fullscreen[data-fullscreen="true"] .fullscreen-enter{display:none}
#destination{position:absolute;left:3%;bottom:6%;width:340px;max-width:43%;padding:20px 24px;background:#193b33ef;border:1px solid #e1c78b;border-radius:20px;box-shadow:0 8px 28px #143c3c44}
.eyebrow{font-size:10px;letter-spacing:2px;color:#d8cc9d;margin:0 0 9px}
h1{font-size:40px;margin:0 0 5px;font-weight:400}
#description{font-size:18px;line-height:1.35;margin:0 0 18px;color:#e0e5ce}
.selection{display:flex;gap:8px}
#play{background:#f0cd86;color:#263f32;flex:1}
.selection button{padding:8px 14px}
#topbar{position:absolute;left:2%;top:3%;right:2%;display:flex;justify-content:space-between;align-items:center;gap:10px}
#score{background:#193b33ef;border:1px solid #e1c78b88;border-radius:14px;padding:12px 24px;font-size:25px}
#notice{position:absolute;top:16%;left:25%;width:50%;text-align:center;background:#193b33e8;border-radius:12px;padding:9px;font-size:22px}
#touch{position:absolute;bottom:3%;left:3%;right:3%;display:flex;justify-content:space-between;pointer-events:none}
#touch div{display:flex;gap:12px}
#touch button{pointer-events:auto;user-select:none;touch-action:none;font-size:26px;min-width:64px;background:#193b33c9}
#win,#loading{position:absolute;inset:0;background:#163b33e8;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:5}
#win h2{font-size:64px;font-weight:400;margin:0}
#win p{font-size:24px}
#loading progress{accent-color:#f0cd86;width:240px}
#pause{position:absolute;inset:40% 20%;font-size:32px;background:#193b33ef}
[hidden]{display:none!important}
@media(max-width:700px){
  #map-tools{gap:8px}
  .icon-button{width:54px;height:54px}
  .icon-button svg{width:40px;height:40px}
  #destination{padding:12px;bottom:4%;width:260px}
  h1{font-size:26px}
  #description{font-size:13px;margin-bottom:8px}
  .eyebrow{font-size:7px;letter-spacing:1px}
  .selection button{font-size:15px;padding:6px 10px}
  #topbar button{font-size:13px;padding:6px 10px}
  #score{font-size:16px;padding:7px 12px}
  #notice{font-size:14px;left:20%;width:60%}
  #touch button{font-size:18px;min-width:44px;padding:8px}
  #win h2{font-size:36px}
  #win p{font-size:18px}
  #win button{font-size:17px}
}
@media(pointer:fine){#touch{opacity:.65}}