*{box-sizing:border-box}html{background:#111}body{margin:0;color:#eee;font:16px system-ui,sans-serif;text-align:center}main{width:min(100%,1000px);margin:auto;padding:12px}header{display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap}header a{color:#f6d397}h1{font-family:Georgia,serif;font-size:clamp(22px,4vw,34px);margin:.4em 0}#status{min-height:1.5em;color:#f6d397;margin:.3em}canvas{display:block;width:min(100%,800px);aspect-ratio:4/3;margin:auto;background:#000;image-rendering:pixelated;outline:none}#help,#hint{font-size:14px;line-height:1.5;color:#ddd;margin:.65em}.controls{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}.controls>div{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center}button{border:1px solid #999;border-radius:.3rem;background:#e5e5e5;color:#111;font-size:16px;font-weight:700;min-width:42px;min-height:44px;padding:.55rem .7rem;touch-action:none;user-select:none;-webkit-user-select:none}button:active{background:#e8c581}.space{min-width:100px}@media(max-width:600px){main{padding:6px}header{gap:8px}h1{font-size:22px}#help,#hint{font-size:12px}button{min-width:42px;padding:.5rem}.controls{gap:.35rem}}