body {
    background:
        radial-gradient(
            circle at center,
            #171717 0%,
            #050505 45%,
            #000 75%
        );
}

/* =========================================================
   PAGE
   ========================================================= */

.rally-page {
    min-height: 100vh;
    box-sizing: border-box;

    padding: 35px 30px 60px;

    background:
        radial-gradient(
            circle at center,
            #171717 0%,
            #050505 45%,
            #000 75%
        );

    color: #fff;

    font-family: Arial, Helvetica, sans-serif;
}


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

.rally-header {
    max-width: 1500px;

    margin: 0 auto 25px;

    text-align: center;
}


.rally-header h1 {
    margin: 0;

    /*font-family: Georgia, "Times New Roman", serif;*/

    font-size: clamp(38px, 5vw, 78px);

    font-weight: normal;

    line-height: 1.05;

    text-shadow:
        0 3px 5px rgba(0,0,0,.8);
}


.rally-header h1 span {
    color: #e8b950;

    text-shadow:
        0 1px 0 #fff0b0,
        0 3px 2px #76500c,
        0 0 12px rgba(230,177,63,.4);
}


.rally-header h2 {
    margin: 10px 0 0;

    /*font-family: Georgia, "Times New Roman", serif;*/

    font-size: clamp(18px, 2vw, 30px);

    font-weight: normal;
}


/* =========================================================
   GOLD HEADER LINE
   ========================================================= */

.rally-header-rule {
    position: relative;

    width: min(1000px, 80%);

    height: 20px;

    margin: 5px auto 0;
}


.rally-header-rule::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d99a25 15%,
            #ffd36c 50%,
            #d99a25 85%,
            transparent
        );
}


.rally-header-rule span {
    position: relative;

    z-index: 2;

    display: inline-block;

    padding: 0 15px;

    background: #050505;

    color: #f5bd43;

    font-size: 26px;

    line-height: 20px;
}


/* =========================================================
   MAIN MENU

   Four rows now instead of three.
   ========================================================= */

.rally-menu {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(250px, 1fr)
        minmax(400px, 620px)
        minmax(250px, 1fr);

    grid-template-rows: repeat(4, 1fr);

    column-gap: 45px;

    row-gap: 25px;

    align-items: center;

    width: 100%;

    max-width: 1550px;

    margin: 20px auto 0;
}


/* =========================================================
   CENTER MEDALLION

   Now spans all FOUR rows.
   ========================================================= */

.rally-medallion {
    grid-column: 2;

    grid-row: 1 / 5;

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;
}


.rally-medallion img {
    display: block;

    width: 100%;

    max-width: 520px;

    height: auto;

    filter:
        drop-shadow(0 8px 12px rgba(0,0,0,.8))
        drop-shadow(0 0 10px rgba(221,165,53,.25));
}


/* =========================================================
   BUTTONS
   ========================================================= */

.rally-button {
    position: relative;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    width: min(100%, 390px);

    min-height: 105px;

    box-sizing: border-box;

    padding: 15px 25px;

    background:
        linear-gradient(
            180deg,
            #687481 0%,
            #596470 45%,
            #4d5864 100%
        );

    border: 3px solid #adb4bb;

    border-radius: 20px;

    box-shadow:
        inset 0 0 0 2px #343c44,
        inset 0 2px 4px rgba(255,255,255,.25),
        0 5px 10px rgba(0,0,0,.65);

    color: #fff;

    font-size: clamp(20px, 2vw, 30px);

    line-height: 1.15;

    text-align: center;

    text-decoration: none;

    text-shadow:
        0 2px 2px rgba(0,0,0,.7);

    transition:
        transform .15s ease,
        filter .15s ease,
        box-shadow .15s ease;
}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.rally-button:hover {
    color: #fff;

    text-decoration: none;

    transform: scale(1.04);

    filter: brightness(1.13);

    box-shadow:
        inset 0 0 0 2px #343c44,
        inset 0 2px 4px rgba(255,255,255,.3),
        0 7px 18px rgba(0,0,0,.75),
        0 0 15px rgba(232,185,80,.3);
}


/* Keyboard navigation */

.rally-button:focus-visible {
    outline: 3px solid #f0bf55;

    outline-offset: 5px;
}


/* =========================================================
   LEFT BUTTON POSITIONS
   ========================================================= */

.left-1 {
    grid-column: 1;
    grid-row: 1;

    justify-self: end;
}


.left-2 {
    grid-column: 1;
    grid-row: 2;

    justify-self: end;
}


.left-3 {
    grid-column: 1;
    grid-row: 3;

    justify-self: end;
}


.left-4 {
    grid-column: 1;
    grid-row: 4;

    justify-self: end;
}


/* =========================================================
   RIGHT BUTTON POSITIONS
   ========================================================= */

.right-1 {
    grid-column: 3;
    grid-row: 1;

    justify-self: start;
}


.right-2 {
    grid-column: 3;
    grid-row: 2;

    justify-self: start;
}


.right-3 {
    grid-column: 3;
    grid-row: 3;

    justify-self: start;
}


.right-4 {
    grid-column: 3;
    grid-row: 4;

    justify-self: start;
}


/* =========================================================
   CONNECTOR LINES
   ========================================================= */

.rally-button::after {
    content: "";

    position: absolute;

    width: 95px;

    height: 3px;

    top: 50%;

    background:
        linear-gradient(
            90deg,
            #8f969d,
            #e1e3e5
        );

    z-index: -1;
}


/* LEFT SIDE CONNECTORS */

.left-1::after,
.left-2::after,
.left-3::after,
.left-4::after {
    left: 100%;

    transform-origin: left center;
}


/* RIGHT SIDE CONNECTORS */

.right-1::after,
.right-2::after,
.right-3::after,
.right-4::after {
    right: 100%;

    transform-origin: right center;
}


/* =========================================================
   CONNECTOR ANGLES

   Outer buttons angle more heavily toward the medallion.
   Inner buttons use a smaller angle.
   ========================================================= */

/* LEFT */

.left-1::after {
    transform: rotate(34deg);
}

.left-2::after {
    transform: rotate(13deg);
}

.left-3::after {
    transform: rotate(-13deg);
}

.left-4::after {
    transform: rotate(-34deg);
}


/* RIGHT */

.right-1::after {
    transform: rotate(-34deg);
}

.right-2::after {
    transform: rotate(-13deg);
}

.right-3::after {
    transform: rotate(13deg);
}

.right-4::after {
    transform: rotate(34deg);
}


/* =========================================================
   TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1150px) {

    .rally-menu {
        grid-template-columns:
            minmax(200px, 1fr)
            minmax(350px, 480px)
            minmax(200px, 1fr);

        column-gap: 20px;

        row-gap: 20px;
    }


    .rally-button {
        min-height: 90px;

        padding: 12px 15px;
    }


    .rally-button::after {
        width: 50px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .rally-page {
        padding: 25px 18px 50px;
    }


    .rally-header {
        margin-bottom: 30px;
    }


    .rally-menu {
        display: flex;

        flex-direction: column;

        gap: 18px;

        max-width: 600px;
    }


    /* Center artwork first */

    .rally-medallion {
        order: 0;

        width: min(100%, 500px);

        margin-bottom: 15px;
    }


    /* Alternate left/right items on mobile */

    .left-1 {
        order: 1;
    }

    .right-1 {
        order: 2;
    }

    .left-2 {
        order: 3;
    }

    .right-2 {
        order: 4;
    }

    .left-3 {
        order: 5;
    }

    .right-3 {
        order: 6;
    }

    .left-4 {
        order: 7;
    }

    .right-4 {
        order: 8;
    }


    .rally-button {
        width: min(100%, 450px);

        min-height: 85px;

        font-size: 22px;
    }


    /* Connector lines disappear when stacked */

    .rally-button::after {
        display: none;
    }
}