html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#171a1d}
body{display:flex;align-items:center;justify-content:center;height:100dvh}
canvas{display:block;flex:none;width:min(100vw,calc(100dvh * 10 / 9));height:auto;aspect-ratio:10/9;image-rendering:pixelated;outline:none;touch-action:manipulation}
[hidden]{display:none!important}
button{cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:3px solid #fff;outline-offset:5px}
#start-overlay{position:fixed;inset:0;z-index:1;display:grid;place-items:center;background:rgba(17,21,23,.88);font:14px system-ui,sans-serif;color:#eaf2ef}
.start-panel{position:relative;text-align:center;width:100%;height:108px}
#play{width:108px;height:108px;padding:0;border:3px solid #a1ddc8;border-radius:50%;background:#243c33;box-shadow:0 4px 28px #0008}
#play svg{display:block;width:100%;height:100%;fill:#f4fff9}
#play:hover:not(:disabled){background:#345748;transform:scale(1.04)}
#play:disabled{cursor:wait;opacity:.5}
#play-label{position:absolute;top:100%;left:0;width:100%;margin:12px 0;font-size:16px;font-weight:600}
.controls{position:absolute;top:calc(100% + 52px);left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(2,auto);gap:12px 24px;width:max-content;max-width:calc(100vw - 24px);text-align:left;color:#c2cdc8}
kbd{font:inherit;font-weight:600;color:#fff;white-space:nowrap}
#fullscreen{position:fixed;right:10px;bottom:10px;z-index:2;display:grid;place-items:center;width:34px;height:34px;padding:7px;border:1px solid #ffffff45;border-radius:5px;color:#fff;background:#121719b8}
#fullscreen:hover{background:#263c35}
#fullscreen svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
@media(max-height:320px){.start-panel{height:76px}#play{width:76px;height:76px}#play-label{margin:8px 0}.controls{top:calc(100% + 38px);gap:8px 20px;font-size:12px}}