/* ═══════════════════════════════════════════════════════════════════
   psf-superlativos.css — el juego.  [D-223 · v9.45.0]
   ═══════════════════════════════════════════════════════════════════

   NI UN LITERAL DE COLOR. Todo sale de psf-tokens.css, como el resto de
   los componentes del sitio, y por eso el juego sigue al tema claro, al
   oscuro y al de alto contraste sin una sola regla más.

   Y NI UN COLOR PORTADOR. Acertar y fallar se dicen CON PALABRAS —«Correcto.»,
   «No: era la zotepina.»— y con un símbolo, no solo con verde y rojo: criterio
   1.4.1. El color acompaña; nunca es lo único.

   EL BOTÓN ES GRANDE A PROPÓSITO. Esto se juega desde el teléfono, con el
   pulgar y a una mano. Los objetivos van a 48 px de alto mínimo y las opciones
   se apilan en una columna por debajo de 560 px, que es donde dos columnas
   empiezan a partir los nombres largos («Levomepromazina»).
   ═══════════════════════════════════════════════════════════════════ */

.psf-sup{ padding-bottom:var(--pf-s-16); }

.psf-sup__cab{ max-width:var(--pf-w-read); }
.psf-sup__h1{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h1);
	line-height:var(--pf-lh-tight); letter-spacing:var(--pf-track-display);
	color:var(--pf-ink); margin:var(--pf-s-2) 0 var(--pf-s-3);
}
.psf-sup__lead{
	font-size:var(--pf-fs-lead); line-height:var(--pf-lh-body);
	color:var(--pf-ink-soft); margin:0 0 var(--pf-s-4); max-width:64ch;
}

/* ── El marcador ───────────────────────────────────────────────── */
/* Va pegado arriba en el teléfono: es la única cosa de la página que hay
   que poder mirar sin dejar de jugar. */
.psf-sup__marcador{
	position:sticky; top:0; z-index:3;
	display:flex; align-items:center; gap:var(--pf-s-3); flex-wrap:wrap;
	margin:var(--pf-s-8) 0 var(--pf-s-4); padding:var(--pf-s-3) var(--pf-s-4);
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-md);
}
.psf-sup__m-n{
	font-family:var(--pf-mono); font-size:var(--pf-fs-h3);
	font-weight:var(--pf-w-semibold); color:var(--pf-brand-tx); line-height:1;
}
.psf-sup__m-e{ font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); letter-spacing:var(--pf-track-label); text-transform:uppercase; }
.psf-sup__m-b{
	flex:1 1 120px; min-width:96px; height:var(--pf-s-2);
	background:var(--pf-paper-alt); border-radius:var(--pf-r-pill); overflow:hidden;
}
.psf-sup__m-r{ display:block; height:100%; width:var(--p,0%); background:var(--pf-sage); transition:width .25s ease; }
.psf-sup__m-f{ font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); font-family:var(--pf-mono); }

/* ── La carta ──────────────────────────────────────────────────── */
.psf-sup__carta{
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-md); padding:var(--pf-s-6);
	max-width:var(--pf-w-read);
}
.psf-sup__eje{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	letter-spacing:var(--pf-track-eyebrow); text-transform:uppercase;
	color:var(--pf-ink-faint-tx); margin:0 0 var(--pf-s-2);
}
.psf-sup__q:focus{ outline:2px solid var(--pf-sage-tx); outline-offset:4px; border-radius:var(--pf-r-sm); }
.psf-sup__q{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h3);
	line-height:var(--pf-lh-tight); color:var(--pf-ink); margin:0 0 var(--pf-s-3);
}
.psf-sup__ley,
.psf-sup__nota-q{
	font-size:var(--pf-fs-small); line-height:var(--pf-lh-body);
	color:var(--pf-ink-soft); margin:0 0 var(--pf-s-3);
}
.psf-sup__nota-q{ color:var(--pf-sage-tx); }

/* ── Las opciones ──────────────────────────────────────────────── */
.psf-sup__ops{ display:grid; grid-template-columns:1fr 1fr; gap:var(--pf-s-3); margin-top:var(--pf-s-4); }
.psf-sup__op{
	min-height:48px; padding:var(--pf-s-3) var(--pf-s-4);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small);
	font-weight:var(--pf-w-medium); color:var(--pf-ink);
	background:var(--pf-paper); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-sm); cursor:pointer; text-align:left;
	transition:border-color .12s ease, background .12s ease;
}
.psf-sup__op:hover:not(:disabled){ border-color:var(--pf-accent); background:var(--pf-accent-tint); }
.psf-sup__op:disabled{ cursor:default; opacity:.72; }
/* NUNCA SOLO COLOR: el símbolo va delante del nombre. */
.psf-sup__op.is-ok{  border-color:var(--pf-ok); background:var(--pf-ok-tint); color:var(--pf-ok-tx); opacity:1; }
.psf-sup__op.is-mal{ border-color:var(--pf-danger); background:var(--pf-danger-tint); color:var(--pf-danger-tx); opacity:1; }
.psf-sup__op.is-ok::before{  content:"✓ "; font-weight:var(--pf-w-semibold); }
.psf-sup__op.is-mal::before{ content:"✕ "; font-weight:var(--pf-w-semibold); }

/* ── La corrección ─────────────────────────────────────────────── */
.psf-sup__resp{
	margin-top:var(--pf-s-6); padding-top:var(--pf-s-4);
	border-top:1px solid var(--pf-line);
}
.psf-sup__veredicto{
	font-size:var(--pf-fs-body); font-weight:var(--pf-w-semibold);
	margin:0 0 var(--pf-s-3); color:var(--pf-ink);
}
.psf-sup__resp.is-ok    .psf-sup__veredicto{ color:var(--pf-ok-tx); }
.psf-sup__resp.is-mal   .psf-sup__veredicto{ color:var(--pf-danger-tx); }
.psf-sup__resp.is-empate .psf-sup__veredicto{ color:var(--pf-ink-soft); }

.psf-sup__cifras{ margin:0 0 var(--pf-s-4); display:grid; gap:var(--pf-s-2); }
.psf-sup__c-n{
	font-family:var(--pf-sans); font-size:var(--pf-fs-micro);
	font-weight:var(--pf-w-semibold); color:var(--pf-ink-soft);
	letter-spacing:var(--pf-track-label);
}
.psf-sup__c-v{
	margin:0 0 var(--pf-s-2); font-family:var(--pf-mono);
	font-size:var(--pf-fs-small); line-height:var(--pf-lh-data); color:var(--pf-ink);
}
.psf-sup__why,
.psf-sup__salvedad{
	font-size:var(--pf-fs-small); line-height:var(--pf-lh-body);
	color:var(--pf-ink-soft); margin:0 0 var(--pf-s-3); max-width:60ch;
}
.psf-sup__salvedad{ color:var(--pf-warn-tx); }
.psf-sup__rot{
	font-size:var(--pf-fs-micro); line-height:var(--pf-lh-body);
	color:var(--pf-ink-faint-tx); font-style:italic;
	margin:0 0 var(--pf-s-3); max-width:60ch;
}
.psf-sup__cita{ font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); margin:0 0 var(--pf-s-4); }
.psf-sup__cita a{ color:var(--pf-accent-tx); }

.psf-sup__sig{
	min-height:48px; padding:var(--pf-s-3) var(--pf-s-6);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small);
	font-weight:var(--pf-w-semibold); color:var(--pf-band);
	background:var(--pf-brand); border:1px solid var(--pf-brand);
	border-radius:var(--pf-r-sm); cursor:pointer;
}
.psf-sup__sig:hover{ background:var(--pf-brand-deep); border-color:var(--pf-brand-deep); }
.psf-sup__reset{
	margin-left:var(--pf-s-3); min-height:48px; padding:var(--pf-s-3) var(--pf-s-4);
	font-family:var(--pf-sans); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx); background:none; border:1px solid var(--pf-line);
	border-radius:var(--pf-r-sm); cursor:pointer;
}

/* ── La ronda ──────────────────────────────────────────────────── */
.psf-sup__jugadas{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pf-s-3); margin-top:var(--pf-s-4); }
.psf-sup__jug{
	display:flex; flex-direction:column; align-items:flex-start; gap:var(--pf-s-2);
	min-height:48px; padding:var(--pf-s-4);
	background:var(--pf-paper); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-sm); cursor:pointer; text-align:left;
}
.psf-sup__jug:hover:not(:disabled){ border-color:var(--pf-accent); background:var(--pf-accent-tint); }
.psf-sup__jug:disabled{ cursor:default; opacity:.72; }
.psf-sup__jug-ic{ color:var(--pf-brand-tx); }
.psf-sup__jug-ic svg{ width:2rem; height:2rem; display:block; }
.psf-sup__jug-n{ font-family:var(--pf-sans); font-size:var(--pf-fs-small); font-weight:var(--pf-w-semibold); color:var(--pf-ink); }
.psf-sup__jug-d{ font-size:var(--pf-fs-micro); line-height:var(--pf-lh-body); color:var(--pf-ink-soft); }

/* ── El reglamento ─────────────────────────────────────────────── */
.psf-sup__reglas{ max-width:var(--pf-w-read); margin-top:var(--pf-s-16); }
.psf-sup__reglas-l{ list-style:none; padding:0; margin:var(--pf-s-4) 0; display:grid; gap:var(--pf-s-3); }
.psf-sup__regla{
	display:grid; gap:var(--pf-s-1);
	padding:var(--pf-s-3) var(--pf-s-4);
	background:var(--pf-paper-alt); border-radius:var(--pf-r-sm);
	border-left:3px solid var(--pf-sage);
}
.psf-sup__r-par{ font-size:var(--pf-fs-small); color:var(--pf-ink); }
.psf-sup__r-p{ font-size:var(--pf-fs-micro); line-height:var(--pf-lh-body); color:var(--pf-ink-soft); }
.psf-sup__h3{ font-family:var(--pf-serif); font-size:var(--pf-fs-h4); color:var(--pf-ink); margin:var(--pf-s-8) 0 var(--pf-s-3); }
.psf-sup__citas{ padding-left:var(--pf-s-4); margin:0; display:grid; gap:var(--pf-s-3); }
.psf-sup__citas li{ font-size:var(--pf-fs-micro); line-height:var(--pf-lh-body); color:var(--pf-ink-soft); }
.psf-sup__citas a{ color:var(--pf-accent-tx); }
.psf-sup__acceso{ color:var(--pf-ink-faint-tx); font-style:italic; }
.psf-sup__nota{ font-size:var(--pf-fs-small); line-height:var(--pf-lh-body); color:var(--pf-ink-soft); max-width:60ch; }
.psf-sup__nojs{ font-size:var(--pf-fs-small); color:var(--pf-ink-soft); }

/* ── El teléfono ───────────────────────────────────────────────── */
/* A 560 px dos columnas parten «Levomepromazina» en dos líneas y el botón
   deja de leerse de un vistazo, que es lo único que un botón tiene que
   hacer. Una columna. */
@media (max-width:560px){
	.psf-sup__h1{ font-size:var(--pf-fs-h2); }
	.psf-sup__carta{ padding:var(--pf-s-4); }
	.psf-sup__ops{ grid-template-columns:1fr; }
	.psf-sup__jugadas{ grid-template-columns:1fr; }
	.psf-sup__jug{ flex-direction:row; align-items:center; flex-wrap:wrap; }
	.psf-sup__jug-d{ flex:1 0 100%; }
	.psf-sup__sig{ width:100%; }
	.psf-sup__reset{ width:100%; margin:var(--pf-s-2) 0 0; }
	.psf-sup__marcador{ gap:var(--pf-s-2); padding:var(--pf-s-2) var(--pf-s-3); }
}

@media (prefers-reduced-motion:reduce){
	.psf-sup__m-r{ transition:none; }
	.psf-sup__op{ transition:none; }
}

@media print{
	.psf-sup__marcador, .psf-sup__ops, .psf-sup__sig, .psf-sup__reset{ display:none !important; }
}

/* ── La meta elegible ───────────────────────────────────────────────
   [D-235 · v9.54.0] Cinco aciertos o diez. Va en la cabecera y no en
   un menú de ajustes: es la primera decisión de la partida —cuánto
   tiempo tengo— y esconderla la volvería invisible, que es lo que le
   pasó a la sexta pestaña en la v9.44.0.                            */
.psf-sup__meta{
	border:0; margin:var(--pf-s-4) 0 0; padding:0;
	display:flex; align-items:center; gap:var(--pf-s-3); flex-wrap:wrap;
}
.psf-sup__meta legend{
	float:left; font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	letter-spacing:var(--pf-track-label); text-transform:uppercase;
	color:var(--pf-ink-faint-tx); padding:0; margin-right:var(--pf-s-3);
}
.psf-sup__meta-chips{display:flex; gap:var(--pf-s-2)}
.psf-sup__meta-chips button{
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill); padding:3px var(--pf-s-3);
	cursor:pointer; font:inherit; font-size:var(--pf-fs-micro);
	font-family:var(--pf-mono); color:var(--pf-ink-soft);
}
.psf-sup__meta-chips button:hover{border-color:var(--pf-accent); color:var(--pf-accent-tx)}
.psf-sup__meta-chips button[aria-pressed="true"]{
	background:var(--pf-accent-tint); border-color:var(--pf-accent); color:var(--pf-accent-tx);
	font-weight:var(--pf-w-semibold);
}
.psf-sup__meta-n{font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx)}