/*!
 * Home page bottom panels — support card, leaderboard.
 */

/* Bottom Features Section (Customer Support, Info, Leaderboard) */
.bottom-features-section {
    background-color: #fffefb;
    /* Fallback solid beige/white to match the paper */
    background-image: url('../../img/index-layer-71.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto;
    position: relative;
    z-index: 10;
}

.bottom-feature-box {
    background: #f7f5f0;
    padding: 20px 25px;
    height: 100%;
    position: relative;
    min-height: 380px;
    border: 1px solid #e1dcd4;
}

.bottom-feature-box .feature-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #433e38;
    margin: 0;
    display: flex;
    align-items: center;
}

.bottom-feature-box .title-icon {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    border: 3px solid #d4594c;
    box-sizing: content-box;
    outline: 2px solid #e19088;
    margin-right: 12px;
}

/* Column 1 */
.support-avatar img {
    border-radius: 50%;
    border: 2px solid #edafaa;
    width: 80px;
    height: 80px;
    box-shadow: 0 0 0 2px #fff inset;
}

.phone-number {
    font-size: 1.6rem;
    font-weight: 500;
    color: #404040;
    margin-bottom: 2px;
}

.support-links .bullet {
    color: #a39587;
    font-size: 10px;
    margin-right: 4px;
}

/* Scoped to the plain text links only.
   These carry !important because they override Bootstrap's .text-secondary on
   the same elements. The support buttons are also <a> inside .support-links,
   so without :not(.btn) this rule won administratively over their configured
   text colour -- the colour an admin picked in Settings was applied and then
   silently repainted #555. Excluding buttons fixes that at the source rather
   than answering one !important with another. */
.support-links a:not(.btn) {
    color: #555 !important;
}

.support-links a:not(.btn):hover {
    color: #c00000 !important;
}

/* Support buttons.
   They were two flat fills with a hard shadow and no icon, sitting at
   different visual weights from every other button on the page. These share
   one shape and one motion, and separate by hue rather than by style. */
.support-btns {
    /* The container is inline-flex, so it only takes the width its content
       needs, and the outer .d-flex.justify-content-center centres that whole
       block on the page. The direction comes from the modifier below. */
    display: inline-flex;
    gap: 10px;
}

/* One above the other, both stretched to the width of the wider label so the
   pair reads as a block rather than two buttons of different lengths. This is
   what the site shipped with and stays the default. */
.support-btns--stacked {
    flex-direction: column;
    align-items: stretch;
}

/* Side by side, wrapping rather than overflowing. Two short labels sit on one
   row even on a 375px phone; long ones -- a full Khmer phrase, say -- drop the
   second button onto its own line instead of pushing the page sideways, which
   is the stacked layout and the right thing to fall back to. */
.support-btns--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.btn-support-online,
.btn-support-vip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 132px;
    padding: 9px 20px;
    /* Labels stay on one line. Stacked buttons stretch to the widest one, so
       without this a long label like "Telegram Group Official" wrapped to two
       lines and the two buttons ended up different heights. */
    white-space: nowrap;
    border: 0;
    border-radius: 999px;
    /* Falls back to white so the buttons still read correctly if the page is
       served before a settings row exists. */
    color: var(--cs-text, #fff);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    text-decoration: none;
    /* Only the properties that actually animate, so the button does not
       repaint its text on every hover. */
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-support-online i,
.btn-support-vip i {
    font-size: 12px;
    opacity: .9;
}

/* Both buttons are one design driven by a single colour.
   An administrator picks --cs-btn and the lighter gradient stop, the shadow
   and the hover are all derived from it, so there is no way to choose three
   colours that disagree with each other. The fallbacks in var() are what the
   site shipped with, and are what shows if the setting is ever empty. */
.btn-support-online {
    --cs-btn: #c8322a;
}

.btn-support-vip {
    --cs-btn: #d99a1f;
}

.btn-support-online,
.btn-support-vip {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--cs-btn) 78%, #fff),
        var(--cs-btn)
    );
    box-shadow: 0 3px 10px color-mix(in srgb, var(--cs-btn) 30%, transparent);
}

/* color-mix is recent. Without it the gradient collapses to nothing, so the
   flat colour is stated first and only overridden where mixing works. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .btn-support-online,
    .btn-support-vip {
        background: var(--cs-btn);
        box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
    }
}

.btn-support-online:hover,
.btn-support-vip:hover {
    color: var(--cs-text, #fff);
    text-decoration: none;
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--cs-btn) 38%, transparent);
}

.btn-support-online:active,
.btn-support-vip:active {
    transform: translateY(0);
}

/* A button with nowhere to go still belongs in the row -- it names a channel
   the admin has not filled in yet -- but it must not look clickable. */
.btn-support-online.is-disabled,
.btn-support-vip.is-disabled {
    background: #e6e3de;
    color: #8c857c;
    box-shadow: none;
    cursor: default;
}

.btn-support-online.is-disabled:hover,
.btn-support-vip.is-disabled:hover {
    transform: none;
    filter: none;
    box-shadow: none;
    color: #8c857c;
}

/* ── Support button styles ──────────────────────────────────────────────
   The gradient above is the default and stays untouched. These three are the
   alternatives an admin can pick, and each is still driven by the single
   --cs-btn colour, so no combination can produce a button that disagrees with
   itself. Declared after the gradient rule so a chosen style overrides it. */

.btn-support-online.cs-style-flat,
.btn-support-vip.cs-style-flat {
    background: var(--cs-btn);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--cs-btn) 26%, transparent);
}

/* Hollow, for sitting on a busy background without covering it. The text
   takes the button colour rather than --cs-text: on a transparent face the
   contrast that matters is against the page, not against the fill. */
.btn-support-online.cs-style-outline,
.btn-support-vip.cs-style-outline {
    background: transparent;
    border: 2px solid var(--cs-btn);
    color: var(--cs-btn);
    box-shadow: none;
}

.btn-support-online.cs-style-outline:hover,
.btn-support-vip.cs-style-outline:hover {
    background: var(--cs-btn);
    color: var(--cs-text, #fff);
}

/* A tint of the same colour, for a secondary channel that should not compete
   with the primary one. */
.btn-support-online.cs-style-soft,
.btn-support-vip.cs-style-soft {
    background: color-mix(in srgb, var(--cs-btn) 16%, #fff);
    color: color-mix(in srgb, var(--cs-btn) 72%, #000);
    box-shadow: none;
}

.btn-support-online.cs-style-soft:hover,
.btn-support-vip.cs-style-soft:hover {
    background: color-mix(in srgb, var(--cs-btn) 26%, #fff);
    color: color-mix(in srgb, var(--cs-btn) 80%, #000);
}

/* Browsers without color-mix get the flat colour rather than no background. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .btn-support-online.cs-style-soft,
    .btn-support-vip.cs-style-soft {
        background: var(--cs-btn);
        color: var(--cs-text, #fff);
    }
}

.btn-support-online.cs-shape-rounded,
.btn-support-vip.cs-shape-rounded { border-radius: 10px; }

.btn-support-online.cs-shape-square,
.btn-support-vip.cs-shape-square { border-radius: 2px; }

/* An uploaded icon in place of the font one. Sized to the cap height of the
   label so a 512px PNG and a 16px glyph sit on the same line, and never
   stretched: object-fit keeps a non-square logo from being squashed into a
   square box. */
.cs-btn-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -3px;
}

@media (prefers-reduced-motion: reduce) {
    .btn-support-online,
    .btn-support-vip {
        transition: none;
    }
    .btn-support-online:hover,
    .btn-support-vip:hover {
        transform: none;
    }
}


.game-info-list li:last-child {
    border-bottom: none;
}

.game-info-list .info-links a {
    color: #887f76 !important;
    font-size: 13px;
    display: inline-block;
    text-align: center;
    transition: color 0.2s;
}

.game-info-list .info-links a:hover {
    color: #c00000 !important;
}

/* Column 3 */
.top-50-ribbon {
    position: absolute;
    right: 20px;
    top: -5px;
    z-index: 10;
}

.leaderboard-tabs .l-tab {
    background: #d6cfc7;
    color: #726b63;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    margin-right: 2px;
}

.leaderboard-tabs .l-tab.active {
    background: #eadecd;
    color: #63574c;
    font-weight: bold;
}

/* The board has one tab, so it labels the board rather than switching it. */
.leaderboard-tabs .l-tab.is-static {
    cursor: default;
}

/* The medal artwork is a plain coloured disc with no digit on it, so the
   place is drawn over the top rather than being expected inside the image. */
.rank-medal {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.rank-medal img {
    display: block;
}

.rank-medal__place {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

/* The short form players use in game -- the whole cell, with the full
   faction name on hover for anyone who does not know the codes yet. */
.leaderboard-sect-code {
    color: #63574c;
    font-weight: bold;
    white-space: nowrap;
    cursor: help;
}

.leardboard-box table td.leaderboard-empty {
    color: #8a8078;
    font-style: italic;
    padding: 18px 4px;
}

.leardboard-box table {
    background: #eadecd;
    font-size: 13px;
    margin-bottom: 0;
}

.leardboard-box table th {
    border: none;
    border-bottom: 2px solid #d4ccbd;
    color: #63574c;
    font-weight: bold;
    padding: 8px 4px;
}

.leardboard-box table td {
    border: none;
    padding: 6px 4px;
    color: #333;
    vertical-align: middle;
}

.leardboard-box table tbody tr {
    background: rgba(255, 255, 255, 0.4);
}

.leardboard-box table tbody tr.even {
    background: transparent;
}

.leardboard-box table td img {
    margin: 0 auto;
    display: block;
}

.l-pagination {
    background: #eadecd;
    padding: 6px 0 10px 0;
}

.l-pagination span {
    display: inline-block;
    margin: 0 1px;
    color: #887f76;
    font-size: 12px;
    cursor: pointer;
    font-weight: bold;
}

.l-pagination span:hover,
.l-pagination span.active {
    color: #4a4237;
    background: #fff;
    padding: 0 4px;
}

.l-pagination span.page-arrow,
.l-pagination span.page-arrow:hover {
    background: transparent;
    color: #887f76;
    font-weight: normal;
}

.l-pagination span.page-arrow:hover {
    color: #4a4237;
}