/* Trivial del Corral — pantalla del jugador.
 *
 * Paleta y tipografías tomadas de site.css (identidad de El Corral: noche,
 * ámbar, hueso). Cálido y de bar, no de casino: sin destellos, sin confeti,
 * sin cuentas atrás agresivas. Nada externo: ni fuentes ni imágenes remotas.
 *
 * NOTA: esta página se sirve sola (sin el tema), así que las tipografías de la
 * web solo aparecen si el navegador ya las tiene; si no, cae a la pila del
 * sistema, que es legible igual.
 */

:root {
	--ecc-noche: #1B1712;
	--ecc-piedra: #B9A98C;
	--ecc-ambar: #E8A33D;
	--ecc-hueso: #EFE6D8;
	--ecc-hiedra: #4C6344;
	--ecc-calor: #E36B54;
	--ecc-borde: rgba(239, 230, 216, .18);
}

* { box-sizing: border-box; }

body.ecc-triv {
	margin: 0;
	padding: 0;
	background: var(--ecc-noche);
	color: var(--ecc-hueso);
	font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 17px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

.ecc-triv__app {
	max-width: 34rem;
	margin: 0 auto;
	padding: 1.5rem 1.1rem 3rem;
}

h1, h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 .8rem;
}

h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); color: var(--ecc-ambar); }
h2 { font-size: clamp(1.15rem, 4.5vw, 1.4rem); margin-top: 2rem; }

/* El foco se marca siempre, y con algo más que color. */
:focus-visible {
	outline: 3px solid var(--ecc-ambar);
	outline-offset: 3px;
	border-radius: 4px;
}

a { color: var(--ecc-ambar); }

.ecc-triv__intro { color: var(--ecc-hueso); }
.ecc-triv__condicion { color: var(--ecc-piedra); font-size: .92rem; }
.ecc-triv__premio { color: var(--ecc-hueso); }
.ecc-triv__pie { margin-top: 2.5rem; font-size: .95rem; }

.ecc-triv__cargando { color: var(--ecc-piedra); }

/* Avisos: nunca solo por color — cada tipo lleva su propio distintivo textual
 * en el borde izquierdo y el mensaje ya es explícito por sí mismo. */
.ecc-triv__aviso {
	border-left: 4px solid var(--ecc-piedra);
	background: rgba(239, 230, 216, .05);
	padding: .8rem 1rem;
	margin: 1.2rem 0;
	border-radius: 0 6px 6px 0;
}
.ecc-triv__aviso--ojo { border-left-color: var(--ecc-ambar); }
.ecc-triv__aviso--cerrado { border-left-color: var(--ecc-calor); }

/* ---------- Categorías ---------- */
.ecc-triv__cats { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

.ecc-triv__cat {
	width: 100%;
	min-height: 56px; /* holgado para el dedo */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .15rem;
	padding: .9rem 1rem;
	background: rgba(239, 230, 216, .06);
	border: 1px solid var(--ecc-borde);
	border-radius: 8px;
	color: var(--ecc-hueso);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.ecc-triv__cat:hover { border-color: var(--ecc-ambar); background: rgba(232, 163, 61, .1); }
.ecc-triv__cat[disabled] { opacity: .5; cursor: progress; }
.ecc-triv__cat-nombre { font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem; }
.ecc-triv__cat-desc { color: var(--ecc-piedra); font-size: .9rem; }

/* ---------- Partida ---------- */
.ecc-triv__barra {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: .4rem;
}
.ecc-triv__progreso { margin: 0; color: var(--ecc-piedra); font-size: .95rem; }
.ecc-triv__tiempo {
	margin: 0;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 1.1rem;
	color: var(--ecc-ambar);
}

.ecc-triv__progressbar {
	width: 100%;
	height: 6px;
	appearance: none;
	border: 0;
	background: rgba(239, 230, 216, .12);
	border-radius: 3px;
	margin-bottom: 1.2rem;
}
.ecc-triv__progressbar::-webkit-progress-bar { background: rgba(239, 230, 216, .12); border-radius: 3px; }
.ecc-triv__progressbar::-webkit-progress-value { background: var(--ecc-ambar); border-radius: 3px; }
.ecc-triv__progressbar::-moz-progress-bar { background: var(--ecc-ambar); border-radius: 3px; }

.ecc-triv__pregunta { margin-bottom: 1.2rem; }

.ecc-triv__ops { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.ecc-triv__op {
	width: 100%;
	min-height: 52px;
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .8rem 1rem;
	background: rgba(239, 230, 216, .06);
	border: 1px solid var(--ecc-borde);
	border-radius: 8px;
	color: var(--ecc-hueso);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.ecc-triv__op:hover:not([disabled]) { border-color: var(--ecc-ambar); }
.ecc-triv__op[disabled] { opacity: .55; cursor: default; }
.ecc-triv__op.is-elegida {
	opacity: 1;
	border-color: var(--ecc-ambar);
	background: rgba(232, 163, 61, .16);
}
.ecc-triv__op-letra {
	flex: 0 0 1.7rem;
	height: 1.7rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--ecc-borde);
	border-radius: 50%;
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: .85rem;
	color: var(--ecc-piedra);
}

.ecc-triv__estado { min-height: 1.5rem; color: var(--ecc-piedra); font-size: .95rem; }

/* ---------- Resultado ---------- */
.ecc-triv__repaso { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ecc-triv__repaso li {
	display: flex;
	gap: .7rem;
	padding: .7rem .9rem;
	border: 1px solid var(--ecc-borde);
	border-left-width: 4px;
	border-radius: 0 6px 6px 0;
}
/* Acierto y fallo se distinguen por el símbolo ✓/✗ y por el texto oculto del
 * lector de pantalla, no solo por el color del borde. */
.ecc-triv__repaso li.is-ok { border-left-color: var(--ecc-hiedra); }
.ecc-triv__repaso li.is-ko { border-left-color: var(--ecc-calor); }
.ecc-triv__marca { font-size: 1.1rem; }
.ecc-triv__repaso em { color: var(--ecc-ambar); font-style: normal; }
.ecc-triv__repaso small { color: var(--ecc-piedra); }

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

/* ---------- Botones y formulario ---------- */
.ecc-triv__btn {
	min-height: 48px;
	padding: .8rem 1.4rem;
	background: var(--ecc-ambar);
	color: var(--ecc-noche);
	border: 0;
	border-radius: 8px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.ecc-triv__btn:hover { background: #f0b158; }
.ecc-triv__btn[disabled] { opacity: .6; cursor: progress; }

.ecc-triv__form { display: grid; gap: .6rem; margin-top: 1.4rem; }
.ecc-triv__form label { color: var(--ecc-piedra); font-size: .95rem; }
.ecc-triv__form input {
	min-height: 56px;
	padding: .6rem .9rem;
	background: rgba(239, 230, 216, .07);
	border: 1px solid var(--ecc-borde);
	border-radius: 8px;
	color: var(--ecc-hueso);
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 1.6rem;
	letter-spacing: .3em;
	text-align: center;
}
.ecc-triv__error:not(:empty) {
	color: #ffb3a3; /* contraste AA sobre el fondo noche */
	margin: 0;
}

.ecc-triv__codigo {
	font-family: 'Space Mono', ui-monospace, monospace;
	color: var(--ecc-piedra);
	letter-spacing: .12em;
}
.ecc-triv__codigo strong { color: var(--ecc-hueso); }

/* ---------- Sello de canjeado ---------- */
.ecc-triv__sello {
	border: 2px solid var(--ecc-hiedra);
	border-radius: 12px;
	padding: 1.6rem 1.2rem;
	text-align: center;
	background: rgba(76, 99, 68, .16);
}
.ecc-triv__sello-marca {
	font-size: 3rem;
	line-height: 1;
	margin: 0 0 .4rem;
	color: var(--ecc-hiedra);
	animation: ecc-triv-sello .45s ease-out;
}
.ecc-triv__sello-txt { color: var(--ecc-hueso); font-size: clamp(1.3rem, 5.5vw, 1.8rem); }
.ecc-triv__fecha { color: var(--ecc-piedra); font-family: 'Space Mono', ui-monospace, monospace; }

@keyframes ecc-triv-sello {
	from { transform: scale(.8); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}