/* Site Logo */
.site-logo {
  position: absolute;
  /* no ocupa espacio en el flujo */
  top: 120px;
  /* ajustá a gusto */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;

  display: flex;
  flex-direction: column;
  /* subtítulo arriba del logo */
  align-items: center;
  /* centrado horizontal */
  justify-content: center;
  gap: 0px;
  /* distancia entre subtítulo y logo */

  overflow: visible;
  pointer-events: none;
  /* no bloquea clics de lo de abajo */
}

.logo-announcement {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.2rem;
  font-weight: 600;
  text-align: center;
  color: #f5e7c5;
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 14px;
  border: 1px solid rgba(215, 180, 106, 0.4);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);

  margin-top: 50px;
  /* 👈 solo baja el anuncio, no afecta el subtítulo ni el logo */
}

/* Cards */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: var(--shadow);
  padding: 5px;
  display: block;
  color: inherit;
  text-decoration: none
}

#main .card__body+.card__title {
  margin-top: 12px;
}

.card.link:hover {
  outline: 1px solid var(--accent)
}

.card__title {
  margin: 0 0 0px 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  letter-spacing: .5px;
  color: #be9f7a;
}

.card__body--flow>*+* {
  margin-top: 10px;
}

.card__body--flow .card__title {
  margin: 0;
}

.card__body--flow .card__title+p {
  margin-top: 10px;
}

.card__body {
  font-size: 1.05rem;
  line-height: 1.5
}

.card__body.small {
  font-size: .95rem;
  color: var(--muted)
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px
}

#main .card {
  background: radial-gradient(120% 120% at 50% 0%, #5a191e 0%, #221012 40%, #49161a 100%);
  background: radial-gradient(120% 120% at 50% 0%, #772b2b 0%, #361010 40%, #6b2b2b 100%);

  border: 1px solid rgba(215, 180, 106, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 18px rgba(0, 0, 0, .28);
  color: #e9e1d3;
  padding: 20px;
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

/* Fuente y color base globales */
body {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  color: var(--gold-base);
  /* mismo dorado que shiny-text */
  background: #270f0d;
  background: #130706;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px
}

/* =TOPBAR= */
#topbar {
  width: 100%;
  position: relative;
  z-index: 3;

  /* Fondo igual al footer */
  background: linear-gradient(180deg, #5f1d24, #2e1518 80%);
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.25);
  /* sombra hacia adentro */
}


/* Contenido centrado y en grilla dentro del header */
.topbar-inner {
  display: flex;
  /* más simple que grid */
  justify-content: space-between;
  /* menú a la izquierda, botón a la derecha */
  align-items: center;
  gap: 16px;

  max-width: 1200px;
  margin: 0 auto;
  padding: 0px 5px;
}

/* Alineaciones internas iguales a las que ya tenías */
.topbar-inner nav {
  justify-self: start;
}

.topbar-inner .actions {
  justify-self: end;
  display: flex;
  gap: 10px;
}

.topbar-logo {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.topbar-logo img {
  max-height: 50px;
  width: auto;
  display: block;
}

/* =/TOPBAR= */

/* Navegación */
.menu {
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0
}

.menu a {
  font-weight: 5000;
  color: var(--text);
  text-decoration: none
}

.menu a:hover {
  color: var(--accent)
}

.menu li a {
  display: flex;
  flex-direction: column;
  /* apila verticalmente ícono + texto */
  align-items: center;
  /* centra todo horizontalmente */
  gap: 6px;
  /* separación entre imagen y texto */
  text-align: center;
}

.menu-icon {
  width: 28px;
  /* ajustá tamaño según se vea mejor */
  height: auto;
  display: block;
}

/* Layout */
#layout {
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  gap: 5px;
  padding: 22px 0
}

#layout {
  position: relative;
  z-index: 2;
  margin-top: -300px;
  /* sube el layout 150px sobre el video */
}

#col-left,
#col-right {
  display: flex;
  flex-direction: column;
  gap: 5px
}

/* Main */
#main .card {
  margin-bottom: 5px;
  padding: 20px;
  font-weight: 450
}

/* Inputs */
#login-box input {
  width: 100%;
  padding: 10px;
  border-radius: 0;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  margin-bottom: 10px
}

/* Card imágenes */
.card-image {
  padding: 0
}

.card-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  transition: filter .3s ease
}

.card-image:hover img {
  filter: brightness(1.15)
}

/* Footer */
#footer {
  width: 100%;
  padding: 24px 0;
  background: linear-gradient(180deg, #5f1d24, #2e1518 80%);
  /* degrade burdeo oscuro */
  border-top: 2px solid #c79557;
  /* línea dorada fina, como detalle */
  color: #f5f0e6;
  /* texto crema claro */
  font-size: 1rem;
  text-align: center;
  letter-spacing: 0.5px;
  /* da un aire más elegante */
  font-family: "Cormorant Garamond", serif;
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.25);
  /* sutil relieve hacia adentro */
}

#footer span {
  color: #d6b06a;
  /* dorado tenue para resaltar alguna parte si quieres */
}

/* =BLOQUE DESCARGAS= */
#downloads {
  position: relative;
  overflow: hidden;
}

#downloads img {
  display: block;
  width: 100%;
  height: auto;
}

#downloads::after,
#downloads::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  --t: 3px;
  --len: 24%;
  --d: 4s;
  --c: 255, 0, 0;

  width: var(--len);
  height: var(--t);
  border-radius: 999px;

  background: linear-gradient(90deg,
      rgba(var(--c), 0) 0%,
      rgba(var(--c), .9) 50%,
      rgba(var(--c), 0) 100%);
  filter:
    drop-shadow(0 0 6px rgba(var(--c), .55)) drop-shadow(0 0 14px rgba(var(--c), .35));
  mix-blend-mode: screen;

  offset-path: inset(0);
  offset-rotate: auto;
  animation: orbit var(--d) linear infinite;
  will-change: offset-distance, transform;
}

#downloads::before {
  animation-delay: calc(var(--d) / -2);
}

@keyframes orbit {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

#downloads img {
  animation: pulseSaturate 2.0s ease-in-out infinite;
}

@keyframes pulseSaturate {

  0%,
  100% {
    filter: saturate(100%);
  }

  50% {
    filter: saturate(150%);
  }
}

/* =/BLOQUE DESCARGAS= */

/* =BLOQUE RANKING= */
.card.ranking {
  background: radial-gradient(120% 120% at 50% 0%, #5f1d24 0%, #2e1518 40%, #331e1e 100%);
  border: 1px solid rgba(215, 180, 106, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 18px rgba(0, 0, 0, .28);
  color: #e9e1d3;
  padding: 0;
}

.ranking__title {
  margin: 0;
  padding: 10px 14px 4px;
  /* ↓ menos espacio abajo */
  font-family: "Cinzel Decorative", serif;
  letter-spacing: 1px;
  font-weight: 600;
  color: #e9e1d3;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
  border-bottom: none;
  position: relative;
  text-align: center;
}

.ranking__list {
  list-style: none;
  margin: 0;
  padding: 10px 10px 6px;
}

.ranking__list li {
  display: grid;
  grid-template-columns: 34px 1fr 22px 70px;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .08));
}

.ranking__list li:last-child {
  border-bottom: 0;
}

.ranking__list .pos {
  color: #d6b06a;
  font-weight: 600;
  text-align: right;
}

.ranking__list .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.ranking__list .lvl {
  text-align: right;
  color: #cdbca0;
  font-weight: 600;
}

.badge.gem {
  width: 18px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .25),
    inset 0 -1px 1px rgba(0, 0, 0, .35),
    0 0 0 1px rgba(0, 0, 0, .35);
  position: relative;
}

.badge.gem::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 55%);
  mix-blend-mode: screen;
  border-radius: 3px;
  pointer-events: none;
}

.badge.gem.blue {
  background: linear-gradient(180deg, #3177c9 0%, #0d3f7a 100%);
}

.badge.gem.gold {
  background: linear-gradient(180deg, #f1d17a 0%, #b98a3b 100%);
}

.ranking__more {
  display: block;
  text-align: right;
  padding: 8px 12px 12px;
  color: #d6b06a;
  text-decoration: none;
  font-weight: 600;
}

.ranking__more:hover {
  text-decoration: underline;
}

.ranking__divider {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
  margin: 0;
  padding: 0;
  height: 16px;
  /* altura de “ventana de recorte” */
  overflow: hidden;
  /* recorta lo que se pase */
}

.ranking__divider img {
  display: block;
  width: 100%;
  /* que llene el ancho disponible */
  max-width: 220px;
  /* límite máximo */
  height: auto;
  /* mantiene proporción natural */
  object-fit: cover;
  /* si sobra en vertical, se recorta */
  opacity: .95;
}

/* =/BLOQUE RANKING= */

/* =SERVER STATS= */

#players-online.card.stats {
  position: relative;
  z-index: 2;

  /* Capas:
     - base burdeos oscura
     - banda roja (da cuerpo)
     - “halo” en los BORDES (centro transparente)
  */
  background:
    /* HALO en bordes: centro transparente → brillo en periferia */
    radial-gradient(130% 100% at 50% 50%,
      rgba(255, 150, 110, 0.00) 55%,
      rgba(255, 150, 110, 0.18) 78%,
      rgba(235, 130, 88, 0.329) 100%),
    /* banda roja viva horizontal (no muy clara en el centro) */
    linear-gradient(90deg,
      #3b0f12 0%,
      #740d0d 18%,
      #750703 50%,
      #661414 82%,
      #3b0f12 100%),
    /* base burdeos oscura */
    #2e1518;

  /* Borde dorado más vivo + brillo desde los bordes hacia adentro */
  border: 1px solid rgba(215, 180, 106, 0.55);
  box-shadow:
    inset 0 0 42px rgba(255, 190, 130, 0.40),
    /* halo desde los bordes */
    inset 0 0 90px rgba(255, 110, 80, 0.22),
    /* resplandor amplio */
    0 8px 18px rgba(0, 0, 0, .35);

  padding: 16px 10px 2px;
  /* ajustá para la altura del rectángulo */
  overflow: visible;
}

#players-online .stats__wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  /* ← más juntas */
  margin-top: -40px;
  /* siguen saliendo por arriba, ajustá a gusto */
  margin-bottom: -28px;
  /* ← sobresalen por ABAJO del rectángulo */
  pointer-events: none;
  /* decorativas; borralo si querés clics */
}

#players-online .flag {
  display: block;
  height: 220px;
  /* tamaño grande (subí o bajá según te guste) */
  width: auto;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45));
  pointer-events: auto;
  /* re-habilita clics en cada imagen si quitaste el de arriba */
}

#players-online .flag--left {
  transform: translateY(10px);
}

#players-online .flag--mid {
  transform: translateY(10px);
}

#players-online .flag--right {
  transform: translateY(10px);
}


/* Números sobre las banderas */
.flag-wrap {
  position: relative;
  display: inline-block;
}

.flag-number {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  font-size: 1.8rem;
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, .8);
  pointer-events: none;
}

.flag--left .flag-number {
  color: #3ea2ff;
}

.flag--mid .flag-number {
  color: #33ff66;
}

.flag--right .flag-number {
  color: #c28aff;
}

/* =LOGIN= */
.login-card {
  --login-field-h: 34px;
  --login-text-nudge: 4px;

  position: relative;
  overflow: visible;
  padding: 0;
  border: 1px solid rgba(215, 180, 106, .35);
  color: #e9e1d3;
  background:
    radial-gradient(120% 120% at 50% 0%, #2a1416 0%, #1c0f10 45%, #120a0a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 10px 22px rgba(0, 0, 0, .32);
}

.login-card__head {
  position: relative;
  padding: 40px 12px 0;
  text-align: center;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.login-card__title {
  margin: 0;
  position: relative;
  top: 4px;
  font-family: "Cinzel Decorative", serif;
  letter-spacing: 1px;
  font-weight: 700;
  color: #f0e8d7;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6);
}

.login-card__body {
  padding: 12px 12px 10px;
  background: transparent !important;
  box-shadow: none !important;
}

.login-card .login-field {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;

  height: var(--login-field-h);
  padding: 0 10px;
  margin: 6px 0;

  background: linear-gradient(90deg, #6d2727 0%, #5f1515 10%, #2e0606 40%, #290808 100%);
  border: 1px solid rgba(215, 180, 106, .28);
  border-radius: 0px;
  box-shadow: none;
}

.login-card .login-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35));
}

.login-card .login-field input {
  -webkit-appearance: none;
  appearance: none;
  display: block;

  width: 100%;
  height: var(--login-field-h);
  line-height: var(--login-field-h);
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;

  font-size: .92rem;
  color: #f7efe1;
  box-shadow: none;

  transform: translateY(var(--login-text-nudge));
}

.login-card .login-field input::placeholder {
  color: rgba(247, 239, 225, .75);
  line-height: var(--login-field-h);
}

#login-box input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #f7efe1 !important;
}

.login-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.login-row--links {
  margin: 6px 0 12px;
  justify-content: center;
}

.login-row--footer {
  margin-top: 12px;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.login-foot-text {
  color: #d2c6b0;
}

.login-link {
  color: #d6b06a;
  text-decoration: none;
}

.login-link:hover {
  text-decoration: underline;
}

.login-link.strong {
  font-weight: 600;
}

/* =BANNER= */
/* Thickness of the fade on each edge */
:root {
  --img-fade: 28px;
}

/* ajustá a gusto: menos px = fade más fuerte y pegado al borde */

/* Mantiene el bloque en flujo normal */
.fade-vertical,
.fade-horizontal {
  display: inline-block;
}

/* Fade arriba/abajo (aplicado al wrapper vertical) */
.fade-vertical {
  /* Standard */
  mask-image: linear-gradient(to bottom,
      transparent 0,
      transparent calc(var(--img-fade) * 0.4),
      #000 var(--img-fade),
      #000 calc(100% - var(--img-fade)),
      transparent calc(100% - var(--img-fade) * 0.6),
      transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;

  /* WebKit */
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0,
      transparent calc(var(--img-fade) * 0.4),
      #000 var(--img-fade),
      #000 calc(100% - var(--img-fade)),
      transparent calc(100% - var(--img-fade) * 0.6),
      transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

/* Fade izquierda/derecha (aplicado al wrapper horizontal) */
.fade-horizontal {
  /* Standard */
  mask-image: linear-gradient(to right,
      transparent 0,
      transparent calc(var(--img-fade) * 0.4),
      #000 var(--img-fade),
      #000 calc(100% - var(--img-fade)),
      transparent calc(100% - var(--img-fade) * 0.6),
      transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;

  /* WebKit */
  -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      transparent calc(var(--img-fade) * 0.4),
      #000 var(--img-fade),
      #000 calc(100% - var(--img-fade)),
      transparent calc(100% - var(--img-fade) * 0.6),
      transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

/* La imagen conserva su tamaño y redondeo si querés */
.card__image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
  /* opcional; podés quitarlo si querés bordes rectos */
}

/* =/BANNER= */

/* =REGISTRARSE= */
.register-form {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  max-width: 350px;
  /* más compacto */
  margin: 0 auto;
  /* centra todo el formulario */
  text-align: left;
}

.register-form input[type="text"],
.register-form input[type="password"] {
  padding: 6px;
  border: 1px solid #c9a15f;
  border-radius: 4px;
  background-color: #2a1a1a;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
}

.btn-register {
  margin: 0em auto 0 auto;
  /* centra el botón */
  padding: 4px 20px;
  background: linear-gradient(180deg, #d4af37 0%, #b8860b 100%);
  border: 2px solid #8b6508;
  border-radius: 6px;
  color: #2a1a1a;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
  text-transform: uppercase;
  width: auto;
  /* se ajusta al contenido */
  min-width: 150px;
  /* tamaño mínimo */
}

.btn-register:hover {
  background: linear-gradient(180deg, #ff3c00 0%, #daa520 100%);
  transform: scale(1.05);
}

.card__body a {
  color: #e0c48f;
  /* dorado suave, similar al borde */
  text-decoration: underline;
}

.card__body a:hover {
  color: #fff2b0;
  /* un poco más claro al pasar el mouse */
}

/* ======================== Field validation messages ======================== */
.msg-field {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  /* separación con su propio input */
  margin-bottom: 12px;
  /* MÁS aire antes del siguiente campo */
  font-family: "Cormorant Garamond", serif;
  font-size: .95rem;
  line-height: 1.25;
  opacity: .95;
}

.msg-field .icon {
  font-weight: 700;
  display: inline-block;
  min-width: 14px;
  color: currentColor;
  /* el ícono toma el color del estado */
}

/* Estados */
.msg-field.is-error {
  color: #e57373;
}

/* rojo suave */
.msg-field.is-ok {
  color: #48c774;
}

/* VERDE ✔ bien visible */
.msg-field.is-hint {
  color: #e6d9c8;
}

/* dorado suave para ayuda */

/* Resaltado de inputs según estado (opcional) */
input.is-error {
  outline: none;
  border: 1px solid rgba(180, 40, 40, .60) !important;
  box-shadow: 0 0 0 2px rgba(180, 40, 40, .18);
}

input.is-ok {
  outline: none;
  border: 1px solid rgba(72, 199, 116, .60) !important;
  /* combina con el verde ✔ */
  box-shadow: 0 0 0 2px rgba(72, 199, 116, .15);
}

/* === Overrides de validación (forzamos color y separación) === */
.register-form .msg-field {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0px;
  /* antes 6px: más pegado al input */
  margin-bottom: 10px;
  /* antes 14px: aún deja respiro hacia el próximo campo */
  font-family: "Cormorant Garamond", serif;
  font-size: .95rem;
  line-height: 1.15;
  /* un pelín más compacto */
  opacity: .98;
}

/* En caso de que algún estilo global añada margen inferior a los inputs,
   lo anulamos dentro del formulario de registro para que el mensaje quede pegadito */
.register-form input.is-ok,
.register-form input.is-error {
  margin-bottom: 0;
}


.register-form .msg-field .icon {
  font-weight: 700;
  min-width: 14px;
  color: currentColor !important;
  /* el ícono toma el color del estado */
}

/* Colores por estado (forzados) */
.register-form .msg-field.is-ok {
  color: #48c774 !important;
}

/* ✔ verde */
.register-form .msg-field.is-error {
  color: #e57373 !important;
}

/* ✖ rojo */
.register-form .msg-field.is-hint {
  color: #e6d9c8 !important;
}

/* hint suave */

/* Resaltado de inputs (opcional) */
.register-form input.is-ok {
  border: 1px solid rgba(72, 199, 116, .60) !important;
  box-shadow: 0 0 0 2px rgba(72, 199, 116, .15);
}

.register-form input.is-error {
  border: 1px solid rgba(180, 40, 40, .60) !important;
  box-shadow: 0 0 0 2px rgba(180, 40, 40, .18);
}

/* Asegura que el email tenga EXACTAMENTE el mismo look que los demás */
.register-form input[type="text"],
.register-form input[type="password"],
.register-form input[type="email"] {
  /* copia aquí las mismas propiedades que ya uses en tus inputs */
  background: #231010;
  /* ejemplo: mismo fondo que las otras cajas */
  color: #f4ece4;
  border: 1px solid #7a5a32;
  border-radius: 6px;
  padding: 10px 12px;
  width: 100%;
  outline: none;
}

/* /=REGISTRARSE= */