/*
 * Estilos del evento comunitario.
 *
 * La barra es la del tema (.progress > .progress-bar), la misma que usan el
 * perfil, los calendarios y las mascotas: asi hereda el estilo del sitio y si
 * se retoca alli, el evento va detras. Aqui solo se anaden las marcas de los
 * hitos, que el componente base no tiene.
 *
 * Tampoco se define fondo ni color de texto en los contenedores: el banner vive
 * dentro de la plantilla del tema y debe heredar su paleta, igual que hace
 * ht-games con el hub.
 */

/* ─── Marcas de los hitos sobre la barra del tema ────────────────────── */

/*
 * .progress no trae position, y las marcas se colocan en absoluto respecto a
 * ella. Se establece aqui, sobre la clase propia, para no alterar el resto de
 * barras de la web.
 */
.ht-event-progress {
	position: relative;
}

/*
 * El texto vive dentro de .progress-bar y .progress lo recorta, asi que con la
 * barra casi vacia el contador seria ilegible. Un min-width lo arregla pero
 * pinta relleno de color donde no hay progreso, que es peor: al arrancar el
 * evento parece que ya se avanzo algo.
 *
 * En su lugar el texto se saca a una capa propia centrada sobre toda la barra.
 * Asi el relleno refleja el progreso real, incluido el 0%.
 */
.ht-event-progress .progress-bar {
	position: static;
	overflow: visible;
	text-indent: -9999px;
}

.ht-event-progress-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 0 rgba( 0, 0, 0, 0.85 );
	white-space: nowrap;
	pointer-events: none;
	z-index: 1;
}

.ht-event-milestone {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: rgba( 255, 255, 255, 0.65 );
	transform: translateX( -1px );
	pointer-events: none;
}

.ht-event-milestone.is-reached {
	background: #ffd75e;
	box-shadow: 0 0 5px rgba( 255, 215, 94, 0.9 );
}

/* ─── Banner de portada ──────────────────────────────────────────────── */

/*
 * .section-cloud-pass es un flex en fila con height:40px fijo, pensado para
 * banners de una sola linea de texto. El del evento lleva ademas la barra de
 * progreso, asi que aqui se pasa a columna y se deja crecer en alto. Se hace
 * con una clase propia para no alterar el resto de banners de la portada, que
 * siguen dependiendo de esos 40px.
 */
.section-cloud-pass.ht-event-banner {
	flex-direction: column;
	justify-content: center;
	height: auto;
	min-height: 40px;
	padding: 8px 10px;
	gap: 2px;
}

/* El titulo y la cuenta atras comparten linea, como en los demas banners. */
.ht-event-banner-head {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	width: 100%;
}

.ht-event-banner-head p {
	margin: 0;
}

.ht-event-banner-progress {
	width: 100%;
	max-width: 420px;
}

.ht-event-banner-meta {
	display: flex;
	justify-content: space-between;
	font-size: 0.7rem;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 0 rgba( 0, 0, 0, 0.7 );
	margin-top: 3px;
}

/* ─── Escenario (la planta, la calabaza, el arbol) ───────────────────── */

.ht-event-stage {
	position: relative;
	min-height: 180px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
}

/*
 * Con fondo propio el escenario pasa a ser una escena y crece para darle sitio.
 * El fondo va a su tamano original y centrado, sin cover: asi no se recorta ni
 * se deforma segun el ancho del modal.
 */
.ht-event-stage.has-background {
	min-height: 260px;
	padding-bottom: 20px;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 6px;
}

.ht-event-stage-image {
	max-width: 100%;
	max-height: 260px;
	image-rendering: pixelated;
	transition: transform 400ms ease-out;
}

.ht-event-stage.is-celebrating .ht-event-stage-image {
	transform: scale( 1.08 );
}

.ht-event-stage-label {
	font-weight: bold;
	text-align: center;
	margin-top: 4px;
}

/*
 * El icono del evento cae cuando alguien participa, a su tamano original: la
 * imagen que se sube ya viene dimensionada.
 */
.ht-event-drop {
	position: absolute;
	top: -32px;
	image-rendering: pixelated;
	pointer-events: none;
	animation: ht-event-fall 1.6s ease-in forwards;
}

@keyframes ht-event-fall {
	0%   { transform: translateY( 0 ) scale( 0.8 ); opacity: 0; }
	15%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { transform: translateY( 200px ) scale( 1 ); opacity: 0; }
}

/* Quien prefiera menos movimiento no ve caer nada. */
@media ( prefers-reduced-motion: reduce ) {
	.ht-event-drop {
		display: none;
	}

	.ht-event-progress .progress-bar,
	.ht-event-stage-image {
		transition: none;
	}
}

/* ─── Aviso de hito alcanzado ────────────────────────────────────────── */

.ht-event-milestone-notice {
	display: none;
	margin: 8px 0;
	padding: 8px;
	border-radius: 6px;
	background: #199300;
	color: #fff;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 0 rgba( 0, 0, 0, 0.4 );
}

/* ─── Como participar ────────────────────────────────────────────────── */

.ht-event-description {
	font-size: 0.85rem;
	margin: 6px 0;
}

.ht-event-description p:last-child {
	margin-bottom: 0;
}

.ht-event-howto-summary {
	font-size: 0.85rem;
	text-align: center;
	margin: 6px 0;
}

/*
 * Solo lleva las excepciones a la regla general, asi que normalmente son una o
 * dos lineas, o ninguna.
 */
.ht-event-howto {
	margin: 6px 0;
	padding-left: 20px;
	font-size: 0.85rem;
}

.ht-event-howto li {
	margin-bottom: 2px;
}

/* ─── Recompensas por hito ───────────────────────────────────────────── */

/*
 * Carrusel estatico: solo se ve una fase a la vez y las flechas cambian entre
 * ellas. Los slots los dibuja ht_render_item() con las clases del inventario
 * del sitio, asi que no se les toca tamano ni fondo: deben verse igual que en
 * las misiones y la tienda.
 *
 * Los slides se apilan en una rejilla en vez de ocultarse con display:none, de
 * modo que el contenedor mide siempre lo que el mas alto y no cambia de altura
 * al navegar: eso es lo que hacia saltar el resto del modal en cada clic.
 */
.ht-event-rewards {
	position: relative;
	padding: 0 40px;
	display: grid;
}

.ht-event-reward {
	grid-area: 1 / 1;
	text-align: center;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.ht-event-reward.is-active {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.ht-event-reward-head {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	font-size: 0.9rem;
	margin-bottom: 2px;
	padding: 5px;
}

.ht-event-reward-head small {
	opacity: 0.65;
	white-space: nowrap;
}

/* Un hito alcanzado se marca en verde, como el resto de la web. */
.ht-event-reward.is-reached .ht-event-reward-head i {
	color: #199300;
}

/*
 * El check verde significa "ya lo recibiste", igual que en el pase nuboso.
 *
 * ht_render_item deja el icono en el HTML con `style="display:none"` inline y
 * solo lo enciende quien sabe que el usuario ya lo tiene. Aqui se enciende por
 * hito pagado, y como un estilo inline solo lo puede tapar un !important, esa
 * es la unica forma de mostrarlo desde CSS.
 *
 * Fuera de un hito pagado NO se toca: el display:none inline manda.
 */
.ht-event-reward.is-paid .img-inventory-slot .showObtained {
	display: inline-block !important;
}

/*
 * Los slots de un hito pagado se atenuan, como hace ht_render_item con lo ya
 * obtenido: el check solo no basta para que se lea como "esto ya esta".
 */
.ht-event-reward.is-paid .img-inventory-slot {
	opacity: 0.55;
}

/*
 * Los botones usan las clases del tema (button btn-green button-mini), asi que
 * aqui solo se los ancla a los lados: el aspecto sale de style.css y sigue al
 * sitio si alli se retoca.
 */
/*
 * El centrado NO usa transform: el tema aplica `transform: scale(0.95)` en
 * .button:active, y eso sustituye al translateY(-50%) que lo centraba, con lo
 * que el boton saltaba hacia abajo al pulsarlo. Con top/bottom:0 y margin auto
 * el centrado no depende de transform, asi que el scale del tema solo hace lo
 * suyo.
 */
.ht-event-rewards-nav {
	/* Absoluto, asi que queda fuera del flujo de la rejilla de slides. */
	position: absolute;
	top: 0;
	bottom: 0;
	height: fit-content;
	margin: auto 0;
	z-index: 2;
}

/* En los extremos la flecha se atenua en vez de desaparecer, para que el
   carrusel no cambie de ancho al navegar. */
.ht-event-rewards-nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

.ht-event-rewards-nav.is-prev {
	left: 0;
}

.ht-event-rewards-nav.is-next {
	right: 0;
}

@media ( max-width: 480px ) {
	.ht-event-rewards {
		padding: 0 34px;
	}
}

/* ─── Ranking del modal ──────────────────────────────────────────────── */

.ht-event-rank {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8rem;
}

.ht-event-rank td {
	padding: 4px 6px;
	border-bottom: 1px solid rgba( 128, 128, 128, 0.25 );
	vertical-align: middle;
}

.ht-event-rank .ht-event-rank-pos {
	width: 28px;
	font-weight: bold;
	text-align: center;
}

/* Dos lineas: lo aportado arriba (el criterio) y los dias abajo como contexto. */
.ht-event-rank .ht-event-rank-days {
	text-align: right;
	white-space: nowrap;
	line-height: 1.2;
}

.ht-event-rank .ht-event-rank-days small {
	opacity: 0.65;
	font-size: 0.72rem;
}

/* En el banner la barra es algo mas baja: comparte sitio con el titulo. */
.ht-event-banner-progress .progress {
	margin: 0;
}

.ht-event-banner-progress .progress-bar {
	height: 0.9rem;
	line-height: 0.9rem;
	font-size: 0.7rem;
}

@media ( max-width: 480px ) {
	.ht-event-stage {
		min-height: 140px;
	}

	.ht-event-stage-image {
		max-height: 180px;
	}

	.ht-event-banner-progress {
		max-width: 100%;
	}
}