/* TrucoEstrella — una sola hoja, sin recursos externos.
   Pensada para el teléfono primero: las cartas propias grandes y abajo, los
   cantos como botones que se tocan con el pulgar, el chat al final. */
:root{
  --fondo:#f3f1ea; --tarjeta:#fff; --tinta:#1d2321; --tenue:#5f6b66;
  --linea:#e2ded2; --verde:#0f5132; --verde2:#166d45; --oro:#8a6210;
  --rojo:#b3261e; --azul:#1b3a8f; --sombra:0 1px 3px rgba(0,0,0,.12);
  /* Un color por palo. Son versiones oscurecidas del color que se pidió: el
     amarillo y el celeste puros sobre papel blanco no se leen, y el número de
     la carta tiene que distinguirse de un vistazo desde el teléfono. */
  --palo-oro:#c98a00; --palo-copa:#c0271f; --palo-basto:#0d5a2b; --palo-espada:#0a6fa6;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--fondo);color:var(--tinta);
     font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
main{max-width:72rem;margin:0 auto;padding:.6rem .8rem .8rem}
h1,h2,h3{line-height:1.2;margin:0 0 .4rem}
h2{font-size:1.15rem}
h3{font-size:1rem;margin-top:1rem}
a{color:var(--verde)}
p{margin:.4rem 0}
.ayuda{color:var(--tenue);font-size:.86rem}

/* barra */
.barra{background:var(--verde);color:#fff;padding:.6rem .9rem;display:flex;
       gap:.6rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.barra h1{font-size:1.1rem;margin:0}
.barra h1 a{color:#fff;text-decoration:none;font-weight:800}
.barra h1 span{color:#ffd166}
.barra .marca{font-size:1.15rem;margin:0;letter-spacing:.02em;color:#fff;text-decoration:none;
  font-weight:800;line-height:1.2}
.barra .marca span{color:#ffd166}
.yo{display:flex;gap:.4rem;align-items:center;font-size:.9rem}
.yo #yo-apodo{font-weight:700}

/* ── La portada ────────────────────────────────────────────────────────────
   Lo primero que ve el que llega: de qué se trata, que hay gente jugando y
   cómo entrar, sin scrollear. El resto del sitio es sobrio; acá sí conviene
   que se note que es un juego. */
.hero{background:radial-gradient(120% 120% at 15% 0%,#1c7a4e 0%,#0f5132 45%,#0a3a24 100%);
  color:#fff;border-radius:20px;padding:1.6rem 1.3rem;margin:.8rem 0;
  display:grid;gap:1rem;align-items:center;box-shadow:var(--sombra);overflow:hidden}
@media(min-width:56rem){.hero{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
                              padding:2.4rem 2.2rem}}
.volanta-hero{margin:0;font-size:.78rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#ffd166}
.hero h1{font-size:clamp(1.8rem,5.5vw,3rem);line-height:1.05;margin:.3rem 0 .6rem;
  text-wrap:balance;letter-spacing:-.01em}
.bajada-hero{font-size:1.02rem;line-height:1.5;max-width:34rem;text-align:left}
.hero-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;padding:0;margin:.9rem 0}
.hero-chips li{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:.2rem .7rem;font-size:.82rem}
.hero-pulso{display:flex;align-items:center;gap:.4rem;flex-wrap:nowrap;font-size:.88rem;
  color:#d9ecdf;margin:.7rem 0}
.punto{width:.55rem;height:.55rem;border-radius:50%;background:#7ee08a;flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(126,224,138,.25)}
/* El punto, a la altura del primer renglón: si el texto corta en dos, centrado
   quedaba flotando entre los dos. */
.pulso .punto,.hero-pulso .punto{align-self:flex-start;margin-top:.42em}
.cta{display:inline-block;background:#ffd166;color:#12301f;font-weight:800;font:inherit;
  font-weight:800;padding:.7rem 1.4rem;border-radius:999px;text-decoration:none;
  border:0;cursor:pointer;margin:.3rem .3rem 0 0;line-height:1.2}
.cta:hover{background:#ffdd8d}
.cta.secundaria{background:rgba(255,255,255,.14);color:#fff}
.cta.secundaria:hover{background:rgba(255,255,255,.24)}
/* tres cartas en abanico, del mismo dibujo que las de la mesa */
.hero-cartas{display:flex;justify-content:center;align-items:center;min-height:9rem}
.hero-carta{transform-origin:bottom center}
.hero-carta .carta{width:5.5rem;height:8.2rem}
.hero-carta.c0{transform:rotate(-14deg) translateX(1.2rem)}
.hero-carta.c1{transform:translateY(-.8rem);z-index:2}
.hero-carta.c2{transform:rotate(14deg) translateX(-1.2rem)}
@media(max-width:56rem){.hero-carta .carta{width:4.2rem;height:6.3rem}}

.tarjetas{display:grid;gap:.7rem;grid-template-columns:1fr;margin:.9rem 0}
@media(min-width:44rem){.tarjetas{grid-template-columns:repeat(2,1fr)}}
@media(min-width:62rem){.tarjetas{grid-template-columns:repeat(3,1fr)}}
@media(min-width:86rem){.tarjetas{grid-template-columns:repeat(5,1fr)}}
.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;
  padding:.9rem 1rem;box-shadow:var(--sombra)}
.tarjeta h3{margin-top:0;font-size:.98rem;color:var(--verde)}
.tarjeta p{font-size:.9rem;margin:0}
.centrado{text-align:center}

/* el aviso de confirmar el correo: un solo renglón, porque está arriba de
   todo y en la mesa cada píxel es una carta que no se ve */
.confirmar{padding:.45rem .7rem;margin:.4rem 0}
.confirmar form{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.confirmar .que{flex:1 1 18rem;font-size:.88rem;line-height:1.35}
.confirmar input{max-width:6.5rem;font-size:1rem;letter-spacing:.18em;text-align:center;
  padding:.35rem .5rem}
.confirmar button{padding:.4rem .8rem;font-size:.88rem}
.confirmar .chico{background:var(--verde);color:#fff}
.confirmar .chico:hover{background:var(--verde2)}

/* el pulso arriba de la sala */
.pulso{display:flex;align-items:center;gap:.4rem;flex-wrap:nowrap;font-size:.88rem;
  color:var(--tenue);margin:.2rem 0 .6rem}

/* ── Trucardos ─────────────────────────────────────────────────────────────
   El símbolo va dibujado —una T con una barra— y hereda el color del texto,
   así se ve igual en la barra verde, en una tarjeta blanca y en el paño. */
.tc{display:inline-flex;align-items:center;gap:.15rem;white-space:nowrap;font-weight:700}
.tsimbolo{width:.72em;height:.84em;fill:currentColor;flex:0 0 auto}
.saldo{background:rgba(255,255,255,.18);border-radius:999px;padding:.1rem .55rem;font-size:.9rem}
.titulo-mov{border-left-color:var(--oro)!important;font-weight:700;margin-top:.6rem!important}

/* cajas y formularios */
.caja{background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;
      padding:.9rem 1rem;margin:.8rem 0;box-shadow:var(--sombra)}
.caja.angosta{max-width:26rem;margin:2rem auto}
.cols{display:grid;gap:.8rem;grid-template-columns:1fr}
@media(min-width:52rem){.cols{grid-template-columns:1fr 1fr;align-items:start}}
label{display:block;margin:.6rem 0;font-size:.9rem;font-weight:600}
label.chk{font-weight:500;display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
/* La aclaración de una opción va en su propio renglón, alineada con el texto:
   al lado partía la etiqueta en dos columnas en el teléfono. */
label.chk .ayuda{flex:1 1 100%;margin-left:1.6rem}
/* El selector de la apuesta, como los demás campos; apagado se nota. */
label select{display:block;width:100%;margin-top:.3rem;font:inherit;font-weight:400;padding:.5rem .6rem;
  border:1px solid var(--linea);border-radius:10px;background:#fff;color:inherit}
label select:disabled{background:var(--fondo);color:var(--tenue)}
#apuesta-confirmar{display:block;font-weight:400;margin-top:.3rem}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number]{width:100%;font:inherit;padding:.55rem .7rem;
  border:1px solid var(--linea);border-radius:10px;background:#fff;color:inherit;font-weight:400}
fieldset{border:1px solid var(--linea);border-radius:10px;margin:.7rem 0;padding:.5rem .7rem}
legend{font-size:.8rem;color:var(--tenue);padding:0 .3rem}
.opciones{display:grid;gap:.2rem}
.opciones label{margin:.15rem 0;font-weight:500;display:flex;gap:.45rem;align-items:center}
button{font:inherit;font-weight:600;background:var(--verde);color:#fff;border:0;
       border-radius:10px;padding:.6rem 1rem;cursor:pointer}
button:hover{background:var(--verde2)}
button[disabled]{opacity:.4;cursor:not-allowed}
/* `chico` se usa en dos fondos: la barra verde de arriba (translúcido) y las
   cajas blancas de la mesa (verde sólido). El hover tenía un blanco
   translúcido único, que sobre fondo claro dejaba el texto casi ilegible.
   Cada fondo tiene ahora el suyo. */
button.chico{font-size:.82rem;padding:.35rem .7rem;background:rgba(255,255,255,.18)}
.barra button.chico:hover,.barra button.chico:focus-visible{background:rgba(255,255,255,.34);color:#fff}
button.peligro{background:var(--rojo)}
button.peligro:hover,button.peligro:focus-visible{background:#8c1c16}
.barra-mesa .chico:hover,.barra-mesa .chico:focus-visible{background:var(--verde2);color:#fff}
.barra-mesa .chico.peligro:hover,.barra-mesa .chico.peligro:focus-visible{background:#8c1c16;color:#fff}
button:focus-visible{outline:3px solid #ffd166;outline-offset:2px}
.fila{display:flex;gap:.4rem;flex-wrap:wrap}
.fila input{flex:1;min-width:8rem}

/* lobby */
ul.mesas{list-style:none;margin:.4rem 0;padding:0}
ul.mesas li{display:flex;gap:.6rem;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--linea);padding:.5rem 0}
ul.mesas b{display:block}
ul.mesas .ayuda{display:block}
#resumen-historial{display:flex;gap:.5rem;flex-wrap:wrap;margin:.3rem 0 .6rem}
.dato-h{background:#fbfaf6;border:1px solid var(--linea);border-radius:10px;
  padding:.3rem .6rem;font-size:.78rem;color:var(--tenue);display:flex;gap:.35rem;align-items:baseline}
.dato-h b{font-size:1.15rem;color:var(--tinta)}
.dato-h.gane b{color:var(--verde)}
.dato-h.perdi b{color:var(--rojo)}
ul.historial{list-style:none;margin:.4rem 0;padding:0}
ul.historial li{border-left:4px solid var(--linea);padding:.3rem .6rem;margin:.35rem 0}
ul.historial li.gane{border-color:var(--verde)}
ul.historial li.perdi{border-color:var(--rojo)}
ul.historial .ayuda{display:block}

/* ── La mesa ───────────────────────────────────────────────────────────────
   Todo lo de una partida tiene que entrar en una pantalla: antes había que
   scrollear para ver las cartas propias, y en el truco lo que se mira es la
   mesa entera de un vistazo. Por eso el paño ocupa el alto disponible, las
   tres rondas van en columnas y el marcador se fue a la columna del chat. */
.barra-mesa{display:flex;gap:.5rem;justify-content:space-between;align-items:center;
  flex-wrap:wrap;margin:.5rem 0 .3rem}
.barra-mesa .quees b{font-size:1rem}
.barra-mesa .ayuda{display:block;line-height:1.3}
.barra-mesa .chico{background:var(--verde);color:#fff}
.acciones-mesa{display:flex;gap:.35rem;flex-wrap:wrap}
.marcador-chico{display:none;margin:0;gap:.4rem}
.marcador-chico span{border-radius:999px;padding:.15rem .6rem;font-size:.82rem;font-weight:700}
.marcador-chico .nos{background:var(--verde);color:#fff}
.marcador-chico .ell{background:#6b2d2d;color:#fff}
.marcador-chico b{font-size:1.05rem}
@media(max-width:61.99rem){.marcador-chico{display:flex;order:3}
                           .barra-mesa .quees{flex:1 1 100%}}

ul.asientos{list-style:none;margin:.5rem 0;padding:0;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
ul.asientos li{border:1px dashed var(--linea);border-radius:12px;padding:.6rem;text-align:center}
ul.asientos li.eq0{border-color:#9ec7ae}
ul.asientos li.eq1{border-color:#e3b7a0}
ul.asientos li.ocupado{border-style:solid;background:#fafaf7}
ul.asientos .ayuda{display:block;font-size:.75rem}

/* el paño */
.pano{position:relative;
  background:radial-gradient(120% 90% at 50% 0%,#1c7a4e 0%,#12603c 55%,#0d4b2f 100%);
  border:4px solid #0a3a24;border-radius:18px;padding:.45rem .6rem;color:#fff;
  display:flex;flex-direction:column;gap:.3rem;
  box-shadow:inset 0 0 40px rgba(0,0,0,.28),var(--sombra)}
/* Con el alto ya medido por `ajustarPano()`, los mínimos de adentro sobran: si
   quedaran, el paño volvería a crecer hacia abajo en cuanto la mesa se llene.
   Ariel, 2026-09-21: «la mesa y el paño verde va cambiando de tamaño según
   como se va jugando… tratemos que esté fijo». */
.pano.medido{min-height:0}
.pano.medido .mesa-oval{min-height:8rem}
/* El alto que sobra es de la mesa, no del renglón que diga «juega fulano»:
   con `grid-template-rows` fijas, esconder el cartel del pica-pica corría todo
   y el hueco quedaba entre el estado y las cartas propias. */
.pano .lugares{flex:1 1 auto;min-height:0;align-content:center}
/* ── El óvalo de la mesa ───────────────────────────────────────────────────
   Cada uno en su lugar alrededor y su carta delante suyo, en un óvalo más
   chico. Las posiciones las calcula el JavaScript con ángulos y las pone en
   `left`/`top` en porcentaje, así que la mesa se estira con la pantalla sin
   que haya que escribir un caso por cada cantidad de jugadores. */
.mesa-oval{position:relative;width:100%;flex:1 1 auto;
  min-height:clamp(20rem,50vh,28rem);
  border-radius:50%/34%;background:rgba(0,0,0,.10);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.07)}
.oval-interior{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56%;height:58%;border-radius:50%/40%;
  border:2px dashed rgba(255,255,255,.14);background:rgba(0,0,0,.10)}
.puesto-mesa,.tiradas-de,.mazo-mesa{position:absolute;transform:translate(-50%,-50%)}
/* el mazo, en el hueco que hay a la derecha del que repartió */
.mazo-mesa{display:flex;justify-content:center}
.tiradas-de{display:flex;align-items:center;--cw:3.1rem}
/* El ancho de la carta jugada es una variable (`--cw`) que cada pantalla
   cambia, porque de ella sale también cuánto se encima la siguiente. */
.tiradas-de .carta,.espera-carta{width:var(--cw);height:calc(var(--cw) * 1.5)}
/* Las cartas de cada uno se apilan corridas, como en la mesa: la última
   arriba y entera, de las anteriores la esquina con el número y el palo. Lado
   a lado, las tres de la tercera ronda medían tres cartas de ancho y en la
   mesa de seis se pisaban con las del vecino y con su ficha (2026-10-10). */
.tiradas-de .tirada + .tirada{margin-left:calc(var(--cw) * -.64)}
/* La pastilla de la ronda va sólo en la de arriba: las de abajo asoman de a
   un tercio de carta y sus pastillas se tocaban («1ª2ª» en un bloque). El
   orden ya lo dice la pila, de izquierda a derecha. */
.tiradas-de .tirada:not(:last-child) .nro{display:none}

/* la carta jugada: con el número de ronda chiquito, para saber cuál es cuál */
.tiradas-de .tirada{position:relative;text-align:center}
.tiradas-de .tirada .nro{position:absolute;left:50%;bottom:-.62rem;transform:translateX(-50%);
  font-size:.66rem;font-weight:700;line-height:1.25;padding:0 .3rem;border-radius:999px;
  background:rgba(0,0,0,.55);color:#fff}
.tiradas-de .tirada.gana .carta{outline:2px solid #ffd166}
.tiradas-de .tirada.pierde .carta{opacity:.75}
.tiradas-de .tirada.parda .carta{outline:2px solid rgba(255,255,255,.5)}
.espera-carta{border:1px dashed rgba(255,255,255,.3);
  border-radius:8px}

/* la ficha de cada jugador, en su puesto alrededor del óvalo */
.puesto-mesa{width:7.6rem}
.jugador{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:.25rem .45rem;backdrop-filter:blur(2px)}
.jugador.compa{background:rgba(255,209,102,.2);border-color:rgba(255,209,102,.45)}
.jugador.enturno{outline:2px solid #ffd166;outline-offset:1px}
.jugador .nombre{margin:0;font-size:.84rem;font-weight:700;display:flex;gap:.35rem;
  align-items:center}
.jugador .quien-es{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;
  background:#ffd166;color:#123;font-weight:800;font-size:.76rem;flex:0 0 auto}
.chapas{margin:.15rem 0 0;display:flex;gap:.25rem;flex-wrap:wrap}
.chapa{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;
  border-radius:999px;padding:.05rem .4rem;background:rgba(255,255,255,.16)}
.chapa.mano{background:#ffd166;color:#123}
.chapa.fuera{background:rgba(0,0,0,.35);color:#f0c9c6}
/* La marca de que ese lugar lo juega la máquina. Los nombres de la compu son
   de verdad, así que esto es lo único que la distingue: chico, al lado del
   nombre y siempre presente. No compite con las chapas de juego (mano, tanto,
   al mazo), que son lo que hay que leer rápido. */
.marca-bot{flex:0 0 auto;margin-left:.15rem;opacity:.72;vertical-align:-1px}
#asientos .marca-bot{margin-left:.3rem;opacity:.6}
.chapa.mira{background:rgba(255,255,255,.14)}
.chapa.tanto{background:#fff;color:#123;border:1px solid #ffd166}
.manito{display:flex;gap:.15rem;align-items:flex-end}
.cuantas{display:none;font-size:.7rem;opacity:.8}
/* el mazo del que reparte: de canto, nunca con forma de carta */
.fila-manito{display:flex;gap:.45rem;align-items:flex-end;margin-top:.2rem}
.pila{display:inline-flex;flex-direction:column;align-items:center;gap:.15rem;flex:0 0 auto;
  font-size:.54rem;letter-spacing:.04em;text-transform:uppercase;font-weight:800;opacity:.8}
.pila::before{content:"";width:1.7rem;height:.85rem;border-radius:3px;border:1px solid #16306f;
  background:repeating-linear-gradient(180deg,#e8ecf7 0 2px,#2d4ea8 2px 3px);
  box-shadow:0 2px 3px rgba(0,0,0,.3)}

/* Con el óvalo corto —un teléfono chico, o cualquiera acostado— todo lo que
   va encima se dibuja en chico: a 180 px de alto las fichas se pisan entre
   ellas y con las cartas jugadas, y dos fichas que se rozan parecen un borde.
   La clase la pone `apretarMesa()`, que mide el óvalo de verdad: el ancho de
   la pantalla no dice nada del alto que quedó. */
.mesa-oval.apretada .puesto-mesa{width:4.4rem}
.mesa-oval.apretada .jugador{padding:.1rem .25rem}
.mesa-oval.apretada .jugador .nombre{font-size:.64rem;gap:.2rem}
.mesa-oval.apretada .avatar{width:.95rem;height:.95rem;font-size:.55rem}
.mesa-oval.apretada .chapa{font-size:.46rem;padding:.02rem .25rem}
.mesa-oval.apretada .manito{display:none}
.mesa-oval.apretada .cuantas{display:inline}
.mesa-oval.apretada .tiradas-de{--cw:1.6rem}
.mesa-oval.apretada[data-jugadores="6"] .tiradas-de{--cw:1.4rem}
.mesa-oval.apretada .tiradas-de .tirada .nro{display:none}
.mesa-oval.apretada .pila::before{width:1.3rem;height:.65rem}
.mesa-oval.apretada .pila{font-size:.46rem}
/* Y los chips de ronda bajan al borde, en un renglón: en el centro de un
   óvalo bajo no hay alto para una carta arriba, los chips y otra abajo. */
.mesa-oval.apretada .rondas-chip{top:auto;bottom:.2rem;transform:translateX(-50%);gap:.25rem;width:max-content;max-width:96%}
.mesa-oval.apretada .chip-ronda{flex-direction:row;gap:.25rem;min-width:0;padding:.1rem .4rem;font-size:.6rem}
.mesa-oval.apretada .chip-ronda b{font-size:.66rem}

/* En la mesa de seis, de los rivales alcanza con cuántas cartas les quedan:
   seis fichas con tres dorsos cada una llenan el óvalo y no dicen nada más.
   Las del compañero se siguen viendo, que son las que sirven. */
.mesa-oval[data-jugadores="6"] .jugador.rival .manito{display:none}
.mesa-oval[data-jugadores="6"] .jugador.rival .cuantas{display:inline}

/* el centro: cómo van las tres rondas */
.rondas-chip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center}
.chip-ronda{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:.15rem .45rem;font-size:.66rem;line-height:1.15;
  display:flex;flex-direction:column;align-items:center;min-width:3.1rem}
.chip-ronda b{font-size:.78rem}
.chip-ronda.activa{border-color:#ffd166;color:#ffd166}
.chip-ronda.gana{background:#ffd166;color:#123;border-color:#ffd166}
.chip-ronda.pierde{background:rgba(120,30,30,.55)}
.chip-ronda.vacia{opacity:.45}

/* las tres rondas, una al lado de la otra */
.centro{display:grid;align-content:center;min-height:0;gap:.5rem}
/* Lo que se cantó va abajo, al lado de las cartas propias: puesto a la derecha
   de la mesa la ensanchaba y empujaba las rondas (lo marcó Ariel). */
.cantado{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center}
.cantado-item{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:.35rem .5rem;text-align:center;line-height:1.2}
.cantado-item b{display:block;font-size:1rem;letter-spacing:.01em}
.cantado-item span{font-size:.72rem;opacity:.85}
.cantado-item.vacio{opacity:.6}
.cantado-item.urgente{background:#ffd166;color:#12301f;border-color:#ffd166;
  animation:late 1.1s ease-in-out infinite}
.cantado-item.urgente span{opacity:.9}
@keyframes late{50%{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.cantado-item.urgente{animation:none}}
.rondas{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.ronda{background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.08);border-radius:12px;
  padding:.25rem;display:grid;gap:.15rem;align-content:center}
.ronda.activa{border-color:rgba(255,209,102,.6);background:rgba(0,0,0,.24)}
.ronda .rot{margin:0;font-size:.7rem;text-align:center;opacity:.85;
  display:flex;gap:.3rem;justify-content:center;align-items:center;flex-wrap:wrap}
.quien-gano{font-weight:800;border-radius:999px;padding:0 .35rem;font-size:.62rem;
  text-transform:uppercase;letter-spacing:.04em}
.quien-gano.gana{background:#ffd166;color:#123}
.quien-gano.pierde{background:rgba(255,255,255,.2)}
.quien-gano.parda{background:rgba(255,255,255,.12)}
/* Cada equipo de su lado: el rival arriba y uno abajo, enfrentados. */
.tiradas{display:flex;gap:.25rem;justify-content:center;flex-wrap:wrap;min-height:1px}
.tiradas.ellos{align-items:flex-start}
.tiradas.nosotros{align-items:flex-end}
/* La carta del rival mira hacia uno: el nombre va arriba de su carta y el de
   los nuestros, abajo. Se invierte la tirada entera, no sólo la etiqueta. */
.tiradas.ellos .tirada{display:flex;flex-direction:column-reverse}
.tirada{text-align:center}
.hueco-ronda{width:3.1rem;height:4.65rem;border:1px dashed rgba(255,255,255,.22);border-radius:8px}

/* Un renglón y nunca dos: si el pica-pica lo alarga, se corta con «…» antes
   que cambiar el alto del óvalo. `contain:inline-size` corta la cadena del
   ancho mínimo, como en lo cantado: sin eso, «Pica-pica: A contra B · Mano
   terminada…» ensanchaba el paño y en el teléfono la mesa se salía a la
   derecha. */
.estado-juego{font-weight:700;margin:.1rem 0 0;text-align:center;font-size:.95rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;contain:inline-size}
.estado-juego b{color:#ffd166}
/* En el teléfono no hay ancho para tres columnas: los costados pasan a ser
   filas arriba y abajo del centro, que es lo mismo pero apilado. */
@media(max-width:46rem){
  /* En el teléfono todos los demás van arriba y la mesa abajo: es el orden en
     que se mira la pantalla, y con tres columnas las fichas no entran. */
  .lugares{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"arriba arriba" "izq der" "centro centro"}
  .lugar.izq,.lugar.der{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .lugar.izq{justify-content:flex-start}
  .lugar.der{justify-content:flex-end}
  .jugador{min-width:0;padding:.2rem .35rem}
  .carta.mini{width:1.65rem;height:2.5rem}
  /* De los rivales, en el teléfono, alcanza con saber cuántas cartas les
     quedan: tres dorsos por ficha ocupan media pantalla y no dicen nada más.
     Las del compañero sí se muestran, que son las que sirven. */
  .jugador.rival .manito{display:none}
  .jugador.rival .cuantas{display:inline}
  /* Las tres rondas, en un renglón abajo del óvalo: en el medio se comían el
     lugar de las cartas, que es lo que hay que ver. */
  .rondas-chip{top:auto;bottom:.2rem;transform:translateX(-50%);gap:.25rem;width:max-content;max-width:96%}
  .chip-ronda{flex-direction:row;gap:.25rem;min-width:0;padding:.1rem .4rem;font-size:.6rem}
  .chip-ronda b{font-size:.66rem}
  .tiradas-de{--cw:2.1rem}
  .mesa-oval{min-height:clamp(18rem,44vh,24rem);border-radius:46%/40%}
  /* fichas chicas: alcanza con quién es, cuántas cartas le quedan y las chapas */
  .puesto-mesa{width:5.6rem}
  .jugador{padding:.15rem .3rem}
  .jugador .nombre{font-size:.72rem;gap:.25rem}
  .avatar{width:1.1rem;height:1.1rem;font-size:.62rem}
  .chapa{font-size:.5rem;padding:.02rem .3rem}
  .carta.mini{width:1.4rem;height:2.1rem}
  .jugador.rival .manito{display:none}
  .jugador.rival .cuantas{display:inline}
  /* Las tres rondas, en un renglón abajo del óvalo: en el medio se comían el
     lugar de las cartas, que es lo que hay que ver. */
  .rondas-chip{top:auto;bottom:.2rem;transform:translateX(-50%);gap:.25rem;width:max-content;max-width:96%}
  .chip-ronda{flex-direction:row;gap:.25rem;min-width:0;padding:.1rem .4rem;font-size:.6rem}
  .chip-ronda b{font-size:.66rem}
  .barra-mesa .chico{font-size:.76rem;padding:.3rem .55rem}
  .confirmar .que b{display:block}
  /* En una mesa de seis, el paño no entra en un teléfono. Las cartas propias
     y el mazo se quedan pegados abajo mientras la mesa esté a la vista: son
     lo único que uno necesita tener siempre a mano. */
  .mi-zona{position:sticky;bottom:.25rem;z-index:3;
    background:rgba(8,48,30,.92);border-radius:14px;padding:.3rem;
    box-shadow:0 -6px 16px rgba(0,0,0,.25)}
}
.cuantas{display:none;font-size:.7rem;opacity:.8}
.pano .mis-cartas{display:flex;gap:.55rem;justify-content:center;margin:0}
/* La fila de abajo: el mazo si repartís vos, tus cartas y lo que se cantó. */
.mi-zona{display:flex;gap:.8rem;align-items:center;justify-content:center;flex-wrap:wrap;
  margin:.2rem 0 0}
.mi-mazo{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;justify-content:center}
.mi-mazo:empty{display:none}
@media(min-width:48rem){
  .mi-zona{flex-wrap:nowrap}
  .cantado{flex-direction:column;flex:0 0 9.5rem}
  .mi-mazo{flex:0 0 5rem;justify-content:flex-end}
  /* Con la partida en juego lo cantado es **un renglón al lado de las cartas**
     y no una columna: apilados, los tres cantos posibles —envido, flor y
     truco— son 10 rem de alto que salen del óvalo, y aparecen de a uno en el
     medio de la mano. Al lado ocupan el alto de una ficha y no mueven nada.

     Y la fila es una grilla de tres columnas —el mazo, las cartas, lo
     cantado— para que **las cartas propias queden en el centro** pase lo que
     pase a los costados: en una fila normal, lo cantado se lleva el lugar que
     sobra y las cartas se corren hacia la izquierda cada vez que alguien
     canta. */
  body.jugando .mi-zona{display:grid;align-items:center;
    grid-template-columns:minmax(6rem,1fr) auto minmax(6rem,1fr)}
  /* El lugar del mazo se guarda aunque esté vacío: es una columna de la
     grilla, y si desaparece las cartas dejan de estar en el centro justo
     cuando cambia el que es mano. */
  body.jugando .mi-mazo,body.jugando .mi-mazo:empty{display:flex;justify-content:flex-end}
  body.jugando .cantado{flex-direction:row;justify-content:flex-start}
}
/* Lo cantado se queda **siempre en un renglón**, acá y en el teléfono: si
   envuelve, la mesa se achica en el medio de la mano. El mínimo es el alto de
   una ficha, para que dé igual que no haya ninguna.

   Los cantos **se achican, no se salen**: en un teléfono de 360 px tres
   fichas no entran a lo ancho, y con una tira que se corre al costado el
   navegador del teléfono se aleja para que entre —la página queda más chica y
   la mesa, otra vez, de otro tamaño—. Achicándose entran siempre. */
body.jugando .cantado{flex-wrap:nowrap;align-items:center;min-height:2.4rem;
  overflow:hidden;min-width:0;contain:inline-size}
body.jugando .cantado-item{flex:0 1 auto;min-width:0;overflow:hidden}
/* Y en el teléfono, **nunca más de un tercio de la fila**: tres cantos son
   tres tercios y entran siempre, cuelgue lo que cuelgue el texto. Dejándolos
   a su tamaño no entraban, y un teléfono que no puede achicar el contenido se
   aleja: la página entera queda más chica —y la mesa, de otro tamaño—. */
@media(max-width:47.99rem){body.jugando .cantado-item{max-width:32%}}
/* El tercio es para cuando hay tres. Uno solo —«La mano vale 1» al empezar
   cada mano— cortado a un tercio se leía «La m… nadie…»: ocupa lo que haga
   falta, y dos, la mitad cada uno. El renglón es el mismo, así que la mesa
   no cambia de tamaño. */
@media(max-width:47.99rem){
  body.jugando .cantado-item:only-child{max-width:100%}
  body.jugando .cantado-item:first-child:nth-last-child(2),
  body.jugando .cantado-item:last-child:nth-child(2){max-width:49%}
  body.jugando .cantado-item.vacio{display:flex;gap:.45rem;align-items:baseline}
}
body.jugando .cantado-item b,body.jugando .cantado-item span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Y en el teléfono, **en su propio renglón**: en una pantalla de 414 px un
   canto solo entraba al lado de las cartas y tres no, así que la mesa se
   achicaba al segundo canto. */
@media(max-width:47.99rem){body.jugando .cantado{flex:1 0 100%}}
@media(min-width:48rem){body.jugando .cantado{min-height:2.9rem}}
/* En pantalla ancha sobra alto: la mano propia y las cartas de la mesa
   crecen para llenarlo, que es lo que uno mira todo el tiempo. */
@media(min-width:62rem){
  .carta-btn .carta{width:4.8rem;height:7.2rem}
  .tiradas-de{--cw:2.6rem}
  .jugador{min-width:7.5rem}
  /* Con la mesa apretada en pantalla ancha falta alto, no ancho: la ficha
     conserva su ancho y su lugar crece con ella. Con el lugar de 4,4 rem del
     teléfono la ficha se salía 50 px a la derecha y la mesa se veía torcida. */
  .mesa-oval.apretada .puesto-mesa{width:7.5rem}
  /* Y las chapas van en el renglón del nombre: debajo, la chapa de «mano»
     le sumaba 24 px a la ficha de enfrente y en un óvalo de 166 px eso la
     metía sobre su propia carta, una mano sí y una no (2026-10-10). */
  .mesa-oval.apretada .jugador{display:flex;flex-wrap:wrap;align-items:center;column-gap:.3rem}
  .mesa-oval.apretada .chapas{margin:0}
  /* Con seis, las dos cartas de cada costado van una encima de la otra y en
     un óvalo de 166 px no hay alto para las dos del tamaño de siempre. */
  .mesa-oval.apretada[data-jugadores="6"] .tiradas-de{--cw:1.4rem}
  .carta.mini{width:1.9rem;height:2.85rem}
  .pila::before{width:2rem;height:1rem}
}

.fin{border:2px solid var(--verde);background:#f6fbf7}
.fin h3{margin-top:0}
/* En pantalla ancha el cartel de la revancha pone los botones a la derecha
   del texto: apilado se llevaba 143 px del alto de 1366×768 y el óvalo
   quedaba apretado. */
@media(min-width:62rem){
  .fin{display:grid;grid-template-columns:1fr auto;align-items:center;
    gap:.2rem 1rem;padding:.6rem 1rem}
  .fin h3,.fin p{margin:0}
  .fin .fila,.fin p:has(.boton-volver){grid-column:2;grid-row:1 / span 2}
}
.fin .fila{margin-top:.6rem}

/* el tanteador, con los fósforos de la mesa: los dos equipos uno al lado del
   otro, que ocupa la mitad del alto que ocupaban apilados */
.tanteador-caja{display:grid;gap:.25rem .6rem;padding:.5rem .7rem;
  grid-template-columns:1fr 1fr}
.tanteador-caja .lado .rotulo{margin:0 0 .15rem;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--tenue);display:flex;justify-content:space-between;align-items:baseline}
.tanteador-caja .lado .rotulo b{font-size:1.15rem;color:inherit}
.pie-tanteador{grid-column:1 / -1;font-size:.8rem;margin-top:.1rem}
.lado.nosotros{color:var(--verde)}
.lado.ellos{color:#8c3b34}
.fosforos{display:block;width:100%;height:auto;max-width:6rem}
.fosforos path{fill:none;stroke-width:3;stroke-linecap:round}
.fosforos .on{stroke:currentColor}
.fosforos .off{stroke:rgba(0,0,0,.09)}
.fosforos .raya{stroke:rgba(0,0,0,.22);stroke-width:1.4;stroke-dasharray:3 3}
.pie-tanteador{margin:0}

/* cartas */
.carta{width:3.1rem;height:4.65rem;background:#fff;border-radius:8px;border:1px solid #d8d2c2;
  color:var(--azul);display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  font-weight:800;box-shadow:var(--sombra);overflow:hidden}
.carta.mini{padding:.12rem}
.carta.p-oro{color:var(--palo-oro)}
.carta.p-copa{color:var(--palo-copa)}
.carta.p-basto{color:var(--palo-basto)}
.carta.p-espada{color:var(--palo-espada)}
.carta .num{font-size:.95rem;line-height:1}
.carta .palo{width:1.5rem;height:1.5rem}
.carta svg{width:100%;height:100%;fill:currentColor}
.carta svg .hueco{fill:#fff}
/* La cara dibujada ocupa toda la carta; el relleno lo pone el color del palo,
   y `hueco2` es el blanco del papel para las caras y los pliegues. */
.carta .cara{display:block}
.carta .cara .tinta{fill:currentColor}
.carta .cara .hueco2{fill:#fff;stroke:currentColor;stroke-width:1.6}
.carta .cara .indice{font:700 20px/1 system-ui,sans-serif;fill:currentColor}
/* El número de la esquina es texto y tiene que leerse (4,5:1 sobre blanco):
   el amarillo del oro da 2,9. Se oscurece sólo el número; las pintas y el
   dibujo siguen con el color del palo, que es lo que se pidió. Medido con
   el script de contraste el 2026-10-16. */
.carta.p-oro .cara .indice{fill:#94650a}
.carta.p-oro .num{color:#94650a}
.carta.mini{width:1.9rem;height:2.85rem;justify-content:center;gap:.1rem}
.carta.mini .num{font-size:.78rem}
.carta.mini .palo{width:1rem;height:1rem}
.carta.dorso{background:repeating-linear-gradient(45deg,#1b3a8f,#1b3a8f 4px,#2d4ea8 4px,#2d4ea8 8px);
  border-color:#16306f}

.mis-cartas{display:flex;gap:.5rem;justify-content:center;margin:.8rem 0}
.carta-btn{background:none;border:0;padding:0;cursor:pointer}
.carta-btn .carta{width:4.6rem;height:6.9rem}
.carta-btn[disabled] .carta{opacity:.7}
.carta-btn.hueco{display:block;width:0;visibility:hidden;margin-right:-.55rem}
.carta-btn:not([disabled]):hover .carta{transform:translateY(-6px);transition:transform .12s}

.cantos{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;margin:.4rem 0 .1rem}
/* La barra de cantos reserva siempre el alto del peor caso —contestar un truco
   con el envido y la flor abiertos son ocho botones—, y ese alto lo mide
   `reservarCantos()`: depende del ancho de la pantalla, y una reserva fija que
   alcanzaba en un teléfono de 390 px se quedaba corta en uno de 360. Si se
   midiera el alto de verdad, la mesa crecería y se achicaría sola cada vez que
   cambian los botones, que es cuando uno está mirando justamente ahí. */
body.jugando .cantos{margin:.3rem 0 .1rem;align-content:flex-start}
.canto{background:#fff;color:var(--verde);border:2px solid var(--verde)}
.canto .corto,.marcador-chico .corto,#sonido .corto{display:none}
.canto:hover{background:#eaf3ee}
.canto.quiero{background:var(--verde);color:#fff}
.canto.no-quiero,.canto.mazo{border-color:var(--rojo);color:var(--rojo)}
.canto.no-quiero:hover,.canto.mazo:hover{background:#fdeceb}
.canto.flor,.canto.contraflor,.canto.contraflor-al-resto{border-color:var(--oro);color:var(--oro)}

/* El chat y el tanteador van al costado en pantalla ancha y abajo en el
   teléfono: al lado de la mesa se leen sin perder de vista las cartas, y en
   390 px una columna de 20rem dejaría la mesa en la mitad. */
.juego-y-chat{display:grid;gap:.7rem}
.columna-lateral{display:grid;gap:.6rem;align-content:start}
.columna-lateral .caja{margin:0}
@media(min-width:62rem){
  .juego-y-chat{grid-template-columns:minmax(0,1fr) 20rem;align-items:start}
  .columna-lateral{position:sticky;top:.6rem}
  /* El paño ocupa lo que queda de pantalla: la mesa no se scrollea. */
  .pano{min-height:calc(100vh - 15rem)}
  .chat ul{max-height:calc(100vh - 25rem)}
}
@media(max-width:61.99rem){
  .pano{min-height:auto}
  .columna-lateral{order:2}
}

/* ── El teléfono, mientras se juega ────────────────────────────────────────
   Corrección de Ariel (2026-09-21): «muestra mucho arriba y abajo de la mesa
   cuando se juega y lo hace muy difícil». Medido en 390x844: arriba del paño
   había 310 px que no son la mesa —la barra del sitio, el cartel del correo,
   el nombre con el código y los dos botones— y abajo el tanteador y el chat.
   La mesa no entraba y había que scrollear entre las cartas y los cantos.

   `body.jugando` lo pone `pintarMesa()` **sólo con la partida en juego**: en
   la sala de espera el código de la mesa y «Copiar invitación» son justamente
   lo que hace falta, así que ahí no se esconde nada. El alto del paño no está
   acá sino en `ajustarPano()`, que lo mide: entrando por hiox arriba hay
   además la barra del portal, y una cuenta fija en CSS se queda corta. */
/* Mientras se juega, lo que no es la mesa no está: el cartel del correo, el
   código de la mesa, «Copiar invitación» y «Mi historial» son de la sala de
   espera, que es cuando hacen falta. **También en pantalla ancha** (Ariel,
   2026-09-21: «que entre todo en pantalla siempre haciendo foco y centro en la
   mesa»): en 1366×768 son 76 px que se lleva el óvalo. */
body.jugando #ver-historial,
body.jugando #crear-cuenta,
body.jugando #confirmar,
body.jugando #mesa-datos,
body.jugando #copiar{display:none}
@media(max-width:61.99rem){
  body.jugando main{padding:.25rem .5rem .4rem}
  body.jugando .barra{padding:.3rem .6rem}
  body.jugando .barra .marca{font-size:.95rem}
  /* Todo en un renglón: nombre de la mesa, el tanteador chico y la salida. */
  body.jugando .barra-mesa{margin:.2rem 0 .15rem;flex-wrap:nowrap;gap:.4rem}
  body.jugando .barra-mesa .quees{flex:1 1 auto;min-width:0;overflow:hidden}
  body.jugando .barra-mesa .quees b{display:block;font-size:.9rem;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.jugando .marcador-chico{order:0;flex:0 0 auto}
  body.jugando .acciones-mesa{flex:0 0 auto}
  /* El paño se queda con el alto que sobra y el óvalo, con lo que sobra dentro
     de él: sin esto el óvalo impone su `min-height` y el paño vuelve a crecer
     hacia abajo. */
  body.jugando .pano{flex:1 1 auto;min-height:0}
  body.jugando #mesa-oval{min-height:8rem}
  body.jugando .estado-juego{font-size:.85rem;margin:0}
  /* Lo cantado, en un renglón: son dos datos cortos y ocupaba tres líneas. */
  body.jugando .cantado-item{padding:.2rem .45rem;display:flex;gap:.35rem;
    align-items:baseline}
  body.jugando .cantado-item b{display:inline;font-size:.82rem}
  body.jugando .cantado-item span{font-size:.68rem}
  /* Con la pantalla entera para la mesa sobra alto: se lo llevan las cartas,
     que es lo que hay que leer. Las propias, grandes; las jugadas, del tamaño
     que tenían en la pantalla ancha (a 2,1 rem no se distingue un 7 de un 6
     de reojo). */
  body.jugando .carta-btn .carta{width:5.2rem;height:7.8rem}
  body.jugando .tiradas-de{--cw:2.6rem}
}

/* ── Entrando por hiox, la banda del portal no juega la mano ───────────────
   La copia de hiox lleva inyectados la barra del portal, un anuncio debajo y
   el pie. En un teléfono la barra sola son **177 px** —siete secciones que
   envuelven en tres renglones— y el anuncio es un bloque de 300×250: entre
   los dos empujan la mesa media pantalla para abajo, que es de lo que se
   quejó Ariel.

   Mientras dura la partida (`body.jugando`) eso no se muestra. **En la
   portada, en la sala y en la mesa esperando jugadores está todo**, que es
   donde el portal se lee, donde entra Google y donde el anuncio tiene sentido:
   nadie mira un aviso en el medio de una mano. El anuncio se esconde también
   en pantalla ancha, porque ahí el paño ya pide el alto de la ventana. */
body.jugando .hx-ad{display:none}
@media(max-width:61.99rem){
  body.jugando .hx-barra,body.jugando .hx-pie{display:none}
}

/* ── El cajero y el pedido de trucardos ────────────────────────────────────
   El cajero es una tabla y nada más: es la pantalla que toca el saldo de la
   gente, así que cuanto menos tenga, menos puede salir mal. Los estilos van
   acá —y no adentro de `cajero.html`— porque esa página ya baja esta hoja.

   Los `data-r` de cada celda son el rótulo que se muestra en el teléfono,
   donde la tabla deja de ser tabla y cada fila pasa a ser una ficha: Ariel
   contesta los pedidos desde el celular, no sentado en la compu. */
.envoltorio{overflow-x:auto}
.envoltorio table{border-collapse:collapse;width:100%;font-size:.9rem}
.envoltorio th,.envoltorio td{text-align:left;padding:.45rem .5rem;
  border-bottom:1px solid var(--linea);vertical-align:top}
.envoltorio th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--tenue);font-weight:800}
.envoltorio td.num,.envoltorio th.num{text-align:right}
.envoltorio .donde{display:block;color:var(--tenue);font-size:.76rem;font-weight:400}
.envoltorio input{font-size:.86rem;padding:.3rem .4rem}
.envoltorio button{font-size:.82rem;padding:.35rem .6rem}
@media(max-width:46rem){
  .envoltorio thead{display:none}
  .envoltorio tr{display:block;border:1px solid var(--linea);border-radius:12px;
    padding:.4rem .5rem;margin:.5rem 0;background:var(--tarjeta)}
  .envoltorio td{display:block;border:0;padding:.15rem 0;text-align:left}
  .envoltorio td.num{text-align:left}
  .envoltorio td[data-r]::before{content:attr(data-r) ": ";color:var(--tenue);
    font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
}

/* El pedido al cajero, adentro del historial. Es un trámite y se lee como tal:
   qué pediste, cuándo, y qué contestaron. */
.pedir-tc{border-top:1px solid var(--linea);margin-top:.8rem;padding-top:.6rem}
.pedir-tc:empty{display:none}
.pedir-tc h3{margin-top:0}
.pedir-tc form{margin:.3rem 0}
.pedir-tc input[type=number]{max-width:7rem}

/* chat */
.chat ul{list-style:none;margin:0;padding:.3rem;max-height:14rem;overflow-y:auto;
  background:#fbfaf6;border:1px solid var(--linea);border-radius:10px}
.chat li{padding:.15rem .3rem;font-size:.88rem}
.chat li.m-juego{color:var(--tenue)}
.chat li.m-sala{color:var(--oro);font-style:italic}
/* Lo que escribe la administración desde el panel: se distingue por el tipo
   del mensaje, no por el apodo, así que un jugador no la puede imitar. */
.chat li.m-admin{background:#fff3cd;color:#5c4100;border-radius:8px;padding:.25rem .5rem;font-weight:600}
.chat form{margin-top:.5rem}

.aviso{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:9;
  background:var(--verde);color:#fff;padding:.6rem 1rem;border-radius:12px;box-shadow:var(--sombra);
  max-width:92vw}
.aviso.malo{background:var(--rojo)}

/* El pie propio del dominio (2026-10-16: sin el marco de hiox). Sobrio, del
   verde de la barra, y fuera de la mesa en juego (regla de abajo). */
footer.pie{background:#0b3d26;color:#cfe3d7;font-size:.86rem;padding:1.1rem .9rem 1.2rem;margin-top:1.2rem}
.pie-fila{max-width:72rem;margin:0 auto;display:flex;gap:.6rem 1.4rem;flex-wrap:wrap;
  align-items:center;justify-content:space-between}
.pie-marca{margin:0;font-weight:700;color:#fff}
.pie-marca span{color:#ffd166}
footer.pie nav{display:flex;gap:.3rem 1rem;flex-wrap:wrap}
footer.pie a{color:#e6f2ea;text-decoration:none;padding:.35rem 0;display:inline-block}
footer.pie a:hover,footer.pie a:focus-visible{text-decoration:underline;color:#fff}
.pie-legal{max-width:72rem;margin:.5rem auto 0;font-size:.78rem;color:#9fc2ae}
/* En la mesa el pie no aporta y se lleva medio renglón de cartas: la mesa
   tiene que entrar en una pantalla. */
body:has(#pantalla-mesa:not([hidden])) footer,
body:has(#pantalla-mesa:not([hidden])) .anuncio{display:none}

@media(max-width:34rem){
  .carta-btn .carta{width:3.8rem;height:5.6rem}
  .canto{padding:.5rem .7rem;font-size:.9rem}
  /* Jugando, los botones se achican: en un teléfono de 360 px los ocho del
     peor caso entran en dos renglones y no en tres, y esos 46 px son del
     paño. La barra reserva el peor caso (`reservarCantos()`), así que lo que
     se ahorra acá se lo lleva la mesa. */
  body.jugando .canto{padding:.42rem .5rem;font-size:.82rem}
  /* Y con los nombres cortos: «Al mazo» en vez de «Me voy al mazo». Es lo que
     hace que los ocho del peor caso entren en dos renglones. */
  .canto .largo,.marcador-chico .largo,#sonido .largo{display:none}
  .canto .corto,.marcador-chico .corto{display:inline}
  #sonido .corto{display:block}
  .marcador-chico{gap:.3rem}
  body.jugando .barra-mesa{gap:.3rem}
  .marcador-chico span{padding:.15rem .5rem}
  .marcador-chico span span{padding:0}
  .jugador{min-width:6.5rem}
  /* En un teléfono angosto tres cartas de 5,2 rem más el mazo no entran en el
     renglón: se achican, que es distinto de apilarse. Las jugadas vuelven a
     su tamaño chico por lo mismo: a 320 px, con 2,6 rem, la carta de uno se
     pisaba con la ficha del de al lado —medido, no supuesto—. */
  body.jugando .carta-btn .carta{width:4.4rem;height:6.6rem}
  body.jugando .tiradas-de{--cw:2.1rem}
  /* Seis fichas de 5,6 rem no entran alrededor de un óvalo de 320 px: se
     pisaban entre ellas y con las cartas jugadas. */
  .puesto-mesa{width:4.6rem}
  .jugador .nombre{font-size:.66rem}
  .carta.mini{width:1.2rem;height:1.8rem}
}

/* Cuando de la ficha sólo queda cuántas cartas tiene —el teléfono, la mesa
   apretada—, el número va **en el renglón del nombre** con un dorsito, en vez
   de «3 cartas» en un segundo renglón: la ficha pasa de 40 a 22 px de alto y
   ese alto es el que les falta a las pilas de la tercera ronda. Si el nombre
   es largo, el número baja solo (es un renglón que envuelve). Las chapas van
   también al lado, como ya iban en el escritorio bajo. */
@media(max-width:46rem){
  .jugador{display:flex;flex-wrap:wrap;align-items:center;column-gap:.3rem}
  .jugador .nombre{min-width:0}
  .chapas{margin:0}
  .fila-manito{margin-top:0}
  .cuantas .palabra{display:none}
  .cuantas{align-items:center;font-weight:800}
  .cuantas::before{content:"";display:inline-block;vertical-align:-.1rem;margin-right:.15rem;flex:none;width:.5rem;height:.72rem;border-radius:2px;
    border:1px solid rgba(255,255,255,.55);
    background:repeating-linear-gradient(45deg,#1b3a8f 0 2px,#2d4ea8 2px 4px)}
  .mesa-oval .jugador.rival .cuantas{display:inline-flex}
}
.mesa-oval.apretada .jugador{display:flex;flex-wrap:wrap;align-items:center;column-gap:.3rem}
.mesa-oval.apretada .jugador .nombre{min-width:0}
.mesa-oval.apretada .chapas{margin:0}
.mesa-oval.apretada .fila-manito{margin-top:0}
.mesa-oval.apretada .cuantas .palabra{display:none}
.mesa-oval.apretada .jugador .cuantas{display:inline-flex;align-items:center;font-weight:800}
.mesa-oval.apretada .cuantas::before{content:"";display:inline-block;vertical-align:-.1rem;margin-right:.15rem;flex:none;width:.5rem;height:.72rem;border-radius:2px;
  border:1px solid rgba(255,255,255,.55);
  background:repeating-linear-gradient(45deg,#1b3a8f 0 2px,#2d4ea8 2px 4px)}

/* Cuerpo de texto justificado, que es la regla de los sitios de la casa: las
   tarjetas de la portada, la bajada y el reglamento. Con cortes de palabra
   para que en un teléfono no queden ríos de blanco. */
.tarjeta p,.bajada-hero,.reglas p,main.reglas li{text-align:justify;hyphens:auto}

/* La entrada con código de una cuenta confirmada, en la caja de la portada. */
#form-acceder .fila-chica{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0 0}
#form-acceder .chico{background:transparent;color:var(--verde);border:1px solid var(--verde)}
#form-acceder .chico:hover,#form-acceder .chico:focus-visible{background:var(--verde);color:#fff}

/* El enlace al panel, con la misma pinta que los botones chicos de la barra. */
a.boton-enlace{font-size:.82rem;font-weight:600;padding:.35rem .7rem;border-radius:10px;
  background:rgba(255,255,255,.18);color:#fff;text-decoration:none}
a.boton-enlace:hover,a.boton-enlace:focus-visible{background:rgba(255,255,255,.34)}
body.jugando #ir-admin{display:none}

/* «Sin conexión»: arriba de todo y angosto, para no tapar la mesa. */
.sin-red{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:20;margin:0;
  background:#7a1c16;color:#fff;font-size:.85rem;font-weight:700;padding:.3rem .9rem;
  border-radius:0 0 10px 10px;box-shadow:var(--sombra)}
.tiradas-de .tirada .dentro{display:contents}   /* sólo para ocultarle el dibujo al lector */

/* El aviso del admin: arriba de todo, a lo ancho, y nunca durante la mano. */
.aviso-general{display:flex;gap:.6rem;align-items:center;justify-content:center;
  background:#fff3cd;color:#5c4100;border-bottom:1px solid #e9d48c;
  padding:.45rem .8rem;font-size:.9rem;font-weight:600;text-align:center}
.aviso-general .chico{background:transparent;color:#5c4100;font-size:1.1rem;line-height:1;padding:.1rem .45rem}
.aviso-general .chico:hover{background:rgba(0,0,0,.08)}
body.jugando .aviso-general{display:none}

/* ── Entrar: invitado, Google y correo (2026-10-16) ────────────────────────
   Lo primero es jugar sin registrarse; la cuenta va debajo, separada. El
   mismo bloque se muda al diálogo cuando un invitado crea su cuenta. */
.cta.ancho{display:block;width:100%;text-align:center;margin:.4rem 0 .2rem;font-size:1.05rem;
  padding:.85rem 1rem}
.entrar .cta{background:var(--verde);color:#fff}
.entrar .cta:hover{background:var(--verde2)}
.separador{display:flex;align-items:center;gap:.6rem;color:var(--tenue);font-size:.82rem;
  margin:1rem 0 .4rem;text-align:center}
.separador::before,.separador::after{content:"";flex:1;border-top:1px solid var(--linea)}
.separador span{flex:0 1 auto}
.google-caja{display:flex;justify-content:center;min-height:44px;margin:.6rem 0 .2rem}
#form-entrar button[type=submit]{width:100%}
.hero-nota{font-size:.84rem;color:#d9ecdf;margin:.5rem 0 0}
.apodo-boton{background:transparent;color:#fff;font-weight:700;padding:.3rem .45rem;
  border-radius:8px;text-decoration:underline dotted rgba(255,255,255,.55);text-underline-offset:3px}
.apodo-boton:hover,.apodo-boton:focus-visible{background:rgba(255,255,255,.18)}
.barra button.chico.destacado{background:#ffd166;color:#12301f;font-weight:800}
.barra button.chico.destacado:hover,.barra button.chico.destacado:focus-visible{background:#ffdd8d;color:#12301f}
.dialogo{border:0;border-radius:16px;padding:1.1rem 1.1rem 1rem;max-width:min(26rem,calc(100vw - 2rem));
  width:100%;box-shadow:0 12px 40px rgba(0,0,0,.35);color:var(--tinta);background:var(--tarjeta)}
.dialogo::backdrop{background:rgba(10,30,20,.55)}
.cerrar-dlg{position:absolute;top:.4rem;right:.4rem;background:transparent;color:var(--tenue);
  font-size:1.5rem;line-height:1;padding:.2rem .55rem}
.cerrar-dlg:hover{background:var(--fondo);color:var(--tinta)}
button.gris{background:var(--fondo);color:var(--tinta)}
button.gris:hover{background:var(--linea)}
.fila-chica{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.invitado-nota{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;padding:.55rem .8rem;
  margin:.2rem 0 .6rem;background:#fff8e1;border:1px solid #f1dc9c;border-radius:12px}
.invitado-nota span{flex:1 1 16rem;font-size:.9rem;line-height:1.4}
.rapido{background:linear-gradient(135deg,#145c3a,#0f5132);color:#fff;border-radius:14px;
  padding:.8rem 1rem;margin:.2rem 0 .8rem;box-shadow:var(--sombra)}
.rapido h2{margin:0}
.rapido .ayuda{color:#d9ecdf;margin:.2rem 0 .5rem}
.botones-rapido{display:flex;gap:.45rem;flex-wrap:wrap;margin:0}
.botones-rapido button{background:#ffd166;color:#12301f;font-weight:800;flex:1 1 7rem}
.botones-rapido button:hover,.botones-rapido button:focus-visible{background:#ffdd8d}
.invitado-fin{font-size:.9rem;margin-top:.7rem;padding-top:.6rem;border-top:1px dashed var(--linea)}
.invitado-fin .chico{background:var(--verde);color:#fff;margin-left:.3rem}

/* ── La landing (2026-10-16) ───────────────────────────────────────────── */
.hero-botones{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0}
.hero-botones .cta{margin:0;font-size:1.05rem;padding:.8rem 1.5rem}
.bloque{background:var(--tarjeta);border:1px solid var(--linea);border-radius:16px;
  padding:1.1rem 1.1rem 1rem;margin:.9rem 0;box-shadow:var(--sombra)}
.bloque h2{font-size:1.25rem;color:var(--verde)}
.bloque p,.preguntas p{text-align:justify;hyphens:auto}
.pasos{list-style:none;counter-reset:paso;padding:0;margin:.6rem 0 0;display:grid;gap:.8rem}
@media(min-width:48rem){.pasos{grid-template-columns:repeat(3,1fr)}}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:2.4rem 1fr;gap:.1rem .7rem;align-items:start}
.pasos li::before{content:counter(paso);grid-row:span 2;width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--verde);color:#ffd166;font-weight:800;display:grid;place-items:center;font-size:1.1rem}
.pasos b{font-size:1rem}
.pasos span{color:var(--tenue);font-size:.92rem;text-align:justify;hyphens:auto}
.dos{display:grid;gap:.4rem 1.6rem}
@media(min-width:48rem){.dos{grid-template-columns:1fr 1fr}}
.escalera{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;padding:0;margin:.4rem 0;counter-reset:esc}
.escalera li{counter-increment:esc;background:var(--fondo);border:1px solid var(--linea);border-radius:999px;
  padding:.15rem .6rem .15rem .35rem;font-size:.84rem}
.escalera li::before{content:counter(esc);display:inline-block;min-width:1.3rem;text-align:center;
  font-weight:800;color:var(--verde);margin-right:.25rem}
.escalera li:nth-child(-n+4){background:#fff6d9;border-color:#f0d78a}
.preguntas details{border-top:1px solid var(--linea);padding:.15rem 0}
.preguntas details:first-of-type{border-top:0}
.preguntas summary{cursor:pointer;font-weight:700;padding:.55rem 0;list-style-position:outside}
.preguntas summary:focus-visible{outline:3px solid #ffd166;outline-offset:2px;border-radius:4px}
.preguntas details p{margin:0 0 .6rem}
.anuncio{max-width:970px;margin:.9rem auto;min-height:0}
.anuncio:empty{margin:0}
.anuncio.abajo{padding:0 .8rem}
.entrar{scroll-margin-top:1rem}
@media(prefers-reduced-motion:no-preference){
  .hero-carta{animation:repartir .6s cubic-bezier(.2,.8,.2,1) both}
  .hero-carta.c1{animation-delay:.08s}.hero-carta.c2{animation-delay:.16s}
}
@keyframes repartir{from{opacity:0;translate:0 2.5rem}to{opacity:1;translate:0 0}}
.chica-cta{padding:.4rem .9rem;margin:0;font-size:.88rem}
.borrar-fila{margin-top:1rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
/* La barra con sesión, en el teléfono: cada botón en un renglón propio, sin
   partirse; si no entran todos, la fila baja entera debajo de la marca. */
.yo{flex-wrap:wrap;justify-content:flex-end}
.yo button,.yo a{white-space:nowrap}
.apodo-boton{max-width:9rem;overflow:hidden;text-overflow:ellipsis}
@media(max-width:30rem){.yo{gap:.3rem}.yo .chico{padding:.32rem .55rem}}