html,body{margin:0;width:100%;height:100%;background:#0b1016;color:#fff;font-family:system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}
body{display:grid;place-items:center}
#shell{position:relative;width:min(100vw,177.78vh);height:min(56.25vw,100vh);background:#111;box-shadow:0 0 0 2px #263441}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:#324f35;touch-action:none}
#touch{position:absolute;inset:0;pointer-events:none}.pad,.actions{position:absolute;bottom:3%;display:grid;gap:6px;pointer-events:auto}.pad{left:2.5%;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px)}.pad button:nth-child(1){grid-column:2}.pad button:nth-child(2){grid-column:1;grid-row:2}.pad button:nth-child(3){grid-column:2;grid-row:2}.pad button:nth-child(4){grid-column:3;grid-row:2}.actions{right:2.5%;grid-template-columns:72px 72px}.actions button{height:48px}
button{border:2px solid #ffffff55;border-radius:8px;background:#101820cc;color:#fff;font-weight:800;letter-spacing:.5px}.hidden{display:none!important}
@media (pointer:coarse){#touch{display:block!important}}