/* Remove the browser's default spacing */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Main colour settings */
:root {
    --dark-red: #3b0507;
    --main-red: #a50910;
    --bright-red: #e11d27;
    --orange: #f97316;
    --gold: #fbbf24;
    --light-gold: #fde68a;
    --white: #ffffff;
}

/* Whole webpage */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-x: hidden;

    font-family: Arial, Helvetica, sans-serif;
    color: var(--white);

    background:
        radial-gradient(
            circle at top,
            rgba(255, 153, 0, 0.35),
            transparent 35%
        ),
        linear-gradient(
            160deg,
            #160102,
            var(--dark-red),
            #76070c
        );
}

/* Main game card */
.game-container {
    width: 100%;
    max-width: 430px;
    min-height: 720px;
    position: relative;
    overflow: hidden;

    border: 2px solid rgba(251, 191, 36, 0.65);
    border-radius: 28px;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(255, 184, 0, 0.2),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #8f090f,
            #3b0507
        );

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        inset 0 0 35px rgba(255, 166, 0, 0.13);
}

/* Header */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

    background: rgba(0, 0, 0, 0.2);
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-logo {
    padding: 5px 9px;

    border-radius: 8px;

    font-size: 22px;
    font-weight: 900;
    color: #4a0707;

    background: linear-gradient(
        135deg,
        #fff3a3,
        var(--gold),
        #f97316
    );
}

.brand-text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.chance-box {
    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;

    font-size: 13px;

    background: rgba(0, 0, 0, 0.25);
}

.chance-box strong {
    color: var(--gold);
}

/* Introduction */
.game-intro {
    padding: 25px 22px 8px;
    text-align: center;
}

.small-title {
    margin-bottom: 5px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--light-gold);
}

.game-intro h1 {
    margin-bottom: 8px;

    font-size: 36px;
    line-height: 1;

    color: var(--white);

    text-shadow:
        0 3px 0 #7f0710,
        0 0 18px rgba(251, 191, 36, 0.5);
}

.instructions {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

/* Balloon area */
.game-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 10px;

    padding: 30px 20px 25px;
}

/* Every balloon */
.balloon {
    width: 90px;
    height: 108px;
    position: relative;
    justify-self: center;

    border: 0;
    border-radius: 50% 50% 46% 46%;
    cursor: pointer;

    color: var(--white);

    box-shadow:
        inset -10px -15px 18px rgba(0, 0, 0, 0.25),
        inset 8px 8px 15px rgba(255, 255, 255, 0.22),
        0 10px 18px rgba(0, 0, 0, 0.3);

    animation: balloonFloat 2.8s ease-in-out infinite;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.balloon:nth-child(2) {
    animation-delay: 0.25s;
}

.balloon:nth-child(3) {
    animation-delay: 0.5s;
}

.balloon:nth-child(4) {
    animation-delay: 0.75s;
}

.balloon:nth-child(5) {
    animation-delay: 1s;
}

.balloon:nth-child(6) {
    animation-delay: 1.25s;
}

.balloon:hover {
    transform: translateY(-8px) scale(1.07);
    filter: brightness(1.15);
}

.balloon:active {
    transform: scale(0.93);
}

/* Balloon knot */
.balloon::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;

    width: 0;
    height: 0;

    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid currentColor;

    transform: translateX(-50%);
}

/* Balloon reflection */
.balloon-shine {
    width: 17px;
    height: 30px;
    position: absolute;
    top: 16px;
    left: 19px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.4);

    transform: rotate(28deg);
}

/* Balloon number */
.balloon-number {
    position: absolute;
    top: 50%;
    left: 50%;

    font-size: 25px;
    font-weight: 900;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

    transform: translate(-50%, -50%);
}

/* Balloon string */
.balloon-string {
    width: 1px;
    height: 32px;
    position: absolute;
    left: 50%;
    bottom: -38px;

    background: rgba(255, 255, 255, 0.6);

    transform: translateX(-50%);
}

/* Balloon colours */
.balloon-red {
    color: #b70916;
    background: linear-gradient(135deg, #ff6670, #d00a18);
}

.balloon-gold {
    color: #e09b00;
    background: linear-gradient(135deg, #ffe779, #f59e0b);
}

.balloon-purple {
    color: #7015a3;
    background: linear-gradient(135deg, #d383ff, #8b1ac2);
}

.balloon-blue {
    color: #075ea3;
    background: linear-gradient(135deg, #78cfff, #0878c9);
}

.balloon-green {
    color: #137b38;
    background: linear-gradient(135deg, #75e798, #149447);
}

.balloon-pink {
    color: #b51472;
    background: linear-gradient(135deg, #ff8fd2, #db1a89);
}

/* Prize list */
.prize-section {
    margin: 10px 18px 20px;
    padding: 18px;

    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 18px;

    background: rgba(0, 0, 0, 0.2);
}

.prize-section h2 {
    margin-bottom: 13px;

    text-align: center;
    font-size: 16px;
    color: var(--light-gold);
}

.prize-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.prize-list span {
    padding: 7px 10px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;

    font-size: 12px;

    background: rgba(255, 255, 255, 0.08);
}

/* Rules at the bottom */
.game-footer {
    padding: 0 20px 20px;

    text-align: center;
    font-size: 11px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.58);
}

/* Result popup */
.result-modal {
    position: fixed;
    inset: 0;
    z-index: 100;

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;

    background: rgba(0, 0, 0, 0.76);
    backdrop-filter: blur(6px);
}

.result-card {
    width: 100%;
    max-width: 350px;
    padding: 30px 25px;

    border: 2px solid var(--gold);
    border-radius: 24px;

    text-align: center;

    background:
        radial-gradient(
            circle at top,
            rgba(255, 184, 0, 0.25),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #9d0b13,
            #3c0306
        );

    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.65);

    animation: resultAppear 0.35s ease;
}

.result-label {
    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--light-gold);
}

.result-card h2 {
    font-size: 26px;
}

.reward-amount {
    margin: 20px 0 13px;

    font-size: 48px;
    font-weight: 900;
    color: var(--gold);

    text-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);
}

.result-card p {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

#closeResultButton {
    width: 100%;
    margin-top: 22px;
    padding: 13px;

    border: 0;
    border-radius: 14px;
    cursor: pointer;

    font-size: 15px;
    font-weight: 800;
    color: #4a0707;

    background: linear-gradient(
        135deg,
        #fff09b,
        var(--gold),
        var(--orange)
    );
}

/* Used to hide the result popup */
.hidden {
    display: none;
}

/* Balloon floating movement */
@keyframes balloonFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Result popup movement */
@keyframes resultAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Smaller mobile screens */
@media (max-width: 380px) {
    body {
        padding: 0;
    }

    .game-container {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .balloon {
        width: 76px;
        height: 94px;
    }

    .game-intro h1 {
        font-size: 31px;
    }
}
/* =====================================
   V66 Orange and White Theme Override
===================================== */

:root {
    --v66-orange: #ff4b0b;
    --v66-orange-dark: #e73700;
    --v66-orange-light: #fff0e9;
    --v66-gold: #d99718;
    --v66-brown: #2c170f;
    --v66-text: #262626;
    --v66-muted: #777777;
    --v66-background: #f3f3f3;
    --v66-card: #ffffff;
    --v66-border: #e8e8e8;
}

body {
    color: var(--v66-text);
    background:
        radial-gradient(
            circle at top right,
            rgba(255, 75, 11, 0.09),
            transparent 32%
        ),
        var(--v66-background);
}

.game-container {
    background: var(--v66-card);
    border-color: var(--v66-border);
    box-shadow: 0 20px 55px rgba(66, 35, 20, 0.14);
}

.game-header {
    background: #ffffff;
    border-bottom: 3px solid var(--v66-orange);
}

.brand-logo {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--v66-gold),
            var(--v66-orange)
        );
    box-shadow: 0 5px 12px rgba(255, 75, 11, 0.25);
}

.brand-text {
    color: var(--v66-brown);
}

.chance-box {
    color: var(--v66-orange-dark);
    background: var(--v66-orange-light);
    border-color: rgba(255, 75, 11, 0.28);
}

.chance-box strong {
    color: var(--v66-orange);
}

.game-intro {
    background:
        linear-gradient(
            135deg,
            var(--v66-orange),
            #ff6a00
        );
}

.game-intro .small-title,
.small-title {
    color: #ffe7ad;
}

.game-intro h1 {
    color: #ffffff;
    text-shadow: 0 3px 9px rgba(111, 31, 0, 0.25);
}

.instructions {
    color: #fff2ec;
}

.balloon-area,
.balloon-section,
.game-area {
    background: #f7f7f7;
}

.prize-section,
.possible-rewards {
    background: #ffffff;
    border-color: rgba(255, 75, 11, 0.28);
    box-shadow: 0 7px 18px rgba(49, 31, 22, 0.07);
}

.prize-section h2,
.prize-section h3,
.possible-rewards h2,
.possible-rewards h3 {
    color: var(--v66-brown);
}

.prize-item,
.reward-item,
.prize-list span {
    color: var(--v66-orange-dark);
    background: var(--v66-orange-light);
    border-color: rgba(255, 75, 11, 0.24);
}

.game-footer {
    color: #858585;
    background: #ffffff;
    border-top-color: var(--v66-border);
}

.result-modal {
    background: rgba(32, 18, 12, 0.7);
}

.result-card {
    color: var(--v66-text);
    background: #ffffff;
    border-color: var(--v66-orange);
    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.3),
        0 0 0 5px rgba(255, 75, 11, 0.1);
}

.result-label {
    color: var(--v66-orange);
}

#resultTitle {
    color: var(--v66-brown);
}

#rewardAmount {
    color: var(--v66-orange);
}

#turnoverText {
    color: var(--v66-muted);
}

#closeResultButton {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--v66-orange),
            var(--v66-orange-dark)
        );
    border: 0;
    box-shadow: 0 6px 14px rgba(255, 75, 11, 0.28);
}

#closeResultButton:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}
/* Keep the preview notice above the game rather than beside it. */
body > aside { width: 100%; flex-shrink: 0; }
body > .game-container { flex-shrink: 0; }
.game-header > a { white-space: nowrap; }
@media (max-width: 460px) {
    body { padding: 12px; justify-content: flex-start; gap: 12px; }
    .game-header { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 14px; }
    .game-header .brand { justify-self: end; min-width: 0; }
    .game-header .chance-box { grid-column: 1 / -1; justify-self: end; }
    .game-board { padding-left: 12px; padding-right: 12px; }
    .balloon { max-width: 100%; }
}