/* Truco Uruguayo — almacén de barrio.
   Formica gastada, cartel de chapa esmaltada, marcador a tiza. */

:root {
  --madera: #171a16;
  --fieltro: #324237;
  --fieltro-alto: #3e5245;
  --fieltro-borde: #202b23;
  --crema: #ece1c8;
  --tiza: #f5f2e8;
  --oxido: #a8331f;
  --oxido-hondo: #7d2415;
  --mostaza: #d9a443;
  --cuero: #7e4a2a;
  --papel: #efe4cc;
  --tinta: #26211b;

  --col: min(100%, 460px);
  --gutter: 0.75rem;
  --radio: 9px;
  --ease: cubic-bezier(0.2, 0.9, 0.25, 1);

  /*
   * Las imágenes de las cartas son 288x384: relación 3:4. El ancho es el techo
   * o lo que sobre en la fila de la mano — tres cartas y tu retrato al lado —,
   * lo que sea menor. Sin esto la mano empuja la mesa fuera de la pantalla.
   */
  --cw-max: 6.8rem;
  --cw: min(var(--cw-max), (min(100vw, 460px) - var(--mug) - 3rem) / 3);
  --ch: calc(var(--cw) * 4 / 3);

  /* Mazo y muestra: la muestra manda en la mano, tiene que leerse de un vistazo. */
  --dw: 5.4rem;
  --dh: 7.2rem;
  /* El mazo con la muestra asomando media carta por el costado. */
  --mazo-w: calc(var(--dw) + var(--dh) / 2);

  /* La pared del marcador, a la derecha de la mesa. */
  --pared: 5.5rem;
  /* Lo que queda para la mesa: de ahí sale el tamaño de la carta jugada. */
  --mesa: calc(min(100vw, 460px) - 1rem - var(--pared) - 0.5rem);

  /* Descarte: cartas muertas, no necesitan cuerpo. */
  --pw: 2.7rem;
  --ph: 3.6rem;

  /* Retratos: comparten fila con las cartas de quien los mira. */
  --mug: 5.6rem;

  /*
   * La carta jugada es la que hay que mirar: se lleva todo el ancho que quede
   * libre en la mesa, con techo en el tamaño de la carta de la mano. Calculado
   * y no a ojo: si no, en pantallas angostas las jugadas se montaban encima de
   * la muestra.
   */
  --duel-k: 1.3;
  --duel-w: min(calc(var(--cw) * var(--duel-k)), calc((var(--mesa) - 1rem) / 2));
  --duel-h: calc(var(--duel-w) * 4 / 3);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

html {
  background: var(--madera);
}

body {
  min-height: 100dvh;
  color: var(--crema);
  font-family: 'Archivo Narrow', 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, #3c4d40 0%, #263127 55%, #171a16 100%);
  /* Después del reset: un `padding: 0` posterior borraría los insets. */
  padding-top: max(0.4rem, env(safe-area-inset-top));
  padding-bottom: max(0.4rem, env(safe-area-inset-bottom));
  padding-left: max(0.5rem, env(safe-area-inset-left));
  padding-right: max(0.5rem, env(safe-area-inset-right));
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

#view {
  position: relative;
  z-index: 1;
  width: var(--col);
  height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 0.8rem);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

button {
  min-height: 44px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  -webkit-appearance: none;
}

/* ------------------------------------------------------------- tipografía */

.display {
  font-family: 'Alfa Slab One', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9fb0a2;
}

/* ------------------------------------------------------------------ menú */

.menu {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.95rem;
  padding: 1rem 0.75rem 1.4rem;
  text-align: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.menu__mark {
  display: block;
  margin: 0 auto 0.1rem;
  width: 84px;
  height: 84px;
}

.menu__title {
  margin: 0;
  font-size: clamp(2.6rem, 14vw, 3.6rem);
  line-height: 0.92;
  color: var(--mostaza);
  text-shadow: 0 3px 0 var(--oxido-hondo), 0 5px 14px rgba(0, 0, 0, 0.5);
}

.menu__sub {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--crema);
  opacity: 0.72;
}

.menu__rule {
  width: 72%;
  height: 3px;
  margin: 0.2rem auto;
  background: linear-gradient(90deg, transparent, var(--cuero) 22%, var(--cuero) 78%, transparent);
}

/* ------------------------------------------------------------- el plantel */

.cast { display: grid; gap: 0.35rem; }

.cast__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }

.cast__one {
  min-height: 0;
  padding: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(236, 225, 200, 0.26);
  background: var(--papel);
  overflow: hidden;
  opacity: 0.6;
  transition: opacity 140ms var(--ease);
}

.cast__one[aria-pressed='true'] {
  opacity: 1;
  border-color: var(--mostaza);
  box-shadow: 0 0 0 2px rgba(217, 164, 67, 0.28);
}

.cast__one:active { transform: translateY(2px); }

.cast__face { display: block; width: 100%; height: 100%; object-fit: cover; }

.cast__who { display: grid; gap: 0.06rem; margin: 0; }
.cast__who b { font-size: 1.05rem; color: var(--mostaza); }
.cast__who span {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.66;
}

.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }

.level {
  padding: 0.55rem 0.2rem;
  border: 2px solid rgba(236, 225, 200, 0.28);
  border-radius: var(--radio);
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.level[aria-pressed='true'] {
  border-color: var(--mostaza);
  background: rgba(217, 164, 67, 0.16);
  color: var(--mostaza);
}

.level small { display: block; font-size: 0.62rem; letter-spacing: 0.04em; opacity: 0.6; text-transform: none; }

.btn {
  padding: 0.7rem 1rem;
  border-radius: var(--radio);
  border: 2px solid var(--oxido-hondo);
  background: linear-gradient(180deg, #b93c26, var(--oxido) 55%, var(--oxido-hondo));
  color: var(--tiza);
  font-family: 'Alfa Slab One', Georgia, serif;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.42);
}

.btn--ghost {
  background: rgba(0, 0, 0, 0.24);
  border-color: rgba(236, 225, 200, 0.3);
  color: var(--crema);
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: none;
}

.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.42); }

.menu__stats { font-size: 0.78rem; opacity: 0.66; letter-spacing: 0.08em; }

/* ------------------------------------------------------------- la mesa */

/*
 * Filas: topbar, rival, paño, mano, botonera, pista. El paño tiene techo — no
 * puede comerse la pantalla — y el aire sobrante se reparte entre las filas en
 * vez de acumularse en un hueco.
 */
/*
 * Dos columnas: la mesa y, a la derecha, la pared donde baja la cuenta. La
 * pared acompaña al rival y al paño; la pista, la mano y la botonera cruzan
 * de lado a lado.
 */
.table {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* El paño se queda con todo el aire que sobre: nada de huecos repartidos. */
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  gap: 0.4rem 0.5rem;
  min-height: 0;
}

.topbar, .hint, .mano, .actions { grid-column: 1 / -1; }
.rival { grid-column: 1; grid-row: 2; }
.felt { grid-column: 1; grid-row: 3; }
.marcas { grid-column: 2; grid-row: 2 / 4; }

/* Mientras se levanta la baza nadie toca nada, pero la botonera no se mueve. */
.table.is-frozen .hand,
.table.is-frozen .actions { pointer-events: none; }

/*
 * Los dos personajes se miran en diagonal: el rival arriba a la izquierda, vos
 * abajo a la derecha. Cada globo sale de su propia cara, hacia el centro de la
 * mesa.
 */
.rival {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  min-height: 3.6rem;
}

.rival__hand { display: flex; gap: 0.3rem; justify-self: start; }

/* Los lomos del rival acompañan el tamaño de su retrato. */
.rival__hand .back { width: 3.1rem; height: 4.13rem; }

/* Tu fila: las cartas arrimadas a tu propia cara. */
.mano {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
}

.mug {
  position: relative;
  width: var(--mug);
  height: var(--mug);
  flex: none;
  /* Crecen hacia adentro de la mesa, nunca contra el borde de la pantalla. */
  transform-origin: 45% 25%;
}

.mano .mug { transform-origin: 55% 75%; }

/*
 * El que habla se planta adelante — crece y se corre hacia el centro de la
 * mesa — y el otro se hace a un lado. Es el gesto que dice de quién es la voz
 * sin leer una sola palabra.
 */
.mug.is-hablando { z-index: 3; }
.rival .mug.is-hablando { transform: translate(12%, 16%) scale(1.45); }
.mano .mug.is-hablando { transform: translate(-18%, -16%) scale(1.45); }
/* El que escucha se hace un poco a un lado, pero nunca se apaga: las dos caras
   están siempre igual de presentes en la mesa. */
.mug.is-escuchando { transform: scale(0.94); }

/*
 * A quien le toca mover, la cara le late y tira un aro. Es el único aviso de
 * turno que hay: no queda ningún cartel que lo diga.
 */
@keyframes turno {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes aro {
  0% { transform: scale(0.9); opacity: 0.95; }
  100% { transform: scale(1.45); opacity: 0; }
}

.mug.is-turno .mug__face {
  border-color: var(--mostaza);
  animation: turno 1.25s var(--ease) infinite;
}

.mug.is-turno::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 3px solid var(--mostaza);
  animation: aro 1.25s ease-out infinite;
  pointer-events: none;
}

.mug--npc.is-turno .mug__face { border-color: var(--oxido); }
.mug--npc.is-turno::after { border-color: var(--oxido); }

.mug__face {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--mostaza);
  background: var(--papel);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.38);
}

.mug--npc .mug__face { border-color: var(--oxido); }
.mug.is-hablando .mug__face { box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45); }

/* Quién es mano cuelga de la foto, como el cartelito en la mesa. */
.mug__mano {
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  transform: translateX(-50%);
  padding: 0.04rem 0.3rem;
  border-radius: 3px;
  background: var(--mostaza);
  color: #2a1f0a;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.back {
  display: block;
  width: 3rem;
  height: 4rem;
  border-radius: 6px;
  border: 2px solid var(--crema);
  background: linear-gradient(150deg, #2f4136, #223029);
  overflow: hidden;
  position: relative;
}

.back__weave {
  position: absolute;
  inset: 2px;
  border-radius: 3px;
  background-image:
    repeating-linear-gradient(45deg, rgba(236, 225, 200, 0.22) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(168, 51, 31, 0.3) 0 2px, transparent 2px 6px);
}

/*
 * El globo flota sobre el paño, colgado de la cara que habla. Es efímero:
 * tapar dos segundos el lomo de las cartas del rival no cuesta nada y se lee
 * como lo que es, alguien diciendo algo.
 */
.bubble {
  position: absolute;
  z-index: 4;
  max-width: min(21rem, 96%);
  padding: 0.45rem 0.7rem;
  background: var(--crema);
  color: var(--tinta);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.24;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}

.bubble::after {
  content: '';
  position: absolute;
  border: 7px solid transparent;
}

/*
 * Rival: cuelga bajo su cara, con el pico hacia arriba. El retrato crece
 * mientras habla, así que el globo se cuelga por debajo de donde llega la cara
 * agrandada; si no, la cara se le sienta encima.
 */
.rival .bubble {
  top: calc(100% + var(--mug) * 0.5 + 0.35rem);
  left: 0.4rem;
  border-radius: 3px 12px 12px 12px;
  text-align: left;
  transform-origin: 0 0;
}

.rival .bubble::after {
  top: -7px;
  left: calc(var(--mug) * 0.5);
  border-top: 0;
  border-bottom-color: var(--crema);
}

/* Vos: sale por encima de tu cara, con el pico hacia abajo. */
.bubble--vos {
  bottom: calc(100% + var(--mug) * 0.4 + 0.35rem);
  right: 0.4rem;
  border-radius: 12px 12px 3px 12px;
  text-align: right;
  transform-origin: 100% 100%;
}

.bubble--vos::after {
  bottom: -7px;
  right: calc(var(--mug) * 0.5);
  border-bottom: 0;
  border-top-color: var(--crema);
}

/* Las palabras entran de a una, como quien las dice. */
.bubble .word { display: inline-block; }

/* El canto va resaltado: es la regla, no el color. */
.bubble__canto { color: var(--oxido-hondo); font-weight: 800; }

/* Y cuando la frase no lo nombra, va adelante como etiqueta. */
.bubble__tag {
  display: inline-block;
  margin-right: 0.3rem;
  padding: 0.04rem 0.3rem;
  border-radius: 3px;
  background: var(--oxido);
  color: var(--tiza);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/*
 * La mesa no tiene borde: es el fondo de la pantalla, y las cartas se apoyan
 * ahí. Sin caja alrededor entra más carta.
 *
 * Tres filas: el mazo arriba cuando repartiste vos —o sea, cuando el mano es
 * el rival—, las cartas jugadas en el medio y el mazo abajo cuando el mano sos
 * vos. La fila del mazo que no se usa mide cero.
 */
.felt {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  align-content: stretch;
  gap: 0.35rem;
  min-height: 0;
}

.felt__mid { grid-row: 2; display: grid; place-items: center; width: 100%; }

/* El mazo queda del lado del que repartió, con el descarte colgando abajo. */
.pozo { display: grid; gap: 0.9rem; }
/*
 * Arriba, el mazo baja: pegado al rival se le encima la cara, sobre todo
 * cuando el retrato crece al hablar.
 */
.felt--npc .pozo { grid-row: 1; justify-self: start; justify-items: start; padding-top: 40px; }
.felt--vos .pozo { grid-row: 3; justify-self: end; justify-items: end; }

/* ------------------------------ la pared: la cuenta escrita a la tiza */

/* Rival primero, vos después: el mismo orden en que se miran las caras. */
.marcas {
  align-self: start;
  display: grid;
  grid-template-columns: repeat(2, 2.25rem);
  align-content: start;
  gap: 0.2rem 0.35rem;
  padding-left: 0.45rem;
  border-left: 1px solid rgba(236, 225, 200, 0.12);
}

/*
 * `align-content: start` en las dos: sin eso, la columna más corta reparte el
 * alto sobrante entre sus filas y las rayas le quedan desparramadas contra la
 * columna larga. La cuenta arranca arriba y baja, siempre.
 */
.marca { display: grid; justify-items: center; align-content: start; gap: 0.15rem; }

.marca__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.56rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #a9bbac;
}

/* De a cinco y para abajo, como en la pared del boliche. */
.marca__pila { display: grid; justify-items: center; align-content: start; gap: 0.12rem; }

/* La raya que separa malas de buenas: de ahí para abajo, se sigue contando. */
.marca__raya {
  width: 100%;
  height: 0;
  margin: 0.12rem 0;
  border-top: 1px dashed rgba(236, 225, 200, 0.5);
}

.tally { width: 1.75rem; height: 18px; color: #92a696; }
.tally--buenas { color: var(--tiza); }

.tricks { grid-column: 1 / -1; display: flex; justify-content: center; gap: 0.26rem; }

.pip {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 2px solid rgba(236, 225, 200, 0.35);
}

.pip--vos { background: var(--mostaza); border-color: var(--mostaza); }
.pip--npc { background: var(--oxido); border-color: var(--oxido); }
.pip--parda { background: repeating-linear-gradient(45deg, var(--mostaza) 0 3px, var(--oxido) 3px 6px); border-color: var(--crema); }

/* ----------------------------------------------- descarte, duelo y mazo */

/*
 * Mazo y muestra a la izquierda, con las bazas muertas apiladas debajo; el
 * duelo ocupa todo lo que queda, que es donde hay que mirar.
 */
.descarte {
  position: relative;
  justify-self: start;
  width: var(--pw);
  height: var(--ph);
}

.descarte .back {
  position: absolute;
  inset: 0;
  width: var(--pw);
  height: var(--ph);
  opacity: 0.92;
  transform: translate(calc(var(--i) * 1.5px), calc(var(--i) * -1.7px))
    rotate(calc(var(--i) * 3deg - 7deg));
}

.duel { justify-self: center; display: flex; align-items: center; gap: 0.5rem; height: 100%; }

/* Lo que mande: el techo de ancho o lo que quede de alto en el paño. */
.duel__slot {
  height: min(var(--duel-h), 100%);
  width: auto;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
}

.duel__slot .card { width: 100%; height: 100%; }

.duel__empty {
  width: 100%;
  height: 100%;
  border-radius: var(--radio);
  border: 2px dashed rgba(236, 225, 200, 0.1);
}

/*
 * El mazo va parado a la izquierda de la mesa y la muestra entra media carta
 * por debajo, acostada y apuntando al centro. Se rota -90deg: así el borde
 * superior de la carta queda a la vista y la mitad de abajo es la que
 * desaparece bajo el mazo.
 */
.mazo {
  position: relative;
  justify-self: start;
  width: var(--mazo-w);
  height: var(--dh);
}

.mazo__muestra {
  position: absolute;
  z-index: 0;
  right: 0;
  top: calc((var(--dh) - var(--dw)) / 2);
  width: var(--dh);
  height: var(--dw);
}

/* Con el mazo a la derecha, la muestra asoma para el otro lado. */
.felt--vos .mazo__pila { left: auto; right: 0; }
.felt--vos .mazo__muestra { right: auto; left: 0; }
.felt--vos .mazo__muestra .card { transform: translate(-50%, -50%) rotate(-90deg); }
.felt--vos .mazo__aviso { left: auto; right: 0; }

/*
 * Acostada y con la cabeza hacia afuera: la mitad que se ve es la de arriba,
 * que es la que se lee. La otra mitad desaparece bajo el mazo, a la izquierda.
 */
.mazo__muestra .card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--dw);
  height: var(--dh);
  transform: translate(-50%, -50%) rotate(90deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}

.mazo__pila {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 0;
  width: var(--dw);
  height: var(--dh);
}

/* Tocar el mazo es irse al mazo: cuando se puede, el lomo de arriba lo avisa. */
.mazo__pila--viva .back:nth-child(5) { border-color: var(--mostaza); }
.mazo__pila--viva:active { transform: translateY(2px); }

.mazo__aviso {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: -0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(10, 13, 10, 0.82);
  color: var(--mostaza);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}

.mazo__pila .back {
  position: absolute;
  inset: 0;
  width: var(--dw);
  height: var(--dh);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.42);
}

.mazo__pila .back:nth-child(1) { transform: translate(-3px, 2.5px) rotate(-2.6deg); }
.mazo__pila .back:nth-child(2) { transform: translate(2px, 1.5px) rotate(1.9deg); }
.mazo__pila .back:nth-child(3) { transform: translate(-1.5px, 0) rotate(-1.1deg); }
.mazo__pila .back:nth-child(4) { transform: translate(1px, -1px) rotate(0.7deg); }

/*
 * Anuncio sobre la mesa: sólo para lo que no se ve en las cartas. Letras
 * grandes y blancas, con sombra para que se lean sobre cualquier carta.
 */
.osd {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.osd__text {
  font-size: clamp(1.7rem, 10vw, 2.6rem);
  line-height: 1;
  color: #fff;
  text-align: center;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 10px 26px rgba(0, 0, 0, 0.85);
}

/* ------------------------------------------------------------- mi mano */

.hand {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--ch);
}

.card {
  position: relative;
  width: var(--cw);
  height: var(--ch);
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: var(--papel);
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transition: transform 140ms var(--ease);
}

/* La carta ya trae su propio borde y fondo dibujados. */
.card__face {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__flag {
  position: absolute;
  left: 50%;
  bottom: 0.42rem;
  transform: translateX(-50%);
  padding: 0.04rem 0.3rem;
  border-radius: 3px;
  background: var(--mostaza);
  color: #2a1f0a;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.card--mini { --cw: 2.9rem; --ch: 3.87rem; }
.card--mini .card__flag { display: none; }

.card--played { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45); }

.card:disabled { cursor: default; }
.hand .card:disabled { opacity: 0.58; }
.hand .card:not(:disabled):active { transform: translateY(-8px) rotate(-1deg); }

/* -------------------------------------------------------------- acciones */

/*
 * Alto reservado para dos filas de botones, que es lo que ocupa responder un
 * canto. Sin esto la mesa entera salta cada vez que la botonera aparece o se
 * vacía. Con cinco cantos a la vez —caso raro— todavía crece una fila.
 */
.actions {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  min-height: calc(88px + 0.35rem);
}

.actions__row { display: flex; flex-wrap: wrap; gap: 0.32rem; }

.act {
  flex: 1 1 auto;
  min-width: 5.4rem;
  padding: 0.5rem 0.55rem;
  border-radius: 7px;
  border: 2px solid rgba(236, 225, 200, 0.26);
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.act--si {
  border-color: #3f6b46;
  background: linear-gradient(180deg, #3d6a45, #2c4e32);
  color: var(--tiza);
}

.act--no {
  border-color: var(--oxido-hondo);
  background: linear-gradient(180deg, #963421, #6f2113);
  color: var(--tiza);
}

.act--sube {
  border-color: var(--mostaza);
  background: linear-gradient(180deg, #c89536, #9d7122);
  color: #241a06;
  font-weight: 700;
}

.act--mazo {
  flex: 0 1 auto;
  min-width: 0;
  border-color: transparent;
  background: none;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  opacity: 0.72;
}

.act:active { transform: translateY(2px); }

.hint {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fb0a2;
  min-height: 1.1rem;
}

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }

.icon-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9fb0a2;
  border: 1px solid rgba(236, 225, 200, 0.2);
  border-radius: 5px;
  min-height: 30px;
}

/* ---------------------------------------------------------------- hojas */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 1rem;
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  background: rgba(10, 13, 10, 0.78);
  cursor: pointer;
}

.sheet--fija { cursor: default; }

.sheet__card {
  width: min(100%, 400px);
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  border-radius: 12px;
  border: 2px solid var(--cuero);
  background: linear-gradient(180deg, #24302700, #202a22), var(--fieltro);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  cursor: default;
}

.sheet__title {
  margin: 0 0 0.5rem;
  font-family: 'Alfa Slab One', Georgia, serif;
  font-size: 1.5rem;
  color: var(--mostaza);
}

.sheet__card h3 {
  margin: 0.9rem 0 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mostaza);
}

.sheet__card p, .sheet__card li { margin: 0.25rem 0; font-size: 0.88rem; }
.sheet__card ul { margin: 0.2rem 0; padding-left: 1.05rem; }

.tantos {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0.6rem 0 0;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.26);
}

.tantos__que {
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mostaza);
}

.tantos__uno { display: flex; gap: 0.3rem; align-items: baseline; color: #a9bbac; font-size: 0.8rem; }
.tantos__uno b { font-family: 'Alfa Slab One', Georgia, serif; font-size: 1.05rem; }
.tantos__uno--gana { color: var(--tiza); }

.cuenta { margin: 0.7rem 0 0.5rem; }

.cuenta__row {
  display: flex;
  gap: 0.4rem;
  margin: 0.15rem 0;
  font-family: 'Alfa Slab One', Georgia, serif;
  font-size: 1rem;
  color: var(--tiza);
}

.cuenta__who { color: var(--mostaza); flex: none; }

.ledger { display: grid; gap: 0.25rem; margin: 0.6rem 0; }

.ledger__row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.26);
  font-size: 0.86rem;
}

.ledger__pts { font-weight: 700; color: var(--mostaza); }
.ledger__pts--resta { color: #e0806c; }

.mentira {
  margin: 0.5rem 0 0;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  border-left: 4px solid var(--oxido);
  background: rgba(168, 51, 31, 0.18);
  font-size: 0.88rem;
  color: var(--tiza);
}

.log { display: grid; gap: 0.15rem; }

.log__row {
  display: flex;
  gap: 0.4rem;
  font-size: 0.82rem;
  padding: 0.14rem 0;
  border-bottom: 1px solid rgba(236, 225, 200, 0.08);
}

.log__who { flex: none; width: 4.2rem; color: #9fb0a2; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* Lo que se dijeron, en el mismo hilo que lo que pasó. */
.log__row--dice { border-bottom-color: transparent; }
.log__dice { color: var(--tiza); font-style: italic; }

/* ---------------------------------------------------------- animaciones */
/* Sólo transform/opacity: Safari repinta cada frame si se interpola filter. */
/* El movimiento de cartas no está acá: lo mide y lo corre fx.js. */

.fx {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* Fantasma: clon de una carta que ya no existe en el DOM, en vuelo al descarte. */
.fx-ghost {
  position: fixed;
  margin: 0;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}

@keyframes asoma {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* El globo entra creciendo desde la boca de quien habla. */
@keyframes asoma-globo {
  from { opacity: 0; transform: translateY(5px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/*
 * El globo no desaparece de golpe: se apaga volviendo hacia la boca de quien
 * habló, y eso regala un rato más de lectura.
 */
@keyframes se-apaga-npc {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate(-0.4rem, -0.3rem) scale(0.94); }
}

@keyframes se-apaga-vos {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate(0.4rem, 0.3rem) scale(0.94); }
}

/* Entra hacia el centro de la mesa y vuelve a su lugar al callarse. */
@keyframes habla-npc {
  0% { transform: none; }
  55% { transform: translate(13%, 18%) scale(1.55); }
  100% { transform: translate(12%, 16%) scale(1.45); }
}

@keyframes calla-npc {
  from { transform: translate(12%, 16%) scale(1.45); }
  to { transform: none; }
}

@keyframes habla-vos {
  0% { transform: none; }
  55% { transform: translate(-19%, -18%) scale(1.55); }
  100% { transform: translate(-18%, -16%) scale(1.45); }
}

@keyframes calla-vos {
  from { transform: translate(-18%, -16%) scale(1.45); }
  to { transform: none; }
}

.rival .mug.is-entrando { animation: habla-npc 300ms var(--ease) both; }
.rival .mug.is-callando { animation: calla-npc 900ms var(--ease) both; }
.mano .mug.is-entrando { animation: habla-vos 300ms var(--ease) both; }
.mano .mug.is-callando { animation: calla-vos 900ms var(--ease) both; }

/* Cada raya nueva se anota con su golpe de tiza. */
@keyframes tiza {
  from { transform: scale(1.4); opacity: 0.25; }
  to { transform: none; opacity: 1; }
}

.tally--nueva { animation: tiza 220ms var(--ease) both; }

@keyframes palabra {
  from { opacity: 0; transform: translateY(0.22em); }
  to { opacity: 1; transform: none; }
}

.bubble.is-animate { animation: asoma-globo 220ms var(--ease) both; }

/* Sólo al aparecer: un repintado a mitad de vida no vuelve a hablar. */
.bubble.is-animate .word {
  animation: palabra 190ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 95ms);
}
.rival .bubble.is-fading { animation: se-apaga-npc 900ms var(--ease) both; }
.bubble--vos.is-fading { animation: se-apaga-vos 900ms var(--ease) both; }
.sheet.is-animate .sheet__card { animation: asoma 240ms var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-height: 740px) {
  :root {
    --cw-max: 5.6rem;
    --dw: 4.4rem; --dh: 5.87rem;
    --pw: 2.2rem; --ph: 2.93rem;
    --mug: 4.8rem;
    --duel-k: 1.05;
  }
  .pozo { gap: 0.5rem; }
  .rival__hand .back { width: 2.7rem; height: 3.6rem; }
  .menu { gap: 0.8rem; }
}

@media (max-width: 360px) {
  :root {
    --cw-max: 5.7rem;
    --dw: 4.4rem; --dh: 5.87rem;
    --pw: 2rem; --ph: 2.67rem;
    --pared: 4.9rem;
    --mug: 4.6rem;
    --duel-k: 1.1;
  }
  .marcas { grid-template-columns: repeat(2, 2rem); }
  .tally { width: 1.6rem; height: 16px; }
  .hand { gap: 0.3rem; }
  .mano { gap: 0.3rem; }
  .bubble { font-size: 1rem; }
}