#PlayNowContainer{
    position:absolute;
    width:150px;
    height:37px;
    top:1px;
    left:5px;
    z-index:99
}
#PlayNowContainer form{
    margin:0;
    padding:0;
    border:0
}

/* Central wordmark inside the open header artwork area. */
#ArtworkHelper {
    position: relative;
}

.CenterHeaderLogo {
    position: absolute;
    top: -9px;
    left: 50%;
    z-index: 4;
    display: block;
    width: 310px;
    height: 170px;
    transform: translateX(-50%);
    transition: filter .22s ease, transform .22s ease;
}

.CenterHeaderLogo img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
    filter: drop-shadow(0 7px 5px rgba(0, 0, 0, .8)) drop-shadow(0 0 10px rgba(126, 72, 222, .42));
}

.CenterHeaderLogo:hover {
    filter: brightness(1.12) drop-shadow(0 0 9px rgba(165, 99, 255, .62));
    transform: translateX(-50%) translateY(-2px) scale(1.025);
}

/* Royal Madness left sidebar */
#MenuColumn {
    width: 200px;
    margin-left: 3px;
    margin-right: 5px;
    font-family: Georgia, "Times New Roman", serif;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .58));
}

#LeftArtwork {
    left: 10px;
}

#LeftArtwork #TibiaLogoArtworkTop {
    transition: transform .25s ease, filter .25s ease;
}

#LeftArtwork #TibiaLogoArtworkTop:hover {
    transform: translateY(-3px) scale(1.035);
    filter: brightness(1.12) drop-shadow(0 0 9px rgba(255, 194, 70, .7));
}

/* Parchment login built on the existing interactive form. */
#MenuColumn > center {
    width: 200px;
    margin: 0;
}

#MenuColumn .login-container,
#MenuColumn .GuestLoginBox {
    position: relative !important;
    display: block !important;
    width: 200px !important;
    height: 200px !important;
    margin: 0 0 16px !important;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .62));
}

#MenuColumn .LoggedActions {
    width: 180px;
    margin: 0 0 16px 5px;
}

#MenuColumn .LoggedActions .LoggedActionButton {
    margin-bottom: 8px;
}

#MenuColumn .GuestDownloadAction {
    margin: 0 0 16px 7px;
}

/* Premium right sidebar: fixed flow, no page-dependent inline offsets. */
#ThemeboxesColumn {
    top: 160px;
    right: 0;
    left: auto;
    width: 205px;
    margin: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    text-align: left;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .58));
}

#ThemeboxesColumn.RightSidebarReady {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .12s ease-out;
}

#RightSidebar,
#RightSidebar * {
    box-sizing: border-box;
}

#RightSidebar {
    position: relative;
    width: 200px;
    margin: 0 2px;
    padding: 10px 7px 16px;
    border-right: 2px solid #9c6519;
    border-left: 2px solid #9c6519;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 190, 54, .08), transparent 13%, transparent 87%, rgba(255, 190, 54, .08)), linear-gradient(180deg, #07162b, #020b18);
    box-shadow: inset 0 0 0 1px #221300, inset 0 0 22px rgba(0, 0, 0, .76), 0 8px 16px rgba(0, 0, 0, .55);
    color: #eef6ff;
    font-family: Georgia, "Times New Roman", serif;
}

.RightSidebarLogo {
    position: absolute;
    left: 50%;
    top: -175px;
    z-index: 6;
    display: block;
    width: 200px;
    height: 180px;
    margin-left: -130px;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .7));
}

.RightSidebarLogo img {
    display: block;
    width: 270px;
    height: 180px;
    transform: none;
    transition: transform .25s ease, filter .25s ease;
}

.RightSidebarLogo:hover img,
.RightSidebarLogo:focus-visible img {
    transform: translateY(-3px) scale(1.035);
    filter: brightness(1.12) drop-shadow(0 0 9px rgba(77, 207, 255, .7));
}

#RightSidebar::before,
#RightSidebar::after {
    content: "";
    position: absolute;
    left: 50%;
    z-index: 4;
    width: 13px;
    height: 13px;
    border: 2px solid #d89c2d;
    background: linear-gradient(135deg, #73efff, #0067dc 55%, #002a73);
    box-shadow: 0 0 0 2px #3e2205, 0 0 9px rgba(35, 171, 255, .8);
    transform: translateX(-50%) rotate(45deg);
}

#RightSidebar::before { top: -7px; }
#RightSidebar::after { bottom: -7px; }

#RightSidebar a {
    text-decoration: none;
}

.RightOnlineCard {
    position: relative;
    display: grid;
    min-height: 96px;
    margin-bottom: 11px;
    padding: 10px 9px 8px;
    grid-template-columns: 55px minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid #d79a31;
    border-radius: 10px;
    background: radial-gradient(circle at 18% 28%, rgba(27, 123, 219, .43), transparent 31%), linear-gradient(145deg, #0a2b52, #031225 65%, #020916);
    box-shadow: inset 0 0 0 2px rgba(8, 46, 86, .95), inset 0 0 0 3px rgba(255, 202, 81, .33), 0 4px 8px rgba(0, 0, 0, .72), 0 0 8px rgba(27, 134, 236, .35);
    color: #fff;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.RightOnlineCard::after {
    content: "";
    position: absolute;
    top: -80%;
    left: -45%;
    width: 35%;
    height: 240%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
    transform: rotate(24deg);
    transition: left .45s ease;
}

.RightOnlineCard:hover {
    filter: brightness(1.14);
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 2px rgba(8, 46, 86, .95), inset 0 0 0 3px rgba(255, 213, 105, .5), 0 6px 11px rgba(0, 0, 0, .75), 0 0 13px rgba(32, 151, 255, .68);
}

.RightOnlineCard:hover::after { left: 120%; }

.OnlineMonster {
    position: relative;
    z-index: 1;
    display: grid;
    width: 52px;
    height: 62px;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 114, 205, .35), transparent 68%);
}

.OnlineMonster img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 4px 3px #000) drop-shadow(0 0 5px rgba(55, 159, 255, .55));
}

.OnlineCopy {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.OnlineCopy small {
    color: #6fd5ff;
    font: bold 7px/1.3 Arial, sans-serif;
    letter-spacing: 1.2px;
}

.OnlineCopy strong {
    margin-top: 4px;
    color: #ffe39a;
    font-size: 9px;
    line-height: 13px;
    white-space: nowrap;
    text-shadow: 0 1px 2px #000;
}

.OnlineCopy b {
    margin-top: 3px;
    color: #fff;
    font: 800 23px/1 Arial, sans-serif;
    text-shadow: 0 0 8px rgba(43, 188, 255, .8), 0 2px 2px #000;
}

.OnlinePulse {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #43f58a;
    box-shadow: 0 0 0 3px rgba(67, 245, 138, .13), 0 0 7px #43f58a;
    animation: rightOnlinePulse 1.8s ease-in-out infinite;
}

.RightPanel {
    position: relative;
    margin-bottom: 11px;
    overflow: hidden;
    border: 1px solid #9d681e;
    border-radius: 9px;
    background: linear-gradient(90deg, #041021, #0a2038 50%, #041021);
    box-shadow: inset 0 0 0 2px rgba(4, 16, 34, .9), inset 0 0 0 3px rgba(82, 152, 209, .22), 0 4px 8px rgba(0, 0, 0, .68);
}

.RightPanelHeader {
    position: relative;
    display: flex;
    height: 40px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-bottom: 1px solid #96651d;
    background: linear-gradient(180deg, rgba(28, 103, 178, .45), rgba(3, 23, 49, .8)), url("../images/global/menu/button-background.gif") center/cover;
    color: #f5d58c;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .55px;
    text-align: center;
    text-shadow: 0 2px 2px #000;
    white-space: nowrap;
}

.RightPanelHeader::after {
    content: "";
    position: absolute;
    right: 13px;
    bottom: -3px;
    left: 13px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #54bfff, transparent);
    box-shadow: 0 0 5px rgba(58, 174, 255, .75);
}

.RightHeaderIcon {
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border: 1px solid #e2ac44;
    border-radius: 50%;
    background: #061831;
    color: #ffdb6e;
    font: bold 11px/1 Arial, sans-serif;
    box-shadow: inset 0 0 5px rgba(35, 144, 239, .55), 0 0 5px rgba(255, 189, 58, .25);
}

.RightRankingList {
    padding: 4px 5px;
}

.RightRankItem {
    position: relative;
    display: grid;
    min-height: 52px;
    padding: 2px 5px 2px 2px;
    grid-template-columns: 18px 44px minmax(0, 1fr);
    align-items: center;
    border-bottom: 1px solid rgba(84, 121, 157, .32);
    color: #f4f1e9;
    transition: background .15s ease, transform .15s ease;
}

.RightRankItem:last-child { border-bottom: 0; }

.RightRankItem:hover {
    background: linear-gradient(90deg, rgba(20, 94, 158, .72), rgba(6, 28, 54, .28));
    transform: translateX(2px);
}

.RankNumber {
    color: #e7b44f;
    font: bold 11px/1 Arial, sans-serif;
    text-align: center;
    text-shadow: 0 1px 2px #000;
}

.RightRankItem:first-child .RankNumber {
    color: #ffe168;
    font-size: 14px;
    text-shadow: 0 0 6px rgba(255, 204, 44, .7);
}

.RankAvatar {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border: 1px solid rgba(89, 171, 231, .38);
    border-radius: 7px;
    background: radial-gradient(circle, rgba(26, 106, 182, .27), #030b16 75%);
}

.RankAvatar img {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    transform: scale(1.12);
    transform-origin: right bottom;
    image-rendering: pixelated;
    filter: drop-shadow(0 3px 2px #000);
}

.RankCopy {
    display: flex;
    min-width: 0;
    padding-left: 7px;
    flex-direction: column;
}

.RankCopy strong {
    display: -webkit-box;
    overflow: hidden;
    color: #ffd66d;
    font-size: 10px;
    line-height: 12px;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.RankCopy small {
    color: #87cfff;
    font: 8px/11px Arial, sans-serif;
}

.RightEmptyState {
    padding: 18px 8px;
    color: #9fb2c4;
    font: 10px/1.5 Arial, sans-serif;
    text-align: center;
}

.RightStorePanel {
    padding-bottom: 10px;
}

.RightShopVisual {
    position: relative;
    display: block;
    width: 164px;
    height: 92px;
    margin: 7px auto 5px;
    overflow: hidden;
    border: 1px solid rgba(49, 145, 218, .34);
    border-radius: 7px;
    background: #060c18;
    color: #d9f2ff;
    transition: filter .18s ease, transform .18s ease;
}

.RightShopVisual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 46%;
}

.RightShopVisual span {
    position: absolute;
    right: 0;
    bottom: 4px;
    left: 0;
    font: bold 9px/1 Arial, sans-serif;
    letter-spacing: .8px;
    text-align: center;
    text-shadow: 0 1px 2px #000;
}

.RightShopVisual:hover {
    filter: brightness(1.18);
    transform: translateY(-2px);
}

.RightPointsButton {
    display: flex;
    width: 164px;
    min-height: 68px;
    margin: 10px auto 0;
    padding: 9px 11px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #e1aa3e;
    border-radius: 6px;
    background: linear-gradient(180deg, #876014, #3d2604);
    color: #fff0a8;
    box-shadow: inset 0 0 0 2px rgba(38, 22, 1, .85), inset 0 8px 10px rgba(255, 222, 105, .13), 0 3px 5px rgba(0, 0, 0, .6);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 1px 2px #000;
    transition: filter .16s ease, transform .16s ease;
}

.RightPointsButton:hover { filter: brightness(1.2); transform: translateY(-1px); }
.RightPointsButton small { display: block; margin-bottom: 3px; color: #e8c66f; font: 7px/1.2 Arial, sans-serif; letter-spacing: .7px; }
.PointsCoin { color: #62d9ff; font-size: 25px; text-shadow: 0 0 8px rgba(75, 199, 255, .95); }

.RightTranslatePanel {
    padding-bottom: 11px;
}

.HiddenGoogleTranslate { display: none; }

.RightTranslatePanel label {
    display: block;
    margin: 10px 11px 4px;
    color: #94b5ce;
    font: bold 8px/1.3 Arial, sans-serif;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.RightTranslatePanel select {
    display: block;
    width: 158px;
    height: 31px;
    margin: 0 auto 7px;
    padding: 0 7px;
    border: 1px solid #477da6;
    border-radius: 4px;
    outline: 0;
    background: #071a2e;
    color: #eef8ff;
    font: 10px Arial, sans-serif;
}

.RightTranslatePanel select:focus { border-color: #62c8ff; box-shadow: 0 0 6px rgba(48, 170, 246, .55); }

.RightTranslatePanel button {
    display: block;
    width: 158px;
    height: 31px;
    margin: 0 auto;
    border: 1px solid #c89435;
    border-radius: 4px;
    background: linear-gradient(180deg, #145f9e, #07325d);
    color: #fff0b1;
    cursor: pointer;
    font: bold 9px Arial, sans-serif;
    letter-spacing: .6px;
    text-shadow: 0 1px 2px #000;
    transition: filter .16s ease, transform .16s ease;
}

.RightTranslatePanel button:hover { filter: brightness(1.2); transform: translateY(-1px); }

.RightJoinCard {
    position: relative;
    display: flex;
    min-height: 132px;
    padding: 16px 12px 12px;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border: 1px solid #d19b35;
    border-radius: 9px;
    background: radial-gradient(circle at 50% 20%, rgba(16, 123, 210, .48), transparent 38%), linear-gradient(145deg, #082b51, #031225 60%, #020916);
    box-shadow: inset 0 0 0 2px #04172b, inset 0 0 0 3px rgba(255, 205, 92, .35), 0 4px 8px rgba(0, 0, 0, .72), 0 0 8px rgba(25, 137, 231, .35);
    color: #fff;
    text-align: center;
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.RightJoinCard::before,
.RightJoinCard::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    border: 5px solid rgba(255, 197, 67, .55);
    transform: rotate(45deg);
}

.RightJoinCard::before { top: -25px; left: -25px; }
.RightJoinCard::after { right: -25px; bottom: -25px; }
.RightJoinCard:hover { filter: brightness(1.16); transform: translateY(-2px); box-shadow: inset 0 0 0 2px #04172b, inset 0 0 0 3px rgba(255, 213, 105, .5), 0 6px 11px rgba(0, 0, 0, .75), 0 0 13px rgba(32, 151, 255, .68); }
.JoinKicker { color: #69d6ff; font: bold 7px/1.4 Arial, sans-serif; letter-spacing: 1.2px; }
.RightJoinCard strong { margin-top: 6px; color: #ffe091; font-size: 21px; letter-spacing: 1px; text-shadow: 0 2px 2px #000, 0 0 7px rgba(40, 166, 255, .7); }
.RightJoinCard small { margin-top: 3px; color: #b8cfe0; font: 9px/1.4 Arial, sans-serif; }
.JoinButton { display: block; width: 150px; margin-top: 10px; padding: 8px 7px; border: 1px solid #d5a03a; border-radius: 4px; background: rgba(4, 19, 39, .78); color: #fff0ad; font: bold 8px/1 Arial, sans-serif; letter-spacing: .45px; }
.JoinButton b { color: #53ccff; font-size: 15px; vertical-align: -1px; }

@keyframes rightOnlinePulse {
    0%, 100% { opacity: .65; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .OnlinePulse { animation: none; }
    .RightOnlineCard::after { transition: none; }
}

/* Dark-fantasy right sidebar inspired by the supplied visual reference. */
#RightSidebar {
    padding: 14px 7px 18px;
    border-color: #6d4518;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(177, 112, 26, .08), transparent 12%, transparent 88%, rgba(177, 112, 26, .08)), linear-gradient(180deg, #020a13, #01050b);
    box-shadow: inset 0 0 0 1px #181006, inset 0 0 28px #000, 0 12px 22px rgba(0, 0, 0, .8);
}

#RightSidebar::before,
#RightSidebar::after {
    width: 18px;
    height: 18px;
    border: 2px solid #d8a247;
    background: linear-gradient(135deg, #d4f8ff 0, #35bfff 25%, #0476df 55%, #003c88 100%);
    box-shadow: inset 0 0 0 2px #07254b, 0 0 0 2px #211303, 0 0 13px #079cff;
}

#RightSidebar::before { top: -10px; }
#RightSidebar::after { bottom: -10px; }

.RightOnlineCard,
.RightPanel,
.RightJoinCard {
    border: 1px solid #b17b30;
    border-radius: 3px;
    background-color: #020b16;
    background-image: radial-gradient(circle at 50% 15%, rgba(6, 89, 155, .32), transparent 48%), linear-gradient(145deg, #06182c, #010711 72%);
    box-shadow: inset 0 0 0 2px #020811, inset 0 0 0 3px rgba(224, 167, 70, .42), inset 0 0 18px rgba(3, 84, 145, .15), 0 4px 9px rgba(0, 0, 0, .82);
}

.RightOnlineCard {
    min-height: 118px;
    padding: 14px 10px 10px;
    grid-template-columns: 69px minmax(0, 1fr);
}

.RightOnlineCard::before {
    content: "";
    position: absolute;
    right: 5px;
    bottom: 5px;
    left: 5px;
    height: 6px;
    border-top: 1px solid rgba(198, 143, 57, .65);
    border-right: 1px solid rgba(198, 143, 57, .35);
    border-left: 1px solid rgba(198, 143, 57, .35);
    pointer-events: none;
}

.OnlineMonster {
    width: 67px;
    height: 78px;
    background: radial-gradient(circle, rgba(17, 116, 190, .38), transparent 67%);
}

.OnlineMonster img {
    width: 76px;
    height: 76px;
    filter: drop-shadow(0 5px 3px #000) drop-shadow(0 0 7px rgba(61, 170, 255, .7));
}

.OnlineCopy small {
    color: #b9d7ec;
    font-size: 7px;
    letter-spacing: 1.3px;
}

.OnlineCopy strong {
    margin-top: 7px;
    color: #efc875;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    letter-spacing: .35px;
}

.OnlineCopy b {
    margin-top: 6px;
    color: #effcff;
    font-size: 30px;
    text-shadow: 0 0 4px #fff, 0 0 13px #159dff, 0 2px 2px #000;
}

.OnlinePulse {
    top: 11px;
    right: 11px;
    width: 9px;
    height: 9px;
    border: 1px solid #a9ffbd;
    background: #31dc72;
    box-shadow: 0 0 0 3px rgba(49, 220, 114, .12), 0 0 9px #31dc72;
}

.RightPanel {
    overflow: visible;
}

.RightPanelHeader {
    height: 49px;
    padding: 0 11px;
    border-bottom: 1px solid #7e5724;
    background: linear-gradient(90deg, transparent, rgba(5, 74, 128, .34) 22%, rgba(7, 59, 105, .45) 50%, rgba(5, 74, 128, .34) 78%, transparent), linear-gradient(180deg, #06182b, #020914);
    color: #f0ce88;
    font-size: 15px;
    letter-spacing: .55px;
    text-shadow: 0 2px 2px #000, 0 0 5px rgba(255, 196, 74, .25);
}

.RightPanelHeader::before,
.RightPanelHeader::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #bd8331);
}

.RightPanelHeader::before { right: auto; left: 7px; }
.RightPanelHeader::after { right: 7px; left: auto; transform: scaleX(-1); }

.RightPanelHeader > span {
    position: relative;
    z-index: 1;
}

.RightHeaderIcon {
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    border-color: #cb9140;
    background: radial-gradient(circle, #0d4e82, #020914 70%);
    color: #ffe197;
    font-size: 13px;
    box-shadow: inset 0 0 0 2px #06172b, 0 0 7px rgba(31, 150, 239, .55);
}

.RightPanelHeader::after {
    bottom: auto;
    box-shadow: none;
}

.RightRankingList {
    padding: 6px 8px 8px;
}

.RightRankItem {
    min-height: 64px;
    padding: 4px 3px;
    grid-template-columns: 35px 48px minmax(0, 1fr);
    border-bottom-color: rgba(85, 126, 159, .4);
}

.RankNumber {
    display: grid;
    width: 31px;
    height: 45px;
    place-items: center;
    border: 1px solid #9c6c2b;
    border-radius: 3px 3px 9px 9px;
    background: linear-gradient(145deg, #142033, #050a12 70%);
    color: #eac36e;
    font: bold 17px/1 Georgia, serif;
    box-shadow: inset 0 0 0 2px #020711, 0 2px 4px #000;
    clip-path: polygon(10% 0, 90% 0, 100% 12%, 100% 88%, 50% 100%, 0 88%, 0 12%);
}

.RightRankItem:first-child .RankNumber {
    color: #ffe08c;
    font-size: 19px;
}

.RankAvatar {
    width: 46px;
    height: 46px;
    border-color: #9b753a;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13, 91, 151, .36), #02060d 73%);
    box-shadow: inset 0 0 0 2px #020711, 0 2px 5px #000;
}

.RankAvatar img {
    right: 3px;
    bottom: 3px;
    transform: scale(1.2);
}

.RankCopy {
    padding-left: 8px;
}

.RankCopy strong {
    color: #efc66d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    line-height: 14px;
    text-shadow: 0 1px 2px #000;
}

.RankCopy small {
    margin-top: 2px;
    color: #55c8ff;
    font-size: 9px;
}

.RightRankItem:hover {
    background: linear-gradient(90deg, rgba(8, 78, 132, .5), rgba(4, 21, 39, .18));
}

.RightStorePanel {
    padding-bottom: 13px;
}

.RightPointsButton {
    position: relative;
    width: 165px;
    min-height: 88px;
    margin-top: 12px;
    border-color: #cf9341;
    border-radius: 2px;
    background: radial-gradient(circle at 30% 50%, rgba(12, 112, 184, .3), transparent 30%), linear-gradient(145deg, #171107, #050506 72%);
    color: #f0cb7c;
    box-shadow: inset 0 0 0 2px #060504, inset 0 0 0 3px rgba(205, 148, 65, .45), inset 0 0 15px rgba(12, 76, 124, .18), 0 4px 7px #000;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
}

.RightPointsButton::before,
.RightPointsButton::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: #8a6028;
}

.RightPointsButton::before { top: 4px; left: 4px; border-top: 1px solid; border-left: 1px solid; }
.RightPointsButton::after { right: 4px; bottom: 4px; border-right: 1px solid; border-bottom: 1px solid; }

.RightPointsButton small {
    color: #d8b96e;
    font-size: 8px;
}

.PointsCoin {
    color: #5ee5ff;
    font-size: 34px;
    text-shadow: 0 0 5px #fff, 0 0 15px #008cff;
}

.RightTranslatePanel {
    padding-bottom: 14px;
}

.RightTranslatePanel label {
    margin: 13px 13px 6px;
    color: #b7cad8;
    font-size: 9px;
}

.RightTranslatePanel select {
    width: 162px;
    height: 39px;
    border-color: #3b769f;
    border-radius: 3px;
    background: #03111f;
    font-size: 11px;
}

.RightTranslatePanel button {
    width: 162px;
    height: 39px;
    border-color: #b47e33;
    border-radius: 2px;
    background: linear-gradient(180deg, #0c4f83, #031c36);
    color: #e8d9b7;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
}

.RightJoinCard {
    min-height: 190px;
    padding: 27px 12px 18px;
    border-color: #b17b30;
    background: radial-gradient(circle at 50% 24%, rgba(3, 105, 177, .43), transparent 39%), linear-gradient(145deg, #061a30, #010711 72%);
}

.RightJoinCard::before,
.RightJoinCard::after {
    width: 52px;
    height: 52px;
    border-width: 7px;
    border-color: rgba(179, 125, 43, .64);
}

.RightJoinCard::before { top: -38px; left: -38px; }
.RightJoinCard::after { right: -38px; bottom: -38px; }

.JoinKicker {
    color: #63d7ff;
    font-size: 8px;
    letter-spacing: 1.5px;
}

.RightJoinCard strong {
    margin-top: 12px;
    color: #f4d99e;
    font-size: 31px;
    letter-spacing: 1px;
    text-shadow: 0 2px 2px #000, 0 0 8px rgba(40, 166, 255, .6);
}

.RightJoinCard small {
    margin-top: 7px;
    color: #c4d3df;
    font-size: 11px;
}

.JoinButton {
    width: 158px;
    margin-top: 18px;
    padding: 11px 6px;
    border-color: #a67431;
    border-radius: 2px;
    background: linear-gradient(145deg, #151109, #040506);
    color: #efcf8b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
}

#MenuColumn .login-image {
    position: absolute !important;
    top: 10 !important;
    left: 0 !important;
    display: block !important;
    width: 200px !important;
    max-width: none !important;
    height: 200px !important;
}

#MenuColumn .login-form {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 200px !important;
    height: 200px !important;
    transform: none !important;
}

#MenuColumn .login-form form,
#MenuColumn .login-form .form-group {
    position: static !important;
    margin: 0 !important;
}

#MenuColumn .login-form .form-control {
    position: absolute !important;
    left: 31px !important;
    width: 138px !important;
    height: 25px !important;
    padding: 3px 7px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    outline: 0 !important;
    background: rgba(55, 8, 5, .78) !important;
    color: #ffe8ba !important;
    font-family: Arial, sans-serif;
    font-size: 11px;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, .68), 0 0 5px rgba(196, 24, 10, .18);
}

#MenuColumn .login-form #username {
    top: 60px !important;
    width: 120px !important;
    left: 40px !important;
    background: transparent !important;
    background-color: transparent !important;
        border: none; /* اختياري */
    box-shadow: none; /* اختياري */
}

#MenuColumn .login-form #password {
    top: 118px !important;
    left: 40px !important;
    width: 120px !important;
        background: transparent !important;
    background-color: transparent !important;
        border: none; /* اختياري */
    box-shadow: none; /* اختياري */
}

#MenuColumn .login-form .form-control:focus {
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, .68), 0 0 7px rgba(26, 148, 255, .72);
}

#MenuColumn .login-btn,
#MenuColumn .register-btn {
    position: absolute !important;
    top: 158px !important;
    width: 62px !important;
    height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
}

#MenuColumn .login-btn {
    left: 32px !important;
}

#MenuColumn .register-btn {
    left: 107px !important;
}

#MenuColumn .login-btn:hover,
#MenuColumn .register-btn:hover {
    filter: brightness(1.25) drop-shadow(0 0 5px rgba(38, 139, 255, .8));
}

/* Logged-in account and both download placements. */
#MenuColumn #Loginbox {
    margin-bottom: 22px;
}

#MenuColumn .LoggedAccountBox {
    left: 5px;
    top: 0;
    width: 180px;
    height: 52px;
    margin: 0 0 8px !important;
}

#MenuColumn .LoggedAccountBox > #LoginTop,
#MenuColumn .LoggedAccountBox > .LoginBorder,
#MenuColumn .LoggedAccountBox > .Loginstatus {
    display: none;
}

#MenuColumn .LoggedAccountBox #LoginButtonContainer {
    left: 0;
    width: 180px;
    height: 52px;
    background-image: none !important;
}

#MenuColumn .LoggedAccountBox #LoginButton,
#MenuColumn .LoggedDownloadBox #LoginButton {
    top: 0;
    left: 0;
    width: 180px;
    height: 52px;
}

#MenuColumn .LoggedDownloadBox {
    left: 5px;
    top: 0;
    width: 180px;
    height: 52px;
    margin: 0 0 15px !important;
}

#MenuColumn .LoggedActionButton {
    position: relative;
    isolation: isolate;
    display: flex;
    width: 176px;
    height: 46px;
    margin: 2px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    overflow: hidden;
    border: 1px solid #f2c85b;
    border-radius: 7px;
    color: #fff2a8;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .65px;
    line-height: 46px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 2px 2px #000, 0 0 7px rgba(90, 176, 255, .8);
    box-shadow: inset 0 0 0 2px #082451, inset 0 0 0 3px rgba(255, 214, 98, .55), inset 0 10px 12px rgba(255, 255, 255, .13), 0 3px 6px rgba(0, 0, 0, .75), 0 0 7px rgba(31, 122, 255, .42);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

#MenuColumn .LoggedActionButton::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 4px;
    border: 1px solid rgba(125, 207, 255, .55);
    border-radius: 4px;
    pointer-events: none;
}

#MenuColumn .LoggedActionButton::after {
    content: "";
    position: absolute;
    z-index: -2;
    top: -85%;
    left: -35%;
    width: 45%;
    height: 260%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: rotate(23deg);
    transition: left .42s ease;
}

#MenuColumn .AccountActionButton {
    background: radial-gradient(circle at 50% 0, #176eff 0, #073fc1 36%, #041d68 75%, #020b2d 100%);
}

#MenuColumn .DownloadActionButton {
    border-color: #a9dcff;
    background: radial-gradient(circle at 50% 0, #168ee0 0, #075a9b 38%, #03284c 76%, #010d20 100%);
    color: #cceeff;
    box-shadow: inset 0 0 0 2px #031c38, inset 0 0 0 3px rgba(104, 202, 255, .6), inset 0 10px 12px rgba(255, 255, 255, .13), 0 3px 6px rgba(0, 0, 0, .75), 0 0 7px rgba(25, 164, 255, .5);
}

#MenuColumn .LoggedActionButton .ActionButtonIcon {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(255, 223, 121, .85);
    border-radius: 50%;
    background: rgba(0, 8, 32, .62);
    color: #ffd863;
    font: 12px/1 Arial, sans-serif;
    box-shadow: inset 0 0 5px rgba(55, 154, 255, .75), 0 0 5px rgba(255, 198, 65, .35);
}

#MenuColumn .DownloadActionButton .ActionButtonIcon {
    border-color: #9cddff;
    color: #bcecff;
    font-size: 17px;
}

#MenuColumn .LoggedActionButton:hover {
    color: #fffbd5;
    filter: brightness(1.18);
    transform: translateY(-2px) scale(1.018);
    box-shadow: inset 0 0 0 2px #061d45, inset 0 0 0 3px rgba(255, 221, 113, .75), inset 0 12px 14px rgba(255, 255, 255, .18), 0 5px 9px rgba(0, 0, 0, .78), 0 0 12px rgba(36, 150, 255, .8);
}

#MenuColumn .LoggedActionButton:hover::after {
    left: 115%;
}

#MenuColumn .LoggedActionButton:active {
    transform: translateY(1px) scale(.99);
    filter: brightness(.96);
}

#MenuColumn .GuestDownloadBox {
    height: 48px;
    margin-bottom: 15px !important;
}

#MenuColumn img[src$="download3.png"] {
    position: relative !important;
    top: -65px !important;
    left: -19px !important;
    display: block;
    width: 215px;
    height: auto;
    border: 0;
    transition: transform .2s ease, filter .2s ease;
}

#MenuColumn img[src$="download3.png"]:hover {
    transform: translateY(-2px) scale(1.025);
    filter: brightness(1.16) drop-shadow(0 0 8px rgba(26, 136, 255, .75));
}

/* One continuous framed menu, matching the royal-blue reference. */
#Menu {
    position: relative;
    left: 0;
    display: flex;
    width: 190px;
    margin: 0 5px;
    padding: 8px 9px 15px;
    box-sizing: border-box;
    flex-direction: column;
    border-right: 3px ridge #b47619;
    border-left: 3px ridge #b47619;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255, 194, 67, .12), transparent 12%, transparent 88%, rgba(255, 194, 67, .12)),
        linear-gradient(180deg, rgba(14, 31, 57, .98), rgba(2, 11, 25, .98));
    box-shadow: inset 0 0 20px rgba(0, 0, 0, .7), 0 9px 18px rgba(0, 0, 0, .58);
}

#Menu::before,
#Menu::after {
    content: "";
    position: absolute;
    left: 50%;
    z-index: 3;
    width: 13px;
    height: 13px;
    border: 2px solid #d89c2d;
    background: linear-gradient(135deg, #73efff, #0067dc 55%, #002a73);
    box-shadow: 0 0 0 2px #3e2205, 0 0 9px rgba(35, 171, 255, .8);
    transform: translateX(-50%) rotate(45deg);
}

#Menu::before { top: -7px; }
#Menu::after { bottom: -7px; }

#Menu #account { order: 1; }
#Menu #news { order: 2; }
#Menu #community { order: 3; }
#Menu #forum { order: 4; }
#Menu #wars { order: 5; }
#Menu #library { order: 6; }
#Menu #shops { order: 7; }

#Menu .menuitem {
    position: relative;
    margin: 0 0 13px;
}

#Menu .MenuButton {
    position: relative;
    left: -8px;
    width: 183px;
    height: 48px;
    overflow: visible;
    border-radius: 13px;
    background-size: 183px 48px;
    filter: saturate(1.22) contrast(1.08) drop-shadow(0 4px 4px rgba(0, 0, 0, .7));
    transition: transform .18s ease, filter .18s ease;
}

#Menu .MenuButton:hover {
    transform: translateY(-2px) scale(1.025);
    filter: saturate(1.35) brightness(1.16) drop-shadow(0 0 8px rgba(38, 145, 255, .8));
}

#Menu .MenuButton .Button {
    width: 183px;
    height: 48px;
    border-radius: 13px;
    background-size: 183px 48px;
}

#Menu .MenuButton .Lights,
#Menu .MenuButton .Extend {
    display: none;
}

#Menu .MenuButton .Icon {
    top: 7px;
    left: 12px;
    filter: drop-shadow(0 2px 2px #000) drop-shadow(0 0 4px rgba(31, 145, 255, .7));
}

#Menu .MenuButton .Label {
    top: 0;
    left: 45px;
    width: 125px;
    height: 48px;
    background-image: none !important;
}

#Menu .MenuButton .Label::after {
    position: absolute;
    top: 13px;
    left: 0;
    width: 120px;
    color: #f5d58c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: .5px;
    line-height: 20px;
    text-align: center;
    text-shadow: 0 2px 2px #000, 0 0 4px rgba(255, 198, 85, .45);
}

#news .Label::after { content: "NEWS"; }
#account .Label::after { content: "ACCOUNT"; }
#community .Label::after { content: "RANKINGS"; }
#forum .Label::after { content: "COMMUNITY"; }
#wars .Label::after { content: "GUILDS"; }
#library .Label::after { content: "WORLD"; }
#shops .Label::after { content: "STORE"; }

#Menu .Submenu {
    position: relative;
    width: 156px;
    margin: -3px auto 0;
    padding: 3px 0;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #213c59;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #061326, #0b1e35 52%, #061326);
    box-shadow: inset 0 7px 10px rgba(0, 0, 0, .48);
}

#Menu .Submenuitem {
    position: relative;
}

#Menu .Submenuitem > div {
    background: transparent !important;
    transition: background .16s ease, transform .16s ease;
}

#Menu .Submenuitem:hover > div {
    background: linear-gradient(90deg, rgba(22, 83, 139, .74), rgba(8, 29, 54, .75)) !important;
    transform: translateX(2px);
}

#Menu .SubmenuitemLabel {
    position: relative;
    min-height: 27px;
    padding: 6px 23px 5px 28px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(82, 113, 145, .42);
    color: #f5f3ed;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 14px;
    text-shadow: 0 1px 2px #000;
}

#Menu .SubmenuitemLabel::before {
    content: "◆";
    position: absolute;
    top: 6px;
    left: 10px;
    color: #e3ad3e;
    font-size: 10px;
    text-shadow: 0 0 4px rgba(255, 195, 63, .5);
}

#Menu .SubmenuitemLabel::after {
    content: "›";
    position: absolute;
    top: 2px;
    right: 8px;
    color: #ef4e28;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 1px 1px #000;
}

#Menu .Submenu a:hover .SubmenuitemLabel {
    color: #fff2c8;
}

/* Clean semantic accordion menu. This overrides the legacy Tibia menu rules. */
#Menu.SidebarMenu {
    position: relative;
    left: 0;
    display: block;
    width: 190px;
    margin: 0 5px;
    padding: 10px 8px 16px;
    box-sizing: border-box;
    border-right: 2px solid #9c6519;
    border-left: 2px solid #9c6519;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 190, 54, .08), transparent 13%, transparent 87%, rgba(255, 190, 54, .08)), linear-gradient(180deg, #07162b, #020b18);
    box-shadow: inset 0 0 0 1px #221300, inset 0 0 22px rgba(0, 0, 0, .76), 0 8px 16px rgba(0, 0, 0, .55);
}

#Menu.SidebarMenu .menuitem {
    position: relative;
    margin: 0 0 10px;
}

#Menu.SidebarMenu .menuitem:last-child {
    margin-bottom: 0;
}

#Menu.SidebarMenu .MenuButton {
    position: relative;
    left: -6px;
    display: flex;
    width: 182px;
    height: 45px;
    padding: 0 13px;
    align-items: center;
    gap: 9px;
    overflow: hidden;
    border: 1px solid #b97821;
    border-radius: 12px;
    outline: 0;
    background-color: #052754;
    background-image: linear-gradient(180deg, rgba(34, 126, 215, .32), rgba(0, 17, 49, .72)), url("../images/global/menu/button-background.gif") !important;
    background-position: center;
    background-size: 182px 45px;
    color: #f5d58c;
    cursor: pointer;
    filter: saturate(1.15) drop-shadow(0 3px 3px rgba(0, 0, 0, .72));
    font-family: Georgia, "Times New Roman", serif;
    text-align: left;
    text-shadow: 0 2px 2px #000;
    transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}

#Menu.SidebarMenu a.MenuButton {
    box-sizing: border-box;
    text-decoration: none !important;
}

#Menu.SidebarMenu .MenuButton::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(95, 190, 255, .35);
    border-radius: 9px;
    pointer-events: none;
}

#Menu.SidebarMenu .MenuButton:hover,
#Menu.SidebarMenu .MenuButton:focus-visible {
    border-color: #efbd55;
    filter: saturate(1.28) brightness(1.14) drop-shadow(0 0 7px rgba(29, 142, 255, .7));
    transform: translateY(-1px);
}

#Menu.SidebarMenu .menuitem.is-open > .MenuButton {
    border-color: #e6ad43;
    box-shadow: inset 0 -9px 16px rgba(0, 6, 20, .48), 0 0 8px rgba(20, 128, 236, .34);
}

#Menu.SidebarMenu .MenuButton .Icon {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 2px 2px #000) drop-shadow(0 0 3px rgba(37, 146, 255, .65));
}

#Menu.SidebarMenu .MenuTitle {
    position: relative;
    z-index: 1;
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .35px;
    text-align: center;
}

#Menu.SidebarMenu .MenuChevron {
    position: relative;
    z-index: 1;
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-right: 2px solid #ffcf5e;
    border-bottom: 2px solid #ffcf5e;
    transform: rotate(-45deg);
    transition: transform .2s ease;
}

#Menu.SidebarMenu .menuitem.is-open .MenuChevron {
    transform: rotate(45deg) translate(-2px, -2px);
}

#Menu.SidebarMenu .Submenu {
    position: relative;
    display: none;
    width: 158px;
    margin: -2px auto 0;
    padding: 5px 4px 4px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #264867;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, #041021, #0a2038 50%, #041021);
    box-shadow: inset 0 7px 12px rgba(0, 0, 0, .5);
}

#Menu.SidebarMenu .menuitem.is-open > .Submenu {
    display: block;
}

#Menu.SidebarMenu .Submenuitem {
    position: relative;
    display: grid;
    min-height: 31px;
    padding: 0 6px;
    grid-template-columns: 14px minmax(0, 1fr) 11px;
    align-items: center;
    border-bottom: 1px solid rgba(83, 119, 153, .35);
    color: #f1efe9;
    text-decoration: none;
    transition: color .15s ease, background .15s ease, transform .15s ease;
}

#Menu.SidebarMenu .Submenuitem:last-child {
    border-bottom: 0;
}

#Menu.SidebarMenu .Submenuitem:hover,
#Menu.SidebarMenu .Submenuitem:focus-visible,
#Menu.SidebarMenu .Submenuitem.is-active {
    outline: 0;
    background: linear-gradient(90deg, rgba(23, 99, 164, .75), rgba(8, 35, 65, .36));
    color: #fff2c8;
    transform: translateX(2px);
}

#Menu.SidebarMenu .SubmenuBullet {
    width: 6px;
    height: 6px;
    border: 1px solid #f3bd4a;
    background: #9b5d0d;
    box-shadow: 0 0 4px rgba(255, 194, 65, .55);
    transform: rotate(45deg);
}

#Menu.SidebarMenu .Submenuitem.is-active .SubmenuBullet {
    border-color: #b9ecff;
    background: #168bd2;
    box-shadow: 0 0 6px rgba(43, 167, 255, .85);
}

#Menu.SidebarMenu .SubmenuitemLabel {
    position: static;
    min-height: 0;
    padding: 6px 3px;
    border: 0;
    color: inherit;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    line-height: 15px;
    text-shadow: 0 1px 2px #000;
}

#Menu.SidebarMenu .SubmenuitemLabel::before,
#Menu.SidebarMenu .SubmenuitemLabel::after {
    content: none;
}

#Menu.SidebarMenu .SubmenuArrow {
    color: #ff6438;
    font: bold 19px/1 Arial, sans-serif;
    text-align: right;
    text-shadow: 0 1px 1px #000;
}

#Menu.SidebarMenu .MenuBadge {
    color: #ff4538;
    font: bold 7px/1 Arial, sans-serif;
    letter-spacing: .2px;
}

#MenuColumn .GuestDownloadAction {
    margin: 0 0 16px 7px;
}

/* Keep the download preview from stretching when its source image is missing. */
.ice-download-link .ice-download-img {
    content: url("../images/account/download_windows.png");
    width: 120px !important;
    max-width: 120px !important;
    height: 120px !important;
    min-height: 120px !important;
    object-fit: contain;
}

/* SmallBox content must size to its contents; 100% creates page-sized gaps. */
.SmallBox,
.SmallBox .MessageContainer,
.SmallBox .Message,
.SmallBox .ErrorMessage {
    height: auto !important;
}

.TableContainer .CaptionContainer,
.TableContainer .CaptionInnerContainer,
.TableContainer .TableContentContainer {
    height: auto !important;
}

/* Keep the online status as a standalone card above the main sidebar frame. */
#RightSidebar {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

#RightSidebar::before,
#RightSidebar::after {
    display: none;
}

.RightOnlineCard {
    margin: 0 7px 15px;
}

.RightSidebarFrame {
    position: relative;
    padding: 14px 7px 18px;
    border-right: 2px solid #6d4518;
    border-left: 2px solid #6d4518;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(177, 112, 26, .08), transparent 12%, transparent 88%, rgba(177, 112, 26, .08)), linear-gradient(180deg, #020a13, #01050b);
    box-shadow: inset 0 0 0 1px #181006, inset 0 0 28px #000, 0 12px 22px rgba(0, 0, 0, .8);
}

.RightSidebarFrame::before,
.RightSidebarFrame::after {
    content: "";
    position: absolute;
    left: 50%;
    z-index: 4;
    width: 18px;
    height: 18px;
    border: 2px solid #d8a247;
    background: linear-gradient(135deg, #d4f8ff 0, #35bfff 25%, #0476df 55%, #003c88 100%);
    box-shadow: inset 0 0 0 2px #07254b, 0 0 0 2px #211303, 0 0 13px #079cff;
    transform: translateX(-50%) rotate(45deg);
}

.RightSidebarFrame::before { top: -10px; }
.RightSidebarFrame::after { bottom: -10px; }

/* A single ornamental frame around the authenticated account actions. */
#MenuColumn .LoggedActions {
    position: relative;
    box-sizing: border-box;
    width: 190px;
    margin: 15 0 16px 5px;
    padding: 7px 5px 5px;
    border: 1px solid #a66c1b;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(208, 142, 35, .12), transparent 13%, transparent 87%, rgba(208, 142, 35, .12)), linear-gradient(180deg, #061426, #010912);
    box-shadow: inset 0 0 0 2px #02070e, inset 0 0 0 3px rgba(52, 156, 228, .28), inset 0 0 18px rgba(0, 0, 0, .82), 0 7px 11px rgba(0, 0, 0, .68);
}

#MenuColumn .LoggedActions::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 0;
    border: 1px solid rgba(105, 194, 255, .26);
    border-radius: 5px;
    pointer-events: none;
}

#MenuColumn .LoggedActions .LoggedActionButton {
    z-index: 1;
    width: 176px;
    margin: 0 0 8px;
}

#MenuColumn .LoggedActions .LoggedActionButton:last-child {
    margin-bottom: 0;
}

/* Align both sidebars at the very top of the page on every layout. */
#MenuColumn,
#ThemeboxesColumn {
    top: 0;
}

#ThemeboxesColumn {
    top: 17px;
}

/* Keep both Madness header artworks perfectly identical. */
#LeftArtwork #TibiaLogoArtworkTop,
.RightSidebarLogo img {
    width: 270px;
    height: 180px;
    object-fit: contain;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .7));
    transition: transform .25s ease, filter .25s ease;
}

.RightSidebarLogo {
    width: 270px;
    height: 180px;
    margin-left: -135px;
    filter: none;
}

#LeftArtwork #TibiaLogoArtworkTop:hover,
.RightSidebarLogo:hover img,
.RightSidebarLogo:focus-visible img {
    transform: translateY(-3px) scale(1.035);
    filter: brightness(1.12) drop-shadow(0 0 9px rgba(255, 194, 70, .7));
}

/* Dark fantasy replacement for the legacy red status/navigation strip. */
.Content .Box:has(.InfoBar) {
    box-sizing: border-box;
    height: 72px;
    margin: 0 0 14px;
    padding: 7px 8px;
    border: 0;
    background: transparent;
}

.Content .Box:has(.InfoBar) > .Corner-tl,
.Content .Box:has(.InfoBar) > .Corner-tr,
.Content .Box:has(.InfoBar) > .Border_1,
.Content .Box:has(.InfoBar) .Border_9,
.Content .Box:has(.InfoBar) .Corner-br,
.Content .Box:has(.InfoBar) .Corner-bl {
    display: none;
}

.Content .Box > .BorderTitleText:has(> .InfoBar) {
    position: relative;
    top: auto;
    left: auto;
    box-sizing: border-box;
    width: 100%;
    height: 58px;
    padding: 7px 14px;
    border: 2px solid #a36a20;
    border-radius: 3px;
    background-color: #080b10;
    background-image: radial-gradient(circle at 50% 100%, rgba(10, 99, 161, .24), transparent 35%), linear-gradient(180deg, #171113, #07090d 72%) !important;
    box-shadow: inset 0 0 0 2px #020407, inset 0 0 0 3px rgba(255, 205, 91, .38), inset 0 0 20px rgba(0, 0, 0, .92), 0 5px 11px rgba(0, 0, 0, .72), 0 0 8px rgba(206, 136, 35, .28);
}

.Content .Box > .BorderTitleText:has(> .InfoBar)::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-top: 1px solid rgba(255, 213, 116, .32);
    border-bottom: 1px solid rgba(39, 145, 211, .28);
    pointer-events: none;
}

.Content .Box > .BorderTitleText:has(> .InfoBar)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    z-index: 4;
    width: 15px;
    height: 15px;
    border: 2px solid #d9a543;
    background: linear-gradient(135deg, #c8f8ff, #28bfff 28%, #086fc8 65%, #002e69);
    box-shadow: inset 0 0 0 2px #062349, 0 0 0 2px #231302, 0 0 10px rgba(13, 157, 255, .9);
    transform: translateX(-50%) rotate(45deg);
}

.Content .InfoBar {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    height: 40px;
    padding: 0;
    align-items: center;
    justify-content: space-around;
}

.Content .InfoBar .InfoBarItem {
    position: relative;
    display: flex;
    min-width: 0;
    height: 32px;
    margin: 0 !important;
    padding: 0 10px;
    float: none !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #f5dc9b;
    white-space: nowrap;
}

.Content .InfoBar .InfoBarItem:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -2px;
    width: 4px;
    height: 4px;
    background: #dca340;
    box-shadow: 0 0 5px rgba(255, 190, 74, .72);
    transform: rotate(45deg);
}

.Content .InfoBar img {
    display: none;
}

.Content .InfoBar .InfoBarItem::before {
    color: #f5f8ff;
    font: bold 17px/1 Arial, sans-serif;
    text-shadow: 0 0 6px rgba(80, 178, 255, .55);
}

.Content .InfoBar .InfoBarItem:has(img[alt="Discord"])::before { content: "\25C9"; }
.Content .InfoBar .InfoBarItem:has(img[alt="WhatsApp"])::before { content: "\260E"; }
.Content .InfoBar .InfoBarItem:has(img[alt="Instagram"])::before { content: "\25CE"; }
.Content .InfoBar .InfoBarItem:has(img[alt="Facebook"])::before { content: "f"; }
.Content .InfoBar .InfoBarItem:has(img[alt="Download"])::before { content: "\2193"; }
.Content .InfoBar .InfoBarItem:has(img[alt="Players Online"])::before { content: "\265B"; }

.Content .InfoBar .InfoBarText {
    display: flex;
    align-items: center;
}

.Content .InfoBar .InfoBarItem:last-child .InfoBarText {
    font-size: 0;
}

.Content .InfoBar a.InfoBarLinks {
    margin: 0;
    color: #f6dfa5;
    font: bold 10px/1.1 Georgia, "Times New Roman", serif;
    letter-spacing: .15px;
    text-decoration: none;
    text-shadow: 0 1px 2px #000;
    cursor: pointer;
    transition: color .18s ease, text-shadow .18s ease;
}

.Content .InfoBar a.InfoBarLinks:hover {
    color: #7bdcff;
    text-shadow: 0 0 7px rgba(30, 165, 255, .75);
}

/* Royal upgrade for the header shortcuts bar. */
.Content .Box:has(.InfoBar) {
    height: 84px;
    padding: 8px 6px 12px;
}

.Content .Box:has(.InfoBar)::before,
.Content .Box:has(.InfoBar)::after {
    content: "";
    position: absolute;
    bottom: 8px;
    z-index: 3;
    width: 22%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #a97323, #38b7ef);
    box-shadow: 0 0 5px rgba(28, 157, 226, .65);
}

.Content .Box:has(.InfoBar)::before { left: 27%; }
.Content .Box:has(.InfoBar)::after { right: 27%; transform: scaleX(-1); }

.Content .Box > .BorderTitleText:has(> .InfoBar) {
    height: 64px;
    padding: 8px 15px;
    border: 1px solid #f0bd59;
    border-radius: 5px;
    clip-path: none;
    background-color: #03070d;
    background-image: radial-gradient(ellipse at 50% 115%, rgba(0, 126, 210, .34), transparent 43%), radial-gradient(circle at 8% 0, rgba(55, 126, 184, .17), transparent 25%), linear-gradient(180deg, #111b28 0, #060b12 42%, #02050a 100%) !important;
    box-shadow: inset 0 0 0 2px #160e04, inset 0 0 0 3px #573817, inset 0 0 0 5px #020811, inset 0 0 24px #000, 0 6px 13px rgba(0, 0, 0, .86), 0 0 10px rgba(230, 161, 50, .33);
}

.Content .Box > .BorderTitleText:has(> .InfoBar)::before {
    inset: 6px;
    border: 1px solid rgba(92, 190, 245, .35);
    border-right-color: rgba(244, 190, 83, .45);
    border-left-color: rgba(244, 190, 83, .45);
    border-radius: 2px;
    box-shadow: inset 0 0 8px rgba(7, 93, 150, .22);
}

.Content .Box > .BorderTitleText:has(> .InfoBar)::after {
    bottom: -11px;
    width: 17px;
    height: 17px;
    border-color: #f2bd4f;
    background: linear-gradient(135deg, #e9fcff 0, #50d6ff 20%, #078de7 48%, #034998 72%, #001d45 100%);
    box-shadow: inset 0 0 0 2px #06254a, 0 0 0 3px #2b1804, 0 0 12px #14aaff, 0 0 20px rgba(255, 178, 42, .38);
}

.Content .InfoBar {
    height: 46px;
    justify-content: center;
}

.Content .InfoBar .InfoBarItem {
    height: 38px;
    padding: 3px 12px;
    gap: 8px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-radius: 5px;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.Content .InfoBar .InfoBarItem:hover {
    border-color: rgba(94, 195, 249, .34);
    background: radial-gradient(circle at 50% 100%, rgba(0, 122, 207, .24), rgba(255, 192, 67, .05) 60%, transparent 75%);
    transform: translateY(-1px);
}

.Content .InfoBar .InfoBarItem:not(:last-child)::after {
    right: -1px;
    width: 5px;
    height: 5px;
    border: 1px solid #50310c;
    background: linear-gradient(135deg, #fff1a1, #d89020 56%, #613200);
    box-shadow: 0 0 7px rgba(255, 183, 54, .82);
}

.Content .InfoBar .InfoBarItem::before {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    border: 1px solid #d6a441;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #143f67, #061527 58%, #01050a);
    color: #e9f8ff;
    font: bold 13px/24px Georgia, "Times New Roman", serif;
    box-shadow: inset 0 0 0 2px #030912, inset 0 0 8px rgba(31, 157, 230, .58), 0 0 7px rgba(222, 156, 47, .38);
    text-align: center;
}

.Content .InfoBar .InfoBarItem:has(img[alt="Discord"])::before { content: "D"; }
.Content .InfoBar .InfoBarItem:has(img[alt="WhatsApp"])::before { content: "W"; }
.Content .InfoBar .InfoBarItem:has(img[alt="Instagram"])::before { content: "I"; }
.Content .InfoBar .InfoBarItem:has(img[alt="Facebook"])::before { content: "f"; }
.Content .InfoBar .InfoBarItem:has(img[alt="Download"])::before { content: "\2193"; font-size: 18px; }
.Content .InfoBar .InfoBarItem:has(img[alt="Players Online"])::before { content: "\265B"; font-size: 15px; }

.Content .InfoBar a.InfoBarLinks {
    color: #ffe6a7;
    font-size: 11px;
    letter-spacing: .3px;
}

/* Make every header shortcut clickable across its complete visual tile. */
.Content .InfoBar .InfoBarItem { cursor: pointer; }
.Content .InfoBar .InfoBarItem .InfoBarLinks::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: 5px;
}
.Content .InfoBar .InfoBarItem:has(.InfoBarLinks:focus-visible) {
    border-color: rgba(103, 213, 255, .72);
    outline: 1px solid #d9a441;
    outline-offset: -2px;
    background: radial-gradient(circle at 50% 100%, rgba(0, 122, 207, .3), rgba(255, 192, 67, .08) 60%, transparent 75%);
}

/* =========================================================
   INDEX PAGE — Royal Madness presentation
   ========================================================= */
.IndexPage .HomeOverviewBox,
.IndexPage .HomeFeaturedBox,
.IndexPage .HomeNewsBox {
    position: relative;
    margin: 0 5px 24px;
    border: 1px solid #a66e20;
    border-radius: 5px;
    background: linear-gradient(180deg, #071426, #01070e);
    box-shadow: inset 0 0 0 2px #02060b, inset 0 0 0 3px rgba(45, 154, 221, .26), inset 0 0 26px rgba(0, 0, 0, .82), 0 9px 18px rgba(0, 0, 0, .64), 0 0 10px rgba(193, 126, 30, .22);
    color: #dbeeff;
    overflow: visible;
}

.IndexPage .HomeOverviewBox > .Corner-tl,
.IndexPage .HomeOverviewBox > .Corner-tr,
.IndexPage .HomeOverviewBox > .Border_1,
.IndexPage .HomeOverviewBox > .BorderTitleText,
.IndexPage .HomeOverviewBox > .Title,
.IndexPage .HomeOverviewBox > .CornerWrapper-b,
.IndexPage .HomeFeaturedBox > .Corner-tl,
.IndexPage .HomeFeaturedBox > .Corner-tr,
.IndexPage .HomeFeaturedBox > .Border_1,
.IndexPage .HomeFeaturedBox > .BorderTitleText,
.IndexPage .HomeFeaturedBox > .Title,
.IndexPage .HomeFeaturedBox > .CornerWrapper-b,
.IndexPage .HomeNewsBox > .Corner-tl,
.IndexPage .HomeNewsBox > .Corner-tr,
.IndexPage .HomeNewsBox > .Border_1,
.IndexPage .HomeNewsBox > .BorderTitleText,
.IndexPage .HomeNewsBox > .Title,
.IndexPage .HomeNewsBox > .CornerWrapper-b {
    display: none;
}

.IndexPage .HomeOverviewBox::before,
.IndexPage .HomeFeaturedBox::before,
.IndexPage .HomeNewsBox::before {
    display: flex;
    box-sizing: border-box;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #8e5a18;
    border-radius: 4px 4px 0 0;
    background: radial-gradient(circle at 50% 120%, rgba(15, 132, 207, .36), transparent 42%), linear-gradient(180deg, #102841, #06101d 68%, #02070d);
    color: #ffdda0;
    font: bold 19px/1 Georgia, "Times New Roman", serif;
    letter-spacing: 1.4px;
    text-shadow: 0 2px 2px #000, 0 0 8px rgba(44, 163, 232, .72);
    box-shadow: inset 0 -1px rgba(66, 187, 248, .28), inset 0 0 0 3px #020811;
}

.IndexPage .HomeOverviewBox::before { content: "MADNESS ONLINE"; }
.IndexPage .HomeFeaturedBox::before { content: "FEATURED ARTICLE"; }
.IndexPage .HomeNewsBox::before { content: "LATEST NEWS"; }

.IndexPage .HomeOverviewBox::after,
.IndexPage .HomeFeaturedBox::after,
.IndexPage .HomeNewsBox::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 35px;
    z-index: 5;
    width: 14px;
    height: 14px;
    border: 2px solid #dfaa45;
    background: linear-gradient(135deg, #c9f8ff, #27bdff 30%, #087bd4 62%, #002d69);
    box-shadow: inset 0 0 0 2px #05264d, 0 0 0 2px #211202, 0 0 9px #0b9ef2;
    transform: translateX(-50%) rotate(45deg);
}

.IndexPage .HomeOverviewBox > .Border_2,
.IndexPage .HomeFeaturedBox > .Border_2,
.IndexPage .HomeNewsBox > .Border_2 {
    margin: 0;
    padding: 4px;
    background: linear-gradient(90deg, #3d250b, #b17824 18%, #243d4f 50%, #b17824 82%, #3d250b);
}

.IndexPage .HomeOverviewBox > .Border_2 > .Border_3,
.IndexPage .HomeFeaturedBox > .Border_2 > .Border_3,
.IndexPage .HomeNewsBox > .Border_2 > .Border_3 {
    margin: 0;
    background: #020711;
}

.IndexPage .HomeOverviewBox .BoxContent,
.IndexPage .HomeFeaturedBox .BoxContent,
.IndexPage .HomeNewsBox .BoxContent {
    box-sizing: border-box;
    min-height: 0;
    padding: 18px;
    background-color: #06101d !important;
    background-image: radial-gradient(circle at 50% 0, rgba(16, 101, 159, .2), transparent 42%), linear-gradient(180deg, #081725, #030912) !important;
    color: #d7e9f7;
    font-family: Arial, sans-serif;
}

.IndexPage .countdown-link {
    margin: 0 0 18px;
}

.IndexPage .countdown-banner {
    position: relative;
    box-sizing: border-box;
    min-height: 104px;
    padding: 18px 24px;
    border: 1px solid #d6a140;
    border-radius: 4px;
    background: radial-gradient(circle at 18% 50%, rgba(16, 127, 205, .32), transparent 30%), linear-gradient(120deg, #06192c, #030910 58%, #241404) !important;
    animation: none;
    box-shadow: inset 0 0 0 2px #020711, inset 0 0 0 3px rgba(255, 205, 98, .38), inset 0 0 28px rgba(0, 0, 0, .78), 0 7px 14px rgba(0, 0, 0, .65), 0 0 9px rgba(36, 157, 231, .28);
}

.IndexPage .countdown-banner::before {
    content: "SECURE PAYMENT";
    position: absolute;
    top: 9px;
    left: 76px;
    color: #6fd8ff;
    font: bold 9px/1 Arial, sans-serif;
    letter-spacing: 1.6px;
}

.IndexPage .countdown-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid #d8a542;
    border-radius: 50%;
    background: radial-gradient(circle, #124a76, #03101e 70%);
    color: #8de6ff;
    font-size: 23px;
    box-shadow: inset 0 0 10px rgba(27, 159, 231, .6), 0 0 9px rgba(213, 151, 42, .35);
}

.IndexPage .countdown-title {
    padding-top: 12px;
    color: #ffe0a1;
    background: none;
    -webkit-text-fill-color: currentColor;
    font: bold 15px/1.35 Georgia, "Times New Roman", serif;
    text-shadow: 0 2px 2px #000;
    white-space: normal;
}

.IndexPage #countdown {
    min-width: 112px;
    margin-left: 12px;
    padding: 11px 14px;
    border: 1px solid #bd8128;
    border-radius: 3px;
    background: linear-gradient(180deg, #8e5b0c, #3b2104);
    color: #fff0b1;
    font: bold 13px/1 Arial, sans-serif;
    letter-spacing: .7px;
    text-align: center;
    text-shadow: 0 1px 2px #000;
    box-shadow: inset 0 0 0 2px #251503, inset 0 8px 12px rgba(255, 211, 95, .16), 0 0 8px rgba(230, 162, 39, .3);
}

.IndexPage .ice-welcome {
    margin: 0;
    max-width: none;
    border: 1px solid #82571f;
    border-radius: 4px;
    background: linear-gradient(180deg, #071729, #030a13);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .68), 0 5px 11px rgba(0, 0, 0, .48);
    animation: none;
}

.IndexPage .ice-welcome .ice-head {
    padding: 13px;
    border-bottom: 1px solid #79501c;
    background: linear-gradient(90deg, #080d14, #112b43 50%, #080d14);
    color: #ffdda0;
    font: bold 16px/1 Georgia, "Times New Roman", serif;
    letter-spacing: .8px;
}

.IndexPage .ice-welcome .ice-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
}

.IndexPage .ice-row {
    box-sizing: border-box;
    min-height: 92px;
    margin: 0;
    padding: 13px 10px;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    border: 1px solid #234d6c;
    border-radius: 4px;
    background: radial-gradient(circle at 50% 0, rgba(28, 125, 187, .24), transparent 58%), #040d18;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, .58);
    text-align: center;
}

.IndexPage .ice-ico {
    display: grid;
    width: 29px;
    min-width: 29px;
    height: 29px;
    place-items: center;
    border: 1px solid #c38d32;
    border-radius: 50%;
    background: #06192b;
    color: #8ddfff;
    font-size: 15px;
    box-shadow: inset 0 0 7px rgba(30, 150, 218, .52);
}

.IndexPage .ice-text {
    color: #c9ddea;
    font-size: 11px;
}

.IndexPage .ice-text b,
.IndexPage .ice-welcome a {
    color: #65d5ff;
}

.IndexPage .featured-ice {
    max-width: none;
    margin: 0;
    padding: 18px;
    border: 1px solid #76501f;
    border-radius: 4px;
    background: radial-gradient(circle at 14% 50%, rgba(12, 115, 190, .25), transparent 34%), linear-gradient(135deg, #071a2d, #030911 70%);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, .66), 0 5px 12px rgba(0, 0, 0, .5);
}

.IndexPage .featured-ice .featured-grid {
    grid-template-columns: 145px 1fr;
    gap: 20px;
}

.IndexPage .featured-ice .featured-icon {
    width: 130px;
    margin: auto;
    filter: drop-shadow(0 7px 8px rgba(0, 0, 0, .72));
}

.IndexPage .featured-ice .featured-badge {
    border-color: #a87527;
    background: #071625;
    color: #6ed9ff;
}

.IndexPage .featured-ice .featured-title {
    color: #ffe0a0;
    font: bold 18px/1.3 Georgia, "Times New Roman", serif;
}

.IndexPage .featured-ice .featured-line {
    color: #c7dce9;
}

.IndexPage .featured-ice .featured-line b {
    color: #59cfff;
}

.IndexPage .HomeNewsBox .BoxContent table[id="news"] {
    border: 1px solid #80571f !important;
    border-radius: 4px !important;
    background: #030b15 !important;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .65), 0 5px 11px rgba(0, 0, 0, .38) !important;
}

.IndexPage .HomeNewsBox .BoxContent table[id="news"] tr.yellow td.zheadline {
    padding: 12px 14px !important;
    border-bottom: 1px solid #8a5b20 !important;
    background: radial-gradient(circle at 50% 130%, rgba(13, 117, 183, .3), transparent 55%), linear-gradient(90deg, #07111d, #102a42, #07111d) !important;
    color: #ffe0a1 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.IndexPage .HomeNewsBox .BoxContent table[id="news"] tr:not(.yellow) td {
    background: linear-gradient(180deg, #071522, #030a12) !important;
    color: #cbdde9 !important;
}

.IndexPage .HomeNewsBox .BoxContent table[id="news"] a {
    color: #63d3ff !important;
}

@media (max-width: 850px) {
    .IndexPage .ice-welcome .ice-body { grid-template-columns: 1fr; }
    .IndexPage .countdown-banner { flex-wrap: wrap; }
}

/* =========================================================
   CHARACTER PROFILE — Royal Madness presentation
   ========================================================= */
.CharacterProfilePage .CharacterProfileBox {
    position: relative;
    margin: 0 5px 24px;
    border: 1px solid #a66d20;
    border-radius: 5px;
    background: linear-gradient(180deg, #071526, #01070e);
    box-shadow: inset 0 0 0 2px #02060b, inset 0 0 0 3px rgba(47, 157, 221, .25), inset 0 0 30px rgba(0, 0, 0, .84), 0 10px 20px rgba(0, 0, 0, .7), 0 0 10px rgba(195, 128, 31, .24);
    color: #d8eaf7;
    overflow: visible;
}

.CharacterProfilePage .CharacterProfileBox > .Corner-tl,
.CharacterProfilePage .CharacterProfileBox > .Corner-tr,
.CharacterProfilePage .CharacterProfileBox > .Border_1,
.CharacterProfilePage .CharacterProfileBox > .BorderTitleText,
.CharacterProfilePage .CharacterProfileBox > .Title,
.CharacterProfilePage .CharacterProfileBox > .CornerWrapper-b {
    display: none;
}

.CharacterProfilePage .CharacterProfileBox::before {
    content: "CHARACTER PROFILE";
    display: flex;
    box-sizing: border-box;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #99651d;
    border-radius: 4px 4px 0 0;
    background: radial-gradient(circle at 50% 120%, rgba(13, 132, 207, .38), transparent 44%), linear-gradient(180deg, #102a45, #06111e 70%, #02070e);
    color: #ffe0a2;
    font: bold 21px/1 Georgia, "Times New Roman", serif;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 2px #000, 0 0 9px rgba(43, 165, 234, .7);
    box-shadow: inset 0 -1px rgba(69, 188, 248, .3), inset 0 0 0 3px #020811;
}

.CharacterProfilePage .CharacterProfileBox::after {
    content: "";
    position: absolute;
    top: 39px;
    left: 50%;
    z-index: 5;
    width: 15px;
    height: 15px;
    border: 2px solid #e1ab45;
    background: linear-gradient(135deg, #d6faff, #39c9ff 27%, #087bd3 62%, #002b66);
    box-shadow: inset 0 0 0 2px #06264e, 0 0 0 2px #211202, 0 0 10px #0ba3f8;
    transform: translateX(-50%) rotate(45deg);
}

.CharacterProfilePage .CharacterProfileBox > .Border_2 {
    margin: 0;
    padding: 4px;
    background: linear-gradient(90deg, #3d250b, #b17925 17%, #274253 50%, #b17925 83%, #3d250b);
}

.CharacterProfilePage .CharacterProfileBox > .Border_2 > .Border_3 {
    margin: 0;
    background: #020711;
}

.CharacterProfilePage .CharacterProfileBox .BoxContent {
    box-sizing: border-box;
    min-height: 0;
    padding: 16px;
    background-color: #06101d !important;
    background-image: radial-gradient(circle at 50% 0, rgba(17, 108, 169, .2), transparent 38%), linear-gradient(180deg, #081725, #030912) !important;
    color: #ccdfec;
    font-family: Arial, sans-serif;
}

.CharacterProfilePage #characterProfileTable {
    width: 100%;
    margin: 0 0 18px;
    border: 1px solid #82571f;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 4px;
    background: #030b14;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .72), 0 6px 13px rgba(0, 0, 0, .46);
    color: #d4e5f0;
    overflow: hidden;
}

.CharacterProfilePage #characterProfileTable > thead > tr.yellow {
    height: 126px;
    background: radial-gradient(circle at 17% 50%, rgba(12, 122, 196, .34), transparent 30%), linear-gradient(110deg, #071827, #0d2942 52%, #050c15);
}

.CharacterProfilePage #characterProfileTable > thead > tr.yellow > th {
    padding: 13px 18px;
    border: 0;
    border-bottom: 1px solid #a06a20;
    background: transparent !important;
    color: #ffe1a1;
    text-align: left;
}

.CharacterProfilePage #characterProfileTable > thead > tr.yellow > th:first-child {
    position: relative;
    width: 150px;
    border-right: 1px solid rgba(184, 125, 38, .45);
}

.CharacterProfilePage #characterProfileTable h1 {
    margin: 0;
    color: #ffe0a0;
    font: bold 34px/1.1 Georgia, "Times New Roman", serif;
    letter-spacing: 1px;
    text-shadow: 0 3px 2px #000, 0 0 10px rgba(35, 167, 239, .66);
}

.CharacterProfilePage #characterProfileTable .outfit {
    position: relative;
    width: 112px;
    height: 94px;
    margin: auto;
    border: 1px solid #9d6c29;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(23, 115, 174, .34), #03101d 67%);
    box-shadow: inset 0 0 15px rgba(0, 0, 0, .72), 0 0 9px rgba(35, 156, 221, .32);
}

.CharacterProfilePage #characterProfileTable .outfit > img {
    position: absolute;
    right: 23px;
    bottom: 11px;
    width: auto;
    height: auto;
    max-width: none;
    transform: scale(1.55);
    transform-origin: right bottom;
    image-rendering: pixelated;
}

.CharacterProfilePage #characterProfileTable .flag {
    position: absolute;
    right: 9px;
    bottom: 8px;
    z-index: 2;
    padding: 2px 4px;
    border: 1px solid #9b6a27;
    border-radius: 2px;
    background: #020811;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .72);
}

.CharacterProfilePage #characterProfileTable > tbody > tr:not(:has(#piv)) > td {
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid rgba(55, 112, 151, .32);
    background: rgba(4, 14, 25, .88);
    color: #c9dce9;
    font-size: 13px;
}

.CharacterProfilePage #characterProfileTable > tbody > tr:not(:has(#piv)):nth-child(even) > td {
    background: rgba(8, 27, 44, .82);
}

.CharacterProfilePage #characterProfileTable > tbody > tr:not(:has(#piv)) > td:first-child {
    width: 29%;
    border-right: 1px solid rgba(168, 113, 32, .38);
    color: #6dd6ff;
    font: bold 11px/1.3 Arial, sans-serif;
    letter-spacing: .75px;
    text-transform: uppercase;
}

.CharacterProfilePage #characterProfileTable a,
.CharacterProfilePage .CharacterProfileBox a {
    color: #62d4ff;
    text-decoration: none;
}

.CharacterProfilePage #characterProfileTable a:hover,
.CharacterProfilePage .CharacterProfileBox a:hover {
    color: #ffe09b;
}

.CharacterProfilePage #characterProfileTable .status-online > td:last-child {
    color: #4eea80;
    font-weight: bold;
    text-shadow: 0 0 7px rgba(46, 224, 104, .4);
}

.CharacterProfilePage #characterProfileTable .status-offline > td:last-child {
    color: #ff7474;
    font-weight: bold;
}

/* Character identity hero: free-standing outfit and premium dossier layout. */
.CharacterProfilePage #characterProfileTable > thead > tr.CharacterIdentityRow {
    height: auto;
    background:
        radial-gradient(circle at 14% 45%, rgba(26, 157, 224, .29), transparent 25%),
        radial-gradient(circle at 88% 0, rgba(168, 108, 24, .13), transparent 30%),
        linear-gradient(112deg, #071c2d, #03101c 58%, #110c05);
}

.CharacterProfilePage #characterProfileTable > thead > tr.CharacterIdentityRow > th,
.CharacterProfilePage #characterProfileTable > thead > tr.CharacterIdentityRow > th:first-child {
    width: auto;
    padding: 0;
    border-right: 0;
    text-align: left;
}

.CharacterProfilePage .CharacterIdentityHero {
    position: relative;
    display: grid;
    min-height: 200px;
    grid-template-columns: 215px minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
}

.CharacterProfilePage .CharacterIdentityHero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(118deg, transparent 62%, rgba(220, 157, 54, .08) 62.2%, transparent 78%),
        repeating-linear-gradient(90deg, transparent 0 78px, rgba(76, 183, 230, .025) 79px 80px);
}

.CharacterProfilePage .CharacterOutfitStage {
    position: relative;
    min-height: 200px;
    border-right: 1px solid rgba(194, 135, 42, .55);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(3, 11, 19, .78), transparent 28%, transparent 72%, rgba(3, 11, 19, .78)),
        radial-gradient(ellipse at 50% 72%, rgba(30, 172, 232, .31), transparent 46%);
}

.CharacterProfilePage .CharacterOutfitStage::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 38px;
    width: 142px;
    height: 26px;
    border: 1px solid rgba(211, 151, 48, .72);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(73, 211, 255, .34), rgba(4, 28, 43, .5) 48%, transparent 71%);
    box-shadow: 0 0 18px rgba(41, 181, 235, .23), inset 0 0 10px rgba(0, 0, 0, .7);
    transform: translateX(-50%);
}

.CharacterProfilePage .CharacterOutfitStage::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 48px;
    width: 90px;
    height: 130px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(77, 211, 255, .08), transparent);
    clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
    transform: translateX(-50%);
}

.CharacterProfilePage #characterProfileTable .CharacterOutfitStage .outfit {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.CharacterProfilePage #characterProfileTable .CharacterOutfitStage .outfit > img {
    position: absolute;
    right: auto;
    /* Outfit service returns a 64x64 canvas with the sprite in its lower-right 32x32 quadrant. */
    left: calc(50% - 34px);
    bottom: 52px;
    width: auto;
    height: auto;
    max-width: none;
    filter: drop-shadow(0 9px 5px rgba(0, 0, 0, .8)) drop-shadow(0 0 8px rgba(47, 191, 248, .35));
    image-rendering: pixelated;
    transform: translateX(-50%) scale(2.15);
    transform-origin: center bottom;
}

.CharacterProfilePage .CharacterStageRune {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 15px;
    height: 15px;
    border: 1px solid #be8427;
    background: #063759;
    box-shadow: inset 0 0 0 2px #020b12, 0 0 8px rgba(49, 190, 244, .44);
    transform: translateY(-50%) rotate(45deg);
}
.CharacterProfilePage .CharacterStageRuneLeft { left: 17px; }
.CharacterProfilePage .CharacterStageRuneRight { right: 17px; }

.CharacterProfilePage .CharacterStageLabel {
    position: absolute;
    right: 19px;
    bottom: 12px;
    left: 19px;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    color: #72dbff;
    font: bold 8px/1 Arial, sans-serif;
    letter-spacing: 1.5px;
    text-align: center;
}
.CharacterProfilePage .CharacterStageLabel i { height: 1px; background: linear-gradient(90deg, transparent, #806027); }
.CharacterProfilePage .CharacterStageLabel i:last-child { background: linear-gradient(90deg, #806027, transparent); }

.CharacterProfilePage #characterProfileTable .CharacterOutfitStage .flag {
    top: 12px;
    right: 12px;
    bottom: auto;
    z-index: 4;
    padding: 4px 6px;
    border-color: #bb832d;
    background: rgba(1, 8, 14, .92);
}

.CharacterProfilePage #characterProfileTable .CharacterOutfitStage .flag img {
    display: block;
    min-width: 18px;
}

.CharacterProfilePage .CharacterFallbackMark {
    position: absolute;
    top: 48%;
    left: 50%;
    z-index: 2;
    color: #e6c16c;
    font: bold 60px/1 Georgia, serif;
    text-shadow: 0 0 18px #138bc6;
    transform: translate(-50%, -50%);
}

.CharacterProfilePage .CharacterIdentityCopy {
    position: relative;
    z-index: 1;
    display: flex;
    box-sizing: border-box;
    min-width: 0;
    padding: 28px 28px 24px;
    flex-direction: column;
    justify-content: center;
}

.CharacterProfilePage .CharacterIdentityEyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #66d9ff;
    font: bold 9px/1 Arial, sans-serif;
    letter-spacing: 1.9px;
}

.CharacterProfilePage .CharacterIdentityEyebrow > span {
    width: 18px;
    height: 2px;
    background: #ca8e2c;
    box-shadow: 0 0 5px rgba(202, 142, 44, .55);
}

.CharacterProfilePage #characterProfileTable .CharacterIdentityCopy h1 {
    margin: 8px 0 5px;
    color: #ffe0a0;
    font-size: 39px;
}

.CharacterProfilePage .CharacterIdentityCopy > p {
    margin: 0;
    color: #a8bfcd;
    font: 12px/1.5 Arial, sans-serif;
}

.CharacterProfilePage .CharacterIdentityBadges {
    display: grid;
    margin-top: 20px;
    grid-template-columns: .72fr 1.18fr .85fr .9fr;
    gap: 8px;
}

.CharacterProfilePage .CharacterIdentityBadges > span {
    display: grid;
    box-sizing: border-box;
    min-width: 0;
    min-height: 55px;
    padding: 9px 10px;
    border: 1px solid #315c75;
    align-content: center;
    background: rgba(2, 12, 21, .82);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .56);
}

.CharacterProfilePage .CharacterIdentityBadges small {
    margin-bottom: 5px;
    color: #6593aa;
    font: bold 7px/1 Arial, sans-serif;
    letter-spacing: 1.2px;
}

.CharacterProfilePage .CharacterIdentityBadges strong {
    overflow: hidden;
    color: #f0d28b;
    font: bold 12px/1.15 Arial, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.CharacterProfilePage .CharacterIdentityBadges .CharacterStatusBadge strong {
    display: flex;
    align-items: center;
    gap: 6px;
}

.CharacterProfilePage .CharacterStatusBadge strong i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.CharacterProfilePage .CharacterStatusBadge.is-online strong { color: #5ced98; }
.CharacterProfilePage .CharacterStatusBadge.is-online strong i { background: #42ef91; box-shadow: 0 0 7px #42ef91; }
.CharacterProfilePage .CharacterStatusBadge.is-offline strong { color: #ff8585; }
.CharacterProfilePage .CharacterStatusBadge.is-offline strong i { background: #db5252; box-shadow: 0 0 5px #db5252; }
.CharacterProfilePage .CharacterPremiumBadge.is-active strong { color: #54e794; }
.CharacterProfilePage .CharacterPremiumBadge.is-inactive strong { color: #ff7676; }

.CharacterProfilePage .CharacterTableState {
    display: inline-flex;
    min-height: 25px;
    padding: 0 10px;
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 14px;
    font-size: 11px;
    font-weight: bold;
}
.CharacterProfilePage .CharacterTableState::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}
.CharacterProfilePage .CharacterTableState.is-active { color: #50df8f; background: rgba(33, 126, 80, .12); }
.CharacterProfilePage .CharacterTableState.is-inactive { color: #ff7777; background: rgba(139, 40, 43, .12); }

@media (max-width: 760px) {
    .CharacterProfilePage .CharacterIdentityHero { grid-template-columns: 175px minmax(0, 1fr); }
    .CharacterProfilePage .CharacterIdentityBadges { grid-template-columns: repeat(2, 1fr); }
    .CharacterProfilePage .CharacterIdentityCopy { padding: 22px 18px; }
}

@media (max-width: 540px) {
    .CharacterProfilePage .CharacterIdentityHero { grid-template-columns: 1fr; }
    .CharacterProfilePage .CharacterOutfitStage { min-height: 185px; border-right: 0; border-bottom: 1px solid rgba(194, 135, 42, .55); }
    .CharacterProfilePage .CharacterIdentityCopy { padding: 21px 15px; text-align: center; }
    .CharacterProfilePage .CharacterIdentityEyebrow { justify-content: center; }
    .CharacterProfilePage .CharacterIdentityCopy > p { font-size: 11px; }
}

.CharacterProfilePage #characterProfileTable #piv {
    padding: 18px !important;
    border: 0;
    border-top: 1px solid #9d6820;
    background-color: #020813 !important;
    background-image: radial-gradient(circle at 50% 0, rgba(22, 107, 163, .2), transparent 45%), linear-gradient(180deg, #071522, #02070d) !important;
}

.CharacterProfilePage #piv_flex {
    box-sizing: border-box;
    min-height: 275px;
    padding: 16px;
    border: 1px solid #234b67;
    border-radius: 4px;
    background: radial-gradient(circle at 50% 20%, rgba(20, 87, 130, .16), transparent 58%), #030a12;
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .78);
}

.CharacterProfilePage #piv_i,
.CharacterProfilePage #piv_s,
.CharacterProfilePage #piv_o {
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .72));
}

/* Character equipment, skills and outfit showcase */
.CharacterProfilePage #characterProfileTable #piv {
    padding: 14px !important;
}

.CharacterProfilePage #characterProfileTable #piv_flex {
    display: grid !important;
    grid-template-columns: minmax(158px, .72fr) minmax(214px, .95fr) minmax(238px, 1.15fr);
    gap: 12px;
    align-items: start;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-family: "Trebuchet MS", Arial, sans-serif;
}

.CharacterProfilePage #piv_flex .piv_panel {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    padding: 58px 12px 38px;
    border: 1px solid #91601b;
    border-radius: 5px;
    background:
        linear-gradient(135deg, rgba(49, 156, 220, .08), transparent 35%),
        radial-gradient(circle at 50% 28%, rgba(20, 98, 151, .14), transparent 56%),
        linear-gradient(180deg, #071522 0%, #020912 100%);
    box-shadow: inset 0 0 0 3px #02070d, inset 0 0 0 4px rgba(47, 127, 176, .28), 0 8px 16px rgba(0, 0, 0, .42);
    overflow: hidden;
}

.CharacterProfilePage #piv_flex .piv_panel::before,
.CharacterProfilePage #piv_flex .piv_panel::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.CharacterProfilePage #piv_flex .piv_panel::before {
    inset: 4px;
    border: 1px solid rgba(77, 177, 235, .16);
}

.CharacterProfilePage #piv_flex .piv_panel::after {
    top: 48px;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #b47a22 18%, #48bff8 50%, #b47a22 82%, transparent);
    box-shadow: 0 0 7px rgba(39, 173, 245, .35);
}

.CharacterProfilePage #piv_flex .piv_panel_header {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 48px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #f8d98a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .5px;
    text-align: left;
    text-shadow: 0 1px #000, 0 0 8px rgba(255, 183, 57, .22);
}

.CharacterProfilePage #piv_flex .piv_panel_header small {
    display: block;
    margin-bottom: 4px;
    color: #67d4ff;
    font-family: Arial, sans-serif;
    font-size: 7px;
    line-height: 1;
    letter-spacing: 1.45px;
}

.CharacterProfilePage #piv_flex .piv_panel_icon {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border: 1px solid #c28a27;
    border-radius: 50%;
    background: radial-gradient(circle, #127db4 0%, #073456 48%, #010711 72%);
    color: #eaf9ff;
    font-family: Arial, sans-serif;
    font-size: 12px;
    box-shadow: inset 0 0 0 2px #03101c, 0 0 9px rgba(27, 176, 244, .28);
}

.CharacterProfilePage #piv_flex .piv_panel_footer {
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: 10px;
    left: 12px;
    color: #7894a8;
    font-size: 8px;
    line-height: 1.2;
    letter-spacing: .35px;
    text-align: center;
}

.CharacterProfilePage #piv_flex .piv_legend_dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 5px;
    border-radius: 50%;
    background: #3ee482;
    box-shadow: 0 0 6px #3ee482;
    vertical-align: 1px;
}

.CharacterProfilePage #piv_flex .piv_panel_equipment #piv_i,
.CharacterProfilePage #piv_flex .piv_panel_skills #piv_s {
    margin: 6px auto 0;
}

.CharacterProfilePage #piv_flex .piv_panel_skills #piv_s {
    position: relative;
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    margin-top: 2px;
}

.CharacterProfilePage #piv_flex .piv_storage_stats {
    position: relative;
    z-index: 2;
    display: grid;
    width: 100%;
    gap: 4px;
}

.CharacterProfilePage #piv_flex .piv_storage_stat {
    position: relative;
    display: grid;
    min-height: 29px;
    box-sizing: border-box;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid rgba(52, 121, 161, .38);
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(15, 55, 82, .68), rgba(3, 13, 23, .82));
    color: #b8cad7;
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.CharacterProfilePage #piv_flex .piv_storage_stat:nth-child(even) {
    background: linear-gradient(90deg, rgba(11, 43, 66, .72), rgba(2, 10, 18, .9));
}

.CharacterProfilePage #piv_flex .piv_storage_stat_level {
    min-height: 38px;
    margin-bottom: 3px;
    border-color: #a87320;
    background: radial-gradient(circle at 15% 50%, rgba(21, 143, 203, .3), transparent 38%), linear-gradient(90deg, #0b263b, #040b13);
    box-shadow: inset 0 0 12px rgba(26, 147, 209, .1), 0 0 8px rgba(206, 143, 31, .1);
}

.CharacterProfilePage #piv_flex .piv_storage_stat_icon {
    color: #54d5ff;
    font-size: 9px;
    text-align: center;
    text-shadow: 0 0 7px rgba(65, 208, 255, .75);
}

.CharacterProfilePage #piv_flex .piv_storage_stat_level .piv_storage_stat_icon {
    color: #ffd671;
    font-size: 12px;
    text-shadow: 0 0 8px rgba(255, 190, 56, .6);
}

.CharacterProfilePage #piv_flex .piv_storage_stat_label {
    overflow: hidden;
    color: #a9c2d2;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.CharacterProfilePage #piv_flex .piv_storage_stat_value {
    color: #f4d486;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: right;
    text-shadow: 0 1px #000;
    white-space: nowrap;
}

.CharacterProfilePage #piv_flex .piv_storage_stat_level .piv_storage_stat_label {
    color: #dff6ff;
    font-size: 11px;
}

.CharacterProfilePage #piv_flex .piv_storage_stat_level .piv_storage_stat_value {
    color: #65dcff;
    font-size: 14px;
    text-shadow: 0 0 8px rgba(55, 190, 244, .32);
}

/* Royal frames replacing the original grey equipment/outfit windows */
.CharacterProfilePage #piv_flex .piv_panel_equipment #piv_i,
.CharacterProfilePage #piv_flex .piv_panel_outfits #piv_o {
    isolation: isolate;
    border-radius: 5px;
    background:
        radial-gradient(circle at 50% 22%, rgba(25, 144, 208, .24), transparent 38%),
        linear-gradient(145deg, rgba(15, 55, 83, .95), rgba(2, 10, 18, .98) 64%);
    box-shadow:
        inset 0 0 0 1px #07111b,
        inset 0 0 0 2px rgba(195, 133, 31, .8),
        inset 0 0 0 5px #020913,
        inset 0 0 24px rgba(21, 139, 202, .18),
        0 7px 15px rgba(0, 0, 0, .65),
        0 0 9px rgba(38, 173, 235, .12);
    overflow: hidden;
}

.CharacterProfilePage #piv_flex .piv_panel_equipment #piv_i::before,
.CharacterProfilePage #piv_flex .piv_panel_outfits #piv_o::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 6px;
    border: 1px solid rgba(64, 180, 235, .28);
    border-radius: 2px;
    background:
        linear-gradient(135deg, #e4a83d 0 2px, transparent 2px) top left / 18px 18px no-repeat,
        linear-gradient(225deg, #e4a83d 0 2px, transparent 2px) top right / 18px 18px no-repeat,
        linear-gradient(45deg, #e4a83d 0 2px, transparent 2px) bottom left / 18px 18px no-repeat,
        linear-gradient(315deg, #e4a83d 0 2px, transparent 2px) bottom right / 18px 18px no-repeat;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .68);
    pointer-events: none;
}

.CharacterProfilePage #piv_flex .piv_panel_equipment #piv_i::after,
.CharacterProfilePage #piv_flex .piv_panel_outfits #piv_o::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: 4px;
    left: 50%;
    width: 34px;
    height: 2px;
    border-radius: 50%;
    background: #70dcff;
    box-shadow: 0 0 8px #38bff8, 0 0 18px rgba(56, 191, 248, .55);
    transform: translateX(-50%);
    pointer-events: none;
}

.CharacterProfilePage #piv_flex .piv_panel_equipment #piv_i > img.bg {
    display: none !important;
}

.CharacterProfilePage #piv_flex .piv_equipment_slots {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
}

.CharacterProfilePage #piv_flex .piv_equipment_slot {
    position: absolute;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid #285b79;
    border-radius: 4px;
    background:
        radial-gradient(circle at 50% 42%, rgba(40, 143, 194, .18), transparent 48%),
        linear-gradient(145deg, #071827, #020811);
    box-shadow: inset 0 0 0 2px #020812, inset 0 0 9px rgba(31, 144, 198, .16), 0 1px 3px #000;
}

.CharacterProfilePage #piv_flex .piv_equipment_slot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border: 1px solid rgba(91, 202, 247, .22);
    transform: translate(-50%, -50%) rotate(45deg);
}

.CharacterProfilePage #piv_flex .piv_equipment_slot_1 { left: 48px; top: 39px; }
.CharacterProfilePage #piv_flex .piv_equipment_slot_2 { left: 11px; top: 53px; }
.CharacterProfilePage #piv_flex .piv_equipment_slot_3 { left: 85px; top: 53px; }
.CharacterProfilePage #piv_flex .piv_equipment_slot_4 { left: 48px; top: 76px; }
.CharacterProfilePage #piv_flex .piv_equipment_slot_5 { left: 85px; top: 90px; }
.CharacterProfilePage #piv_flex .piv_equipment_slot_6 { left: 11px; top: 90px; }
.CharacterProfilePage #piv_flex .piv_equipment_slot_7 { left: 48px; top: 113px; }
.CharacterProfilePage #piv_flex .piv_equipment_slot_8 { left: 48px; top: 150px; }
.CharacterProfilePage #piv_flex .piv_equipment_slot_9 { left: 11px; top: 127px; }
.CharacterProfilePage #piv_flex .piv_equipment_slot_10 { left: 85px; top: 127px; }

.CharacterProfilePage #piv_flex .piv_panel_equipment #piv_i .itm {
    box-sizing: border-box;
    border-radius: 4px;
    background: radial-gradient(circle, rgba(23, 96, 137, .34), #020812 72%) !important;
    filter: drop-shadow(0 2px 2px #000);
}

.CharacterProfilePage #piv_flex .piv_panel_equipment #piv_i .itm,
.CharacterProfilePage #piv_flex .piv_panel_equipment #piv_i .inventory_outfit,
.CharacterProfilePage #piv_flex .piv_panel_equipment #piv_i #piv_lifebar,
.CharacterProfilePage #piv_flex .piv_panel_equipment #piv_i #piv_manabar,
.CharacterProfilePage #piv_flex .piv_panel_equipment #piv_i #piv_lifetext,
.CharacterProfilePage #piv_flex .piv_panel_equipment #piv_i #piv_manatext,
.CharacterProfilePage #piv_flex .piv_panel_equipment #piv_i #piv_cap {
    z-index: 2;
}

.CharacterProfilePage #piv_flex .piv_panel_outfits #piv_o > .bg {
    display: none !important;
}

.CharacterProfilePage #piv_flex .piv_panel_outfits #piv_o_container {
    position: relative;
    z-index: 2;
}

.CharacterProfilePage #piv_flex .piv_panel_outfits #piv_o_container::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 15px 8px 8px;
    background:
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(68, 177, 229, .09) 39px 40px),
        repeating-linear-gradient(0deg, transparent 0 32px, rgba(68, 177, 229, .08) 32px 33px);
    pointer-events: none;
}

.CharacterProfilePage #piv_flex .piv_panel_outfits #piv_o_container .o:not(.grayimg) {
    filter: drop-shadow(0 0 3px rgba(66, 213, 255, .75)) drop-shadow(0 2px 2px #000);
}

.CharacterProfilePage #piv_flex .piv_panel_outfits #piv_o_container .o.grayimg {
    visibility: hidden !important;
    opacity: 0 !important;
}

.CharacterProfilePage #piv_flex .piv_panel_outfits #piv_o {
    margin: 2px auto 0;
}

@media (max-width: 920px) {
    .CharacterProfilePage #characterProfileTable #piv_flex {
        grid-template-columns: repeat(2, minmax(190px, 1fr));
    }

    .CharacterProfilePage #piv_flex .piv_panel_outfits {
        grid-column: 1 / -1;
    }
}

@media (max-width: 590px) {
    .CharacterProfilePage #characterProfileTable #piv_flex {
        grid-template-columns: 1fr;
    }

    .CharacterProfilePage #piv_flex .piv_panel_outfits {
        grid-column: auto;
    }
}

.CharacterProfilePage .comment,
.CharacterProfilePage .achievements,
.CharacterProfilePage .deathlist,
.CharacterProfilePage #characterprofileQuest,
.CharacterProfilePage #characterProfileTable.table {
    width: 100%;
    margin: 16px 0;
    border: 1px solid #80561f;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 4px;
    background: #030b14;
    color: #cbdde9;
    overflow: hidden;
    box-shadow: 0 5px 11px rgba(0, 0, 0, .42);
}

.CharacterProfilePage .comment th,
.CharacterProfilePage .comment td,
.CharacterProfilePage .achievements th,
.CharacterProfilePage .achievements td,
.CharacterProfilePage .deathlist th,
.CharacterProfilePage .deathlist td,
.CharacterProfilePage #characterprofileQuest th,
.CharacterProfilePage #characterprofileQuest td,
.CharacterProfilePage #characterProfileTable.table th,
.CharacterProfilePage #characterProfileTable.table td {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid rgba(51, 105, 143, .3);
    background: rgba(5, 18, 31, .92);
    color: #cbdde9;
}

.CharacterProfilePage .comment tr.yellow > *,
.CharacterProfilePage .deathlist tr.yellow > *,
.CharacterProfilePage #characterprofileQuest tr.yellow > *,
.CharacterProfilePage #characterProfileTable.table tr.yellow > *,
.CharacterProfilePage .achievements thead > tr > * {
    border-bottom: 1px solid #8d5e20;
    background: radial-gradient(circle at 50% 130%, rgba(15, 116, 181, .3), transparent 60%), linear-gradient(90deg, #07111d, #102a42, #07111d);
    color: #ffe0a0;
    font-family: Georgia, "Times New Roman", serif;
}

.CharacterProfilePage .CharacterProfileBox h3,
.CharacterProfilePage .CharacterProfileBox > h3 {
    margin: 20px 0 8px;
    padding: 12px 14px;
    border: 1px solid #80561f;
    border-radius: 4px;
    background: linear-gradient(90deg, #07111d, #10283e, #07111d);
    color: #ffe0a0;
    font: bold 16px/1 Georgia, "Times New Roman", serif;
}

.CharacterProfilePage #characterprofileQuest #progress {
    position: relative;
    overflow: hidden;
    background: #020811;
}

.CharacterProfilePage #characterprofileQuest #bar {
    height: 22px;
    background: linear-gradient(90deg, #086db3, #29c8f5);
    box-shadow: 0 0 8px rgba(23, 168, 231, .5);
}

.CharacterProfilePage #characterprofileQuest #percent {
    position: relative;
    z-index: 2;
    color: #fff;
    font-weight: bold;
}

.CharacterProfilePage .address {
    margin: 18px 0 2px;
    padding: 12px 14px;
    border: 1px solid #234d69;
    border-radius: 4px;
    background: #030b14;
    color: #91aebe;
    font-size: 11px;
    word-break: break-all;
}

/* =========================================================
   MY ACCOUNT — Royal Madness dashboard
   ========================================================= */
.MyAccountPage .AccountPageShell {
    position: relative;
    margin: 0 5px 24px;
    border: 1px solid #a66d20;
    border-radius: 5px;
    background: linear-gradient(180deg, #071526, #01070e);
    box-shadow: inset 0 0 0 2px #02060b, inset 0 0 0 3px rgba(47, 157, 221, .25), inset 0 0 30px rgba(0, 0, 0, .84), 0 10px 20px rgba(0, 0, 0, .7), 0 0 10px rgba(195, 128, 31, .24);
    color: #d8eaf7;
    overflow: visible;
}

.MyAccountPage .AccountPageShell > .Corner-tl,
.MyAccountPage .AccountPageShell > .Corner-tr,
.MyAccountPage .AccountPageShell > .Border_1,
.MyAccountPage .AccountPageShell > .BorderTitleText,
.MyAccountPage .AccountPageShell > .Title,
.MyAccountPage .AccountPageShell > .CornerWrapper-b {
    display: none;
}

.MyAccountPage .AccountPageShell::before {
    content: "";
    display: flex;
    box-sizing: border-box;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #99651d;
    border-radius: 4px 4px 0 0;
    background: radial-gradient(circle at 50% 120%, rgba(13, 132, 207, .38), transparent 44%), linear-gradient(180deg, #102a45, #06111e 70%, #02070e);
    color: #ffe0a2;
    font: bold 21px/1 Georgia, "Times New Roman", serif;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 2px #000, 0 0 9px rgba(43, 165, 234, .7);
    box-shadow: inset 0 -1px rgba(69, 188, 248, .3), inset 0 0 0 3px #020811;
}

.MyAccountPage .AccountPageTopbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding: 0 14px 0 22px;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.MyAccountPage .AccountPageTopbarTitle {
    color: #ffe0a2;
    font: bold 21px/1 Georgia, "Times New Roman", serif;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 2px #000, 0 0 9px rgba(43, 165, 234, .7);
}

.MyAccountPage .AccountPageLogout {
    position: relative;
    isolation: isolate;
    display: flex;
    box-sizing: border-box;
    min-width: 126px;
    height: 36px;
    padding: 0 17px 0 9px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    overflow: hidden;
    border: 1px solid #d09235;
    border-radius: 4px;
    background: radial-gradient(circle at 15% 45%, rgba(255, 104, 79, .35), transparent 27%), linear-gradient(180deg, #5b1715, #240707 58%, #0d0304);
    color: #ffe5b5;
    font: bold 11px/1 Arial, sans-serif;
    letter-spacing: 1px;
    text-decoration: none;
    text-shadow: 0 1px 2px #000;
    box-shadow: inset 0 0 0 2px #100203, inset 0 0 10px rgba(255, 80, 53, .24), 0 3px 8px rgba(0, 0, 0, .62), 0 0 7px rgba(198, 102, 34, .26);
    pointer-events: auto;
    transition: border-color .18s ease, color .18s ease, filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.MyAccountPage .AccountPageLogout::before {
    content: "";
    position: absolute;
    top: -80%;
    left: -38%;
    z-index: -1;
    width: 30%;
    height: 260%;
    background: linear-gradient(90deg, transparent, rgba(255, 231, 179, .26), transparent);
    transform: rotate(22deg);
    transition: left .42s ease;
}

.MyAccountPage .AccountPageLogout:hover {
    border-color: #ffbc55;
    color: #fff3ca;
    filter: brightness(1.18);
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 2px #100203, inset 0 0 12px rgba(255, 93, 60, .34), 0 5px 10px rgba(0, 0, 0, .7), 0 0 10px rgba(236, 115, 44, .42);
}

.MyAccountPage .AccountPageLogout:hover::before {
    left: 120%;
}

.MyAccountPage .AccountPageLogoutIcon {
    position: relative;
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border: 1px solid #e0a045;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #d94f3e, #5c120e 68%, #140303);
    box-shadow: inset 0 0 6px rgba(255, 167, 112, .38), 0 0 6px rgba(224, 79, 46, .44);
}

.MyAccountPage .AccountPageLogoutIcon::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 2;
    width: 2px;
    height: 8px;
    border-radius: 2px;
    background: #fff1cf;
    box-shadow: 0 0 4px rgba(255, 239, 195, .7);
}

.MyAccountPage .AccountPageLogoutIcon::after {
    content: "";
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    margin-top: 3px;
    border: 2px solid #fff1cf;
    border-top-color: transparent;
    border-radius: 50%;
}

.MyAccountPage .AccountPageShell::after {
    content: "";
    position: absolute;
    top: 39px;
    left: 50%;
    z-index: 5;
    width: 15px;
    height: 15px;
    border: 2px solid #e1ab45;
    background: linear-gradient(135deg, #d6faff, #39c9ff 27%, #087bd3 62%, #002b66);
    box-shadow: inset 0 0 0 2px #06264e, 0 0 0 2px #211202, 0 0 10px #0ba3f8;
    transform: translateX(-50%) rotate(45deg);
}

@media (max-width: 620px) {
    .MyAccountPage .AccountPageTopbar { padding: 0 9px 0 14px; }
    .MyAccountPage .AccountPageTopbarTitle { font-size: 16px; letter-spacing: .8px; }
    .MyAccountPage .AccountPageLogout { min-width: 98px; padding-right: 10px; font-size: 9px; }
}

/* =========================================================
   HELPDESK — secure ticket center and conversation timeline
   ========================================================= */
.HelpdeskPage .HelpdeskPageShell::before { content: "PLAYER SUPPORT"; }
.HelpdeskPage .HelpdeskPageShell .BoxContent { padding: 18px; }
.HelpdeskPortal { display: grid; gap: 14px; color: #c8dce8; font-family: Arial,sans-serif; }
.HelpdeskPortal * { box-sizing: border-box; }
.HelpdeskHero {
    position: relative;
    display: grid;
    min-height: 132px;
    padding: 21px 23px;
    grid-template-columns: 70px minmax(0,1fr) auto;
    align-items: center;
    gap: 18px;
    overflow: hidden;
    border: 1px solid #9b6b26;
    background: radial-gradient(circle at 8% 48%,rgba(22,148,218,.34),transparent 25%),radial-gradient(circle at 92% 20%,rgba(216,153,37,.13),transparent 28%),linear-gradient(125deg,#0a2943,#030b15 62%,#171005);
    box-shadow: inset 0 0 0 2px #020711,inset 0 0 23px rgba(0,0,0,.58),0 7px 14px rgba(0,0,0,.55);
}
.HelpdeskHero::after { content:""; position:absolute; inset:10px; border:1px solid rgba(80,181,230,.12); pointer-events:none; }
.HelpdeskHeroIcon { position:relative; z-index:1; display:grid; width:62px; height:62px; place-items:center; border:2px solid #d3a142; border-radius:50%; background:radial-gradient(circle at 50% 34%,#2eaada,#092d4d 58%,#010711); color:#ffe29a; font:bold 28px/62px Georgia,serif; text-shadow:0 2px 2px #000,0 0 9px #43caff; box-shadow:inset 0 0 0 3px #020812,inset 0 0 15px rgba(65,195,246,.42),0 0 12px rgba(29,153,215,.4); }
.HelpdeskHero > div { position:relative; z-index:1; }
.HelpdeskHero small { color:#68d7fb; font:bold 9px/1 Arial,sans-serif; letter-spacing:1.8px; }
.HelpdeskHero h1 { margin:6px 0; color:#ffe0a0; font:bold 29px/1 Georgia,serif; text-shadow:0 2px 2px #000,0 0 9px rgba(43,164,231,.45); }
.HelpdeskHero p { max-width:520px; margin:0; color:#b6c9d4; font:13px/1.55 Arial,sans-serif; }
.HelpdeskHero > a { position:relative; z-index:2; display:flex; min-height:42px; padding:0 15px; align-items:center; justify-content:center; border:1px solid #c38d32; background:linear-gradient(#156996,#052842); color:#ffe09a; font:bold 10px/1 Arial,sans-serif; letter-spacing:.7px; text-decoration:none; box-shadow:inset 0 0 0 2px #020711,0 4px 8px rgba(0,0,0,.5); }
.HelpdeskHero > a:hover { filter:brightness(1.18); }

.HelpdeskAlert { display:grid; min-height:62px; padding:11px 14px; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:12px; border:1px solid; background:#04131f; }
.HelpdeskAlert > span { display:grid; width:34px; height:34px; place-items:center; border:1px solid; border-radius:50%; font:bold 17px/34px Arial,sans-serif; }
.HelpdeskAlert strong { display:block; margin-bottom:4px; font-size:10px; letter-spacing:1px; }
.HelpdeskAlert p { margin:2px 0; color:#bfd0d9; font-size:11px; line-height:1.45; }
.HelpdeskAlert.error { border-color:#9b4238; background:linear-gradient(90deg,rgba(104,25,19,.34),#04101a); }
.HelpdeskAlert.error > span { border-color:#d45c4e; color:#ff9b8e; }
.HelpdeskAlert.error strong { color:#ff9c8e; }
.HelpdeskAlert.success { border-color:#2f7d59; background:linear-gradient(90deg,rgba(17,91,62,.32),#04101a); }
.HelpdeskAlert.success > span { border-color:#3eb77e; color:#6ce6a7; }
.HelpdeskAlert.success strong { color:#6ce6a7; }

.HelpdeskStats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.HelpdeskStats article { display:grid; min-height:94px; padding:14px; grid-template-columns:42px 1fr; align-items:center; gap:12px; border:1px solid #315b75; background:linear-gradient(145deg,#081d2d,#020912); box-shadow:inset 0 0 14px rgba(0,0,0,.48); }
.HelpdeskStats article > span { display:grid; width:40px; height:40px; place-items:center; border:1px solid #b9842e; border-radius:50%; background:#08243a; color:#69dcff; font:bold 17px/40px Georgia,serif; }
.HelpdeskStats small { display:block; color:#63d4fa; font:bold 8px/1 Arial,sans-serif; letter-spacing:1px; }
.HelpdeskStats strong { display:block; margin:5px 0 3px; color:#ffe09a; font:bold 24px/1 Georgia,serif; }
.HelpdeskStats p { margin:0; color:#91a9b6; font-size:10px; }

.HelpdeskTicketList, .HelpdeskCreateForm, .HelpdeskReplyForm, .HelpdeskTicketHead { border:1px solid #936624; background:linear-gradient(145deg,rgba(6,26,40,.99),rgba(2,8,14,.99)); box-shadow:inset 0 0 18px rgba(0,0,0,.48),0 6px 12px rgba(0,0,0,.42); }
.HelpdeskTicketList > header { display:flex; min-height:58px; padding:0 16px; align-items:center; justify-content:space-between; border-bottom:1px solid #936624; background:linear-gradient(180deg,#102b45,#061321); }
.HelpdeskTicketList header small, .HelpdeskCreateForm header small, .HelpdeskReplyForm header small { display:block; color:#64d3f8; font:bold 8px/1 Arial,sans-serif; letter-spacing:1.2px; }
.HelpdeskTicketList h2, .HelpdeskCreateForm h2, .HelpdeskReplyForm h3 { margin:5px 0 0; color:#ffe09a; font:bold 19px/1 Georgia,serif; text-shadow:0 2px 2px #000; }
.HelpdeskTicketList > header > span { padding:7px 9px; border:1px solid #39718f; color:#72d9fc; font:bold 9px/1 Arial,sans-serif; }
.HelpdeskTicketRows { display:grid; }
.HelpdeskTicketRows > a { display:grid; min-height:68px; padding:9px 14px; grid-template-columns:54px minmax(0,1fr) auto 18px; align-items:center; gap:12px; border-bottom:1px solid #173b52; background:rgba(5,18,29,.94); color:inherit; text-decoration:none; transition:background .16s,border-color .16s; }
.HelpdeskTicketRows > a:nth-child(even) { background:rgba(8,27,41,.96); }
.HelpdeskTicketRows > a:hover { background:#0d354f; box-shadow:inset 3px 0 #dda53c; }
.HelpdeskTicketNumber { display:grid; width:46px; height:34px; place-items:center; border:1px solid #866127; background:#06131e; color:#e9c87f; font:bold 12px/34px Georgia,serif; }
.HelpdeskTicketRows a div { min-width:0; }
.HelpdeskTicketRows a div small { display:block; color:#5fd2f8; font:bold 7px/1 Arial,sans-serif; letter-spacing:1px; }
.HelpdeskTicketRows a div strong { display:block; overflow:hidden; margin:5px 0 4px; color:#ffe09a; font:bold 14px/1.1 Georgia,serif; text-overflow:ellipsis; white-space:nowrap; }
.HelpdeskTicketRows time { color:#8ea6b3; font-size:9px; }
.HelpdeskTicketRows a > b { color:#5dd6ff; font-size:22px; }
.HelpdeskTicketRows em, .HelpdeskTicketMeta em { display:inline-flex; min-height:28px; padding:0 10px; align-items:center; justify-content:center; border:1px solid; border-radius:2px; font:normal bold 8px/1 Arial,sans-serif; letter-spacing:.6px; white-space:nowrap; }
.HelpdeskTicketRows em.open, .HelpdeskTicketRows em.waiting, .HelpdeskTicketMeta em.open, .HelpdeskTicketMeta em.waiting { border-color:#a8752b; background:rgba(100,61,10,.28); color:#efc672; }
.HelpdeskTicketRows em.answered, .HelpdeskTicketMeta em.answered { border-color:#2d8a63; background:rgba(15,99,65,.28); color:#67e2a4; box-shadow:0 0 8px rgba(54,218,145,.12); }
.HelpdeskTicketRows em.closed, .HelpdeskTicketMeta em.closed { border-color:#52636d; background:rgba(49,61,68,.35); color:#9babb4; }

.HelpdeskCreateForm { display:grid; scroll-margin-top:15px; }
.HelpdeskCreateForm > header { display:grid; min-height:94px; padding:15px 17px; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:13px; border-bottom:1px solid #936624; background:radial-gradient(circle at 0 50%,rgba(20,143,208,.2),transparent 22%),linear-gradient(180deg,#102b45,#061321); }
.HelpdeskCreateForm > header > span { display:grid; width:43px; height:43px; place-items:center; border:1px solid #c18a31; border-radius:50%; background:#08243a; color:#68d9ff; font:bold 23px/43px Arial,sans-serif; }
.HelpdeskCreateForm header p { margin:5px 0 0; color:#9db4c0; font-size:11px; }
.HelpdeskIdentity, .HelpdeskFormGrid { display:grid; padding:14px 16px 0; grid-template-columns:1fr 1fr; gap:11px; }
.HelpdeskCreateForm label, .HelpdeskReplyForm { min-width:0; }
.HelpdeskCreateForm label > span { display:block; margin-bottom:7px; color:#64d3f8; font:bold 8px/1 Arial,sans-serif; letter-spacing:1px; }
.HelpdeskCreateForm input, .HelpdeskCreateForm select, .HelpdeskCreateForm textarea, .HelpdeskReplyForm textarea { width:100%; border:1px solid #386b88; border-radius:2px; outline:0; background:#020d17; color:#d8eaf4; font:12px Arial,sans-serif; box-shadow:inset 0 0 9px rgba(0,0,0,.68); }
.HelpdeskCreateForm input, .HelpdeskCreateForm select { height:43px; padding:0 11px; }
.HelpdeskCreateForm input[readonly] { border-color:#294b60; color:#91a9b6; background:#07131c; }
.HelpdeskCreateForm textarea, .HelpdeskReplyForm textarea { min-height:150px; padding:12px; resize:vertical; line-height:1.55; }
.HelpdeskCreateForm input:focus, .HelpdeskCreateForm select:focus, .HelpdeskCreateForm textarea:focus, .HelpdeskReplyForm textarea:focus { border-color:#63d6fb; box-shadow:inset 0 0 9px rgba(0,0,0,.68),0 0 8px rgba(41,170,226,.38); }
.HelpdeskMessageField { display:block; padding:14px 16px 0; }
.HelpdeskCaptcha { padding:14px 16px 0; }
.HelpdeskCreateForm > footer { display:grid; min-height:68px; margin-top:15px; padding:11px 16px; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:14px; border-top:1px solid #244a60; background:rgba(3,14,23,.8); }
.HelpdeskCreateForm footer strong { display:block; color:#e8c77c; font-size:9px; letter-spacing:.8px; }
.HelpdeskCreateForm footer span { display:block; margin-top:5px; color:#8da4b1; font-size:10px; }
.HelpdeskCreateForm footer > small, .HelpdeskReplyForm footer > small { color:#819aa7; font-size:9px; white-space:nowrap; }
.HelpdeskCreateForm footer button, .HelpdeskReplyForm footer button { min-width:165px; min-height:42px; border:1px solid #c88f32; background:linear-gradient(#156d9d,#052842); color:#ffe09a; font:bold 10px/1 Arial,sans-serif; letter-spacing:.7px; cursor:pointer; box-shadow:inset 0 0 0 2px #020711,0 4px 8px rgba(0,0,0,.52); }
.HelpdeskCreateForm footer button:hover, .HelpdeskReplyForm footer button:hover { filter:brightness(1.18); }
.HelpdeskCreateForm footer button b, .HelpdeskReplyForm footer button b { margin-left:5px; color:#61d9ff; font-size:17px; }

.HelpdeskTicketHead { display:flex; min-height:102px; padding:17px 18px; align-items:center; justify-content:space-between; gap:18px; background:radial-gradient(circle at 0 50%,rgba(20,143,208,.2),transparent 22%),linear-gradient(145deg,#09243a,#030b14); }
.HelpdeskTicketHead > div:first-child { min-width:0; }
.HelpdeskTicketHead small { color:#62d4f9; font:bold 8px/1 Arial,sans-serif; letter-spacing:1.2px; }
.HelpdeskTicketHead h2 { overflow:hidden; margin:7px 0 6px; color:#ffe09a; font:bold 22px/1.1 Georgia,serif; text-overflow:ellipsis; white-space:nowrap; }
.HelpdeskTicketHead p { margin:0; color:#98afbb; font-size:10px; }
.HelpdeskTicketMeta { display:grid; justify-items:end; gap:9px; }
.HelpdeskTicketMeta > span { color:#91a9b6; font-size:9px; letter-spacing:.7px; }
.HelpdeskTicketMeta > span b { color:#ffe09a; font-size:13px; }
.HelpdeskConversation { display:grid; gap:11px; padding:3px 0; }
.HelpdeskMessage { width:88%; padding:0; border:1px solid #315a72; background:linear-gradient(145deg,#071d2c,#020a12); box-shadow:0 5px 10px rgba(0,0,0,.35); }
.HelpdeskMessage.player { justify-self:start; }
.HelpdeskMessage.staff { justify-self:end; border-color:#966a27; background:linear-gradient(145deg,#171206,#030b13); }
.HelpdeskMessage header { display:flex; min-height:54px; padding:9px 12px; align-items:center; gap:10px; border-bottom:1px solid #24475b; background:rgba(9,37,56,.72); }
.HelpdeskMessage.staff header { border-color:#735424; background:rgba(72,48,10,.33); }
.HelpdeskMessage header > span { display:grid; width:34px; height:34px; place-items:center; border:1px solid #3e7896; border-radius:50%; background:#08243a; color:#69dcff; font:bold 14px/34px Georgia,serif; }
.HelpdeskMessage.staff header > span { border-color:#ba8531; background:#302005; color:#ffe09a; }
.HelpdeskMessage header strong { display:block; color:#e9d096; font:bold 13px/1 Georgia,serif; }
.HelpdeskMessage header small { display:block; margin-top:5px; color:#78a9be; font:bold 7px/1 Arial,sans-serif; letter-spacing:.7px; }
.HelpdeskMessage > p { margin:0; padding:14px 15px 16px; color:#c2d3dc; font:12px/1.65 Arial,sans-serif; overflow-wrap:anywhere; }
.HelpdeskReplyForm { display:grid; padding:15px; }
.HelpdeskReplyForm > header { display:flex; margin-bottom:11px; align-items:end; justify-content:space-between; gap:12px; }
.HelpdeskReplyForm > header > span { color:#839ba8; font-size:9px; }
.HelpdeskReplyForm > footer { display:flex; padding-top:11px; align-items:center; justify-content:flex-end; gap:14px; }
.HelpdeskClosed { display:grid; min-height:68px; padding:11px 14px; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:12px; border:1px solid #52636d; background:#07131c; }
.HelpdeskClosed > span { display:grid; width:34px; height:34px; place-items:center; border:1px solid #667985; border-radius:50%; color:#9eafb8; }
.HelpdeskClosed strong { color:#becbd2; font-size:10px; letter-spacing:1px; }
.HelpdeskClosed p { margin:4px 0 0; color:#849ba7; font-size:10px; }
.HelpdeskClosed a { padding:10px 12px; border:1px solid #936a29; color:#e7c57b; font:bold 9px/1 Arial,sans-serif; text-decoration:none; }
.HelpdeskEmpty { display:grid; min-height:300px; padding:28px; place-items:center; align-content:center; border:1px solid #805d28; background:radial-gradient(circle at 50% 25%,rgba(21,139,204,.2),transparent 30%),#030c16; text-align:center; }
.HelpdeskEmpty.compact { min-height:190px; border:0; }
.HelpdeskEmpty > span { display:grid; width:52px; height:52px; place-items:center; border:1px solid #ba8531; border-radius:50%; background:#08243a; color:#63d9ff; font:bold 22px/52px Georgia,serif; }
.HelpdeskEmpty h2 { margin:14px 0 6px; color:#ffe09a; font:bold 21px/1 Georgia,serif; }
.HelpdeskEmpty p { margin:0 0 16px; color:#9db2bd; font-size:11px; }
.HelpdeskEmpty a { padding:11px 14px; border:1px solid #c08a31; background:#08243a; color:#ffe09a; font:bold 9px/1 Arial,sans-serif; text-decoration:none; }

@media (max-width:680px) {
    .HelpdeskPage .HelpdeskPageShell .BoxContent { padding:10px; }
    .HelpdeskHero { padding:17px; grid-template-columns:52px minmax(0,1fr); gap:12px; }
    .HelpdeskHeroIcon { width:48px; height:48px; font-size:21px; }
    .HelpdeskHero h1 { font-size:23px; }
    .HelpdeskHero > a { grid-column:1 / -1; }
    .HelpdeskStats, .HelpdeskIdentity, .HelpdeskFormGrid { grid-template-columns:1fr; }
    .HelpdeskTicketRows > a { grid-template-columns:48px minmax(0,1fr) 16px; }
    .HelpdeskTicketRows em { grid-column:2; justify-self:start; }
    .HelpdeskTicketRows a > b { grid-column:3; grid-row:1 / span 2; }
    .HelpdeskCreateForm > footer { grid-template-columns:1fr; }
    .HelpdeskCreateForm footer button { width:100%; }
    .HelpdeskTicketHead { align-items:flex-start; flex-direction:column; }
    .HelpdeskTicketMeta { justify-items:start; }
    .HelpdeskMessage { width:96%; }
    .HelpdeskClosed { grid-template-columns:38px minmax(0,1fr); }
    .HelpdeskClosed a { grid-column:1 / -1; text-align:center; }
}

.MyAccountPage .AccountPageShell > .Border_2 {
    margin: 0;
    padding: 4px;
    background: linear-gradient(90deg, #3d250b, #b17925 17%, #274253 50%, #b17925 83%, #3d250b);
}

.MyAccountPage .AccountPageShell > .Border_2 > .Border_3 {
    margin: 0;
    background: #020711;
}

.MyAccountPage .AccountPageShell .BoxContent {
    box-sizing: border-box;
    min-height: 0;
    padding: 16px;
    background-color: #06101d !important;
    background-image: radial-gradient(circle at 50% 0, rgba(17, 108, 169, .2), transparent 38%), linear-gradient(180deg, #081725, #030912) !important;
    color: #ccdfec;
    font-family: Arial, sans-serif;
}

.MyAccountPage #myaccount {
    color: #caddea;
}

.MyAccountPage #myaccount .SmallBox,
.MyAccountPage #myaccount .MessageContainer {
    height: auto !important;
}

.MyAccountPage #myaccount .BoxFrameHorizontal,
.MyAccountPage #myaccount .BoxFrameVerticalLeft,
.MyAccountPage #myaccount .BoxFrameVerticalRight,
.MyAccountPage #myaccount .BoxFrameEdgeLeftTop,
.MyAccountPage #myaccount .BoxFrameEdgeLeftBottom,
.MyAccountPage #myaccount .BoxFrameEdgeRightTop,
.MyAccountPage #myaccount .BoxFrameEdgeRightBottom {
    display: none;
}

.MyAccountPage #myaccount .Message {
    height: auto !important;
    padding: 16px;
    border: 1px solid #79511d;
    border-radius: 4px;
    background: radial-gradient(circle at 50% 0, rgba(21, 109, 167, .19), transparent 38%), linear-gradient(180deg, #071522, #020811);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .72), 0 6px 13px rgba(0, 0, 0, .42);
    color: #cbdde9;
    font-size: 13px;
}

.MyAccountPage .AccountOverview .Message > center > h1 {
    margin: 0 0 16px;
    color: #ffe0a0;
    font: bold 29px/1.2 Georgia, "Times New Roman", serif;
    letter-spacing: 1px;
    text-shadow: 0 2px 2px #000, 0 0 9px rgba(45, 166, 232, .62);
}

.MyAccountPage .AccountPointsPanel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.MyAccountPage .CurrentPointsCard,
.MyAccountPage .SeasonalPointsCard {
    box-sizing: border-box;
    min-height: 128px;
    margin: 0 !important;
    padding: 18px 14px;
    border: 1px solid #295473;
    border-radius: 4px;
    background: radial-gradient(circle at 50% 0, rgba(26, 130, 194, .25), transparent 57%), #030c17;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, .62);
}

.MyAccountPage .CurrentPointsCard::before,
.MyAccountPage .SeasonalPointsCard::before {
    display: grid;
    width: 30px;
    height: 30px;
    margin: 0 auto 9px;
    place-items: center;
    border: 1px solid #c48c30;
    border-radius: 50%;
    background: radial-gradient(circle, #14507e, #04101e 70%);
    color: #85e2ff;
    font: bold 15px/30px Georgia, serif;
    box-shadow: inset 0 0 8px rgba(28, 157, 228, .55), 0 0 7px rgba(205, 143, 40, .3);
}

.MyAccountPage .CurrentPointsCard::before { content: "W"; }
.MyAccountPage .SeasonalPointsCard::before { content: "S"; }

.MyAccountPage .CurrentPointsCard h2,
.MyAccountPage .SeasonalPointsCard h2 {
    margin: 0 0 7px !important;
    color: #ffe0a0 !important;
    font: bold 16px/1.25 Georgia, "Times New Roman", serif !important;
    text-shadow: 0 2px 2px #000 !important;
}

.MyAccountPage .CurrentPointsCard > p {
    color: #53e58a !important;
    font-size: 16px !important;
}

.MyAccountPage .SeasonalPointsCard > p:first-of-type {
    color: #ffd563 !important;
    font-size: 16px !important;
}

.MyAccountPage .SeasonalPointsCard > p:last-child {
    color: #92adbd !important;
    font-size: 11px !important;
}

.MyAccountPage .PointsTransferPanel {
    grid-column: 1 / -1;
    margin: 0 !important;
    padding: 18px !important;
    border: 1px solid #80571f !important;
    border-radius: 4px !important;
    background: radial-gradient(circle at 50% 0, rgba(13, 101, 162, .2), transparent 48%), #030a13 !important;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .65);
}

.MyAccountPage .PointsTransferPanel h2 {
    margin: 0 0 16px !important;
    padding: 0 0 11px !important;
    border-bottom: 1px solid #8c5d20 !important;
    color: #ffe0a0 !important;
    font: bold 19px/1.2 Georgia, "Times New Roman", serif !important;
    text-shadow: 0 2px 2px #000 !important;
}

.MyAccountPage .PointsTransferPanel.no-points > p:first-of-type {
    margin: 0 !important;
    color: #ff7777 !important;
    font-weight: bold;
}

.MyAccountPage .PointsTransferPanel select,
.MyAccountPage #myaccount select,
.MyAccountPage #myaccount input[type="text"],
.MyAccountPage #myaccount textarea {
    box-sizing: border-box;
    min-height: 38px;
    padding: 9px 11px !important;
    border: 1px solid #2d6387 !important;
    border-radius: 3px !important;
    background: #04111e !important;
    color: #d8ebf7 !important;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .58) !important;
    outline: none;
}

.MyAccountPage .PointsTransferPanel select:focus,
.MyAccountPage #myaccount select:focus,
.MyAccountPage #myaccount input[type="text"]:focus,
.MyAccountPage #myaccount textarea:focus {
    border-color: #5acaf6 !important;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .58), 0 0 8px rgba(32, 165, 226, .45) !important;
}

.MyAccountPage .PointsTransferPanel button,
.MyAccountPage #myaccount input[type="submit"] {
    min-height: 38px;
    padding: 10px 20px !important;
    border: 1px solid #d09a38 !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #9a650f, #422603) !important;
    color: #fff0b3 !important;
    font: bold 12px/1 Arial, sans-serif !important;
    letter-spacing: .5px;
    text-shadow: 0 1px 2px #000;
    box-shadow: inset 0 0 0 2px #251504, inset 0 8px 10px rgba(255, 214, 105, .15), 0 4px 8px rgba(0, 0, 0, .55) !important;
    cursor: pointer;
}

.MyAccountPage .PointsTransferPanel button:hover,
.MyAccountPage #myaccount input[type="submit"]:hover {
    filter: brightness(1.18);
    transform: translateY(-1px);
}

.MyAccountPage .AccountWelcome {
    margin: 16px 0 10px;
    padding: 11px 14px;
    border: 1px solid #28516e;
    border-radius: 4px;
    background: #030b14;
    color: #a8bfce;
}

.MyAccountPage .AccountWelcome strong {
    color: #ffe0a0;
}

.MyAccountPage .EmailVerificationNotice {
    display: flex;
    align-items: center;
    gap: 18px;
    box-sizing: border-box;
    margin: 2px 0 18px;
    padding: 20px 22px;
    overflow: hidden;
    border: 1px solid #2e607b;
    border-radius: 7px;
    background: radial-gradient(circle at 8% 20%, rgba(36, 150, 205, .18), transparent 32%), linear-gradient(135deg, #071925, #030b13);
    box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 7px 18px rgba(0, 0, 0, .38);
}

.MyAccountPage .EmailVerificationNoticeIcon,
.MyAccountPage .AccountEmailStatusIcon {
    position: relative;
    flex: 0 0 auto;
    border-radius: 50%;
}

.MyAccountPage .EmailVerificationNoticeIcon {
    width: 52px;
    height: 52px;
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 0 20px currentColor;
}

.MyAccountPage .EmailVerificationNoticeIcon::before {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: bold 28px/1 Arial, sans-serif;
}

.MyAccountPage .EmailVerificationNoticeContent {
    min-width: 0;
}

.MyAccountPage .EmailVerificationNoticeLabel,
.MyAccountPage .AccountEmailStatusLabel {
    display: block;
    margin-bottom: 5px;
    color: #8eafc2;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.MyAccountPage .EmailVerificationNotice h1 {
    margin: 0 0 6px;
    color: #eefaff;
    font: bold 23px/1.2 Georgia, "Times New Roman", serif;
    letter-spacing: .3px;
    text-shadow: 0 2px 2px #000;
}

.MyAccountPage .EmailVerificationNotice p {
    margin: 0;
    color: #b7ccd8;
    line-height: 1.55;
}

.MyAccountPage .EmailVerificationNotice p + p {
    margin-top: 7px;
}

.MyAccountPage .EmailVerificationNotice a {
    color: #ffe09a;
    font-weight: bold;
}

.MyAccountPage .EmailVerificationNotice.is-success {
    border-color: #2d7657;
    background: radial-gradient(circle at 8% 20%, rgba(45, 194, 124, .16), transparent 32%), linear-gradient(135deg, #071c1a, #030b13);
}

.MyAccountPage .EmailVerificationNotice.is-success .EmailVerificationNoticeIcon { color: #54dda0; }
.MyAccountPage .EmailVerificationNotice.is-success .EmailVerificationNoticeIcon::before { content: "\2713"; }
.MyAccountPage .EmailVerificationNotice.is-success .EmailVerificationNoticeLabel { color: #6ee5ab; }

.MyAccountPage .EmailVerificationNotice.is-info .EmailVerificationNoticeIcon { color: #55bce7; }
.MyAccountPage .EmailVerificationNotice.is-info .EmailVerificationNoticeIcon::before { content: "\2709"; }
.MyAccountPage .EmailVerificationNotice.is-info .EmailVerificationNoticeLabel { color: #75caee; }

.MyAccountPage .EmailVerificationNotice.is-error {
    border-color: #7c3e3e;
    background: radial-gradient(circle at 8% 20%, rgba(212, 69, 69, .15), transparent 32%), linear-gradient(135deg, #211010, #08090e);
}

.MyAccountPage .EmailVerificationNotice.is-error .EmailVerificationNoticeIcon { color: #f07878; }
.MyAccountPage .EmailVerificationNotice.is-error .EmailVerificationNoticeIcon::before { content: "!"; }
.MyAccountPage .EmailVerificationNotice.is-error .EmailVerificationNoticeLabel { color: #ff9292; }

.MyAccountPage .EmailVerificationReward {
    color: #d8e9df !important;
}

.MyAccountPage .EmailVerificationHint {
    color: #829dab !important;
    font-size: 12px;
}

.MyAccountPage .AccountEmailStatus {
    display: flex;
    align-items: center;
    gap: 13px;
    box-sizing: border-box;
    margin: 12px 0;
    padding: 13px 15px;
    border: 1px solid #29485a;
    border-radius: 6px;
    background: linear-gradient(110deg, rgba(10, 28, 40, .96), rgba(3, 10, 17, .96));
    box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 4px 12px rgba(0, 0, 0, .28);
}

.MyAccountPage .AccountEmailStatusIcon {
    width: 38px;
    height: 38px;
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, .04);
}

.MyAccountPage .AccountEmailStatusIcon::before {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: bold 19px/1 Arial, sans-serif;
}

.MyAccountPage .AccountEmailStatusContent {
    display: grid;
    min-width: 0;
    margin-right: auto;
}

.MyAccountPage .AccountEmailStatusContent strong {
    overflow: hidden;
    color: #e0edf4;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.MyAccountPage .AccountEmailStatusText {
    margin-top: 3px;
    font-size: 11px;
    font-weight: bold;
}

.MyAccountPage .AccountEmailStatus.is-verified {
    border-color: #286747;
}

.MyAccountPage .AccountEmailStatus.is-verified .AccountEmailStatusIcon,
.MyAccountPage .AccountEmailStatus.is-verified .AccountEmailStatusText { color: #58d99a; }
.MyAccountPage .AccountEmailStatus.is-verified .AccountEmailStatusIcon::before { content: "\2713"; }

.MyAccountPage .AccountEmailStatus.is-unverified {
    border-color: #7a5524;
}

.MyAccountPage .AccountEmailStatus.is-unverified .AccountEmailStatusIcon,
.MyAccountPage .AccountEmailStatus.is-unverified .AccountEmailStatusText { color: #efb757; }
.MyAccountPage .AccountEmailStatus.is-unverified .AccountEmailStatusIcon::before { content: "!"; }

.MyAccountPage .AccountEmailVerifyButton {
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 1px solid #a9792d;
    border-radius: 4px;
    background: linear-gradient(#92651e, #55340d);
    box-shadow: inset 0 1px rgba(255, 236, 170, .25), 0 2px 5px rgba(0, 0, 0, .4);
    color: #fff2c9 !important;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 1px #000;
    transition: filter .15s ease, transform .15s ease;
}

.MyAccountPage .AccountEmailVerifyForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin: 20px 0 0;
}

.MyAccountPage .AccountEmailVerifyModal {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 5, 12, .82);
    backdrop-filter: blur(5px);
}

.MyAccountPage .AccountEmailVerifyModal.is-open { display: flex; }

.MyAccountPage .AccountEmailVerifyDialog {
    position: relative;
    box-sizing: border-box;
    width: min(430px, 100%);
    padding: 30px 28px 27px;
    border: 1px solid #a9792d;
    border-radius: 9px;
    background: radial-gradient(circle at 50% 0, rgba(23, 100, 145, .2), transparent 38%), linear-gradient(145deg, #081927, #030a12 72%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .75), inset 0 1px rgba(255, 235, 171, .08);
    color: #b8ceda;
    text-align: center;
}

.MyAccountPage .AccountEmailVerifyDialog::before {
    content: "";
    position: absolute;
    top: 0;
    right: 15%;
    left: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #efb64e, transparent);
    box-shadow: 0 0 13px #d99120;
}

.MyAccountPage .AccountEmailVerifyClose {
    position: absolute;
    top: 9px;
    right: 12px;
    padding: 2px 7px;
    border: 0;
    background: transparent;
    color: #8198a6;
    font: 24px/1 Arial, sans-serif;
    cursor: pointer;
}

.MyAccountPage .AccountEmailVerifyClose:hover { color: #fff0c2; }
.MyAccountPage .AccountEmailVerifyShield { display: grid; width: 48px; height: 48px; margin: 0 auto 13px; place-items: center; border: 1px solid #b9832d; border-radius: 50%; background: #0b2638; color: #efbd5c; font-size: 20px; }
.MyAccountPage .AccountEmailVerifyKicker { color: #63c9ef; font-size: 9px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase; }
.MyAccountPage .AccountEmailVerifyDialog h2 { margin: 7px 0 8px !important; color: #f5e4b9 !important; font: bold 24px Georgia, serif !important; }
.MyAccountPage .AccountEmailVerifyDialog p { margin: 0; color: #8fa8b7; font-size: 11px; line-height: 1.55; }
.MyAccountPage .AccountEmailVerifyDialog .AccountEmailVerifyButton { width: 304px; max-width: 100%; }

.MyAccountPage .AccountEmailVerifyButton:disabled {
    filter: grayscale(.7);
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.MyAccountPage .AccountEmailVerifyButton:not(:disabled):hover {
    filter: brightness(1.17);
    transform: translateY(-1px);
}

@media (max-width: 560px) {
    .MyAccountPage .EmailVerificationNotice {
        align-items: flex-start;
        padding: 16px;
    }

    .MyAccountPage .EmailVerificationNoticeIcon {
        width: 42px;
        height: 42px;
    }

    .MyAccountPage .EmailVerificationNotice h1 { font-size: 19px; }

    .MyAccountPage .AccountEmailStatus {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .MyAccountPage .AccountEmailStatusContent {
        max-width: calc(100% - 54px);
    }

    .MyAccountPage .AccountEmailVerifyButton {
        width: 100%;
        text-align: center;
    }
}

.MyAccountPage .MadnessPremiumCard {
    position: relative;
    display: flex;
    align-items: center;
    gap: 17px;
    overflow: hidden;
    margin: 14px 0 !important;
    padding: 17px 19px;
    border: 1px solid #8b6326;
    border-radius: 8px;
    background: radial-gradient(circle at 8% 50%, rgba(16, 119, 177, .24), transparent 27%), linear-gradient(120deg, #061724, #030a12 65%, #100b05);
    box-shadow: inset 0 1px rgba(255, 237, 181, .05), 0 7px 17px rgba(0, 0, 0, .34);
    text-align: left;
}

.MyAccountPage .MadnessPremiumCard::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: linear-gradient(transparent, #d8a341, transparent);
    box-shadow: 0 0 12px #c48620;
}

.MyAccountPage .MadnessPremiumCard::after {
    content: "";
    position: absolute;
    top: -70px;
    right: 12%;
    width: 150px;
    height: 150px;
    transform: rotate(45deg);
    border: 1px solid rgba(218, 164, 68, .07);
    pointer-events: none;
}

.MyAccountPage .MadnessPremiumIcon {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    place-items: center;
    border: 1px solid #a9782d;
    border-radius: 50%;
    background: radial-gradient(circle, #153c54, #07131d 70%);
    box-shadow: inset 0 0 15px rgba(40, 158, 213, .24), 0 5px 12px rgba(0, 0, 0, .55);
}

.MyAccountPage .MadnessPremiumCard img {
    display: block;
    max-width: 48px;
    max-height: 48px;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .72)) drop-shadow(0 0 7px rgba(225, 157, 44, .22));
}

.MyAccountPage .MadnessPremiumCopy { position: relative; z-index: 1; display: grid; min-width: 0; margin-right: auto; }
.MyAccountPage .MadnessPremiumLabel { margin-bottom: 4px; color: #63c8eb; font-size: 8px; font-weight: bold; letter-spacing: 1.45px; text-transform: uppercase; }
.MyAccountPage .MadnessPremiumCard h3 {
    margin: 0 0 5px !important;
    font: bold 17px/1.2 Georgia, "Times New Roman", serif;
    text-shadow: 0 2px 3px #000;
}

.MyAccountPage .MadnessPremiumCard p { margin: 0; color: #819aaa; font-size: 10px; line-height: 1.45; }
.MyAccountPage .MadnessPremiumBadge { position: relative; z-index: 1; flex: 0 0 auto; padding: 7px 10px; border: 1px solid currentColor; border-radius: 20px; font-size: 8px; font-weight: bold; letter-spacing: 1px; }
.MyAccountPage .MadnessPremiumCard.is-active h3 { color: #53e58a !important; }
.MyAccountPage .MadnessPremiumCard.is-inactive h3 { color: #ff7474 !important; }
.MyAccountPage .MadnessPremiumCard.is-active .MadnessPremiumBadge { background: rgba(33, 130, 82, .14); color: #54dc91; }
.MyAccountPage .MadnessPremiumCard.is-inactive .MadnessPremiumBadge { background: rgba(139, 47, 47, .14); color: #ef7777; }
.MyAccountPage .MadnessPremiumCard.is-active::before { background: linear-gradient(transparent, #43d887, transparent); box-shadow: 0 0 12px #26965b; }

@media (max-width: 560px) {
    .MyAccountPage .MadnessPremiumCard { align-items: flex-start; flex-wrap: wrap; padding: 15px; }
    .MyAccountPage .MadnessPremiumIcon { flex-basis: 52px; width: 52px; height: 52px; }
    .MyAccountPage .MadnessPremiumCard img { max-width: 40px; max-height: 40px; }
    .MyAccountPage .MadnessPremiumCopy { max-width: calc(100% - 69px); }
    .MyAccountPage .MadnessPremiumBadge { margin-left: 69px; }
}

.MyAccountPage .AccountBuyPoints {
    display: flex;
    justify-content: center;
    margin: 20px 0 18px !important;
}

.MyAccountPage .AccountBuyPointsButton {
    position: relative;
    display: flex;
    align-items: center;
    width: 270px;
    min-height: 58px;
    overflow: hidden;
    padding: 7px 14px 7px 10px;
    border: 1px solid #d7a13d;
    border-radius: 7px;
    background: radial-gradient(circle at 16% 50%, rgba(22, 141, 207, .32), transparent 31%), linear-gradient(135deg, #0b3152 0, #071927 48%, #171006 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 231, 159, .08), inset 0 1px rgba(255, 255, 255, .12), 0 7px 18px rgba(0, 0, 0, .48), 0 0 18px rgba(23, 123, 184, .1);
    color: #fff !important;
    text-align: left;
    text-decoration: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, filter .2s ease;
}

.MyAccountPage .AccountBuyPointsButton::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -55%;
    width: 42%;
    transform: skewX(-22deg);
    background: linear-gradient(90deg, transparent, rgba(255, 241, 193, .18), transparent);
    transition: left .5s ease;
}

.MyAccountPage .AccountBuyPointsButton::after {
    content: "";
    position: absolute;
    right: 14%;
    bottom: 0;
    left: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #efb64e, transparent);
    box-shadow: 0 0 8px #d99220;
}

.MyAccountPage .AccountBuyPointsIcon {
    position: relative;
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    place-items: center;
    border: 1px solid #c99035;
    border-radius: 50%;
    background: radial-gradient(circle, #184d70, #071725 70%);
    box-shadow: inset 0 0 10px rgba(47, 187, 240, .28), 0 0 10px rgba(0, 0, 0, .5);
}

.MyAccountPage .AccountBuyPointsIcon i {
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    border: 1px solid #ffe08a;
    background: linear-gradient(135deg, #ffe98e, #c27a16 65%, #714006);
    box-shadow: 0 0 8px rgba(238, 176, 55, .55);
}

.MyAccountPage .AccountBuyPointsCopy { display: grid; flex: 1 1 auto; min-width: 0; }
.MyAccountPage .AccountBuyPointsCopy small { margin-bottom: 3px; color: #64cff1; font-size: 7px; font-weight: bold; letter-spacing: 1.5px; }
.MyAccountPage .AccountBuyPointsCopy strong { color: #f7df9c; font: bold 15px/1.15 Georgia, "Times New Roman", serif; text-shadow: 0 2px 3px #000; }
.MyAccountPage .AccountBuyPointsArrow { margin-left: 8px; color: #efbd55; font: 26px/1 Georgia, serif; transition: transform .2s ease; }

.MyAccountPage .AccountBuyPointsButton:hover {
    border-color: #f0c263;
    filter: brightness(1.12);
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px rgba(255, 231, 159, .12), inset 0 1px rgba(255, 255, 255, .16), 0 11px 23px rgba(0, 0, 0, .55), 0 0 22px rgba(31, 154, 213, .2);
}

.MyAccountPage .AccountBuyPointsButton:hover::before { left: 120%; }
.MyAccountPage .AccountBuyPointsButton:hover .AccountBuyPointsArrow { transform: translateX(3px); }
.MyAccountPage .AccountBuyPointsButton:focus-visible { outline: 2px solid #60c8ee; outline-offset: 3px; }
.MyAccountPage .AccountBuyPointsButton:active { transform: translateY(-1px); }

.MyAccountPage .AccountCharacters {
    margin-top: 18px;
}

.MyAccountPage .AccountCharacters .Message > h2 {
    margin: 0 0 16px;
    padding: 0 0 12px;
    border-bottom: 1px solid #895a1f;
    color: #ffe0a0;
    font: bold 20px/1.2 Georgia, "Times New Roman", serif;
    text-align: center;
}

.MyAccountPage #myaccountTable {
    width: 100%;
    margin: 0 0 14px;
    border: 1px solid #80561f;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 4px;
    background: #030b14;
    color: #cbdee9;
    overflow: hidden;
    box-shadow: 0 5px 11px rgba(0, 0, 0, .42);
}

.MyAccountPage #myaccountTable th,
.MyAccountPage #myaccountTable td {
    padding: 10px 8px;
    border: 0;
    border-bottom: 1px solid rgba(48, 103, 141, .3);
    background: rgba(5, 18, 31, .92);
    color: #cbdde9;
    font-size: 11px;
}

.MyAccountPage #myaccountTable tr:nth-child(odd):not(.yellow) td {
    background: rgba(8, 29, 47, .88);
}

.MyAccountPage #myaccountTable tr.yellow > th {
    border-bottom: 1px solid #8d5e20;
    background: radial-gradient(circle at 50% 130%, rgba(15, 116, 181, .3), transparent 60%), linear-gradient(90deg, #07111d, #102a42, #07111d);
    color: #ffe0a0;
    font: bold 10px/1.2 Arial, sans-serif;
    letter-spacing: .5px;
}

.MyAccountPage #myaccountTable a {
    color: #62d4ff;
    font-weight: bold;
    text-decoration: none;
}

.MyAccountPage .AccountCharacters form > table.table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 8px;
    background: #030a13;
}

.MyAccountPage .AccountCharacters form > table.table td {
    border: 0;
    background: transparent;
}

@media (max-width: 850px) {
    .MyAccountPage .AccountPointsPanel { grid-template-columns: 1fr; }
    .MyAccountPage .PointsTransferPanel { grid-column: 1; }
}

/* =========================================================
   DOWNLOADS — Royal Madness presentation
   ========================================================= */
.DownloadsPage .DownloadsPageShell {
    position: relative;
    margin: 0 5px 24px;
    border: 1px solid #a66d20;
    border-radius: 5px;
    background: linear-gradient(180deg, #071526, #01070e);
    box-shadow: inset 0 0 0 2px #02060b, inset 0 0 0 3px rgba(47, 157, 221, .25), inset 0 0 30px rgba(0, 0, 0, .84), 0 10px 20px rgba(0, 0, 0, .7), 0 0 10px rgba(195, 128, 31, .24);
    color: #d8eaf7;
    overflow: visible;
}

.DownloadsPage .DownloadsPageShell > .Corner-tl,
.DownloadsPage .DownloadsPageShell > .Corner-tr,
.DownloadsPage .DownloadsPageShell > .Border_1,
.DownloadsPage .DownloadsPageShell > .BorderTitleText,
.DownloadsPage .DownloadsPageShell > .Title,
.DownloadsPage .DownloadsPageShell > .CornerWrapper-b {
    display: none;
}

.DownloadsPage .DownloadsPageShell::before {
    content: "DOWNLOAD CLIENT";
    display: flex;
    box-sizing: border-box;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #99651d;
    border-radius: 4px 4px 0 0;
    background: radial-gradient(circle at 50% 120%, rgba(13, 132, 207, .38), transparent 44%), linear-gradient(180deg, #102a45, #06111e 70%, #02070e);
    color: #ffe0a2;
    font: bold 21px/1 Georgia, "Times New Roman", serif;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 2px #000, 0 0 9px rgba(43, 165, 234, .7);
    box-shadow: inset 0 -1px rgba(69, 188, 248, .3), inset 0 0 0 3px #020811;
}

.DownloadsPage .DownloadsPageShell::after {
    content: "";
    position: absolute;
    top: 39px;
    left: 50%;
    z-index: 5;
    width: 15px;
    height: 15px;
    border: 2px solid #e1ab45;
    background: linear-gradient(135deg, #d6faff, #39c9ff 27%, #087bd3 62%, #002b66);
    box-shadow: inset 0 0 0 2px #06264e, 0 0 0 2px #211202, 0 0 10px #0ba3f8;
    transform: translateX(-50%) rotate(45deg);
}

.DownloadsPage .DownloadsPageShell > .Border_2 {
    margin: 0;
    padding: 4px;
    background: linear-gradient(90deg, #3d250b, #b17925 17%, #274253 50%, #b17925 83%, #3d250b);
}

.DownloadsPage .DownloadsPageShell > .Border_2 > .Border_3 {
    margin: 0;
    background: #020711;
}

.DownloadsPage .DownloadsPageShell > .Border_2 > .Border_3 > .BoxContent {
    box-sizing: border-box;
    min-height: 0;
    padding: 16px;
    background-color: #06101d !important;
    background-image: radial-gradient(circle at 50% 0, rgba(17, 108, 169, .2), transparent 38%), linear-gradient(180deg, #081725, #030912) !important;
    color: #ccdfec;
}

.DownloadsPage .DownloadContentBox {
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.DownloadsPage .DownloadContentBox > .Corner-tl,
.DownloadsPage .DownloadContentBox > .Corner-tr,
.DownloadsPage .DownloadContentBox > .Border_1,
.DownloadsPage .DownloadContentBox > .BorderTitleText,
.DownloadsPage .DownloadContentBox > .Title,
.DownloadsPage .DownloadContentBox > .CornerWrapper-b {
    display: none;
}

.DownloadsPage .DownloadContentBox > .Border_2,
.DownloadsPage .DownloadContentBox > .Border_2 > .Border_3 {
    margin: 0;
    padding: 0;
    background: transparent;
}

.DownloadsPage .DownloadContentBox .BoxContent {
    min-height: 0;
    padding: 0;
    background: transparent !important;
    color: #cbdde9;
}

.DownloadsPage .DownloadContentBox .SmallBox,
.DownloadsPage .DownloadContentBox .MessageContainer {
    height: auto !important;
}

.DownloadsPage .DownloadContentBox .Message {
    height: auto !important;
    padding: 0;
    background: transparent;
    color: #cbdde9;
    font-family: Arial, sans-serif;
}

.DownloadsPage .DownloadContentBox h1 {
    margin: 4px 0 8px;
    color: #ffe0a0;
    font: bold 31px/1.2 Georgia, "Times New Roman", serif;
    letter-spacing: 1px;
    text-shadow: 0 2px 2px #000, 0 0 9px rgba(45, 166, 232, .62);
}

.DownloadsPage .DownloadIntro {
    margin: 0 0 18px;
    color: #a9c1cf;
    font-size: 13px;
}

.DownloadsPage .DownloadIntro strong {
    color: #6bd8ff;
}

.DownloadsPage .ice-frame.ice-animated {
    position: relative;
    box-sizing: border-box;
    width: 94% !important;
    max-width: 620px !important;
    margin: 0 auto 20px !important;
    padding: 26px 20px 20px !important;
    border: 1px solid #c58d30 !important;
    border-radius: 4px !important;
    background: radial-gradient(circle at 50% 22%, rgba(18, 130, 201, .3), transparent 38%), linear-gradient(145deg, #071b2e, #030a12 68%, #1d1104) !important;
    box-shadow: inset 0 0 0 2px #020711, inset 0 0 0 3px rgba(255, 205, 98, .33), inset 0 0 24px rgba(0, 0, 0, .78), 0 7px 15px rgba(0, 0, 0, .6), 0 0 10px rgba(33, 159, 227, .28) !important;
    animation: none !important;
}

.DownloadsPage .ice-frame.ice-animated::before {
    content: "OFFICIAL WINDOWS CLIENT";
    display: block;
    margin-bottom: 14px;
    color: #6fd9ff;
    font: bold 10px/1 Arial, sans-serif;
    letter-spacing: 1.8px;
    text-shadow: 0 0 7px rgba(42, 170, 232, .55);
}

.DownloadsPage .ice-download-link {
    position: relative;
    display: inline-flex;
    min-width: 230px;
    padding: 12px 20px 14px;
    flex-direction: column;
    align-items: center;
    border: 1px solid #2d668c;
    border-radius: 4px;
    background: radial-gradient(circle at 50% 0, rgba(30, 141, 207, .27), transparent 58%), #030c17;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .58), 0 5px 10px rgba(0, 0, 0, .45);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.DownloadsPage .ice-download-link::after {
    content: "DOWNLOAD CLIENT";
    display: block;
    min-width: 170px;
    margin-top: 10px;
    padding: 10px 16px;
    border: 1px solid #d09a38;
    border-radius: 3px;
    background: linear-gradient(180deg, #95610e, #402303);
    color: #fff0b1;
    font: bold 12px/1 Arial, sans-serif;
    letter-spacing: .7px;
    text-shadow: 0 1px 2px #000;
    box-shadow: inset 0 0 0 2px #241404, inset 0 8px 10px rgba(255, 212, 99, .16), 0 4px 8px rgba(0, 0, 0, .52);
}

.DownloadsPage .ice-download-link:hover {
    border-color: #59cafa;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .58), 0 7px 13px rgba(0, 0, 0, .58), 0 0 10px rgba(34, 163, 228, .4);
    transform: translateY(-2px);
}

.DownloadsPage .ice-download-link .ice-download-img {
    width: 120px !important;
    max-width: 120px !important;
    height: 120px !important;
    min-height: 120px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .68));
    object-fit: contain;
}

.DownloadsPage .ice-download-link:hover .ice-download-img {
    filter: brightness(1.12) drop-shadow(0 0 9px rgba(54, 193, 255, .55));
    transform: scale(1.04);
}

.DownloadsPage .DownloadMeta {
    margin-top: 16px !important;
    color: #afc5d3 !important;
    font-size: 12px !important;
}

.DownloadsPage .DownloadMeta strong {
    color: #ffe0a0;
}

.DownloadsPage .DownloadSteps {
    margin-top: 9px !important;
    padding-top: 9px;
    border-top: 1px solid rgba(54, 119, 160, .35);
    color: #7fcbe9;
    font-size: 11px !important;
}

.DownloadsPage .req-box {
    display: grid;
    box-sizing: border-box;
    width: 94% !important;
    margin: 0 auto !important;
    padding: 18px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    border: 1px solid #80571f !important;
    border-radius: 4px !important;
    background: radial-gradient(circle at 50% 0, rgba(13, 104, 165, .22), transparent 46%), #030b15 !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, .68), 0 6px 13px rgba(0, 0, 0, .45) !important;
    color: #c5d9e6;
    font-size: 12px !important;
}

.DownloadsPage .req-box > h3 {
    grid-column: 1 / -1;
    margin: 0 0 16px !important;
    padding: 0 0 12px;
    border-bottom: 1px solid #895a1f;
    color: #ffe0a0;
    font: bold 19px/1.2 Georgia, "Times New Roman", serif;
    text-align: center;
}

.DownloadsPage .req-box > strong {
    display: block;
    padding: 10px 12px;
    border: 1px solid #285574;
    border-bottom: 0;
    background: linear-gradient(90deg, #071421, #102b44, #071421);
    color: #69d6ff;
    font: bold 12px/1 Arial, sans-serif;
    letter-spacing: .5px;
}

.DownloadsPage .req-box > strong:first-of-type { grid-column: 1; grid-row: 2; }
.DownloadsPage .req-box > strong:nth-of-type(2) { grid-column: 2; grid-row: 2; }
.DownloadsPage .req-box > ul:first-of-type { grid-column: 1; grid-row: 3; }
.DownloadsPage .req-box > ul:nth-of-type(2) { grid-column: 2; grid-row: 3; }

.DownloadsPage .req-box > ul {
    box-sizing: border-box;
    min-height: 184px;
    margin: 0;
    padding: 12px 12px 12px 30px;
    border: 1px solid #285574;
    background: rgba(3, 12, 22, .78);
    line-height: 1.55;
}

.DownloadsPage .req-box li {
    margin: 5px 0;
}

.DownloadsPage .req-box li::marker {
    color: #d99e39;
}

.DownloadsPage .req-box a {
    color: #61d3ff;
    font-weight: bold;
    text-decoration: none;
}

.DownloadsPage .req-box a:hover {
    color: #ffe09d;
}

@media (max-width: 850px) {
    .DownloadsPage .req-box { grid-template-columns: 1fr; }
    .DownloadsPage .req-box > strong:first-of-type,
    .DownloadsPage .req-box > strong:nth-of-type(2),
    .DownloadsPage .req-box > ul:first-of-type,
    .DownloadsPage .req-box > ul:nth-of-type(2) { grid-column: 1; grid-row: auto; }
}

/* Mythic account shortcut buttons replace the old character action form. */
.MyAccountPage .AccountCharacters form {
    display: none;
}

.MyAccountPage .AccountQuickActions {
    display: grid;
    margin-top: 18px;
    padding: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    border: 1px solid #81571f;
    border-radius: 4px;
    background: radial-gradient(circle at 50% 0, rgba(18, 110, 173, .23), transparent 44%), linear-gradient(180deg, #061321, #020811);
    box-shadow: inset 0 0 0 2px #01050a, inset 0 0 20px rgba(0, 0, 0, .76), 0 7px 14px rgba(0, 0, 0, .48);
}

.MyAccountPage .AccountQuickActions::before {
    content: "ACCOUNT COMMAND CENTER";
    grid-column: 1 / -1;
    padding: 0 0 12px;
    border-bottom: 1px solid #85591f;
    color: #ffe0a0;
    font: bold 15px/1 Georgia, "Times New Roman", serif;
    letter-spacing: 1.2px;
    text-align: center;
    text-shadow: 0 2px 2px #000, 0 0 7px rgba(44, 164, 231, .52);
}

.MyAccountPage .AccountQuickAction {
    position: relative;
    isolation: isolate;
    display: grid;
    box-sizing: border-box;
    min-height: 78px;
    padding: 12px 38px 12px 13px;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    overflow: hidden;
    border: 1px solid #bd8730;
    border-radius: 4px;
    background: radial-gradient(circle at 12% 50%, rgba(22, 141, 214, .29), transparent 28%), linear-gradient(120deg, #071b2f, #030a13 68%, #171004);
    color: #d9ecf8;
    box-shadow: inset 0 0 0 2px #020711, inset 0 0 0 3px rgba(83, 181, 235, .22), inset 0 0 18px rgba(0, 0, 0, .7), 0 5px 10px rgba(0, 0, 0, .5);
    text-align: left;
    text-decoration: none !important;
    transition: border-color .2s ease, filter .2s ease, transform .2s ease, box-shadow .2s ease;
}

.MyAccountPage .AccountQuickAction::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -120%;
    left: -35%;
    width: 34%;
    height: 330%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
    transform: rotate(24deg);
    transition: left .48s ease;
}

.MyAccountPage .AccountQuickAction:hover {
    border-color: #f0bd59;
    filter: brightness(1.14);
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 2px #020711, inset 0 0 0 3px rgba(100, 205, 255, .36), inset 0 0 18px rgba(0, 0, 0, .7), 0 8px 14px rgba(0, 0, 0, .62), 0 0 11px rgba(27, 161, 229, .42);
}

.MyAccountPage .AccountQuickAction:hover::before {
    left: 125%;
}

.MyAccountPage .QuickActionIcon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #d6a341;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #17699f, #061729 62%, #01060b);
    color: #eaf9ff;
    font: bold 22px/42px Georgia, "Times New Roman", serif;
    box-shadow: inset 0 0 0 2px #020811, inset 0 0 10px rgba(43, 181, 242, .58), 0 0 8px rgba(217, 151, 40, .38);
    text-align: center;
}

.MyAccountPage .QuickActionCopy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.MyAccountPage .QuickActionCopy small {
    color: #67d3fa;
    font: bold 8px/1 Arial, sans-serif;
    letter-spacing: 1.2px;
}

.MyAccountPage .QuickActionCopy strong {
    color: #ffe1a1;
    font: bold 13px/1.2 Georgia, "Times New Roman", serif;
    letter-spacing: .35px;
    text-shadow: 0 2px 2px #000;
}

.MyAccountPage .QuickActionArrow {
    position: absolute;
    right: 14px;
    color: #52cdfc;
    font: bold 28px/1 Arial, sans-serif;
    text-shadow: 0 0 7px rgba(38, 170, 232, .7);
    transition: transform .2s ease;
}

.MyAccountPage .AccountQuickAction:hover .QuickActionArrow {
    transform: translateX(3px);
}

.MyAccountPage .AccountQuickAction.password {
    background: radial-gradient(circle at 12% 50%, rgba(105, 72, 204, .3), transparent 28%), linear-gradient(120deg, #11102d, #050912 68%, #171004);
}

.MyAccountPage .AccountQuickAction.password .QuickActionIcon {
    background: radial-gradient(circle at 50% 30%, #5d4aa9, #17113c 62%, #03030b);
}

.MyAccountPage .AccountQuickAction.settings {
    background: radial-gradient(circle at 12% 50%, rgba(19, 157, 151, .28), transparent 28%), linear-gradient(120deg, #062827, #030b13 68%, #171004);
}

.MyAccountPage .AccountQuickAction.settings .QuickActionIcon {
    background: radial-gradient(circle at 50% 30%, #168b88, #07302f 62%, #010808);
}

.MyAccountPage .AccountQuickAction.logout {
    border-color: #9d4932;
    background: radial-gradient(circle at 12% 50%, rgba(199, 52, 43, .29), transparent 28%), linear-gradient(120deg, #30100e, #0d0709 68%, #1b0e04);
}

.MyAccountPage .AccountQuickAction.logout .QuickActionIcon {
    border-color: #c76a47;
    background: radial-gradient(circle at 50% 30%, #b5382d, #49120f 62%, #0c0202);
    color: #ffe5d8;
}

.MyAccountPage .AccountQuickAction.logout .QuickActionCopy small,
.MyAccountPage .AccountQuickAction.logout .QuickActionArrow {
    color: #ff8e72;
}

@media (max-width: 850px) {
    .MyAccountPage .AccountQuickActions { grid-template-columns: 1fr; }
}

/* =========================================================
   ACCOUNT FORMS — Create, password, settings and logout
   ========================================================= */
.RoyalFormPage .RoyalFormPageShell,
.RoyalFormPage .RoyalFormBox {
    position: relative;
    margin: 0 5px 24px;
    border: 1px solid #a66d20;
    border-radius: 5px;
    background: linear-gradient(180deg, #071526, #01070e);
    box-shadow: inset 0 0 0 2px #02060b, inset 0 0 0 3px rgba(47, 157, 221, .25), inset 0 0 30px rgba(0, 0, 0, .84), 0 10px 20px rgba(0, 0, 0, .7), 0 0 10px rgba(195, 128, 31, .24);
    color: #d8eaf7;
    overflow: visible;
}

.RoyalFormPage .RoyalFormPageShell > .Corner-tl,
.RoyalFormPage .RoyalFormPageShell > .Corner-tr,
.RoyalFormPage .RoyalFormPageShell > .Border_1,
.RoyalFormPage .RoyalFormPageShell > .BorderTitleText,
.RoyalFormPage .RoyalFormPageShell > .Title,
.RoyalFormPage .RoyalFormPageShell > .CornerWrapper-b,
.RoyalFormPage .RoyalFormBox > .Corner-tl,
.RoyalFormPage .RoyalFormBox > .Corner-tr,
.RoyalFormPage .RoyalFormBox > .Border_1,
.RoyalFormPage .RoyalFormBox > .BorderTitleText,
.RoyalFormPage .RoyalFormBox > .Title,
.RoyalFormPage .RoyalFormBox > .CornerWrapper-b {
    display: none;
}

.RoyalFormPage .RoyalFormPageShell::before,
.RoyalFormPage .RoyalFormBox::before {
    display: flex;
    box-sizing: border-box;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #99651d;
    border-radius: 4px 4px 0 0;
    background: radial-gradient(circle at 50% 120%, rgba(13, 132, 207, .38), transparent 44%), linear-gradient(180deg, #102a45, #06111e 70%, #02070e);
    color: #ffe0a2;
    font: bold 21px/1 Georgia, "Times New Roman", serif;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 2px #000, 0 0 9px rgba(43, 165, 234, .7);
    box-shadow: inset 0 -1px rgba(69, 188, 248, .3), inset 0 0 0 3px #020811;
}

.CreateCharacterPage .RoyalFormBox::before { content: "CREATE CHARACTER"; }
.ChangePasswordPage .RoyalFormPageShell::before { content: "CHANGE PASSWORD"; }
.SettingsPage .RoyalFormPageShell::before { content: "ACCOUNT SETTINGS"; }
.LogoutPage .RoyalFormPageShell::before { content: "LOG OUT"; }
.RegisterPage .RoyalFormPageShell::before { content: "CREATE ACCOUNT"; }
.LoginPage .RoyalFormPageShell::before { content: "ACCOUNT LOGIN"; }

.RoyalFormPage .RoyalFormPageShell::after,
.RoyalFormPage .RoyalFormBox::after {
    content: "";
    position: absolute;
    top: 39px;
    left: 50%;
    z-index: 5;
    width: 15px;
    height: 15px;
    border: 2px solid #e1ab45;
    background: linear-gradient(135deg, #d6faff, #39c9ff 27%, #087bd3 62%, #002b66);
    box-shadow: inset 0 0 0 2px #06264e, 0 0 0 2px #211202, 0 0 10px #0ba3f8;
    transform: translateX(-50%) rotate(45deg);
}

.RoyalFormPage .RoyalFormPageShell > .Border_2,
.RoyalFormPage .RoyalFormBox > .Border_2 {
    margin: 0;
    padding: 4px;
    background: linear-gradient(90deg, #3d250b, #b17925 17%, #274253 50%, #b17925 83%, #3d250b);
}

.RoyalFormPage .RoyalFormPageShell > .Border_2 > .Border_3,
.RoyalFormPage .RoyalFormBox > .Border_2 > .Border_3 {
    margin: 0;
    background: #020711;
}

.RoyalFormPage .RoyalFormPageShell .BoxContent,
.RoyalFormPage .RoyalFormBox .BoxContent {
    box-sizing: border-box;
    min-height: 0;
    padding: 20px;
    background-color: #06101d !important;
    background-image: radial-gradient(circle at 50% 0, rgba(17, 108, 169, .2), transparent 38%), linear-gradient(180deg, #081725, #030912) !important;
    color: #ccdfec;
    font-family: Arial, sans-serif;
}

.RoyalFormPage .RoyalFormCard,
.RoyalFormPage .CreateCharacterBox .BoxContent {
    box-sizing: border-box;
    width: min(590px, 94%);
    margin: 4px auto;
    padding: 22px;
    border: 1px solid #80571f;
    border-radius: 4px;
    background: radial-gradient(circle at 50% 0, rgba(19, 113, 176, .24), transparent 42%), linear-gradient(180deg, #071522, #020811);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .72), 0 7px 15px rgba(0, 0, 0, .46);
    color: #cbdde9;
}

.RoyalFormPage .RoyalFormCard h1,
.RoyalFormPage .CreateCharacterBox h1 {
    margin: 0 0 20px;
    padding: 0 0 14px;
    border-bottom: 1px solid #895a1f;
    color: #ffe0a0;
    font: bold 28px/1.2 Georgia, "Times New Roman", serif;
    letter-spacing: .7px;
    text-align: center;
    text-shadow: 0 2px 2px #000, 0 0 8px rgba(43, 164, 231, .58);
}

.RoyalFormPage .RoyalAccountForm {
    margin: 0;
}

.RoyalFormPage .RoyalAccountForm > ul {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 12px;
    list-style: none;
}

.RoyalFormPage .RoyalAccountForm > ul > li {
    box-sizing: border-box;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #244e6b;
    border-radius: 4px;
    background: rgba(3, 13, 24, .86);
    color: #71d6fb;
    font: bold 11px/1.8 Arial, sans-serif;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.RoyalFormPage .RoyalAccountForm input[type="text"],
.RoyalFormPage .RoyalAccountForm input[type="password"],
.RoyalFormPage .RoyalAccountForm input[type="email"],
.RoyalFormPage .RoyalAccountForm select,
.RoyalFormPage .RoyalAccountForm textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid #326b90;
    border-radius: 3px;
    background: #020b15;
    color: #d8eaf6;
    font: 13px/1 Arial, sans-serif;
    box-shadow: inset 0 0 9px rgba(0, 0, 0, .66);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.RoyalFormPage .RoyalAccountForm input:focus,
.RoyalFormPage .RoyalAccountForm select:focus,
.RoyalFormPage .RoyalAccountForm textarea:focus {
    border-color: #64d2fb;
    box-shadow: inset 0 0 9px rgba(0, 0, 0, .66), 0 0 9px rgba(34, 167, 230, .44);
}

.RoyalFormPage .RoyalAccountForm input[type="submit"] {
    display: block;
    min-width: 220px;
    min-height: 44px;
    margin: 2px auto;
    padding: 11px 22px;
    border: 1px solid #d09a38;
    border-radius: 3px;
    background: linear-gradient(180deg, #9a650f, #422603);
    color: #fff0b3;
    font: bold 12px/1 Arial, sans-serif;
    letter-spacing: .7px;
    text-shadow: 0 1px 2px #000;
    box-shadow: inset 0 0 0 2px #251504, inset 0 8px 10px rgba(255, 214, 105, .15), 0 5px 9px rgba(0, 0, 0, .58);
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.RoyalFormPage .RoyalAccountForm input[type="submit"]:hover {
    filter: brightness(1.18);
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 2px #251504, inset 0 8px 10px rgba(255, 214, 105, .2), 0 8px 13px rgba(0, 0, 0, .65), 0 0 10px rgba(218, 151, 38, .38);
}

.RoyalFormPage .RoyalFormCard > font,
.RoyalFormPage .CreateCharacterBox font[color="red"] {
    display: block;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid #a84338;
    border-radius: 3px;
    background: rgba(71, 13, 13, .55);
    color: #ff8d82 !important;
    font: bold 12px/1.5 Arial, sans-serif;
}

.RoyalFormPage .SettingsFormCard .RoyalAccountForm select {
    cursor: pointer;
}

.RoyalFormPage .LogoutCard {
    padding: 34px 24px;
    text-align: center;
}

.RoyalFormPage .LogoutEmblem {
    display: grid;
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    place-items: center;
    border: 2px solid #d5a13f;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 34%, #1888b6, #07314c 56%, #010912);
    color: #c9f8ff;
    font: bold 34px/70px Arial, sans-serif;
    box-shadow: inset 0 0 0 3px #020812, inset 0 0 14px rgba(63, 203, 255, .5), 0 0 14px rgba(32, 172, 232, .45);
}

.RoyalFormPage .LogoutCard p {
    margin: 0 0 18px;
    color: #b9d0de;
    font-size: 14px;
}

.RoyalFormPage .LogoutCard small {
    display: block;
    color: #69d4fa;
    font: bold 9px/1 Arial, sans-serif;
    letter-spacing: 1px;
}

.RoyalFormPage .LogoutProgress {
    width: min(330px, 80%);
    height: 6px;
    margin: 0 auto 11px;
    overflow: hidden;
    border: 1px solid #79511d;
    border-radius: 10px;
    background: #01050a;
}

.RoyalFormPage .LogoutProgress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #0876bd, #50d8ff);
    box-shadow: 0 0 8px rgba(39, 183, 238, .62);
    transform-origin: left;
    animation: logoutCountdown 3.2s linear forwards;
}

.RoyalFormPage .RoyalSecondaryButton {
    display: inline-block;
    margin-top: 20px;
    padding: 11px 22px;
    border: 1px solid #bd8730;
    border-radius: 3px;
    background: linear-gradient(180deg, #071c30, #030a12);
    color: #ffe0a0;
    font: bold 11px/1 Arial, sans-serif;
    letter-spacing: .7px;
    text-decoration: none;
    box-shadow: inset 0 0 0 2px #020711, inset 0 0 8px rgba(35, 159, 220, .28), 0 4px 8px rgba(0, 0, 0, .48);
}

.RoyalFormPage .RoyalSecondaryButton:hover {
    color: #74dfff;
    filter: brightness(1.15);
}

@keyframes logoutCountdown {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* =========================================================
   REGISTRATION — premium account creation
   ========================================================= */
.RegisterPage .RegisterFormCard {
    width: min(700px, 96%);
    padding: 26px;
    background:
        radial-gradient(circle at 50% -10%, rgba(40, 172, 235, .28), transparent 36%),
        linear-gradient(145deg, rgba(13, 35, 57, .96), rgba(2, 8, 16, .98) 62%);
}

.RegisterPage .RegisterEmblem {
    display: grid;
    width: 70px;
    height: 70px;
    margin: -5px auto 15px;
    place-items: center;
    border: 2px solid #d4a142;
    background:
        radial-gradient(circle at 35% 28%, #b9f5ff, #20b7f2 17%, #075aa1 48%, #02162c 72%);
    color: #fff2bd;
    font: bold 30px/1 Georgia, "Times New Roman", serif;
    text-shadow: 0 2px 2px #000, 0 0 8px #58d9ff;
    box-shadow: inset 0 0 0 4px #03101d, inset 0 0 16px rgba(116, 225, 255, .58), 0 0 0 3px #151006, 0 0 20px rgba(39, 175, 237, .5);
    transform: rotate(45deg);
}

.RegisterPage .RegisterEmblem::before {
    content: "M";
    transform: rotate(-45deg);
}

.RegisterPage .RegisterEmblem {
    font-size: 0;
}

.RegisterPage .RegisterFormCard h1 {
    margin-bottom: 8px;
    padding-bottom: 11px;
}

.RegisterPage .RegisterIntro {
    margin: 0 0 20px;
    color: #a9c6d8;
    font: 13px/1.55 Arial, sans-serif;
    text-align: center;
}

.RegisterPage .RegisterIntro strong {
    color: #ffe09a;
}

.RegisterPage .RegisterForm > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.RegisterPage .RegisterFullField {
    grid-column: 1 / -1;
}

.RegisterPage .RegisterWorldCard {
    display: grid;
    padding: 7px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    border-color: #8b6326 !important;
    background: linear-gradient(120deg, rgba(21, 52, 76, .82), rgba(24, 16, 5, .88)) !important;
}

.RegisterPage .RegisterWorldCard > div {
    display: flex;
    min-height: 82px;
    padding: 12px;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(49, 119, 158, .65);
    background: rgba(1, 9, 17, .72);
    text-align: center;
}

.RegisterPage .RegisterWorldCard small {
    color: #5ed3ff;
    font: bold 8px/1 Arial, sans-serif;
    letter-spacing: 1.4px;
}

.RegisterPage .RegisterWorldCard strong {
    margin: 7px 0 5px;
    color: #ffe09d;
    font: bold 17px/1 Georgia, "Times New Roman", serif;
    letter-spacing: .7px;
    text-shadow: 0 2px 2px #000;
}

.RegisterPage .RegisterWorldCard span {
    color: #91aabc;
    font: 10px/1.35 Arial, sans-serif;
    letter-spacing: 0;
    text-transform: none;
}

.RegisterPage .RegisterRules {
    padding: 17px 18px !important;
    border-color: #8a6024 !important;
    background: radial-gradient(circle at 100% 0, rgba(170, 112, 23, .13), transparent 35%), rgba(4, 12, 21, .9) !important;
    color: #b9cbd8 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.RegisterPage .RegisterRules h2 {
    margin: 0 0 6px;
    color: #ffe0a0;
    font: bold 18px/1.2 Georgia, "Times New Roman", serif;
    letter-spacing: .5px;
}

.RegisterPage .RegisterRules p {
    margin: 0 0 13px;
    color: #91a9b9;
    font: 12px/1.5 Arial, sans-serif;
}

.RegisterPage .RegisterRules label {
    display: flex;
    min-height: 38px;
    padding: 0 12px;
    align-items: center;
    gap: 10px;
    border: 1px solid #285a78;
    border-radius: 3px;
    background: #020b14;
    color: #76d7fa;
    font: bold 11px/1.3 Arial, sans-serif;
    cursor: pointer;
}

.RegisterPage .RegisterRules input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #159edb;
}

.RegisterPage .RegisterCaptcha {
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.RegisterPage .RegisterSubmit {
    padding: 6px 12px !important;
    border: 0 !important;
    background: transparent !important;
}

.RegisterPage .RegisterSubmit input[type="submit"] {
    min-width: min(320px, 100%);
    min-height: 52px;
    border-color: #e0aa44;
    background:
        radial-gradient(circle at 50% 0, rgba(78, 193, 246, .26), transparent 38%),
        linear-gradient(180deg, #126296, #062a4b 54%, #020d1b);
    color: #ffe4a7;
    font: bold 14px/1 Georgia, "Times New Roman", serif;
    letter-spacing: 1.2px;
    box-shadow: inset 0 0 0 2px #020711, inset 0 0 0 3px rgba(72, 191, 242, .35), inset 0 0 18px rgba(0, 0, 0, .6), 0 6px 12px rgba(0, 0, 0, .64), 0 0 12px rgba(32, 168, 230, .3);
}

.RegisterPage .RoyalFormAlert {
    display: flex;
    margin: 0 0 18px;
    padding: 14px 16px;
    flex-direction: column;
    gap: 6px;
    border: 1px solid #276788;
    border-radius: 4px;
    background: rgba(3, 22, 35, .9);
    color: #bcd8e8;
    font: 12px/1.5 Arial, sans-serif;
}

.RegisterPage .RoyalFormAlert strong {
    color: #75dcff;
    font-size: 11px;
    letter-spacing: 1px;
}

.RegisterPage .RoyalFormAlert.error {
    border-color: #a54d3f;
    background: rgba(55, 10, 10, .7);
    color: #ffb3a9;
}

.RegisterPage .RoyalFormAlert.error strong {
    color: #ff796d;
}

.RegisterPage .RoyalFormAlert ul {
    margin: 2px 0 0;
    padding-left: 20px;
}

.RegisterPage .RoyalFormAlert.success {
    border-color: #31845d;
    background: rgba(4, 46, 32, .62);
}

.RegisterPage .RoyalFormAlert.success strong {
    color: #64eca5;
}

.RegisterPage .RegisterLoginButton {
    display: block;
    box-sizing: border-box;
    width: min(320px, 100%);
    margin: 22px auto 4px;
    padding: 16px 24px;
    border: 1px solid #d4a041;
    border-radius: 3px;
    background: linear-gradient(180deg, #126296, #06233d);
    color: #ffe5a8;
    font: bold 13px/1 Arial, sans-serif;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    box-shadow: inset 0 0 0 2px #020711, inset 0 0 12px rgba(58, 187, 244, .35), 0 7px 12px rgba(0, 0, 0, .55);
}

.RegisterPage .RegisterLoginButton:hover {
    color: #fff3c9;
    filter: brightness(1.16);
    transform: translateY(-2px);
}

@media (max-width: 680px) {
    .RegisterPage .RegisterFormCard { padding: 18px 12px; }
    .RegisterPage .RegisterForm > ul,
    .RegisterPage .RegisterWorldCard { grid-template-columns: 1fr; }
    .RegisterPage .RegisterForm > ul > li { grid-column: 1; }
}

/* Premium payment stores: Egyptian wallets and Tibia Coins */
.WalletStorePage .RoyalDataPageShell::before { content: "E-WALLETS"; }
.TibiaCoinStorePage .RoyalDataPageShell::before { content: "TIBIA COINS"; }
.WalletStorePage .ew-store, .WalletStorePage .ew-store *,
.TibiaCoinStorePage .tc-store, .TibiaCoinStorePage .tc-store * { box-sizing: border-box; }
.WalletStorePage .ew-store, .TibiaCoinStorePage .tc-store { display: grid; color: #c4d7e2; font-family: Arial, sans-serif; }

.WalletStorePage .ew-hero, .TibiaCoinStorePage .tc-hero {
    position: relative; min-height: 232px; overflow: hidden; padding: 32px 295px 28px 30px;
    border: 1px solid #9b7027; border-radius: 3px 3px 0 0; color: #fff;
    background: radial-gradient(circle at 78% 42%, rgba(53, 184, 238, .19), transparent 29%), linear-gradient(130deg, #071d31, #020a12 58%, #191104);
    box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .48), inset 0 0 32px rgba(17, 111, 164, .16), 0 8px 18px rgba(0, 0, 0, .45);
}
.WalletStorePage .ew-hero { padding: 32px 295px 28px 30px; direction: ltr; text-align: left; }
.WalletStorePage .ew-hero::before, .TibiaCoinStorePage .tc-hero::before { content: ""; position: absolute; inset: 9px; z-index: 0; border: 1px solid rgba(217, 166, 63, .36); pointer-events: none; }
.WalletStorePage .ew-hero::after, .TibiaCoinStorePage .tc-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 36%, rgba(255, 216, 130, .045) 37%, transparent 52%); }
.WalletStorePage .ew-kicker, .TibiaCoinStorePage .tc-kicker { position: relative; z-index: 2; color: #69d9ff; font: bold 7px/1 Arial, sans-serif; letter-spacing: 1.7px; text-transform: uppercase; }
.WalletStorePage .ew-hero h1, .TibiaCoinStorePage .tc-hero h1 { position: relative; z-index: 2; margin: 9px 0 10px; color: #ffe1a1; font: bold 29px/1.13 Georgia, serif; text-shadow: 0 2px 2px #000, 0 0 10px rgba(224, 166, 49, .25); }
.WalletStorePage .ew-hero p { position: relative; z-index: 2; max-width: 500px; margin: 0; color: #c8d8e1; font: 14px/1.75 Arial, sans-serif; }
.TibiaCoinStorePage .tc-hero p { position: relative; z-index: 2; max-width: 430px; margin: 0; color: #a9becb; font: 10px/1.65 Arial, sans-serif; }
.WalletStorePage .ew-trust { position: relative; z-index: 2; display: flex; margin-top: 18px; padding: 0; gap: 11px; }
.TibiaCoinStorePage .tc-trust { position: relative; z-index: 2; display: flex; margin-top: 15px; padding: 0; gap: 9px; }
.WalletStorePage .ew-trust span { padding: 9px 12px; border: 1px solid #47738b; border-radius: 2px; background: rgba(1, 12, 21, .82); color: #d2e2ea; font: bold 10px/1.25 Arial, sans-serif; }
.TibiaCoinStorePage .tc-trust span { padding: 6px 9px; border: 1px solid #365d73; border-radius: 2px; background: rgba(1, 12, 21, .78); color: #b9ced9; font: bold 7px/1 Arial, sans-serif; }
.WalletStorePage .ew-trust span::before, .TibiaCoinStorePage .tc-trust span::before { content: "\2713"; display: inline; width: auto; height: auto; margin: 0 5px 0 0; border: 0; border-radius: 0; background: none; color: #efbd48; }
.WalletStorePage .ew-hero-image-wrap { position: absolute; z-index: 2; top: 27px; right: 28px; display: grid; width: 235px; height: 175px; place-items: center; border: 1px solid #a77727; border-radius: 3px; background: radial-gradient(circle, rgba(49, 150, 200, .2), transparent 58%), #020b13; box-shadow: 0 0 0 5px rgba(0, 5, 10, .75), 0 12px 22px rgba(0, 0, 0, .55); transform: none; }
.WalletStorePage .ew-hero-image { width: 205px; max-height: 150px; object-fit: contain; filter: drop-shadow(0 7px 9px rgba(0, 0, 0, .65)); }
.TibiaCoinStorePage .tc-hero-image { position: absolute; z-index: 2; top: 4px; right: 23px; width: 255px; height: 215px; object-fit: contain; filter: drop-shadow(0 12px 9px rgba(0, 0, 0, .7)) drop-shadow(0 0 10px rgba(218, 155, 42, .28)); }

.WalletStorePage .ew-body, .TibiaCoinStorePage .tc-body { padding: 16px 0 0; border: 0; border-radius: 0; background: transparent; }
.WalletStorePage .ew-head, .TibiaCoinStorePage .tc-section-head { margin: 0 0 13px; padding: 14px; border: 1px solid #31566d; border-top-color: #9b7027; background: linear-gradient(90deg, rgba(8, 37, 56, .96), rgba(2, 11, 18, .98)); text-align: center; }
.WalletStorePage .ew-head h2, .TibiaCoinStorePage .tc-section-head h2 { margin: 0 0 5px; color: #ffe09a; font: bold 19px/1.1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.WalletStorePage .ew-head p, .TibiaCoinStorePage .tc-section-head p { margin: 0; color: #839ba8; font: 8px/1.5 Arial, sans-serif; }
.WalletStorePage .ew-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.TibiaCoinStorePage .tc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.WalletStorePage .ew-card, .TibiaCoinStorePage .tc-card { position: relative; display: flex; min-height: 188px; padding: 20px 9px 10px; flex-direction: column; align-items: center; border: 1px solid #365267; border-radius: 3px; background: radial-gradient(circle at 50% 20%, rgba(218, 164, 45, .12), transparent 30%), linear-gradient(145deg, #101c25, #02080d); box-shadow: inset 0 0 18px rgba(0, 0, 0, .5), 0 5px 11px rgba(0, 0, 0, .4); transition: transform .18s, border-color .18s, box-shadow .18s; }
.WalletStorePage .ew-card:hover, .TibiaCoinStorePage .tc-card:hover { transform: translateY(-3px); border-color: #d1a13d; box-shadow: inset 0 0 18px rgba(0, 0, 0, .48), 0 8px 15px rgba(0, 0, 0, .55), 0 0 10px rgba(225, 169, 51, .13); }
.WalletStorePage .ew-badge, .TibiaCoinStorePage .tc-card-badge { position: absolute; z-index: 2; top: -7px; padding: 4px 8px; border: 1px solid #d6a53c; border-radius: 2px; background: #1c1305; color: #f5c95e; font: bold 6px/1 Arial, sans-serif; letter-spacing: .5px; }
.WalletStorePage .ew-money-icon { display: grid; width: 46px; height: 46px; margin: 5px 0 7px; place-items: center; border: 1px solid #63cef4; border-radius: 50%; background: radial-gradient(circle, #147aab, #062a43 70%); color: #e8faff; font: bold 11px/1 Arial, sans-serif; box-shadow: inset 0 0 9px rgba(255,255,255,.12), 0 0 12px rgba(39, 165, 217, .22); }
.TibiaCoinStorePage .tc-mini-coin { width: 49px; height: 49px; margin: 3px 0 5px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.7)); }
.WalletStorePage .ew-price, .TibiaCoinStorePage .tc-coin-amount { color: #ffe09a; font: bold 20px/1 Georgia, serif; text-shadow: 0 2px 2px #000; direction: ltr; }
.WalletStorePage .ew-currency, .TibiaCoinStorePage .tc-coin-label { margin-top: 3px; color: #78cdec; font: bold 6px/1 Arial, sans-serif; letter-spacing: .8px; text-transform: uppercase; }
.WalletStorePage .ew-line, .TibiaCoinStorePage .tc-exchange { width: 72%; height: 1px; margin: 9px 0; background: linear-gradient(90deg, transparent, #8f6a29, transparent); }
.WalletStorePage .ew-points, .TibiaCoinStorePage .tc-points { margin: 0 0 9px; color: #70dfb0; font: bold 13px/1 Georgia, serif; direction: ltr; }
.WalletStorePage .ew-select, .TibiaCoinStorePage .tc-select { width: 100%; min-height: 34px; margin-top: auto; padding: 7px 5px; border: 1px solid #a97c28; border-radius: 2px; background: linear-gradient(#13547c, #072d4b); color: #ffe3a6; font: bold 7px/1 Arial, sans-serif; text-shadow: 0 1px 2px #000; cursor: pointer; }
.WalletStorePage .ew-select:hover, .TibiaCoinStorePage .tc-select:hover { border-color: #e4b752; filter: brightness(1.15); }
.WalletStorePage .ew-select.selected, .TibiaCoinStorePage .tc-select.selected { border-color: #4bc69a; background: linear-gradient(#218b62, #0b4d35); color: #dcfff0; }

.WalletStorePage .ew-checkout, .TibiaCoinStorePage .tc-checkout { display: grid; margin-top: 14px; grid-template-columns: 1fr 1fr; gap: 11px; }
.WalletStorePage .ew-panel, .TibiaCoinStorePage .tc-panel { padding: 15px; border: 1px solid #31566d; border-radius: 3px; background: linear-gradient(145deg, rgba(7, 27, 41, .99), rgba(2, 8, 14, .99)); box-shadow: inset 0 0 18px rgba(0,0,0,.45), 0 5px 10px rgba(0,0,0,.38); }
.WalletStorePage .ew-panel h3, .TibiaCoinStorePage .tc-panel h3 { margin: 0 0 13px; padding-bottom: 9px; border-bottom: 1px solid #765823; color: #ffe09a; font: bold 16px/1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.WalletStorePage .ew-steps, .TibiaCoinStorePage .tc-steps { display: grid; margin: 0; padding: 0; gap: 7px; list-style: none; counter-reset: store-step; }
.WalletStorePage .ew-steps li, .TibiaCoinStorePage .tc-steps li { position: relative; min-height: 35px; padding: 8px 39px 8px 9px; border: 1px solid #24475b; background: rgba(2, 12, 20, .74); color: #9fb5c1; font: 9px/1.5 Arial, sans-serif; counter-increment: store-step; }
.WalletStorePage .ew-steps li::before, .TibiaCoinStorePage .tc-steps li::before { content: counter(store-step); position: absolute; top: 50%; right: 8px; left: auto; display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #b9842e; border-radius: 50%; background: #09253b; color: #ffe19c; font: bold 8px/1 Arial, sans-serif; transform: translateY(-50%); }
.TibiaCoinStorePage .tc-steps li { padding: 8px 9px 8px 39px; }
.TibiaCoinStorePage .tc-steps li::before { right: auto; left: 8px; }
.TibiaCoinStorePage .tc-panel h3 { margin-bottom: 14px; padding-bottom: 10px; font-size: 19px; }
.TibiaCoinStorePage .tc-steps { gap: 8px; }
.TibiaCoinStorePage .tc-steps li { min-height: 42px; padding: 10px 10px 10px 45px; color: #bed0da; font-size: 11px; line-height: 1.55; }
.TibiaCoinStorePage .tc-steps li::before { left: 9px; width: 27px; height: 27px; font-size: 10px; }
.WalletStorePage .ew-field label, .TibiaCoinStorePage .tc-field label { display: block; margin-bottom: 6px; color: #64d3f8; font: bold 6px/1 Arial, sans-serif; letter-spacing: .8px; }
.WalletStorePage .ew-field select, .TibiaCoinStorePage .tc-field select { box-sizing: border-box; width: 100%; height: 39px; padding: 0 10px; border: 1px solid #386b87; border-radius: 2px; outline: 0; background: #020d17; color: #d6e8f2; font: 9px Arial, sans-serif; }
.TibiaCoinStorePage .tc-field label { margin-bottom: 8px; font-size: 8px; }
.TibiaCoinStorePage .tc-field select { height: 42px; padding: 0 11px; font-size: 11px; }
.WalletStorePage .ew-summary, .TibiaCoinStorePage .tc-summary { display: flex; min-height: 54px; margin: 12px 0; padding: 10px 12px; align-items: center; justify-content: space-between; border: 1px solid #735923; border-radius: 2px; background: radial-gradient(circle, rgba(211, 162, 20, .1), transparent 65%), #030d15; color: #8096a2; font: 8px/1.3 Arial, sans-serif; }
.WalletStorePage .ew-summary strong, .TibiaCoinStorePage .tc-summary strong { color: #72dfb1; font: bold 12px/1.2 Georgia, serif; direction: ltr; }
.TibiaCoinStorePage .tc-summary { min-height: 62px; padding: 11px 13px; color: #9db2bd; font-size: 10px; }
.TibiaCoinStorePage .tc-summary strong { font-size: 15px; }
.WalletStorePage .ew-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.WalletStorePage .ew-action, .TibiaCoinStorePage .tc-discord { display: flex; min-height: 37px; padding: 0 7px; align-items: center; justify-content: center; border: 1px solid; border-radius: 2px; color: #fff !important; font: bold 7px/1 Arial, sans-serif; text-align: center; text-decoration: none !important; }
.TibiaCoinStorePage .tc-discord { min-height: 42px; font-size: 9px; letter-spacing: .4px; }
.WalletStorePage .ew-whatsapp { border-color: #32996b; background: linear-gradient(#249968, #0c5137); }
.WalletStorePage .ew-discord, .TibiaCoinStorePage .tc-discord { border-color: #6171c9; background: linear-gradient(#5c6cc9, #303b7d); }
.WalletStorePage .ew-action.disabled, .TibiaCoinStorePage .tc-discord.is-disabled { border-color: #42535d; background: #26343c; color: #748690 !important; cursor: not-allowed; }
.WalletStorePage .ew-confirm-form { margin: 10px 0 0; }
.WalletStorePage .ew-confirm { width: 100%; min-height: 40px; border: 1px solid #be852b; border-radius: 2px; background: linear-gradient(#1682b8,#07466d); color: #fff1bd; cursor: pointer; font: bold 10px Tahoma,Arial,sans-serif; box-shadow: inset 0 1px rgba(255,255,255,.16),0 4px 10px rgba(0,0,0,.32); }
.WalletStorePage .ew-confirm:hover { filter: brightness(1.15); }
.WalletStorePage .ew-confirm:disabled { border-color:#42535d; background:#26343c; color:#748690; cursor:not-allowed; box-shadow:none; }
.WalletStorePage .ew-help, .TibiaCoinStorePage .tc-help { min-height: 15px; margin: 8px 0 0; color: #768e9b; font: 7px/1.5 Arial, sans-serif; text-align: center; }
.WalletStorePage .ew-notice, .TibiaCoinStorePage .tc-notice { margin-top: 12px; padding: 12px 14px; border: 1px solid #8d6725; border-left: 3px solid #e0ad18; background: linear-gradient(90deg, rgba(84,59,10,.36), rgba(3,13,21,.97)); color: #9fb0b9; font: 8px/1.6 Arial, sans-serif; }
.TibiaCoinStorePage .tc-help { min-height: 17px; margin-top: 9px; color: #93a9b5; font-size: 9px; line-height: 1.55; }
.TibiaCoinStorePage .tc-notice { padding: 14px 16px; color: #bccbd3; font-size: 10px; line-height: 1.65; }
.WalletStorePage .ew-notice { border-right: 3px solid #e0ad18; border-left-width: 1px; }
.WalletStorePage .ew-notice strong, .TibiaCoinStorePage .tc-notice strong { color: #f0c434; }
.WalletStorePage .ew-policy { margin-top: 9px; padding: 10px 12px; border: 1px solid #294b60; background: rgba(3,13,21,.84); color: #748b98; font: 7px/1.55 Arial, sans-serif; text-align: center; }

@media (max-width: 760px) {
    .WalletStorePage .ew-hero, .TibiaCoinStorePage .tc-hero { padding-right: 225px; }
    .WalletStorePage .ew-hero-image-wrap { right: 17px; width: 185px; }
    .TibiaCoinStorePage .tc-hero-image { right: 7px; width: 215px; }
    .WalletStorePage .ew-grid { grid-template-columns: repeat(3, 1fr); }
    .TibiaCoinStorePage .tc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .WalletStorePage .ew-hero, .TibiaCoinStorePage .tc-hero { min-height: 385px; padding: 26px 18px 178px; text-align: center; }
    .WalletStorePage .ew-hero h1, .TibiaCoinStorePage .tc-hero h1 { font-size: 25px; }
    .WalletStorePage .ew-hero-image-wrap { top: auto; right: 50%; bottom: 18px; width: 215px; height: 140px; transform: translateX(50%); }
    .WalletStorePage .ew-hero-image { max-height: 120px; }
    .TibiaCoinStorePage .tc-hero-image { top: auto; right: 50%; bottom: -18px; width: 205px; height: 185px; transform: translateX(50%); }
    .WalletStorePage .ew-trust, .TibiaCoinStorePage .tc-trust { justify-content: center; flex-wrap: wrap; }
    .WalletStorePage .ew-grid, .TibiaCoinStorePage .tc-grid, .WalletStorePage .ew-checkout, .TibiaCoinStorePage .tc-checkout { grid-template-columns: 1fr; }
}

/* Index latest-news showcase */
.IndexPage .HomeNewsBox { border-color: #bd842e; background: linear-gradient(180deg, #061626, #01060c); }
.IndexPage .HomeNewsBox::before { height: 49px; background: radial-gradient(circle at 50% 120%, rgba(30, 157, 226, .42), transparent 43%), linear-gradient(180deg, #12304c, #071420 68%, #02070d); font-size: 20px; letter-spacing: 1.8px; }
.IndexPage .HomeNewsBox::after { top: 38px; box-shadow: inset 0 0 0 2px #05264d, 0 0 0 2px #211202, 0 0 12px #0b9ef2; }
.IndexPage .HomeNewsBox > .Border_2 { background: linear-gradient(90deg, #3a2208, #d39a38 18%, #2c5268 50%, #d39a38 82%, #3a2208); }
.IndexPage .HomeNewsBox .BoxContent { padding: 16px !important; background-image: radial-gradient(circle at 50% 0, rgba(18, 114, 177, .24), transparent 34%), linear-gradient(180deg, #071522, #020811) !important; }

.IndexPage .HomeChangelogTicker { margin: 0 0 14px; overflow: hidden; border: 1px solid #315c76; border-top-color: #9f7129; border-radius: 3px; background: #020b13; box-shadow: inset 0 0 15px rgba(0,0,0,.52), 0 5px 10px rgba(0,0,0,.36); }
.IndexPage .HomeChangelogTicker > header { display: flex; min-height: 50px; padding: 9px 12px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #745321; background: linear-gradient(90deg, #0b2840, #04101b 70%); }
.IndexPage .HomeChangelogTicker > header div { display: grid; gap: 3px; }
.IndexPage .HomeChangelogTicker > header small { color: #5ed6ff; font: bold 6px/1 Arial, sans-serif; letter-spacing: 1.4px; }
.IndexPage .HomeChangelogTicker > header strong { color: #ffe09a; font: bold 14px/1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.IndexPage .HomeChangelogTicker > header a { padding: 8px 10px; border: 1px solid #9d7229; border-radius: 2px; background: linear-gradient(#124c73, #062a46); color: #ffe2a3 !important; font: bold 7px/1 Arial, sans-serif; letter-spacing: .6px; text-decoration: none; box-shadow: inset 0 0 7px rgba(69,190,244,.18); }
.IndexPage .HomeChangelogTicker > header a:hover { color: #70ddff !important; filter: brightness(1.16); }
.IndexPage .HomeChangelogRows { display: grid; }
.IndexPage .HomeChangelogRow { display: grid; min-height: 31px; padding: 7px 11px; grid-template-columns: 92px minmax(0,1fr); align-items: center; gap: 9px; border-bottom: 1px solid rgba(40,78,101,.55); color: #aebfca; font: 8px/1.45 Arial, sans-serif; }
.IndexPage .HomeChangelogRow:last-child { border-bottom: 0; }
.IndexPage .HomeChangelogRow time { color: #5bcff5; font-size: 7px; }

.IndexPage .HomeNewsArticle { position: relative; margin: 0 0 16px; overflow: hidden; border: 1px solid #8f6728; border-radius: 3px; background: linear-gradient(180deg, #071725, #020911); box-shadow: inset 0 0 24px rgba(0,0,0,.62), 0 7px 14px rgba(0,0,0,.48); }
.IndexPage .HomeNewsArticle::before { content: ""; position: absolute; top: 0; right: 0; width: 120px; height: 120px; pointer-events: none; background: linear-gradient(225deg, rgba(31,143,204,.13), transparent 58%); }
.IndexPage .HomeNewsHeader { position: relative; display: grid; min-height: 82px; padding: 14px 16px; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 13px; border-bottom: 1px solid #765522; background: radial-gradient(circle at 10% 50%, rgba(27,135,197,.23), transparent 25%), linear-gradient(90deg, #0a2237, #030b13 72%); }
.IndexPage .HomeNewsSeal { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid #d6a23c; border-radius: 50%; background: radial-gradient(circle, #116291, #041524 68%); color: #ffe09a; font: bold 10px/1 Georgia, serif; box-shadow: inset 0 0 11px rgba(65,191,241,.38), 0 0 0 3px #020911, 0 0 8px rgba(221,166,54,.3); }
.IndexPage .HomeNewsHeader small { display: block; margin-bottom: 5px; color: #60d4fa; font: bold 6px/1 Arial, sans-serif; letter-spacing: 1.5px; }
.IndexPage .HomeNewsHeader h2 { margin: 0 0 6px; color: #ffe1a0; font: bold 17px/1.2 Georgia, "Times New Roman", serif; text-shadow: 0 2px 2px #000; }
.IndexPage .HomeNewsHeader h2 a { color: inherit !important; text-decoration: none; }
.IndexPage .HomeNewsHeader h2 a:hover { color: #6edcff !important; }
.IndexPage .HomeNewsHeader p { margin: 0; color: #8097a5; font: 7px/1.4 Arial, sans-serif; }
.IndexPage .HomeNewsHeader p a { color: #e7bd61 !important; font-weight: bold; text-decoration: none; }
.IndexPage .HomeNewsHeader p i { display: inline-block; width: 4px; height: 4px; margin: 0 6px 1px; background: #d9a039; transform: rotate(45deg); box-shadow: 0 0 5px #e5a82d; }
.IndexPage .HomeNewsBody { position: relative; padding: 18px; color: #c6d9e5; font: 10px/1.7 Arial, sans-serif; overflow-wrap: anywhere; }
.IndexPage .HomeNewsBody p { margin: 0 0 10px; }
.IndexPage .HomeNewsBody p:last-child { margin-bottom: 0; }
.IndexPage .HomeNewsBody b, .IndexPage .HomeNewsBody strong { color: #ffe0a0; }
.IndexPage .HomeNewsBody a { color: #61d2fb !important; }
.IndexPage .HomeNewsBody center { color: #d8e8f2; }
.IndexPage .HomeNewsBody img { display: block; box-sizing: border-box; max-width: 100%; height: auto; margin: 14px auto; padding: 4px; border: 1px solid #8b6428 !important; border-radius: 3px !important; background: #02080e; box-shadow: 0 8px 18px rgba(0,0,0,.62), 0 0 12px rgba(35,145,205,.16) !important; }
.IndexPage .HomeNewsArticle > footer { display: flex; min-height: 38px; padding: 0 14px; align-items: center; justify-content: flex-end; border-top: 1px solid #294b60; background: rgba(2,10,17,.72); }
.IndexPage .HomeNewsArticle > footer a { padding: 7px 10px; border: 1px solid #8f6727; background: #092a45; color: #ffe1a0 !important; font: bold 7px/1 Arial, sans-serif; letter-spacing: .6px; text-decoration: none; }
.IndexPage .HomeNewsArticle > footer a span { margin-left: 5px; color: #63d8ff; font-size: 11px; }
.IndexPage .HomeNewsArticle > footer a:hover { filter: brightness(1.18); }
.IndexPage .HomeNewsArticleSingle .HomeNewsBody { min-height: 120px; }

.IndexPage .HomeNewsPagination { display: flex; min-height: 47px; padding: 9px 11px; align-items: center; justify-content: flex-end; gap: 10px; border: 1px solid #31546a; background: linear-gradient(90deg, #061828, #020a12); }
.IndexPage .HomeNewsPagination label { color: #62d4fa; font: bold 6px/1 Arial, sans-serif; letter-spacing: 1px; }
.IndexPage .HomeNewsPagination select { min-width: 135px; height: 29px; margin: 0 !important; padding: 0 8px !important; border: 1px solid #9a702a !important; border-radius: 2px !important; outline: 0; background: #03111d !important; color: #d8e9f3 !important; font: 8px Arial, sans-serif; }
.IndexPage .HomeNewsEmpty { display: grid; min-height: 170px; padding: 25px; place-items: center; align-content: center; gap: 9px; border: 1px solid #7c5925; background: #030b13; text-align: center; }
.IndexPage .HomeNewsEmpty > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #ad7b2c; border-radius: 50%; color: #ffe09b; font: bold 17px Georgia, serif; }
.IndexPage .HomeNewsEmpty strong { color: #ffe09b; font: bold 16px Georgia, serif; }
.IndexPage .HomeNewsEmpty p { margin: 0; color: #8da4b1; font-size: 9px; }

@media (max-width: 560px) {
    .IndexPage .HomeNewsBox .BoxContent { padding: 10px !important; }
    .IndexPage .HomeChangelogTicker > header { align-items: flex-start; flex-direction: column; }
    .IndexPage .HomeChangelogRow { grid-template-columns: 1fr; gap: 3px; }
    .IndexPage .HomeNewsHeader { padding: 13px 11px; grid-template-columns: 43px minmax(0,1fr); gap: 10px; }
    .IndexPage .HomeNewsSeal { width: 38px; height: 38px; }
    .IndexPage .HomeNewsHeader h2 { font-size: 14px; }
    .IndexPage .HomeNewsBody { padding: 13px 11px; }
    .IndexPage .HomeNewsPagination { align-items: stretch; flex-direction: column; }
    .IndexPage .HomeNewsPagination select { width: 100%; }
}

/* The news portal is embedded inside index.php as well as sub.php?page=news. */
.IndexPage .HomeNewsBox .NewsPortal { display: grid; gap: 14px; color: #c3d7e3; }
.IndexPage .HomeNewsBox .NewsPortalHero { min-height: 116px; grid-template-columns: 72px minmax(0,1fr) 96px; background: radial-gradient(circle at 15% 50%, rgba(27,153,211,.25), transparent 26%), radial-gradient(circle at 91% 50%, rgba(210,146,38,.16), transparent 25%), linear-gradient(110deg,#071d30,#020a13 63%,#191105); }
.IndexPage .HomeNewsBox .RoyalDataHeroIcon.news { background: radial-gradient(circle at 48% 38%,#178fc3,#07334f 58%,#020912 78%); color:#ffdf8f; font-size:27px; text-shadow:0 2px 2px #000,0 0 12px #4bd4ff; }
.IndexPage .HomeNewsBox .NewsPortalStats { display:flex; min-height:67px; padding:8px; flex-direction:column; align-items:center; justify-content:center; border:1px solid #765723; background:rgba(3,16,27,.88); box-shadow:inset 0 0 15px rgba(44,181,231,.13); }
.IndexPage .HomeNewsBox .NewsPortalStats strong { color:#63dcff; font:bold 26px/1 Georgia,serif; text-shadow:0 0 9px #167fae; }
.IndexPage .HomeNewsBox .NewsPortalStats small { margin-top:5px; color:#e7c779; font:bold 6px/1 Arial,sans-serif; letter-spacing:1.1px; }
.IndexPage .HomeNewsBox .NewsPortalStats time { margin-top:7px; color:#728d9d; font:bold 7px/1 Arial,sans-serif; text-transform:uppercase; }
.IndexPage .HomeNewsBox .NewsPatchRibbon { overflow:hidden; border:1px solid #765723; background:linear-gradient(145deg,rgba(6,26,41,.97),rgba(2,9,16,.99)); box-shadow:inset 0 0 16px rgba(0,0,0,.48),0 4px 10px rgba(0,0,0,.38); }
.IndexPage .HomeNewsBox .NewsPatchRibbon > header { display:grid; min-height:48px; padding:0 12px; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:9px; border-bottom:1px solid #294d63; background:linear-gradient(90deg,rgba(14,52,77,.88),rgba(3,14,23,.72)); }
.IndexPage .HomeNewsBox .NewsPatchRibbon > header > span { color:#5cd7fc; font-size:18px; text-shadow:0 0 8px #1389ba; }
.IndexPage .HomeNewsBox .NewsPatchRibbon header small { display:block; color:#5bd4fa; font:bold 6px/1 Arial,sans-serif; letter-spacing:1px; }
.IndexPage .HomeNewsBox .NewsPatchRibbon header strong { display:block; margin-top:4px; color:#ffe09a; font:bold 13px/1 Georgia,serif; }
.IndexPage .HomeNewsBox .NewsPatchRibbon header a { padding:8px 10px; border:1px solid #956a28; background:#061b2b; color:#e5c47b; font:bold 6px/1 Arial,sans-serif; text-decoration:none; }
.IndexPage .HomeNewsBox .NewsPatchRibbon header a:hover { color:#65d9ff; filter:brightness(1.16); }
.IndexPage .HomeNewsBox .NewsPatchRibbon > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.IndexPage .HomeNewsBox .NewsPatchRibbon article { display:grid; min-height:48px; padding:9px 11px; grid-template-columns:43px minmax(0,1fr); align-items:center; gap:8px; border-right:1px solid #1f4054; }
.IndexPage .HomeNewsBox .NewsPatchRibbon article:last-child { border-right:0; }
.IndexPage .HomeNewsBox .NewsPatchRibbon article time { color:#e9c97d; font:bold 7px/1 Arial,sans-serif; text-transform:uppercase; }
.IndexPage .HomeNewsBox .NewsPatchRibbon article p { overflow:hidden; margin:0; color:#91aab8; font:8px/1.4 Arial,sans-serif; white-space:nowrap; text-overflow:ellipsis; }
.IndexPage .HomeNewsBox .NewsPortalFeed { display:grid; gap:15px; }
.IndexPage .HomeNewsBox .NewsPortalArticle { position:relative; overflow:hidden; border:1px solid #745623; border-radius:4px; background:linear-gradient(145deg,rgba(6,25,39,.99),rgba(2,8,14,.99)); box-shadow:inset 0 0 23px rgba(0,0,0,.48),0 8px 16px rgba(0,0,0,.46); }
.IndexPage .HomeNewsBox .NewsPortalArticle.featured { border-color:#ad7b2b; box-shadow:inset 0 0 24px rgba(27,144,190,.06),0 0 15px rgba(30,157,207,.14),0 9px 17px rgba(0,0,0,.48); }
.IndexPage .HomeNewsBox .NewsPortalArticle::after { content:""; position:absolute; top:0; right:0; width:130px; height:100px; pointer-events:none; background:linear-gradient(225deg,rgba(44,175,226,.1),transparent 65%); }
.IndexPage .HomeNewsBox .NewsArticleHeader { position:relative; z-index:1; display:grid; min-height:86px; padding:0 15px; grid-template-columns:55px minmax(0,1fr) 25px; align-items:center; gap:12px; border-bottom:1px solid #765623; background:linear-gradient(90deg,rgba(15,56,82,.94),rgba(4,17,28,.84) 70%,rgba(44,31,8,.38)); }
.IndexPage .HomeNewsBox .NewsArticleCrest > span { display:grid; width:45px; height:45px; place-items:center; border:1px solid #c58c31; border-radius:50%; background:radial-gradient(circle,#12628d,#041523 68%); color:#ffe09a; font-size:20px; box-shadow:inset 0 0 9px rgba(55,194,242,.2),0 0 10px rgba(190,135,43,.22); }
.IndexPage .HomeNewsBox .NewsArticleBadges { display:flex; align-items:center; gap:6px; }
.IndexPage .HomeNewsBox .NewsArticleBadges span,.IndexPage .HomeNewsBox .NewsArticleBadges b { padding:5px 7px; border:1px solid #3a7899; color:#65d7fa; font:bold 6px/1 Arial,sans-serif; letter-spacing:.9px; }
.IndexPage .HomeNewsBox .NewsArticleBadges b { border-color:#765a2b; color:#e8c779; }
.IndexPage .HomeNewsBox .NewsArticleHeading h2 { margin:7px 0 5px; color:#ffe09a; font:bold 21px/1 Georgia,serif; text-shadow:0 2px 2px #000; }
.IndexPage .HomeNewsBox .NewsArticleHeading > p { display:flex; margin:0; align-items:center; gap:7px; color:#7892a1; font:bold 7px/1 Arial,sans-serif; letter-spacing:.5px; }
.IndexPage .HomeNewsBox .NewsArticleHeading > p i { display:block; width:3px; height:3px; border-radius:50%; background:#bd8731; }
.IndexPage .HomeNewsBox .NewsArticleHeading > p a,.IndexPage .HomeNewsBox .NewsArticleHeading > p strong { color:#60d3f6; text-decoration:none; }
.IndexPage .HomeNewsBox .NewsArticleAnchor { display:grid; width:23px; height:23px; place-items:center; border:1px solid #536d7d; border-radius:50%; color:#829daa; font:bold 9px Arial,sans-serif; text-decoration:none; }
.IndexPage .HomeNewsBox .NewsArticleBody { position:relative; z-index:1; overflow:hidden; min-height:90px; padding:20px; color:#bfd2dd; font:11px/1.65 Arial,sans-serif; overflow-wrap:anywhere; }
.IndexPage .HomeNewsBox .NewsArticleBody > :first-child { margin-top:0 !important; }
.IndexPage .HomeNewsBox .NewsArticleBody > :last-child { margin-bottom:0 !important; }
.IndexPage .HomeNewsBox .NewsArticleBody h1,.IndexPage .HomeNewsBox .NewsArticleBody h2,.IndexPage .HomeNewsBox .NewsArticleBody h3 { color:#ffe09a; font-family:Georgia,serif; text-shadow:0 2px 2px #000; }
.IndexPage .HomeNewsBox .NewsArticleBody a { color:#62d7fb; }
.IndexPage .HomeNewsBox .NewsArticleBody li { margin:5px 0; color:#b9ccd7; }
.IndexPage .HomeNewsBox .NewsArticleBody img { display:block; box-sizing:border-box; max-width:100% !important; height:auto !important; margin:16px auto; padding:4px; border:1px solid #98702c; border-radius:3px; background:#01060a; box-shadow:0 9px 19px rgba(0,0,0,.6),0 0 13px rgba(34,150,205,.17); cursor:zoom-in; transition:filter .2s,transform .2s; }
.IndexPage .HomeNewsBox .NewsArticleBody img:not([src]),.IndexPage .HomeNewsBox .NewsArticleBody img[src=""] { display:none; }
.IndexPage .HomeNewsBox .NewsArticleBody img:hover { filter:brightness(1.08); transform:translateY(-2px); }
.IndexPage .HomeNewsBox .NewsTextCenter { text-align:center; }
.IndexPage .HomeNewsBox .NewsVideo { position:relative; overflow:hidden; height:0; margin:14px 0; padding-bottom:56.25%; border:1px solid #8b672b; background:#000; }
.IndexPage .HomeNewsBox .NewsVideo iframe { position:absolute; inset:0; width:100%; height:100%; }
.IndexPage .HomeNewsBox .NewsArticleFooter { position:relative; z-index:1; display:flex; min-height:42px; padding:0 14px; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid #1e3d50; background:rgba(1,8,14,.72); }
.IndexPage .HomeNewsBox .NewsArticleFooter span { display:flex; align-items:center; gap:7px; color:#647e8d; font:bold 6px/1 Arial,sans-serif; letter-spacing:1px; }
.IndexPage .HomeNewsBox .NewsArticleFooter span i { width:6px; height:6px; border-radius:50%; background:#1bc879; box-shadow:0 0 6px #1bc879; }
.IndexPage .HomeNewsBox .NewsArticleFooter a { color:#dcbf78; font:bold 6px/1 Arial,sans-serif; letter-spacing:.7px; text-decoration:none; }
.IndexPage .HomeNewsBox .NewsArticleFooter a:hover { color:#61d8fb; }

@media (max-width:760px) {
    .IndexPage .HomeNewsBox .NewsPatchRibbon > div { grid-template-columns:1fr; }
    .IndexPage .HomeNewsBox .NewsPatchRibbon article { border-right:0; border-bottom:1px solid #1f4054; }
}
@media (max-width:540px) {
    .IndexPage .HomeNewsBox .NewsPortalHero { grid-template-columns:58px minmax(0,1fr); }
    .IndexPage .HomeNewsBox .NewsPortalStats { grid-column:1/-1; }
    .IndexPage .HomeNewsBox .NewsArticleHeader { min-height:78px; padding:8px 10px; grid-template-columns:42px minmax(0,1fr); }
    .IndexPage .HomeNewsBox .NewsArticleCrest > span { width:36px; height:36px; font-size:15px; }
    .IndexPage .HomeNewsBox .NewsArticleAnchor { display:none; }
    .IndexPage .HomeNewsBox .NewsArticleHeading h2 { font-size:17px; }
    .IndexPage .HomeNewsBox .NewsArticleBody { padding:13px; }
    .IndexPage .HomeNewsBox .NewsArticleFooter { align-items:flex-start; flex-direction:column; padding-top:10px; padding-bottom:10px; }
}

/* =========================================================
   REFUND POLICY — premium player protection charter
   ========================================================= */
.RefundPolicyPage .RoyalDataPageShell::before { content: "REFUND POLICY"; }
.RefundPolicyPage .RefundPolicy { display: grid; gap: 14px; color: #bfd2de; font-family: Arial, sans-serif; }
.RefundPolicyPage .RefundHero { min-height: 122px; grid-template-columns: 72px minmax(0,1fr) 104px; background: radial-gradient(circle at 14% 50%,rgba(32,160,213,.25),transparent 27%),radial-gradient(circle at 91% 50%,rgba(212,155,44,.17),transparent 25%),linear-gradient(110deg,#071e31,#020a13 64%,#191105); }
.RefundPolicyPage .RoyalDataHeroIcon.refund { background: radial-gradient(circle at 50% 35%,#178bbd,#073450 58%,#020912 78%); color:#ffe09a; font-size:28px; text-shadow:0 2px 2px #000,0 0 11px #34c9ff; }
.RefundPolicyPage .RefundHeroSeal { display:flex; min-height:70px; padding:8px; flex-direction:column; align-items:center; justify-content:center; border:1px solid #866126; background:rgba(3,15,25,.9); box-shadow:inset 0 0 15px rgba(42,173,224,.14); text-align:center; }
.RefundPolicyPage .RefundHeroSeal strong { color:#65ddff; font:bold 25px/1 Georgia,serif; text-shadow:0 0 9px #137fae; }
.RefundPolicyPage .RefundHeroSeal small { margin-top:7px; color:#e7c779; font:bold 8px/1.2 Arial,sans-serif; letter-spacing:1px; }

.RefundPolicyPage .RefundIntro { display:grid; min-height:94px; padding:15px 17px; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:14px; border:1px solid #896328; background:radial-gradient(circle at 8% 50%,rgba(29,143,197,.18),transparent 22%),linear-gradient(90deg,#09243a,#030b13 74%); box-shadow:inset 0 0 19px rgba(0,0,0,.5),0 5px 11px rgba(0,0,0,.4); }
.RefundPolicyPage .RefundIntro > span { display:grid; width:45px; height:45px; place-items:center; border:1px solid #d09b39; border-radius:50%; background:radial-gradient(circle,#116692,#041624 68%); color:#ffe09a; font-size:20px; box-shadow:inset 0 0 9px rgba(63,192,240,.25),0 0 9px rgba(210,151,47,.25); }
.RefundPolicyPage .RefundIntro small,.RefundPolicyPage .RefundSupport small { color:#61d5fa; font:bold 8px/1 Arial,sans-serif; letter-spacing:1.4px; }
.RefundPolicyPage .RefundIntro h2,.RefundPolicyPage .RefundSupport h2 { margin:6px 0 8px; color:#ffe09a; font:bold 20px/1.08 Georgia,serif; text-shadow:0 2px 2px #000; }
.RefundPolicyPage .RefundIntro p,.RefundPolicyPage .RefundSupport p { margin:0; color:#b0c4cf; font:11px/1.6 Arial,sans-serif; }
.RefundPolicyPage .RefundIntro p strong { color:#eaca82; }

.RefundPolicyPage .RefundPolicyGrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.RefundPolicyPage .RefundPolicyCard { overflow:hidden; border:1px solid #31566d; background:linear-gradient(145deg,rgba(7,27,41,.99),rgba(2,8,14,.99)); box-shadow:inset 0 0 18px rgba(0,0,0,.45),0 6px 12px rgba(0,0,0,.4); }
.RefundPolicyPage .RefundPolicyCard > header { display:grid; min-height:72px; padding:12px 14px; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:11px; border-bottom:1px solid #765823; background:linear-gradient(90deg,rgba(12,49,73,.9),rgba(3,13,21,.84)); }
.RefundPolicyPage .RefundPolicyCard > header > span { display:grid; width:31px; height:31px; place-items:center; border:1px solid #3e9a7c; border-radius:50%; background:#07271f; color:#70e0b1; font:bold 14px Arial,sans-serif; box-shadow:inset 0 0 8px rgba(45,199,148,.2); }
.RefundPolicyPage .RefundPolicyCard.final > header > span { border-color:#a34d43; background:#2b0d0b; color:#ff9d8d; }
.RefundPolicyPage .RefundPolicyCard header small { color:#63d5f8; font:bold 8px/1 Arial,sans-serif; letter-spacing:1px; }
.RefundPolicyPage .RefundPolicyCard header h2 { margin:6px 0 0; color:#ffe09a; font:bold 17px/1.18 Georgia,serif; text-shadow:0 2px 2px #000; }
.RefundPolicyPage .RefundPolicyCard > ul { display:grid; margin:0; padding:13px; gap:9px; list-style:none; }
.RefundPolicyPage .RefundPolicyCard li { position:relative; min-height:62px; padding:11px 11px 11px 32px; border:1px solid #2b5369; background:rgba(2,12,20,.72); }
.RefundPolicyPage .RefundPolicyCard li::before { content:""; position:absolute; top:14px; left:11px; width:7px; height:7px; border:1px solid #d2a03a; background:#0b5480; transform:rotate(45deg); box-shadow:0 0 5px rgba(50,181,235,.42); }
.RefundPolicyPage .RefundPolicyCard li b { display:block; color:#f0d184; font:bold 11px/1.25 Georgia,serif; }
.RefundPolicyPage .RefundPolicyCard li p { margin:7px 0 0; color:#a9bdc8; font:10px/1.55 Arial,sans-serif; }

.RefundPolicyPage .RefundWarning { display:grid; min-height:108px; padding:17px 18px; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:15px; border:1px solid #8b3f36; border-left:3px solid #cf5c49; background:radial-gradient(circle at 7% 50%,rgba(145,48,38,.2),transparent 20%),linear-gradient(90deg,#250d0b,#070b10 72%); box-shadow:inset 0 0 17px rgba(0,0,0,.52); }
.RefundPolicyPage .RefundWarning > span { display:grid; width:38px; height:38px; place-items:center; border:1px solid #b95a49; border-radius:50%; background:#310d0a; color:#ffad97; font:bold 19px Georgia,serif; box-shadow:0 0 9px rgba(203,75,55,.22); }
.RefundPolicyPage .RefundWarning small { color:#f08773; font:bold 8px/1 Arial,sans-serif; letter-spacing:1.2px; }
.RefundPolicyPage .RefundWarning h2 { margin:6px 0 8px; color:#ffd3b1; font:bold 18px/1.08 Georgia,serif; text-shadow:0 2px 2px #000; }
.RefundPolicyPage .RefundWarning p { margin:0; color:#c9b6b0; font:10px/1.6 Arial,sans-serif; }

.RefundPolicyPage .RefundBenefits { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.RefundPolicyPage .RefundBenefits > section { display:grid; min-height:125px; padding:17px; grid-template-columns:62px minmax(0,1fr); align-items:center; gap:15px; border:1px solid #765923; background:radial-gradient(circle at 8% 50%,rgba(36,151,204,.18),transparent 23%),linear-gradient(135deg,#082037,#020911 72%); box-shadow:inset 0 0 17px rgba(0,0,0,.48); }
.RefundPolicyPage .RefundBenefitIcon { display:grid; width:50px; height:50px; place-items:center; border:1px solid #d29d39; border-radius:50%; background:radial-gradient(circle,#8c5b13,#2e1903 70%); color:#fff0b0; font:bold 15px/1 Georgia,serif; box-shadow:inset 0 0 9px rgba(255,207,89,.22),0 0 9px rgba(207,147,42,.25); }
.RefundPolicyPage .RefundBenefitIcon.fast { border-color:#3f9cba; background:radial-gradient(circle,#126a92,#05243a 70%); color:#d8f8ff; }
.RefundPolicyPage .RefundBenefits small { color:#60d3f7; font:bold 8px/1 Arial,sans-serif; letter-spacing:1px; }
.RefundPolicyPage .RefundBenefits h2 { margin:6px 0 8px; color:#ffe09a; font:bold 17px/1.08 Georgia,serif; }
.RefundPolicyPage .RefundBenefits p { margin:0; color:#a9bdc8; font:10px/1.55 Arial,sans-serif; }

.RefundPolicyPage .RefundSupport { display:flex; min-height:108px; padding:18px 20px; align-items:center; justify-content:space-between; gap:20px; border:1px solid #315a72; background:linear-gradient(90deg,#08233a,#020a12 72%); }
.RefundPolicyPage .RefundSupport a { display:flex; min-width:175px; min-height:44px; padding:0 15px; align-items:center; justify-content:center; border:1px solid #b17d2c; background:linear-gradient(#125179,#062c49); color:#ffe1a0; font:bold 9px/1 Arial,sans-serif; letter-spacing:.6px; text-decoration:none; box-shadow:inset 0 0 9px rgba(51,181,237,.22); }
.RefundPolicyPage .RefundSupport a span { margin-left:7px; color:#61d9ff; font-size:13px; }
.RefundPolicyPage .RefundSupport a:hover { filter:brightness(1.16); }
.RefundPolicyPage .RefundAgreement { display:flex; min-height:45px; padding:9px 13px; align-items:center; justify-content:center; gap:9px; border:1px solid #426476; background:#030d15; text-align:center; }
.RefundPolicyPage .RefundAgreement span { color:#70dfb0; }
.RefundPolicyPage .RefundAgreement p { margin:0; color:#9fb4bf; font:10px/1.5 Arial,sans-serif; }

@media (max-width:680px) {
    .RefundPolicyPage .RefundPolicyGrid,.RefundPolicyPage .RefundBenefits { grid-template-columns:1fr; }
}
@media (max-width:520px) {
    .RefundPolicyPage .RefundHero { grid-template-columns:52px minmax(0,1fr); }
    .RefundPolicyPage .RefundHeroSeal { grid-column:1/-1; }
    .RefundPolicyPage .RefundIntro { grid-template-columns:42px minmax(0,1fr); }
    .RefundPolicyPage .RefundIntro > span { width:36px; height:36px; }
    .RefundPolicyPage .RefundSupport { align-items:stretch; flex-direction:column; }
    .RefundPolicyPage .RefundSupport a { width:100%; }
}

/* =========================================================
   ADMINISTRATION — secure royal command center
   ========================================================= */
.AdminPage .RoyalDataPageShell::before { content: "ADMIN CONTROL"; }
.LegacyAdminPanel { display: none !important; }

.AdminPage .AdminDashboard {
    display: grid;
    gap: 14px;
    color: #c6d9e5;
}

.AdminPage .AdminHero {
    min-height: 112px;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    background:
        radial-gradient(circle at 9% 50%, rgba(46, 177, 229, .17), transparent 24%),
        radial-gradient(circle at 92% 50%, rgba(199, 139, 38, .13), transparent 25%),
        linear-gradient(110deg, #071a2b, #020912 64%, #171006);
}

.AdminPage .RoyalDataHeroIcon.admin {
    background: radial-gradient(circle at 48% 38%, #187eb0, #082a46 55%, #020912 78%);
    color: #ffdf91;
    font-size: 28px;
    text-shadow: 0 2px 2px #000, 0 0 12px #35c6ff;
}

.AdminPage .AdminAccessSeal {
    display: flex;
    min-width: 116px;
    padding: 12px 13px;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: 1px solid #806127;
    background: linear-gradient(180deg, rgba(24, 50, 67, .8), rgba(3, 12, 20, .92));
    color: #ffe09c;
    font: bold 9px/1 Arial, sans-serif;
    letter-spacing: 1.3px;
    box-shadow: inset 0 0 14px rgba(47, 174, 225, .13);
}
.AdminPage .AdminAccessSeal i {
    display: block;
    width: 10px;
    height: 10px;
    border: 1px solid #77ffc0;
    border-radius: 50%;
    background: #1ed478;
    box-shadow: 0 0 9px #1ed478;
}
.AdminPage .AdminAccessSeal small { color: #5fd5fa; font-size: 7px; letter-spacing: 1px; }

.AdminPage .AdminFeedback {
    padding: 12px 15px;
    border: 1px solid #4c87a9;
    background: linear-gradient(90deg, rgba(8, 50, 75, .82), rgba(4, 14, 23, .94));
    color: #c8e7f6;
    font: 11px/1.5 Arial, sans-serif;
    box-shadow: inset 3px 0 #37c8f6;
}
.AdminPage .AdminFeedback > strong { display: block; margin-bottom: 5px; color: #6cddff; font-size: 8px; letter-spacing: 1.5px; }
.AdminPage .AdminFeedback ul { margin: 0; padding-left: 17px; }

.AdminPage .AdminOverview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}
.AdminPage .AdminOverview article {
    display: flex;
    min-height: 78px;
    padding: 12px 14px;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #315e78;
    border-top-color: #ae7c2d;
    background: linear-gradient(145deg, rgba(10, 38, 57, .96), rgba(2, 11, 19, .98));
    box-shadow: inset 0 0 15px rgba(30, 152, 207, .08), 0 4px 10px rgba(0, 0, 0, .35);
}
.AdminPage .AdminOverview small { color: #5fd6fa; font: bold 7px/1 Arial, sans-serif; letter-spacing: 1.2px; }
.AdminPage .AdminOverview strong { margin: 6px 0 4px; color: #ffe09a; font: bold 18px/1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.AdminPage .AdminOverview span { color: #819aaa; font: 9px/1 Arial, sans-serif; }

.AdminPage .AdminGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.AdminPage .AdminToolCard {
    overflow: hidden;
    border: 1px solid #775722;
    border-radius: 4px;
    background: linear-gradient(145deg, rgba(6, 24, 38, .98), rgba(2, 9, 16, .99));
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .45), 0 7px 14px rgba(0, 0, 0, .42);
}
.AdminPage .AdminToolCard > header {
    display: grid;
    min-height: 62px;
    padding: 0 15px;
    grid-template-columns: 39px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #31536a;
    background: linear-gradient(90deg, rgba(15, 52, 76, .9), rgba(3, 15, 25, .75));
}
.AdminPage .AdminToolCard > header > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #bb8732;
    border-radius: 50%;
    background: radial-gradient(circle, #0b3452, #030b13 72%);
    color: #ffe09a;
    font: bold 15px/34px Georgia, serif;
    box-shadow: inset 0 0 8px rgba(43, 186, 240, .2), 0 0 7px rgba(200, 143, 44, .2);
}
.AdminPage .AdminToolCard header small { color: #57cff5; font: bold 7px/1 Arial, sans-serif; letter-spacing: 1.2px; }
.AdminPage .AdminToolCard h2 { margin: 4px 0 0; color: #ffe09b; font: bold 17px/1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.AdminPage .AdminToolCard > p { min-height: 33px; margin: 0; padding: 12px 15px 2px; color: #8fa8b7; font: 10px/1.45 Arial, sans-serif; }
.AdminPage .AdminToolCard > form { display: grid; padding: 12px 15px 15px; gap: 10px; }
.AdminPage .AdminToolCard label { display: grid; gap: 6px; color: #64d4f7; font: bold 7px/1 Arial, sans-serif; letter-spacing: 1px; }
.AdminPage .AdminToolCard input,
.AdminPage .AdminToolCard select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 39px;
    padding: 0 11px;
    border: 1px solid #315f7c;
    border-radius: 2px;
    outline: 0;
    background: #020e19;
    color: #d9e9f2;
    font: 10px Arial, sans-serif;
    box-shadow: inset 0 0 9px rgba(0, 0, 0, .7);
}
.AdminPage .AdminToolCard input:focus,
.AdminPage .AdminToolCard select:focus { border-color: #d39a3b; box-shadow: 0 0 0 2px rgba(211, 154, 59, .12), inset 0 0 9px #000; }
.AdminPage .AdminToolCard button {
    min-height: 39px;
    padding: 0 15px;
    border: 1px solid #c08a32;
    border-radius: 2px;
    background: linear-gradient(#11669b, #073454 55%, #041b2d);
    color: #ffe5a6;
    font: bold 8px/1 Arial, sans-serif;
    letter-spacing: .8px;
    text-shadow: 0 1px 2px #000;
    box-shadow: inset 0 0 9px rgba(61, 196, 243, .2), 0 3px 7px rgba(0, 0, 0, .5);
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease;
}
.AdminPage .AdminToolCard button:hover { filter: brightness(1.22); transform: translateY(-1px); }
.AdminPage .AdminToolCard.danger { border-color: #814238; }
.AdminPage .AdminToolCard.danger > header { border-bottom-color: #753c34; background: linear-gradient(90deg, rgba(77, 24, 21, .86), rgba(11, 12, 19, .82)); }
.AdminPage .AdminToolCard.danger > header > span { border-color: #bc5d49; color: #ffc0ad; background: radial-gradient(circle, #642b25, #110606 72%); }
.AdminPage .AdminToolCard.danger button { border-color: #b45b47; background: linear-gradient(#8c382c, #4f1713); color: #ffd2c5; }
.AdminPage .AdminToolCard.points { border-color: #3e806b; }
.AdminPage .AdminToolCard.points > header > span { color: #9dffe1; box-shadow: inset 0 0 9px rgba(34, 225, 167, .28); }

.AdminPage .AdminViolationCard,
.AdminPage .AdminTeleportCard { grid-column: 1 / -1; }
.AdminPage .AdminViolationForm { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.AdminPage .AdminViolationForm > label:first-of-type { grid-column: span 2; }
.AdminPage .AdminViolationForm .AdminWideField { grid-column: 1 / -1; }
.AdminPage .AdminTeleportForm { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.AdminPage .AdminTeleportForm button { grid-column: 1 / -1; }
.AdminPage .AdminInlineWarning { margin: 10px 15px 0; padding: 9px 11px; border: 1px solid #83463b; background: rgba(91, 30, 25, .35); color: #ffb49f; font: 9px/1.4 Arial, sans-serif; }

@media (max-width: 780px) {
    .AdminPage .AdminHero { grid-template-columns: 58px minmax(0, 1fr); }
    .AdminPage .AdminAccessSeal { grid-column: 1 / -1; min-width: 0; flex-direction: row; justify-content: center; }
    .AdminPage .AdminOverview, .AdminPage .AdminGrid { grid-template-columns: 1fr; }
    .AdminPage .AdminViolationCard, .AdminPage .AdminTeleportCard { grid-column: auto; }
    .AdminPage .AdminViolationForm, .AdminPage .AdminTeleportForm { grid-template-columns: 1fr 1fr; }
    .AdminPage .AdminViolationForm > label:first-of-type { grid-column: auto; }
}

@media (max-width: 520px) {
    .AdminPage .AdminOverview,
    .AdminPage .AdminViolationForm,
    .AdminPage .AdminTeleportForm { grid-template-columns: 1fr; }
    .AdminPage .AdminViolationForm .AdminWideField,
    .AdminPage .AdminTeleportForm button { grid-column: auto; }
}

/* Index news readability pass. */
.IndexPage .HomeFeaturedBox .featured-ice { padding: 23px; }
.IndexPage .HomeFeaturedBox .featured-ice .featured-badge { padding: 6px 11px; font-size: 10px; }
.IndexPage .HomeFeaturedBox .featured-ice .featured-title { margin: 9px 0; font-size: 22px; line-height: 1.3; }
.IndexPage .HomeFeaturedBox .featured-ice .featured-line { font-size: 13px; line-height: 1.6; }

.IndexPage .HomeNewsBox .NewsPortal { gap: 18px; }
.IndexPage .HomeNewsBox .NewsPortalHero { min-height: 145px; padding: 22px 24px; grid-template-columns: 82px minmax(0,1fr) 108px; gap: 18px; }
.IndexPage .HomeNewsBox .NewsPortalHero .RoyalDataHeroIcon { width: 70px; height: 70px; font-size: 32px; }
.IndexPage .HomeNewsBox .NewsPortalHero div > small { font-size: 10px; letter-spacing: 2px; }
.IndexPage .HomeNewsBox .NewsPortalHero h1 { margin: 8px 0; font-size: 31px; }
.IndexPage .HomeNewsBox .NewsPortalHero p { font-size: 14px; line-height: 1.55; }
.IndexPage .HomeNewsBox .NewsPortalStats { min-height: 86px; }
.IndexPage .HomeNewsBox .NewsPortalStats strong { font-size: 31px; }
.IndexPage .HomeNewsBox .NewsPortalStats small { font-size: 8px; }
.IndexPage .HomeNewsBox .NewsPortalStats time { font-size: 9px; }

.IndexPage .HomeNewsBox .NewsPatchRibbon > header { min-height: 64px; padding: 0 16px; grid-template-columns: 32px minmax(0,1fr) auto; gap: 11px; }
.IndexPage .HomeNewsBox .NewsPatchRibbon > header > span { font-size: 22px; }
.IndexPage .HomeNewsBox .NewsPatchRibbon header small { font-size: 9px; letter-spacing: 1.3px; }
.IndexPage .HomeNewsBox .NewsPatchRibbon header strong { margin-top: 6px; font-size: 17px; }
.IndexPage .HomeNewsBox .NewsPatchRibbon header a { padding: 10px 13px; font-size: 8px; }
.IndexPage .HomeNewsBox .NewsPatchRibbon article { min-height: 64px; padding: 12px 14px; grid-template-columns: 55px minmax(0,1fr); gap: 10px; }
.IndexPage .HomeNewsBox .NewsPatchRibbon article time { font-size: 9px; }
.IndexPage .HomeNewsBox .NewsPatchRibbon article p { font-size: 11px; line-height: 1.5; }

.IndexPage .HomeNewsBox .NewsArticleHeader { min-height: 112px; padding: 0 19px; grid-template-columns: 67px minmax(0,1fr) 30px; gap: 15px; }
.IndexPage .HomeNewsBox .NewsArticleCrest > span { width: 55px; height: 55px; font-size: 24px; }
.IndexPage .HomeNewsBox .NewsArticleBadges { gap: 8px; }
.IndexPage .HomeNewsBox .NewsArticleBadges span,.IndexPage .HomeNewsBox .NewsArticleBadges b { padding: 7px 9px; font-size: 9px; letter-spacing: 1px; }
.IndexPage .HomeNewsBox .NewsArticleHeading h2 { margin: 10px 0 8px; font-size: 26px; line-height: 1.15; }
.IndexPage .HomeNewsBox .NewsArticleHeading > p { gap: 9px; font-size: 10px; line-height: 1.4; }
.IndexPage .HomeNewsBox .NewsArticleHeading > p i { width: 5px; height: 5px; }
.IndexPage .HomeNewsBox .NewsArticleAnchor { width: 28px; height: 28px; font-size: 11px; }
.IndexPage .HomeNewsBox .NewsArticleBody { padding: 24px; font-size: 14px; line-height: 1.75; }
.IndexPage .HomeNewsBox .NewsArticleFooter { min-height: 52px; padding: 0 18px; }
.IndexPage .HomeNewsBox .NewsArticleFooter span,.IndexPage .HomeNewsBox .NewsArticleFooter a { font-size: 8px; }

@media (max-width: 540px) {
    .IndexPage .HomeFeaturedBox .featured-ice .featured-title { font-size: 19px; }
    .IndexPage .HomeFeaturedBox .featured-ice .featured-line { font-size: 11px; }
    .IndexPage .HomeNewsBox .NewsPortalHero { padding: 17px; grid-template-columns: 52px minmax(0,1fr); gap: 12px; }
    .IndexPage .HomeNewsBox .NewsPortalHero .RoyalDataHeroIcon { width: 47px; height: 47px; font-size: 22px; }
    .IndexPage .HomeNewsBox .NewsPortalHero h1 { font-size: 25px; }
    .IndexPage .HomeNewsBox .NewsPortalHero p { font-size: 12px; }
    .IndexPage .HomeNewsBox .NewsPortalStats { grid-column: 1 / -1; }
    .IndexPage .HomeNewsBox .NewsArticleHeader { min-height: 96px; padding: 12px; grid-template-columns: 46px minmax(0,1fr); gap: 11px; }
    .IndexPage .HomeNewsBox .NewsArticleCrest > span { width: 40px; height: 40px; font-size: 18px; }
    .IndexPage .HomeNewsBox .NewsArticleHeading h2 { font-size: 21px; }
    .IndexPage .HomeNewsBox .NewsArticleHeading > p { flex-wrap: wrap; font-size: 9px; }
    .IndexPage .HomeNewsBox .NewsArticleBody { padding: 16px; font-size: 12px; }
}

/* Changelog readability pass. */
.ChangelogPage .ChangelogDashboard { gap: 18px; }
.ChangelogPage .ChangelogHero { min-height: 150px; padding: 22px 24px; grid-template-columns: 82px minmax(0,1fr) 112px; gap: 18px; }
.ChangelogPage .ChangelogHero .RoyalDataHeroIcon { width: 70px; height: 70px; font-size: 32px; }
.ChangelogPage .ChangelogHero div > small { font-size: 10px; letter-spacing: 2px; }
.ChangelogPage .ChangelogHero h1 { margin: 8px 0; font-size: 31px; }
.ChangelogPage .ChangelogHero p { font-size: 14px; line-height: 1.55; }
.ChangelogPage .ChangelogCounter { min-height: 86px; }
.ChangelogPage .ChangelogCounter strong { font-size: 31px; }
.ChangelogPage .ChangelogCounter small { font-size: 9px; }

.ChangelogPage .ChangelogComposer > header { min-height: 86px; padding: 0 19px; grid-template-columns: 48px minmax(0,1fr) auto; gap: 14px; }
.ChangelogPage .ChangelogComposer > header > span { width: 40px; height: 40px; font-size: 19px; }
.ChangelogPage .ChangelogComposer header small { font-size: 9px; letter-spacing: 1.4px; }
.ChangelogPage .ChangelogComposer h2 { margin-top: 7px; font-size: 21px; }
.ChangelogPage .ChangelogComposerToggle { min-height: 44px; padding: 0 16px; font-size: 9px; }
.ChangelogPage .ChangelogComposerForm { padding: 18px; gap: 14px; }
.ChangelogPage .ChangelogComposerForm label { gap: 8px; font-size: 9px; }
.ChangelogPage .ChangelogComposerForm input[type="text"],.ChangelogPage .ChangelogComposerForm input[type="datetime-local"],.ChangelogPage .ChangelogComposerForm select,.ChangelogPage .ChangelogComposerForm textarea { font-size: 12px; }
.ChangelogPage .ChangelogComposerForm input[type="text"],.ChangelogPage .ChangelogComposerForm input[type="datetime-local"],.ChangelogPage .ChangelogComposerForm select { height: 45px; }
.ChangelogPage .ChangelogComposerForm textarea { min-height: 130px; line-height: 1.6; }
.ChangelogPage .ChangelogComposerForm label.wide > small { font-size: 8px; }
.ChangelogPage .ChangelogImageField input[type="file"] { min-height: 54px; font-size: 11px; }
.ChangelogPage .ChangelogImageField input[type="file"]::file-selector-button { font-size: 9px; }
.ChangelogPage .ChangelogFeatured strong { font-size: 10px; }
.ChangelogPage .ChangelogFeatured small { font-size: 9px; }
.ChangelogPage .ChangelogComposerActions button,.ChangelogPage .ChangelogComposerActions a { font-size: 10px; }

.ChangelogPage .ChangelogFilters { padding: 9px; gap: 8px; }
.ChangelogPage .ChangelogFilters a { min-height: 50px; padding: 0 9px; gap: 8px; font-size: 9px; line-height: 1.25; }
.ChangelogPage .ChangelogFilters a span { font-size: 15px; }

.ChangelogPage .ChangelogTimeline { gap: 16px; }
.ChangelogPage .ChangelogEntry { grid-template-columns: 58px minmax(0,1fr); }
.ChangelogPage .ChangelogRail > span { width: 43px; height: 43px; font-size: 18px; }
.ChangelogPage .ChangelogRail::after { top: 48px; }
.ChangelogPage .ChangelogCard > header { min-height: 58px; padding: 0 16px; }
.ChangelogPage .ChangelogMeta { gap: 9px; }
.ChangelogPage .ChangelogMeta span,.ChangelogPage .ChangelogMeta b,.ChangelogPage .ChangelogMeta em { padding: 7px 9px; font-size: 9px; }
.ChangelogPage .ChangelogCard time { font-size: 10px; }
.ChangelogPage .ChangelogCard h2 { padding: 18px 18px 9px; font-size: 25px; }
.ChangelogPage .ChangelogReleaseImage { margin: 10px 18px 8px; }
.ChangelogPage .ChangelogCard > p { min-height: 50px; padding: 6px 18px 18px; font-size: 14px; line-height: 1.7; }
.ChangelogPage .ChangelogCard > footer { min-height: 50px; padding: 0 16px; }
.ChangelogPage .ChangelogCard > footer > span { font-size: 9px; }
.ChangelogPage .ChangelogCard > footer a,.ChangelogPage .ChangelogCard > footer button { padding: 8px 11px; font-size: 8px; }

@media (max-width: 540px) {
    .ChangelogPage .ChangelogHero { padding: 17px; grid-template-columns: 52px minmax(0,1fr); gap: 12px; }
    .ChangelogPage .ChangelogHero .RoyalDataHeroIcon { width: 47px; height: 47px; font-size: 22px; }
    .ChangelogPage .ChangelogHero h1 { font-size: 25px; }
    .ChangelogPage .ChangelogHero p { font-size: 12px; }
    .ChangelogPage .ChangelogCounter { grid-column: 1 / -1; }
    .ChangelogPage .ChangelogComposer > header { grid-template-columns: 42px minmax(0,1fr); padding: 12px; }
    .ChangelogPage .ChangelogComposer h2 { font-size: 19px; }
    .ChangelogPage .ChangelogComposerToggle { grid-column: 1 / -1; }
    .ChangelogPage .ChangelogFilters { grid-template-columns: 1fr 1fr; }
    .ChangelogPage .ChangelogEntry { grid-template-columns: 42px minmax(0,1fr); }
    .ChangelogPage .ChangelogRail > span { width: 33px; height: 33px; font-size: 14px; }
    .ChangelogPage .ChangelogCard > header { align-items: flex-start; flex-direction: column; padding-top: 11px; padding-bottom: 11px; }
    .ChangelogPage .ChangelogCard h2 { font-size: 21px; }
    .ChangelogPage .ChangelogCard > p { font-size: 12px; }
}

/* =========================================================
   COMMUNITY FORUM — royal discussion board
   ========================================================= */
.ForumPage .RoyalDataPageShell::before { content: "COMMUNITY FORUM"; }
.ForumPage .ForumPortal { display:grid; gap:16px; color:#bfd2de; font-family:Arial,sans-serif; }
.ForumPage .ForumHero { min-height:145px; padding:22px 24px; grid-template-columns:82px minmax(0,1fr) 112px; gap:18px; background:radial-gradient(circle at 12% 50%,rgba(38,176,229,.23),transparent 27%),radial-gradient(circle at 91% 50%,rgba(210,148,40,.17),transparent 25%),linear-gradient(110deg,#071e31,#020a13 64%,#191105); }
.ForumPage .RoyalDataHeroIcon.forum { width:70px; height:70px; background:radial-gradient(circle at 48% 38%,#188fc0,#073450 58%,#020912 78%); color:#ffe09a; font-size:30px; text-shadow:0 2px 2px #000,0 0 12px #42cfff; }
.ForumPage .ForumHero div > small { font-size:10px; letter-spacing:2px; }
.ForumPage .ForumHero h1 { margin:8px 0; font-size:31px; }
.ForumPage .ForumHero p { font-size:14px; line-height:1.55; }
.ForumPage .ForumIdentity { display:flex; min-height:86px; padding:8px; flex-direction:column; align-items:center; justify-content:center; border:1px solid #8e6627; background:rgba(4,18,29,.88); box-shadow:inset 0 0 14px rgba(50,183,232,.14); text-align:center; }
.ForumPage .ForumIdentity strong { color:#62d9ff; font:bold 31px/1 Georgia,serif; text-shadow:0 0 8px #157fb0; }
.ForumPage .ForumIdentity small { margin-top:7px; color:#e6c478; font:bold 9px/1 Arial,sans-serif; letter-spacing:1px; }

.ForumPage .ForumQuickNav { display:grid; padding:9px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; border:1px solid #315c76; background:rgba(2,11,19,.96); }
.ForumPage .ForumQuickNav a { display:flex; min-height:48px; padding:0 10px; align-items:center; justify-content:center; gap:8px; border:1px solid #244b62; background:#061522; color:#a8becb; font:bold 9px/1 Arial,sans-serif; letter-spacing:.5px; text-align:center; text-decoration:none; transition:border-color .18s,color .18s,background .18s,transform .18s; }
.ForumPage .ForumQuickNav a span { color:#60d5fa; font-size:15px; }
.ForumPage .ForumQuickNav a:hover,.ForumPage .ForumQuickNav a.active { border-color:#bc8530; background:linear-gradient(#0d4163,#061b2b); color:#ffe09a; transform:translateY(-1px); }

.ForumPage .ForumPortal > h1,.ForumPage .ForumPortal > h2 { margin:0; padding:16px 18px; border:1px solid #805d27; background:linear-gradient(90deg,#0b2b45,#030c15 75%); color:#ffe09a; font:bold 23px/1.2 Georgia,serif; text-shadow:0 2px 2px #000; }
.ForumPage .ForumPortal > h1 a,.ForumPage .ForumPortal > h2 a { color:#64d7fb; text-decoration:none; }
.ForumPage .ForumPortal > p { margin:0; padding:14px 16px; border:1px solid #31566d; background:#030d16; color:#a9bfcb; font:12px/1.6 Arial,sans-serif; }
.ForumPage .ForumPortal > font { display:block; padding:11px 14px; border:1px solid #31566d; background:#051827; color:#8ea8b6; font:11px/1.5 Arial,sans-serif; }
.ForumPage .ForumPortal > font a { color:#62d6fb; }
.ForumPage #ThreadTitle { display:block; padding:16px 18px; border:1px solid #916727; background:linear-gradient(90deg,#0a2a43,#030b13 75%); font:24px/1.2 Georgia,serif; }
.ForumPage #ThreadTitle a { color:#ffe09a; text-decoration:none; }

.ForumPage .ForumPortal table.znoteTable { width:100% !important; margin:0; border:1px solid #7d5c28; border-collapse:separate; border-spacing:0; border-radius:3px; overflow:hidden; background:linear-gradient(145deg,#071b2a,#020911); box-shadow:inset 0 0 18px rgba(0,0,0,.45),0 6px 13px rgba(0,0,0,.42); color:#bdd1dc; }
.ForumPage .ForumPortal table.znoteTable tr.yellow th { min-height:50px; padding:15px 17px; border:0; border-bottom:1px solid #8a6327; background:radial-gradient(circle at 50% 130%,rgba(20,126,187,.28),transparent 52%),linear-gradient(90deg,#0a2b44,#061522,#0a2b44); color:#ffe09a; font:bold 15px/1.2 Georgia,serif; letter-spacing:.4px; text-align:left; text-shadow:0 2px 2px #000; }
.ForumPage .ForumPortal table.znoteTable td { padding:14px 17px; border:0; border-bottom:1px solid #24475b; background:rgba(3,15,24,.82); color:#b8ccd7; font:12px/1.55 Arial,sans-serif; }
.ForumPage .ForumPortal table.znoteTable tr:last-child td { border-bottom:0; }
.ForumPage .ForumPortal table.znoteTable tr.special td { cursor:pointer; transition:background .18s,color .18s,box-shadow .18s; }
.ForumPage .ForumPortal table.znoteTable tr.special:hover td { background:linear-gradient(90deg,rgba(14,62,91,.9),rgba(5,24,38,.92)); color:#ffe09a; box-shadow:inset 3px 0 #d19a39; }
.ForumPage .ForumPortal table.znoteTable a { color:#63d7fb; text-decoration:none; }
.ForumPage .ForumPortal table.znoteTable a:hover { color:#ffe09a; }
.ForumPage #forumCategoryTable td:first-child,.ForumPage #forumThreadTable td:first-child { font:bold 13px/1.45 Georgia,serif; color:#d6e6ef; }

.ForumPage .ThreadTable tr.yellow th { font-family:Arial,sans-serif !important; font-size:11px !important; color:#9fb8c6 !important; }
.ForumPage .ThreadTable td.avatar { width:145px; padding:16px 12px !important; border-right:1px solid #765724 !important; background:radial-gradient(circle at 50% 25%,rgba(27,135,191,.18),transparent 42%),#04111d !important; color:#8da8b7; text-align:center; }
.ForumPage .ThreadTable td.avatar a { display:block; color:#ffe09a; font:bold 14px Georgia,serif; }
.ForumPage .ThreadTable td.avatar img { display:block; max-width:100px; max-height:110px; margin:10px auto; object-fit:contain; filter:drop-shadow(0 6px 5px rgba(0,0,0,.72)); }
.ForumPage .ThreadTable td > p { min-height:75px; margin:0; color:#c1d3dd; font:13px/1.75 Arial,sans-serif; overflow-wrap:anywhere; }
.ForumPage .ThreadTable td > p img { display:block; box-sizing:border-box; max-width:100%; height:auto; margin:14px auto; padding:4px; border:1px solid #8a652a; background:#01070c; }
.ForumPage .bighr { height:1px; margin:2px 0; border:0; background:linear-gradient(90deg,transparent,#317392,#b07c2d,#317392,transparent); }

.ForumPage .ForumPortal input[type="text"],.ForumPage .ForumPortal textarea,.ForumPage .ForumPortal select { box-sizing:border-box; max-width:100%; border:1px solid #386b87; border-radius:2px; outline:0; background:#020d17; color:#d6e8f2; font:12px Arial,sans-serif; box-shadow:inset 0 0 9px rgba(0,0,0,.7); }
.ForumPage .ForumPortal input[type="text"],.ForumPage .ForumPortal select { min-height:42px; padding:0 11px; }
.ForumPage .ForumPortal select[multiple] { min-width:180px; min-height:72px; padding:7px; }
.ForumPage .ForumPortal textarea { width:100% !important; min-height:190px; padding:12px; resize:vertical; line-height:1.65; }
.ForumPage .ForumPortal input:focus,.ForumPage .ForumPortal textarea:focus,.ForumPage .ForumPortal select:focus { border-color:#d19a39; box-shadow:0 0 0 2px rgba(209,154,57,.12),inset 0 0 9px #000; }
.ForumPage .ForumPortal > form,.ForumPage .ForumPortal > h1 + form,.ForumPage .ForumPortal > h2 + form { padding:17px; border:1px solid #315970; background:linear-gradient(145deg,rgba(7,28,43,.98),rgba(2,9,16,.99)); color:#a9bdc8; font:12px/1.6 Arial,sans-serif; }
.ForumPage .ForumPortal form p { max-width:100% !important; height:auto !important; padding:12px !important; border:1px solid #31566d !important; background:#03111d; color:#93aab7; font-size:11px !important; line-height:1.6; }

.ForumPage .ForumPortal .btn,.ForumPage .ForumPortal input[type="submit"],.ForumPage .ForumPortal button { box-sizing:border-box; min-height:38px; padding:0 14px !important; border:1px solid #a9782b; border-radius:2px; background:linear-gradient(#126b9b,#063351); color:#ffe2a0; font:bold 9px/1 Arial,sans-serif; letter-spacing:.4px; cursor:pointer; box-shadow:inset 0 0 8px rgba(53,193,239,.2); }
.ForumPage .ForumPortal .btn:hover,.ForumPage .ForumPortal input[type="submit"]:hover,.ForumPage .ForumPortal button:hover { filter:brightness(1.17); }
.ForumPage .ForumPortal .btn-danger,.ForumPage .ForumPortal input.btn-danger { border-color:#9f4b3e; background:linear-gradient(#8c382d,#451511); color:#ffd0c4; }
.ForumPage .ForumPortal .btn-warning,.ForumPage .ForumPortal input.btn-warning { background:linear-gradient(#a36d19,#583604); color:#fff0b1; }
.ForumPage .ForumPortal .btn-success,.ForumPage .ForumPortal input.btn-success { border-color:#3a8e69; background:linear-gradient(#27835e,#10432f); color:#d8ffeb; }
.ForumPage .adminTable,.ForumPage .editThread { width:100%; margin:0; padding:8px; border:1px solid #765823; background:#030d15; }
.ForumPage .adminTable td,.ForumPage .editThread td { padding:6px; text-align:center; }
.ForumPage .adminTable form,.ForumPage .editThread form,.ForumPage .postButton { margin:0; }
.ForumPage .postButton { display:inline-block; margin:0 7px 9px 0; }
.ForumPage .updateTable { width:100%; border:1px solid #765823; background:#030d15; }
.ForumPage .updateTable td { padding:9px; color:#a9bdc8; font-size:11px; }
.ForumPage .forumCooldown { display:block; padding:13px; border:1px solid #97493d; background:#260d0a; color:#ffad98 !important; font:12px/1.5 Arial,sans-serif; }

@media (max-width:700px) {
    .ForumPage .ForumQuickNav { grid-template-columns:1fr 1fr; }
    .ForumPage .ForumHero { grid-template-columns:64px minmax(0,1fr); }
    .ForumPage .ForumIdentity { grid-column:1/-1; }
}
@media (max-width:520px) {
    .ForumPage .ForumHero { padding:17px; grid-template-columns:52px minmax(0,1fr); gap:12px; }
    .ForumPage .ForumHero .RoyalDataHeroIcon { width:47px; height:47px; font-size:22px; }
    .ForumPage .ForumHero h1 { font-size:25px; }
    .ForumPage .ForumHero p { font-size:12px; }
    .ForumPage .ForumQuickNav { grid-template-columns:1fr; }
    .ForumPage .ForumPortal table.znoteTable tr.yellow th,.ForumPage .ForumPortal table.znoteTable td { padding:11px 9px; }
    .ForumPage .ThreadTable td.avatar { width:95px; }
    .ForumPage .ThreadTable td.avatar img { max-width:75px; }
}

/* =========================================================
   ONLINE ROSTER — live realm population
   ========================================================= */
.OnlineListPage .RoyalDataPageShell::before { content:"PLAYERS ONLINE"; }
.OnlineListPage .OnlineRoster { display:grid; gap:18px; color:#bfd2de; font-family:Arial,sans-serif; }
.OnlineListPage .OnlineRosterHero { min-height:150px; padding:22px 24px; grid-template-columns:82px minmax(0,1fr) 116px; gap:18px; background:radial-gradient(circle at 12% 50%,rgba(37,177,230,.24),transparent 27%),radial-gradient(circle at 91% 50%,rgba(36,194,125,.12),transparent 25%),linear-gradient(110deg,#071f33,#020a13 65%,#061b13); }
.OnlineListPage .RoyalDataHeroIcon.online { width:70px; height:70px; background:radial-gradient(circle at 48% 38%,#168ebf,#073450 58%,#020912 78%); color:#ffe09a; font-size:31px; text-shadow:0 2px 2px #000,0 0 12px #42cfff; }
.OnlineListPage .OnlineRosterHero div > small { font-size:10px; letter-spacing:2px; }
.OnlineListPage .OnlineRosterHero h1 { margin:8px 0; font-size:31px; }
.OnlineListPage .OnlineRosterHero p { font-size:14px; line-height:1.55; }
.OnlineListPage .OnlineRosterPulse { position:relative; display:flex; min-height:88px; padding:9px; flex-direction:column; align-items:center; justify-content:center; border:1px solid #438b68; background:rgba(3,22,20,.9); box-shadow:inset 0 0 15px rgba(35,205,137,.13); text-align:center; }
.OnlineListPage .OnlineRosterPulse > i { position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:#27df8a; box-shadow:0 0 8px #27df8a; animation:onlineRosterPulse 1.7s ease-in-out infinite; }
.OnlineListPage .OnlineRosterPulse strong { color:#69e2ff; font:bold 32px/1 Georgia,serif; text-shadow:0 0 9px #137fae; }
.OnlineListPage .OnlineRosterPulse small { margin-top:7px; color:#8cf1c1; font:bold 9px/1 Arial,sans-serif; letter-spacing:1px; }
@keyframes onlineRosterPulse { 50% { opacity:.38; transform:scale(.75); } }

.OnlineListPage .OnlineRosterStats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.OnlineListPage .OnlineRosterStats article { display:grid; min-height:105px; padding:15px; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:13px; border:1px solid #315970; background:radial-gradient(circle at 10% 50%,rgba(27,139,195,.18),transparent 25%),linear-gradient(135deg,#082238,#020a12 72%); box-shadow:inset 0 0 16px rgba(0,0,0,.46),0 5px 11px rgba(0,0,0,.38); }
.OnlineListPage .OnlineRosterStats article > span { display:grid; width:41px; height:41px; place-items:center; border:1px solid #bd8730; border-radius:50%; background:radial-gradient(circle,#0f5b82,#041522 70%); color:#ffe09a; font-size:17px; box-shadow:inset 0 0 8px rgba(53,190,240,.22),0 0 8px rgba(194,139,44,.22); }
.OnlineListPage .OnlineRosterStats small { color:#62d5fa; font:bold 8px/1 Arial,sans-serif; letter-spacing:1px; }
.OnlineListPage .OnlineRosterStats strong { display:block; margin:6px 0 4px; color:#ffe09a; font:bold 23px/1 Georgia,serif; text-shadow:0 2px 2px #000; }
.OnlineListPage .OnlineRosterStats p { margin:0; color:#829ba9; font:10px/1.4 Arial,sans-serif; }

.OnlineListPage .OnlineRosterPanel { overflow:hidden; border:1px solid #8e6729; background:linear-gradient(145deg,#061a29,#020911); box-shadow:inset 0 0 20px rgba(0,0,0,.5),0 8px 16px rgba(0,0,0,.46); }
.OnlineListPage .OnlineRosterPanel > header { display:flex; min-height:74px; padding:0 18px; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid #8a6327; background:radial-gradient(circle at 20% 120%,rgba(26,135,193,.28),transparent 44%),linear-gradient(90deg,#0b2d47,#04111c 72%); }
.OnlineListPage .OnlineRosterPanel > header small { color:#62d7fb; font:bold 8px/1 Arial,sans-serif; letter-spacing:1.3px; }
.OnlineListPage .OnlineRosterPanel > header h2 { margin:7px 0 0; color:#ffe09a; font:bold 22px/1 Georgia,serif; text-shadow:0 2px 2px #000; }
.OnlineListPage .OnlineRosterPanel > header > span { display:flex; align-items:center; gap:7px; color:#7893a1; font:bold 8px/1 Arial,sans-serif; letter-spacing:.6px; }
.OnlineListPage .OnlineRosterPanel > header > span i { width:7px; height:7px; border-radius:50%; background:#26dc88; box-shadow:0 0 7px #26dc88; }
.OnlineListPage .OnlineRosterTableWrap { overflow-x:auto; }
.OnlineListPage .OnlineRosterTable { width:100%; margin:0; border:0; border-collapse:collapse; background:#030c14; }
.OnlineListPage .OnlineRosterTable th { padding:14px 13px; border:0; border-bottom:1px solid #31576d; background:#061725; color:#64d6fa; font:bold 9px/1 Arial,sans-serif; letter-spacing:1px; text-align:left; }
.OnlineListPage .OnlineRosterTable th:first-child,.OnlineListPage .OnlineRosterTable td:first-child { text-align:center; }
.OnlineListPage .OnlineRosterTable td { height:78px; padding:11px 13px; border:0; border-bottom:1px solid #203f52; background:rgba(4,16,26,.78); color:#aec4d0; font:12px/1.45 Arial,sans-serif; vertical-align:middle; }
.OnlineListPage .OnlineRosterTable tr:last-child td { border-bottom:0; }
.OnlineListPage .OnlinePlayerRow { cursor:pointer; outline:0; transition:filter .18s; }
.OnlineListPage .OnlinePlayerRow:hover td,.OnlineListPage .OnlinePlayerRow:focus td { background:linear-gradient(90deg,rgba(13,57,84,.92),rgba(4,20,32,.92)); }
.OnlineListPage .OnlinePlayerRow:hover td:first-child,.OnlineListPage .OnlinePlayerRow:focus td:first-child { box-shadow:inset 3px 0 #cf9837; }
.OnlineListPage .OnlineOutfit { width:90px; }
.OnlineListPage .OnlineOutfit > span { display:grid; width:58px; height:58px; margin:auto; place-items:center; border:1px solid #3c718d; border-radius:50%; background:radial-gradient(circle,#0b3049,#020b13 72%); box-shadow:inset 0 0 10px rgba(45,171,224,.2),0 0 8px rgba(0,0,0,.5); }
.OnlineListPage .OnlineOutfit img { display:block; max-width:64px; max-height:64px; object-fit:contain; filter:drop-shadow(0 4px 3px rgba(0,0,0,.75)); }
.OnlineListPage .OnlinePlayerName > div { display:flex; align-items:center; gap:10px; }
.OnlineListPage .OnlinePlayerName > div > img { width:20px; height:auto; border:1px solid #6e5830; }
.OnlineListPage .OnlinePlayerName span { display:grid; gap:5px; }
.OnlineListPage .OnlinePlayerName a { color:#ffe09a; font:bold 15px/1 Georgia,serif; text-decoration:none; }
.OnlineListPage .OnlinePlayerName a:hover { color:#65d9ff; }
.OnlineListPage .OnlinePlayerName small { color:#718b99; font:bold 8px/1 Arial,sans-serif; letter-spacing:.5px; }
.OnlineListPage .OnlineGuild { color:#63d4f8; font:bold 11px/1.3 Arial,sans-serif; text-decoration:none; }
.OnlineListPage .OnlineGuild:hover { color:#ffe09a; }
.OnlineListPage .OnlineIndependent { color:#657f8e; font-style:italic; }
.OnlineListPage .OnlineLevel { display:inline-flex; min-width:55px; min-height:29px; padding:0 8px; align-items:center; justify-content:center; border:1px solid #806027; background:#181103; color:#f2cd7c; font:bold 12px/1 Georgia,serif; }
.OnlineListPage .OnlineVocation { display:inline-flex; padding:7px 10px; border:1px solid #315e77; background:#061a29; color:#a9c9da; font:bold 10px/1 Arial,sans-serif; }
.OnlineListPage .OnlineStatus { display:inline-flex; min-height:29px; padding:0 10px; align-items:center; gap:7px; border:1px solid #347c5e; background:#06251b; color:#7aebba; font:bold 9px/1 Arial,sans-serif; letter-spacing:.5px; }
.OnlineListPage .OnlineStatus i { width:7px; height:7px; border-radius:50%; background:#29dd8a; box-shadow:0 0 6px #29dd8a; }

.OnlineListPage .OnlineRosterEmpty { display:grid; min-height:330px; padding:35px 20px; place-items:center; align-content:center; gap:10px; border:1px solid #805f28; background:radial-gradient(circle at 50% 35%,rgba(27,133,190,.17),transparent 28%),linear-gradient(#061725,#020911); text-align:center; }
.OnlineListPage .OnlineRosterEmpty > span { display:grid; width:70px; height:70px; place-items:center; border:1px solid #bd8730; border-radius:50%; background:#061b2b; color:#5fd8fc; font-size:31px; box-shadow:inset 0 0 13px rgba(42,174,225,.25); }
.OnlineListPage .OnlineRosterEmpty small { color:#62d7fb; font:bold 9px/1 Arial,sans-serif; letter-spacing:1.5px; }
.OnlineListPage .OnlineRosterEmpty h2 { margin:4px 0; color:#ffe09a; font:bold 25px/1 Georgia,serif; }
.OnlineListPage .OnlineRosterEmpty p { max-width:440px; margin:0; color:#8fa7b4; font:12px/1.6 Arial,sans-serif; }
.OnlineListPage .OnlineRosterEmpty a { display:flex; min-height:42px; margin-top:8px; padding:0 16px; align-items:center; border:1px solid #a8782b; background:linear-gradient(#116491,#062e49); color:#ffe09a; font:bold 9px/1 Arial,sans-serif; text-decoration:none; }
.OnlineListPage .OnlineRosterEmpty a b { margin-left:7px; color:#64d8fb; font-size:14px; }

@media (max-width:760px) {
    .OnlineListPage .OnlineRosterHero { grid-template-columns:64px minmax(0,1fr); }
    .OnlineListPage .OnlineRosterPulse { grid-column:1/-1; }
    .OnlineListPage .OnlineRosterStats { grid-template-columns:1fr; }
}
@media (max-width:600px) {
    .OnlineListPage .OnlineRosterPanel > header { align-items:flex-start; flex-direction:column; padding-top:14px; padding-bottom:14px; }
    .OnlineListPage .OnlineRosterTable thead { display:none; }
    .OnlineListPage .OnlineRosterTable,.OnlineListPage .OnlineRosterTable tbody,.OnlineListPage .OnlineRosterTable tr,.OnlineListPage .OnlineRosterTable td { display:block; width:100%; box-sizing:border-box; }
    .OnlineListPage .OnlineRosterTable tr { display:grid; padding:12px; grid-template-columns:80px 1fr; border-bottom:1px solid #8a6327; }
    .OnlineListPage .OnlineRosterTable td { display:flex; height:auto; min-height:42px; padding:8px 10px; align-items:center; justify-content:space-between; border-bottom:1px solid #203f52; text-align:right !important; }
    .OnlineListPage .OnlineRosterTable td::before { content:attr(data-label); margin-right:12px; color:#5ed4f8; font:bold 8px Arial,sans-serif; letter-spacing:.8px; }
    .OnlineListPage .OnlineOutfit { grid-row:span 5; width:auto !important; justify-content:center !important; flex-direction:column; }
    .OnlineListPage .OnlinePlayerName,.OnlineListPage .OnlineRosterTable td:not(.OnlineOutfit) { grid-column:2; }
}
@media (max-width:520px) {
    .OnlineListPage .OnlineRosterHero { padding:17px; grid-template-columns:52px minmax(0,1fr); gap:12px; }
    .OnlineListPage .OnlineRosterHero .RoyalDataHeroIcon { width:47px; height:47px; font-size:22px; }
    .OnlineListPage .OnlineRosterHero h1 { font-size:25px; }
    .OnlineListPage .OnlineRosterHero p { font-size:12px; }
}

/* The external outfit renderer uses a 64px canvas with the sprite anchored bottom-right. */
.OnlineListPage .OnlineOutfit > span { width:64px; height:64px; overflow:hidden; }
.OnlineListPage .OnlineOutfit img {
    width:64px;
    max-width:none;
    height:64px;
    max-height:none;
    transform:translate(-14px,-13px) scale(1.2);
    transform-origin:center;
    image-rendering:pixelated;
}

/* =========================================================
   PAYPAL STORE — automatic royal checkout
   ========================================================= */
.PayPalStorePage .RoyalDataPageShell::before { content: "PAYPAL STORE"; }
.PayPalStorePage .pp-store,
.PayPalStorePage .pp-store * { box-sizing: border-box; }
.PayPalStorePage .pp-store { display: grid; color: #c3d7e3; font-family: Arial, sans-serif; }
.PayPalStorePage .pp-hero {
    position: relative;
    min-height: 225px;
    padding: 32px 285px 27px 29px;
    overflow: hidden;
    border: 1px solid #9c6e29;
    border-radius: 4px 4px 0 0;
    background:
        radial-gradient(circle at 84% 40%, rgba(38, 177, 229, .23), transparent 30%),
        radial-gradient(circle at 3% 10%, rgba(205, 140, 32, .15), transparent 25%),
        linear-gradient(125deg, #092740, #03101c 62%, #171005);
    color: #c6dbe7;
    text-align: left;
    box-shadow: inset 0 0 28px rgba(0, 0, 0, .55), 0 7px 15px rgba(0, 0, 0, .45);
}
.PayPalStorePage .pp-hero::before { content: ""; position: absolute; inset: 10px; pointer-events: none; border: 1px solid rgba(167, 119, 42, .35); }
.PayPalStorePage .pp-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 38%, rgba(102, 220, 255, .04) 39%, transparent 51%); }
.PayPalStorePage .pp-kicker { position: relative; z-index: 1; color: #61d8fb; font: bold 11px/1 Arial, sans-serif; letter-spacing: 1.7px; }
.PayPalStorePage .pp-hero h1 { position: relative; z-index: 1; margin: 8px 0 9px; color: #ffe09a; font: bold 29px/1.12 Georgia, serif; text-shadow: 0 2px 2px #000, 0 0 9px rgba(41, 166, 220, .42); }
.PayPalStorePage .pp-hero > p { position: relative; z-index: 1; max-width: 440px; margin: 0; color: #c5dbe6; font: 14px/1.55 Arial, sans-serif; }
.PayPalStorePage .pp-trust { position: relative; z-index: 1; display: flex; margin-top: 13px; gap: 14px; color: #b8ced9; font: bold 10px/1 Arial, sans-serif; }
.PayPalStorePage .pp-trust span::before { content: "\2713"; margin-right: 5px; color: #63e1ad; }
.PayPalStorePage .pp-account-balance { position: relative; z-index: 1; display: inline-flex; min-width: 150px; margin-top: 15px; padding: 8px 12px; align-items: center; gap: 8px; border: 1px solid #376c89; background: rgba(2, 13, 22, .68); }
.PayPalStorePage .pp-account-balance small { color: #5ed4f8; font: bold 9px/1 Arial, sans-serif; letter-spacing: .7px; }
.PayPalStorePage .pp-account-balance strong { color: #ffe09a; font: bold 14px/1 Georgia, serif; }
.PayPalStorePage .pp-account-balance span { color: #a9bec9; font: bold 9px/1 Arial, sans-serif; }
.PayPalStorePage .pp-logo-wrap { position: absolute; z-index: 2; top: 40px; right: 27px; display: grid; width: 230px; height: 140px; place-items: center; border: 1px solid #a9792e; border-radius: 3px; background: linear-gradient(145deg, #fafdff, #dceffa); box-shadow: 0 0 0 5px rgba(2, 11, 19, .82), 0 11px 22px rgba(0, 0, 0, .5), 0 0 14px rgba(34, 158, 211, .22); }
.PayPalStorePage .pp-logo-wrap::after { content: "VERIFIED PAYMENT GATEWAY"; position: absolute; right: 9px; bottom: 8px; color: #176ca0; font: bold 7px/1 Arial, sans-serif; letter-spacing: .8px; }
.PayPalStorePage .pp-logo { display: block; width: 205px; height: auto; }

.PayPalStorePage .pp-body { padding: 14px 0 0; border: 0; border-radius: 0; background: transparent; }
.PayPalStorePage .pp-sandbox { margin: 0 0 13px; padding: 14px; border: 1px solid #987027; border-left: 3px solid #e1a73e; border-radius: 0; background: linear-gradient(90deg, rgba(90, 59, 9, .5), rgba(3, 14, 23, .94)); color: #f0d48f; font: 13px/1.5 Arial, sans-serif; text-align: center; }
.PayPalStorePage .pp-sandbox strong { display: block; margin-bottom: 5px; color: #ffe09a; font-size: 14px; }
.PayPalStorePage .pp-error { margin-top: 6px; color: #ff9d88; font-weight: bold; }
.PayPalStorePage .pp-prepurchase {
    margin: 0 0 13px;
    padding: 16px 18px;
    border: 1px solid #755724;
    border-radius: 3px;
    background: radial-gradient(circle at 0 50%, rgba(198, 132, 29, .12), transparent 20%), linear-gradient(145deg, #081c2c, #020a12);
    color: #9eb4c1;
    text-align: center;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .48);
}
.PayPalStorePage .pp-prepurchase h2 { margin: 0 0 9px; color: #6ddcff; font: bold 12px/1 Arial, sans-serif; letter-spacing: 1.2px; }
.PayPalStorePage .pp-prepurchase .pp-important { margin: 0 0 10px; color: #ffe09a; font: bold 14px/1.5 Arial, sans-serif; }
.PayPalStorePage .pp-prepurchase .pp-policy-link { display: inline-block; margin: 0 0 10px; padding: 9px 12px; border: 1px solid #795b29; color: #f1d58e; font: bold 11px/1 Arial, sans-serif; text-decoration: none; }
.PayPalStorePage .pp-prepurchase .pp-virtual { margin: 0 0 10px; color: #afc2cc; font: 12px/1.55 Arial, sans-serif; }
.PayPalStorePage .pp-prepurchase h3 { margin: 0 0 8px; color: #d7ebf5; font: bold 17px/1 Georgia, serif; }
.PayPalStorePage .pp-prepurchase .pp-agreement { margin: 0; color: #adbec7; font: 11px/1.55 Arial, sans-serif; }
.PayPalStorePage .pp-prepurchase .pp-agreement a { color: #5fd6fa; }

.PayPalStorePage .pp-character-box,
.PayPalStorePage .pp-discount-box,
.PayPalStorePage .pp-server-discount { margin: 0 0 12px; padding: 14px 15px; border: 1px solid #315a73; border-radius: 3px; background: linear-gradient(145deg, rgba(7, 28, 43, .98), rgba(2, 9, 16, .99)); box-shadow: inset 0 0 16px rgba(0, 0, 0, .42); }
.PayPalStorePage .pp-character-box,
.PayPalStorePage .pp-discount-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.PayPalStorePage .pp-discount-box { border-color: #7e602a; background: radial-gradient(circle at 0 50%, rgba(180, 119, 25, .12), transparent 22%), linear-gradient(145deg, #0a1e2c, #030a12); }
.PayPalStorePage .pp-character-copy h2,
.PayPalStorePage .pp-discount-copy h2,
.PayPalStorePage .pp-server-discount h2 { margin: 0 0 5px; color: #ffe09a; font: bold 16px/1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.PayPalStorePage .pp-character-copy p,
.PayPalStorePage .pp-discount-copy p,
.PayPalStorePage .pp-server-discount p { margin: 0; color: #afc3ce; font: 12px/1.5 Arial, sans-serif; }
.PayPalStorePage .pp-character-field { min-width: 225px; }
.PayPalStorePage .pp-discount-field { min-width: 260px; }
.PayPalStorePage .pp-character-field label,
.PayPalStorePage .pp-discount-field label { display: block; margin-bottom: 7px; color: #5ed5f8; font: bold 10px/1 Arial, sans-serif; letter-spacing: 1px; }
.PayPalStorePage .pp-character-field select,
.PayPalStorePage .pp-discount-field select,
.PayPalStorePage .pp-code-row input { box-sizing: border-box; width: 100%; height: 42px; padding: 0 11px; border: 1px solid #386c8a; border-radius: 2px; outline: 0; background: #020d17; color: #d6e8f2; font: 13px Arial, sans-serif; box-shadow: inset 0 0 8px rgba(0, 0, 0, .7); }
.PayPalStorePage .pp-discount-field select { border-color: #8f6b2a; color: #f0d38c; }
.PayPalStorePage .pp-server-discount { border-color: #315a73; }
.PayPalStorePage .pp-server-discount p { margin-bottom: 10px; }
.PayPalStorePage .pp-code-row { display: flex; gap: 7px; }
.PayPalStorePage .pp-code-row input { min-width: 0; flex: 1; }
.PayPalStorePage .pp-code-row button { min-width: 100px; border: 1px solid #bd8730; border-radius: 2px; background: linear-gradient(#126b9d, #063652); color: #ffe09a; font: bold 11px Arial, sans-serif; cursor: pointer; box-shadow: inset 0 0 8px rgba(46, 186, 235, .17); }
.PayPalStorePage .pp-code-row button:disabled { filter: grayscale(.8); cursor: wait; }
.PayPalStorePage .pp-code-status { min-height: 16px; margin-top: 8px; font: bold 10px/1.4 Arial, sans-serif; }
.PayPalStorePage .pp-code-status.ok { color: #6de2ad; }
.PayPalStorePage .pp-code-status.error { color: #ff9c88; }

.PayPalStorePage .pp-head { margin: 17px 0 13px; padding: 13px; border-top: 1px solid #745522; border-bottom: 1px solid #2c5268; background: rgba(3, 14, 23, .7); text-align: center; }
.PayPalStorePage .pp-head h2 { margin: 0 0 5px; color: #ffe09a; font: bold 18px/1 Georgia, serif; }
.PayPalStorePage .pp-head p { margin: 0; color: #7992a1; font: 8px/1 Arial, sans-serif; }
.PayPalStorePage .pp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.PayPalStorePage .pp-card { position: relative; display: flex; min-height: 200px; padding: 22px 9px 10px; flex-direction: column; align-items: center; border: 1px solid #315a73; border-radius: 3px; background: radial-gradient(circle at 50% 18%, rgba(21, 133, 184, .17), transparent 28%), linear-gradient(145deg, #071b2b, #020911); box-shadow: inset 0 0 16px rgba(0, 0, 0, .45), 0 5px 10px rgba(0, 0, 0, .4); transition: transform .18s, border-color .18s, box-shadow .18s; }
.PayPalStorePage .pp-card::before { content: "PACKAGE"; position: absolute; top: 8px; left: 8px; padding: 3px 6px; border: 1px solid rgba(77,190,229,.45); background: rgba(5,35,52,.82); color: #78ddff; font: bold 9px/1 Arial, sans-serif; letter-spacing: 1px; }
.PayPalStorePage .pp-card:hover { transform: translateY(-3px); border-color: #bd8731; box-shadow: inset 0 0 16px rgba(0, 0, 0, .42), 0 8px 14px rgba(0, 0, 0, .52), 0 0 9px rgba(40, 171, 220, .14); }
.PayPalStorePage .pp-card-icon { width: 43px; height: 43px; margin: 3px 0 4px; object-fit: contain; filter: drop-shadow(0 0 7px rgba(68, 205, 255, .34)); }
.PayPalStorePage .pp-price { color: #ffe09a; font: bold 20px/1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.PayPalStorePage .pp-currency { margin-top: 5px; color: #77e1ff; font: bold 10px/1 Arial, sans-serif; letter-spacing: 1.4px; text-shadow: 0 0 6px rgba(74,202,242,.45); }
.PayPalStorePage .pp-line { width: 72%; height: 1px; margin: 9px 0; background: linear-gradient(90deg, transparent, #8e682c, transparent); }
.PayPalStorePage .pp-points { color: #73e4b2; font: bold 13px/1 Georgia, serif; }
.PayPalStorePage .pp-bonus { min-height: 13px; margin-top: 5px; color: #e3bf70; font: bold 6px/1 Arial, sans-serif; }
.PayPalStorePage .pp-form { width: 100%; margin-top: auto; }
.PayPalStorePage .pp-buy { width: 100%; min-height: 40px; padding: 9px 6px; border: 1px solid #c58b2e; border-radius: 2px; background: linear-gradient(#1685bd, #06466c); color: #fff0b3; font: bold 14px/1 Arial, sans-serif; letter-spacing: 1.3px; text-shadow: 0 1px 2px #000, 0 0 7px rgba(255,214,120,.2); cursor: pointer; }
.PayPalStorePage .pp-buy:hover { filter: brightness(1.18); }
.PayPalStorePage .pp-buy:disabled { border-color: #4b5c65; background: #24343e; color: #7d919d; cursor: not-allowed; }

.PayPalStorePage .pp-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.PayPalStorePage .pp-info-item { padding: 12px 10px; border: 1px solid #2d536a; border-radius: 2px; background: rgba(3, 14, 23, .92); text-align: center; }
.PayPalStorePage .pp-info-icon { display: grid; width: 29px; height: 29px; margin: 0 auto 8px; place-items: center; border: 1px solid #b68130; border-radius: 50%; background: #062036; color: #61d8fb; font: bold 10px Arial, sans-serif; }
.PayPalStorePage .pp-info-item strong { display: block; margin-bottom: 7px; color: #f0d58f; font: bold 12px/1.25 Arial, sans-serif; }
.PayPalStorePage .pp-info-item span { color: #abc0ca; font: 11px/1.55 Arial, sans-serif; }
.PayPalStorePage .pp-terms { margin-top: 12px; padding: 14px 16px; border: 1px solid #765823; border-left: 3px solid #d19a37; background: linear-gradient(90deg, rgba(75, 50, 10, .32), rgba(3, 14, 23, .94)); color: #b4c6cf; font: 11px/1.6 Arial, sans-serif; text-align: center; }
.PayPalStorePage .pp-terms a { color: #e6c77c; font-weight: bold; }
.PayPalStorePage .pp-disabled { padding: 38px 20px; border: 1px solid #8a6127; border-radius: 3px; background: linear-gradient(145deg, #171006, #030b13); color: #a8bdc8; text-align: center; }
.PayPalStorePage .pp-disabled h2 { color: #ffe09a; font-family: Georgia, serif; }

@media (max-width: 760px) {
    .PayPalStorePage .pp-hero { padding-right: 225px; }
    .PayPalStorePage .pp-logo-wrap { right: 18px; width: 195px; }
    .PayPalStorePage .pp-logo { width: 175px; }
    .PayPalStorePage .pp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .PayPalStorePage .pp-hero { min-height: 390px; padding: 26px 18px 175px; text-align: center; }
    .PayPalStorePage .pp-hero h1 { font-size: 25px; }
    .PayPalStorePage .pp-logo-wrap { top: auto; right: 50%; bottom: 20px; width: 225px; height: 130px; transform: translateX(50%); }
    .PayPalStorePage .pp-trust, .PayPalStorePage .pp-account-balance { justify-content: center; }
    .PayPalStorePage .pp-character-box, .PayPalStorePage .pp-discount-box { align-items: stretch; flex-direction: column; text-align: center; }
    .PayPalStorePage .pp-character-field, .PayPalStorePage .pp-discount-field { width: 100%; min-width: 0; }
    .PayPalStorePage .pp-grid { grid-template-columns: repeat(2, 1fr); }
    .PayPalStorePage .pp-info { grid-template-columns: 1fr; }
}
@media (max-width: 350px) { .PayPalStorePage .pp-grid { grid-template-columns: 1fr; } }

/* =========================================================
   BINANCE STORE — premium USDT order desk
   ========================================================= */
.BinanceStorePage .RoyalDataPageShell::before { content: "BINANCE PAY"; }
.BinanceStorePage .bn-store,
.BinanceStorePage .bn-store * { box-sizing: border-box; }
.BinanceStorePage .bn-store { display: grid; color: #c4d7e2; font-family: Arial, sans-serif; }
.BinanceStorePage .bn-hero {
    position: relative;
    min-height: 226px;
    padding: 31px 285px 27px 29px;
    overflow: hidden;
    border: 1px solid #9d7228;
    border-radius: 4px 4px 0 0;
    background:
        radial-gradient(circle at 84% 40%, rgba(240, 185, 11, .2), transparent 31%),
        radial-gradient(circle at 4% 5%, rgba(44, 177, 226, .13), transparent 25%),
        linear-gradient(125deg, #0b2132, #080b0f 62%, #181305);
    color: #c5d8e3;
    text-align: left;
    box-shadow: inset 0 0 28px rgba(0, 0, 0, .58), 0 7px 15px rgba(0, 0, 0, .46);
}
.BinanceStorePage .bn-hero::before { content: ""; position: absolute; inset: 10px; pointer-events: none; border: 1px solid rgba(177, 132, 39, .36); }
.BinanceStorePage .bn-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 39%, rgba(255, 206, 56, .035) 40%, transparent 52%); }
.BinanceStorePage .bn-kicker { position: relative; z-index: 1; color: #f0bd22; font: bold 7px/1 Arial, sans-serif; letter-spacing: 1.8px; }
.BinanceStorePage .bn-hero h1 { position: relative; z-index: 1; margin: 8px 0 9px; color: #ffe09a; font: bold 29px/1.12 Georgia, serif; text-shadow: 0 2px 2px #000, 0 0 9px rgba(235, 181, 24, .3); }
.BinanceStorePage .bn-hero > p { position: relative; z-index: 1; max-width: 425px; margin: 0; color: #a8bbc5; font: 10px/1.55 Arial, sans-serif; }
.BinanceStorePage .bn-trust { position: relative; z-index: 1; display: flex; margin-top: 15px; gap: 18px; color: #b8c9d2; font: bold 10px/1.25 Arial, sans-serif; }
.BinanceStorePage .bn-trust span::before { content: "\2713"; margin-right: 6px; color: #f0bd22; font-size: 11px; }
.BinanceStorePage .bn-account-balance { position: relative; z-index: 1; display: inline-flex; min-width: 220px; margin-top: 17px; padding: 11px 14px; align-items: center; gap: 10px; border: 1px solid #8a712d; background: rgba(2, 10, 16, .78); }
.BinanceStorePage .bn-account-balance small { color: #efc84b; font: bold 9px/1.2 Arial, sans-serif; letter-spacing: 1px; }
.BinanceStorePage .bn-account-balance strong { color: #ffe09a; font: bold 19px/1 Georgia, serif; }
.BinanceStorePage .bn-account-balance span { color: #a9bec9; font: bold 9px/1.2 Arial, sans-serif; }
.BinanceStorePage .bn-logo { position: absolute; z-index: 2; top: 40px; right: 27px; display: block; width: 230px; height: 140px; object-fit: cover; border: 1px solid #a87d27; border-radius: 3px; background: #1e2024; box-shadow: 0 0 0 5px rgba(2, 9, 15, .85), 0 11px 22px rgba(0, 0, 0, .55), 0 0 14px rgba(230, 178, 16, .16); }

.BinanceStorePage .bn-body { padding: 15px 0 0; border: 0; border-radius: 0; background: transparent; }
.BinanceStorePage .bn-head { margin: 0 0 13px; padding: 14px; border: 1px solid #31566d; border-top-color: #8f6828; background: linear-gradient(90deg, rgba(10, 42, 62, .9), rgba(3, 13, 21, .96)); text-align: center; }
.BinanceStorePage .bn-head h2 { margin: 0 0 5px; color: #ffe09a; font: bold 19px/1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.BinanceStorePage .bn-head p { margin: 0; color: #9bb0bc; font: 10px/1.45 Arial, sans-serif; }
.BinanceStorePage .bn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.BinanceStorePage .bn-card { position: relative; display: flex; min-height: 188px; padding: 18px 9px 10px; flex-direction: column; align-items: center; border: 1px solid #415664; border-radius: 3px; background: radial-gradient(circle at 50% 22%, rgba(225, 174, 14, .13), transparent 30%), linear-gradient(145deg, #10191e, #03080c); box-shadow: inset 0 0 17px rgba(0, 0, 0, .5), 0 5px 10px rgba(0, 0, 0, .42); transition: transform .18s, border-color .18s, box-shadow .18s; }
.BinanceStorePage .bn-card::before { content: "USDT PACKAGE"; position: absolute; top: 7px; left: 7px; color: #d0a932; font: bold 7px Arial, sans-serif; letter-spacing: .7px; }
.BinanceStorePage .bn-card:hover { transform: translateY(-3px); border-color: #d2a211; box-shadow: inset 0 0 17px rgba(0, 0, 0, .47), 0 8px 14px rgba(0, 0, 0, .54), 0 0 10px rgba(223, 172, 15, .13); }
.BinanceStorePage .bn-badge { position: absolute; z-index: 2; top: -7px; padding: 5px 9px; border: 1px solid #e0ad10; border-radius: 2px; background: #171306; color: #f3c128; font: bold 8px/1 Arial, sans-serif; letter-spacing: .7px; box-shadow: 0 3px 6px rgba(0, 0, 0, .45); }
.BinanceStorePage .bn-usdt { display: grid; width: 42px; height: 42px; margin: 4px 0 6px; place-items: center; border: 1px solid #62d6ad; border-radius: 50%; background: radial-gradient(circle, #27aa7c, #0b4a35 70%); color: #eafff8; font: bold 16px Arial, sans-serif; box-shadow: inset 0 0 8px rgba(255, 255, 255, .12), 0 0 10px rgba(37, 179, 129, .25); }
.BinanceStorePage .bn-price { color: #ffe09a; font: bold 20px/1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.BinanceStorePage .bn-currency { margin-top: 4px; color: #e4b92d; font: bold 8px/1 Arial, sans-serif; letter-spacing: 1px; }
.BinanceStorePage .bn-line { width: 72%; height: 1px; margin: 9px 0; background: linear-gradient(90deg, transparent, #8d6c29, transparent); }
.BinanceStorePage .bn-points { color: #70e1b0; font: bold 13px/1 Georgia, serif; }
.BinanceStorePage .bn-select { width: 100%; min-height: 36px; margin-top: auto; padding: 8px 5px; border: 1px solid #b98b0c; border-radius: 2px; background: linear-gradient(#d9ad1f, #765a05); color: #fff2b7; font: bold 9px/1 Arial, sans-serif; text-shadow: 0 1px 2px #000; cursor: pointer; }
.BinanceStorePage .bn-select:hover { filter: brightness(1.16); }
.BinanceStorePage .bn-select.selected { border-color: #4fc69b; background: linear-gradient(#21865f, #0c4933); color: #d6ffed; }

.BinanceStorePage .bn-layout { display: grid; grid-template-columns: 1.03fr .97fr; gap: 11px; margin-top: 14px; }
.BinanceStorePage .bn-panel { padding: 15px; border: 1px solid #31566d; border-radius: 3px; background: linear-gradient(145deg, rgba(7, 27, 41, .99), rgba(2, 8, 14, .99)); box-shadow: inset 0 0 17px rgba(0, 0, 0, .45), 0 5px 10px rgba(0, 0, 0, .38); }
.BinanceStorePage .bn-panel h3 { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #765823; color: #ffe09a; font: bold 19px/1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.BinanceStorePage .bn-network-option { min-height: 46px; padding: 9px 7px; }
.BinanceStorePage .bn-network-option strong { font-size: 13px; }
.BinanceStorePage .bn-network-option small { margin-top: 4px; color: #a9bfcb; font-size: 9px; }
.BinanceStorePage .bn-network-qr { width: 100%; max-width: 280px; height: 256px; border-width: 2px; background: #20262f; box-shadow: inset 0 0 0 4px #06101a, 0 8px 18px rgba(0, 0, 0, .42); transition: width .2s ease, height .2s ease; }
.BinanceStorePage .bn-network-qr[data-network="binance"] { width: 200px; height: 290px; }
.BinanceStorePage .bn-network-qr img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.BinanceStorePage .bn-selected-network-name small { color: #68d7fb; font-size: 10px; line-height: 1.3; }
.BinanceStorePage .bn-selected-network-name strong { margin-top: 6px; font-size: 18px; line-height: 1.2; }
.BinanceStorePage .bn-network-warning { margin-top: 11px; color: #9db2bd; font-size: 10px; line-height: 1.55; }
.BinanceStorePage .bn-methods { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 13px; align-items: center; }
.BinanceStorePage .bn-qr { display: flex; width: 130px; height: 130px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #a87c28; border-radius: 2px; background: radial-gradient(circle at 50% 42%, rgba(240, 185, 11, .18), transparent 38%), linear-gradient(145deg, #202228, #08090b); box-shadow: 0 0 0 4px #020b12, 0 6px 12px rgba(0, 0, 0, .52); }
.BinanceStorePage .bn-qr > span { color: #f0b90b; font-size: 31px; text-shadow: 0 0 12px rgba(240, 185, 11, .52); }
.BinanceStorePage .bn-qr > strong { margin-top: 10px; color: #ffe09a; font: bold 9px/1 Arial, sans-serif; letter-spacing: 1px; }
.BinanceStorePage .bn-qr > small { margin-top: 6px; color: #a4882c; font: bold 6px/1 Arial, sans-serif; letter-spacing: 1.2px; }
.BinanceStorePage .bn-method { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #24475b; }
.BinanceStorePage .bn-method:last-child { margin: 0; padding: 0; border-bottom: 0; }
.BinanceStorePage .bn-method-label { margin-bottom: 7px; color: #e8be36; font: bold 8px/1 Arial, sans-serif; letter-spacing: .9px; }
.BinanceStorePage .bn-copy-row { display: flex; gap: 6px; }
.BinanceStorePage .bn-value { min-width: 0; flex: 1; overflow: hidden; color: #d2e1e9; font: bold 10px/30px Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.BinanceStorePage .bn-copy { padding: 7px 9px; border: 1px solid #9f7723; border-radius: 2px; background: #171305; color: #f1c536; font: bold 8px Arial, sans-serif; cursor: pointer; }
.BinanceStorePage .bn-copy:hover { filter: brightness(1.25); }
.BinanceStorePage .bn-network { display: inline-block; margin-top: 5px; padding: 4px 7px; border: 1px solid #357e65; border-radius: 2px; background: rgba(16, 91, 65, .25); color: #73dfb5; font: bold 6px/1 Arial, sans-serif; }
.BinanceStorePage .bn-field { margin-bottom: 11px; }
.BinanceStorePage .bn-field label { display: block; margin-bottom: 7px; color: #5ed4f8; font: bold 8px/1 Arial, sans-serif; letter-spacing: .8px; }
.BinanceStorePage .bn-field select { box-sizing: border-box; width: 100%; height: 42px; padding: 0 11px; border: 1px solid #386b87; border-radius: 2px; outline: 0; background: #020d17; color: #d6e8f2; font: 11px Arial, sans-serif; box-shadow: inset 0 0 8px rgba(0, 0, 0, .68); }
.BinanceStorePage .bn-summary { display: flex; min-height: 68px; margin: 12px 0; padding: 10px 12px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid #735923; border-radius: 2px; background: radial-gradient(circle, rgba(211, 162, 20, .1), transparent 65%), #030d15; color: #96aab5; font: 10px/1.3 Arial, sans-serif; text-align: center; }
.BinanceStorePage .bn-summary strong { display: block; color: #70e1af; font: bold 15px/1.25 Georgia, serif; white-space: nowrap; }
.BinanceStorePage .bn-confirm-order { min-height: 44px; font-size: 13px; letter-spacing: 1px; }
.BinanceStorePage .bn-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.BinanceStorePage .bn-action { display: flex; min-height: 37px; padding: 0 6px; align-items: center; justify-content: center; border: 1px solid; border-radius: 2px; color: #fff !important; font: bold 7px/1 Arial, sans-serif; text-align: center; text-decoration: none !important; }
.BinanceStorePage .bn-whatsapp { border-color: #33966a; background: linear-gradient(#249867, #0d5338); }
.BinanceStorePage .bn-discord { border-color: #5d6cc0; background: linear-gradient(#5968bd, #303a7a); }
.BinanceStorePage .bn-action.disabled { border-color: #48555b; background: #263238; color: #788991 !important; cursor: not-allowed; }
.BinanceStorePage .bn-help { min-height: 16px; margin: 9px 0 0; color: #91a7b3; font: 9px/1.5 Arial, sans-serif; text-align: center; }
.BinanceStorePage .bn-warning { margin-top: 12px; padding: 13px 15px; border: 1px solid #8d6725; border-left: 3px solid #e0ad18; background: linear-gradient(90deg, rgba(84, 59, 10, .38), rgba(3, 13, 21, .96)); color: #b0c1ca; font: 10px/1.6 Arial, sans-serif; }
.BinanceStorePage .bn-warning strong { color: #f0c434; }
.BinanceStorePage .bn-policy { margin-top: 9px; padding: 11px 12px; border: 1px solid #294b60; background: rgba(3, 13, 21, .84); color: #91a7b3; font: 9px/1.6 Arial, sans-serif; text-align: center; }

@media (max-width: 760px) {
    .BinanceStorePage .bn-hero { padding-right: 225px; }
    .BinanceStorePage .bn-logo { right: 18px; width: 195px; }
    .BinanceStorePage .bn-grid { grid-template-columns: repeat(2, 1fr); }
    .BinanceStorePage .bn-methods { grid-template-columns: 115px minmax(0, 1fr); }
    .BinanceStorePage .bn-qr { width: 115px; height: 115px; }
}
@media (max-width: 540px) {
    .BinanceStorePage .bn-hero { min-height: 390px; padding: 26px 18px 175px; text-align: center; }
    .BinanceStorePage .bn-hero h1 { font-size: 25px; }
    .BinanceStorePage .bn-logo { top: auto; right: 50%; bottom: 20px; width: 225px; height: 130px; transform: translateX(50%); }
    .BinanceStorePage .bn-trust, .BinanceStorePage .bn-account-balance { justify-content: center; }
    .BinanceStorePage .bn-layout, .BinanceStorePage .bn-methods { grid-template-columns: 1fr; }
    .BinanceStorePage .bn-qr { width: 170px; height: 145px; margin: auto; }
}
@media (max-width: 350px) { .BinanceStorePage .bn-grid, .BinanceStorePage .bn-actions { grid-template-columns: 1fr; } }

/* =========================================================
   PAYMENT HUB — royal multi-gateway store
   ========================================================= */
.PaymentHubPage .RoyalDataPageShell::before { content: "MADNESS STORE"; }
.PaymentHubPage .PaymentHub { display: grid; gap: 14px; color: #c5d9e5; }
.PaymentHubPage .PaymentHubHero {
    min-height: 118px;
    grid-template-columns: 72px minmax(0, 1fr) 128px;
    background:
        radial-gradient(circle at 9% 50%, rgba(41, 188, 239, .2), transparent 25%),
        radial-gradient(circle at 91% 50%, rgba(220, 154, 37, .18), transparent 26%),
        linear-gradient(110deg, #071f33, #020a13 62%, #1a1104);
}
.PaymentHubPage .RoyalDataHeroIcon.payment {
    background: radial-gradient(circle at 48% 38%, #32c9f5, #086393 48%, #031426 75%);
    color: #d7fbff;
    font-size: 29px;
    text-shadow: 0 2px 2px #000, 0 0 13px #3ed6ff;
}
.PaymentHubPage .PaymentBalance {
    display: flex;
    min-height: 72px;
    padding: 6px 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #9a6d28;
    background: rgba(3, 16, 27, .9);
    box-shadow: inset 0 0 15px rgba(47, 187, 235, .14);
}
.PaymentHubPage .PaymentBalance small { color: #66d9fb; font: bold 6px/1 Arial, sans-serif; letter-spacing: 1.1px; }
.PaymentHubPage .PaymentBalance strong { margin: 7px 0 5px; color: #ffe09a; font: bold 23px/1 Georgia, serif; text-shadow: 0 0 8px rgba(32, 171, 224, .55); }
.PaymentHubPage .PaymentBalance span { color: #7c95a4; font: bold 6px/1 Arial, sans-serif; letter-spacing: 1px; }

.PaymentHubPage .PaymentIntro {
    display: flex;
    min-height: 68px;
    padding: 0 15px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border: 1px solid #315a73;
    background: linear-gradient(90deg, rgba(10, 43, 65, .92), rgba(3, 14, 23, .94));
}
.PaymentHubPage .PaymentIntro > div { display: flex; align-items: center; gap: 11px; }
.PaymentHubPage .PaymentIntro > div > span { color: #5ed7fc; font-size: 22px; text-shadow: 0 0 9px #1487b8; }
.PaymentHubPage .PaymentIntro p { margin: 0; }
.PaymentHubPage .PaymentIntro > div p small { display: block; color: #5dd4f8; font: bold 8px/1 Arial, sans-serif; letter-spacing: 1.2px; }
.PaymentHubPage .PaymentIntro > div p strong { display: block; margin-top: 6px; color: #ffe09a; font: bold 19px/1 Georgia, serif; }
.PaymentHubPage .PaymentIntro > p { max-width: 360px; color: #a4b8c3; font: 11px/1.55 Arial, sans-serif; text-align: right; }

.PaymentHubPage .PaymentMethodGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.PaymentHubPage .PaymentMethodCard {
    position: relative;
    display: grid;
    overflow: hidden;
    border: 1px solid #705426;
    border-radius: 4px;
    background: linear-gradient(145deg, rgba(6, 26, 41, .99), rgba(2, 8, 14, .99));
    color: #bfd2dd !important;
    text-decoration: none !important;
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .46), 0 7px 15px rgba(0, 0, 0, .44);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.PaymentHubPage .PaymentMethodCard:hover { transform: translateY(-4px); border-color: #c08a32; box-shadow: inset 0 0 22px rgba(0, 0, 0, .42), 0 11px 19px rgba(0, 0, 0, .55), 0 0 13px rgba(38, 171, 224, .15); }
.PaymentHubPage .PaymentMethodCard.featured::after { content: ""; position: absolute; top: 0; right: 0; width: 45px; height: 45px; pointer-events: none; background: linear-gradient(225deg, rgba(255, 197, 65, .22) 0 48%, transparent 49%); }
.PaymentHubPage .PaymentMethodCard > header { display: flex; min-height: 46px; padding: 0 14px; align-items: center; justify-content: space-between; border-bottom: 1px solid #294d63; background: rgba(9, 37, 56, .82); }
.PaymentHubPage .PaymentMethodCard > header span,
.PaymentHubPage .PaymentMethodCard > header b { padding: 5px 8px; border: 1px solid #397696; color: #63d8fa; font: bold 8px/1 Arial, sans-serif; letter-spacing: .9px; }
.PaymentHubPage .PaymentMethodCard > header b { border-color: #775a2a; color: #e7c476; }
.PaymentHubPage .PaymentMethodVisual {
    position: relative;
    display: grid;
    min-height: 128px;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid #31536a;
    background: radial-gradient(circle at 50% 45%, rgba(20, 110, 157, .3), transparent 38%), linear-gradient(145deg, #071c2d, #020811);
}
.PaymentHubPage .PaymentMethodVisual::before,
.PaymentHubPage .PaymentMethodVisual::after { content: ""; position: absolute; width: 145px; height: 1px; background: linear-gradient(90deg, transparent, #9b702b, transparent); }
.PaymentHubPage .PaymentMethodVisual::before { top: 14px; }
.PaymentHubPage .PaymentMethodVisual::after { bottom: 14px; }
.PaymentHubPage .PaymentMethodVisual i { position: absolute; width: 85px; height: 85px; border: 1px solid rgba(71, 181, 226, .18); border-radius: 50%; box-shadow: 0 0 28px rgba(37, 174, 226, .16); }
.PaymentHubPage .PaymentMethodVisual img { position: relative; z-index: 1; display: block; max-width: 190px; max-height: 105px; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .55)); }
.PaymentHubPage .PaymentMethodCard.tibia .PaymentMethodVisual img { width: 105px; height: 105px; }
.PaymentHubPage .PaymentMethodCard.binance .PaymentMethodVisual { background: radial-gradient(circle at 50% 45%, rgba(224, 176, 24, .16), transparent 38%), linear-gradient(145deg, #15150e, #020811); }
.PaymentHubPage .PaymentMethodCard.wallet .PaymentMethodVisual { background: radial-gradient(circle at 50% 45%, rgba(154, 73, 174, .16), transparent 38%), linear-gradient(145deg, #171020, #020811); }
.PaymentHubPage .PaymentMethodCard.tibia .PaymentMethodVisual { background: radial-gradient(circle at 50% 45%, rgba(214, 149, 37, .18), transparent 38%), linear-gradient(145deg, #191205, #020811); }
.PaymentHubPage .PaymentMethodCopy { padding: 19px 18px 16px; }
.PaymentHubPage .PaymentMethodCopy > small { color: #5ed4f7; font: bold 8px/1 Arial, sans-serif; letter-spacing: 1.3px; }
.PaymentHubPage .PaymentMethodCopy h2 { margin: 7px 0 10px; color: #ffe09a; font: bold 25px/1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.PaymentHubPage .PaymentMethodCopy > p { min-height: 58px; margin: 0; color: #b3c6d0; font: 12px/1.6 Arial, sans-serif; }
.PaymentHubPage .PaymentMethodCopy ul { display: flex; margin: 12px 0 0; padding: 9px 0 0; gap: 13px; border-top: 1px solid #1e3d4f; list-style: none; }
.PaymentHubPage .PaymentMethodCopy li { color: #9cb2be; font: 9px/1.25 Arial, sans-serif; }
.PaymentHubPage .PaymentMethodCopy li span { margin-right: 4px; color: #67e0ad; }
.PaymentHubPage .PaymentMethodCard > footer { display: grid; min-height: 52px; padding: 0 16px; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; border-top: 1px solid #795923; background: linear-gradient(90deg, rgba(9, 43, 66, .86), rgba(3, 13, 22, .94)); color: #f0d48e; font: bold 9px/1 Arial, sans-serif; letter-spacing: .9px; }
.PaymentHubPage .PaymentMethodCard > footer b { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid #4080a0; border-radius: 50%; color: #62d9fc; font-size: 17px; transition: transform .18s ease; }
.PaymentHubPage .PaymentMethodCard:hover > footer b { transform: translateX(3px); }

.PaymentHubPage .PaymentSteps { overflow: hidden; border: 1px solid #755723; background: linear-gradient(145deg, #061827, #020811); }
.PaymentHubPage .PaymentSteps > header { padding: 18px 17px 15px; border-bottom: 1px solid #2c5269; text-align: center; }
.PaymentHubPage .PaymentSteps > header small { color: #5ed5f8; font: bold 8px/1 Arial, sans-serif; letter-spacing: 1.5px; }
.PaymentHubPage .PaymentSteps > header h2 { margin: 7px 0 0; color: #ffe09a; font: bold 21px/1 Georgia, serif; }
.PaymentHubPage .PaymentSteps > div { display: grid; grid-template-columns: repeat(3, 1fr); }
.PaymentHubPage .PaymentSteps article { display: grid; min-height: 96px; padding: 15px 16px; grid-template-columns: 43px minmax(0, 1fr); align-items: center; gap: 13px; border-right: 1px solid #24475b; }
.PaymentHubPage .PaymentSteps article:last-child { border-right: 0; }
.PaymentHubPage .PaymentSteps article > span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #b88230; border-radius: 50%; background: #061c2e; color: #ffe09a; font: bold 15px Georgia, serif; box-shadow: inset 0 0 7px rgba(45, 181, 231, .18); }
.PaymentHubPage .PaymentSteps article p { margin: 0; }
.PaymentHubPage .PaymentSteps article strong { display: block; color: #60d5f8; font: bold 11px/1.2 Arial, sans-serif; letter-spacing: .8px; }
.PaymentHubPage .PaymentSteps article small { display: block; margin-top: 8px; color: #b3c5ce; font: 10px/1.55 Arial, sans-serif; }

.PaymentHubPage .PaymentNotice { display: grid; min-height: 92px; padding: 14px 18px; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid #936928; background: linear-gradient(90deg, #09233a, #030c15 68%, #181105); }
.PaymentHubPage .PaymentNotice > span { color: #63d9fb; font-size: 27px; }
.PaymentHubPage .PaymentNotice strong { color: #e6c579; font: bold 11px/1 Arial, sans-serif; letter-spacing: 1px; }
.PaymentHubPage .PaymentNotice p { margin: 8px 0 0; color: #b4c5ce; font: 11px/1.55 Arial, sans-serif; }
.PaymentHubPage .PaymentNotice a { padding: 13px 15px; border: 1px solid #a5762c; background: #071c2d; color: #ffe09a; font: bold 9px/1 Arial, sans-serif; text-decoration: none; }

@media (max-width: 760px) {
    .PaymentHubPage .PaymentMethodGrid { grid-template-columns: 1fr; }
    .PaymentHubPage .PaymentSteps > div { grid-template-columns: 1fr; }
    .PaymentHubPage .PaymentSteps article { border-right: 0; border-bottom: 1px solid #24475b; }
    .PaymentHubPage .PaymentSteps article:last-child { border-bottom: 0; }
}
@media (max-width: 520px) {
    .PaymentHubPage .PaymentHubHero { grid-template-columns: 58px minmax(0, 1fr); }
    .PaymentHubPage .PaymentBalance { grid-column: 1 / -1; }
    .PaymentHubPage .PaymentIntro { padding: 13px; align-items: flex-start; flex-direction: column; }
    .PaymentHubPage .PaymentIntro > p { text-align: left; }
    .PaymentHubPage .PaymentNotice { grid-template-columns: 28px minmax(0, 1fr); }
    .PaymentHubPage .PaymentNotice a { grid-column: 1 / -1; text-align: center; }
}

/* =========================================================
   CHANGELOG — premium release timeline and admin console
   ========================================================= */
.ChangelogPage .RoyalDataPageShell::before { content: "CHANGELOG"; }
.ChangelogPage .ChangelogDashboard { display: grid; gap: 14px; color: #c4d8e4; }
.ChangelogPage .ChangelogHero {
    min-height: 112px;
    grid-template-columns: 70px minmax(0, 1fr) 95px;
    background:
        radial-gradient(circle at 9% 50%, rgba(38, 181, 236, .17), transparent 25%),
        radial-gradient(circle at 91% 50%, rgba(208, 145, 37, .15), transparent 25%),
        linear-gradient(110deg, #071d30, #020a13 64%, #171005);
}
.ChangelogPage .RoyalDataHeroIcon.changelog {
    background: radial-gradient(circle at 48% 38%, #128bc1, #07314f 58%, #020912 78%);
    color: #ffdf91;
    font-size: 27px;
    text-shadow: 0 2px 2px #000, 0 0 12px #42cfff;
}
.ChangelogPage .ChangelogCounter {
    display: flex;
    min-height: 62px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #8e6627;
    background: rgba(4, 18, 29, .86);
    box-shadow: inset 0 0 13px rgba(50, 183, 232, .14);
}
.ChangelogPage .ChangelogCounter strong { color: #62d9ff; font: bold 25px/1 Georgia, serif; text-shadow: 0 0 8px #157fb0; }
.ChangelogPage .ChangelogCounter small { margin-top: 7px; color: #e6c478; font: bold 6px/1 Arial, sans-serif; letter-spacing: 1px; }

.ChangelogPage .ChangelogNotice {
    display: flex;
    min-height: 42px;
    padding: 0 13px;
    align-items: center;
    gap: 10px;
    border: 1px solid #3f856c;
    background: linear-gradient(90deg, rgba(18, 78, 60, .62), rgba(3, 15, 22, .94));
    color: #b8f5d9;
    font: 10px/1.4 Arial, sans-serif;
}
.ChangelogPage .ChangelogNotice > span { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #5fd39e; border-radius: 50%; }
.ChangelogPage .ChangelogNotice.error { border-color: #984b3d; background: linear-gradient(90deg, rgba(101, 31, 25, .58), rgba(15, 8, 12, .94)); color: #ffc2b4; }

.ChangelogPage .ChangelogComposer {
    overflow: hidden;
    border: 1px solid #9b6e27;
    border-radius: 4px;
    background: linear-gradient(145deg, rgba(6, 27, 43, .98), rgba(2, 9, 16, .99));
    box-shadow: inset 0 0 20px rgba(0, 0, 0, .5), 0 7px 15px rgba(0, 0, 0, .4);
}
.ChangelogPage .ChangelogComposer > header {
    display: grid;
    min-height: 66px;
    padding: 0 15px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #315b75;
    background: linear-gradient(90deg, rgba(17, 60, 88, .92), rgba(3, 15, 25, .82));
}
.ChangelogPage .ChangelogComposer > header > span {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border: 1px solid #c08a33;
    border-radius: 50%;
    background: radial-gradient(circle, #0c4164, #030c15 74%);
    color: #ffe19a;
    font-size: 16px;
    box-shadow: 0 0 8px rgba(39, 187, 240, .28);
}
.ChangelogPage .ChangelogComposer header small { color: #61d7fa; font: bold 7px/1 Arial, sans-serif; letter-spacing: 1.2px; }
.ChangelogPage .ChangelogComposer h2 { margin: 5px 0 0; color: #ffe09a; font: bold 17px/1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.ChangelogPage .ChangelogComposerToggle {
    min-height: 35px;
    padding: 0 13px;
    border: 1px solid #b37e2b;
    background: linear-gradient(#126895, #062c47);
    color: #ffe4a3;
    font: bold 7px/1 Arial, sans-serif;
    letter-spacing: .8px;
    cursor: pointer;
}
.ChangelogPage .ChangelogComposerForm {
    display: none;
    padding: 15px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}
.ChangelogPage .ChangelogComposerForm.is-open { display: grid; }
.ChangelogPage .ChangelogComposerForm label { display: grid; gap: 6px; color: #64d5f8; font: bold 7px/1 Arial, sans-serif; letter-spacing: 1px; }
.ChangelogPage .ChangelogComposerForm label.wide { grid-column: 1 / -1; }
.ChangelogPage .ChangelogComposerForm input[type="text"],
.ChangelogPage .ChangelogComposerForm input[type="datetime-local"],
.ChangelogPage .ChangelogComposerForm select,
.ChangelogPage .ChangelogComposerForm textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0 11px;
    border: 1px solid #32617e;
    border-radius: 2px;
    outline: 0;
    background: #020e19;
    color: #d8e9f3;
    font: 10px Arial, sans-serif;
    box-shadow: inset 0 0 9px rgba(0, 0, 0, .7);
}
.ChangelogPage .ChangelogComposerForm input[type="text"],
.ChangelogPage .ChangelogComposerForm input[type="datetime-local"],
.ChangelogPage .ChangelogComposerForm select { height: 39px; }
.ChangelogPage .ChangelogComposerForm textarea { min-height: 105px; padding-top: 10px; resize: vertical; line-height: 1.5; }
.ChangelogPage .ChangelogComposerForm input:focus,
.ChangelogPage .ChangelogComposerForm select:focus,
.ChangelogPage .ChangelogComposerForm textarea:focus { border-color: #d19939; box-shadow: 0 0 0 2px rgba(209, 153, 57, .12), inset 0 0 9px #000; }
.ChangelogPage .ChangelogComposerForm label.wide > small { justify-self: end; color: #748d9c; font-size: 6px; }
.ChangelogPage .ChangelogImageField input[type="file"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 6px;
    border: 1px dashed #407694;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(9, 42, 63, .7), rgba(2, 13, 22, .96));
    color: #9cb8c8;
    font: 9px/34px Arial, sans-serif;
    cursor: pointer;
}
.ChangelogPage .ChangelogImageField input[type="file"]::file-selector-button {
    height: 34px;
    margin-right: 11px;
    padding: 0 14px;
    border: 1px solid #b68030;
    background: linear-gradient(#116a9e, #062f4d);
    color: #ffe3a0;
    font: bold 7px Arial, sans-serif;
    letter-spacing: .7px;
    cursor: pointer;
}
.ChangelogPage .ChangelogCurrentImage {
    display: grid;
    padding: 9px;
    grid-column: 1 / -1;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border: 1px solid #6c5428;
    background: rgba(35, 25, 8, .24);
}
.ChangelogPage .ChangelogCurrentImage > img { display: block; width: 112px; height: 64px; object-fit: cover; border: 1px solid #376a86; }
.ChangelogPage .ChangelogCurrentImage > label { display: flex; align-items: center; gap: 8px; color: #ffb29f; cursor: pointer; }
.ChangelogPage .ChangelogCurrentImage input { width: auto; }
.ChangelogPage .ChangelogFeatured {
    min-height: 52px;
    padding: 0 12px;
    grid-template-columns: auto 28px minmax(0, 1fr) !important;
    align-items: center;
    border: 1px solid #6d5425;
    background: rgba(45, 31, 8, .25);
    cursor: pointer;
}
.ChangelogPage .ChangelogFeatured input { width: auto; }
.ChangelogPage .ChangelogFeatured > span { color: #ffd66d; font-size: 20px; text-shadow: 0 0 8px #ca8719; }
.ChangelogPage .ChangelogFeatured strong { display: block; color: #ffe09a; font-size: 8px; }
.ChangelogPage .ChangelogFeatured small { display: block; margin-top: 5px; color: #8197a4; font-size: 7px; letter-spacing: 0; }
.ChangelogPage .ChangelogComposerActions { display: flex; grid-column: span 2; align-items: stretch; gap: 8px; }
.ChangelogPage .ChangelogComposerActions button,
.ChangelogPage .ChangelogComposerActions a {
    display: flex;
    min-height: 52px;
    padding: 0 18px;
    align-items: center;
    justify-content: center;
    border: 1px solid #c38a31;
    background: linear-gradient(#1372a8, #073a5d 58%, #031c2f);
    color: #ffe4a1;
    font: bold 8px/1 Arial, sans-serif;
    letter-spacing: .8px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 0 10px rgba(53, 199, 247, .2);
}
.ChangelogPage .ChangelogComposerActions button { flex: 1; }
.ChangelogPage .ChangelogComposerActions a { border-color: #6e562b; background: #091927; color: #9eb5c3; }

.ChangelogPage .ChangelogFilters {
    display: grid;
    padding: 7px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    border: 1px solid #315c76;
    background: rgba(2, 11, 19, .95);
}
.ChangelogPage .ChangelogFilters a {
    display: flex;
    min-height: 38px;
    padding: 0 7px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #23485f;
    background: #061522;
    color: #9eb5c4;
    font: bold 7px/1 Arial, sans-serif;
    text-decoration: none;
    text-align: center;
    transition: border-color .18s, color .18s, background .18s;
}
.ChangelogPage .ChangelogFilters a span { color: #5ed5fa; font-size: 12px; }
.ChangelogPage .ChangelogFilters a:hover,
.ChangelogPage .ChangelogFilters a.active { border-color: #bc8530; background: linear-gradient(#0d3c5c, #061a29); color: #ffe09a; }

.ChangelogPage .ChangelogTimeline { display: grid; gap: 12px; }
.ChangelogPage .ChangelogEntry { display: grid; grid-template-columns: 50px minmax(0, 1fr); }
.ChangelogPage .ChangelogRail { position: relative; display: flex; justify-content: center; }
.ChangelogPage .ChangelogRail::after { content: ""; position: absolute; top: 42px; bottom: -13px; width: 1px; background: linear-gradient(#287495, #735522); }
.ChangelogPage .ChangelogEntry:last-child .ChangelogRail::after { display: none; }
.ChangelogPage .ChangelogRail > span {
    z-index: 1;
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border: 1px solid #bd8731;
    border-radius: 50%;
    background: radial-gradient(circle, #0d4265, #020b13 72%);
    color: #ffe09a;
    font-size: 15px;
    box-shadow: 0 0 0 4px #020b13, 0 0 10px rgba(45, 184, 232, .25);
}
.ChangelogPage .ChangelogCard {
    overflow: hidden;
    border: 1px solid #6f5426;
    border-radius: 4px;
    background: linear-gradient(145deg, rgba(7, 27, 42, .98), rgba(2, 9, 15, .99));
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .45), 0 5px 12px rgba(0, 0, 0, .42);
}
.ChangelogPage .ChangelogCard > header {
    display: flex;
    min-height: 43px;
    padding: 0 13px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #294c62;
    background: rgba(10, 38, 57, .76);
}
.ChangelogPage .ChangelogMeta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ChangelogPage .ChangelogMeta span,
.ChangelogPage .ChangelogMeta b,
.ChangelogPage .ChangelogMeta em { padding: 5px 7px; border: 1px solid #34718f; color: #65d7fa; font: bold 6px/1 Arial, sans-serif; letter-spacing: .8px; font-style: normal; }
.ChangelogPage .ChangelogMeta b { border-color: #7b5c29; color: #f2cc79; }
.ChangelogPage .ChangelogMeta em { border-color: #a97a2e; background: rgba(115, 75, 13, .24); color: #ffe194; }
.ChangelogPage .ChangelogCard time { color: #77909f; font: 8px/1 Arial, sans-serif; white-space: nowrap; }
.ChangelogPage .ChangelogCard h2 { margin: 0; padding: 14px 15px 6px; color: #ffe09a; font: bold 20px/1.15 Georgia, serif; text-shadow: 0 2px 2px #000; }
.ChangelogPage .ChangelogReleaseImage {
    position: relative;
    overflow: hidden;
    margin: 8px 15px 6px;
    border: 1px solid #8d682d;
    background: #01070d;
    box-shadow: inset 0 0 14px #000, 0 4px 10px rgba(0, 0, 0, .38);
}
.ChangelogPage .ChangelogReleaseImage::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 22px rgba(0, 0, 0, .56); }
.ChangelogPage .ChangelogReleaseImage img { display: block; width: 100%; max-height: 330px; object-fit: cover; }
.ChangelogPage .ChangelogCard > p { min-height: 35px; margin: 0; padding: 4px 15px 15px; color: #b4c9d5; font: 11px/1.6 Arial, sans-serif; }
.ChangelogPage .ChangelogCard > footer { display: flex; min-height: 38px; padding: 0 13px; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #1d3b4e; background: rgba(1, 8, 14, .65); }
.ChangelogPage .ChangelogCard > footer > span { color: #667e8d; font: bold 6px/1 Arial, sans-serif; letter-spacing: .8px; }
.ChangelogPage .ChangelogCard > footer strong { color: #5dd2f5; }
.ChangelogPage .ChangelogCard > footer div { display: flex; align-items: center; gap: 6px; }
.ChangelogPage .ChangelogCard > footer form { margin: 0; }
.ChangelogPage .ChangelogCard > footer a,
.ChangelogPage .ChangelogCard > footer button { padding: 6px 9px; border: 1px solid #43657a; background: #061725; color: #a8c6d8; font: bold 6px/1 Arial, sans-serif; text-decoration: none; cursor: pointer; }
.ChangelogPage .ChangelogCard > footer button { border-color: #82483c; color: #ff9e8c; }
.ChangelogPage .ChangelogEntry.featured .ChangelogCard { border-color: #b8832e; box-shadow: inset 0 0 20px rgba(186, 128, 35, .06), 0 0 13px rgba(40, 170, 225, .14); }
.ChangelogPage .ChangelogEntry.type-fix .ChangelogRail > span { border-color: #488d6f; color: #91f2c7; }
.ChangelogPage .ChangelogEntry.type-event .ChangelogRail > span { border-color: #9b6436; color: #ffc17b; }
.ChangelogPage .ChangelogEntry.type-balance .ChangelogRail > span { border-color: #8062a1; color: #d7baff; }
.ChangelogPage .ChangelogEmpty { padding: 42px 15px; border: 1px solid #31556d; background: rgba(3, 14, 23, .88); text-align: center; }
.ChangelogPage .ChangelogEmpty > span { color: #5bd7ff; font-size: 30px; text-shadow: 0 0 10px #197da8; }
.ChangelogPage .ChangelogEmpty h2 { margin: 12px 0 6px; color: #ffe09a; font: bold 19px Georgia, serif; }
.ChangelogPage .ChangelogEmpty p { margin: 0; color: #839aa8; font-size: 10px; }

@media (max-width: 780px) {
    .ChangelogPage .ChangelogFilters { grid-template-columns: repeat(3, 1fr); }
    .ChangelogPage .ChangelogComposerForm { grid-template-columns: 1fr 1fr; }
    .ChangelogPage .ChangelogComposerActions { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    .ChangelogPage .ChangelogHero { grid-template-columns: 58px minmax(0, 1fr); }
    .ChangelogPage .ChangelogCounter { grid-column: 1 / -1; }
    .ChangelogPage .ChangelogComposer > header { grid-template-columns: 38px minmax(0, 1fr); padding: 9px 12px; }
    .ChangelogPage .ChangelogComposerToggle { grid-column: 1 / -1; }
    .ChangelogPage .ChangelogComposerForm { grid-template-columns: 1fr; }
    .ChangelogPage .ChangelogComposerForm label.wide,
    .ChangelogPage .ChangelogComposerActions { grid-column: auto; }
    .ChangelogPage .ChangelogFilters { grid-template-columns: 1fr 1fr; }
    .ChangelogPage .ChangelogEntry { grid-template-columns: 39px minmax(0, 1fr); }
    .ChangelogPage .ChangelogRail > span { width: 29px; height: 29px; font-size: 11px; }
    .ChangelogPage .ChangelogRail::after { top: 34px; }
    .ChangelogPage .ChangelogCard > header,
    .ChangelogPage .ChangelogCard > footer { align-items: flex-start; flex-direction: column; padding-top: 9px; padding-bottom: 9px; }
}

/* =========================================================
   PROTECTED ACCESS — premium member gateway
   ========================================================= */
.ProtectedPage .RoyalDataPageShell::before { content: "SECURE ACCESS"; }
.ProtectedPage .ProtectedGate { display: grid; gap: 14px; color: #c5d9e5; }
.ProtectedPage .ProtectedHero {
    min-height: 116px;
    grid-template-columns: 72px minmax(0, 1fr) 104px;
    background:
        radial-gradient(circle at 9% 50%, rgba(37, 183, 237, .18), transparent 25%),
        radial-gradient(circle at 91% 50%, rgba(204, 140, 34, .15), transparent 25%),
        linear-gradient(110deg, #071e31, #020a13 63%, #191105);
}
.ProtectedPage .RoyalDataHeroIcon.protected {
    background: radial-gradient(circle at 48% 38%, #168dbf, #07334f 58%, #020912 78%);
    color: #ffe09a;
    font-size: 25px;
    text-shadow: 0 2px 2px #000, 0 0 12px #43ceff;
}
.ProtectedPage .ProtectedStatus {
    display: flex;
    min-height: 66px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #8d6527;
    background: rgba(3, 16, 27, .9);
    box-shadow: inset 0 0 14px rgba(46, 180, 230, .13);
}
.ProtectedPage .ProtectedStatus i { width: 8px; height: 8px; border: 1px solid #ff987d; border-radius: 50%; background: #d94431; box-shadow: 0 0 8px #d94431; }
.ProtectedPage .ProtectedStatus strong { margin-top: 7px; color: #ffad96; font: bold 9px/1 Arial, sans-serif; letter-spacing: 1.2px; }
.ProtectedPage .ProtectedStatus small { margin-top: 5px; color: #718b9b; font: bold 6px/1 Arial, sans-serif; letter-spacing: 1px; }
.ProtectedPage .ProtectedStatus.online i { border-color: #7affba; background: #20d47b; box-shadow: 0 0 8px #20d47b; }
.ProtectedPage .ProtectedStatus.online strong { color: #89edbd; }

.ProtectedPage .ProtectedLoginGrid {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    border: 1px solid #805c25;
    border-radius: 4px;
    background: #020a12;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, .55), 0 8px 17px rgba(0, 0, 0, .46);
    overflow: hidden;
}
.ProtectedPage .ProtectedMessage {
    position: relative;
    display: flex;
    min-height: 365px;
    padding: 30px 27px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #31566d;
    background:
        radial-gradient(circle at 50% 32%, rgba(20, 139, 198, .28), transparent 30%),
        linear-gradient(145deg, rgba(8, 34, 53, .98), rgba(2, 9, 16, .99));
    text-align: center;
}
.ProtectedPage .ProtectedMessage::before,
.ProtectedPage .ProtectedMessage::after { content: ""; position: absolute; left: 19px; right: 19px; height: 1px; background: linear-gradient(90deg, transparent, #9b702b, transparent); }
.ProtectedPage .ProtectedMessage::before { top: 15px; }
.ProtectedPage .ProtectedMessage::after { bottom: 15px; }
.ProtectedPage .ProtectedShield {
    position: relative;
    display: grid;
    width: 82px;
    height: 82px;
    margin-bottom: 19px;
    place-items: center;
    border: 2px solid #c18b34;
    border-radius: 50% 50% 44% 44%;
    background: radial-gradient(circle at 50% 38%, #11618e, #05233a 58%, #01070d 80%);
    color: #ffe09a;
    font-size: 32px;
    box-shadow: inset 0 0 0 4px #020b13, inset 0 0 17px rgba(55, 199, 248, .35), 0 0 16px rgba(37, 166, 220, .34);
}
.ProtectedPage .ProtectedShield i { position: absolute; right: 5px; bottom: 7px; width: 11px; height: 11px; border: 1px solid #87ffc1; border-radius: 50%; background: #1bd379; box-shadow: 0 0 8px #1bd379; }
.ProtectedPage .ProtectedMessage > small { color: #5ed5fa; font: bold 7px/1 Arial, sans-serif; letter-spacing: 1.5px; }
.ProtectedPage .ProtectedMessage h2 { margin: 9px 0 10px; color: #ffe09a; font: bold 24px/1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.ProtectedPage .ProtectedMessage > p { max-width: 300px; margin: 0; color: #94adba; font: 10px/1.6 Arial, sans-serif; }
.ProtectedPage .ProtectedMessage ul { display: grid; width: min(285px, 100%); margin: 22px 0 0; padding: 0; gap: 8px; list-style: none; text-align: left; }
.ProtectedPage .ProtectedMessage li { display: flex; min-height: 30px; padding: 0 10px; align-items: center; gap: 9px; border: 1px solid rgba(46, 91, 116, .66); background: rgba(2, 12, 21, .55); color: #a9bfcb; font: 8px/1 Arial, sans-serif; }
.ProtectedPage .ProtectedMessage li span { color: #66e5ae; }

.ProtectedPage .ProtectedLoginCard { padding: 25px; background: radial-gradient(circle at 100% 0, rgba(139, 91, 16, .13), transparent 28%), linear-gradient(145deg, #061521, #020811); }
.ProtectedPage .ProtectedLoginCard > header { display: grid; min-height: 57px; margin-bottom: 14px; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 11px; border-bottom: 1px solid #765522; }
.ProtectedPage .ProtectedLoginCard > header > span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #b68130; border-radius: 50%; background: #061d30; color: #62d8fa; font-size: 16px; box-shadow: inset 0 0 8px rgba(47, 184, 235, .2); }
.ProtectedPage .ProtectedLoginCard header small { color: #5bd4fa; font: bold 6px/1 Arial, sans-serif; letter-spacing: 1.2px; }
.ProtectedPage .ProtectedLoginCard h2 { margin: 5px 0 0; color: #ffe09a; font: bold 19px/1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.ProtectedPage .ProtectedLoginForm { display: grid; gap: 12px; }
.ProtectedPage .ProtectedLoginForm > label { display: grid; gap: 6px; color: #62d4f8; font: bold 7px/1 Arial, sans-serif; letter-spacing: 1px; }
.ProtectedPage .ProtectedLoginForm > label > span b { color: #718a99; font-size: 6px; }
.ProtectedPage .ProtectedLoginForm > label > div { display: grid; grid-template-columns: 39px minmax(0, 1fr) auto; border: 1px solid #32617e; border-radius: 3px; background: #020d17; box-shadow: inset 0 0 10px rgba(0, 0, 0, .7); overflow: hidden; transition: border-color .18s, box-shadow .18s; }
.ProtectedPage .ProtectedLoginForm > label > div:focus-within { border-color: #d29a39; box-shadow: 0 0 0 2px rgba(210, 154, 57, .12), inset 0 0 10px #000; }
.ProtectedPage .ProtectedLoginForm label i { display: grid; min-height: 42px; place-items: center; border-right: 1px solid #25465b; color: #5ed4fa; font: bold 9px Arial, sans-serif; font-style: normal; }
.ProtectedPage .ProtectedLoginForm input { box-sizing: border-box; width: 100%; min-width: 0; height: 42px; padding: 0 11px; border: 0; outline: 0; background: transparent; color: #d8e9f3; font: 10px Arial, sans-serif; }
.ProtectedPage .ProtectedPasswordToggle { padding: 0 10px; border: 0; border-left: 1px solid #25465b; background: #061b2b; color: #e4c47d; font: bold 6px Arial, sans-serif; cursor: pointer; }
.ProtectedPage .ProtectedSubmit {
    display: grid;
    min-height: 46px;
    margin-top: 2px;
    padding: 0 13px;
    grid-template-columns: 26px minmax(0, 1fr) 14px;
    align-items: center;
    border: 1px solid #c18a31;
    background: linear-gradient(#1373a8, #073a5d 57%, #031c2e);
    color: #ffe3a0;
    text-shadow: 0 1px 2px #000;
    box-shadow: inset 0 0 10px rgba(53, 199, 247, .22), 0 4px 9px rgba(0, 0, 0, .55);
    cursor: pointer;
    transition: filter .18s, transform .18s;
}
.ProtectedPage .ProtectedSubmit:hover { filter: brightness(1.2); transform: translateY(-1px); }
.ProtectedPage .ProtectedSubmit span { color: #7fe5ff; font-size: 16px; }
.ProtectedPage .ProtectedSubmit strong { font: bold 8px Arial, sans-serif; letter-spacing: 1px; }
.ProtectedPage .ProtectedSubmit b { color: #65dbff; font-size: 18px; }
.ProtectedPage .ProtectedRecovery { display: flex; margin-top: 15px; padding-top: 13px; align-items: center; justify-content: center; gap: 7px; border-top: 1px solid #1e3c4f; color: #718896; font: 7px/1 Arial, sans-serif; }
.ProtectedPage .ProtectedRecovery a { color: #daba73; font-weight: bold; text-decoration: none; }
.ProtectedPage .ProtectedRecovery i { width: 3px; height: 3px; border-radius: 50%; background: #3a718e; }

.ProtectedPage .ProtectedJoinBanner { display: flex; min-height: 74px; padding: 0 16px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #916829; background: linear-gradient(90deg, #09243a, #030c15 66%, #181105); box-shadow: inset 0 0 15px rgba(35, 164, 217, .12); }
.ProtectedPage .ProtectedJoinBanner > div { display: flex; align-items: center; gap: 12px; }
.ProtectedPage .ProtectedJoinBanner > div > span { color: #5bd8ff; font-size: 23px; text-shadow: 0 0 9px #1684b2; }
.ProtectedPage .ProtectedJoinBanner p { margin: 0; }
.ProtectedPage .ProtectedJoinBanner small { display: block; color: #58d0f5; font: bold 6px/1 Arial, sans-serif; letter-spacing: 1px; }
.ProtectedPage .ProtectedJoinBanner strong { display: block; margin-top: 6px; color: #ffe09a; font: bold 15px/1 Georgia, serif; }
.ProtectedPage .ProtectedJoinBanner > a { padding: 11px 14px; border: 1px solid #b8822f; background: #071d2f; color: #ffe09a; font: bold 7px Arial, sans-serif; letter-spacing: .7px; text-decoration: none; }
.ProtectedPage .ProtectedJoinBanner > a b { margin-left: 6px; color: #61d8fb; font-size: 14px; }

.ProtectedPage .ProtectedTrustBar { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #2d536a; background: rgba(2, 11, 19, .92); }
.ProtectedPage .ProtectedTrustBar > div { display: grid; min-height: 65px; padding: 9px 11px; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; border-right: 1px solid #24465b; }
.ProtectedPage .ProtectedTrustBar > div:last-child { border-right: 0; }
.ProtectedPage .ProtectedTrustBar > div > span { color: #5ed6fa; font-size: 17px; }
.ProtectedPage .ProtectedTrustBar p { margin: 0; }
.ProtectedPage .ProtectedTrustBar strong { display: block; color: #e4c77e; font: bold 7px/1 Arial, sans-serif; letter-spacing: .7px; }
.ProtectedPage .ProtectedTrustBar small { display: block; margin-top: 5px; color: #718a99; font: 7px/1.35 Arial, sans-serif; }

.ProtectedPage .ProtectedGranted { padding: 45px 20px; border: 1px solid #80702a; background: radial-gradient(circle at 50% 15%, rgba(26, 159, 110, .2), transparent 30%), linear-gradient(145deg, #071d28, #020911); text-align: center; box-shadow: inset 0 0 25px rgba(0, 0, 0, .55); }
.ProtectedPage .ProtectedGrantedSeal { display: grid; width: 76px; height: 76px; margin: 0 auto 17px; place-items: center; border: 2px solid #c08a35; border-radius: 50%; background: radial-gradient(circle, #14764f, #042719 65%, #010a07); color: #b4ffdc; font-size: 33px; box-shadow: inset 0 0 12px rgba(87, 255, 181, .22), 0 0 16px rgba(27, 197, 121, .3); }
.ProtectedPage .ProtectedGranted > small { color: #6ae0a9; font: bold 7px Arial, sans-serif; letter-spacing: 1.5px; }
.ProtectedPage .ProtectedGranted h2 { margin: 10px 0 8px; color: #ffe09a; font: bold 26px Georgia, serif; text-shadow: 0 2px 2px #000; }
.ProtectedPage .ProtectedGranted p { margin: 0; color: #93adba; font-size: 10px; }
.ProtectedPage .ProtectedGranted > a { display: inline-grid; min-width: 220px; min-height: 44px; margin-top: 21px; padding: 0 13px; grid-template-columns: 25px 1fr 14px; align-items: center; border: 1px solid #bd8731; background: linear-gradient(#126b9d, #063653); color: #ffe3a0; font: bold 8px Arial, sans-serif; text-decoration: none; }
.ProtectedPage .ProtectedGranted > a span,
.ProtectedPage .ProtectedGranted > a b { color: #61d9fc; font-size: 15px; }

@media (max-width: 740px) {
    .ProtectedPage .ProtectedLoginGrid { grid-template-columns: 1fr; }
    .ProtectedPage .ProtectedMessage { min-height: 300px; border-right: 0; border-bottom: 1px solid #31566d; }
    .ProtectedPage .ProtectedTrustBar { grid-template-columns: 1fr; }
    .ProtectedPage .ProtectedTrustBar > div { border-right: 0; border-bottom: 1px solid #24465b; }
    .ProtectedPage .ProtectedTrustBar > div:last-child { border-bottom: 0; }
}
@media (max-width: 520px) {
    .ProtectedPage .ProtectedHero { grid-template-columns: 58px minmax(0, 1fr); }
    .ProtectedPage .ProtectedStatus { grid-column: 1 / -1; }
    .ProtectedPage .ProtectedLoginCard { padding: 17px 13px; }
    .ProtectedPage .ProtectedJoinBanner { padding: 14px; align-items: stretch; flex-direction: column; }
    .ProtectedPage .ProtectedJoinBanner > a { text-align: center; }
    .ProtectedPage .ProtectedRecovery { align-items: flex-start; flex-direction: column; }
    .ProtectedPage .ProtectedRecovery i { display: none; }
}

/* =========================================================
   NEWS PORTAL — cinematic royal newsroom
   ========================================================= */
.NewsPortalPage .RoyalDataPageShell::before { content: "LATEST NEWS"; }
.NewsPortalPage .NewsPortal { display: grid; gap: 14px; color: #c3d7e3; }
.NewsPortalPage .NewsPortalHero {
    min-height: 116px;
    grid-template-columns: 72px minmax(0, 1fr) 96px;
    background:
        radial-gradient(circle at 9% 50%, rgba(37, 181, 235, .18), transparent 25%),
        radial-gradient(circle at 91% 50%, rgba(210, 146, 38, .16), transparent 25%),
        linear-gradient(110deg, #071d30, #020a13 63%, #191105);
}
.NewsPortalPage .RoyalDataHeroIcon.news {
    background: radial-gradient(circle at 48% 38%, #178fc3, #07334f 58%, #020912 78%);
    color: #ffdf8f;
    font-size: 27px;
    text-shadow: 0 2px 2px #000, 0 0 12px #4bd4ff;
}
.NewsPortalPage .NewsPortalStats {
    display: flex;
    min-height: 67px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #916929;
    background: rgba(3, 16, 27, .88);
    box-shadow: inset 0 0 15px rgba(44, 181, 231, .13);
}
.NewsPortalPage .NewsPortalStats strong { color: #63dcff; font: bold 26px/1 Georgia, serif; text-shadow: 0 0 9px #167fae; }
.NewsPortalPage .NewsPortalStats small { margin-top: 5px; color: #e7c779; font: bold 6px/1 Arial, sans-serif; letter-spacing: 1.1px; }
.NewsPortalPage .NewsPortalStats time { margin-top: 7px; color: #728d9d; font: bold 7px/1 Arial, sans-serif; text-transform: uppercase; }

.NewsPortalPage .NewsPatchRibbon {
    overflow: hidden;
    border: 1px solid #765723;
    background: linear-gradient(145deg, rgba(6, 26, 41, .97), rgba(2, 9, 16, .99));
    box-shadow: inset 0 0 16px rgba(0, 0, 0, .48), 0 4px 10px rgba(0, 0, 0, .38);
}
.NewsPortalPage .NewsPatchRibbon > header {
    display: grid;
    min-height: 48px;
    padding: 0 12px;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid #294d63;
    background: linear-gradient(90deg, rgba(14, 52, 77, .88), rgba(3, 14, 23, .72));
}
.NewsPortalPage .NewsPatchRibbon > header > span { color: #5cd7fc; font-size: 18px; text-shadow: 0 0 8px #1389ba; }
.NewsPortalPage .NewsPatchRibbon header small { display: block; color: #5bd4fa; font: bold 6px/1 Arial, sans-serif; letter-spacing: 1px; }
.NewsPortalPage .NewsPatchRibbon header strong { display: block; margin-top: 4px; color: #ffe09a; font: bold 13px/1 Georgia, serif; }
.NewsPortalPage .NewsPatchRibbon header a { padding: 8px 10px; border: 1px solid #956a28; color: #e5c47b; font: bold 6px/1 Arial, sans-serif; text-decoration: none; }
.NewsPortalPage .NewsPatchRibbon > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.NewsPortalPage .NewsPatchRibbon article { display: grid; min-height: 48px; padding: 9px 11px; grid-template-columns: 43px minmax(0, 1fr); align-items: center; gap: 8px; border-right: 1px solid #1f4054; }
.NewsPortalPage .NewsPatchRibbon article:last-child { border-right: 0; }
.NewsPortalPage .NewsPatchRibbon article time { color: #e9c97d; font: bold 7px/1 Arial, sans-serif; text-transform: uppercase; }
.NewsPortalPage .NewsPatchRibbon article p { overflow: hidden; margin: 0; color: #91aab8; font: 8px/1.4 Arial, sans-serif; white-space: nowrap; text-overflow: ellipsis; }

.NewsPortalPage .NewsPortalFeed { display: grid; gap: 15px; }
.NewsPortalPage .NewsPortalArticle {
    overflow: hidden;
    border: 1px solid #745623;
    border-radius: 4px;
    background: linear-gradient(145deg, rgba(6, 25, 39, .99), rgba(2, 8, 14, .99));
    box-shadow: inset 0 0 23px rgba(0, 0, 0, .48), 0 8px 16px rgba(0, 0, 0, .46);
}
.NewsPortalPage .NewsPortalArticle.featured { border-color: #ad7b2b; box-shadow: inset 0 0 24px rgba(27, 144, 190, .06), 0 0 15px rgba(30, 157, 207, .14), 0 9px 17px rgba(0, 0, 0, .48); }
.NewsPortalPage .NewsArticleHeader {
    display: grid;
    min-height: 86px;
    padding: 0 15px;
    grid-template-columns: 52px minmax(0, 1fr) 25px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #31586f;
    background:
        linear-gradient(90deg, rgba(15, 56, 82, .94), rgba(4, 17, 28, .84) 70%, rgba(44, 31, 8, .38));
}
.NewsPortalPage .NewsArticleCrest > span {
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    border: 1px solid #bd8731;
    border-radius: 50%;
    background: radial-gradient(circle at 48% 40%, #0e527a, #03101b 72%);
    color: #ffe09a;
    font-size: 20px;
    box-shadow: inset 0 0 9px rgba(55, 194, 242, .2), 0 0 10px rgba(190, 135, 43, .22);
}
.NewsPortalPage .NewsArticleBadges { display: flex; align-items: center; gap: 6px; }
.NewsPortalPage .NewsArticleBadges span,
.NewsPortalPage .NewsArticleBadges b { padding: 5px 7px; border: 1px solid #3a7899; color: #65d7fa; font: bold 6px/1 Arial, sans-serif; letter-spacing: .9px; }
.NewsPortalPage .NewsArticleBadges b { border-color: #765a2b; color: #e8c779; }
.NewsPortalPage .NewsArticleHeading h2 { margin: 7px 0 5px; color: #ffe09a; font: bold 21px/1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.NewsPortalPage .NewsArticleHeading > p { display: flex; margin: 0; align-items: center; gap: 7px; color: #7892a1; font: bold 7px/1 Arial, sans-serif; letter-spacing: .5px; }
.NewsPortalPage .NewsArticleHeading > p i { display: block; width: 3px; height: 3px; border-radius: 50%; background: #bd8731; }
.NewsPortalPage .NewsArticleHeading > p a,
.NewsPortalPage .NewsArticleHeading > p strong { color: #60d3f6; text-decoration: none; }
.NewsPortalPage .NewsArticleAnchor { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #536d7d; border-radius: 50%; color: #829daa; font: bold 9px Arial, sans-serif; text-decoration: none; }

.NewsPortalPage .NewsArticleBody {
    overflow: hidden;
    min-height: 90px;
    padding: 18px;
    color: #b9ccd7;
    font: 11px/1.65 Arial, sans-serif;
    overflow-wrap: anywhere;
}
.NewsPortalPage .NewsPortalArticle.featured .NewsArticleBody { padding: 20px; }
.NewsPortalPage .NewsArticleBody > :first-child { margin-top: 0 !important; }
.NewsPortalPage .NewsArticleBody > :last-child { margin-bottom: 0 !important; }
.NewsPortalPage .NewsArticleBody h1,
.NewsPortalPage .NewsArticleBody h2,
.NewsPortalPage .NewsArticleBody h3 { color: #ffe09a; font-family: Georgia, serif; text-shadow: 0 2px 2px #000; }
.NewsPortalPage .NewsArticleBody a { color: #62d7fb; }
.NewsPortalPage .NewsArticleBody li { margin: 5px 0; color: #b9ccd7; }
.NewsPortalPage .NewsArticleBody img {
    display: block;
    box-sizing: border-box;
    max-width: 100% !important;
    height: auto !important;
    margin: 12px auto;
    border: 1px solid #a4772e;
    background: #01070c;
    box-shadow: 0 0 0 4px rgba(2, 12, 20, .9), 0 7px 17px rgba(0, 0, 0, .62);
    cursor: zoom-in;
    transition: filter .2s ease, transform .2s ease;
}
.NewsPortalPage .NewsArticleBody img:hover { filter: brightness(1.08); transform: translateY(-2px); }
.NewsPortalPage .NewsTextCenter { text-align: center; }
.NewsPortalPage .NewsVideo { position: relative; overflow: hidden; height: 0; margin: 14px 0; padding-bottom: 56.25%; border: 1px solid #8b672b; background: #000; }
.NewsPortalPage .NewsVideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.NewsPortalPage .NewsArticleFooter { display: flex; min-height: 42px; padding: 0 14px; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #1e3d50; background: rgba(1, 8, 14, .72); }
.NewsPortalPage .NewsArticleFooter span { display: flex; align-items: center; gap: 7px; color: #647e8d; font: bold 6px/1 Arial, sans-serif; letter-spacing: 1px; }
.NewsPortalPage .NewsArticleFooter span i { width: 6px; height: 6px; border-radius: 50%; background: #1bc879; box-shadow: 0 0 6px #1bc879; }
.NewsPortalPage .NewsArticleFooter a { color: #dcbf78; font: bold 6px/1 Arial, sans-serif; letter-spacing: .7px; text-decoration: none; }
.NewsPortalPage .NewsArticleFooter a:hover { color: #61d8fb; }

.NewsPortalPage .NewsPortalEmpty { padding: 50px 18px; border: 1px solid #315970; background: rgba(3, 15, 24, .92); text-align: center; }
.NewsPortalPage .NewsPortalEmpty > span { color: #5bd7ff; font-size: 32px; text-shadow: 0 0 10px #197da8; }
.NewsPortalPage .NewsPortalEmpty h2 { margin: 13px 0 7px; color: #ffe09a; font: bold 21px Georgia, serif; }
.NewsPortalPage .NewsPortalEmpty p { margin: 0; color: #829aa9; font-size: 10px; }
.NewsPortalPage .NewsPortalEmpty a { display: inline-flex; margin-top: 17px; padding: 11px 15px; border: 1px solid #b98230; background: #0a395b; color: #ffe09a; font: bold 7px Arial, sans-serif; text-decoration: none; }

.NewsImageLightbox[hidden] { display: none !important; }
.NewsImageLightbox {
    position: fixed;
    z-index: 100000;
    inset: 0;
    display: flex;
    padding: 55px;
    align-items: center;
    justify-content: center;
    background: rgba(0, 5, 10, .94);
    backdrop-filter: blur(6px);
}
.NewsImageLightbox img { display: block; max-width: 92vw; max-height: 82vh; border: 1px solid #c18a32; box-shadow: 0 0 0 5px #06121c, 0 0 35px rgba(36, 173, 226, .28); }
.NewsImageLightbox button { position: absolute; top: 20px; right: 24px; width: 40px; height: 40px; border: 1px solid #aa7830; border-radius: 50%; background: #071928; color: #ffe09a; cursor: pointer; }
.NewsImageLightbox > p { position: absolute; bottom: 17px; margin: 0; color: #7893a2; font: bold 7px Arial, sans-serif; letter-spacing: 1px; }
body.NewsLightboxOpen { overflow: hidden; }

@media (max-width: 760px) {
    .NewsPortalPage .NewsPatchRibbon > div { grid-template-columns: 1fr; }
    .NewsPortalPage .NewsPatchRibbon article { border-right: 0; border-bottom: 1px solid #1f4054; }
    .NewsPortalPage .NewsPatchRibbon article:last-child { border-bottom: 0; }
}
@media (max-width: 540px) {
    .NewsPortalPage .NewsPortalHero { grid-template-columns: 58px minmax(0, 1fr); }
    .NewsPortalPage .NewsPortalStats { grid-column: 1 / -1; }
    .NewsPortalPage .NewsArticleHeader { min-height: 78px; padding: 8px 10px; grid-template-columns: 42px minmax(0, 1fr); }
    .NewsPortalPage .NewsArticleCrest > span { width: 36px; height: 36px; font-size: 15px; }
    .NewsPortalPage .NewsArticleAnchor { display: none; }
    .NewsPortalPage .NewsArticleHeading h2 { font-size: 17px; }
    .NewsPortalPage .NewsArticleBody, .NewsPortalPage .NewsPortalArticle.featured .NewsArticleBody { padding: 13px; }
    .NewsPortalPage .NewsArticleFooter { align-items: flex-start; flex-direction: column; padding-top: 10px; padding-bottom: 10px; }
    .NewsImageLightbox { padding: 20px; }
}

/* Monster-free premium server status card. */
#RightSidebar .RightOnlineCard {
    display: flex;
    min-height: 122px;
    margin: 0 7px 15px;
    padding: 17px 14px 14px;
    align-items: center;
    justify-content: center;
    border-color: #c28a34;
    background:
        linear-gradient(90deg, transparent, rgba(52, 185, 247, .08) 50%, transparent),
        radial-gradient(circle at 50% 54%, rgba(15, 129, 207, .28), transparent 47%),
        linear-gradient(160deg, #071c31, #010812 72%);
    box-shadow: inset 0 0 0 2px #020711, inset 0 0 0 3px rgba(226, 170, 68, .4), inset 0 0 24px rgba(7, 102, 168, .2), 0 5px 10px rgba(0, 0, 0, .82), 0 0 9px rgba(19, 131, 203, .22);
}

#RightSidebar .RightOnlineCard::before {
    right: 8px;
    bottom: 7px;
    left: 8px;
    height: 8px;
    border-color: rgba(211, 158, 65, .62);
}

#RightSidebar .RightOnlineCard .OnlineCopy {
    width: 100%;
    align-items: center;
}

#RightSidebar .RightOnlineCard .OnlineCopy small {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a9cfe6;
    font: bold 7px/1 Arial, sans-serif;
    letter-spacing: 1.7px;
}

#RightSidebar .RightOnlineCard .OnlineCopy small i {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3ff18a;
    box-shadow: 0 0 6px #39ed84;
}

#RightSidebar .RightOnlineCard .OnlineCopy strong {
    position: relative;
    width: 100%;
    margin: 10px 0 4px;
    color: #f6d58a;
    font: bold 12px/1 Georgia, "Times New Roman", serif;
    letter-spacing: .4px;
    white-space: nowrap;
    text-shadow: 0 2px 2px #000, 0 0 8px rgba(219, 162, 62, .28);
}

#RightSidebar .RightOnlineCard .OnlineCopy strong::before,
#RightSidebar .RightOnlineCard .OnlineCopy strong::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 1px;
    margin: 0 4px 4px;
    background: linear-gradient(90deg, transparent, #b57c29);
}

#RightSidebar .RightOnlineCard .OnlineCopy strong::after {
    background: linear-gradient(90deg, #b57c29, transparent);
}

#RightSidebar .RightOnlineCard .OnlineCount {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 11px;
}

#RightSidebar .RightOnlineCard .OnlineCount b {
    margin: 0;
    color: #f4fdff;
    font: 800 42px/.9 Arial, sans-serif;
    text-shadow: 0 0 4px #fff, 0 0 14px #179eea, 0 3px 3px #000;
}

#RightSidebar .RightOnlineCard .OnlineCount em {
    padding: 5px 7px;
    border: 1px solid rgba(55, 195, 127, .42);
    border-radius: 2px;
    background: rgba(14, 87, 57, .18);
    color: #72eaa9;
    font: bold 7px/1 Arial, sans-serif;
    letter-spacing: .75px;
    text-transform: uppercase;
}

#RightSidebar .RightOnlineCard .OnlinePulse {
    top: 10px;
    right: 10px;
}

/* =========================================================
   HIGHSCORES — Hall of legends
   ========================================================= */
.HighscoresPage .HighscoresPageShell {
    position: relative;
    margin: 0 5px 24px;
    overflow: visible;
    border: 1px solid #a66d20;
    border-radius: 5px;
    background: linear-gradient(180deg, #071526, #01070e);
    color: #d9eaf5;
    box-shadow: inset 0 0 0 2px #02060b, inset 0 0 0 3px rgba(47, 157, 221, .25), inset 0 0 30px rgba(0, 0, 0, .84), 0 10px 20px rgba(0, 0, 0, .7);
}

.HighscoresPage .HighscoresPageShell > .Corner-tl,
.HighscoresPage .HighscoresPageShell > .Corner-tr,
.HighscoresPage .HighscoresPageShell > .Border_1,
.HighscoresPage .HighscoresPageShell > .BorderTitleText,
.HighscoresPage .HighscoresPageShell > .Title,
.HighscoresPage .HighscoresPageShell > .CornerWrapper-b {
    display: none;
}

.HighscoresPage .HighscoresPageShell::before {
    content: "HIGHSCORES";
    display: flex;
    box-sizing: border-box;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #99651d;
    border-radius: 4px 4px 0 0;
    background: radial-gradient(circle at 50% 120%, rgba(13, 132, 207, .38), transparent 44%), linear-gradient(180deg, #102a45, #06111e 70%, #02070e);
    color: #ffe0a2;
    font: bold 21px/1 Georgia, "Times New Roman", serif;
    letter-spacing: 1.7px;
    text-shadow: 0 2px 2px #000, 0 0 9px rgba(43, 165, 234, .7);
    box-shadow: inset 0 -1px rgba(69, 188, 248, .3), inset 0 0 0 3px #020811;
}

.HighscoresPage .HighscoresPageShell::after {
    content: "";
    position: absolute;
    top: 39px;
    left: 50%;
    z-index: 5;
    width: 15px;
    height: 15px;
    border: 2px solid #e1ab45;
    background: linear-gradient(135deg, #d6faff, #39c9ff 27%, #087bd3 62%, #002b66);
    box-shadow: inset 0 0 0 2px #06264e, 0 0 0 2px #211202, 0 0 10px #0ba3f8;
    transform: translateX(-50%) rotate(45deg);
}

.HighscoresPage .HighscoresPageShell > .Border_2 {
    margin: 0;
    padding: 4px;
    background: linear-gradient(90deg, #3d250b, #b17925 17%, #274253 50%, #b17925 83%, #3d250b);
}

.HighscoresPage .HighscoresPageShell > .Border_2 > .Border_3 {
    margin: 0;
    background: #020711;
}

.HighscoresPage .HighscoresPageShell .BoxContent {
    box-sizing: border-box;
    min-height: 0;
    padding: 17px;
    background-color: #06101d !important;
    background-image: radial-gradient(circle at 50% 0, rgba(17, 108, 169, .2), transparent 38%), linear-gradient(180deg, #081725, #030912) !important;
    color: #ccdfec;
    font-family: Arial, sans-serif;
}

.HighscoresPage .HighscoresDashboard {
    display: grid;
    gap: 14px;
}

.HighscoresPage .HighscoresHero {
    position: relative;
    display: grid;
    min-height: 118px;
    padding: 18px 22px;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    overflow: hidden;
    border: 1px solid #9b6b27;
    border-radius: 4px;
    background: radial-gradient(circle at 10% 50%, rgba(20, 136, 205, .35), transparent 24%), linear-gradient(125deg, #0a2742, #030b16 60%, #171004);
    box-shadow: inset 0 0 0 2px #020711, inset 0 0 20px rgba(0, 0, 0, .58), 0 6px 12px rgba(0, 0, 0, .55);
}

.HighscoresPage .HighscoresHero::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -22%;
    width: 18%;
    height: 340%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
    transform: rotate(25deg);
}

.HighscoresPage .HighscoresCrown {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border: 2px solid #d1a144;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 34%, #31a8dc, #092b4a 56%, #010811);
    color: #ffe29a;
    font: bold 29px/66px Georgia, "Times New Roman", serif;
    text-shadow: 0 2px 2px #000, 0 0 9px #43caff;
    box-shadow: inset 0 0 0 3px #020812, inset 0 0 15px rgba(65, 195, 246, .45), 0 0 12px rgba(29, 153, 215, .4);
}

.HighscoresPage .HighscoresHero small {
    color: #67d4fb;
    font: bold 8px/1 Arial, sans-serif;
    letter-spacing: 2px;
}

.HighscoresPage .HighscoresHero h1 {
    margin: 5px 0 5px;
    color: #ffe0a0;
    font: bold 29px/1 Georgia, "Times New Roman", serif;
    letter-spacing: .8px;
    text-shadow: 0 2px 2px #000, 0 0 8px rgba(43, 164, 231, .55);
}

.HighscoresPage .HighscoresHero p {
    margin: 0;
    color: #9cb5c5;
    font: 12px/1.45 Arial, sans-serif;
}

.HighscoresPage .HighscoresHero p strong { color: #eaca82; }

.HighscoresPage .HighscoresFilters {
    display: grid;
    padding: 13px;
    grid-template-columns: 1.15fr 1.35fr 1fr auto;
    align-items: end;
    gap: 9px;
    border: 1px solid #76511e;
    border-radius: 4px;
    background: rgba(2, 10, 18, .92);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .62);
}

.HighscoresPage .HighscoresFilters label {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.HighscoresPage .HighscoresFilters label > span {
    color: #68cbed;
    font: bold 8px/1 Arial, sans-serif;
    letter-spacing: 1.1px;
}

.HighscoresPage .HighscoresFilters select {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #2e668b;
    border-radius: 3px;
    background: #020b15;
    color: #d8eaf6;
    font: 11px/1 Arial, sans-serif;
    box-shadow: inset 0 0 9px rgba(0, 0, 0, .68);
    outline: none;
}

.HighscoresPage .HighscoresFilters select:focus {
    border-color: #63d2fb;
    box-shadow: inset 0 0 9px rgba(0, 0, 0, .68), 0 0 8px rgba(36, 168, 230, .42);
}

.HighscoresPage .HighscoresFilters button {
    display: flex;
    height: 40px;
    padding: 0 17px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #d19a3a;
    border-radius: 3px;
    background: linear-gradient(180deg, #166b9f, #062742 56%, #020b14);
    color: #ffe3a5;
    font: bold 10px/1 Arial, sans-serif;
    letter-spacing: .6px;
    text-shadow: 0 1px 2px #000;
    box-shadow: inset 0 0 0 2px #020711, inset 0 0 10px rgba(54, 190, 244, .3), 0 4px 8px rgba(0, 0, 0, .54);
    cursor: pointer;
    white-space: nowrap;
    transition: filter .18s ease, transform .18s ease;
}

.HighscoresPage .HighscoresFilters button:hover { filter: brightness(1.18); transform: translateY(-1px); }
.HighscoresPage .HighscoresFilters button span { color: #64dcff; }

.HighscoresPage .HighscoresTableFrame {
    overflow: hidden;
    border: 1px solid #9b6b27;
    border-radius: 4px;
    background: #020913;
    box-shadow: inset 0 0 0 2px #02060b, 0 7px 14px rgba(0, 0, 0, .55);
}

.HighscoresPage .HighscoresTableHeading {
    display: flex;
    min-height: 47px;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #9a6824;
    background: linear-gradient(180deg, #102b45, #061321);
}

.HighscoresPage .HighscoresTableHeading span {
    color: #ffe0a0;
    font: bold 16px/1 Georgia, "Times New Roman", serif;
    letter-spacing: .7px;
    text-shadow: 0 2px 2px #000;
}

.HighscoresPage .HighscoresTableHeading small {
    color: #65d4fb;
    font: bold 8px/1 Arial, sans-serif;
    letter-spacing: .8px;
}

.HighscoresPage .HighscoresTableScroll { overflow-x: auto; }

.HighscoresPage .HighscoresTable {
    width: 100%;
    min-width: 670px;
    margin: 0;
    border-collapse: collapse;
    color: #c7dae6;
    font: 11px/1.25 Arial, sans-serif;
}

.HighscoresPage .HighscoresTable th {
    height: 35px;
    padding: 0 11px;
    border-bottom: 1px solid #2b5875;
    background: #061624;
    color: #75d9fc;
    font-size: 8px;
    letter-spacing: 1px;
    text-align: left;
}

.HighscoresPage .HighscoresTable td {
    height: 57px;
    padding: 7px 11px;
    border-bottom: 1px solid #17354b;
    background: rgba(6, 19, 31, .93);
    vertical-align: middle;
}

.HighscoresPage .HighscoreRow:nth-child(even) td { background: rgba(9, 27, 42, .96); }
.HighscoresPage .HighscoreRow:hover td { background: rgba(13, 48, 72, .98); }

.HighscoresPage .HighscoreOutfitColumn { width: 62px; text-align: center !important; }
.HighscoresPage .HighscoreOutfit { text-align: center; }
.HighscoresPage .HighscoreOutfit span {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #315e79;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 132, 192, .26), #020913 70%);
    box-shadow: inset 0 0 10px rgba(27, 131, 190, .24), 0 0 6px rgba(0, 0, 0, .55);
}
.HighscoresPage .HighscoreOutfit img {
    display: block;
    width: 58px;
    height: 58px;
    max-width: none;
    max-height: none;
    border: 0;
    object-fit: contain;
    image-rendering: auto;
    transform: translate(-17px, -20px);
}

.HighscoresPage .HighscoreOutfit img.is-wide {
    width: 34px;
    height: 34px;
    transform: none;
}

.HighscoresPage .HighscoreRank span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #5e4b2e;
    border-radius: 50%;
    background: #07111b;
    color: #c2d4df;
    font: bold 12px/30px Georgia, "Times New Roman", serif;
}

.HighscoresPage .rank-first .HighscoreRank span { border-color: #e3ad3d; background: radial-gradient(circle, #976516, #271503 70%); color: #fff0ad; box-shadow: 0 0 10px rgba(229, 174, 60, .42); }
.HighscoresPage .rank-second .HighscoreRank span { border-color: #aebdca; background: radial-gradient(circle, #536677, #17212b 70%); color: #f1f8ff; }
.HighscoresPage .rank-third .HighscoreRank span { border-color: #ba7543; background: radial-gradient(circle, #743b20, #251008 70%); color: #ffd2af; }

.HighscoresPage .HighscorePlayer { white-space: nowrap; }
.HighscoresPage .HighscorePlayer a {
    color: #ffe09a;
    font: bold 13px/1 Georgia, "Times New Roman", serif;
    text-decoration: none;
    text-shadow: 0 1px 2px #000;
}
.HighscoresPage .HighscorePlayer a:hover { color: #62d8ff; }
.HighscoresPage .HighscoreFlag { width: 16px; margin-right: 7px; vertical-align: middle; }
.HighscoresPage .HighscoreVocation { color: #9ec4d8; }
.HighscoresPage #highscoresTable td.HighscoreValue { color: #67dcff; font-weight: bold; }
.HighscoresPage #highscoresTable td.HighscoreExperience { color: #e7ca88; font-weight: bold; }

.HighscoresPage .HighscoresEmpty td { height: 180px; text-align: center; }
.HighscoresPage .HighscoresEmpty td > span { display: block; margin-bottom: 9px; color: #55d3ff; font-size: 30px; text-shadow: 0 0 9px #188acb; }
.HighscoresPage .HighscoresEmpty strong { display: block; color: #ffe0a0; font: bold 17px/1.2 Georgia, "Times New Roman", serif; }
.HighscoresPage .HighscoresEmpty small { display: block; margin-top: 7px; color: #829aaa; }

@media (max-width: 760px) {
    .HighscoresPage .HighscoresFilters { grid-template-columns: 1fr 1fr; }
    .HighscoresPage .HighscoresFilters button { width: 100%; }
}

@media (max-width: 560px) {
    .HighscoresPage .HighscoresPageShell .BoxContent { padding: 10px; }
    .HighscoresPage .HighscoresHero { padding: 16px; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
    .HighscoresPage .HighscoresCrown { width: 48px; height: 48px; font-size: 21px; }
    .HighscoresPage .HighscoresHero h1 { font-size: 23px; }
    .HighscoresPage .HighscoresFilters { grid-template-columns: 1fr; }
}

/* =========================================================
   ROYAL DATA PAGES — search, deaths, kills, houses and support
   ========================================================= */
.RoyalDataPage .RoyalDataPageShell {
    position: relative;
    margin: 0 5px 24px;
    overflow: visible;
    border: 1px solid #a66d20;
    border-radius: 5px;
    background: linear-gradient(180deg, #071526, #01070e);
    color: #d9eaf5;
    box-shadow: inset 0 0 0 2px #02060b, inset 0 0 0 3px rgba(47, 157, 221, .25), inset 0 0 30px rgba(0, 0, 0, .84), 0 10px 20px rgba(0, 0, 0, .7);
}

.RoyalDataPage .RoyalDataPageShell > .Corner-tl,
.RoyalDataPage .RoyalDataPageShell > .Corner-tr,
.RoyalDataPage .RoyalDataPageShell > .Border_1,
.RoyalDataPage .RoyalDataPageShell > .BorderTitleText,
.RoyalDataPage .RoyalDataPageShell > .Title,
.RoyalDataPage .RoyalDataPageShell > .CornerWrapper-b { display: none; }

.RoyalDataPage .RoyalDataPageShell::before {
    display: flex;
    box-sizing: border-box;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #99651d;
    border-radius: 4px 4px 0 0;
    background: radial-gradient(circle at 50% 120%, rgba(13, 132, 207, .38), transparent 44%), linear-gradient(180deg, #102a45, #06111e 70%, #02070e);
    color: #ffe0a2;
    font: bold 21px/1 Georgia, "Times New Roman", serif;
    letter-spacing: 1.6px;
    text-shadow: 0 2px 2px #000, 0 0 9px rgba(43, 165, 234, .7);
    box-shadow: inset 0 -1px rgba(69, 188, 248, .3), inset 0 0 0 3px #020811;
}

.CharacterSearchPage .RoyalDataPageShell::before { content: "CHARACTER SEARCH"; }
.DeathsPage .RoyalDataPageShell::before { content: "LATEST DEATHS"; }
.KillersPage .RoyalDataPageShell::before { content: "KILL STATISTICS"; }
.HousesPage .RoyalDataPageShell::before { content: "HOUSES"; }
.ServerInfoPage .RoyalDataPageShell::before { content: "SERVER INFORMATION"; }
.SupportPage .RoyalDataPageShell::before { content: "SUPPORT TEAM"; }
.ServerRulesPage .RoyalDataPageShell::before { content: "SERVER RULES"; }

.RoyalDataPage .RoyalDataPageShell::after {
    content: "";
    position: absolute;
    top: 39px;
    left: 50%;
    z-index: 5;
    width: 15px;
    height: 15px;
    border: 2px solid #e1ab45;
    background: linear-gradient(135deg, #d6faff, #39c9ff 27%, #087bd3 62%, #002b66);
    box-shadow: inset 0 0 0 2px #06264e, 0 0 0 2px #211202, 0 0 10px #0ba3f8;
    transform: translateX(-50%) rotate(45deg);
}

.RoyalDataPage .RoyalDataPageShell > .Border_2 {
    margin: 0;
    padding: 4px;
    background: linear-gradient(90deg, #3d250b, #b17925 17%, #274253 50%, #b17925 83%, #3d250b);
}

.RoyalDataPage .RoyalDataPageShell > .Border_2 > .Border_3 { margin: 0; background: #020711; }
.RoyalDataPage .RoyalDataPageShell .BoxContent {
    box-sizing: border-box;
    min-height: 0;
    padding: 17px;
    background-color: #06101d !important;
    background-image: radial-gradient(circle at 50% 0, rgba(17, 108, 169, .2), transparent 38%), linear-gradient(180deg, #081725, #030912) !important;
    color: #ccdfec;
    font-family: Arial, sans-serif;
}

.RoyalDataDashboard { display: grid; gap: 14px; }
.RoyalDataHero {
    position: relative;
    display: grid;
    min-height: 116px;
    padding: 18px 22px;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    overflow: hidden;
    border: 1px solid #956525;
    border-radius: 4px;
    background: radial-gradient(circle at 10% 50%, rgba(17, 132, 204, .34), transparent 24%), linear-gradient(125deg, #0a2742, #030b16 60%, #171004);
    box-shadow: inset 0 0 0 2px #020711, inset 0 0 20px rgba(0, 0, 0, .58), 0 6px 12px rgba(0, 0, 0, .55);
}
.RoyalDataHeroIcon {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 2px solid #d1a144;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 34%, #31a8dc, #092b4a 56%, #010811);
    color: #ffe29a;
    font: bold 27px/62px Georgia, "Times New Roman", serif;
    text-shadow: 0 2px 2px #000, 0 0 9px #43caff;
    box-shadow: inset 0 0 0 3px #020812, inset 0 0 15px rgba(65, 195, 246, .45), 0 0 12px rgba(29, 153, 215, .4);
}
.RoyalDataHeroIcon.danger { background: radial-gradient(circle at 50% 34%, #b74a3c, #48130f 58%, #0c0203); color: #ffd1b7; text-shadow: 0 2px 2px #000, 0 0 8px #f04b37; }
.RoyalDataHeroIcon.support { background: radial-gradient(circle at 50% 34%, #2e9b79, #0a3d35 58%, #010b0a); color: #d3ffe8; text-shadow: 0 2px 2px #000, 0 0 8px #3de8a6; }
.RoyalDataHero div > small { color: #67d4fb; font: bold 8px/1 Arial, sans-serif; letter-spacing: 1.8px; }
.RoyalDataHero h1 { margin: 5px 0; color: #ffe0a0; font: bold 28px/1 Georgia, "Times New Roman", serif; text-shadow: 0 2px 2px #000, 0 0 8px rgba(43,164,231,.5); }
.RoyalDataHero p { margin: 0; color: #9eb6c5; font: 12px/1.45 Arial, sans-serif; }
.RoyalDataHero p strong { color: #eaca82; }
.RoyalDataCount { display: flex; min-width: 66px; flex-direction: column; color: #effcff; font: bold 28px/1 Arial, sans-serif; text-align: center; text-shadow: 0 0 10px #159dff; }
.RoyalDataCount small { margin-top: 5px; color: #69d5fa; font: bold 7px/1 Arial, sans-serif; letter-spacing: 1px; text-shadow: none; }

.RoyalTableFrame { overflow: hidden; border: 1px solid #956525; border-radius: 4px; background: #020913; box-shadow: inset 0 0 0 2px #02060b, 0 7px 14px rgba(0,0,0,.55); }
.RoyalTableHeading { display: flex; min-height: 47px; padding: 0 16px; align-items: center; justify-content: space-between; border-bottom: 1px solid #956525; background: linear-gradient(180deg, #102b45, #061321); }
.RoyalTableHeading span { color: #ffe0a0; font: bold 16px/1 Georgia, "Times New Roman", serif; letter-spacing: .6px; text-shadow: 0 2px 2px #000; }
.RoyalTableHeading small { color: #65d4fb; font: bold 8px/1 Arial, sans-serif; letter-spacing: .7px; }
.RoyalTableScroll { overflow-x: auto; }
.RoyalDataTable { width: 100%; min-width: 610px; margin: 0; border-collapse: collapse; color: #c7dae6; font: 11px/1.25 Arial, sans-serif; }
.RoyalDataTable th { height: 35px; padding: 0 12px; border-bottom: 1px solid #2b5875; background: #061624; color: #75d9fc; font-size: 8px; letter-spacing: 1px; text-align: left; }
.RoyalDataTable td { height: 50px; padding: 7px 12px; border-bottom: 1px solid #17354b; background: rgba(6,19,31,.93); vertical-align: middle; }
.RoyalDataTable tbody tr:nth-child(even) td { background: rgba(9,27,42,.96); }
.RoyalDataTable tbody tr:hover td { background: rgba(13,48,72,.98); }
.RoyalDataTable a { color: #ffe09a; font-weight: bold; text-decoration: none; }
.RoyalDataTable a:hover { color: #62d8ff; }
.RoyalLevelBadge, .RoyalRankBadge { display: inline-grid; min-width: 27px; height: 27px; padding: 0 4px; place-items: center; border: 1px solid #8c672e; border-radius: 50%; background: #07111b; color: #e8ca86; font-weight: bold; }
.RoyalDataPage .RoyalDataTable td.RoyalTimeCell { color: #9fc4d8 !important; white-space: nowrap; }
.RoyalMonsterName { color: #e2b77b; font-weight: normal; }
.RoyalTypeBadge, .RoyalRoleBadge, .RoyalStatusBadge { display: inline-flex; min-height: 23px; padding: 0 8px; align-items: center; border: 1px solid #32637f; border-radius: 2px; background: rgba(8,45,68,.42); color: #74d8fb; font: bold 7px/1 Arial, sans-serif; letter-spacing: .7px; }
.RoyalTypeBadge.player { border-color: #855c9b; color: #d9a5f1; background: rgba(66,28,82,.38); }
.RoyalTypeBadge.monster { border-color: #8b5d32; color: #e8b476; background: rgba(74,39,12,.38); }
.RoyalRoleBadge { border-color: #9a6c2b; color: #f0cd85; background: rgba(79,49,10,.38); }
.RoyalStatusBadge { gap: 6px; }
.RoyalStatusBadge i { width: 6px; height: 6px; border-radius: 50%; }
.RoyalStatusBadge.online { border-color: #297854; color: #63e7a1; }
.RoyalStatusBadge.online i { background: #36e985; box-shadow: 0 0 6px #36e985; }
.RoyalStatusBadge.offline { border-color: #5a6670; color: #91a0aa; }
.RoyalStatusBadge.offline i { background: #69737b; }
.RoyalDataPage .RoyalDataTable td.RoyalStatValue { color: #68d9ff !important; font-weight: bold; }
.RoyalDataPage .RoyalDataTable td.RoyalStatValue.danger { color: #ff806e !important; }

/* Latest deaths: larger battle log typography and stronger row hierarchy. */
.DeathsPage .RoyalDataHero div > small { font-size: 10px; letter-spacing: 2px; }
.DeathsPage .RoyalDataHero p { color: #b8cbd6; font-size: 14px; line-height: 1.55; }
.DeathsPage .RoyalDataCount { font-size: 31px; }
.DeathsPage .RoyalDataCount small { margin-top: 7px; font-size: 9px; letter-spacing: 1.3px; }
.DeathsPage .RoyalTableHeading { min-height: 51px; padding: 0 17px; }
.DeathsPage .RoyalTableHeading span { font-size: 18px; }
.DeathsPage .RoyalTableHeading small { font-size: 10px; letter-spacing: .8px; }
.DeathsPage .DeathsTable { min-width: 640px; font-size: 13px; line-height: 1.35; }
.DeathsPage .DeathsTable th { height: 39px; padding: 0 13px; color: #7ce0ff; font-size: 10px; letter-spacing: 1.1px; }
.DeathsPage .DeathsTable td { height: 54px; padding: 8px 13px; }
.DeathsPage .DeathsTable tbody tr:nth-child(odd) td { background: linear-gradient(90deg, rgba(7, 23, 36, .98), rgba(8, 27, 42, .94)); }
.DeathsPage .DeathsTable tbody tr:nth-child(even) td { background: linear-gradient(90deg, rgba(10, 31, 47, .98), rgba(12, 37, 54, .94)); }
.DeathsPage .DeathsTable tbody tr:hover td { background: linear-gradient(90deg, rgba(17, 55, 80, .99), rgba(11, 41, 61, .98)); }
.DeathsPage .DeathsTable tbody tr:hover td:first-child { box-shadow: inset 3px 0 #dfa83e; }
.DeathsPage .DeathsTable a { color: #ffe19b; font: bold 14px/1.2 Georgia, "Times New Roman", serif; text-shadow: 0 1px 2px #000; }
.DeathsPage .RoyalLevelBadge { min-width: 33px; height: 31px; padding: 0 6px; font: bold 14px/31px Georgia, "Times New Roman", serif; }
.DeathsPage .DeathsTable td.RoyalTimeCell { color: #b9d9e9 !important; font-size: 13px; }
.DeathsPage .RoyalMonsterName { color: #edc481; font-size: 13px; font-weight: 500; }
.DeathsPage .RoyalTypeBadge { min-height: 27px; padding: 0 10px; font-size: 9px; letter-spacing: .9px; }

/* Support roster: readable staff identities, roles and availability. */
.SupportPage .RoyalDataHero div > small { font-size: 10px; letter-spacing: 2px; }
.SupportPage .RoyalDataHero p { color: #b8cbd6; font-size: 14px; line-height: 1.55; }
.SupportPage .RoyalDataCount { font-size: 31px; }
.SupportPage .RoyalDataCount small { margin-top: 7px; font-size: 9px; letter-spacing: 1.3px; }
.SupportPage .RoyalTableHeading { min-height: 52px; padding: 0 17px; }
.SupportPage .RoyalTableHeading span { font-size: 19px; }
.SupportPage .RoyalTableHeading small { color: #73dcff; font-size: 10px; letter-spacing: .8px; }
.SupportPage .SupportTable { min-width: 590px; font-size: 13px; line-height: 1.35; }
.SupportPage .SupportTable th { height: 40px; padding: 0 14px; color: #7ce0ff; font-size: 10px; letter-spacing: 1.2px; }
.SupportPage .SupportTable td { height: 59px; padding: 9px 14px; }
.SupportPage .SupportTable tbody tr td { background: linear-gradient(90deg, rgba(8, 25, 39, .98), rgba(11, 34, 49, .95)); }
.SupportPage .SupportTable tbody tr:hover td { background: linear-gradient(90deg, rgba(17, 55, 80, .99), rgba(11, 41, 61, .98)); }
.SupportPage .SupportTable tbody tr:hover td:first-child { box-shadow: inset 3px 0 #dfa83e; }
.SupportPage .SupportTable .RoyalPlayerCell a { color: #ffe09a; font: bold 16px/1.2 Georgia, "Times New Roman", serif; text-shadow: 0 1px 2px #000; }
.SupportPage .RoyalRoleBadge { min-height: 30px; padding: 0 11px; border-color: #b17a29; color: #f7d58a; font-size: 9px; letter-spacing: .8px; box-shadow: inset 0 0 8px rgba(188, 126, 31, .12); }
.SupportPage .RoyalStatusBadge { min-height: 30px; padding: 0 11px; font-size: 9px; letter-spacing: .9px; }
.SupportPage .RoyalStatusBadge i { width: 8px; height: 8px; }

/* =========================================================
   SUB PAGE PORTAL — unified realm navigation and account tools
   ========================================================= */
.SubPortalPage .RoyalDataPageShell::before { content: "MADNESS PORTAL"; }
.SubPortalPage .RoyalDataPageShell .BoxContent { padding: 18px; }
.SubPortalHome, .SubAccountPanel, .SubQuickPanel, .SubAccountCommand { display: grid; gap: 15px; }
.SubPortalHero,
.SubAccountPanel > header,
.SubQuickPanel > header,
.SubAccountCommand > header {
    position: relative;
    display: grid;
    min-height: 132px;
    padding: 21px 23px;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    overflow: hidden;
    border: 1px solid #9b6b26;
    background: radial-gradient(circle at 8% 48%, rgba(22, 148, 218, .34), transparent 25%), radial-gradient(circle at 92% 20%, rgba(216, 153, 37, .13), transparent 28%), linear-gradient(125deg, #0a2943, #030b15 62%, #171005);
    box-shadow: inset 0 0 0 2px #020711, inset 0 0 23px rgba(0,0,0,.58), 0 7px 14px rgba(0,0,0,.55);
}
.SubPortalHero::after,
.SubAccountPanel > header::after,
.SubQuickPanel > header::after,
.SubAccountCommand > header::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(80, 181, 230, .12); pointer-events: none; }
.SubPortalHeroIcon,
.SubAccountPanel > header > span,
.SubQuickPanel > header > span,
.SubAccountCommand > header > span {
    position: relative;
    z-index: 1;
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 2px solid #d3a142;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 34%, #2eaada, #092d4d 58%, #010711);
    color: #ffe29a;
    font: bold 27px/62px Georgia, serif;
    text-shadow: 0 2px 2px #000, 0 0 9px #43caff;
    box-shadow: inset 0 0 0 3px #020812, inset 0 0 15px rgba(65,195,246,.42), 0 0 12px rgba(29,153,215,.4);
}
.SubPortalHero > div, .SubAccountPanel > header > div, .SubQuickPanel > header > div, .SubAccountCommand > header > div { position: relative; z-index: 1; }
.SubPortalHero div > small, .SubAccountPanel header small, .SubQuickPanel header small, .SubAccountCommand header small { color: #68d7fb; font: bold 9px/1 Arial,sans-serif; letter-spacing: 1.8px; }
.SubPortalHero h1, .SubAccountPanel header h1, .SubQuickPanel header h1, .SubAccountCommand header h1 { margin: 6px 0; color: #ffe0a0; font: bold 29px/1 Georgia,serif; text-shadow: 0 2px 2px #000, 0 0 9px rgba(43,164,231,.45); }
.SubPortalHero p, .SubAccountPanel header p, .SubQuickPanel header p, .SubAccountCommand header p { max-width: 500px; margin: 0; color: #b2c6d2; font: 13px/1.55 Arial,sans-serif; }
.SubPortalHero > strong { position: relative; z-index: 1; display: flex; min-width: 82px; padding: 10px; flex-direction: column; border: 1px solid #3c7897; background: rgba(3,20,32,.78); color: #69dcff; font: bold 14px/1 Arial,sans-serif; letter-spacing: 1px; text-align: center; box-shadow: inset 0 0 11px rgba(49,180,229,.16); }
.SubPortalHero > strong small { margin-top: 6px; color: #e9c979; font-size: 8px; letter-spacing: 1.2px; }

.SubPortalGrid, .SubCommandGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.SubPortalGrid > a, .SubCommandGrid > a {
    display: grid;
    min-height: 92px;
    padding: 13px 14px;
    grid-template-columns: 43px minmax(0,1fr) 20px;
    align-items: center;
    gap: 12px;
    border: 1px solid #315b75;
    background: radial-gradient(circle at 0 50%, rgba(23,137,196,.16), transparent 24%), linear-gradient(145deg,#081d2d,#020912);
    color: inherit;
    text-decoration: none;
    box-shadow: inset 0 0 14px rgba(0,0,0,.48);
    transition: border-color .18s, transform .18s, filter .18s;
}
.SubPortalGrid > a:hover, .SubCommandGrid > a:hover { border-color: #d2a03d; filter: brightness(1.12); transform: translateY(-2px); }
.SubPortalGrid a > i, .SubCommandGrid a > i { display: grid; width: 41px; height: 41px; place-items: center; border: 1px solid #b9842e; border-radius: 50%; background: #08243a; color: #69dcff; font: normal bold 18px/41px Georgia,serif; box-shadow: inset 0 0 9px rgba(46,180,232,.22); }
.SubPortalGrid a span, .SubCommandGrid a span { min-width: 0; }
.SubPortalGrid a small, .SubCommandGrid a small { display: block; color: #63d4fa; font: bold 8px/1 Arial,sans-serif; letter-spacing: 1.1px; }
.SubPortalGrid a b, .SubCommandGrid a b { display: block; margin: 6px 0 4px; color: #ffe09a; font: bold 17px/1.1 Georgia,serif; text-shadow: 0 1px 2px #000; }
.SubPortalGrid a em, .SubCommandGrid a em { display: block; overflow: hidden; color: #9db3bf; font: normal 11px/1.4 Arial,sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.SubPortalGrid a > strong, .SubCommandGrid a > strong { color: #5ed6ff; font: bold 25px/1 Georgia,serif; text-align: center; }
.SubCommandGrid > a.admin { border-color: #8d6526; background: radial-gradient(circle at 0 50%,rgba(207,143,30,.14),transparent 24%),linear-gradient(145deg,#191205,#030912); }

.SubAccountPanel > header, .SubQuickPanel > header, .SubAccountCommand > header { min-height: 118px; }
.SubAccountForm, .SubQuickPanel > form { display: grid; padding: 20px; grid-template-columns: 1fr 1fr; gap: 14px; border: 1px solid #8f6525; background: linear-gradient(145deg,rgba(6,27,42,.98),rgba(2,8,14,.99)); box-shadow: inset 0 0 18px rgba(0,0,0,.48); }
.SubAccountForm label { display: grid; gap: 8px; }
.SubAccountForm label span, .SubQuickPanel form label { color: #69d8fb; font: bold 9px/1 Arial,sans-serif; letter-spacing: 1px; }
.SubAccountForm input, .SubQuickPanel select { box-sizing: border-box; width: 100%; height: 45px; padding: 0 12px; border: 1px solid #386b88; border-radius: 2px; outline: 0; background: #020d17; color: #d8eaf4; font: 12px Arial,sans-serif; box-shadow: inset 0 0 9px rgba(0,0,0,.68); }
.SubAccountForm input:focus, .SubQuickPanel select:focus { border-color: #63d6fb; box-shadow: inset 0 0 9px rgba(0,0,0,.68),0 0 8px rgba(41,170,226,.38); }
.SubAccountForm button, .SubQuickPanel button { min-height: 45px; grid-column: 1 / -1; border: 1px solid #d09a38; border-radius: 2px; background: linear-gradient(180deg,#176d9f,#062742 58%,#020b14); color: #ffe4a7; font: bold 11px/1 Arial,sans-serif; letter-spacing: .8px; cursor: pointer; box-shadow: inset 0 0 0 2px #020711,0 4px 9px rgba(0,0,0,.55); }
.SubAccountForm button:hover, .SubQuickPanel button:hover { filter: brightness(1.17); }
.SubAccountForm button b, .SubQuickPanel button b { margin-left: 6px; color: #5ed7ff; font-size: 18px; }
.SubAccountLinks { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.SubAccountLinks a { display: flex; min-height: 42px; align-items: center; justify-content: center; border: 1px solid #315a73; background: #041522; color: #d2e3ec; font: bold 10px/1 Arial,sans-serif; text-decoration: none; }
.SubAccountLinks a:hover { border-color: #c08a31; color: #ffe09a; }

.SubQuickPanel > form { grid-template-columns: minmax(0,1fr) auto; align-items: end; }
.SubQuickPanel > form label { grid-column: 1 / -1; }
.SubQuickPanel > form button { min-width: 190px; grid-column: auto; }
.SubAccountCommand > header > a { position: relative; z-index: 2; display: flex; min-height: 39px; padding: 0 15px; align-items: center; border: 1px solid #a33c34; background: linear-gradient(#812d27,#3b100e); color: #ffd2c8; font: bold 10px/1 Arial,sans-serif; letter-spacing: .8px; text-decoration: none; }
.SubAccountCommand > header > a:hover { filter: brightness(1.2); }

.SubPortalState { display: grid; min-height: 330px; padding: 35px 20px; place-items: center; align-content: center; border: 1px solid #936624; background: radial-gradient(circle at 50% 25%,rgba(21,139,204,.22),transparent 30%),#030c16; text-align: center; box-shadow: inset 0 0 22px rgba(0,0,0,.55); }
.SubPortalState.compact { min-height: 245px; }
.SubPortalState > span { display: grid; width: 58px; height: 58px; place-items: center; border: 2px solid #d0a03f; border-radius: 50%; background: #082740; color: #65dcff; font: bold 25px/58px Georgia,serif; }
.SubPortalState h1, .SubPortalState h2 { margin: 15px 0 6px; color: #ffe09a; font: bold 25px/1.1 Georgia,serif; }
.SubPortalState p { margin: 0 0 18px; color: #afc3ce; font: 13px/1.55 Arial,sans-serif; }
.SubPortalState a { display: flex; min-width: 180px; min-height: 42px; padding: 0 15px; align-items: center; justify-content: center; border: 1px solid #c38d32; background: linear-gradient(#156996,#052842); color: #ffe09a; font: bold 10px/1 Arial,sans-serif; text-decoration: none; }

@media (max-width: 620px) {
    .SubPortalPage .RoyalDataPageShell .BoxContent { padding: 10px; }
    .SubPortalHero, .SubAccountPanel > header, .SubQuickPanel > header, .SubAccountCommand > header { padding: 17px; grid-template-columns: 52px minmax(0,1fr); gap: 12px; }
    .SubPortalHeroIcon, .SubAccountPanel > header > span, .SubQuickPanel > header > span, .SubAccountCommand > header > span { width: 48px; height: 48px; font-size: 21px; }
    .SubPortalHero h1, .SubAccountPanel header h1, .SubQuickPanel header h1, .SubAccountCommand header h1 { font-size: 23px; }
    .SubPortalHero > strong, .SubAccountCommand > header > a { grid-column: 1 / -1; }
    .SubPortalGrid, .SubCommandGrid, .SubAccountForm, .SubAccountLinks, .SubQuickPanel > form { grid-template-columns: 1fr; }
    .SubQuickPanel > form button { width: 100%; }
}
.SupportPage .RoyalDataHint strong { font-size: 10px; }
.SupportPage .RoyalDataHint span { color: #bed0da; font-size: 12px; }
.SupportPage .RoyalDataHint a { padding: 10px 14px; font-size: 9px; }

.RoyalEmptyRow td { height: 130px; text-align: center; }
.RoyalEmptyRow strong { display: block; color: #ffe0a0; font: bold 16px/1.2 Georgia, "Times New Roman", serif; }
.RoyalEmptyRow small { display: block; margin-top: 7px; color: #829aaa; }
.KillerSummaryGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.RoyalTableFrame.compact .RoyalDataTable { min-width: 0; }

.RoyalDataHint { display: flex; min-height: 54px; padding: 0 15px; align-items: center; gap: 10px; border: 1px solid #315b75; border-radius: 3px; background: rgba(3,17,28,.9); }
.RoyalDataHint strong { color: #67d6fb; font: bold 9px/1 Arial, sans-serif; letter-spacing: 1px; }
.RoyalDataHint span { color: #a6bdcb; font: 11px/1.4 Arial, sans-serif; }
.RoyalDataHint a { margin-left: auto; padding: 9px 13px; border: 1px solid #a5772d; background: #0a2338; color: #ffe09a; font: bold 8px/1 Arial, sans-serif; text-decoration: none; }

.RoyalSearchForm { padding: 18px; border: 1px solid #956525; border-radius: 4px; background: rgba(2,10,18,.92); box-shadow: inset 0 0 15px rgba(0,0,0,.65); }
.RoyalSearchForm label { display: block; margin-bottom: 7px; color: #68cbed; font: bold 8px/1 Arial, sans-serif; letter-spacing: 1.2px; }
.RoyalSearchForm > div { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.RoyalSearchForm input { box-sizing: border-box; width: 100%; height: 46px; padding: 0 13px; border: 1px solid #326b90; border-radius: 3px; background: #020b15; color: #d8eaf6; outline: none; }
.RoyalSearchForm input:focus { border-color: #64d2fb; box-shadow: 0 0 9px rgba(34,167,230,.44); }
.RoyalSearchForm button, .HousesPage input[type="submit"] { min-height: 42px; padding: 0 20px; border: 1px solid #d09a38; border-radius: 3px; background: linear-gradient(180deg,#176d9f,#062742 58%,#020b14); color: #ffe4a7; font: bold 10px/1 Arial,sans-serif; letter-spacing: .7px; cursor: pointer; box-shadow: inset 0 0 0 2px #020711, 0 4px 8px rgba(0,0,0,.55); }

/* Houses keeps its engine-specific logic and receives the shared royal skin. */
.HousesPage .BoxContent > h2, .HousesPage .BoxContent > h3 { color: #ffe0a0; font-family: Georgia,"Times New Roman",serif; text-align: center; }
.HousesPage .well.widget, .HousesPage .houselist { margin: 0 0 14px; padding: 14px; border: 1px solid #956525; border-radius: 4px; background: #03101c; }
.HousesPage .well.widget .header { margin: -14px -14px 13px; padding: 13px 15px; border-bottom: 1px solid #956525; background: linear-gradient(180deg,#102b45,#061321); color: #ffe0a0; font: bold 15px/1 Georgia,"Times New Roman",serif; }
.HousesPage form select { box-sizing: border-box; min-width: 170px; height: 40px; margin: 3px; padding: 0 10px; border: 1px solid #326b90; border-radius: 3px; background: #020b15; color: #d8eaf6; }
.HousesPage .BoxContent > table, .HousesPage #housesTable, .HousesPage #housetable, .HousesPage .houselist table { width: 100%; border-collapse: collapse; color: #c7dae6; font: 11px/1.3 Arial,sans-serif; }
.HousesPage .BoxContent > table th, .HousesPage .BoxContent > table td { padding: 10px; border: 1px solid #17354b; background: rgba(6,19,31,.94); }
.HousesPage .BoxContent > table tr:nth-child(even) td { background: rgba(9,27,42,.97); }
.HousesPage .BoxContent > table tr.yellow th, .HousesPage .BoxContent > table tr.yellow td { background: #0c2a42; color: #75d9fc; font-size: 9px; letter-spacing: .7px; }
.HousesPage .BoxContent a { color: #ffe09a; font-weight: bold; text-decoration: none; }
.HousesPage .houselist table td {
    padding: 8px 7px !important;
    border: 0 !important;
    background: #03101c !important;
    color: #6ed5f8 !important;
    font: bold 8px/1 Arial,sans-serif !important;
    letter-spacing: .7px;
    text-transform: uppercase;
}
.HousesPage .houselist table tr:last-child td { border-top: 1px solid #244e68 !important; }
.HousesPage #housetable th { padding: 10px !important; border: 1px solid #244e68 !important; background: #0c2a42 !important; color: #75d9fc !important; font: bold 8px/1 Arial,sans-serif; letter-spacing: .8px; }
.HousesPage #housetable td { padding: 10px !important; border: 1px solid #17354b !important; background: rgba(6,19,31,.94) !important; color: #bad1df !important; }
.HousesPage #housetable tr:nth-child(even) td { background: rgba(9,27,42,.97) !important; }

/* Server information cards. */
.ServerOnlineSeal { display: inline-flex; padding: 8px 10px; align-items: center; gap: 7px; border: 1px solid #347b5b; color: #72eaaa; font: bold 8px/1 Arial,sans-serif; letter-spacing: .7px; }
.ServerOnlineSeal i { width: 7px; height: 7px; border-radius: 50%; background: #3dec8c; box-shadow: 0 0 7px #3dec8c; }
.ServerRateGrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.ServerRateGrid article { display: flex; min-height: 105px; padding: 13px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #805b25; background: radial-gradient(circle at 50% 30%,rgba(18,119,181,.25),transparent 52%),#030c16; text-align: center; }
.ServerRateGrid small { color: #6dd5fa; font: bold 7px/1 Arial,sans-serif; letter-spacing: 1px; }
.ServerRateGrid strong { margin: 8px 0 5px; color: #ffe09a; font: bold 27px/1 Georgia,"Times New Roman",serif; text-shadow: 0 0 9px rgba(39,171,228,.4); }
.ServerRateGrid span { color: #869eae; font-size: 9px; }
.ServerInfoGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ServerInfoPanel { overflow: hidden; border: 1px solid #956525; background: #020913; }
.ServerInfoPanel > header { display: flex; min-height: 55px; padding: 0 14px; align-items: center; gap: 10px; border-bottom: 1px solid #956525; background: linear-gradient(180deg,#102b45,#061321); }
.ServerInfoPanel > header > span { color: #63d6fb; font-size: 22px; }
.ServerInfoPanel header small, .ServerFeaturePanel header small { display: block; color: #64d0f5; font: bold 7px/1 Arial,sans-serif; letter-spacing: 1px; }
.ServerInfoPanel header strong, .ServerFeaturePanel header strong { display: block; margin-top: 5px; color: #ffe0a0; font: bold 14px/1 Georgia,"Times New Roman",serif; }
.ServerInfoPanel dl { margin: 0; }
.ServerInfoPanel dl div { display: flex; min-height: 38px; padding: 0 13px; align-items: center; justify-content: space-between; border-bottom: 1px solid #17354b; }
.ServerInfoPanel dt { color: #9cb6c6; font-size: 10px; }
.ServerInfoPanel dd { margin: 0; color: #e8ca87; font-size: 10px; font-weight: bold; text-align: right; }
.ServerInfoPanel dd.yes { color: #63e4a0; } .ServerInfoPanel dd.no { color: #ff8377; }
.ServerFeaturePanel { border: 1px solid #956525; background: #020913; }
.ServerFeaturePanel header { padding: 13px 15px; border-bottom: 1px solid #956525; background: linear-gradient(180deg,#102b45,#061321); }
.ServerFeaturePanel > div { display: grid; padding: 12px; grid-template-columns: repeat(4,1fr); gap: 8px; }
.ServerFeaturePanel > div span { display: flex; min-height: 42px; padding: 0 9px; align-items: center; justify-content: space-between; border: 1px solid #294e65; background: #04121e; color: #9fb8c7; font-size: 9px; }
.ServerFeaturePanel span.enabled b { color: #62e39d; } .ServerFeaturePanel span.disabled b { color: #ff7c72; }

@media (max-width: 760px) {
    .KillerSummaryGrid, .ServerInfoGrid { grid-template-columns: 1fr; }
    .ServerRateGrid, .ServerFeaturePanel > div { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .RoyalDataPage .RoyalDataPageShell .BoxContent { padding: 10px; }
    .RoyalDataHero { padding: 15px; grid-template-columns: 50px minmax(0,1fr); gap: 11px; }
    .RoyalDataHeroIcon { width: 46px; height: 46px; font-size: 20px; }
    .RoyalDataHero h1 { font-size: 22px; }
    .RoyalDataCount, .ServerOnlineSeal { display: none; }
    .RoyalSearchForm > div { grid-template-columns: 1fr; }
    .ServerRateGrid, .ServerFeaturePanel > div { grid-template-columns: 1fr; }
    .RoyalDataHint { padding: 10px; flex-wrap: wrap; }
}

/* =========================================================
   SERVER RULES — official dark-fantasy rulebook
   ========================================================= */
.ServerRulesPage .RoyalDataHeroIcon.rules {
    background: radial-gradient(circle at 50% 34%, #7859b8, #28174f 58%, #07030e);
    color: #eee0ff;
    text-shadow: 0 2px 2px #000, 0 0 9px #9f6cf2;
}

.ServerRulesPage .RulesVersion {
    display: flex;
    min-width: 82px;
    padding: 9px 10px;
    flex-direction: column;
    border: 1px solid #8967ad;
    background: rgba(49, 26, 74, .36);
    color: #e6d2ff;
    font: bold 12px/1 Arial, sans-serif;
    letter-spacing: 1px;
    text-align: center;
    box-shadow: inset 0 0 9px rgba(148, 92, 219, .2);
}

.ServerRulesPage .RulesVersion small {
    margin-top: 5px;
    color: #9bdcf5;
    font-size: 9px;
    letter-spacing: 1.2px;
}

.ServerRulesPage .RulesWarning {
    display: grid;
    min-height: 70px;
    padding: 12px 16px;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    border: 1px solid #9c6d28;
    border-radius: 4px;
    background: radial-gradient(circle at 0 50%, rgba(211, 137, 31, .18), transparent 18%), linear-gradient(90deg, #171005, #050b12 65%);
    box-shadow: inset 0 0 13px rgba(0, 0, 0, .62);
}

.ServerRulesPage .RulesWarning > span {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border: 1px solid #d39b39;
    border-radius: 50%;
    background: radial-gradient(circle, #a76c17, #382005 70%);
    color: #fff0b4;
    font: bold 20px/35px Georgia, serif;
    box-shadow: 0 0 9px rgba(221, 155, 43, .34);
}

.ServerRulesPage .RulesWarning strong { color: #ffe09a; font: bold 12px/1 Arial, sans-serif; letter-spacing: 1px; }
.ServerRulesPage .RulesWarning p { margin: 6px 0 0; color: #c9d8e1; font: 14px/1.55 Arial, sans-serif; }

.ServerRulesPage .RulesNavigation {
    display: grid;
    padding: 8px;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    border: 1px solid #315875;
    border-radius: 4px;
    background: rgba(2, 10, 18, .9);
}

.ServerRulesPage .RulesNavigation a {
    display: flex;
    min-height: 42px;
    padding: 0 10px;
    align-items: center;
    gap: 9px;
    border: 1px solid #24475f;
    border-radius: 2px;
    background: #061522;
    color: #55d3fa;
    font: bold 10px/1 Arial, sans-serif;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.ServerRulesPage .RulesNavigation a span { color: #d7e5ed; font-size: 12px; letter-spacing: .3px; }
.ServerRulesPage .RulesNavigation a:hover { border-color: #c28a34; background: #0a2338; transform: translateY(-1px); }

.ServerRulesPage .RulesList { display: grid; gap: 12px; }
.ServerRulesPage .RuleCard {
    scroll-margin-top: 16px;
    overflow: hidden;
    border: 1px solid #805a24;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(7, 24, 39, .97), rgba(2, 8, 15, .98));
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .56), 0 5px 10px rgba(0, 0, 0, .45);
}
.ServerRulesPage .RuleCard > header {
    display: grid;
    min-height: 58px;
    padding: 0 15px;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #294c63;
    background: linear-gradient(90deg, rgba(15, 52, 78, .9), rgba(4, 15, 25, .8));
}
.ServerRulesPage .RuleCard > header > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #b58436;
    border-radius: 50%;
    background: #061321;
    color: #ffe09a;
    font: bold 12px/36px Georgia, serif;
    box-shadow: inset 0 0 7px rgba(49, 177, 232, .25);
}
.ServerRulesPage .RuleCard header small { color: #72dcfc; font: bold 10px/1 Arial, sans-serif; letter-spacing: 1.35px; }
.ServerRulesPage .RuleCard h2 { margin: 5px 0 0; color: #ffe0a0; font: bold 20px/1.1 Georgia, "Times New Roman", serif; text-shadow: 0 2px 2px #000; }
.ServerRulesPage .RuleCard > ul { display: grid; margin: 0; padding: 11px 14px 14px; gap: 7px; list-style: none; }
.ServerRulesPage .RuleCard > ul li { display: grid; min-height: 50px; padding: 11px 13px; grid-template-columns: 29px minmax(0, 1fr); align-items: start; gap: 11px; border: 1px solid rgba(37, 78, 103, .62); background: rgba(2, 12, 21, .7); }
.ServerRulesPage .RuleCard > ul li > b { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #39779a; border-radius: 50%; color: #6fd9fb; font: bold 10px/26px Arial, sans-serif; }
.ServerRulesPage .RuleCard > ul p { margin: 2px 0 0; color: #cad9e2; font: 14px/1.6 Arial, sans-serif; }
.ServerRulesPage .RuleCard.featured { border-color: #a9782c; }
.ServerRulesPage .RuleCard.danger { border-color: #914436; }
.ServerRulesPage .RuleCard.danger > header { border-bottom-color: #743b32; background: linear-gradient(90deg, rgba(76, 24, 21, .85), rgba(10, 11, 18, .88)); }
.ServerRulesPage .RuleCard.danger > header > span { border-color: #b65e46; color: #ffc2ad; }
.ServerRulesPage .RuleCard.danger > ul li > b { border-color: #85483d; color: #ff9e8c; }

.ServerRulesPage .RuleDetailsGrid { display: grid; margin: 0 14px 14px; grid-template-columns: 1fr 1fr; gap: 8px; }
.ServerRulesPage .RuleDetailsGrid section { padding: 12px; border: 1px solid #765523; background: rgba(34, 24, 8, .3); }
.ServerRulesPage .RuleDetailsGrid h3 { margin: 0 0 7px; color: #e8c477; font: bold 11px/1 Arial, sans-serif; letter-spacing: 1px; }
.ServerRulesPage .RuleDetailsGrid p { margin: 0; color: #c4d3dc; font: 13px/1.6 Arial, sans-serif; }

.ServerRulesPage .RulesFooter {
    display: grid;
    min-height: 72px;
    padding: 12px 15px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid #946726;
    background: linear-gradient(90deg, #092039, #030a13 68%, #171004);
}
.ServerRulesPage .RulesFooter > span { color: #5cd9ff; font-size: 24px; text-shadow: 0 0 8px #168cca; }
.ServerRulesPage .RulesFooter strong { color: #ffe09a; font: bold 12px/1 Arial, sans-serif; letter-spacing: 1px; }
.ServerRulesPage .RulesFooter p { margin: 6px 0 0; color: #c2d3dd; font-size: 13px; line-height: 1.5; }
.ServerRulesPage .RulesFooter a { padding: 12px 15px; border: 1px solid #b98230; background: #0a2942; color: #ffe1a0; font: bold 10px/1 Arial, sans-serif; text-decoration: none; box-shadow: inset 0 0 8px rgba(49, 176, 230, .22); }
.ServerRulesPage .RulesFooter a:hover { color: #6edcff; filter: brightness(1.15); }

@media (max-width: 680px) {
    .ServerRulesPage .RulesNavigation { grid-template-columns: 1fr 1fr; }
    .ServerRulesPage .RuleDetailsGrid { grid-template-columns: 1fr; }
    .ServerRulesPage .RulesFooter { grid-template-columns: 28px 1fr; }
    .ServerRulesPage .RulesFooter a { grid-column: 1 / -1; text-align: center; }
}

/* Refund policy readability pass — deliberately larger typography. */
.RefundPolicyPage .RefundPolicy { gap: 18px; }
.RefundPolicyPage .RefundHero { min-height: 150px; padding: 22px 24px; grid-template-columns: 82px minmax(0,1fr) 112px; gap: 18px; }
.RefundPolicyPage .RefundHero .RoyalDataHeroIcon { width: 70px; height: 70px; font-size: 32px; }
.RefundPolicyPage .RefundHero div > small { font-size: 10px; letter-spacing: 2px; }
.RefundPolicyPage .RefundHero h1 { margin: 8px 0; font-size: 31px; }
.RefundPolicyPage .RefundHero p { font-size: 14px; line-height: 1.55; }
.RefundPolicyPage .RefundHeroSeal { min-height: 86px; }
.RefundPolicyPage .RefundHeroSeal strong { font-size: 31px; }
.RefundPolicyPage .RefundHeroSeal small { font-size: 9px; }

.RefundPolicyPage .RefundIntro { min-height: 125px; padding: 20px 22px; grid-template-columns: 62px minmax(0,1fr); gap: 18px; }
.RefundPolicyPage .RefundIntro > span { width: 52px; height: 52px; font-size: 23px; }
.RefundPolicyPage .RefundIntro small,.RefundPolicyPage .RefundSupport small { font-size: 10px; }
.RefundPolicyPage .RefundIntro h2,.RefundPolicyPage .RefundSupport h2 { margin: 8px 0 10px; font-size: 24px; }
.RefundPolicyPage .RefundIntro p,.RefundPolicyPage .RefundSupport p { font-size: 14px; line-height: 1.65; }

.RefundPolicyPage .RefundPolicyGrid { gap: 16px; }
.RefundPolicyPage .RefundPolicyCard > header { min-height: 90px; padding: 16px 17px; grid-template-columns: 48px minmax(0,1fr); gap: 13px; }
.RefundPolicyPage .RefundPolicyCard > header > span { width: 38px; height: 38px; font-size: 17px; }
.RefundPolicyPage .RefundPolicyCard header small { font-size: 9px; letter-spacing: 1.2px; }
.RefundPolicyPage .RefundPolicyCard header h2 { margin-top: 8px; font-size: 21px; line-height: 1.2; }
.RefundPolicyPage .RefundPolicyCard > ul { padding: 16px; gap: 12px; }
.RefundPolicyPage .RefundPolicyCard li { min-height: 88px; padding: 15px 14px 15px 38px; }
.RefundPolicyPage .RefundPolicyCard li::before { top: 19px; left: 14px; width: 9px; height: 9px; }
.RefundPolicyPage .RefundPolicyCard li b { font-size: 14px; line-height: 1.3; }
.RefundPolicyPage .RefundPolicyCard li p { margin-top: 9px; font-size: 12px; line-height: 1.65; }

.RefundPolicyPage .RefundWarning { min-height: 135px; padding: 21px 22px; grid-template-columns: 58px minmax(0,1fr); gap: 18px; }
.RefundPolicyPage .RefundWarning > span { width: 48px; height: 48px; font-size: 23px; }
.RefundPolicyPage .RefundWarning small { font-size: 9px; }
.RefundPolicyPage .RefundWarning h2 { margin: 8px 0 10px; font-size: 22px; }
.RefundPolicyPage .RefundWarning p { font-size: 13px; line-height: 1.65; }

.RefundPolicyPage .RefundBenefits { gap: 16px; }
.RefundPolicyPage .RefundBenefits > section { min-height: 160px; padding: 21px; grid-template-columns: 72px minmax(0,1fr); gap: 18px; }
.RefundPolicyPage .RefundBenefitIcon { width: 61px; height: 61px; font-size: 18px; }
.RefundPolicyPage .RefundBenefits small { font-size: 9px; }
.RefundPolicyPage .RefundBenefits h2 { margin: 8px 0 10px; font-size: 21px; }
.RefundPolicyPage .RefundBenefits p { font-size: 12px; line-height: 1.65; }

.RefundPolicyPage .RefundSupport { min-height: 140px; padding: 22px 24px; }
.RefundPolicyPage .RefundSupport a { min-width: 200px; min-height: 52px; padding: 0 18px; font-size: 11px; }
.RefundPolicyPage .RefundAgreement { min-height: 58px; padding: 12px 16px; }
.RefundPolicyPage .RefundAgreement p { font-size: 12px; }

@media (max-width: 680px) {
    .RefundPolicyPage .RefundHero { grid-template-columns: 64px minmax(0,1fr); }
    .RefundPolicyPage .RefundHeroSeal { grid-column: 1 / -1; }
    .RefundPolicyPage .RefundPolicyGrid,.RefundPolicyPage .RefundBenefits { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .RefundPolicyPage .RefundHero { padding: 17px; grid-template-columns: 52px minmax(0,1fr); gap: 12px; }
    .RefundPolicyPage .RefundHero .RoyalDataHeroIcon { width: 48px; height: 48px; font-size: 23px; }
    .RefundPolicyPage .RefundHero h1 { font-size: 25px; }
    .RefundPolicyPage .RefundHero p { font-size: 12px; }
    .RefundPolicyPage .RefundIntro { padding: 17px; grid-template-columns: 44px minmax(0,1fr); gap: 12px; }
    .RefundPolicyPage .RefundIntro > span { width: 39px; height: 39px; }
    .RefundPolicyPage .RefundIntro h2,.RefundPolicyPage .RefundSupport h2 { font-size: 20px; }
    .RefundPolicyPage .RefundIntro p,.RefundPolicyPage .RefundSupport p { font-size: 12px; }
    .RefundPolicyPage .RefundPolicyCard header h2 { font-size: 19px; }
    .RefundPolicyPage .RefundPolicyCard li b { font-size: 13px; }
    .RefundPolicyPage .RefundPolicyCard li p { font-size: 11px; }
    .RefundPolicyPage .RefundSupport { align-items: stretch; flex-direction: column; }
    .RefundPolicyPage .RefundSupport a { width: 100%; }
}

/* Premium password recovery */
.RecoveryPage #ContentColumn,
.RecoveryPage #Content,
.RecoveryPage #ContentHelper,
.RecoveryPage #ContentRow,
.RecoveryPage #container { background-color: transparent !important; }

.RecoveryPage #news > .BorderTitleText {
    background-image: linear-gradient(90deg, #03101a, #0a3854 50%, #03101a) !important;
    box-shadow: inset 0 -1px #9a691e, 0 2px 8px rgba(0, 0, 0, .55);
}

.RecoveryPage #news > .Border_2,
.RecoveryPage #news > .Border_2 > .Border_3 {
    background: #020914 !important;
}

.RecoveryPage #news > .Border_2 > .Border_3 > .BoxContent {
    min-height: 650px;
    padding: 22px 12px 28px !important;
    background-image:
        radial-gradient(circle at 50% 0, rgba(22, 119, 170, .22), transparent 38%),
        linear-gradient(180deg, #061522, #020914 76%) !important;
    box-shadow: inset 0 0 34px rgba(0, 0, 0, .65);
}

.RecoveryPage .recovery-page {
    position: relative;
    width: auto;
    max-width: 790px;
    margin: 22px auto 30px;
    padding: 8px;
    color: #d3e4ee;
    font-family: "Trebuchet MS", Arial, sans-serif;
    background: linear-gradient(135deg, #d9a03c, #288fc3 42%, #8b5a18 76%, #dda43e);
    clip-path: polygon(16px 0, calc(50% - 20px) 0, 50% 8px, calc(50% + 20px) 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .58));
}

.RecoveryPage .recovery-page::before,
.RecoveryPage .recovery-page::after {
    content: "";
    position: absolute;
    z-index: 5;
    left: 50%;
    width: 17px;
    height: 17px;
    border: 2px solid #dda23b;
    background: radial-gradient(circle, #65d8ff 0 18%, #09699d 22% 48%, #020913 52%);
    box-shadow: 0 0 11px rgba(68, 201, 255, .68);
    transform: translateX(-50%) rotate(45deg);
    pointer-events: none;
}
.RecoveryPage .recovery-page::before { top: -5px; }
.RecoveryPage .recovery-page::after { bottom: -5px; }

.RecoveryPage .recovery-card {
    border: 1px solid #05090d;
    border-radius: 0;
    background: #020812;
    box-shadow: inset 0 0 0 1px rgba(54, 171, 226, .22), inset 0 0 35px rgba(9, 73, 111, .13);
}

.RecoveryPage .recovery-card::before {
    left: 4%;
    right: 4%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #58cdf8 25%, #f0b84f 50%, #58cdf8 75%, transparent);
    box-shadow: 0 0 13px rgba(74, 200, 249, .5);
}

.RecoveryPage .recovery-head {
    min-height: 138px;
    padding: 30px 34px;
    gap: 23px;
    border-bottom: 1px solid #a16c1d;
    background: linear-gradient(90deg, rgba(4, 27, 44, .98), rgba(3, 13, 23, .95) 62%, rgba(28, 19, 7, .94));
}

.RecoveryPage .recovery-head::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(49, 142, 190, .16);
    pointer-events: none;
}

.RecoveryPage .recovery-head::after {
    right: 45px;
    bottom: -86px;
    width: 220px;
    height: 220px;
    border-color: rgba(222, 163, 56, .1);
    box-shadow: 0 0 0 24px rgba(31, 114, 157, .025), 0 0 0 48px rgba(224, 162, 49, .018);
}

.RecoveryPage .recovery-emblem {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
    border: 1px solid #d09632;
    background: radial-gradient(circle at 50% 38%, #1b78a8, #082239 48%, #020812 72%);
    box-shadow: inset 0 0 0 4px #03101b, inset 0 0 0 5px rgba(95, 206, 249, .28), 0 0 22px rgba(31, 159, 218, .25), 0 10px 20px rgba(0, 0, 0, .5);
}

.RecoveryPage .recovery-emblem::before {
    width: 31px;
    height: 34px;
    border: 0;
    border-radius: 16px 16px 7px 7px;
    clip-path: none;
    background: linear-gradient(145deg, #ffe19a, #a96d16);
    box-shadow: inset 0 0 0 3px #071624, 0 0 10px rgba(255, 192, 65, .42);
}

.RecoveryPage .recovery-emblem span {
    position: absolute;
    z-index: 2;
    top: 40px;
    left: 50%;
    width: 7px;
    height: 12px;
    border-radius: 50% 50% 2px 2px;
    background: #071522;
    transform: translateX(-50%);
}

.RecoveryPage .recovery-kicker { color: #61d5ff; font-size: 10px; letter-spacing: 2.2px; }
.RecoveryPage .recovery-head h1 { margin: 7px 0 8px !important; color: #ffe5a5 !important; font-size: 34px !important; text-shadow: 0 2px 3px #000, 0 0 13px rgba(255, 185, 50, .2); }
.RecoveryPage .recovery-head p { max-width: 500px; color: #acc5d4; font-size: 12px; line-height: 1.6; }

.RecoveryPage .recovery-head-badge {
    position: relative;
    z-index: 2;
    display: grid;
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    place-content: center;
    border: 1px solid #95651d;
    background: rgba(2, 10, 17, .76);
    text-align: center;
    box-shadow: inset 0 0 14px rgba(22, 132, 187, .18);
}
.RecoveryPage .recovery-head-badge strong { color: #65dcff; font: 28px/1 Georgia, serif; text-shadow: 0 0 10px rgba(70, 203, 255, .55); }
.RecoveryPage .recovery-head-badge span { margin-top: 5px; color: #e2b75e; font-size: 7px; font-weight: 700; letter-spacing: 1.2px; }

.RecoveryPage .recovery-body { padding: 24px 34px 27px; background: radial-gradient(circle at 50% 0, rgba(19, 112, 159, .13), transparent 42%), #020812; }
.RecoveryPage .recovery-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
.RecoveryPage .recovery-step { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 10px; border: 1px solid #18394e; background: rgba(5, 20, 32, .72); opacity: .52; }
.RecoveryPage .recovery-step > span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid #345b71; border-radius: 50%; color: #7fa2b6; font-size: 9px; font-weight: 700; }
.RecoveryPage .recovery-step small,
.RecoveryPage .recovery-step strong { display: block; }
.RecoveryPage .recovery-step small { color: #5d8196; font-size: 7px; letter-spacing: 1.2px; }
.RecoveryPage .recovery-step strong { margin-top: 3px; color: #9fb9c8; font: 12px Georgia, serif; white-space: nowrap; }
.RecoveryPage .recovery-step.active,
.RecoveryPage .recovery-step.complete { border-color: #9b6c24; opacity: 1; }
.RecoveryPage .recovery-step.active { background: linear-gradient(110deg, rgba(12, 68, 99, .72), rgba(16, 14, 8, .8)); box-shadow: inset 0 0 14px rgba(37, 156, 210, .12); }
.RecoveryPage .recovery-step.active > span { border-color: #d89f39; color: #ffe091; box-shadow: 0 0 9px rgba(222, 159, 52, .2); }
.RecoveryPage .recovery-step.complete > span::after { content: "\2713"; color: #60dda1; }
.RecoveryPage .recovery-step.complete > span { font-size: 0; border-color: #287653; }

.RecoveryPage .recovery-form-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #173246; }
.RecoveryPage .recovery-form-heading > span { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid #bd832b; border-radius: 50%; background: radial-gradient(circle, #0d5e8c, #04101b 70%); color: #ffe19a; font-size: 10px; font-weight: 700; box-shadow: 0 0 10px rgba(43, 172, 229, .2); }
.RecoveryPage .recovery-form-heading h2 { margin: 0 0 4px; color: #f4d58d; font: 20px/1 Georgia, serif; }
.RecoveryPage .recovery-form-heading p { margin: 0; color: #829dab; font-size: 10px; }
.RecoveryPage .recovery-field label { margin-bottom: 9px; color: #70d6fa; font-size: 9px; letter-spacing: 1.15px; }
.RecoveryPage .recovery-input { height: 54px; padding: 0 17px; border-color: #2d607c; border-radius: 3px; background: #03101b; color: #effaff; font-size: 14px; }
.RecoveryPage .recovery-input:focus { border-color: #d29a37; background: #061827; box-shadow: 0 0 0 3px rgba(49, 177, 232, .09), inset 0 2px 8px rgba(0, 0, 0, .4); }
.RecoveryPage .recovery-button { height: 55px; margin-top: 17px; border-radius: 3px; background: linear-gradient(180deg, #bf862b, #75470d); color: #fff0c0; font-size: 16px; letter-spacing: .55px; }
.RecoveryPage .recovery-button::after { content: "  \276F"; color: #70ddff; }
.RecoveryPage .recovery-security { margin-top: 16px; color: #7d9bab; font-size: 10px; }
.RecoveryPage .recovery-message { margin-bottom: 20px; padding: 15px 17px; border-radius: 3px; font-size: 11px; }
.RecoveryPage .recovery-account { border-radius: 3px; background: linear-gradient(120deg, rgba(26, 43, 49, .86), rgba(5, 15, 24, .94)); }
.RecoveryPage .recovery-footer { margin-top: 23px; }
.RecoveryPage .recovery-footer a,
.RecoveryPage .recovery-login { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 16px; border: 1px solid #274b61; background: #061522; color: #c4dbe7 !important; font-size: 10px; letter-spacing: .35px; }
.RecoveryPage .recovery-footer a:hover,
.RecoveryPage .recovery-login:hover { border-color: #b98129; color: #f3cf7e !important; }

@media (max-width: 720px) {
    .RecoveryPage .recovery-head { padding: 25px 22px; }
    .RecoveryPage .recovery-head-badge { display: none; }
    .RecoveryPage .recovery-body { padding: 20px; }
    .RecoveryPage .recovery-step { justify-content: center; }
    .RecoveryPage .recovery-step > div { display: none; }
}

/* Secure Binance order checkout and administrator approval queue. */
.OrdersPage .OrdersPageShell::before { content: "PAYMENT ORDERS"; }
.OrdersPage .OrdersDashboard { padding: 14px; color: #b9cfdd; font-family: Arial, sans-serif; }
.OrdersPage .OrdersHero { display: flex; align-items: center; gap: 17px; min-height: 116px; padding: 20px 24px; border: 1px solid #9a6817; background: radial-gradient(circle at 12% 35%,rgba(22,145,199,.25),transparent 27%),linear-gradient(110deg,#031827,#070d15 58%,#171006); }
.OrdersPage .OrdersHero h1 { margin: 4px 0; color: #ffe09a; font: bold 28px Georgia,serif; text-shadow: 0 2px #000; }
.OrdersPage .OrdersHero small { color: #57d5ff; font-size: 8px; font-weight: 800; letter-spacing: 2px; }
.OrdersPage .OrdersHero p { margin: 0; color: #9bb3c2; font-size: 12px; }
.OrdersPage .OrdersFeedback { margin: 12px 0; padding: 13px 16px; border: 1px solid #168258; background: #062b22; color: #7ff0ba; font-weight: 700; }
.OrdersPage .OrdersFeedback.error { border-color: #a74034; background: #310e0d; color: #ff9d91; }
.OrdersPage .OrdersStats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 14px 0; }
.OrdersPage .OrdersStats article { padding: 16px; border: 1px solid #31546b; background: linear-gradient(145deg,#061b2b,#020b12); }
.OrdersPage .OrdersStats small,.OrdersPage .OrdersStats strong { display: block; }
.OrdersPage .OrdersStats small { color: #6bcff0; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.OrdersPage .OrdersStats strong { margin-top: 6px; color: #ffe09a; font: bold 26px Georgia,serif; }
.OrdersPage .OrderWizard { margin: 14px 0; overflow: hidden; border: 1px solid #a77019; background: #020c14; box-shadow: inset 0 0 28px #000,0 8px 25px rgba(0,0,0,.36); }
.OrdersPage .OrderWizardSteps { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid #805511; background: #041522; }
.OrdersPage .OrderWizardSteps button { padding: 12px 6px; border: 0; border-right: 1px solid #18384d; background: transparent; color: #627c8c; cursor: pointer; }
.OrdersPage .OrderWizardSteps button:last-child { border-right: 0; }
.OrdersPage .OrderWizardSteps span { display: grid; width: 25px; height: 25px; margin: 0 auto 5px; place-items: center; border: 1px solid #315a73; border-radius: 50%; font-weight: 900; }
.OrdersPage .OrderWizardSteps small { font-size: 7px; font-weight: 900; letter-spacing: 1px; }
.OrdersPage .OrderWizardSteps .active { color: #ffe09a; background: rgba(15,112,160,.15); }
.OrdersPage .OrderWizardSteps .active span,.OrdersPage .OrderWizardSteps .complete span { border-color: #d99a27; background: radial-gradient(circle,#1477a4,#03131e 72%); color: #fff; box-shadow: 0 0 11px rgba(65,205,255,.35); }
.OrdersPage .OrderWizardPanel { min-height: 345px; padding: 35px 9%; text-align: center; }
.OrdersPage .OrderWizardPanel[hidden] { display: none; }
.OrdersPage .OrderStepIcon { display: grid; width: 54px; height: 54px; margin: 0 auto 12px; place-items: center; border: 1px solid #d59a2c; border-radius: 50%; background: radial-gradient(circle,#1686b9,#031522 68%); color: #fff0b8; font: bold 23px Georgia,serif; box-shadow: 0 0 18px rgba(34,192,248,.25); }
.OrdersPage .OrderWizardPanel > small { color: #58d3fc; font-size: 8px; font-weight: 900; letter-spacing: 1.6px; }
.OrdersPage .OrderWizardPanel h2 { margin: 8px 0 16px; color: #ffe09b; font: bold 24px Georgia,serif; }
.OrdersPage .OrderWizardPanel h2 em { color: #58d8ff; font: bold 13px Arial,sans-serif; }
.OrdersPage .OrderWizardPanel p { color: #9ab1bf; font-size: 11px; line-height: 1.6; }
.OrdersPage .OrderChoiceSummary { display: grid; max-width: 470px; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px auto; padding: 14px; border: 1px solid #23485f; background: #03131f; text-align: left; }
.OrdersPage .OrderChoiceSummary span { color: #718e9f; font-size: 10px; }
.OrdersPage .OrderChoiceSummary strong { color: #dcecf4; font-size: 11px; text-align: right; }
.OrdersPage .OrderNext,.OrdersPage .OrderTransactionForm button,.OrdersPage .OrdersEmptyCheckout a { display: inline-block; min-width: 230px; padding: 13px 20px; border: 1px solid #cf9225; background: linear-gradient(#ba7a17,#684007); color: #fff3be !important; cursor: pointer; font-weight: 900; letter-spacing: .7px; text-decoration: none !important; text-shadow: 0 1px #000; }
.OrdersPage .OrderPaymentGrid { display: grid; max-width: 650px; grid-template-columns: 245px 1fr; gap: 22px; align-items: center; margin: 18px auto; text-align: left; }
.OrdersPage .OrderQr { height: 230px; overflow: hidden; border: 1px solid #ce922a; background: #fff; }
.OrdersPage .OrderQr img { display: block; width: 100%; height: 100%; object-fit: contain; }
.OrdersPage .OrderDestination { min-width: 0; }
.OrdersPage .OrderDestination small { color: #59d4fa; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.OrdersPage .OrderDestination strong { display: block; margin: 8px 0; color: #ffe3a1; font-size: 13px; overflow-wrap: anywhere; }
.OrdersPage .OrderDestination button { padding: 8px 18px; border: 1px solid #207ba5; background: #05283c; color: #9be8ff; cursor: pointer; font-weight: 800; }
.OrdersPage .OrderSentNotice { margin: 9px 0 15px; color: #64e4af; font-size: 11px; }
.OrdersPage .OrderTransactionForm { display: grid; max-width: 560px; gap: 15px; margin: 22px auto 0; text-align: left; }
.OrdersPage .OrderTransactionForm label { color: #5dd5fa; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.OrdersPage .OrderTransactionForm input { display: block; width: 100%; margin-top: 7px; padding: 13px; border: 1px solid #2a607d; background: #020d16; color: #fff; font-size: 13px; }
.OrdersPage .OrderTransactionForm button { width: 100%; }
.OrdersPage .OrderCaptcha { display:grid; gap:8px; padding:13px; border:1px solid #31566d; background:#03131f; overflow:hidden; }
.OrdersPage .OrderCaptcha > span { color:#62d8fb; font-size:8px; font-weight:900; letter-spacing:1px; }
.OrdersPage .OrderCaptcha .g-recaptcha { max-width:100%; transform-origin:top left; }

/* Raids schedule — premium invasion archive. */
.RaidsPage .RaidsPageShell::before { content:"RAID SCHEDULE"; }
.RaidsPage .RaidsDashboard,.RaidsPage .RaidsDashboard * { box-sizing:border-box; }
.RaidsPage .RaidsDashboard { display:grid; gap:14px; padding:12px; color:#b7ccd8; font-family:Arial,sans-serif; }
.RaidsPage .RaidsHero { position:relative; min-height:220px; overflow:hidden; border:1px solid #a36f20; background:#020a11; box-shadow:inset 0 0 35px #000,0 8px 22px rgba(0,0,0,.45); }
.RaidsPage .RaidsHero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.92) contrast(1.05); }
.RaidsPage .RaidsHeroShade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(1,8,14,.97) 0%,rgba(2,13,22,.82) 42%,rgba(2,9,15,.17) 72%,rgba(2,8,13,.68)),linear-gradient(0deg,rgba(0,0,0,.58),transparent 55%); }
.RaidsPage .RaidsHero::before { content:""; position:absolute; z-index:2; inset:9px; border:1px solid rgba(222,164,55,.35); pointer-events:none; }
.RaidsPage .RaidsHeroCopy { position:relative; z-index:3; max-width:520px; padding:37px 35px; }
.RaidsPage .RaidsHeroCopy > small { color:#5ed9ff; font-size:8px; font-weight:900; letter-spacing:2px; }
.RaidsPage .RaidsHeroCopy h1 { margin:8px 0 9px; color:#ffe0a0; font:bold 34px/1 Georgia,serif; text-shadow:0 2px 2px #000,0 0 13px rgba(219,151,35,.26); }
.RaidsPage .RaidsHeroCopy p { max-width:450px; margin:0; color:#b5c8d2; font-size:12px; line-height:1.65; }
.RaidsPage .RaidsHeroTags { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; }
.RaidsPage .RaidsHeroTags span { padding:7px 9px; border:1px solid #315e77; background:rgba(2,14,23,.82); color:#8bdffc; font-size:7px; font-weight:900; letter-spacing:.8px; }
.RaidsPage .RaidsHeroSeal { position:absolute; z-index:3; top:50%; right:36px; display:grid; width:105px; height:105px; place-content:center; border:1px solid #cf922b; border-radius:50%; background:radial-gradient(circle,#123d58,#020a11 70%); text-align:center; transform:translateY(-50%); box-shadow:0 0 0 6px rgba(1,8,13,.78),0 0 20px rgba(58,190,236,.25); }
.RaidsPage .RaidsHeroSeal span { color:#69dcff; font-size:27px; text-shadow:0 0 10px #36bce8; }
.RaidsPage .RaidsHeroSeal strong { color:#ffe09a; font:bold 13px Georgia,serif; }
.RaidsPage .RaidsHeroSeal small { margin-top:4px; color:#62e6ab; font-size:6px; font-weight:900; letter-spacing:1.3px; }
.RaidsPage .RaidsOverview { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.RaidsPage .RaidsOverview article { display:grid; min-height:94px; padding:15px; grid-template-columns:48px 1fr; align-items:center; gap:13px; border:1px solid #31566d; border-top-color:#a77727; background:linear-gradient(145deg,#071d2c,#020a11); box-shadow:inset 0 0 16px rgba(0,0,0,.45); }
.RaidsPage .RaidsOverviewIcon { display:grid; width:43px; height:43px; place-items:center; border:1px solid #bc8328; border-radius:50%; background:radial-gradient(circle,#12688f,#03131e 70%); color:#ffe09a; font-size:19px; }
.RaidsPage .RaidsOverview small,.RaidsPage .RaidsOverview strong,.RaidsPage .RaidsOverview p { display:block; }
.RaidsPage .RaidsOverview small { color:#60d6f8; font-size:7px; font-weight:900; letter-spacing:1px; }
.RaidsPage .RaidsOverview strong { margin-top:4px; color:#ffe0a0; font:bold 22px Georgia,serif; }
.RaidsPage .RaidsOverview p { margin:4px 0 0; color:#7893a2; font-size:8px; }
.RaidsPage .RaidsSchedule { overflow:hidden; border:1px solid #9d6b20; background:#020b12; box-shadow:0 8px 20px rgba(0,0,0,.38); }
.RaidsPage .RaidsSectionHeader { display:grid; min-height:102px; padding:18px 20px; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:14px; border-bottom:1px solid #a46e1e; background:radial-gradient(circle at 8% 50%,rgba(27,139,185,.25),transparent 22%),linear-gradient(90deg,#07243a,#050c13 67%,#171005); }
.RaidsPage .RaidsSectionIcon { display:grid; width:47px; height:47px; place-items:center; border:1px solid #c58b2b; border-radius:50%; background:#061b2a; color:#6ce0ff; font-size:22px; }
.RaidsPage .RaidsSectionHeader small { color:#5dd6fa; font-size:7px; font-weight:900; letter-spacing:1.4px; }
.RaidsPage .RaidsSectionHeader h2 { margin:4px 0; color:#ffe09a; font:bold 23px Georgia,serif; }
.RaidsPage .RaidsSectionHeader p { margin:0; color:#8ba3b1; font-size:9px; line-height:1.5; }
.RaidsPage .RaidsLegend { display:flex; gap:10px; }
.RaidsPage .RaidsLegend span { display:flex; align-items:center; gap:5px; color:#8ca7b5; font-size:7px; font-weight:900; }
.RaidsPage .RaidsLegend i { width:8px; height:8px; border-radius:50%; box-shadow:0 0 7px currentColor; }
.RaidsPage .RaidsLegend i.daily { background:#e0a535; color:#e0a535; }
.RaidsPage .RaidsLegend i.timed { background:#3ec9ef; color:#3ec9ef; }
.RaidsPage .RaidsTableWrap { overflow-x:auto; }
.RaidsPage .RaidsTable { width:100%; border-collapse:collapse; }
.RaidsPage .RaidsTable th { padding:12px 15px; border-bottom:1px solid #31556b; background:#041827; color:#63d8fa; font-size:8px; font-weight:900; letter-spacing:1px; text-align:left; }
.RaidsPage .RaidsTable tbody tr { background:#06141f; transition:background .16s ease,box-shadow .16s ease; }
.RaidsPage .RaidsTable tbody tr:nth-child(even) { background:#081b28; }
.RaidsPage .RaidsTable tbody tr:hover { background:#0b2637; box-shadow:inset 3px 0 #d99b2d; }
.RaidsPage .RaidsTable td { padding:11px 15px; border-bottom:1px solid #19384b; vertical-align:middle; }
.RaidsPage .RaidCreature { display:grid; min-width:245px; grid-template-columns:28px 58px 1fr; align-items:center; gap:10px; }
.RaidsPage .RaidRank { color:#658596; font:bold 9px Arial,sans-serif; }
.RaidsPage .RaidOutfit { display:grid; width:52px; height:52px; place-items:center; overflow:hidden; border:1px solid #2c607b; border-radius:50%; background:radial-gradient(circle,#0c3d58,#020b12 72%); box-shadow:inset 0 0 9px #000; }
.RaidsPage .RaidOutfit img { display:block; max-width:64px; max-height:64px; image-rendering:auto; }
.RaidsPage .RaidCreature strong { display:block; color:#ffe0a0; font:bold 13px Georgia,serif; text-shadow:0 1px #000; }
.RaidsPage .RaidCreature small { display:block; margin-top:4px; color:#5bcdf2; font-size:6px; font-weight:900; letter-spacing:1px; }
.RaidsPage .RaidScheduleValue,.RaidsPage .RaidLocation { display:flex; min-width:155px; align-items:center; gap:8px; }
.RaidsPage .RaidScheduleValue span,.RaidsPage .RaidLocation span { color:#59d8ff; font-size:16px; }
.RaidsPage .RaidScheduleValue strong,.RaidsPage .RaidLocation strong { color:#bcd0da; font-size:10px; }
.RaidsPage .RaidType { display:inline-block; min-width:85px; padding:7px 8px; border:1px solid; border-radius:12px; font-size:7px; font-weight:900; text-align:center; }
.RaidsPage .RaidType.daily { border-color:#ad7928; background:#302005; color:#ffd475; }
.RaidsPage .RaidType.timed { border-color:#26799d; background:#052739; color:#78ddff; }
.RaidsPage .RaidsNotice { display:grid; min-height:92px; padding:16px 18px; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:14px; border:1px solid #8d6424; background:linear-gradient(90deg,#09243a,#030c14 67%,#191105); }
.RaidsPage .RaidsNoticeIcon { display:grid; width:38px; height:38px; place-items:center; border:1px solid #c98c2c; border-radius:50%; background:#2b1b04; color:#ffcf68; font:bold 18px Georgia,serif; }
.RaidsPage .RaidsNotice small { color:#5ed7f9; font-size:7px; font-weight:900; letter-spacing:1px; }
.RaidsPage .RaidsNotice strong { display:block; margin-top:4px; color:#ffe0a0; font:bold 15px Georgia,serif; }
.RaidsPage .RaidsNotice p { margin:5px 0 0; color:#8ca3af; font-size:9px; line-height:1.45; }
.RaidsPage .RaidsNotice a { padding:11px 13px; border:1px solid #a77729; background:#071c2c; color:#ffe09a!important; font-size:8px; font-weight:900; text-decoration:none!important; }
@media(max-width:760px){.RaidsPage .RaidsHeroSeal{display:none}.RaidsPage .RaidsHeroCopy{padding:30px 24px}.RaidsPage .RaidsOverview{grid-template-columns:1fr}.RaidsPage .RaidsSectionHeader{grid-template-columns:48px 1fr}.RaidsPage .RaidsLegend{grid-column:1/-1}.RaidsPage .RaidsNotice{grid-template-columns:38px 1fr}.RaidsPage .RaidsNotice a{grid-column:1/-1;text-align:center}}

/* Raids readability and table isolation from legacy global table colors. */
.RaidsPage .RaidsDashboard { gap:17px; padding:16px; }
.RaidsPage .RaidsHero { min-height:250px; border-color:#d0932e; box-shadow:inset 0 0 45px #000,0 10px 27px rgba(0,0,0,.55),0 0 13px rgba(27,153,209,.13); }
.RaidsPage .RaidsHeroCopy { max-width:570px; padding:44px 39px; }
.RaidsPage .RaidsHeroCopy > small { font-size:10px; letter-spacing:2.2px; }
.RaidsPage .RaidsHeroCopy h1 { margin:10px 0 12px; font-size:41px; }
.RaidsPage .RaidsHeroCopy p { max-width:500px; color:#d0dee5; font-size:14px; line-height:1.7; }
.RaidsPage .RaidsHeroTags { margin-top:20px; gap:9px; }
.RaidsPage .RaidsHeroTags span { padding:8px 11px; font-size:9px; }
.RaidsPage .RaidsHeroSeal { width:122px; height:122px; right:40px; }
.RaidsPage .RaidsHeroSeal span { font-size:32px; }
.RaidsPage .RaidsHeroSeal strong { font-size:16px; }
.RaidsPage .RaidsHeroSeal small { font-size:8px; }
.RaidsPage .RaidsOverview { gap:12px; }
.RaidsPage .RaidsOverview article { min-height:112px; padding:18px; grid-template-columns:55px 1fr; gap:15px; border-color:#3a6b84; border-top-color:#c48a2c; }
.RaidsPage .RaidsOverviewIcon { width:49px; height:49px; font-size:22px; }
.RaidsPage .RaidsOverview small { font-size:9px; letter-spacing:1.1px; }
.RaidsPage .RaidsOverview strong { margin-top:6px; font-size:28px; }
.RaidsPage .RaidsOverview p { margin-top:5px; color:#9bb0bb; font-size:10px; }
.RaidsPage .RaidsSchedule { border-color:#cb8e2b; box-shadow:0 10px 25px rgba(0,0,0,.5); }
.RaidsPage .RaidsSectionHeader { min-height:125px; padding:22px 24px; grid-template-columns:60px minmax(0,1fr) auto; gap:17px; }
.RaidsPage .RaidsSectionIcon { width:54px; height:54px; font-size:25px; }
.RaidsPage .RaidsSectionHeader small { font-size:9px; letter-spacing:1.6px; }
.RaidsPage .RaidsSectionHeader h2 { margin:6px 0; font-size:28px; }
.RaidsPage .RaidsSectionHeader p { color:#a8bbc5; font-size:11px; line-height:1.55; }
.RaidsPage .RaidsLegend { gap:13px; }
.RaidsPage .RaidsLegend span { font-size:9px; }
.RaidsPage .RaidsTable th { padding:15px 17px!important; border-color:#39657d!important; background:#031724!important; color:#71dcfa!important; font-size:10px!important; letter-spacing:1.2px; }
.RaidsPage .RaidsTable tbody tr,.RaidsPage .RaidsTable tbody tr:nth-child(even) { background:transparent!important; }
.RaidsPage .RaidsTable tbody td { padding:14px 17px!important; border-color:#1d4155!important; background:#061622!important; color:#c8d8e0!important; }
.RaidsPage .RaidsTable tbody tr:nth-child(even) td { background:#091d2b!important; }
.RaidsPage .RaidsTable tbody tr:hover td { background:#0d2b3d!important; box-shadow:inset 0 1px rgba(64,190,235,.08),inset 0 -1px rgba(64,190,235,.08); }
.RaidsPage .RaidsTable tbody tr:hover td:first-child { box-shadow:inset 4px 0 #d89a2f; }
.RaidsPage .RaidCreature { min-width:265px; grid-template-columns:32px 66px 1fr; gap:12px; }
.RaidsPage .RaidRank { color:#6f9bae; font-size:11px; }
.RaidsPage .RaidOutfit { width:60px; height:60px; border-color:#3f88aa; box-shadow:inset 0 0 12px #000,0 0 10px rgba(43,164,210,.13); }
.RaidsPage .RaidOutfit img { max-width:73px; max-height:73px; }
.RaidsPage .RaidCreature strong { color:#ffe4a8!important; font-size:16px; }
.RaidsPage .RaidCreature small { margin-top:5px; color:#65d8fa!important; font-size:8px; letter-spacing:1.2px; }
.RaidsPage .RaidScheduleValue,.RaidsPage .RaidLocation { min-width:165px; gap:10px; }
.RaidsPage .RaidScheduleValue span,.RaidsPage .RaidLocation span { font-size:19px; }
.RaidsPage .RaidScheduleValue strong,.RaidsPage .RaidLocation strong { color:#d2e0e7!important; font-size:12px; line-height:1.35; }
.RaidsPage .RaidType { min-width:98px; padding:8px 10px; font-size:9px; letter-spacing:.4px; }
.RaidsPage .RaidsNotice { min-height:110px; padding:19px 21px; }
.RaidsPage .RaidsNoticeIcon { width:44px; height:44px; font-size:21px; }
.RaidsPage .RaidsNotice small { font-size:9px; }
.RaidsPage .RaidsNotice strong { margin-top:5px; font-size:18px; }
.RaidsPage .RaidsNotice p { margin-top:6px; color:#a7bac4; font-size:11px; }
.RaidsPage .RaidsNotice a { padding:13px 15px; font-size:9px; }
@media(max-width:760px){.RaidsPage .RaidsDashboard{padding:10px}.RaidsPage .RaidsHero{min-height:230px}.RaidsPage .RaidsHeroCopy{padding:34px 25px}.RaidsPage .RaidsHeroCopy h1{font-size:34px}.RaidsPage .RaidsHeroCopy p{font-size:12px}.RaidsPage .RaidsSectionHeader{grid-template-columns:55px 1fr}.RaidsPage .RaidsTable th,.RaidsPage .RaidsTable tbody td{padding:12px!important}}

/* Raids — premium invasion schedule. */
.RaidsPage .RaidsPageShell::before { content:"WORLD RAIDS"; }
.RaidsPage .RaidsDashboard,.RaidsPage .RaidsDashboard * { box-sizing:border-box; }
.RaidsPage .RaidsDashboard { display:grid; gap:14px; padding:10px; color:#b9ced9; font-family:Arial,sans-serif; }
.RaidsPage .RaidsHero { position:relative; min-height:205px; overflow:hidden; border:1px solid #a36f1c; background:#020a11; box-shadow:inset 0 0 0 4px rgba(0,0,0,.55),0 8px 22px rgba(0,0,0,.38); }
.RaidsPage .RaidsHero::before { content:""; position:absolute; inset:8px; z-index:2; border:1px solid rgba(234,176,65,.3); pointer-events:none; }
.RaidsPage .RaidsHero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.82) contrast(1.12) brightness(.62); }
.RaidsPage .RaidsHeroShade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(1,9,16,.97) 0%,rgba(2,13,23,.82) 43%,rgba(3,10,16,.18) 76%,rgba(2,8,13,.68)),radial-gradient(circle at 73% 38%,rgba(24,151,207,.18),transparent 32%); }
.RaidsPage .RaidsHeroCopy { position:relative; z-index:3; width:68%; padding:38px 34px; }
.RaidsPage .RaidsHeroCopy > small { color:#63d8fb; font-size:8px; font-weight:900; letter-spacing:2.1px; }
.RaidsPage .RaidsHeroCopy h1 { margin:8px 0 9px; color:#ffe2a0; font:bold 34px/1 Georgia,serif; text-shadow:0 2px 2px #000,0 0 13px rgba(216,153,38,.25); }
.RaidsPage .RaidsHeroCopy p { max-width:505px; margin:0; color:#9eb5c2; font-size:11px; line-height:1.65; }
.RaidsPage .RaidsHeroTags { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; }
.RaidsPage .RaidsHeroTags span { padding:6px 9px; border:1px solid #315a71; background:rgba(2,15,25,.8); color:#8bdcf5; font-size:7px; font-weight:900; letter-spacing:.7px; }
.RaidsPage .RaidsHeroSeal { position:absolute; z-index:3; top:50%; right:34px; display:grid; width:118px; height:118px; place-content:center; border:1px solid #c78c2b; border-radius:50%; background:radial-gradient(circle,#114d70 0%,#041724 54%,#01070c 73%); box-shadow:inset 0 0 0 5px #02090e,inset 0 0 0 6px #76521b,0 0 20px rgba(45,185,236,.23); text-align:center; transform:translateY(-50%); }
.RaidsPage .RaidsHeroSeal span { color:#63ddff; font-size:28px; text-shadow:0 0 13px #2dc8ff; }
.RaidsPage .RaidsHeroSeal strong,.RaidsPage .RaidsHeroSeal small { display:block; }
.RaidsPage .RaidsHeroSeal strong { margin-top:4px; color:#ffe09a; font:bold 14px Georgia,serif; letter-spacing:1px; }
.RaidsPage .RaidsHeroSeal small { margin-top:3px; color:#67e7ae; font-size:6px; font-weight:900; letter-spacing:1.4px; }
.RaidsPage .RaidsOverview { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.RaidsPage .RaidsOverview article { display:flex; min-height:92px; align-items:center; gap:13px; padding:15px; border:1px solid #31566d; border-top-color:#a67527; background:linear-gradient(135deg,#071e2e,#020b12); box-shadow:inset 0 0 15px rgba(0,0,0,.35); }
.RaidsPage .RaidsOverviewIcon { display:grid; flex:0 0 45px; width:45px; height:45px; place-items:center; border:1px solid #bb8328; border-radius:50%; background:radial-gradient(circle,#1577a3,#031421 69%); color:#ffe09b; font-size:18px; box-shadow:0 0 11px rgba(46,187,235,.2); }
.RaidsPage .RaidsOverview small,.RaidsPage .RaidsOverview strong,.RaidsPage .RaidsOverview p { display:block; }
.RaidsPage .RaidsOverview small { color:#62d4f7; font-size:7px; font-weight:900; letter-spacing:1px; }
.RaidsPage .RaidsOverview strong { margin:4px 0 2px; color:#ffe09b; font:bold 22px Georgia,serif; }
.RaidsPage .RaidsOverview p { margin:0; color:#718d9d; font-size:8px; }
.RaidsPage .RaidsSchedule { overflow:hidden; border:1px solid #a36f1c; background:#020b12; box-shadow:inset 0 0 22px #000; }
.RaidsPage .RaidsSectionHeader { display:flex; min-height:105px; align-items:center; gap:15px; padding:17px 20px; border-bottom:1px solid #9b691c; background:radial-gradient(circle at 15% 50%,rgba(18,127,174,.2),transparent 27%),linear-gradient(90deg,#062237,#070d14); }
.RaidsPage .RaidsSectionIcon { display:grid; flex:0 0 51px; width:51px; height:51px; place-items:center; border:1px solid #cb902f; border-radius:50%; background:#041827; color:#63dcff; font-size:22px; box-shadow:inset 0 0 12px #000; }
.RaidsPage .RaidsSectionHeader > div:nth-child(2) { min-width:0; flex:1; }
.RaidsPage .RaidsSectionHeader small { color:#5dd6fb; font-size:7px; font-weight:900; letter-spacing:1.5px; }
.RaidsPage .RaidsSectionHeader h2 { margin:4px 0; color:#ffe09a; font:bold 22px Georgia,serif; }
.RaidsPage .RaidsSectionHeader p { margin:0; color:#839daa; font-size:9px; line-height:1.5; }
.RaidsPage .RaidsLegend { display:flex; gap:10px; padding-left:15px; }
.RaidsPage .RaidsLegend span { display:flex; align-items:center; gap:5px; color:#7895a5; font-size:7px; font-weight:900; white-space:nowrap; }
.RaidsPage .RaidsLegend i { width:7px; height:7px; border-radius:50%; box-shadow:0 0 7px currentColor; }
.RaidsPage .RaidsLegend i.daily { background:#edb642; color:#edb642; }
.RaidsPage .RaidsLegend i.timed { background:#44d2ff; color:#44d2ff; }
.RaidsPage .RaidsTableWrap { overflow-x:auto; padding:10px; }
.RaidsPage .RaidsTable { width:100%; border-collapse:collapse; }
.RaidsPage .RaidsTable th { padding:12px 14px; border-bottom:1px solid #9c6a20; background:#041725; color:#63d8fa; font-size:7px; font-weight:900; letter-spacing:1.1px; text-align:left; }
.RaidsPage .RaidsTable tbody tr { background:#061521; transition:background .16s ease,transform .16s ease; }
.RaidsPage .RaidsTable tbody tr:nth-child(even) { background:#081c29; }
.RaidsPage .RaidsTable tbody tr:hover { background:#0b293b; }
.RaidsPage .RaidsTable td { padding:10px 14px; border-bottom:1px solid #1b3b4e; color:#b9ccd7; font-size:10px; vertical-align:middle; }
.RaidsPage .RaidCreature { display:flex; min-width:225px; align-items:center; gap:10px; }
.RaidsPage .RaidRank { color:#5f7d8d; font:bold 10px Georgia,serif; }
.RaidsPage .RaidOutfit { position:relative; display:grid; flex:0 0 54px; width:54px; height:54px; place-items:center; overflow:hidden; border:1px solid #32647f; border-radius:50%; background:radial-gradient(circle,#0d3349,#01080e 72%); box-shadow:inset 0 0 9px #000; }
.RaidsPage .RaidOutfit img { display:block; max-width:52px; max-height:52px; object-fit:contain; image-rendering:auto; }
.RaidsPage .RaidCreature strong,.RaidsPage .RaidCreature small { display:block; }
.RaidsPage .RaidCreature strong { color:#ffe0a0; font:bold 13px Georgia,serif; text-shadow:0 1px #000; }
.RaidsPage .RaidCreature small { margin-top:4px; color:#5acdf2; font-size:6px; font-weight:900; letter-spacing:1px; }
.RaidsPage .RaidScheduleValue,.RaidsPage .RaidLocation { display:flex; min-width:145px; align-items:center; gap:8px; }
.RaidsPage .RaidScheduleValue span { color:#55d6ff; font-size:17px; }
.RaidsPage .RaidLocation span { color:#e4aa3b; font-size:14px; }
.RaidsPage .RaidScheduleValue strong,.RaidsPage .RaidLocation strong { color:#bcd1dc; font-size:10px; }
.RaidsPage .RaidType { display:inline-block; min-width:75px; padding:6px 8px; border:1px solid; border-radius:13px; font-size:6px; font-weight:900; letter-spacing:.7px; text-align:center; }
.RaidsPage .RaidType.daily { border-color:#ad7925; background:#342405; color:#ffd475; }
.RaidsPage .RaidType.timed { border-color:#27799d; background:#05283a; color:#75ddff; }
.RaidsPage .RaidsNotice { display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid #875e22; border-left:3px solid #e5ac3c; background:linear-gradient(90deg,#211705,#061622 70%); }
.RaidsPage .RaidsNoticeIcon { display:grid; flex:0 0 38px; width:38px; height:38px; place-items:center; border:1px solid #c28a2d; border-radius:50%; background:#352105; color:#ffd472; font:bold 18px Georgia,serif; }
.RaidsPage .RaidsNotice > div { flex:1; }
.RaidsPage .RaidsNotice small,.RaidsPage .RaidsNotice strong { display:block; }
.RaidsPage .RaidsNotice small { color:#62d5f7; font-size:6px; font-weight:900; letter-spacing:1.2px; }
.RaidsPage .RaidsNotice strong { margin:4px 0; color:#ffe0a0; font:bold 14px Georgia,serif; }
.RaidsPage .RaidsNotice p { margin:0; color:#8399a5; font-size:8px; line-height:1.5; }
.RaidsPage .RaidsNotice a { padding:10px 13px; border:1px solid #b37d28; background:#09283d; color:#ffe09a !important; font-size:7px; font-weight:900; text-decoration:none !important; white-space:nowrap; }
.RaidsPage .RaidsNotice a:hover { filter:brightness(1.2); }
@media (max-width:700px) {
  .RaidsPage .RaidsHeroCopy { width:100%; padding:30px 24px 145px; text-align:center; }
  .RaidsPage .RaidsHeroSeal { top:auto; right:50%; bottom:18px; width:100px; height:100px; transform:translateX(50%); }
  .RaidsPage .RaidsHeroTags { justify-content:center; }
  .RaidsPage .RaidsOverview { grid-template-columns:1fr; }
  .RaidsPage .RaidsSectionHeader { align-items:flex-start; }
  .RaidsPage .RaidsLegend { display:none; }
  .RaidsPage .RaidsNotice { align-items:flex-start; flex-wrap:wrap; }
  .RaidsPage .RaidsNotice a { width:100%; text-align:center; }
}
.OrdersPage .OrdersEmptyCheckout,.OrdersPage .OrdersEmptyList { margin: 14px 0; padding: 30px; border: 1px solid #31546b; background: #03131f; text-align: center; }
.OrdersPage .OrdersEmptyCheckout > span { color: #54d6ff; font-size: 30px; }
.OrdersPage .OrdersEmptyCheckout h2 { color: #ffe09a; font: bold 22px Georgia,serif; }
.OrdersPage .OrdersListSection { margin-top: 14px; border: 1px solid #a16d19; background: #020c14; }
.OrdersPage .OrdersListSection > header { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid #815710; background: linear-gradient(90deg,#062237,#080b10); }
.OrdersPage .OrdersListSection header small { color: #55d4ff; font-size: 7px; font-weight: 900; letter-spacing: 1.4px; }
.OrdersPage .OrdersListSection h2 { margin: 3px 0 0; color: #ffe09b; font: bold 20px Georgia,serif; }
.OrdersPage .OrdersListSection header a { padding: 8px 13px; border: 1px solid #2581aa; color: #8de4ff !important; font-size: 9px; font-weight: 900; text-decoration: none !important; }
.OrdersPage .OrdersFilters { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding:10px; border-bottom:1px solid #294b60; background:#020b12; }
.OrdersPage .OrdersFilters button { min-height:34px; border:1px solid #294e64; background:#061827; color:#7595a7; cursor:pointer; font-size:8px; font-weight:900; letter-spacing:.7px; }
.OrdersPage .OrdersFilters button:hover,.OrdersPage .OrdersFilters button.active { border-color:#c58b2c; background:linear-gradient(#10486a,#07263d); color:#ffe09a; }
.OrdersPage .OrdersAdminSearch { display:flex; align-items:end; justify-content:space-between; gap:14px; padding:12px; border-bottom:1px solid #294b60; background:linear-gradient(90deg,#041725,#020b12); }
.OrdersPage .OrdersAdminSearch label { display:grid; flex:1; gap:7px; }
.OrdersPage .OrdersAdminSearch label span { color:#60d7fb; font-size:8px; font-weight:900; letter-spacing:1px; }
.OrdersPage .OrdersAdminSearch input { box-sizing:border-box; width:100%; min-height:40px; padding:0 13px; border:1px solid #396c87; border-radius:2px; outline:0; background:#020d16; color:#d9edf7; font-size:11px; }
.OrdersPage .OrdersAdminSearch input:focus { border-color:#c58b2c; box-shadow:0 0 0 2px rgba(197,139,44,.12); }
.OrdersPage .OrdersAdminSearch small { padding-bottom:11px; color:#7d9aaa; font-size:8px; white-space:nowrap; }
.OrdersPage .OrdersTableScroll { overflow-x: auto; }
.OrdersPage .OrdersTable { width: 100%; border-collapse: collapse; }
.OrdersPage .OrdersTable th { padding: 13px 12px; border-bottom: 1px solid #b77b1d; background: #041b2a !important; color: #66ddff; font-size: 9px; font-weight: 900; letter-spacing: 1px; text-align: left; white-space: nowrap; }
.OrdersPage .OrdersTable tbody tr { background: #061521 !important; transition: background .16s ease; }
.OrdersPage .OrdersTable tbody tr:nth-child(even) { background: #081c2a !important; }
.OrdersPage .OrdersTable tbody tr:hover { background: #0b2637 !important; }
.OrdersPage .OrdersTable td { max-width: 190px; padding: 14px 12px; border-bottom: 1px solid #1b4055; background: transparent !important; color: #c4d6e0 !important; font-size: 10px; line-height: 1.35; vertical-align: top; }
.OrdersPage .OrdersTable td strong,.OrdersPage .OrdersTable td small { display: block; }
.OrdersPage .OrdersTable td strong { color: #ffe0a0 !important; font-size: 11px; }
.OrdersPage .OrdersTable td:first-child strong { color: #67ddff !important; font: bold 16px Georgia,serif; }
.OrdersPage .OrdersTable td small { margin-top: 5px; color: #789bac !important; font-size: 9px; overflow-wrap: anywhere; }
.OrdersPage .OrdersTable code { display: inline-block; max-width: 165px; padding: 5px 7px; border: 1px solid #1e4c65; background: #020d15; color: #71defe !important; font-size: 9px; overflow-wrap: anywhere; }
.OrdersPage .OrderStatus { display: inline-block; padding: 5px 9px; border: 1px solid; border-radius: 12px; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.OrdersPage .OrderStatus.pending { border-color: #c78b22; background: #322205; color: #ffd477; }
.OrdersPage .OrderStatus.processing { border-color: #278ab5; background: #06293b; color: #83ddff; }
.OrdersPage .OrderStatus.approved { border-color: #168a5e; background: #062c22; color: #73eeb9; }
.OrdersPage .OrderStatus.rejected { border-color: #9b4037; background: #310e0d; color: #ff958a; }
.OrdersPage .OrderGateway,.OrdersPage .OrderAutomatic { display:inline-block; padding:5px 8px; border:1px solid #33708e; border-radius:2px; background:#062337; color:#79ddff; font-size:7px; font-weight:900; letter-spacing:.7px; }
.OrdersPage .OrderGateway.paypal { border-color:#3978b4; color:#91cfff; }
.OrdersPage .OrderGateway.wallet { border-color:#3c9a70; color:#82edb8; }
.OrdersPage .OrderGateway.tibiacoin { border-color:#b17d27; color:#ffda83; }
.OrdersPage .OrderAutomatic { border-color:#26956a; background:#062c22; color:#7cebb9; white-space:nowrap; }
.OrdersPage .OrderPaymentGrid.no-qr { grid-template-columns:1fr; max-width:520px; }
.OrdersPage .OrderWizardArabic { font-family:Tahoma,Arial,sans-serif; }
.OrdersPage .OrderWizardArabic .OrderDestination,.OrdersPage .OrderWizardArabic .OrderTransactionForm { text-align:right; }
.OrdersPage .OrderAdminActions { display: grid; min-width: 190px; grid-template-columns: 1fr 1fr; gap: 7px; }
.OrdersPage .OrderAdminActions input { grid-column: 1/-1; min-width: 0; padding: 9px; border: 1px solid #376780; border-radius: 2px; background: #020b12; color: #fff; }
.OrdersPage .OrderAdminActions button { padding: 9px 5px; border: 1px solid; cursor: pointer; font-size: 8px; font-weight: 900; transition: filter .15s ease,transform .15s ease; }
.OrdersPage .OrderAdminActions button:hover { filter: brightness(1.2); transform: translateY(-1px); }
.OrdersPage .OrderAdminActions .approve { border-color: #168a5e; background: #07452f; color: #85f5c2; }
.OrdersPage .OrderAdminActions .reject { border-color: #a44439; background: #44120f; color: #ffaaa1; }
@media (max-width:700px) {
  .OrdersPage .OrdersStats { grid-template-columns: repeat(2,1fr); }
  .OrdersPage .OrderPaymentGrid { grid-template-columns: 1fr; }
  .OrdersPage .OrderQr { width: 230px; margin: auto; }
  .OrdersPage .OrderWizardPanel { padding: 25px 15px; }
  .OrdersPage .OrdersFilters { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 500px) {
    .RecoveryPage .recovery-page { margin-top: 12px; padding: 5px; }
    .RecoveryPage .recovery-head { gap: 15px; }
    .RecoveryPage .recovery-emblem { width: 58px; height: 58px; flex-basis: 58px; }
    .RecoveryPage .recovery-emblem::before { width: 23px; height: 27px; }
    .RecoveryPage .recovery-emblem span { top: 29px; }
    .RecoveryPage .recovery-head h1 { font-size: 25px !important; }
    .RecoveryPage .recovery-head p { font-size: 10px; }
}

/* Recovery layout refinement: remove the nested legacy-paper frame */
.RecoveryPage #news > .BorderTitleText {
    height: 8px !important;
    background-image: linear-gradient(90deg, #07131d, #12658d 50%, #07131d) !important;
}

.RecoveryPage #news > .Border_2,
.RecoveryPage #news > .Border_2 > .Border_3 {
    padding: 0 !important;
    border: 0 !important;
    background: #020914 !important;
}

.RecoveryPage #news > .Border_2 > .Border_3 > .BoxContent {
    min-height: 0;
    padding: 10px !important;
    background-image: radial-gradient(circle at 50% 0, rgba(16, 103, 148, .18), transparent 34%), linear-gradient(180deg, #06131f, #020914) !important;
}

.RecoveryPage .recovery-page {
    width: 100%;
    max-width: 790px;
    margin: 0 auto;
    padding: 0;
    background: none;
    clip-path: none;
    filter: none;
}

.RecoveryPage .recovery-page::before,
.RecoveryPage .recovery-page::after { display: none; }

.RecoveryPage .recovery-card {
    overflow: hidden;
    border: 1px solid #a87422;
    border-radius: 4px;
    background: #020812;
    box-shadow: inset 0 0 0 3px #02070d, inset 0 0 0 4px rgba(54, 171, 226, .24), 0 10px 24px rgba(0, 0, 0, .48);
}

.RecoveryPage .recovery-card::after {
    content: "";
    position: absolute;
    z-index: 5;
    top: 117px;
    left: 50%;
    width: 15px;
    height: 15px;
    border: 2px solid #d89b32;
    background: radial-gradient(circle, #65d9ff 0 20%, #086893 24% 49%, #020914 53%);
    box-shadow: 0 0 9px rgba(59, 198, 251, .5);
    transform: translate(-50%, -50%) rotate(45deg);
}

.RecoveryPage .recovery-head {
    min-height: 118px;
    padding: 23px 30px;
}

.RecoveryPage .recovery-head h1 {
    font-size: 31px !important;
}

.RecoveryPage .recovery-emblem {
    width: 70px;
    height: 70px;
    flex-basis: 70px;
}

.RecoveryPage .recovery-emblem span { top: 34px; }
.RecoveryPage .recovery-head-badge { width: 66px; height: 66px; flex-basis: 66px; }
.RecoveryPage .recovery-head-badge strong { font-size: 25px; }

.RecoveryPage .recovery-body {
    padding: 23px 30px 22px;
}

.RecoveryPage .recovery-steps {
    gap: 10px;
    margin-bottom: 22px;
}

.RecoveryPage .recovery-step {
    min-height: 48px;
    box-sizing: border-box;
    padding: 8px 10px;
    opacity: .76;
}

.RecoveryPage .recovery-step small { color: #7195aa; font-size: 7px; }
.RecoveryPage .recovery-step strong { color: #bfd2dc; font-size: 12px; }
.RecoveryPage .recovery-step.active { opacity: 1; }

.RecoveryPage .recovery-form-heading {
    gap: 0;
    margin-bottom: 17px;
    padding: 0 0 14px;
}

.RecoveryPage .recovery-form-heading > span { display: none; }
.RecoveryPage .recovery-form-heading h2 { font-size: 22px; }
.RecoveryPage .recovery-form-heading p { font-size: 11px; line-height: 1.5; }
.RecoveryPage .recovery-field label { font-size: 10px; }
.RecoveryPage .recovery-input { height: 52px; }
.RecoveryPage .recovery-button { height: 53px; }

.RecoveryPage .recovery-footer {
    margin-top: 19px;
    padding-top: 13px;
}

@media (max-width: 720px) {
    .RecoveryPage #news > .Border_2 > .Border_3 > .BoxContent { padding: 6px !important; }
    .RecoveryPage .recovery-card::after { top: 108px; }
    .RecoveryPage .recovery-head { min-height: 108px; padding: 20px; }
    .RecoveryPage .recovery-body { padding: 20px; }
}

/* Recovery page aligned with the shared RoyalDataPage design system */
.RecoveryPage .RecoveryPageShell::before { content: "ACCOUNT RECOVERY"; }

.RecoveryPage #news.RecoveryPageShell > .BorderTitleText,
.RecoveryPage #news.RecoveryPageShell > .Corner-tl,
.RecoveryPage #news.RecoveryPageShell > .Corner-tr,
.RecoveryPage #news.RecoveryPageShell > .Border_1,
.RecoveryPage #news.RecoveryPageShell > .Title,
.RecoveryPage #news.RecoveryPageShell > .CornerWrapper-b { display: none !important; }

.RecoveryPage #news.RecoveryPageShell > .Border_2,
.RecoveryPage #news.RecoveryPageShell > .Border_2 > .Border_3 {
    padding: 0 !important;
    border: 0 !important;
    background: #020711 !important;
}

.RecoveryPage #news.RecoveryPageShell .BoxContent {
    min-height: 0;
    padding: 14px !important;
    background: radial-gradient(circle at 50% 0, rgba(17, 102, 148, .14), transparent 34%), #020711 !important;
    box-shadow: none;
}

.RecoveryPage .recovery-page { max-width: none; margin: 0; }

.RecoveryPage .recovery-card {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.RecoveryPage .recovery-card::before,
.RecoveryPage .recovery-card::after { display: none; }

.RecoveryPage .recovery-head {
    min-height: 140px;
    padding: 27px 30px;
    border: 1px solid #95651d;
    border-radius: 3px;
    background: radial-gradient(circle at 9% 45%, rgba(24, 139, 198, .25), transparent 28%), linear-gradient(108deg, #09233a, #030b13 63%, #171006);
    box-shadow: inset 0 0 0 3px #020812, inset 0 0 0 4px rgba(44, 139, 187, .2), 0 8px 18px rgba(0, 0, 0, .35);
}

.RecoveryPage .recovery-head::before { inset: 6px; }
.RecoveryPage .recovery-head h1 { font-size: 32px !important; }

.RecoveryPage .recovery-body { padding: 14px 0 0; background: transparent; }

.RecoveryPage .recovery-steps {
    margin: 0 0 14px;
    padding: 9px;
    border: 1px solid #294d63;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(6, 24, 38, .96), rgba(2, 10, 17, .98));
    box-shadow: inset 0 0 14px rgba(17, 100, 145, .08);
}

.RecoveryPage .recovery-step { min-height: 52px; border-color: #24465a; background: #061522; }

.RecoveryPage .recovery-step.active {
    border-color: #aa7424;
    background: radial-gradient(circle at 12% 50%, rgba(20, 130, 185, .25), transparent 36%), linear-gradient(110deg, #0a263a, #100d07);
}

.RecoveryPage .recovery-body > form {
    padding: 22px;
    border: 1px solid #875b1b;
    border-radius: 3px;
    background: radial-gradient(circle at 50% 0, rgba(17, 104, 151, .13), transparent 38%), linear-gradient(180deg, #061522, #020a12);
    box-shadow: inset 0 0 0 3px #020812, inset 0 0 0 4px rgba(42, 126, 168, .16), 0 7px 16px rgba(0, 0, 0, .3);
}

.RecoveryPage .recovery-form-heading { margin-bottom: 19px; padding-bottom: 16px; }
.RecoveryPage .recovery-form-heading h2 { font-size: 23px; }
.RecoveryPage .recovery-form-heading p { font-size: 11px; }
.RecoveryPage .recovery-message,
.RecoveryPage .recovery-account { border-radius: 3px; }

.RecoveryPage .recovery-footer {
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #183247;
}

@media (max-width: 720px) {
    .RecoveryPage #news.RecoveryPageShell .BoxContent { padding: 10px !important; }
    .RecoveryPage .recovery-head { min-height: 118px; padding: 22px; }
    .RecoveryPage .recovery-body { padding: 10px 0 0; }
    .RecoveryPage .recovery-body > form { padding: 17px; }
}

/* Final raid-page layer: keep the archive readable above legacy table rules. */
body.RaidsPage .RaidsDashboard {
    gap: 18px !important;
    padding: 17px !important;
}

body.RaidsPage .RaidsHero {
    min-height: 255px !important;
    border-color: #d69a34 !important;
    box-shadow: inset 0 0 48px #000, 0 11px 28px rgba(0, 0, 0, .58), 0 0 16px rgba(42, 181, 235, .14) !important;
}

body.RaidsPage .RaidsHeroCopy {
    width: 72% !important;
    max-width: 590px !important;
    padding: 45px 40px !important;
}

body.RaidsPage .RaidsHeroCopy > small { font-size: 10px !important; }
body.RaidsPage .RaidsHeroCopy h1 { margin: 10px 0 13px !important; font-size: 42px !important; }
body.RaidsPage .RaidsHeroCopy p { color: #d5e3ea !important; font-size: 14px !important; line-height: 1.72 !important; }
body.RaidsPage .RaidsHeroTags span { padding: 8px 11px !important; font-size: 9px !important; }
body.RaidsPage .RaidsHeroSeal { right: 40px !important; width: 124px !important; height: 124px !important; }
body.RaidsPage .RaidsHeroSeal span { font-size: 33px !important; }
body.RaidsPage .RaidsHeroSeal strong { font-size: 16px !important; }
body.RaidsPage .RaidsHeroSeal small { font-size: 8px !important; }

body.RaidsPage .RaidsOverview { gap: 13px !important; }
body.RaidsPage .RaidsOverview article {
    min-height: 116px !important;
    padding: 19px !important;
    border-color: #396a83 !important;
    border-top-color: #c88e2e !important;
    background: linear-gradient(145deg, #082238, #020b13) !important;
}
body.RaidsPage .RaidsOverviewIcon { flex-basis: 50px !important; width: 50px !important; height: 50px !important; font-size: 23px !important; }
body.RaidsPage .RaidsOverview small { font-size: 9px !important; }
body.RaidsPage .RaidsOverview strong { margin: 6px 0 3px !important; font-size: 28px !important; }
body.RaidsPage .RaidsOverview p { color: #a8bbc5 !important; font-size: 10px !important; }

body.RaidsPage .RaidsSchedule { border-color: #ca8d2b !important; }
body.RaidsPage .RaidsSectionHeader { min-height: 126px !important; gap: 17px !important; padding: 22px 24px !important; }
body.RaidsPage .RaidsSectionIcon { flex-basis: 55px !important; width: 55px !important; height: 55px !important; font-size: 25px !important; }
body.RaidsPage .RaidsSectionHeader small { font-size: 9px !important; }
body.RaidsPage .RaidsSectionHeader h2 { margin: 6px 0 !important; font-size: 29px !important; }
body.RaidsPage .RaidsSectionHeader p { color: #afc1ca !important; font-size: 11px !important; }
body.RaidsPage .RaidsLegend span { color: #aac0ca !important; font-size: 9px !important; }
body.RaidsPage .RaidsTableWrap { padding: 12px !important; background: #020a11 !important; }

body.RaidsPage .RaidsTable th {
    padding: 16px 18px !important;
    border-bottom: 1px solid #bc8128 !important;
    background: #031927 !important;
    color: #72ddfb !important;
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
}

body.RaidsPage .RaidsTable tbody tr,
body.RaidsPage .RaidsTable tbody tr:nth-child(even) { background: transparent !important; }
body.RaidsPage .RaidsTable tbody td {
    padding: 15px 18px !important;
    border-bottom: 1px solid #21475a !important;
    background: #061723 !important;
    color: #d1e0e7 !important;
    font-size: 12px !important;
}
body.RaidsPage .RaidsTable tbody tr:nth-child(even) > td { background: #09202e !important; }
body.RaidsPage .RaidsTable tbody tr:hover > td { background: #0d3043 !important; }
body.RaidsPage .RaidsTable tbody tr:hover > td:first-child { box-shadow: inset 4px 0 #e0a23a !important; }

body.RaidsPage .RaidCreature { min-width: 275px !important; gap: 13px !important; }
body.RaidsPage .RaidRank { font-size: 12px !important; }
body.RaidsPage .RaidOutfit { flex-basis: 62px !important; width: 62px !important; height: 62px !important; border-color: #438daf !important; }
body.RaidsPage .RaidOutfit img { max-width: 72px !important; max-height: 72px !important; }
body.RaidsPage .RaidCreature strong { color: #ffe4a6 !important; font-size: 17px !important; }
body.RaidsPage .RaidCreature small { margin-top: 5px !important; color: #68ddff !important; font-size: 8px !important; }
body.RaidsPage .RaidScheduleValue,
body.RaidsPage .RaidLocation { min-width: 170px !important; gap: 10px !important; }
body.RaidsPage .RaidScheduleValue span,
body.RaidsPage .RaidLocation span { font-size: 19px !important; }
body.RaidsPage .RaidScheduleValue strong,
body.RaidsPage .RaidLocation strong { color: #d6e4ea !important; font-size: 12px !important; line-height: 1.4 !important; }
body.RaidsPage .RaidType { min-width: 102px !important; padding: 9px 11px !important; font-size: 9px !important; }

body.RaidsPage .RaidsNotice { min-height: 112px !important; padding: 20px 22px !important; }
body.RaidsPage .RaidsNoticeIcon { flex-basis: 45px !important; width: 45px !important; height: 45px !important; font-size: 21px !important; }
body.RaidsPage .RaidsNotice small { font-size: 9px !important; }
body.RaidsPage .RaidsNotice strong { margin: 5px 0 !important; font-size: 19px !important; }
body.RaidsPage .RaidsNotice p { color: #afc0c8 !important; font-size: 11px !important; }
body.RaidsPage .RaidsNotice a { padding: 13px 16px !important; font-size: 9px !important; }

@media (max-width: 700px) {
    body.RaidsPage .RaidsDashboard { padding: 10px !important; }
    body.RaidsPage .RaidsHeroCopy { width: 100% !important; padding: 32px 24px 145px !important; }
    body.RaidsPage .RaidsHeroCopy h1 { font-size: 34px !important; }
    body.RaidsPage .RaidsHeroCopy p { font-size: 12px !important; }
    body.RaidsPage .RaidsTable th,
    body.RaidsPage .RaidsTable tbody td { padding: 12px !important; }
}

/* Guild Portal — live presentation for the opcode 167 guild system. */
.GuildPortalPage .GuildPortalShell::before { content: "GUILD HALL"; }
.TopGuildsPage .TopGuildsShell::before { content: "TOP GUILDS"; }
.GuildPortalPage .GuildPortal,
.GuildPortalPage .GuildPortal * { box-sizing: border-box; }
.GuildPortalPage .GuildPortal {
    display: grid;
    gap: 17px;
    padding: 15px;
    color: #c7d9e2;
    font-family: Arial, sans-serif;
}
.GuildPortalPage .GuildPortal a { text-decoration: none; }
.GuildPortalPage .GuildHero {
    position: relative;
    display: grid;
    min-height: 246px;
    grid-template-columns: 128px minmax(0, 1fr) 125px;
    align-items: center;
    gap: 24px;
    overflow: hidden;
    padding: 30px 36px;
    border: 1px solid #b77d24;
    background: radial-gradient(circle at 13% 50%, rgba(27, 144, 192, .35), transparent 26%), radial-gradient(circle at 85% 30%, rgba(37, 121, 169, .18), transparent 28%), linear-gradient(115deg, #08283e, #020a12 57%, #171006);
    box-shadow: inset 0 0 0 5px #020911, inset 0 0 0 6px rgba(55, 165, 211, .18), 0 10px 28px rgba(0, 0, 0, .5);
}
.GuildPortalPage .GuildHero::before {
    content: "";
    position: absolute;
    inset: 11px;
    border: 1px solid rgba(218, 157, 51, .34);
    pointer-events: none;
}
.GuildPortalPage .GuildHeroCrest {
    position: relative;
    z-index: 1;
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    border: 1px solid #d0922d;
    border-radius: 50%;
    background: radial-gradient(circle, #176b91, #041725 61%, #01070c 72%);
    box-shadow: 0 0 0 7px rgba(1, 8, 14, .8), 0 0 25px rgba(48, 193, 240, .25);
}
.GuildPortalPage .GuildHeroCrest::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 213, 122, .32);
    border-radius: inherit;
}
.GuildPortalPage .GuildHeroCrest span { color: #ffe5a3; font-size: 54px; text-shadow: 0 2px #000, 0 0 18px #2ec7ff; }
.GuildPortalPage .GuildHeroCopy { position: relative; z-index: 1; }
.GuildPortalPage .GuildHeroCopy > small,
.GuildPortalPage .GuildProfileIdentity > small,
.GuildPortalPage .GuildSectionTitle small,
.GuildPortalPage .GuildLeaderboardHero small,
.GuildPortalPage .GuildBuffPanel header small,
.GuildPortalPage .GuildWarsPanel header small,
.GuildPortalPage .GuildRankingNotice small {
    color: #61d9fb;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.8px;
}
.GuildPortalPage .GuildHeroCopy h1 {
    margin: 8px 0 10px;
    color: #ffe2a0;
    font: bold 39px/1 Georgia, serif;
    text-shadow: 0 2px 2px #000, 0 0 15px rgba(219, 155, 42, .24);
}
.GuildPortalPage .GuildHeroCopy p { max-width: 520px; margin: 0; color: #c0d1d9; font-size: 13px; line-height: 1.7; }
.GuildPortalPage .GuildHeroActions { display: flex; align-items: center; gap: 13px; margin-top: 20px; }
.GuildPortalPage .GuildHeroActions a,
.GuildPortalPage .GuildHeroActions span,
.GuildPortalPage .GuildSectionTitle > a,
.GuildPortalPage .GuildBack a,
.GuildPortalPage .GuildLeaderboardHero > a {
    padding: 10px 14px;
    border: 1px solid #a97526;
    background: linear-gradient(180deg, #0d3b59, #041726);
    color: #ffe2a0 !important;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .8px;
}
.GuildPortalPage .GuildHeroActions span { border-color: #2c617c; color: #70dcfa !important; }
.GuildPortalPage .GuildHeroSeal { position: relative; z-index: 1; text-align: center; }
.GuildPortalPage .GuildHeroSeal strong { display: block; color: #70e1ff; font: bold 43px Georgia, serif; text-shadow: 0 0 13px #1caee8; }
.GuildPortalPage .GuildHeroSeal small { color: #ffe09a; font-size: 8px; font-weight: 900; letter-spacing: 1.3px; }

.GuildPortalPage .GuildStatGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.GuildPortalPage .GuildStatGrid article {
    display: grid;
    min-height: 104px;
    grid-template-columns: 45px 1fr;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid #315e76;
    border-top-color: #b98129;
    background: linear-gradient(145deg, #082338, #020b12);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .45);
}
.GuildPortalPage .GuildStatGrid article > span { display: grid; width: 41px; height: 41px; place-items: center; border: 1px solid #bf872d; border-radius: 50%; background: #062035; color: #ffe09a; font-size: 20px; box-shadow: 0 0 12px rgba(42, 179, 226, .18); }
.GuildPortalPage .GuildStatGrid small,
.GuildPortalPage .GuildCardMetrics small,
.GuildPortalPage .GuildProfileStats small,
.GuildPortalPage .GuildRankingMetric small,
.GuildPortalPage .GuildRankingScore small { display: block; color: #63d7f7; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.GuildPortalPage .GuildStatGrid strong { display: block; margin: 4px 0 2px; color: #ffe1a0; font: bold 23px Georgia, serif; }
.GuildPortalPage .GuildStatGrid p { margin: 0; color: #839ba8; font-size: 9px; line-height: 1.35; }

.GuildPortalPage .GuildDirectory,
.GuildPortalPage .GuildMembersPanel,
.GuildPortalPage .GuildRankingPanel {
    overflow: hidden;
    border: 1px solid #a57222;
    background: #020b13;
    box-shadow: 0 9px 24px rgba(0, 0, 0, .43);
}
.GuildPortalPage .GuildSectionTitle {
    display: grid;
    min-height: 105px;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 18px 21px;
    border-bottom: 1px solid #a16c1f;
    background: radial-gradient(circle at 10% 50%, rgba(26, 138, 184, .24), transparent 24%), linear-gradient(90deg, #07243a, #040c13 70%, #181006);
}
.GuildPortalPage .GuildSectionTitle > span { display: grid; width: 49px; height: 49px; place-items: center; border: 1px solid #c68c2d; border-radius: 50%; background: #061b2a; color: #ffe09a; font-size: 22px; }
.GuildPortalPage .GuildSectionTitle h2,
.GuildPortalPage .GuildBuffPanel h2,
.GuildPortalPage .GuildWarsPanel h2 { margin: 4px 0; color: #ffe2a0; font: bold 24px Georgia, serif; }
.GuildPortalPage .GuildSectionTitle p { margin: 0; color: #95aeb9; font-size: 10px; line-height: 1.5; }
.GuildPortalPage .GuildSectionTitle > b { color: #69dcfa; font-size: 10px; letter-spacing: 1px; }
.GuildPortalPage .GuildCardGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.GuildPortalPage .GuildCard {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid #315b72;
    background: linear-gradient(145deg, #081f30, #020a11 67%);
    color: #bfd2dc !important;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .42);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.GuildPortalPage .GuildCard:hover { z-index: 2; border-color: #d09530; box-shadow: inset 0 0 20px rgba(23, 133, 181, .16), 0 8px 21px rgba(0, 0, 0, .48); transform: translateY(-2px); }
.GuildPortalPage .GuildCardTop { display: grid; grid-template-columns: 34px 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 16px 15px 12px; }
.GuildPortalPage .GuildCardRank { color: #d6a54f; font: bold 14px Georgia, serif; }
.GuildPortalPage .GuildCardTop > img { width: 58px; height: 58px; object-fit: contain; border: 1px solid #3e7088; border-radius: 50%; background: radial-gradient(circle, #0e4664, #020a11 72%); }
.GuildPortalPage .GuildCardTop div > small { color: #61d7f9; font-size: 7px; font-weight: 900; letter-spacing: 1px; }
.GuildPortalPage .GuildCardTop h3 { margin: 3px 0; overflow: hidden; color: #ffe2a0; font: bold 18px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.GuildPortalPage .GuildCardTop p { margin: 0; color: #87a3b1; font-size: 9px; }
.GuildPortalPage .GuildCardTop em { color: #6fdfff; font: normal bold 18px Georgia, serif; text-align: right; }
.GuildPortalPage .GuildCardTop em small { display: block; margin-top: 2px; color: #7f98a5; font: normal 7px Arial, sans-serif; letter-spacing: 1px; }
.GuildPortalPage .GuildCardMotd { min-height: 47px; margin: 0 14px; padding: 10px 11px; border: 1px solid #183b50; background: #020d16; color: #9fb5c0; font-size: 10px; line-height: 1.45; }
.GuildPortalPage .GuildCardMetrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 11px 14px; background: #18384a; }
.GuildPortalPage .GuildCardMetrics span { min-width: 0; padding: 9px 7px; background: #061622; text-align: center; }
.GuildPortalPage .GuildCardMetrics strong { display: block; margin-top: 4px; color: #e6f0f4; font-size: 11px; }
.GuildPortalPage .GuildCapacity { height: 3px; margin: 0 14px; overflow: hidden; background: #162d3a; }
.GuildPortalPage .GuildCapacity i { display: block; height: 100%; background: linear-gradient(90deg, #198fc1, #5be0ff, #dda033); box-shadow: 0 0 8px #36c8f5; }
.GuildPortalPage .GuildCard footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px 14px; }
.GuildPortalPage .GuildCard footer span { color: #718c9a; font-size: 8px; font-weight: 900; }
.GuildPortalPage .GuildCard footer span.online { color: #5ee6a9; }
.GuildPortalPage .GuildCard footer b { color: #ffe09a; font-size: 9px; letter-spacing: .5px; }
.GuildPortalPage .GuildEmpty { grid-column: 1 / -1; padding: 45px 20px; text-align: center; }
.GuildPortalPage .GuildEmpty strong { color: #ffe0a0; font: bold 21px Georgia, serif; }
.GuildPortalPage .GuildEmpty p { color: #8ba2ae; font-size: 11px; }
.GuildPortalPage .GuildClientNotice,
.GuildPortalPage .GuildRankingNotice { display: grid; min-height: 104px; grid-template-columns: 46px 1fr; align-items: center; gap: 15px; padding: 18px 21px; border: 1px solid #91651f; border-left: 3px solid #d99b31; background: linear-gradient(90deg, #1c1405, #061b2a 72%); }
.GuildPortalPage .GuildClientNotice > span,
.GuildPortalPage .GuildRankingNotice > span { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid #c88c2b; border-radius: 50%; color: #ffe09a; font-size: 21px; }
.GuildPortalPage .GuildClientNotice small { color: #5fd6f8; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.GuildPortalPage .GuildClientNotice strong,
.GuildPortalPage .GuildRankingNotice strong { display: block; margin: 5px 0; color: #ffe1a0; font: bold 17px Georgia, serif; }
.GuildPortalPage .GuildClientNotice p,
.GuildPortalPage .GuildRankingNotice p { margin: 0; color: #9db1ba; font-size: 10px; line-height: 1.55; }

/* Guild profile */
.GuildPortalPage .GuildBack { display: flex; justify-content: space-between; }
.GuildPortalPage .GuildProfileHero { display: grid; min-height: 218px; grid-template-columns: 145px minmax(0, 1fr) 150px; align-items: center; gap: 22px; padding: 27px 31px; border: 1px solid #b47a23; background: radial-gradient(circle at 10% 50%, rgba(26, 140, 190, .32), transparent 28%), linear-gradient(110deg, #09283e, #020a12 65%, #181006); box-shadow: inset 0 0 0 5px #020911, inset 0 0 0 6px rgba(53, 161, 207, .17), 0 9px 24px rgba(0, 0, 0, .46); }
.GuildPortalPage .GuildProfileLogo { display: grid; width: 128px; height: 128px; place-items: center; border: 1px solid #cf932e; border-radius: 50%; background: radial-gradient(circle, #105372, #020a11 72%); box-shadow: 0 0 0 7px rgba(0, 6, 11, .8), 0 0 22px rgba(50, 192, 238, .22); }
.GuildPortalPage .GuildProfileLogo img { max-width: 104px; max-height: 104px; }
.GuildPortalPage .GuildProfileIdentity h1 { margin: 7px 0 8px; color: #ffe2a0; font: bold 35px Georgia, serif; }
.GuildPortalPage .GuildProfileIdentity > small { font-size: 11px; letter-spacing: 2px; }
.GuildPortalPage .GuildProfileIdentity > p { max-width: 500px; margin: 0; color: #c4d5dd; font-size: 14px; line-height: 1.65; }
.GuildPortalPage .GuildProfileIdentity > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.GuildPortalPage .GuildProfileIdentity > div span { padding: 8px 11px; border: 1px solid #2c5c75; background: #041522; color: #82e1fb; font-size: 10px; font-weight: 900; line-height: 1.2; }
.GuildPortalPage .GuildProfileScore { padding: 18px 12px; border: 1px solid #91631f; background: #050d12; text-align: center; }
.GuildPortalPage .GuildProfileScore small { display: block; color: #62d8fa; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; }
.GuildPortalPage .GuildProfileScore strong { display: block; margin: 7px 0; color: #ffe09b; font: bold 32px Georgia, serif; text-shadow: 0 0 12px rgba(255, 181, 48, .25); }
.GuildPortalPage .GuildProfileScore em { color: #9bb1bc; font: normal 10px Arial, sans-serif; }
.GuildPortalPage .GuildProfileStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.GuildPortalPage .GuildProfileStats article { min-height: 104px; padding: 17px; border: 1px solid #315c73; border-top-color: #af7925; background: linear-gradient(145deg, #082237, #020a11); }
.GuildPortalPage .GuildProfileStats strong { display: block; margin: 7px 0 4px; overflow: hidden; color: #ffe1a0; font: bold 19px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.GuildPortalPage .GuildProfileStats small { font-size: 10px; letter-spacing: 1.15px; }
.GuildPortalPage .GuildProfileStats p { margin: 0; color: #9bb0ba; font-size: 11px; line-height: 1.4; }
.GuildPortalPage .GuildTableWrap { overflow-x: auto; padding: 12px; }
.GuildPortalPage .GuildMembersTable { width: 100%; border-collapse: collapse; }
.GuildPortalPage .GuildMembersTable th { padding: 14px 13px !important; border-bottom: 1px solid #b47b25 !important; background: #031825 !important; color: #6edcfb !important; font-size: 9px !important; font-weight: 900; letter-spacing: 1px; text-align: left; }
.GuildPortalPage .GuildMembersTable td { padding: 13px !important; border-bottom: 1px solid #1c3c4e !important; background: #061622 !important; color: #c4d5de !important; font-size: 11px !important; }
.GuildPortalPage .GuildMembersTable tr:nth-child(even) td { background: #091d2a !important; }
.GuildPortalPage .GuildMembersTable tr:hover td { background: #0c2a3c !important; }
.GuildPortalPage .GuildMembersTable td:first-child a { display: flex; align-items: center; gap: 10px; color: #ffe1a0 !important; }
.GuildPortalPage .GuildMemberAvatar { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border: 1px solid #397895; border-radius: 50%; background: radial-gradient(circle, #12648c, #020b12 72%); color: #ffe09a; font: bold 17px Georgia, serif; }
.GuildPortalPage .GuildMembersTable td strong,
.GuildPortalPage .GuildMembersTable td small { display: block; }
.GuildPortalPage .GuildMembersTable td small { margin-top: 3px; color: #6e93a6; font-size: 8px; }
.GuildPortalPage .GuildStatus { display: inline-block; padding: 7px 9px; border: 1px solid #3b4c55; border-radius: 12px; background: #111a1e; color: #84949c; font-size: 8px; font-weight: 900; }
.GuildPortalPage .GuildStatus.online { border-color: #208862; background: #052a20; color: #64e7ac; box-shadow: 0 0 9px rgba(65, 221, 160, .12); }
.GuildPortalPage .GuildLowerGrid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 12px; }
.GuildPortalPage .GuildBuffPanel,
.GuildPortalPage .GuildWarsPanel { overflow: hidden; border: 1px solid #9c6b20; background: #020b12; }
.GuildPortalPage .GuildBuffPanel > header,
.GuildPortalPage .GuildWarsPanel > header { padding: 16px 18px; border-bottom: 1px solid #7e581c; background: linear-gradient(90deg, #08243a, #050b10); }
.GuildPortalPage .GuildBuffGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 12px; }
.GuildPortalPage .GuildBuffGrid > div { display: grid; min-height: 45px; grid-template-columns: 31px 1fr auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid #24485c; background: #051520; }
.GuildPortalPage .GuildBuffGrid > div > span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #365e72; border-radius: 50%; color: #6e91a1; font-size: 8px; }
.GuildPortalPage .GuildBuffGrid strong { color: #aebfc7; font-size: 10px; }
.GuildPortalPage .GuildBuffGrid em { color: #718c98; font: normal 8px Arial, sans-serif; }
.GuildPortalPage .GuildBuffGrid > div.active { border-color: #9f7227; background: linear-gradient(90deg, #0b3046, #0d130d); }
.GuildPortalPage .GuildBuffGrid > div.active > span { border-color: #c58c2e; color: #ffe09a; box-shadow: 0 0 9px rgba(56, 197, 242, .18); }
.GuildPortalPage .GuildBuffGrid > div.active strong { color: #ffe09a; }
.GuildPortalPage .GuildBuffGrid > div.active em { color: #61d9fa; }
.GuildPortalPage .GuildWarList { display: grid; gap: 7px; padding: 12px; }
.GuildPortalPage .GuildWarList > div { display: grid; min-height: 59px; grid-template-columns: 76px 1fr; align-items: center; gap: 9px; padding: 9px; border: 1px solid #244658; background: #051520; }
.GuildPortalPage .GuildWarList strong { color: #ffe0a0; font: bold 13px Georgia, serif; }
.GuildPortalPage .GuildWarList small { grid-column: 2; margin-top: -15px; color: #7895a3; font-size: 8px; }
.GuildPortalPage .GuildWarState { grid-row: 1 / 3; padding: 7px 5px; border: 1px solid #395567; border-radius: 11px; color: #92a8b2; font-size: 7px; font-weight: 900; text-align: center; }
.GuildPortalPage .GuildWarState.state2 { border-color: #a5352b; background: #30100d; color: #ff8278; }
.GuildPortalPage .GuildWarState.state0,
.GuildPortalPage .GuildWarState.state1 { border-color: #a87929; background: #2a1d05; color: #ffd275; }
.GuildPortalPage .GuildNoWars { grid-template-columns: 1fr !important; text-align: center; }
.GuildPortalPage .GuildNoWars small { grid-column: 1 !important; margin: 0 !important; }

/* Top guild leaderboard */
.GuildPortalPage .GuildLeaderboardHero { display: grid; min-height: 170px; grid-template-columns: 94px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 27px 31px; border: 1px solid #b47a24; background: radial-gradient(circle at 11% 50%, rgba(23, 142, 192, .32), transparent 27%), linear-gradient(105deg, #092b43, #020a12 66%, #181006); box-shadow: inset 0 0 0 5px #020911, inset 0 0 0 6px rgba(59, 170, 216, .17); }
.GuildPortalPage .GuildLeaderboardCrown { display: grid; width: 82px; height: 82px; place-items: center; border: 1px solid #cf932e; border-radius: 50%; background: radial-gradient(circle, #176b92, #020b13 70%); color: #ffe09a; font-size: 43px; box-shadow: 0 0 17px rgba(52, 193, 239, .22); }
.GuildPortalPage .GuildLeaderboardHero h1 { margin: 6px 0 8px; color: #ffe2a0; font: bold 34px Georgia, serif; }
.GuildPortalPage .GuildLeaderboardHero p { max-width: 520px; margin: 0; color: #aabfc9; font-size: 11px; line-height: 1.6; }
.GuildPortalPage .GuildScoreFormula { display: grid; grid-template-columns: 1fr auto 1fr auto 1.25fr auto 1fr auto 1fr; align-items: center; gap: 7px; padding: 12px; border: 1px solid #315a71; background: #03131f; }
.GuildPortalPage .GuildScoreFormula span { padding: 10px 7px; border: 1px solid #1c4054; background: #061a28; text-align: center; }
.GuildPortalPage .GuildScoreFormula small { display: block; color: #64d8f8; font-size: 7px; font-weight: 900; letter-spacing: .8px; }
.GuildPortalPage .GuildScoreFormula strong { display: block; margin-top: 4px; color: #ffe09a; font: bold 16px Georgia, serif; }
.GuildPortalPage .GuildScoreFormula i { color: #d9a13d; font: normal bold 16px Georgia, serif; }
.GuildPortalPage .GuildRankingList { display: grid; gap: 7px; padding: 12px; }
.GuildPortalPage .GuildRankingRow { display: grid; min-height: 90px; grid-template-columns: 48px 54px minmax(125px, 1.4fr) repeat(3, minmax(70px, .7fr)) minmax(88px, .8fr); align-items: center; gap: 7px; padding: 11px 10px; border: 1px solid #284f65; background: linear-gradient(90deg, #071e2e, #04111b); color: #c4d6df !important; transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.GuildPortalPage .GuildRankingRow:hover { border-color: #ca8e2d; background: linear-gradient(90deg, #0b2d42, #07151e); transform: translateX(2px); }
.GuildPortalPage .GuildRankingRow.place1 { min-height: 108px; border-color: #c28a2d; background: radial-gradient(circle at 8% 50%, rgba(205, 147, 45, .16), transparent 18%), linear-gradient(90deg, #0b3045, #08141b 70%, #181105); box-shadow: inset 3px 0 #e4ae45, 0 6px 15px rgba(0, 0, 0, .3); }
.GuildPortalPage .GuildRankingPlace { color: #ffe09a; font: bold 20px Georgia, serif; text-align: center; }
.GuildPortalPage .GuildRankingPlace small { display: block; margin-top: 3px; color: #7195a6; font: normal 6px Arial, sans-serif; letter-spacing: .7px; }
.GuildPortalPage .GuildRankingLogo { display: grid; width: 57px; height: 57px; place-items: center; border: 1px solid #39748f; border-radius: 50%; background: radial-gradient(circle, #0d4665, #020a11 72%); }
.GuildPortalPage .place1 .GuildRankingLogo { width: 62px; height: 62px; border-color: #c48d31; }
.GuildPortalPage .GuildRankingLogo img { max-width: 52px; max-height: 52px; }
.GuildPortalPage .GuildRankingIdentity small { display: block; color: #62d8fa; font-size: 7px; font-weight: 900; letter-spacing: 1px; }
.GuildPortalPage .GuildRankingIdentity strong { display: block; margin: 4px 0; overflow: hidden; color: #ffe1a0; font: bold 17px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.GuildPortalPage .GuildRankingIdentity em,
.GuildPortalPage .GuildRankingMetric em,
.GuildPortalPage .GuildRankingScore em { display: block; color: #7895a4; font: normal 8px Arial, sans-serif; }
.GuildPortalPage .GuildRankingMetric strong { display: block; margin: 5px 0 3px; color: #d8e7ed; font-size: 13px; }
.GuildPortalPage .GuildRankingScore { padding-left: 12px; border-left: 1px solid #2c5266; text-align: right; }
.GuildPortalPage .GuildRankingScore strong { display: block; margin: 4px 0; color: #71dfff; font: bold 18px Georgia, serif; }
.GuildPortalPage .GuildRankingScore em { color: #ffe09a; font-size: 7px; font-weight: 900; }

@media (max-width: 900px) {
    .GuildPortalPage .GuildStatGrid { grid-template-columns: repeat(2, 1fr); }
    .GuildPortalPage .GuildCardGrid { grid-template-columns: 1fr; }
    .GuildPortalPage .GuildRankingRow { grid-template-columns: 55px 58px minmax(150px, 1fr) repeat(2, 90px); }
    .GuildPortalPage .GuildRankingRow .GuildRankingMetric:nth-of-type(5),
    .GuildPortalPage .GuildRankingScore { display: none; }
}
@media (max-width: 700px) {
    .GuildPortalPage .GuildPortal { padding: 9px; }
    .GuildPortalPage .GuildHero { grid-template-columns: 82px 1fr; padding: 27px 23px; }
    .GuildPortalPage .GuildHeroCrest { width: 75px; height: 75px; }
    .GuildPortalPage .GuildHeroCrest span { font-size: 36px; }
    .GuildPortalPage .GuildHeroSeal { display: none; }
    .GuildPortalPage .GuildHeroCopy h1 { font-size: 31px; }
    .GuildPortalPage .GuildStatGrid,
    .GuildPortalPage .GuildProfileStats,
    .GuildPortalPage .GuildLowerGrid { grid-template-columns: 1fr; }
    .GuildPortalPage .GuildSectionTitle { grid-template-columns: 48px 1fr; }
    .GuildPortalPage .GuildSectionTitle > a,
    .GuildPortalPage .GuildSectionTitle > b { grid-column: 1 / -1; text-align: center; }
    .GuildPortalPage .GuildProfileHero { grid-template-columns: 95px 1fr; padding: 23px; }
    .GuildPortalPage .GuildProfileLogo { width: 88px; height: 88px; }
    .GuildPortalPage .GuildProfileLogo img { max-width: 74px; max-height: 74px; }
    .GuildPortalPage .GuildProfileScore { grid-column: 1 / -1; }
    .GuildPortalPage .GuildLeaderboardHero { grid-template-columns: 70px 1fr; padding: 23px; }
    .GuildPortalPage .GuildLeaderboardCrown { width: 62px; height: 62px; font-size: 31px; }
    .GuildPortalPage .GuildLeaderboardHero > a { grid-column: 1 / -1; text-align: center; }
    .GuildPortalPage .GuildScoreFormula { grid-template-columns: repeat(2, 1fr); }
    .GuildPortalPage .GuildScoreFormula i { display: none; }
    .GuildPortalPage .GuildRankingRow { grid-template-columns: 45px 52px minmax(135px, 1fr); }
    .GuildPortalPage .GuildRankingMetric,
    .GuildPortalPage .GuildRankingScore { display: none !important; }
}

/* Payment readability pass: Binance checkout + Egyptian wallets */
.BinanceStorePage .bn-panel h3 { font-size: 20px; line-height: 1.2; }
.BinanceStorePage .bn-network-option { min-height: 52px; padding: 10px 7px; }
.BinanceStorePage .bn-network-option strong { font-size: 14px; }
.BinanceStorePage .bn-network-option small { margin-top: 5px; color: #a9c0cc; font-size: 9px; line-height: 1.25; }
.BinanceStorePage .bn-network-payment { gap: 17px; }
.BinanceStorePage .bn-network-qr {
    width: 246px;
    max-width: 100%;
    height: 246px;
    border: 2px solid #c48b2d;
    background: #05090d;
    box-shadow: inset 0 0 0 4px #06101a, 0 9px 18px rgba(0,0,0,.48), 0 0 12px rgba(228,171,43,.13);
}
.BinanceStorePage .bn-network-qr img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.BinanceStorePage .bn-selected-network-name small { font-size: 10px; }
.BinanceStorePage .bn-selected-network-name strong { margin-top: 7px; font-size: 19px; line-height: 1.25; }
.BinanceStorePage .bn-method-label { font-size: 9px; }
.BinanceStorePage .bn-value { font-size: 11px; line-height: 1.55; }
.BinanceStorePage .bn-copy { min-width: 48px; font-size: 9px; }
.BinanceStorePage .bn-network-warning { color: #a8bdc8; font-size: 10px; line-height: 1.55; }
.BinanceStorePage .bn-field label { font-size: 9px; }
.BinanceStorePage .bn-field select { height: 43px; font-size: 12px; }
.BinanceStorePage .bn-summary { min-height: 74px; color: #a3b6c0; font-size: 11px; }
.BinanceStorePage .bn-summary strong { font-size: 17px; }
.BinanceStorePage .bn-confirm-order { min-height: 45px; font-size: 12px; }
.BinanceStorePage .bn-help { color: #96acb7; font-size: 9px; }
.BinanceStorePage .bn-warning { color: #b5c5cd; font-size: 10px; line-height: 1.65; }
.BinanceStorePage .bn-policy { color: #96aab5; font-size: 9px; line-height: 1.65; }

.WalletStorePage .ew-head { padding: 17px 15px; }
.WalletStorePage .ew-head h2 { font-size: 22px; line-height: 1.35; }
.WalletStorePage .ew-head p { color: #a7bbc5; font-size: 11px; line-height: 1.7; }
.WalletStorePage .ew-card { min-height: 205px; padding: 22px 10px 12px; }
.WalletStorePage .ew-badge { padding: 5px 9px; font-size: 9px; }
.WalletStorePage .ew-money-icon { width: 50px; height: 50px; font-size: 13px; }
.WalletStorePage .ew-price { font-size: 23px; }
.WalletStorePage .ew-currency { color: #9fdcf1; font-size: 9px; }
.WalletStorePage .ew-points { font-size: 16px; }
.WalletStorePage .ew-select { min-height: 39px; font-size: 10px; }
.WalletStorePage .ew-panel { padding: 18px; }
.WalletStorePage .ew-panel h3 { font-size: 20px; line-height: 1.3; }
.WalletStorePage .ew-steps { gap: 9px; }
.WalletStorePage .ew-steps li { min-height: 46px; padding: 11px 45px 11px 12px; color: #bacbd3; font-size: 11px; line-height: 1.65; }
.WalletStorePage .ew-steps li::before { right: 10px; width: 27px; height: 27px; font-size: 10px; }
.WalletStorePage .ew-field label { font-size: 9px; }
.WalletStorePage .ew-field select { height: 43px; font-size: 12px; }
.WalletStorePage .ew-summary { min-height: 64px; color: #a4b7c1; font-size: 11px; }
.WalletStorePage .ew-summary strong { font-size: 15px; }
.WalletStorePage .ew-confirm { min-height: 45px; font-size: 13px; }
.WalletStorePage .ew-help { color: #9bafb9; font-size: 9px; }
.WalletStorePage .ew-notice { padding: 15px 16px; color: #bdcbd2; font-size: 11px; line-height: 1.8; }
.WalletStorePage .ew-policy { padding: 12px 14px; color: #9db0ba; font-size: 10px; line-height: 1.75; }

@media (max-width: 560px) {
    .BinanceStorePage .bn-network-qr { width: 230px; height: 230px; }
    .WalletStorePage .ew-head h2 { font-size: 19px; }
}

/* Tibia Coins checkout readability */
.TibiaCoinStorePage .tc-panel { padding: 18px; }
.TibiaCoinStorePage .tc-panel h3 { margin-bottom: 16px; padding-bottom: 11px; font-size: 22px; line-height: 1.2; }
.TibiaCoinStorePage .tc-steps { gap: 9px; }
.TibiaCoinStorePage .tc-steps li {
    min-height: 52px;
    padding: 12px 12px 12px 49px;
    color: #c7d7df;
    font-size: 13px;
    line-height: 1.65;
}
.TibiaCoinStorePage .tc-steps li::before { left: 10px; width: 29px; height: 29px; font-size: 11px; }
.TibiaCoinStorePage .tc-field label { margin-bottom: 9px; font-size: 10px; }
.TibiaCoinStorePage .tc-field select { height: 45px; padding: 0 12px; font-size: 13px; }
.TibiaCoinStorePage .tc-summary { min-height: 70px; padding: 13px 15px; color: #afc2cc; font-size: 12px; }
.TibiaCoinStorePage .tc-summary strong { font-size: 18px; }
.TibiaCoinStorePage .tc-discord { min-height: 46px; font-size: 12px; letter-spacing: .5px; }
.TibiaCoinStorePage .tc-help { min-height: 19px; margin-top: 10px; color: #a8bbc5; font-size: 10px; line-height: 1.6; }
.TibiaCoinStorePage .tc-notice { padding: 16px 18px; color: #c8d5db; font-size: 12px; line-height: 1.75; }

/* Support roster readability and premium row styling */
.SupportPage .RoyalTableFrame {
    border-color: #b07a27;
    background: linear-gradient(145deg, #061725, #02080e);
    box-shadow: inset 0 0 0 2px #02070c, 0 8px 18px rgba(0,0,0,.58), 0 0 12px rgba(28,145,204,.1);
}
.SupportPage .RoyalTableHeading { min-height: 58px; padding: 0 20px; }
.SupportPage .RoyalTableHeading span { font-size: 21px; letter-spacing: .8px; }
.SupportPage .RoyalTableHeading small { color: #79ddff; font-size: 10px; letter-spacing: 1px; }
.SupportPage .SupportTable { font-size: 13px; line-height: 1.4; }
.SupportPage .SupportTable th {
    height: 43px;
    padding: 0 17px;
    color: #7ce1ff;
    font-size: 10px;
    letter-spacing: 1.25px;
}
.SupportPage .SupportTable td {
    height: 65px;
    padding: 10px 17px;
    background: linear-gradient(90deg, rgba(9,28,42,.98), rgba(12,31,43,.94));
}
.SupportPage .SupportTable tbody tr:hover td { background: linear-gradient(90deg, #0d3853, #0b293d); }
.SupportPage .RoyalRoleBadge {
    min-height: 31px;
    padding: 0 12px;
    border-color: #b67e27;
    color: #f7d78d;
    font-size: 10px;
    letter-spacing: .8px;
    box-shadow: inset 0 0 9px rgba(202,139,37,.08);
}
.SupportPage .RoyalPlayerCell a {
    color: #ffe09a;
    font: bold 17px/1.2 Georgia, "Times New Roman", serif;
    text-shadow: 0 2px 2px #000;
}
.SupportPage .RoyalStatusBadge {
    min-height: 31px;
    padding: 0 12px;
    gap: 8px;
    font-size: 10px;
    letter-spacing: .9px;
}
.SupportPage .RoyalStatusBadge i { width: 8px; height: 8px; }
/* Changelog readability pass: keep the ornate layout while making secondary copy legible. */
.ChangelogPage .ChangelogHero div > small {
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: 2.1px !important;
}
.ChangelogPage .ChangelogHero p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #c8dae5 !important;
}
.ChangelogPage .ChangelogCounter small {
    font-size: 10px !important;
    line-height: 1.25 !important;
    letter-spacing: 1.2px !important;
}
.ChangelogPage .ChangelogFilters a {
    min-height: 48px !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: .15px !important;
}
.ChangelogPage .ChangelogFilters a span { font-size: 16px !important; }

/* Premium player helpdesk */
.HelpdeskPage .RoyalDataPageShell::before { content: "SUPPORT"; }
.HelpdeskPage .HelpdeskDashboard { display: grid; gap: 17px; color: #c4d8e4; }
.HelpdeskPage .HelpdeskHero {
    min-height: 148px;
    padding: 23px 25px;
    grid-template-columns: 76px minmax(0,1fr) 104px;
    gap: 20px;
    border: 1px solid #a77220;
    background: radial-gradient(circle at 18% 50%, rgba(13,117,170,.28), transparent 34%), linear-gradient(118deg,#031522 0%,#061b2b 56%,#17120b 100%);
    box-shadow: inset 0 0 0 5px rgba(0,0,0,.26), 0 8px 20px rgba(0,0,0,.42);
}
.HelpdeskPage .RoyalDataHeroIcon.helpdesk {
    width: 68px;
    height: 68px;
    border: 2px solid #d39a30;
    background: radial-gradient(circle,#3fcfff 0 10%,#07517b 38%,#03111c 70%);
    color: #ffe3a0;
    font: bold 34px Georgia,serif;
    box-shadow: inset 0 0 15px #03101a,0 0 12px rgba(35,174,229,.35);
}
.HelpdeskPage .HelpdeskHero div > small,
.HelpdeskPage .HelpdeskCreatePanel > header small,
.HelpdeskPage .HelpdeskTicketsPanel > header small,
.HelpdeskPage .HelpdeskReplyForm > div small { color:#67d9fa; font:bold 10px Arial,sans-serif; letter-spacing:1.7px; }
.HelpdeskPage .HelpdeskHero h1 { margin:7px 0 6px; color:#ffe19a; font:bold 31px Georgia,serif; text-shadow:0 2px 2px #000; }
.HelpdeskPage .HelpdeskHero p { margin:0; color:#bed3df; font:14px/1.55 Arial,sans-serif; }
.HelpdeskPage .RoyalDataCount { display:grid; min-height:86px; place-content:center; border:1px solid #96691f; background:rgba(0,8,14,.74); color:#66dcff; font:bold 30px Georgia,serif; text-align:center; box-shadow:inset 0 0 14px #000; }
.HelpdeskPage .RoyalDataCount small { display:block; margin-top:5px; color:#e9c875; font:bold 9px Arial,sans-serif; letter-spacing:1.3px; }
.HelpdeskNotice { display:flex; min-height:64px; padding:12px 16px; align-items:center; gap:13px; border:1px solid #347b62; background:linear-gradient(90deg,rgba(6,73,54,.68),rgba(2,16,23,.96)); color:#bcefd9; }
.HelpdeskNotice > span { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border:1px solid #58d49c; border-radius:50%; color:#70ecb0; font:bold 18px Arial; }
.HelpdeskNotice strong { display:block; margin-bottom:4px; color:#e4fff3; font:bold 15px Georgia,serif; }
.HelpdeskNotice p,.HelpdeskNotice ul { margin:0; font:12px/1.5 Arial,sans-serif; }
.HelpdeskNotice.error { border-color:#a74a38; background:linear-gradient(90deg,rgba(100,28,22,.72),rgba(14,8,10,.96)); color:#ffc5b9; }
.HelpdeskNotice.error > span { border-color:#da604c; color:#ff8b73; }
.HelpdeskStats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.HelpdeskStats > div { display:grid; min-height:94px; padding:13px 15px; grid-template-columns:42px 1fr; grid-template-rows:1fr 1fr; align-items:center; border:1px solid #315b73; background:linear-gradient(135deg,#071d2c,#03101a); box-shadow:inset 0 0 14px rgba(0,0,0,.45); }
.HelpdeskStats span { display:grid; width:34px; height:34px; grid-row:1/3; place-items:center; border:1px solid #b37d25; border-radius:50%; color:#65dafe; font-size:16px; box-shadow:0 0 9px rgba(30,164,216,.18); }
.HelpdeskStats small { align-self:end; color:#72dafa; font:bold 9px Arial,sans-serif; letter-spacing:1px; }
.HelpdeskStats strong { align-self:start; color:#ffe09a; font:bold 23px Georgia,serif; }
.HelpdeskTicketsPanel,.HelpdeskCreatePanel,.HelpdeskConversation,.HelpdeskReplyForm { border:1px solid #9b6c22; background:#020d16; box-shadow:inset 0 0 0 4px rgba(0,0,0,.22),0 7px 16px rgba(0,0,0,.35); }
.HelpdeskTicketsPanel > header { display:flex; min-height:76px; padding:0 19px; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid #9c6c22; background:linear-gradient(90deg,#0a263a,#061827 58%,#17120b); }
.HelpdeskTicketsPanel h2,.HelpdeskCreatePanel h2,.HelpdeskReplyForm h2 { margin:5px 0 0; color:#ffe09a; font:bold 23px Georgia,serif; text-shadow:0 2px 2px #000; }
.HelpdeskTicketsPanel > header a,.HelpdeskBack,.HelpdeskClosedNote a { display:inline-flex; min-height:39px; padding:0 14px; align-items:center; justify-content:center; border:1px solid #b27a22; background:linear-gradient(#0e5279,#062842); color:#ffe3a0; font:bold 10px Arial,sans-serif; letter-spacing:.7px; text-decoration:none; box-shadow:inset 0 0 0 2px #04101a; }
.HelpdeskTicketList { display:grid; }
.HelpdeskTicketRow { display:grid; min-height:78px; padding:10px 16px; grid-template-columns:43px minmax(0,1fr) 120px 20px; align-items:center; gap:13px; border-bottom:1px solid #1f4155; background:linear-gradient(90deg,#081d2b,#061520); color:inherit; text-decoration:none; transition:.18s ease; }
.HelpdeskTicketRow:last-child { border-bottom:0; }
.HelpdeskTicketRow:hover { padding-left:20px; background:linear-gradient(90deg,#0c3450,#092134); box-shadow:inset 3px 0 #d2952e; }
.HelpdeskTicketIcon { display:grid; width:36px; height:36px; place-items:center; border:1px solid #a87324; border-radius:50%; color:#68ddff; font-size:16px; background:#04131f; }
.HelpdeskTicketSubject { display:grid; gap:4px; min-width:0; }
.HelpdeskTicketSubject small { color:#57cef2; font:bold 9px Arial,sans-serif; letter-spacing:1px; }
.HelpdeskTicketSubject strong { overflow:hidden; color:#f0d48e; font:bold 16px Georgia,serif; text-overflow:ellipsis; white-space:nowrap; }
.HelpdeskTicketSubject time { color:#91a9b7; font:11px Arial,sans-serif; }
.HelpdeskStatus { display:inline-flex; min-height:29px; padding:0 10px; align-items:center; justify-content:center; gap:7px; border:1px solid #3282a5; border-radius:15px; background:#07263a; color:#7edfff; font:bold 9px Arial,sans-serif; letter-spacing:.6px; white-space:nowrap; }
.HelpdeskStatus i { width:7px; height:7px; border-radius:50%; background:#57d8ff; box-shadow:0 0 7px currentColor; }
.HelpdeskStatus.answered { border-color:#b17a25; background:#2c2109; color:#f5ca68; }
.HelpdeskStatus.answered i { background:#f2b930; }
.HelpdeskStatus.closed { border-color:#46606d; background:#14222a; color:#9db0ba; }
.HelpdeskStatus.closed i { background:#8398a3; }
.HelpdeskTicketArrow { color:#5bd7ff; font:normal 28px Arial; }
.HelpdeskCreatePanel { scroll-margin-top:18px; }
.HelpdeskCreatePanel > header { display:flex; min-height:94px; padding:15px 20px; align-items:center; gap:16px; border-bottom:1px solid #9b6c22; background:radial-gradient(circle at 12% 50%,rgba(25,151,205,.2),transparent 24%),linear-gradient(90deg,#071d2c,#061522); }
.HelpdeskCreatePanel > header > span { display:grid; width:49px; height:49px; flex:0 0 auto; place-items:center; border:1px solid #c28a2c; border-radius:50%; color:#62dbff; font:normal 29px Arial; background:#061725; box-shadow:inset 0 0 12px #000; }
.HelpdeskCreatePanel > header p,.HelpdeskReplyForm > div p { margin:5px 0 0; color:#9eb5c3; font:12px/1.5 Arial,sans-serif; }
.HelpdeskCreatePanel form { display:grid; padding:20px; gap:15px; }
.HelpdeskIdentity { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.HelpdeskIdentity > div { display:grid; min-height:61px; padding:10px 13px; align-content:center; gap:5px; border:1px solid #2d566e; background:#061725; }
.HelpdeskIdentity small { color:#61d6f9; font:bold 9px Arial,sans-serif; letter-spacing:1px; }
.HelpdeskIdentity strong { color:#e4d099; font:bold 14px Georgia,serif; overflow-wrap:anywhere; }
.HelpdeskCreatePanel label,.HelpdeskReplyForm label { display:grid; gap:8px; color:#6ddafd; font:bold 10px Arial,sans-serif; letter-spacing:1px; }
.HelpdeskCreatePanel input[type="text"],.HelpdeskCreatePanel textarea,.HelpdeskReplyForm textarea { width:100%; box-sizing:border-box; border:1px solid #397494; background:#03131f; color:#e8f4fa; font:13px/1.6 Arial,sans-serif; outline:0; box-shadow:inset 0 0 12px #000; }
.HelpdeskCreatePanel input[type="text"] { height:48px; padding:0 14px; }
.HelpdeskCreatePanel textarea,.HelpdeskReplyForm textarea { min-height:150px; padding:13px 14px; resize:vertical; }
.HelpdeskCreatePanel input:focus,.HelpdeskCreatePanel textarea:focus,.HelpdeskReplyForm textarea:focus { border-color:#d19835; box-shadow:0 0 0 2px rgba(209,152,53,.13),inset 0 0 10px #000; }
.HelpdeskCreatePanel label > small { justify-self:end; color:#8399a6; font:10px Arial,sans-serif; letter-spacing:0; }
.HelpdeskCreatePanel button,.HelpdeskReplyForm button { min-height:49px; border:1px solid #d29731; background:linear-gradient(#bd7c1d,#714209); color:#fff0bd; font:bold 12px Georgia,serif; letter-spacing:.7px; text-shadow:0 2px 2px #000; cursor:pointer; box-shadow:inset 0 0 0 3px #422604,0 4px 10px rgba(0,0,0,.4); }
.HelpdeskCreatePanel button:hover,.HelpdeskReplyForm button:hover { filter:brightness(1.15); }
.HelpdeskCreatePanel button b,.HelpdeskReplyForm button b { margin-left:7px; color:#63dcff; font-size:20px; }
.HelpdeskCaptcha { display:flex; justify-content:center; padding:8px; }
.HelpdeskTicketToolbar { display:grid; min-height:64px; padding:9px 14px; grid-template-columns:1fr auto 1fr; align-items:center; gap:13px; border:1px solid #91641e; background:linear-gradient(90deg,#061a29,#020c14,#061a29); }
.HelpdeskTicketToolbar > div { text-align:center; }
.HelpdeskTicketToolbar > div small { display:block; color:#62d5f7; font:bold 8px Arial,sans-serif; letter-spacing:1.2px; }
.HelpdeskTicketToolbar > div strong { color:#ffe09b; font:bold 19px Georgia,serif; }
.HelpdeskTicketToolbar > .HelpdeskStatus { justify-self:end; }
.HelpdeskConversation > header { padding:18px 20px; border-bottom:1px solid #2e566d; background:linear-gradient(90deg,#0b2d43,#061621); }
.HelpdeskConversation > header small { color:#62d7fa; font:bold 9px Arial,sans-serif; letter-spacing:1.3px; }
.HelpdeskConversation > header h2 { margin:7px 0 5px; color:#ffe09a; font:bold 24px Georgia,serif; }
.HelpdeskConversation > header p { margin:0; color:#8fa6b3; font:11px Arial,sans-serif; }
.HelpdeskMessage { display:grid; padding:18px 20px; grid-template-columns:43px minmax(0,1fr); gap:13px; border-bottom:1px solid #1e3e50; background:#061520; }
.HelpdeskMessage.staff { background:linear-gradient(90deg,rgba(72,49,10,.33),#071723 38%); }
.HelpdeskAvatar { display:grid; width:40px; height:40px; place-items:center; border:1px solid #3e89ab; border-radius:50%; background:#062438; color:#62dafd; font:bold 16px Georgia,serif; }
.HelpdeskMessage.staff .HelpdeskAvatar { border-color:#c18a2e; background:#2b1d08; color:#ffdc83; }
.HelpdeskMessageBody > header { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.HelpdeskMessageBody > header strong { color:#e7d395; font:bold 15px Georgia,serif; }
.HelpdeskMessageBody > header span { padding:4px 6px; border:1px solid #367490; color:#67d9fb; font:bold 8px Arial,sans-serif; letter-spacing:.7px; }
.HelpdeskMessageBody > header time { margin-left:auto; color:#8299a6; font:10px Arial,sans-serif; }
.HelpdeskMessageBody > p { margin:10px 0 0; color:#c7d7df; font:13px/1.7 Arial,sans-serif; overflow-wrap:anywhere; }
.HelpdeskReplyForm { display:grid; padding:19px; gap:15px; }
.HelpdeskReplyForm#helpdesk-conversation-end { scroll-margin-top: 18px; }
.HelpdeskReplyAllowance {
    display: flex;
    min-height: 58px;
    padding: 10px 13px;
    align-items: center;
    gap: 11px;
    border: 1px solid #2c7594;
    background: linear-gradient(90deg, rgba(7, 52, 74, .78), rgba(4, 21, 32, .95));
}
.HelpdeskReplyAllowance > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #45bce7;
    border-radius: 50%;
    color: #70e4ff;
    font-size: 15px;
}
.HelpdeskReplyAllowance div { display: grid; gap: 5px; }
.HelpdeskReplyAllowance small { color: #68d9fa; font: bold 8px Arial, sans-serif; letter-spacing: 1.25px; }
.HelpdeskReplyAllowance strong { color: #e7d397; font: bold 12px Georgia, serif; }
.HelpdeskReplyAllowance strong b { color: #70e4ff; font-size: 17px; }
.HelpdeskReplyAllowance.locked { border-color: #8b5525; background: linear-gradient(90deg, rgba(75, 34, 15, .72), rgba(20, 14, 12, .96)); }
.HelpdeskReplyAllowance.locked > span { border-color: #b17231; color: #ffd17c; }
.HelpdeskReplyAllowance.locked strong b { color: #ffbd60; }
.HelpdeskReplyForm textarea:disabled { cursor: not-allowed; opacity: .58; }
.HelpdeskReplyForm button:disabled { cursor: not-allowed; filter: grayscale(.75); opacity: .58; }
.HelpdeskClosedNote { display:flex; min-height:69px; padding:12px 16px; align-items:center; gap:12px; border:1px solid #496471; background:#0b1b24; }
.HelpdeskClosedNote > span { display:grid; width:35px; height:35px; place-items:center; border:1px solid #4c9b78; border-radius:50%; color:#70dcaa; }
.HelpdeskClosedNote div { flex:1; }
.HelpdeskClosedNote strong { color:#d6e4ea; font:bold 14px Georgia,serif; }
.HelpdeskClosedNote p { margin:4px 0 0; color:#899fab; font:11px Arial,sans-serif; }
.HelpdeskEmpty { padding:55px 20px; border:1px solid #8c621e; background:#030e17; text-align:center; }
.HelpdeskEmpty.compact { border:0; padding:38px 15px; }
.HelpdeskEmpty > span { display:grid; width:45px; height:45px; margin:0 auto; place-items:center; border:1px solid #b47d27; border-radius:50%; color:#62dcff; font-size:20px; }
.HelpdeskEmpty h2 { margin:12px 0 6px; color:#ffe09a; font:bold 20px Georgia,serif; }
.HelpdeskEmpty p { margin:0 0 15px; color:#91a8b4; font:12px Arial,sans-serif; }
.HelpdeskEmpty a { display:inline-flex; min-height:39px; padding:0 14px; align-items:center; border:1px solid #a87324; color:#ffe09a; font:bold 9px Arial,sans-serif; text-decoration:none; }
@media(max-width:760px) {
    .HelpdeskPage .HelpdeskHero { grid-template-columns:55px minmax(0,1fr); padding:17px; }
    .HelpdeskPage .RoyalDataHeroIcon.helpdesk { width:50px; height:50px; font-size:25px; }
    .HelpdeskPage .HelpdeskHero h1 { font-size:25px; }
    .HelpdeskPage .RoyalDataCount { grid-column:1/-1; min-height:62px; }
    .HelpdeskStats { grid-template-columns:1fr 1fr; }
    .HelpdeskTicketRow { grid-template-columns:39px minmax(0,1fr) 18px; }
    .HelpdeskTicketRow > .HelpdeskStatus { grid-column:2; justify-self:start; }
    .HelpdeskTicketArrow { grid-column:3; grid-row:1/3; }
    .HelpdeskIdentity { grid-template-columns:1fr; }
    .HelpdeskTicketToolbar { grid-template-columns:1fr 1fr; }
    .HelpdeskTicketToolbar > div { text-align:right; }
    .HelpdeskTicketToolbar > .HelpdeskStatus { grid-column:1/-1; justify-self:stretch; }
    .HelpdeskMessage { padding:14px 12px; grid-template-columns:36px minmax(0,1fr); }
    .HelpdeskAvatar { width:33px; height:33px; }
    .HelpdeskMessageBody > header time { width:100%; margin-left:0; }
}

/* Keep the final helpdesk system isolated from older draft selectors. */
.HelpdeskDashboard .HelpdeskTicketList {
    border: 0;
    background: transparent;
    box-shadow: none;
}
.HelpdeskDashboard .HelpdeskConversation {
    display: block;
    padding: 0;
}
.HelpdeskDashboard .HelpdeskMessage {
    width: auto;
    border-right: 0;
    border-left: 0;
    border-top: 0;
    box-shadow: none;
}
.HelpdeskDashboard .HelpdeskMessage.player,
.HelpdeskDashboard .HelpdeskMessage.staff { justify-self: auto; }
.HelpdeskDashboard .HelpdeskEmpty { min-height: 0; }
.HelpdeskLiveReplies { display: block; }
.HelpdeskMessageNew { animation: helpdeskReplyArrive .38s ease-out both; }
@keyframes helpdeskReplyArrive {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.HelpdeskAdminAction {
    display: flex;
    min-height: 72px;
    padding: 13px 17px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #9c6c20;
    background: linear-gradient(105deg, #071d2b 0%, #06131d 58%, #211509 100%);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
}
.HelpdeskAdminAction div { display: grid; gap: 6px; }
.HelpdeskAdminAction small {
    color: #64d9fa;
    font: bold 9px/1 Arial, sans-serif;
    letter-spacing: 1.4px;
}
.HelpdeskAdminAction strong {
    color: #f7dfa1;
    font: bold 15px/1.35 Georgia, serif;
}
.HelpdeskAdminAction button {
    min-width: 158px;
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid #c58b29;
    color: #fff1c7;
    font: bold 10px Arial, sans-serif;
    letter-spacing: .6px;
    cursor: pointer;
    box-shadow: inset 0 0 12px rgba(255, 197, 75, .1), 0 3px 9px rgba(0, 0, 0, .45);
}
.HelpdeskAdminAction button.close { background: linear-gradient(#852f24, #42120f); }
.HelpdeskAdminAction button.reopen { background: linear-gradient(#14734d, #073b29); }
.HelpdeskAdminAction button:hover { filter: brightness(1.16); }

@media (max-width: 620px) {
    .HelpdeskAdminAction { align-items: stretch; flex-direction: column; }
    .HelpdeskAdminAction button { width: 100%; }
}

/* Changelog final readability: larger copy and roomier category controls. */
.ChangelogPage .ChangelogHero div > small {
    color: #70ddff !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: 2.2px !important;
}
.ChangelogPage .ChangelogHero p {
    max-width: 560px;
    color: #d2e2ea !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
}
.ChangelogPage .ChangelogCounter strong { font-size: 32px !important; }
.ChangelogPage .ChangelogCounter small {
    color: #f0d087 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    letter-spacing: 1.3px !important;
}
.ChangelogPage .ChangelogFilters {
    padding: 9px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
.ChangelogPage .ChangelogFilters a {
    min-height: 52px !important;
    padding: 9px 12px !important;
    gap: 9px !important;
    color: #c2d4de !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    letter-spacing: .2px !important;
}
.ChangelogPage .ChangelogFilters a span { font-size: 18px !important; }
.ChangelogPage .ChangelogFilters a:hover,
.ChangelogPage .ChangelogFilters a.active { color: #ffe6a7 !important; }

@media (max-width: 620px) {
    .ChangelogPage .ChangelogFilters { grid-template-columns: 1fr 1fr !important; }
    .ChangelogPage .ChangelogHero p { font-size: 14px !important; }
}

/* News portal readability pass: keep the cinematic layout, remove tiny copy. */
.NewsPortalPage .NewsPortalStats small { font-size: 9px; line-height: 1.2; }
.NewsPortalPage .NewsPortalStats time { font-size: 10px; line-height: 1.2; }
.NewsPortalPage .NewsPatchRibbon > header { min-height: 58px; padding: 0 15px; }
.NewsPortalPage .NewsPatchRibbon header small { font-size: 10px; line-height: 1.2; letter-spacing: 1.35px; }
.NewsPortalPage .NewsPatchRibbon header strong { margin-top: 6px; font-size: 17px; line-height: 1.15; }
.NewsPortalPage .NewsPatchRibbon header a { padding: 10px 13px; font-size: 9px; line-height: 1.2; }
.NewsPortalPage .NewsPatchRibbon article { min-height: 61px; padding: 11px 13px; grid-template-columns: 55px minmax(0, 1fr); gap: 10px; }
.NewsPortalPage .NewsPatchRibbon article time { font-size: 10px; line-height: 1.25; }
.NewsPortalPage .NewsPatchRibbon article p { color: #bed0da; font-size: 12px; line-height: 1.5; }
.NewsPortalPage .NewsArticleHeader { min-height: 105px; padding: 0 18px; grid-template-columns: 59px minmax(0, 1fr) 29px; gap: 14px; }
.NewsPortalPage .NewsArticleCrest > span { width: 50px; height: 50px; font-size: 23px; }
.NewsPortalPage .NewsArticleBadges span,
.NewsPortalPage .NewsArticleBadges b { padding: 6px 8px; font-size: 9px; line-height: 1.15; letter-spacing: 1px; }
.NewsPortalPage .NewsArticleHeading h2 { margin: 9px 0 7px; font-size: 25px; line-height: 1.15; }
.NewsPortalPage .NewsArticleHeading > p { gap: 8px; color: #a8bdc9; font-size: 11px; line-height: 1.4; }
.NewsPortalPage .NewsArticleBody,
.NewsPortalPage .NewsPortalArticle.featured .NewsArticleBody { padding: 22px; color: #cbd9e1; font-size: 14px; line-height: 1.75; }
.NewsPortalPage .NewsArticleFooter { min-height: 50px; padding: 0 17px; }
.NewsPortalPage .NewsArticleFooter span,
.NewsPortalPage .NewsArticleFooter a { font-size: 9px; line-height: 1.25; }

@media (max-width: 540px) {
    .NewsPortalPage .NewsArticleHeader { min-height: 94px; padding: 11px; grid-template-columns: 43px minmax(0, 1fr); gap: 10px; }
    .NewsPortalPage .NewsArticleCrest > span { width: 38px; height: 38px; font-size: 17px; }
    .NewsPortalPage .NewsArticleBadges span,
    .NewsPortalPage .NewsArticleBadges b { font-size: 8px; }
    .NewsPortalPage .NewsArticleHeading h2 { font-size: 21px; }
    .NewsPortalPage .NewsArticleHeading > p { font-size: 10px; flex-wrap: wrap; }
    .NewsPortalPage .NewsArticleBody,
    .NewsPortalPage .NewsPortalArticle.featured .NewsArticleBody { padding: 15px; font-size: 13px; }
}

/* Vodafone Cash receipt guide in the final wallet confirmation step. */
.OrdersPage .OrderWizardPanel > small { font-size: 10px; line-height: 1.3; }
.OrdersPage .OrderWizardPanel > p { color: #c3d4dd; font-size: 14px; line-height: 1.7; }
.OrdersPage .OrderTransactionForm label { color: #70ddff; font-size: 11px; line-height: 1.35; letter-spacing: 1.15px; }
.OrdersPage .OrderTransactionForm input { min-height: 48px; padding: 14px; font-size: 15px; }
.OrdersPage .OrderTransactionForm input::placeholder { color: #8298a5; font-size: 13px; opacity: 1; }

.OrdersPage .OrderWalletProofGuide {
    display: grid;
    box-sizing: border-box;
    width: min(100%, 560px);
    margin: 22px auto 6px;
    padding: 12px;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 12px;
    border: 1px solid #a87422;
    background: linear-gradient(135deg, #061b29, #020a11 66%, #1a1005);
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35), 0 8px 18px rgba(0, 0, 0, .45);
    direction: ltr;
}
.OrdersPage .OrderWalletProofGuide > div {
    overflow: hidden;
    border: 1px solid #c48a2b;
    border-radius: 6px;
    background: #100d0b;
    box-shadow: 0 6px 15px rgba(0, 0, 0, .48), 0 0 0 3px #020b12;
}
.OrdersPage .OrderWalletProofGuide img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}
.OrdersPage .OrderWalletProofGuide figcaption {
    display: grid;
    order: -1;
    padding: 5px 8px 2px;
    justify-items: center;
    gap: 7px;
    direction: rtl;
    text-align: center;
}
.OrdersPage .OrderWalletProofGuide figcaption > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #49c9f5;
    border-radius: 50%;
    background: radial-gradient(circle, #147aa6, #03131e 72%);
    color: #fff0a9;
    font-size: 24px;
    transform: rotate(90deg);
    box-shadow: 0 0 12px rgba(65, 202, 246, .28);
}
.OrdersPage .OrderWalletProofGuide figcaption strong { color: #ffe09a; font:bold 18px/1.3 Georgia, serif; }
.OrdersPage .OrderWalletProofGuide figcaption small { color: #bed0da; font: 12px/1.65 Arial, sans-serif; }

@media (max-width: 620px) {
    .OrdersPage .OrderWalletProofGuide { width: 100%; padding: 8px; }
}
/* =========================================================
   ACCOUNT LOGIN — cinematic gateway
   ========================================================= */
.LoginPage .RoyalFormPageShell .BoxContent {
    padding: 18px;
    background-image:
        radial-gradient(circle at 50% -10%, rgba(29, 149, 218, .2), transparent 38%),
        linear-gradient(180deg, #071522, #020811) !important;
}

.LoginPage .LoginGateway {
    color: #c8dce9;
    font-family: Arial, sans-serif;
}

.LoginPage .LoginHero {
    position: relative;
    display: grid;
    min-height: 132px;
    padding: 22px 24px;
    border: 1px solid #98661e;
    border-radius: 4px;
    grid-template-columns: 82px minmax(0, 1fr) 104px;
    align-items: center;
    gap: 18px;
    overflow: hidden;
    background:
        linear-gradient(105deg, rgba(4, 28, 47, .96), rgba(2, 13, 24, .98) 61%, rgba(25, 15, 4, .96)),
        radial-gradient(circle at 20% 50%, rgba(33, 164, 229, .28), transparent 34%);
    box-shadow: inset 0 0 0 2px #02070c, inset 0 0 30px rgba(20, 135, 205, .13), 0 8px 18px rgba(0, 0, 0, .55);
}

.LoginPage .LoginHero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(125deg, transparent 58%, rgba(195, 133, 34, .09) 58.2%, transparent 76%);
}

.LoginPage .LoginHeroSeal,
.LoginPage .LoginWelcomeMark {
    position: relative;
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    border: 2px solid #c78d2a;
    border-radius: 50%;
    background: radial-gradient(circle, #1ea9e9 0, #09517e 37%, #02101d 70%);
    color: #fff0b0;
    font: bold 27px/1 Georgia, serif;
    text-shadow: 0 0 9px #4edaff, 0 2px 2px #000;
    box-shadow: inset 0 0 0 5px #06111b, inset 0 0 18px #23baf5, 0 0 18px rgba(28, 179, 242, .3);
}

.LoginPage .LoginHeroSeal::after,
.LoginPage .LoginWelcomeMark::after {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(202, 144, 42, .32);
    border-radius: 50%;
}

.LoginPage .LoginHeroCopy,
.LoginPage .LoginServerBadge { position: relative; z-index: 1; }
.LoginPage .LoginHeroCopy small,
.LoginPage .LoginPanelHeading small,
.LoginPage .LoginWelcomePanel > small {
    color: #65d9ff;
    font: bold 9px/1 Arial, sans-serif;
    letter-spacing: 1.8px;
}
.LoginPage .LoginHeroCopy h1 {
    margin: 7px 0 5px;
    color: #ffe09a;
    font: bold 28px/1.08 Georgia, "Times New Roman", serif;
    text-shadow: 0 2px 2px #000, 0 0 10px rgba(28, 165, 231, .34);
}
.LoginPage .LoginHeroCopy p {
    max-width: 470px;
    margin: 0;
    color: #b7ccd9;
    font: 13px/1.55 Arial, sans-serif;
}

.LoginPage .LoginServerBadge {
    display: grid;
    box-sizing: border-box;
    min-height: 82px;
    padding: 13px 7px;
    place-items: center;
    border: 1px solid #8f621e;
    background: rgba(0, 8, 14, .72);
    box-shadow: inset 0 0 14px #000;
    text-align: center;
}
.LoginPage .LoginServerBadge i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #45f19c;
    box-shadow: 0 0 9px #33ed8c;
}
.LoginPage .LoginServerBadge strong { color: #ffe09a; font: bold 11px/1 Arial, sans-serif; letter-spacing: 1px; }
.LoginPage .LoginServerBadge span { color: #7194a8; font: bold 7px/1 Arial, sans-serif; letter-spacing: 1px; }

.LoginPage .LoginGatewayGrid {
    display: grid;
    margin-top: 14px;
    grid-template-columns: minmax(0, 1.18fr) minmax(245px, .82fr);
    gap: 14px;
}

.LoginPage .LoginFormPanel,
.LoginPage .LoginWelcomePanel {
    box-sizing: border-box;
    padding: 22px;
    border: 1px solid #80571f;
    border-radius: 4px;
    background: linear-gradient(155deg, #071827, #020912 72%);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, .7), 0 7px 16px rgba(0, 0, 0, .44);
}

.LoginPage .LoginPanelHeading {
    display: grid;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid #80571f;
    grid-template-columns: 45px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}
.LoginPage .LoginPanelHeading > span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #c18a2d;
    border-radius: 50%;
    background: #061b2c;
    color: #6edcff;
    font-size: 17px;
    box-shadow: inset 0 0 12px rgba(44, 181, 237, .22);
}
.LoginPage .LoginPanelHeading h2 {
    margin: 5px 0 0;
    color: #ffe0a0;
    font: bold 20px/1.15 Georgia, serif;
    text-shadow: 0 2px 2px #000;
}

.LoginPage .LoginAlert {
    display: grid;
    margin: 0 0 16px;
    padding: 13px;
    border: 1px solid #a64238;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    background: rgba(67, 10, 13, .56);
    color: #ffc3bc;
}
.LoginPage .LoginAlert > span {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border: 1px solid #e2695c;
    border-radius: 50%;
    color: #ff8d82;
    font-weight: bold;
}
.LoginPage .LoginAlert strong { color: #ff8d82; font-size: 11px; letter-spacing: 1px; }
.LoginPage .LoginAlert ul { margin: 6px 0 0; padding-left: 17px; font-size: 12px; line-height: 1.5; }

.LoginPage .LoginAccountForm { display: grid; gap: 14px; }
.LoginPage .LoginAccountForm > label { display: grid; gap: 7px; }
.LoginPage .LoginAccountForm > label > span {
    color: #63d6fb;
    font: bold 10px/1 Arial, sans-serif;
    letter-spacing: 1.1px;
}
.LoginPage .LoginAccountForm label em { color: #6f8795; font-size: 8px; font-style: normal; }
.LoginPage .LoginInput {
    display: grid;
    border: 1px solid #315f7d;
    border-radius: 3px;
    grid-template-columns: 43px minmax(0, 1fr) auto;
    overflow: hidden;
    background: #020d17;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, .72);
    transition: border-color .18s, box-shadow .18s;
}
.LoginPage .LoginInput:focus-within {
    border-color: #d5a03e;
    box-shadow: inset 0 0 12px #000, 0 0 0 2px rgba(213, 160, 62, .12), 0 0 10px rgba(32, 166, 229, .18);
}
.LoginPage .LoginInput > i {
    display: grid;
    min-height: 46px;
    place-items: center;
    border-right: 1px solid #274a61;
    background: rgba(7, 35, 55, .66);
    color: #62d7fc;
    font: bold 11px Arial, sans-serif;
    font-style: normal;
}
.LoginPage .LoginInput input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 13px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #e0edf5;
    font: 13px Arial, sans-serif;
}
.LoginPage .LoginInput input::placeholder { color: #668091; opacity: 1; }
.LoginPage .LoginPasswordToggle {
    min-width: 55px;
    padding: 0 10px;
    border: 0;
    border-left: 1px solid #274a61;
    background: #071b2a;
    color: #e5bf6c;
    font: bold 9px Arial, sans-serif;
    cursor: pointer;
}
.LoginPage .LoginPasswordToggle:hover { background: #0b2940; color: #fff0ad; }
.LoginPage .LoginFormLinks { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; }
.LoginPage .LoginFormLinks a { color: #66d7fb; font-weight: bold; text-decoration: none; }
.LoginPage .LoginFormLinks a:hover { color: #ffe09a; }
.LoginPage .LoginFormLinks span { color: #708896; }

.LoginPage .LoginSubmitButton {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    min-height: 49px;
    padding: 0 14px;
    border: 1px solid #dda43a;
    border-radius: 3px;
    grid-template-columns: 28px 1fr 18px;
    align-items: center;
    background: linear-gradient(180deg, #147eb8, #064876 53%, #03294b);
    color: #fff0b5;
    box-shadow: inset 0 0 0 2px #031321, inset 0 12px 15px rgba(64, 201, 255, .14), 0 6px 12px rgba(0, 0, 0, .56);
    text-shadow: 0 1px 2px #000;
    cursor: pointer;
    transition: transform .18s, filter .18s, box-shadow .18s;
}
.LoginPage .LoginSubmitButton strong { font: bold 12px Arial, sans-serif; letter-spacing: 1px; }
.LoginPage .LoginSubmitButton > span { color: #69ddff; text-shadow: 0 0 8px #39cbff; }
.LoginPage .LoginSubmitButton > b { color: #77dfff; font-size: 21px; }
.LoginPage .LoginSubmitButton:hover { transform: translateY(-2px); filter: brightness(1.17); box-shadow: inset 0 0 0 2px #031321, 0 8px 15px #000, 0 0 12px rgba(48, 190, 247, .32); }

.LoginPage .LoginWelcomePanel {
    text-align: center;
    background: radial-gradient(circle at 50% 12%, rgba(16, 121, 182, .2), transparent 32%), linear-gradient(165deg, #061522, #02070d 70%);
}
.LoginPage .LoginWelcomeMark { width: 62px; height: 62px; margin: 2px auto 16px; font-size: 23px; }
.LoginPage .LoginWelcomePanel h2 { margin: 8px 0 7px; color: #ffe0a0; font: bold 23px/1.1 Georgia, serif; text-shadow: 0 2px 2px #000; }
.LoginPage .LoginWelcomePanel > p { margin: 0 auto 18px; color: #aabfcd; font: 12px/1.55 Arial, sans-serif; }
.LoginPage .LoginWelcomePanel ul { display: grid; margin: 0; padding: 0; gap: 10px; list-style: none; text-align: left; }
.LoginPage .LoginWelcomePanel li { display: grid; min-height: 62px; padding: 12px; border: 1px solid #356b8c; grid-template-columns: 34px 1fr; align-items: center; gap: 11px; background: rgba(3, 17, 29, .88); box-shadow: inset 0 0 12px rgba(13, 89, 133, .1); }
.LoginPage .LoginWelcomePanel li > span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #2cc589; border-radius: 50%; background: rgba(7, 70, 53, .2); color: #62f0ae; font-size: 14px; box-shadow: 0 0 8px rgba(39, 210, 142, .12); }
.LoginPage .LoginWelcomePanel li strong { display: block; color: #f2d489; font: bold 13px/1.25 Arial, sans-serif; text-shadow: 0 1px 2px #000; }
.LoginPage .LoginWelcomePanel li small { display: block; margin-top: 5px; color: #b0c6d3; font: 11px/1.45 Arial, sans-serif; }
.LoginPage .LoginCreateAccount { margin-top: 15px; padding-top: 14px; border-top: 1px solid #76511e; }
.LoginPage .LoginCreateAccount > span { display: block; margin-bottom: 9px; color: #8da4b2; font-size: 10px; }
.LoginPage .LoginCreateAccount a { display: flex; min-height: 38px; padding: 0 12px; align-items: center; justify-content: center; border: 1px solid #a87627; background: #090f15; color: #f6d88f; font: bold 10px Arial, sans-serif; letter-spacing: .6px; text-decoration: none; }
.LoginPage .LoginCreateAccount a b { margin-left: 7px; color: #55d5ff; font-size: 18px; }
.LoginPage .LoginCreateAccount a:hover { border-color: #61d5fa; background: #071b29; color: #fff0b2; }

.LoginPage .LoginTrustBar {
    display: grid;
    margin-top: 14px;
    border: 1px solid #75501f;
    grid-template-columns: repeat(3, 1fr);
    background: #030b13;
}
.LoginPage .LoginTrustBar > div { display: grid; min-height: 62px; padding: 11px 14px; grid-template-columns: 31px 1fr; align-items: center; gap: 9px; border-right: 1px solid #27485b; }
.LoginPage .LoginTrustBar > div:last-child { border-right: 0; }
.LoginPage .LoginTrustBar > div > span { color: #5bd8ff; font-size: 17px; text-align: center; }
.LoginPage .LoginTrustBar p { margin: 0; }
.LoginPage .LoginTrustBar strong { display: block; color: #e7c77c; font: bold 9px/1.2 Arial, sans-serif; letter-spacing: .7px; }
.LoginPage .LoginTrustBar small { display: block; margin-top: 4px; color: #708896; font: 8px/1.3 Arial, sans-serif; }

@media (max-width: 820px) {
    .LoginPage .LoginGatewayGrid { grid-template-columns: 1fr; }
    .LoginPage .LoginWelcomePanel { order: 2; }
}

@media (max-width: 610px) {
    .LoginPage .RoyalFormPageShell .BoxContent { padding: 10px; }
    .LoginPage .LoginHero { padding: 18px 14px; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
    .LoginPage .LoginHeroSeal { width: 52px; height: 52px; font-size: 20px; }
    .LoginPage .LoginHeroCopy h1 { font-size: 22px; }
    .LoginPage .LoginServerBadge { display: none; }
    .LoginPage .LoginFormPanel, .LoginPage .LoginWelcomePanel { padding: 17px 13px; }
    .LoginPage .LoginFormLinks { align-items: flex-start; flex-direction: column; }
    .LoginPage .LoginTrustBar { grid-template-columns: 1fr; }
    .LoginPage .LoginTrustBar > div { border-right: 0; border-bottom: 1px solid #27485b; }
    .LoginPage .LoginTrustBar > div:last-child { border-bottom: 0; }
}
/* =========================================================
   LEGAL PAGES — terms, privacy and refunds
   ========================================================= */
.LegalPage .LegalPageShell::before { content: "LEGAL CENTER"; }
.TermsPage .LegalPageShell::before { content: "TERMS OF SERVICE"; }
.PrivacyPage .LegalPageShell::before { content: "PRIVACY POLICY"; }
.RefundPolicyPage .LegalPageShell::before { content: "REFUND POLICY"; }

.LegalPage .LegalDocument {
	display: grid;
	gap: 16px;
	color: #bcd0db;
	font-family: Arial, sans-serif;
}
.LegalPage .LegalHero {
	display: grid;
	min-height: 145px;
	padding: 22px 24px;
	grid-template-columns: 72px minmax(0, 1fr) 128px;
	align-items: center;
	gap: 18px;
	border: 1px solid #8b6729;
	background:
		radial-gradient(circle at 12% 50%, rgba(29, 160, 214, .25), transparent 25%),
		radial-gradient(circle at 91% 50%, rgba(211, 155, 44, .15), transparent 24%),
		linear-gradient(110deg, #08233a, #020a12 65%, #191105);
	box-shadow: inset 0 0 25px rgba(0, 0, 0, .5), 0 7px 15px rgba(0, 0, 0, .45);
}
.LegalPage .LegalHeroIcon {
	display: grid;
	width: 62px;
	height: 62px;
	place-items: center;
	border: 1px solid #d09a38;
	border-radius: 50%;
	background: radial-gradient(circle, #147ca8, #05263d 68%);
	color: #ffe4a0;
	font: 28px/1 Georgia, serif;
	box-shadow: inset 0 0 12px rgba(65, 205, 255, .24), 0 0 12px rgba(211, 154, 51, .23);
	text-shadow: 0 2px 2px #000, 0 0 9px #1b9ed2;
}
.LegalPage .LegalHeroIcon.privacy { color: #bff5ff; }
.LegalPage .LegalHeroIcon.refund { color: #ffe2a0; font-size: 33px; }
.LegalPage .LegalHero small { color: #61d6fa; font: bold 9px/1 Arial, sans-serif; letter-spacing: 1.6px; }
.LegalPage .LegalHero h1 { margin: 8px 0; color: #ffe09a; font: bold 30px/1.05 Georgia, serif; text-shadow: 0 2px 2px #000; }
.LegalPage .LegalHero p { margin: 0; color: #b6cad5; font: 13px/1.6 Arial, sans-serif; }
.LegalPage .LegalHero time {
	display: flex;
	min-height: 78px;
	padding: 10px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid #765a27;
	background: rgba(2, 13, 22, .88);
	color: #e8cc87;
	font: bold 12px/1.4 Arial, sans-serif;
	text-align: center;
}
.LegalPage .LegalHero time small { display: block; margin-bottom: 7px; font-size: 8px; letter-spacing: 1px; }

.LegalPage .LegalPolicyNav {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid #31576e;
	background: #020b12;
}
.LegalPage .LegalPolicyNav a {
	padding: 14px 10px;
	border-right: 1px solid #31576e;
	color: #8fa9b7;
	font: bold 10px/1 Arial, sans-serif;
	letter-spacing: .7px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}
.LegalPage .LegalPolicyNav a:last-child { border-right: 0; }
.LegalPage .LegalPolicyNav a:hover { color: #69dafb; background: #08243a; }
.LegalPage .LegalPolicyNav a.active { color: #ffe09a; background: linear-gradient(#10476b, #07263e); box-shadow: inset 0 -2px #d09a38; }

.LegalPage .LegalNotice {
	padding: 18px 20px;
	border: 1px solid #866227;
	border-left: 3px solid #d09a38;
	background: linear-gradient(90deg, #0a2a43, #030c14 75%);
}
.LegalPage .LegalNotice strong { display: block; color: #ffe09a; font: bold 18px/1.2 Georgia, serif; }
.LegalPage .LegalNotice p { margin: 8px 0 0; color: #bdd0da; font-size: 13px; line-height: 1.65; }

.LegalPage .LegalSections { display: grid; gap: 12px; }
.LegalPage .LegalSections > section {
	padding: 20px 21px;
	border: 1px solid #31566d;
	background: linear-gradient(145deg, rgba(7, 28, 43, .98), rgba(2, 9, 15, .99));
	box-shadow: inset 0 0 18px rgba(0, 0, 0, .38);
}
.LegalPage .LegalSections h2 {
	display: flex;
	margin: 0 0 12px;
	align-items: center;
	gap: 11px;
	color: #ffe09a;
	font: bold 20px/1.25 Georgia, serif;
	text-shadow: 0 2px 2px #000;
}
.LegalPage .LegalSections h2 span {
	display: grid;
	min-width: 34px;
	height: 28px;
	place-items: center;
	border: 1px solid #3f7896;
	background: #07243a;
	color: #66d8fa;
	font: bold 9px/1 Arial, sans-serif;
}
.LegalPage .LegalSections p,
.LegalPage .LegalSections li { color: #b8cbd5; font-size: 13px; line-height: 1.7; }
.LegalPage .LegalSections p { margin: 10px 0 0; }
.LegalPage .LegalSections p:first-of-type { margin-top: 0; }
.LegalPage .LegalSections ul { margin: 8px 0 0; padding-left: 22px; }
.LegalPage .LegalSections li { margin: 7px 0; padding-left: 3px; }
.LegalPage .LegalSections li::marker { color: #d4a13e; }
.LegalPage .LegalSections a { color: #69dbfb; font-weight: bold; }
.LegalPage .LegalSections strong { color: #efd28b; }

.LegalPage .LegalWarning {
	display: grid;
	padding: 19px 20px;
	grid-template-columns: 46px minmax(0, 1fr);
	align-items: center;
	gap: 15px;
	border: 1px solid #8b4036;
	border-left: 3px solid #d0604c;
	background: linear-gradient(90deg, #280e0b, #070b10 75%);
}
.LegalPage .LegalWarning > span {
	display: grid;
	width: 39px;
	height: 39px;
	place-items: center;
	border: 1px solid #ba5a49;
	border-radius: 50%;
	color: #ffad97;
	font: bold 20px Georgia, serif;
}
.LegalPage .LegalWarning small { color: #f18b77; font: bold 9px/1 Arial, sans-serif; letter-spacing: 1.2px; }
.LegalPage .LegalWarning h2 { margin: 6px 0 7px; color: #ffd5b4; font: bold 19px/1.1 Georgia, serif; }
.LegalPage .LegalWarning p { margin: 0; color: #cbb9b3; font-size: 12px; line-height: 1.6; }

.LegalPage .LegalContact {
	display: flex;
	min-height: 125px;
	padding: 20px 22px;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border: 1px solid #775a27;
	background: radial-gradient(circle at 8% 50%, rgba(28, 145, 196, .18), transparent 22%), linear-gradient(90deg, #09243b, #020a12 75%);
}
.LegalPage .LegalContact small { color: #62d6f9; font: bold 9px/1 Arial, sans-serif; letter-spacing: 1.3px; }
.LegalPage .LegalContact h2 { margin: 7px 0 8px; color: #ffe09a; font: bold 22px/1.1 Georgia, serif; }
.LegalPage .LegalContact p { margin: 0; color: #afc4cf; font-size: 12px; line-height: 1.55; }
.LegalPage .LegalContact > a {
	display: flex;
	min-width: 190px;
	min-height: 48px;
	padding: 0 16px;
	align-items: center;
	justify-content: center;
	border: 1px solid #b17d2c;
	background: linear-gradient(#13557e, #062b47);
	color: #ffe1a0;
	font: bold 10px/1 Arial, sans-serif;
	letter-spacing: .6px;
	text-decoration: none;
}
.LegalPage .LegalContact > a span { margin-left: 8px; color: #65ddff; font-size: 16px; }
.LegalPage .LegalContact > a:hover { filter: brightness(1.16); }

#Footer .FooterLegalLinks { margin-bottom: 7px; font-size: 11px; }
#Footer .FooterLegalLinks span { margin: 0 7px; color: #806c50; }
#Footer .FooterLegalLinks a { color: #e0c789; }

@media (max-width: 680px) {
	.LegalPage .LegalHero { grid-template-columns: 58px minmax(0, 1fr); padding: 18px; }
	.LegalPage .LegalHeroIcon { width: 50px; height: 50px; font-size: 23px; }
	.LegalPage .LegalHero time { grid-column: 1 / -1; min-height: 58px; }
	.LegalPage .LegalContact { align-items: stretch; flex-direction: column; }
	.LegalPage .LegalContact > a { width: 100%; box-sizing: border-box; }
}
@media (max-width: 480px) {
	.LegalPage .LegalHero { grid-template-columns: 1fr; text-align: center; }
	.LegalPage .LegalHeroIcon { margin: 0 auto; }
	.LegalPage .LegalHero h1 { font-size: 25px; }
	.LegalPage .LegalPolicyNav { grid-template-columns: 1fr; }
	.LegalPage .LegalPolicyNav a { border-right: 0; border-bottom: 1px solid #31576e; }
	.LegalPage .LegalPolicyNav a:last-child { border-bottom: 0; }
	.LegalPage .LegalSections > section { padding: 17px; }
	.LegalPage .LegalSections h2 { align-items: flex-start; font-size: 18px; }
	.LegalPage .LegalSections p,
	.LegalPage .LegalSections li { font-size: 12px; }
}