:root{--honey-gold:#B8860B;--honey-light:#DAA520;--honey-dark:#8B6914;--midnight-black:#0A0A0A;--charcoal-gray:#1A1A1A;--slate-gray:#2A2A2A;--cream-white:#F5F5DC;--text-light:#E8E8E8;--text-muted:#A8A8A8;--primary:#B8860B;--primary-dark:#8B6914;--secondary:#DAA520;--accent:#B8860B;--gold:#B8860B;--warning:#ff6b6b;--success:#4caf50;--dark-bg:#0A0A0A;--darker-bg:#0A0A0A;--card-bg:rgba(184,134,11,0.08);--border-color:rgba(184,134,11,0.15);--shadow:0 8px 32px rgba(0,0,0,0.4);--font-primary:'Cinzel',serif;--font-secondary:'Crimson Text',serif;--spacing-xs:0.5rem;--spacing-sm:1rem;--spacing-md:2rem;--spacing-lg:3rem;--spacing-xl:4rem;--radius:16px;--radius-sm:8px;--transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;width:100%;position:relative}
body{font-family:var(--font-secondary);background:var(--darker-bg);color:var(--text-light);line-height:1.6;min-height:100vh;overflow-x:hidden;position:relative;width:100%;max-width:100vw}
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(ellipse at 20% 0%,rgba(124,77,255,0.2) 0%,transparent 40%),radial-gradient(ellipse at 80% 100%,rgba(92,107,192,0.2) 0%,transparent 40%),radial-gradient(ellipse at 50% 50%,rgba(0,229,255,0.1) 0%,transparent 60%);pointer-events:none;z-index:0}
body::after{content:'';position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(0,229,255,0.1) 35%,rgba(124,77,255,0.15) 40%,rgba(76,175,80,0.1) 45%,rgba(255,215,0,0.05) 50%,transparent 55%);background-size:200% 200%;filter:blur(30px);pointer-events:none;z-index:0;transform:translateZ(0) rotate(-10deg);will-change:transform,background-position,opacity;contain:layout style paint;opacity:0;animation:aurora 15s ease-in-out infinite paused,fadeInAurora 1.5s ease-out forwards;animation-play-state:paused,running}
body.aurora-ready::after{animation-play-state:running,running}
@keyframes fadeInAurora{to{opacity:0.6}}
@keyframes aurora{0%,100%{background-position:0% 50%;transform:translateZ(0) rotate(-10deg) translateY(0)}25%{background-position:50% 100%;transform:translateZ(0) rotate(-15deg) translateY(-10%)}50%{background-position:100% 50%;transform:translateZ(0) rotate(-5deg) translateY(5%)}75%{background-position:50% 0%;transform:translateZ(0) rotate(-12deg) translateY(-5%)}}
.stars-container{position:fixed;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:1}
.stars-container::before{content:'';position:absolute;top:-100%;left:-50%;width:300%;height:300%;background:linear-gradient(120deg,transparent 20%,rgba(0,229,255,0.08) 25%,rgba(76,175,80,0.12) 35%,rgba(124,77,255,0.08) 45%,transparent 50%);filter:blur(40px);transform-origin:center;transform:translateZ(0) rotate(0deg) translateX(-50%);will-change:transform;contain:layout style paint;opacity:0;animation:aurora2 20s linear infinite paused,fadeInAurora2 2s ease-out 0.5s forwards;animation-play-state:paused,running}
body.aurora-ready .stars-container::before{animation-play-state:running,running}
@keyframes fadeInAurora2{to{opacity:0.4}}
@keyframes aurora2{0%{transform:translateZ(0) rotate(0deg) translateX(-50%)}100%{transform:translateZ(0) rotate(360deg) translateX(-50%)}}
.star{position:absolute;width:4px;height:4px;background:var(--gold);border-radius:50%;animation:twinkle 4s infinite;box-shadow:0 0 10px var(--gold),0 0 20px rgba(255,215,0,0.5)}
.star:nth-child(1){top:10%;left:20%;animation-delay:0s}
.star:nth-child(2){top:30%;left:80%;animation-delay:1s}
.star:nth-child(3){top:60%;left:10%;animation-delay:2s}
.star:nth-child(4){top:80%;left:50%;animation-delay:3s}
.star:nth-child(5){top:40%;left:60%;animation-delay:4s}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
.site-header{position:relative;z-index:10;text-align:center;padding:var(--spacing-md) var(--spacing-sm);animation:slideDown 0.8s ease-out}
@keyframes slideDown{from{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}
.subscription-container{display:inline-flex;flex-direction:column;align-items:center;margin:var(--spacing-xs) var(--spacing-sm);animation:fadeIn 1s ease-out 0.5s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.subscribe-button{display:flex;align-items:center;gap:var(--spacing-xs);padding:12px 24px;background:linear-gradient(135deg,var(--accent),var(--primary));color:var(--darker-bg);border:none;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);box-shadow:0 4px 15px rgba(0,229,255,0.3)}
.subscribe-button:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px rgba(0,229,255,0.5);background:linear-gradient(135deg,var(--accent),var(--secondary))}
.unsubscribe-button{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:8px;transition:var(--transition)}
.unsubscribe-button:hover{color:var(--warning);transform:scale(1.1)}
.main-title{
    font-family:var(--font-primary);
   font-size:clamp(2.5rem,8vw,4.5rem); /* Poloviční velikost pro "Písničky pro děti" */
    color:var(--gold);
    margin:var(--spacing-md) 0;
    text-shadow:0 0 30px rgba(255,215,0,0.5);
    animation:pulse 2s ease-in-out infinite;
    text-align:center;
    display:block;
    width:100%
}



.main-title span:not(.title-icon)::before{
    content:' - '
}



@media (max-width:999px){
    .main-title{
        font-size:clamp(2.5rem, 7vw, 3.5rem);
        display:block;
        text-align:center;
        margin:var(--spacing-lg) auto;
        width:100%;
    }
    .main-title span:not(.title-icon){
    font-size:clamp(2rem, 6.4vw, 3.6rem); /* O 20% menší pro "DĚTSKÁ DISKOTÉKA" */
}
    .main-title span:not(.title-icon)::before{
        content:'';
        display:none
    }
    .title-icon:first-child{
        grid-column:1;
        grid-row:1 / 3;
        align-self:center
    }
    .title-icon:last-child{
        grid-column:3;
        grid-row:1 / 3;
        align-self:center
    }
    .main-title span:not(.title-icon){
        grid-column:2;
        grid-row:2;
        text-align:center;
        white-space:nowrap
    }
    .title-icon{
    font-size:clamp(2rem, 6.4vw, 3.6rem); /* O 20% menší pro noty 🎵 */
}
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.title-icon{display:inline-block;animation:bounce 1s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.tagline{font-size:1.2rem;color:var(--text-muted);margin-bottom:0}
main{position:relative;z-index:10}
main::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,transparent 0%,rgba(0,229,255,0.03) 20%,rgba(124,77,255,0.05) 50%,rgba(0,229,255,0.03) 80%,transparent 100%);pointer-events:none;z-index:-1;transform:translateZ(0) scaleY(1) translateY(0);will-change:transform;contain:layout style paint;opacity:0;animation:auroraWave 12s ease-in-out infinite paused,fadeInWave 2s ease-out 1s forwards;animation-play-state:paused,running}
body.aurora-ready main::before{animation-play-state:running,running}
@keyframes fadeInWave{to{opacity:0.5}}
@keyframes auroraWave{0%,100%{transform:translateZ(0) scaleY(1) translateY(0)}50%{transform:translateZ(0) scaleY(1.2) translateY(-5%)}}
.player-section{padding:var(--spacing-md);max-width:1000px;margin:0 auto;width:100%}
#player-container{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg);align-items:start}
@media (min-width:1024px){#player-container{grid-template-columns:350px 1fr}}
#youtube-player{position:relative;background:var(--card-bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);backdrop-filter:blur(10px);border:1px solid var(--border-color);width:350px;height:350px;margin:0 auto;max-width:calc(100vw - 2rem)}
#player,#youtube-player-div{position:absolute;top:0;left:0;width:100%;height:100%}
#youtube-player iframe,#player iframe,#youtube-iframe{position:absolute;top:0;left:0;width:100%!important;height:100%!important;display:block;border:none}
.playlist-modern{background:var(--card-bg);border-radius:var(--radius);padding:var(--spacing-md);box-shadow:var(--shadow);backdrop-filter:blur(10px);border:1px solid var(--border-color);max-height:700px;overflow:hidden;display:flex;flex-direction:column}
.playlist-title{font-family:var(--font-primary);font-size:1.5rem;color:var(--gold);margin-bottom:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-xs)}
.playlist-items{overflow-y:auto;overflow-x:hidden;flex:1;padding-right:var(--spacing-xs)}
.playlist-items::-webkit-scrollbar{width:8px}
.playlist-items::-webkit-scrollbar-track{background:rgba(92,107,192,0.1);border-radius:4px}
.playlist-items::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}
.playlist-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);margin-bottom:var(--spacing-xs);background:rgba(92,107,192,0.05);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);border:1px solid transparent}
.playlist-item:hover{background:rgba(92,107,192,0.1);border-color:var(--primary);transform:translateX(5px)}
.playlist-item.active{background:linear-gradient(135deg,rgba(92,107,192,0.2),rgba(124,77,255,0.2));border-color:var(--accent);box-shadow:0 4px 15px rgba(0,229,255,0.3)}
.playlist-number{font-family:var(--font-primary);font-size:1.2rem;color:var(--gold);min-width:30px;text-align:center}
.playlist-thumbnail{position:relative;width:60px;height:60px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0}
.playlist-thumbnail img{position:absolute;top:50%;left:50%;width:100px;height:100px;object-fit:cover;

    transform: translate(-50%, -50%) translateY(5px) scale(1.1);
}
.playlist-details{flex:1;min-width:0}
.playlist-song-title{font-size:1rem;font-weight:600;color:var(--text-light);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playlist-duration{font-size:0.875rem;color:var(--text-muted)}
.playlist-loading{text-align:center;padding:var(--spacing-lg);color:var(--text-muted)}
.loading-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto var(--spacing-sm)}
@keyframes spin{to{transform:rotate(360deg)}}
.offline-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(5,13,26,0.95);z-index:1000;align-items:center;justify-content:center}
.offline-overlay.show{display:flex}
.offline-content{text-align:center;padding:var(--spacing-lg);max-width:400px}
.offline-icon{font-size:4rem;color:var(--warning);margin-bottom:var(--spacing-md)}
.section-title{font-family:var(--font-primary);font-size:1.8rem;color:var(--gold);margin-bottom:var(--spacing-md);display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);text-shadow:0 0 20px rgba(255,215,0,0.5)}
.platforms-section,.share-section,.about-section{padding:var(--spacing-xl) var(--spacing-md);max-width:1000px;margin:0 auto;width:100%}
.platforms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg)}
.platform-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-lg);background:var(--card-bg);border-radius:var(--radius);text-decoration:none;transition:var(--transition);border:1px solid var(--border-color);backdrop-filter:blur(10px);gap:var(--spacing-sm)}
.platform-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(92,107,192,0.4)}
.platform-card.youtube{border-color:rgba(255,0,0,0.3)}
.platform-card.youtube:hover{box-shadow:0 8px 25px rgba(255,0,0,0.5)}
.platform-card.spotify{border-color:rgba(30,215,96,0.3)}
.platform-card.spotify:hover{box-shadow:0 8px 25px rgba(30,215,96,0.5)}
.platform-card.apple{border-color:rgba(250,82,82,0.3)}
.platform-card.apple:hover{box-shadow:0 8px 25px rgba(250,82,82,0.5)}
.platform-card.tiktok{border-color:rgba(0,242,234,0.3)}
.platform-card.tiktok:hover{box-shadow:0 8px 25px rgba(0,242,234,0.5)}
.platform-card.twitter{border-color:rgba(29,161,242,0.3)}
.platform-card.twitter:hover{box-shadow:0 8px 25px rgba(29,161,242,0.5)}
.platform-card i{font-size:4rem;color:var(--text-light)}
.platform-card span{font-size:1rem;color:var(--text-light);font-weight:600}
.share-buttons{display:flex;justify-content:center;gap:var(--spacing-md);flex-wrap:wrap}
.share-btn{width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;color:white}
.share-btn:hover{transform:translateY(-3px) scale(1.1)}
.share-btn.whatsapp{background:#25d366}
.share-btn.facebook{background:#1877f2}
.share-btn.messenger{background:#0084ff}
.share-btn.telegram{background:#0088cc}
.share-btn.twitter{background:#000000}
.share-btn.native{background:var(--primary)}
.share-btn i,.share-btn .material-icons{font-size:1.5rem;line-height:1;display:block}
/* Jemné doladění pozice pro specifické ikony */
.share-btn.whatsapp i{transform:translateY(1px)}
.share-btn.messenger i{transform:translateY(1px)}
.share-btn.twitter i{transform:translateY(0.5px)}
.about-content{display:flex;flex-direction:column;gap:var(--spacing-lg)}
.about-text{font-size:1.1rem;line-height:1.8;color:var(--text-light);text-align:center}
.mascot-container{text-align:center}
.mascot-image{max-width:400px;width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.mascot-caption{margin-top:var(--spacing-sm);font-size:1rem;color:var(--text-muted);font-style:italic}
.songs-info-section{padding:var(--spacing-xl) var(--spacing-md);max-width:1200px;margin:0 auto;width:100%}
.info-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-lg);margin:var(--spacing-lg) 0}
.info-block{background:var(--card-bg);padding:var(--spacing-md);border-radius:var(--radius);border:1px solid var(--border-color);backdrop-filter:blur(10px);box-shadow:var(--shadow);transition:var(--transition)}
.info-block:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(0,0,0,0.5);border-color:rgba(124,77,255,0.3)}
.info-block h3{color:var(--gold);margin-bottom:var(--spacing-sm);font-size:1.2rem;font-family:var(--font-primary);text-shadow:0 0 10px rgba(255,215,0,0.3)}
.info-block p{color:var(--text-light);line-height:1.7;font-size:1rem}
.songs-info-section h3{color:var(--gold);margin:var(--spacing-lg) 0 var(--spacing-md);font-size:1.4rem;font-family:var(--font-primary);text-shadow:0 0 15px rgba(255,215,0,0.4)}
.songs-info-section>p{color:var(--text-light);line-height:1.8;margin-bottom:var(--spacing-md);font-size:1.05rem}
.songs-info-section strong{color:var(--gold);font-weight:600}
.site-footer{position:relative;z-index:10;text-align:center;padding:var(--spacing-xl) var(--spacing-md);background:rgba(5,13,26,0.8);border-top:1px solid var(--border-color)}
.footer-update{color:var(--text-muted);font-size:0.95rem;margin-bottom:var(--spacing-sm)}
.footer-links{margin-bottom:var(--spacing-sm)}
.footer-links a{color:var(--accent);text-decoration:none;transition:var(--transition);font-size:1rem}
.footer-links a:hover{color:var(--gold)}
.copyright{color:var(--text-muted);font-size:0.875rem}
.scroll-to-top{position:fixed;bottom:30px;right:30px;width:50px;height:50px;background:var(--primary);color:white;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:var(--transition);z-index:100;box-shadow:0 4px 15px rgba(92,107,192,0.4)}
.scroll-to-top.visible{opacity:1;visibility:visible}
.scroll-to-top:hover{background:var(--primary-dark);transform:translateY(-3px)}
.hidden{display:none!important}
@media (prefers-reduced-motion:reduce){body::after,.stars-container::before,main::before{animation:none!important;opacity:0.6!important}*{animation:none!important;transition:none!important}}

/* DESKTOP - zmenšení na polovinu pro obrazovky nad 1000px */
@media (min-width:1000px){
:root{--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--radius:8px;--radius-sm:4px}
body{font-size:14px}
.site-header{padding:var(--spacing-md) var(--spacing-sm)}
.subscribe-button{padding:6px 12px;font-size:12px;box-shadow:0 2px 8px rgba(0,229,255,0.3)}
.subscribe-button:hover{box-shadow:0 3px 10px rgba(0,229,255,0.5)}
.unsubscribe-button{padding:4px}
.main-title{font-size:clamp(1.25rem,4vw,2.25rem);text-shadow:0 0 15px rgba(255,215,0,0.5)}
.title-icon{font-size:0.9em}
.tagline{font-size:0.6rem}
.star{width:2px;height:2px;box-shadow:0 0 5px var(--gold),0 0 10px rgba(255,215,0,0.5)}
.player-section{max-width:900px}
#player-container{grid-template-columns:350px 1fr}
#youtube-player{width:350px;height:350px}
.playlist-modern{max-height:500px}
.playlist-title{font-size:0.75rem}
.playlist-items::-webkit-scrollbar{width:4px}
.playlist-items::-webkit-scrollbar-track{border-radius:2px}
.playlist-items::-webkit-scrollbar-thumb{border-radius:2px}
.playlist-item{gap:var(--spacing-sm);padding:var(--spacing-sm)}
.playlist-item:hover{transform:translateX(3px)}
.playlist-item.active{box-shadow:0 2px 8px rgba(0,229,255,0.2)}
.playlist-number{font-size:0.6rem;min-width:15px}
.playlist-thumbnail{width:35px;height:35px}
.playlist-thumbnail img{position:absolute;top:50%;left:50%;width:55px;height:55px;object-fit:cover;transform:translate(-50%, -50%) translateY(5px) scale(1.1)}
.playlist-song-title{font-size:0.7rem;margin-bottom:2px}
.playlist-duration{font-size:0.5rem}
.loading-spinner{width:20px;height:20px;border:2px solid var(--border-color)}
.offline-content{max-width:300px}
.offline-icon{font-size:3rem}
.section-title{font-size:1rem;text-shadow:0 0 10px rgba(255,215,0,0.3)}
.platforms-section,.share-section,.about-section{padding:var(--spacing-lg) var(--spacing-md);max-width:500px}
.platforms-grid{gap:var(--spacing-md)}
.platform-card{padding:var(--spacing-md);gap:var(--spacing-xs)}
.platform-card:hover{transform:translateY(-3px);box-shadow:0 4px 15px rgba(92,107,192,0.3)}
.platform-card.youtube:hover{box-shadow:0 4px 15px rgba(255,0,0,0.4)}
.platform-card.spotify:hover{box-shadow:0 4px 15px rgba(30,215,96,0.4)}
.platform-card.apple:hover{box-shadow:0 4px 15px rgba(250,82,82,0.4)}
.platform-card.tiktok:hover{box-shadow:0 4px 15px rgba(0,242,234,0.4)}
.platform-card.twitter:hover{box-shadow:0 4px 15px rgba(29,161,242,0.4)}
.platform-card i{font-size:2rem}
.platform-card span{font-size:0.7rem}
.share-buttons{gap:var(--spacing-sm)}
.share-btn{width:30px;height:30px}
.share-btn:hover{transform:translateY(-2px) scale(1.1)}
.share-btn i,.share-btn .material-icons{font-size:0.8rem;line-height:1;display:block}
.about-content{gap:var(--spacing-md)}
.about-text{font-size:0.7rem;line-height:1.6}
.mascot-image{max-width:200px}
.mascot-caption{font-size:0.6rem}
.songs-info-section{padding:var(--spacing-lg) var(--spacing-md);max-width:900px}
.info-blocks{gap:var(--spacing-md);grid-template-columns:repeat(2,1fr)}
.info-block{padding:var(--spacing-sm)}
.info-block h3{font-size:0.75rem;margin-bottom:var(--spacing-xs)}
.info-block p{font-size:0.7rem;line-height:1.6}
.songs-info-section h3{font-size:0.85rem;margin:var(--spacing-md) 0 var(--spacing-sm)}
.songs-info-section>p{font-size:0.7rem;line-height:1.6;margin-bottom:var(--spacing-sm)}
.site-footer{padding:var(--spacing-lg) var(--spacing-sm)}
.footer-update{font-size:0.65rem}
.footer-links a{font-size:0.7rem}
.copyright{font-size:0.6rem}
.scroll-to-top{width:25px;height:25px;bottom:15px;right:15px;box-shadow:0 2px 8px rgba(92,107,192,0.4)}
.scroll-to-top:hover{transform:translateY(-2px)}
.scroll-to-top .material-icons{font-size:1rem}
.lyrics-section{max-width:500px}
.lyrics-selector select{font-size:0.7rem;padding:4px;max-width:150px}
.lyrics-selector select:focus{box-shadow:0 0 5px rgba(0,229,255,0.3)}
.lyrics-title{font-size:0.75rem}
.lyrics-text{font-size:0.7rem}
}

@media (max-width:768px){.main-title{font-size:clamp(2.2rem, 6vw, 3rem)}.platforms-grid{grid-template-columns:1fr}.share-buttons{gap:var(--spacing-xs)}.share-btn{width:50px;height:50px}.info-blocks{grid-template-columns:1fr;gap:var(--spacing-md)}.info-block h3{font-size:1.1rem}.info-block p{font-size:0.95rem}.songs-info-section h3{font-size:1.2rem}.songs-info-section>p{font-size:0.95rem}}
@media (max-width:468px){.main-title{font-size:clamp(2rem, 5.5vw, 2.8rem)}.title-icon{font-size:1.5rem}.player-section{padding:var(--spacing-sm)}.playlist-modern{padding:var(--spacing-sm)}}
.lyrics-section{padding:var(--spacing-xl) var(--spacing-md);max-width:1000px;margin:0 auto;width:100%}
.lyrics-container{background:var(--card-bg);border-radius:var(--radius);padding:var(--spacing-md);box-shadow:var(--shadow);backdrop-filter:blur(10px);border:1px solid var(--border-color)}
.lyrics-selector{margin-bottom:var(--spacing-md);text-align:center}
.lyrics-selector select{font-family:var(--font-secondary);font-size:1rem;padding:8px;border-radius:var(--radius-sm);border:1px solid var(--border-color);background:var(--dark-bg);color:var(--text-light);width:100%;max-width:300px;cursor:pointer;transition:var(--transition)}
.lyrics-selector select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 10px rgba(0,229,255,0.3)}
.lyrics-item{display:none;opacity:0;transition:var(--transition)}
.lyrics-item.active{display:block;opacity:1;animation:fadeIn 0.5s ease-out}
.lyrics-title{font-family:var(--font-primary);font-size:1.5rem;color:var(--gold);margin-bottom:var(--spacing-sm);text-align:center}
.lyrics-text{font-size:1rem;color:var(--text-light);line-height:1.8;text-align:center}
.lyrics-text p{margin-bottom:var(--spacing-sm)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media (max-width:768px){.lyrics-section{padding:var(--spacing-md)}.lyrics-selector select{max-width:100%}}
@media (max-width:360px){:root{--spacing-xs:0.4rem;--spacing-sm:0.8rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--radius:12px;--radius-sm:6px}body{font-size:0.9rem;line-height:1.5}.site-header{padding:var(--spacing-sm) var(--spacing-xs)}.main-title{font-size:clamp(1.8rem, 5vw, 2.5rem);margin:var(--spacing-sm) auto;text-align:center}.title-icon{font-size:1.2rem}.tagline{font-size:1rem;margin-bottom:var(--spacing-xs)}.subscribe-button{padding:10px 20px;font-size:0.85rem;border-radius:var(--radius-sm)}.unsubscribe-button{padding:6px;font-size:0.85rem}.player-section{padding:var(--spacing-xs)}#youtube-player{width:280px;height:280px;margin:0 auto}.playlist-modern{padding:var(--spacing-xs);max-height:600px}.playlist-title{font-size:1.2rem;margin-bottom:var(--spacing-sm)}.playlist-item{padding:var(--spacing-xs);margin-bottom:var(--spacing-xs);gap:var(--spacing-xs)}.playlist-number{font-size:1rem;min-width:25px}.playlist-thumbnail{width:50px;height:50px}.playlist-thumbnail img{position:absolute;top:50%;left:50%;width:85px;height:85px;object-fit:cover;transform:translate(-50%, -50%) translateY(5px) scale(1.1)}.playlist-song-title{font-size:0.9rem}.playlist-duration{font-size:0.75rem}.lyrics-section{padding:var(--spacing-sm)}.lyrics-title{font-size:1.2rem}.lyrics-text{font-size:0.9rem;line-height:1.6}.lyrics-selector select{font-size:0.9rem;padding:6px;max-width:100%}.platforms-section,.share-section,.about-section{padding:var(--spacing-md) var(--spacing-sm)}.platforms-grid{grid-template-columns:1fr;gap:var(--spacing-sm)}.platform-card{padding:var(--spacing-sm);gap:var(--spacing-xs)}.platform-card i{font-size:3rem}.share-buttons{gap:var(--spacing-xs)}.share-btn{width:45px;height:45px}.share-btn i,.share-btn .material-icons{font-size:1.2rem;line-height:1;display:block}.mascot-image{width:300px}.mascot-caption{font-size:0.9rem}.about-text{font-size:1rem}.songs-info-section{padding:var(--spacing-sm)}.info-blocks{gap:var(--spacing-sm)}.info-block{padding:var(--spacing-sm)}.info-block h3{font-size:1rem}.info-block p{font-size:0.85rem}.songs-info-section h3{font-size:1.1rem;margin:var(--spacing-md) 0 var(--spacing-xs)}.songs-info-section>p{font-size:0.85rem;line-height:1.6}.site-footer{padding:var(--spacing-md) var(--spacing-sm)}.footer-update{font-size:0.8rem}.footer-links a{font-size:0.9rem}.copyright{font-size:0.75rem}.scroll-to-top{width:40px;height:40px;bottom:20px;right:20px}}
/* AURORA OPTIMALIZACE PRO MOBILY A SLABÁ ZAŘÍZENÍ */
@media(max-width:767px){body::after,.stars-container::before,main::before{display:none!important;animation:none!important;opacity:0!important}body.aurora-ready::after,body.aurora-ready .stars-container::before,body.aurora-ready main::before{display:none!important}body::before{background-image:radial-gradient(ellipse at 20% 0%,rgba(124,77,255,0.1)0%,transparent 25%),radial-gradient(ellipse at 80% 100%,rgba(92,107,192,0.1)0%,transparent 25%)}}
@media(min-width:768px){body::after,.stars-container::before,main::before{will-change:transform,opacity;transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}}
@media(hover:none)and(pointer:coarse){body::after,.stars-container::before,main::before{animation-play-state:paused!important}}

/* PWA Install Banner - Glassmorphism */
.pwa-install-banner{position:fixed;bottom:0;left:0;right:0;background:rgba(92,107,192,0.15);backdrop-filter:blur(25px) saturate(180%);-webkit-backdrop-filter:blur(25px) saturate(180%);border-top:1px solid rgba(255,255,255,0.18);box-shadow:0 -8px 32px rgba(0,0,0,0.37),inset 0 1px 1px rgba(255,255,255,0.1);z-index:9999;transform:translateY(0);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),opacity 0.4s ease;animation:slideUpBanner 0.5s cubic-bezier(0.4,0,0.2,1)}
.pwa-install-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,77,255,0.1),rgba(0,229,255,0.08));border-radius:0;pointer-events:none}
.pwa-install-banner.hidden{transform:translateY(100%);opacity:0;pointer-events:none}
@keyframes slideUpBanner{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.pwa-banner-content{display:flex;align-items:center;gap:20px;padding:12px 16px;max-width:1200px;margin:0 auto;position:relative;z-index:1;cursor:pointer}
.pwa-banner-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:rgba(255,255,255,0.1);border-radius:12px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.18);box-shadow:inset 0 1px 1px rgba(255,255,255,0.2)}
.pwa-banner-icon .material-icons{font-size:28px;color:var(--gold);filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))}
.pwa-banner-text{flex:1;min-width:0}
.pwa-banner-text strong{display:block;font-size:15px;font-weight:600;color:#fff;margin-bottom:2px;line-height:1.3;text-shadow:0 1px 2px rgba(0,0,0,0.3)}
.pwa-banner-subtitle{display:block;font-size:12px;color:rgba(255,255,255,0.9);line-height:1.3;text-shadow:0 1px 2px rgba(0,0,0,0.2)}
.pwa-install-btn{display:flex;align-items:center;gap:6px;padding:10px 20px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);color:#fff;border-radius:25px;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 4px 12px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.3);flex-shrink:0;backdrop-filter:blur(10px);text-shadow:0 1px 2px rgba(0,0,0,0.2)}
.pwa-install-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px rgba(0,0,0,0.3),inset 0 1px 1px rgba(255,255,255,0.4);background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.4)}
.pwa-install-btn:active{transform:translateY(0) scale(0.98)}
.pwa-install-btn .material-icons{font-size:18px}
.pwa-close-btn{flex-shrink:0;background:transparent;border:none;color:rgba(255,255,255,0.7);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;width:auto;height:auto;font-size:28px;font-weight:300;line-height:1;margin-left:12px}
.pwa-close-btn:hover{color:#fff;transform:rotate(90deg) scale(1.1)}

/* Responsive PWA Banner */
@media (max-width:640px){.pwa-banner-content{gap:12px;padding:10px 12px}.pwa-banner-icon{width:40px;height:40px}.pwa-banner-icon .material-icons{font-size:24px}.pwa-banner-text strong{font-size:13px}.pwa-banner-subtitle{font-size:11px}.pwa-install-btn{padding:8px 16px;font-size:13px}.pwa-install-btn .material-icons{font-size:16px}.pwa-close-btn{font-size:24px;margin-left:8px}}
@media (max-width:480px){.pwa-banner-text{display:flex;flex-direction:column}.pwa-banner-subtitle{display:none}.pwa-install-btn span:last-child{display:none}.pwa-install-btn{padding:8px 12px;gap:0}}
@media (max-width:360px){.pwa-banner-content{gap:8px;padding:8px 10px}.pwa-banner-icon{width:36px;height:36px}.pwa-banner-icon .material-icons{font-size:20px}.pwa-banner-text strong{font-size:12px}.pwa-install-btn{padding:6px 10px}.pwa-install-btn .material-icons{font-size:14px}.pwa-close-btn{font-size:20px;margin-left:6px}}
@media(prefers-reduced-motion:reduce){body::after,.stars-container::before,main::before{animation:none!important;opacity:0.3!important}}

/* ZisKai Hero Subtitle */
.hero-subtitle {
    font-family: var(--font-secondary);
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: var(--text-muted);
    margin: var(--spacing-sm) 0 var(--spacing-md);
    text-align: center;
    font-style: italic;
}
@media (max-width:768px){.hero-subtitle{margin:0.25rem 0 var(--spacing-sm)}}