.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: none !important;
}

a:focus, a:hover {
    color: inherit !important;
    text-decoration: none !important;
}

.form-control {
	background: #111;
	border: 1px solid #705954;
	color: #ccc;
}
.form-control:focus {
	border: 1px solid #9c7b74;
}

/* http://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3 */
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

/* http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 */
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.thumbnail {
    background-color: #111111;
    border: 1px solid #333333;
	transition: all 0.3s ease;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
	border-color: #c35b43;
	-moz-box-shadow: 0 0 60px rgba(195, 91, 67, 0.3);
	-webkit-box-shadow: 0 0 60px rgba(195, 91, 67, 0.3);
	box-shadow: 0 0 60px rgba(195, 91, 67, 0.3);
}

.btn-primary {
    color: #f5de9f;
    /* background-color: transparent; */
    border: 0px;
    -moz-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
    -moz-border-radius: 0px;
    border-radius: 2px;
    background-color: #08345f;
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
}
legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 20px;
    line-height: inherit;
    color: #b5b5b5;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
    color: #fff !important;
	background-image: linear-gradient(to bottom, #b93a27, #9e1e0b);
}

/* modal */
.modal-content {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
	background-color: transparent !important;
	border: 0 !important;
}

/* Login modal — rediseño acorde al resto del sitio (panel oscuro con
   degradado y borde/glow azul, igual que .page-content .panel). */
#overlay {
    background-color: rgba(3, 5, 10, 0.82) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.modal_div {
    max-width: 90vw;
    border-radius: 14px !important;
    background:
        linear-gradient(180deg, rgba(20, 27, 52, 0.96), rgba(7, 10, 20, 0.98)) !important;
    border: 1px solid rgba(96, 150, 230, 0.28) !important;
    box-shadow:
        inset 0 0 30px rgba(83, 103, 205, 0.08),
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(60, 120, 220, 0.12) !important;
}

.modal_div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(120, 175, 255, 0.55), transparent);
}

.modal_div .modal_close {
    width: 32px;
    height: 32px;
    background: rgba(10, 14, 26, 0.9);
    border: 1px solid rgba(96, 150, 230, 0.35);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.modal_div .modal_close::before,
.modal_div .modal_close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    background: #b9c8e8;
    transform-origin: center;
}

.modal_div .modal_close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal_div .modal_close::after {
    transform: translate(-50%, -50%) rotate(-135deg);
}

.modal_close:hover {
    filter: none !important;
    border-color: rgba(150, 195, 255, 0.7);
    background: rgba(20, 27, 52, 0.95);
    transform: scale(1.08);
}

.modal-content h2 {
    margin-bottom: 30px !important;
}

.modal-content h2 span {
    color: #ffaf43;
    font-family: "Exo 2", "Open Sans", sans-serif;
    letter-spacing: 2px;
    text-shadow: 0 0 16px rgba(255, 175, 67, 0.35), 0 2px 8px #000;
}

.modal-content form p {
    margin-bottom: 16px !important;
}

.input-re {
    width: 100% !important;
    max-width: 420px;
    height: 46px !important;
    border-radius: 6px !important;
    background: rgba(5, 8, 18, 0.82) !important;
    border: 1px solid rgba(99, 132, 236, 0.32) !important;
    box-shadow: inset 0 0 18px rgba(38, 57, 125, 0.22) !important;
    color: #e7f0ff !important;
    font-family: "Open Sans", sans-serif;
    letter-spacing: 0.3px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-re:focus {
    border-color: rgba(127, 218, 255, 0.62) !important;
    box-shadow: inset 0 0 18px rgba(65, 91, 184, 0.24), 0 0 16px rgba(96, 172, 255, 0.18) !important;
    outline: none !important;
}

.input-re::placeholder {
    color: #7c88a8;
    letter-spacing: 0.5px;
}

.formButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 30px !important;
}

.formButton .panel-title {
    margin: 0 !important;
}

.formButton .panel-title a {
    display: inline-block !important;
    min-width: 0 !important;
    min-height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #7c9cd6 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    text-shadow: none !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    letter-spacing: 0.2px;
}

.formButton .panel-title a:hover {
    color: #b9d4ff !important;
}

.table-bordered {
	background: #2d211e !imporant;
    border: 1px solid #18110f !important;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #342623 !important;
}

.table-hover>tbody>tr:hover {
    background-color: #543e3a !important;
}

.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
    border: 1px solid #18110f !important;
}

html,
body {
    background: #03050a !important;
    overflow-x: hidden;
}

body {
    overflow-y: hidden;
}

.wrapper {
    background: transparent;
    z-index: 2;
    transform-origin: top center;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(115, 215, 255, 0.82) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(105, 255, 190, 0.58) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(155, 116, 255, 0.5) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(255, 78, 58, 0.38) 0 1px, transparent 2px);
    background-size: 220px 220px, 310px 310px, 420px 420px, 520px 520px;
    background-position: 18px 36px, 140px 80px, 260px 160px, 60px 260px;
    opacity: 0.58;
    animation: siteParticleDrift 42s linear infinite;
}

@keyframes siteParticleDrift {
    0% {
        background-position: 18px 36px, 140px 80px, 260px 160px, 60px 260px;
    }
    100% {
        background-position: 118px -184px, 20px -230px, 390px -80px, -70px -120px;
    }
}

.logo {
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
    top: 100px;
    width: 900px;
    max-width: 900px;
    z-index: 4;
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 22px rgba(0, 190, 255, 0.18));
}

.nav-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 16px;
}

.nav-logo img {
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    filter: drop-shadow(0 0 6px rgba(0, 190, 255, 0.22));
    transition: filter 0.25s ease, transform 0.25s ease;
}

.nav-logo:hover img {
    filter: brightness(190%) drop-shadow(0 0 16px rgba(0, 190, 255, 0.55));
    transform: scale(1.06);
}

.logo img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.header {
    min-height: 700px;
    background: #03050a !important;
}

.header::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1800px;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    background: url("../assets-local/img/hero-mastermu-bg-v2.png") center top / 100% auto no-repeat;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%),
        linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%),
        linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
    mask-composite: intersect;
}

.smog {
    position: relative;
    z-index: 6;
}

/* Navbar estatico: forma parte del diseño fijo de 1200px, igual que el
   resto de la web. No se queda pegado al hacer scroll ni se mueve por
   su cuenta al redimensionar la ventana; escala junto con .wrapper. */
.top-panel {
    position: relative;
    width: 100%;
    z-index: 10;
    border-radius: 0;
    background: rgba(10, 14, 26, 0.88) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.sparks-sparks {
    display: none !important;
}

.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.hero-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(122, 230, 255, 0.72);
    box-shadow: 0 0 12px rgba(122, 230, 255, 0.7);
    opacity: 0;
    animation: heroParticleDrift 12s linear infinite;
}

.hero-particles span:nth-child(3n) {
    background: rgba(55, 255, 175, 0.68);
    box-shadow: 0 0 14px rgba(55, 255, 175, 0.55);
}

.hero-particles span:nth-child(4n) {
    background: rgba(255, 78, 58, 0.6);
    box-shadow: 0 0 14px rgba(255, 78, 58, 0.45);
}

.hero-particles span:nth-child(1) { left: 12%; top: 72%; animation-delay: 0s; animation-duration: 13s; }
.hero-particles span:nth-child(2) { left: 19%; top: 54%; animation-delay: -5s; animation-duration: 15s; }
.hero-particles span:nth-child(3) { left: 28%; top: 67%; animation-delay: -2s; animation-duration: 12s; }
.hero-particles span:nth-child(4) { left: 39%; top: 76%; animation-delay: -8s; animation-duration: 16s; }
.hero-particles span:nth-child(5) { left: 48%; top: 58%; animation-delay: -4s; animation-duration: 14s; }
.hero-particles span:nth-child(6) { left: 56%; top: 70%; animation-delay: -10s; animation-duration: 17s; }
.hero-particles span:nth-child(7) { left: 64%; top: 50%; animation-delay: -6s; animation-duration: 13s; }
.hero-particles span:nth-child(8) { left: 73%; top: 66%; animation-delay: -1s; animation-duration: 15s; }
.hero-particles span:nth-child(9) { left: 82%; top: 78%; animation-delay: -7s; animation-duration: 16s; }
.hero-particles span:nth-child(10) { left: 90%; top: 58%; animation-delay: -3s; animation-duration: 14s; }
.hero-particles span:nth-child(11) { left: 7%; top: 44%; animation-delay: -9s; animation-duration: 18s; }
.hero-particles span:nth-child(12) { left: 34%; top: 40%; animation-delay: -11s; animation-duration: 15s; }
.hero-particles span:nth-child(13) { left: 51%; top: 34%; animation-delay: -6s; animation-duration: 19s; }
.hero-particles span:nth-child(14) { left: 69%; top: 38%; animation-delay: -12s; animation-duration: 17s; }
.hero-particles span:nth-child(15) { left: 86%; top: 46%; animation-delay: -4s; animation-duration: 18s; }

@keyframes heroParticleDrift {
    0% {
        transform: translate3d(0, 38px, 0) scale(0.55);
        opacity: 0;
    }
    16% {
        opacity: 0.62;
    }
    72% {
        opacity: 0.34;
    }
    100% {
        transform: translate3d(34px, -230px, 0) scale(1.35);
        opacity: 0;
    }
}

.wa-particles,
.wap {
    display: none !important;
}

.wa-sweep {
    animation: none;
    opacity: 0.35;
}

.fast-button {
    align-items: stretch;
    gap: 3px;
}

.fast-button .wa-block {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    background: #050810;
    border: 1px solid rgba(37, 211, 102, 0.25);
    transition: transform 0.3s, box-shadow 0.3s;
    width: 398px;
    height: 125px;
    flex-shrink: 0;
}

.fast-button .wa-block:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 35px rgba(37, 211, 102, 0.35), 0 0 60px rgba(37, 211, 102, 0.1);
}

.fast-button .wa-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 25% 50%, rgba(37, 211, 102, 0.18), transparent 55%),
        radial-gradient(ellipse at 80% 50%, rgba(18, 140, 126, 0.12), transparent 55%);
}

.fast-button .wa-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(37, 211, 102, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 211, 102, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
}

.fast-button .wa-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    opacity: 0.42;
}

.fast-button .wa-corner-tl {
    top: 7px;
    left: 7px;
    border-top: 2px solid #25D366;
    border-left: 2px solid #25D366;
}

.fast-button .wa-corner-tr {
    top: 7px;
    right: 7px;
    border-top: 2px solid #128C7E;
    border-right: 2px solid #128C7E;
}

.fast-button .wa-corner-bl {
    bottom: 7px;
    left: 7px;
    border-bottom: 2px solid #25D366;
    border-left: 2px solid #25D366;
}

.fast-button .wa-corner-br {
    right: 7px;
    bottom: 7px;
    border-right: 2px solid #128C7E;
    border-bottom: 2px solid #128C7E;
}

.fast-button .wa-inner {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding: 0 20px;
    gap: 16px;
}

.fast-button .wa-icon-wrap {
    position: relative;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fast-button .wa-icon-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.45);
}

.fast-button .wa-icon-ring::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 0 8px #25D366;
    transform: translateX(-50%);
}

.fast-button .wa-icon-bg {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #25D366, #128C7E);
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.45), 0 0 40px rgba(37, 211, 102, 0.15);
}

.fast-button .wa-icon-bg svg {
    width: 30px;
    height: 30px;
    fill: #fff;
}

.fast-button .wa-texts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fast-button .wa-badge {
    width: fit-content;
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid rgba(37, 211, 102, 0.3);
    border-radius: 20px;
    background: rgba(37, 211, 102, 0.06);
    color: #25D366;
    font-family: "Exo 2", sans-serif;
    font-size: 17px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.fast-button .wa-sub {
    color: rgba(37, 211, 102, 0.55);
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
}

.fast-button .wa-online {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.45);
    font-family: "Exo 2", sans-serif;
    font-size: 16px;
}

.fast-button .wa-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 0 6px #25D366;
}

.fast-button .wa-pulse-line {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #25D366, #128C7E, #25D366, transparent);
}

/* =========================================================
   TARJETAS DE ESTADO — "Sello de mana" (398x125)

   Tarjeta 1 -> HORA OFICIAL DEL SERVIDOR
       Los eventos corren en hora del server, no en la del
       jugador. Por eso solo se muestra esa, etiquetada, con
       la fecha completa debajo.
   Tarjeta 2 -> POBLACION DEL SERVIDOR
       Dos cifras del mismo peso: conectados ahora y jugadores
       distintos que entraron hoy. Debajo, la ocupacion.

   Composicion comun (llena todo el ancho):
       [sello] [ rotulo + regla ------------------- ]
               [ contenido principal a lo ancho     ]
               [ pie de apoyo, extremo a extremo    ]
   Sin hover: son informativas, no clickeables.
   ========================================================= */

.status-block {
    position: relative;
    width: 398px;
    height: 125px;
    margin-left: 0 !important;
    flex-shrink: 0;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: default;
}

/* --- Marco: obsidiana pulida --------------------------- */
.status-block .status-clock-card,
.status-block .status-online-card {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    padding: 0 18px 0 0 !important;
    border-radius: 12px;
    border: 1px solid var(--card-edge);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(158deg, var(--card-tint-a) 0%, rgba(4, 6, 14, 0.97) 62%),
        #04060e !important;
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 34px var(--card-inner-glow);
    color: rgba(255, 255, 255, 0.72);
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
}

.status-block .status-clock-card {
    --card-edge: rgba(96, 158, 255, 0.28);
    --card-tint-a: rgba(24, 42, 96, 0.55);
    --card-inner-glow: rgba(70, 130, 255, 0.12);
    --card-aura-1: rgba(78, 148, 255, 0.20);
    --card-aura-2: rgba(148, 96, 255, 0.14);
    --card-bracket: rgba(126, 186, 255, 0.55);
    --card-rule: rgba(126, 186, 255, 0.40);
    --card-kicker: #8fc2ff;
}

.status-block .status-online-card {
    --card-edge: rgba(46, 208, 130, 0.26);
    --card-tint-a: rgba(10, 52, 44, 0.55);
    --card-inner-glow: rgba(37, 211, 102, 0.11);
    --card-aura-1: rgba(37, 211, 102, 0.18);
    --card-aura-2: rgba(86, 215, 255, 0.13);
    --card-bracket: rgba(150, 240, 150, 0.5);
    --card-rule: rgba(150, 240, 150, 0.36);
    --card-kicker: #a9e88a;
}

/* Aura de mana al fondo (respira lento) */
.status-block .status-clock-card::before,
.status-block .status-online-card::before {
    content: "" !important;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 16% 52%, var(--card-aura-1), transparent 56%),
        radial-gradient(ellipse at 92% 24%, var(--card-aura-2), transparent 54%);
    animation: cardAura 6s ease-in-out infinite alternate;
}

@keyframes cardAura {
    0%   { opacity: 0.62; transform: scale(1); }
    100% { opacity: 1;    transform: scale(1.05); }
}

/* Esquinas grabadas (8 capas: 4 esquinas x 2 trazos) */
.status-block .status-clock-card::after,
.status-block .status-online-card::after {
    content: "";
    position: absolute;
    inset: 8px;
    pointer-events: none;
    opacity: 0.5;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(var(--card-bracket), var(--card-bracket)),
        linear-gradient(var(--card-bracket), var(--card-bracket)),
        linear-gradient(var(--card-bracket), var(--card-bracket)),
        linear-gradient(var(--card-bracket), var(--card-bracket)),
        linear-gradient(var(--card-bracket), var(--card-bracket)),
        linear-gradient(var(--card-bracket), var(--card-bracket)),
        linear-gradient(var(--card-bracket), var(--card-bracket)),
        linear-gradient(var(--card-bracket), var(--card-bracket));
    background-size:
        15px 1px, 1px 15px,
        15px 1px, 1px 15px,
        15px 1px, 1px 15px,
        15px 1px, 1px 15px;
    background-position:
        0 0,        0 0,
        100% 0,     100% 0,
        0 100%,     0 100%,
        100% 100%,  100% 100%;
}

/* --- Sello magico -------------------------------------- */
.status-block .status-glyph {
    position: relative;
    z-index: 2;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: 0 0 24px var(--sg-halo);
}

.status-block .status-glyph::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, var(--sg-rune) 0deg 2.6deg, transparent 2.6deg 15deg);
    -webkit-mask: radial-gradient(circle, transparent 63%, #000 67%);
    mask: radial-gradient(circle, transparent 63%, #000 67%);
    animation: sealSpin 24s linear infinite;
}

.status-block .status-glyph::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px dashed var(--sg-dash);
    animation: sealSpinRev 17s linear infinite;
}

.status-block .status-glyph span {
    position: absolute;
    inset: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, var(--sg-core-hi), var(--sg-core) 52%, transparent 74%);
    box-shadow: 0 0 13px var(--sg-glow), inset 0 0 9px var(--sg-glow);
    animation: sealPulse 3.4s ease-in-out infinite;
}

@keyframes sealSpin    { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes sealSpinRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes sealPulse   { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } }

.status-block .clock-glyph {
    --sg-rune: rgba(122, 190, 255, 0.6);
    --sg-dash: rgba(186, 224, 255, 0.26);
    --sg-core: rgba(38, 104, 214, 0.55);
    --sg-core-hi: rgba(198, 238, 255, 0.95);
    --sg-glow: rgba(96, 178, 255, 0.42);
    --sg-halo: rgba(76, 146, 255, 0.18);
}

.status-block .online-glyph {
    --sg-rune: rgba(120, 240, 160, 0.55);
    --sg-dash: rgba(204, 250, 106, 0.26);
    --sg-core: rgba(24, 150, 104, 0.55);
    --sg-core-hi: rgba(226, 255, 176, 0.95);
    --sg-glow: rgba(120, 226, 128, 0.4);
    --sg-halo: rgba(37, 211, 102, 0.18);
}

.status-block .clock-glyph span::before,
.status-block .clock-glyph span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 999px;
    background: #d6efff;
    box-shadow: 0 0 6px rgba(150, 215, 255, 0.85);
    transform-origin: left center;
}

.status-block .clock-glyph span::before {
    width: 8px;
    height: 2px;
    transform: rotate(-30deg);
}

.status-block .clock-glyph span::after {
    width: 6px;
    height: 2px;
    transform: rotate(-104deg);
}

.status-block .online-glyph span::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 1px solid rgba(204, 250, 106, 0.4);
}

/* --- Zona de contenido --------------------------------- */
.clock-content,
.online-content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

/* Rotulo: rombo + texto + regla que llega al borde derecho */
.card-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--card-kicker);
    font-family: "Exo 2", sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    white-space: nowrap;
}

.card-eyebrow::before {
    content: "";
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    background: var(--card-kicker);
    box-shadow: 0 0 7px var(--card-kicker);
    transform: rotate(45deg);
}

.card-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    min-width: 12px;
    background: linear-gradient(90deg, var(--card-rule), transparent);
}

/* --- Tarjeta 1: hora del servidor ---------------------- */
.clock-time {
    margin-top: 9px;
    color: #eef8ff;
    font-family: "Audiowide", "Exo 2", sans-serif;
    font-size: 44px;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 0 0 22px rgba(88, 178, 255, 0.42), 0 3px 10px rgba(0, 0, 0, 0.9);
}

.clock-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid rgba(126, 186, 255, 0.14);
}

.clock-date {
    overflow: hidden;
    color: rgba(174, 212, 255, 0.72);
    font-size: 10.5px;
    letter-spacing: 1.1px;
    line-height: 1;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    color: rgba(126, 186, 255, 0.6);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    line-height: 1;
    text-transform: uppercase;
}

.live-tag i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7ec8ff;
    box-shadow: 0 0 7px #7ec8ff;
    animation: liveBlink 1.8s ease-in-out infinite;
}

@keyframes liveBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.22; } }

/* --- Tarjeta 2: poblacion del servidor ----------------- */
.online-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin-top: 10px;
}

.ostat {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.ostat strong {
    font-family: "Audiowide", "Exo 2", sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.ostat span {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.5);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    line-height: 1;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ostat-now strong {
    color: #eaffb5;
    text-shadow: 0 0 18px rgba(204, 250, 106, 0.42), 0 3px 10px rgba(0, 0, 0, 0.9);
}

.ostat-day {
    position: relative;
    align-items: flex-end;
    padding-left: 20px;
    text-align: right;
}

.ostat-day::before {
    content: "";
    position: absolute;
    left: 0;
    top: -7px;
    bottom: -7px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--card-rule) 24%, var(--card-rule) 76%, transparent);
}

.ostat-day strong {
    color: #9fe8ff;
    text-shadow: 0 0 18px rgba(86, 215, 255, 0.38), 0 3px 10px rgba(0, 0, 0, 0.9);
}

/* Barra de ocupacion, recorre todo el ancho */
.status-block .progress-bar-webengine {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 6px !important;
    margin: 12px 0 0 !important;
    border-radius: 999px;
    background: rgba(2, 5, 10, 0.9) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85);
}

.status-block .progress-bar-webengine::after {
    content: none !important;
}

.status-block .progress-bar-webengine span {
    position: relative;
    display: block;
    height: 6px !important;
    min-width: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #19d782 0%, #ccfa6a 55%, #56d7ff 100%) !important;
    box-shadow: 0 0 12px rgba(204, 250, 106, 0.4);
}

.status-block .progress-bar-webengine span::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%);
    background-size: 220% 100%;
    animation: manaShine 2.8s ease-in-out infinite;
}

@keyframes manaShine {
    0%   { background-position: 220% 0; }
    100% { background-position: -220% 0; }
}

/* Sin reaccion al puntero: no son enlaces */
.status-block,
.status-block * {
    transition: none !important;
}

.status-block:hover .status-clock-card,
.status-block:hover .status-online-card {
    transform: none;
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 34px var(--card-inner-glow);
}

@media (prefers-reduced-motion: reduce) {
    .status-block .status-glyph::before,
    .status-block .status-glyph::after,
    .status-block .status-glyph span,
    .status-block .status-clock-card::before,
    .status-block .status-online-card::before,
    .status-block .progress-bar-webengine span::after,
    .live-tag i {
        animation: none !important;
    }
}

.page-content,
.panel,
.panel-sidebar,
.panel-default,
.panel-downloads,
.block-players,
.block-guild,
.block-widget-title,
.top-block,
.widget-fon-top,
.widget-fon-guilds,
.widget-fon-discussions,
.news-top,
.news-top-text,
.content-last-news,
.rankings-class-filter,
.rankings-table,
.table,
.table-bordered,
.cscont,
.cscont2 {
    background-color: #15192347 !important;
}

.panel-heading,
.panel-title,
.top-title,
.block-widget-title {
    background-color: #15192347 !important;
}

.nuevatabla {
    background: rgba(12, 16, 32, 0.58) !important;
    border-color: rgba(103, 122, 255, 0.22) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.nuevatabla thead,
.nuevatabla .head,
.nuevatabla tr.head {
    background: linear-gradient(180deg, rgba(69, 79, 153, 0.9), rgba(31, 37, 82, 0.92)) !important;
}

.nuevatabla td,
.nuevatabla th {
    background-color: rgba(12, 16, 32, 0.46) !important;
    border-color: rgba(67, 80, 145, 0.22) !important;
}

.nuevatabla tr:nth-child(odd) td {
    background-color: rgba(18, 22, 44, 0.62) !important;
}

.nuevatabla tr:nth-child(even) td {
    background-color: rgba(10, 14, 30, 0.58) !important;
}

.nuevatabla tr:hover td {
    background-color: rgba(84, 92, 170, 0.24) !important;
    color: #dfe7ff !important;
}

.nuevatabla td.descrip {
    background: rgba(15, 20, 42, 0.88) !important;
}

.nuevatabla td.imgacc {
    background: rgba(12, 16, 32, 0.72) !important;
}

.widget-fon,
.widget-fon-guilds,
.widget-fon-discussions {
    position: relative;
    overflow: hidden;
    background-color: rgba(8, 12, 25, 0.82) !important;
    border: 1px solid rgba(89, 118, 255, 0.18);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38), inset 0 0 42px rgba(60, 82, 175, 0.14) !important;
}

.widget-fon {
    background-image: none !important;
}

.widget-fon-guilds {
    background-image: none !important;
}

.widget-fon-discussions {
    background-image: none !important;
}

.widget-fon::before,
.widget-fon-guilds::before,
.widget-fon-discussions::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(1.12) contrast(1.1) saturate(1.14);
    opacity: 0.96;
}

.widget-fon::before {
    background-image: url("../assets-local/img/ranking-top-players-v2.jpg");
}

.widget-fon-guilds::before {
    background-image: url("../assets-local/img/ranking-top-guilds-v2.jpg");
}

.widget-fon-discussions::before {
    background-image: url("../assets-local/img/ranking-top-gens-v2.jpg");
}

.widget-fon::after,
.widget-fon-guilds::after,
.widget-fon-discussions::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(3, 5, 10, 0.02) 0%, rgba(5, 8, 18, 0.18) 34%, rgba(3, 5, 10, 0.5) 100%),
        radial-gradient(circle at 50% 18%, rgba(72, 105, 255, 0.12), transparent 42%),
        radial-gradient(circle at 80% 26%, rgba(155, 94, 255, 0.1), transparent 38%);
}

.widget-fon > *,
.widget-fon-guilds > *,
.widget-fon-discussions > * {
    position: relative;
    z-index: 2;
}

.widget-fon .block-players,
.widget-fon-guilds .block-players,
.widget-fon-discussions .block-players,
.widget-fon .block-widget-title,
.widget-fon-guilds .block-widget-title,
.widget-fon-discussions .block-widget-title {
    background: transparent !important;
}

.block-widget-title {
    text-shadow: 0 0 12px rgba(255, 175, 67, 0.34), 0 2px 8px rgba(0, 0, 0, 0.8);
}

.widget-fon .block-widget-title,
.widget-fon-guilds .block-widget-title,
.widget-fon-discussions .block-widget-title {
    position: relative;
    isolation: isolate;
    padding-top: 165px;
    padding-bottom: 35px;
    padding-left: 0;
    padding-right: 0;
    background: transparent !important;
    z-index: 3;
}

.widget-fon .block-widget-title::before,
.widget-fon-guilds .block-widget-title::before,
.widget-fon-discussions .block-widget-title::before {
    content: "";
    position: absolute;
    left: 44px;
    right: 44px;
    top: 154px;
    height: 38px;
    z-index: -1;
    border: 1px solid rgba(103, 137, 255, 0.2);
    border-radius: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(5, 8, 22, 0.78) 14%, rgba(13, 18, 44, 0.88) 50%, rgba(5, 8, 22, 0.78) 86%, transparent 100%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34), inset 0 0 20px rgba(63, 91, 215, 0.18);
}

/* =========================================================
   BOTONES "TOP ..." — placa ambar grabada
   Reemplaza bg-button-12.jpg por CSS puro.
   El borde biselado se logra con doble clip-path: el fondo
   ambar del <a> hace de filo y el ::before (1px hacia
   adentro, z-index -1) pinta el relleno oscuro encima.
   ========================================================= */

.buttons-small {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

.buttons-small .button-small {
    position: relative;
    z-index: 0;
    width: auto !important;
    height: auto !important;
    min-width: 152px;
    padding: 13px 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 190, 110, 0.9), rgba(255, 175, 67, 0.32)) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    color: #ffcb7a;
    font-family: "Exo 2", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
    transition: color 0.25s ease, box-shadow 0.25s ease;
}

.buttons-small .button-small::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px;
    background: linear-gradient(180deg, #1a1408 0%, #0c0a06 55%, #150f06 100%);
    clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
}

.buttons-small .button-small::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px;
    opacity: 0;
    background: linear-gradient(105deg, transparent 34%, rgba(255, 190, 110, 0.22) 48%, rgba(255, 235, 190, 0.3) 50%, rgba(255, 190, 110, 0.22) 52%, transparent 66%);
    background-size: 220% 100%;
    clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
    transition: opacity 0.25s ease;
}

.buttons-small .button-small:hover,
.buttons-small a.button-small:hover {
    filter: none !important;
    -webkit-filter: none !important;
    color: #fff0d2;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 175, 67, 0.22);
}

.buttons-small .button-small:hover::after {
    opacity: 1;
    animation: topBtnSweep 1.1s ease-out;
}

@keyframes topBtnSweep {
    0%   { background-position: 200% 0; }
    100% { background-position: -120% 0; }
}

/* =========================================================
   BOTON "SUBIR ARRIBA"
   El adorno fon-totop.png mide 1200px con el anillo en su
   centro exacto; sin background-position se anclaba a la
   izquierda mientras el boton iba centrado por flex, y por
   eso se salia del anillo. Ahora ambos comparten centro y
   el circulo se dibuja en CSS a 30px para anidar dentro del
   hueco del anillo (36px).
   ========================================================= */

.toTop-fon {
    background-position: center center !important;
}

.toTop {
    position: relative;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 175, 67, 0.55);
    background: radial-gradient(circle at 50% 32%, #2b1d0c 0%, #140d05 62%, #090603 100%) !important;
    box-shadow: 0 0 12px rgba(255, 175, 67, 0.22), inset 0 1px 0 rgba(255, 205, 140, 0.18);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.toTop::before {
    content: "";
    width: 9px;
    height: 9px;
    margin-top: 3px;
    border-top: 2px solid #ffc98a;
    border-left: 2px solid #ffc98a;
    border-radius: 1px;
    transform: rotate(45deg);
}

.toTop:hover {
    filter: none !important;
    -webkit-filter: none !important;
    border-color: rgba(255, 210, 150, 0.9);
    box-shadow: 0 0 20px rgba(255, 175, 67, 0.45), inset 0 1px 0 rgba(255, 225, 180, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    .buttons-small .button-small:hover::after { animation: none !important; }
}

/* =========================================================
   CENTRADO DE LAS FILAS DE TARJETAS
   .fast-button y .block-widget son flex sin justify-content,
   asi que empaquetaban a la izquierda: sus hijos miden 398px
   fijos (3 x 398 = 1194px) y el contenedor no tiene ancho
   maximo, dejando el resto muerto en pantallas anchas.
   El wrap evita que se desborden por debajo de 1200px.
   ========================================================= */

.fast-button,
.block-widget {
    justify-content: center;
    flex-wrap: wrap;
}

/* =========================================================
   HOME: comunidad + ganador Castle Siege + resumen servidor
   ========================================================= */

.fast-button {
    gap: 4px;
}

.cs-winner-card {
    position: relative;
    overflow: hidden;
    width: 398px;
    height: 125px;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 58px;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    border: 1px solid rgba(255, 108, 62, 0.42);
    border-radius: 10px;
    background: #050810;
    color: #fff;
    text-decoration: none !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42), inset 0 0 30px rgba(255, 92, 62, 0.12);
}

.cs-winner-card:hover {
    color: #fff !important;
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 92, 62, 0.22), inset 0 0 34px rgba(255, 92, 62, 0.15);
}

.cs-winner-bg {
    position: absolute;
    inset: 0;
    background: url("../assets-local/img/castle-winner-card-bg-v1.png") center center / cover no-repeat;
    opacity: 0.78;
    transform: scale(1.02);
}

.cs-winner-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3, 5, 10, 0.2), rgba(3, 5, 10, 0.6) 58%, rgba(3, 5, 10, 0.24)),
        radial-gradient(circle at 24% 50%, rgba(87, 192, 255, 0.16), transparent 35%),
        radial-gradient(circle at 76% 50%, rgba(255, 78, 58, 0.18), transparent 38%);
}

.cs-winner-card::before,
.cs-winner-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.cs-winner-card::before {
    inset: 8px;
    border-top: 1px solid rgba(255, 175, 67, 0.38);
    border-bottom: 1px solid rgba(87, 192, 255, 0.22);
    opacity: 0.62;
}

.cs-winner-card::after {
    left: 94px;
    right: 72px;
    top: 34px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 175, 67, 0.55), transparent);
}

.cs-winner-mark,
.cs-winner-copy,
.cs-winner-action {
    position: relative;
    z-index: 2;
}

.cs-winner-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border: 1px solid rgba(255, 175, 67, 0.52);
    border-radius: 6px;
    background: rgba(2, 4, 10, 0.78);
    box-shadow: 0 0 18px rgba(87, 192, 255, 0.18), inset 0 0 12px rgba(255, 255, 255, 0.05);
}

.cs-winner-mark .guildon {
    display: block;
    image-rendering: pixelated;
}

.cs-winner-copy {
    min-width: 0;
}

.cs-winner-kicker {
    color: #ffbf76;
    font-family: "Exo 2", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.2px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.cs-winner-name {
    overflow: hidden;
    margin-top: 11px;
    color: #fff;
    font-family: "Audiowide", "Exo 2", sans-serif;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 2px 2px 0 rgba(104, 27, 20, 0.9), 0 0 16px rgba(125, 190, 255, 0.45), 0 3px 10px #000;
}

.cs-winner-master {
    overflow: hidden;
    margin-top: 8px;
    color: rgba(230, 238, 255, 0.72);
    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    letter-spacing: 0.6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-winner-master strong {
    color: #d8f3ff;
    font-weight: 800;
}

.cs-winner-action {
    align-self: end;
    margin-bottom: 20px;
    padding: 5px 7px;
    border: 1px solid rgba(255, 175, 67, 0.35);
    border-radius: 3px;
    background: rgba(8, 12, 24, 0.72);
    color: #ffbf76;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.server-summary-block {
    width: 398px;
    height: 125px;
}

.status-block .server-summary-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 14px 18px !important;
}

.server-summary-card .summary-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.server-summary-card .summary-head > strong {
    color: #ccfa6a;
    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.server-summary-card .card-eyebrow {
    min-width: 0;
    font-size: 9px;
    letter-spacing: 2px;
}

.summary-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.35fr 1fr 0.85fr;
    gap: 9px;
}

.summary-item {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid rgba(103, 153, 255, 0.12);
    border-radius: 5px;
    background: rgba(2, 5, 12, 0.42);
}

.summary-item span,
.summary-item small {
    display: block;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.48);
    font-family: "Exo 2", sans-serif;
    font-size: 9px;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.summary-item strong {
    display: block;
    overflow: hidden;
    margin: 4px 0;
    color: #eaffb5;
    font-family: "Audiowide", "Exo 2", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 0 13px rgba(204, 250, 106, 0.34), 0 2px 8px #000;
}

.summary-time strong {
    color: #dff4ff;
    font-size: 19px;
    text-shadow: 0 0 13px rgba(86, 215, 255, 0.32), 0 2px 8px #000;
}

.server-info-line {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(159, 232, 255, 0.68);
    font-family: "Exo 2", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    line-height: 1;
    text-transform: uppercase;
}

.server-info-line i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(204, 250, 106, 0.8);
    box-shadow: 0 0 7px rgba(204, 250, 106, 0.7);
}

.server-summary-card .progress-bar-webengine {
    position: relative;
    z-index: 2;
    margin-top: 0 !important;
}

/* HOME: server information card refresh */
.server-summary-block {
    width: 398px;
    height: 125px;
}

.status-block .server-summary-card {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 13px 15px 12px 16px !important;
    border: 1px solid rgba(89, 122, 255, 0.34);
    border-radius: 7px;
    background:
        linear-gradient(90deg, rgba(3, 5, 10, 0.18), rgba(3, 5, 10, 0.36)),
        url("../assets-local/img/server-info-card-bg-v1.png") center / cover no-repeat,
        #03050a !important;
    box-shadow:
        inset 0 0 0 1px rgba(164, 190, 255, 0.06),
        inset 0 -24px 40px rgba(3, 5, 10, 0.62),
        0 0 18px rgba(54, 95, 255, 0.12);
    color: #dfe9ff;
    cursor: pointer;
    text-decoration: none;
}

.status-block .server-summary-card:hover,
.status-block .server-summary-card:focus {
    border-color: rgba(119, 155, 255, 0.58);
    box-shadow:
        inset 0 0 0 1px rgba(189, 206, 255, 0.10),
        inset 0 -24px 40px rgba(3, 5, 10, 0.56),
        0 0 22px rgba(76, 112, 255, 0.20);
    color: #ffffff;
    text-decoration: none;
    transform: none;
}

.status-block .server-summary-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 17% 52%, rgba(81, 104, 255, 0.20), transparent 25%),
        linear-gradient(90deg, rgba(3, 5, 10, 0.08), rgba(3, 5, 10, 0.52) 62%, rgba(3, 5, 10, 0.26));
}

.status-block .server-summary-card::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 13px;
    left: 16px;
    z-index: 1;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(88, 219, 255, 0.12), rgba(156, 124, 255, 0.55), transparent);
}

.server-summary-card .summary-topline,
.server-summary-card .summary-main,
.server-summary-card .server-info-line,
.server-summary-card .progress-bar-webengine {
    position: relative;
    z-index: 2;
}

.server-summary-card .summary-topline {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    padding-right: 94px;
}

.summary-pill {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: rgba(220, 235, 255, 0.82);
    font-family: "Exo 2", sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.7px;
    line-height: 1;
    text-transform: uppercase;
}

.summary-pill i {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #70ffb4;
    box-shadow: 0 0 9px rgba(112, 255, 180, 0.85);
}

.server-summary-card .summary-more {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border: 1px solid rgba(122, 157, 255, 0.28);
    border-radius: 3px;
    background: rgba(14, 22, 51, 0.58);
    color: rgba(194, 218, 255, 0.82);
    font-family: "Exo 2", sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.9px;
    line-height: 1;
    text-transform: uppercase;
}

.server-summary-card:hover .summary-more,
.server-summary-card:focus .summary-more {
    border-color: rgba(121, 235, 255, 0.48);
    color: #eef8ff;
}

.server-summary-card .summary-main {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(108px, 1fr) 166px;
    gap: 18px;
    padding-left: 54px;
}

.server-summary-card .summary-time,
.server-summary-card .summary-today {
    min-width: 0;
    text-align: center;
}

.server-summary-card .summary-time span,
.server-summary-card .summary-today span {
    display: block;
    overflow: hidden;
    color: rgba(196, 212, 255, 0.62);
    font-family: "Exo 2", sans-serif;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 1.25px;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.server-summary-card .summary-today span {
    overflow: visible;
    width: max-content;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    text-overflow: clip;
}

.server-summary-card .summary-time strong,
.server-summary-card .summary-today strong {
    display: block;
    overflow: hidden;
    margin-top: 6px;
    font-family: "Exo 2", sans-serif;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 0.95;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-summary-card .summary-time strong {
    color: #f1f7ff;
    font-size: 29px;
    text-shadow: 0 0 16px rgba(126, 190, 255, 0.38), 0 2px 7px #000;
}

.server-summary-card .summary-today strong {
    color: #c59bff;
    font-size: 27px;
    text-align: center;
    text-shadow: 0 0 14px rgba(161, 105, 255, 0.45), 0 2px 7px #000;
}

.server-summary-card .server-info-line {
    justify-content: flex-start;
    overflow: hidden;
    gap: 7px;
    color: rgba(170, 204, 255, 0.62);
    font-size: 7.8px;
    font-weight: 500;
    letter-spacing: 1px;
    white-space: nowrap;
}

.server-summary-card .server-info-line i {
    width: 3px;
    height: 3px;
    flex: 0 0 auto;
    background: rgba(139, 231, 255, 0.82);
    box-shadow: 0 0 7px rgba(139, 231, 255, 0.75);
}

.server-summary-card .progress-bar-webengine {
    overflow: hidden;
    height: 4px;
    margin-top: 0 !important;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.46);
}

.server-summary-card .progress-bar-webengine span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #74ecff, #a56dff);
    box-shadow: 0 0 12px rgba(125, 187, 255, 0.62);
}

/* SIDEBAR: fantasy header refresh */
.panel-sidebar {
    overflow: hidden;
    border: 1px solid rgba(75, 104, 210, 0.28) !important;
    border-radius: 8px !important;
    background: rgba(7, 10, 20, 0.66) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36), inset 0 0 24px rgba(72, 88, 170, 0.08);
}

.panel-sidebar > .panel-heading {
    position: relative;
    min-height: 51px;
    padding: 13px 15px 13px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(99, 130, 255, 0.24) !important;
    border-radius: 8px 8px 0 0 !important;
    background:
        linear-gradient(90deg, rgba(3, 5, 10, 0.18), rgba(3, 5, 10, 0.02) 45%, rgba(3, 5, 10, 0.18)),
        url("../img/sidebar_panel_header_bg1.jpg") center center / 100% 100% no-repeat,
        #03050a !important;
    box-shadow: inset 0 -14px 20px rgba(3, 5, 10, 0.42), 0 0 18px rgba(74, 98, 255, 0.08);
}

.panel-sidebar > .panel-heading::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 4px;
    left: 14px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(121, 194, 255, 0.42), rgba(164, 100, 255, 0.34), transparent);
}

.panel-sidebar > .panel-heading .panel-title {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 24px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #eef5ff;
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.1px;
    line-height: 1.1;
    text-shadow: 0 0 12px rgba(111, 172, 255, 0.44), 0 2px 7px #000;
    text-transform: uppercase;
}

.panel-sidebar > .panel-heading .panel-title > a:not(.btn) {
    overflow: hidden;
    color: inherit !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-sidebar > .panel-heading .btn,
.panel-sidebar > .panel-heading .btn-primary,
.panel-sidebar > .panel-heading .btn-xs {
    position: relative;
    flex: 0 0 auto;
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 22px;
    margin: 0 !important;
    padding: 5px 10px !important;
    border: 1px solid rgba(126, 174, 255, 0.38) !important;
    border-radius: 3px !important;
    background:
        linear-gradient(180deg, rgba(29, 45, 91, 0.92), rgba(10, 15, 35, 0.94)) !important;
    box-shadow: inset 0 1px 0 rgba(198, 221, 255, 0.14), 0 0 14px rgba(87, 128, 255, 0.14);
    color: #d9ebff !important;
    font-family: "Exo 2", sans-serif;
    font-size: 9px !important;
    font-weight: 700;
    letter-spacing: 0.9px;
    line-height: 1 !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
    text-transform: uppercase;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.panel-sidebar > .panel-heading .btn:hover,
.panel-sidebar > .panel-heading .btn:focus {
    border-color: rgba(133, 226, 255, 0.58) !important;
    background:
        linear-gradient(180deg, rgba(42, 63, 128, 0.96), rgba(12, 18, 43, 0.96)) !important;
    box-shadow: inset 0 1px 0 rgba(221, 239, 255, 0.18), 0 0 18px rgba(102, 169, 255, 0.24);
    color: #ffffff !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* MODULES: unified fantasy UI */
.page-content,
.page-content .col-xs-8,
.page-content .col-xs-12 {
    color: #dfe9ff;
}

.page-content > .row > .col-xs-8,
.page-content > .row > .col-xs-12 {
    min-height: 340px;
    padding-top: 2px;
}

.page-content .page-title,
.page-content .page-titlecs {
    position: relative;
    margin: 0 0 18px !important;
    padding: 0 0 10px !important;
    background: transparent !important;
    color: #eef6ff !important;
    font-family: "Exo 2", "Open Sans", sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    line-height: 1.15 !important;
    text-align: left !important;
    text-shadow: 0 0 16px rgba(106, 176, 255, 0.45), 0 2px 10px #000 !important;
    text-transform: uppercase !important;
}

.page-content .page-title span,
.page-content .page-titlecs span {
    color: inherit !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
}

.page-content .page-title::after,
.page-content .page-titlecs::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 10px;
    background: linear-gradient(90deg, rgba(116, 199, 255, 0.66), rgba(155, 105, 255, 0.42), transparent);
}

.page-content .panel,
.page-content .thumbnail,
.payment-form,
.xshop-container,
.cscont,
.general-table-ui,
.myaccount-table,
.nuevatabla,
.table-dark,
.table-bordered,
.rankings-table,
.rankings-class-filter,
.rankings-class-filter-selection,
table.alancs {
    border: 1px solid rgba(82, 113, 220, 0.28) !important;
    border-radius: 8px !important;
    background:
        linear-gradient(180deg, rgba(17, 23, 44, 0.72), rgba(7, 10, 20, 0.82)) !important;
    box-shadow: inset 0 0 24px rgba(83, 103, 205, 0.08), 0 16px 36px rgba(0, 0, 0, 0.28) !important;
    color: #dfe9ff !important;
}

.payment-form,
.cscont {
    background:
        linear-gradient(180deg, rgba(16, 22, 45, 0.82), rgba(4, 7, 16, 0.9)) !important;
}

.page-content table,
.page-content .table,
.rankings-table {
    color: #dfe9ff !important;
    background-color: rgba(9, 13, 27, 0.54) !important;
}

.page-content table th,
.page-content table td,
.page-content .table > tbody > tr > td,
.page-content .table > tbody > tr > th,
.page-content .table > thead > tr > th {
    border-color: rgba(72, 93, 173, 0.22) !important;
}

.page-content table th,
.page-content .table > thead > tr > th,
.page-content .table tr:first-child td,
.general-table-ui tr:first-child td,
.nuevatabla tr:first-child td,
.payment-form h3,
.payment-form h4 {
    background: linear-gradient(180deg, rgba(65, 74, 143, 0.72), rgba(21, 27, 62, 0.84)) !important;
    color: #f1f6ff !important;
    text-shadow: 0 0 10px rgba(98, 172, 255, 0.38), 0 2px 6px #000 !important;
}

.page-content .table-striped > tbody > tr:nth-of-type(odd),
.page-content .table-dark tr:nth-child(odd),
.page-content .nuevatabla tr:nth-child(odd),
.rankings-table tr:nth-child(odd) {
    background: rgba(16, 20, 39, 0.76) !important;
}

.page-content .table-striped > tbody > tr:nth-of-type(even),
.page-content .table-dark tr:nth-child(even),
.page-content .nuevatabla tr:nth-child(even),
.rankings-table tr:nth-child(even) {
    background: rgba(10, 14, 28, 0.76) !important;
}

.form-control,
.page-content input[type="text"],
.page-content input[type="password"],
.page-content input[type="email"],
.page-content input[type="number"],
.page-content select,
.page-content textarea,
.payment-form select,
.payment-form input[type="text"] {
    min-height: 34px;
    border: 1px solid rgba(99, 132, 236, 0.32) !important;
    border-radius: 4px !important;
    background: rgba(5, 8, 18, 0.82) !important;
    box-shadow: inset 0 0 18px rgba(38, 57, 125, 0.22) !important;
    color: #e7f0ff !important;
    font-family: "Open Sans", sans-serif !important;
}

.form-control:focus,
.page-content input:focus,
.page-content select:focus,
.page-content textarea:focus {
    border-color: rgba(127, 218, 255, 0.62) !important;
    box-shadow: inset 0 0 18px rgba(65, 91, 184, 0.24), 0 0 16px rgba(96, 172, 255, 0.18) !important;
    outline: none !important;
}

.btn,
.btn-primary,
.btn-danger,
.button,
.buttonDark,
button.button,
.page-content button:not(.slick-arrow),
.page-content input[type="submit"],
.ui-button.button1,
.card-donate-btn,
.admincp-button,
.admincp-button2,
.admincp-button3 {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    min-width: 86px;
    padding: 8px 16px !important;
    border: 1px solid rgba(114, 162, 255, 0.42) !important;
    border-radius: 4px !important;
    background:
        linear-gradient(180deg, rgba(31, 47, 94, 0.96), rgba(9, 14, 34, 0.98)) !important;
    box-shadow: inset 0 1px 0 rgba(221, 239, 255, 0.14), 0 0 16px rgba(89, 136, 255, 0.16) !important;
    color: #f2f7ff !important;
    font-family: "Exo 2", "Open Sans", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    line-height: 1 !important;
    text-align: center;
    text-shadow: 0 1px 7px rgba(0, 0, 0, 0.95) !important;
    text-transform: uppercase !important;
    vertical-align: middle;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, filter 0.18s ease !important;
}

.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-danger:hover,
.btn-danger:focus,
.button:hover,
.button:focus,
.buttonDark:hover,
.buttonDark:focus,
.page-content button:not(.slick-arrow):hover,
.page-content button:not(.slick-arrow):focus,
.page-content input[type="submit"]:hover,
.ui-button.button1:hover,
.card-donate-btn:hover:not(:disabled),
.admincp-button:hover,
.admincp-button2:hover,
.admincp-button3:hover {
    border-color: rgba(137, 229, 255, 0.68) !important;
    background:
        linear-gradient(180deg, rgba(47, 66, 128, 0.98), rgba(12, 18, 43, 0.98)) !important;
    box-shadow: inset 0 1px 0 rgba(232, 244, 255, 0.2), 0 0 24px rgba(103, 169, 255, 0.28) !important;
    color: #ffffff !important;
    filter: brightness(1.08) !important;
    text-decoration: none !important;
}

.btn-xs,
.panel-sidebar > .panel-heading .btn-xs,
.myaccount-table .btn-xs {
    min-width: 54px !important;
    min-height: 24px !important;
    padding: 5px 10px !important;
    font-size: 9px !important;
}

.ui-button.button1 .button-left,
.ui-button.button1 .button-right {
    display: inline !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.topPanel__buttons .button,
.topPanel__buttons .buttonDark {
    top: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 86px;
    height: 40px;
    margin: 0 0 0 10px !important;
    padding: 0 16px !important;
}

.topPanel__buttons {
    align-items: center !important;
    gap: 10px;
}

.topPanel__buttons a {
    margin-left: 0 !important;
}

.admincp-button,
.admincp-button2,
.admincp-button3 {
    position: absolute !important;
    z-index: 50;
    right: 14px !important;
    min-width: 150px;
}

.admincp-button { top: 84px !important; }
.admincp-button2 { top: 126px !important; }
.admincp-button3 { top: 168px !important; }

.payment-method,
.payment-details,
.amount,
.items3d-box,
.items3d-card {
    border-color: rgba(94, 128, 230, 0.3) !important;
    background: rgba(8, 12, 26, 0.74) !important;
    color: #dfe9ff !important;
    box-shadow: inset 0 0 18px rgba(78, 95, 190, 0.1) !important;
}

.payment-method:hover {
    border-color: rgba(133, 226, 255, 0.52) !important;
    background: rgba(16, 25, 55, 0.86) !important;
    filter: none !important;
}

.payment-form .amount,
.payment-form strong,
.payment-form label,
.payment-form .items3d-title strong {
    color: #cfdcff !important;
}

.panel-usercp ul li,
.top-block .top-list,
.top-block .top-title {
    border-color: rgba(69, 91, 170, 0.22) !important;
}

.alert {
    overflow: hidden;
    margin: 12px 0 18px !important;
    padding: 17px 20px !important;
    border: 1px solid rgba(103, 148, 255, 0.32) !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle at 18px 18px, rgba(123, 210, 255, 0.12), transparent 90px),
        linear-gradient(180deg, rgba(18, 27, 54, 0.86), rgba(7, 11, 25, 0.9)) !important;
    box-shadow: inset 0 0 22px rgba(83, 111, 220, 0.1), 0 16px 34px rgba(0, 0, 0, 0.26) !important;
    color: #dce9ff !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.alert strong:first-child {
    display: block;
    margin-bottom: 8px;
    color: #9edcff !important;
    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.alert a {
    color: #78f3ff !important;
    text-shadow: 0 0 10px rgba(94, 215, 255, 0.32);
}

.alert-info,
.alert-warning,
.alert-success,
.alert-danger {
    border-color: rgba(103, 148, 255, 0.32) !important;
}

.general-table-ui {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.general-table-ui td {
    overflow-wrap: anywhere;
}

.general-table-ui td:nth-child(2) {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.general-table-ui td:last-child {
    width: 94px !important;
    min-width: 94px !important;
    padding-right: 7px !important;
    padding-left: 7px !important;
    text-align: center !important;
}

.general-table-ui .btn,
.general-table-ui .btn-primary,
.general-table-ui button {
    min-width: 72px !important;
    max-width: 100% !important;
    min-height: 32px !important;
    padding: 7px 9px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.general-table-ui .ui-button.button1 {
    width: auto !important;
    min-width: 74px !important;
}

.general-table-ui .ui-button.button1 .button-left,
.general-table-ui .ui-button.button1 .button-right {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap !important;
}

.general-table-ui img {
    max-width: 52px;
    height: auto;
}

.trade-card {
    position: relative;
    overflow: hidden;
    width: calc(100% - 24px);
    max-width: 720px;
    margin: 0 auto 22px;
    padding: 24px;
    border: 1px solid rgba(109, 151, 255, 0.34);
    border-radius: 8px;
    background:
        radial-gradient(circle at 86% 18%, rgba(151, 100, 255, 0.2), transparent 170px),
        radial-gradient(circle at 14% 16%, rgba(77, 199, 255, 0.16), transparent 150px),
        linear-gradient(180deg, rgba(18, 24, 49, 0.9), rgba(5, 8, 18, 0.94));
    box-shadow: inset 0 0 32px rgba(90, 116, 220, 0.12), 0 18px 40px rgba(0, 0, 0, 0.34);
}

.trade-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(120, 205, 255, 0.1), transparent),
        repeating-linear-gradient(90deg, transparent 0 28px, rgba(105, 140, 255, 0.035) 29px, transparent 30px);
    opacity: 0.7;
}

.trade-card > * {
    position: relative;
    z-index: 1;
}

.trade-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.trade-kicker {
    display: block;
    margin-bottom: 9px;
    color: #8adfff;
    font-family: "Exo 2", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.trade-hero h3 {
    margin: 0 0 10px;
    color: #f3f7ff;
    font-family: "Exo 2", sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(108, 180, 255, 0.42), 0 2px 9px #000;
}

.trade-hero p,
.trade-steps li,
.trade-warning {
    color: rgba(224, 235, 255, 0.82);
    font-size: 13px;
    line-height: 1.65;
}

.trade-stats {
    display: grid;
    gap: 10px;
}

.trade-stat {
    padding: 12px 13px;
    border: 1px solid rgba(106, 148, 255, 0.26);
    border-radius: 6px;
    background: rgba(7, 11, 25, 0.68);
    text-align: center;
}

.trade-stat span {
    display: block;
    color: rgba(189, 206, 255, 0.68);
    font-family: "Exo 2", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.35px;
    text-transform: uppercase;
}

.trade-stat strong {
    display: block;
    margin-top: 5px;
    color: #8ff1ff;
    font-family: "Exo 2", sans-serif;
    font-size: 22px;
    font-weight: 500;
    text-shadow: 0 0 14px rgba(106, 225, 255, 0.38);
}

.trade-status-ok strong { color: #83ffbd; }
.trade-status-bad strong { color: #ff7f91; }

.trade-steps {
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.trade-steps li {
    padding: 12px 14px;
    border: 1px solid rgba(92, 125, 220, 0.22);
    border-radius: 5px;
    background: rgba(8, 12, 27, 0.62);
}

.trade-warning {
    margin: 0 0 20px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 105, 145, 0.28);
    border-radius: 6px;
    background: rgba(53, 10, 25, 0.34);
    color: #ffdbe4;
}

.trade-actions {
    text-align: center;
}

/* ==========================================================================
   Downloads module — redesign
   ========================================================================== */

.downloads-support-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    padding: 14px 18px;
    border: 1px solid rgba(120, 140, 190, 0.22);
    border-radius: 4px;
    background: rgba(13, 17, 32, 0.72);
    text-decoration: none !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.downloads-support-banner:hover,
.downloads-support-banner:focus {
    border-color: rgba(120, 140, 190, 0.4);
    background: rgba(16, 21, 39, 0.85);
    text-decoration: none !important;
}

.downloads-support-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.1);
    color: #8fa3c4;
}

.downloads-support-icon svg {
    width: 18px;
    height: 18px;
}

.downloads-support-text {
    flex: 1 1 auto;
    min-width: 180px;
    color: #8fa0c2;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.downloads-support-text strong {
    display: block;
    color: #dbe4f5;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.downloads-support-cta {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 4px;
    background: transparent;
    color: #c3cee3 !important;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.downloads-support-banner:hover .downloads-support-cta {
    border-color: rgba(190, 205, 230, 0.6);
    color: #fff !important;
}

.downloads-intro {
    margin: 0 0 16px;
    color: #8b96b0;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
}

.download-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.download-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 16px 20px 16px 22px;
    border: 1px solid rgba(82, 96, 130, 0.25);
    border-left: 2px solid rgba(120, 140, 190, 0.4);
    border-radius: 4px;
    background: rgba(15, 19, 36, 0.6);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.download-card:hover {
    border-color: rgba(120, 140, 190, 0.45);
    border-left-color: rgba(150, 175, 220, 0.75);
    background: rgba(18, 23, 43, 0.75);
}

.download-card-main {
    flex: 1 1 260px;
    min-width: 0;
}

.download-card-title {
    margin-bottom: 3px;
    color: #e4e9f5;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1px;
}

.download-card-desc {
    color: #838ea8;
    font-family: "Open Sans", sans-serif;
    font-size: 12.5px;
    line-height: 1.5;
}

.download-card-desc img {
    display: none;
}

.download-card-side {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 16px;
}

.download-card-size {
    color: #6d7996;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.download-card-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 9px 18px !important;
    border: 1px solid rgba(90, 120, 190, 0.5) !important;
    border-radius: 4px !important;
    background: rgba(45, 66, 120, 0.55) !important;
    color: #eef2fb !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.download-card-btn svg {
    width: 14px;
    height: 14px;
}

.download-card-btn:hover,
.download-card-btn:focus {
    border-color: rgba(130, 165, 230, 0.75) !important;
    background: rgba(58, 84, 148, 0.75) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.download-grid--compact .download-card {
    padding: 13px 18px 13px 20px;
}

.download-card--compact .download-card-title {
    font-size: 14px;
}

@media (max-width: 640px) {
    .downloads-support-banner {
        flex-wrap: wrap;
    }

    .download-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .download-card-side {
        justify-content: space-between;
        width: 100%;
    }
}