/**
 * HT Games - estilos del hub y del contenedor de juego.
 *
 * El hub se renderiza dentro de la plantilla del tema, asi que aqui solo va lo
 * propio de los juegos: colores, tipografia, botones y layout general los pone
 * el tema. La pagina de juego si es standalone y define lo minimo.
 */

/* ---------------------------------------------------------------- Hub */

/*
 * El panel del tema no trae padding propio, asi que lo pone el hub: sin el,
 * las tarjetas y la barra de tickets quedan pegadas al borde del recuadro.
 */
.ht-games-hub {
	padding: 18px 16px 20px;
}

.ht-games-hub__intro {
	margin: 0 0 14px;
	font-weight: 700;
	text-align: center;
}

/*
 * Barra de acciones: misiones a un lado, saldo al otro, con el borde blanco y
 * contorno negro de la web.
 */
.ht-games-hub__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 2px 18px;
	padding: 8px 12px;
	border: 2px solid #fff;
	border-radius: 10px;
	background: linear-gradient(#e9f2f6, #d5e3ea);
	box-shadow: 0 0 0 2px #000;
}

/*
 * Los botones del tema traen 19px de padding y 18px de fuente, pensados para
 * llamadas a la accion grandes. Aqui se compactan sin cambiar su aspecto.
 */
.ht-games-hub__bar .button {
	padding: 9px 14px !important;
	font-size: 14px !important;
	line-height: 1.2;
}

.ht-games-hub__tickets {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	color: #004960;
}

.ht-games-hub__tickets img {
	max-height: 20px;
}

.ht-games-hub__buy {
	padding: 7px 10px !important;
}

/* ------------------------------------------------------------ Secciones */

/*
 * Titulo de seccion del hub. Solo sale cuando hay juegos por tiempo
 * limitado: esos van primero, con una franja naranja y el icono de su
 * temporada, y el resto debajo con un titulo discreto.
 */
.ht-games-section {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 2px 10px;
	font-size: 0.85rem;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #004960;
}

.ht-games-section--limited {
	padding: 6px 12px;
	border: 2px solid #fff;
	border-radius: 10px;
	background: linear-gradient(180deg, #ff8a1f 50%, #ef7600 50%);
	box-shadow: 0 0 0 2px #000;
	color: #fff;
	text-shadow: 1px 1px rgb(0 0 0 / 48%);
}

/* Pixel art a su tamano, salvo que no quepa. */
.ht-games-section img {
	max-height: 32px;
	image-rendering: pixelated;
}

.ht-games-list + .ht-games-section {
	margin-top: 24px;
}

/* ------------------------------------------------------------- Tarjetas */

.ht-games-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 2px;
}

.ht-games-card {
	overflow: hidden;
	border: 2px solid #fff;
	border-radius: 10px;
	background: #f5f9fb;
	box-shadow: 0 0 0 2px #000;
}

/* Franja de cabecera con el color del juego (como las de los widgets). */
.ht-games-card__band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 12px;
	border-bottom: 2px solid rgb(0 2 2 / 32%);
	background: linear-gradient(180deg, rgb(0, 104, 145) 50%, rgb(0, 88, 123) 50%);
	color: #fff;
	text-shadow: 1px 1px rgb(0 0 0 / 48%);
}

.ht-games-card--orange .ht-games-card__band {
	background: linear-gradient(180deg, #eeab14 50%, rgb(213, 151, 11) 50%);
}

.ht-games-card--green .ht-games-card__band {
	background: linear-gradient(180deg, #1a9a1a 50%, #137b00 50%);
}

.ht-games-card--purple .ht-games-card__band {
	background: linear-gradient(180deg, #5b3a8c 50%, #472c70 50%);
}

.ht-games-card__title {
	margin: 0;
	font-size: 0.85rem;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
}

.ht-games-card__season {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	padding: 1px 6px;
	border: 2px solid #600000;
	border-radius: 4px;
	background: #b00000;
	font-size: 0.72rem;
	font-weight: bold;
	text-shadow: none;
}

/* Icono de la temporada: sin agrandar la franja. */
.ht-games-card__season img {
	max-height: 20px;
	margin: -3px 0;
	image-rendering: pixelated;
}

/*
 * El fondo del juego en mosaico, a su tamano (pixel art: no se escala) y el
 * logo encima tambien a su tamano, salvo que no quepa.
 */
.ht-games-card__banner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 150px;
	padding: 10px;
	background-color: #1f2a33;
	background-repeat: repeat;
	background-position: 0 0;
	border-bottom: 2px solid #fff;
	image-rendering: pixelated;
}

.ht-games-card__logo {
	display: block;
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
	transition: transform 0.15s ease;
}

.ht-games-card__banner:hover .ht-games-card__logo {
	transform: scale(1.04);
}

/*
 * Con escena de fondo (GameDefs 'backdrop'): a tamano real, sin repetir y
 * centrada en la parte con dibujo. El negro rellena si la tarjeta es mas
 * ancha que la imagen.
 */
.ht-games-card__banner.has-backdrop {
	background-color: #000;
	background-repeat: no-repeat;
	background-size: auto;
}

/* Sin fondo propio: cielo de noche y el titulo pintado. */
.ht-games-card__banner.is-night {
	background: radial-gradient(circle at 82% 30%, #fff6d6 0 22px, rgba(255, 246, 214, 0.25) 23px, transparent 60px),
		linear-gradient(#150d28, #2a1647);
}

.ht-games-card__wordmark {
	font-size: 2.6rem;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ff8324;
	/* Contorno grueso y sombra dura, como los logos de los otros juegos. */
	-webkit-text-stroke: 3px #2a1200;
	paint-order: stroke fill;
	text-shadow: 0 5px 0 #2a1200;
}

.ht-games-card.is-featured .ht-games-card__banner {
	min-height: 190px;
}

.ht-games-card__body {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 12px 12px;
	background: linear-gradient(#fff 30%, #e6eef2 100%);
}

.ht-games-card__info {
	flex: 1;
	min-width: 0;
}

.ht-games-card__desc {
	margin: 0 0 10px;
	font-size: 0.9rem;
	line-height: 1.45;
	color: #2a3b42;
}

/*
 * Datos de la semana: un recuadro por dato, con la etiqueta pequena arriba
 * y el valor debajo. Se reparten el ancho y bajan de linea si no caben.
 */
.ht-games-card__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ht-games-stat {
	flex: 1 1 130px;
	min-width: 0;
	text-align: left;
	padding: 6px 10px 7px;
	border: 1px solid #d3e2ea;
	border-radius: 8px;
	background: #fff;
}

.ht-games-stat--leader {
	flex-grow: 2;
}

.ht-games-stat__label {
	display: block;
	margin-bottom: 3px;
	font-size: 0.66rem;
	font-weight: bold;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #6b8590;
}

.ht-games-stat__label i {
	margin-right: 2px;
	color: #d59a0b;
}

.ht-games-stat__value {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
	font-size: 0.85rem;
	white-space: nowrap;
	color: #2a3b42;
}

.ht-games-stat__value b {
	font-size: 1rem;
	color: #004960;
}

.ht-games-stat__sub {
	font-size: 0.8rem;
	color: #6b8590;
}

/* Sin partidas hoy: en rojo. */
.ht-games-stat.is-empty {
	border-color: #f0b4b4;
	background: #fff4f4;
}

.ht-games-stat.is-empty b,
.ht-games-stat.is-empty .ht-games-stat__label i {
	color: #b00000;
}

.ht-games-card__leader {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Premios del top 3: fichas "1° [nube] 30" (hub y modal de Ranking). */
.ht-games-card__prizes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin: 10px 0 0;
}

.ht-games-card__prizes .ht-games-stat__label {
	display: inline-block;
	margin: 0 4px 0 0;
}

.ht-games-prize {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 7px;
	border: 2px solid #fff;
	border-radius: 10px;
	background: #ffe7a3;
	box-shadow: 0 0 0 1px #000;
	font-size: 0.75rem;
	font-weight: bold;
	line-height: 1.4;
	color: #5a3d00;
	white-space: nowrap;
}

.ht-games-prize img {
	vertical-align: middle;
}

.ht-games-card__leader a {
	font-weight: bold;
}

.ht-games-card__leader img {
	max-height: 16px;
	vertical-align: middle;
}

.ht-games-card__play {
	flex-shrink: 0;
	padding: 10px 22px !important;
	font-size: 16px !important;
}

.ht-games-empty {
	text-align: center;
	color: #4f6670;
}

.ht-games-hub__note {
	margin: 16px 0 0;
	font-size: 0.8rem;
	text-align: center;
	color: #4f6670;
}

@media (max-width: 640px) {
	/* En pantallas estrechas el padding lateral se recorta: cada pixel cuenta. */
	.ht-games-hub {
		padding: 14px 10px 16px;
	}

	.ht-games-hub__bar {
		justify-content: center;
	}

	.ht-games-card__banner {
		min-height: 120px;
	}

	.ht-games-card__wordmark {
		font-size: 1.9rem;
	}

	.ht-games-card__body {
		flex-direction: column;
		align-items: stretch;
	}

	.ht-games-card__play {
		text-align: center;
	}
}

/* -------------------------------------------------------------- Juego */

/*
 * La pagina de juego SI es standalone (sin cabecera del tema) para que el
 * canvas ocupe toda la ventana, asi que necesita definir sus propias bases.
 */
.ht-games-body {
	margin: 0;
	padding: 0;
	background: #100b1c;
	/* Sin color de texto: lo heredarian el chat y otros widgets del tema.
	   Cada pieza del juego define el suyo. */
	font-family: Ubuntu, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

/*
 * La pagina de juego ocupa la ventana entera: la barra de la web arriba y el
 * juego debajo, centrado. El motor calcula el tamano del canvas para que
 * quepa completo en lo que queda bajo la barra.
 */
.ht-games-body--play {
	display: flex;
	flex-direction: column;
	margin: 0;
	/* dvh sigue a la barra de direcciones en movil; vh es el respaldo. */
	height: 100vh;
	height: 100dvh;
	width: 100vw;
	overflow: hidden;
	box-sizing: border-box;
	/* Respeta el notch en moviles con pantalla recortada. */
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Barra con la franja de widget de la web, del color del juego. */
.ht-game-bar {
	position: relative;
	z-index: 5;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 12px;
	height: 46px;
	padding: 0 12px;
	border-bottom: 2px solid #000;
	background: linear-gradient(180deg, rgb(0, 104, 145) 50%, rgb(0, 88, 123) 50%);
	box-shadow: inset 0 -2px 0 rgb(0 2 2 / 32%);
	color: #fff;
	text-shadow: 1px 1px rgb(0 0 0 / 48%);
}

.ht-game-bar--blue {
	background: linear-gradient(180deg, rgb(0, 104, 145) 50%, rgb(0, 88, 123) 50%);
}

.ht-game-bar--orange {
	background: linear-gradient(180deg, #eeab14 50%, rgb(213, 151, 11) 50%);
}

.ht-game-bar--green {
	background: linear-gradient(180deg, #1a9a1a 50%, #137b00 50%);
}

.ht-game-bar--purple {
	background: linear-gradient(180deg, #5b3a8c 50%, #472c70 50%);
}

.ht-game-bar__back,
.ht-game-bar__rank {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 2px solid #fff;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.28);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
	font: inherit;
	font-size: 0.85rem;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

.ht-game-bar__back:hover,
.ht-game-bar__rank:hover {
	background: rgba(0, 0, 0, 0.45);
}

.ht-game-bar__title {
	flex: 1;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	font-size: 0.95rem;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ht-game-bar__stats {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 12px;
}

.ht-game-bar__stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.95rem;
}

.ht-game-bar__stat .fa-trophy {
	color: #ffd34d;
}

/* El juego, sobre el fondo del juego en mosaico (a su tamano: pixel art). */
.ht-game-stage {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 0;
	background-color: #100b1c;
	background-repeat: repeat;
	image-rendering: pixelated;
}

/*
 * Escena de fondo del juego (GameDefs 'backdrop'): pixel art a x2 sin
 * suavizar, centrada en la altura 'focus_y' de la imagen para recortar el
 * relleno que traiga. El lienzo del juego queda transparente encima.
 *
 * El velo que oscurece la escena para que se lea el juego va aqui y no en
 * el lienzo: el lienzo no siempre ocupa toda la pantalla y se notaria su
 * borde.
 */
.ht-game-stage.has-backdrop {
	--ht-backdrop-scale: 2;
	background-color: #000;
	background-image: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)), var(--ht-backdrop);
	background-repeat: no-repeat;
	background-size:
		100% 100%,
		calc(var(--ht-backdrop-w) * var(--ht-backdrop-scale) * 1px)
		calc(var(--ht-backdrop-h) * var(--ht-backdrop-scale) * 1px);
	background-position:
		0 0,
		center calc(50% - var(--ht-backdrop-shift) * var(--ht-backdrop-scale) * 1px);
	image-rendering: pixelated;
}

/* Con escena de fondo el lienzo es transparente: su sombra la cortaria. */
.ht-game-stage.has-backdrop .ht-game-canvas {
	box-shadow: none;
}

/* En el movil, a x2 solo se veria un trozo de cielo: va a su tamano. */
@media (max-width: 1100px), (max-height: 600px) {
	.ht-game-stage.has-backdrop {
		--ht-backdrop-scale: 1;
	}
}

.ht-game-root {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* Ranking de la semana. */
.ht-game-ranking {
	position: fixed;
	inset: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.6);
}

.ht-game-ranking[hidden] {
	display: none;
}

.ht-game-ranking__box {
	position: relative;
	width: 100%;
	max-width: 400px;
	overflow: hidden;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 10px;
	box-shadow: 0 0 0 2px #000, 0 12px 30px rgba(0, 0, 0, 0.5);
	color: #fff;
	text-shadow: 1px 1px rgb(0 0 0 / 48%);
}

/* Cabecera como el titulo de los widgets: la franja del juego (la clase
   ht-game-bar--{band} de la caja) con el texto centrado. */
.ht-game-ranking__head {
	position: relative;
	padding: 7px 36px;
	border-bottom: 2px solid #000;
	text-align: center;
}

.ht-game-ranking__head h2 {
	margin: 0;
	text-align: center;
	font-size: 0.8rem;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
}

.ht-game-ranking__close {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	border: 0;
	background: none;
	font-size: 1rem;
	color: #fff;
	text-shadow: inherit;
	cursor: pointer;
}

.ht-game-ranking__list {
	max-height: 70vh;
	overflow-y: auto;
	background: #fff;
	color: #292929;
	text-shadow: none;
}

/* Podio: los tres primeros sobre el fondo del juego (a su tamano). */
.ht-game-podium {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 8px;
	padding: 14px 12px 0;
	border-bottom: 2px solid #000;
	background: #3a2410 var(--ht-rank-pattern, none) repeat;
	image-rendering: pixelated;
}

.ht-game-podium__spot {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	max-width: 118px;
}

.ht-game-podium__head {
	display: block;
	margin-bottom: 2px;
}

.ht-game-podium .ht-game-ranking__name {
	max-width: 100%;
	margin-bottom: 6px;
	padding: 2px 6px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.55);
	font-size: 0.8rem;
	color: #fff;
}

/* En el podio no cabe la bandera del hotel (la unica imagen con title). */
.ht-game-podium .ht-game-ranking__name img[title] {
	display: none;
}

.ht-game-podium__spot.is-me .ht-game-ranking__name {
	background: #ff9a1f;
	box-shadow: 0 0 0 2px #000;
}

.ht-game-podium__block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	border: 2px solid #fff;
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	box-shadow: 0 0 0 2px #000;
	text-shadow: 1px 1px rgb(0 0 0 / 48%);
}

.ht-game-podium__spot.is-1 .ht-game-podium__block {
	height: 84px;
	background: linear-gradient(180deg, #ffd34d 50%, #f0b20b 50%);
}

.ht-game-podium__spot.is-2 .ht-game-podium__block {
	height: 68px;
	background: linear-gradient(180deg, #dfe6ec 50%, #bfcad4 50%);
}

.ht-game-podium__spot.is-3 .ht-game-podium__block {
	height: 56px;
	background: linear-gradient(180deg, #eab283 50%, #d38c52 50%);
}

.ht-game-podium__pos {
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1;
	color: #fff;
}

.ht-game-podium__prize {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-top: 3px;
	padding: 0 6px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.35);
	font-size: 0.75rem;
	font-weight: bold;
	color: #fff;
}

/* Franja de premios bajo la cabecera del modal. */
.ht-game-ranking__prizes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 6px;
	margin: 0;
	padding: 7px 10px;
	border-bottom: 2px solid #000;
	background: #fff8e1;
	font-size: 0.8rem;
	font-weight: bold;
	color: #5a3d00;
}

.ht-game-podium__score {
	font-size: 0.8rem;
	color: #fff;
}

/* Del cuarto en adelante, lista con la cabecita de cada uno. */
.ht-game-ranking__rows {
	margin: 0;
	padding: 4px 0;
	list-style: none;
}

.ht-game-ranking__row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
}

.ht-game-ranking__row + .ht-game-ranking__row {
	border-top: 1px solid #e3ecf0;
}

.ht-game-ranking__row.is-me {
	background: #fff1d6;
}

.ht-game-ranking__pos {
	flex-shrink: 0;
	width: 22px;
	font-size: 0.85rem;
	font-weight: bold;
	text-align: center;
	color: #004960;
}

.ht-game-ranking__avatar {
	flex-shrink: 0;
}

.ht-game-ranking__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-weight: bold;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* El nombre trae enlace al perfil: aqui sacaria al jugador de la partida. */
.ht-game-ranking__name a {
	pointer-events: none;
	color: inherit;
	text-decoration: none;
}

.ht-game-ranking__name img {
	vertical-align: middle;
}

.ht-game-ranking__score {
	font-weight: bold;
	color: #0080a8;
}

/* Premio del puesto en la lista (del 4° al 10°). */
.ht-game-ranking__prize {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 2px;
	padding: 0 6px;
	border-radius: 8px;
	background: #ffe7a3;
	font-size: 0.75rem;
	font-weight: bold;
	color: #5a3d00;
}

.ht-game-ranking__prize img {
	max-height: 14px;
}

.ht-game-ranking__note,
.ht-game-ranking__me {
	margin: 0;
	padding: 12px;
	font-size: 0.85rem;
	text-align: center;
	color: #4f6670;
}

.ht-game-ranking__me {
	border-top: 2px solid #e3ecf0;
	font-weight: bold;
	color: #292929;
}

/* En pantallas estrechas la barra se queda con lo esencial. */
@media (max-width: 560px) {
	.ht-game-bar {
		gap: 8px;
		padding: 0 8px;
	}

	.ht-game-bar__back span,
	.ht-game-bar__rank span {
		display: none;
	}

	.ht-game-bar__stats {
		gap: 8px;
	}
}

.ht-game-canvas {
	display: block;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
	/* El motor gestiona los gestos: el navegador no debe hacer scroll ni zoom. */
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.ht-game-loading {
	text-align: center;
	padding: 80px 20px;
	color: rgba(255, 246, 229, 0.55);
}

/*
 * Aviso para girar el movil. Con el telefono en vertical un canvas 16:9 queda
 * en una franja diminuta, asi que se sugiere el apaisado. Es solo una
 * sugerencia: se puede cerrar y seguir jugando en vertical.
 */
.ht-game-rotate {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 30px;
	text-align: center;
	background: #100b1c;
	color: #fff6e5;
}

.ht-game-rotate__icon {
	font-size: 60px;
	line-height: 1;
	animation: ht-game-tilt 1.8s ease-in-out infinite;
}

.ht-game-rotate p {
	margin: 0;
	font-size: 17px;
	max-width: 300px;
	line-height: 1.5;
}

.ht-game-rotate button {
	margin-top: 6px;
	padding: 10px 22px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	background: transparent;
	color: rgba(255, 246, 229, 0.75);
	font-size: 14px;
	cursor: pointer;
}

@keyframes ht-game-tilt {
	0%, 100% { transform: rotate(0deg); }
	50%      { transform: rotate(-90deg); }
}

/* Solo en pantallas pequenas y en vertical. */
@media (max-width: 900px) and (orientation: portrait) {
	.ht-games-body--play:not(.ht-game-rotate-dismissed) .ht-game-rotate {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ht-game-rotate__icon {
		animation: none;
	}
}

.ht-games-message {
	text-align: center;
	padding: 100px 20px;
}

.ht-games-message a {
	color: #ff8324;
}

@media (max-width: 640px) {
	/* A pantalla completa la sombra no aporta nada. */
	.ht-game-canvas {
		box-shadow: none;
	}
}