@font-face{font-family:Illion;src:url('/arcade/pixel.woff');font-display:swap}
*{box-sizing:border-box}
body{margin:0;background:#234450;color:#e7e1bb;font:16px system-ui,sans-serif}
.world{position:relative;width:100%;height:100svh;min-height:450px;overflow:hidden;isolation:isolate}
#landscape{display:block;position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:-1}
header{position:absolute;inset:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;padding:clamp(17px,3vw,42px);pointer-events:none}
h1{font:clamp(28px,3.9vw,62px)/1.12 Illion,monospace;letter-spacing:-.045em;color:#f4edcf;margin:0;text-transform:uppercase;text-shadow:3px 3px #223e44}
button,a,input{font:inherit}
button,a{touch-action:manipulation}
.hud,dialog{border:2px solid #95a99a;background:#213e3d;color:#f5eccd;box-shadow:0 3px 0 #142c31,3px 3px 0 #142c31}
.hud{font:600 13px ui-monospace,monospace;padding:9px 13px;pointer-events:auto;cursor:pointer}
.spot{position:absolute;display:flex;justify-content:center;align-items:flex-start;color:#f7efd0;text-decoration:none;outline-offset:4px}
.bridge{left:8%;width:34%;top:31%;height:23%}
.grove{left:60%;width:30%;top:23%;height:32%}
.mine{left:12%;width:24%;top:62%;height:24%}
.field{left:61%;width:30%;top:60%;height:30%}
.bubble{position:relative;display:flex;align-items:center;flex-direction:column;white-space:nowrap;padding:9px 16px 7px;background:#173139f2;border:2px solid #97b4ad;box-shadow:3px 3px 0 #0b242cb3;line-height:1.2;pointer-events:none}
.bubble:after{content:'';position:absolute;width:9px;height:9px;background:#173139;border-bottom:2px solid #97b4ad;border-right:2px solid #97b4ad;bottom:-6px;left:calc(50% - 4px);transform:rotate(45deg)}
.bubble strong{font:clamp(15px,1.5vw,22px)/1.2 Illion,monospace;letter-spacing:-.02em}
.bubble small{font:500 11px/1.5 ui-monospace,monospace;color:#b9c9b5;margin-top:3px}
.spot:hover .bubble,.spot:focus-visible .bubble{border-color:#f5d99d;background:#304a40;box-shadow:3px 4px 0 #132e30,0 0 25px #f2d69620}
.spot:hover .bubble:after,.spot:focus-visible .bubble:after{border-color:#f5d99d;background:#304a40}
.spot:focus-visible,.hud:focus-visible,.swap:focus-visible,.motion:focus-visible{outline:3px solid #ffdda2}
.motion{position:absolute;bottom:18px;right:20px;min-width:35px;min-height:32px;border:1px solid #8a9c86;background:#152f35b8;color:#efead2;cursor:pointer;font:16px ui-monospace,monospace}
dialog{width:min(400px,91vw);padding:26px}
dialog::backdrop{background:#101f2dbf}
dialog h2{font:22px Illion,monospace;margin:8px 0 16px}
dialog p{font-size:14px}
dialog label{display:block;font-size:13px;font-weight:650;margin:13px 0}
input{width:100%;padding:10px;margin-top:4px;border:1px solid #91a594;background:#f1edd3;color:#253e3d;border-radius:0}
.close,.swap{background:none;border:0;cursor:pointer;color:inherit}
.close{float:right;font-size:25px}
.swap{text-decoration:underline;padding:9px}
.msg{color:#ffd09f;min-height:1.3em}
[hidden]{display:none!important}
@media(max-aspect-ratio:1/1){header{padding:22px 14px;gap:12px;align-items:flex-start}h1{font-size:clamp(24px,5vw,45px);max-width:60%;line-height:1.35}.hud{padding:8px;font-size:11px}.bubble{padding:7px 9px 6px}.bubble strong{font-size:clamp(14px,3.2vw,21px)}.bubble small{font-size:10px}.motion{bottom:15px;right:14px}}