/* ###########################################################################
   AVISO IMPORTANTE — LEER ANTES DE TOCAR ESTE ARCHIVO
   ###########################################################################

   1) DADO 3D (.dice-wrap / .dice-scene / .dice-cube): el cubo 3D NO se centra
      con flex+justify-content (los transform 3D rompen el flex y el cubo se va
      a la izquierda). TAMPOCO baja con padding-top ni min-height (el contenedor
      lo recorta). LO QUE SI FUNCIONA:
        - CENTRAR: .dice-wrap en display:block + text-align:center, y la escena
          (.dice-scene) en display:inline-block (se centra igual que el texto).
        - SUBIR/BAJAR: margin-top en .dice-scene (NO en .dice-wrap). Subir el px
          lo baja, bajarlo lo sube. Valor actual: 70px. Cubo a 56px.
      NO volver a poner el dado en flex ni a 90px: rompe el centrado.

   2) DESINCRONIZACION DE ARCHIVOS: este styles.css es la version VIVA del
      servidor. Si se edita en una copia local y se vuelve a subir, se corre el
      riesgo de machacar arreglos hechos por SSH (como el del dado). Editar
      preferiblemente sobre la version del servidor, no sobre copias viejas.

   3) CACHE: tras cambiar este archivo, subir el ?v= en room.html
      (.../public/room.html) para que el navegador coja la version nueva.
   ########################################################################### */

/* ###########################################################################
   AVISO IMPORTANTE — LEER ANTES DE TOCAR ESTE ARCHIVO
   ###########################################################################

   1) DADO 3D (.dice-wrap / .dice-scene / .dice-cube): el cubo 3D NO se centra
      con flex+justify-content (los transform 3D rompen el flex y el cubo se va
      a la izquierda). TAMPOCO baja con padding-top ni min-height (el contenedor
      lo recorta). LO QUE SI FUNCIONA:
        - CENTRAR: .dice-wrap en display:block + text-align:center, y la escena
          (.dice-scene) en display:inline-block (se centra igual que el texto).
        - SUBIR/BAJAR: margin-top en .dice-scene (NO en .dice-wrap). Subir el px
          lo baja, bajarlo lo sube. Valor actual: 70px. Cubo a 56px.
      NO volver a poner el dado en flex ni a 90px: rompe el centrado.

   2) DESINCRONIZACION DE ARCHIVOS: este styles.css es la version VIVA del
      servidor. Si se edita en una copia local y se vuelve a subir, se corre el
      riesgo de machacar arreglos hechos por SSH (como el del dado). Editar
      preferiblemente sobre la version del servidor, no sobre copias viejas.

   3) CACHE: tras cambiar este archivo, subir el ?v= en room.html
      (.../public/room.html) para que el navegador coja la version nueva.
   ########################################################################### */

/* ###########################################################################
   AVISO IMPORTANTE — LEER ANTES DE TOCAR ESTE ARCHIVO
   ###########################################################################

   1) DADO 3D (.dice-wrap / .dice-scene / .dice-cube): el cubo 3D NO se centra
      con flex+justify-content (los transform 3D rompen el flex y el cubo se va
      a la izquierda). TAMPOCO baja con padding-top ni min-height (el contenedor
      lo recorta). LO QUE SI FUNCIONA:
        - CENTRAR: .dice-wrap en display:block + text-align:center, y la escena
          (.dice-scene) en display:inline-block (se centra igual que el texto).
        - SUBIR/BAJAR: margin-top en .dice-scene (NO en .dice-wrap). Subir el px
          lo baja, bajarlo lo sube. Valor actual: 70px. Cubo a 56px.
      NO volver a poner el dado en flex ni a 90px: rompe el centrado.

   2) DESINCRONIZACION DE ARCHIVOS: este styles.css es la version VIVA del
      servidor. Si se edita en una copia local y se vuelve a subir, se corre el
      riesgo de machacar arreglos hechos por SSH (como el del dado). Editar
      preferiblemente sobre la version del servidor, no sobre copias viejas.

   3) CACHE: tras cambiar este archivo, subir el ?v= en room.html
      (.../public/room.html) para que el navegador coja la version nueva.
   ########################################################################### */

/* ===========================================================
   BOCAZASGAMES - estilos (celeste + blanco, estilo skribbl)
   =========================================================== */
:root {
  --azul: #3aa0ec;
  --azul-osc: #1f7fce;
  --azul-claro: #cfe9fb;
  --amarillo: #ffd23f;
  --rosa: #ff4dd2;
  --naranja: #ff8a00;
  --turquesa: #16c2c2;
  --turquesa-osc: #119f9f;
  --texto: #243b53;
  --rojo: #e2342c;
  --sombra: 0 6px 0 rgba(0,0,0,.12), 0 12px 24px rgba(0,0,0,.15);
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  font-family: 'Baloo 2', 'Nunito', system-ui, Arial, sans-serif;
  color: var(--texto);
  background:
    url('/img/doodles.svg'),
    linear-gradient(180deg, #7fd2ff 0%, #43a0f0 40%, #2566d6 75%, #173f9e 100%);
  background-size: 260px 260px, cover;
  background-repeat: repeat, no-repeat;
  background-attachment: fixed;
  min-height: 100%;

}

a { color: #fff; }
button { font-family: inherit; cursor: pointer; }

/* ---------- cabecera marca ---------- */
.brand {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 0 16px 0; margin-top: -6px;
}
.brand img { width: 145px; height: 145px; object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.3));
  transform: scale(1.24) translateY(-14px); transform-origin: center top; }
.brand h1 {
  margin: 0; font-size: 4.5rem; font-weight: 800; letter-spacing: -1px;
}
.brand h1 .tq {
  color: var(--rojo);
  text-shadow:
    1px 1px 0 #7a0a0a,
    2px 2px 0 #7a0a0a,
    3px 3px 0 #7a0a0a,
    4px 4px 0 #7a0a0a,
    5px 5px 0 #7a0a0a,
    6px 6px 0 #5e0606,
    7px 7px 0 #5e0606,
    8px 8px 0 #460404,
    9px 9px 0 #460404,
    10px 10px 0 #460404,
    11px 11px 0 #300202,
    12px 12px 0 #300202,
    13px 13px 22px rgba(0,0,0,.6);
}
.brand h1 .tq2 {
  color: var(--turquesa);
  text-shadow:
    1px 1px 0 #0c6b6b,
    2px 2px 0 #0c6b6b,
    3px 3px 0 #0c6b6b,
    4px 4px 0 #0c6b6b,
    5px 5px 0 #0c6b6b,
    6px 6px 0 #095353,
    7px 7px 0 #095353,
    8px 8px 0 #073f3f,
    9px 9px 0 #073f3f,
    10px 10px 0 #073f3f,
    11px 11px 0 #052e2e,
    12px 12px 0 #052e2e,
    13px 13px 22px rgba(0,0,0,.6);
}
.brand h1 .y {
  color: #ff9a1f;
  text-shadow:
    1px 1px 0 #9a5400,
    2px 2px 0 #9a5400,
    3px 3px 0 #9a5400,
    4px 4px 0 #9a5400,
    5px 5px 0 #9a5400,
    6px 6px 0 #7a4200,
    7px 7px 0 #7a4200,
    8px 8px 0 #5e3200,
    9px 9px 0 #5e3200,
    10px 10px 0 #5e3200,
    11px 11px 0 #452500,
    12px 12px 0 #452500,
    13px 13px 22px rgba(0,0,0,.6),
    0 0 22px rgba(255,160,40,.4);
}
.tagline { text-align: center; color: #eaf6ff; margin: 0 0 8px; font-weight: 600; }

/* Bloque SEO visible en portada (index.html) — keywords para Google */
.landing-seo {
  max-width: 960px; margin: 12px auto 8px; padding: 0 12px;
  color: #eaf6ff; font-size: 1.0rem; line-height: 1.35; text-align: center;
  font-weight: 600;
}
.landing-seo p { margin: 0; }
.landing-seo strong { font-weight: 800; margin-right: 0.35em; }

/* Aviso móvil (solo pantallas ≤600px). PC no lo ve. */
.mobile-pc-notice {
  display: none;
  max-width: 520px;
  margin: 0 auto 10px;
  padding: 8px 14px;
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  color: #1a4a6e;
  background: #fff8d6;
  border: 2px solid #f0c040;
  border-radius: 12px;
  line-height: 1.35;
}
@media (max-width: 600px) {
  .mobile-pc-notice { display: block; }
  body:has(.room-top) .mobile-pc-notice {
    margin: 6px 8px 0;
    max-width: none;
  }
}

/* ---------- tarjeta central ---------- */
.card {
  max-width: 820px; margin: 0 auto 30px; background: #fff;
  border-radius: 24px; padding: 30px 38px 32px; box-shadow: var(--sombra);
  border: 4px solid rgba(255,255,255,.7);
}
.landing-card {
  padding: 10px 32px 14px;
  margin-top: 2px;
  margin-bottom: 6px;
}
.landing-card > div:first-child { margin-bottom: 4px; }
.landing-card .email-note-row { margin-top: 2px; }
.landing-card .field { margin-bottom: 0; }
.landing-card .games { margin-top: 6px; }
.landing-card .warning {
  margin-top: 14px;
  margin-bottom: 0;
  padding: 8px 12px;
  font-size: .76rem;
  line-height: 1.28;
  border-radius: 10px;
}
.landing-nick-row .nick-field-wrap {
  position: relative; flex-shrink: 0;
}
.landing-card #nick {
  width: 250px; flex-shrink: 0;
  padding: 4px 10px; font-size: .88rem; line-height: 1.15;
  border-radius: 8px;
}

/* Email opcional: campo algo más estrecho + botón compacto + casilla promos en la misma fila */
.landing-email-box { margin-top: 8px; }
.landing-email-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.landing-card #email {
  width: 200px; flex: 0 0 200px;
  padding: 4px 8px; font-size: .82rem; line-height: 1.15;
  border-radius: 8px;
}
.landing-card .landing-email-btn {
  flex: 0 0 auto;
  padding: 4px 8px; font-size: .68rem; border-radius: 6px; line-height: 1.15;
  font-weight: 800; box-shadow: 0 2px 0 rgba(0,0,0,.22);
}
.landing-card .landing-email-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.landing-promo-check {
  flex: 1 1 220px; margin: 0; min-width: 0;
  font-size: .68rem; font-weight: 600; line-height: 1.25;
  align-items: flex-start; gap: 5px;
}
.landing-promo-check input[type="checkbox"] {
  width: 13px; height: 13px; margin-top: 1px; flex-shrink: 0;
}
.landing-promo-link {
  color: var(--azul-osc); font-size: .62rem; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
}
.landing-promo-link:hover { color: var(--azul); }
.landing-email-msg { margin: 5px 0 0; font-size: .78rem; }

/* Página privacidad */
.brand--compact { margin-bottom: 6px; }
.brand--compact img { width: 72px; height: 72px; transform: scale(1) translateY(0); }
.brand--compact h1 { font-size: 2rem; }
.privacy-card {
  max-width: 640px; text-align: left; font-size: .88rem; line-height: 1.55;
}
.privacy-card h2 {
  margin: 0 0 14px; font-size: 1.05rem; color: var(--azul-osc); text-align: center;
}
.privacy-card p { margin: 0 0 12px; }
.legal-card {
  max-width: 680px; text-align: left; font-size: .88rem; line-height: 1.55;
}
.legal-card h2 {
  margin: 0 0 14px; font-size: 1.05rem; color: var(--azul-osc); text-align: center;
}
.legal-card h3 {
  margin: 18px 0 8px; font-size: .95rem; color: var(--azul-osc);
}
.legal-card p { margin: 0 0 12px; }
.legal-card ul { margin: 0 0 12px; padding-left: 20px; }
.legal-card li { margin-bottom: 6px; }
.site-footer {
  max-width: 720px; margin: 8px auto 0; padding: 0 16px;
  text-align: center; font-size: .78rem; line-height: 1.5; color: rgba(255,255,255,.92);
}
.site-footer-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-bottom: 12px;
}
.site-footer-nav a {
  color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 3px;
}
.site-footer-nav a:hover { color: var(--amarillo); }
.site-footer-copy { margin: 0 0 8px; font-weight: 800; }
.site-footer-disclaimer { margin: 0 0 6px; opacity: .9; font-size: .72rem; }
.nick-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px 0; list-style: none;
  background: #fff; border: none;
  border-radius: 10px; box-shadow: 0 6px 18px rgba(15, 40, 70, .14);
  z-index: 20; max-height: 160px; overflow-y: auto;
}
.nick-suggest li {
  padding: 7px 12px; font-size: .88rem; font-weight: 700;
  color: var(--texto); cursor: pointer;
}
.nick-suggest li:hover,
.nick-suggest li:focus {
  background: rgba(74, 163, 223, .14); outline: none;
}
.landing-nick-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap;
}
.landing-nick-row .lbl { margin: 0; white-space: nowrap; flex-shrink: 0; }
.landing-nick-row .check { margin: 0; white-space: nowrap; }
.landing-email-check .opt-tag { font-weight: 600; opacity: .7; }

.field { margin-bottom: 16px; }
label.lbl { display: block; font-weight: 700; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=number], select {
  width: 100%; padding: 12px 14px; border: 2px solid var(--azul-claro);
  border-radius: 12px; font-size: 1rem; font-family: inherit; color: var(--texto);
  outline: none; transition: border-color .15s;
}
input:focus, select:focus { border-color: var(--azul); }

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 180px; }

.check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.check input { width: 18px; height: 18px; }

/* el texto del email: grande y azul como pidio el usuario */
.email-note-row {
  display: flex; align-items: baseline; justify-content: flex-start;
  gap: 6px; flex-wrap: wrap; margin: 6px 0 0;
}
.email-note-row .email-note { margin: 0; flex: 0 1 auto; }
.email-note-sep {
  color: var(--azul-osc); font-weight: 700; opacity: .55; flex-shrink: 0; line-height: 1.3;
}
.email-note-row .link-rank-inline {
  margin-top: 0; font-size: .88rem; white-space: nowrap; flex-shrink: 0;
  color: #2aa157;
}
.email-note-row .link-rank-inline:hover { color: #36c26b; }
.email-note {
  font-size: 1.05rem; color: var(--azul-osc); font-weight: 700;
  margin: 6px 0 0; line-height: 1.3;
}

/* ---------- bloques de juego ---------- */
.games { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
@media (max-width: 620px){ .games:not(.landing-games) { grid-template-columns: 1fr; } }

.game-block {
  background: #fff; border: 3px solid var(--azul-claro);
  border-radius: 18px; padding: 8px 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.game-block .pic {
  width: 100%; height: 150px; background: #fff;
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin: 0;
}
.game-block .pic img { max-width: 100%; max-height: 150px; object-fit: contain; }
.game-block h3 { margin: 4px 0 5px; font-size: 1.15rem; line-height: 1.15; text-transform: uppercase; }
.game-block .actions { display: flex; gap: 5px; width: 100%; margin: 0; }
.game-block .actions .btn {
  padding: 8px 10px; font-size: 1.1rem; border-radius: 10px; line-height: 1.2;
  box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 5px 8px rgba(0,0,0,.14);
}
.game-block .btn-big {
  padding: 5px 6px; font-size: 1.02rem; line-height: 1.1; margin-top: 4px;
  box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 5px 8px rgba(0,0,0,.14);
}
.game-block .btn-big div:last-child { font-size: .76rem !important; margin-top: 0 !important; opacity: .85; }
.game-block .actions .btn:active,
.game-block .btn-big:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.2); }

/* ---------- landing: móvil (PC sin cambios) ----------
 * Ver bloque "MÓVIL / TÁCTIL" al final del archivo (≈ línea 738) para la SALA
 * de juego (room.html). Aquí solo portada (index.html): @media 620px y 360px. */
@media (max-width: 620px) {
  .brand {
    gap: 8px; padding: 0 10px; margin-top: 0;
  }
  .brand img {
    width: 72px; height: 72px;
    transform: scale(1.1) translateY(-4px); transform-origin: center top;
  }
  .brand h1 { font-size: 2.35rem; letter-spacing: -0.5px; }
  
  .corner-panel { 
    top: 10px; 
    right: 20px; 
    gap: 6px; 
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  
   .corner-panel .lang-notice {
      width: 140px; max-width: 140px;
      font-size: .72rem; padding: 5px 8px; line-height: 1.3;
    }


  .landing-card {
    margin: 0 8px 16px; padding: 8px 10px 14px;
    border-radius: 16px; max-width: none;
  }
  .landing-nick-row {
    flex-direction: column; align-items: stretch; gap: 5px; margin-bottom: 2px;
  }
  .landing-nick-row .lbl { font-size: .88rem; }
  .landing-card #nick { width: 100%; font-size: .95rem; padding: 6px 10px; }
  .landing-nick-row .nick-field-wrap { width: 100%; }
  .landing-card #email { width: 100%; flex: 1 1 160px; max-width: 220px; font-size: .82rem; padding: 5px 8px; }
  .landing-card .landing-email-btn {
    padding: 4px 6px; font-size: .65rem; border-radius: 5px; line-height: 1.1;
  }
  .landing-promo-check { flex: 1 1 100%; font-size: .65rem; }
  .landing-promo-link { font-size: .58rem; }
  .landing-nick-row .check { white-space: normal; font-size: .82rem; line-height: 1.25; }

  .landing-card .email-note-row { gap: 4px; margin-top: 0; }
  .landing-card .email-note { font-size: .82rem; line-height: 1.25; }
  .landing-card .email-note-row .link-rank-inline { font-size: .82rem; }

  .landing-card .games { margin-top: 8px; gap: 8px; grid-template-columns: 1fr 1fr; }
  .landing-card .game-block {
    padding: 6px 4px; border-radius: 12px; border-width: 2px;
  }
  .landing-card .game-block .pic { height: 64px; border-radius: 8px; }
  .landing-card .game-block .pic img { max-height: 64px; }
  .landing-card .game-block h3 {
    margin: 2px 0 3px; font-size: .72rem; letter-spacing: 0.02em;
  }
  .landing-card .game-block .actions { gap: 4px; }
  .landing-card .game-block .actions .btn {
    padding: 6px 3px; font-size: .82rem; border-radius: 7px; line-height: 1.1;
    box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 3px 5px rgba(0,0,0,.12);
  }
  .landing-card .game-block .btn-big {
    padding: 4px 3px; font-size: .68rem; line-height: 1.08; margin-top: 3px;
    box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 3px 5px rgba(0,0,0,.12);
  }
  .landing-card .game-block .btn-big div:last-child {
    font-size: .58rem !important; line-height: 1.05;
  }

  .landing-card .warning {
    margin-top: 12px; padding: 8px 10px; font-size: .68rem; line-height: 1.35;
    border-radius: 10px;
  }
  .landing-seo { font-size: .78rem; padding: 0 10px; margin-bottom: 10px; }
}

@media (max-width: 360px) {
  .brand h1 { font-size: 2rem; }
  .brand img { width: 64px; height: 64px; }
  .landing-card .games { grid-template-columns: 1fr; gap: 10px; }
  .landing-card .game-block .pic { height: 80px; }
  .landing-card .game-block .pic img { max-height: 80px; }
  .landing-card .game-block h3 { font-size: .95rem; }
  .landing-card .game-block .actions .btn { font-size: .95rem; padding: 7px 8px; }
  .landing-card .game-block .btn-big { font-size: .82rem; padding: 6px 8px; }
  .landing-card .game-block .btn-big div:last-child { font-size: .72rem !important; }
}

/* ---------- botones ---------- */
.btn {
  border: none; border-radius: 14px; padding: 14px 20px; font-size: 1.25rem;
  font-weight: 800; color: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 10px 12px rgba(0,0,0,.18);
  transition: transform .06s, box-shadow .06s; flex: 1;
}
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.btn-play { background: var(--azul); }
.btn-create { background: var(--naranja); }
.btn-big { width: 100%; font-size: 1.35rem; padding: 15px; }
.btn-yellow { background: var(--amarillo); color: #5a4500; }
.btn-gray { background: var(--turquesa); }
.btn-green { background: #36c26b; }

/* ---------- aviso IA ---------- */
.warning {
  margin-top: 18px; background: #0d2b6b; border: 2px solid #ff3b30;
  border-radius: 12px; padding: 8px 12px; font-size: .78rem; line-height: 1.28;
}
.warning .imp { color: #ff3b30; font-weight: 900; font-size: .82rem; }
.warning .txt { color: #2be06a; font-weight: 800; font-size: .78rem; }
.warning .support-link { font-size: .78rem; }
.email-sent-main { color: var(--azul-osc); font-weight: 700; }
.email-spam-note { color: var(--rojo); font-weight: 700; }
.support-link {
  color: #7ee8ff; font-weight: 800; text-decoration: underline; text-underline-offset: 2px;
}
.support-link:hover { color: #fff; }
.support-card .support-form { margin-top: 12px; }
.support-form select,
.support-form input[type="text"],
.support-form input[type="email"],
.support-form input[type="datetime-local"],
.support-form textarea,
.support-form input[type="file"] {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--azul-claro);
  font-family: inherit; font-size: .92rem;
}
.support-form textarea { resize: vertical; min-height: 120px; }
.support-honeypot {
  position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;
}
.support-msg { margin-top: 10px; min-height: 1.2em; }
.support-files-note { margin: 6px 0 0; font-size: .78rem; }
.toast-support-line .support-link,
.tarjeta-support-line .support-link { color: var(--azul-osc); }
.room-warning .support-link { color: #7ee8ff; margin-left: 4px; }

.center { text-align: center; }
.muted { color: #6b8299; }
.link-rank { display:inline-block; margin-top: 14px; color: var(--azul-osc); font-weight: 800; text-decoration: none; }

/* ---------- modal ---------- */
.modal-bg {
  position: fixed; inset: 0; background: rgba(15,40,70,.55);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.modal-bg.show { display: flex; }
.modal {
  background: #fff; border-radius: 18px; padding: 22px; max-width: 420px; width: 100%;
  box-shadow: var(--sombra);
}
.modal h3 { margin-top: 0; }

.modal-compact {
  max-width: 210px; padding: 11px 14px; border-radius: 12px;
}
.modal-compact h3 { font-size: 1rem; margin-bottom: 8px; }
.modal-compact p { font-size: 0.85rem; }
.modal-compact .btn { font-size: 0.85rem; padding: 8px 14px; }
.modal-compact #toastIcon { font-size: 1.2rem !important; margin-bottom: 4px !important; }

.inactivity-notice {
  position: fixed; top: 72px; left: 50%; transform: translateX(-50%);
  z-index: 40; max-width: 340px; padding: 8px 14px;
  background: #fff8dc; border: 2px solid #e6a800; border-radius: 10px;
  font-size: 0.82rem; font-weight: 700; color: #5a4500;
  box-shadow: var(--sombra); text-align: center;
}
.inactivity-notice.hidden { display: none; }

.nick-spinner {
  width: 48px; height: 48px; margin: 0 auto 14px;
  border: 4px solid #e6f0fa; border-top-color: var(--azul);
  border-radius: 50%; animation: nick-spin .75s linear infinite;
}
@keyframes nick-spin { to { transform: rotate(360deg); } }
#nickValidateModal { z-index: 60; }
.nick-validate-msg {
  font-size: 1.05rem; font-weight: 800; margin: 0; color: var(--texto);
}
#arbitroLoadModal { z-index: 61; }
.load-progress-wrap {
  width: 100%; height: 14px; margin: 16px 0 8px;
  background: #e6f0fa; border-radius: 999px; overflow: hidden;
}
.load-progress-bar {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--azul), #4fc3f7);
  transition: width .45s ease;
}
.load-progress-pct {
  font-size: 1.35rem; font-weight: 900; margin: 0 0 10px; color: var(--azul-osc);
}
.load-progress-msg {
  font-size: .98rem; font-weight: 700; margin: 0; color: var(--texto); min-height: 2.6em;
}

/* =========================================================
   SALA DE JUEGO (layout estilo skribbl)
   ========================================================= */
.room-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 3px 16px; color: #fff;
}
.room-top .left { display: flex; align-items: center; gap: 10px; font-weight: 800; flex-shrink: 0; }
.room-top img { width: 38px; height: 38px; }
.room-strike-banner {
  flex: 1; min-width: 0; text-align: center;
  font-size: .95rem; font-weight: 800; line-height: 1.3;
  padding: 5px 14px; border-radius: 10px;
  background: rgba(255,255,255,.15);
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.room-strike-banner.clean { color: #fff; }
.room-strike-banner.has-yellow { background: rgba(255,214,0,.45); color: #fff; }
.room-strike-banner.has-orange { background: rgba(255,140,0,.5); color: #fff; }
.room-strike-banner.has-red { background: rgba(226,52,44,.65); color: #fff; }
.room-strike-banner .card-history-word {
  font-weight: 900;
  font-size: 1.05em;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.room-strike-banner .card-history-word.yellow { color: #ffe033; }
.room-strike-banner .card-history-word.orange { color: #ffb347; }
.room-strike-banner .card-history-word.red { color: #ff8a80; }
@media (max-width: 780px) {
  .room-strike-banner { font-size: .95rem; padding: 8px 10px; }
}
@media (max-width: 520px) {
  .room-strike-banner { display: none; }
}
.room-code { background: rgba(255,255,255,.2); padding: 4px 10px; border-radius: 10px; }
.timer-badge {
  background: var(--amarillo); color: #5a4500; font-weight: 900;
  padding: 3px 7px; border-radius: 6px; font-size: 0.6rem; min-width: 27px; text-align:center;
}

.room-grid {
  display: grid; grid-template-columns: 220px 1fr 320px; gap: 12px;
  padding: 0 12px 8px; height: calc(100vh - 430px);
}
@media (max-width: 900px){
  /* Tablet / móvil ancho: una columna (sin reordenar). El layout móvil fino
     (juego→chat→jugadores) está en @media (max-width: 600px) más abajo. */
  .room-grid { grid-template-columns: 1fr; height: auto; }
}
.panel {
  background: #fff; border-radius: 16px; padding: 12px; box-shadow: var(--sombra);
  border: 2px solid rgba(0,0,0,.22);
  display: flex; flex-direction: column; min-height: 0;
}
.panel h4 { margin: 0 0 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--azul-osc); font-size: .85rem; }

/* jugadores */
.players { overflow-y: auto; flex: 1; }
.room-share {
  margin-top: 10px; padding-top: 10px; border-top: 2px dashed var(--azul-claro);
  text-align: center; color: var(--texto); font-size: .95rem; font-weight: 700;
}
.room-share b { color: var(--azul-osc); font-size: 1.15rem; letter-spacing: 2px; }
.player {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 10px; margin-bottom: 6px; background: #f3f8fd;
}
.player.turn { background: var(--amarillo); }
.player.banned { opacity: .5; text-decoration: line-through; }
.player.admin-ai-badge { background: #fff0f0; border: 1px dashed #e2342c; margin-bottom: 8px; }
.player .pname { font-weight: 700; }
.player .pscore { font-weight: 800; color: var(--azul-osc); }
.player .crown { font-size: .8rem; }
.player .report-btn {
  background: none; border: none; cursor: pointer;
  font-size: .9rem; color: #c0392b; padding: 0 4px;
  opacity: .55; transition: opacity .15s, transform .1s;
  line-height: 1;
}
.player:hover .report-btn { opacity: 1; }
.player .report-btn:hover { transform: scale(1.2); }

.report-false-warn {
  color: var(--rojo);
  font-weight: 800;
}

.correct-answer {
  color: #1a8a2e;
  font-weight: 800;
}

/* centro */
.stage { align-items: center; justify-content: flex-start; text-align: center; overflow-y: auto; }
.stage .big-msg { font-size: 1.3rem; font-weight: 800; margin: 10px 0; }
.stage .big-msg--compact { font-size: 1.05rem; margin: 8px 0; line-height: 1.35; }
.stage-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  padding: 0 12px;
  margin: 0 0 6px;
  box-sizing: border-box;
}
.stage-meta .muted { margin: 0; text-align: center; }
.stage-meta .stage-timer { margin: 0; flex-shrink: 0; justify-self: end; }

/* Control de volumen en stage-meta */
.vol-control {
  display: flex; align-items: center; gap: 5px;
  justify-self: start;
}
.vol-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1rem; padding: 0; line-height: 1;
  color: #111; transition: opacity .15s;
}
.vol-btn:hover { opacity: .7; }
.vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 72px; height: 4px; border-radius: 2px;
  background: var(--azul-claro); outline: none; cursor: pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--azul); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.vol-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--azul); cursor: pointer; border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.question { font-size: 1.5rem; font-weight: 800; margin: 14px 0 20px; }
.question--compact { font-size: 1.1rem; margin: 8px 0 12px; }
.word-blanks {
  font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  letter-spacing: 0.12em;
  color: var(--azul-osc);
}
/* Cada palabra de la solución es un bloque que no se parte; se separan con un
   hueco claro y, si no caben, saltan de línea ENTERAS (nunca a media palabra). */
.word-blanks .wb-word {
  display: inline-block;
  white-space: nowrap;
  margin: 0 18px 6px 0;
}
.word-blanks .wb-word:last-child { margin-right: 0; }
.options { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 12px; 
  width: 100%; 
  max-width: 560px; 
  margin-left: auto; 
  margin-right: auto; 
}
.opt {
  padding: 16px; border-radius: 14px; border: 3px solid var(--azul-claro);
  background: #fff; font-size: 1.1rem; font-weight: 700; color: var(--texto);
  box-shadow: 0 2px 8px rgba(45,108,223,.10), 0 1px 2px rgba(0,0,0,.06);
  transition: box-shadow .15s, border-color .15s, transform .1s;
}
.opt:hover:not(:disabled) {
  border-color: var(--azul);
  box-shadow: 0 4px 16px rgba(45,108,223,.18), 0 1px 4px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.opt.correct { background: #36c26b; color: #fff; border-color: #2aa157; box-shadow: 0 2px 8px rgba(54,194,107,.25); }
.opt.wrong { background: #e2342c; color: #fff; border-color: #b5241e; box-shadow: 0 2px 8px rgba(226,52,44,.25); }
.opt.chosen { outline: 4px solid var(--amarillo); }
.opt:disabled { cursor: default; transform: none; }
.trivia-confirm {
  display: block; width: 100%; max-width: 560px; margin: 14px auto 0;
  padding: 14px 20px; border: none; border-radius: 14px;
  background: var(--azul); color: #fff; font-size: 1.15rem; font-weight: 800;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 4px 14px rgba(45,108,223,.35), 0 1px 3px rgba(0,0,0,.1);
  transition: background .15s, box-shadow .15s, transform .1s;
}
.trivia-confirm:hover:not(:disabled) {
  background: #1a56c4;
  box-shadow: 0 6px 20px rgba(45,108,223,.45);
  transform: translateY(-1px);
}
.trivia-confirm:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 2px 6px rgba(45,108,223,.25); }
.trivia-confirm:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.mid-join-answer.big-msg { margin-top: 18px; margin-bottom: 0; }
.mid-join-fast.big-msg { margin-top: 14px; max-width: 92%; line-height: 1.35; color: var(--azul); }
.waiting-msg-hint { color: var(--azul); }

/* feed de pistas del que describe (Bocazas), en el centro del escenario */
.clue-feed {
  width: 100%; max-width: 560px; margin: 16px auto 0; padding: 10px 14px;
  background: #fff7d6; border: 2px solid var(--amarillo); border-radius: 14px;
  max-height: 220px; overflow-y: auto; text-align: left;
}
.clue-feed:empty { display: none; }

/* Estado del describidor en la pantalla central (nick + puntos que va ganando) */
.desc-status {
  display: inline-block; margin: 8px auto 0; padding: 6px 14px;
  background: #e6f0fa; border-radius: 999px;
  font-weight: 800; font-size: 1rem; color: var(--azul-osc);
}
.desc-status--active { background: #d8f5e3; color: #1d7a45; }
.clue-line { font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin-bottom: 4px; color: var(--texto); }
.clue-line .who { font-weight: 800; color: var(--azul-osc); margin-right: 4px; }

.theme-list { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 10px; 
  width: 100%; 
  max-width: 560px; 
  margin-left: auto; 
  margin-right: auto; 
}
.theme-btn {
  padding: 14px; border-radius: 14px;
  border: 3px solid #2ecc71;
  background: var(--azul); color: #fff; font-weight: 800;
  box-shadow: 0 4px 0 #1e9e54, 0 6px 14px rgba(0,0,0,.22);
  transition: transform .1s, box-shadow .1s, border-color .15s;
  cursor: pointer;
}
.theme-btn:nth-child(even) { background: var(--rosa); }
.theme-btn:hover {
  border-color: #5ee894;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #1e9e54, 0 9px 20px rgba(0,0,0,.28);
}
.theme-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #1e9e54, 0 2px 6px rgba(0,0,0,.2);
}

/* tarjeta bocazas — elegir palabra (2 opciones) y vista describer */
.taboo-card {
  background: #fff; border: 4px solid var(--rosa); border-radius: 16px;
  padding: 20px 28px; min-width: 280px; max-width: 520px; box-shadow: var(--sombra);
}
.taboo-card .word {
  font-size: 2.4rem; font-weight: 900; color: var(--azul-osc);
  border-bottom: 3px solid var(--rosa); padding-bottom: 10px; margin-bottom: 12px;
}
.taboo-card .forb { color: var(--rojo); font-weight: 800; font-size: 1.35rem; line-height: 1.65; }
.card-options { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.card-options--row {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
}
.card-options .taboo-card.taboo-card--back,
.card-options--row .taboo-card--back {
  width: 108px;
  max-width: 108px;
  min-width: 108px;
  min-height: 162px;
  height: 162px;
  padding: 8px;
  flex: 0 0 auto;
}
.card-options .taboo-card {
  cursor: pointer; transition: transform .08s;
  min-width: 0; max-width: 199px; width: 199px;
  padding: 12px 14px; border-width: 2px; border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}
.card-options .taboo-card .word {
  font-size: 1.3rem; font-weight: 900;
  border-bottom-width: 1px; padding-bottom: 3px; margin-bottom: 4px;
}
.card-options .taboo-card .forb {
  font-size: 0.86rem; font-weight: 800; line-height: 1.25;
}
.card-options .taboo-card:hover { transform: translateY(-2px); }

/* reverso de carta tabú — mosaico de estrellas (elección de carta) */
.taboo-card--back {
  cursor: default;
  padding: 10px;
  border-color: var(--rojo);
  background: linear-gradient(145deg, var(--rosa) 0%, #ff6b9d 45%, var(--rojo) 100%);
  box-shadow: var(--sombra), inset 0 0 0 2px rgba(255, 255, 255, .25);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  aspect-ratio: 2 / 3;
}
.card-options .taboo-card--back {
  cursor: pointer;
}
.card-options--backs .taboo-card--back {
  pointer-events: none;
}
.card-options--row .taboo-card:not(.taboo-card--back) {
  flex: 0 0 auto;
  align-self: stretch;
}
.taboo-card-back__mosaic {
  flex: 1;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, .35);
  background-color: rgba(255, 255, 255, .12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='%23ffffff' fill-opacity='.92'%3E%3Cpolygon points='28,4 32,20 48,20 35,30 40,46 28,36 16,46 21,30 8,20 24,20'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
}
.card-options .taboo-card--back .taboo-card-back__mosaic {
  border-radius: 6px;
}
/* carta compacta horizontal — solo quien describe (tras elegir) */
.taboo-card--describe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 10px;
  margin: 0 auto;
  min-width: 0;
  max-width: min(100%, 680px);
  padding: 10px 16px;
  border-width: 2px;
  border-radius: 10px;
}
.taboo-card--describe .taboo-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: #8aa0b3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.taboo-card--describe .word {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--azul-osc);
  border: none;
  padding: 0;
  margin: 0;
}
.taboo-card--describe .taboo-divider {
  color: var(--rosa);
  font-weight: 900;
  font-size: 1.1rem;
  opacity: 0.85;
}
.taboo-card--describe .forb {
  font-size: 0.98rem;
  line-height: 1.25;
  text-align: left;
}

/* falta bocazas: aviso grande */
.foul-card-shell {
  display: flex;
  justify-content: center;
  margin: 0 auto 12px;
}
.foul-card {
  max-width: 660px; margin: 0; padding: 12px 24px;
  background: #ffe8e8; border: 6px solid var(--rojo); border-radius: 18px;
  box-shadow: var(--sombra); text-align: center;
}
.foul-title {
  font-size: 1.86rem; font-weight: 900; color: var(--rojo); margin-bottom: 6px;
}
.foul-msg {
  font-size: 1.56rem; font-weight: 700; line-height: 1.35; margin-bottom: 6px; color: var(--texto);
}
.foul-word {
  font-size: 1.74rem; font-weight: 900; color: var(--azul-osc);
}
.foul-quote {
  font-size: 1.35rem; font-weight: 700; line-height: 1.35;
  margin-bottom: 10px; padding: 8px 12px;
  background: #fff; border-radius: 10px; color: var(--texto);
}
.foul-quote .who { color: var(--azul-osc); font-weight: 900; }
.foul-clues-wrap { margin-top: 12px; }
.foul-clues-wrap .clue-feed { max-height: 120px; overflow-y: auto; font-size: 1.1rem; }
.clue-line--foul {
  color: var(--rojo); font-weight: 800;
  background: #ffe8e8; border-radius: 8px; padding: 4px 8px;
}
.msg.foul {
  color: var(--rojo); background: #ffe8e8; border-radius: 8px;
  padding: 4px 8px; margin-bottom: 4px; font-weight: 700;
}

/* chat */
.chat-panel { min-height: 280px; }
.chat-msgs {
  flex: 1; min-height: 120px; overflow-y: auto; padding: 6px 8px;
  background: #fff; border-radius: 10px;
}
.msg { margin-bottom: 5px; line-height: 1.4; word-break: break-word; }

/* Conversación jugadores/bots: sin recuadros */
.msg.chat-user {
  background: none;
  border: none;
  border-radius: 0;
  padding: 1px 0;
  color: #1a1a1a;
}
.msg.chat-user .who { font-weight: 800; color: var(--azul-osc); margin-right: 4px; }
.msg.chat-user.clue .who { color: #1565a8; }
.msg.chat-user.clue .chat-hint { color: #5a7a99; font-size: .88em; font-weight: 600; }
.msg.chat-user.foul { color: #b01818; font-weight: 700; }
.msg.chat-user.foul .who { color: #b01818; }
.msg.chat-user.foul .chat-hint { color: #c0392b; font-size: .88em; }
.msg.pending { opacity: .55; font-style: italic; }

/* Mensajes del sistema: color sin recuadro (salvo excepciones) */
.msg.system {
  font-style: normal;
  font-size: .92rem;
  font-weight: 700;
  background: none;
  border: none;
  border-radius: 0;
  padding: 2px 0;
}
.msg.system.sys-join { color: #5a6a7a; font-weight: 600; }
.msg.system.sys-turn { color: #1a5490; }
.msg.system.sys-meta { color: #5a4080; }
.msg.system.sys-timeout { color: #9a6200; }
.msg.system.sys-fail { color: #9a2848; }
.msg.system.sys-kick { color: #a03810; }
.msg.system.sys-warn { color: #a05800; }
.msg.system.sys-hint { color: #604090; font-weight: 600; }
.msg.system.sys-error { color: #8a2020; }
.msg.system.sys-info { color: #3d5a73; font-weight: 600; }
.msg.system.sys-foul { color: #a01818; }

/* Recuadros solo: tarjetas de ban, ganadores y palabra a acertar */
.msg.system.sys-box,
.msg.system.tarjeta-yellow,
.msg.system.tarjeta-orange,
.msg.system.tarjeta-red {
  border-radius: 8px;
  padding: 7px 10px;
  border: 1px solid transparent;
}
.msg.system.sys-success.sys-box {
  background: #c8efd4; color: #0d4d24; border-color: #8fd4a8;
}
.msg.system.sys-reveal.sys-box {
  background: #b8e6c8; color: #145a32; border-color: #7bc996;
}
.msg.system.tarjeta-yellow { color: #5a4500; background: #fff8dc; font-style: normal; font-weight: 800; border-color: #f0e090; }
.msg.system.tarjeta-orange { color: #7a3a00; background: #ffe8cc; font-style: normal; font-weight: 800; border-color: #f5c090; }
.msg.system.tarjeta-red { color: #fff; background: var(--rojo); font-style: normal; font-weight: 800; border-color: #a01818; }

/* icono tarjeta en modales (amarilla / naranja / roja) */
.tarjeta-icon {
  width: 42px;
  height: 58px;
  border-radius: 6px;
  margin: 0 auto 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
  border: 2px solid rgba(0, 0, 0, .12);
}
.tarjeta-icon.yellow { background: #ffd600; }
.tarjeta-icon.orange { background: #ff8c00; }
.tarjeta-icon.red { background: var(--rojo); border-color: rgba(0, 0, 0, .2); }
.msg.correct { background: #d8f5e3; border-radius: 8px; padding: 4px 8px; font-weight: 700; }
.chat-form { display: flex; gap: 8px; margin-top: 8px; }
.chat-form input { flex: 1; }
.chat-form button { background: var(--azul); color:#fff; border:none; border-radius:12px; padding: 0 16px; font-weight: 800; }

.scoreboard { width: 100%; max-width: 480px; margin: 10px auto; text-align: left; }
.scoreboard .row2 { display:flex; justify-content: space-between; padding: 8px 12px; background:#f3f8fd; border-radius:10px; margin-bottom:6px; font-weight:700; }

/* ---------- ranking: pestañas, columnas y explicación ---------- */
.rank-tabs { display:flex; gap:8px; justify-content:center; margin: 6px 0 14px; }
.rank-tab {
  flex: 1; max-width: 240px; padding: 10px 12px; border:none; cursor:pointer;
  border-radius: 12px; background:#e6f0fa; color: var(--azul-osc);
  font-family: inherit; font-weight: 800; font-size: .95rem; transition: background .15s, color .15s;
}
.rank-tab.active { background: var(--azul); color:#fff; }
.rank-head {
  display:flex; justify-content:space-between; align-items:center;
  width:100%; max-width:480px; margin: 0 auto; padding: 0 12px 4px;
  font-size:.78rem; font-weight:800; color:#6b8299; text-transform:uppercase; letter-spacing:.4px;
}
.rank-head-right { display:flex; align-items:center; gap:14px; }
.rank-col-rate { display:inline-block; min-width:48px; text-align:right; }
.rank-col-games { display:inline-block; min-width:64px; text-align:right; }
.scoreboard .row2 .rank-col-rate { color: var(--azul-osc); }
.scoreboard .row2 .rank-col-games { color:#6b8299; font-weight:700; }

.rank-how {
  max-width:480px; margin: 16px auto 4px; text-align:left;
  background:#f3f8fd; border-radius:12px; padding: 10px 14px; font-size:.86rem; color: var(--texto);
}
.rank-how summary { cursor:pointer; font-weight:800; color: var(--azul-osc); }
.rank-how p { margin: 8px 0; line-height: 1.4; }
.rank-how ul { margin: 6px 0; padding-left: 18px; }
.rank-how li { margin-bottom: 5px; line-height: 1.35; }

/* temporizador grande visible en el escenario */
.stage-timer {
  display: inline-block; background: var(--amarillo); color: #5a4500;
  font-weight: 900; font-size: 0.7rem; padding: 3px 9px; border-radius: 7px;
  margin: 3px 0 2px; box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.stage-timer.urgent { background: var(--rojo); color: #fff; animation: pulseT .6s infinite alternate; }
@keyframes pulseT { from { transform: scale(1); } to { transform: scale(1.12); } }

/* podio final */
.podium { display:flex; justify-content:center; align-items:flex-end; gap:12px; margin:18px auto 8px; }
.pod { display:flex; flex-direction:column; align-items:center; width:96px; }
.pod-medal { font-size:2.2rem; line-height:1; }
.pod-name { font-weight:800; color:var(--texto); margin:4px 0; max-width:96px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pod-bar { width:100%; border-radius:12px 12px 0 0; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; padding-top:8px; gap:2px;
  color:#fff; font-weight:900; box-shadow: var(--sombra); }
.pod-num { font-size:1.6rem; opacity:.85; }
.pod-score { font-size:1.3rem; }
.pod1 .pod-bar { height:140px; background:linear-gradient(180deg,#ffe066,#f0a500); color:#5a4500; }
.pod2 .pod-bar { height:104px; background:linear-gradient(180deg,#e4eef7,#9bb6cc); }
.pod3 .pod-bar { height:76px;  background:linear-gradient(180deg,#f0c89a,#c98a4e); }

/* cuenta atras de inicio */
.countdown {
  font-size: 6rem; font-weight: 900; color: var(--azul-osc);
  text-shadow: 3px 3px 0 rgba(0,0,0,.12); line-height: 1;
  animation: pop .35s ease;
}
@keyframes pop { from { transform: scale(.4); opacity: .2; } to { transform: scale(1); opacity: 1; } }
.waiting-msg { font-size: 1.3rem; font-weight: 800; color: var(--azul-osc); margin: 14px 0; }
.waiting-msg-hint { font-size: .95rem; font-weight: 700; margin: 0 12px 14px; line-height: 1.35; }
.dots::after { content: ''; animation: dots 1.2s steps(4,end) infinite; }
@keyframes dots { 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} }

/* selector de idioma + links (esquina) */
.corner-panel {
  position: fixed; top: 10px; right: 24px; z-index: 30;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.lang-switch { display: flex; gap: 4px;
  background: rgba(255,255,255,.85); border-radius: 10px; padding: 3px; box-shadow: var(--sombra); }
.lang-switch button { border: none; background: transparent; font-weight: 800; color: var(--azul-osc);
  padding: 4px 8px; border-radius: 8px; font-size: .82rem; }
.lang-switch button.active { background: var(--azul); color: #fff; }
.corner-panel .lang-notice {
  width: 170px; max-width: 170px; margin: 0; padding: 8px 12px; line-height: 1.35;
  background: rgba(255,255,255,.82); border-radius: 8px; box-shadow: var(--sombra);
  font-size: .85rem; font-weight: 700; text-align: center;
}
.lang-notice-label { display: block; color: var(--rojo); font-weight: 900; margin-bottom: 2px; }
.lang-notice-text { display: block; color: var(--azul-osc); }
.corner-panel .link-rank {
  background: rgba(255,255,255,.82); border-radius: 8px; padding: 2px 8px;
  box-shadow: var(--sombra); margin-top: 0; display: block; text-align: right;
}

/* volver al inicio (esquina superior izquierda) */
.page-exit { position: fixed; top: 10px; left: 12px; z-index: 100; }
.page-exit-link {
  display: inline-block; padding: 6px 12px; background: rgba(255,255,255,.94);
  border-radius: 10px; box-shadow: var(--sombra); text-decoration: none;
  color: var(--azul-osc); font-weight: 800; font-size: .85rem;
}
.page-exit-link:hover { color: var(--azul); }

/* vote kick por inactividad */
.votekick {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 60; background: #fff; border: 3px solid var(--rojo); border-radius: 16px;
  padding: 16px 22px; box-shadow: var(--sombra); text-align: center; max-width: 90vw;
}
.votekick .vk-msg { margin: 0 0 12px; font-weight: 800; color: var(--texto); font-size: 1.05rem; }
.votekick .vk-actions { display: flex; gap: 10px; justify-content: center; }
.votekick .vk-actions .btn { flex: 0 0 auto; min-width: 120px; }
.votekick .vk-count { margin: 10px 0 0; font-weight: 800; color: var(--azul-osc); }

.hidden { display: none !important; }
.banner-banned { background: var(--rojo); color:#fff; padding: 8px; text-align:center; font-weight:800; border-radius: 10px; margin-bottom: 8px; }

.room-warning {
  background: #0d2b6b; border: 2px solid #ff3b30; padding: 18px 24px;
  border-radius: 12px; margin: 0 12px 10px; font-size: 1.1rem; font-weight: 800; line-height: 1.5;
}
.room-warning .rw-imp { color: #ff3b30; margin-right: 6px; }
.room-warning span:not(.rw-imp) { color: #2be06a; }

/* =========================================================
   MÓVIL / TÁCTIL — experiencia de juego en pantallas pequeñas
   =========================================================
   ARQUITECTURA (para mantenedores / IA)
   ------------------------------------
   · PC primero: objetivo 1920×1080 (ver public/js/viewport-scale.js).
   · Móvil es un camino SEPARADO: no usa zoom; usa media queries aquí.
   · Tres capas responsive en este proyecto:
       1) Portada index.html  → @media max-width 620px y 360px (≈ línea 208).
       2) Sala room.html      → @media max-width 900px (columna simple, arriba).
       3) Sala móvil fino     → @media max-width 600px (este bloque).
       4) Táctil              → @media (hover: none) (bloque siguiente).
   · Detección: ancho de viewport (fiable). NO usar user-agent en JS para layout.
   · viewport-scale.js: en móvil el ratio w/1280 suele ser <1.15 → zoom 1.0;
     por tanto estas reglas mandan sin interferencia del script de PC.
   · Lógica del juego (Socket.IO, bots, moderación): igual en móvil; solo cambia UI.
   PROBAR SIN MÓVIL FÍSICO
   -----------------------
   Chrome/Firefox DevTools → Toggle device toolbar → iPhone o 390×844.
   Comprobar: portada, entrar a sala trivia/bocazas, chat, elegir respuesta/carta.
   AJUSTES FUTUROS (pedir en lenguaje natural)
   -------------------------------------------
   "Chat más alto" → .chat-msgs max-height (ahora 34vh).
   "Cartas más pequeñas" → .card-options .taboo-card width (ahora 46vw).
   "Cabecera más compacta" → .room-top padding/font-size.
   No tocar viewport-scale.js para móvil salvo que cambie la estrategia global.
   ========================================================= */
@media (max-width: 600px) {
  /* Cabecera de sala: compacta y que pueda envolver en 2 líneas */
  .room-top { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .room-top .left { font-size: .95rem; }
  .room-top img { width: 30px; height: 30px; }
  .room-top-game { margin-left: auto; }
  .room-top-game #gameName { font-size: 1rem !important; }
  .room-strike-banner { order: 3; flex-basis: 100%; font-size: .9rem; padding: 6px 10px; }
  .timer-badge { font-size: .9rem; }

  /* Sala en una columna y reordenada: juego → chat → jugadores.
     (DOM real: jugadores, juego, chat; aquí se reordena con 'order'.) */
  .room-grid {
    grid-template-columns: 1fr;
    height: auto;
    gap: 10px;
    padding: 0 8px 10px;
  }
  .room-grid .stage { order: 1; }
  .room-grid .chat-panel { order: 2; }
  .room-grid .panel:not(.stage):not(.chat-panel) { order: 3; } /* panel de jugadores */

  /* Cada zona con su propio scroll para que la página no se alargue sin fin */
  .stage { max-height: 52vh; }
  .players { max-height: 26vh; }
  .chat-panel { min-height: 0; }
  .chat-msgs { max-height: 34vh; min-height: 120px; }

  /* Tipografía del escenario más contenida */
  .stage .big-msg { font-size: 1.12rem; }
  .question { font-size: 1.25rem; margin: 10px 0 14px; }
  .question--compact { font-size: 1.05rem; }
  .options { grid-template-columns: 1fr 1fr; gap: 8px; }
  .opt { padding: 12px; font-size: 1rem; }
  .theme-list { grid-template-columns: 1fr 1fr; gap: 8px; }
  .clue-line { font-size: 1.05rem; }

  /* Cartas de tabú: que quepan en fila sin desbordar la pantalla */
  .card-options { gap: 6px; }
  .card-options .taboo-card { width: 46vw; max-width: 200px; }
  .card-options .taboo-card.taboo-card--back,
  .card-options--row .taboo-card--back {
    width: 30vw; min-width: 0; max-width: 120px;
    height: auto; min-height: 0; aspect-ratio: 2 / 3;
  }
  .taboo-card { padding: 14px 16px; min-width: 0; }
  .taboo-card .word { font-size: 1.5rem; }
  .taboo-card .forb { font-size: 1rem; }
  .taboo-card--describe { padding: 8px 12px; }
  .taboo-card--describe .word { font-size: 1.2rem; }

  /* Aviso de falta (foul) más pequeño en móvil */
  .foul-title { font-size: 1.4rem; }
  .foul-msg { font-size: 1.15rem; }
  .foul-word { font-size: 1.25rem; }
  .foul-quote { font-size: 1.05rem; }

  /* Chat: input cómodo para el dedo. font-size 16px evita el auto-zoom de iOS. */
  .chat-form input { font-size: 16px; padding: 10px 12px; }
  .chat-form button { padding: 0 14px; font-size: 1rem; }

  /* Podio final más compacto */
  .pod { width: 78px; }
  .pod-name { max-width: 78px; }

  /* Aviso inferior compacto */
  .room-warning { font-size: .85rem; padding: 12px 14px; margin: 0 8px 10px; }
}

/* Dispositivos táctiles (móvil/tablet sin ratón): quita :hover "pegado" tras tocar.
   Complementa el bloque @media (max-width: 600px) de arriba; puede aplicar también
   en tablets grandes donde el ancho supere 600px pero no haya hover real. */

@media (min-width: 1400px) {
  html, body {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
  }

  .landing-seo {
    font-size: 1.0rem !important;
  }

  /* AVISO: Ajuste de tamaño de texto y marco */
  .aviso {
    font-size: 1.1rem !important;
    padding: 20px !important;
  }

  .landing-section {
    min-height: 100vh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: 50px !important;
    padding-bottom: 0px !important;
  }

  main, .main-container {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
  }

  /* FRAME BLANCO */
  .landing-card {
    margin: 20px auto !important; 
    padding: 15px !important;
    min-height: 0 !important;
    height: auto !important;
    flex-grow: 0 !important;
    transform: scale(1.15) !important;
    transform-origin: top center !important;
  }

  /* FOOTER */
  .site-footer {
    margin-top: 65px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    font-size: 16px !important;
  }
  
  .site-footer a, .site-footer p {
    font-size: 16px !important;
  }

  .room-grid {
    max-height: 560px !important;
    margin: 0 auto !important;
  }

  .support-card {
    max-width: 820px;
    margin: 0 auto !important;
    padding: 5px 30px !important;
  }

  .support-card p {
    margin: 0 0 3px 0 !important;
    font-size: 15px !important;
  }
  .support-card label {
    margin-top: 1px !important;
    margin-bottom: 0px !important;
    font-size: 15px !important;
  }
  .support-card input,
  .support-card select {
    padding: 3px 8px !important;
    margin-bottom: 1px !important;
    font-size: 15px !important;
  }
  .support-card textarea {
    height: 40px !important;
    margin-bottom: 1px !important;
    font-size: 15px !important;
  }
  .support-card button,
  .support-card input[type="submit"] {
    margin-top: 4px !important;
    padding: 5px 15px !important;
    font-size: 15px !important;
  }

  #panel.admin-card {
    max-height: calc(100vh - 220px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
}
}
/* ── Dado 3D giratorio (espera mientras otro elige temática en Trivial) ── */
/* ===========================================================================
   DADO 3D — POSICIONAMIENTO (leer antes de tocar):
   El cubo 3D NO se centra con flex+justify-content (los transform 3D rompen
   el flex y el cubo se va a la izquierda). TAMPOCO baja con padding-top ni
   min-height (el contenedor lo recorta). LO QUE SÍ FUNCIONA:
     - CENTRAR: .dice-wrap en display:block + text-align:center, y la escena
       en display:inline-block (se centra igual que el texto del título).
     - BAJAR/SUBIR: margin-top en .dice-scene (NO en .dice-wrap). Subir el px
       lo baja, bajarlo lo sube. Ahora mismo: 70px.
   =========================================================================== */
.dice-wrap {
  display: block;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.dice-wrap .dice-scene { display: inline-block; margin-top: 70px; }
.dice-cube {
  width: 56px; height: 56px;
  position: relative;
  transform-style: preserve-3d;
  animation: dice-spin 4s infinite linear;
}
.dice-face {
  position: absolute;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--azul) 0%, #6b5bd1 100%);
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 10px;
}
.dice-front  { transform: rotateY(0deg)   translateZ(28px); }
.dice-back   { transform: rotateY(180deg) translateZ(28px); }
.dice-right  { transform: rotateY(90deg)  translateZ(28px); }
.dice-left   { transform: rotateY(-90deg) translateZ(28px); }
.dice-top    { transform: rotateX(90deg)  translateZ(28px); }
.dice-bottom { transform: rotateX(-90deg) translateZ(28px); }
@keyframes dice-spin {
  0%   { transform: rotateX(0deg)   rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* ── Reloj de arena animado (espera al unirse a mitad de partida) ── */
.hourglass-wrap {
  display: flex; justify-content: center; margin: 18px auto 4px;
  align-self: center; width: 100%;
}
.hourglass {
  font-size: 2.8rem;
  animation: hourglass-flip 2.2s infinite ease-in-out;
  transform-origin: center;
}
@keyframes hourglass-flip {
  0%, 40%   { transform: rotate(0deg); }
  50%, 90%  { transform: rotate(180deg); }
  100%      { transform: rotate(360deg); }
}
/* Metadatos del ticket de soporte (recibido / hora incidente) en azul, no gris */
.support-ticket-item .meta { color: var(--azul); }


/* ===========================================================================
   BANNERS DE PUBLICIDAD (room.html) — leaderboard arriba + footer abajo.
   Responsive: 728x90 en PC, se encogen en movil. Placeholder gris discreto
   hasta que se pegue el codigo real de AdSense dentro de cada .promo-space.
   =========================================================================== */
.promo-space {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 728px;
  margin: 4px auto;
  min-height: 90px;
  background: rgba(255,255,255,.10);
  border: 1px dashed rgba(255,255,255,.45);
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
}
.promo-placeholder {
  color: rgba(255,255,255,.65);
  font-size: .8rem; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase;
}
.promo-top { margin-top: 4px; }
.promo-bottom { margin-bottom: 4px; }

/* En movil/tablet los banners se encogen a tamano movil tipico */
@media (max-width: 900px) {
  .promo-space { max-width: 468px; min-height: 60px; }
}
@media (max-width: 600px) {
  .promo-space { max-width: 320px; min-height: 50px; }
}

/* Fila superior: logo a la izquierda + banner publicitario */
.top-ad-row { display: flex; align-items: center; gap: 14px; padding: 2px 14px 0; }
.room-logo { flex: 0 0 auto; display: block; }
.room-logo img { height: 72px; display: block; }
.top-ad-row .promo-space { flex: 0 1 728px; margin: 4px 0 4px 28px; }

/* Boton blanco "Volver al inicio" */
.btn-back-home {
  background: #fff; color: var(--azul-osc); text-decoration: none;
  font-weight: 800; padding: 4px 12px; border-radius: 10px; font-size: .95rem;
  box-shadow: var(--sombra); flex-shrink: 0;
}
.btn-back-home:hover { background: #eef6ff; }

/* Paneles laterales (jugadores y chat) mas altos que el central: el grid
   crece 72px hacia abajo y el central se limita para quedarse como estaba. */
@media (min-width: 901px) {
}

/* ###########################################################################
   LAYOUT DE LA SALA CON BANNERS — LEER ANTES DE TOCAR
   ###########################################################################
   Piezas que interactuan (si tocas una sin mirar el resto, se descuadra):

   1) .room-grid  ->  height: calc(100vh - 300px)
      Los 300px reservan: fila logo+banner-top + barra historial + banner-bottom.
      Subir el numero = los 3 paneles mas cortos. Bajarlo = mas largos.

   2) Banner inferior (.promo-bottom): va centrado (max 728px), NO se mueve al
      alargar los laterales, porque estos crecen por los FLANCOS, no por encima.

   3) Paneles laterales (jugadores y chat) -> height: calc(100% + 95px)
      El "+95px" es lo que SOBRESALEN por debajo del grid, flanqueando el banner
      inferior por los lados (efecto buscado). Mas px = bajan mas (ojo con salir
      de la ventana). Menos px = mas aire con el suelo.

   4) El panel CENTRAL (.stage) NO lleva regla de altura extra: se queda al ras
      del banner inferior. Si le pones height, se descuadra respecto al banner.

   COMO NO ROMPERLO:
   - Para dar/quitar aire abajo a los laterales: SOLO el "+95px" de la regla 3.
   - Para subir/bajar los 3 paneles a la vez: SOLO el "300px" de la regla 1.
   - No metas height al central (regla 4).
   - Nombres de clase: promo-space/promo-top/promo-bottom (NO "ad-*", que los
     bloqueadores de anuncios ocultan por el nombre).
   - Tras cualquier cambio, subir ?v= de styles.css en room.html.
   ########################################################################### */
/* Paneles laterales (jugadores y chat) sobresalen por debajo, flanqueando el
   banner inferior por los lados; el central termina al ras del banner. */
@media (min-width: 901px) {
  .room-grid > .panel:not(.stage) { height: calc(100% + 95px); }
}

/* ===========================================================================
   BANNERS LATERALES DEL INDEX (skyscraper 160x600, solo desktop ancho).
   position:fixed -> NO tocan el flujo del contenido central (tarjeta/switch/
   aviso quedan intactos). El derecho arranca mas abajo para no pisar el
   corner-panel (switch idioma + aviso). Se OCULTAN por debajo de 1200px:
   en tablet/movil no hay hueco lateral, asi que no se muestran.
   Cambiar de sitio: top/left/right de .side-promo-*. Ocultar antes/despues:
   el ancho del @media. Nombre "promo" (no "ad") para esquivar bloqueadores.
   =========================================================================== */
.side-promo {
  position: fixed; top: 240px; width: 160px; height: 600px; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.10);
  border: 1px dashed rgba(255,255,255,.45);
  border-radius: 10px; box-sizing: border-box;
}
.side-promo-left  { left: 24px; }
.side-promo-right { right: 24px; }
.side-promo .promo-placeholder {
  writing-mode: vertical-rl; transform: rotate(180deg);
  color: rgba(255,255,255,.65); font-size: .8rem; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
}
@media (max-width: 1200px) { .side-promo { display: none; } }

/* ============================================================
 * EL HOMBRE LOBO — portada (integración 2025-07-05)
 * 3 juegos al mismo nivel en escritorio (lobo en el centro).
 * PROTECCIÓN: no tocar .games genérico ni los banners; estas
 * reglas solo afectan a .landing-games / .game-block--lobo.
 * ============================================================ */
.landing-games { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 620px) {
  /* En móvil se mantienen los 2 juegos veteranos arriba tal cual
   * (2 columnas) y el lobo pasa DEBAJO ocupando el ancho, centrado.
   * Así el layout móvil existente no se toca. */
  .landing-card .games { grid-template-columns: 1fr 1fr; }
  .landing-card .game-block--lobo {
    order: 3;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .landing-card .game-block--lobo .pic { height: 84px; }
  .landing-card .game-block--lobo .pic img { max-height: 84px; }
}

/* Portada más compacta verticalmente: con 3 juegos el pie (aviso IA/Reglamento
 * UE) quedaba semienterrado. Se sube todo un poco hacia la mascota/título.
 * SOLO afecta a la portada (clases de landing); la sala no cambia. */
.brand { margin-top: -14px; }
.brand img { width: 118px; height: 118px; }
.landing-seo { margin: 6px auto 4px; font-size: .94rem; }
.landing-card { margin-bottom: 4px; }
.landing-card .games { margin-top: 2px; }
.landing-games .pic { height: 118px; }
.landing-games .pic img { max-height: 118px; }
.site-footer { margin-top: 4px; }

/* NOTA: el CSS de la sala de EL HOMBRE LOBO vive embebido en lobo-room.js
 * (una sola fuente de verdad, inmune a caches). Aqui solo queda la portada. */