:root {
  /* Base solida detras del blur (glassmorphism necesita algo opaco atras) */
  --bg: #1a1533;
  --bg-gradient: linear-gradient(160deg, #1e1b4b 0%, #5b21b6 45%, #2563eb 100%);

  /* "Paneles" ahora son vidrio esmerilado, no rectangulos solidos */
  --panel: rgba(255, 255, 255, 0.08);
  --panel-strong: rgba(255, 255, 255, 0.16);
  --glass-border: rgba(255, 255, 255, 0.24);
  --glass-shadow: 0 8px 32px rgba(15, 10, 40, 0.45);

  --text: #cdd0ea;
  --text-bright: #f3f4fc; /* blanco suave, no #fff puro (brillaba demasiado) */
  --muted: #a8acd4;

  --accent: #8b5cf6;
  --accent-hover: #a78bfa;
  --cta-gradient: linear-gradient(135deg, #f472b6 0%, #a855f7 100%);
  --cta-gradient-hover: linear-gradient(135deg, #fb7fc4 0%, #b768fb 100%);

  --error: #fb7185;
  --ok: #34d399;

  /* Escala general de la interfaz: 1 en celular (diseño de base). Crece en
     pantallas mas anchas (monitor grande o telefono horizontal) para que
     cartas, mesa y texto no se queden chicos perdidos en medio de la
     pantalla. Un solo numero controla todo via calc(), asi no hay que
     duplicar reglas por breakpoint. */
  --ui-scale: 1;
}

@media (min-width: 700px) {
  :root { --ui-scale: 1.12; }
}

/* Antes 1.28 / 1.45: con mas botones en el header y mas contenido en el
   menu (tutorial, reglas), esos valores hacian que en una ventana de PC
   normal no entrara todo sin scrollear. Se bajo a mas o menos 75% del
   crecimiento que tenian. */
@media (min-width: 1000px) {
  :root { --ui-scale: 1; }
}

@media (min-width: 1400px) {
  :root { --ui-scale: 1.15; }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  /* Pensado para celular: nunca tiene que aparecer scroll horizontal en
     ningun lado, ni por un pixel de mas de algun contenido. */
  overflow-x: hidden;
}

html {
  /* Sube el tamaño base para que todo lo medido en rem crezca junto. */
  font-size: calc(19px * var(--ui-scale));
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg-gradient) fixed;
  color: var(--text);
}

/* Scrollbar propia con el mismo lenguaje visual del resto (vidrio + acento
   violeta) en vez de la barra gris nativa del navegador — se aplica a
   cualquier elemento que llegue a scrollear, no solo a los de hoy. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) rgba(255, 255, 255, 0.08);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
  background-clip: padding-box;
}

/* Flex en vez de titulo centrado + acciones en posicion absoluta: con
   varios botones (sonido, reaccion, reiniciar, mic, voces, menu) el header
   viejo los amontonaba encima del titulo en celular. Asi el titulo achica
   y las acciones se acomodan solas a la derecha, envolviendo a una segunda
   fila si hace falta en vez de superponerse. */
.app-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: 10px;
  padding: 10px 14px;
  background: var(--panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
}

.app-header h1 {
  margin: 0;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 1px;
  flex: none;
}

.header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.btn-icon {
  width: calc(40px * var(--ui-scale));
  height: calc(40px * var(--ui-scale));
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-bright);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, transform 0.15s;
}

.btn-icon:hover { border-color: var(--accent); transform: translateY(-2px); }

.btn-menu {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-bright);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.btn-menu:hover { border-color: var(--accent); transform: translateY(-2px); }

/* Celular: con hasta 6 botones en el header (sonido, reaccion, reiniciar,
   mic, voces, menu) los que tienen texto ("Reiniciar mesa", "Menu") son
   los que mas espacio comen — se achican para que entren todos en fila. */
@media (max-width: 699px) {
  .btn-menu {
    padding: 6px 9px;
    font-size: 0.72rem;
  }
}

.reaction-wrap {
  position: relative;
}

.reaction-picker {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px;
  border-radius: 16px;
  background: var(--panel-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  z-index: 45;
}

/* Aparece con difuminado en vez de saltar de golpe — lo que aparece o
   desaparece de la pantalla lo hace con una transicion suave. */
.reaction-picker:not(.hidden) {
  animation: popover-fade-in 0.18s ease-out both;
}

/* Celular: en vez de un cuadro flotante aparte (position:fixed, quedaba
   despegado de la barra y a veces tapaba la mesa), los emojis se insertan
   directo en la barra. `display:contents` en el wrap y en el picker hace
   que dejen de generar caja propia: cada boton de emoji pasa a ser un
   item mas del flex del header, al lado del resto de iconos, y entra en
   la fila (o baja de linea con ellos via el flex-wrap del header) como
   cualquier otro boton de la barra en vez de flotar aparte. */
/* Por ID, no por clase: .reaction-wrap/.reaction-picker tambien las usa el
   panel de volumen por jugador (#voices-panel), que si necesita quedar
   como cuadro flotante aparte — solo el picker de emojis pasa a vivir
   dentro de la barra. */
@media (max-width: 699px) {
  /* :not(.hidden) en vez de aplicar siempre: una regla por ID pesa mas
     que ".hidden" (que es por clase) y le ganaria incluso estando oculto
     si se aplicara sin condicion, dejando el picker visible igual. */
  #reaction-wrap:not(.hidden) { display: contents; }

  #reaction-picker:not(.hidden) {
    display: contents;
  }

  /* Con display:contents el picker ya no tiene caja propia para animar
     (ver comentario de arriba), asi que el difuminado de aparicion se
     aplica a cada boton de emoji por separado. */
  #reaction-picker:not(.hidden) .reaction-option {
    animation: popover-fade-in 0.18s ease-out both;
  }
}

@keyframes popover-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.reaction-option {
  width: calc(38px * var(--ui-scale));
  height: calc(38px * var(--ui-scale));
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.reaction-option:hover {
  background: var(--accent);
  transform: translateY(-2px) scale(1.08);
}

/* Burbuja de reaccion flotando sobre un asiento: vive en <body>, no adentro
   de la mesa, para no depender de que el asiento siga existiendo en el DOM
   (se reconstruye entero en cada render) mientras dura la animacion. */
.reaction-bubble {
  position: fixed;
  transform: translate(-50%, -100%);
  font-size: calc(2rem * var(--ui-scale));
  pointer-events: none;
  z-index: 100;
  animation: reaction-float-up 1.6s ease-out forwards;
}

/* Asientos de la mitad de arriba de la pantalla: la reaccion sale para
   abajo, a partir del borde inferior del asiento, en vez de para arriba
   (que la mandaria contra el header o afuera de la pantalla). */
.reaction-bubble.is-below {
  transform: translate(-50%, 0%);
  animation-name: reaction-float-down;
}

@keyframes reaction-float-up {
  0% { transform: translate(-50%, -100%) scale(0.4); opacity: 0; }
  15% { transform: translate(-50%, -130%) scale(1.15); opacity: 1; }
  75% { transform: translate(-50%, -180%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -230%) scale(0.9); opacity: 0; }
}

@keyframes reaction-float-down {
  0% { transform: translate(-50%, 0%) scale(0.4); opacity: 0; }
  15% { transform: translate(-50%, 30%) scale(1.15); opacity: 1; }
  75% { transform: translate(-50%, 80%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, 130%) scale(0.9); opacity: 0; }
}

/* Globito de texto ("¡Yo arranco!") — mas chico y sin sonido, para que no
   compita con las reacciones de emoji de verdad. Antes se apagaba solo a
   los 1.8s pase lo que pase; ahora el "pop-up" es corto y se queda
   sostenido ahi (animation-fill-mode: forwards lo deja en el ultimo
   cuadro, quieto) hasta que ui.js le agrega .is-dismissing — recien eso
   dispara el fade-out, cuando ese jugador realmente predijo o jugo su
   carta (ver dismissLeaderBubbleFor). */
.leader-bubble {
  position: fixed;
  transform: translate(-50%, -100%);
  background: var(--panel-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  color: var(--text-bright);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: calc(0.72rem * var(--ui-scale));
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  animation: leader-bubble-pop-up 0.35s ease-out forwards;
}

.leader-bubble.is-below {
  transform: translate(-50%, 0%);
  animation-name: leader-bubble-pop-down;
}

.leader-bubble.is-dismissing {
  animation: leader-bubble-fade-out 0.3s ease-in forwards;
}

.leader-bubble.is-below.is-dismissing {
  animation-name: leader-bubble-fade-out-down;
}

@keyframes leader-bubble-pop-up {
  0% { transform: translate(-50%, -90%) scale(0.7); opacity: 0; }
  100% { transform: translate(-50%, -115%) scale(1); opacity: 1; }
}

@keyframes leader-bubble-pop-down {
  0% { transform: translate(-50%, 90%) scale(0.7); opacity: 0; }
  100% { transform: translate(-50%, 115%) scale(1); opacity: 1; }
}

@keyframes leader-bubble-fade-out {
  0% { transform: translate(-50%, -115%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -135%) scale(0.95); opacity: 0; }
}

@keyframes leader-bubble-fade-out-down {
  0% { transform: translate(-50%, 115%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, 135%) scale(0.95); opacity: 0; }
}

/* En PC hay lugar de sobra: la barra completa con el titulo ya no hace
   falta y solo resta espacio vertical. Se cambia por un grupito de botones
   flotando en la esquina superior derecha (sonido / reiniciar mesa / menu),
   sin fondo ni barra debajo. */
@media (min-width: 1000px) {
  .app-header {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: auto;
    padding: 16px 20px;
    background: none;
    border-bottom: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 40;
  }

  .app-header h1 { display: none; }

  .header-actions {
    position: static;
    transform: none;
  }

  #app { padding-top: 84px; }
}

#app {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: calc(820px * var(--ui-scale));
  width: 100%;
  margin: 0 auto;
  padding: 20px 24px;
}

/* !important a proposito: .hidden es una clase utilitaria de "ocultar
   pase lo que pase" — sin esto, cualquier otra clase de igual
   especificidad (una sola clase, ej. .btn-primary) que declare `display`
   y aparezca mas abajo en este archivo le gana el empate de
   especificidad y el elemento "oculto" se sigue viendo (paso con
   #btn-next-hand: class="btn-primary hidden" quedaba visible en online
   porque .btn-primary esta mas abajo que .hidden). */
.screen.hidden, .hidden {
  display: none !important;
}

/* Pantalla de mesa: ocupa toda la altura disponible. La mesa mide siempre
   lo mismo (depende solo del viewport, no de qué panel esté abajo); lo que
   se adapta es el panel de abajo (y, si hace falta, el tamaño de la mano),
   para que nunca haga falta scroll. */
.mesa-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  gap: 10px;
  /* resplandor detras de todo para que la mesa tenga mas profundidad */
  background: radial-gradient(ellipse at center, rgba(168,85,247,0.18) 0%, rgba(37,99,235,0.08) 42%, transparent 72%);
}

.mesa-screen .hand-info { flex: none; margin-bottom: 6px; }
.mesa-screen .spectate-note { flex: none; }

/* Celular: ni el titulo ("Mano 1 · Baza · Turno de X") ni el avisito
   ("Fulano jugo una carta") aportan algo que no se vea ya en la mesa
   (el resplandor marca de quien es el turno, las cartas jugadas se ven
   solas) — sacarlos de encima le devuelve ese espacio entero a la mesa y
   a la mano, que es lo que hace falta ver. */
@media (max-width: 699px) {
  .mesa-screen .hand-info,
  .mesa-screen .spectate-note {
    display: none;
  }
}

/* :not(.hidden) para que esta regla ni siquiera aplique cuando el panel
   está oculto — si compite con `.hidden { display:none }` por especificidad
   (2 clases contra 1), display:flex puede ganarle y el panel "oculto" se
   ve igual, con las dos pantallas (predicción y jugar) superpuestas. */
.mesa-screen .action-panel:not(.hidden) {
  flex: 0.8 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

/* Celular: el panel de abajo (mano + predicción/jugar) es literalmente el
   "segundo cuadrado" — tiene su propio panel de vidrio para que se note
   separado de la mesa de arriba, en vez de mezclarse en el mismo fondo.
   Solo en celular: en PC ya tiene su columna propia y se ve bien sin esto. */
@media (max-width: 999px) {
  .mesa-screen .action-panel:not(.hidden) {
    background: var(--panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 10px 12px;
  }
}

.mesa-screen .table-oval {
  /* En celular el alto se reparte con el panel de abajo por flex-grow
     (ver .action-panel) en vez de un % fijo del viewport: asi los dos
     "cuadrados" SIEMPRE entran completos en la
     pantalla sea cual sea la altura real disponible despues del header —
     nunca hace falta scroll. El ancho sale del alto resuelto via
     aspect-ratio, para mantener siempre la misma proporcion (4/3: con
     hasta 4 asientos en rombo hace falta aire parejo en ambos ejes, no
     solo a lo ancho). En PC (mas abajo) usa grid con un alto fijo en vh,
     no le afecta este flex. Un poco menos de proporcion que el panel de
     abajo (0.9 contra 1.15): la mesa tiene menos contenido (4 asientos
     chicos) que el panel (mano + pregunta + 7 botones). */
  flex: 1.15 1 0;
  min-height: 0;
  align-self: center;
  width: auto;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  margin: 0 auto;
}

/* El techo de 480px es solo para el reparto flex de celular (evita que en
   un telefono muy alto la mesa crezca de mas) — en PC el limite real lo
   pone el height: min(...700px) de mas abajo, no este. */
@media (max-width: 999px) {
  .mesa-screen .table-oval {
    max-height: 480px;
  }
}

/* En PC hay ancho de sobra: la mesa va a la izquierda y la mano/opciones a
   la derecha, uno al lado del otro, en vez de apiladas. Así el panel de
   abajo (predicción/jugar) tiene toda la altura disponible para si solo y
   nunca se queda sin espacio para mostrar los botones de prediccion. */
@media (min-width: 1000px) {
  .mesa-screen {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    grid-template-areas:
      "info  info"
      "spect spect"
      "table panel";
    grid-template-rows: auto auto 1fr;
    align-items: start;
    column-gap: 28px;
  }

  .mesa-screen .hand-info { grid-area: info; margin-bottom: 2px; }
  .mesa-screen .spectate-note { grid-area: spect; }

  .mesa-screen .table-oval {
    grid-area: table;
    align-self: center;
    justify-self: center;
    margin: 0;
    height: min(calc(52vh * var(--ui-scale)), 700px);
  }

  .mesa-screen .action-panel:not(.hidden) {
    grid-area: panel;
    height: 100%;
  }
}

.menu-screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Con contenido centrado verticalmente por flex, si es mas alto que la
     pantalla el de arriba queda "recortado" e inalcanzable con scroll (bug
     conocido de flexbox) — se ve justo asi en la captura, titulo cortado
     arriba Y el final del formulario cortado abajo. Con overflow-y en el
     propio contenedor flex (no solo en #app, el ancestro) el navegador
     deja llegar el scroll a los dos lados. */
  overflow-y: auto;
  padding: 16px 0;
}

.menu-title {
  margin: 0 0 5px;
  padding: 0;
  font-family: 'Baloo 2', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  background: linear-gradient(135deg, #f9a8d4 0%, #c084fc 50%, #93c5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(168, 85, 247, 0.45));
  animation: title-in 0.5s ease-out both;
}

@keyframes title-in {
  from { transform: translateY(-18px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fade-in-up {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.menu-content {
  position: relative;
  width: 100%;
  max-width: calc(420px * var(--ui-scale));
  padding: 30px 26px;
  border-radius: 28px;
  background: var(--panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  animation: fade-in-up 0.5s ease-out 0.15s both;
}

.mode-bars {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.2);
}

.mode-bar {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 10px;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.mode-bar input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mode-bar-arrow { display: none; }

.mode-bar:has(input:checked) {
  background: var(--cta-gradient);
  color: var(--text-bright);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.45);
}

.btn-start {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 15px;
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-bright);
  background: var(--cta-gradient);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.45);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.btn-start:hover {
  transform: translateY(-2px);
  background: var(--cta-gradient-hover);
  box-shadow: 0 10px 26px rgba(168, 85, 247, 0.55);
}

.btn-start:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
}

.online-notice {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--accent);
  color: var(--text-bright);
  font-size: 0.8rem;
  line-height: 1.4;
}

.mini-tabs {
  display: flex;
  gap: 6px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
}

.mini-tab {
  position: relative;
  flex: 1;
  text-align: center;
  padding: 7px 6px;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.2s, color 0.2s;
}

.mini-tab input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mini-tab:has(input:checked) {
  background: var(--cta-gradient);
  color: var(--text-bright);
}

.lobby-code-label {
  text-align: center;
  color: var(--muted);
  margin-bottom: 4px;
}

.lobby-code {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--ok);
  margin: 0 0 14px;
}

.lobby-code-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}

.btn-secondary {
  padding: 10px 16px;
  font-family: 'Baloo 2', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid var(--panel-strong);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text-bright);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.btn-secondary:hover { background: var(--panel-strong); transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(1px) scale(0.98); }

.btn-whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #06210f;
}

.btn-whatsapp:hover { background: #2fe375; }

.lobby-players {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
}

.lobby-player {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  padding: 6px 12px 6px 6px;
  border-radius: 20px;
}

.lobby-player .seat-avatar {
  width: 32px;
  height: 32px;
}

.field-group {
  margin-bottom: 5px;
}

.field-group > label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--muted);
}

select, input[type="text"], input[type="number"] {
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-bright);
  font-family: inherit;
  font-size: 1rem;
}

select:focus, input[type="text"]:focus, input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
}

.name-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.avatar-pick {
  flex: none;
  width: calc(44px * var(--ui-scale));
  height: calc(44px * var(--ui-scale));
  padding: 0;
  border: none;
  cursor: pointer;
  background: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4));
  transition: filter 0.15s, transform 0.15s;
}

.avatar-pick:hover {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4)) drop-shadow(0 0 6px var(--accent));
  transform: translateY(-2px);
}

.avatar-pick svg { width: 100%; height: 100%; display: block; }

.btn-file {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: var(--text-bright);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}

.btn-file:hover { border-color: var(--accent); }

.btn-file-clear {
  background: none;
  color: var(--error);
}

.deck-editor-card {
  max-width: calc(640px * var(--ui-scale));
  max-height: 84vh;
  /* El scroll de verdad vive en .deck-editor-scroll, adentro del padding de
     esta tarjeta — asi la barra (de puntas rectas) queda separada del
     borde redondeado en vez de chocar contra la curva. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.deck-editor-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.deck-editor-section {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--glass-border);
}

.deck-editor-section:last-of-type {
  border-bottom: none;
}

.deck-editor-section h3 {
  margin-bottom: 4px;
}

.deck-editor-hint {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  margin: 0 0 14px;
}

.deck-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(62px * var(--ui-scale)), 1fr));
  gap: 10px;
  padding: 4px;
}

.deck-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.deck-slot input { position: absolute; opacity: 0; pointer-events: none; }

.deck-slot-preview {
  width: 100%;
  aspect-ratio: 100 / 140;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--glass-border);
  transition: border-color 0.15s, transform 0.15s;
}

.deck-slot:hover .deck-slot-preview {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.deck-slot.is-custom .deck-slot-preview {
  border-color: var(--ok);
}

.deck-slot-preview svg,
.deck-slot-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.deck-slot-label {
  font-size: 0.55rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.1;
}

.deck-editor-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Reglas ---------- */

.rules-card {
  max-width: calc(640px * var(--ui-scale));
  max-height: 84vh;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: left;
}

.rules-section {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--glass-border);
}

.rules-section:last-of-type {
  border-bottom: none;
  margin-bottom: 8px;
}

.rules-section h3 {
  text-align: left;
  margin: 0 0 6px;
  color: var(--text-bright);
}

.rules-section p {
  margin: 0 0 8px;
  line-height: 1.5;
  color: var(--text);
}

.rules-rank-line {
  font-size: 0.82rem;
  color: var(--muted);
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 4px;
}

.rules-tips {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}

.rules-tips li {
  margin-bottom: 8px;
}

/* ---------- Creditos ---------- */

.credits-card {
  max-width: calc(480px * var(--ui-scale));
}

.credits-link {
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}

/* ---------- Tutorial ---------- */

.tutorial-card {
  max-width: calc(560px * var(--ui-scale));
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.tutorial-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}

.tutorial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.2s, transform 0.2s;
}

.tutorial-dot.is-active {
  background: var(--accent);
  transform: scale(1.3);
}

.tutorial-body p {
  line-height: 1.55;
  margin: 0 0 10px;
  color: var(--text);
}

.tutorial-tips {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}

.tutorial-tips li {
  margin-bottom: 8px;
}

.tutorial-cards {
  margin: 14px 0;
}

.tutorial-nav {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.tutorial-nav .btn-file {
  flex: none;
}

.tutorial-nav .btn-primary {
  flex: 1 1 auto;
  margin-top: 0;
}

#btn-tutorial-exit {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

.btn-primary {
  display: block;
  width: 100%;
  padding: 14px;
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  border-radius: 16px;
  background: var(--cta-gradient);
  color: var(--text-bright);
  cursor: pointer;
  margin-top: 8px;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.4);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.btn-primary:hover {
  background: var(--cta-gradient-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(168, 85, 247, 0.5);
}

.btn-primary:active { transform: translateY(1px) scale(0.98); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.hand-info {
  text-align: center;
  color: var(--muted);
  margin-bottom: 12px;
}

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.card {
  width: calc(92px * var(--ui-scale));
  height: calc(130px * var(--ui-scale));
  border-radius: 10px;
  box-shadow:
    0 3px 0 rgba(0,0,0,0.25),
    0 6px 12px rgba(0,0,0,0.45);
  padding: 0;
  border: none;
}

.card-img {
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

/* Brillo diagonal tipo "carta esmaltada" — puramente decorativo, no
   interfiere con los clicks porque no tiene eventos propios. */
.card-img::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(0,0,0,0.08) 100%);
  pointer-events: none;
}

.card-img svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* As de Espada: la carta mas fuerte de todo el mazo — brillo dorado
   permanente + corona, pero SOLO mientras esta en tu mano
   (#predict-hand/#table-hand), no una vez jugada en la mesa (la clase se
   agrega siempre en renderCardEl, el alcance lo decide este selector).
   Mismo dorado que ya usa el glow de "ganaste la baza" (#f4c542), para
   que se lea como el mismo lenguaje visual de "esto es lo mejor que hay". */
#predict-hand .card-as-espada,
#table-hand .card-as-espada {
  animation: espada-glow-pulse 2.2s ease-in-out infinite;
}

@keyframes espada-glow-pulse {
  0%, 100% {
    box-shadow: 0 3px 0 rgba(0,0,0,0.25), 0 6px 12px rgba(0,0,0,0.45),
      0 0 0 3px #f4c542, 0 0 14px 3px rgba(244, 197, 66, 0.45);
  }
  50% {
    box-shadow: 0 3px 0 rgba(0,0,0,0.25), 0 6px 12px rgba(0,0,0,0.45),
      0 0 0 3px #f4c542, 0 0 22px 6px rgba(244, 197, 66, 0.85);
  }
}

#predict-hand .card-as-espada::after,
#table-hand .card-as-espada::after {
  content: '👑';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(20px * var(--ui-scale));
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  pointer-events: none;
}

/* As de Basto: el segundo ancho fuerte — mismo tratamiento que el de
   Espada pero en plata en vez de oro (como una medalla de plata, es la
   segunda carta mas fuerte del mazo). */
#predict-hand .card-as-basto,
#table-hand .card-as-basto {
  animation: basto-glow-pulse 2.2s ease-in-out infinite;
}

@keyframes basto-glow-pulse {
  0%, 100% {
    box-shadow: 0 3px 0 rgba(0,0,0,0.25), 0 6px 12px rgba(0,0,0,0.45),
      0 0 0 3px #c4c9d4, 0 0 14px 3px rgba(196, 201, 212, 0.45);
  }
  50% {
    box-shadow: 0 3px 0 rgba(0,0,0,0.25), 0 6px 12px rgba(0,0,0,0.45),
      0 0 0 3px #c4c9d4, 0 0 22px 6px rgba(196, 201, 212, 0.85);
  }
}

#predict-hand .card-as-basto::after,
#table-hand .card-as-basto::after {
  content: '👑';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(20px * var(--ui-scale));
  /* El emoji de corona es dorado fijo (no responde a `color`) — se
     desatura a gris para que lea "plateada" en vez de "dorada". */
  filter: grayscale(1) brightness(1.3) drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  pointer-events: none;
}

button.card {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

button.card:hover { transform: translateY(-4px); }

.option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-bottom: 12px;
}

/* Regla general de transiciones (vale en PC y celular): lo que aparece o
   desaparece lo hace con un difuminado, no de golpe. Mientras espero mi
   turno de predecir, la pregunta y los botones se esconden con
   difuminado + colapso de alto, asi la mano de abajo se acomoda sola en
   el lugar que se libera en vez de quedar un hueco vacio fijo. */
.predict-question {
  overflow: hidden;
  max-height: 600px;
  opacity: 1;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
}

.predict-question.is-collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

/* Celular: mientras la pregunta/botones estan visibles (te toca
   predecir), la mano se achica bastante mas para que entre todo sin
   cortarse — esto si es solo de celular, en PC sobra espacio. Apenas
   colapsa (ya predijiste, estas esperando a los demas) la mano vuelve a
   su tamaño normal con la misma transicion de .hand-fan .card. Los
   botones de prediccion y los margenes tambien se ajustan mas chico aca,
   para que los 7 (0 al 6) entren en una sola fila sin cortarse. */
@media (max-width: 699px) {
  #predict-hand .card {
    height: min(calc(72px * var(--ui-scale)), 9vh);
  }

  /* Chicas: entran las 6 en una sola fila sin superponerse — mas facil de
     distinguir carta por carta mientras elegis. Pisa el abanico general
     de .hand-fan (que si superpone) solo para este estado puntual. */
  #predict-hand {
    flex-wrap: nowrap;
    gap: 4px;
  }

  #predict-hand .card {
    margin-left: 0;
  }

  /* Ya elegiste: la pregunta colapso, sobra lugar de sobra — las cartas
     se agrandan bastante (mas que el resto de la mano en otras pantallas)
     y ahi si vuelven al abanico superpuesto, porque grandes ya no entran
     todas sueltas en una fila. */
  #predict-panel:has(.predict-question.is-collapsed) #predict-hand {
    flex-wrap: nowrap;
    gap: 0;
  }

  #predict-panel:has(.predict-question.is-collapsed) #predict-hand .card {
    height: min(calc(175px * var(--ui-scale)), 24vh);
    margin-left: -56px;
  }

  #predict-panel:has(.predict-question.is-collapsed) #predict-hand .card:first-child {
    margin-left: 0;
  }

  #predict-hand.card-row {
    margin-bottom: 8px;
  }

  #table-oval .trick-card-wrap .card,
  #table-oval .trick-card-wrap .card-slot-empty {
    width: calc(80px * var(--ui-scale));
    height: calc(110px * var(--ui-scale));
  }

  .table-seat .seat-avatar-wrap {
    width: calc(1px * var(--ui-scale));
    height: calc(1px * var(--ui-scale));
  }

  #predict-instructions {
    margin: 0 0 6px;
    font-size: 0.85rem;
  }

  #predict-options.option-row {
    gap: 5px;
    margin-bottom: 4px;
  }

  #predict-options .option-btn {
    min-width: 0;
    flex: 1 1 0;
    padding: 8px 4px;
    font-size: 0.85rem;
  }

  #predict-error {
    min-height: 0;
    margin: 0;
  }
}

.option-btn {
  min-width: 40px;
  padding: 10px 10px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--panel);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.option-btn:not(.disabled):hover {
  border-color: var(--accent);
  background: var(--accent-hover);
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}

.option-btn:not(.disabled):active {
  transform: translateY(-1px) scale(1.02);
}

/* Efecto de fuego: crece con data-fire (0 = nada, 4 = maximo), asignado en
   JS segun que tan cerca esta el numero del maximo de la mano. */
@keyframes fire-flicker {
  0% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.18) saturate(1.35); }
  100% { filter: brightness(0.95) saturate(1.1); }
}

.option-btn[data-fire="1"]:not(.disabled):hover {
  border-color: #ffb84d;
  background: linear-gradient(0deg, rgba(255, 140, 40, 0.3) 0%, var(--accent-hover) 70%);
  box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 10px 2px rgba(255, 150, 50, 0.5);
}

.option-btn[data-fire="2"]:not(.disabled):hover {
  border-color: #ff9c33;
  background: linear-gradient(0deg, rgba(255, 110, 20, 0.4) 0%, var(--accent-hover) 70%);
  box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 16px 4px rgba(255, 120, 30, 0.6);
  animation: fire-flicker 0.5s ease-in-out infinite alternate;
}

.option-btn[data-fire="3"]:not(.disabled):hover {
  border-color: #ff7a1a;
  background: linear-gradient(0deg, rgba(255, 80, 10, 0.5) 0%, var(--accent-hover) 75%);
  box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 22px 6px rgba(255, 90, 10, 0.7);
  animation: fire-flicker 0.4s ease-in-out infinite alternate;
}

.option-btn[data-fire="4"]:not(.disabled):hover {
  border-color: #ff5500;
  background: linear-gradient(0deg, rgba(255, 60, 0, 0.6) 0%, var(--accent-hover) 80%);
  box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 30px 10px rgba(255, 60, 0, 0.85);
  animation: fire-flicker 0.3s ease-in-out infinite alternate;
}
.option-btn.disabled { opacity: 0.35; cursor: not-allowed; }

.error-text {
  color: var(--error);
  text-align: center;
  min-height: 1.2em;
}

.table-oval {
  position: relative;
  width: 100%;
  max-width: 700px;
  height: 380px;
  margin: 0 auto 24px;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255,255,255,0.16) 0%, transparent 45%),
    linear-gradient(160deg, rgba(139,92,246,0.38) 0%, rgba(37,99,235,0.28) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 0 70px rgba(0,0,0,0.25);
}

/* Un solo diseño de asiento para PC y celular: avatar arriba, nombre
   abajo, y un pill compacto de puntaje — nada de badges numericos sueltos
   ni cajas separadas. El tamaño sale de --ui-scale (crece solo con la
   pantalla), no hace falta una version aparte por breakpoint. */
.table-seat {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 1;
}

/* Mi propio asiento: los bloques de asientos opuestos pueden llegar a
   superponerse un poco hacia el centro de la mesa. El mio va siempre
   arriba de la pila para que mi nombre nunca quede tapado. */
.table-seat.is-me {
  z-index: 5;
}

.seat-avatar-wrap {
  position: relative;
  width: calc(40px * var(--ui-scale));
  height: calc(40px * var(--ui-scale));
}

/* Sin borde ni recorte propio a proposito: el personaje ya viene con su
   propia silueta (circulo, rombo, cuadrado, squircle) recortada en el PNG
   con fondo transparente — la "foto de perfil" es esa forma, no un marco
   cuadrado por encima. La sombra sigue el alfa real de la imagen (drop-
   shadow, no box-shadow), asi un rombo tira sombra de rombo. */
.seat-avatar {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,0.45));
}

.seat-avatar svg { width: 100%; height: 100%; display: block; }

.seat-name-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.62rem;
  font-weight: 800;
  color: #1a1a1a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0,0,0,0.35), 0 4px 8px rgba(0,0,0,0.4);
}

/* Pill unico de puntaje: 🎯 predijo, 🏆 gano — reemplaza las dos cajas
   "PEDIDA/GANO" de antes. Mas compacto y a este tamaño se lee mejor un
   icono que una palabra entera. */
.seat-stat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 14, 46, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-bright);
  white-space: nowrap;
}

.seat-stat-pill .seat-stat-won {
  color: var(--ok);
}

.table-seat.is-current .seat-avatar {
  filter:
    drop-shadow(0 4px 3px rgba(0,0,0,0.45))
    drop-shadow(0 0 4px var(--accent))
    drop-shadow(0 0 8px var(--accent));
}

.table-seat.is-winner .seat-avatar {
  filter:
    drop-shadow(0 4px 3px rgba(0,0,0,0.45))
    drop-shadow(0 0 4px #f4c542)
    drop-shadow(0 0 8px #f4c542);
}

/* Carta "transpirando": la carta que va ganando la baza en curso, cuando es
   floja (valor 6 o menos) y por lo tanto puede caer en cualquier momento.
   Antes tenia un filtro SVG que ondulaba la carta entera tipo vidrio
   nervioso — se saco (tapaba un poco las gotitas) a cambio de un temblor
   de verdad, bien notorio, en varias direcciones (no un simple vaiven de
   ida y vuelta). Las gotitas (.sweat-drop, ver appendSweatDrops en ui.js)
   siguen igual, ahora se ven nitidas sin la distorsion encima. Todo vive
   DENTRO de .card (que ya tiene overflow:hidden), asi nunca se sale del
   recuadro de la carta. */
.card.is-sweating {
  animation: sweat-jitter 0.42s ease-in-out infinite;
}

@keyframes sweat-jitter {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-2.5px, 1.5px) rotate(-1.4deg); }
  40% { transform: translate(2px, -1.5px) rotate(1.2deg); }
  60% { transform: translate(-2px, -1.8px) rotate(-1deg); }
  80% { transform: translate(1.8px, 1.2px) rotate(1deg); }
}

.sweat-drop {
  position: absolute;
  width: 15%;
  top: -10%;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}

.sweat-drop svg {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes sweat-fall {
  0% { top: -10%; opacity: 0; }
  12% { opacity: 0.9; }
  80% { opacity: 0.85; }
  100% { top: 96%; opacity: 0; }
}

@keyframes avatar-idle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(-2deg); }
}

.avatar-idle {
  animation: avatar-idle 2.4s ease-in-out infinite;
}

.spectate-note {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  min-height: 1.4em;
  margin-bottom: 12px;
}

.card-slot-empty {
  width: calc(92px * var(--ui-scale));
  height: calc(130px * var(--ui-scale));
  border: 2px dashed rgba(255,255,255,0.3);
  border-radius: 6px;
}

/* Un solo diseño para PC y celular: las cartas jugadas no cuelgan del
   asiento, van todas juntas en una cruz al centro de la mesa (arriba/
   abajo/izquierda/derecha, ver SEAT_LAYOUTS en ui.js) — asi no importa si
   dos asientos quedan cerca uno del otro. Cada carta lleva un puntito del
   color de su asiento (no una flecha grande) para dar la pista de quien
   es sin ensuciar la vista. El tamaño crece con --ui-scale. */
.trick-cluster {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.trick-card-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
}

.trick-card-wrap .card,
.trick-card-wrap .card-slot-empty {
  width: calc(80px * var(--ui-scale));
  height: calc(110px * var(--ui-scale));
}

.trick-dir-up { left: 50%; top: 24%; }
.trick-dir-down { left: 50%; top: 76%; }
.trick-dir-left { left: 22%; top: 50%; }
.trick-dir-right { left: 78%; top: 50%; }

.trick-owner-dot {
  position: absolute;
  width: calc(9px * var(--ui-scale));
  height: calc(9px * var(--ui-scale));
  border-radius: 50%;
  border: 2px solid rgba(20, 14, 46, 0.7);
  pointer-events: none;
  z-index: 1;
}

.trick-dir-up .trick-owner-dot { top: -5px; left: 50%; transform: translateX(-50%); }
.trick-dir-down .trick-owner-dot { bottom: -5px; left: 50%; transform: translateX(-50%); }
.trick-dir-left .trick-owner-dot { left: -5px; top: 50%; transform: translateY(-50%); }
.trick-dir-right .trick-owner-dot { right: -5px; top: 50%; transform: translateY(-50%); }

/* Mismo glow dorado que antes ponia .table-seat.is-winner .card — la
   carta ya no cuelga del asiento, se marca directo en su wrapper. */
.trick-card-wrap.is-winner .card,
.trick-card-wrap.is-winner .card-slot-empty {
  box-shadow: 0 0 0 3px #f4c542, 0 0 18px 4px rgba(244, 197, 66, 0.7);
  animation: winner-pulse 0.5s ease-in-out 2;
}

.card-slot-empty.is-leader {
  border-color: rgba(255,255,255,0.6);
}

/* Indicador de turno al centro de la mesa, dentro del montoncito de
   cartas: una flecha del color del asiento de quien le toca jugar, en vez
   del pill de texto "Turno de X" que habia antes — apunta directo al
   avatar de esa persona (angulo calculado en JS con su x,y real, no una
   de 4 direcciones fijas). */
/* Fade propio (solo opacidad): la animacion compartida popover-fade-in
   tambien anima `transform`, lo que pisaria la rotacion de la flecha. */
@keyframes turn-arrow-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.turn-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  font-size: calc(30px * var(--ui-scale));
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  animation: turn-arrow-fade-in 0.2s ease-out both;
  transform: translate(-50%, -50%) rotate(var(--turn-arrow-angle, 0deg));
}

.summary-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 1.05rem;
}

.summary-table th, .summary-table td {
  padding: 12px 4px;
  text-align: center;
  border-bottom: 1px solid var(--glass-border);
  overflow-wrap: break-word;
}

.summary-table th {
  font-family: 'Baloo 2', sans-serif;
  font-size: 0.72rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--muted);
}

.summary-table .row-eliminated {
  color: var(--error);
}

.summary-table .row-ok {
  color: var(--ok);
}

h2, h3 {
  text-align: center;
  font-family: 'Baloo 2', sans-serif;
}

/* Panel glass generico para pantallas simples (lobby, resumen, fin de
   partida) — mismo lenguaje visual que la tarjeta del menu. */
.glass-card {
  max-width: calc(560px * var(--ui-scale));
  margin: 24px auto;
  padding: 30px 26px;
  border-radius: 24px;
  background: var(--panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  animation: fade-in-up 0.4s ease-out both;
}

.hand-fan .card {
  /* La mano puede achicarse un poco si el panel de abajo queda corto de
     espacio; el resto de las cartas (mesa, casillero vacío) no se tocan.
     El techo crece con --ui-scale, pero el limite en vh sigue protegiendo
     a las pantallas bajas (telefono horizontal) de un desborde. La
     transicion es para el achique/agrandado de la mano de predecir en
     celular (ver mas abajo) — no afecta a nadie mas. */
  width: auto;
  height: min(calc(130px * var(--ui-scale)), 17vh);
  aspect-ratio: 92 / 130;
  transition: height 0.3s ease;
}

.hand-fan .card:nth-child(1) { transform: rotate(-9deg) translateY(4px); }
.hand-fan .card:nth-child(2) { transform: rotate(-5deg) translateY(1px); }
.hand-fan .card:nth-child(3) { transform: rotate(-1deg); }
.hand-fan .card:nth-child(4) { transform: rotate(3deg); }
.hand-fan .card:nth-child(5) { transform: rotate(7deg) translateY(2px); }
.hand-fan .card:nth-child(6) { transform: rotate(11deg) translateY(5px); }

.hand-fan .card-img:hover {
  transform: translateY(-14px) scale(1.08);
  z-index: 10;
}

/* Celular: la mano se sostiene superpuesta, como cartas reales en la mano
   — cada una tapa mas o menos la mitad de la anterior, se ve el palo/
   numero de la esquina y no mucho mas, hasta que se juega (ahi se ve
   entera via la animacion de .card-playing que ya existe). Sin esto, 6
   cartas de ancho completo una al lado de la otra no entran comodas. */
@media (max-width: 699px) {
  .hand-fan {
    flex-wrap: nowrap;
    gap: 0;
  }

  .hand-fan .card {
    margin-left: -44px;
  }

  .hand-fan .card:first-child {
    margin-left: 0;
  }

  /* z-index explicito (no solo el orden del DOM): asi se puede levantar
     una carta tapada sin que la reordene mal el hover/tap. */
  .hand-fan .card:nth-child(1) { z-index: 1; }
  .hand-fan .card:nth-child(2) { z-index: 2; }
  .hand-fan .card:nth-child(3) { z-index: 3; }
  .hand-fan .card:nth-child(4) { z-index: 4; }
  .hand-fan .card:nth-child(5) { z-index: 5; }
  .hand-fan .card:nth-child(6) { z-index: 6; }
}

/* La mano durante la partida (ya prediciendo, jugando cartas) va
   superpuesta como cartas reales en PC y celular por igual — coincide con
   el resto del diseño unificado de la mesa. Aparte de la regla de arriba
   (que es solo para #predict-hand en celular): esta es unicamente para
   #table-hand, y vale en cualquier tamaño de pantalla. */
#table-hand.hand-fan {
  flex-wrap: nowrap;
  gap: 0;
}

#table-hand.hand-fan .card {
  margin-left: calc(-44px * var(--ui-scale));
}

#table-hand.hand-fan .card:first-child {
  margin-left: 0;
}

#table-hand.hand-fan .card:nth-child(1) { z-index: 1; }
#table-hand.hand-fan .card:nth-child(2) { z-index: 2; }
#table-hand.hand-fan .card:nth-child(3) { z-index: 3; }
#table-hand.hand-fan .card:nth-child(4) { z-index: 4; }
#table-hand.hand-fan .card:nth-child(5) { z-index: 5; }
#table-hand.hand-fan .card:nth-child(6) { z-index: 6; }

@keyframes dealt-in {
  from { transform: translateY(-50px) scale(0.5) rotate(-12deg); opacity: 0; }
  to { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}

.dealt-in {
  animation: dealt-in 0.25s ease-out;
}

.card-playing {
  transform: translateY(-18px) scale(1.12) !important;
  box-shadow: 0 12px 22px rgba(0,0,0,0.6);
  transition: transform 0.18s ease-out;
}

@keyframes pop-in {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.card-pop {
  animation: pop-in 0.2s ease-out;
}

@keyframes winner-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@keyframes leader-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.card-leader {
  box-shadow: 0 0 0 3px var(--ok), 0 0 16px 4px rgba(79, 214, 122, 0.65);
}

.leader-flash {
  animation: leader-pop 0.3s ease-out;
}

/* Celebracion al jugar un ancho (As de Espada o As de Basto): texto grande
   tipo "combo" de Candy Crush + sacudida de pantalla. */
.ancho-celebration {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 50;
}

.ancho-celebration .ancho-text {
  font-size: 3.4rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffd54a;
  -webkit-text-stroke: 3px #6b3e00;
  text-shadow: 0 0 30px rgba(255, 213, 74, 0.85), 4px 4px 0 #6b3e00;
  transform: scale(0) rotate(-10deg);
  opacity: 0;
}

.ancho-celebration.is-active .ancho-text {
  animation: ancho-pop 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes ancho-pop {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  30%  { transform: scale(1.3) rotate(6deg); opacity: 1; }
  45%  { transform: scale(0.92) rotate(-3deg); opacity: 1; }
  60%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
  78%  { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 0; }
}

@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 3px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(4px, 2px); }
}

.shake-active {
  animation: screen-shake 0.4s ease-in-out;
}

/* ---------- Cuadros emergentes (reemplazan confirm()/alert() nativos) ---------- */

/* :not(.hidden), no la clase sola — .modal-overlay y .hidden tienen la
   misma especificidad (una clase cada una) y .modal-overlay venia despues
   en la hoja de estilos, asi que su "display:flex" le ganaba al
   "display:none" de .hidden y el modal quedaba SIEMPRE visible, tapando
   toda la pantalla con el blur de fondo. */
.modal-overlay:not(.hidden) {
  position: fixed;
  inset: 0;
  background: rgba(10, 6, 30, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  animation: modal-overlay-in 0.15s ease-out;
}

@keyframes modal-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-box {
  max-width: calc(360px * var(--ui-scale));
  width: 100%;
  padding: 26px 22px;
  border-radius: 22px;
  background: var(--panel-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  animation: fade-in-up 0.2s ease-out both;
}

.modal-box p {
  margin: 0 0 20px;
  color: var(--text-bright);
  line-height: 1.5;
  text-align: center;
  font-size: 0.95rem;
}

.modal-actions {
  display: flex;
  gap: 10px;
}

.modal-actions button {
  flex: 1 1 0;
  padding: 12px;
  border-radius: 14px;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.modal-btn-confirm {
  background: var(--cta-gradient);
  color: var(--text-bright);
  box-shadow: 0 6px 16px rgba(168, 85, 247, 0.4);
}

.modal-btn-confirm:hover {
  background: var(--cta-gradient-hover);
  transform: translateY(-2px);
}

.modal-btn-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-bright);
  border: 1px solid var(--glass-border);
}

.modal-btn-cancel:hover { border-color: var(--accent); }