:root {
    --void-page-top-offset: 40px; /* INSTÄLLNING - Avståndet från toppen för hela layouten. */
    --void-section-gap: 16px; /* INSTÄLLNING - Avståndet mellan HUD, spelplan och instruktion. */
    --void-canvas-max-height: min(500px, calc(100vh - 350px)); /* INSTÄLLNING - Maxhöjd på spelplanen. */
}

.fade-in-up.delay-1 {
    padding-top: var(--void-page-top-offset);
}

#game-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: var(--void-canvas-max-height);
    background: radial-gradient(circle at center, #0a0a0f, #050507);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 
        inset 0 12px 60px rgba(0, 0, 0, 1),
        0 20px 60px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
}

#gameCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Void Runner Overlay specific overrides */
.overlay-title { font-size: 2rem; margin-bottom: 0.5rem; text-shadow: 0 0 20px var(--accent-glow); }
.overlay-desc { color: var(--text-muted); margin-bottom: 1.5rem; max-width: 400px; }
#finalScoreText { font-size: 1.5rem; font-family: var(--font-mono); margin-bottom: 1.5rem; }


/* INSTÄLLNING - Global Mobile Fallback Fix */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}
@media (max-width: 800px) {
    canvas, .game-canvas, #game-container, #game-stage, #app {
        max-width: 100% !important;
        height: auto;
    }
    .panel, .sidebar, .menu, #ui, #overlay {
        max-width: 100% !important;
        box-sizing: border-box;
    }
}