/* The gilded template set (WEB-38): the site's gold and bronze from default_new, with one colour per kind of value used
   the same way in every box. Images and plugins stay in /static/default_new/. */

/* Wider Bootstrap tooltip for help icons with multi-line content */
.tooltip-wide .tooltip-inner {
    max-width: 320px;
    text-align: left;
    padding: 0.55rem 0.75rem;
    line-height: 1.4;
}

body {
    /*font-family: "Open Sans", sans-serif;*/
    font-family: Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-weight: normal;
    line-height: 1.5;
    /*color: #fefefe;*/
    /*color: #4d4d4d;*/
    color: #a69d9d;
    -moz-osx-font-smoothing: grayscale;
    background-color: #000000;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    background-attachment: fixed;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url("/static/gilded/img/background-blood-spirit.webp");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    z-index: -2;
    /* more contrast, and a third of the picture's colour, so the boxes stand out */
    filter: contrast(1.2) brightness(1.1) saturate(0.3);
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background:
        /* Enhanced glow overlay with cyan/blue */
        radial-gradient(ellipse at 50% 20%, rgba(0, 255, 255, 0.15) 0%, transparent 50%),
        /* Atmospheric particles effect */
        radial-gradient(circle at 20% 30%, rgba(13, 110, 253, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 80% 25%, rgba(0, 255, 255, 0.08) 0%, transparent 25%),
        /* Smooth gradient fade to black at edges */
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.8) 100%),
        /* Vignette effect */
        radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: -1;
    pointer-events: none;
}

.container {
    max-width: 1440px;
}

.background-default {
    background: #050505 !important;
}

.text-opal-grey {
    color: #a69d9d !important;
}

.text-forest-green {
    color: #645724 !important;
}

.text-earth-black {
    color: #453f37 !important;
}

.text-aqua {
    color: #00ffff !important;
}

.text-warrior {
    color: #7a6759 !important;
}

.text-gold {
    color: #FFD700 !important;
}

.text-silver {
    color: #c1c1c1 !important;
}

.text-shade-gray {
    color: #737373 !important;
}

.text-bronze {
    color: #C9AE5D !important;
}

.bg-forest-green {
    background-color: #645724 !important;
}

.bg-earth-black {
    background-color: #453f37 !important;
}

.fs-7 {
    font-size: 0.8rem !important;
}

.fs-8 {
    font-size: 0.6rem !important;
}

/* Top menu: the logo in the middle of the bar and bigger than it, half the links on each side. The bar keeps the old
   colours and ornament lines. */
.evo-nav {
    --evo-bar-h: 3.5rem;
    --evo-logo-w: 270px;
    padding: 3.4rem 0 0;
    margin-bottom: 4.5rem;
}

.evo-nav-bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: var(--evo-bar-h);
    padding: 0 4px;
    background: var(--evo-frame), #0e110f;
}

.evo-nav-logo {
    position: absolute;
    z-index: 3;
    top: calc(var(--evo-bar-h) / 2);
    left: 50%;
    width: var(--evo-logo-w);
    transform: translate(-50%, -50%);
    line-height: 0;
}

/* a dark halo, so the logo stands out from the background picture */
.evo-nav-logo::before {
    content: "";
    position: absolute;
    inset: -14% -10%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent);
    pointer-events: none;
}

.evo-nav-logo img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .85));
    transition: transform .25s ease;
}

.evo-nav-logo:hover img, .evo-nav-logo:focus-visible img {
    transform: scale(1.04);
}

#main-navigation .nav-item {
    display: flex;
    align-items: center;
    font-family: var(--evo-f-title);
    text-transform: uppercase;
}

#main-navigation .nav-link {
    display: block;
    color: #9f9270;
    padding: .7rem .75rem;
    line-height: 1;
    letter-spacing: .5px;
    white-space: nowrap;
}

#main-navigation .nav-link:hover, #main-navigation .nav-item.active > .nav-link {
    color: #b2a88d;
    background-color: #201b0efa;
}

#main-navigation .nav-link.evo-staff {
    color: var(--evo-yellow);
}

@media (min-width: 992px) {
    /* three columns: the logo in the middle one, so it can't cover a link. Both sides take the same width while their
       links fit, which keeps the logo in the middle; a side with more links than room pushes it, never under it. */
    .evo-nav-bar {
        display: grid;
        grid-template: var(--evo-bar-h) / 1fr auto 1fr;
        grid-template-areas: "left logo right";
        column-gap: .75rem;
        height: var(--evo-bar-h);
    }

    .evo-nav.navbar-expand-lg .navbar-collapse {
        display: contents !important;
    }

    .evo-nav-logo {
        grid-area: logo;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        /* as tall as the bar for the grid, the rest hangs over it */
        margin-block: calc((var(--evo-bar-h) - var(--evo-logo-w) * 326 / 640) / 2);
    }

    .evo-nav-left, .evo-nav-right {
        align-items: center;
    }

    .evo-nav-left {
        grid-area: left;
        justify-content: flex-end;
    }

    .evo-nav-right {
        grid-area: right;
    }

    /* a small diamond between two links */
    #main-navigation .nav-item + .nav-item::before {
        content: "";
        flex: none;
        width: 5px;
        height: 5px;
        margin: 0 .15rem;
        transform: rotate(45deg);
        background: var(--evo-line-gold);
    }
}

/* the staff links show only their icon on a short bar, and only their name on a long one */
@media (min-width: 992px) and (max-width: 1299.98px) {
    #main-navigation .evo-staff .evo-nav-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (min-width: 1300px) {
    #main-navigation .evo-staff .fa {
        display: none;
    }
}

@media (min-width: 992px) and (max-width: 1499.98px) {
    .evo-nav {
        --evo-logo-w: 250px;
    }

    #main-navigation .nav-link {
        padding: .7rem .55rem;
        font-size: .9rem;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .evo-nav {
        --evo-logo-w: 200px;
    }

    #main-navigation .nav-link {
        padding: .7rem .4rem;
        font-size: .8rem;
    }
}

@media (max-width: 991.98px) {
    .evo-nav {
        --evo-logo-w: 180px;
        padding-top: 1.4rem;
        margin-bottom: 2rem;
    }

    .evo-nav .navbar-toggler {
        height: var(--evo-bar-h);
        border: 0;
    }

    /* the open menu starts below the logo; the spacing is on the lists, since Bootstrap animates the collapse's height */
    .evo-nav-left {
        padding-top: 1.75rem;
    }

    .evo-nav-right {
        padding-bottom: .5rem;
    }

    #main-navigation .nav-link {
        flex: 1;
        padding: .8rem 1rem;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .evo-nav-logo img {
        transition: none;
    }
}

.side-menu li a:hover {
    background-color: #453f37 !important;
    color: #ececec !important;
}

.list-group li.active a {
    background-color: #453f37 !important;
    color: #ececec !important;
}

.module {
    font-size: .9rem;
    position: relative;
    background: rgba(2, 2, 2, .7);
}

.module::before, .module::after, #main-navigation ul.module::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: url("/static/default_new/img/border-med.png") no-repeat center top;
    z-index: 2;
}

.module-header::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    height: 3px;
    background: url("/static/default_new/img/border-med.png") no-repeat center top;
    top: auto;
    bottom: -3px;
}

.module-header {
    background: #070707;
    padding: 10px 20px;
    position: relative;
}

.module-header h5 {
    font-family: var(--evo-f-title);
    font-size: .9rem;
    color: var(--evo-title);
    text-shadow: 0 0 12px rgba(230, 202, 122, .25);
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    margin: 0;
}

/* Events (WEB-32): the sidebar box (.ev-box) and the week page (.ev-page), moved here from default_new's
   events-style.html (WEB-39) with its colours mapped onto the palette: live is the palette's green */
.ev .ev-title {
    font-family: var(--evo-f-title);
    color: var(--evo-gold);
    letter-spacing: .5px;
}

.ev a.ev-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.ev a.ev-link:hover {
    color: var(--evo-strong);
}

.ev time.ev-has-local {
    cursor: help;
}

.ev .ev-dot {
    flex: none;
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--evo-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--evo-green) 20%, transparent);
}

.ev .ev-sub {
    margin: .6rem 0 .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--evo-gold-dim);
}

.ev .ev-none {
    font-size: .8rem;
    color: var(--evo-muted);
}

.ev-box .ev-now {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    margin-bottom: .5rem;
    font-size: .8rem;
    color: var(--evo-text);
    background: color-mix(in srgb, var(--evo-green) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--evo-green) 28%, transparent);
    border-radius: .3rem;
}

.ev-box .ev-now b {
    color: var(--evo-strong);
    font-weight: 600;
}

.ev-box .ev-now .ev-end {
    margin-left: auto;
    white-space: nowrap;
    color: var(--evo-green);
}

.ev-box .ev-big {
    text-align: center;
    padding: .75rem .6rem .7rem;
    margin-bottom: .55rem;
    border: 1px solid var(--evo-line-gold);
    border-radius: .35rem;
    background: radial-gradient(ellipse at top, #2a2312 0%, #0f0d08 75%);
}

.ev-box .ev-big .ev-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--evo-gold-dim);
}

.ev-box .ev-big .ev-title {
    display: block;
    margin: .2rem 0 .55rem;
    font-size: 1.35rem;
    line-height: 1.2;
}

.ev-box .ev-digits {
    display: flex;
    justify-content: center;
    gap: .35rem;
}

.ev-box .ev-digits > span {
    min-width: 3.1rem;
    padding: .3rem .2rem .2rem;
    border-radius: .3rem;
    background: #070605;
    border: 1px solid #3b3320;
    line-height: 1.1;
}

.ev-box .ev-digits b {
    display: block;
    color: var(--evo-strong);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.ev-box .ev-digits small {
    display: block;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--evo-muted);
}

.ev-box .ev-started-text {
    display: none;
    font-size: 1rem;
    font-weight: 700;
    color: var(--evo-green);
}

.ev-box .ev-started .ev-digits {
    display: none;
}

.ev-box .ev-started .ev-started-text {
    display: block;
}

.ev-box .ev-at {
    margin-top: .5rem;
    font-size: .78rem;
    color: var(--evo-muted);
}

.ev-box .ev-chips {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ev-box .ev-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .35rem .55rem;
    border-radius: .3rem;
    background: linear-gradient(to bottom, #1c1b1a 0%, #110f0f 100%);
    border: 1px solid #2a2620;
    font-size: .8rem;
    color: var(--evo-text);
}

.ev-box .ev-chip time {
    flex: none;
    padding: .05rem .45rem;
    border-radius: 1rem;
    background: #2a2414;
    color: var(--evo-gold);
    font-weight: 700;
    font-size: .75rem;
    white-space: nowrap;
}

.ev-box .ev-chip .bi {
    color: var(--evo-gold-dim);
    font-size: .75rem;
    margin-left: .2rem;
}

.ev-page .ev-tz {
    margin: 0 0 .75rem;
    font-size: .85rem;
    color: var(--evo-muted);
}

.ev-page .ev-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding: .6rem .85rem;
    margin-bottom: 1.25rem;
    font-size: .88rem;
    color: var(--evo-text);
    border: 1px solid var(--evo-line-gold);
    border-radius: .35rem;
    background: linear-gradient(to bottom, #1d190e 0%, #100e08 100%);
}

.ev-page .ev-strip > span {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.ev-page .ev-strip b {
    color: var(--evo-strong);
    font-weight: 600;
}

.ev-page .ev-strip .bi {
    color: var(--evo-gold);
}

.ev-page .ev-sec {
    margin: 1.25rem 0 .6rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--evo-gold-dim);
}

.ev-page .ev-daily {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ev-page .ev-drow {
    display: grid;
    grid-template-columns: 15rem 1fr;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    background: linear-gradient(to bottom, #1c1b1a 0%, #110f0f 100%);
    border: 1px solid #2a2620;
    border-radius: .35rem;
}

.ev-page .ev-drow .ev-title {
    font-size: 1.02rem;
}

.ev-page .ev-drow small {
    display: block;
    font-size: .74rem;
    color: var(--evo-muted);
}

.ev-page .ev-drow small.ev-note, .ev-page .ev-item .ev-note {
    color: var(--evo-gold-dim);
    font-style: italic;
}

.ev-page .ev-times {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ev-page .ev-t {
    padding: .12rem .5rem;
    border-radius: 1rem;
    background: #1f1b10;
    border: 1px solid #3b3320;
    color: var(--evo-gold);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.ev-page .ev-t.ev-past {
    color: #6e675a;
    border-color: #262320;
    background: transparent;
}

.ev-page .ev-t.ev-live {
    color: #10200e;
    background: var(--evo-green);
    border-color: var(--evo-green);
    font-weight: 700;
}

.ev-page .ev-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.ev-page .ev-day {
    min-height: 11rem;
    padding: .5rem;
    border: 1px solid #2a2620;
    border-radius: .35rem;
    background: rgba(15, 14, 13, .85);
}

.ev-page .ev-day.ev-today {
    border-color: var(--evo-gold);
    box-shadow: 0 0 14px rgba(230, 202, 122, .15);
}

.ev-page .ev-day h6 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .25rem;
    margin: 0 0 .5rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid #2a2620;
    font-size: .8rem;
    color: var(--evo-gold-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ev-page .ev-day h6 small {
    color: var(--evo-muted);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.ev-page .ev-today h6 {
    color: var(--evo-gold);
}

.ev-page .ev-item {
    margin-bottom: .45rem;
    padding: .35rem .45rem;
    border-left: 2px solid var(--evo-line-gold);
    background: #161411;
    border-radius: 0 .25rem .25rem 0;
}

.ev-page .ev-item .ev-item-times {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    color: var(--evo-gold);
    font-variant-numeric: tabular-nums;
}

.ev-page .ev-item .ev-item-times time {
    white-space: nowrap;
}

.ev-page .ev-item .ev-item-name {
    display: block;
    font-size: .8rem;
    line-height: 1.25;
    color: var(--evo-text);
}

.ev-page .ev-item small {
    display: block;
    margin-top: 2px;
    font-size: .7rem;
    line-height: 1.25;
    color: var(--evo-muted);
}

.ev-page .ev-item.ev-live {
    border-left-color: var(--evo-green);
    background: color-mix(in srgb, var(--evo-green) 7%, transparent);
}

.ev-page .ev-item.ev-live .ev-item-times {
    color: var(--evo-green);
}

.ev-page .ev-item.ev-past {
    opacity: .45;
}

.ev-page .ev-season {
    margin: 1.1rem 0 0;
    font-size: .82rem;
    color: var(--evo-muted);
}

@media (max-width: 1199px) {
    .ev-page .ev-week {
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    }
}

@media (max-width: 991px) {
    .ev-page .ev-drow {
        grid-template-columns: 1fr;
        gap: .4rem;
    }
}

@media (max-width: 767px) {
    .ev-page .ev-week {
        grid-template-columns: 1fr;
    }

    .ev-page .ev-day {
        min-height: 0;
    }
}

.module-header h5::first-letter {
    font-size: 130%;
    padding-right: 2px
}

.module-header small {
    display: block;
    font-size: 10px;
    margin-top: 5px;
    text-transform: none;
}

.module-header::first-letter {
    font-size: 130%;
    padding-right: 2px
}

.module .card-body {
    box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.1);
}

.module::after {
    top: auto;
    bottom: -3px;
}

.module .list-group li {
    display: block;
    background: #1e1e1d;
    background: linear-gradient(to bottom, #1e1e1d 0%, #110f0f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color1', endColorstr='$color2', GradientType=0);
    box-shadow: inset 0 5px 15px -5px #000;
    font-size: .8rem;
    border: 1px solid #1f1d1b;
    border-bottom: 1px solid #10100f;
}

.module .list-group li a {
    text-decoration: none;
    display: block;
    padding: 0.3rem 1rem;
    color: #b8b8b8;
    font-size: 0.8rem;
}

.carousel .carousel-item {
    height: 290px;
}

.server-time {
    margin-top: 10px;
    font-size: .8rem;
    color: #a69d9d;
    background: #141414;
    border-radius: 300rem;
    padding: 5px 15px;
}

.server-time span {
    display: block;
    float: right;
    color: #a69d9d;
}

.server-stats {
    border: 1px solid #0b0d11;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.5);
    background: #423e33;
    background: linear-gradient(135deg, #423e33 0%, #14130f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color1', endColorstr='$color2', GradientType=1);
    border-radius: 5px;
}

.server-stats ul {
    display: block;
    list-style: none;
}

.server-stats ul li {
    height: 25px;
    line-height: 25px;
    font-size: .7rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.server-stats ul li .right-info {
    display: block;
    float: right;
    background: rgba(0, 0, 0, 0.25);
    width: 100px;
    color: #fff;
    text-align: center;
    height: 25px;
    line-height: 25px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: 2px;
    box-shadow: inset 0 1px 1px 0 #000, 0 0 1px 0 rgba(255, 255, 255, 0.5);
    border-radius: 300rem;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
}

.vote-button {
    border: 0;
    display: block;
    position: relative;
    font-size: .8rem;
    margin-top: -35px;
    background: #46832e;
    background: linear-gradient(to bottom, #46832e 0%, #2a4f1c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color1', endColorstr='$color2', GradientType=0);
    box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
    letter-spacing: 2px;
    /*font-weight: 800;*/
}

.vote-msg {
    font-size: .7rem;
}

.copyright {
    padding: 23px 0px 20px;
    margin: 0px 0px 3px;
    position: relative;
    font-size: .8rem;
    font-weight: 600;
    color: var(--evo-muted);
}

.copyright::before, .copyright::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    background: url("/static/default_new/img/border-footer.png") no-repeat center top;
    height: 3px;
}

.copyright::after {
    top: auto;
    bottom: -3px;
}

.footer-menu {
    font-size: .8rem;
}

.footer-menu .nav-link {
    color: var(--evo-muted);
}

.footer-menu .nav-link:hover {
    color: var(--evo-gold);
}

.news-table {
    color: #4e4a39;
    font-size: .8rem;
    margin-bottom: 3px;
}

.news-table td {
    color: var(--evo-muted);
    padding: 5px 0;
    border-bottom: 1px dotted #4d4737;
    background: transparent;
}

.news-table th {
    color: #4e4a39 !important;
    background: transparent;
}

.news-table a {
    color: #c2bba8;
    text-decoration: none;
}

.news-table a:hover {
    color: var(--evo-gold);
}

/* A category tag in a list (the home page's News): quieter than the titles, the same for every category */
.news-table a.evo-tag {
    color: var(--evo-gold-dim);
}

.news-table a.evo-tag:hover {
    color: var(--evo-gold);
}

/* The coins log (gilded/profile/coins-log.html): the coins and the date on the right */
.evo-coins-head th:nth-child(n+2), .evo-coins-row td:nth-child(n+2) {
    text-align: right;
    white-space: nowrap;
}

/* The password checker (gilded/forms/password_validator.html): a bar of one segment per rule, red until met, green
   after; the rules still missing and the mismatch note in the palette's red */
.evo-pw-strength {
    display: flex;
    gap: 3px;
    height: 6px;
    margin-bottom: 6px;
}

.evo-pw-segment {
    flex: 1;
    border-radius: 2px;
    background-color: var(--evo-red);
    transition: background-color .15s ease;
}

.evo-pw-segment.is-met {
    background-color: var(--evo-green);
}

.evo-pw-missing {
    font-size: .85em;
}

.evo-pw-rules {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--evo-red);
}

.evo-pw-mismatch {
    font-size: .85em;
    color: var(--evo-red);
}

/* An account page's form (gilded/profile/): a column of fields in the middle of the box */
.evo-account-form {
    max-width: 34rem;
    margin: 0 auto;
}

/* Form fields (gilded/forms/form.html): an error and a correct field in the palette's red and green */
[data-bs-theme=dark] {
    --bs-form-invalid-color: var(--evo-red);
    --bs-form-invalid-border-color: var(--evo-red);
    --bs-form-valid-color: var(--evo-green);
    --bs-form-valid-border-color: var(--evo-green);
}

/* a text field or a dropdown in the palette (owner, 2026-10-20): black, the thin gold edge at 3:1, light text, gold
   on focus. An invalid one keeps Bootstrap's red edge (.form-control.is-invalid outranks these, so none here names it). */
.form-control, .form-select {
    border-color: #a08a52;
    background-color: #0e110f;
    color: var(--evo-strong);
}

.form-control::placeholder {
    color: var(--evo-muted);
}

.form-control:focus, .form-select:focus {
    border-color: var(--evo-gold);
    background-color: #0e110f;
    color: var(--evo-strong);
    box-shadow: 0 0 0 .2rem rgba(230, 202, 122, .25);
}

/* a disabled one dims: no gold edge, muted text, a darker fill (the palette's one would look like a field to type in) */
.form-control:disabled, .form-select:disabled {
    border-color: var(--evo-line-gold);
    background-color: #161714;
    color: var(--evo-muted);
}

/* a link in a checkbox's label (the register form's terms and privacy, plain <a> in its help text) like evo-link */
.form-check-label a {
    color: var(--evo-cyan);
}

.form-check-label a:hover {
    color: var(--evo-strong);
}

/* a checkbox, radio or switch: its edge at 3:1 on the black like a field's (#a08a52), filled in gold when on, and its
   mark black where Bootstrap draws a white one, at Bootstrap's own specificity so it wins (white on gold is 1.6:1) */
.form-check-input {
    border-color: #a08a52;
    background-color: #0e110f;
}

.form-check-input:checked {
    background-color: var(--evo-gold);
    border-color: var(--evo-gold);
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230e110f' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230e110f'/%3e%3c/svg%3e");
}

.form-check-input[type=checkbox]:indeterminate {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230e110f' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    background-color: var(--evo-gold);
    border-color: var(--evo-gold);
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230e110f'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    border-color: var(--evo-gold);
    box-shadow: 0 0 0 .2rem rgba(230, 202, 122, .25);
}

.has-tip {
    border-bottom: dotted 1px #8a8a8a;
    font-weight: bold;
    cursor: help;
}

/* Downloads (gilded/downloads.html, WEB-42): the tabs (one per game client), a tab's notice, the rows that download
   a file or open a window of files, the window, and the computer specs. From default_new's page, on the palette; the
   two greys of the small texts (#998f7b, #a39a83) are its own, above 4.5:1 where --evo-muted isn't on these fills. */
.download-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--evo-line-gold);
    border-radius: .4rem;
    background: linear-gradient(to bottom, #1e1e1d 0%, #110f0f 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 0 18px rgba(0, 0, 0, .7);
}

.download-tab {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: .3rem;
    min-width: 9rem;
    padding: .8rem 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    background: transparent;
    color: var(--evo-gold-dim);
    line-height: 1.2;
    transition: background-color .15s, color .15s;
}

.download-tab-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.download-tab-subtitle {
    font-size: .85rem;
    font-weight: 600;
    color: #a39a83;
}

.download-tab:hover {
    background: rgba(201, 174, 93, .08);
    color: var(--evo-strong);
}

.download-tab:hover .download-tab-subtitle {
    color: #c4bba2;
}

/* the open tab in gold leaf, its text dark */
.download-tab.active {
    border-color: #f6e3a6;
    background: linear-gradient(to bottom, #f7e6ad 0%, #e6ca7a 50%, #cdae5c 100%);
    box-shadow: 0 0 16px rgba(201, 174, 93, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
    color: #1a1406;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.download-tab.active .download-tab-subtitle {
    color: #2a1f06;
}

.download-tab:focus-visible {
    outline: 2px solid var(--evo-gold-hi);
    outline-offset: 2px;
}

.download-tab-content {
    margin-top: 1.5rem;
}

.download-notice p:last-child, .download-notice ul:last-child {
    margin-bottom: 0;
}

.download-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 1.75rem 0 2rem;
    text-align: left;
}

.download-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid #2a2620;
    border-radius: .4rem;
    background: linear-gradient(to bottom, #1e1e1d 0%, #110f0f 100%);
    box-shadow: inset 0 5px 15px -5px #000;
    color: var(--evo-strong);
    font: inherit;
    text-align: left;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.download-row:hover {
    border-color: #a08a52;
    box-shadow: inset 0 5px 15px -5px #000, 0 0 14px rgba(201, 174, 93, .2);
    color: #fff;
}

.download-row:focus-visible, .download-file .download-row-action:focus-visible {
    outline: 2px solid var(--evo-gold-hi);
    outline-offset: 2px;
}

.download-row-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--evo-line-gold);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #3a321c, #15120a);
    color: var(--evo-gold);
    font-size: 1.15rem;
}

.download-row-text {
    flex: 1;
    min-width: 0;
}

.download-row-name {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.download-row-meta {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
    color: #998f7b;
}

/* Download: the page's own action, in gold leaf; a window's Open in a thin gold edge */
.download-row-action {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: .4rem;
    padding: .45rem .95rem;
    border: 1px solid #f6e3a6;
    border-radius: .3rem;
    background: linear-gradient(to bottom, #f7e6ad 0%, #e6ca7a 50%, #cdae5c 100%);
    color: #1a1406;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
    text-transform: uppercase;
}

.download-row:hover .download-row-action, a.download-row-action:hover {
    color: #1a1406;
    filter: brightness(1.06);
}

.download-row-action.download-row-open {
    border-color: #a08a52;
    background: transparent;
    color: var(--evo-gold);
    text-shadow: none;
}

.download-row:hover .download-row-open {
    border-color: var(--evo-gold);
    color: var(--evo-gold-hi);
    filter: none;
}

/* a window of files (a Bootstrap modal; its close button is light by the dark theme) */
.download-window .modal-content {
    border: 1px solid var(--evo-line-gold);
    border-radius: .4rem;
    background: #070707;
    box-shadow: 0 0 45px rgba(0, 0, 0, .9), inset 0 0 15px rgba(255, 255, 255, .06);
    color: var(--evo-text);
}

.download-window .modal-header {
    position: relative;
    padding: .95rem 1.25rem;
    border-bottom: 0;
}

.download-window .modal-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -3px;
    left: 0;
    height: 3px;
    background: url("/static/default_new/img/border-med.png") no-repeat center top;
}

.download-window .modal-title {
    font-family: var(--evo-f-title);
    font-size: 1.05rem;
    color: var(--evo-title);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.download-window .modal-title::first-letter {
    font-size: 130%;
}

.download-window-count {
    display: block;
    margin-top: 4px;
    font-family: var(--evo-f-ui);
    font-size: .75rem;
    color: #998f7b;
    letter-spacing: 0;
    text-transform: none;
}

.download-window .modal-body {
    padding: 1.1rem 1.25rem 1.25rem;
}

.download-files {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.download-file {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .75rem;
    border: 1px solid #24211c;
    border-radius: .3rem;
    background: linear-gradient(to bottom, #1a1a19 0%, #100e0e 100%);
}

.download-file-name {
    flex: 1;
    min-width: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--evo-text);
    overflow-wrap: anywhere;
}

.download-file-size {
    font-size: .8rem;
    color: #998f7b;
    white-space: nowrap;
}

/* A palette table (evo-table: the computer specs, the coins log): no fill of its own, thin dark lines, a gold line
   under the head, striped rows, a cell in its colour with an evo-c-* class */
.evo-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--evo-text);
    --bs-table-border-color: #2a2620;
    margin-bottom: 0;
    color: var(--evo-text);
    font-size: .85rem;
}

.evo-table thead th {
    border-bottom-color: var(--evo-line-gold);
    color: var(--evo-strong);
    font-weight: 600;
}

.evo-table [class*="evo-c-"] {
    color: var(--c);
}

.evo-table tbody tr:nth-child(odd) > * {
    background-color: var(--evo-row);
}

/* the computer specs: centred, a row's name in gold, the minimum in yellow, the recommended in green */
.evo-specs {
    text-align: center;
}

.evo-specs tbody th {
    color: var(--evo-gold-dim);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .download-row {
        gap: .75rem;
        padding: .7rem .8rem;
    }

    .download-row-action {
        padding: .5rem .7rem;
    }

    .download-row-label {
        display: none;
    }
}

.nice-table {
    background: none;
    border: none;
    font-size: .8rem;
}

.nice-table thead, .nice-table tfoot {
    background: #141414;
    border: none;
}

.nice-table th {
    color: #4e4a39;
    padding: 20px 0;
}

.nice-table thead tr th {
    border-right: 1px solid #262626;
}

.nice-table tbody {
    background: #1b1b1b;
    border: none;
}

.nice-table td {
    color: #b8b8b8;
    border-bottom: 1px solid #262626;
    padding: 7px 0;
}

.nice-table td, .nice-table th {
    background: transparent;
}


.nice-table tbody tr td:first-child {
    background: #141414;
    font-weight: 600;
}

.nice-table tbody tr td:nth-child(2) {
    border-right: 1px solid #262626
}

.nice-table tbody tr:last-child td {
    border-bottom: none;
    border-right: none;
}

.nice-table tbody tr:nth-child(even) {
    background: none;
}

.nice-table tbody tr:hover {
    background: #1f1f1f;
}

.itemshop-listing-thumbnail {
    display: block;
    float: left;
    margin-right: 10px;
    width: 53px;
    height: 53px;
    position: relative;
}

.itemshop-listing-thumbnail img {
    display: block;
    width: 49px;
    height: 49px;
    position: absolute;
    top: 2px;
    left: 2px
}

.itemshop-listing {
    font-size: .8rem;
    margin-top: 20px;
}

.itemshop-listing h6 {
    font-weight: 600;
    padding: 0px;
    margin: 0px;
    line-height: 1;
    font-size: 1rem;
    margin-bottom: 3px
}

.itemshop-listing h6 a {
    color: #645724
}

.itemshop-listing p {
    padding: 0px;
    margin: 0px;
    color: #7a6759;
    font-size: .7rem
}

.form-group.required .control-label:after {
    content: "*";
    color: red;
}

/* Page numbers (gilded/base/pagination.html): gold on the buttons' black, the current page in gold leaf. A phone shows
   one page each side of the current one, so the row fits (owner, 2026-10-19): evo-page-far is what only a computer
   shows, evo-page-gap the … only a phone shows in its place. */
.pagination .evo-page-gap {
    display: none;
}

@media (max-width: 575.98px) {
    .pagination .evo-page-far {
        display: none;
    }

    .pagination .evo-page-gap {
        display: block;
    }
}

.pagination .page-link {
    color: var(--evo-gold);
    background-color: #0e110f;
    border-color: #a08a52;  /* the outline button's edge: 3:1 or more, as a control's edge must be */
}

.pagination .page-link:hover, .pagination .page-link:focus {
    color: var(--evo-gold-hi);
    background-color: #201b0e;
    border-color: var(--evo-gold);
}

.pagination .page-link.active {
    color: #241806;
    background-color: var(--evo-gold);
    border-color: var(--evo-gold-hi);
}

.pagination .page-item.disabled .page-link {
    color: var(--evo-muted);
    background-color: #0e110f;
    border-color: var(--evo-line-gold);
}

.hr-text {
    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    color: black;
    height: 1.5em;
    opacity: .5;
}

.hr-text::before {
    content: '';
    /*background: linear-gradient(to right, transparent, #818078, transparent);*/
    position: absolute;
    left: 0;
    top: 50%;
    /*width: 100%;*/
    height: 1px;
    background: #41403c;
}

.hr-text::after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    padding: 0 .5em;
    line-height: 1.5em;
    color: #818078;
    background-color: #fcfcfa;
}

.carousel-control-next, .carousel-control-prev {
    top: 130px;
    height: 5%;
    width: 5%;
    margin-right: 35px;
    margin-left: 35px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    position: relative;
    top: -10px;
    display: grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border: 1.5px solid var(--evo-gold);
    border-radius: 50%;
    background: rgba(0, 0, 0, .65);
    color: var(--evo-gold);
}

.carousel-control-prev-icon::before, .carousel-control-next-icon::before {
    font: 900 1rem/1 "Font Awesome 6 Free";
}

.carousel-control-prev-icon::before {
    content: "\f053";
}

.carousel-control-next-icon::before {
    content: "\f054";
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.blink {
    animation: blinker 2s linear infinite;
}

.highlight {
    font-weight: bold;
}

/* The boxes' shared parts (WEB-38): the site's gold and bronze, and one colour per kind of value, used the same way in
   every widget: green online, live and vote; blue, cyan and gray for facts; yellow for points; red for what's off. */
:root {
    --evo-title: #e6ca7a;
    --evo-gold: #e6ca7a;
    --evo-gold-hi: #f3dc98;
    --evo-gold-dim: #b4a98a;
    --evo-copper: #cc8844;
    --evo-line-gold: #5a4a2c;
    --evo-rank-gold: #ffd700;
    --evo-silver: #c1c1c1;
    --evo-bronze: #cd7f32;
    --evo-green: #34d058;
    --evo-blue: #4c9bff;
    --evo-cyan: #22d3ee;
    --evo-gray: #9aa3ab;
    --evo-red: #f0525f;
    --evo-yellow: #ffc83d;
    --evo-discord: #7983f5;
    --evo-text: #ddd6c4;
    --evo-strong: #f6f1e3;
    --evo-muted: #8e8468;
    --evo-row: rgba(255, 255, 255, .025);
    /* Cinzel is only 0-9 here (gilded/base/base.html), so the digits sit on the line; the letters are Quintessential */
    --evo-f-title: 'Cinzel', 'Quintessential', cursive;
    --evo-f-ui: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
    /* the ornament lines around the top menu bar, also worn by the buttons */
    --evo-frame:
        url("/static/default_new/img/border-nav.png") left top / auto 5px repeat-x,
        url("/static/default_new/img/border-nav.png") left bottom / auto 5px repeat-x,
        url("/static/default_new/img/border-nav2.png") left top / 4px auto repeat-y,
        url("/static/default_new/img/border-nav2.png") right top / 4px auto repeat-y;
}

.tooltip img {
    vertical-align: middle;
}

/* Beside the news the sidebars follow the page: one that fits stays under the window's top, a taller one scrolls until
   its last box shows and then stays. --evo-sidebar-h comes from content-mid.html; without it top is auto, no pinning.
   100svh is the window with a tablet's toolbars shown, so they never cover that box; 100vh for older browsers. */
@media (min-width: 992px) {
    .evo-sidebar {
        position: sticky;
        top: min(2rem, 100vh - var(--evo-sidebar-h) - 1rem);
        top: min(2rem, 100svh - var(--evo-sidebar-h) - 1rem);
    }
}

.module {
    color: var(--evo-text);
}

.module-header h5 > i:first-child {
    margin-right: .15rem;
    font-size: .9em;
    color: var(--c, var(--evo-gold));
}

/* One colour per kind of value */
.evo-c-green {
    --c: var(--evo-green);
}

.evo-c-blue {
    --c: var(--evo-blue);
}

.evo-c-cyan {
    --c: var(--evo-cyan);
}

.evo-c-gray {
    --c: var(--evo-gray);
}

.evo-c-red {
    --c: var(--evo-red);
}

.evo-c-yellow {
    --c: var(--evo-yellow);
}

.evo-c-discord {
    --c: var(--evo-discord);
}

i[class*="evo-c-"] {
    color: var(--c);
}

/* A fact on a coloured stripe, as in Server status */
.evo-stripe {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .32rem .6rem;
    border-left: 2px solid var(--c);
    background: color-mix(in srgb, var(--c) 9%, transparent);
    font-size: .82rem;
    color: var(--evo-text);
}

.evo-stripe + .evo-stripe {
    margin-top: 4px;
}

.evo-stripe i {
    width: 16px;
    color: var(--c);
}

.evo-stripe dt {
    font-weight: 400;
}

.evo-stripe dd {
    margin: 0;
    font-weight: 700;
    color: var(--c);
}

/* A notification (gilded/base/notifications.html): its colour, from an evo-c-* class, on the edge and the icon */
/* the whole box in its colour, so it stands out from the page (owner, 2026-10-20; a thin line on black read as part
   of it): a tint behind, an edge around and a thicker one on the left, a glow; an error's tint the strongest. The text
   stays light, above 4.5:1 on every tint. */
.evo-alert {
    --evo-alert-tint: 14%;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .5rem 0 .75rem;
    padding: .8rem 1rem;
    border: 1px solid var(--c);
    border-left-width: 4px;
    border-radius: .35rem;
    background-color: color-mix(in srgb, var(--c) var(--evo-alert-tint), #0e110f);
    box-shadow: 0 0 14px color-mix(in srgb, var(--c) 30%, transparent);
    color: var(--evo-strong);
    font-size: .92rem;
}

.evo-alert.evo-c-red {
    --evo-alert-tint: 22%;
    font-weight: 600;
}

.evo-alert-title {
    display: block;
}

.evo-alert > i {
    flex: none;
    font-size: 1.25rem;
    color: var(--c);
}

/* The big number of the page not found (gilded/404.html) */
.evo-404 {
    font-family: var(--evo-f-title);
    font-size: 6rem;
    line-height: 1;
    color: var(--evo-title);
}

/* A number in its colour */
.evo-badge {
    display: inline-block;
    min-width: 2.1rem;
    margin: 0;
    padding: .2rem .45rem;
    border: 1px solid color-mix(in srgb, var(--c, var(--evo-gold)) 45%, transparent);
    border-radius: .35rem;
    background: color-mix(in srgb, var(--c, var(--evo-gold)) 15%, transparent);
    color: var(--c, var(--evo-gold));
    font: 700 .75rem/1.1 var(--evo-f-ui);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.evo-link {
    color: var(--evo-cyan);
}

.evo-link:hover {
    color: var(--evo-strong);
}

.evo-label {
    margin-bottom: .5rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--evo-muted);
}

.evo-inset {
    padding: .55rem .75rem;
    border-radius: .3rem;
    background: var(--evo-row);
}

.evo-pill {
    display: inline-block;
    padding: .2rem .5rem;
    border-radius: .35rem;
    background: rgba(154, 163, 171, .2);
    font-size: .72rem;
    font-weight: 700;
    color: var(--evo-strong);
    white-space: nowrap;
}

.evo-dot {
    flex: none;
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--evo-green);
    box-shadow: 0 0 0 3px rgba(52, 208, 88, .2), 0 0 8px var(--evo-green);
}

.evo-empty {
    padding: 1rem 0;
    text-align: center;
    color: var(--evo-muted);
}

.evo-empty p {
    margin: .5rem 0 0;
    font-size: .85rem;
}

.evo-help {
    cursor: help;
    border-bottom: 1px dotted;
}

.evo-help-icon {
    position: relative;
    top: -2px;
    margin-left: .25rem;
    font-size: .75em;
    color: var(--evo-gray);
    cursor: help;
}

/* Buttons: gold leaf to donate, the menu bar's frame for the others, green to vote (all in the menu's letters),
   Discord's blue to join it */
.btn-evo-discord {
    --bs-btn-font-weight: 600;
    font-family: var(--evo-f-ui);
}

/* disabled: Bootstrap paints --bs-btn-disabled-*, which only its own colours define; ours keep theirs, dimmed by it */
.btn-evo-gold, .btn-evo-dark, .btn-evo-outline, .btn-evo-green, .btn-evo-discord {
    --bs-btn-disabled-color: var(--bs-btn-color);
    --bs-btn-disabled-bg: var(--bs-btn-bg);
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
}

/* the green too: Vote and Vote shop sit side by side in one font (owner, WEB-50) */
.btn-evo-gold, .btn-evo-dark, .btn-evo-outline, .btn-evo-green {
    --bs-btn-font-weight: 400;
    --bs-btn-focus-shadow-rgb: 230, 202, 122;
    font-family: var(--evo-f-title);
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.btn-evo-gold {
    --bs-btn-color: #241806;
    --bs-btn-bg: #d9b866;
    --bs-btn-border-color: var(--evo-gold-hi);
    --bs-btn-hover-color: #1a1104;
    --bs-btn-hover-bg: #e6ca7a;
    --bs-btn-hover-border-color: #fff1c4;
    --bs-btn-active-color: #1a1104;
    --bs-btn-active-bg: #c9a65c;
    --bs-btn-active-border-color: #b8944f;
    --bs-btn-border-radius: 4px;
    /* gold leaf shading evenly from top to bottom: two golds close together drew a line across it (owner, 2026-10-20) */
    background-image: linear-gradient(to bottom, #f6e3a6 0%, #e6ca7a 40%, #d2b26a 75%, #b8944f 100%);
    box-shadow: 0 0 0 1px #2a2110, 0 2px 6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
    text-shadow: 0 1px 0 rgba(255, 240, 200, .45);
}

.btn-evo-gold:hover {
    background-image: linear-gradient(to bottom, #fbecc0 0%, #efd48c 40%, #ddbd74 75%, #c4a058 100%);
    box-shadow: 0 0 0 1px #2a2110, 0 0 14px rgba(230, 202, 122, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.btn-evo-gold:active {
    background-image: linear-gradient(to bottom, #a8843f 0%, #c9a65c 48%, #e6ca7a 100%);
}

.btn-evo-dark {
    --bs-btn-color: var(--evo-gold);
    --bs-btn-bg: #0e110f;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--evo-gold-hi);
    --bs-btn-hover-bg: #0e110f;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--evo-gold-hi);
    --bs-btn-active-bg: #0e110f;
    --bs-btn-active-border-color: transparent;
    --bs-btn-border-radius: 0;
    --evo-btn-fill: linear-gradient(to bottom, #2a2312 0%, #0e110f 100%);
    background: var(--evo-frame), var(--evo-btn-fill);
    background-origin: border-box;
    text-shadow: 0 0 8px rgba(230, 202, 122, .35);
}

.btn-evo-dark:hover {
    --evo-btn-fill: linear-gradient(to bottom, #4d3f1d 0%, #221c0d 100%);
    box-shadow: 0 0 14px rgba(230, 202, 122, .3);
    text-shadow: 0 0 10px rgba(243, 220, 152, .6);
}

.btn-evo-dark:active {
    --evo-btn-fill: linear-gradient(to bottom, #0e110f 0%, #2a2312 100%);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}

/* the quieter one next to a framed button (Create new under Log in): a thin gold edge, no frame */
.btn-evo-outline {
    --bs-btn-color: var(--evo-gold);
    --bs-btn-bg: #0e110f;
    --bs-btn-border-color: #a08a52;
    --bs-btn-hover-color: var(--evo-gold-hi);
    --bs-btn-hover-bg: #201b0e;
    --bs-btn-hover-border-color: var(--evo-gold-hi);
    --bs-btn-active-color: var(--evo-gold-hi);
    --bs-btn-active-bg: #2a2312;
    --bs-btn-active-border-color: var(--evo-gold);
    --bs-btn-border-radius: 0;
}

.btn-evo-outline:hover {
    box-shadow: 0 0 12px rgba(230, 202, 122, .25);
}

/* keyboard focus keeps Bootstrap's ring when the mouse is over the button too, instead of the hover glow */
.btn-evo-gold:hover:focus-visible, .btn-evo-dark:hover:focus-visible, .btn-evo-outline:hover:focus-visible {
    box-shadow: var(--bs-btn-focus-box-shadow);
}

/* every shade of its fill keeps the white label at 4.5:1 or more, hovered and pressed too */
.btn-evo-green {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2b7a37;
    --bs-btn-border-color: rgba(52, 208, 88, .5);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2f8240;
    --bs-btn-hover-border-color: rgba(52, 208, 88, .8);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #226b2f;
    --bs-btn-active-border-color: rgba(52, 208, 88, .8);
    --bs-btn-focus-shadow-rgb: 52, 208, 88;
    background-image: linear-gradient(to bottom, #2f8240 0%, #226b2f 100%);
    box-shadow: 0 0 8px rgba(40, 167, 69, .4);
}

.btn-evo-green:hover {
    background-image: linear-gradient(to bottom, #348541 0%, #277334 100%);
}

.btn-evo-green:active {
    background-image: linear-gradient(to bottom, #24702f 0%, #1b5726 100%);
}

.btn-evo-discord {
    --bs-btn-color: #fff;
    --bs-btn-bg: #5865f2;
    --bs-btn-border-color: #7983f5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4752c4;
    --bs-btn-hover-border-color: #7983f5;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3c45a5;
    --bs-btn-active-border-color: #7983f5;
    --bs-btn-focus-shadow-rgb: 88, 101, 242;
    box-shadow: 0 0 10px rgba(88, 101, 242, .35);
}

/* Ranks 1 to 3: gold, silver, bronze */
.evo-rank-1 {
    --evo-rank: var(--evo-rank-gold);
}

.evo-rank-2 {
    --evo-rank: var(--evo-silver);
}

.evo-rank-3 {
    --evo-rank: var(--evo-bronze);
}

.evo-rank-n {
    font-weight: 700;
    color: var(--evo-rank, var(--evo-gray));
    font-variant-numeric: tabular-nums;
}

/* Discord */
.evo-discord-online {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: .7rem;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--evo-text);
}

.evo-discord-online b {
    font: 700 1.5rem/1 var(--evo-f-ui);
    letter-spacing: 1px;
    color: var(--evo-strong);
    font-variant-numeric: tabular-nums;
}

.evo-discord-members {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 .85rem;
    padding: 0;
    list-style: none;
}

.evo-discord-members li {
    position: relative;
    width: 32px;
    height: 32px;
    margin-left: -6px;
    border-radius: 50%;
    background: #1e1f22;
    box-shadow: 0 0 0 2px #0b0b0b;
}

.evo-discord-members li:first-child {
    margin-left: 0;
}

.evo-discord-members img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.evo-discord-members li::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border: 2px solid #0b0b0b;
    border-radius: 50%;
    background: var(--evo-green);
}

.evo-discord-members .evo-status-idle::after {
    background: var(--evo-yellow);
}

.evo-discord-members .evo-status-dnd::after {
    background: var(--evo-red);
}

.evo-discord-members .evo-discord-more {
    display: grid;
    place-items: center;
    width: auto;
    min-width: 32px;
    margin-left: 6px;
    padding: 0 .5rem;
    border-radius: 50rem;
    background: rgba(88, 101, 242, .2);
    box-shadow: none;
    font-size: .75rem;
    font-weight: 700;
    color: var(--evo-strong);
}

.evo-discord-members .evo-discord-more::after {
    content: none;
}

/* My account */
.evo-account-user {
    margin-bottom: 1rem;
    text-align: center;
}

.evo-account-name {
    font-weight: 600;
    color: var(--evo-strong);
}

.evo-account-user small {
    font-size: .72rem;
    color: var(--evo-muted);
}

/* A note in a box, under what it explains */
.evo-muted {
    color: var(--evo-muted);
}

.evo-account-stats {
    display: flex;
    justify-content: space-around;
    margin: .5rem 0 0;
    padding-top: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.evo-account-stats div {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: .2rem;
}

.evo-account-stats dt {
    font-size: .68rem;
    font-weight: 400;
    color: var(--evo-muted);
}

.evo-menu {
    --bs-list-group-bg: var(--evo-row);
    --bs-list-group-color: var(--evo-text);
    --bs-list-group-border-width: 0;
    --bs-list-group-item-padding-x: .6rem;
    --bs-list-group-item-padding-y: .45rem;
    --bs-list-group-action-color: var(--evo-text);
    --bs-list-group-action-hover-color: var(--evo-strong);
    --bs-list-group-action-hover-bg: rgba(230, 202, 122, .08);
    --bs-list-group-action-active-color: var(--evo-strong);
    --bs-list-group-action-active-bg: rgba(230, 202, 122, .12);
    --bs-list-group-active-color: var(--evo-gold-hi);
    --bs-list-group-active-bg: rgba(230, 202, 122, .12);
    --bs-list-group-active-border-color: transparent;
    gap: 2px;
}

.evo-menu .list-group-item {
    font-size: .85rem;
}

.evo-menu .list-group-item i {
    width: 1.3rem;
    color: var(--c, var(--evo-muted));
}

/* PvP top 5 */
.evo-highlight {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.evo-highlight-text {
    flex: 1;
    min-width: 0;
}

.evo-highlight-text small {
    display: block;
    font-size: .7rem;
    color: var(--evo-muted);
}

.evo-highlight-text a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    color: var(--evo-blue);
    text-decoration: none;
}

.evo-highlight-text a:hover {
    color: var(--evo-strong);
}

.evo-ranks {
    display: grid;
    gap: 2px;
}

.evo-rank {
    display: grid;
    grid-template-columns: 1.7rem 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    border-left: 3px solid var(--evo-rank, transparent);
    background: var(--evo-row);
    color: var(--evo-text);
    text-decoration: none;
}

.evo-rank:hover {
    background: rgba(230, 202, 122, .07);
    color: var(--evo-strong);
}

.evo-rank-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
}

.evo-rank-score {
    padding: .2rem .45rem;
    border: 1px solid rgba(230, 202, 122, .35);
    border-radius: .35rem;
    background: rgba(230, 202, 122, .12);
    font-size: .75rem;
    font-weight: 700;
    color: var(--evo-gold-hi);
    font-variant-numeric: tabular-nums;
}

/* Donate */
.evo-donate {
    text-align: center;
}

.evo-donate h4 {
    font-family: var(--evo-f-title);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--evo-title);
    text-shadow: 0 0 14px rgba(230, 202, 122, .25);
}

.evo-donate p {
    color: var(--evo-strong);
}

/* Server status */
.evo-online {
    margin-bottom: .6rem;
    padding: .55rem .5rem;
    border: 1px solid rgba(40, 167, 69, .3);
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(40, 167, 69, .1) 0%, rgba(40, 167, 69, .05) 100%);
    box-shadow: 0 0 10px rgba(40, 167, 69, .2);
    text-align: center;
}

.evo-online-count {
    font: 700 1.5rem/1.3 var(--evo-f-ui);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--evo-green);
    text-shadow: 0 0 8px rgba(40, 167, 69, .5);
}

.evo-online-meta {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .75rem;
    color: var(--evo-muted);
}

.evo-online-meta b {
    font-weight: 700;
    color: var(--evo-yellow);
}

.evo-online-meta b.show-server-time {
    color: var(--evo-cyan);
}

.evo-online.offline {
    border-color: rgba(240, 82, 95, .35);
    background: linear-gradient(135deg, rgba(220, 53, 69, .12) 0%, rgba(220, 53, 69, .05) 100%);
    box-shadow: 0 0 10px rgba(220, 53, 69, .2);
}

.evo-online.offline .evo-online-count {
    color: var(--evo-red);
    text-shadow: 0 0 8px rgba(220, 53, 69, .5);
}

.evo-facts {
    margin: 0;
}

.evo-off {
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
}

.evo-off .evo-stripe {
    justify-content: flex-start;
    color: var(--c);
}

/* Races/classes' hint: a class without an icon yet (1.8.9's new ones, WEB-60) keeps its name in line with the others */
.evo-class-blank {
    display: inline-block;
    width: 16px;
    height: 16px;
}

/* The vote box under Server status (base/vote-box.html, WEB-50): a visitor's invitation, set like Donate today; a
   player's sites with their reward and Ready or the wait, how many more the vote page has, and Vote and Vote shop
   side by side */
.evo-vote-invite {
    text-align: center;
}

.evo-vote-invite h4 {
    font-family: var(--evo-f-title);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--evo-title);
    text-shadow: 0 0 14px rgba(230, 202, 122, .25);
}

.evo-vote-invite p {
    color: var(--evo-strong);
}

.evo-vote-invite .evo-vote-double {
    margin: -.25rem 0 .9rem;
    font-size: .8rem;
    color: var(--evo-green);
}

.evo-vote-count {
    margin-left: .4rem;
    vertical-align: 2px;
}

.evo-vote-wait {
    margin: 0 0 .7rem;
    font-size: .78rem;
    color: var(--evo-yellow);
}

.evo-vote-sites {
    margin: 0 0 .9rem;
    padding: 0;
    list-style: none;
}

.evo-vote-sites li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .1rem;
    border-bottom: 1px solid #2a2620;
    font-size: .85rem;
    color: var(--evo-strong);
}

.evo-vote-sites li:last-child {
    border-bottom: 0;
}

.evo-vote-sites small {
    font-size: .72rem;
    color: var(--evo-muted);
}

.evo-vote-left {
    font: 600 .8rem var(--evo-f-ui);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--evo-gold-dim);
}

.evo-vote-more {
    margin: -.4rem 0 .8rem;
    font-size: .8rem;
    text-align: center;
    color: var(--evo-text);
}

.evo-vote-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

/* Top factions */
.evo-factions {
    display: grid;
    gap: 2px;
    container-type: inline-size;
}

.evo-factions-head, .evo-factions .faction-row {
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr) 3.1rem 2.3rem 2.4rem;
    align-items: center;
    gap: .3rem;
    padding: .45rem .5rem;
    border-left: 3px solid var(--evo-rank, transparent);
}

.evo-factions-head {
    background: rgba(255, 255, 255, .05);
    font-size: .68rem;
    font-weight: 500;
    color: var(--evo-muted);
    white-space: nowrap;
}

.evo-factions-head span:nth-child(n+3), .evo-factions .faction-row > span:nth-child(n+3) {
    text-align: center;
}

.evo-factions .faction-row {
    background: var(--evo-row);
}

.evo-factions .evo-badge {
    min-width: 2rem;
}

.evo-faction-name {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    font-size: .85rem;
    color: var(--evo-text);
}

.evo-faction-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evo-faction-name img {
    flex: none;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* a narrow box (the sidebar below about 1400px) leaves Members out, so the names keep their room */
@container (max-width: 18.5rem) {
    .evo-factions-head, .evo-factions .faction-row {
        grid-template-columns: 1.7rem minmax(0, 1fr) 2.3rem 2.4rem;
    }

    .evo-col-members {
        display: none;
    }
}

/* Rankings: Top 5 PvP and Top factions as the two tabs of one box, in the top menu's letters and colours */
.evo-rankings {
    container-type: inline-size;
}

.evo-tabs {
    display: flex;
    margin: 0;
    padding: 0 .75rem;
    border-bottom: 1px solid var(--evo-line-gold);
    list-style: none;
}

.evo-tabs .nav-item {
    flex: 1 1 0;
    min-width: 0;
}

.evo-tabs .nav-link {
    width: 100%;
    margin-bottom: -1px;
    padding: .6rem .25rem .5rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: #9f9270;
    font-family: var(--evo-f-title);
    font-size: .95rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.evo-tabs .nav-link > i {
    color: var(--c, currentColor);
}

.evo-tabs .nav-link:hover {
    color: #b2a88d;
    background-color: #201b0efa;
}

.evo-tabs .nav-link:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(230, 202, 122, .6);
}

.evo-tabs .nav-link.active {
    border-bottom-color: var(--evo-gold);
    background-color: #201b0efa;
    color: var(--evo-gold);
}

/* a narrow box (the sidebar below about 1300px): smaller letters, no icons */
@container (max-width: 18rem) {
    .evo-tabs {
        padding: 0 .4rem;
    }

    .evo-tabs .nav-link {
        font-size: .78rem;
    }

    .evo-tabs .nav-link > i {
        display: none;
    }
}

/* The Rankings page (gilded/rankings.html, WEB-42): Top 50 PvP and Top factions as two tabs, one address each; a
   tab's line (its period or its rule), its totals, then its rows, each with its rank's colour on the left edge. The
   box lays itself out by its own width (a tablet's page column is narrow too). */
.evo-ranking-page {
    container: ranking / inline-size;
}

.evo-ranking-page .evo-tabs {
    padding: 0 1rem;
}

.evo-ranking-period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
    color: var(--evo-muted);
    font-size: .85rem;
}

.evo-ranking-period > span:last-child {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.evo-ranking-period .form-select {
    width: auto;
}

.evo-ranking-totals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}

.evo-ranking-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .6rem .5rem;
    border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
    border-radius: .35rem;
    background: color-mix(in srgb, var(--c) 8%, transparent);
    text-align: center;
}

.evo-ranking-total b {
    font-size: 1.4rem;
    color: var(--c);
    font-variant-numeric: tabular-nums;
}

.evo-ranking-total span {
    font-size: .75rem;
    color: var(--evo-muted);
}

.evo-ranking-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}

.evo-ranking-highlight {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.evo-ranking-highlight > div {
    flex: 1;
    min-width: 0;
}

.evo-ranking-highlight .evo-label {
    display: block;
    margin-bottom: .1rem;
}

.evo-ranking-highlight a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    color: var(--evo-strong);
    text-decoration: none;
}

.evo-ranking-highlight a:hover {
    color: var(--evo-gold);
}

.evo-ranking-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.evo-ranking-row {
    display: grid;
    grid-template-columns: 2.5rem 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .55rem .9rem;
    border-left: 3px solid var(--evo-rank, transparent);
    border-radius: .25rem;
    background: var(--evo-row);
}

.evo-ranking-row:hover {
    background: rgba(230, 202, 122, .06);
}

.evo-ranking-row .evo-rank-n {
    font-size: 1.05rem;
}

.evo-ranking-who {
    min-width: 0;
}

.evo-ranking-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--evo-strong);
    text-decoration: none;
}

a.evo-ranking-name:hover {
    color: var(--evo-gold);
}

.evo-rank-1 .evo-ranking-name, .evo-rank-2 .evo-ranking-name, .evo-rank-3 .evo-ranking-name {
    color: var(--evo-rank);
}

.evo-ranking-sub {
    display: block;
    font-size: .78rem;
    color: var(--evo-muted);
}

.evo-ranking-figures {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.1rem;
    text-align: center;
}

.evo-ranking-figure {
    display: flex;
    flex-direction: column;
    min-width: 2.75rem;
}

.evo-ranking-figure b {
    font-size: 1rem;
    color: var(--c, var(--evo-strong));
    font-variant-numeric: tabular-nums;
}

.evo-ranking-figure small {
    font-size: .68rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--evo-muted);
}

/* a player's page (gilded/pvp-rankings-role.html): the way back, then each battle with its edge in its result's
   colour (a kill green, a death red), the player's own name in gold */
.evo-ranking-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .75rem;
    color: var(--evo-gold-dim);
    font-size: .85rem;
    text-decoration: none;
}

.evo-ranking-back:hover, .evo-ranking-back:focus-visible {
    color: var(--evo-gold);
}

.evo-battle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .55rem .9rem;
    border-left: 3px solid var(--c);
    border-radius: .25rem;
    background: var(--evo-row);
}

.evo-battle-side {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.evo-battle-victim {
    justify-content: flex-end;
    text-align: right;
}

.evo-battle-side > a, .evo-battle-side > strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evo-battle a {
    font-weight: 600;
    color: var(--evo-strong);
    text-decoration: none;
}

.evo-battle a:hover, .evo-battle a:focus-visible {
    color: var(--evo-gold);
}

.evo-battle-self {
    color: var(--evo-gold);
}

.evo-battle-vs {
    font-size: 1.1rem;
    color: var(--evo-muted);
    text-align: center;
}

.evo-battle-result {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .2rem;
    min-width: 5.5rem;
}

.evo-battle time {
    font-size: .78rem;
    color: var(--evo-muted);
}

/* a narrow box (a tablet's page column, a phone): the highlights one under the other, a row's figures on a line of
   their own, three to a row; narrower still, the totals two by two */
@container ranking (max-width: 44rem) {
    .evo-ranking-highlights {
        grid-template-columns: minmax(0, 1fr);
    }

    .evo-ranking-row {
        grid-template-columns: 2rem 28px minmax(0, 1fr);
        gap: .5rem .6rem;
    }

    .evo-ranking-figures {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .evo-battle {
        grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr);
        gap: .5rem;
    }

    .evo-battle-result {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@container ranking (max-width: 32rem) {
    .evo-ranking-totals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The player's panel (gilded/panel/, WEB-43): a box per part with its title in the title letters, then each page's
   own parts: the account's facts and its latest coins, the vote sites */
.evo-panel-box {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--evo-line-gold);
    border-radius: .35rem;
    background-color: #0e110f;
}

.evo-panel-box:last-child {
    margin-bottom: 0;
}

.evo-panel-title {
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #2a2620;
    font-family: var(--evo-f-title);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: .5px;
    color: var(--evo-title);
}

.evo-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #2a2620;
}

.evo-panel-head .evo-panel-title {
    margin: 0;
    padding: 0;
    border: 0;
}

.evo-panel-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.evo-account-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
    margin: 0 0 1rem;
}

.evo-account-facts dt {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--evo-muted);
}

.evo-account-facts dd {
    margin: 0;
    font-size: .9rem;
    font-weight: 500;
    color: var(--evo-strong);
    overflow-wrap: anywhere;
}

.evo-activity {
    margin: 0;
    padding: 0;
    list-style: none;
}

.evo-activity-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid #2a2620;
}

.evo-activity-row:last-child {
    border-bottom: 0;
}

.evo-activity-date {
    min-width: 6.5rem;
    font-size: .75rem;
    white-space: nowrap;
    color: var(--evo-muted);
}

.evo-activity-desc {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
    color: var(--evo-text);
}

.evo-activity-coins {
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--c);
}

/* what a panel page's header holds at its right: the coins (under the title on a phone) */
.evo-head-aside {
    position: absolute;
    top: 50%;
    right: .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    transform: translateY(-50%);
}

.evo-head-aside .evo-badge {
    margin-left: .35rem;
}

.evo-head-coins {
    margin: 0;
    font-family: var(--evo-f-title);
    font-size: .8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--evo-gold-dim);
}

/* the vote page: the sites that pay in a table under what can be collected now, the others as cards */
.evo-vote-page {
    container: votepage / inline-size;
}

.evo-vote-group {
    margin-top: 1.25rem;
}

.evo-vote-reason {
    margin: -.5rem 0 .8rem;
    font-size: .85rem;
    color: var(--evo-text);
}

.evo-vote-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 2rem;
    margin: 0 0 1rem;
    padding: .65rem 1rem;
    border: 1px solid rgba(52, 208, 88, .35);
    border-radius: .35rem;
    background-color: rgba(40, 167, 69, .08);
    font-size: .9rem;
    color: var(--evo-text);
}

.evo-vote-summary b {
    font-size: 1.1rem;
    color: var(--evo-green);
}

.evo-vote-summary .is-time b {
    font-variant-numeric: tabular-nums;
    color: var(--evo-strong);
}

.evo-vote-table {
    width: 100%;
    border: 1px solid var(--evo-line-gold);
    border-radius: .35rem;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background-color: #0e110f;
}

.evo-vote-table th {
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--evo-line-gold);
    background-color: var(--evo-row);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-align: left;
    color: var(--evo-gold-dim);
}

.evo-vote-table td {
    padding: .6rem 1rem;
    border-bottom: 1px solid #2a2620;
    vertical-align: middle;
}

.evo-vote-table tr:last-child td {
    border-bottom: 0;
}

.evo-vote-table .evo-vote-action {
    width: 14rem;
    text-align: center;
}

.evo-vote-site {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.evo-vote-logo {
    flex: none;
    width: 100px;
    height: 50px;
    object-fit: contain;
    border: 1px solid #2a2620;
    border-radius: 3px;
    background-color: #050605;
}

.evo-vote-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--evo-gold-dim);
}

.evo-vote-interval {
    font-size: .9rem;
    white-space: nowrap;
    color: var(--evo-text);
}

.evo-vote-reward {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--evo-strong);
}

.evo-vote-reward > i {
    font-size: 1.25rem;
    color: var(--evo-yellow);
}

.evo-vote-reward s {
    font-weight: 600;
    text-decoration-color: var(--evo-red);
    text-decoration-thickness: 2px;
    color: var(--evo-text);
}

.evo-vote-reward s + span {
    color: var(--evo-green);
}

.evo-vote-voted {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    white-space: nowrap;
}

.evo-vote-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.evo-vote-timer b {
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--evo-strong);
}

.evo-vote-timer small {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--evo-muted);
}

/* a site voted on steps back until its next vote */
.is-voted .evo-vote-logo {
    opacity: .55;
}

.is-voted .evo-vote-name {
    color: var(--evo-muted);
}

.evo-vote-others {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.evo-vote-other {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--evo-line-gold);
    border-radius: .35rem;
    background-color: #0e110f;
}

.evo-vote-other-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.evo-vote-other-text .evo-vote-interval {
    font-size: .82rem;
}

/* a middle column (a laptop, 992 to 1199px wide): the table at least 759px wide spilled out of its 686px, so the
   logos shrink, Voted sits above its wait and the cells close up, down to 624px (codex, WEB-43) */
@container votepage (max-width: 800px) {
    .evo-vote-table th, .evo-vote-table td {
        padding-right: .75rem;
        padding-left: .75rem;
    }

    .evo-vote-table .evo-vote-action {
        width: auto;
    }

    .evo-vote-logo {
        width: 72px;
        height: 36px;
    }

    .evo-vote-voted {
        flex-direction: column;
        gap: .3rem;
    }
}

/* a narrow column (a tablet, a phone): each site stacked, its button the row's width; the column titles stay for a
   screen reader */
@container votepage (max-width: 640px) {
    .evo-vote-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .evo-vote-table, .evo-vote-table tbody, .evo-vote-table tr, .evo-vote-table td {
        display: block;
    }

    .evo-vote-table tr {
        display: grid;
        grid-template-areas: "site site" "interval reward" "action action";
        grid-template-columns: 1fr auto;
        gap: .5rem;
        padding: .85rem;
        border-bottom: 1px solid #2a2620;
    }

    .evo-vote-table tr:last-child {
        border-bottom: 0;
    }

    .evo-vote-table td {
        padding: 0;
        border: 0;
    }

    .evo-vote-table td:nth-child(1) {
        grid-area: site;
    }

    .evo-vote-table td:nth-child(2) {
        grid-area: interval;
        align-self: center;
    }

    .evo-vote-table td:nth-child(3) {
        grid-area: reward;
    }

    .evo-vote-table td.evo-vote-action {
        grid-area: action;
        width: auto;
    }

    .evo-vote-action .btn, .evo-vote-other .btn {
        width: 100%;
    }

    .evo-vote-logo {
        width: 100px;
        height: 50px;
    }

    .evo-vote-voted {
        flex-direction: row;
        justify-content: center;
        gap: .6rem;
        width: 100%;
    }

    .evo-vote-others {
        grid-template-columns: 1fr;
    }

    .evo-vote-summary {
        gap: .35rem 1.25rem;
        font-size: .85rem;
    }
}

@media (max-width: 575.98px) {
    .evo-head-aside {
        position: static;
        justify-content: center;
        margin-top: .5rem;
        transform: none;
    }
}

/* an item sent to a character (the vote and donate shops): the character, then a row per item with its Get button */
.evo-send-role {
    max-width: 26rem;
    margin: 0 auto 1.25rem;
}

.evo-items {
    margin: 0;
    padding: 0;
    border: 1px solid var(--evo-line-gold);
    border-radius: .35rem;
    background-color: #0e110f;
    list-style: none;
}

.evo-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid #2a2620;
}

.evo-item:last-child {
    border-bottom: 0;
}

.evo-item-icon {
    flex: none;
    width: 44px;
    height: 44px;
    object-fit: contain;
    border: 1px solid #2a2620;
    border-radius: 3px;
    background-color: #050605;
}

.evo-item-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.evo-item-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--evo-strong);
}

.evo-item-meta {
    font-size: .8rem;
    color: var(--evo-text);
}

.evo-item-cost {
    font-weight: 700;
    white-space: nowrap;
    color: var(--evo-strong);
}

.evo-item-cost > i {
    color: var(--evo-yellow);
}

/* the donate page: a card per way to donate, side by side where there's room, its button at its foot; then when the
   Cubi arrive and the bonuses by the amount */
.evo-donate-lead {
    margin: 0 0 1rem;
    text-align: center;
    color: var(--evo-strong);
}

.evo-donate-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-bottom: .5rem;
}

.evo-donate-method {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
    margin: 0;
    padding: 1.25rem;
    border: 1px solid var(--evo-line-gold);
    border-radius: .35rem;
    background-color: #0e110f;
}

.evo-donate-method > .btn {
    margin-top: auto;
}

.evo-donate-method .evo-alert {
    margin: 0;
    padding: .55rem .75rem;
    font-size: .8rem;
}

.evo-donate-method .evo-alert > i {
    font-size: 1rem;
}

/* a card's heading is its way's logo, on a band of one height so both cards' texts start level; PayPal's picture is
   drawn for a light page (its dark blue would vanish on black), so it sits on a light plate */
.evo-donate-logo {
    display: flex;
    align-items: center;
    min-height: 4.25rem;
    margin: 0;
}

.evo-donate-logo img {
    display: block;
    max-width: 100%;
    height: auto;
}

.evo-donate-plate {
    display: block;
    min-width: 0;
    max-width: min(15rem, 100%);
    padding: .45rem .6rem;
    border-radius: .3rem;
    background-color: var(--evo-strong);
}

.evo-donate-logo > img {
    width: 11rem;
}

.evo-donate-text {
    margin: 0;
    font-size: .9rem;
    color: var(--evo-text);
}

.evo-donate-bonus td {
    color: var(--evo-text);
    font-size: .95rem;
}

.evo-donate-bonus td:last-child, .evo-donate-bonus th:last-child {
    text-align: right;
}

.evo-donate-bonus td:last-child {
    font-weight: 700;
}

.evo-donate-bonus s {
    font-weight: 400;
    color: var(--evo-gold-dim);
}

/* on the way to PayPal */
.evo-handoff {
    margin: 1.5rem 0;
    font-size: 1rem;
    color: var(--evo-strong);
}

.evo-handoff > i {
    margin-right: .4rem;
    color: var(--evo-gold);
}

/* a phone: an item's Get button on a line of its own */
@media (max-width: 575.98px) {
    .evo-item {
        flex-wrap: wrap;
    }

    .evo-item .btn {
        width: 100%;
    }
}

/* a phone: an activity's text on a line of its own */
@media (max-width: 575.98px) {
    .evo-activity-row {
        flex-wrap: wrap;
    }

    .evo-activity-desc {
        flex-basis: 100%;
        order: 3;
        white-space: normal;
    }
}

/* Knowledge base (knowledge_base/templates/gilded/kb/, WEB-39): the header with the search, the featured guides, the
   categories. Fills are the buttons' black (#0e110f); text and edges from the palette. */
.evo-kb-header {
    position: relative;
    padding: 2.5rem 2rem 2rem;
}

.evo-kb-title {
    margin-bottom: .75rem;
    font-family: var(--evo-f-title);
    font-size: 2rem;
    font-weight: 400;
    color: var(--evo-title);
}

.evo-kb-new {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* one frame with the thin gold edge of a field (#a08a52, 3:1 on the black) holding the magnifier, the field and a gold
   Search button set inside it (owner's picture, 2026-10-20); the field's focus shows on the frame */
.evo-kb-search {
    display: flex;
    align-items: center;
    gap: .25rem;
    width: 60%;
    margin: 0 auto;
    padding: .3rem .3rem .3rem 1.1rem;
    border: 1px solid #a08a52;
    border-radius: var(--bs-border-radius);
    background-color: #0e110f;
}

.evo-kb-search:focus-within {
    border-color: var(--evo-gold);
    box-shadow: 0 0 0 .2rem rgba(230, 202, 122, .2);
}

.evo-kb-search-icon {
    flex: none;
    font-size: 1.1rem;
    color: var(--evo-gold);
}

.evo-kb-search .form-control {
    flex: 1 1 auto;
    min-width: 0;
    padding: .5rem .75rem;
    text-overflow: ellipsis;
    border: 0;
    background-color: transparent;
    color: var(--evo-strong);
}

.evo-kb-search .form-control::placeholder {
    color: var(--evo-muted);
}

.evo-kb-search .form-control:focus {
    box-shadow: none;
}

.evo-kb-search .btn {
    flex: none;
    padding: .5rem 1.75rem;
}

.evo-kb-section {
    margin: 0 0 .9rem;
    font-family: var(--evo-f-title);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--evo-title);
}

.evo-kb-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
}

.evo-kb-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.1rem .9rem;
    border: 1px solid var(--evo-line-gold);
    border-radius: .35rem;
    background-color: #0e110f;
    color: var(--evo-strong);
    text-align: center;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}

.evo-kb-feature:hover, .evo-kb-feature:focus-visible {
    border-color: var(--evo-gold);
    color: var(--evo-strong);
    transform: translateY(-3px);
}

.evo-kb-feature > i {
    margin-bottom: .2rem;
    font-size: 1.6rem;
}

.evo-kb-feature-title {
    font-weight: 600;
}

.evo-kb-feature-text {
    font-size: .8rem;
    color: var(--evo-muted);
}

/* four categories to a row on a computer (owner, 2026-10-20), two on a tablet, one on a phone */
.evo-kb-categories {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

@media (max-width: 991.98px) {
    .evo-kb-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .evo-kb-categories {
        grid-template-columns: minmax(0, 1fr);
    }
}

.evo-kb-category {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--evo-line-gold);
    border-radius: .35rem;
    background-color: #0e110f;
}

.evo-kb-category h3 {
    margin-bottom: .75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--evo-strong);
}

.evo-kb-category h3 i {
    margin-right: .35rem;
    color: var(--evo-gold-dim);
}

.evo-kb-list {
    flex: 1;
    align-self: stretch;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

/* an empty category's line takes the list's place, so its button sits as low as the others */
.evo-kb-category > p {
    flex: 1;
    margin-bottom: 1rem;
    font-size: .85rem;
}

.evo-kb-list li {
    padding: .45rem 0;
    border-bottom: 1px solid #2a2620;
}

.evo-kb-list li:last-child {
    border-bottom: 0;
}

/* one line each, cut with … where the box ends; the whole title on hover (title) */
.evo-kb-list a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--evo-text);
    font-size: .85rem;
    text-decoration: none;
}

.evo-kb-list a:hover {
    color: var(--evo-gold);
}

.evo-kb-list a i {
    margin-right: .4rem;
    color: var(--evo-muted);
}

@media (max-width: 767.98px) {
    .evo-kb-search {
        width: 100%;
    }

    .evo-kb-header {
        padding: 3.5rem 1rem 1.5rem;
    }

    .evo-kb-search {
        padding-left: .8rem;
    }

    .evo-kb-search .form-control {
        padding-left: .5rem;
        padding-right: .25rem;
    }

    .evo-kb-search .btn {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* The knowledge base's lists beside its widgets (kb/content-left.html): a page's title on the background, the article
   rows, the categories' grid (as many 15rem columns as fit beside the widgets), the widgets. */
.evo-kb-page-header {
    margin: .25rem 0 1.25rem;
    text-shadow: 0 2px 4px #000;
}

.evo-kb-page-title {
    margin-bottom: .35rem;
    font-family: var(--evo-f-title);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--evo-title);
}

.evo-kb-page-title i {
    margin-right: .35rem;
    font-size: .8em;
    color: var(--evo-gold-dim);
}

.evo-kb-page-text {
    margin-bottom: 0;
    color: var(--evo-text);
}

.evo-kb-found {
    margin: .5rem 0 0;
    padding: .6rem 1rem;
    border: 1px solid var(--evo-line-gold);
    border-radius: .35rem;
    background-color: #0e110f;
    color: var(--evo-gold-dim);
    font-size: .9rem;
    text-shadow: none;
}

.evo-kb-found strong {
    color: var(--evo-strong);
}

.evo-kb-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.evo-kb-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .6rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--evo-line-gold);
    border-radius: .35rem;
    background-color: #0e110f;
    transition: border-color .2s ease, transform .2s ease;
}

.evo-kb-row:hover, .evo-kb-row:focus-within {
    border-color: var(--evo-gold);
    transform: translateX(4px);
}

.evo-kb-row-info {
    min-width: 0;
}

.evo-kb-row-title {
    display: block;
    margin-bottom: .3rem;
    font-weight: 600;
    color: var(--evo-strong);
    text-decoration: none;
}

.evo-kb-row:hover .evo-kb-row-title {
    color: var(--evo-gold);
}

.evo-kb-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    font-size: .8rem;
    color: var(--evo-muted);
}

.evo-kb-row-meta i, .evo-kb-row-stats i {
    margin-right: .2rem;
}

.evo-kb-pill {
    padding: .1rem .55rem;
    border: 1px solid var(--evo-line-gold);
    border-radius: .25rem;
    background-color: #1a1710;
    color: var(--evo-gold-dim);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* the same widths on every row, so the icons line up down the list */
.evo-kb-row-stats {
    display: flex;
    flex-shrink: 0;
    gap: .75rem;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    color: var(--evo-muted);
}

.evo-kb-row-stats > span {
    min-width: 3.5rem;
}

.evo-kb-row-stats > span:last-child {
    min-width: 2.75rem;
}

.evo-kb-pages {
    margin-top: 1.5rem;
}

.evo-kb-empty > i {
    font-size: 2.5rem;
}

.evo-kb-empty h3 {
    margin: .75rem 0 .25rem;
    font-size: 1.15rem;
    color: var(--evo-strong);
}

.evo-kb-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .75rem;
}

/* the name, its count of articles under it */
.evo-kb-category-head {
    margin-bottom: .75rem;
}

.evo-kb-category-head h3 {
    margin-bottom: .15rem;
}

.evo-kb-count {
    color: var(--evo-muted);
    font-size: .78rem;
}

.evo-kb-widget {
    margin: 0;
    padding: 0;
    list-style: none;
}

.evo-kb-widget li + li {
    border-top: 1px solid #2a2620;
}

.evo-kb-widget-link {
    display: block;
    padding: .5rem .25rem;
    color: var(--evo-text);
    font-size: .85rem;
    text-decoration: none;
}

.evo-kb-widget-link:hover, .evo-kb-widget-link:focus-visible {
    color: var(--evo-gold);
}

.evo-kb-widget-categories .evo-kb-widget-link {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.evo-kb-widget-link > i {
    color: var(--evo-gold-dim);
}

.evo-kb-widget-count {
    margin-left: auto;
    padding: 0 .5rem;
    border-radius: 1rem;
    background-color: #1a1710;
    color: var(--evo-gold-dim);
    font-size: .72rem;
}

.evo-kb-widget-meta {
    display: flex;
    justify-content: space-between;
    margin-top: .2rem;
    font-size: .72rem;
    color: var(--evo-muted);
}

.evo-kb-widget-meta i {
    margin-right: .2rem;
}

@media (max-width: 575.98px) {
    .evo-kb-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
    }
}

.evo-kb-widget-more {
    display: block;
    margin-top: .25rem;
    padding: .5rem .25rem .25rem;
    border-top: 1px solid #2a2620;
    color: var(--evo-gold-dim);
    font-size: .8rem;
    text-align: center;
    text-decoration: none;
}

.evo-kb-widget-more:hover, .evo-kb-widget-more:focus-visible {
    color: var(--evo-gold);
}

/* An article (kb/single-article.html): its title and the staff's tools, the way back, the text as written in TinyMCE,
   its numbers and sharing, then the vote. */
.evo-kb-article {
    margin-bottom: 1rem;
    padding: 1.75rem 2rem 1rem;
    border: 1px solid var(--evo-line-gold);
    border-radius: .35rem;
    background-color: #0e110f;
}

.evo-kb-article-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.evo-kb-article-title {
    margin: 0;
    font-family: var(--evo-f-title);
    font-size: 1.9rem;
    font-weight: 400;
    color: var(--evo-title);
}

.evo-kb-article-tools {
    display: flex;
    flex-shrink: 0;
    gap: .5rem;
}

.evo-kb-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 1.25rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--evo-line-gold);
    list-style: none;
    font-size: .82rem;
    color: var(--evo-muted);
}

.evo-kb-breadcrumb li:not(:last-child)::after {
    content: "\203A";
    margin-left: .4rem;
}

.evo-kb-breadcrumb a {
    color: var(--evo-gold-dim);
    text-decoration: none;
}

.evo-kb-breadcrumb a:hover, .evo-kb-breadcrumb a:focus-visible {
    color: var(--evo-gold);
}

/* Text written in the admin, as TinyMCE wrote it (evo-prose): an article, a site page (About, Rules…); gold links,
   light headings, images and tables that fit */
.evo-prose {
    overflow-x: auto;
    line-height: 1.8;
    color: var(--evo-text);
}

.evo-prose a {
    color: var(--evo-gold);
}

.evo-prose a:hover {
    color: var(--evo-gold-hi);
}

.evo-prose h1, .evo-prose h2, .evo-prose h3, .evo-prose h4, .evo-prose h5, .evo-prose h6 {
    color: var(--evo-strong);
}

.evo-prose img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    border-radius: .25rem;
}

.evo-prose table {
    margin-bottom: 1rem;
}

.evo-prose table[border] {
    border-collapse: collapse !important;
}

.evo-prose table[border] td, .evo-prose table[border] th {
    padding: .4rem .6rem;
}

/* an article's image opens whole, over the page (its script) */
.evo-kb-article-content img {
    cursor: zoom-in;
}

.evo-kb-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--evo-line-gold);
    font-size: .85rem;
    color: var(--evo-muted);
}

.evo-kb-article-meta i {
    margin-right: .3rem;
}

.evo-kb-share {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

.evo-kb-share i {
    margin-right: 0;
}

/* both in the page's type: the outline button's title letters beside Discord's didn't match */
.evo-kb-share .btn {
    font-family: var(--evo-f-ui);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}

.evo-kb-vote {
    padding: 1.5rem;
    border: 1px solid var(--evo-line-gold);
    border-radius: .35rem;
    background-color: #0e110f;
    text-align: center;
}

.evo-kb-vote-title {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: var(--evo-strong);
}

.evo-kb-vote-done {
    margin: 0;
    font-weight: 600;
    color: var(--evo-gold-dim);
}

/* The staff's form for an article (kb/article-form.html) */
.evo-kb-form .card-body {
    padding: 1.5rem 1.75rem;
}

.evo-kb-form .evo-kb-page-title {
    margin-bottom: 1.25rem;
}

.evo-kb-form-check {
    margin-top: 2rem;
}

.evo-kb-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--evo-line-gold);
}

@media (max-width: 575.98px) {
    .evo-kb-article {
        padding: 1.25rem 1rem .75rem;
    }

    .evo-kb-article-head {
        flex-direction: column;
    }

    .evo-kb-share {
        margin-left: 0;
    }

    .evo-kb-form-check {
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .evo-kb-feature, .evo-kb-row {
        transition: none;
    }

    .evo-kb-feature:hover, .evo-kb-feature:focus-visible, .evo-kb-row:hover, .evo-kb-row:focus-within {
        transform: none;
    }
}