/* Elementler specific styles */

#game-canvas {
    width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 0 clamp(16px, 3vw, 24px) clamp(16px, 3vw, 24px);
    image-rendering: pixelated; 
}

#mobile-warning {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-deep); z-index: 99999; display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center; padding: 2rem;
}
#mobile-warning.active { display: flex !important; }
#mobile-warning h1 { color: var(--danger); font-size: 2rem; margin-bottom: 1rem; }
#mobile-warning p { color: var(--text-main); font-size: 1.1rem; }

/* Level Tree Nodes */
.level-node {
    position: absolute;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%); 
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-navy);
}

.level-node:hover {
    transform: translate(-50%, -50%) scale(1.15);
}

.level-node.type-hexagon {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.level-node.type-diamond {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* States */
.level-node.state-locked {
    background: var(--bg-navy);
    border: 2px solid var(--lilac-muted);
    cursor: not-allowed;
    opacity: 0.6;
}
.level-node.state-locked:hover { transform: translate(-50%, -50%); }

.level-node.state-unlocked {
    background: var(--primary-purple);
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.8);
}

.level-node.state-completed {
    background: var(--warning); 
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.6);
}