.stage-container {
    background: var(--color-bg-dark);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-purple);
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 100%;
}

.stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-purple);
}

.stage-header h2 {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.stage-level {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-accent-purple);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.sound-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-family: inherit;
    line-height: 1;
}

.sound-toggle .material-symbols-outlined {
    font-size: 1.25rem;
    font-variation-settings: 'FILL' 1;
}

.sound-toggle:hover {
    background: var(--color-bg-elevated);
    border-color: var(--color-primary);
}

.sound-toggle:active {
    transform: scale(0.92);
}

/* Stage background image */
.stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--stage-bg, url('/Dungeon_Coder/images/background.jpg')) center / cover no-repeat;
    opacity: 0.25;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
}

/* Grid pattern overlay */
.grid-pattern {
    background-image: radial-gradient(circle, var(--color-accent-purple) 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    /* opacity: 0.6; */
}

.stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    border: 4px solid var(--color-border-purple);
    padding: var(--spacing-md);
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

.stage .grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-size), var(--cell-size));
    grid-template-rows: repeat(var(--grid-size), var(--cell-size));
    position: relative;
    z-index: 1;
}

.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    background: var(--color-bg-lighter);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    position: relative;
    transition: background var(--transition-fast), transform var(--transition-fast);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.cell.path {
    background: transparent;
}

.cell.wall {
    background: rgba(0, 0, 0);
}

.cell.hole {
    background: var(--color-hole);
    border: 1.5px solid #4a0e1e;
    box-shadow: inset 0 0 16px rgba(200, 30, 60, 0.35);
    position: relative;
}

.cell.hole .hole-icon {
    font-size: 1.25rem;
    color: #6b1528;
    opacity: 0.8;
}

.cell.door {
    background: rgba(139, 69, 19, 0.4);
    border: 1px solid #8B4513;
}

.cell.door .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
    color: white;
    font-size: 1.25rem;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.cell.door.unlocked {
    background: rgba(74, 124, 89, 0.4);
    border-color: #4A7C59;
}

.path-coin {
    opacity: 0.2;
    font-size: 1.25rem;
}

.cell.coin .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
    opacity: 1;
    color: #FFD700;
    font-size: 1.25rem;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
    animation: coinFloat 2s ease-in-out infinite;
}

.cell.key .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
    color: var(--color-primary);
    font-size: 1.5rem;
    filter: drop-shadow(0 0 4px rgba(236, 91, 19, 0.5));
    animation: keyGlow 2s ease-in-out infinite;
}

.enemy-icon {
    font-size: 1.3rem;
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.4));
    animation: enemyPulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

.enemy-icon-bat {
    color: #8B5CF6;
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.5));
}

.enemy-icon-skeleton {
    color: #D1D5DB;
    font-size: 1.5rem;
}

.enemy-icon-troll {
    color: #6B7280;
    font-size: 1.5rem;
    filter: drop-shadow(0 0 6px rgba(107, 114, 128, 0.5));
}

.has-projectile .projectile-icon {
    font-size: 1rem;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(255, 100, 0, 0.6));
    animation: projectileAnim 0.3s ease-in-out infinite alternate;
}

@keyframes projectileAnim {
    from { transform: scale(0.9); opacity: 0.8; }
    to { transform: scale(1.1); opacity: 1; }
}

.cell-warning {
    animation: warningPulse 0.5s ease-in-out infinite alternate;
    z-index: 5;
}

@keyframes warningPulse {
    from { background: rgba(255, 0, 0, 0.6); box-shadow: inset 0 0 16px rgba(255, 0, 0, 0.8); }
    to { background: rgba(255, 50, 0, 0.9); box-shadow: inset 0 0 24px rgba(255, 0, 0, 1); }
}

.cell-explosion {
    animation: cellExplosion 0.45s ease-out forwards;
    z-index: 20;
    pointer-events: none;
}

@keyframes cellExplosion {
    0% { box-shadow: 0 0 0 0 rgba(255, 120, 0, 0.9); transform: scale(1); }
    30% { box-shadow: 0 0 40px 20px rgba(255, 60, 0, 0.7); transform: scale(1.4); }
    60% { box-shadow: 0 0 20px 10px rgba(200, 30, 0, 0.4); transform: scale(1.2); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); transform: scale(1); }
}

.cell.spike .spike-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    transition: all 0.3s;
}
.cell.spike .spike-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cell.spike.spike-active {
    background: rgba(200, 40, 40, 0.35);
    border: 1px solid rgba(220, 50, 50, 0.5);
    box-shadow: inset 0 0 12px rgba(220, 50, 50, 0.3);
}

.cell.spike.spike-active .spike-icon {
    color: #ff4444;
    animation: spikePulse 1s ease-in-out infinite alternate;
}

.cell.spike.spike-inactive {
    background: rgba(80, 80, 80, 0.2);
    border: 1px solid rgba(100, 100, 100, 0.2);
}

.cell.spike.spike-inactive .spike-icon {
    color: #666;
}

@keyframes spikePulse {
    from { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 50, 50, 0.6)); }
    to { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.9)); }
}

.cell.chest .material-symbols-outlined {
    color: #B8860B;
    font-variation-settings: 'FILL' 1;
    font-size: 1.3rem;
    animation: chestFloat 2.5s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(184, 134, 11, 0.5));
}

.cell.boss {
    background: linear-gradient(135deg, #2A0A0A, #1A0A2E);
    border: 2px solid #8B0000;
}

.cell.boss .material-symbols-outlined {
    color: #FF4444;
    font-size: 2rem;
    animation: bossPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(139, 0, 0, 0.6));
}

.cell.boss-octopus {
    background: linear-gradient(135deg, #0A2A3A, #0A1A2E);
    border-color: #00668B;
}

.cell.boss-octopus .material-symbols-outlined {
    color: #44AAFF;
    filter: drop-shadow(0 0 8px rgba(0, 102, 139, 0.6));
}

.cell.boss-devil {
    background: linear-gradient(135deg, #3A1A0A, #2E0A0A);
    border-color: #8B4500;
}

.cell.boss-devil .material-symbols-outlined {
    color: #FF8844;
    filter: drop-shadow(0 0 8px rgba(139, 69, 0, 0.6));
}

.cell.start {
    background: rgba(236, 91, 19, 0.15);
}

.cell.start::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 2px dashed var(--color-primary);
    border-radius: 4px;
    opacity: 0.4;
}

/* Character sprite */
.actor {
    position: absolute;
    width: var(--cell-size);
    height: var(--cell-size);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    transition: left var(--transition-normal), top var(--transition-normal);
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

.actor-emoji {
    font-size: calc(var(--cell-size) * 0.6);
    transition: transform var(--transition-normal);
    color: var(--color-primary);
    font-variation-settings: 'FILL' 1;
    filter:
        drop-shadow(0 0 6px rgba(236, 91, 19, 0.5))
        drop-shadow(0 0 2px #000);
}

.actor.moving .actor-emoji {
    transform: scale(1.1);
}

.actor.attacking .actor-emoji {
    animation: attackSwing 0.3s ease;
}

.actor.shake .actor-emoji {
    animation: shake 0.3s ease;
}

/* Frozen state - character stops completely */
.actor.frozen {
    pointer-events: none;
}

/* Objective info */
.objective-info {
    margin-top: var(--spacing-md);
    background: rgba(64, 32, 75, 0.5);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-purple);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.objective-info p {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.objective-stats {
    display: flex;
    gap: var(--spacing-md);
}

.objective-stats .stat {
    font-size: 0.625rem;
    color: white;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.stat-value {
    font-size: 0.75rem;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-weight: 600;
}

.objective-stats .material-symbols-outlined {
    font-size: 1rem;
    color: #FFD700;
}

/* Stage controls */
.stage-controls {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.stage-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    justify-content: center;
}

.legend-item {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg-light);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-purple);
}

@media (max-width: 1024px) {
    :root {
        --cell-size: 42px;
    }

    .stage {
        max-width: 100%;
        padding: var(--spacing-sm);
    }

    .stage-container {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    :root {
        --cell-size: 38px;
    }

    .stage {
        padding: var(--spacing-xs);
        border-width: 3px;
    }
}

@media (max-width: 640px) {
    :root {
        --cell-size: 36px;
    }

    .stage {
        padding: var(--spacing-sm);
        border-width: 3px;
    }

    .cell .material-symbols-outlined {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    :root {
        --cell-size: 32px;
    }

    .stage {
        padding: var(--spacing-xs);
        border-width: 2px;
    }

    .stage-header {
        padding: var(--spacing-xs) var(--spacing-sm);
        margin-bottom: var(--spacing-xs);
    }

    .stage-header h2 {
        font-size: 0.8rem;
    }

    .cell .material-symbols-outlined {
        font-size: 0.85rem !important;
    }

    .objective-info {
        padding: var(--spacing-sm);
        margin-top: var(--spacing-xs);
    }

    .objective-info p {
        font-size: 0.7rem;
    }
}