* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", "Inter respaldo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #ffffff;
  min-height: 100vh;
  padding: 20px;
  /* Negro con relieve: halo dorado arriba, insinuación de fieltro abajo y una
     trama diagonal muy tenue, para que no quede un plano muerto. */
  background:
    radial-gradient(ellipse 80% 50% at 50% -5%, rgba(212, 168, 67, 0.13), transparent 68%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(26, 71, 42, 0.22), transparent 70%),
    repeating-linear-gradient(
      45deg,
      transparent 0 26px,
      rgba(255, 255, 255, 0.007) 26px 52px
    ),
    #0a0a0a;
  background-attachment: fixed;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(18, 18, 22, 0.9);
  padding: 30px;
  border-radius: 16px;
  border: 1px solid rgba(212, 168, 67, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 60px -30px rgba(212, 168, 67, 0.5);
}

/* Login y registro son formularios: 1000px los deja desparramados. */
body.acceso .container {
  max-width: 440px;
  margin: 6vh auto;

  /* ─────────────────────────────────────────────────────────────────────
     La caja, con marco oscuro y fondo más claro adentro.
     ─────────────────────────────────────────────────────────────────────

     Son dos capas de fondo sobre el MISMO elemento, sin un div de más. El
     truco es que un elemento pinta su fondo dos veces con orígenes distintos:

       - `padding-box` pinta desde el borde interior hacia adentro. Ahí va el
         gris claro, que es lo que se ve detrás del formulario.
       - `border-box` pinta también debajo del borde. Ahí va el casi negro.

     Con el borde en `transparent`, lo que se ve por él es la segunda capa. El
     resultado son dos tonos con un escalón nítido entre ellos, que es lo que
     da la sensación de profundidad, y ni un elemento más en el HTML.

     El orden importa: la primera capa va ARRIBA. Invertirlas tapa el interior
     con el marco y la caja queda de un solo color. */
  border: 14px solid transparent;
  border-radius: 22px;
  padding: 26px 24px;
  background:
    linear-gradient(180deg, #262626, #202020) padding-box,
    linear-gradient(180deg, #161616, #101010) border-box;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(212, 168, 67, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* El destello se recorta a la caja. Sin esto la banda de luz se sale por las
     esquinas redondeadas y se ve un rectángulo donde no hay ninguno. */
  position: relative;
  overflow: hidden;
}

/* ───────────────────────────────────────────────────────── el destello

   Una banda dorada que cruza la caja UNA vez al cargar y no vuelve.

   `animation-fill-mode: forwards` la deja parada fuera de cuadro al terminar;
   sin eso vuelve al principio y se queda tapando la caja con un velo dorado
   fijo. Y `pointer-events: none` es obligatorio: es una capa por encima del
   formulario, y sin eso se come los clics de los campos que hay debajo. */
body.acceso .container::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 42%,
    rgba(212, 168, 67, 0.14) 48%,
    rgba(246, 230, 192, 0.3) 50%,
    rgba(212, 168, 67, 0.14) 52%,
    transparent 58%
  );
  transform: translateX(-120%);
  animation: destello-login 1.5s cubic-bezier(0.3, 0, 0.2, 1) 0.25s forwards;
}

@keyframes destello-login {
  to { transform: translateX(120%); }
}

/* El contenido va POR ENCIMA del destello. Sin esto la banda pasa por delante
   del texto y por un instante el formulario se lee mal. */
body.acceso .container > * {
  position: relative;
  z-index: 2;
}

/* ────────────────────────────────────────────────────── el logo del login */

.marca-login {
  text-align: center;
  margin-bottom: 22px;
}

/* En el registro `.marca-login` es un <h1>, para que la página tenga
   encabezado. Se le apagan los estilos de texto: no tiene texto a la vista
   —el nombre va en el `alt`— y los de un <h1> sólo agregarían espacio en
   blanco y un tamaño de fuente que no se usa. */
h1.marca-login {
  font-size: 0;
  line-height: 0;
  margin-top: 0;
}

.logo-login {
  display: block;
  margin: 0 auto;
  /* Los tres números están medidos, no elegidos a ojo.

     El primer intento fue `clamp(90px, 22vw, 140px)` y tenía un defecto que
     sólo se ve midiendo: a 390 px de pantalla, 22vw da 86 px — por debajo del
     piso— así que en TODO teléfono el logo quedaba clavado en 90 y el término
     del medio no hacía nada. Un clamp que nunca usa su valor central es un
     ancho fijo escrito de forma complicada.

     Con 42vw sí varía: 150 px a 320, 164 a 390, y el techo de 210 desde los
     500. En los tres casos el logo ocupa cerca del 58% del ancho útil de la
     caja, que es lo que hace que se vea igual de proporcionado en un teléfono
     y en un monitor.

     Los números subieron una vez, mirando la página ya publicada: con el tope
     en 170 el logo quedaba correcto pero tímido para ser lo único que hay
     arriba del formulario.

     Y tiene que verse: al sacar el <h1>, este logo es lo único que dice de qué
     sitio es esta pantalla. */
  width: clamp(150px, 42vw, 210px);
  /* `auto` y no un número: el logo es 3:2 y fijar el alto lo aplastaría. */
  height: auto;
  filter: drop-shadow(0 0 14px rgba(212, 168, 67, 0.45));
  animation: latido-logo 3.4s ease-in-out 1.6s infinite;
}

/* Un brillo que respira, no que parpadea. Arranca DESPUÉS del destello para
   que no se pisen: dos animaciones a la vez sobre lo mismo se ven como un
   error, no como un efecto. */
@keyframes latido-logo {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(212, 168, 67, 0.45)); }
  50%      { filter: drop-shadow(0 0 24px rgba(212, 168, 67, 0.75)); }
}

/* Quien pidió que no se muevan las cosas no ve ninguna de las dos. El logo
   conserva su resplandor fijo: es parte de cómo se ve, no del movimiento. */
@media (prefers-reduced-motion: reduce) {
  body.acceso .container::after { animation: none; opacity: 0; }
  .logo-login { animation: none; }
}

/* En un teléfono esos 30px del contenedor, más los 20px del body, son 100px de
   una pantalla de 320: casi un tercio del ancho gastado en margen antes de que
   el formulario reciba nada.

   Hay un `@media (max-width: 768px)` más abajo que baja `.container` a 15px,
   pero acá NO llega a aplicarse: `body.acceso .container` le gana por
   especificidad, sin importar el orden. Por eso la regla se repite con el mismo
   selector en vez de confiar en aquélla. */
@media (max-width: 480px) {
  body.acceso {
    padding: 16px 8px;
  }

  body.acceso .container {
    margin: 3vh auto;
    /* El marco de 14 px ya pone su parte del aire, así que acá sólo queda lo
       que separa el formulario del marco. Dejar los 26 px de escritorio hacía
       que en 320 px el campo de correo midiera menos que el botón de al lado. */
    border-width: 10px;
    padding: 20px 12px;
  }
}

/* En una tarjeta angosta la marca va apilada, no en fila: si no, el nombre
   se parte en dos líneas al lado de un logo diminuto. */
body.acceso .marca-titulo a {
  flex-direction: column;
  gap: 14px;
}

body.acceso .marca-titulo .logo-img {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  border: 2px solid rgba(212, 168, 67, 0.5);
  box-shadow: 0 0 30px -8px rgba(212, 168, 67, 0.6);
}

body.acceso .marca-titulo .logo-text {
  font-size: 1.9rem;
  color: #d4a843;
  white-space: nowrap;
}

h1 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: #d4a843;
  font-family: "Playfair Display", "Playfair respaldo", Georgia, serif;
}

h2,
h3,
h4 {
  text-align: center;
  margin: 15px 0;
  color: #ffffff;
}

input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1rem;
  transition: all 0.3s;
}

input:focus {
  outline: none;
  border-color: #d4a843;
}

button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 1px;
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(145deg, #d4a843, #f0d060);
  color: #0a0a0a;
  width: 100%;
  box-shadow: 0 4px 20px rgba(212, 168, 67, 0.25);
}

.btn-secondary {
  background: linear-gradient(180deg, #d0d0d0, #a0a0a0);
  color: #0a0a0a;
}

.btn-success {
  background: linear-gradient(145deg, #d4a843, #f0d060);
  color: #0a0a0a;
  box-shadow: 0 4px 20px rgba(212, 168, 67, 0.25);
}

.btn-danger {
  background: linear-gradient(145deg, #c0392b, #8e2c20);
  color: #fff;
}

.btn-warning {
  background: linear-gradient(145deg, #d4a843, #f0d060);
  color: #0a0a0a;
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  padding: 15px 20px;
  border-radius: 10px;
  margin: 15px 0;
  flex-wrap: wrap;
  gap: 10px;
}

.join-section,
.create-section {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 10px 0;
  flex-wrap: wrap;
}

.join-section input {
  width: 200px;
}

.sala-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 20px;
  border-radius: 8px;
  margin: 10px 0;
}

.sala-code {
  font-weight: bold;
  color: #d4a843;
}

.mesa {
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 12px;
  margin: 15px 0;
}

.carta-muestra {
  text-align: center;
  font-size: 1.3rem;
  padding: 15px;
  background: rgba(233, 69, 96, 0.15);
  border-radius: 10px;
  margin-bottom: 20px;
  border: 2px solid rgba(233, 69, 96, 0.3);
}

.jugadores-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.jugador {
  background: rgba(255, 255, 255, 0.05);
  padding: 15px;
  border-radius: 10px;
  min-width: 180px;
  text-align: center;
  border: 2px solid transparent;
}

.jugador.esTurno {
  border-color: #d4a843;
}

.cartas {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.carta {
  background: #fff;
  color: #0a0a0a;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 0.85rem;
  min-width: 50px;
  text-align: center;
}

.carta.bocaAbajo {
  background: #16161a;
  color: #a0a0a0;
}

.acciones {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0;
}

.mensaje {
  text-align: center;
  padding: 12px;
  margin: 15px 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Sin texto no se dibuja: antes dejaba un rectángulo gris vacío. */
.mensaje:empty {
  display: none;
}

.mensaje.success {
  background: rgba(212, 168, 67, 0.12);
  border-color: rgba(212, 168, 67, 0.4);
  color: #f0d060;
}

.mensaje.error {
  background: rgba(192, 57, 43, 0.14);
  border-color: rgba(192, 57, 43, 0.45);
  color: #f0cfc9;
}

.link {
  text-align: center;
  margin-top: 15px;
  color: #c0c0c0;
}

.link a {
  color: #d4a843;
  text-decoration: none;
  font-weight: bold;
}

@media (max-width: 768px) {
  .container {
    padding: 15px;
  }

  h1 {
    font-size: 1.8rem;
  }

  .user-info {
    flex-direction: column;
    align-items: center;
  }

  .join-section {
    flex-direction: column;
    align-items: center;
  }

  .join-section input {
    width: 100%;
    max-width: 300px;
  }
}

/* --- marca con logo propio --- */

/* El logo de la cabecera.

   `contain` y no `cover`: el logo nuevo es transparente y tiene la corona
   pegada al borde de arriba. `cover` recorta lo que sobre para llenar la caja,
   y lo que sobra en un logo así son justamente las puntas.

   Sin `border-radius` por lo mismo: redondear las esquinas de una imagen
   transparente no redondea nada —no hay fondo que recortar— pero sí se come
   las hojas del laurel que llegan hasta el ángulo. */
.logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .logo-img {
    width: 50px;
    height: 50px;
  }
}

.logo-img.grande {
  width: 84px;
  height: 84px;
  border-radius: 18px;
}

.logo-text {
  font-family: "Playfair Display", "Playfair respaldo", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

.marca-titulo {
  display: flex;
  justify-content: center;
}

.marca-titulo a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}


/* ==================================================================
   ENTRAR CON GOOGLE — lo comparten login.html y register.html
   ==================================================================

   Vivía dentro del <style> de `login.html`. Se mudó acá cuando el registro
   necesitó el mismo botón: copiarlo habría dejado dos definiciones que se
   separan sola la primera vez que alguien ajuste una y no la otra, y este
   botón ya lleva tres arreglos medidos encima —el logo que se aplastaba, las
   mayúsculas que partían el texto en dos líneas— que no conviene perder por
   la mitad.

   Las dos páginas ya cargaban `style.css`, así que no agrega ni un pedido.
   ================================================================== */

/* Botón de Google en modo oscuro: fondo #131314 y texto blanco, que es
   la variante oscura que admite la guía de marca de Google. El logo va
   a todo color, como exige esa guía. */
.google-btn {
  width: 100%;
  padding: 13px;
  background: #131314;
  color: #e3e3e3;
  border: 1px solid #5f6368;
  border-radius: 10px;
  font-size: 0.98rem;
  font-weight: 600;
  /* Contra la regla global `button { text-transform: uppercase;
     letter-spacing: 1px }` de style.css.

     No es un capricho de estilo: era una de las causas de que el texto no
     entrara. Un espaciado de 1px por letra son 24px regalados en "Iniciar
     sesión con Google", y las mayúsculas ocupan más que las minúsculas.

     Medido sobre la página: en mayúsculas el texto se partía en dos
     líneas ya a 393px. Pasarlo a minúsculas lo lleva a una sola línea
     hasta 360px, y con el margen que recupera `style.css` en pantallas
     chicas llega hasta 320 con 13px de sobra — sin tocar el tamaño de
     letra, que era la otra salida y dejaba el botón más chico.

     De paso es lo que pide la guía de marca de Google, que fija el texto
     del botón en minúsculas. La regla global se deja como está: la usan
     todos los demás botones del sitio. */
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

/* El logo NO se encoge.

   Un SVG dentro de un flex es un elemento flexible como cualquier otro, y
   cuando el texto no entra, el navegador le recorta el ancho a él. La
   altura la fija el atributo `height`, así que sólo se achica a lo ancho:
   medido, el logo pasaba de 20px a 12.8px en una pantalla de 320 y el
   círculo de Google quedaba convertido en un óvalo. Eso era la mitad de
   lo que se veía torcido.

   `flex-shrink: 0` dice "de acá no se saca espacio". Lo que sobre o falte
   se lo arregla el texto, que sí puede. */
.google-btn svg {
  flex-shrink: 0;
}
.google-btn:hover {
  background: #1e1f20;
  border-color: #8a8f95;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}
.google-btn:active {
  background: #2a2b2d;
}
.or-divider {
  display: flex;
  align-items: center;
  margin: 15px 0;
  color: #a0a0a0;
  font-size: 0.9rem;
}
.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.or-divider::before {
  margin-right: 15px;
}
.or-divider::after {
  margin-left: 15px;
}