:root {
    --bg-deep: #140327;
    --bg-mid: #2b0d4d;
    --panel: rgba(32, 8, 56, 0.84);
    --neon-pink: #f44fff;
    --neon-gold: #ffd84d;
    --neon-orange: #ff9f36;
    --text-main: #fff6ff;
    --text-soft: #f0d6ff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    font-family: "Montserrat", sans-serif;
    color: var(--text-main);
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 105, 252, 0.25), transparent 35%),
        radial-gradient(circle at 90% 15%, rgba(255, 166, 46, 0.18), transparent 32%),
        linear-gradient(160deg, rgba(19, 1, 39, 0.85), rgba(16, 2, 35, 0.92)),
        url("img-vid/background.webp") center/cover no-repeat fixed;
    padding: 1.25rem;
}

.ambient-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 110%, rgba(255, 66, 193, 0.15), transparent 45%),
        radial-gradient(circle at 48% -10%, rgba(255, 220, 99, 0.12), transparent 35%);
    animation: glowShift 8s ease-in-out infinite;
}

.site-shell {
    position: relative;
    z-index: 1;
    width: min(1040px, 100%);
    margin: 0 auto;
    background: var(--panel);
    border: 1px solid rgba(244, 79, 255, 0.4);
    border-radius: 18px;
    box-shadow:
        0 0 0 1px rgba(255, 167, 50, 0.2) inset,
        0 0 26px rgba(244, 79, 255, 0.38),
        0 0 60px rgba(255, 159, 54, 0.16);
    overflow: hidden;
}

.hero {
    position: relative;
    text-align: center;
    padding: 2.5rem 1.5rem 1.6rem;
    border-bottom: 1px solid rgba(244, 79, 255, 0.28);
    background:
        linear-gradient(180deg, rgba(32, 3, 53, 0.5), rgba(32, 3, 53, 0.05)),
        radial-gradient(circle at 50% -40%, rgba(244, 79, 255, 0.3), transparent 70%);
}

.tiktok-badge {
    position: absolute;
    top: 0.85rem;
    right: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 216, 77, 0.6);
    color: #fff;
    text-decoration: none;
    background: rgba(19, 2, 35, 0.72);
    box-shadow: 0 0 12px rgba(244, 79, 255, 0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tiktok-badge svg {
    width: 0.92rem;
    height: 0.92rem;
    fill: #fff;
}

.tiktok-badge span {
    font-family: "Orbitron", sans-serif;
    font-size: 0.64rem;
    letter-spacing: 0.03em;
    color: var(--neon-gold);
}

.tiktok-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(255, 159, 54, 0.45);
}

.facebook-badge {
    position: absolute;
    top: 2.95rem;
    right: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 216, 77, 0.6);
    color: #fff;
    text-decoration: none;
    background: rgba(19, 2, 35, 0.72);
    box-shadow: 0 0 12px rgba(244, 79, 255, 0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.facebook-badge svg {
    width: 0.92rem;
    height: 0.92rem;
    fill: #fff;
}

.facebook-badge span {
    font-family: "Orbitron", sans-serif;
    font-size: 0.64rem;
    letter-spacing: 0.03em;
    color: var(--neon-gold);
}

.facebook-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(255, 159, 54, 0.45);
}

.hero-logo {
    width: min(240px, 62vw);
    filter: drop-shadow(0 0 22px rgba(244, 79, 255, 0.85));
    margin-bottom: 1rem;
}

.hero h1 {
    font-family: "Orbitron", sans-serif;
    font-size: clamp(1.25rem, 2.9vw, 2.1rem);
    letter-spacing: 0.06em;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
}

.hero h1 span {
    color: var(--neon-gold);
}

.hero p {
    color: var(--text-soft);
    font-size: clamp(0.92rem, 2.1vw, 1.15rem);
}

.player-box {
    margin: 1.25rem;
    padding: 1rem;
    border-radius: 16px;
    border: 2px solid rgba(244, 79, 255, 0.7);
    box-shadow:
        0 0 24px rgba(244, 79, 255, 0.42),
        0 0 30px rgba(255, 159, 54, 0.2) inset;
    background: linear-gradient(130deg, rgba(69, 15, 104, 0.52), rgba(30, 7, 58, 0.8));
}

.live-line {
    text-align: center;
    font-family: "Orbitron", sans-serif;
    font-size: clamp(0.85rem, 2vw, 1rem);
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    color: #ffeefe;
}

.live-line strong {
    color: var(--neon-gold);
}

.player-box iframe {
    display: block;
    width: 100%;
    border-radius: 10px;
}

.app-links {
    margin: 1.25rem;
    margin-top: 0;
    padding: 1.2rem;
    border-radius: 14px;
    border: 1px solid rgba(244, 79, 255, 0.6);
    background:
        linear-gradient(140deg, rgba(40, 10, 64, 0.78), rgba(19, 4, 38, 0.86)),
        radial-gradient(circle at 12% 50%, rgba(255, 216, 77, 0.14), transparent 45%);
    box-shadow:
        0 0 20px rgba(244, 79, 255, 0.25),
        0 0 28px rgba(255, 159, 54, 0.12) inset;
}

.app-links h2 {
    font-family: "Orbitron", sans-serif;
    color: var(--neon-gold);
    font-size: clamp(1rem, 2.3vw, 1.35rem);
    margin-bottom: 0.55rem;
    letter-spacing: 0.03em;
}

.app-links p {
    color: var(--text-soft);
    line-height: 1.55;
    font-size: clamp(0.9rem, 1.9vw, 1.02rem);
}

.store-badges {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.store-badges a {
    display: inline-flex;
    padding: 0.4rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 216, 77, 0.42);
    background: rgba(17, 4, 34, 0.55);
    box-shadow: 0 0 12px rgba(255, 159, 54, 0.18);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.store-badges a:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(255, 216, 77, 0.75);
    box-shadow:
        0 0 16px rgba(244, 79, 255, 0.3),
        0 0 24px rgba(255, 159, 54, 0.26);
}

.store-logo {
    display: block;
    height: 54px;
    width: auto;
}

.about {
    margin: 1.25rem;
    margin-top: 0;
    padding: 1.2rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 159, 54, 0.52);
    background: linear-gradient(180deg, rgba(48, 9, 76, 0.55), rgba(28, 4, 48, 0.8));
}

.about h2 {
    font-family: "Orbitron", sans-serif;
    text-transform: uppercase;
    color: var(--neon-gold);
    margin-bottom: 0.85rem;
    font-size: clamp(1rem, 2.4vw, 1.45rem);
    letter-spacing: 0.05em;
}

.about p {
    color: var(--text-soft);
    line-height: 1.62;
    font-size: clamp(0.92rem, 2vw, 1.05rem);
}

.about p + p {
    margin-top: 1rem;
}

.site-footer {
    padding: 0.55rem 1rem 0.9rem;
    text-align: center;
}

.site-footer a {
    font-size: 0.74rem;
    color: rgba(255, 246, 255, 0.72);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--neon-gold);
    text-decoration: underline;
}

@keyframes glowShift {
    0%,
    100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.03);
    }
}

@media (max-width: 700px) {
    body {
        padding: 0.6rem;
    }

    .hero {
        padding-top: 1.7rem;
    }

    .tiktok-badge {
        top: 0.58rem;
        right: 0.58rem;
        padding: 0.33rem 0.52rem;
    }

    .facebook-badge {
        top: 2.58rem;
        right: 0.58rem;
        padding: 0.33rem 0.52rem;
    }

    .tiktok-badge span {
        font-size: 0.58rem;
    }

    .facebook-badge span {
        font-size: 0.58rem;
    }

    .player-box,
    .app-links,
    .about {
        margin: 0.8rem;
    }

    .store-logo {
        height: 48px;
    }
}