:root{
    --bg-1: #000000;
    --bg-2: #1b1b2f;
    --accent: #ffd700;
    --muted: #c0c0c0;
    --canvas-border: #000000;
}

html,body{height:100%;}
body {
    margin: 0;
    font-family: 'Press Start 2P', monospace;
    background: radial-gradient(circle at center, var(--bg-2) 0%, var(--bg-1) 100%);
    color: #ffffff;
    -webkit-font-smoothing: none;
    image-rendering: pixelated;
    text-align: center;
    padding: 20px;
}

/* Game title and HUD */
.title-text {
    font-size: 20px;
    color: var(--accent);
    margin-top: 18px;
    text-shadow: 2px 2px 0px #000;
}

.hud { display:flex; gap:12px; align-items:center; justify-content:center; margin-top:12px }
.score { background: rgba(255,255,255,0.04); padding:6px 10px; border-radius:6px; color:var(--accent); font-weight:700 }

canvas {
    border: 4px solid var(--canvas-border);
    display: block;
    margin: 20px auto;
    background: linear-gradient(180deg,#2b2b44, #111);
    image-rendering: pixelated;
}

#instructions {
    margin-top: 14px;
    font-size: 12px;
    color: var(--muted);
}

/* Make info text legible on the canvas page */
button.section-button{display:none}

/* Footer spacing for the game page */
.site-footer{margin-top:80px}

/* Game control buttons shown on success/failure */
.game-controls { text-align:center; margin-top:12px }
.game-button {
    background: #ffd700;
    color: #000;
    border: 4px solid #000;
    padding: 8px 14px;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    cursor: pointer;
    display: none; /* shown only on end states */
    box-shadow: 4px 4px 0px #000;
    margin: 6px;
}
.game-button:hover { background:#ffaa00 }