:root {
    --kp-navy: #121830;
    --kp-darknavy: #1B2247;
    --kp-button: #262C63;
    --kp-blue: #0F7BC4;
    --kp-yellow: #FFD200;
    --popupbackground: #F4F3F8;
    --asdagreencolour: #589325;
    --validationcolour: #C10F34;
}

body {
    max-height: 700px !important;
}

/* bg-luke.jpg is a portrait cut-out flattened onto solid #121830 (the client supplied it as a
   JPEG rather than a transparent PNG for filesize), so it is positioned bottom-right against a
   matching background-colour rather than stretched to cover. bg-bottom.png is the blue swoosh
   band and is listed first so it paints in front of him, as in the design. */
#gamezone {
    background-color: var(--kp-navy);
    background-image: url('/img/kp2026/bg-bottom.png'), url('/img/kp2026/bg-luke.jpg');
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom, right bottom;
    background-size: 100% auto, auto 72%;
}

/* KP roundel, sitting in the blue swoosh band at the bottom of every step */
#brands-logos {
    position: absolute;
    bottom: 0;
    max-width: 150px;
    padding-bottom: 12px;
}

/* KP x "THE NUKE" lockup on step 1 */
#lockup {
    max-width: 240px;
    margin-bottom: 10px;
}

/* Dartboard-and-pack composite on the winning screen */
#win-prize {
    max-width: 360px;
    margin-bottom: 5px;
}

/* Dartboard-with-missed-dart cut-out on the losing screen */
#lose-banner {
    max-width: 300px;
    margin-bottom: 15px;
}

/* The card is slightly translucent so Luke reads through it, as in the design.
   It is also narrowed from the layout default so he is beside it rather than behind it —
   the pick and win screens get their own widths below because they carry wider artwork. */
.popup {
    background-color: rgba(244, 243, 248, 0.94);
    border-radius: 20px;
    color: var(--kp-darknavy);
    max-width: 400px !important;
}

/* The pick screen keeps the layout's full card width (the three boards need it) and is opaque:
   the design drops Luke from this step entirely, and a translucent card here puts his face
   behind the middle dartboard. */
#step3 .popup {
    background-color: #F4F3F8 !important;
    max-width: none !important;
}

#step3-win .popup {
    max-width: 470px !important;
}

h2 {
    color: var(--kp-darknavy) !important;
    font-size: 1.6em !important;
}

.step-validation {
    color: var(--validationcolour);
}

.asda-btn {
    --tw-border-opacity: 1;
    background-color: var(--kp-button);
    border: 1px solid var(--kp-button);
    border-radius: 4px;
    color: #ffffff;
    display: inline-block;
    font-family: Gibson-SemiBold, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 24px !important;
    min-width: 240px;
    padding: 12px 16px;
    text-align: center;
    text-transform: uppercase;
    transition-duration: .5s;
    transition-property: all;
    transition-timing-function: linear;
    height: 50px;
}

    .asda-btn:hover {
        background-color: var(--kp-darknavy);
        border-color: var(--kp-darknavy);
        color: #ffffff;
        transition-duration: .5s;
        transition-property: all;
        transition-timing-function: linear;
    }

.asda-btn.shop-now {
    background-color: var(--asdagreencolour) !important;
    border-color: var(--asdagreencolour) !important;
    text-transform: none;
}

    .asda-btn.shop-now:hover {
        background-color: var(--asdagreencolour) !important;
        border-color: var(--asdagreencolour) !important;
    }

/* site.css puts 20px of padding on .present-wrapper, which on a three-across row leaves the
   board about two thirds of the column. The dartboards are square and all the same height, so
   the vertical-centring :before that the Oreo layout needed is dropped here — it was also
   taking inline space away from the image. */
.present-wrapper {
    cursor: pointer;
    padding: 8px !important;
}

    /* Sized by width alone — the boards are square, so pairing width with a max-height
       squashes them into ellipses at narrow widths. */
    .present-wrapper img {
        max-width: 100%;
        height: auto;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: inline-block !important;
        vertical-align: bottom;
    }


@media only screen and (max-width: 768px) {
    #background-video {
        display: none;
    }

    /* Luke is cropped out on narrow screens — at this width he sits behind the card and only
       muddies the text. The navy background-colour carries the brand on its own. */
    #gamezone {
        background-image: url('/img/kp2026/bg-bottom.png');
        background-position: center bottom;
        background-size: 100% auto;
    }

    #brands-logos {
        max-width: 120px;
    }

    /* The lockup is portrait (600x690), so a full-width one swamps the card on a phone */
    #lockup {
        max-width: 190px;
    }

    #lose-banner {
        max-width: 220px;
    }
}

@media only screen and (max-width: 375px) {
    #step4-win-button {
        font-size: 15px !important;
    }
}