* { box-sizing: border-box; margin:0; padding:0; image-rendering: pixelated; image-rendering: crisp-edges; }
html,body { height:100%; background:#000; font-family: 'Courier New', monospace; color:#0ff; }
.game-container { position:relative; width:100%; max-width:900px; margin:0 auto; padding:20px 0; display:flex; justify-content:center; align-items:center; min-height:100vh; }

canvas {
    background:#05050a;
    border:4px solid #333;
    box-shadow:0 0 30px #00ffff;
    display:block;
    width:100%;
    height:auto;
    max-height:90vh;
}

.ui { position:absolute; z-index:10; font-size:min(4vw,18px); color:#0ff; text-shadow:0 0 6px #0ff; }
.top-left { left:12px; top:12px; display:flex; flex-direction:column; gap:6px; }
.top-right { right:12px; top:12px; display:flex; gap:8px; align-items:center; }

button { background:#002; border:2px solid #0ff; color:#fff; padding:8px 12px; cursor:pointer; font-family:inherit; font-size:inherit; transition:all .12s; }
button:hover { transform:translateY(-2px); box-shadow:0 0 12px #0ff; }

.overlay {
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    background:rgba(0,0,0,0.95); border:3px solid #f0f; padding:20px; width:92%; max-width:480px; text-align:center; z-index:50;
    box-shadow:0 0 40px #f0f; color:#ff0;
}
.overlay.small { max-width:360px; color:#0ff; border-color:#0ff; box-shadow:0 0 20px #0ff; }

h1 { font-size:min(7vw,36px); margin-bottom:10px; color:#ff0; text-shadow:0 0 10px #ff0; }
h2,h3 { color:#ff0; margin-bottom:8px; }
p { color:#0ff; margin-bottom:12px; }

.controls-row { margin:12px 0; display:flex; gap:8px; justify-content:center; align-items:center; color:#0ff; }

label { font-size:14px; color:#0ff; }

select { padding:6px; }

@media (max-width:600px) {
    .ui { font-size:14px; }
    button { padding:6px 8px; font-size:14px; }
}