#scratching-game, #scratching-game * { box-sizing: border-box; }
.scratching-scene { display: grid; place-items: center; padding: 16px 0; color: #fff; }
.scratching-card { width: min(100%, 900px); padding: 20px; border: 8px solid #222;
    background: #111177; text-align: center; }
.scratching-kicker { margin: 0; color: #b8c3ff; letter-spacing: 2px; }
.scratching-card h2 { margin: 8px 0; }
.scratching-hud, .scratching-tools { display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 16px; margin: 14px 0; }
.scratching-tools label { display: inline-flex; align-items: center; gap: 8px; }
.scratching-tools input { width: 100px; }
#scratching-progress { display: block; width: min(100%, 680px); height: 18px;
    margin: 0 auto; accent-color: #78e0a0; }
.scratching-stage { position: relative; width: min(100%, 680px); margin: 0 auto;
    aspect-ratio: 4 / 3; background: #eeeee8; outline: 4px solid #222; overflow: hidden; }
.scratching-stage[hidden] { display: none; }
.scratching-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#scratching-art, #scratching-cursor { pointer-events: none; }
#scratching-cover { touch-action: none; cursor: crosshair; }
.scratching-feedback { min-height: 1.5em; margin-bottom: 8px; }
.scratching-feedback.incorrect { color: #ffb4b4; }
.scratching-feedback.correct { color: #78e0a0; }
.scratching-help { font-size: .9rem; line-height: 1.5; color: #d0d6ff; }
.scratching-scene button:disabled { opacity: .55; cursor: default; }
.scratching-scene button:focus-visible, .scratching-scene input:focus-visible {
    outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 520px) {
    .scratching-card { padding: 12px; border-width: 4px; }
    .scratching-hud { gap: 8px; font-size: .9rem; }
}
#scratching-game {
    /* Cover the entire browser viewport. */
    position: fixed;
    inset: 0;
    z-index: 1000;

    /* Give this screen its own background. */
    background: linear-gradient(135deg, #10243a, #245b70);

    padding: 24px 16px;
    overflow-y: auto;

    /* Keep the game centered horizontally, starting at the top. */
    display: grid;
    justify-items: center;
    align-items: start;
}