/* =========================================================
   REEZBOND GLOBAL MENU CSS
   /menu.css
   Version: 2026-09-20
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    background:#333;
}

* {
    box-sizing: border-box;
}


/* =========================================================
   TOP RIGHT AREA
   ========================================================= */

.top-right-div {
    position: fixed;
    top: 0;
    right: 0;

    width: auto;
    height: auto;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;

    z-index: 100000;
}


/* =========================================================
   COINS BAR
   ========================================================= */

.reezbond-coins-bar {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 100001;

    display: flex;
    align-items: center;
    gap: 5px;

    min-height: 32px;

    margin: 0;
    padding: 6px 10px;

    background: transparent;

    color: #fff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;
}

.reezbond-coins-bar img {
    display: inline-block;

    width: 18px;
    height: 18px;

    vertical-align: middle;
}

.reezbond-coins-bar a {
    color: #fff;

    text-decoration: none;
}

.reezbond-coins-bar a:hover {
    color: #ddd;
    text-decoration: underline;
}


/* =========================================================
   REEZBOND FIXED MENU + FRESH BACKGROUND
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;

    min-height: 100%;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(0, 190, 190, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 10%,
            rgba(40, 110, 255, 0.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #061217 0%,
            #071d25 45%,
            #08131c 100%
        );

    background-attachment: fixed;

    color: #fff;
}


/* =========================================================
   SUBTLE RETRO BACKGROUND
   ========================================================= */

body {
    position: relative;

    background-image:
        linear-gradient(
            rgba(5, 20, 25, 0.72),
            rgba(5, 15, 25, 0.72)
        ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%2334d9c4' stroke-opacity='.08' stroke-width='2'%3E%3Cpath d='M20 35h8v-8h8v8h8v8h-8v8h-8v-8h-8z'/%3E%3Cpath d='M125 25h6v6h6v6h-6v6h-6v-6h-6v-6h6z'/%3E%3Cpath d='M55 115h8v-8h8v8h8v8h-8v8h-8v-8h-8z'/%3E%3Cpath d='M145 130h5v5h5v5h-5v5h-5v-5h-5v-5h5z'/%3E%3C/g%3E%3Cg fill='%2334d9c4' fill-opacity='.07'%3E%3Crect x='95' y='70' width='6' height='6'/%3E%3Crect x='105' y='70' width='6' height='6'/%3E%3Crect x='95' y='80' width='6' height='6'/%3E%3Crect x='105' y='80' width='6' height='6'/%3E%3C/g%3E%3C/svg%3E");

    background-repeat: repeat;

    background-attachment: fixed;

    background-size:
        auto,
        180px 180px;
}


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

.menu-container {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    min-height: 58px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin: 0;
    padding: 8px 10px;

    background:
        linear-gradient(
            180deg,
            rgba(5, 18, 25, 0.97),
            rgba(6, 25, 32, 0.94)
        );

    border-bottom: 1px solid rgba(52, 217, 196, 0.35);

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.45);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    z-index: 100000;
}


/* =========================================================
   PUSH PAGE CONTENT BELOW FIXED MENU
   ========================================================= */

body {
    padding-top: 75px;
}


/* =========================================================
   FRESH MENU BUTTONS
   ========================================================= */

.dropbtn {
    display: inline-flex;

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

    gap: 7px;

    min-height: 40px;

    padding: 9px 14px;

    background:
        linear-gradient(
            180deg,
            #12313a,
            #0c242c
        );

    color: #eaffff;

    border: 1px solid #27515a;

    border-radius: 7px;

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

    font-size: 14px;

    font-weight: 600;

    line-height: 1.2;

    white-space: nowrap;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.dropbtn:hover {
    background:
        linear-gradient(
            180deg,
            #174752,
            #10343d
        );

    border-color: #34d9c4;

    color: #fff;

    transform: translateY(-1px);
}


/* =========================================================
   ICONS
   ========================================================= */

.dropbtn i {
    width: 18px;

    color: #69e8d6;

    text-align: center;

    font-size: 14px;
}


/* =========================================================
   WATCH STREAMS
   ========================================================= */

.dropbtn.watch-streams {
    background:
        linear-gradient(
            180deg,
            #7de88b,
            #4bc96d
        );

    color: #06150a;

    border-color: #8aff9a;
}

.dropbtn.watch-streams i {
    color: #06150a;
}

.dropbtn.watch-streams:hover {
    background:
        linear-gradient(
            180deg,
            #91f39d,
            #61dc7c
        );

    color: #06150a;
}


/* =========================================================
   MAIN DROPDOWN
   Opens directly below the fixed main menu
   ========================================================= */

.dropdown {
    position: relative;
    display: inline-block;
}


/* Main dropdown panel */
.dropdown-content {
    position: absolute;

    top: 100%;
    left: 0;

    display: none;

    width: 150px;
    min-width: 150px;

    margin: 0;
    padding: 5px;

    background:
        linear-gradient(
            180deg,
            #0b2027,
            #08171d
        );

    border: 1px solid #28515a;

    border-radius: 0 0 8px 8px;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .55);

    z-index: 100001;
}


/* Show main dropdown */
.dropdown:hover > .dropdown-content,
.dropdown:focus-within > .dropdown-content {
    display: block;
}


/* =========================================================
   SUBMENU
   ========================================================= */

.submenu {
    position: relative;

    display: block;

    width: 100%;
}


/*
   Submenu opens to the RIGHT of the parent item.

   left: 100% means it starts exactly at the
   right edge of the parent menu.
*/

.submenu-content {
    position: absolute;

    top: 0;
    left: 100%;

    display: none;

    width: 180px;
    min-width: 180px;

    margin: 0;
    padding: 5px;

    background:
        linear-gradient(
            180deg,
            #0b2027,
            #08171d
        );

    border: 1px solid #28515a;

    border-radius: 0 8px 8px 8px;

    box-shadow:
        10px 10px 25px rgba(0, 0, 0, .55);

    z-index: 100002;
}


/* Show submenu */
.submenu:hover > .submenu-content,
.submenu:focus-within > .submenu-content {
    display: block;
}


/* =========================================================
   SUBMENU ITEMS
   ========================================================= */

.dropdown-content > .submenu > .dropbtn,
.dropdown-content > a.dropbtn {
    width: 100%;

    min-height: 38px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    padding: 9px 11px;

    background: transparent;

    border: 0;

    border-radius: 5px;

    color: #eaffff;

    font-size: 13px;

    text-decoration: none;
}


.dropdown-content > .submenu > .dropbtn:hover,
.dropdown-content > a.dropbtn:hover {
    background: rgba(52, 217, 196, 0.13);

    color: #fff;
}


/* =========================================================
   SUBMENU ITEMS INSIDE SUBMENU
   ========================================================= */

.submenu-content > a.dropbtn,
.submenu-content > .submenu > .dropbtn {
    width: 100%;

    min-height: 38px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    padding: 9px 11px;

    background: transparent;

    border: 0;

    border-radius: 5px;

    color: #eaffff;

    font-size: 13px;

    text-decoration: none;
}


.submenu-content > a.dropbtn:hover,
.submenu-content > .submenu > .dropbtn:hover {
    background: rgba(52, 217, 196, 0.13);

    color: #fff;
}


/* =========================================================
   IMPORTANT:
   PREVENT SUBMENU FROM GOING UNDER FIXED MAIN MENU
   ========================================================= */

.menu-container {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 100000;
}


/* Dropdowns are above the fixed menu */
.dropdown-content {
    z-index: 100001;
}

.submenu-content {
    z-index: 100002;
}


/* =========================================================
   SUBMENU HOVER
   ========================================================= */

.submenu-content > a.dropbtn:hover,
.submenu-content > .submenu > .dropbtn:hover {
    background: #292929;

    color: #fff;
}


/* =========================================================
   DEEP SUBMENUS
   ========================================================= */

.submenu-content .submenu-content {
    top: -5px;
    left: calc(100% + 3px);
}


/* =========================================================
   PUBLIC CHAT
   ========================================================= */

#reezbondChat {
    position: fixed;

    top: 85px;
    right: 5px;

    width: 280px;

    overflow: hidden;

    background: #18181b;
    color: #efeff1;

    border: 1px solid #303033;
    border-radius: 7px;

    box-shadow:
        0 6px 25px rgba(0, 0, 0, .55);

    z-index: 999999;

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

    font-size: 13px;
}


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

#chatHeader {
    display: flex;

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

    height: 40px;

    padding: 0 8px 0 12px;

    background: #202024;

    border-bottom: 1px solid #303033;
}

.chatTitle {
    font-weight: bold;
}

.chatTitle small {
    margin-left: 5px;

    color: #53d769;

    font-size: 9px;
}


/* =========================================================
   CHAT CONTROLS
   ========================================================= */

.chatControls {
    display: flex;

    gap: 3px;
}

.chatControls button {
    width: 25px;
    height: 25px;

    padding: 0;

    border: 0;
    border-radius: 4px;

    background: transparent;
    color: #aaa;

    font-size: 18px;

    line-height: 25px;

    cursor: pointer;
}

.chatControls button:hover {
    background: #343438;

    color: #fff;
}


/* =========================================================
   CHAT BODY
   ========================================================= */

#chatBody {
    position: relative;

    width: 100%;
}


/* =========================================================
   CHAT MESSAGES
   ========================================================= */

#chatMessages {
    height: 105px;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 6px 8px;
}

#chatMessages::-webkit-scrollbar {
    width: 7px;
}

#chatMessages::-webkit-scrollbar-track {
    background: #18181b;
}

#chatMessages::-webkit-scrollbar-thumb {
    background: #444;

    border-radius: 5px;
}

#chatMessages::-webkit-scrollbar-thumb:hover {
    background: #666;
}


/* =========================================================
   CHAT LINE
   ========================================================= */

.chatLine {
    padding: 2px 3px;

    line-height: 19px;

    word-break: break-word;
    overflow-wrap: anywhere;
}

.chatLine:hover {
    background: #26262a;

    border-radius: 3px;
}

.chatTime {
    margin-right: 5px;

    color: #777;

    font-size: 9px;
}

.chatUser {
    margin-right: 5px;

    font-weight: bold;
}

.chatText {
    color: #dedee3;
}


/* =========================================================
   NEW MESSAGES
   ========================================================= */

#newMessages {
    position: absolute;

    bottom: 92px;
    left: 50%;

    display: none;

    padding: 4px 10px;

    transform: translateX(-50%);

    background: #9147ff;

    color: #fff;

    border-radius: 12px;

    font-size: 11px;
    font-weight: bold;

    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .4);
}


/* =========================================================
   CHAT NAME
   ========================================================= */

#chatName {
    display: block;

    width: calc(100% - 16px);
    height: 32px;

    margin: 4px 8px 5px;

    padding: 7px 9px;

    background: #0e0e10;

    border: 1px solid #3a3a3d;
    border-radius: 4px;

    color: #fff;

    outline: none;

    font-size: 12px;
}

#chatName:focus {
    border-color: #9147ff;
}


/* =========================================================
   CHAT INPUT
   ========================================================= */

#chatInputRow {
    display: flex;

    gap: 5px;

    padding: 0 8px 8px;
}

#chatInput {
    flex: 1;

    min-width: 0;

    height: 34px;

    padding: 8px;

    background: #0e0e10;

    border: 1px solid #3a3a3d;
    border-radius: 4px;

    color: #fff;

    outline: none;

    font-size: 12px;
}

#chatInput:focus {
    border-color: #9147ff;
}


/* =========================================================
   SEND CHAT
   ========================================================= */

#sendChatButton {
    width: 38px;
    height: 34px;

    padding: 0;

    border: 0;
    border-radius: 4px;

    background: #9147ff;

    color: #fff;

    font-size: 16px;

    cursor: pointer;
}

#sendChatButton:hover {
    background: #772ce8;
}

#sendChatButton:disabled {
    opacity: .5;

    cursor: not-allowed;
}


/* =========================================================
   CHAT STATES
   ========================================================= */

#reezbondChat.minimized {
    width: 190px;
}

#reezbondChat.minimized #chatBody {
    display: none;
}

#reezbondChat.closed {
    display: none;
}


/* =========================================================
   OPEN CHAT
   ========================================================= */

#openChatButton {
    position: fixed;

    top: 5px;
    right: 5px;

    display: none;

    z-index: 999999;

    padding: 9px 15px;

    border: 0;
    border-radius: 5px;

    background: #9147ff;

    color: #fff;

    font-weight: bold;

    cursor: pointer;
}

#openChatButton:hover {
    background: #772ce8;
}


/* =========================================================
   RPG FIXED BUTTON
   ========================================================= */

.rpg-fixed-button {
    position: fixed;

    left: 15px;
    bottom: 15px;

    z-index: 99998;
}

.rpg-button {
    display: block;

    width: 220px;

    padding: 15px;

    background:
        linear-gradient(
            135deg,
            #111,
            #292929
        );

    border: 2px solid #00ffff;
    border-radius: 15px;

    color: #fff;

    text-decoration: none;

    box-shadow:
        0 0 12px #00ffff;

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

.rpg-button:hover {
    transform: scale(1.05);

    box-shadow:
        0 0 25px #00ffff,
        0 0 45px #0088ff;
}

.rpg-description {
    text-align: center;
}

.rpg-description strong {
    display: block;

    margin-bottom: 8px;

    color: #00ffff;

    font-size: 21px;

    text-shadow:
        0 0 8px #00ffff;
}

.rpg-description p {
    margin: 0;

    color: #ddd;

    font-size: 14px;

    line-height: 1.4;
}


/* =========================================================
   LEADERBOARD
   ========================================================= */

.reezbond-leaderboard {
    position: fixed;

    right: 5px;
    bottom: 20px;

    width: 280px;
    height: 550px;

    z-index: 9999;

    overflow: hidden;

    background: #000;

    border-radius: 12px;

    box-shadow:
        0 0 25px rgba(0, 0, 0, .6);
}

.reezbond-leaderboard iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   GRANDRANKER BANNER
   ========================================================= */

#grandrankerBanner {
    position: fixed;

    left: 50%;
    bottom: 10px;

    width: 700px;
    max-width: 95vw;

    transform: translateX(-50%);

    z-index: 999999;
}

#bannerImage {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   SESSION / GUEST MODALS
   ========================================================= */

#sessionWarn,
#guestWarn {
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


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

@media (max-width: 700px) {

    .menu-container {
        justify-content: center;

        gap: 4px;

        padding: 6px;
    }

    .dropbtn {
        min-height: 36px;

        padding: 8px 10px;

        font-size: 12px;
    }

    .dropbtn i {
        font-size: 12px;
    }

    /*
     * Keep the main dropdown attached
     * to its parent on mobile.
     */
    .dropdown-content {
        left: 0;

        transform: none;
    }

    /*
     * Submenus open to the right.
     */
    .submenu-content {
        left: calc(100% + 3px);

        top: -5px;
    }

    #reezbondChat {
        top: 8px;
        right: 8px;

        width: 300px;
    }

    .reezbond-leaderboard {
        right: 5px;
        bottom: 10px;

        width: 220px;
        height: 450px;
    }

    .rpg-fixed-button {
        left: 8px;
        bottom: 8px;
    }

    .rpg-button {
        width: 180px;

        padding: 10px;
    }

    .rpg-description strong {
        font-size: 17px;
    }

    .rpg-description p {
        font-size: 12px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .menu-container {
        gap: 3px;

        padding: 5px;
    }

    .dropbtn {
        min-height: 34px;

        padding: 7px 8px;

        font-size: 11px;
    }

    .dropbtn i {
        width: 15px;

        font-size: 11px;
    }

    .dropdown-content {
        min-width: 190px;
    }

    .submenu-content {
        min-width: 190px;
    }

    #reezbondChat {
        right: 8px;

        width: calc(100vw - 16px);
    }
}