@font-face {
    font-family: 'Medieval';
    src: url('../fonts/medieval.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-primary: #947118;
    --color-primary-dark: #a68a3a;
    --color-primary-light: #d4b85d;
    --color-secondary: #1e5799;
    --color-secondary-dark: #164070;
    --color-secondary-light: #2a6db5;
    --color-accent: #f1c40f;
    --box-bg: #8b7355;
    --box-content-bg: #f4ecd8;
    --box-border: #5d4e37;
    --box-inner-bg: #d4c4a8;
    --box-inner-border: #b8a888;
    --box-inner-shadow: 2px 2px 4px #00000026;
    --box-header-from: #1e5799;
    --box-header-to: #164070;
    --box-header-border: #0d2f54;
    --box-header-text: #fff;
    --background: transparent;
    --foreground: #3d2314;
    --text-muted: #5c4033;
    --text-link: #1e5799;
    --text-link-hover: #2a6db5;
    --hover-bg: #8b73554d;
    --active-bg: #8b735580;
    --color-success: #27ae60;
    --color-danger: #c0392b;
    --color-warning: #e67e22;
    --color-info: #3498db;
    --calendar-header-bg: #c9b896;
    --calendar-header-text: #3d2e1f;
    --calendar-border: #8b7355;
    --calendar-weekend: #8b0000;
    --calendar-day-bg: #d4c4a8;
    --calendar-day-text: #3d2e1f;
    --calendar-today-bg: #e8dcc8;
    --calendar-other-month-bg: #c0b090;
    --calendar-other-month-text: #7a6a5a;
    --calendar-more-text: #5a4a3a;
    --btn-primary-from: #2a6db5;
    --btn-primary-via: #1e5799;
    --btn-primary-to: #164070;
    --btn-primary-text: #fff;
    --btn-primary-border: #0d2f54;
    --btn-primary-hover-from: #3a7dc5;
    --btn-primary-hover-via: #2a6db5;
    --btn-primary-hover-to: #1e5799;
    --btn-primary-hover-text: #fff;
    --btn-primary-hover-border: #164070;
    --btn-primary-active-from: #164070;
    --btn-primary-active-via: #1e5799;
    --btn-primary-active-to: #2a6db5;
    --btn-primary-active-bg-from: #4a8dd5;
    --btn-primary-active-bg-via: #3a7dc5;
    --btn-primary-active-bg-to: #2a6db5;
    --btn-primary-active-text: #fff;
    --btn-primary-active-border: #1e5799;
    --btn-secondary-from: #8b7355;
    --btn-secondary-via: #7a6345;
    --btn-secondary-to: #695335;
    --btn-secondary-text: #f4ecd8;
    --btn-secondary-border: #5d4e37;
    --btn-secondary-hover-from: #9b8365;
    --btn-secondary-hover-via: #8a7355;
    --btn-secondary-hover-to: #796345;
    --btn-secondary-hover-text: #fff;
    --btn-secondary-hover-border: #6d5e47;
    --btn-secondary-active-from: #695335;
    --btn-secondary-active-via: #7a6345;
    --btn-secondary-active-to: #8b7355;
    --btn-danger-from: #9b4a4a;
    --btn-danger-via: #8b3a3a;
    --btn-danger-to: #7b2a2a;
    --btn-danger-text: #fff0f0;
    --btn-danger-border: #b66;
    --btn-danger-hover-from: #ab5a5a;
    --btn-danger-hover-via: #9b4a4a;
    --btn-danger-hover-to: #8b3a3a;
    --btn-danger-hover-text: #fff;
    --btn-danger-hover-border: #c77;
    --btn-danger-active-from: #7b2a2a;
    --btn-danger-active-via: #8b3a3a;
    --btn-danger-active-to: #9b4a4a;
    --btn-ghost-bg: transparent;
    --btn-ghost-text: #5c4033;
    --btn-ghost-border: transparent;
    --btn-ghost-hover-bg: #8b735526;
    --btn-ghost-hover-text: #3d2314;
    --btn-ghost-hover-border: #8b7355;
    --btn-success-from: #3a8a4a;
    --btn-success-via: #2a6f3a;
    --btn-success-to: #1a5528;
    --btn-success-text: #b4e4b4;
    --btn-success-border: #5a9b5a;
    --btn-success-hover-from: #4a9a5a;
    --btn-success-hover-via: #3a804a;
    --btn-success-hover-to: #2a6538;
    --btn-success-hover-text: #c4f4c4;
    --btn-success-hover-border: #6aab6a;
    --btn-success-active-from: #1a5528;
    --btn-success-active-via: #2a6f3a;
    --btn-success-active-to: #3a8a4a;
    --btn-warning-from: #8b6a3a;
    --btn-warning-via: #6b5a2a;
    --btn-warning-to: #4b3a1a;
    --btn-warning-text: #fec;
    --btn-warning-border: #a85;
    --btn-warning-hover-from: #9b7a4a;
    --btn-warning-hover-via: #7b6a3a;
    --btn-warning-hover-to: #5b4a2a;
    --btn-warning-hover-text: #ffd;
    --btn-warning-hover-border: #ba9865;
    --btn-warning-active-from: #4b3a1a;
    --btn-warning-active-via: #6b5a2a;
    --btn-warning-active-to: #8b6a3a;
    --font-medieval: 'Medieval', 'Cinzel', 'Cinzel Fallback';
    --font-inter: "Inter", "Inter Fallback";
    grid-template-rows: 0fr;
    --spacing: .25rem;
}

body {
    background: var(--background) !important;
    color: var(--foreground) !important;
    /* font-family: var(--font-inter), system-ui, -apple-system, sans-serif !important;
    font-size: 12px;
    line-height: 1.4 !important; */
}

.LoginBox.box,
.BoostedBox.box,
.DiscordBox.box,
.WikiBox.box {
    margin-bottom: 15px;
    overflow: visible;
}

.DiscordBox.glow {
    filter: blur(16px);
    background: #5865f233;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translate(-50%);
}

.DiscordBox.iconWrapper {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    position: relative;
}

.DiscordBox.iconRing {
    border: 2px solid #5865f280;
    border-radius: 50%;
    animation: 2s ease-in-out infinite DiscordBoxpulse;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.DiscordBox.iconBg {
    background: linear-gradient(to bottom right, #5865f2, #4752c4);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    right: 4px;
    box-shadow: 0 0 15px #5865f280;
}

.DiscordBox.onlineIndicator {
    background: #22c55e;
    border: 2px solid #ffffff80;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    position: absolute;
    top: -2px;
    right: -2px;
    box-shadow: 0 0 5px #22c55ecc;
}

.DiscordBox.subtitle,
.WikiBox.subtitle {
    color: var(--text);
    margin: 0 0 10px;
    font-size: 10px;
    text-align: center;
    margin-bottom: 0px;
}

.DiscordBox.button {
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(#5865f2, #4752c4, #3a4199);
    border: 1px solid #7289da;
    border-radius: 4px;
    width: 100%;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: all .15s;
    display: block;
    box-shadow: 0 0 10px #5865f24d, inset 0 1px #fff3;
}

.DiscordBox.button:hover {
    background: linear-gradient(#6873f3, #5865f2, #4752c4);
    border-color: #ffffff80;
    box-shadow: 0 0 20px #5865f280, inset 0 1px #ffffff4d;
}

.LoginBox.header,
.BoostedBox.header,
.DiscordBox.header,
.WikiBox.header {
    z-index: 1;
    aspect-ratio: 1836 / 255;
    background: url(../images/ui/box/header.png) 50% / 100% 100% no-repeat;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    position: relative;
}

.LoginBox .loggedText {
    color: #5c4a32;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin: 0;
    font-size: 11px;
    display: flex;
}

.LoginBox .loggedLabel {
    flex-shrink: 0;
}

.LoginBox .username {
    color: #2d5a3a;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-weight: 500;
    overflow: hidden;
}

.LoginBox.headerTitle,
.BoostedBox.headerTitle,
.DiscordBox.headerTitle,
.WikiBox.headerTitle {
    font-family: var(--font-medieval);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #f0e6d2;
    text-shadow: 1px 1px 2px #000c;
    white-space: nowrap;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.LoginBox.body,
.BoostedBox.body,
.DiscordBox.body,
.WikiBox.body {
    background: url(../images/ui/box/body.png) 50% / 100% 100% no-repeat;
    border-radius: 4px;
    min-height: 146px;
    margin-top: -5px;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
}

.LoginBox.content,
.BoostedBox.content,
.DiscordBox.content,
.WikiBox.content {
    flex-direction: column;
    gap: 10px;
    padding: 24px 12px;
    display: flex;
}

.BoostedBox.creaturesContainer {
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    display: flex;
}

.BoostedBox.creatureCard {
    text-align: center;
}

.BoostedBox.divider {
    background: var(--box-inner-border);
    align-self: center;
    width: 1px;
    height: 64px;
}

.BoostedBox.bossFrame,
.BoostedBox.creatureFrameBlue {
    border-color: #3b5068;
}

.BoostedBox.creatureFrame {
    background: var(--box-inner-bg);
    border: 2px solid;
    border-radius: 4px;
    width: 56px;
    height: 56px;
    position: relative;
    overflow: hidden;
}

.BoostedBox.bossIcon,
.BoostedBox.creatureIconBlue {
    color: #f0e6d2;
    background: #3b5068;
    border: none;
}

.BoostedBox.creatureIcon {
    z-index: 10;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
    display: flex;
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translate(-50%);
}

.BoostedBox.bossLabel,
.BoostedBox.creatureLabelBlue {
    color: #3b5068;
}

.BoostedBox.creatureLabel {
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 6px;
    font-size: 9px;
    font-weight: 700;
}

.BoostedBox.creatureName {
    color: var(--foreground);
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 56px;
    margin: 0;
    font-size: 9px;
    overflow: hidden;
}

.LoginBox.content .btnPrimary,
.BoostedBox.content .btnPrimary,
.DiscordBox.content .btnPrimary,
.WikiBox.content .btnPrimary,
.LoginBox.content .btnSecondary,
.BoostedBox.content .btnSecondary,
.DiscordBox.content .btnSecondary,
.WikiBox.content .btnSecondary,
.LoginBox.content .btnDanger,
.BoostedBox.content .btnDanger {
    text-align: center;
    cursor: pointer;
    border: 1px solid;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
    display: flex;
}

.LoginBox.content .btnPrimary,
.BoostedBox.content .btnPrimary,
.DiscordBox.content .btnPrimary,
.WikiBox.content .btnPrimary {
    background: linear-gradient(to bottom, var(--btn-primary-from, #4a7c59), var(--btn-primary-via, #3d6b4a), var(--btn-primary-to, #2d5a3a));
    color: var(--btn-primary-text, #d4e5d8);
    border-color: var(--btn-primary-border, #5a8c69);
    box-shadow: inset 0 1px #ffffff1a, inset 0 -1px #0000004d, 0 1px 2px #00000080;
}

.LoginBox.content .btnPrimary:hover,
.BoostedBox.content .btnPrimary:hover,
.DiscordBox.content .btnPrimary:hover,
.WikiBox.content .btnPrimary:hover {
    background: linear-gradient(to bottom, var(--btn-primary-hover-from, #5a8c69), var(--btn-primary-hover-via, #4a7c59), var(--btn-primary-hover-to, #3d6b4a));
    color: var(--btn-primary-hover-text, #e4f5e8);
    border-color: var(--btn-primary-hover-border, #6a9c79);
}

.LoginBox.content .btnSecondary,
.BoostedBox.content .btnSecondary,
.DiscordBox.content .btnSecondary,
.WikiBox.content .btnSecondary {
    background: linear-gradient(to bottom, var(--btn-secondary-from, #6b5a3d), var(--btn-secondary-via, #5a4a32), var(--btn-secondary-to, #4a3a28));
    color: var(--btn-secondary-text, #d4c4a8);
    border-color: var(--btn-secondary-border, #7b6a4d);
    box-shadow: inset 0 1px #ffffff1a, inset 0 -1px #0000004d, 0 1px 2px #00000080;
}

.LoginBox.content .btnSecondary:hover,
.BoostedBox.content .btnSecondary:hover,
.DiscordBox.content .btnSecondary:hover,
.WikiBox.content .btnSecondary:hover {
    background: linear-gradient(to bottom, var(--btn-secondary-hover-from, #7b6a4d), var(--btn-secondary-hover-via, #6b5a3d), var(--btn-secondary-hover-to, #5a4a32));
    color: var(--btn-secondary-hover-text, #e4d4b8);
    border-color: var(--btn-secondary-hover-border, #8b7a5d);
}

.LoginBox.content .btnDanger,
.BoostedBox.content .btnDanger {
    background: linear-gradient(to bottom, var(--btn-danger-from, #8b3a3a), var(--btn-danger-via, #7a2a2a), var(--btn-danger-to, #6a1a1a));
    color: var(--btn-danger-text, #e5c4c4);
    border-color: var(--btn-danger-border, #9b4a4a);
    box-shadow: inset 0 1px #ffffff1a, inset 0 -1px #0000004d, 0 1px 2px #00000080;
}

.LoginBox.content .btnDanger:hover,
.BoostedBox.content .btnDanger:hover {
    background: linear-gradient(to bottom, var(--btn-danger-hover-from, #9b4a4a), var(--btn-danger-hover-via, #8b3a3a), var(--btn-danger-hover-to, #7a2a2a));
    color: var(--btn-danger-hover-text, #f5d4d4);
    border-color: var(--btn-danger-hover-border, #ab5a5a);
}

.MenuBox.box {
    padding-bottom: 20px;
    overflow: visible;
}

.MenuBox.box button.header {
    z-index: 1;
    aspect-ratio: 1836 / 255;
    cursor: pointer;
    background: url(../images/ui/menu/header.png) 50% / 100% 100% no-repeat;
    border: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    transition: opacity .15s;
    display: flex;
    position: relative;
}

.MenuBox.box button.header:hover {
    opacity: .9;
}

.MenuBox.box button.header .headerTitle {
    font-family: var(--font-medieval);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #f0e6d2;
    text-shadow: 1px 1px 2px #000c;
    white-space: nowrap;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.MenuBox.box button.header .headerIcon {
    color: #f0e6d2;
    align-items: center;
    display: flex;
    position: absolute;
    right: 18px;
}

.MenuBox.box .bodyWrapper {
    margin-top: -15px;
    transition: grid-template-rows .2s ease-out;
    display: grid;
}

.MenuBox.box .bodyWrapper .bodyOverflow {
    min-height: 0;
    overflow: hidden;
}

.MenuBox.box .bodyWrapper .bodyOverflow .body {
    flex-direction: column;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
}

.MenuBox.box .bodyWrapper .bodyOverflow .body .bodyTop {
    aspect-ratio: 1675 / 225;
    background: url(../images/ui/menu/content/content-top.png) 0 0 / 100% 100% no-repeat;
    width: 100%;
}

.MenuBox.box .bodyWrapper .bodyOverflow .body .bodyMiddle {
    background: url(../images/ui/menu/content/content-center.png) 0 0 / 100% repeat-y;
    width: 100%;
    margin-top: -25px;
    margin-bottom: -22px;
}

.MenuBox.box .bodyWrapper .bodyOverflow .body .bodyMiddle .content {
    flex-direction: column;
    gap: 1px;
    padding: 6px 8px 20px;
    display: flex;
}

.MenuBox.box .bodyWrapper .bodyOverflow .body .bodyMiddle .menuLink {
    color: #3d3225;
    border-left: 3px solid #0000;
    border-radius: 2px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 12px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all .15s;
    display: flex;
    position: relative;
}

.MenuBox.box .bodyWrapper .bodyOverflow .body .bodyMiddle .menuLink:hover {
    color: #2d5a3a;
    background: #0000000d;
    border-left-color: #4a9960;
}

.MenuBox.box .bodyWrapper .bodyOverflow .body .bodyMiddle .menuLink.active {
    color: #2d5a3a;
    cursor: default;
    pointer-events: none;
    background: #4a99601a;
    border-left-color: #4a9960;
    font-weight: 600;
}

.MenuBox.box .bodyWrapper .bodyOverflow .body .bodyMiddle .menuLink .badge {
    color: #fff;
    border-radius: 2px;
    margin-left: auto;
    padding: 1px 4px;
    font-size: 8px;
    font-weight: 700;
}

/* .MenuBox.box .bodyWrapper .bodyOverflow .body .bodyMiddle {} */

.MenuBox.box .bodyWrapper .bodyOverflow .body .bodyBottom {
    aspect-ratio: 1675 / 188;
    background: url(../images/ui/menu/content/content-bottom.png) 0 0 / 100% 100% no-repeat;
    width: 100%;
}

.TopBar.topbar {
    aspect-ratio: 5914 / 348;
    background: url(../images/ui/topbar.png) 50% / 100% 100% no-repeat;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;
    display: flex;
    position: relative;
}

.TopBar .topbarContent {
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: flex;
}

.TopBar .topbarContent .topbarLink {
    color: #f0e6d2;
    text-shadow: 1px 1px 2px #000c;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    text-decoration: none;
    transition: all .15s;
    display: flex;
}

.TopBar .topbarContent .topbarLink:hover {
    color: #fff;
}


.TopBar .topbarContent .separator {
    background: #f0e6d24d;
    width: 1px;
    height: 16px;
}

.TopBar .topbarContent .onlineCount {
    text-shadow: 1px 1px 2px #000c;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    display: flex;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
}

.TopBar .topbarContent .onlineCount:hover {
    opacity: .8;
}

.TopBar .topbarContent .onlineCount .onlineNumber {
    color: #4ade80;
    font-weight: 700;
}

.TopBar .topbarContent .onlineCount .onlineLabel {
    color: #f0e6d2;
}

.PageHeader.header {
    z-index: 1;
    aspect-ratio: 6114 / 289;
    background: url(../images/ui/page/header-editable.png) 50% / 100% 100% no-repeat;
    align-items: center;
    width: calc(100% + 18px);
    margin-left: -9px;
    margin-right: -9px;
    display: flex;
    position: relative;
}

.PageHeader .headerContent {
    align-items: center;
    width: 100%;
    padding-top: 3px;
    padding-left: 28px;
    padding-right: 46px;
    display: flex;
}

.PageHeader .titleIcon {
    color: #f0e6d2;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin-right: 6px;
    display: flex;
}

.PageHeader .title {
    min-width: 0;
    font-family: var(--font-medieval);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #f0e6d2;
    text-shadow: 1px 1px 2px #000c;
    flex: 1;
    align-items: center;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    display: flex;
}

.PageBody.body {
    z-index: 0;
    background: linear-gradient(#f5e6c8, #efe0be, #e8d5ac);
    border: 3px solid #b8860b;
    border-top: none;
    border-radius: 0 0 6px 6px;
    width: calc(100% - 2px);
    margin-top: -12px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    box-shadow: inset 0 1px #ffffff4d, inset 0 -2px 4px #0000001a, 0 2px 8px #0003;
}

.PageBody.body::before {
    content: "";
    pointer-events: none;
    border-radius: 0 0 4px 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 12px #b8860b26;
}

.PageBody.body .PageBody.content {
    padding: 24px 20px 20px;
}

.WikiBox.glow {
    filter: blur(16px);
    background: #d9a94e40;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translate(-50%);
}

.WikiBox.iconWrapper {
    width: 56px;
    height: 56px;
    margin: 0 auto 8px;
    position: relative;
}

.WikiBox.iconRing {
    border: 2px solid #d9a94e80;
    border-radius: 50%;
    animation: 3s ease-in-out infinite DiscordBoxpulse;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.WikiBox.iconBg {
    background: linear-gradient(to bottom right, #d9a94e, #a67c2e);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    right: 4px;
    box-shadow: 0 0 15px #d9a94e80;
}

.WikiBox.sparkle {
    justify-content: center;
    align-items: center;
    width: 14px;
    height: 14px;
    font-size: 10px;
    animation: 2s ease-in-out infinite WikiBoxtwinkle;
    display: flex;
    position: absolute;
    top: -2px;
    right: -2px;
}

.WikiBox.button {
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(#d9a94e, #a67c2e, #8b6524);
    border: 1px solid #d4a54a;
    border-radius: 4px;
    width: 100%;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: all .15s;
    display: block;
    box-shadow: 0 0 10px #d9a94e4d, inset 0 1px #fff3;
}

.WikiBox.button:hover {
    background: linear-gradient(#e6b85a, #d9a94e, #a67c2e);
    border-color: #ffffff80;
    box-shadow: 0 0 20px #d9a94e80, inset 0 1px #ffffff4d;
}

.html-content.news-rich-content p img {
    margin: .25rem;
    display: inline;
}

.html-content.news-rich-content img {
    vertical-align: middle;
    border-radius: 6px;
    max-width: 100%;
    height: auto;
}

.webshop-widget .webshop-header {
    background-image: url(../images/ui/premium-box/header.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    aspect-ratio: 1684 / 275;
}

.webshop-widget .webshop-header .title {
    font-family: var(--font-medieval);
    font-weight: 700;
    color: rgb(255, 224, 102);
    text-shadow: rgba(0, 0, 0, 0.8) 1px 1px 2px, rgba(255, 200, 0, 0.4) 0px 0px 8px;
}

.webshop-widget .content {
    z-index: 1;
    background-image: url(../images/ui/premium-box/content.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.webshop-widget .content p {
    font-family: var(--font-medieval);
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    text-transform: uppercase;
    color: rgb(255, 224, 102);
    text-shadow: rgba(0, 0, 0, 0.9) 2px 2px 4px, rgba(0, 0, 0, 0.5) 0px 0px 10px;
}

@keyframes DiscordBoxpulse {

    0%,
    100% {
        opacity: .5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes WikiBoxtwinkle {

    0%,
    100% {
        opacity: .6;
        transform: scale(.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@media (max-width: 640px) {

    .TopBar .labelHideOnMobile,
    .hideOnMobile {
        display: none !important;
    }
}

:where(.space-y-3>:not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
}

td {
    vertical-align: inherit !important;
}

.rank-gold {
    animation: 2s ease-in-out infinite gold-glow;
}

.rank-silver {
    animation: 2s ease-in-out infinite silver-glow;
}

.rank-bronze {
    animation: 2s ease-in-out infinite bronze-glow;
}

@keyframes gold-glow {

    0%,
    100% {
        text-shadow: 0 0 5px #ffd700cc,
            0 0 10px #ffd70080,
            0 0 15px #ffd7004d;
    }

    50% {
        text-shadow: 0 0 10px gold,
            0 0 20px #ffd700b3,
            0 0 30px #ffd70080;
    }
}

@keyframes silver-glow {

    0%,
    100% {
        text-shadow: 0 0 5px #c0c0c0cc,
            0 0 10px #c0c0c080,
            0 0 15px #c0c0c04d;
    }

    50% {
        text-shadow: 0 0 10px #c0c0c0,
            0 0 20px #c0c0c0b3,
            0 0 30px #c0c0c080;
    }
}

@keyframes bronze-glow {

    0%,
    100% {
        text-shadow: 0 0 5px #b87333cc,
            0 0 10px #b8733380,
            0 0 15px #b873334d;
    }

    50% {
        text-shadow: 0 0 10px #b87333,
            0 0 20px #b87333b3,
            0 0 30px #b8733380;
    }
}