/* Póker: paño granate, baranda de nogal y latón para lo que está vivo. */

@font-face {
  font-family: "Fraunces";
  src: url("/fuentes/fraunces.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fuentes/figtree.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --sala: #1e1418;
  --sala-2: #2a1c21;
  --sala-3: #3a2830;
  --pano: #6e1f2a;
  --pano-luz: #8f2c39;
  --pano-sombra: #45111a;
  --nogal: #3a2a22;
  --nogal-claro: #5a4033;
  --laton: #d4a84b;
  --laton-suave: #e8c97f;
  --naipe: #f7f2e6;
  --rojo: #c0283a;
  --tinta: #1c1c24;
  --texto: #f1e8e2;
  --texto-2: #bfaeb0;
  --alerta: #e2553f;
  --ok: #8fd0a5;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Figtree", system-ui, sans-serif;
  --carta: 40px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
html {
  background: var(--sala);
}
body {
  min-height: 100dvh;
  background: radial-gradient(120% 80% at 50% 0%, #2b1b22 0%, var(--sala) 60%) fixed;
  color: var(--texto);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
.simbolos {
  position: absolute;
  width: 0;
  height: 0;
}
a {
  color: var(--laton-suave);
}
:focus-visible {
  outline: 2px solid var(--laton-suave);
  outline-offset: 2px;
}
[hidden] {
  display: none !important;
}
h1,
h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

/* --- Barra --- */

.barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px clamp(14px, 3vw, 28px);
  padding-top: max(12px, env(safe-area-inset-top));
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 1.45rem/1 var(--serif);
  color: var(--texto);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.marca-palo {
  width: 22px;
  height: 22px;
  color: var(--laton);
}
.entorno {
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--sala);
  background: var(--laton-suave);
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.cuenta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.saldo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-decoration: none;
  line-height: 1.15;
}
.saldo-quien {
  font-size: 0.8rem;
  color: var(--texto-2);
}
.saldo-monto {
  white-space: nowrap;
  font: 600 1.05rem var(--serif);
  color: var(--laton-suave);
}
body.sin-conexion .barra::after {
  content: "Reconectando…";
  position: fixed;
  top: 10px;
  left: 50%;
  translate: -50% 0;
  background: var(--alerta);
  color: #fff;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  z-index: 50;
}

/* --- Botones --- */

.boton {
  appearance: none;
  border: 1px solid var(--nogal-claro);
  background: var(--sala-3);
  color: var(--texto);
  font: 600 0.98rem/1 var(--sans);
  padding: 12px 18px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}
.boton:hover {
  border-color: var(--laton);
}
.boton:active {
  transform: translateY(1px);
}
.boton:disabled {
  opacity: 0.5;
  cursor: default;
}
.boton-laton {
  background: var(--laton);
  border-color: var(--laton);
  color: #2a1608;
}
.boton-laton:hover {
  background: var(--laton-suave);
}
.boton-fantasma {
  background: transparent;
}
.boton-peligro {
  background: transparent;
  border-color: #7b3a3f;
  color: #f0b7b0;
}
.boton-peligro:hover {
  border-color: var(--alerta);
}
.boton-chico {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 0.88rem;
  border-radius: 10px;
}
.enlace {
  background: none;
  border: 0;
  color: var(--laton-suave);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.nota {
  color: var(--texto-2);
  font-size: 0.9rem;
}

/* --- Sala --- */

.sala {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(12px, 3vw, 28px);
  padding-bottom: 60px;
}
.sala-intro {
  max-width: 60ch;
  margin: 18px 0 40px;
}
.sala-intro h1 {
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  font-variation-settings: "opsz" 144;
}
.sala-intro p {
  color: var(--texto-2);
  font-size: 1.08rem;
  margin: 0 0 22px;
}
.sala h2 {
  font-size: 1.35rem;
  margin: 28px 0 14px;
}
.mesas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 14px;
}
.mesa-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px 16px;
  border-radius: 18px;
  background: var(--sala-2);
  border: 1px solid transparent;
  color: var(--texto);
  text-decoration: none;
  transition: border-color 0.15s;
}
.mesa-item:hover {
  border-color: var(--nogal-claro);
}
.mini {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.mini-pano {
  fill: var(--pano);
  stroke: var(--nogal-claro);
  stroke-width: 4;
}
.mini circle {
  fill: var(--sala-3);
  stroke: var(--nogal-claro);
  stroke-width: 1;
}
.mini circle.lleno {
  fill: var(--laton);
  stroke: var(--laton-suave);
}
.mesa-nombre {
  font: 600 1.2rem/1.2 var(--serif);
}
.mesa-ciegas {
  color: var(--laton-suave);
  font-weight: 600;
}
.mesa-meta,
.mesa-jugadores {
  color: var(--texto-2);
  font-size: 0.9rem;
}
.mesa-jugadores {
  margin-top: 6px;
  color: var(--texto);
}

/* --- Vista de mesa --- */

/* En la mesa todo cabe en la pantalla: la mesa ocupa lo que dejan la cabecera y los controles. */
body[data-vista="mesa"] {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
body[data-vista="mesa"] .barra {
  padding-bottom: 4px;
}
body[data-vista="mesa"] #vista {
  min-height: 0;
}
.mesa-vista {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}
.mesa-cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(14px, 3vw, 28px) 6px;
}
.volver {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--texto-2);
  text-decoration: none;
  font-weight: 600;
}
.volver svg {
  width: 20px;
  height: 20px;
}
.mesa-titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.mesa-titulo h1 {
  font-size: 1.2rem;
}
.mesa-titulo span {
  color: var(--texto-2);
  font-size: 0.9rem;
}
.abrir-panel {
  margin-left: auto;
  position: relative;
}
.globo {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--laton);
  color: #2a1608;
  font-size: 0.72rem;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  padding: 0 4px;
}
.mesa-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}
.mesa-zona {
  display: grid;
  place-items: center;
  padding: 8px clamp(8px, 2vw, 24px);
  min-height: 0;
  container-type: size;
}

/* El óvalo. En pantallas anchas es horizontal; en el celular, vertical. */
.mesa {
  position: relative;
  width: min(100cqw, 1000px, 100cqh * 1.9);
  aspect-ratio: 1.9;
}
.pano {
  position: absolute;
  inset: 11% 8%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 38%, var(--pano-luz) 0%, var(--pano) 48%, var(--pano-sombra) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(212, 168, 75, 0.28),
    inset 0 10px 40px rgba(0, 0, 0, 0.45),
    0 0 0 clamp(10px, 1.6vw, 18px) var(--nogal),
    0 0 0 calc(clamp(10px, 1.6vw, 18px) + 1px) var(--nogal-claro),
    0 24px 60px rgba(0, 0, 0, 0.55);
}
.centro {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 60%;
  text-align: center;
}
.comunitarias {
  display: flex;
  gap: 6px;
}
.hueco {
  width: var(--carta);
  aspect-ratio: 5 / 7;
  border-radius: 6px;
  border: 1.5px dashed rgba(241, 232, 226, 0.18);
}
.bote {
  margin: 0;
  font: 600 1.15rem var(--serif);
  color: var(--texto);
}
.bote span {
  font: 500 0.85rem var(--sans);
  color: var(--texto-2);
  margin-right: 4px;
}
.resultado {
  margin: 0;
  font: 600 1rem/1.3 var(--serif);
  color: var(--laton-suave);
}
.espera {
  margin: 0;
  color: rgba(241, 232, 226, 0.75);
  font-family: var(--serif);
  font-size: 1.05rem;
}

/* Naipes */
.naipe {
  position: relative;
  width: var(--carta);
  aspect-ratio: 5 / 7;
  border-radius: 6px;
  background: var(--naipe);
  color: var(--tinta);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: opacity 0.2s, translate 0.2s;
}
.naipe b {
  font: 700 calc(var(--carta) * 0.44) / 1 var(--serif);
  letter-spacing: -0.04em;
}
.naipe svg {
  width: calc(var(--carta) * 0.4);
  height: calc(var(--carta) * 0.4);
}
.naipe.rojo {
  color: var(--rojo);
}
.naipe.dorso {
  background:
    repeating-linear-gradient(45deg, rgba(212, 168, 75, 0.35) 0 1.5px, transparent 1.5px 7px),
    repeating-linear-gradient(-45deg, rgba(212, 168, 75, 0.35) 0 1.5px, transparent 1.5px 7px),
    var(--pano-sombra);
  border: 2px solid var(--naipe);
}
.naipe.apagada {
  opacity: 0.45;
}
.naipe.clave {
  translate: 0 -4px;
  box-shadow: 0 0 0 2px var(--laton), 0 6px 14px rgba(0, 0, 0, 0.4);
}
.naipe.nueva {
  animation: voltear 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes voltear {
  from {
    transform: rotateY(90deg) scale(0.9);
    opacity: 0;
  }
}

/* Asientos */
#sillas {
  position: absolute;
  inset: 0;
}
.asiento {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(92px, 12vw, 132px);
  z-index: 2;
}
.asiento.vacio {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px dashed var(--nogal-claro);
  background: rgba(30, 20, 24, 0.6);
  color: var(--texto-2);
  font: 600 0.78rem var(--sans);
  cursor: pointer;
}
button.asiento.vacio:hover {
  border-color: var(--laton);
  color: var(--laton-suave);
}
.asiento.vacio.inactivo {
  width: 18px;
  height: 18px;
  cursor: default;
  opacity: 0.6;
}
.mano-cartas {
  display: flex;
  min-height: calc(var(--carta) * 1.1);
  margin-bottom: -10px;
}
.mano-cartas .naipe {
  --carta: 34px;
}
.mano-cartas .naipe + .naipe {
  margin-left: -10px;
  rotate: 6deg;
}
.mano-cartas .naipe:first-child {
  rotate: -4deg;
}
.mano-cartas.propias .naipe {
  --carta: 48px;
}
.mano-cartas.propias .naipe + .naipe {
  margin-left: -6px;
}
.placa {
  --resta: 1;
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 6px 10px;
  border-radius: 14px;
  border: 2px solid var(--nogal-claro);
  background: var(--sala-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.yo .placa {
  border-color: var(--laton-suave);
}
/* El reloj: el borde de latón se consume conforme se acaba el tiempo. */
.turno .placa {
  border-color: transparent;
  background:
    linear-gradient(var(--sala-2), var(--sala-2)) padding-box,
    conic-gradient(var(--laton) calc(var(--resta) * 1turn), rgba(241, 232, 226, 0.1) 0) border-box;
  box-shadow: 0 0 0 4px rgba(212, 168, 75, 0.18), 0 6px 16px rgba(0, 0, 0, 0.4);
}
.turno .placa.urgente {
  background:
    linear-gradient(var(--sala-2), var(--sala-2)) padding-box,
    conic-gradient(var(--alerta) calc(var(--resta) * 1turn), rgba(241, 232, 226, 0.1) 0) border-box;
}
.nombre {
  font-size: 0.85rem;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stack {
  font: 600 0.95rem var(--serif);
  color: var(--laton-suave);
}
.retirado .mano-cartas,
.ausente .placa,
.desconectado .placa {
  opacity: 0.55;
}
.gano .placa {
  border-color: var(--laton);
  box-shadow: 0 0 0 4px rgba(212, 168, 75, 0.35), 0 6px 16px rgba(0, 0, 0, 0.4);
}
.chip {
  margin-top: 4px;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(30, 20, 24, 0.85);
  color: var(--texto-2);
  white-space: nowrap;
  max-width: 150%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-gana {
  background: var(--laton);
  color: #2a1608;
  font-weight: 700;
}
.ficha-boton {
  position: absolute;
  right: -6px;
  bottom: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--naipe);
  color: var(--tinta);
  font: 700 0.72rem/22px var(--sans);
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 2;
}
.apuesta {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 0.85rem var(--sans);
  background: rgba(30, 20, 24, 0.7);
  padding: 2px 9px 2px 3px;
  border-radius: 999px;
  z-index: 1;
}
.apuesta i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--laton);
  box-shadow: inset 0 0 0 3px var(--laton-suave), inset 0 0 0 4.5px var(--laton);
}

/* --- Controles --- */

.controles {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  padding: 12px clamp(12px, 3vw, 28px);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  min-height: 74px;
}
.controles-info {
  margin: 0;
  color: var(--texto-2);
}
.te-toca {
  font: 600 1.05rem var(--serif);
  color: var(--laton-suave);
  display: flex;
  gap: 8px;
}
.te-toca #mi-reloj {
  color: var(--texto-2);
  font-family: var(--sans);
  font-weight: 500;
}
.botonera {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.accion {
  min-width: 118px;
}
.grupo-subir {
  display: flex;
  align-items: center;
  gap: 8px;
}
.subida {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 290px;
}
.presets .boton {
  white-space: nowrap;
  min-height: 32px;
  padding: 6px 8px;
}
.presets {
  display: flex;
  gap: 6px;
}
.presets .boton {
  flex: 1;
}

input[type="range"] {
  --lleno: 0%;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--laton) var(--lleno), var(--sala-3) var(--lleno));
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--laton) var(--lleno), var(--sala-3) var(--lleno));
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--naipe);
  border: 3px solid var(--laton);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--naipe);
  border: 3px solid var(--laton);
}

/* --- Panel: registro y chat --- */

.panel {
  display: none;
  flex-direction: column;
  background: var(--sala-2);
  min-height: 0;
}
.pestanas {
  display: flex;
  gap: 4px;
  padding: 8px 8px 0;
  border-bottom: 1px solid var(--sala-3);
}
.pestanas [role="tab"] {
  appearance: none;
  background: none;
  border: 0;
  color: var(--texto-2);
  font: 600 0.92rem var(--sans);
  padding: 8px 12px 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.pestanas [aria-selected="true"] {
  color: var(--texto);
  border-bottom-color: var(--laton);
}
.cerrar-panel {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--texto-2);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 10px;
}
.registro,
#chat-lista {
  list-style: none;
  margin: 0;
  padding: 10px 14px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  font-size: 0.9rem;
}
.registro li,
#chat-lista li {
  padding: 3px 0;
}
.registro .r-mano {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--sala-3);
  color: var(--texto-2);
}
.registro .r-mano:first-child {
  margin-top: 0;
  border-top: 0;
}
.registro .r-calle {
  font-family: var(--serif);
  font-weight: 600;
}
.registro .r-gana {
  color: var(--laton-suave);
  font-weight: 600;
}
.registro .r-info {
  color: var(--texto-2);
}
.r-verificar {
  margin-top: 8px;
  font-size: 0.85rem;
}
.verif-ok {
  color: var(--ok);
}
.verif-mal {
  color: var(--alerta);
}
.chat {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#chat-lista b {
  color: var(--laton-suave);
  margin-right: 4px;
}
#chat-form {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid var(--sala-3);
}
#chat-form input,
.formulario input:not([type="range"], [type="checkbox"]),
.formulario select {
  flex: 1;
  min-width: 0;
  background: var(--sala);
  border: 1px solid var(--sala-3);
  color: var(--texto);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
}

/* --- Diálogos y avisos --- */

.dialogo {
  border: 1px solid var(--nogal-claro);
  background: var(--sala-2);
  color: var(--texto);
  border-radius: 20px;
  padding: 0;
  width: min(440px, calc(100vw - 24px));
}
.dialogo::backdrop {
  background: rgba(10, 5, 8, 0.65);
}
.formulario {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
}
.formulario h2 {
  font-size: 1.35rem;
}
.formulario p {
  margin: 0;
}
.formulario label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: 0.92rem;
}
.formulario label.check {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
}
.check input {
  margin-top: 4px;
  accent-color: var(--laton);
}
.monto-grande {
  font: 700 2.2rem var(--serif);
  color: var(--laton-suave);
  text-align: center;
}
.acciones-form {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.avisos {
  position: fixed;
  left: 50%;
  translate: -50% 0;
  bottom: 96px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(460px, calc(100vw - 24px));
}
.aviso {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #3b1d22;
  border: 1px solid #7b3a3f;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: aparecer 0.2s ease-out;
}
.aviso p {
  margin: 0;
  flex: 1;
}
.aviso a {
  font-weight: 600;
  white-space: nowrap;
}
.aviso-ok {
  background: #1f3227;
  border-color: #3f6b50;
}
.aviso-info {
  background: var(--sala-3);
  border-color: var(--nogal-claro);
}
.aviso-cerrar {
  background: none;
  border: 0;
  color: var(--texto-2);
  font-size: 1.3rem;
  cursor: pointer;
}
@keyframes aparecer {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

/* --- Pantallas grandes: panel al costado --- */

@media (min-width: 980px) {
  .mesa-cuerpo {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  .panel {
    display: flex;
    border-radius: 18px 0 0 18px;
    margin: 8px 0;
  }
  .abrir-panel,
  .cerrar-panel {
    display: none;
  }
}

/* --- Celular: mesa vertical y panel como hoja --- */

@media (max-width: 979px) {
  body.panel-abierto .panel {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    height: min(70dvh, 520px);
    z-index: 60;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 640px) {
  .mesa-item {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 12px 14px;
  }
  .mesa-item .mini {
    grid-row: 1 / span 5;
    margin: 0;
  }
  .mesa-item > span {
    grid-column: 2;
  }
  .sala-intro {
    margin: 6px 0 28px;
  }
  :root {
    --carta: 34px;
  }
  .mesa {
    aspect-ratio: 0.7;
    width: min(100cqw, 100cqh * 0.7);
  }
  .pano {
    inset: 8% 14%;
  }
  .asiento {
    width: 80px;
  }
  .barra {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 6px;
  }
  .marca {
    font-size: 1.25rem;
  }
  .saldo-quien {
    display: none;
  }
  .te-toca {
    display: none;
  }
  .controles {
    padding-top: 8px;
    gap: 8px;
  }
  .grupo-subir {
    display: contents;
  }
  .subida {
    order: -1;
    width: 100%;
  }
  .accion {
    padding: 10px 8px;
  }
  .mano-cartas .naipe {
    --carta: 28px;
  }
  .mano-cartas.propias .naipe {
    --carta: 44px;
  }
  .nombre {
    font-size: 0.78rem;
  }
  .stack {
    font-size: 0.85rem;
  }
  .centro {
    width: 70%;
  }
  .comunitarias {
    gap: 4px;
  }
  .accion {
    min-width: 0;
    flex: 1;
  }
  .botonera {
    width: 100%;
  }
  .mesa-titulo span {
    display: none;
  }
}

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