/* 2009 Era RuneScape Navigation Bar — pixel-accurate recreation */

/* Reset & base ----------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #000 !important;
}

body.rt4-fullscreen-active {
    overflow: hidden !important;
}

:root {
    /* Navbar chrome */
    --nav-height: 27px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --rt4-canvas-nav-gap: 5px;
    /* Base stone colors */
    --stone-top-br: #e6e3d2;
    /* Thin top highlight border */
    --stone-bg-top: #bab5a1;
    /* Top gradient part */
    --stone-bg-mid: #9c9681;
    /* Mid gradient part */
    --stone-bg-bot: #7d7865;
    /* Bottom gradient part */
    --stone-border-hi: #e6e3d2;
    --stone-border-lo: #1a1a1a;

    /* Buttons */
    --btn-gold: #e8d800;
    /* Classic gold text */
    --btn-gold-hi: #ffffff;
    --btn-height: 19px;

    /* Stone Button (Normal) */
    --btn-stone-top: #4a4a4a;
    --btn-stone-bot: #1c1c1c;
    --btn-stone-border: #000000;

    /* Gold Button (Hover) */
    --btn-gold-top: #fbe53e;
    --btn-gold-mid: #e8d800;
    --btn-gold-bot: #b8a600;

    /* Dark-skin button rows */
    --btn-text: #e8d80b;
    --btn-text-hover: #000000;
    --btn-min-width: 106px;
    --btn-row-0: rgb(0, 0, 4);
    --btn-row-1: rgb(67, 69, 73);
    --btn-row-2: rgb(66, 68, 72);
    --btn-row-3: rgb(62, 64, 68);
    --btn-row-4: rgb(59, 61, 65);
    --btn-row-5: rgb(55, 57, 61);
    --btn-row-6: rgb(51, 52, 56);
    --btn-row-7: rgb(46, 48, 52);
    --btn-row-8: rgb(41, 44, 45);
    --btn-row-9: rgb(37, 39, 40);
    --btn-row-10: rgb(32, 34, 36);
    --btn-row-11: rgb(28, 30, 31);
    --btn-row-12: rgb(23, 25, 26);
    --btn-row-13: rgb(18, 20, 22);
    --btn-row-14: rgb(16, 18, 19);
    --btn-row-15: rgb(10, 12, 14);
    --btn-row-16: rgb(9, 9, 9);
    --btn-row-17: rgb(5, 5, 5);
    --btn-row-18: rgb(0, 0, 0);

    --hover-row-0: rgb(199, 165, 69);
    --hover-row-1: rgb(255, 222, 106);
    --hover-row-2: rgb(255, 223, 134);
    --hover-row-3: rgb(252, 224, 145);
    --hover-row-4: rgb(253, 223, 142);
    --hover-row-5: rgb(252, 221, 133);
    --hover-row-6: rgb(252, 217, 120);
    --hover-row-7: rgb(251, 214, 108);
    --hover-row-8: rgb(253, 210, 95);
    --hover-row-9: rgb(255, 207, 73);
    --hover-row-10: rgb(241, 183, 20);
    --hover-row-11: rgb(246, 185, 15);
    --hover-row-12: rgb(248, 189, 29);
    --hover-row-13: rgb(249, 193, 46);
    --hover-row-14: rgb(250, 199, 64);
    --hover-row-15: rgb(249, 203, 78);
    --hover-row-16: rgb(250, 208, 92);
    --hover-row-17: rgb(255, 209, 85);
    --hover-row-18: rgb(217, 164, 16);

    --search-input-bg: #ffffff;
    --search-input-text: #000000;
    --search-input-border-top: #6d6d6d;
    --search-input-border-left: #6d6d6d;
    --search-input-border-right: #d8d8d8;
    --search-input-border-bottom: #d8d8d8;

    --mini-btn-top: #f5f5f5;
    --mini-btn-mid: #c6c6c6;
    --mini-btn-bottom: #7a7a7a;
    --mini-btn-border-dark: #3e3e3e;
    --mini-btn-border-light: #ffffff;

    /* Search field (legacy) */
    --input-bg: #eee6d1;
}

/* ----- Navigation bar --------------------------------------------------- */
#navbar-container {
    width: auto;
    display: inline-flex;
    height: var(--nav-height);
    overflow: hidden;
    background: linear-gradient(to bottom,
            #ede6d8 0px,
            #aca597 1px,
            #c8c1b3 6px,
            #b3ac9e 13px,
            #cfc8bb 13px,
            #d0c9bb 14px,
            #e0d9cc 20px,
            #c9c2b4 24px,
            #b9b2a4 25px,
            #ede6d8 26px
    );
    align-items: flex-start;
    padding: 0 6px;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    z-index: 1000;
    gap: 0;
}

#navbar-container::before,
#navbar-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 2px;
    height: 27px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 1px 27px, 1px 27px;
}

#navbar-container::before {
    left: 0;
    background-image:
        linear-gradient(to bottom,
            #ded6cb 0px,
            #dad3c8 1px,
            #cfc7bc 2px,
            #beb7ac 3px,
            #aea79c 4px,
            #9b9489 5px,
            #8b8479 6px,
            #7a7267 7px,
            #665f53 8px,
            #574f44 9px,
            #484035 10px,
            #3b3328 11px,
            #352e20 12px,
            #30291c 13px,
            #3d3629 14px,
            #4b4437 15px,
            #595245 16px,
            #665f51 17px,
            #756e60 18px,
            #797264 19px,
            #8a8375 20px,
            #9f988a 21px,
            #aea79a 22px,
            #bbb4a6 23px,
            #c7c0b2 24px,
            #d1cabc 25px,
            #ebe4d6 26px
        ),
        linear-gradient(to bottom,
            #e8e1d6 0px,
            #8d867b 1px,
            #928b80 2px,
            #989185 3px,
            #9d958a 4px,
            #9e968b 5px,
            #9a9388 6px,
            #9a9388 7px,
            #978f84 8px,
            #938c81 9px,
            #928b80 10px,
            #918a7e 11px,
            #918a7c 12px,
            #918a7c 13px,
            #a59e90 14px,
            #a7a093 15px,
            #a8a194 16px,
            #ada698 17px,
            #aea79a 18px,
            #a8a194 19px,
            #b3ac9e 20px,
            #b3ac9e 21px,
            #b2ab9d 22px,
            #ada698 23px,
            #a49d8f 24px,
            #999285 25px,
            #ebe4d6 26px
        );
    background-position: 0 0, 1px 0;
}

#navbar-container::after {
    right: 0;
    background-image:
        linear-gradient(to bottom,
            #e8e1d6 0px,
            #8d867b 1px,
            #928b80 2px,
            #989185 3px,
            #9d958a 4px,
            #9e968b 5px,
            #9a9388 6px,
            #9a9388 7px,
            #978f84 8px,
            #938c81 9px,
            #928b80 10px,
            #918a7e 11px,
            #918a7c 12px,
            #918a7c 13px,
            #a59e90 14px,
            #a7a093 15px,
            #a8a194 16px,
            #ada698 17px,
            #aea79a 18px,
            #a8a194 19px,
            #b3ac9e 20px,
            #b3ac9e 21px,
            #b2ab9d 22px,
            #ada698 23px,
            #a49d8f 24px,
            #999285 25px,
            #ebe4d6 26px
        ),
        linear-gradient(to bottom,
            #ded6cb 0px,
            #dad3c8 1px,
            #cfc7bc 2px,
            #beb7ac 3px,
            #aea79c 4px,
            #9b9489 5px,
            #8b8479 6px,
            #7a7267 7px,
            #665f53 8px,
            #574f44 9px,
            #484035 10px,
            #3b3328 11px,
            #352e20 12px,
            #30291c 13px,
            #3d3629 14px,
            #4b4437 15px,
            #595245 16px,
            #665f51 17px,
            #756e60 18px,
            #797264 19px,
            #8a8375 20px,
            #9f988a 21px,
            #aea79a 22px,
            #bbb4a6 23px,
            #c7c0b2 24px,
            #d1cabc 25px,
            #ebe4d6 26px
        );
    background-position: 0 0, 1px 0;
}

/* Center the navbar bar itself */
#navbar-container-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #000;
    padding-top: var(--safe-area-top);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
}

/* ----- Inner nav (Home + Settings + Search cluster) -------------------- */
.inner-nav {
    min-width: 766px;
    display: flex;
    align-items: flex-start;
    width: 100%;
}

/* ----- Stone / dark buttons --------------------------------------------- */
.nav-button,
.search-button {
    height: var(--btn-height);
    margin: 4px 1px 0 1px;
}

.nav-button > span,
.search-button > * {
    position: relative;
    z-index: 1;
}

.nav-button {
    min-width: var(--btn-min-width);
    align-items: center;
    justify-content: center;
    padding: 0 12px 1px 12px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    display: flex;
}

/* ----- Dark-skin pixel-accurate button chrome --------------------------- */
.dark-skin {
    position: relative;
    display: inline-flex;
    box-sizing: border-box;
    overflow: hidden;
    user-select: none;
    text-decoration: none;
    border: none;
    border-radius: 0;
    color: var(--btn-text);
    background:
        linear-gradient(to bottom,
            var(--btn-row-0) 0px,
            var(--btn-row-1) 1px,
            var(--btn-row-2) 2px,
            var(--btn-row-3) 3px,
            var(--btn-row-4) 4px,
            var(--btn-row-5) 5px,
            var(--btn-row-6) 6px,
            var(--btn-row-7) 7px,
            var(--btn-row-8) 8px,
            var(--btn-row-9) 9px,
            var(--btn-row-10) 10px,
            var(--btn-row-11) 11px,
            var(--btn-row-12) 12px,
            var(--btn-row-13) 13px,
            var(--btn-row-14) 14px,
            var(--btn-row-15) 15px,
            var(--btn-row-16) 16px,
            var(--btn-row-17) 17px,
            var(--btn-row-18) 18px
        );
}

.dark-skin::before,
.dark-skin::after {
    content: "";
    position: absolute;
    top: 0;
    width: 3px;
    height: 19px;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: 1px 19px, 1px 19px, 1px 19px;
}

.dark-skin::before {
    left: 0;
    background-image:
        linear-gradient(to bottom,
            rgb(14, 15, 19) 0px,
            rgb(16, 18, 22) 1px,
            rgb(16, 18, 22) 2px,
            rgb(16, 18, 22) 3px,
            rgb(14, 15, 19) 4px,
            rgb(16, 18, 22) 5px,
            rgb(15, 16, 20) 6px,
            rgb(15, 16, 20) 7px,
            rgb(15, 17, 18) 8px,
            rgb(15, 17, 18) 9px,
            rgb(15, 17, 18) 10px,
            rgb(15, 17, 18) 11px,
            rgb(14, 16, 17) 12px,
            rgb(16, 18, 19) 13px,
            rgb(16, 18, 19) 14px,
            rgb(14, 16, 17) 15px,
            rgb(12, 13, 16) 16px,
            rgb(12, 12, 12) 17px,
            rgb(3, 3, 3) 18px
        ),
        linear-gradient(to bottom,
            rgb(0, 1, 5) 0px,
            rgb(66, 68, 72) 1px,
            rgb(62, 64, 68) 2px,
            rgb(59, 61, 65) 3px,
            rgb(57, 58, 62) 4px,
            rgb(51, 52, 56) 5px,
            rgb(51, 52, 56) 6px,
            rgb(41, 43, 47) 7px,
            rgb(41, 44, 45) 8px,
            rgb(38, 40, 42) 9px,
            rgb(32, 34, 36) 10px,
            rgb(29, 31, 32) 11px,
            rgb(23, 25, 26) 12px,
            rgb(19, 21, 23) 13px,
            rgb(14, 16, 17) 14px,
            rgb(11, 13, 15) 15px,
            rgb(8, 8, 8) 16px,
            rgb(5, 5, 5) 17px,
            rgb(1, 1, 1) 18px
        ),
        linear-gradient(to bottom,
            rgb(0, 1, 5) 0px,
            rgb(68, 70, 74) 1px,
            rgb(66, 68, 72) 2px,
            rgb(64, 65, 69) 3px,
            rgb(59, 61, 65) 4px,
            rgb(55, 57, 61) 5px,
            rgb(52, 54, 58) 6px,
            rgb(46, 48, 52) 7px,
            rgb(41, 44, 45) 8px,
            rgb(38, 40, 42) 9px,
            rgb(32, 34, 36) 10px,
            rgb(28, 30, 31) 11px,
            rgb(23, 25, 26) 12px,
            rgb(19, 21, 23) 13px,
            rgb(14, 16, 17) 14px,
            rgb(10, 12, 14) 15px,
            rgb(8, 8, 8) 16px,
            rgb(6, 6, 6) 17px,
            rgb(0, 0, 0) 18px
        );
    background-position: 0 0, 1px 0, 2px 0;
}

.dark-skin::after {
    right: 0;
    background-image:
        linear-gradient(to bottom,
            rgb(0, 0, 4) 0px,
            rgb(68, 70, 74) 1px,
            rgb(65, 66, 70) 2px,
            rgb(64, 65, 69) 3px,
            rgb(60, 62, 66) 4px,
            rgb(55, 57, 61) 5px,
            rgb(51, 52, 56) 6px,
            rgb(46, 48, 52) 7px,
            rgb(41, 44, 45) 8px,
            rgb(37, 39, 40) 9px,
            rgb(32, 34, 36) 10px,
            rgb(28, 30, 31) 11px,
            rgb(23, 25, 26) 12px,
            rgb(18, 20, 22) 13px,
            rgb(16, 18, 19) 14px,
            rgb(10, 12, 14) 15px,
            rgb(9, 9, 9) 16px,
            rgb(5, 5, 5) 17px,
            rgb(0, 0, 0) 18px
        ),
        linear-gradient(to bottom,
            rgb(1, 1, 3) 0px,
            rgb(65, 65, 67) 1px,
            rgb(61, 60, 63) 2px,
            rgb(59, 59, 61) 3px,
            rgb(57, 57, 59) 4px,
            rgb(54, 53, 56) 5px,
            rgb(47, 46, 49) 6px,
            rgb(43, 43, 45) 7px,
            rgb(38, 38, 40) 8px,
            rgb(34, 33, 36) 9px,
            rgb(33, 32, 35) 10px,
            rgb(26, 25, 28) 11px,
            rgb(19, 18, 21) 12px,
            rgb(20, 19, 22) 13px,
            rgb(16, 16, 18) 14px,
            rgb(8, 8, 10) 15px,
            rgb(8, 8, 8) 16px,
            rgb(6, 6, 6) 17px,
            rgb(0, 0, 0) 18px
        ),
        linear-gradient(to bottom,
            rgb(20, 19, 22) 0px,
            rgb(21, 21, 23) 1px,
            rgb(20, 19, 22) 2px,
            rgb(21, 21, 23) 3px,
            rgb(20, 19, 22) 4px,
            rgb(20, 19, 22) 5px,
            rgb(20, 19, 22) 6px,
            rgb(23, 23, 25) 7px,
            rgb(29, 29, 31) 8px,
            rgb(26, 25, 28) 9px,
            rgb(30, 30, 32) 10px,
            rgb(24, 24, 26) 11px,
            rgb(29, 29, 31) 12px,
            rgb(24, 24, 26) 13px,
            rgb(24, 24, 26) 14px,
            rgb(28, 28, 30) 15px,
            rgb(23, 23, 23) 16px,
            rgb(24, 24, 24) 17px,
            rgb(28, 28, 28) 18px
        );
    background-position: 0 0, 1px 0, 2px 0;
}

/* ----- Gold-hover (hover state for dark-skin buttons) ------------------- */
.gold-hover:hover,
.gold-hover:focus-visible {
    color: var(--btn-text-hover);
    background:
        linear-gradient(to bottom,
            var(--hover-row-0) 0px,
            var(--hover-row-1) 1px,
            var(--hover-row-2) 2px,
            var(--hover-row-3) 3px,
            var(--hover-row-4) 4px,
            var(--hover-row-5) 5px,
            var(--hover-row-6) 6px,
            var(--hover-row-7) 7px,
            var(--hover-row-8) 8px,
            var(--hover-row-9) 9px,
            var(--hover-row-10) 10px,
            var(--hover-row-11) 11px,
            var(--hover-row-12) 12px,
            var(--hover-row-13) 13px,
            var(--hover-row-14) 14px,
            var(--hover-row-15) 15px,
            var(--hover-row-16) 16px,
            var(--hover-row-17) 17px,
            var(--hover-row-18) 18px
        );
    outline: none;
}

.gold-hover:hover::before,
.gold-hover:focus-visible::before {
    background-image:
        linear-gradient(to bottom,
            rgb(205, 163, 52) 0px,
            rgb(215, 163, 19) 1px,
            rgb(214, 164, 26) 2px,
            rgb(212, 164, 28) 3px,
            rgb(211, 163, 25) 4px,
            rgb(211, 160, 22) 5px,
            rgb(213, 161, 21) 6px,
            rgb(216, 164, 22) 7px,
            rgb(218, 165, 17) 8px,
            rgb(221, 167, 12) 9px,
            rgb(224, 163, 4) 10px,
            rgb(224, 163, 2) 11px,
            rgb(222, 163, 6) 12px,
            rgb(222, 165, 11) 13px,
            rgb(219, 164, 12) 14px,
            rgb(220, 165, 15) 15px,
            rgb(217, 164, 18) 16px,
            rgb(218, 165, 17) 17px,
            rgb(219, 162, 9) 18px
        ),
        linear-gradient(to bottom,
            rgb(204, 165, 57) 0px,
            rgb(255, 211, 70) 1px,
            rgb(255, 211, 82) 2px,
            rgb(255, 211, 86) 3px,
            rgb(255, 210, 81) 4px,
            rgb(255, 210, 79) 5px,
            rgb(255, 206, 75) 6px,
            rgb(255, 204, 69) 7px,
            rgb(253, 201, 59) 8px,
            rgb(254, 198, 49) 9px,
            rgb(241, 181, 19) 10px,
            rgb(245, 183, 19) 11px,
            rgb(244, 186, 26) 12px,
            rgb(247, 190, 36) 13px,
            rgb(249, 194, 44) 14px,
            rgb(252, 198, 53) 15px,
            rgb(252, 200, 58) 16px,
            rgb(255, 204, 59) 17px,
            rgb(220, 164, 10) 18px
        ),
        linear-gradient(to bottom,
            rgb(200, 164, 60) 0px,
            rgb(255, 217, 86) 1px,
            rgb(255, 218, 106) 2px,
            rgb(255, 217, 112) 3px,
            rgb(253, 215, 107) 4px,
            rgb(254, 215, 105) 5px,
            rgb(254, 211, 96) 6px,
            rgb(252, 206, 85) 7px,
            rgb(253, 204, 75) 8px,
            rgb(255, 202, 58) 9px,
            rgb(241, 181, 17) 10px,
            rgb(248, 184, 15) 11px,
            rgb(248, 188, 26) 12px,
            rgb(250, 193, 39) 13px,
            rgb(252, 198, 53) 14px,
            rgb(253, 202, 64) 15px,
            rgb(254, 206, 72) 16px,
            rgb(255, 208, 69) 17px,
            rgb(218, 165, 8) 18px
        );
}

.gold-hover:hover::after,
.gold-hover:focus-visible::after {
    background-image:
        linear-gradient(to bottom,
            rgb(201, 163, 60) 0px,
            rgb(255, 217, 86) 1px,
            rgb(255, 217, 108) 2px,
            rgb(253, 217, 116) 3px,
            rgb(254, 216, 113) 4px,
            rgb(253, 214, 104) 5px,
            rgb(254, 211, 96) 6px,
            rgb(252, 208, 86) 7px,
            rgb(252, 204, 77) 8px,
            rgb(254, 202, 60) 9px,
            rgb(241, 181, 19) 10px,
            rgb(245, 184, 15) 11px,
            rgb(247, 186, 27) 12px,
            rgb(248, 191, 40) 13px,
            rgb(251, 197, 56) 14px,
            rgb(251, 200, 65) 15px,
            rgb(250, 203, 73) 16px,
            rgb(253, 207, 70) 17px,
            rgb(216, 164, 11) 18px
        ),
        linear-gradient(to bottom,
            rgb(201, 164, 58) 0px,
            rgb(255, 208, 72) 1px,
            rgb(252, 207, 81) 2px,
            rgb(252, 208, 88) 3px,
            rgb(252, 206, 85) 4px,
            rgb(251, 205, 82) 5px,
            rgb(250, 203, 73) 6px,
            rgb(250, 201, 67) 7px,
            rgb(248, 197, 62) 8px,
            rgb(250, 196, 52) 9px,
            rgb(240, 181, 25) 10px,
            rgb(243, 183, 23) 11px,
            rgb(244, 185, 30) 12px,
            rgb(245, 187, 38) 13px,
            rgb(246, 193, 47) 14px,
            rgb(246, 194, 52) 15px,
            rgb(249, 199, 61) 16px,
            rgb(251, 201, 61) 17px,
            rgb(216, 165, 14) 18px
        ),
        linear-gradient(to bottom,
            rgb(181, 150, 70) 0px,
            rgb(191, 151, 46) 1px,
            rgb(189, 150, 51) 2px,
            rgb(187, 150, 53) 3px,
            rgb(185, 148, 51) 4px,
            rgb(185, 148, 49) 5px,
            rgb(189, 150, 49) 6px,
            rgb(187, 150, 46) 7px,
            rgb(191, 151, 46) 8px,
            rgb(192, 150, 41) 9px,
            rgb(194, 152, 36) 10px,
            rgb(196, 151, 34) 11px,
            rgb(193, 151, 35) 12px,
            rgb(193, 150, 37) 13px,
            rgb(192, 151, 39) 14px,
            rgb(191, 149, 42) 15px,
            rgb(198, 158, 53) 16px,
            rgb(191, 152, 44) 17px,
            rgb(191, 153, 40) 18px
        );
}

/* ----- Search button (dark-skin form in navbar) ------------------------ */
.search-button {
    height: var(--btn-height);
    margin: 4px 1px 0 1px;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    width: auto;
    min-width: 0;
    padding: 0 6px 0 8px;
    cursor: default;
    white-space: nowrap;
}

.search-label {
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    flex: 0 0 auto;
    color: var(--btn-text);
    margin-right: 1px;
}

.search-input {
    width: 81px;
    height: 13px;
    margin: 0;
    padding: 0 3px;
    border-top: 1px solid var(--search-input-border-top);
    border-left: 1px solid var(--search-input-border-left);
    border-right: 1px solid var(--search-input-border-right);
    border-bottom: 1px solid var(--search-input-border-bottom);
    background: var(--search-input-bg);
    color: var(--search-input-text);
    outline: none;
    font-size: 11px;
    line-height: 13px;
    font-family: Arial, Helvetica, sans-serif;
}

.search-input:focus,
.search-input:hover,
.search-input:active {
    background: #ffffff;
    color: #000000;
}

.search-go {
    height: 13px;
    min-width: 0;
    padding: 0 5px;
    margin: 0;
    border-top: 1px solid var(--mini-btn-border-light);
    border-left: 1px solid var(--mini-btn-border-light);
    border-right: 1px solid var(--mini-btn-border-dark);
    border-bottom: 1px solid var(--mini-btn-border-dark);
    background: linear-gradient(to bottom,
        var(--mini-btn-top) 0%,
        var(--mini-btn-mid) 58%,
        var(--mini-btn-bottom) 100%
    );
    color: #000000;
    font-size: 10px;
    font-weight: bold;
    line-height: 11px;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    flex: 0 0 auto;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
}

.search-go:hover,
.search-go:focus-visible {
    background: linear-gradient(to bottom,
        #ffffff 0%,
        #d6d6d6 58%,
        #8a8a8a 100%
    );
    color: #000000;
    outline: none;
}

/* ----- JAGEX logo placeholder ------------------------------------------- */
.placeholder-logo {
    margin-left: auto;
    margin-top: 1px;
    min-width: 48px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: Arial Black, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 900;
    color: #ddd;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    background: none;
    border: none;
}

/* ----- Game canvas controls (dynamic from Java, used in fullscreen) ----- */
#game-canvas-controls {
    display: none;
}

/* ----- Game canvas area ------------------------------------------------- */
#game-canvas-wrap {
    display: flex;
    justify-content: center;
    align-content: baseline !important;
    align-items: flex-start;
    width: 100%;
    min-height: calc(100dvh - var(--nav-height) - var(--safe-area-top));
    height: calc(100dvh - var(--nav-height) - var(--safe-area-top));
    background: #000;
    overflow: hidden;
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
    padding-bottom: var(--safe-area-bottom);
}

body.rt4-fullscreen-active #navbar-container-wrap {
    display: none;
}

body.pwa-standalone #navbar-container-wrap {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
}

html.pwa-standalone,
body.pwa-standalone {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.rt4-fullscreen-active #game-canvas-wrap {
    position: fixed;
    inset: 0;
    width: calc(100vw - var(--rt4-plugin-canvas-right-inset, 0px));
    height: 100dvh;
    min-height: 100dvh;
    align-items: stretch;
    padding: 0;
}

body.pwa-standalone #game-canvas-wrap,
:fullscreen #game-canvas-wrap,
:-webkit-full-screen #game-canvas-wrap {
    position: fixed;
    inset: 0;
    width: calc(100vw - var(--rt4-plugin-canvas-right-inset, 0px));
    height: 100dvh;
    min-height: 100dvh;
    align-items: stretch;
    padding: 0;
}

#game-canvas-wrap:fullscreen,
#game-canvas-wrap:-webkit-full-screen,
#game-canvas-wrap:-moz-full-screen,
#game-canvas-wrap:-ms-fullscreen {
    width: calc(100vw - var(--rt4-plugin-canvas-right-inset, 0px));
    height: 100dvh;
    min-height: 100dvh;
    background: #000;
    align-items: stretch;
    padding: 0;
}

#game-canvas-stack {
    position: relative;
    display: inline-block;
    margin-top: var(--rt4-canvas-nav-gap, 5px);
    border: none !important;
    outline: none !important;
}

body.rt4-fullscreen-active #game-canvas-stack,
body.pwa-standalone #game-canvas-stack,
:fullscreen #game-canvas-stack,
:-webkit-full-screen #game-canvas-stack,
#game-canvas-wrap:fullscreen #game-canvas-stack,
#game-canvas-wrap:-webkit-full-screen #game-canvas-stack,
#game-canvas-wrap:-moz-full-screen #game-canvas-stack,
#game-canvas-wrap:-ms-fullscreen #game-canvas-stack {
    margin-top: 0 !important;
}

/* All three canvases in the stack */
#game-canvas-display-gl {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

#game-canvas-display {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
}

#game-canvas {
    position: relative;
    z-index: 2;
    outline: none;
}