/*
 * Poolbaas Sports Stage V1
 * ------------------------------------------
 * Premium donkere sportomgeving.
 *
 * Grote surfaces alleen voor:
 * - hoofdmoment;
 * - persoonlijke stand;
 * - klassement;
 * - wedstrijdoverzicht.
 *
 * Rijen blijven rijen.
 */


/* ========================================================
   TOKENS
   ======================================================== */

:root {
    --psv1-bg: #070a25;
    --psv1-bg-deep: #04061a;

    --psv1-surface: #11143d;
    --psv1-surface-2: #18164d;
    --psv1-surface-3: #20185c;

    --psv1-surface-soft:
        rgba(255, 255, 255, 0.055);

    --psv1-surface-bright:
        rgba(255, 255, 255, 0.1);

    --psv1-text: #f8f7ff;
    --psv1-muted: #b5b1ce;
    --psv1-faint: #85819f;

    --psv1-purple: #8054ff;
    --psv1-purple-soft: #ad8cff;
    --psv1-purple-deep: #3d238e;

    --psv1-yellow: #ffdc4a;
    --psv1-yellow-strong: #f5b817;
    --psv1-yellow-soft:
        rgba(255, 220, 74, 0.16);

    --psv1-green: #38d58c;
    --psv1-green-soft:
        rgba(56, 213, 140, 0.14);

    --psv1-line:
        rgba(255, 255, 255, 0.105);

    --psv1-line-strong:
        rgba(255, 255, 255, 0.19);

    --psv1-radius-sm: 10px;
    --psv1-radius-md: 16px;
    --psv1-radius-lg: 23px;

    --psv1-shadow:
        0 22px 55px
        rgba(1, 3, 18, 0.4);

    --psv1-glow:
        0 0 0 1px
        rgba(146, 105, 255, 0.22),
        0 16px 48px
        rgba(24, 10, 77, 0.44);
}


/* ========================================================
   PAGINACANVAS
   ======================================================== */

body:has(.pk4-page),
body:has(.psf5-page),
body.pb-sports-stage-v1 {
    background:
        radial-gradient(
            circle at 15% 5%,
            rgba(104, 55, 210, 0.24),
            transparent 30rem
        ),
        radial-gradient(
            circle at 90% 35%,
            rgba(54, 40, 154, 0.18),
            transparent 36rem
        ),
        linear-gradient(
            180deg,
            var(--psv1-bg) 0%,
            var(--psv1-bg-deep) 100%
        ) !important;

    color:
        var(--psv1-text) !important;
}

body:has(.pk4-page) .main-content,
body:has(.psf5-page) .main-content,
body.pb-sports-stage-v1 .main-content {
    background: transparent !important;
}

body :where(
    .pk4-page,
    .psf5-page
) {
    color:
        var(--psv1-text) !important;
}

body :where(
    .pk4-page,
    .psf5-page
) :where(
    h1,
    h2,
    h3,
    h4,
    strong
) {
    color:
        var(--psv1-text) !important;
}

body :where(
    .pk4-page,
    .psf5-page
) :where(
    p,
    small,
    [class*="meta"],
    [class*="subtitle"]
) {
    color:
        var(--psv1-muted);
}


/* ========================================================
   GEDEELDE SECTIEKOPPEN
   ======================================================== */

body :where(
    .pk4-page,
    .psf5-page
) :where(
    .pk4-section-header,
    .pk4-panel__header,
    .pk4-upcoming-v3__header
) {
    border: 0 !important;
}

body :where(
    .pk4-page,
    .psf5-page
) :where(
    .pk4-section-header,
    .pk4-panel__header,
    .pk4-upcoming-v3__header
) :where(
    h2,
    strong,
    span
) {
    color:
        var(--psv1-purple-soft) !important;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body :where(
    .pk4-page,
    .psf5-page
) a {
    color:
        var(--psv1-purple-soft);
}


/* ========================================================
   KANTOOR HERO
   ======================================================== */

body .pk4-hero {
    position: relative;
    isolation: isolate;

    min-height: 390px !important;

    overflow: hidden !important;

    border:
        1px solid
        rgba(156, 113, 255, 0.27) !important;

    border-radius:
        var(--psv1-radius-lg) !important;

    box-shadow:
        var(--psv1-shadow) !important;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(127, 79, 255, 0.32),
            transparent 19rem
        ),
        linear-gradient(
            135deg,
            #0c1747 0%,
            #101243 48%,
            #32106d 100%
        ) !important;
}

body .pk4-hero::before {
    content: "";

    position: absolute;
    z-index: -1;

    right: -20px;
    bottom: 50px;

    width:
        min(45%, 330px);
    aspect-ratio: 520 / 620;

    background:
        url(
            "/static/img/poolbaas-trophy-stage-v1.svg"
        )
        center / contain
        no-repeat;

    filter:
        drop-shadow(
            0 28px 28px
            rgba(0, 0, 0, 0.42)
        );

    transform:
        rotate(2deg);
}

body .pk4-hero::after {
    content: "";

    position: absolute;
    z-index: -2;

    right: -110px;
    bottom: -130px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 208, 57, 0.24),
            transparent 66%
        );
}

body .pk4-hero__content {
    position: relative;
    z-index: 2;

    max-width: 68%;
}

body .pk4-hero h1 {
    max-width: 680px;

    color:
        #ffffff !important;

    text-shadow:
        0 4px 28px
        rgba(0, 0, 0, 0.25);
}

body .pk4-hero :where(
    .eyebrow,
    [class*="eyebrow"]
) {
    color:
        var(--psv1-yellow) !important;
}

body .pk4-hero__details {
    max-width: 390px;
}

body .pk4-hero__details :where(
    p,
    span,
    small
) {
    color:
        #d7d5e8 !important;
}

body .pk4-hero :where(
    [class*="countdown"],
    [class*="remaining"],
    .is-live,
    .is-complete
) {
    border:
        1px solid
        rgba(56, 213, 140, 0.35) !important;

    background:
        var(--psv1-green-soft) !important;

    color:
        var(--psv1-green) !important;
}

body .pk4-hero :where(
    [class*="week"],
    [class*="season"]
) {
    border:
        1px solid
        rgba(255, 255, 255, 0.18) !important;

    background:
        rgba(255, 255, 255, 0.075) !important;

    color:
        #f2f0ff !important;
}

body .pk4-hero__action {
    color:
        #171022 !important;

    border: 0 !important;

    box-shadow:
        0 12px 32px
        rgba(217, 154, 0, 0.3) !important;

    background:
        linear-gradient(
            135deg,
            #ffe66e,
            var(--psv1-yellow)
        ) !important;
}

body .pk4-hero__action:hover {
    transform:
        translateY(-2px) !important;

    box-shadow:
        0 17px 38px
        rgba(217, 154, 0, 0.38) !important;
}

body .pk4-hero__action:active {
    transform:
        translateY(0)
        scale(0.99) !important;
}


/* ========================================================
   KOMENDE WEDSTRIJDEN
   ======================================================== */

body .pk4-page :has(
    > .pk4-upcoming-v3__card
) {
    border: 0 !important;
    background: transparent !important;
}

body .pk4-upcoming-v3__card {
    border:
        1px solid
        var(--psv1-line) !important;

    border-radius:
        var(--psv1-radius-md) !important;

    box-shadow: none !important;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.035)
        ) !important;
}

body .pk4-upcoming-v3__card:first-child {
    border-color:
        rgba(255, 220, 74, 0.45) !important;
}

body .pk4-upcoming-v3__card:hover {
    border-color:
        rgba(157, 118, 255, 0.5) !important;

    background:
        rgba(255, 255, 255, 0.09) !important;

    transform:
        translateY(-3px) !important;
}

body .pk4-upcoming-v3__card :where(
    [class*="date"],
    [class*="time"]
) {
    color:
        var(--psv1-muted) !important;
}

body .pk4-upcoming-v3__card :where(
    [class*="logo"],
    [class*="badge"]
) {
    border:
        1px solid
        var(--psv1-line) !important;

    background:
        rgba(255, 255, 255, 0.96) !important;
}

body .pk4-upcoming-v3__card :where(
    [class*="score"],
    [class*="prediction"]
) {
    color:
        #ffffff !important;

    background:
        rgba(119, 73, 219, 0.24) !important;
}

body .pk4-upcoming-v3__card :where(
    [class*="saved"],
    [class*="status"]
) {
    color:
        var(--psv1-green) !important;

    background:
        var(--psv1-green-soft) !important;
}


/* ========================================================
   KANTOOR PERSOONLIJKE STAND
   ======================================================== */

body .pk9-stand-card {
    position: relative;

    overflow: hidden;

    padding:
        24px !important;

    border:
        1px solid
        rgba(151, 112, 255, 0.28) !important;

    border-radius:
        var(--psv1-radius-lg) !important;

    box-shadow:
        var(--psv1-glow) !important;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(124, 76, 255, 0.3),
            transparent 17rem
        ),
        linear-gradient(
            135deg,
            #161449,
            #27145b
        ) !important;
}

body .pk9-stand-card::before {
    content: "♕";

    display: grid;
    place-items: center;

    position: absolute;

    left: 20px;
    top: 50%;

    width: 62px;
    height: 62px;

    border:
        1px solid
        rgba(166, 127, 255, 0.36);

    border-radius: 50%;

    background:
        rgba(124, 76, 255, 0.16);

    color:
        var(--psv1-purple-soft);

    font-size: 1.8rem;

    transform:
        translateY(-50%);
}

body .pk9-stand-card > * {
    position: relative;
    z-index: 1;
}

body .pk9-stand-card :where(
    [class*="rank"],
    [class*="copy"],
    [class*="title"]
) {
    padding-left: 76px;
}

body .pk9-stand-card :where(
    [class*="points"],
    [class*="score"]
) {
    color:
        #ffffff !important;
}

body .pk4-page :where(
    [class*="stand-status"],
    [class*="practice"]
) {
    border:
        1px solid
        var(--psv1-line) !important;

    border-radius:
        var(--psv1-radius-md) !important;

    background:
        linear-gradient(
            90deg,
            rgba(119, 73, 219, 0.23),
            rgba(119, 73, 219, 0.08)
        ) !important;
}


/* ========================================================
   KANTOOR LAATSTE UITSLAGEN
   ======================================================== */

body .pk4-result-card {
    padding:
        17px 18px !important;

    border:
        1px solid
        var(--psv1-line) !important;

    border-radius:
        var(--psv1-radius-md) !important;

    background:
        rgba(255, 255, 255, 0.045) !important;
}

body .pk4-result-card:hover {
    border-color:
        rgba(157, 118, 255, 0.42) !important;

    background:
        rgba(255, 255, 255, 0.07) !important;
}

body .pk4-result-card__date,
body .pk4-result-card__footer {
    color:
        var(--psv1-muted) !important;
}

body .pk4-result-score {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #35206f,
            #24194f
        ) !important;
}

body .pk4-result-card__footer
> strong.is-exact {
    color:
        #261a00 !important;

    background:
        linear-gradient(
            135deg,
            #ffe989,
            var(--psv1-yellow)
        ) !important;
}


/* ========================================================
   STAND HEADER
   ======================================================== */

body .psf5-header {
    border: 0 !important;
    background: transparent !important;
}

body .psf5-header h1 {
    color:
        #ffffff !important;
}

body .psf5-header__status {
    position: relative;

    min-height: 150px;

    padding:
        25px 150px 25px 24px !important;

    border:
        1px solid
        var(--psv1-line) !important;

    border-radius:
        var(--psv1-radius-lg) !important;

    box-shadow:
        var(--psv1-glow) !important;

    background:
        radial-gradient(
            circle at 88% 50%,
            rgba(122, 78, 255, 0.25),
            transparent 12rem
        ),
        linear-gradient(
            135deg,
            #151440,
            #251355
        ) !important;
}

body .psf5-header__status :where(
    [class*="badge"],
    [class*="label"]
) {
    color:
        var(--psv1-yellow) !important;
}

.psv1-progress-ring {
    --psv1-progress: 0;

    display: grid;
    place-content: center;

    position: absolute;

    top: 50%;
    right: 24px;

    width: 96px;
    height: 96px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #151440 58%,
            transparent 59%
        ),
        conic-gradient(
            var(--psv1-yellow)
            calc(
                var(--psv1-progress)
                * 1%
            ),
            rgba(151, 123, 214, 0.35) 0
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.07);

    text-align: center;
}

.psv1-progress-ring strong {
    color:
        #ffffff !important;

    font-size: 1.35rem;
    line-height: 1;
}

.psv1-progress-ring span {
    margin-top: 5px;

    color:
        var(--psv1-muted);

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* ========================================================
   STAND TABS
   ======================================================== */

body .psf5-page
nav:has(
    a[href*="view=week"]
):has(
    a[href*="view=overall"]
) {
    padding: 6px !important;

    border:
        1px solid
        var(--psv1-line) !important;

    border-radius:
        var(--psv1-radius-md) !important;

    background:
        rgba(255, 255, 255, 0.055) !important;
}

body .psf5-page
nav:has(
    a[href*="view=week"]
):has(
    a[href*="view=overall"]
) > a {
    min-height: 68px !important;

    border-radius:
        12px !important;

    color:
        var(--psv1-muted) !important;
}

body .psf5-page
nav:has(
    a[href*="view=week"]
):has(
    a[href*="view=overall"]
) > a.is-active {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #4930a0,
            #29165f
        ) !important;

    box-shadow:
        0 10px 28px
        rgba(14, 7, 48, 0.4) !important;
}

body .psf5-page
nav:has(
    a[href*="view=week"]
):has(
    a[href*="view=overall"]
) > a::after {
    display: none !important;
}


/* ========================================================
   STAND PERSOONLIJKE INFO
   ======================================================== */

body .psf5-personal-card,
body .psf5-winner-card {
    padding:
        22px 24px !important;

    border:
        1px solid
        var(--psv1-line) !important;

    border-radius:
        var(--psv1-radius-md) !important;

    background:
        rgba(255, 255, 255, 0.055) !important;
}

body .psf5-personal-card.is-me {
    border-color:
        rgba(255, 220, 74, 0.35) !important;

    background:
        linear-gradient(
            90deg,
            rgba(255, 220, 74, 0.09),
            rgba(255, 255, 255, 0.04)
        ) !important;
}

body .psf5-page :where(
    .psf5-personal-card__points,
    .psf5-personal-card__gap
) {
    color:
        #ffffff !important;
}


/* ========================================================
   STAND RANGLIJST
   ======================================================== */

body .psf5-page section:has(> ol) {
    padding:
        22px 22px 8px !important;

    overflow: hidden !important;

    border:
        1px solid
        var(--psv1-line) !important;

    border-radius:
        var(--psv1-radius-lg) !important;

    box-shadow:
        var(--psv1-shadow) !important;

    background:
        linear-gradient(
            180deg,
            rgba(30, 24, 82, 0.97),
            rgba(12, 14, 54, 0.98)
        ) !important;
}

body .psf5-page section:has(> ol)
> :where(header, div):first-child {
    padding-bottom:
        15px !important;

    border-bottom:
        1px solid
        var(--psv1-line) !important;
}

body .psf5-page section:has(> ol)
> ol > li {
    min-height: 76px !important;

    padding:
        14px 5px !important;

    border-bottom:
        1px solid
        var(--psv1-line) !important;

    background:
        transparent !important;
}

body .psf5-page section:has(> ol)
> ol > li:hover {
    background:
        rgba(255, 255, 255, 0.045) !important;
}

body .psf5-page section:has(> ol)
> ol > li.is-me {
    padding-right: 12px !important;
    padding-left: 14px !important;

    border:
        1px solid
        rgba(255, 220, 74, 0.42) !important;

    border-radius:
        var(--psv1-radius-sm) !important;

    box-shadow:
        inset 4px 0 0
        var(--psv1-yellow) !important;

    background:
        linear-gradient(
            90deg,
            rgba(109, 65, 213, 0.34),
            rgba(255, 220, 74, 0.055)
        ) !important;
}

body .psf5-page section:has(> ol)
> ol > li :where(
    [class*="avatar"],
    [class*="initial"]
) {
    color:
        #ffffff !important;

    border:
        1px solid
        rgba(162, 125, 255, 0.34) !important;

    background:
        linear-gradient(
            135deg,
            #7750e6,
            #38217e
        ) !important;
}

body .psf5-page section:has(> ol)
> ol > li :where(
    [class*="points"],
    [class*="score"]
) {
    color:
        #ffffff !important;

    background: transparent !important;
}

body .psf5-page section:has(> ol)
> ol > li :where(
    [class*="status"],
    [class*="badge"]
) {
    color:
        var(--psv1-yellow) !important;

    background:
        var(--psv1-yellow-soft) !important;
}


/* ========================================================
   DOCK AANSLUITING
   ======================================================== */

body.pb-sports-stage-v1
:where(
    .mobile-dock,
    .poolbaas-mobile-dock,
    [class*="mobile-dock"]
) {
    border:
        1px solid
        rgba(151, 114, 255, 0.28) !important;

    box-shadow:
        0 22px 55px
        rgba(0, 0, 0, 0.55) !important;

    background:
        linear-gradient(
            135deg,
            rgba(37, 20, 94, 0.98),
            rgba(5, 10, 42, 0.99)
        ) !important;
}


/* ========================================================
   INTERACTIE
   ======================================================== */

body.pb-sports-stage-v1 :where(
    a,
    button,
    [role="button"]
):focus-visible {
    outline: none !important;

    box-shadow:
        0 0 0 3px
        rgba(255, 220, 74, 0.24) !important;
}

body.pb-sports-stage-v1 :where(
    a,
    button,
    [role="button"]
):active {
    transform:
        scale(0.985);
}


/* ========================================================
   MOBIEL
   ======================================================== */

@media (max-width: 720px) {
    body:has(.pk4-page),
    body:has(.psf5-page),
    body.pb-sports-stage-v1 {
        padding-bottom:
            calc(
                130px
                + env(safe-area-inset-bottom)
            ) !important;
    }

    body .pk4-page,
    body .psf5-page {
        gap: 24px !important;
    }

    body .pk4-hero {
        min-height: 410px !important;

        padding:
            28px 22px
            24px !important;
    }

    body .pk4-hero::before {
        right: -18px;
        bottom: 74px;

        width: 48%;

        opacity: 0.92;
    }

    body .pk4-hero__content {
        max-width: 74%;
    }

    body .pk4-hero h1 {
        font-size:
            clamp(
                2.45rem,
                11.2vw,
                3.8rem
            ) !important;
    }

    body .pk4-hero__action {
        position: relative;
        z-index: 3;

        width: 100% !important;

        margin-top: 20px !important;
    }

    body .pk4-upcoming-v3__card {
        flex:
            0 0 min(78vw, 310px) !important;

        width:
            min(78vw, 310px) !important;

        min-width:
            min(78vw, 310px) !important;

        padding:
            16px 14px !important;
    }

    body .pk9-stand-card {
        padding:
            22px 18px !important;
    }

    body .pk9-stand-card::before {
        left: 15px;

        width: 52px;
        height: 52px;
    }

    body .pk9-stand-card :where(
        [class*="rank"],
        [class*="copy"],
        [class*="title"]
    ) {
        padding-left: 62px;
    }

    body .pk4-result-card {
        padding:
            15px 13px !important;
    }

    body .psf5-header__status {
        min-height: 140px;

        padding:
            22px 125px 22px 18px !important;
    }

    .psv1-progress-ring {
        right: 17px;

        width: 84px;
        height: 84px;
    }

    body .psf5-personal-card,
    body .psf5-winner-card {
        padding:
            19px 17px !important;
    }

    body .psf5-page section:has(> ol) {
        padding:
            20px 14px 6px !important;

        border-radius:
            var(--psv1-radius-md) !important;
    }

    body .psf5-page section:has(> ol)
    > ol > li {
        min-height: 70px !important;
        padding:
            13px 2px !important;
    }

    body .psf5-page section:has(> ol)
    > ol > li.is-me {
        padding-right:
            8px !important;
        padding-left:
            10px !important;
    }
}

@media (max-width: 390px) {
    body .pk4-hero::before {
        right: -34px;
        bottom: 90px;

        width: 50%;

        opacity: 0.74;
    }

    body .pk4-hero__content {
        max-width: 82%;
    }
}


/* ========================================================
   REDUCED MOTION
   ======================================================== */

@media (prefers-reduced-motion: reduce) {
    body.pb-sports-stage-v1 *,
    body.pb-sports-stage-v1 *::before,
    body.pb-sports-stage-v1 *::after {
        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
}