/* --- Font Face Declarations --- */
@font-face {
    font-family: Circe;
    src: url('/assets/mudream/fonts/Circe/Circe-Regular.eot');
    src: local("Circe"),local("Circe-Regular"),url('/assets/mudream/fonts/Circe/Circe-Regular.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Circe/Circe-Regular.woff') format("woff"),url('/assets/mudream/fonts/Circe/Circe-Regular.ttf') format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Circe;
    src: url('/assets/mudream/fonts/Circe/Circe-ExtraLight.eot');
    src: local("Circe ExtraLight"),local("Circe-ExtraLight"),url('/assets/mudream/fonts/Circe/Circe-ExtraLight.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Circe/Circe-ExtraLight.woff') format("woff"),url('/assets/mudream/fonts/Circe/Circe-ExtraLight.ttf') format("truetype");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: Circe;
    src: url('/assets/mudream/fonts/Circe/Circe-Thin.eot');
    src: local("Circe Thin"),local("Circe-Thin"),url('/assets/mudream/fonts/Circe/Circe-Thin.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Circe/Circe-Thin.woff') format("woff"),url('/assets/mudream/fonts/Circe/Circe-Thin.ttf') format("truetype");
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: Circe;
    src: url('/assets/mudream/fonts/Circe/Circe-Light.eot');
    src: local("Circe Light"),local("Circe-Light"),url('/assets/mudream/fonts/Circe/Circe-Light.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Circe/Circe-Light.woff') format("woff"),url('/assets/mudream/fonts/Circe/Circe-Light.ttf') format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: Circe;
    src: url('/assets/mudream/fonts/Circe/Circe-Bold.eot');
    src: local("Circe Bold"),local("Circe-Bold"),url('/assets/mudream/fonts/Circe/Circe-Bold.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Circe/Circe-Bold.woff') format("woff"),url('/assets/mudream/fonts/Circe/Circe-Bold.ttf') format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: Circe;
    src: url('/assets/mudream/fonts/Circe/Circe-ExtraBold.eot');
    src: local("Circe ExtraBold"),local("Circe-ExtraBold"),url('/assets/mudream/fonts/Circe/Circe-ExtraBold.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Circe/Circe-ExtraBold.woff') format("woff"),url('/assets/mudream/fonts/Circe/Circe-ExtraBold.ttf') format("truetype");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: Lateef;
    src: url('/assets/mudream/fonts/Lateef/Lateef-SemiBold.eot');
    src: url('/assets/mudream/fonts/Lateef/Lateef-SemiBold.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Lateef/Lateef-SemiBold.woff') format("woff"),url('/assets/mudream/fonts/Lateef/Lateef-SemiBold.ttf') format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Lateef;
    src: url('/assets/mudream/fonts/Lateef/Lateef-ExtraLight.eot');
    src: url('/assets/mudream/fonts/Lateef/Lateef-ExtraLight.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Lateef/Lateef-ExtraLight.woff') format("woff"),url('/assets/mudream/fonts/Lateef/Lateef-ExtraLight.ttf') format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Lateef;
    src: url('/assets/mudream/fonts/Lateef/Lateef-Medium.eot');
    src: url('/assets/mudream/fonts/Lateef/Lateef-Medium.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Lateef/Lateef-Medium.woff') format("woff"),url('/assets/mudream/fonts/Lateef/Lateef-Medium.ttf') format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Lateef;
    src: url('/assets/mudream/fonts/Lateef/Lateef-Bold.eot');
    src: url('/assets/mudream/fonts/Lateef/Lateef-Bold.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Lateef/Lateef-Bold.woff') format("woff"),url('/assets/mudream/fonts/Lateef/Lateef-Bold.ttf') format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Lateef;
    src: url('/assets/mudream/fonts/Lateef/Lateef-ExtraBold.eot');
    src: url('/assets/mudream/fonts/Lateef/Lateef-ExtraBold.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Lateef/Lateef-ExtraBold.woff') format("woff"),url('/assets/mudream/fonts/Lateef/Lateef-ExtraBold.ttf') format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Lateef;
    src: url('/assets/mudream/fonts/Lateef/Lateef-Light.eot');
    src: url('/assets/mudream/fonts/Lateef/Lateef-Light.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Lateef/Lateef-Light.woff') format("woff"),url('/assets/mudream/fonts/Lateef/Lateef-Light.ttf') format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Lateef;
    src: url('/assets/mudream/fonts/Lateef/Lateef-Regular.eot');
    src: url('/assets/mudream/fonts/Lateef/Lateef-Regular.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Lateef/Lateef-Regular.woff') format("woff"),url('/assets/mudream/fonts/Lateef/Lateef-Regular.ttf') format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-Regular.eot');
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-Regular.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Montserrat/Montserrat-Regular.woff') format("woff"),url('/assets/mudream/fonts/Montserrat/Montserrat-Regular.ttf') format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-Thin.eot');
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-Thin.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Montserrat/Montserrat-Thin.woff') format("woff"),url('/assets/mudream/fonts/Montserrat/Montserrat-Thin.ttf') format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-SemiBold.eot');
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-SemiBold.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Montserrat/Montserrat-SemiBold.woff') format("woff"),url('/assets/mudream/fonts/Montserrat/Montserrat-SemiBold.ttf') format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-Medium.eot');
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-Medium.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Montserrat/Montserrat-Medium.woff') format("woff"),url('/assets/mudream/fonts/Montserrat/Montserrat-Medium.ttf') format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-Light.eot');
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-Light.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Montserrat/Montserrat-Light.woff') format("woff"),url('/assets/mudream/fonts/Montserrat/Montserrat-Light.ttf') format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-Italic.eot');
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-Italic.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Montserrat/Montserrat-Italic.woff') format("woff"),url('/assets/mudream/fonts/Montserrat/Montserrat-Italic.ttf') format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-ExtraBold.eot');
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-ExtraBold.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Montserrat/Montserrat-ExtraBold.woff') format("woff"),url('/assets/mudream/fonts/Montserrat/Montserrat-ExtraBold.ttf') format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-Bold.eot');
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-Bold.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Montserrat/Montserrat-Bold.woff') format("woff"),url('/assets/mudream/fonts/Montserrat/Montserrat-Bold.ttf') format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Montserrat;
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-Black.eot');
    src: url('/assets/mudream/fonts/Montserrat/Montserrat-Black.eot?#iefix') format("embedded-opentype"),url('/assets/mudream/fonts/Montserrat/Montserrat-Black.woff') format("woff"),url('/assets/mudream/fonts/Montserrat/Montserrat-Black.ttf') format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-circle: Circe,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    --font-montserrat: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    --font-lateef: Lateef,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif
    --main-bg: #140000;
    --landing-bg: #140000;
    --box-bg: #1E0A02;
    --box-accent-bg: radial-gradient(486.23% 486.23% at 219.37% -391.79%,#FC3D3D 0%,rgba(252,61,61,0.00) 100%),#2E1B13;
    --big-box-bg: linear-gradient(0deg,#230A00,#230A00),#15171D;
    --gradient-btn-primary: radial-gradient(421.99% 144.78% at 100% 157.5%,rgba(210,161,0,0.50) 0%,rgba(210,164,0,0.00) 100%),#DF0505;
    --gradient-btn-primary-hover: radial-gradient(421.99% 144.78% at 100% 157.5%,rgba(242,187,6,0.5) 0%,rgba(210,164,0,0.00) 100%),#f80404;
    --gradient-box-primary: radial-gradient(106.96% 246% at 50.43% 216%,rgba(255,195,0,0.50) 0%,rgba(255,231,182,0.00) 100%),radial-gradient(412.17% 948% at 50.43% 638%,rgba(128,132,165,0.50) 0%,rgba(27,28,38,0.00) 100%),radial-gradient(237.61% 242.35% at 124.36% 17.14%,#3A1D00 0%,#482102 100%);
    --gradient-box-secondary: radial-gradient(362.83% 222.24% at 19.13% -64%,#4D2525 0%,rgba(66,41,38,0.23) 100%),#332020;
    --gradient-box-dark: radial-gradient(115.48% 224.42% at 224% 87.79%,#522020 0%,rgba(67,25,19,0.00) 100%),radial-gradient(55.87% 57.35% at 30.5% 4.21%,rgba(244,164,89,0.08) 0%,rgba(0,0,0,0.00) 100%),radial-gradient(80.58% 57.93% at 73.83% 10.81%,rgba(227,54,54,0.11) 0%,rgba(0,0,0,0.00) 100%),radial-gradient(86.06% 249.78% at -97.5% 45.58%,#3C3030 0%,#000 100%);
    --gradient-box-grey: linear-gradient(0deg,#332020,#332020),#FFF;
    --main-color: #FE0;
    --main-color-transparent: rgba(255,237,0,0.4);
    --main-color-super-transparent: rgba(255,236,0,0.2);
    --main-color-text-shadow: 0 0 5px rgba(255,238,0,0.5);
    --secondary-color: #efe676;
    --box-shadow-line-accent: 1px 1px 5px 2px rgba(255,238,0,0.5);
    --box-shadow-btn-primary: 0px 2px 2px 0px rgba(255,255,255,0.30) inset,0px -2px 2px 0px rgba(57,9,9,0.30) inset,0px 5px 10px 0px rgba(243,29,29,0.25),0px 10px 20px 0px rgba(243,29,29,0.10);
    --text-primary-color: #fff;
    --text-secondary-color: #9A8787;
    --gold-text-gradient: linear-gradient(0deg,#FF6600,#FFD333);
    --text-colorful-gradient: linear-gradient(347deg,#F60 18.06%,#FFD333 92.06%),linear-gradient(278deg,#FAC808 -1.44%,#EB32D8 72.39%),#FFF;
    --text-shadow-color-dark: 0 5.454px 9.273px rgba(23,3,1,0.36);
    --header-base-bg: rgba(74,50,9,0.4);
    --header-account-bg: linear-gradient(97deg,#FCE63D -240.32%,rgba(252,80,61,0.00) 80.43%),#1E0A02;
    --discord-bg: radial-gradient(76.31% 76.66% at -13.33% 119.5%,rgba(241,161,0,0.25) 0%,rgba(241,100,0,0.00) 100%),radial-gradient(84.66% 72% at 114.58% 47%,rgba(236,98,13,0.25) 0%,rgba(236,98,13,0.00) 100%),#251C1C;
    --active-tab-bg: linear-gradient(360deg,#F18D00,rgba(255,144,0,0) 8.57%),radial-gradient(307.71% 364.11% at 43.77% -252.14%,#3C0000 0%,#6F0000 100%),#18181D;
    --switcher-bar-bg: radial-gradient(421.99% 144.78% at 100% 157.5%,rgba(210,0,120,0.50) 0%,rgba(210,0,120,0.00) 100%),#FFC300;
    --item-btn-bg: #321515;
    --item-btn-bg-hover: radial-gradient(106.96% 246% at 50.43% 216%,rgba(255,0,0,0.50) 0%,rgba(255,0,0,0.00) 100%),radial-gradient(412.17% 948% at 50.43% 638%,rgba(157,128,165,0.50) 0%,rgba(38,27,38,0.00) 100%),radial-gradient(237.61% 242.35% at 124.36% 17.14%,#3F1717 0%,#4D2B2B 100%);
    --item-btn-border-hover: 1px solid #AD2C2C;
    --toggle-bg: #262626;
    --toggle-acitve-bg: radial-gradient(106.96% 246% at 50.43% 216%,rgba(255,0,0,0.50) 0%,rgba(255,0,0,0.00) 100%),radial-gradient(412.17% 948% at 50.43% 638%,rgba(157,128,165,0.50) 0%,rgba(38,27,38,0.00) 100%),radial-gradient(237.61% 242.35% at 124.36% 17.14%,#3F1717 0%,#4D2B2B 100%);
    --toggle-acitve-border: 1px solid #AD2C2C;
    --toggle-point-bg: radial-gradient(106.96% 246% at 50.43% 216%,rgba(255,0,0,0.50) 0%,rgba(255,0,0,0.00) 100%),radial-gradient(412.17% 948% at 50.43% 638%,rgba(157,128,165,0.50) 0%,rgba(38,27,38,0.00) 100%),radial-gradient(237.61% 242.35% at 124.36% 17.14%,#3F1717 0%,#4D2B2B 100%);
    --toggle-active-point-bg: radial-gradient(circle at 52% 65%,#D20000 0%,rgba(210,0,0,0) 100%);
    --toggle-point-box-shadow: 0 5px 10px rgba(200,0,0,0.25),0 10px 10px rgba(200,0,0,0.1);
    --bundle-bg: radial-gradient(122.63% 77.67% at 50% 22.33%,#F18D00 0%,rgba(134,61,252,0.00) 100%);
    --subscription-bg: linear-gradient(180deg,#D45C34,#1C0601);
    --item-circle-bg: linear-gradient(180deg,#AF4E41,#8B4C00);
    --start-pack-bg: linear-gradient(180deg,#532410,#1E0A02);
    --start-pack-top-bg: linear-gradient(90deg,#AC1005,#462202);
    --skin-pack-preview-bg: linear-gradient(180deg,#000 61.19%,#3F0E06 87.5%);
    --skin-pack-preview-disabled-bg: linear-gradient(180deg,#000 61.19%,#322110 87.5%);
    --power-bg: url(/assets/mudream/images/power_bg_red.webp) no-repeat center/cover,#0D0D10;
    --top-char-bg: url(/assets/mudream/images/top_char_red.webp) no-repeat center/100% 100%;
    --top-char-active-bg: url(/assets/mudream/images/top_char_red_a.webp) no-repeat center/100% 100%;
    --char-lvl-block-bg: url(/assets/mudream/images/char_block_red.webp) no-repeat center/100% 100%;
    --char-lvl-l-block-bg: url(/assets/mudream/images/char_block_red_l.webp) no-repeat center/100% 100%;
    --battle-pass-chart-bg: url(/assets/mudream/images/bp_chart_bg_red.webp) no-repeat center/cover;
    --block-bg: rgba(33,33,33,0.35);
    --item-bg: #1C1E26;
    --item-green: #16DC6E;
    --main: #0d0d10;
    --black-light: #171d29;
    --black-dark: #1e212b;
    --dark-blue-bg: #00001F;
    --accent-blue-bg: #161A2E;
    --gray: #eff3f4;
    --light: #89879a;
    --gray-blue: #20253D;
    --blue: #0d82ec;
    --blue-acent: #0093F3;
    --light-blue: #2BA8FB;
    --dark-blue: #3362AB;
    --purple: #d800f1;
    --purple-lighth: #AE6CF1;
    --purple-dark: #7000FF;
    --violet: #E3BEFF;
    --red: #FF3F3F;
    --dark-red: #140000;
    --green: #B6FFDC;
    --green-acent: #47D000;
    --green-bright: #1D9638;
    --lime: #00D722;
    --yellow: #FFECA7;
    --yellow-acent: #FFB800;
    --yellow-brigth: #ffd600;
    --orange: #FF9F4A;
    --dark-orange: #DA8E20;
    --light-bronze: #D08A4A;
    --bronze: #CD7f32;
    --dark-bronze: #BB7239;
    --silver: #C0C0C0;
    --white: #fff;
    --secondary: #96B2C5;
    --color-gray: #89879a;
    --color-light: #C7BBCA;
    --light-gray: #A99FAC;
    --border-color: rgba(255,255,255,0.1);
    --border-active: rgba(255,255,255,0.5);
    --table-background-color: radial-gradient(362.83% 222.24% at 19.13% -64%,#4D2525 0%,rgba(66,41,38,0.23) 100%),#332020
}

:root {
    --font-circle: Circe,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    --font-montserrat: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    --font-lateef: Lateef,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif
}

* {
    scrollbar-width: thin;
    scrollbar-color: #444254 rgba(0, 0, 0, 0);
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    background: #444254;
    border-radius: 2px;
}

*::-webkit-scrollbar-track {
    background: #1a1a1a;
}

*::-webkit-scrollbar-button {
    display: none;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    min-width: 1000px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: #ffffff;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

#left-sidebar {
    width: 260px;
    color: #fff;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;

    background: #1a1a1a;
    background-image: radial-gradient(115.48% 224.42% at 224% 87.79%, #522020 0%, rgba(67, 25, 19, 0) 100%),
                      radial-gradient(55.87% 57.35% at 30.5% 4.21%, rgba(244, 164, 89, 0.08) 0%, rgba(0, 0, 0, 0) 100%),
                      radial-gradient(80.58% 57.93% at 73.83% 10.81%, rgba(227, 54, 54, 0.11) 0%, rgba(0, 0, 0, 0) 100%),
                      radial-gradient(86.06% 249.78% at -97.5% 45.58%, #3C3030 0%, #000 100%);
    background-blend-mode: normal;

    scrollbar-width: thin;
    scrollbar-color: #444254 rgba(0, 0, 0, 0);
    --scroll-thumb-size: 8px;
    -webkit-overflow-scrolling: touch;
}

#left-sidebar::-webkit-scrollbar {
    width: var(--scroll-thumb-size);
    height: var(--scroll-thumb-size);
}

#left-sidebar::-webkit-scrollbar-thumb {
    background: #444254;
    border-radius: 2px;
}

#left-sidebar::-webkit-scrollbar-track {
    background: #1a1a1a;
}

#left-sidebar::-webkit-scrollbar-button {
    display: none;
}

#left-sidebar h2 {
    color: #fff;
    font-family: var(--font-circle);
    font-size: 1.2em;
}

#left-sidebar ul {
    padding: 0;
    margin-bottom: 20px;
}

#left-sidebar li {
    margin-bottom: 8px;
}

#left-sidebar li a {
    display: block;
    color: #eee;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 3px;
}

#left-sidebar li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#main-logo-img {
    max-height: 170px;
    margin-top: 25px;
    margin-left: 29px;
    max-width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 5px;
    transition: transform 0.5s ease-in-out;
}

#main-logo-img:hover {
    transform: scale(1.1);
    cursor: pointer;
}

#server-status-img {
    position: absolute;
    top: 13px;
    left: -20px;
    max-width: 100%;
    width: 14px;
    height: 14px;
    display: block;
}

#online-users-count {
    text-align: center;
    margin: 20px 0 15px 0;
    padding: 5px 0;
    width: 100%;
    box-sizing: border-box;
    color: transparent;
    font-family: var(--font-circle);
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    background-image: linear-gradient(0deg, rgb(255, 102, 0), rgb(255, 211, 51));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
}

#online-status-section {
    background-image: radial-gradient(106.96% 246% at 50.43% 216%, rgba(255, 195, 0, 0.50) 0%, rgba(255, 231, 182, 0) 100%),
                      radial-gradient(412.17% 948% at 50.43% 638%, rgba(128, 132, 165, 0.50) 0%, rgba(27, 28, 38, 0) 100%),
                      radial-gradient(237.61% 242.35% at 124.36% 17.14%, #3A1D00 0%, #482102 100%);
    position: relative;
    margin: -15px 0 0 0;
    left: 15px;
    width: 224.4px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    color: #fff;
    font-family: var(--font-circle);
    font-size: 10px;
    font-weight: 500;
    line-height: 20px;
}

#online-status-section p {
    position: absolute;
    top: 12px;
    left: 29px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

#status-label {
    margin-top: 0px;
    text-align: center;
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    font-style: bold;
    font-weight: 400;
    color: rgb(255, 255, 255);
}

#online-status-section a {
    margin-top: 20px;
    margin-left: -20px;
    
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

#status-label2 {
    position: absolute;
    top: 30px;
    left: 29px;
    text-align: center;
    font-family: 'Circe', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: bold;
    color: rgb(255, 255, 255);
}

#online-status-section::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1.5px;
    border-radius: 0 3px 3px 0;
    background: #fe0;
    box-shadow: 1px 1px 5px 2px rgba(255, 238, 0, 0.5);
}

#main-content-area {
    flex-grow: 1;
    background-color: transparent;
    padding: 20px;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    margin-left: 260px;
    overflow-y: auto;
    height: 100vh;
    box-sizing: border-box;
}

.AppBackground_page-bg__lHacy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background: var(--power-bg);
}

.offline {
    position:absolute;
    left: 100px;
    top: 5px;
    font-size: 14px;
    font-style: bold;
	color: red !important;
}

.offline::before {
    content: "";
    position: absolute;
    top: 23px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 215%;
    height: 3px;
    border-radius: 0 3px 3px 0;
    background: #ff0d00;
    box-shadow: 0 0 4.59px #ff1e1e;
}

.online {
    position:absolute;
    left: 100px;
    top: 5px;
    font-size: 14px;
    font-style: bold;
	color: #00ff1e !important;
}

.online::before {
    content: "";
    position: absolute;
    top: 23px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 215%;
    height: 3px;
    border-radius: 10px;
    background: #00ff1e;
    box-shadow: 0 0 4.59px #41ff1e;
}


#sOnline-visible {
    display: inline;
    font-family: 'Circe Bold', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    color: #47D000;
    background-image: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: initial;
    color: #47D000;

    text-shadow: rgb(71, 208, 0) 0px 0px 5px;
}

.SideMenu_download-btn__CmHD4 {
    display: flex;
    margin: 20px auto 0;
    font-size: var(--font-md);
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    align-items: center;
    min-height: 35px;
    justify-content: center;
}

.Button_yellow__U1aYH {
    margin-bottom: 15px;
    border: none;
    background: radial-gradient(139.5% 418.38% at 100% 157.5%, rgba(210, 0, 120, .5) 0, rgba(210, 0, 120, 0) 100%), #ffd600;
    box-shadow: 0 10px 20px rgba(243,164,29,.1),0 5px 20px rgba(243,164,29,.25),inset 0 -2px 2px rgba(9,34,57,.3),inset 0 2px 2px rgba(255,255,255,.3);
}

.Button_yellow__U1aYH:hover {
    text-decoration: none;
    border: none;
    background: radial-gradient(139.5% 418.38% at 100% 157.5%,rgba(244,60,165,.5) 0,rgba(210,0,120,0) 100%),#f4d63c;
}

.Button_yellow__U1aYH:hover,.Button_yellow__U1aYH:hover .Button_icon__Ma_QL {
    color: var(--text-primary-color)
}

.Button_btn__t76w6 {
    display: inline-flex;
    margin-left: 15px;
    align-items: center;
    justify-content: center;
    height: var(--btn-height, 40px);
    padding: var(--btn-padding, 0 15px);
    border-radius: 25px;
    font-size: 16px;
    color: var(--text-primary-color, #f0f0f0);
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease-in-out;
    min-width: 190px;
    min-height: 45px;
}

.Button_btn__reglog {
    display: inline-flex;
    margin-top: -10px;
    margin-left: 15px;
    align-items: center;
    justify-content: center;
    height: var(--btn-height, 40px);
    padding: var(--btn-padding, 0 15px);
    border-radius: 25px;
    font-size: 16px;
    color: var(--text-primary-color, #f0f0f0);
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease-in-out;
    min-width: 70px;
    min-height: 45px;
}

.Icon_icon__loQ0N {
    margin-right: 5px;
    width: 15px;
    height: 15px;
    fill: #fff !important;
    color: #FFF !important;
}

.Button_green__wNjiO {
    margin-bottom: 15px;
    border: none;
    background: radial-gradient(94.95% 341.82% at 103.54% -12.5%,rgba(67,210,0,.5) 0,rgba(210,0,0,0) 100%),#2ebc67;
    box-shadow: 0 10px 20px rgba(47,158,78,.25),0 5px 10px rgba(50,140,75,.5),inset 0 2px 2px rgba(255,255,255,.2),inset 0 -2px 2px rgba(9,57,17,.25)
}

.Button_green__wNjiO:hover {
    text-decoration: none;
    border: none;
    background: radial-gradient(94.95% 341.82% at 103.54% -12.5%,rgba(87,232,19,.5) 0,rgba(210,0,0,0) 100%),#47da82
}

.Button_green__wNjiO:hover,.Button_green__wNjiO:hover .Button_icon__Ma_QL {
    color: var(--text-primary-color)
}

.Icon_blue {
    margin-left: -10px;
    padding-right: 5px;
    width: 20px;
    height: 20px;
    fill: #fff !important;
    color: #FFF !important;
}

.Button_blue__j58BM {
    margin-bottom: 15px;
    border: none;
    color: var(--white);
    background: radial-gradient(421.99% 144.78% at 100% 157.5%,rgba(210,0,120,.5) 0,rgba(210,0,120,0) 100%),#0083e7;
    box-shadow: inset 0 2px 2px 0 rgba(255,255,255,.3),inset 0 -2px 2px 0 rgba(9,34,57,.3),0 5px 10px 0 rgba(0,131,231,.25),0 10px 20px 0 rgba(0,131,231,.1);
}

.Button_blue__bottom {
    margin-bottom: 15px;
    border: none;
    color: var(--white);
    background: radial-gradient(421.99% 144.78% at 100% 157.5%,rgba(210,0,120,.5) 0,rgba(210,0,120,0) 100%),#0083e7;
    box-shadow: inset 0 2px 2px 0 rgba(255,255,255,.3),inset 0 -2px 2px 0 rgba(9,34,57,.3),0 5px 10px 0 rgba(0,131,231,.25),0 10px 20px 0 rgba(0,131,231,.1);
}

.Button_blue__bottom:hover {
    text-decoration: none;
    border: none;
    color: var(--white);
    background: radial-gradient(421.99% 144.78% at 100% 157.5%,rgba(251,21,151,.5) 0,rgba(210,0,120,0) 100%),#1498f8
}

.Button_blue__j58BM:hover {
    text-decoration: none;
    border: none;
    color: var(--white);
    background: radial-gradient(421.99% 144.78% at 100% 157.5%,rgba(251,21,151,.5) 0,rgba(210,0,120,0) 100%),#1498f8
}

.Icon_icon__loQ0N {
    width: 20px;
    height: 22px;
    color: var(--light);
}

.button-group {
    margin-top: 15px;
    display: flex;
    align-items: center;
}

.button-group a {
    flex: unset;
    width: auto;
}

.menu-item {
    top: 15px;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1.2;
    margin: 5px 0 5px 15px;
    padding: 8px 15px;
    width: 224.4px;
    height: 38px;
    transition: box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, filter 0.2s ease;
    color: #9A8787 !important;
    text-decoration: none;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}

.menu-item:hover {
    background: none !important;
    color: #fff !important;
    filter: brightness(120%);
}

.menu-item:before {
    position: absolute;
    top: -6px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--border-color);
    content: ""
}

.menu-active {
    color: #fff !important;
    filter: none;
    border-radius: 15px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.25);
    background: var(--gradient-box-secondary);
    width: 224.4px;
    height: 38px;
    box-sizing: border-box;
}

.menu-active:hover {
    background: var(--gradient-box-secondary) !important;
    color: #fff !important;
}

.menu-active:before {
    display: none;
}

.menu-icon {
    width: 20px;
    height: 22px;
    margin-top: 4px;
    margin-left: 5px;
    fill: currentColor ;
}

.menu-text {
    margin-left: 8px;
    position: relative;
    top: -7px;
    left: 1px;
}

.SideMenuSocials_discord__eHQAD {
    display: block;
    width: 224px;
    height: 122px;
    box-sizing: border-box;
    margin-left: 13px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 15px;
    transition: all .5s ease;
    background: var(--discord-bg)
}

.SideMenuSocials_discord__eHQAD p {
    font-size: var(--font-md)
}

.SideMenuSocials_discord__eHQAD:hover {
    text-decoration: none;
    transform: scale(1.01)
}

@media(min-width: 1440px) {
    .SideMenuSocials_discord__eHQAD {
        padding:10px
    }

    .SideMenuSocials_discord__eHQAD p {
        font-size: var(--font-sm)
    }
}

@media(max-width: 1024px) {
    .SideMenuSocials_discord__eHQAD {
        padding:1rem
    }

    .SideMenuSocials_discord__eHQAD .SideMenuSocials_dis-img__hTJPS {
        width: 100%!important;
        height: auto!important
    }

    .SideMenuSocials_discord__eHQAD .SideMenuSocials_avatars__afaQn {
        display: none
    }
}

@media(min-width: 1025px) {
    .SideMenuSocials_discord__eHQAD .SideMenuSocials_dis-img__hTJPS {
        width:110px
    }
}

.SideMenuSocials_avatar__Q_Pma {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 2px solid #fff;
    border-radius: 50%;
    margin-top: 10px;
    background-size: cover;
    background-position: 50%
}

.SideMenuSocials_avatar__Q_Pma+.SideMenuSocials_avatar__Q_Pma {
    margin-left: -10px
}

.discord_users {
    color: #C7BBCA;
}

#content {
    position: relative;
    max-width: calc(100vw - 20px);
    min-height: 100%;
    padding: 20px;
    margin: 0 auto;
    background: var(--box-bg);
    border-radius: 20px;
    box-sizing: border-box;
}

#content .entry {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.register-field {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.RegisterForm_label__IwMFK {
    color: #FFF;
    margin-right: 8px;
    font-size: 18px;
    font-weight: bold;
    min-width: 142px;
}

.RegisterForm_input__an_bY {
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
  background: rgba(0, 0, 0, .5);
}

.Input_input-colored__3WVjA {
  border: 1px solid rgba(255, 255, 255, .1);
  background: url("/assets/mudream/images/boxcontent.jpeg") no-repeat 50% / 100% 100%;
  border-radius: 15px;
  color: rgba(255, 255, 255, .5);
  font-weight: 400;
  font-size: var(--font-md);
}

.RegisterForm_input__an_bY,
.Input_input__5NxQv {
    width: 264px;
    height: 45px;
    box-sizing: border-box;
    font-size: var(--font-sm);
    padding: var(--pd-1) var(--pd-5);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-weight: 700;
}

.RegisterForm_title__kFrFl {
    font-size: 2.2rem;
    line-height: 3.4rem;
    text-align: center;
    font-weight: 700;
    margin-bottom: 10px;
    color: #C7BBCA;
}

.ModalComponent_modal__nrsaJ {
    position: relative !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5) !important;
    background: var(--box-accent-bg) !important;
    border-radius: 20px !important;
    padding: 12px !important;
    min-width: 400px !important;
    max-width: 95% !important;
    margin: var(--mg-2) !important;
    z-index: var(--z-index-modal) !important;
}

.ModalComponent_close__j22FY {
    position: absolute !important;
    width: 30px !important;
    height: 30px !important;
    color: var(--white, #fff) !important;
    right: -25px !important;
    top: -25px !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.Icon_icon__loQ0N {
    width: 20px;
    height: 22px;
    fill: var(--light, #ccc);
}

.custom-checkbox {
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  gap: 10px;
  position: relative;
}

.Checkbox_label__uNY3B {
    font-weight: 400;
    font-size: var(--font-md);
    line-height: var(--font-md-lh);
    color: var(--text-primary-color);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: pre-wrap;
    margin-left: 10px;
}

.custom-checkbox input[type="checkbox"] {
  display: none;
}

.Checkbox_box__UJMSq {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  position: relative;
}

.Checkbox_box__UJMSq:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--main-color);
  border-radius: 2px;
  transition: all 0.2s ease;
  opacity: 0;
  content: "";
}

.custom-checkbox input[type="checkbox"]:checked + .Checkbox_box__UJMSq:after {
  opacity: 1;
}

.Button_blue__j58BM.Button_disabled__5PW0a, .Button_blue__j58BM:disabled {
    border: none;
    background: linear-gradient(0deg, #40495A, #40495A), #7000ff;
    box-shadow: inset 0 -2px 2px rgba(9, 34, 57, .3), inset 0 2px 2px rgba(255, 255, 255, .3);
}
.Button_btn__t76w6.Button_disabled__5PW0a, .Button_btn__t76w6:disabled {
    cursor: not-allowed;
    color: #6f6f6f;
    border: 1px solid #6f6f6f;
}
.RegisterForm_register-btn__SP_3J {
    margin-top: 10px;
    border-radius: 10px;
    padding: 0 70px;
}

.RegisterForm_label__IwMFK b {
  margin: 0;
}

.FormItem_label__4_u1Z > b {
  display: inline-block;
  margin-left: 5px !important;
  font-size: var(--font-sm);
  font-family: -apple-system, Arial, sans-serif;
  color: red;
}

.Button_red-orange__logout {
    border: none;
    background: radial-gradient(139.5% 418.38% at 100% 157.5%, rgba(255, 102, 0, .5) 0%, rgba(255, 63, 63, 0) 100%), #FF6600;
    box-shadow: 0 10px 20px rgba(255, 99, 71, .25), 0 5px 20px rgba(255, 99, 71, .5), inset 0 -2px 2px rgba(57, 9, 9, .3), inset 0 2px 2px rgba(255, 255, 255, .3);
    color: var(--text-primary-color);
    text-transform: uppercase;
    font-weight: 700;
}

.Button_red-orange__logout:hover {
    text-decoration: none;
    border: none;
    background: radial-gradient(139.5% 418.38% at 100% 157.5%, rgba(255, 120, 20, .6) 0%, rgba(255, 80, 80, 0) 100%), #FF7F20;
    filter: brightness(115%);
}

.Button_red-orange__logout:hover .Icon_icon__loQ0N {
    color: var(--text-primary-color) !important;
    fill: var(--text-primary-color) !important;
}

.SideMenu_logout-btn__custom {
    display: flex;
    margin: -10px auto 15px;
}


.box-style2 {
    background: var(--box-bg);
    width: 23vh;
    border-radius: 15px;
    padding: 10px;
    margin-left: 12.5px;
    margin-top: 15px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.box-style2 .title2 {
    background: radial-gradient(106.96% 246% at 50.43% 216%, rgb(102 12 12) 0%, rgb(252 45 45 / 0%) 100%), radial-gradient(412.17% 948% at 50.43% 638%, rgb(165 128 129 / 50%) 0%, rgb(38 27 27 / 0%) 100%), radial-gradient(237.61% 242.35% at 124.36% 17.14%, #2b0000 0%, #bf0000 100%);
    border-radius: 10px;
    padding: 8px 15px;
    margin-bottom: 15px;
    text-align: center;
}

.box-style2 .title2 h2 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 1.5em;
    font-weight: 700;
    margin: 0;
    text-shadow: var(--main-color-text-shadow);
    border-bottom: none !important;
}

.box-style2 .entry {
    padding: 10px;
}

.box-style2 .entry ul.style4 {
    list-style: none;
    padding: 0;
    margin: 0;
}

.box-style2 .entry ul.style4 li.first {
    text-align: center;
    color: var(--text-primary-color);
    font-family: var(--font-montserrat);
    font-size: 1.1em;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.box-style2 .entry ul.style4 li.first span {
    color: var(--main-color);
    font-weight: 700;
}

.box-style2 .entry ul.style4 li.w-coins,
.box-style2 .entry ul.style4 li.zz-coins {
    color: var(--text-secondary-color);
    font-family: var(--font-circle);
    font-size: 0.95em;
    margin-bottom: 5px;
}

.box-style2 .entry ul.style4 li.zz-coins {
    margin-bottom: 10px;
}

.box-style2 .entry ul.style4 li.w-coins span,
.box-style2 .entry ul.style4 li.zz-coins span {
    float: right;
    color: var(--main-color);
    font-weight: 700;
}

.box-style2 .entry ul.style4 li a {
    color: var(--secondary-color);
    text-decoration: none;
    font-family: var(--font-circle);
    font-size: 1em;
    display: block;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
    transition: color 0.2s ease, border-bottom 0.2s ease;
}

.box-style2 .entry ul.style4 li:last-of-type a {
    border-bottom: none;
}

.box-style2 .entry ul.style4 li a:hover {
    color: var(--main-color);
    border-bottom-color: rgba(255,238,0,0.3);
}

#box1 {
    background: var(--box-bg);
    border-radius: 20px;
    padding: 20px;
    margin: 20px auto;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    max-width: 700px;
}

#box1 .title1 {
    background: radial-gradient(106.96% 246% at 50.43% 216%,rgba(255,195,0,0.50) 0%,rgba(255,231,182,0.00) 100%),radial-gradient(412.17% 948% at 50.43% 638%,rgba(128,132,165,0.50) 0%,rgba(27,28,38,0.00) 100%),radial-gradient(237.61% 242.35% at 124.36% 17.14%,#3A1D00 0%,#482102 100%);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#box1 .title1 h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: var(--main-color-text-shadow);
}

.box-style1 {
    background: var(--gradient-box-secondary);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.box-style1 .title {
    color: var(--text-primary-color);
    font-family: var(--font-montserrat);
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.box-style1 .entry {
    padding: 10px;
}

.box-style1 .entry .form table {
    width: 100%;
    border-collapse: collapse;
}

.box-style1 .entry .form table tr td {
    padding: 10px 0;
    color: var(--text-secondary-color);
    font-family: var(--font-circle);
    font-size: 0.95em;
    vertical-align: middle;
}

.box-style1 .entry .form table tr td:first-child {
    color: var(--text-primary-color);
    font-weight: 600;
    text-align: right;
    padding-right: 15px;
}

.box-style1 .entry .form input[type="password"],
.box-style1 .entry .form input[type="email"] {
    width: calc(100% - 20px);
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--white);
    font-family: var(--font-circle);
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.box-style1 .entry .form input[type="password"]:focus,
.box-style1 .entry .form input[type="email"]:focus {
    border-color: var(--main-color);
    background: rgba(0, 0, 0, 0.6);
    outline: none;
}

.button-style {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-height, 40px);
    padding: var(--btn-padding, 0 25px);
    border-radius: 25px;
    font-size: 1em;
    color: var(--text-primary-color);
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease-in-out;
    border: none;
    
    background: var(--gradient-btn-primary);
    box-shadow: var(--box-shadow-btn-primary);
    min-width: 120px;
}

.button-style:hover {
    text-decoration: none;
    background: var(--gradient-btn-primary-hover);
    filter: brightness(1.1);
}

.e_note {
    background-color: rgba(255, 63, 63, 0.2);
    color: var(--red);
    border: 1px solid var(--red);
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-family: var(--font-circle);
    font-size: 0.9em;
    text-align: center;
}

.s_note {
    background-color: rgba(71, 208, 0, 0.2);
    color: var(--green-acent);
    border: 1px solid var(--green-acent);
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-family: var(--font-circle);
    font-size: 0.9em;
    text-align: center;
}

.box-style1 .entry .form table tr td:last-child {
    text-align: left;
}

.box-style1 .entry .form table tr td:not(:first-child) {
    line-height: 1.4;
}

#content_center {
    background: var(--box-bg);
    border-radius: 20px;
    padding: 20px;
    margin: 20px auto;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    max-width: 900px;
    box-sizing: border-box;
}

.box-style4 {
    background: var(--gradient-box-secondary);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

.box-style4 h2.title {
    color: var(--text-primary-color);
    font-family: var(--font-montserrat);
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.box-style4 .entry {
    padding: 10px;
}

#ucp_info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

#ucp_info .half {
    flex: 1;
    min-width: 280px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 15px;
}

#ucp_info .half table {
    width: 100%;
    border-collapse: collapse;
}

#ucp_info .half table tr td {
    padding: 8px 5px;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
    color: var(--text-secondary-color);
    font-family: var(--font-circle);
    font-size: 0.9em;
    vertical-align: middle;
}

#ucp_info .half table tr:last-child td {
    border-bottom: none;
}

#ucp_info .half table tr td:first-child {
    text-align: center;
    padding-right: 10px;
    padding-left: 0;
}

#ucp_info .half table tr td img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    filter: brightness(1.2);
}

#ucp_info .half table tr td:nth-child(2) {
    color: var(--text-primary-color);
    font-weight: 600;
}

#ucp_info .half table tr td:last-child {
    color: var(--main-color);
    font-weight: 700;
}

#ucp_info .half table tr td a {
    color: var(--secondary-color);
    text-decoration: underline;
    transition: color 0.2s ease;
}

#ucp_info .half table tr td a:hover {
    color: var(--main-color);
}

#character-info {
    width: 100%;
    box-sizing: border-box;
}

#character-info table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 15px;
}

#character-info table tr td {
    width: 50%;
    vertical-align: top;
    padding: 0;
}

#character-info table tr td div {
    background: var(--item-btn-bg);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 15px;
    min-height: 100px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#character-info table tr td div:hover {
    background: var(--item-btn-bg-hover);
    border: var(--item-btn-border-hover);
    box-shadow: 0 5px 15px rgba(243,29,29,0.25);
    transform: translateY(-2px);
}

#character-info table ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#character-info table li {
    padding: 0;
    margin: 0;
}

#character-info table li a {
    text-decoration: none;
    display: block;
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 5px;
}

#character-info table li a p {
    margin: 0;
    padding: 0;
    color: inherit;
}

#character-info table li a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

#character-info table li:last-child {
    color: var(--text-secondary-color);
    font-family: var(--font-circle);
    font-size: 0.85em;
    line-height: 1.3;
    flex-grow: 1;
    padding-top: 5px;
}

#ucp_info::after {
    content: "";
    display: table;
    clear: both;
}

#market_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#market_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: var(--main-color-text-shadow);
}

.box-style1 {
    background: var(--gradient-box-secondary);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}   

.box-style1 h2.title {
    color: var(--text-primary-color);
    font-family: var(--font-montserrat);
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-style1 h2.title div {
    display: flex;
    gap: 10px;
}

.box-style1 .entry {
    padding: 10px;
}

.custom_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    padding: 0 15px;
    border-radius: 20px;
    font-size: 0.9em;
    color: var(--text-primary-color);
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease-in-out;
    border: none;
    background: var(--gradient-btn-primary);
    box-shadow: var(--box-shadow-btn-primary);
    text-decoration: none;
    white-space: nowrap;
}

.custom_button:hover {
    background: var(--gradient-btn-primary-hover);
    filter: brightness(1.1);
    text-decoration: none;
}

.box-style1 .entry > div:first-of-type {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.ranking-table tbody tr:hover {
    background-color: #422323 !important; /* un violeta claro translúcido */
}

.ranking-table td:first-child {
    position: relative;
    padding-left: 10px; /* Dejalo cómodo para que no se superponga la barra */
}

/* Ahora el pseudo-elemento con la barra */
.ranking-table td:first-child:before {
    position: absolute;
    left: 0;
    top: calc(50% - 15px);
    width: 2px;
    height: 30px;
    background: linear-gradient(180deg, #BBA2D3, #6D4694);
    transition: background .2s ease;
    -webkit-clip-path: polygon(0 0, 5px 10px, 5px 20px, 0 100%);
    clip-path: polygon(0 0, 5px 10px, 5px 20px, 0 100%);
    content: "";
}

.ranking-table thead {
    border-top: none !important;
    background: none !important;
}

.ranking-table thead th {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    font-weight: 700; /* Para que el texto siga destacándose */
    color: inherit; /* Para que tome el color del texto normal */
}

.ranking-table {
    width: 100%;
    border-collapse: collapse; /* Para que las líneas se vean como una sola */
}

.ranking-table thead {
    border-bottom: 1px solid var(--border-color);
}

.ranking-table tr {
    padding: var(--pd-3) 0;
}

.ranking-table tr + tr {
    border-top: 1px solid var(--border-color);
}

.ranking-table th {
    text-align: left;
    padding: var(--pd-4) var(--pd-3);
    font-size: var(--font-sm);
    line-height: var(--font-sm-lh);
}

.ranking-table th.center {
    text-align: center;
}

.ranking-table td {
    padding: var(--pd-3);
    border-left: 1px solid var(--border-color);
    font-size: var(--font-md);
    vertical-align: middle;
    line-height: var(--font-md-lh);
}

.ranking-table td.center {
    text-align: center;
    justify-content: center;
}

.ranking-table td.bold {
    font-weight: 700;
}

.ranking-table td:first-child {
    border-left: none;
}


.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a, .pagination strong {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    border-radius: 5px;
    text-decoration: none;
    color: var(--secondary-color);
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.pagination strong {
    background-color: var(--main-color);
    color: #333;
    border-color: var(--main-color);
    font-weight: 700;
    box-shadow: 0 0 5px var(--main-color-transparent);
}

.pagination a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--main-color);
}

#item_filter_overlay {
    background: var(--box-accent-bg);
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    min-width: 300px;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 20px;
    margin-bottom: 20px;
    display: none;
}

#item_filter .modal-header2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 15px;
    cursor: default;
}

#item_filter .modal-header2 h2 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 1.5em;
    font-weight: 700;
    text-shadow: var(--main-color-text-shadow);
    margin: 0;
}

#item_filter .modal-header2 .close {
    width: 25px;
    height: 25px;
    background: none;
    border: none;
    position: relative;
    cursor: pointer;
    right: 0;
    top: 0;
}

#item_filter .modal-header2 .close::before,
#item_filter .modal-header2 .close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 20px;
    background-color: var(--white);
    transition: transform 0.2s ease;
}

#item_filter .modal-header2 .close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

#item_filter .modal-header2 .close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#item_filter .modal-header2 .close:hover::before {
    transform: translate(-50%, -50%) rotate(225deg);
}

#item_filter .modal-header2 .close:hover::after {
    transform: translate(-50%, -50%) rotate(135deg);
}


.item_filter_content {
    color: var(--text-primary-color);
    font-family: var(--font-circle);
}

.item_filter_content label {
    display: block;
    margin-bottom: 5px;
    color: var(--main-color);
    font-weight: 700;
    font-size: 1em !important;
    margin: 0 !important;
}

.item_filter_content div[style*="border-bottom"] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 10px 0 !important;
    width: 100% !important;
}

.item_filter_content input[type="text"] {
    width: calc(100% - 70px);
    height: 35px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--white);
    font-family: var(--font-circle);
    font-size: 0.9em;
    box-sizing: border-box;
    margin-right: 10px;
}

.item_filter_content input[type="text"]:focus {
    border-color: var(--main-color);
    background: rgba(0, 0, 0, 0.6);
    outline: none;
}

.item_filter_content button.custom_button {
    height: 35px;
    min-width: auto;
    padding: 0 15px;
    font-size: 0.9em;
}

.item_filter_content input[type="checkbox"],
.item_filter_content input[type="radio"] {
    margin-right: 8px;
    vertical-align: middle;
}

.item_filter_content br {
    display: none;
}

.item_filter_content .checkbox-group,
.item_filter_content .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.item_filter_content .checkbox-item,
.item_filter_content .radio-item {
    display: flex;
    align-items: center;
    color: var(--text-secondary-color);
    font-size: 0.9em;
}

.item_filter_content .checkbox-item input[type="checkbox"],
.item_filter_content .radio-item input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    position: relative;
    outline: none;
    transition: all 0.2s ease;
}

.item_filter_content .checkbox-item input[type="checkbox"]:checked,
.item_filter_content .radio-item input[type="radio"]:checked {
    background: var(--main-color);
    border-color: var(--main-color);
}

.item_filter_content .checkbox-item input[type="checkbox"]:checked::after {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #333;
    font-size: 12px;
}

.item_filter_content .radio-item input[type="radio"] {
    border-radius: 50%;
}

.item_filter_content .radio-item input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333;
}

.item_filter_content input[type="checkbox"] + label,
.item_filter_content input[type="radio"] + label {
    margin-left: 5px;
}

.item_filter_content div[style*="text-align:center"] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

#web_warehouse_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#web_warehouse_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: var(--main-color-text-shadow);
}

.box-style1 {
    background: var(--gradient-box-secondary);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
}   

.alert-box {
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    font-family: var(--font-circle);
    font-size: 0.95em;
    text-align: center;
}

.i_note {
    background-color: rgba(0, 123, 255, 0.15);
    color: var(--blue);
    border: 1px solid var(--blue);
}

.e_note {
    background-color: rgba(255, 63, 63, 0.2);
    color: var(--red);
    border: 1px solid var(--red);
}

.w_note {
    background-color: rgba(255, 237, 0, 0.2);
    color: var(--main-color);
    border: 1px solid var(--main-color);
}

.action-button {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.action-button.move-to-warehouse {
    background: radial-gradient(94.95% 341.82% at 103.54% -12.5%,rgba(67,210,0,.5) 0,rgba(210,0,0,0) 100%),#2ebc67;
    color: var(--text-primary-color);
    box-shadow: 0 5px 10px rgba(47,158,78,.25);
    border: none;
}

.action-button.move-to-warehouse:hover {
    background: radial-gradient(94.95% 341.82% at 103.54% -12.5%,rgba(87,232,19,.5) 0,rgba(210,0,0,0) 100%),#47da82;
    filter: brightness(1.1);
}

#files_main_title_container {
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
}

#files_main_title_container h1 {
    color: #FFF;
    font-family: var(--font-circle);
    font-size: 40px;
    font-weight: 700;
    margin: 0;
}

#files_main_title_container h1 b {
    color: #CD7f32;
}

.downloads-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 20px;
    background: transparent;
    box-sizing: border-box;
}

.box-style-download {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 15px;
    width: 220px;
    height: 250px;
    min-height: 250px;
    border-radius: 10px;
    border: 1px solid rgba(59,59,59,.47);
    background: #252525;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    text-align: center;
    position: relative;
}

.box-style-download .entry {
    flex-grow: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    position: relative;
}

.download-image-container {
    margin-bottom: 15px;
    margin-top: 15px;
}

.download-image-container {
    --size: 90px;
    margin-top: 10%;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 1px solid rgba(59,59,59,.37);
    background: #1f1f1f
}

.download-image-container svg {
    max-width: 100px;
    transform: translateY(10px); /* Desplaza el SVG hacia abajo */
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.1));
}

.download-text {
    color: #FFF;
    font-family: var(--font-circle);
    font-size: 18px;
}

.title-button {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 50px;
    width: 178px;
    height: 45px;
    padding: 0 10px;
    border: none;
    color: var(--white);
    background: radial-gradient(421.99% 144.78% at 100% 157.5%, rgba(210,0,120,.5) 0, rgba(210,0,120,0) 100%), #0083e7;
    box-shadow: 
        inset 0 2px 2px 0 rgba(255,255,255,.3),
        inset 0 -2px 2px 0 rgba(9,34,57,.3),
        0 5px 10px 0 rgba(0,131,231,.25),
        0 10px 20px 0 rgba(0,131,231,.1);
    border-radius: 10px;
    text-decoration: none;
}

.title-button:hover {
    background: radial-gradient(421.99% 144.78% at 100% 157.5%, rgba(251,21,151,.5) 0, rgba(210,0,120,0) 100%), #1498f8;
    color: var(--white);
    text-decoration: none;
}

.menu-icon-download {
    width: 20px;
    height: 22px;
    fill: currentColor;
    flex-shrink: 0;
}

.title-download {
    margin: 0;
    color: #FFF;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    height: 100%;
    text-align: center;
}

.download-info {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    padding: 10px;
    color: #EEE;
    font-size: 0.85em;
    margin-top: 10px;
    box-sizing: border-box;
    text-align: left;
}

.download-info p {
    margin: 0 0 5px 0;
}

.download-info p:last-child {
    margin-bottom: 0;
}

.info-toggle-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 10;
}

.info-toggle-button svg {
    width: 20px;
    height: 20px;
    color: var(--light);
    transition: transform 0.2s ease, color 0.2s ease;
}

.info-toggle-button:hover svg {
    transform: scale(1.1);
    color: #FFD700;
}

.i_note {
    background-color: rgba(0, 123, 255, 0.15);
    color: var(--blue);
    border: 1px solid var(--blue);
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 15px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* FAQ BLOCK */

.faq-block {
    font-family: var(--font-circle);
}

.faq-block {
    margin-top: 50px;
    margin-bottom: 100px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.faq-title {
    text-align: center;
    font-weight: bold;
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: #fff;
}

.faq-item {
    background: var(--box-bg, #1e1e1e);
    padding: 15px 20px;
    transition: background 0.3s ease;
    border-radius: 0; /* reset */
    margin-bottom: 5px;
}

.faq-item:first-child {
    border-radius: 8px 8px 0 0;
}

.faq-item:last-child {
    border-radius: 0 0 8px 8px;
    border-bottom: none;
}

.faq-item-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 1.1rem;
}

.faq-item-title:hover {
    color: var(--light, #ccc);
}

.faq-arrow-icon {
    fill: white;
    transition: transform 0.3s ease;
}

.faq-item-content {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.faq-item-content.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* .faq-item-content.open {
    grid-template-rows: 1fr;
} */

.faq-item-wrapper {
    padding-top: 10px;
    color: #ddd;
    font-size: 0.95rem;
    line-height: 1.5;
}


#buy_gm_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#buy_gm_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: var(--main-color-text-shadow);
}

.box-style1 {
    background: var(--gradient-box-secondary);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

.box-style1 .title {
    color: var(--text-primary-color);
    font-family: var(--font-montserrat);
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.form table {
    width: 100%;
    border-collapse: collapse;
}

.form table tr td {
    padding: 10px 0;
    color: var(--text-secondary-color);
    font-family: var(--font-circle);
    font-size: 0.95em;
    vertical-align: middle;
}

.form table tr td:first-child {
    width: 150px;
    text-align: right;
    padding-right: 15px;
    color: var(--text-primary-color);
    font-weight: 600;
}

.custom-select {
    width: calc(100% - 20px);
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--white);
    font-family: var(--font-circle);
    font-size: 1em;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2C197.35L146.2%2C56.65L5.4%2C197.35H287z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.custom-select:focus {
    border-color: var(--main-color);
    background: rgba(0, 0, 0, 0.6);
    outline: none;
}

.button-style {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-height, 40px);
    padding: var(--btn-padding, 0 25px);
    border-radius: 25px;
    font-size: 1em;
    color: var(--text-primary-color);
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease-in-out;
    border: none;
    background: var(--gradient-btn-primary);
    box-shadow: var(--box-shadow-btn-primary);
    min-width: 120px;
}

.button-style:hover {
    text-decoration: none;
    background: var(--gradient-btn-primary-hover);
    filter: brightness(1.1);
}

#buy_level_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#buy_level_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: var(--main-color-text-shadow);
}

.box-style1 {
    background: var(--gradient-box-secondary);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

.form table tr td {
    padding: 10px 0;
    color: var(--text-secondary-color);
    font-family: var(--font-circle);
    font-size: 0.95em;
    vertical-align: middle;
}

.form table tr td:first-child {
    width: 150px;
    text-align: right;
    padding-right: 15px;
    color: var(--text-primary-color);
    font-weight: 600;
}

#buy_stats_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#buy_stats_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: var(--main-color-text-shadow);
}

.box-style1 {
    background: var(--gradient-box-secondary);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

.form input[type="text"].text {
    width: calc(100% - 20px);
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--white);
    font-family: var(--font-circle);
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.form input[type="text"].text:focus {
    border-color: var(--main-color);
    background: rgba(0, 0, 0, 0.6);
    outline: none;
}

.form input[type="text"].text[readonly] {
    cursor: default;
    background-color: rgba(0, 0, 0, 0.2);
}

.i_note span {
    font-weight: bold;
    color: var(--main-color);
    margin-right: 5px;
}

#buy_vip_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#buy_vip_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: var(--main-color-text-shadow);
}

table.add_to_card {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
}

table.add_to_card thead {
    background: rgba(0, 0, 0, 0.4);
}

table.add_to_card th {
    padding: 12px 15px;
    text-align: left;
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 1.1em;
    font-weight: 700;
    text-shadow: var(--main-color-text-shadow);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

table.add_to_card tbody tr td {
    padding: 10px 15px;
    color: var(--text-secondary-color);
    font-family: var(--font-circle);
    font-size: 0.95em;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

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

table.add_to_card tbody tr td:first-child {
    font-weight: 600;
    color: var(--text-primary-color);
    width: 250px;
}

table.add_to_card tbody tr td:last-child {
    color: var(--white);
    font-weight: 400;
}

table.add_to_card tbody tr td span {
    font-weight: 700;
    color: var(--main-color);
}

table.add_to_card tbody tr th[colspan="2"] {
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    color: var(--secondary-color);
    font-size: 1em;
    padding: 8px 15px;
}

table.add_to_card tbody tr td[colspan="2"] {
    text-align: center;
    font-style: italic;
    color: var(--light);
    padding: 8px 15px;
}

table.add_to_card tbody tr td button.custom_button {
    margin-top: 10px;
    width: auto;
    min-width: 150px;
    padding: 0 30px;
}

#buy_vip_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#buy_vip_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: var(--main-color-text-shadow);
}

table.add_to_card {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
}

table.add_to_card thead {
    background: rgba(0, 0, 0, 0.4);
}

table.add_to_card th {
    padding: 12px 15px;
    text-align: left;
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 1.1em;
    font-weight: 700;
    text-shadow: var(--main-color-text-shadow);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

table.add_to_card tbody tr td {
    padding: 10px 15px;
    color: var(--text-secondary-color);
    font-family: var(--font-circle);
    font-size: 0.95em;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

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

table.add_to_card tbody tr td:first-child {
    font-weight: 600;
    color: var(--text-primary-color);
    width: 250px;
}

table.add_to_card tbody tr td span {
    font-weight: 700;
    color: var(--main-color);
}

table.add_to_card tbody tr th[colspan="2"] {
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    color: var(--secondary-color);
    font-size: 1em;
    padding: 8px 15px;
}

table.add_to_card tbody tr td[colspan="2"] {
    text-align: center;
    font-style: italic;
    color: var(--light);
    padding: 8px 15px;
}

table.add_to_card tbody tr td button.custom_button {
    margin-top: 10px;
    width: auto;
    min-width: 150px;
    padding: 0 30px;
}

#buy_vip_packages_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#buy_vip_packages_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: var(--main-color-text-shadow);
}

ul.plans {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

li.plan {
    background: var(--subscription-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    width: 280px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

li.plan:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 0, 0, 0.4);
    border-color: rgba(255, 0, 0, 0.5);
}

li.plan.highlight {
}

span.price {
    display: block;
    font-family: var(--font-montserrat);
    font-size: 2.5em;
    font-weight: 800;
    padding: 10px 0;
    margin-bottom: 15px;
    border-radius: 10px;
    color: var(--white);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

span.price.price-green {
    background: var(--green-bright);
    box-shadow: 0 0 10px rgba(0, 215, 34, 0.5);
}

span.price.price-red {
    background: var(--red);
    box-shadow: 0 0 10px rgba(255, 63, 63, 0.5);
}

div.details {
    flex-grow: 1;
    margin-bottom: 20px;
}

h1.plan-title {
    font-family: var(--font-montserrat);
    font-size: 1.8em;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 10px;
    text-shadow: var(--main-color-text-shadow);
}

p.plan-description {
    font-family: var(--font-circle);
    font-size: 1.1em;
    color: var(--text-secondary-color);
    line-height: 1.4;
}

a.select {
    display: inline-block;
    width: 80%;
    padding: 12px 20px;
    border-radius: 25px;
    background: var(--gradient-btn-primary);
    color: var(--text-primary-color);
    font-family: var(--font-montserrat);
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: var(--box-shadow-btn-primary);
    transition: all 0.2s ease-in-out;
    margin-top: auto;
}

a.select:hover {
    background: var(--gradient-btn-primary-hover);
    filter: brightness(1.1);
    text-decoration: none;
    transform: scale(1.02);
}

#shop_cart_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#shop_cart_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: var(--main-color-text-shadow);
}

table.add_to_card {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
}

table.add_to_card thead {
    background: rgba(0, 0, 0, 0.4);
}

table.add_to_card th {
    padding: 12px 15px;
    text-align: left;
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 1.1em;
    font-weight: 700;
    text-shadow: var(--main-color-text-shadow);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

table.add_to_card tbody tr {
    transition: background-color 0.2s ease;
}

table.add_to_card tbody tr.even {
    background-color: rgba(0, 0, 0, 0.1);
}

table.add_to_card tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

table.add_to_card tbody tr td {
    padding: 10px 15px;
    color: var(--text-secondary-color);
    font-family: var(--font-circle);
    font-size: 0.95em;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

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

table.add_to_card tbody tr td:first-child {
    font-weight: 600;
    color: var(--text-primary-color);
    width: 40%;
}

table.add_to_card tbody tr td span[id^="card_item_"] a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

table.add_to_card tbody tr td span[id^="card_item_"] a:hover {
    color: var(--main-color);
    text-decoration: underline;
}

table.add_to_card tbody tr td span[id^="price_"] {
    font-weight: 700;
    color: var(--main-color);
    margin-right: 5px;
}

table.add_to_card input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    position: relative;
    outline: none;
    transition: all 0.2s ease;
    vertical-align: middle;
}

table.add_to_card input[type="checkbox"]:checked {
    background: var(--main-color);
    border-color: var(--main-color);
}

table.add_to_card input[type="checkbox"]:checked::after {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #333;
    font-size: 12px;
}

table.add_to_card tbody tr td a[id^="remove_item_"] {
    color: var(--red);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

table.add_to_card tbody tr td a[id^="remove_item_"]:hover {
    color: var(--dark-red);
    text-decoration: underline;
}

.cart-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 20px;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 10px 10px;
}

.cart-summary .total-price {
    font-family: var(--font-montserrat);
    font-size: 1.1em;
    font-weight: 700;
    color: var(--text-primary-color);
}

.cart-summary .total-price span {
    color: var(--red);
    margin-left: 5px;
    font-weight: 800;
}

.cart-summary button.custom_button {
    height: 40px;
    padding: 0 25px;
    min-width: 150px;
}

.i_note {
    background-color: rgba(0, 123, 255, 0.15);
    color: var(--blue);
    border: 1px solid var(--blue);
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
}

#change_class_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#change_class_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: var(--main-color-text-shadow);
}

.box-style1 {
    background: var(--gradient-box-secondary);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

#class_change_price {
    color: var(--main-color);
    font-family: var(--font-circle);
    font-size: 1em;
    font-weight: 700;
    padding: 5px 0;
}

.button-style[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    filter: grayscale(1);
}

#change_name_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#change_name_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: var(--main-color-text-shadow);
}

.box-style1 {
    background: var(--gradient-box-secondary);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

.ranking-table th,
.ranking-table td {
    text-align: center;
    padding: 10px 15px;
    vertical-align: middle;
}

.ranking-table th {
}

.ranking-table td.end {
}

.shop_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 8px 15px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#shop_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 1.8em;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 0 5px rgba(255, 238, 0, 0.6);
}

.discount_notice {
    background: linear-gradient(180deg, #FF6600, #FFD333);
    border-radius: 15px;
    padding: 10px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(255, 102, 0, 0.3);
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.discount_notice .ribbon-discount-green {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 80px;
    height: 80px;
    overflow: hidden;
    z-index: 10;
}

.discount_notice .ribbon-green {
    font-family: var(--font-montserrat);
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    line-height: 18px;
    transform: rotate(-45deg);
    position: absolute;
    display: block;
    width: 120px;
    padding: 5px 0;
    background-color: var(--green-bright);
    box-shadow: 0 5px 10px rgba(29, 150, 56, 0.5);
    top: 20px;
    left: -30px;
}

.discount_notice .content {
    flex-grow: 1;
    color: #000;
    font-family: var(--font-circle);
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    padding-left: 80px;
}

.box-style1 {
    background: var(--gradient-box-secondary);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

.box-style1 h2.title {
    color: var(--text-primary-color);
    font-family: var(--font-montserrat);
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-style1 .entry {
    padding: 10px;
}

#shop_categories_container {
    padding: 10px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

#shop_categories_container a {
    display: inline-block;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: var(--secondary-color);
    text-decoration: none;
    font-family: var(--font-circle);
    font-size: 0.9em;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

#shop_categories_container a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--main-color);
    border-color: var(--main-color);
}


.shop-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    padding-top: 15px;
    justify-content: center;
}

table.each_item {
    width: 100%;
    border-collapse: separate;
    background: var(--item-bg);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
}

table.each_item td {
    padding: 0;
}


table.each_item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 238, 0, 0.4);
}

table.each_item .item_name {
    background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.2));
    padding: 8px 5px;
    text-align: center;
    height: 40px;
    width: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

table.each_item .item_name .items {
    width: 100%;
}

table.each_item .item_name .items a {
    font-family: var(--font-montserrat);
    font-size: 0.95em;
    font-weight: 700;
    color: var(--secondary-color);
    text-decoration: none;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 0 5px;
    height: auto;
}

table.each_item .item_name .items a:hover {
    color: var(--main-color);
}

table.each_item .item_bg {
    background: #171d29;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    flex-grow: 1;
}

table.each_item .item_image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

table.each_item .item_image img {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
    transition: transform 0.2s ease;
}

table.each_item .item_image img:hover {
    transform: scale(1.1);
}

table.each_item .item_footer {
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.2));
    padding: 5px;
    height: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.e_note {
    background-color: rgba(255, 63, 63, 0.2);
    color: var(--red);
    border: 1px solid var(--red);
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-family: var(--font-circle);
    font-size: 0.9em;
    text-align: center;
}

.w_note {
    background-color: rgba(255, 237, 0, 0.2);
    color: var(--main-color);
    border: 1px solid var(--main-color);
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 20px;
    font-family: var(--font-circle);
    font-size: 1em;
    text-align: center;
}

.pagination_container {
    padding: 10px;
    text-align: center;
    margin-top: 20px;
}

.pagination_container table {
    width: 100%;
    border-collapse: collapse;
}

.pagination_container td {
    padding: 0;
}

.pagination a, .pagination strong {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    border-radius: 5px;
    text-decoration: none;
    color: var(--secondary-color);
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.pagination strong {
    background-color: var(--main-color);
    color: #333;
    border-color: var(--main-color);
    font-weight: 700;
    box-shadow: 0 0 5px var(--main-color-transparent);
}

.pagination a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--main-color);
}

#about_server_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#about_server_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 0 5px rgba(255, 238, 0, 0.6);
}

.server-stats-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 20px;
}

.about-server-info-text {
    color: var(--text-secondary-color);
    font-family: var(--font-circle);
    font-size: 1em;
    line-height: 1.6;
    text-align: justify;
    padding-top: 20px;
}

#about_server_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#about_server_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 0 5px rgba(255, 238, 0, 0.6);
}

.server-stats-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 20px;
}

.about-server-info-text {
    color: var(--text-secondary-color);
    font-family: var(--font-circle);
    font-size: 1em;
    line-height: 1.6;
    text-align: justify;
    padding-top: 20px;
}

#about_server_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#about_server_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 0 5px rgba(255, 238, 0, 0.6);
}

.box-style1 {
    background: var(--gradient-box-secondary);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

.box-style1 h2.title {
    color: var(--text-primary-color);
    font-family: var(--font-montserrat);
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-style1 .entry {
    padding: 10px;
}

.server-stats-buttons-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 20px;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: var(--table-background-color);
    border-radius: 10px;
    overflow: hidden;
}

.ranking-table thead {
    background: rgba(0, 0, 0, 0.4);
}

.ranking-table th,
.ranking-table td {
    padding: 12px 15px;
    text-align: left;
    color: var(--text-primary-color);
    font-family: var(--font-circle);
    font-size: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    vertical-align: middle;
}

.ranking-table thead tr.main-tr th {
    font-weight: 700;
    color: #FFF;
    text-transform: uppercase;
}

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

.ranking-table tbody tr td.stat-value {
    font-weight: 700;
    color: var(--main-color);
}

.i_note {
    background-color: rgba(0, 123, 255, 0.15);
    color: var(--blue);
    border: 1px solid var(--blue);
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 15px;
    text-align: center;
}

#rules_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#rules_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 0 5px rgba(255, 238, 0, 0.6);
}

.box-style1 {
    background: var(--gradient-box-secondary);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

.box-style1 h2.title {
    color: var(--text-primary-color);
    font-family: var(--font-montserrat);
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.box-style1 .entry {
    padding: 10px;
}

.rules-content {
    color: var(--text-secondary-color);
    font-family: var(--font-circle);
    font-size: 1em;
    line-height: 1.6;
    text-align: justify;
    padding: 10px;
}

.rules-content p {
    margin-bottom: 10px;
}

.rules-content ul {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 10px;
}

.rules-content ol {
    list-style: decimal;
    margin-left: 20px;
    margin-bottom: 10px;
}

.rules-content li {
    margin-bottom: 5px;
}

.rules-content strong, .rules-content b {
    color: var(--text-primary-color);
    font-weight: 700;
}

.rules-content em, .rules-content i {
    font-style: italic;
    color: var(--light);
}

#guides_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#guides_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 0 5px rgba(255, 238, 0, 0.6);
}

.box-style1 {
    background: var(--gradient-box-secondary);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    box-sizing: border-box;
}

.box-style1 .entry {
    padding: 10px;
}

ul.style2 {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.style2 li {
    padding: 12px 15px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    transition: background-color 0.2s ease;
}

ul.style2 li:last-child {
    border-bottom: none;
}

ul.style2 li.first {
}

ul.style2 li a {
    color: var(--text-primary-color);
    font-family: var(--font-circle);
    font-size: 1.05em;
    text-decoration: none;
    display: block;
    transition: color 0.2s ease;
}

ul.style2 li a:hover {
    color: var(--main-color);
    text-decoration: underline;
}

.i_note {
    background-color: rgba(0, 123, 255, 0.15);
    color: var(--blue);
    border: 1px solid var(--blue);
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 15px;
    text-align: center;
}

#guide_read_main_title_container {
    background: var(--gradient-box-primary);
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#guide_read_main_title_container h1 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 0 5px rgba(255, 238, 0, 0.6);
}

.box-style3 {
    background: var(--gradient-box-dark);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.box-style3 .entry {
    padding: 0;
}

.guide-content-text {
    color: var(--text-primary-color);
    font-family: var(--font-circle);
    font-size: 1em;
    line-height: 1.7;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    margin-bottom: 20px;
    padding: 0 15px;
}

.guide-content-text p {
    margin-bottom: 1em;
}

.guide-content-text h1,
.guide-content-text h2,
.guide-content-text h3,
.guide-content-text h4,
.guide-content-text h5,
.guide-content-text h6 {
    color: var(--main-color);
    font-family: var(--font-montserrat);
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.guide-content-text h1 { font-size: 1.8em; }
.guide-content-text h2 { font-size: 1.5em; }
.guide-content-text h3 { font-size: 1.3em; }

.guide-content-text ul {
    list-style: disc;
    margin-left: 25px;
    margin-bottom: 1em;
    color: var(--text-secondary-color);
}

.guide-content-text ol {
    list-style: decimal;
    margin-left: 25px;
    margin-bottom: 1em;
    color: var(--text-secondary-color);
}

.guide-content-text li {
    margin-bottom: 0.5em;
}

.guide-content-text a {
    color: var(--secondary-color);
    text-decoration: underline;
}

.guide-content-text a:hover {
    color: var(--main-color);
}

.guide-content-text strong,
.guide-content-text b {
    color: var(--main-color);
}

.meta-bg {
    background: rgba(0, 0, 0, 0.2);
    padding: 10px 15px;
    border-radius: 8px;
    text-align: right;
    margin-top: 15px;
}

.meta-bg .meta p.tags {
    color: var(--text-secondary-color);
    font-family: var(--font-circle);
    font-size: 0.9em;
    margin: 0;
}

.e_note {
    background-color: rgba(255, 63, 63, 0.2);
    color: var(--red);
    border: 1px solid var(--red);
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-family: var(--font-circle);
    font-size: 0.9em;
    text-align: center;
}

.character-name-link {
    color: #FFECA7;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}

.character-name-link:hover {
    text-decoration: none;
    color: #FFD600;
}

.ranking-box-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
}

.ranking-box-content img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    padding-left: 6.5vh;
}

.ranking-box-content .button-text {
    font-size: 16px;
    font-weight: 400px !important;
    color: var(--white);
}

.ranking-select-container {
    width: 130vh;
    height: auto;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    background: rgba(4, 4, 4, .4);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    margin: 40px auto;
    
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.ranking-image-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 268px;
    height: 58px;
}

.ranking-image-container img {
    flex-grow: 1;
    height: 60px;
    padding: 0 var(--pd-4);
    border-radius: 8px;
    background-size: 100% 100%;
    background-position: 100% 100%;
    cursor: pointer;
    transition: filter .3s ease;
    filter: grayscale(100%);
    position: relative;
    overflow: hidden;
    justify-content: flex-start
}

.ranking-image-container img:hover {
    filter: grayscale(0);
    color: inherit;
    background-color: inherit;
    border: 1px solid var(--main-color);
    box-shadow: 0 0 10px var(--main-color)
}

.ranking-image-container img.active {
    filter: grayscale(0);
    color: inherit;
    background-color: inherit;
    border: 1px solid var(--main-color);
    box-shadow: 0 0 10px var(--main-color);
}

.ranking-image-text {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: var(--font-circle);
    font-size: 16px;
    font-weight: bold;
    pointer-events: none;
}


.ranking-select-container a {
    text-decoration: none;
    display: block;
    flex-shrink: 0;
}

.ranking-select-container a:hover {
    text-decoration: none;
}

.RatingsHeader_rating-box__6ZdsU {
    width: 240px !important;
    height: 60px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px;
    border-radius: 15px;
    background: var(--box-bg);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, .2), inset 0 -5px 10px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: all .2s ease;
    overflow: hidden;
    text-decoration: none;
    color: var(--white);
    flex-shrink: 0;
    text-align: center;
}

.RatingsHeader_rating-box__6ZdsU > div {
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: bold;
}

.RatingsHeader_rating-box__6ZdsU:after,
.RatingsHeader_rating-box__6ZdsU:before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    transition: all 0.1s ease;
    content: "";
}

.RatingsHeader_rating-box__6ZdsU:before {
    top: 0;
    height: 100%;
    background: var(--gradient-box-primary);
    opacity: 0.3;
    filter: blur(10px);
    border-radius: 20%;
}

.RatingsHeader_rating-box__6ZdsU:after {
    bottom: 2px;
    height: 2px;
    background: var(--main-color);
    border-radius: 10px;
}

.RatingsHeader_rating-box__6ZdsU:hover:after,
.RatingsHeader_rating-box__6ZdsU.RatingsHeader_active__28NOV:after {
    width: 50%;
    box-shadow: var(--box-shadow-line-accent);
}

.RatingsHeader_rating-box__6ZdsU:hover:before,
.RatingsHeader_rating-box__6ZdsU.RatingsHeader_active__28NOV:before {
    width: 50%;
}

.RatingsHeader_rating-box__6ZdsU>div {
    position: relative;
    z-index: 1;
}

.RatingsHeader_rating-box__6ZdsU img {
    width: 40px;
    height: 40px;
}

.button-text {
    font-family: var(--font-circle);
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    line-height: 60px;
    width: 100%;
    text-align: center;
}

.item_size_12{
	font-size: 12px;
}

.item_font_family{
	font-family: tahoma;
}

.item_white{
	color:#FFFFFF;
}

.item_light_green{
	color:#00FF00;
}

.item_light_blue{
	color:#80B2FF;
}

.item_light_blue_2{
	color:#3366FF;
}

.item_blue{
	color:#0066FF;
}

.item_pink{
	color:#FF1493;
}

.item_yellow{
	color:#FADE09;
}

.item_yellow_2{
	color:#FFCC00;
}

.item_red{
	color:#FF0000;
}

.item_dark_red{
	color:#800000;
}

.item_dark_red_background{
	background-color:#800000;
}

.item_purple{
	color: #800080;
}

.item_socket{
	color: #B266FF;
}

.item_grey{
	color: #808080;
}

.item_yellow_title{
	color: #FFCC19;
}
.item_luck{
	color:#80B2FF;
}
.item_exe_title{
	color: #008000;
}

.item_socket_title{
	color: #B266FF;
}

.item_socket_exe_title{
	color: #7401DF;
}

.item_ancient_title{
	color: #01DF01;
}

.item_ancient_background{
	background-color: #0000FF;
}


#inventoryc {
    background-image:url('../../default_assets/images/inventoryc.png?v1');
    width:395px;
    height:320px;
	text-align:center;
	display: inline-block;
	position:relative; 
}
#inventoryc > img {
	position: absolute;
    top: 90px; left: 145px;
    border-radius: 50%;
    border: 3px solid #24314e;
	width: 110px;
	height: 110px;
}
#inventoryc > div {
    position:absolute;
    background-repeat:no-repeat;
    background-position:center center;
}
#in_weapon { width:90px;height:136px;bottom:0;left:-6px; background-size: contain !important;}
#in_shield { width:60px;height:136px;bottom:0;right:8px; background-size: contain !important;}
#in_helm { width:68px;height:68px;top:2px;left:66px; }
#in_armor { width:72px;height:110px;top:72px;left:40px; background-size: contain !important;}
#in_pants { width:68px;height:68px;bottom:8px;left:82px; background-size: contain !important;}
#in_gloves { width:68px;height:68px;top:116px;right:54px; background-size: contain !important;}
#in_boots { width:68px;height:68px;bottom:8px;right:82px; background-size: contain !important;}
#in_wings { width:138px;height:102px;top:8px;right:-2px; background-size: contain !important;}
#in_zoo { width:42px;height:42px;top:15px;left:10px; background-size: contain !important;}
#in_pendant { width:38px;height:38px;top:20px;right:136px; background-size: contain !important;}
#in_ring1 { width:38px;height:38px;bottom:92px;left:96px; background-size: contain !important;}
#in_ring2 { width:38px;height:38px;bottom:92px;right:96px; background-size: contain !important;}
#in_pentagram { width:64px;height:64px;bottom:8px;right:169px; background-size: contain !important;}
#in_ear1 {  width:32px;height:32px;top:72px;left:0px; background-size: contain !important;} 
#in_ear2 {  width:32px;height:32px;top:72px;left:115px; background-size: contain !important;} 
 .cworkshop{
	display: table;
	margin:  50px auto;
}
.cworkshop .inventoryy{
	background-image: url("../../default_assets/images/inv.png");
	height: 610px;
	width: 311px;
	display:block;
}
.cworkshop .item{
	position: absolute;
	/*top: 0px;*/
	margin-top:10px;
	margin-left:3px;
}
.cworkshop .item>div{
	cursor: pointer;
	border: solid 2px transparent;
}
div[id*="item-slot-occupied-"] img {
	background-color: rgba(31, 31, 31, 0.73);
	
}

div[id*="item-slot-occupied-"] img:hover {
	background-color: rgba(154, 60, 45, 0.43);
}
.cworkshop .item>div.selected{
	background-color: rgba(154, 60, 45, 0.43);
	border: solid 2px rgba(154, 60, 45, 0.44);
}

.cworkshop .item .hover_inv:hover{
	background-color: rgba(154, 60, 45, 0.43);
	border: solid 2px rgba(154, 60, 45, 0.44);
}
.cworkshop .title{
	margin-top: 13px;
	text-align: center;
	margin-bottom: 30px;
}

.live_popup {
	background-image: url("../../default_assets/images/OxlwMBp.png");
	height: 86px;
	position: fixed;
	bottom: 10px;
	z-index: 99999;
}
#live_popup_ch{
	margin-left: 50px;  
	margin-right: 40px;  
	-webkit-transform: skew(-10deg); /* Chrome, Opera */
	-ms-transform: skew(-10deg); /* IE */
	transform: skew(-10deg); /* Padrão */
	max-width: 740px;	
	min-width: 130px;
	overflow-y: hidden;
	height: 86px;
}

#live_popup_ch div{
	margin-left: 10px;
	margin-top: 5px;
	float: left;
}

#live_popup_ch img{
	opacity: 0.7;

}
#live_popup_ch a:hover img{
	height: 70px;
	opacity: 1;
}
#live_popup_ch a .img {
	border: solid rgba(255, 255, 255, 0.8) 2px;
	background: #000;
}

#live_popup_ch a:hover .img {
	border: solid rgba(255, 255, 255, 1.0) 2px;
}
#live_btn{
	position: absolute;
	height: 80px;
	width: 80px;
	left: 10px;
	top: 0px;
	cursor: pointer;
}
#live_btn i{
	margin-left: 18px;
	margin-top: 8px;
	font-size: 12px;
}
.live-110 {
	background-image: url("../../default_assets/images/OxlwMBp.png");
	height: 86px;
	position: fixed;
	bottom: 150px;
	z-index: 999999;
	width: 110px;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.live-840 {
	background-image: url("../../default_assets/images/OxlwMBp.png");
	height: 86px;
	position: fixed;
	bottom: 150px;
	z-index: 99999;
	max-width: 740px;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

/* Contenedor del Inventario */
#inventoryc {
    background-image: url('../../default_assets/images/inventoryc.png?v1');
    width: 395px;
    height: 320px;
    text-align: center;
    display: inline-block;
    position: relative;
}

#inventory {
    display: inline-block;
    position: relative;
    height: 407px;
    width: 400px;
    /* La URL de la imagen de fondo se genera dinámicamente en el PHP, así que aquí solo se define el no-repeat y la posición */
    background-repeat: no-repeat;
    background-position: left top;
}

/* Imagen del Personaje dentro del Inventario */
#inventoryc > img {
    position: absolute;
    top: 90px;
    left: 145px;
    border-radius: 50%;
    border: 3px solid #24314e;
    width: 110px;
    height: 110px;
}

/* Espacios Individuales para Ítems Equipados (Comunes para div dentro de #inventoryc) */
#inventoryc > div {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
}

/* ID's Específicas de Espacios de Ítems (para MU_VERSION >= 4) */
#in_weapon {
    width: 90px;
    height: 136px;
    bottom: 0;
    left: -6px;
    background-size: contain !important;
}

#in_shield {
    width: 60px;
    height: 136px;
    bottom: 0;
    right: 8px;
    background-size: contain !important;
}

#in_helm {
    width: 68px;
    height: 68px;
    top: 2px;
    left: 66px;
}

#in_armor {
    width: 72px;
    height: 110px;
    top: 72px;
    left: 40px;
    background-size: contain !important;
}

#in_pants {
    width: 68px;
    height: 68px;
    bottom: 8px;
    left: 82px;
    background-size: contain !important;
}

#in_gloves {
    width: 68px;
    height: 68px;
    top: 116px;
    right: 54px;
    background-size: contain !important;
}

#in_boots {
    width: 68px;
    height: 68px;
    bottom: 8px;
    right: 82px;
    background-size: contain !important;
}

#in_wings {
    width: 138px;
    height: 102px;
    top: 8px;
    right: -2px;
    background-size: contain !important;
}

#in_zoo {
    width: 42px;
    height: 42px;
    top: 15px;
    left: 10px;
    background-size: contain !important;
}

#in_pendant {
    width: 38px;
    height: 38px;
    top: 20px;
    right: 136px;
    background-size: contain !important;
}

#in_ring1 {
    width: 38px;
    height: 38px;
    bottom: 92px;
    left: 96px;
    background-size: contain !important;
}

#in_ring2 {
    width: 38px;
    height: 38px;
    bottom: 92px;
    right: 96px;
    background-size: contain !important;
}

#in_pentagram {
    width: 64px;
    height: 64px;
    bottom: 8px;
    right: 169px;
    background-size: contain !important;
}

#in_ear1 {
    width: 32px;
    height: 32px;
    top: 72px;
    left: 0px;
    background-size: contain !important;
}

#in_ear2 {
    width: 32px;
    height: 32px;
    top: 72px;
    left: 115px;
    background-size: contain !important;
}

/* ID's Específicas de Espacios de Ítems (para MU_VERSION < 4) */
#wings {
    position: absolute;
    left: 272px;
    top: 59px;
    width: 127px;
    height: 110px;
}

#helm {
    position: absolute;
    left: 73px;
    top: 58px;
    width: 56px;
    height: 66px;
}

#pendant {
    position: absolute;
    left: 233px;
    top: 80px;
    width: 29px;
    height: 29px;
}

#sword {
    position: absolute;
    left: 6px;
    top: 242px;
    width: 69px;
    height: 129px;
}

#armor {
    position: absolute;
    left: 40px;
    top: 138px;
    width: 82px;
    height: 98px;
}

#shield {
    position: absolute;
    left: 330px;
    top: 242px;
    width: 69px;
    height: 129px;
}

#gloves {
    position: absolute;
    left: 271px;
    top: 178px;
    width: 85px;
    height: 55px;
}

#pants {
    position: absolute;
    left: 89px;
    top: 297px;
    width: 58px;
    height: 74px;
}

#ring_left {
    position: absolute;
    left: 102px;
    top: 252px;
    width: 29px;
    height: 29px;
}

#ring_right {
    position: absolute;
    left: 272px;
    top: 252px;
    width: 29px;
    height: 29px;
}

#boots {
    position: absolute;
    left: 258px;
    top: 297px;
    width: 58px;
    height: 74px;
}

/* Visualización de Ítems en Otros Contextos (Ej. Almacén, Subasta) */
.item_table {
    width: 200px;
    border: 0;
    margin: auto;
}

.item_table td {
    padding: 3px;
}

.each_item {
    width: 10px;
    border: 0;
    border-collapse: collapse;
}

.each_item td {
    padding: 0px;
}

.each_item .item_name {
    background: url(../images/ws_item_name.png);
    background-size: 136px 34px;
    height: 34px;
}

.each_item .item_bg {
    background-image: url(../images/ws_item_bg.png);
    background-size: 136px 140px;
    height: 140px;
}

.each_item .item_footer {
    background: url(../images/ws_item_footer.png);
    background-size: 136px 6px;
    height: 6px;
}

.item_image {
    text-align: center;
    height: 140px;
    width: 136px;
}

.items {
    text-align: center;
}

.items a {
    color: #FFFFFF;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 13px;
    text-decoration: none;
    padding-bottom: 5px;
}

.items a:hover {
    color: #000000;
}

#item_image_bg {
    position: relative;
    background: url(../images/item_bg.png) no-repeat;
    width: 129px;
    height: 184px;
}

#item_image_bg img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.item_info {
    margin-top: 2px;
    background: url(../images/item_desc.png) no-repeat;
    width: 129px;
    height: 36px;
    line-height: 36px;
    z-index: 500;
}

.item_info .info {
    padding-left: 5px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    text-shadow: #000 0px 1px 0px;
}

.item_info .info .btimes {
    color: #ed7876;
}

.item_info .info .goldcr {
    color: #ffaf04;
}

.item_info .info .normalcr {
    color: #d9a08a;
}

.wh_items {
    width: 261px;
    margin: 2px auto;
    padding-top: 6px;
    padding-left: 3px;
    height: 485px;
}

.square {
    cursor: pointer;
    position: absolute;
    opacity: 0.8;
}

.square:hover {
    padding: 1px;
    opacity: 1;
}

.square img {
    width: 100%;
    height: 100%;
}

/* Colores de Texto de Ítems (Tooltips/Descripciones) */
.item_white { color: #FFFFFF; }
.item_light_green { color: #00FF00; }
.item_light_blue { color: #80B2FF; }
.item_light_blue_2 { color: #3366FF; }
.item_blue { color: #0066FF; }
.item_pink { color: #FF1493; }
.item_yellow { color: #FADE09; }
.item_yellow_2 { color: #FFCC00; }
.item_red { color: #FF0000; }
.item_dark_red { color: #800000; }
.item_purple { color: #800080; }
.item_socket { color: #B266FF; }
.item_grey { color: #808080; }
.item_yellow_title { color: #FFCC19; }
.item_luck { color: #80B2FF; }
.item_exe_title { color: #008000; }
.item_socket_title { color: #B266FF; }
.item_socket_exe_title { color: #7401DF; }
.item_ancient_title { color: #01DF01; }

/* Tooltips de Ítems (JavaScript) */
#tooltip {
    position: absolute;
    z-index: 11001;
    border: 1px solid #111;
    background-color: #221f28;
    padding: 5px;
    opacity: 0.90;
    font: normal 10px Tahoma, Helvetica, sans-serif;
    text-align: center;
    color: #fff;
}

/* Ventanas Modales/Visualización de Pentagramas y Artefactos */
/* Pentagramas */
.pentaOverlay {
    z-index: 998;
    position: fixed;
    background-color: #070a11;
    opacity: .8;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    display: none;
}

.pentaModal {
    top: 20%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 422px;
    height: 445px;
    background-color: rgba(0, 0, 0, 0);
    position: fixed;
    display: none;
    opacity: 0;
    z-index: 999;
    padding: 0px 60px;
}

.pentaBackground {
    height: 352px;
    width: 318px;
    border: 1px solid black;
    margin-left: -2px;
    margin-top: -2px;
    padding: 0;
    /* La URL de la imagen de fondo se genera dinámicamente en el PHP */
    background-repeat: no-repeat;
    background-position: top left;
    float: left;
    position: relative;
    text-align: center;
    color: gold;
    padding-top: 15px;
}

.pentaIcon {
    position: absolute;
    top: 129px;
    left: 88px;
    width: 80px;
    height: 80px;
    /* La URL de la imagen de fondo se genera dinámicamente en el PHP */
    background-size: contain;
}

.errtelIcon {
    position: absolute;
}

/* Artefactos */
.aOverlay {
    z-index: 998;
    position: fixed;
    background-color: #070a11;
    opacity: .8;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    display: none;
}

.aModal {
    top: 20%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 422px;
    height: 445px;
    background-color: rgba(0, 0, 0, 0);
    position: fixed;
    display: none;
    opacity: 0;
    z-index: 999;
    padding: 0px 60px;
}

.aBackground {
    height: 349px;
    width: 305px;
    border: 1px solid black;
    margin-left: -2px;
    margin-top: -2px;
    padding: 0;
    /* La URL de la imagen de fondo se genera dinámicamente en el PHP */
    background-repeat: no-repeat;
    background-position: top left;
    float: left;
    position: relative;
    text-align: center;
    color: gold;
    padding-top: 15px;
}

.aTitle {
    color: #00e6e6;
    font-size: 12px;
}

.aDescription {
    color: #fff;
    font-size: 11px;
}

.artifactIcon {
    position: absolute;
}

.character-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Tahoma, sans-serif;
    font-size: 13px;
}

.character-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap; /* <- Esto evita que se apilen */
}

.character-row > div {
    white-space: nowrap;   /* evita saltos de línea internos */
    text-align: center;
}

.character-info-centered {
    text-align: center;
}

.char-image-name {
    display: flex;
    align-items: center; /* para centrar verticalmente */
    gap: 8px; /* espacio entre imagen y nombre, ajustalo a gusto */
}

.char-name {
    margin-left: 5px;
    font-family: var(--font-circle);
    color: #FFF;
    font-size: 38px;
    font-weight: 700px;
}

.count-value {
    font-weight: 700px;
    color: #FFF;
}

.CharPage_resets-block__xZ5oR{
    margin-left: 125px;
    justify-content: center;
    width: 145px;
    height: 40px;
    font-size: var(--font-md);
    line-height: var(--font-md-lh);
    font-weight: 700;
    color: rgba(255, 255, 255, .5);
    text-align: left;
    padding: 0 0 0 35px;
    background: var(--char-lvl-block-bg);
}

.CharPage_resets-block__xZ5oRr{
    margin-right: 125px;
    justify-content: center;
    width: 145px;
    height: 40px;
    font-size: var(--font-md);
    line-height: var(--font-md-lh);
    font-weight: 700;
    color: rgba(255, 255, 255, .5);
    text-align: left;
    padding: 0 0 0 35px;
    background: var(--char-lvl-l-block-bg);
}

.info-text {
    font-family: var(--font-circle);
    font-weight: 300;
    font-size: 16px;
    color: rgb(255 255 255 / 50%);
}

.info-name {
    font-family: var(--font-circle);
    font-weight: 600px;
    font-size: 16px;
    color: #FFF;
}

.guild-info-name {
    font-size: 16px;
    font-weight: 600px;
    color: #FFECA7;
}

.guild-info-name:hover {
    text-decoration: none;
    font-size: 16px;
    font-weight: 600px;
    color: #FFD600;
}

/* SITE CONTENT, I HATE THE CREATOR OF DMN */

.fullscreen-background {
    position: absolute;
    top: -125px;
    left: 260px;
    width: calc(65% + 950px);
    min-height: 2500px;
    background-image: url(/assets/mudream/images/top_img.webp);
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: top left;
    z-index: -1;
}

.Flex_flex__KsGCE {
    margin-left: 70vh !important;
    margin-top: 12.5vh !important;
}

.LandingTopSection_title-block__ZarPi h1, .LandingTopSection_title-block__ZarPi h2 {
    color: rgb(255, 255, 255);
    margin-bottom: 13px !important;
    text-align: center;
    font-family: var(--font-montserrat);
    font-size: 108px;
    font-style: normal;
    font-weight: 900;
    line-height: 90%;
    text-transform: uppercase;
    margin: 0px;
}

.LandingTopSection_title-block__ZarPi h2 {
    text-shadow: rgba(0, 0, 0, 0.3) 0px 4px 45.9px;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    background: linear-gradient(0deg, rgb(255, 102, 0), rgb(255, 211, 51)) text;
}

.LandingTopSection_title-block__ZarPi h3, .LandingTopSection_title-block__ZarPi p {
    color: rgb(255, 255, 255);
    text-align: center;
    font-family: var(--font-montserrat);
    font-style: normal;
    text-transform: uppercase;
}

.LandingTopSection_title-block__ZarPi h3 {
    text-shadow: rgba(0, 0, 0, 0.3) 0px 4px 45.9px;
    font-size: 50px;
    font-weight: 800;
    line-height: 90%;
    margin: 0px;
}

.LandingTopSection_rewards-block__RgUs_ {
    margin-top: 9.5vh !important;
}

.LandingTopSection_rewards-block__RgUs_ p {
    margin-bottom: 25px !important;
    color: #fff;
    text-align: center;
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    text-shadow: 1px 1px 5px rgba(255,255,255,.5)
}

.LandingTopSection_rewards-block__RgUs_ p b {
    display: inline-block;
    color: #ffe46b;
    animation: LandingTopSection_pulse__Sgekv 2s infinite;
    font-weight: 700
}

@keyframes LandingTopSection_pulse__Sgekv {
    0% {
        transform: scale(1);
        margin-left: 0
    }

    50% {
        transform: scale(1.1);
        margin-left: 2px
    }

    to {
        transform: scale(1);
        margin-left: 0
    }
}



.custom-carousel-track {
    display: flex;
    /* Importante: Mantén overflow-x: hidden y scroll-behavior: auto !important */
    overflow-x: hidden;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.custom-carousel-track::-webkit-scrollbar {
    display: none; /* Oculta la barra de desplazamiento en Webkit */
}
/* Para Firefox: */
.custom-carousel-track {
    scrollbar-width: none;
}

.RewardItemCard_item__hbWbF {
    display: inline-flex;
    flex-flow: column nowrap;
    justify-content: center;
    gap: var(--pd-2);
    position: relative;
    overflow: hidden;
    max-width: 120px !important;
    max-height: 80px !important;
    width: 160px !important; /* Tu ancho deseado */
    height: 100px !important; /* Tu alto deseado */
    padding: 7px 14px;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(39.5px);
    backdrop-filter: blur(39.5px);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0
}

.RewardItemCard_item__hbWbF.RewardItemCard_exp__qXm83 {
    background: url(/assets/mudream/images/reward_items/exp.webp) no-repeat 50%/100% 100%
}

.RewardItemCard_item__hbWbF.RewardItemCard_drop__VirZX {
    background: url(/assets/mudream/images/reward_items/drop.webp) no-repeat 50%/100% 100%
}

.RewardItemCard_item__hbWbF.RewardItemCard_craft__O86sL {
    background: url(/assets/mudream/images/reward_items/craft.webp) no-repeat 50%/100% 100%
}

.RewardItemCard_item__hbWbF.RewardItemCard_vips__vc3s0 {
    background: url(/assets/mudream/images/reward_items/vips.webp) no-repeat 50%/100% 100%
}

.RewardItemCard_item__hbWbF.RewardItemCard_buffs__lgxD4 {
    background: url(/assets/mudream/images/reward_items/buffs.webp) no-repeat 50%/100% 100%
}

.RewardItemCard_item__hbWbF.RewardItemCard_starter-skill__eXj67 {
    background: url(/assets/mudream/images/reward_items/starter_skill.webp) no-repeat 50%/100% 100%
}

.RewardItemCard_item__hbWbF.RewardItemCard_boost-exp__j2K9V {
    background: url(/assets/mudream/images/reward_items/exp_boost.webp) no-repeat 50%/100% 100%
}

.RewardItemCard_item__hbWbF.RewardItemCard_start-points__A6LvH {
    background: url(/assets/mudream/images/reward_items/started_points.webp) no-repeat 50%/100% 100%
}

.RewardItemCard_item__hbWbF.RewardItemCard_battle-pass__xN_8q {
    background: url(/assets/mudream/images/reward_items/battle_pass.webp) no-repeat 50%/100% 100%
}

.RewardItemCard_item__hbWbF.RewardItemCard_start-pack__ql8an {
    background: url(/assets/mudream/images/reward_items/starter_pack.webp) no-repeat 50%/100% 100%
}

.RewardItemCard_name__d0nep {
    color: #fff;
    font-size: 24px;
    font-style: normal;
    max-width: 70%;
    font-weight: 800;
    line-height: 100%;
    white-space: pre-wrap;
    background: linear-gradient(90deg,#EFD562,#F2AE00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0,0,0,0);
}

.RewardItemCard_descr__hyLtw {
    color: #c2c1ca;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 15px;
}

.RegistrationBonusesBlock_wrap__Iemr2 {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.RegistrationBonusesBlock_wrap__Iemr2:before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg,rgba(20,0,0,.5) 20%,transparent 74%);
    z-index: 500;
    content: "";
}

.RegistrationBonusesBlock_wrap__Iemr2:after {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(270deg,rgba(20,0,0,.5) 20%,transparent 74%);
    z-index: 10;
    content: "";
}

.RegistrationBonusesBlock_wrap__Iemr2 .swiper-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    transition: transform 0.6s ease-in-out;
}

.RegistrationBonusesBlock_slide__NErky {
    margin-right: 12px !important;
}

.RegistrationBonusesBlock_wrap__Iemr2 .swiper-slide {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
}

.RegistrationBonusesBlock_wrap__Iemr2 {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.custom-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-behavior: none !important;
  -webkit-overflow-scrolling: touch; /* para smooth en móviles */
  cursor: grab;
  user-select: none; /* para que no seleccione texto al arrastrar */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

.custom-carousel-track::-webkit-scrollbar {
  display: none;             /* Chrome, Safari y Opera */
}


.custom-slide {
    /* min-width: 172px; */ /* 160px (tarjeta) + 12px (margen-derecho) */
    flex-shrink: 0; /* IMPRESCINDIBLE para que no se encoja en flexbox */
    margin-right: 12px; /* Consistente con el margin del RewardItemCard */
}

.custom-carousel-controls {
  display: none; /* ocultamos botones */
}

.custom-slide:active {
  cursor: grabbing;
}

.custom-prev,
.custom-next {
  cursor: pointer;
  background: #222;
  border: none;
  color: #fff;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  user-select: none;
  transition: background-color 0.3s;
}

.custom-prev:hover,
.custom-next:hover {
  background: #555;
}

.LandingCardsBlock_sparks__7hJ1e {
    position: fixed;
    top: 400px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.LandingCardsBlock_sparks__7hJ1e .LandingCardsBlock_spark_1__baLhH {
    position: fixed;
    background: url(/assets/mudream/images/spark_1.webp) no-repeat;
    width: 764px;
    height: 313px;
    right: 0;
    bottom: -120px;
    transform: scale(.6);
    animation: LandingCardsBlock_spark-1__8b1Yr 4s linear infinite;
    animation-delay: 1s;
}

.LandingCardsBlock_sparks__7hJ1e .LandingCardsBlock_spark_2__lhUNT {
    position: fixed;
    background: url(/assets/mudream/images/spark_2.webp) no-repeat;
    width: 149px;
    height: 335px;
    right: 230px;
    bottom: -320px;
    transform: scale(.6);
    animation: LandingCardsBlock_spark-1__8b1Yr 4s linear infinite;
    animation-delay: 2s;
}

.LandingCardsBlock_sparks__7hJ1e .LandingCardsBlock_spark_3__fj9xO {
    position: fixed;
    background: url(/assets/mudream/images/spark_3.webp) no-repeat;
    width: 128px;
    height: 165px;
    right: 280px;
    bottom: -140px;
    transform: scale(.6);
    animation: LandingCardsBlock_spark-3__URPEc 4s linear infinite;
    animation-delay: 2s;
}

.LandingCardsBlock_sparks__7hJ1e .LandingCardsBlock_spark_4__xzMAQ {
    position: fixed;
    background: url(/assets/mudream/images/spark_4.webp) no-repeat;
    width: 794px;
    height: 176px;
    right: 0;
    bottom: -180px;
    transform: scale(.6);
    animation: LandingCardsBlock_spark-5__L_QnJ 4s linear infinite;
}

.LandingCardsBlock_sparks-right__OSsUH {
    top: 400px;
    right: -40%
}

@keyframes LandingCardsBlock_spark-1__8b1Yr {
    0% {
        bottom: -320px;
        transform: scale(.6);
        opacity: 1
    }

    25% {
        bottom: -240px;
        transform: scale(.7);
        opacity: 1
    }

    50% {
        bottom: -160px;
        transform: scale(.8);
        opacity: 1
    }

    75% {
        bottom: -80px;
        transform: scale(.9);
        opacity: .5
    }

    to {
        bottom: 0;
        transform: scale(1);
        opacity: 0
    }
}

@keyframes LandingCardsBlock_spark-3__URPEc {
    0% {
        bottom: -140px;
        transform: scale(.6);
        opacity: 1
    }

    25% {
        bottom: -80px;
        transform: scale(.7);
        opacity: 1
    }

    50% {
        bottom: -20px;
        transform: scale(.8);
        opacity: 1
    }

    75% {
        bottom: 40px;
        transform: scale(.9);
        opacity: .5
    }

    to {
        bottom: 100px;
        transform: scale(1);
        opacity: 0
    }
}

@keyframes LandingCardsBlock_spark-5__L_QnJ {
    0% {
        bottom: -180px;
        transform: scale(.6);
        opacity: 1
    }

    25% {
        bottom: -120px;
        transform: scale(.7);
        opacity: 1
    }

    50% {
        bottom: -60px;
        transform: scale(.8);
        opacity: 1
    }

    75% {
        bottom: 0;
        transform: scale(.9);
        opacity: .5
    }

    to {
        bottom: 60px;
        transform: scale(1);
        opacity: 0
    }
}

/* ////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////
//////////////////////////////////////////////////////// */

/* ////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////
//////////////////////////////////////////////////////// */

/* Estilos para el contenedor de la grilla */
section.contenedor {
  width: 177vh;
  height: 84vh;
  position: relative;
/*   border: 2px solid #333; */
  overflow: hidden;
  box-sizing: border-box;

/*   background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, transparent 1px);
  background-size: 50px 20px; */
}

.contenedor-principal {
  display: flex;
  flex-direction: row;
  justify-content: flex-end; /* Alinea el contenedor-derecho a la derecha */
  gap: 5px;
}

.contenedor-izquierdo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contenedor-centro {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contenedor-izquierdo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.contenedor-inferior {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 5px;
}

/* CARTAS GENERAL */

.LandingCardsBlock_card__2jeKW {
    position: relative;
    display: inline-flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    gap: 17px;
    color: #fff;
    flex-grow: 1;
    padding: 16px;
    box-sizing: border-box;
    box-shadow: 0 4px 6px rgba(0,0,0,.2);
    border: 1px solid var(--border-color);
    text-align: center;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    background-color: #140000;
    border-radius: 20px;
    overflow: hidden;
    z-index: 2
}

.LandingCardsBlock_card__2jeKW .separator {
    width: 100%;
    max-width: 138px;
    height: 1px;
    background: linear-gradient(90deg,rgba(255,255,255,0),#FFF 50%,rgba(255,255,255,0))
}

.LandingCardsBlock_card__2jeKW span {
    font-size: 24px;
    font-feature-settings: "smcp","c2sc";
    font-variant: all-small-caps;
    white-space: pre-wrap;
}

.LandingCardsBlock_card__2jeKW p,.LandingCardsBlock_card__2jeKW span {
    display: block;
    color: #fff;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-style: normal;
    font-weight: 400;
    line-height: 80%;
}

.LandingCardsBlock_card__2jeKW b {
    position: relative;
    display: block;
    color: #fff;
    text-align: center;
    text-shadow: 0 4px 4px rgba(0,0,0,.25);
    font-size: 69px;
    font-style: normal;
    font-weight: 800;
    line-height: 90%;
    font-feature-settings: "smcp","c2sc";
    font-variant: all-small-caps;
    background: var(--gold-text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0,0,0,0);
}

.LandingCardsBlock_card__2jeKW b i {
    position: absolute;
    bottom: 0;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    line-height: 80%;
    -webkit-text-fill-color: #fff;
}

.LandingCardsBlock_card__2jeKW p {
    top: 100px;
    font-size: 20px;
    opacity: .3;
    font-feature-settings: "smcp","c2sc";
    font-variant: all-small-caps;
}

.LandingCardsBlock_card__2jeKW s {
    text-align: center;
    font-size: 32px;
    font-weight: 200;
    line-height: 100%;
    text-decoration: none;
}

.card-image {
  align-items: flex-start;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.contenido-carta {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* o start/center/end según lo que necesites */
    padding: 10px;
}

/* CARTAS DERECHO */

.image-guess-access {
    order: 1;
    width: 325px;
    height: 90px;
    background-image: url(/assets/mudream/images/new_land/gues_acess.webp);
}

.image-ui {
    order: 2;
    width: 325px;
    height: 138px;
    background-image: url(/assets/mudream/images/new_land/ui.webp);
}

.image-armony {
    order: 3;
    width: 325px;
    height: 98px;
    background-image: url(/assets/mudream/images/new_land/armory.webp);
}

.armony-text-1 {
    transform: translateY(-5px)
}
.armony-text-2 {
    transform: translateY(-20px)
}

.armony-text-3 {
    transform: translateX(-145px) translateY(15px)
}

.image-dream-land {
    order: 3;
    width: 325px;
    height: 240px;
    background-image: url(/assets/mudream/images/new_land/dream_land.webp);
}

.dreamlandbutton a {
    display: block;
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 78px;
    height: 78px;
    cursor: pointer;
    opacity: .8;
    background: url(/assets/mudream/images/icons/play_btn.webp) no-repeat 50%/100% 100%;
    transition: opacity .5s ease
}

.dreamlandbutton a:hover {
    opacity: 1
}

/* CARTAS CENTRO */

.image-quests {
    order: 1;
    width: 450px;
    height: 85px;
    background-image: url(/assets/mudream/images/new_land/quests.webp);
}

.text-quest-1, .text-quest-2 {
    font-size: 28px !important;
    position: absolute !important;
}

.text-quest-1 {
    transform: translateX(-140%);
}

.text-quest-2 {
    transform: translateX(150px);
}

.image-mg {
    order: 2;
    width: 450px;
    height: 285px;
    background-image: url(/assets/mudream/images/new_land/mg.webp);
}

text-mg-1 {
    transform: translateX(30px) !important;
}

.image-market {
    order: 3;
    width: 450px;
    height: 134px;
    background-image: url(/assets/mudream/images/new_land/market.webp);
}

.market-text-1 {
    color: #f3a258 !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 250 !important;
    transform: translateX(-155px) translateY(10px) !important;
}

.market-text-2{
    transform: translateX(-148px) translateY(-10px);
    font-size: 18px !important;
}

.separator, image-market {
    transform: translateX(-140px) translateY(-10px);
}

.market-text-3 {
    font-size: 20px !important;
    transform: translateX(-112px) translateY(-15px)
}

.block-donation {
    width: 450px;
    height: 62.25px;
    order: 4;
    flex-basis: auto;
    border-radius: 20px;
    background: radial-gradient(181.81% 141.56% at 88.68% 55.19%, rgba(110, 41, 41, .2) 0, rgba(62, 2, 2, 0) 100%), rgba(87, 87, 87, .4);
    -webkit-backdrop-filter: blur(17.5px);
    backdrop-filter: blur(17.5px);
    color: #ffffff;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 80%;
    font-feature-settings: "smcp", "c2sc";
    font-variant: all-small-caps;
    letter-spacing: 5.76px;
}

/* CARTAS IZQUIERDAS */

/* CARTA X2 EXP */

.image-x2-exp {
    order: 1;
    width: 235px;
    height: 125px;
    background-image: url(/assets/mudream/images/new_land/x2_exp.webp);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

/* CONTENIDO PRIZE */

.image-prize-found {
    order: 2;
    width: 235px;
    height: 335px;
    background-image: url(/assets/mudream/images/new_land/prize_found.webp);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.image-prize-found .contenido-carta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Solo este lo estás cambiando */
  text-align: center;
  padding: 10px;
}

.text-prize-1, .text-prize-2, .text-prize-3 {
    transform: translateY(-30px);
}

.image-prize-found .text-prize-1 {
    font-size: 18px;
    margin-bottom: 5px;
}

.image-prize-found .text-prize-2 {
    font-size: 38px;
}

.image-prize-found .text-prize-3 {
    font-size: 18px;
    margin-top: 5px;
}

.image-prize-found .separator {
    transform: translateY(-15px);
    width: 120px;
    height: 0.71px;
}

.price-img-1, .price-img-2 {
    width: 55px;
    height: 55px;
}

.price-img-1 {
    position: absolute;
    transform: translateY(10px) translateX(-70px);
}

.price-img-2 {
    position: absolute;
    transform: translateY(80px) translateX(-70px);
}

.text-prize-4 {
    font-size: 18px !important;
    transform: translateY(13px) translateX(40px);
}

.text-prize-5 {
    font-size: 48px !important;
    transform: translateY(18px);
}

.text-prize-6 {
    font-size: 18px !important;
    transform: translateX(40px) translateY(8px);
}

.text-prize-7 {
    transform: translateY(30px)
}

/* CARTA CLICKER */

.image-clicker {
    order: 3;
    width: 235px;
    height: 110px;
    background-image: url(/assets/mudream/images/new_land/clicker.webp);
}

.clicker-text-1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -90%);
  font-size: 18px !important;
  text-align: center;
  pointer-events: none; /* si querés que no interfiera con clics */
}

.clicker-text-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20%);
    font-size: 18px !important;
    font-weight: 100px !important;
  text-align: center;
  pointer-events: none; /* si querés que no interfiera con clics */
}

/* CARTAS BOTTOM */

.image-dungeons {
    width: 350px;
    height: 225px;
    background-image: url(/assets/mudream/images/new_land/dungeons.webp);
}

.image-collection {
    width: 350px;
    height: 225px;
    background-image: url(/assets/mudream/images/new_land/collection.webp);
}

.image-guild {
    width: 350px;
    height: 225px;
    background-image: url(/assets/mudream/images/new_land/guild.webp);
}

.text-guild-bottom, 
.text-collections-bottom,
.text-dungeons-bottom{
    font-size: 35px !important;
}

.text-guild-bottom, 
.text-collections-bottom {
    transform: translateY(150px);
}

.text-system-bottom, .text-epic-bottom {
    font-size: 28px !important;
}

.text-dungeons-bottom {
    transform: translateY(-25px)
}

.text-epic-bottom {
    transform: translateY(181px)
}

/* ---------------------------------- */

.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 100%;
  pointer-events: none; /* Esto lo heredás, podés quitarlo si querés interactuar */
}

.mini-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Cambia esto */
  justify-content: center;
  text-align: left; /* Cambia esto */
}

.mini-grid > div:nth-child(even) {
  transform: translateX(-85px);
}

.mini-grid span {
  white-space: nowrap; /* Evita que el número se corte */
  max-width: 40px !important; /* Ancho fijo para alinear los textos */
  margin-bottom: 10px;
  font-size: 18px !important;
}

.mini-grid p {
    font-size: 18px !important;
    margin: 0;
    flex: 1; /* Ocupa el resto del espacio */
}

/* ////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////// */

/* ===================================================================== */
/* ==   ESTE ES EL CÓDIGO CSS CORRECTO PARA EL ÚLTIMO ESTILO DE TABS   == */
/* ===================================================================== */

.tabs-container-wrapper {
    width: calc(100% - 50px);
    max-width: none;
    margin: 20px auto;
    font-family: var(--font-circle);
}

.tabs-bordered-wrap {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    overflow: hidden;
}

/* --- Barra de solapas --- */
.tabs-bar {
    display: flex;
    background: transparent;
    height: 69px; 
}

/* --- Estilo base para cada solapa --- */
.tab-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 1;
    height: 100%;
    padding: 18px 15px;
    white-space: normal;
    text-align: left;
    font-weight: 700;
    font-size: 1em;
    cursor: pointer !important;
    background: var(--box-bg);
    color: var(--text-secondary-color);
    border: none;
    transition: color 0.3s ease, border-radius 0.3s ease; /* Añadida transición para el border-radius */
    user-select: none;
    z-index: 2;
}

/* --- Pseudo-elemento para el fondo de la solapa activa --- */
.tab-link:before {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    height: 100%;
    width: calc(100% + 40px);
    background: var(--active-tab-bg);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

/* --- Línea separadora entre solapas inactivas --- */
.tab-link:not(.active) + .tab-link:not(.active):after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 30px;
    width: 1px;
    transform: translateY(-50%);
    background: var(--border-color);
}

/* --- Efecto Hover --- */
.tab-link:hover {
    color: var(--white);
}

/* --- Estilos para la solapa activa --- */
.tab-link.active {
    color: var(--white);
}

.tab-link.active:before {
    opacity: 1;
}

/* --- Borde redondeado para la solapa a la derecha de la activa --- */
.tab-link.active + .tab-link:not(.active) {
    border-top-left-radius: 20px;
}

/* --- Estilos para el contenido (sin cambios, pero se incluye por contexto) --- */
.tabs-content {
    background: rgba(33, 33, 33, .35);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.tab-content-panel {
    padding: 40px;
    animation: fadeIn 0.5s;
    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.tab-content-panel.active {
    display: flex;
    align-items: flex-start;
}

.panel-content-text { width: 50%; color: var(--light-gray); }
.panel-content-text h3 { position: relative; margin: 0 0 36px; font-size: 32px; font-weight: 700; color: var(--white); text-align: left; text-transform: uppercase; line-height: 1.2;}
.panel-content-text h3:after { content: ""; position: absolute; bottom: -18px; left: 0; width: 100%; height: 1px; background-color: rgba(255, 255, 255, .2); }
.panel-content-text p { line-height: 1.5; font-size: 1em; }
.panel-content-media { width: 50%; text-align: center; }
.panel-content-media img { max-width: 100%; height: auto; border-radius: 20px; max-height: 412px; }

@media(max-width: 780px) {
    .tab-content-panel { flex-direction: column; padding: 20px; }
    .panel-content-text, .panel-content-media { width: 100%; }
    .panel-content-text h3 { font-size: 22px; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tab-icon {
    width: 32px;      /* Ancho del icono, puedes ajustarlo */
    height: 32px;     /* Alto del icono, puedes ajustarlo */
    margin-right: 10px; /* Espacio entre el icono y el texto */
}

.NewLanding_title___4qyD {
    position: relative;
    font-style: normal;
    font-weight: 800;
    font-size: 50px;
    line-height: 100%;
    text-align: center;
    margin: 0 auto 10px;
    color: var(--white);
    text-transform: uppercase
}

.NewLanding_sub-title__58UfZ {
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    width: 90%;
    color: var(--color-light);
    line-height: 28px;
    margin: 8px auto 90px;
    white-space: pre-wrap
}

.panel-content-text ul {
    list-style-type: disc;
    padding-left: 40px;
}

.panel-content-text ul li {
    margin-bottom: 0px;
}