.bragiro-brand {
    min-height: 125px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 25px;
    box-sizing: border-box;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.bragiro-logo {
    color: #ffffff;
    font-size: 52px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1px;
    text-shadow: 0 3px 8px rgba(0,0,0,.35);
}

.bragiro-tagline {
    color: #d7e7f7;
    font-size: 15px;
    margin-top: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

body {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
/* =========================================================
   BragiRO Top-up Page
   ========================================================= */

.bragiro-topup {
    max-width: 950px;
    line-height: 1.75;
    font-size: 15px;
}

.bragiro-topup h2 {
    color: #17263c;
    margin: 0 0 15px 0;
    font-size: 26px;
}

.bragiro-topup h3 {
    color: #17263c;
    font-size: 19px;
    margin-top: 28px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #d8e0e8;
}

.bragiro-topup > p {
    background: #edf4fa;
    border-left: 4px solid #31577f;
    padding: 15px 18px;
    border-radius: 4px;
}

.bragiro-topup ul,
.bragiro-topup ol {
    background: #ffffff;
    border: 1px solid #dce4eb;
    border-radius: 6px;
    padding: 18px 20px 18px 42px;
    margin: 10px 0 20px 0;
}

.bragiro-topup li {
    padding: 4px 0;
}

.bragiro-topup strong {
    color: #17263c;
}

.bragiro-topup hr {
    border: 0;
    height: 1px;
    background: #dce4eb;
    margin: 24px 0;
}
.topup-grid {
    display: flex;
    gap: 16px;
    margin: 15px 0 25px 0;
    flex-wrap: wrap;
}

.topup-card {
    flex: 1;
    min-width: 210px;
    background: #ffffff;
    border: 1px solid #d8e1ea;
    border-radius: 8px;
    padding: 22px;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

.topup-card-title {
    font-size: 21px;
    font-weight: 700;
    color: #17263c;
}

.topup-card-subtitle {
    font-size: 15px;
    color: #60758d;
    margin-bottom: 12px;
}

.topup-coming {
    display: inline-block;
    padding: 6px 10px;
    background: #eef3f8;
    border-radius: 4px;
    color: #53677d;
    font-size: 13px;
}

.topup-warning {
    padding: 16px 18px;
    border: 1px solid #d5a000;
    background: #fff8dc;
    margin: 22px 0;
    border-radius: 5px;
}

@media (max-width: 800px) {
    .topup-grid {
        display: block;
    }

    .topup-card {
        margin-bottom: 12px;
    }
}
/* BragiRO Discord Payment */
.topup-actions {
    margin: 25px 0;
    padding: 22px;
    background: #eef2ff;
    border: 1px solid #cfd7f5;
    border-radius: 8px;
    text-align: center;
}

.topup-actions-title {
    font-size: 20px;
    font-weight: 700;
    color: #17263c;
    margin-bottom: 8px;
}

.topup-actions p {
    margin: 5px 0 18px 0;
}

.topup-discord-button {
    display: inline-block;
    padding: 12px 24px;
    background: #5865F2;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
}

.topup-discord-button:hover {
    opacity: .9;
}

.topup-actions-note {
    margin-top: 12px;
    font-size: 13px;
    color: #607080;
}
/* BragiRO Point Packages */
.topup-package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 15px 0 28px 0;
}

.point-package {
    background: #ffffff;
    border: 1px solid #d8e1ea;
    border-radius: 8px;
    padding: 18px;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0,0,0,.04);
}

.point-package.bonus {
    border-color: #e4c36a;
}

.point-package.best-value {
    border: 2px solid #d5a000;
    background: #fffaf0;
}

.point-price {
    font-size: 20px;
    font-weight: 700;
    color: #17263c;
}

.point-amount {
    font-size: 18px;
    margin-top: 7px;
    color: #31577f;
    font-weight: 700;
}

.point-bonus {
    margin-top: 9px;
    display: inline-block;
    padding: 5px 9px;
    background: #fff0bd;
    color: #7b5a00;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}
/* BragiRO PromptPay */
.promptpay-card {
    text-align: center;
}

.promptpay-qr-wrap {
    margin: 16px auto;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #d8e1ea;
    border-radius: 8px;
    max-width: 330px;
}

.promptpay-qr {
    display: block;
    width: 100%;
    max-width: 310px;
    height: auto;
    margin: 0 auto;
}

.promptpay-ready {
    display: inline-block;
    margin-top: 4px;
    padding: 7px 12px;
    background: #eaf7ee;
    border: 1px solid #b8dcc3;
    border-radius: 5px;
    color: #246b3d;
    font-weight: 700;
}

.promptpay-note {
    margin-top: 12px;
    font-size: 13px;
    color: #607080;
}
/* BragiRO Bank Transfer */
.bank-card {
    text-align: center;
}

.bank-details {
    margin: 16px 0;
    padding: 16px;
    background: #f7f9fb;
    border: 1px solid #d8e1ea;
    border-radius: 7px;
}

.bank-label {
    font-size: 12px;
    color: #6b7a8b;
    margin-top: 8px;
}

.bank-account {
    font-size: 24px;
    font-weight: 800;
    color: #17263c;
    letter-spacing: 1px;
}

.bank-name {
    font-size: 17px;
    font-weight: 700;
    color: #17263c;
}

.bank-ready {
    display: inline-block;
    padding: 7px 12px;
    background: #eaf7ee;
    border: 1px solid #b8dcc3;
    border-radius: 5px;
    color: #246b3d;
    font-weight: 700;
}

.bank-note {
    margin-top: 12px;
    font-size: 13px;
    color: #607080;
}
/* BragiRO TrueMoney */
.truemoney-card {
    text-align: center;
}

.truemoney-details {
    margin: 16px 0;
    padding: 16px;
    background: #f7f9fb;
    border: 1px solid #d8e1ea;
    border-radius: 7px;
}

.truemoney-label {
    font-size: 12px;
    color: #6b7a8b;
    margin-top: 8px;
}

.truemoney-number {
    font-size: 24px;
    font-weight: 800;
    color: #17263c;
    letter-spacing: 1px;
}

.truemoney-name {
    font-size: 17px;
    font-weight: 700;
    color: #17263c;
}

.truemoney-ready {
    display: inline-block;
    padding: 7px 12px;
    background: #eaf7ee;
    border: 1px solid #b8dcc3;
    border-radius: 5px;
    color: #246b3d;
    font-weight: 700;
}

.truemoney-note {
    margin-top: 12px;
    font-size: 13px;
    color: #607080;
}
/* ==========================================================
   BragiRO Fantasy Theme V2
   Navy / Gold / Parchment
   ========================================================== */

:root {
    --bragi-navy: #10233b;
    --bragi-navy-light: #1b3858;
    --bragi-blue: #294e78;

    --bragi-gold: #c69b55;
    --bragi-gold-light: #efd6a1;

    --bragi-paper: #f7eedc;
    --bragi-paper-light: #fffaf0;

    --bragi-text: #3d3026;
    --bragi-muted: #756653;
}

/* ---------- PAGE ---------- */

html {
    background: #cbb994;
}

body {
    margin: 0;
    background:
        radial-gradient(
            circle at top,
            #f6e5bd 0,
            #d8c5a2 55%,
            #bba47e 100%
        );
    color: var(--bragi-text);
    font-family:
        "Leelawadee UI",
        "Tahoma",
        "Segoe UI",
        sans-serif;
}

/* Main Flux table */
body > table:first-of-type {
    max-width: 1500px;
    margin: 0 auto;
    background: rgba(250, 244, 230, .92);
    box-shadow: 0 0 30px rgba(49, 31, 14, .25);
}


/* ==========================================================
   HERO HEADER
   ========================================================== */

.bragiro-brand {
    position: relative;

    min-height: 340px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 25px;

    background:
        linear-gradient(
            180deg,
            rgba(12, 29, 48, .12) 0%,
            rgba(12, 29, 48, .10) 55%,
            rgba(12, 29, 48, .72) 100%
        ),
        url("../img/bragiro-hero.jpg");

    background-size: cover;
    background-position: center 48%;
    background-repeat: no-repeat;

    border-bottom: 4px solid var(--bragi-gold);

    box-sizing: border-box;
    overflow: hidden;
}


/* dark edge for readability */
.bragiro-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    box-shadow:
        inset 0 -80px 90px rgba(8, 23, 40, .55),
        inset 0 0 70px rgba(58, 33, 11, .12);
}


/* Current text BragiRO */
.bragiro-logo {
    position: relative;
    z-index: 2;

    color: #fff8e7;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 74px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 2px;

    text-shadow:
        0 3px 0 #17324f,
        0 6px 18px rgba(0,0,0,.75);
}


/* subtitle */
.bragiro-tagline {
    position: relative;
    z-index: 2;

    margin-top: 12px;
    padding: 7px 22px;

    color: #f7e6bc;

    background: rgba(11, 31, 52, .84);

    border-top: 1px solid var(--bragi-gold);
    border-bottom: 1px solid var(--bragi-gold);

    font-family: Georgia, serif;
    font-size: 15px;

    letter-spacing: 4px;

    text-shadow: 0 1px 2px #000;
}


/* override old header bgcolor */
body > table:first-of-type >
tbody > tr:first-child > td {
    background-color: var(--bragi-navy) !important;
}


/* ==========================================================
   LEFT SIDEBAR
   ========================================================== */

#sidebar {
    width: 240px;

    background:
        linear-gradient(
            180deg,
            #193858 0%,
            #102942 55%,
            #091d31 100%
        );

    border: 2px solid #b58a48;

    border-radius: 12px;

    box-shadow:
        0 5px 16px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(244,216,158,.25);

    overflow: hidden;
}


/* remove old Flux corner images */
#sidebar img {
    display: none !important;
}

#sidebar td.sidebar-left,
#sidebar td.sidebar-right {
    background: transparent !important;
}


#sidebar td.menuitem,
#sidebar th.menuitem {
    display: block;

    border: 0 !important;

    background: transparent !important;
}


/* Section names */
#sidebar th.menuitem {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08),
            transparent
        ) !important;
}


#sidebar th.menuitem strong {
    display: block;

    margin: 5px 14px;

    padding: 12px 6px 7px;

    color: #f4d99f;

    border-bottom: 1px solid rgba(221,183,112,.45);

    font-size: 15px;
    font-weight: 700;
    text-align: center;

    text-shadow: 0 1px 2px #000;
}


/* Menu links */
#sidebar td.menuitem a {
    position: relative;

    display: block;

    margin: 0 8px;

    padding: 9px 10px 9px 28px;

    color: #f7e8c6 !important;

    background: transparent !important;

    border-bottom: 1px solid rgba(221,183,112,.12);

    font-size: 14px;

    text-shadow: 0 1px 2px #000;

    transition:
        background .15s ease,
        color .15s ease,
        padding-left .15s ease;
}


/* small fantasy icon */
#sidebar td.menuitem a::before {
    content: "✦";

    position: absolute;

    left: 9px;
    top: 9px;

    color: #d8ad62;

    font-size: 10px;
}


/* Hover */
#sidebar td.menuitem a:hover {
    padding-left: 33px;

    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            rgba(85,131,178,.55),
            rgba(85,131,178,.18)
        ) !important;

    border-left: 3px solid #d7ac64;

    text-shadow: 0 1px 3px #000;
}


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

#content {
    color: var(--bragi-text);

    background: var(--bragi-paper);

    border: 1px solid #c8a66b;

    border-radius: 13px;

    box-shadow:
        0 4px 14px rgba(67,42,18,.13),
        inset 0 0 40px rgba(184,139,74,.07);

    overflow: hidden;
}


/* override inline Flux background */
#content > tbody > tr > td {
    background-color: var(--bragi-paper) !important;
}


/* hide old corner graphics */
#content > tbody > tr > td > img {
    display: none;
}


/* Actual content padding */
#content > tbody > tr:nth-child(2) > td:nth-child(2) {
    padding: 22px 28px 30px;
}


/* headings */
#content h1,
#content h2 {
    color: #2b2925;

    font-family:
        Georgia,
        "Times New Roman",
        "Leelawadee UI",
        serif;

    letter-spacing: 0;
}


#content h2 {
    font-size: 26px;
}


#content h3 {
    margin-top: 25px;

    padding-bottom: 9px;

    color: #28364b;

    border-bottom: 1px solid #c9af7d;

    font-size: 18px;

    font-weight: 700;

    text-transform: none;
}


/* ==========================================================
   LOGIN / USER BOX
   ========================================================== */

#loginbox {
    padding: 12px 16px;

    color: #50422f;

    background:
        rgba(252,247,234,.92);

    border: 1px solid #c9aa73;

    border-radius: 8px;

    box-shadow: 0 2px 5px rgba(62,42,19,.08);
}


/* ==========================================================
   FORMS
   ========================================================== */

input[type=text],
input[type=password],
input[type=email],
input[type=file],
textarea,
select {
    padding: 8px 10px;

    color: #3c3229;

    background: #fffdf7;

    border: 1px solid #c9b48e;

    border-radius: 5px;

    box-sizing: border-box;
}


input[type=submit],
input[type=button],
button,
.submit_button {
    padding: 9px 17px;

    color: #fff;

    background:
        linear-gradient(
            180deg,
            #315a85,
            #173957
        );

    border: 1px solid #a77c3c;

    border-radius: 5px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2);

    cursor: pointer;
}


input[type=submit]:hover,
input[type=button]:hover,
button:hover,
.submit_button:hover {
    background:
        linear-gradient(
            180deg,
            #bb8e48,
            #8c6029
        );
}


/* ==========================================================
   TABLES
   ========================================================== */

.horizontal-table,
.vertical-table,
#server_status {
    overflow: hidden;

    background: #fffaf0;

    border: 1px solid #cfb27d;

    border-radius: 7px;
}


.horizontal-table th,
.vertical-table th {
    color: #f8e6bf;

    background: #173957 !important;

    border-color: #294d70 !important;
}


.horizontal-table td,
.vertical-table td {
    background: #fffaf0 !important;

    border-color: #ded0b5 !important;
}


/* ==========================================================
   TOP-UP PAGE - MATCH NEW FANTASY THEME
   ========================================================== */

.topup-card,
.point-package {
    background:
        linear-gradient(
            180deg,
            #fffdf7,
            #f8edd7
        );

    border-color: #cfad70;

    box-shadow:
        0 3px 7px rgba(76,49,19,.09);
}


.point-package.bonus {
    border-color: #c79745;
}


.point-package.best-value {
    background:
        linear-gradient(
            180deg,
            #fff8dd,
            #f6e4b6
        );

    border-color: #b67d22;
}


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

#copyright p,
#info p {
    color: #85745e;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 950px) {

    .bragiro-brand {
        min-height: 260px;
    }

    .bragiro-logo {
        font-size: 52px;
    }

    .bragiro-tagline {
        font-size: 11px;
        letter-spacing: 2px;
    }

    #sidebar {
        width: 205px;
    }

}


@media (max-width: 700px) {

    .bragiro-brand {
        min-height: 220px;
    }

    .bragiro-logo {
        font-size: 42px;
    }

    #content > tbody > tr:nth-child(2) > td:nth-child(2) {
        padding: 15px;
    }

}

/* ==========================================================
   BragiRO Server Info Fantasy Cards
   ========================================================== */

.bragi-serverinfo {
    max-width: 1100px;
    margin: 0 auto;
}

.serverinfo-intro {
    text-align: center;
    margin-bottom: 26px;
    padding: 12px 30px 20px;
}

.serverinfo-intro-title {
    font-family: Georgia, "Leelawadee UI", serif;
    font-size: 27px;
    font-weight: 700;
    color: #2f2921;
    margin-bottom: 10px;
}

.serverinfo-intro p {
    max-width: 760px;
    margin: 0 auto;
    color: #6b5a45;
    line-height: 1.8;
}

.serverinfo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 10px 0 26px;
}

.serverinfo-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 125px;
    padding: 18px;

    background:
        linear-gradient(
            145deg,
            #fffdf7,
            #f5e7cd
        );

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

    box-shadow:
        0 3px 8px rgba(83,54,22,.10),
        inset 0 0 18px rgba(199,156,86,.07);

    box-sizing: border-box;
}

.serverinfo-card::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(190,145,72,.25);
    border-radius: 4px;
    pointer-events: none;
}

.serverinfo-emblem {
    position: relative;
    z-index: 2;

    flex: 0 0 64px;
    height: 64px;

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

    margin-right: 16px;

    color: #f1d49a;

    background:
        radial-gradient(
            circle at 35% 30%,
            #315a82,
            #152f4b 70%
        );

    border: 2px solid #b88943;
    border-radius: 50%;

    box-shadow:
        inset 0 0 0 3px rgba(239,211,158,.15),
        0 2px 5px rgba(0,0,0,.18);

    font-family: Georgia, serif;
    font-size: 16px;
    font-weight: 700;
}

.serverinfo-card-body {
    position: relative;
    z-index: 2;
}

.serverinfo-card-title {
    color: #30281f;
    font-family: Georgia, "Leelawadee UI", serif;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 7px;
}

.serverinfo-card p {
    margin: 0;
    color: #695b49;
    font-size: 13px;
    line-height: 1.65;
}

.serverinfo-about {
    position: relative;

    margin: 18px 0;
    padding: 22px 28px;

    text-align: center;

    background:
        linear-gradient(
            90deg,
            rgba(218,229,239,.85),
            rgba(242,236,217,.90)
        );

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

    box-shadow:
        inset 0 0 25px rgba(48,75,105,.06);
}

.serverinfo-about-title {
    color: #273a52;
    font-family: Georgia, "Leelawadee UI", serif;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 9px;
}

.serverinfo-about p {
    max-width: 820px;
    margin: 7px auto;
    color: #564d42;
    line-height: 1.75;
}

.serverinfo-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin-top: 18px;

    background: rgba(255,250,240,.75);

    border-top: 1px solid #c9ab75;
    border-bottom: 1px solid #c9ab75;
}

.serverinfo-bottom > div {
    padding: 13px;
    text-align: center;
    border-right: 1px solid #d8c6a5;
}

.serverinfo-bottom > div:last-child {
    border-right: 0;
}

.serverinfo-bottom strong {
    display: block;
    color: #80602d;
    font-size: 12px;
    text-transform: uppercase;
}

.serverinfo-bottom span {
    display: block;
    margin-top: 3px;
    color: #263950;
    font-weight: 700;
    font-size: 16px;
}

@media (max-width: 1000px) {

    .serverinfo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 650px) {

    .serverinfo-grid {
        grid-template-columns: 1fr;
    }

    .serverinfo-bottom {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* ==========================================================
   BragiRO Hero Fix V3
   ========================================================== */

.bragiro-brand {
    min-height: 390px;

    background-size: cover;
    background-position: center 38%;

    padding: 0;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    padding-bottom: 34px;
}

/* ใช้โลโก้ที่อยู่ในภาพแทนข้อความ BragiRO ซ้ำ */
.bragiro-logo {
    display: none !important;
}

/* เก็บ CLASSIC RAGNAROK ONLINE ไว้ */
.bragiro-tagline {
    position: relative;
    z-index: 3;

    margin: 0;

    padding: 8px 28px;

    background: rgba(11,31,52,.90);

    border: 1px solid #c69b55;

    color: #f7e6bc;

    font-family: Georgia, serif;
    font-size: 14px;
    letter-spacing: 4px;

    box-shadow: 0 3px 10px rgba(0,0,0,.35);
}

/* ลดเงาดำด้านล่าง เพื่อให้ภาพเห็นชัดขึ้น */
.bragiro-brand::after {
    box-shadow:
        inset 0 -55px 75px rgba(8,23,40,.38),
        inset 0 0 45px rgba(58,33,11,.08);
}

@media (max-width: 950px) {
    .bragiro-brand {
        min-height: 300px;
    }
}

/* ==========================================================
   BragiRO Wide Hero V4
   ========================================================== */

.bragiro-brand {
    min-height: 420px;

    background:
        linear-gradient(
            180deg,
            rgba(12,29,48,.02) 0%,
            rgba(12,29,48,.04) 65%,
            rgba(12,29,48,.34) 100%
        ),
        url("../img/bragiro-hero-wide.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    padding: 0;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    padding-bottom: 22px;
}

/* ภาพมีโลโก้ BragiRO อยู่แล้ว */
.bragiro-logo {
    display: none !important;
}

/* ไม่ต้องมี CLASSIC ซ้อน เพราะภาพ Hero มีโลโก้หลักอยู่แล้ว */
.bragiro-tagline {
    display: none !important;
}

.bragiro-brand::after {
    box-shadow:
        inset 0 -45px 60px rgba(8,23,40,.20);
}

@media (max-width: 950px) {
    .bragiro-brand {
        min-height: 300px;
        background-position: center center;
    }
}

@media (max-width: 650px) {
    .bragiro-brand {
        min-height: 220px;
    }
}

/* ==========================================================
   BragiRO Server Rates
   ========================================================== */

.serverinfo-rates {
    margin: 26px 0;
}

.serverinfo-section-title {
    margin-bottom: 15px;
    padding-bottom: 9px;

    color: #30281f;
    border-bottom: 1px solid #c9a96d;

    font-family: Georgia, "Leelawadee UI", serif;
    font-size: 21px;
    font-weight: 700;
}

.serverinfo-rate-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.serverinfo-rate-box {
    padding: 17px 12px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #fffdf6,
            #f4e6ca
        );

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

    box-shadow: 0 2px 6px rgba(75,48,20,.08);
}

.serverinfo-rate-box.highlight {
    border-color: #b17a27;

    background:
        linear-gradient(
            180deg,
            #fff7dc,
            #edd7a9
        );
}

.serverinfo-rate-box .rate-label {
    display: block;

    margin-bottom: 5px;

    color: #705e47;
    font-size: 12px;
}

.serverinfo-rate-box strong {
    display: block;

    color: #173957;

    font-family: Georgia, serif;
    font-size: 24px;
}

.serverinfo-rate-note {
    margin-top: 13px;
    padding: 12px 15px;

    color: #5d503f;

    background: rgba(229,219,195,.55);

    border-left: 3px solid #b98942;
    border-radius: 4px;

    font-size: 13px;
}

@media (max-width: 950px) {
    .serverinfo-rate-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 550px) {
    .serverinfo-rate-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   BragiRO WoE Page
   ========================================================== */

.bragiro-woe {
    max-width: 1050px;
    margin: 0 auto;
    padding: 10px 6px 25px;
}

.bragiro-woe-heading {
    display: flex;
    align-items: center;

    padding: 20px 24px;
    margin-bottom: 22px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #f1dfbd
        );

    border: 1px solid #c79c55;
    border-radius: 9px;

    box-shadow:
        0 3px 9px rgba(70,45,20,.10);
}

.bragiro-woe-emblem {
    flex: 0 0 82px;
    height: 82px;

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

    margin-right: 20px;

    color: #f0cf8b;

    background:
        radial-gradient(
            circle at 35% 30%,
            #2c5b89,
            #102d49 75%
        );

    border: 3px solid #bf8c3c;
    border-radius: 50%;

    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: bold;

    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.10),
        0 3px 7px rgba(0,0,0,.22);
}

.bragiro-woe-heading h2 {
    margin: 0 0 5px !important;

    color: #2e261e !important;

    font-family:
        Georgia,
        "Leelawadee UI",
        serif;

    font-size: 29px !important;
}

.bragiro-woe-subtitle {
    color: #9a6b27;

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

    letter-spacing: 1px;
}

.bragiro-woe-heading p {
    margin: 8px 0 0;

    color: #655541;
    line-height: 1.7;
}


/* Server clock */

.bragiro-server-clock {
    margin-bottom: 24px;
    padding: 14px 18px;

    text-align: center;

    background: #eaf0f5;

    border-left: 4px solid #294f76;
    border-radius: 5px;
}

.bragiro-server-clock span {
    display: block;

    color: #637080;
    font-size: 12px;
}

.bragiro-server-clock strong {
    display: block;

    margin: 4px 0;

    color: #173957;

    font-family: Georgia, serif;
    font-size: 20px;
}

.bragiro-server-clock small {
    color: #8a7657;
}


/* Server name */

.bragiro-woe-server-title {
    margin: 0 0 12px;

    color: #30281f;

    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: bold;

    border-bottom: 1px solid #c9a96c;

    padding-bottom: 8px;
}


/* Schedule cards */

.bragiro-woe-schedule {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 16px;

    margin-bottom: 28px;
}

.bragiro-woe-card {
    position: relative;

    padding: 22px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #fffdf7,
            #f2e1c0
        );

    border: 1px solid #c89b51;
    border-radius: 8px;

    box-shadow:
        0 3px 8px rgba(71,45,18,.10),
        inset 0 0 20px rgba(201,158,85,.07);
}

.bragiro-woe-card::after {
    content: "";

    position: absolute;
    inset: 5px;

    border: 1px solid rgba(189,143,70,.22);
    border-radius: 5px;

    pointer-events: none;
}

.bragiro-woe-card-icon {
    position: relative;
    z-index: 2;

    margin-bottom: 5px;

    color: #b27b27;

    font-size: 28px;
}

.bragiro-woe-day {
    position: relative;
    z-index: 2;

    color: #283c55;

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

    margin-bottom: 10px;
}

.bragiro-woe-time {
    position: relative;
    z-index: 2;

    color: #665541;

    font-size: 14px;
}

.bragiro-woe-time strong {
    margin: 0 8px;

    color: #173957;

    font-family: Georgia, serif;
    font-size: 27px;
}

.bragiro-woe-time span {
    color: #a17c43;
}

.bragiro-woe-time small {
    color: #806b4d;
}


/* WoE Info */

.bragiro-woe-info {
    padding: 20px;

    background:
        linear-gradient(
            90deg,
            rgba(225,234,242,.88),
            rgba(248,238,215,.88)
        );

    border: 1px solid #b99a68;
    border-radius: 8px;
}

.bragiro-woe-info-title {
    margin-bottom: 14px;

    text-align: center;

    color: #263c57;

    font-family: Georgia, serif;
    font-size: 20px;
    font-weight: bold;
}

.bragiro-woe-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.bragiro-woe-info-grid > div {
    padding: 10px 12px;

    text-align: center;

    border-right: 1px solid #cfbea1;
}

.bragiro-woe-info-grid > div:last-child {
    border-right: 0;
}

.bragiro-woe-info-grid span {
    display: block;

    color: #7b6b56;

    font-size: 11px;
}

.bragiro-woe-info-grid strong {
    display: block;

    margin-top: 3px;

    color: #173957;

    font-size: 15px;
}

.bragiro-woe-info p {
    margin: 17px 0 0;

    padding-top: 13px;

    text-align: center;

    color: #655a4a;

    border-top: 1px solid #d2c0a1;

    font-size: 12px;
}


/* Empty schedule */

.bragiro-woe-empty {
    padding: 30px;

    text-align: center;

    background: #fff8e7;

    border: 1px solid #caa75e;
    border-radius: 7px;
}


/* Responsive */

@media (max-width: 800px) {

    .bragiro-woe-schedule {
        grid-template-columns: 1fr;
    }

    .bragiro-woe-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 550px) {

    .bragiro-woe-heading {
        display: block;
        text-align: center;
    }

    .bragiro-woe-emblem {
        margin: 0 auto 15px;
    }

    .bragiro-woe-info-grid {
        grid-template-columns: 1fr;
    }

    .bragiro-woe-info-grid > div {
        border-right: 0;
        border-bottom: 1px solid #cfbea1;
    }

}

/* ==========================================================
   BragiRO Server Status Page
   ========================================================== */

.bragiro-status-page {
    max-width: 1050px;
    margin: 0 auto;
    padding: 10px 6px 25px;
}


/* Heading */

.bragiro-status-heading {
    display: flex;
    align-items: center;

    margin-bottom: 25px;
    padding: 20px 24px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #f1dfbd
        );

    border: 1px solid #c79c55;
    border-radius: 9px;

    box-shadow: 0 3px 9px rgba(70,45,20,.10);
}

.bragiro-status-emblem {
    flex: 0 0 80px;
    height: 80px;

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

    margin-right: 20px;

    color: #f1d396;

    background:
        radial-gradient(
            circle at 35% 30%,
            #315f8a,
            #112f4d 75%
        );

    border: 3px solid #bd893c;
    border-radius: 50%;

    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: bold;

    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.10),
        0 3px 7px rgba(0,0,0,.20);
}

.bragiro-status-heading h2 {
    margin: 0 0 7px !important;

    color: #30271f !important;

    font-family:
        Georgia,
        "Leelawadee UI",
        serif;

    font-size: 28px !important;
}

.bragiro-status-heading p {
    margin: 0;
    color: #675743;
    line-height: 1.7;
}


/* Server name */

.bragiro-status-server-name {
    margin-bottom: 13px;
    padding-bottom: 8px;

    color: #30281f;

    border-bottom: 1px solid #c8a76c;

    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: bold;
}


/* Status cards */

.bragiro-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

    margin-bottom: 18px;
}

.bragiro-status-card {
    position: relative;

    padding: 23px 17px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #fffdf7,
            #f1e2c5
        );

    border: 1px solid #c9a76b;
    border-radius: 8px;

    box-shadow:
        0 3px 8px rgba(72,46,19,.10),
        inset 0 0 20px rgba(200,155,80,.05);
}

.bragiro-status-card::after {
    content: "";

    position: absolute;
    inset: 5px;

    border: 1px solid rgba(189,143,70,.20);
    border-radius: 5px;

    pointer-events: none;
}


/* Indicator */

.status-dot {
    position: relative;
    z-index: 2;

    width: 15px;
    height: 15px;

    margin: 0 auto 11px;

    border-radius: 50%;
}


/* ONLINE */

.bragiro-status-card.online .status-dot {
    background: #35aa65;

    box-shadow:
        0 0 0 4px rgba(53,170,101,.13),
        0 0 12px rgba(53,170,101,.40);
}

.bragiro-status-card.online strong {
    color: #217b48;
}


/* OFFLINE */

.bragiro-status-card.offline .status-dot {
    background: #c84a42;

    box-shadow:
        0 0 0 4px rgba(200,74,66,.12),
        0 0 12px rgba(200,74,66,.35);
}

.bragiro-status-card.offline strong {
    color: #a63731;
}


/* Labels */

.bragiro-status-card .status-label {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 5px;

    color: #74624b;

    font-size: 12px;
    letter-spacing: 1px;
}

.bragiro-status-card strong {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 5px;

    font-family: Georgia, serif;
    font-size: 25px;
}

.bragiro-status-card small {
    position: relative;
    z-index: 2;

    color: #806e56;
}


/* Player statistics */

.bragiro-player-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    margin: 20px 0;

    background:
        linear-gradient(
            90deg,
            rgba(226,235,243,.90),
            rgba(248,238,215,.90)
        );

    border: 1px solid #b99a68;
    border-radius: 8px;
}

.bragiro-player-stats > div {
    padding: 15px;

    text-align: center;

    border-right: 1px solid #d1bea0;
}

.bragiro-player-stats > div:last-child {
    border-right: 0;
}

.bragiro-player-stats span {
    display: block;

    color: #786853;

    font-size: 11px;
}

.bragiro-player-stats strong {
    display: block;

    margin-top: 4px;

    color: #173957;

    font-size: 17px;
}

.bragiro-player-stats .player-number {
    font-family: Georgia, serif;
    font-size: 25px;
}


/* Bottom status message */

.bragiro-status-note {
    padding: 16px 20px;

    text-align: center;

    background: rgba(239,230,207,.65);

    border-left: 4px solid #b88942;
    border-radius: 5px;
}

.bragiro-status-note strong {
    color: #29496a;
    font-size: 16px;
}

.bragiro-status-note p {
    margin: 5px 0 0;
    color: #665847;
}


/* Responsive */

@media (max-width: 800px) {

    .bragiro-status-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .bragiro-status-heading {
        display: block;
        text-align: center;
    }

    .bragiro-status-emblem {
        margin: 0 auto 15px;
    }

    .bragiro-player-stats {
        grid-template-columns: 1fr;
    }

    .bragiro-player-stats > div {
        border-right: 0;
        border-bottom: 1px solid #d1bea0;
    }

}

/* ==========================================================
   BragiRO Online Players Page
   ========================================================== */

.bragiro-online-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 6px 28px;
}

.bragiro-online-heading {
    display: flex;
    align-items: center;

    padding: 20px 24px;
    margin-bottom: 22px;

    background:
        linear-gradient(135deg,#fffaf0,#f1dfbd);

    border: 1px solid #c79c55;
    border-radius: 9px;

    box-shadow: 0 3px 9px rgba(70,45,20,.10);
}

.bragiro-online-emblem {
    flex: 0 0 80px;
    height: 80px;

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

    margin-right: 20px;

    color: #f1d396;

    background:
        radial-gradient(circle at 35% 30%,#315f8a,#112f4d 75%);

    border: 3px solid #bd893c;
    border-radius: 50%;

    font-family: Georgia,serif;
    font-size: 22px;
    font-weight: bold;

    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.10),
        0 3px 7px rgba(0,0,0,.20);
}

.bragiro-online-heading h2 {
    margin: 0 0 7px !important;

    color: #30271f !important;

    font-family:
        Georgia,
        "Leelawadee UI",
        serif;

    font-size: 28px !important;
}

.bragiro-online-heading p {
    margin: 0;
    color: #675743;
}


/* Search */

.bragiro-online-search {
    margin-bottom: 20px;
}

.bragiro-search-toggle {
    display: inline-block;

    padding: 8px 16px;

    color: #f2d397 !important;
    background: #173957;

    border: 1px solid #b9883e;
    border-radius: 5px;

    text-decoration: none !important;
    font-weight: bold;
}

.bragiro-search-toggle:hover {
    background: #214c73;
}

.bragiro-search-form {
    margin-top: 12px !important;
    padding: 17px !important;

    background: rgba(235,224,198,.55);

    border: 1px solid #c6a36a;
    border-radius: 7px;
}

.bragiro-search-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
}

.bragiro-search-grid label {
    display: block;

    margin-bottom: 5px;

    color: #645440;
    font-weight: bold;
}

.bragiro-search-grid input[type="text"] {
    width: 100%;
    box-sizing: border-box;

    padding: 9px 10px;

    background: #fffdf8;

    border: 1px solid #bba77f;
    border-radius: 4px;
}

.bragiro-search-buttons {
    margin-top: 14px;
}

.bragiro-search-buttons input {
    padding: 8px 18px;
    margin-right: 7px;

    cursor: pointer;
    border-radius: 4px;
}

.bragiro-search-buttons input[type="submit"] {
    color: #f7dfad;
    background: #173957;

    border: 1px solid #b78840;
}

.bragiro-search-buttons input[type="button"] {
    color: #514532;
    background: #eee3cd;

    border: 1px solid #b9a47d;
}


/* Summary */

.bragiro-online-summary {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    margin-bottom: 18px;

    background:
        linear-gradient(
            90deg,
            rgba(225,235,243,.90),
            rgba(248,238,215,.90)
        );

    border: 1px solid #b99a68;
    border-radius: 8px;
}

.bragiro-online-summary > div {
    padding: 14px;

    text-align: center;

    border-right: 1px solid #d2bea0;
}

.bragiro-online-summary > div:last-child {
    border-right: 0;
}

.bragiro-online-summary span {
    display: block;

    color: #796853;
    font-size: 11px;
}

.bragiro-online-summary strong {
    display: block;

    margin-top: 4px;

    color: #173957;
    font-size: 18px;
}

.bragiro-online-summary .online-text {
    color: #248451;
}


/* Table */

.bragiro-online-info {
    margin: 10px 0;
    color: #75644d;
}

.bragiro-hidden-note {
    margin: 12px 0;
    padding: 11px 15px;

    color: #665642;
    background: #fff5d9;

    border-left: 4px solid #c28a32;
    border-radius: 4px;
}

.bragiro-online-table-wrap {
    width: 100%;

    overflow-x: auto;

    border: 1px solid #c6a36a;
    border-radius: 8px;

    box-shadow: 0 3px 8px rgba(75,48,20,.08);
}

.bragiro-online-table {
    width: 100%;
    border-collapse: collapse;

    background: #fffdf7;
}

.bragiro-online-table thead {
    background:
        linear-gradient(180deg,#244d73,#153652);
}

.bragiro-online-table th {
    padding: 12px 10px;

    color: #f3d79f;
    text-align: center;

    border-right: 1px solid rgba(255,255,255,.08);
    border-bottom: 2px solid #b98942;
}

.bragiro-online-table th a {
    color: #f3d79f !important;
    text-decoration: none;
}

.bragiro-online-table td {
    padding: 11px 10px;

    color: #554837;
    text-align: center;

    border-bottom: 1px solid #eadfc8;
}

.bragiro-online-table tbody tr:nth-child(even) {
    background: #faf3e5;
}

.bragiro-online-table tbody tr:hover {
    background: #f3e2be;
}

.bragiro-online-table .character-name {
    color: #173957;
    font-weight: bold;
}

.bragiro-online-table .character-name a,
.bragiro-online-table .guild-name a {
    color: #1e527b !important;
}

.bragiro-online-table .level {
    color: #173957;

    font-family: Georgia,serif;
    font-weight: bold;
}

.bragiro-online-table .guild-emblem {
    width: 30px;
}

.bragiro-online-table .guild-emblem img {
    max-width: 24px;
    max-height: 24px;
}

.bragiro-online-table .no-guild,
.bragiro-online-table .hidden-map {
    color: #9c8a70;
    font-style: italic;
}


/* Pagination */

.bragiro-online-pagination {
    margin-top: 16px;
    text-align: center;
}


/* Empty */

.bragiro-online-empty {
    padding: 38px 20px;

    text-align: center;

    background:
        linear-gradient(180deg,#fffdf7,#f2e4c7);

    border: 1px solid #c9a76b;
    border-radius: 8px;
}

.bragiro-online-empty .empty-icon {
    width: 62px;
    height: 62px;

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

    margin: 0 auto 12px;

    color: #efcf91;
    background: #173957;

    border: 2px solid #b88942;
    border-radius: 50%;

    font-family: Georgia,serif;
    font-size: 20px;
    font-weight: bold;
}

.bragiro-online-empty h3 {
    color: #283d56;
}

.bragiro-online-empty p {
    color: #6b5b47;
}


/* Responsive */

@media (max-width:800px) {

    .bragiro-search-grid {
        grid-template-columns: 1fr;
    }

    .bragiro-online-summary {
        grid-template-columns: 1fr;
    }

    .bragiro-online-summary > div {
        border-right: 0;
        border-bottom: 1px solid #d2bea0;
    }
}

@media (max-width:550px) {

    .bragiro-online-heading {
        display: block;
        text-align: center;
    }

    .bragiro-online-emblem {
        margin: 0 auto 15px;
    }
}