/* --- STYL PRO TLAČÍTKO PANELU HLASITOSTI --- */

/* 1. Základní stav (Panel skrytý) */
#zobrazit-panel-hlasitosti {
    transition: all 0.3s ease-in-out; /* Plynulý přechod */
    border: 2px solid #555; /* Neutrální okraj */
}

/* 2. AKTIVNÍ STAV (Panel zobrazen) - Třída .active */
#zobrazit-panel-hlasitosti.active {
    /* Pozadí: Zářivá azurová (LCARS styl) */
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    
    /* Text: Černý pro maximální kontrast na světlém pozadí */
    color: #000000;
    
    /* Okraj: Svítivý neon */
    border-color: #00ffff;
    
    /* Efekty: Záře do okolí (Glow) */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.7), inset 0 0 10px rgba(255, 255, 255, 0.4);
    
    /* Textura: Jemný stín pod textem */
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    
    /* Pohyb: Mírné zvětšení tlačítka */
    transform: scale(1.1);
}

/* 3. Hover efekt pro aktivní tlačítko (když na něj najedeš myší, aby ho vypnul) */
#zobrazit-panel-hlasitosti.active:hover {
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%); /* Změna na červenou (varování: zavřít) */
    border-color: #ff0000;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
    color: white;
}