@font-face{font-family:Pixel;src:url(assets/silkscreen.ttf);font-display:swap}
:root{--paper:#fff9ed;--ink:#243a34;--red:#da593f;--sky:#5c94fc;--yellow:#f5cb65;--pixel:Pixel,monospace;color:var(--ink);font-family:system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--sky);background-image:linear-gradient(#ffffff30,transparent 65%);min-height:100vh}
main{width:min(940px,100% - 28px);margin:auto}
header,footer{font:13px var(--pixel);letter-spacing:.12em;display:flex;justify-content:space-between;padding:16px 0}
header a{color:inherit;text-decoration:none}
header span{background:var(--paper);padding:4px 8px;border:2px solid var(--ink);box-shadow:2px 2px var(--ink)}
.intro{text-align:center;padding:4px 0 20px}
.intro p{margin:0;font:14px var(--pixel);letter-spacing:.2em}
h1{font-size:clamp(38px,8vw,75px);letter-spacing:.09em;color:var(--yellow);margin:3px 0 10px;-webkit-text-stroke:1.5px var(--ink);text-shadow:3px 5px var(--ink)}
.intro .subtitle{font:600 14px system-ui;letter-spacing:.04em}
#world{position:relative;isolation:isolate;aspect-ratio:16/9;background:#76ad63;border:4px solid var(--ink);box-shadow:6px 6px var(--ink);overflow:hidden}
canvas{position:absolute;width:100%;height:100%;image-rendering:pixelated}
.portal{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-100%);display:flex;align-items:center;gap:8px;white-space:nowrap;color:var(--ink);background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px var(--ink);padding:6px 10px 6px 6px;font-weight:800;text-decoration:none;font-size:clamp(11px,2.3vw,20px)}
.portal img{width:clamp(20px,4vw,42px);aspect-ratio:1;object-fit:contain;background:var(--accent);border:2px solid var(--ink);image-rendering:pixelated}
.portal small{display:block;color:#9a3929;font-size:.64em;letter-spacing:.1em}
.portal:hover,.portal.near{background:var(--yellow)}
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.hud{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 10px;min-height:42px;font-size:14px;font-weight:700;text-align:center}
#enter{color:var(--paper);background:#a53c2b;padding:8px 12px;border:2px solid var(--ink);box-shadow:3px 3px var(--ink);text-decoration:none}
.help{display:flex;gap:8px 16px;justify-content:center;flex-wrap:wrap;font-size:12px;font-weight:600;text-align:center}
kbd,button{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:0 2px var(--ink);padding:2px 5px}
.touch{display:none}
footer{justify-content:center;font-size:10px}
@media(pointer:coarse),(max-width:640px){.touch{display:flex;justify-content:center;gap:9px;margin:14px 0}.touch button{font-size:22px;width:48px;height:42px;touch-action:none;user-select:none}}
@media(max-width:560px){#world{aspect-ratio:1}.portal{padding:4px;gap:3px;border-width:2px}}