.qp-has-bets [data-vertical-spacing] {
    --theme-content-vertical-spacing: 0px;
}

.qp-has-bets [data-vertical-spacing*="top"] {
    padding-top: 0;
}

.qp-has-bets [data-vertical-spacing*="bottom"] {
    padding-bottom: 0;
}

.qp-has-bets main.site-main > [class*="ct-container"] {
    padding-top: 0;
    padding-bottom: 0;
}

.qp-has-bets main.site-main section {
    padding: 25px 0;
}

.qp-has-bets .entry-content > p:empty {
    display: none;
}

.qp-has-bets .entry-content > .bets {
    margin-top: 0;
    margin-bottom: 0;
}

html:has(body.qp-has-bets),
body.qp-has-bets {
    margin: 0;
    padding: 0;
    background: #100319;
    color: #ffffff;
    overflow-x: hidden;
}

.qp-has-bets .site-main,
.qp-has-bets .ct-container-full,
.qp-has-bets article,
.qp-has-bets .entry-content {
    margin: 0;
    padding: 0;
    max-width: none;
    width: 100%;
}

.bets {
    --bets-yellow: #fdee20;
    --bets-gold: #fdb91c;
    --bets-purple: #23072f;
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    font-family: Poppins, Arial, sans-serif;
    color: #ffffff;
    background: #100319;
}

.bets *,
.bets *::before,
.bets *::after {
    box-sizing: border-box;
}

.bets__art,
.bets__art img,
.bets__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.bets__art {
    z-index: -2;
    margin: 0;
    pointer-events: none;
}

.bets__art img {
    display: block;
    object-fit: cover;
    object-position: center;
}

.bets__shade {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(20, 3, 36, 0.42), rgba(35, 7, 47, 0.72) 35%, rgba(35, 7, 47, 0.76) 65%, rgba(20, 3, 36, 0.38)),
        linear-gradient(0deg, rgba(12, 2, 23, 0.8), transparent 45%);
}

.bets__header {
    text-align: center;
    padding: 18px 16px 4px;
    filter: drop-shadow(0 4px 8px #000000);
}

.bets__brand,
.bets__reward-logo {
    font-size: clamp(24px, 4vw, 42px);
    font-weight: 900;
    font-style: italic;
    letter-spacing: -1px;
}

.bets__brand span,
.bets__reward-logo span {
    display: inline-block;
    padding: 0 0.23em;
    border-radius: 0.2em;
    background: var(--bets-yellow);
    color: var(--bets-purple);
    transform: skew(-8deg);
}

.bets__brand img.bets__brand-img,
.bets__reward-logo img.bets__reward-img {
    display: block;
    margin: 0 auto;
    height: 70px;
    width: auto;
    max-width: min(220px, 70vw);
    object-fit: contain;
    filter: drop-shadow(0 4px 8px #000000);
}

.bets__reward-logo img.bets__reward-img {
    height: 56px;
    max-width: min(240px, 80%);
}

.bets__header p {
    margin: 4px 0 0;
    color: var(--bets-yellow);
    font-size: clamp(10px, 1.2vw, 14px);
    letter-spacing: 0.24em;
}

.bets__game {
    display: flex;
    flex: 1;
    width: 100%;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 16px 54px;
}

.bets__tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2px 0 14px;
}

.bets__tags span {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(22, 4, 39, 0.72);
    font-size: 10px;
    letter-spacing: 0.08em;
}

.bets__stage {
    position: relative;
    width: min(58vh, 520px, 88vw);
    aspect-ratio: 1;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.55));
}

.bets__pointer {
    position: absolute;
    z-index: 4;
    top: -4px;
    left: 50%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 23px solid transparent;
    border-right: 23px solid transparent;
    border-top: 48px solid var(--bets-yellow);
    border-bottom: 0;
    filter: drop-shadow(0 3px 2px #5d2600);
}

.bets__wheel {
    position: absolute;
    inset: 12px;
    overflow: hidden;
    border: 9px solid var(--bets-gold);
    border-radius: 50%;
    background: conic-gradient(
        from -18deg,
        #5b167e 0deg 36deg,
        #f4e7fb 36deg 72deg,
        #351048 72deg 108deg,
        #f4e7fb 108deg 144deg,
        #5b167e 144deg 180deg,
        #f4e7fb 180deg 216deg,
        #351048 216deg 252deg,
        #f4e7fb 252deg 288deg,
        #5b167e 288deg 324deg,
        #f4e7fb 324deg 360deg
    );
    box-shadow:
        inset 0 0 0 5px #8d4e07,
        inset 0 0 25px rgba(0, 0, 0, 0.5),
        0 0 0 5px #ffe276;
    will-change: transform;
    transition: transform 5.6s cubic-bezier(0.12, 0.68, 0.12, 1);
}

.bets__wheel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from -18deg,
        transparent 0deg 35.3deg,
        rgba(253, 185, 28, 0.85) 35.3deg 36deg
    );
    pointer-events: none;
}

.bets__wheel > span {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 0;
    transform-origin: left center;
    transform: rotate(calc(var(--i) * 36deg - 90deg));
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.bets__wheel > span b {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: start;
    gap: 0;
    width: max-content;
    margin-right: 21%;
    transform: rotate(0deg);
    transform-origin: center;
    color: #ffffff;
    font-size: clamp(8px, 1.55vw, 13px);
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    text-shadow: 0 1px 3px #000000;
}

.bets__wheel > span b em {
    display: block;
    font-style: normal;
    font-weight: inherit;
    white-space: nowrap;
    letter-spacing: 0;
}

.bets__wheel > span:nth-child(even) b {
    color: #2a0b38;
    text-shadow: none;
}

.bets__hub {
    position: absolute;
    z-index: 3;
    inset: 37%;
    display: grid;
    place-items: center;
    border: 6px solid var(--bets-gold);
    border-radius: 50%;
    background: radial-gradient(circle, #704192, #21052d 70%);
    box-shadow: 0 4px 12px #000000;
}

.bets__hub span {
    font-size: clamp(24px, 5vw, 33px);
    font-weight: 900;
    font-style: italic;
    color: var(--bets-yellow);
}

.bets__status {
    margin: 8px 0 7px;
    font-size: 11px;
    letter-spacing: 0.13em;
    text-shadow: 0 2px 4px #000000;
}

.bets__start,
.bets__claim {
    min-width: 210px;
    padding: 13px 25px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#fff85c, var(--bets-yellow) 46%, var(--bets-gold));
    color: var(--bets-purple);
    box-shadow: 0 5px 0 #9a5300, 0 0 18px rgba(253, 238, 32, 0.5);
    font-family: Poppins, Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    transition: transform 0.15s;
}

.bets__start:hover,
.bets__claim:hover {
    transform: translateY(-2px);
    color: var(--bets-purple);
}

.bets__start:disabled,
.bets__claim.is-loading {
    cursor: not-allowed;
    filter: grayscale(0.55);
}

.bets__footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 9px 12px;
    text-align: center;
    background: rgba(13, 2, 24, 0.8);
    font-size: 10px;
}

.bets__modal {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(8, 0, 15, 0.78);
    backdrop-filter: blur(7px);
}

.bets__modal[hidden] {
    display: none;
}

.bets__card {
    width: min(410px, 92vw);
    padding: 30px 22px 25px;
    border: 2px solid var(--bets-gold);
    border-radius: 24px;
    text-align: center;
    background: radial-gradient(circle at top, #64208c, #22062f 65%);
    box-shadow: 0 0 55px rgba(253, 185, 28, 0.4);
}

.bets__card small {
    display: block;
    margin-top: 24px;
    color: var(--bets-gold);
    letter-spacing: 0.18em;
}

.bets__card h2 {
    margin: 8px 0 5px;
    color: var(--bets-yellow);
    font-size: clamp(31px, 8vw, 48px);
    line-height: 1;
    font-weight: 900;
    text-shadow: 0 4px 0 #842f00;
}

.bets__card p {
    margin: 10px 0 22px;
    color: #e8dff0;
}

.bets.is-spinning .bets__pointer {
    animation: bets-pointer-tick 0.12s linear infinite;
}

@keyframes bets-pointer-tick {
    50% {
        transform: translateX(-50%) rotate(-7deg);
    }
}

@media (max-width: 700px) {
    .bets__shade {
        background: rgba(35, 7, 47, 0.68);
    }

    .bets__header {
        padding-top: max(12px, env(safe-area-inset-top));
    }

    .bets__game {
        padding-top: 5px;
    }

    .bets__stage {
        width: min(54vh, 88vw);
    }

    .bets__tags span {
        padding: 4px 8px;
        font-size: 8px;
    }

    .bets__wheel > span b {
        font-size: clamp(8px, 2.6vw, 12px);
        gap: 0.1em;
    }

    .bets__footer {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
}

@media (max-height: 700px) {
    .bets__header {
        padding-top: 7px;
    }

    .bets__brand {
        font-size: 24px;
    }

    .bets__brand img.bets__brand-img {
        height: 44px;
    }

    .bets__header p,
    .bets__tags {
        display: none;
    }

    .bets__stage {
        width: min(55vh, 78vw);
    }

    .bets__game {
        padding-bottom: 38px;
    }

    .bets__status {
        margin: 4px 0;
    }

    .bets__start {
        padding: 9px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bets__wheel {
        transition: none;
    }

    .bets.is-spinning .bets__pointer {
        animation: none;
    }
}