@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');
:root {
    --accent-red: #E50914;
    --dark-bg: #000000;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%; height: 100%; overflow-x: hidden;
    font-family: Arial, sans-serif; color: #ffffff;
    background: url('banner.png?v=2') center/cover no-repeat fixed;
    background-color: var(--dark-bg);
}
.page-overlay {
    background-color: rgba(0, 0, 0, 0.55);
    min-height: 100vh; width: 100%; position: relative;
}
.site-logo {
    position: absolute; top: 20px; left: 8%;
    display: flex; align-items: center; gap: 12px; z-index: 10;
}
.site-logo img { width: 50px; height: 50px; object-fit: contain; border-radius: 8px; }
.site-logo .logo-text {
    font-family: 'Roboto', sans-serif; font-weight: 900;
    text-transform: uppercase; font-size: 1.2rem; letter-spacing: 1px;
}
.logo-white { color: #ffffff; }
.logo-red { color: var(--accent-red); }

.hero-section {
    position: relative;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%);
    padding: 120px 5% 40px;
}
.hero-content { max-width: 100%; z-index: 5; }
.hero-content p {
    font-family: 'Roboto', sans-serif; font-weight: bold;
    letter-spacing: 0.4em; font-size: 0.75rem; text-transform: uppercase;
    color: var(--accent-red); margin-bottom: 1rem;
}
.main-heading {
    font-family: 'Roboto', sans-serif; font-weight: 900;
    line-height: 0.9; text-transform: uppercase; margin: 20px 0;
    font-size: clamp(2.5rem, 10vw, 6rem);
}
.heading-white { color: #ffffff; }
.heading-red { color: var(--accent-red); }

/* Стеклянные кнопки */
.glass-btn {
    position: relative; top: 0; left: 0;
    width: 250px; height: 50px; margin: 0;
    display: flex; justify-content: center; align-items: center;
}
.glass-btn a {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px; padding: 10px; letter-spacing: 1px;
    text-decoration: none; overflow: hidden;
    color: #fff; font-weight: 400; z-index: 1;
    transition: 0.5s; backdrop-filter: blur(15px); cursor: pointer;
}
.glass-btn:hover a { letter-spacing: 3px; }
.glass-btn a::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 50%; height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
    transform: skewX(45deg) translate(0); transition: 0.5s; filter: blur(0px);
}
.glass-btn:hover a::before { transform: skewX(45deg) translate(200px); }
.glass-btn::before {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    bottom: -5px; width: 30px; height: 10px; background: #f00;
    border-radius: 10px; transition: 0.5s; transition-delay: 0.5s;
}
.glass-btn:hover::before { bottom: 0; height: 50%; width: 80%; border-radius: 30px; }
.glass-btn::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    top: -5px; width: 30px; height: 10px; background: #f00;
    border-radius: 10px; transition: 0.5s; transition-delay: 0.5s;
}
.glass-btn:hover::after { top: 0; height: 50%; width: 80%; border-radius: 30px; }

/* ВИДЕОБЛОК */
.video-container {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}
.video-container video {
    width: 100%;
    height: auto;
    display: block;
}
.sound-toggle-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 30px;
    padding: 8px 16px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
}
.sound-toggle-btn:hover {
    background: rgba(229,9,20,0.8);
}

.video-section { margin-top: 30px; width: 100%; }
.video-placeholder {
    width: 100%; aspect-ratio: 16/9; background: #111;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; font-size: 1.5rem; color: #888;
    text-transform: uppercase; letter-spacing: 2px; border: 1px solid #333;
}

/* Горизонтальный скролл */
.gallery-scroll {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 0 5% 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-height: 220px;
}
.gallery-scroll::-webkit-scrollbar { display: none; }
.gallery-scroll .gallery-card {
    flex: 0 0 auto;
    width: min(80vw, 400px);
    aspect-ratio: 1 / 1;
    scroll-snap-align: start;
    border-radius: 12px;
    border: 2px solid var(--accent-red);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
    background: #111;
}
.gallery-scroll .gallery-card:hover { transform: scale(1.02); }

/* Сетка галереи */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    padding: 0 5% 20px;
}
.gallery-card {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 2px solid var(--accent-red);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
    background: #111;
}
.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-card:hover { transform: scale(1.02); }

#home-page, #about-page, #full-gallery-page, #soundtracks-page, #books-page, #digital-page, #news-page {
    width: 100%; transition: opacity 0.5s ease;
}
.hidden { display: none; }

.social-icon {
    color: #9CA3AF; transition: color 0.3s; display: inline-flex; align-items: center;
}
.social-icon:hover { color: var(--accent-red) !important; }

footer {
    padding: 40px 5% 30px; text-align: center;
    border-top: 1px solid #111; background: rgba(0,0,0,0.6);
}
.footer-links {
    display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin: 10px 0 15px;
}
.footer-links a { color: #777; text-decoration: none; font-size: 0.8rem; transition: color 0.3s; }
.footer-links a:hover { color: var(--accent-red); }

.back-link {
    color: #9CA3AF; font-weight: bold; text-transform: uppercase;
    font-size: 0.75rem; letter-spacing: 0.1em; transition: color 0.3s;
}
.back-link:hover { color: white; }

.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; background: #111; color: #ccc;
    padding: 15px 5%; display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; z-index: 10000; border-top: 1px solid #333; font-size: 0.9rem;
}
.cookie-banner button {
    background: var(--accent-red); border: none; color: white;
    padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: bold; margin-left: 10px;
}
.cookie-banner .reject-btn {
    background: #333;
}
.cookie-banner .reject-btn:hover { background: #555; }

.lightbox {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); z-index: 1000; align-items: center; justify-content: center;
    flex-direction: column;
}
.lightbox.active { display: flex; }
.lightbox img { max-width: 95%; max-height: 90%; border-radius: 12px; box-shadow: 0 0 30px var(--accent-red); }
.lightbox .close-btn {
    position: absolute; top: 20px; right: 30px; font-size: 40px; color: white;
    cursor: pointer; background: none; border: none;
}

/* Саундтреки (Музыка) */
.soundtrack-wrapper {
    max-width: 800px; margin: 0 auto; border: 2px solid var(--accent-red);
    border-radius: 12px; background: rgba(0,0,0,0.6); padding: 20px;
}
.player-main { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 15px; }
.player-cover { flex-shrink: 0; width: 100px; height: 100px; border-radius: 8px; border: 1px solid #333; object-fit: cover; }
.player-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.player-controls button {
    background: none; border: none; color: #fff; font-size: 2.5rem;
    cursor: pointer; margin: 0 12px; transition: color 0.2s;
}
.player-controls button:hover { color: var(--accent-red); }
.seek-bar {
    width: 100%; margin: 10px 0; -webkit-appearance: none; background: #333;
    height: 4px; border-radius: 2px; outline: none;
}
.seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px;
    background: var(--accent-red); border-radius: 50%; cursor: pointer;
}
.current-time, .duration { font-size: 0.9rem; color: #aaa; }

.equalizer-title {
    display: none; font-family: 'Roboto', sans-serif; font-size: 2rem;
    font-weight: 900; text-transform: uppercase; text-align: center; margin-top: 25px;
    animation: triColorBlink 0.5s step-end infinite;
}
@keyframes triColorBlink {
    0%   { color: var(--accent-red); text-shadow: 0 0 15px var(--accent-red); }
    33%  { color: #00BFFF; text-shadow: 0 0 15px #00BFFF; }
    66%  { color: #FFFFFF; text-shadow: 0 0 15px #FFFFFF; }
    100% { color: var(--accent-red); text-shadow: 0 0 15px var(--accent-red); }
}

.track-list { list-style: none; padding: 0; margin: 0; }
.track-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 15px; border-bottom: 1px solid #333; cursor: pointer; transition: background 0.2s;
    flex-wrap: wrap;
}
.track-list li:hover { background: #1a1a1a; }
.track-list li:last-child { border-bottom: none; }
.track-left { display: flex; align-items: center; gap: 10px; flex: 1; }
.track-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.track-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px;
}
.track-actions button {
    background: none; border: none; font-size: 1.5rem;
    cursor: pointer; color: #888;
    transition: color 0.2s;
}
.track-actions button.liked,
.track-actions button.disliked {
    color: var(--accent-red);
}
.reaction-count { font-size: 0.85rem; color: #aaa; min-width: 25px; }
.track-download,
.track-share {
    color: #aaa;
    font-size: 1.4rem;
    margin-left: 5px;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
}
.track-download:hover,
.track-share:hover { color: var(--accent-red); }
.fa-play-circle {
    font-size: 2rem;
    color: #aaa;
    transition: color 0.2s;
    cursor: pointer;
}
.fa-play-circle:hover { color: var(--accent-red); }

/* Книги */
.books-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px; padding: 20px 5%;
}
.book-item {
    text-align: center; background: rgba(0,0,0,0.4); border-radius: 12px;
    padding: 20px; border: 1px solid #222;
}
.book-item img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px; }
.litres-btn { display: inline-block; transition: transform 0.2s; }
.litres-btn:hover { transform: scale(1.05); }
.litres-btn img { height: 50px; width: auto; }

/* Новости */
.news-card img { width: 100%; max-width: 600px; height: auto; border-radius: 8px; margin-bottom: 15px; }
.news-card h3 { color: var(--accent-red); font-size: 1.5rem; margin-bottom: 5px; }
.news-card .news-date { color: #aaa; font-size: 0.9rem; margin-bottom: 10px; }
.news-card p { line-height: 1.6; }

/* Значки */
.badges-section {
    margin-top: 2rem; padding: 1.5rem; background: rgba(0,0,0,0.4); border-radius: 12px; border: 1px solid var(--accent-red);
}
.badges-section h3 { color: var(--accent-red); font-size: 1.5rem; margin-bottom: 1rem; }
.badge-card { text-align: center; opacity: 0.5; transition: opacity 0.3s; }
.badge-card.owned { opacity: 1; }
.badge-card img { width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--accent-red); }
.badge-card button { width: auto; height: auto; padding: 5px 15px; margin-top: 5px; }

/* Кнопка "О приложении" */
.btn-wrapper {
    position: relative; display: inline-block;
    width: 250px; height: 50px;
}
.btn-app {
    --border-radius: 24px;
    --padding: 4px;
    --transition: 0.4s;
    --button-color: #101010;
    --highlight-color-hue: 210deg;
    user-select: none;
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 100%; padding: 0.5em 1em;
    font-family: "Poppins", "Inter", "Segoe UI", sans-serif;
    font-size: 1em; font-weight: 400;
    background-color: var(--button-color);
    box-shadow:
        inset 0px 1px 1px rgba(255,255,255,0.2),
        inset 0px 2px 2px rgba(255,255,255,0.15),
        inset 0px 4px 4px rgba(255,255,255,0.1),
        inset 0px 8px 8px rgba(255,255,255,0.05),
        inset 0px 16px 16px rgba(255,255,255,0.05),
        0px -1px 1px rgba(0,0,0,0.02),
        0px -2px 2px rgba(0,0,0,0.03),
        0px -4px 4px rgba(0,0,0,0.05),
        0px -8px 8px rgba(0,0,0,0.06),
        0px -16px 16px rgba(0,0,0,0.08);
    border: solid 1px #fff2;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: box-shadow var(--transition), border var(--transition), background-color var(--transition);
}
.btn-app::before {
    content: ""; position: absolute;
    top: calc(0px - var(--padding)); left: calc(0px - var(--padding));
    width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2);
    border-radius: calc(var(--border-radius) + var(--padding));
    pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a);
    z-index: -1; transition: box-shadow var(--transition), filter var(--transition);
    box-shadow:
        0 -8px 8px -6px #0000 inset,
        0 -16px 16px -8px #00000000 inset,
        1px 1px 1px #fff2, 2px 2px 2px #fff1,
        -1px -1px 1px #0002, -2px -2px 2px #0001;
}
.btn-app::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: inherit; pointer-events: none;
    background-image: linear-gradient(0deg, #fff, hsl(var(--highlight-color-hue),100%,70%), hsla(var(--highlight-color-hue),100%,70%,50%), 8%, transparent);
    background-position: 0 0; opacity: 0;
    transition: opacity var(--transition), filter var(--transition);
}
.btn-letter {
    position: relative; display: inline-block; color: #fff5;
    animation: letter-anim 2s ease-in-out infinite;
    transition: color var(--transition), text-shadow var(--transition), opacity var(--transition);
}
@keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } }
.android-logo {
    position: relative;
    width: 34px;
    height: 20px;
}
.android-logo .head {
    width: 20px;
    height: 10px;
    top: 5px;
    border-radius: 22px 22px 0 0;
    background: #A4CA39;
    position: absolute;
    left: 7px;
}
.android-logo .left_eye,
.android-logo .right_eye {
    background: #fff;
    width: 2px;
    height: 2px;
    position: absolute;
    top: 4px;
    border-radius: 100%;
}
.android-logo .left_eye { left: 5px; }
.android-logo .right_eye { right: 5px; }
.android-logo .left_antenna,
.android-logo .right_antenna {
    width: 0.6px;
    height: 5px;
    position: absolute;
    top: -3px;
    border-radius: 0.3px;
    background: #A4CA39;
}
.android-logo .left_antenna { left: 5px; transform: rotate(-30deg); }
.android-logo .right_antenna { right: 5px; transform: rotate(30deg); }
.txt-wrapper { position: relative; display: flex; align-items: center; flex: 1; }
.txt-1, .txt-2 { position: absolute; word-spacing: normal; white-space: nowrap; }
.txt-1 { animation: appear-anim 1s ease-in-out forwards; }
.txt-2 { opacity: 0; }
@keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } }
.btn-app:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; }
.btn-app:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; }
@keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } }
.btn-app:focus .btn-letter {
    animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite;
    animation-delay: 0s, 1s;
}
@keyframes focused-letter-anim {
    0%,100% { filter: blur(0px); }
    50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue),100%,70%)); }
}
.btn-app:focus::before {
    box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue),100%,70%,20%) inset,
                1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001;
}
.btn-app:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); }
.btn-app:active {
    border: solid 1px hsla(var(--highlight-color-hue),100%,80%,70%);
    background-color: hsla(var(--highlight-color-hue),50%,20%,0.5);
}
.btn-app:active::before {
    box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue),100%,70%,80%) inset,
                1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001;
}
.btn-app:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); }
.btn-app:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue),100%,90%,90%); animation: none; }
.btn-app:hover { border: solid 1px hsla(var(--highlight-color-hue),100%,80%,40%); }
.btn-app:hover::before {
    box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue),100%,70%,30%) inset,
                1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001;
}
.btn-app:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); }

/* Анимированный фон */
.container-loader {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: 0;
    opacity: 0.4;
}
.aro {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent-red);
    animation: float 6s ease-in-out infinite;
    opacity: 0;
    filter: blur(1px);
}
.aro:nth-child(odd) { background: #8B0000; animation-duration: 7s; }
.aro:nth-child(3n) { width: 6px; height: 6px; animation-duration: 5s; }
.aro:nth-child(5n) { width: 8px; height: 8px; animation-duration: 8s; }
@keyframes float {
    0% { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translateY(-10vh) translateX(20px) scale(1); opacity: 0; }
}
.aro[style*="--s:0"] { left: 5%; top: 10%; animation-delay: 0s; }
.aro[style*="--s:1"] { left: 95%; top: 15%; animation-delay: 0.5s; }
.aro[style*="--s:2"] { left: 10%; top: 80%; animation-delay: 1s; }
.aro[style*="--s:3"] { left: 90%; top: 85%; animation-delay: 1.5s; }
.aro[style*="--s:4"] { left: 50%; top: 50%; animation-delay: 2s; }
.aro[style*="--s:5"] { left: 20%; top: 40%; animation-delay: 2.5s; }
.aro[style*="--s:6"] { left: 80%; top: 60%; animation-delay: 3s; }
.aro[style*="--s:7"] { left: 30%; top: 70%; animation-delay: 3.5s; }
.aro[style*="--s:8"] { left: 70%; top: 30%; animation-delay: 4s; }
.aro[style*="--s:9"] { left: 60%; top: 80%; animation-delay: 4.5s; }
.aro[style*="--s:10"] { left: 40%; top: 20%; animation-delay: 5s; }
.aro[style*="--s:11"] { left: 15%; top: 60%; animation-delay: 5.5s; }
.aro[style*="--s:12"] { left: 85%; top: 40%; animation-delay: 6s; }
.aro[style*="--s:13"] { left: 55%; top: 10%; animation-delay: 6.5s; }
.aro[style*="--s:14"] { left: 45%; top: 90%; animation-delay: 7s; }

/* Верхняя шапка с одним изображением */
.top-header {
    width: 100%;
    line-height: 0;
    position: relative;
    z-index: 15;
}
.top-header img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- БЛОК "Наш музыка" (обновлённый) ---- */
.music-links-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    padding: 15px 20px;
    border: 1px solid rgba(229, 9, 20, 0.3);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.music-links-header {
    margin-bottom: 12px;
}
.music-links-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-red);
}
.music-links-icons {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.music-icon-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    transition: transform 0.2s, filter 0.2s;
    filter: brightness(0.8);
}
.music-icon-img:hover {
    transform: scale(1.1);
    filter: brightness(1);
}
body.light-mode .music-links-block {
    background: rgba(255,255,255,0.3);
    border-color: rgba(229,9,20,0.5);
}
body.light-mode .music-icon-img {
    filter: brightness(0.9);
}
body.light-mode .music-icon-img:hover {
    filter: brightness(1);
}

/* Три контейнера с изображениями */
.custom-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.custom-gallery-item {
    background: rgba(0,0,0,0.4);
    border-radius: 12px;
    border: 1px solid var(--accent-red);
    overflow: hidden;
    text-align: center;
    padding-bottom: 15px;
}
.custom-gallery-item img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}
.custom-gallery-item .desc {
    padding: 10px 12px 5px;
    font-size: 0.95rem;
    color: #ddd;
    line-height: 1.4;
}
body.light-mode .custom-gallery-item {
    background: rgba(255,255,255,0.9);
    border-color: #aaa;
}
body.light-mode .custom-gallery-item .desc {
    color: #111;
}
@media (max-width: 768px) {
    .custom-gallery {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    .music-links-block { max-width: 100%; }
}

/* Светлая тема (глобальные стили) */
body.light-mode {
    background: #f5f5f5 url('banner.png?v=2') center/cover no-repeat fixed;
    color: #111;
}
body.light-mode .page-overlay {
    background-color: rgba(255, 255, 255, 0.55);
}
body.light-mode .glass-btn a {
    background: rgba(0, 0, 0, 0.08);
    color: #222;
}
body.light-mode .cookie-banner {
    background: #eee;
    color: #111;
}
body.light-mode .cookie-banner a {
    color: var(--accent-red);
}
body.light-mode .social-icon {
    color: #444;
}
body.light-mode footer {
    background: #ddd;
    color: #222;
}
body.light-mode .footer-links a {
    color: #222;
}
body.light-mode .back-link {
    color: #222;
}
body.light-mode .track-list li {
    border-bottom-color: #ccc;
}
body.light-mode .track-list li:hover {
    background: #e0e0e0;
}
body.light-mode .soundtrack-wrapper,
body.light-mode .news-card,
body.light-mode .book-item,
body.light-mode .badges-section {
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    border-color: #aaa;
}
body.light-mode .badge-card button {
    background: var(--accent-red);
    color: white;
}

.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0,0,0,0.6);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1001;
    backdrop-filter: blur(5px);
    transition: 0.2s;
}
body.light-mode .theme-toggle {
    background: rgba(255, 255, 255, 0.8);
    color: #111;
}
.theme-toggle:hover {
    transform: scale(1.05);
}

/* Адаптив */
@media (max-width: 768px) {
    .player-main { flex-direction: column; align-items: center; }
    .hero-section { padding: 100px 4% 30px; }
    .glass-btn { width: 200px; height: 45px; }
    .btn-wrapper { width: 200px; height: 45px; }
    .gallery-scroll .gallery-card { width: min(90vw, 350px); }
    .track-right {
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        margin-top: 10px;
    }
    .track-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}
@media (max-width: 480px) {
    .site-logo { left: 4%; top: 10px; }
    .hero-content p { font-size: 0.65rem; }
    .main-heading { font-size: 2.5rem; }
    .gallery-scroll .gallery-card { width: min(85vw, 300px); }
}
#install-banner, #ios-hint {
    font-family: Arial, sans-serif;
    backdrop-filter: blur(10px);
}
#install-btn {
    cursor: pointer;
    transition: background 0.3s;
}
#install-btn:hover { background: #ff1a23; }
.gallery-scroll { min-height: 220px; }