*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:#0f1724;color:#e6eef8;margin:0;display:flex;align-items:center;justify-content:center;min-height:100vh}
main{width:min(920px,95%);padding:24px}
h1{margin:0 0 12px;font-size:1.6rem}
.game{display:flex;gap:20px;align-items:flex-start}
canvas{background:#071229;border-radius:6px;box-shadow:0 6px 18px rgba(2,6,23,.6);image-rendering:pixelated}
.info{color:#cbd5e1}
.info canvas#next{background:transparent;border-radius:6px;display:block;margin-top:6px;border:1px solid rgba(255,255,255,0.03)}
.info > div{margin-bottom:8px}
#start{background:#06b6d4;border:0;padding:8px 12px;border-radius:6px;color:#012;cursor:pointer;font-weight:600}
#pause{background:#94a3b8;margin-left:8px;border:0;padding:8px 12px;border-radius:6px;color:#012;cursor:pointer;font-weight:600}
.controls{font-size:.9rem;color:#94a3b8;margin-top:10px}
.note{margin-top:12px;color:#94a3b8;font-size:.9rem}
code{background:#071229;padding:2px 6px;border-radius:4px}
@media(max-width:640px){.game{flex-direction:column;align-items:center}canvas{width:240px;height:480px}}

/* Touch controls */
.touch-controls{display:none;gap:8px;justify-content:center;margin-top:16px}
.touch-controls button{background:rgba(2,6,23,0.6);color:#e6eef8;border:0;padding:10px 12px;border-radius:8px;font-size:1.1rem}
@media(max-width:640px){
	.touch-controls{display:flex}
	canvas{width:240px;height:480px}
}