.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 {
    /* Ancho fijo (el mismo 599px de style73.css). Antes era 90vw y el
       modal cambiaba de tamano con la ventana. */
    max-width: 599px;
    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;
    /* OJO: aca habia "overflow-x: hidden" (y "overflow-y: hidden" en body).
       Eso recortaba todo lo que sobresalia del ancho de la ventana y, sobre
       todo, IMPEDIA que apareciera la barra de scroll horizontal: en pantallas
       angostas el diseno quedaba cortado y no habia forma de llegar a el.
       Ahora el desbordamiento se gestiona en static-layout.css, que deja el
       scroll horizontal habilitado. */
}

.wrapper {
    background: transparent;
    z-index: 2;
}

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: ver css/navbar.css */

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

.seo-hero-copy {
    position: absolute !important;
    z-index: 5 !important;
    left: 0 !important;
    right: 0 !important;
    top: 548px !important;
    text-align: center !important;
    pointer-events: none;
}

.seo-hero-copy h1 {
    margin: 0 !important;
    color: rgba(169, 187, 204, 0.78) !important;
    font-family: "Exo 2", "Open Sans", sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

.seo-hero-copy p {
    margin: 6px auto 0 !important;
    max-width: 780px !important;
    color: rgba(126, 148, 170, 0.72) !important;
    font-family: "Exo 2", "Open Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.78) !important;
}

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

/* Resplandor del banner — se derrama hasta los bordes de la ventana.
   -------------------------------------------------------------------
   HISTORIA DEL BUG (para que no se repita):
   Originalmente esta caja media 1800px fijos con left:50% y
   translateX(-50%), asi que sobre un .header de 1200px sus bordes
   caian en -300px y 1500px. En PC se veia bien, pero rompia el
   celular: el area scrolleable SOLO crece hacia la derecha, o sea
   que los 300px que sobraban por la izquierda quedaban recortados
   sin scroll, y el documento pasaba a medir 1500px. El telefono
   encajaba esos 1500px en la pantalla y el diseno real terminaba
   ocupando el 80%, con una franja muerta a la derecha.

   COMO SE RESUELVE AHORA:
   La caja mide el ancho de la VENTANA, nunca mas:
     width: max(1200px, 100vw - 24px)
     - En PC se estira hasta los bordes -> vuelve el derrame de antes.
     - En el celular el viewport son 1200px fijos, asi que da 1200
       exactos: encaja con el diseno y no desborda.
     - Si achicas la ventana en PC, el max() la deja en 1200 y no
       agrega scroll horizontal extra (el .wrapper ya mide 1200).
   Los -24px descuentan la barra de scroll vertical: 100vw la incluye
   y sin ese margen sobraban ~8px que sacaban una barra horizontal.
   No se nota, porque lo que se ve del resplandor lo define la imagen
   de 1800px centrada, no el borde de la caja.

   La imagen y la mascara van dimensionadas a 1800px y centradas, asi
   que se dibujan siempre igual sin importar cuanto mida la caja. Por
   eso la mascara vuelve a los 18%/82% originales.
   ------------------------------------------------------------------- */
.header::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: max(1200px, calc(100vw - 24px));
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    background: url("../assets-local/img/hero-mastermu-bg-v4.jpg") center top / 1800px 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-size: 1800px 100%, 100% 100%;
    -webkit-mask-position: center top, center top;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -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-size: 1800px 100%, 100% 100%;
    mask-position: center top, center top;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: intersect;
}

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

/* .top-panel: ver css/navbar.css */

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

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

/* Particulas del hero.
   Antes eran 15 puntos de 3px con opacidad maxima .62: practicamente
   no se veian sobre el banner. Ahora son 28, mas grandes, con nucleo
   blanco y halo de color, y llegan a opacidad 1. */
.hero-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    /* Nucleo blanco + halo de color: lo que las hace visibles sobre
       una imagen tan cargada como el banner. */
    background: radial-gradient(circle, #ffffff 0%, rgba(122, 230, 255, 0.95) 45%, rgba(122, 230, 255, 0) 100%);
    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.75),
        0 0 18px rgba(122, 230, 255, 0.9),
        0 0 34px rgba(122, 230, 255, 0.45);
    opacity: 0;
    animation: heroParticleDrift 12s linear infinite;
    will-change: transform, opacity;
}

.hero-particles span:nth-child(3n) {
    background: radial-gradient(circle, #ffffff 0%, rgba(85, 255, 190, 0.95) 45%, rgba(85, 255, 190, 0) 100%);
    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.7),
        0 0 18px rgba(85, 255, 190, 0.85),
        0 0 34px rgba(85, 255, 190, 0.4);
}

.hero-particles span:nth-child(4n) {
    background: radial-gradient(circle, #fff2ec 0%, rgba(255, 120, 90, 0.95) 45%, rgba(255, 120, 90, 0) 100%);
    box-shadow:
        0 0 6px rgba(255, 220, 200, 0.7),
        0 0 18px rgba(255, 110, 80, 0.85),
        0 0 34px rgba(255, 110, 80, 0.4);
}

.hero-particles span:nth-child(7n) {
    background: radial-gradient(circle, #fffdf0 0%, rgba(255, 205, 90, 0.95) 45%, rgba(255, 205, 90, 0) 100%);
    box-shadow:
        0 0 6px rgba(255, 245, 210, 0.75),
        0 0 20px rgba(255, 195, 70, 0.9),
        0 0 38px rgba(255, 195, 70, 0.45);
}

/* Unas cuantas mas grandes, para dar profundidad. */
.hero-particles span:nth-child(5n) { width: 6px; height: 6px; }
.hero-particles span:nth-child(8n) { width: 7px; height: 7px; }

.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; }
.hero-particles span:nth-child(16) { left: 4%;  top: 62%; animation-delay: -2s;  animation-duration: 16s; }
.hero-particles span:nth-child(17) { left: 16%; top: 33%; animation-delay: -14s; animation-duration: 20s; }
.hero-particles span:nth-child(18) { left: 24%; top: 82%; animation-delay: -7s;  animation-duration: 13s; }
.hero-particles span:nth-child(19) { left: 31%; top: 55%; animation-delay: -3s;  animation-duration: 17s; }
.hero-particles span:nth-child(20) { left: 44%; top: 45%; animation-delay: -9s;  animation-duration: 14s; }
.hero-particles span:nth-child(21) { left: 59%; top: 84%; animation-delay: -5s;  animation-duration: 18s; }
.hero-particles span:nth-child(22) { left: 66%; top: 28%; animation-delay: -13s; animation-duration: 21s; }
.hero-particles span:nth-child(23) { left: 77%; top: 55%; animation-delay: -1s;  animation-duration: 15s; }
.hero-particles span:nth-child(24) { left: 84%; top: 34%; animation-delay: -8s;  animation-duration: 19s; }
.hero-particles span:nth-child(25) { left: 94%; top: 72%; animation-delay: -6s;  animation-duration: 16s; }
.hero-particles span:nth-child(26) { left: 41%; top: 30%; animation-delay: -15s; animation-duration: 22s; }
.hero-particles span:nth-child(27) { left: 9%;  top: 86%; animation-delay: -10s; animation-duration: 14s; }
.hero-particles span:nth-child(28) { left: 97%; top: 48%; animation-delay: -12s; animation-duration: 20s; }

@keyframes heroParticleDrift {
    0% {
        transform: translate3d(0, 38px, 0) scale(0.4);
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    55% {
        opacity: 0.85;
    }
    80% {
        opacity: 0.5;
    }
    100% {
        transform: translate3d(34px, -260px, 0) scale(1.5);
        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 {
    order: 2 !important;
    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: 374px !important;
    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
   ========================================================= */

/* 3 tarjetas de 398px + 2 gaps. Con gap 4px sumaban 1202px y se
   pasaban 2px de los 1200 del diseno; con 2px entran exactas. */
.fast-button {
    gap: 2px;
}

.cs-winner-card {
    order: 1 !important;
    position: relative;
    overflow: hidden;
    width: 448px !important;
    height: 125px;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 74px;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    border: 1px solid rgba(255, 175, 67, 0.62);
    border-radius: 10px;
    background: #050810;
    color: #fff;
    text-decoration: none !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 122, 58, 0.16), inset 0 0 34px rgba(255, 92, 62, 0.16);
}

.cs-winner-card:hover {
    color: #fff !important;
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), 0 0 34px rgba(255, 175, 67, 0.28), inset 0 0 38px rgba(255, 92, 62, 0.18);
}

.cs-winner-bg {
    position: absolute;
    inset: 0;
    background: url("../assets-local/img/castle-winner-card-bg-v1.jpg") 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: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    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 {
    order: 3 !important;
    width: 374px !important;
    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 {
    order: 3 !important;
    width: 374px !important;
    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.jpg") 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: la clase ya no existe. Los botones de sesion del
   navbar se maquetan en css/navbar.css (.top-panel .nav-actions .nav-btn)
   y usan clase propia justamente para no caer en el .button de aca
   arriba, que va con !important para ganarle a bootstrap.
   Lo que habia en este lugar eran medidas viejas (86x40, margin 10px)
   que navbar.css tenia que anular una por una. */

.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;
}

/* Bloque responsive eliminado: el diseno es estatico (1200px fijos),
   las tarjetas de descarga nunca se apilan. Ver static-layout.css. */

/* Navbar: TODA la maqueta de la barra superior vive en css/navbar.css.
   Los reseteos de pagina (html/body margin, ancho del .header) se
   mudaron a css/static-layout.css, que es el archivo de maqueta y se
   carga despues de este. Estaban escritos tres veces. */