:root {

    --navy: #08213b;
    --navy-deep: #041729;

    --blue: #1877ff;
    --electric: #00aeff;
    --cyan: #15d4ff;

    --lime: #9bea25;
    --lime-deep: #64b900;

    --orange: #ff8600;
    --orange-bright: #ffad19;

    --gold: #ffc933;

    --purple: #7357ff;

    --white: #ffffff;

    --ink: #102239;
    --muted: #667c93;

    --line: #d8e5f1;

    --page: #eef6ff;

}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {

    font-family:
        Inter,
        Arial,
        sans-serif;

    color: var(--ink);

    background:

        radial-gradient(
            circle at 10% 0%,
            rgba(0,174,255,.13),
            transparent 30%
        ),

        radial-gradient(
            circle at 95% 10%,
            rgba(255,134,0,.12),
            transparent 32%
        ),

        #edf6ff;

}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font: inherit;
}


/* ==========================================================
   SHELL
   ========================================================== */

.rotator-shell {

    min-height: 100vh;

    display: flex;
    flex-direction: column;

}


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

.rotator-topbar {

    min-height: 100px;

    padding:
        10px
        15px;

    display: grid;

    grid-template-columns:
        minmax(210px,1fr)
        minmax(220px,.9fr)
        minmax(300px,468px)
        auto;

    gap: 18px;

    align-items: center;

    color: white;

    background:

        linear-gradient(
            105deg,
            #05213b 0%,
            #073b68 45%,
            #075a7d 70%,
            #05213b 100%
        );

    border-top:
        3px solid
        var(--cyan);

    border-bottom:
        4px solid
        transparent;

    border-image:

        linear-gradient(
            90deg,
            var(--electric),
            var(--lime),
            var(--orange)
        ) 1;

}


/* MEMBER PROFILE */

.rotator-member {

    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;

}

.member-avatar-wrap {

    position: relative;

}

.member-avatar {

    display: block;

    width: 59px;
    height: 59px;

    border-radius: 50%;

    object-fit: cover;

    border:
        3px solid
        var(--gold);

    box-shadow:

        0 0 0 4px rgba(255,255,255,.10),

        0 0 22px rgba(255,201,51,.30);

}

.member-status-dot {

    position: absolute;

    right: 0;
    bottom: 3px;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    background: var(--lime);

    border:
        3px solid
        #07304f;

}

.member-copy {

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;

}

.member-invited {

    color: #70ddff;

    font-size: .6rem;

    font-weight: 1000;

    letter-spacing: .1em;

}

.member-name {

    max-width: 190px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 1.03rem;

}

.member-meta {

    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 6px;

}

.member-handle {

    color: #c9e6f7;

    font-size: .68rem;

}

.membership-pill {

    padding:
        3px
        8px;

    border-radius: 999px;

    font-size: .56rem;

    font-weight: 1000;

    text-transform: uppercase;

}

.membership-pill.free {

    background: #e8f2fa;

    color: #31516b;

}

.membership-pill.pro {

    background:

        linear-gradient(
            90deg,
            var(--lime),
            #c8ff4a
        );

    color: #234100;

}

.membership-pill.founder {

    background:

        linear-gradient(
            90deg,
            var(--gold),
            var(--orange)
        );

    color: #4a2a00;

}


/* BRAND AREA */

.battle-brand {

    display: flex;
    flex-direction: column;

    gap: 1px;

}

.battle-kicker {

    color: var(--lime);

    font-size: .65rem;

    font-weight: 1000;

    letter-spacing: .1em;

}

.battle-brand strong {

    font-size:
        clamp(
            1.1rem,
            1.7vw,
            1.5rem
        );

    font-style: italic;

    color: white;

    letter-spacing: .02em;

}

.battle-brand > span:last-child {

    color: #bfe9ff;

    font-size: .68rem;

}


/* BANNER */

.top-banner {

    width: 100%;

    max-width: 468px;

}

.banner-link {

    position: relative;

    display: block;

    width: 100%;

}

.banner-link img {

    display: block;

    width: 100%;
    height: 60px;

    object-fit: contain;

    border-radius: 7px;

    background: #071f34;

    border:
        2px solid
        rgba(255,255,255,.65);

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.20);

}

.advertising-label {

    position: absolute;

    right: 4px;
    top: -12px;

    color: #9bdff5;

    font-size: .48rem;

    font-weight: 950;

    letter-spacing: .08em;

}

.banner-empty {

    height: 60px;

    display: grid;

    place-content: center;

    text-align: center;

    border-radius: 7px;

    border:
        2px dashed
        #4dbce6;

    background:
        linear-gradient(
            135deg,
            #082c49,
            #0e5476
        );

}

.banner-empty span {

    color: #80dcff;

    font-size: .52rem;

}

.banner-empty strong {

    font-size: .78rem;

}


/* TOP JOIN */

.join-top {

    min-height: 46px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        0
        18px;

    border-radius: 9px;

    color: #173200;

    background:

        linear-gradient(
            180deg,
            #b1fa39,
            #83d518
        );

    font-size: .71rem;

    font-weight: 1000;

    white-space: nowrap;

    box-shadow:

        0 7px 20px
        rgba(126,213,24,.32);

}


/* ==========================================================
   TEXT ADS
   ========================================================== */

.text-ad-row {

    min-height: 50px;

    display: flex;

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

    box-shadow:
        0 4px 14px
        rgba(21,74,124,.08);

}

.text-ad-label {

    display: flex;

    align-items: center;

    padding:
        0
        15px;

    color: white;

    background:

        linear-gradient(
            135deg,
            #ff8b00,
            #ffac22
        );

    font-size: .57rem;

    font-weight: 1000;

    white-space: nowrap;

}

.text-ad-track {

    flex: 1;

    min-width: 0;

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

}

.text-ad {

    min-width: 0;

    padding:
        7px
        13px;

    display: grid;

    grid-template-columns:
        auto
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 7px;

    border-right:
        1px solid
        rgba(0,0,0,.07);

}

.text-ad-1 {

    background:
        linear-gradient(
            90deg,
            #edf7ff,
            white
        );

}

.text-ad-2 {

    background:
        linear-gradient(
            90deg,
            #f6ffeb,
            white
        );

}

.text-ad-3 {

    background:
        linear-gradient(
            90deg,
            #fff5e8,
            white
        );

}

.text-ad strong {

    color: var(--blue);

    font-size: .72rem;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.text-ad-2 strong {

    color: #5eaa00;

}

.text-ad-3 strong {

    color: #ee7600;

}

.text-ad span {

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #62778e;

    font-size: .65rem;

}

.text-ad b {

    color: #497d00;

    font-size: .62rem;

    white-space: nowrap;

}

.text-ad-placeholder {

    grid-column: 1/-1;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        0
        15px;

    background:

        linear-gradient(
            90deg,
            #eaf6ff,
            #f7ffe9,
            #fff4e4
        );

}

.text-ad-placeholder strong {

    color: var(--blue);

    font-size: .75rem;

}

.text-ad-placeholder span {

    font-size: .68rem;

}


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

.rotator-main {

    flex: 1;

    padding:
        5px;

}


/* TOOLBAR */

.battle-toolbar {

    min-height: 66px;

    padding:
        8px
        13px;

    display: grid;

    grid-template-columns:
        minmax(190px,1fr)
        auto
        minmax(230px,1fr);

    align-items: center;

    gap: 14px;

    background:

        linear-gradient(
            90deg,
            #eaf6ff 0%,
            #ffffff 35%,
            #ffffff 65%,
            #fff2e2 100%
        );

    border:

        1px solid
        #cee1f3;

    border-radius:
        10px
        10px
        0
        0;

}

.toolbar-copy {

    display: flex;
    flex-direction: column;

}

.toolbar-copy span {

    color: var(--blue);

    font-size: .61rem;

    font-weight: 1000;

    letter-spacing: .08em;

}

.toolbar-copy strong {

    margin-top: 1px;

    font-size: 1rem;

    color: #15385e;

}

.toolbar-choices {

    display: flex;

    align-items: center;

    gap: 8px;

}

.toolbar-choice {

    min-height: 36px;

    padding:
        0
        16px;

    border: 0;

    border-radius: 8px;

    color: white;

    font-size: .66rem;

    font-weight: 1000;

    cursor: pointer;

    box-shadow:
        0 5px 13px
        rgba(0,0,0,.12);

}

.choice-a {

    background:

        linear-gradient(
            180deg,
            #2b8cff,
            #1264e9
        );

}

.choice-b {

    background:

        linear-gradient(
            180deg,
            #ffad20,
            #ef7300
        );

}

.toolbar-choice:disabled {

    opacity: .4;

    cursor: default;

}

.toolbar-vs {

    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: white;

    background:

        linear-gradient(
            135deg,
            var(--blue),
            var(--purple),
            var(--orange)
        );

    font-size: .65rem;

    font-weight: 1000;

    box-shadow:
        0 4px 12px
        rgba(94,87,255,.28);

}

.toolbar-join {

    justify-self: end;

    min-height: 37px;

    display: inline-flex;

    align-items: center;

    padding:
        0
        14px;

    border-radius: 8px;

    color: #3d7200;

    background:

        linear-gradient(
            180deg,
            #f7ffe8,
            #ecffd1
        );

    border:
        1px solid
        #9be047;

    font-size: .64rem;

    font-weight: 1000;

}


/* ==========================================================
   TWO SITE GRID
   ========================================================== */

.battle-grid {

    min-height: 620px;

    height:
        calc(
            100vh - 270px
        );

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        66px
        minmax(0,1fr);

}


/* SITE PANELS */

.site-panel {

    min-width: 0;

    display: flex;

    flex-direction: column;

    background: white;

    overflow: hidden;

}

.site-panel-a {

    border:
        4px solid
        var(--blue);

    box-shadow:
        inset
        0 4px 0
        var(--electric);

}

.site-panel-b {

    border:
        4px solid
        var(--orange);

    box-shadow:
        inset
        0 4px 0
        var(--gold);

}


/* SITE HEADERS */

.site-header {

    min-height: 48px;

    padding:
        7px
        10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}

.site-panel-a .site-header {

    background:

        linear-gradient(
            90deg,
            #e8f4ff,
            #ffffff
        );

}

.site-panel-b .site-header {

    background:

        linear-gradient(
            90deg,
            #fff2e0,
            #ffffff
        );

}

.site-heading {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 8px;

}

.page-badge {

    flex: 0 0 auto;

    min-height: 29px;

    padding:
        0
        9px;

    display: inline-flex;

    align-items: center;

    border-radius: 7px;

    color: white;

    font-size: .65rem;

    font-weight: 1000;

}

.site-panel-a .page-badge {

    background:

        linear-gradient(
            180deg,
            #2a91ff,
            #1166ef
        );

}

.site-panel-b .page-badge {

    background:

        linear-gradient(
            180deg,
            #ffb321,
            #f07600
        );

}

.site-heading strong {

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: .86rem;

}

.site-panel-a .site-heading strong {

    color: #135fda;

}

.site-panel-b .site-heading strong {

    color: #df6b00;

}

.open-site {

    min-height: 30px;

    display: inline-flex;

    align-items: center;

    padding:
        0
        9px;

    border-radius: 6px;

    font-size: .6rem;

    font-weight: 950;

}

.site-panel-a .open-site {

    color: var(--blue);

    border:
        1px solid
        var(--blue);

    background: #eff7ff;

}

.site-panel-b .open-site {

    color: #df7000;

    border:
        1px solid
        var(--orange);

    background: #fff5e7;

}


/* IFRAME */

.website-frame {

    position: relative;

    flex: 1;

    overflow: hidden;

    background: white;

}

.website-frame iframe {

    display: block;

    width: 100%;
    height: 100%;

    border: 0;

}

.iframe-helper {

    position: absolute;

    left: 50%;
    bottom: 7px;

    transform:
        translateX(-50%);

    padding:
        6px
        10px;

    border-radius: 999px;

    color: white;

    background:
        rgba(5,31,51,.89);

    font-size: .56rem;

    white-space: nowrap;

    box-shadow:
        0 5px 16px
        rgba(0,0,0,.2);

}

.iframe-helper a {

    color: var(--lime);

    font-weight: 950;

}


/* ==========================================================
   VS
   ========================================================== */

.vs-column {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:

        linear-gradient(
            180deg,
            #edf7ff,
            white,
            #fff3e5
        );

}

.vs-line {

    flex: 1;

    width: 3px;

    background:

        linear-gradient(
            180deg,
            transparent,
            var(--electric),
            var(--purple),
            var(--orange),
            transparent
        );

}

.vs-glow {

    width: 62px;
    height: 62px;

    margin:
        8px
        0;

    padding: 4px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:

        linear-gradient(
            135deg,
            var(--electric),
            var(--purple),
            var(--orange)
        );

    box-shadow:

        0 0 24px
        rgba(57,139,255,.30),

        0 0 28px
        rgba(255,134,0,.22);

}

.vs-glow span {

    width: 100%;
    height: 100%;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #18314e;

    background: white;

    font-style: italic;

    font-size: 1.2rem;

    font-weight: 1000;

}


/* ==========================================================
   EMPTY STATES
   ========================================================== */

.website-empty {

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 30px;

    text-align: center;

    background:

        radial-gradient(
            circle at top,
            #e2f4ff,
            #f8fcff
        );

}

.website-empty.pro-empty {

    background:

        radial-gradient(
            circle at top,
            #ffead0,
            #fffaf5
        );

}

.empty-icon {

    width: 66px;
    height: 66px;

    display: grid;

    place-items: center;

    margin-bottom: 11px;

    border-radius: 50%;

    background: white;

    font-size: 1.8rem;

    box-shadow:
        0 8px 22px
        rgba(22,83,140,.17);

}

.empty-kicker {

    color: var(--blue);

    font-size: .6rem;

    font-weight: 1000;

    letter-spacing: .1em;

}

.pro-empty .empty-kicker {

    color: var(--orange);

}

.website-empty strong {

    margin-top: 5px;

    font-size:
        clamp(
            1.25rem,
            2vw,
            1.7rem
        );

    color: #183e67;

}

.website-empty p {

    max-width: 390px;

    margin:
        8px
        0
        15px;

    color: var(--muted);

    font-size: .76rem;

    line-height: 1.5;

}

.website-empty a {

    min-height: 40px;

    display: inline-flex;

    align-items: center;

    padding:
        0
        15px;

    border-radius: 7px;

    color: white;

    background:

        linear-gradient(
            180deg,
            #2a8cff,
            #1265e8
        );

    font-size: .67rem;

    font-weight: 1000;

}

.pro-empty a {

    background:

        linear-gradient(
            180deg,
            #ffad20,
            #ef7600
        );

}


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

.mobile-choose {

    display: none;

}


/* ==========================================================
   SELECTED
   ========================================================== */

.site-panel.is-selected {

    position: relative;

    box-shadow:

        inset
        0
        0
        0
        5px
        rgba(151,235,37,.88);

}

.site-panel.is-selected::after {

    content: "✓ YOUR PICK";

    position: absolute;

    z-index: 20;

    top: 55px;
    right: 12px;

    padding:
        7px
        10px;

    border-radius: 999px;

    color: #1d3900;

    background:

        linear-gradient(
            180deg,
            #b7fa49,
            #8dde21
        );

    font-size: .58rem;

    font-weight: 1000;

    box-shadow:
        0 6px 18px
        rgba(77,150,0,.22);

}


/* ==========================================================
   FOOTER
   ========================================================== */

.rotator-footer {

    min-height: 58px;

    padding:
        9px
        16px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    color: white;

    background:

        linear-gradient(
            100deg,
            #072644,
            #0c4870,
            #072644
        );

    border-top:
        3px solid
        var(--lime);

}

.footer-brand {

    display: flex;

    align-items: center;

    gap: 10px;

}

.footer-lightning {

    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:

        linear-gradient(
            135deg,
            var(--lime),
            var(--gold)
        );

}

.footer-brand > div {

    display: flex;

    flex-direction: column;

}

.footer-brand strong {

    font-size: .76rem;

}

.footer-brand span {

    color: #c8e3f4;

    font-size: .64rem;

}

.rotator-footer > a {

    min-height: 38px;

    display: inline-flex;

    align-items: center;

    padding:
        0
        15px;

    border-radius: 7px;

    color: #193500;

    background:

        linear-gradient(
            180deg,
            #b7fa48,
            #85d817
        );

    font-size: .64rem;

    font-weight: 1000;

}


/* ==========================================================
   TOAST
   ========================================================== */

.choice-toast {

    position: fixed;

    z-index: 100;

    top: 115px;
    left: 50%;

    width:
        min(
            calc(100% - 24px),
            520px
        );

    min-height: 64px;

    padding:
        10px
        12px;

    display: grid;

    grid-template-columns:
        auto
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 10px;

    border-radius: 12px;

    color: white;

    background:

        linear-gradient(
            110deg,
            #06243d,
            #074d70
        );

    box-shadow:
        0 14px 38px
        rgba(0,0,0,.30);

    opacity: 0;

    pointer-events: none;

    transform:
        translate(-50%,-14px);

    transition:
        .18s ease;

}

.choice-toast.show {

    opacity: 1;

    pointer-events: auto;

    transform:
        translate(-50%,0);

}

.toast-check {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #1c3900;

    background: var(--lime);

    font-weight: 1000;

}

.choice-toast > div {

    display: flex;

    flex-direction: column;

}

.toast-title {

    font-size: .76rem;

}

.toast-message {

    color: #c7e4f4;

    font-size: .65rem;

}

.toast-join {

    min-height: 34px;

    display: inline-flex;

    align-items: center;

    padding:
        0
        12px;

    border-radius: 6px;

    color: #173200;

    background: var(--lime);

    font-size: .61rem;

    font-weight: 1000;

}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1050px) {

    .rotator-topbar {

        grid-template-columns:
            1fr
            1fr
            minmax(250px,370px)
            auto;

        gap: 10px;

    }

    .toolbar-join {

        display: none;

    }

    .battle-toolbar {

        grid-template-columns:
            1fr
            auto;

    }

}


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

@media(max-width:850px) {

    .rotator-topbar {

        grid-template-columns:
            1fr
            auto;

    }

    .battle-brand {

        grid-column: 1/-1;

        order: 3;

        padding-top: 7px;

        border-top:
            1px solid
            rgba(255,255,255,.12);

    }

    .top-banner {

        grid-column: 1/-1;

        order: 4;

        justify-self: center;

    }

    .join-top {

        grid-column: 2;

        grid-row: 1;

    }

    .text-ad-label {

        display: none;

    }

    .text-ad-track {

        grid-template-columns: 1fr;

    }

    .text-ad:nth-child(n+2) {

        display: none;

    }

    .battle-toolbar {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .toolbar-choices {

        display: none;

    }

    .battle-grid {

        height: auto;

        grid-template-columns: 1fr;

    }

    .site-panel {

        min-height: 600px;

    }

    .website-frame {

        min-height: 515px;

    }

    .vs-column {

        height: 52px;

        flex-direction: row;

    }

    .vs-line {

        width: auto;
        height: 3px;

        flex: 1;

        background:

            linear-gradient(
                90deg,
                transparent,
                var(--electric),
                var(--purple),
                var(--orange),
                transparent
            );

    }

    .vs-glow {

        width: 48px;
        height: 48px;

        margin:
            0
            7px;

        flex:
            0 0 48px;

    }

    .vs-glow span {

        font-size: .9rem;

    }

    .mobile-choose {

        display: block;

        min-height: 43px;

        margin: 7px;

        border: 0;

        border-radius: 7px;

        color: white;

        font-size: .67rem;

        font-weight: 1000;

    }

    .mobile-choose.choose-a {

        background:

            linear-gradient(
                180deg,
                #2790ff,
                #1263e9
            );

    }

    .mobile-choose.choose-b {

        background:

            linear-gradient(
                180deg,
                #ffae22,
                #ef7200
            );

    }

}


/* ==========================================================
   PHONE
   ========================================================== */

@media(max-width:520px) {

    .rotator-topbar {

        padding: 8px;

    }

    .member-avatar {

        width: 47px;
        height: 47px;

    }

    .member-name {

        max-width: 135px;

        font-size: .9rem;

    }

    .member-handle {

        display: none;

    }

    .join-top {

        min-height: 37px;

        padding:
            0
            10px;

        font-size: .59rem;

    }

    .banner-link img {

        height: auto;

        aspect-ratio: 468/60;

    }

    .advertising-label {

        display: none;

    }

    .battle-brand strong {

        font-size: 1.05rem;

    }

    .text-ad {

        grid-template-columns:
            minmax(0,1fr)
            auto;

    }

    .text-ad span {

        display: none;

    }

    .rotator-main {

        padding: 0;

    }

    .battle-toolbar {

        border-radius: 0;

    }

    .site-heading strong {

        font-size: .73rem;

    }

    .site-panel {

        min-height: 550px;

    }

    .website-frame {

        min-height: 455px;

    }

    .rotator-footer {

        flex-direction: column;

        align-items: stretch;

    }

    .rotator-footer > a {

        justify-content: center;

    }

    .choice-toast {

        top: 82px;

        grid-template-columns:
            auto
            1fr;

    }

    .toast-join {

        display: none;

    }

}