/**
 * psf-friend-foe.css — el juego de disparar al que no pertenece.
 * [D-245 · v9.64.0]
 *
 * LA REGLA QUE MANDA SOBRE TODO ESTE ARCHIVO: las cápsulas de los amigos y
 * las de los enemigos se pintan EXACTAMENTE IGUAL. Un solo selector, `.cap`,
 * y ni una sola variante por bando. Si alguien añadiera aquí
 * `.cap--enemigo{ border-color:… }` el juego se ganaría sin saber una palabra
 * de psicofarmacología. El color entra únicamente en `.cap.es-ok` y
 * `.cap.es-mal`, que se ponen DESPUÉS de disparar y solo dicen si se acertó.
 *
 * Todo el color sale de psf-tokens.css. El juego no estrena ni un valor
 * hexadecimal: si mañana cambia el verde del sitio, cambia también el de los
 * aciertos, y el modo oscuro ya viene resuelto de allí.
 */

/* ── entrada ─────────────────────────────────────────────────────────── */

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

.psf-ff__cab{ max-width:var(--pf-w-read); margin-bottom:var(--pf-s-6); }

.psf-ff__h1{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h1);
	line-height:1.1; margin:4px 0 8px; color:var(--pf-ink);
}

.psf-ff__lead{
	font-family:var(--pf-sans); font-size:var(--pf-fs-body);
	line-height:1.55; color:var(--pf-ink-soft); margin:0 0 12px; max-width:62ch;
}
.psf-ff__lead b{ color:var(--pf-ink); font-weight:600; }

/* ── marcador ────────────────────────────────────────────────────────── */

.psf-ff__marcador{
	display:flex; align-items:center; gap:16px; flex-wrap:wrap;
	padding:8px 2px;
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-soft);
}
.psf-ff__cuenta b{ color:var(--pf-ink); }
.psf-ff__vidas{ font-size:calc(var(--pf-fs-body) * .95); letter-spacing:.18em; color:var(--pf-danger-tx); }
.psf-ff__ronda-n{ margin-left:auto; }

/* ── el campo ────────────────────────────────────────────────────────── */

/*
 * El rayado de fondo es el del papel pautado de un cuaderno, y está para que
 * se note que la cápsula cae: sin una referencia fija detrás, el movimiento
 * lento de las primeras rondas casi no se ve.
 */
.psf-ff__campo{
	position:relative; width:100%;
	height:min(62vh, 520px); min-height:340px;
	background:
		repeating-linear-gradient(to bottom, transparent 0 27px, var(--pf-line) 27px 28px),
		var(--pf-paper-alt);
	border:1.5px solid var(--pf-line); border-radius:var(--pf-r-sm);
	overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none;
	cursor:crosshair;
}
.psf-ff__campo:focus-visible{
	outline:var(--pf-focus) solid var(--pf-brand); outline-offset:2px;
}

/* LAS CÁPSULAS. Un solo aspecto. Véase la nota de arriba. */
.psf-ff__campo .cap{
	position:absolute; display:flex; align-items:center; justify-content:center;
	padding:6px 11px; border-radius:var(--pf-r-pill);
	background:var(--pf-surface); border:1.5px solid var(--pf-ink-faint);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small); font-weight:600;
	color:var(--pf-ink); white-space:nowrap;
	box-shadow:0 1px 0 var(--pf-line);
	will-change:transform;
}
.psf-ff__campo .cap.es-ok{
	background:var(--pf-ok-tint); border-color:var(--pf-ok); color:var(--pf-ok-tx);
}
.psf-ff__campo .cap.es-mal{
	background:var(--pf-danger-tint); border-color:var(--pf-danger); color:var(--pf-danger-tx);
}

.psf-ff__campo .bala{
	position:absolute; width:3px; height:12px; border-radius:2px;
	background:var(--pf-ink); opacity:.8;
}

.psf-ff__campo .jugador{ position:absolute; width:52px; height:52px; pointer-events:none; }
.psf-ff__campo .jugador svg{ width:100%; height:100%; display:block; }
.psf-ff__campo .jugador svg path,
.psf-ff__campo .jugador svg circle{
	fill:none; stroke:var(--pf-ink); stroke-width:1.6;
	stroke-linecap:round; stroke-linejoin:round;
}

/* ── carteles (elegir, ronda, final) ─────────────────────────────────── */

.psf-ff__campo .cartel{
	position:absolute; inset:0; display:flex; flex-direction:column;
	align-items:center; justify-content:center; gap:10px;
	padding:22px 18px; text-align:center; overflow-y:auto;
	background:var(--pf-paper-alt);
}
@supports (background: color-mix(in srgb, red 50%, transparent)){
	.psf-ff__campo .cartel{
		background:color-mix(in srgb, var(--pf-paper-alt) 95%, transparent);
		backdrop-filter:blur(2px);
	}
}
.psf-ff__campo .cartel h2{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h3);
	margin:0; line-height:1.1; color:var(--pf-ink);
}
.psf-ff__campo .cartel p{
	margin:0; font-family:var(--pf-sans); font-size:var(--pf-fs-small);
	color:var(--pf-ink-soft); max-width:46ch;
}

.psf-ff__bandos{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:4px 0; }
.psf-ff__bando{
	flex:1 1 180px; max-width:260px; padding:11px 13px;
	border:1.5px solid var(--pf-line); border-radius:var(--pf-r-sm);
	background:var(--pf-surface);
}
.psf-ff__bando .rol{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	letter-spacing:.09em; text-transform:uppercase; font-weight:600; margin:0 0 3px;
}
.psf-ff__bando--amigo   .rol{ color:var(--pf-ok-tx); }
.psf-ff__bando--enemigo .rol{ color:var(--pf-danger-tx); }
.psf-ff__bando .qui{
	font-family:var(--pf-sans); font-size:var(--pf-fs-h4); font-weight:700;
	margin:0; line-height:1.25; color:var(--pf-ink);
}
.psf-ff__bando .lista{
	font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx);
	margin:5px 0 0; line-height:1.45;
}

.psf-ff__btn{
	font-family:var(--pf-sans); font-size:var(--pf-fs-small); font-weight:700;
	padding:11px 26px; min-height:var(--pf-tap); margin-top:4px;
	background:var(--pf-brand); color:#fff;
	border:0; border-radius:var(--pf-r-pill); cursor:pointer;
}
.psf-ff__btn:hover{ background:var(--pf-brand-deep); }
.psf-ff__btn:focus-visible{ outline:var(--pf-focus) solid var(--pf-ink); outline-offset:2px; }

/* ── la nemotecnia al perder ─────────────────────────────────────────── */

/*
 * Va con borde discontinuo y en el color de aviso porque NO es decoración:
 * es lo que el juego tenía que enseñar y no se aprendió. Tiene que leerse
 * distinto del resto del cartel.
 */
.psf-ff__mnemo{
	border:2px dashed var(--pf-warn); border-radius:var(--pf-r-md);
	padding:13px 15px; background:var(--pf-surface); max-width:520px; width:100%;
}
.psf-ff__mnemo .cab{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	letter-spacing:.09em; text-transform:uppercase;
	color:var(--pf-warn-tx, var(--pf-warn)); font-weight:600; margin:0 0 5px;
}
.psf-ff__mnemo .frase{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h4); font-weight:600;
	line-height:1.25; margin:0 0 10px; color:var(--pf-ink); max-width:none;
}
.psf-ff__mnemo .pares{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
.psf-ff__mnemo .par{
	flex:0 1 auto; padding:4px 8px; border-radius:3px;
	background:var(--pf-paper-alt); border:1px solid var(--pf-line);
	font-family:var(--pf-sans); font-size:var(--pf-fs-micro); line-height:1.3; text-align:center;
}
.psf-ff__mnemo .par b{ display:block; font-weight:700; color:var(--pf-ink); }
.psf-ff__mnemo .par span{ display:block; color:var(--pf-ink-faint-tx); }

/* [D-259 · v9.77.0] Las rondas por receptor enseñan el dato en vez de la frase. */
.psf-ff__dato .datos{ list-style:none; margin:0; padding:0; text-align:left; }
.psf-ff__dato .datos li{
	padding:4px 0; border-bottom:1px solid var(--pf-line);
	font-family:var(--pf-sans); font-size:var(--pf-fs-micro); line-height:1.35; color:var(--pf-ink-faint-tx);
}
.psf-ff__dato .datos li:last-child{ border-bottom:0; }
.psf-ff__dato .datos b{ color:var(--pf-ink); font-weight:700; }

.psf-ff__porque{ max-width:44ch; }
.psf-ff__porque b{ color:var(--pf-danger-tx); }

/* ── el selector de personaje ────────────────────────────────────────── */

/*
 * [D-245] SIN RÓTULO DEBAJO DEL DIBUJO, y a propósito. Los botones no llevan
 * texto: lo que los distingue es el dibujo, y el nombre lo pone quien juega en
 * el campo de al lado. La descripción viaja en aria-label, para el lector de
 * pantalla, que sin ella oiría cinco botones idénticos.
 */
.psf-ff__elige{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:2px 0 4px; }
.psf-ff__av{
	width:72px; min-height:var(--pf-tap); padding:8px 4px; cursor:pointer;
	background:var(--pf-surface); border:1.5px solid var(--pf-line);
	border-radius:var(--pf-r-sm);
	display:flex; align-items:center; justify-content:center;
	transition:border-color var(--pf-anim, .15s), background var(--pf-anim, .15s);
}
.psf-ff__av:hover{ border-color:var(--pf-ink-faint); }
.psf-ff__av[aria-pressed="true"]{
	border-color:var(--pf-brand); border-width:2px; background:var(--pf-brand-tint);
}
.psf-ff__av:focus-visible{ outline:var(--pf-focus) solid var(--pf-brand); outline-offset:2px; }
.psf-ff__av svg{ width:46px; height:46px; display:block; }
.psf-ff__av svg path,
.psf-ff__av svg circle{
	fill:none; stroke:var(--pf-ink-faint); stroke-width:1.7;
	stroke-linecap:round; stroke-linejoin:round;
}
.psf-ff__av[aria-pressed="true"] svg path,
.psf-ff__av[aria-pressed="true"] svg circle{ stroke:var(--pf-ink); }

.psf-ff__quien{ min-height:3.2em; max-width:44ch; }

.psf-ff__nombrar{
	display:flex; gap:7px; align-items:center; flex-wrap:wrap; justify-content:center; margin-top:2px;
}
.psf-ff__nombrar label{ font-family:var(--pf-sans); font-size:var(--pf-fs-small); color:var(--pf-ink-soft); }
.psf-ff__nombrar input{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h4); font-weight:600;
	width:200px; min-height:var(--pf-tap); padding:4px 10px; text-align:center;
	background:var(--pf-surface); color:var(--pf-ink);
	border:0; border-bottom:2px solid var(--pf-ink-faint); border-radius:3px 3px 0 0;
}
.psf-ff__nombrar input::placeholder{
	font-family:var(--pf-sans); font-size:var(--pf-fs-small); font-weight:400; color:var(--pf-ink-faint-tx);
}
.psf-ff__nombrar input:focus-visible{ outline:var(--pf-focus) solid var(--pf-brand); outline-offset:2px; }

/* ── mandos y pie ────────────────────────────────────────────────────── */

.psf-ff__mandos{
	display:flex; gap:10px; flex-wrap:wrap; align-items:center;
	margin:10px 0 0; font-family:var(--pf-sans); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx);
}
.psf-ff__mandos kbd{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	padding:2px 6px; border:1px solid var(--pf-line); border-bottom-width:2px;
	border-radius:3px; background:var(--pf-paper-alt); color:var(--pf-ink-soft);
}

.psf-ff__pie{
	margin:32px 0 0; padding-top:20px; border-top:1px solid var(--pf-line);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small);
	line-height:1.6; color:var(--pf-ink-soft); max-width:64ch;
}
.psf-ff__pie p{ margin:0 0 10px; }
.psf-ff__pie b{ color:var(--pf-ink); font-weight:600; }
.psf-ff__pie-h{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h4);
	margin:18px 0 8px; color:var(--pf-ink);
}
.psf-ff__pie-rondas{ margin:0 0 10px; padding-left:20px; }
.psf-ff__pie-rondas li{ margin-bottom:7px; }
.psf-ff__pie-par{ display:block; font-weight:600; color:var(--pf-ink); }
.psf-ff__pie-amigo{ color:var(--pf-ok-tx); }
.psf-ff__pie-enemigo{ color:var(--pf-danger-tx); }
.psf-ff__pie-vs{ color:var(--pf-ink-faint-tx); font-weight:400; }
.psf-ff__pie-por{ display:block; color:var(--pf-ink-soft); font-size:var(--pf-fs-micro); }
.psf-ff__pie-nota{ color:var(--pf-ink-faint-tx); font-size:var(--pf-fs-micro); }

@media (max-width:480px){
	.psf-ff__campo{ height:min(58vh, 440px); }
	.psf-ff__av{ width:64px; }
	.psf-ff__av svg{ width:40px; height:40px; }
	.psf-ff__mandos-tel{ flex-basis:100%; }
}

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