@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&display=swap');

/*!
 =========================================================
 * Template FullNet - sobre la estructura de WebEngine CMS
 =========================================================
 *
 * TODO lo nuestro va en este archivo. Se carga DESPUES de style.css,
 * profiles.css y castle-siege.css, asi que gana sobre los tres sin
 * necesidad de tocarlos. Si algo aca se rompe, se borra el bloque y el
 * sitio vuelve al aspecto original: no hay nada editado en el resto.
 *
 * Estetica: retro / nostalgia. Paneles con bisel duro como la web vieja,
 * tipografia de pixeles SOLO en titulos (en textos largos es ilegible),
 * y las ilustraciones estilo anime como protagonistas.
 =========================================================
*/

:root {
	--fn-tinta:      #14101c;   /* fondo profundo, violeta casi negro */
	--fn-panel:      #1e1830;
	--fn-panel-alto: #2a2142;
	--fn-borde:      #0b0812;
	--fn-luz:        #4a3b6e;   /* brillo del bisel */
	--fn-oro:        #f2b134;
	--fn-oro-hondo:  #b8791a;
	--fn-texto:      #e8e2f0;
	--fn-suave:      #a99cc4;
}

/* ==========================================================================
   LA PALETA DEL TEMPLATE
   --------------------------------------------------------------------------
   style.css no tiene los colores escritos a mano: los saca de ~65 variables
   declaradas en su :root. Redefinirlas aca alcanza para repintar TODO el
   sitio de una sola vez (navbar, contenedor, tablas, inputs, botones, pie,
   rankings, usercp) sin pelear especificidad regla por regla.

   El comentario de cada linea es el del template original, para poder
   cruzarlo con style.css cuando algo no quede como esperabamos.
   ========================================================================== */

:root {
	--webenginebg1: #14101c;   /* background color */
	--webenginebg2: #1a1528;   /* container background color */
	--webenginebg3: #120e1c;   /* footer background color */

	--webenginecolor1: #f2b134; /* primary highlight color */
	--webenginecolor2: #e8e2f0; /* default text color */

	--webenginecolor3: #f2b134; /* links */
	--webenginecolor4: #ffd76e; /* links hover */

	--webenginecolor5: #2a2142; /* panel header */
	--webenginecolor6: #f2b134; /* panel header text */
	--webenginecolor7: #0b0812; /* panel header border */

	--webenginecolor8:  #2a2142; /* button background */
	--webenginecolor9:  #e8e2f0; /* button text */
	--webenginecolor10: #0b0812; /* button border */

	--webenginecolor11: #f2b134; /* button background hover */
	--webenginecolor12: #14101c; /* button text hover */
	--webenginecolor13: #0b0812; /* button border hover */

	--webenginecolor14: #a99cc4; /* footer text color, alt text color, drop shadows */
	--webenginecolor63: #2a2142; /* footer hr color */

	--webenginecolor15: #0f0b18; /* input background */
	--webenginecolor16: #2a2142; /* input border, borders, shadows */
	--webenginecolor17: #e8e2f0; /* input text color */
	--webenginecolor18: #f2b134; /* input border hover */

	--webenginecolor19: #cbbfe4; /* navbar link */
	--webenginecolor20: #f2b134; /* navbar link hover */

	--webenginecolor21: #2a2142; /* news footer border */
	--webenginecolor22: #1e1830; /* news background */
	--webenginecolor23: #a99cc4; /* news footer text color */

	--webenginecolor24: #1e1830; /* rankings menu bg */
	--webenginecolor25: #a99cc4; /* rankings menu link color */
	--webenginecolor26: #f2b134; /* rankings menu link color active, border color */

	--webenginecolor27: #1e1830; /* table background, panel background */
	--webenginecolor28: #241d38; /* alt table background */

	--webenginecolor29: #241d38; /* paypal gateway bg */
	--webenginecolor30: #f2b134; /* paypal gateway border */
	--webenginecolor31: #1e1830; /* paypal gateway alt bg */
	--webenginecolor32: #f2b134; /* paypal gateway input text and border */

	--webenginecolor33: #cbbfe4; /* usercp sidebar link color */

	--webenginecolor34: #0b0812; /* global top bar background */
	--webenginecolor35: #a99cc4; /* global top bar text color */
	--webenginecolor36: #ff6b6b; /* global top bar logout link color */
	--webenginecolor37: #cbbfe4; /* global top bar link color */
	--webenginecolor38: #f2b134; /* global top bar link color hover */

	--webenginecolor39: #1e1830; /* language selection background */
	--webenginecolor40: #a99cc4; /* language selection link color */
	--webenginecolor41: #f2b134; /* language selection link hover */

	/* El bloque de "Server Time / Online Users" va encima de la imagen del
	   banner, asi que sigue siendo casi todo negro translucido. */
	--webenginecolor42: rgba(0, 0, 0, 0.55);      /* header server info background */
	--webenginecolor43: rgba(242, 177, 52, 0.25); /* header server info border */
	--webenginecolor44: #a99cc4;                  /* header server info text color */
	--webenginecolor45: rgba(0, 0, 0, 0.7);       /* header server info box shadow */
	--webenginecolor46: #000000;                  /* header server info text shadow */
	--webenginecolor47: #ffffff;                  /* header server info time text */
	--webenginecolor48: #cbbfe4;                  /* header server info date text */
	--webenginecolor49: #63ff5a;                  /* header server info online count text */
	--webenginecolor50: #000000;                  /* header server info online bar bg */
	--webenginecolor51: #4a3b6e;                  /* header server info online bar border */
	--webenginecolor52: #63ff5a;                  /* header server info online progress bar bg */
	--webenginecolor53: #000000;                  /* header server info */

	--webenginecolor54: #1e1830;            /* my account character block bg */
	--webenginecolor55: rgba(0, 0, 0, 0.5); /* my account character block box shadow */
	--webenginecolor56: #000000;            /* my account character block img box shadow */
	--webenginecolor57: #a99cc4;            /* my account character block location text color */
	--webenginecolor58: rgba(0, 0, 0, 0.5); /* my account character block level bg */
	--webenginecolor59: #ffffff;            /* my account character block level text color */
	--webenginecolor60: #f2b134;            /* my account character block name text color */

	--webenginecolor61: #e8e2f0;             /* rankings class filter text color */
	--webenginecolor62: rgba(0, 0, 0, 0.45); /* rankings class filter image box shadow */
}

/* ---------- base ---------- */

/* EL FONDO.
   WebEngine trae img/background.jpg: la ilustracion roja del MU original,
   pegada arriba al centro y sin repetir. Con la paleta oscura quedaba un
   parche rojo asomando a los costados del contenedor (que mide 1040px fijos)
   y se notaba muchisimo al alejar el zoom. Va afuera.

   Lo que queda en su lugar son tres capas dibujadas por CSS, sin archivo:
   un resplandor dorado tenue detras del encabezado, una trama de puntos de
   4px que hace de textura, y el degrade de base. Pesa cero y no compite con
   la ilustracion del hero, que es lo que queremos que se mire.

   El !important es porque style.css repite el fondo con !important adentro
   de un @media (min-width: 2000px). Sin eso, en un monitor grande volvia a
   aparecer la imagen roja. */
body {
	background-color: var(--fn-tinta) !important;
	background-image:
		radial-gradient(ellipse 1200px 520px at 50% 0%, rgba(242, 177, 52, 0.10), rgba(242, 177, 52, 0) 70%),
		radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(180deg, #221a36 0%, #14101c 55%, #100c18 100%) !important;
	background-repeat: no-repeat, repeat, no-repeat !important;
	background-size: 100% 620px, 4px 4px, 100% 100% !important;
	background-position: top center, top left, top center !important;
	background-attachment: scroll, scroll, fixed !important;
	color: var(--fn-texto);
}

/* Titulos en pixeles. Interlineado generoso: esta fuente no respira sola. */
h1, h2, h3, .fn-pixel {
	font-family: 'Press Start 2P', 'Courier New', monospace;
	line-height: 1.7;
	letter-spacing: 0.5px;
}

h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 13px; }

a { color: var(--fn-oro); }
a:hover, a:focus { color: #ffd76e; text-decoration: none; }

/* ---------- bisel retro reutilizable ---------- */

.fn-bisel {
	background: var(--fn-panel);
	border: 3px solid var(--fn-borde);
	box-shadow:
		inset 2px 2px 0 var(--fn-luz),
		inset -2px -2px 0 #120d1e,
		0 3px 0 var(--fn-borde);
}

/* ---------- bienvenida de la portada ---------- */

/* El hero va al mismo ancho que el resto del sitio (1040px fijos, lo define
   el template). A sangre se veia mas imponente, pero como la altura esta
   acotada, cuanto mas ancha la pantalla mas recorte: en un monitor grande
   terminabas viendo solo la cabeza del boss. */
#fn-hero {
	position: relative;
	max-width: 1040px;
	margin: 0 auto 22px auto;
	border: 3px solid var(--fn-borde);
	box-shadow: inset 2px 2px 0 var(--fn-luz), 0 4px 0 var(--fn-borde);
	overflow: hidden;
	background: #000;
}

/* ---------- las dos fotos que se alternan ----------
   Van apiladas: la de la batalla en el flujo normal (es la que le da el alto
   al bloque) y la de Lorencia encima, en absoluto. Lo unico que se anima es
   la opacidad de la de arriba, que es lo mas barato que puede hacer el
   navegador: no recalcula nada, solo compone.

   Las dos miden 1376x768, asi que se superponen exactas sin tener que forzar
   medidas ni recortar.

   Los tiempos salen de los porcentajes: sobre 26 segundos, 12 los ocupa la
   batalla, 1 el fundido, 12 el picnic y 1 el fundido de vuelta.

   Para cambiar cuanto dura cada imagen alcanza con tocar el total y dejar los
   porcentajes como estan: el fundido queda siempre en un 4% del ciclo, que a
   26 segundos es 1 segundo justo. */

.fn-hero-fotos {
	position: relative;
}

.fn-hero-foto {
	display: block;
}

.fn-hero-foto-alt {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 0;
	animation: fn-hero-alternar 26s ease-in-out infinite;
}

@keyframes fn-hero-alternar {
	0%, 46%   { opacity: 0; }   /* batalla quieta, 12s  */
	50%, 96%  { opacity: 1; }   /* picnic quieto, 12s   */
	100%      { opacity: 0; }   /* fundidos de 1s cada uno */
}

/* A quien pidio menos movimiento en su sistema no le mareamos la portada:
   se queda con la batalla fija. */
@media (prefers-reduced-motion: reduce) {
	.fn-hero-foto-alt { animation: none; }
}

#fn-hero img {
	display: block;
	width: 100%;
	/* Sin recorte: la ilustracion se ve entera. Antes iba acotada a 430px con
	   object-fit cover y se comia la parte de abajo (las piernas de los
	   personajes). Como el bloque ahora esta encajonado a 1040px, la altura
	   natural (581px) es razonable. */
	height: auto;
	/* La ilustracion es dibujo plano: sin suavizado se mantiene nitida. */
	image-rendering: -webkit-optimize-contrast;
}


/* La placa ya no se superpone al dibujo: es una banda propia debajo. Asi la
   ilustracion se ve completa y el titulo se lee sobre fondo solido, sin
   depender de un degrade. */
.fn-hero-placa {
	padding: 15px 20px 17px 20px;
	text-align: center;
	background: var(--fn-panel);
	border-top: 3px solid var(--fn-borde);
	box-shadow: inset 0 2px 0 var(--fn-luz);
}

.fn-hero-placa h1 {
	margin: 0 0 10px 0;
	color: var(--fn-oro);
	/* Sombra dura, sin desenfoque: es el truco de los titulos de los juegos viejos */
	text-shadow: 3px 3px 0 var(--fn-borde);
}

.fn-hero-placa p {
	margin: 0 0 14px 0;
	color: var(--fn-suave);
	font-size: 13px;
}

/* ---------- botones ---------- */

.fn-btn {
	display: inline-block;
	margin: 0 5px 6px 5px;
	padding: 11px 20px;
	font-family: 'Press Start 2P', 'Courier New', monospace;
	font-size: 11px;
	color: var(--fn-tinta) !important;
	background: var(--fn-oro);
	border: 3px solid var(--fn-borde);
	box-shadow: inset 2px 2px 0 #ffdf94, 0 4px 0 var(--fn-oro-hondo);
	text-decoration: none;
	/* El "hundido" al apretar es lo que le da el tacto de boton viejo */
	transition: transform .05s linear, box-shadow .05s linear;
}

.fn-btn:hover, .fn-btn:focus { background: #ffc74f; color: var(--fn-tinta) !important; text-decoration: none; }

.fn-btn:active {
	transform: translateY(4px);
	box-shadow: inset 2px 2px 0 #ffdf94, 0 0 0 var(--fn-oro-hondo);
}

.fn-btn-alt {
	background: var(--fn-panel-alto);
	color: var(--fn-texto) !important;
	box-shadow: inset 2px 2px 0 var(--fn-luz), 0 4px 0 var(--fn-borde);
}

.fn-btn-alt:hover, .fn-btn-alt:focus { background: #372c56; color: #fff !important; }

@media (max-width: 767px) {
	.fn-hero-placa { padding: 10px 12px 12px 12px; }
	.fn-hero-placa h1 { font-size: 13px; }
	.fn-hero-placa p { font-size: 11px; margin-bottom: 9px; }
	.fn-btn { padding: 9px 13px; font-size: 9px; }
}

/* ---------- paneles del CMS ---------- */

.panel, .well, .list-group-item {
	background-color: var(--fn-panel);
	border-color: var(--fn-borde);
	color: var(--fn-texto);
}

.panel-heading {
	background-color: var(--fn-panel-alto) !important;
	border-bottom: 3px solid var(--fn-borde);
	color: var(--fn-oro);
	font-family: 'Press Start 2P', 'Courier New', monospace;
	font-size: 11px;
	line-height: 1.7;
}

/* Lo que ya venia del template original */
.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;
}


/* ---------- cabeceras de panel ----------
   Con dos clases empatamos la especificidad de style.css y, como override.css
   carga ultimo, ganamos. Con una sola clase no alcanzaba y las cabeceras
   seguian saliendo en gris con PT Sans. */

.panel > .panel-heading,
.panel-sidebar > .panel-heading,
.panel-news .panel-heading {
	font-family: 'Press Start 2P', 'Courier New', monospace;
	font-size: 11px;
	line-height: 1.7;
	color: var(--webenginecolor6);
	background: var(--webenginecolor5);
	border-bottom: 3px solid var(--fn-borde);
	border-radius: 0;
}

/* ---------- lo que Bootstrap pinta solo ----------
   btn-primary y badge no salen de las variables del template: estan
   cableados en bootstrap.min.css, asi que van uno por uno. */

.btn-primary,
.btn-primary:focus {
	background-color: var(--fn-oro);
	border-color: var(--fn-borde);
	color: var(--fn-tinta);
	font-weight: bold;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus:hover {
	background-color: #ffc74f;
	border-color: var(--fn-borde);
	color: var(--fn-tinta);
}

.badge {
	background-color: var(--fn-panel-alto);
	color: var(--fn-oro);
}

/* Bordes duros en todo: el radio redondeado de Bootstrap pelea con el bisel. */
.panel, .well, .btn, .form-control, input[type=text], input[type=password], input[type=number] {
	border-radius: 0;
}

/* Los <a class="btn btn-primary"> que viven dentro de las cabeceras de panel
   ("Forgot your password?", los "+" de Top Level y Top Guilds) toman el color
   de link del template por una regla de dos clases, asi que quedaban dorados
   sobre fondo dorado: no se leia nada. El <button> de Sign In no tiene el
   problema porque ninguna regla de <a> lo alcanza. */

a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active {
	color: var(--fn-tinta) !important;
}


/* ---------- el encabezado ----------
   La ilustracion roja que sacamos del body tambien hacia de fondo del
   encabezado, asi que al quitarla el logo quedaba flotando en un vacio.
   En su lugar va una franja hecha con la MISMA arte del hero (las dunas),
   desenfocada y oscurecida hasta volverla atmosfera: no compite con el
   dibujo de abajo, lo continua. Son 10 KB. */

#header {
	background-image:
		linear-gradient(180deg, rgba(20, 16, 28, 0) 50%, rgba(20, 16, 28, 0.9) 100%),
		url('../img/header-fondo.jpg');
	background-repeat: no-repeat, no-repeat;
	background-position: top center, center center;
	background-size: 100% 100%, cover;
	border-bottom: 2px solid rgba(242, 177, 52, 0.18);
}

/* El nombre ya lo grita el logo del encabezado; repetirlo en la placa, justo
   debajo, quedaba redundante. El <h1> sigue en el HTML pero fuera de la vista:
   es el unico de la portada y a los buscadores les sirve. */

.fn-solo-lectores {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Va con el prefijo del contenedor porque `.fn-hero-placa p` es mas especifica
   que una clase sola y le ganaba. */
.fn-hero-placa .fn-hero-linea {
	font-family: 'Press Start 2P', 'Courier New', monospace;
	font-size: 13px;
	color: var(--fn-oro);
	margin: 2px 0 15px 0;
	line-height: 1.7;
}

/* ---------- la barra de navegacion ----------
   Press Start 2P ocupa exactamente el tamanio de fuente por caracter, asi que
   a 11px los cinco items en espaniol suman ~550px de texto ("COMPRAR
   CREDITOS" es el mas largo, 16 caracteres) y con el relleno quedan en ~730:
   entra comodo en los 1040 del sitio, y en ingles sobra mas todavia.

   OJO CON LAS TILDES: aca NO va Press Start 2P. La tiene a la O con tilde,
   pero dibujada mas baja que las mayusculas (en una grilla de 8x8 no entra la
   letra entera mas el acento), asi que "INFORMACION" en mayusculas salia como
   INFORMACIoN, con la O hundida, y lo mismo CREDITOS. Silkscreen dibuja las
   mayusculas acentuadas a la altura correcta y ademas es mas angosta, que en
   un menu de cinco items en espaniol viene bien. Probadas tambien Pixelify
   Sans, VT323 y Jersey 10: las tres resuelven el acento, pero Silkscreen es
   la que mejor pega con el resto. */

#navbar {
	background: linear-gradient(180deg, rgba(42, 33, 66, 0.95) 0%, rgba(20, 16, 28, 0.95) 100%);
	border-top: 2px solid var(--fn-borde);
	border-bottom: 3px solid var(--fn-borde);
	box-shadow: inset 0 2px 0 var(--fn-luz);
}

#navbar ul li a {
	font-family: 'Silkscreen', 'Courier New', monospace;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 1.6;
	padding: 19px 18px;
	/* Separadores finos entre items, como los menues de los juegos viejos:
	   una linea oscura de un lado y una clara del otro arman el bisel. */
	border-left: 2px solid rgba(11, 8, 18, 0.55);
	border-right: 2px solid rgba(74, 59, 110, 0.25);
}

#navbar ul li:first-child a { border-left: 0; }
#navbar ul li:last-child a  { border-right: 0; }

#navbar ul li a:active, #navbar ul li a:focus, #navbar ul li a:hover {
	background: var(--fn-panel-alto);
	/* La barrita dorada abajo es el "estas aca" de toda la vida. */
	box-shadow: inset 0 -4px 0 var(--fn-oro);
}