:root {
    --bloom-page-top-offset: 40px; /* INSTÄLLNING - Avståndet från toppen för hela layouten. */
    --bloom-section-gap: 20px; /* INSTÄLLNING - Avståndet mellan HUD, spelplan och status. */
    --bloom-panel-size: min(480px, calc(100vh - 350px)); /* INSTÄLLNING - Storlek på spelpanelen. */
    --node-glow-strength: 0.30; /* INSTÄLLNING - bloomGlowStrength */
    --node-idle-opacity: 0.78; /* INSTÄLLNING - nodeIdleOpacity */
}

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

#game-container {
    position: relative;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle at center, #0a0a0f, #050507);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    box-shadow: 
        inset 0 12px 40px rgba(0, 0, 0, 0.9),
        0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#grid-container {
    display: grid;
    padding: var(--spacing-4);
    width: 100%;
    height: 100%;
}

.node {
    background: linear-gradient(135deg, #121218, #0a0a0e);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: default;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: var(--node-idle-opacity);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.02);
}

.node::after {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.1);
}

.node.charge-1::after { background-color: rgba(139, 108, 255, 0.2); }
.node.charge-2::after { background-color: rgba(139, 108, 255, 0.5); box-shadow: 0 0 10px rgba(139, 108, 255, 0.3); }

.node.interactive { cursor: pointer; }
.node.interactive:hover { background-color: #1a1a20; border-color: rgba(255, 255, 255, 0.08); }
.node.interactive:active { transform: scale(0.9); }

.node.bloomed {
    background-color: #fff;
    border-color: #fff;
    box-shadow: 
        0 0 20px #fff, 
        0 0 40px var(--accent-glow);
    transform: scale(1.15);
    z-index: 2;
    opacity: 1;
}

.node.bloomed::after { display: none; }
.node.reaction { 
    background-color: var(--accent); 
    box-shadow: 0 0 30px var(--accent-glow);
    transform: scale(1.2);
    opacity: 1;
}

.overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(5, 5, 7, 0.92);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: var(--spacing-6);
    text-align: center;
}

.overlay.hidden { opacity: 0; pointer-events: none; }
.overlay-title { font-size: 2rem; font-weight: 700; margin-bottom: var(--spacing-2); }
.overlay-desc { color: var(--text-muted); margin-bottom: var(--spacing-6); max-width: 300px; }

.level-clear-flash {
    animation: clearFlash 0.6s ease-out forwards;
}

@keyframes clearFlash {
    0% { box-shadow: inset 0 0 0px #fff; }
    30% { box-shadow: inset 0 0 100px rgba(255,255,255,0.2); }
    100% { box-shadow: inset 0 0 0px #fff; }
}


/* 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;
    }
}