/* ════════════════════════════════════════════════════════════════════
   Pupito — salas y cola (public/js/rooms.js, docs/ROOMS.md): «Salas» en la barra superior con su
   insignia, el aviso flotante de todas las páginas («Buscando partida…», «Tu sala…»), el cartel
   «¡Partida encontrada!», la página #/salas (lista en vivo + panel «Buscar partida») y los toques
   del lobby y de la sala en espera. Base común y, debajo, cada tema bajo
   :root[data-style='brutal'] / :root[data-style='retro'] (claro y oscuro). Se carga el último.
   ════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── Barra superior ───────────────────────────── */

.nav a[data-nav='salas'] {
  position: relative;
}

.nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  background: var(--green);
  color: #0c2a1f;
}

.nav-badge[hidden] {
  display: none;
}

/* Con «Salas» la barra no cabe entre 1381 y 1480 px con todos los textos: ahí «Salas» queda como
   icono (con su insignia) y la píldora «N en línea» sólo con el punto. */
@media (min-width: 1381px) and (max-width: 1480px) {
  .nav a[data-nav='salas'] .nav-ico {
    display: inline-flex;
  }

  .nav a[data-nav='salas'] .nav-label {
    display: none;
  }

  .topbar .online-pill .pill-text {
    display: none;
  }
}

/* Con la navegación reducida a iconos, la insignia va en la esquina del icono. */
@media (max-width: 1480px) {
  .nav a[data-nav='salas'] .nav-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    font-size: 0.66rem;
  }
}

/* Sin sitio para la navegación (≤ 860 px) quedan Salas, Ranking y Tienda como iconos. */
@media (max-width: 860px) {
  .topbar .nav a[data-nav='salas'] {
    display: inline-flex !important;
    padding-inline: 9px !important;
  }

  .topbar .nav a[data-nav='salas'] .nav-ico {
    display: inline-flex;
  }

  .topbar .nav a[data-nav='salas'] .nav-label {
    display: none;
  }
}

@media (max-width: 640px) {
  .topbar .nav a[data-nav='salas'] {
    height: 40px;
    padding: 0 9px !important;
  }
}

@media (max-width: 400px) {
  .topbar .nav a[data-nav='salas'] {
    height: 36px;
    padding: 0 6px !important;
  }
}

@media (max-width: 360px) {
  .topbar .nav a[data-nav='salas'] {
    padding: 0 5px !important;
  }
}

/* ───────────────────────────── Aviso flotante ───────────────────────────── */

/* Franja bajo la barra superior, en su sitio: al bajar se queda arriba con la página (no flota), así
   que nunca tapa la página ni los controles de un juego. Mientras no se ve, la resume el icono de la
   barra superior (.dock-mini). Sólo los avisos reciben clics. */
.dock {
  position: relative;
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px 4px;
  pointer-events: none;
}

.dock[hidden] {
  display: none;
}

.dock-chip {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: min(100%, 560px);
  min-height: 48px;
  padding: 4px 6px 4px 4px;
  border-radius: 14px;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}

.dock-chip.is-new {
  animation: dock-in 0.28s var(--ease) both;
}

@keyframes dock-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.dock-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  padding: 2px 6px 2px 2px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dock-ico {
  flex: none;
  display: grid;
  place-items: center;
}

.dock-ico .mini-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
}

.dock-ico .mini-icon svg {
  width: 24px;
  height: 24px;
}

.dock-radar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}

.dock-radar svg {
  width: 22px;
  height: 22px;
  animation: dock-spin 2.4s linear infinite;
}

.dock-radar.big {
  width: 48px;
  height: 48px;
}

.dock-radar.big svg {
  width: 30px;
  height: 30px;
}

@keyframes dock-spin {
  to {
    transform: rotate(360deg);
  }
}

.dock-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.dock-text b {
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dock-sub {
  font-size: 0.8rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dock-time {
  flex: none;
  margin-left: auto;
  padding-left: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.dock-chip .btn {
  flex: none;
}

.dock-fold {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-3);
  cursor: pointer;
}

.dock-fold:hover {
  color: var(--text);
  background: var(--surface-2);
}

.dock-fold svg {
  width: 18px;
  height: 18px;
}

/* Plegado: una pastilla pequeña (icono y reloj) a la derecha; al pulsarla se despliega. */
.dock:has(.dock-chip.is-min) {
  justify-content: flex-end;
  padding-top: 6px;
}

.dock-chip.is-min {
  min-height: 0;
  padding: 3px;
  border-radius: 999px;
}

.dock-chip.is-min .dock-main {
  gap: 6px;
  padding: 0 8px 0 0;
}

.dock-chip.is-min .dock-text {
  display: none;
}

.dock-chip.is-min .dock-ico .mini-icon,
.dock-chip.is-min .dock-radar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

.dock-chip.is-min .dock-ico .mini-icon svg,
.dock-chip.is-min .dock-radar svg {
  width: 18px;
  height: 18px;
}

.dock-chip.is-min .dock-time {
  font-size: 0.82rem;
  padding: 0;
}

.dock-chip.is-min.is-room:not(:has(.dock-time)) .dock-main {
  padding: 0;
}

/* ¡Te toca!: el aviso late para que se vea desde cualquier página. */
.dock-chip.is-turn {
  border-color: var(--green);
  animation: dock-pulse 1.6s ease-in-out 0.3s infinite;
}

/* Búsqueda en pausa (no respondiste a una partida encontrada): el radar se para. */
.dock-chip.is-paused .dock-radar svg {
  animation: none;
  opacity: 0.55;
}

/* Icono de la barra superior: el aviso quedó arriba, fuera de la vista. Lleva a lo mismo que el aviso
   (tu sala o «Salas»); con dos avisos, un «2». */
.dock-mini {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-solid);
  color: inherit;
  cursor: pointer;
  animation: dock-mini-in 0.22s var(--ease) both;
}

.dock-mini[hidden] {
  display: none;
}

@keyframes dock-mini-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

.dock-mini .mini-icon,
.dock-mini .dock-radar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
}

.dock-mini .dock-radar {
  color: var(--accent);
}

.dock-mini .mini-icon svg,
.dock-mini .dock-radar svg {
  width: 18px;
  height: 18px;
}

.dock-mini.is-paused .dock-radar svg {
  animation: none;
}

.dock-mini-n {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
}

.dock-mini.is-turn {
  border-color: var(--green);
  animation: dock-mini-in 0.22s var(--ease) both, dock-pulse 1.6s ease-in-out 0.3s infinite;
}

@media (max-width: 640px) {
  .dock-mini {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .dock-mini .mini-icon,
  .dock-mini .dock-radar {
    width: 26px;
    height: 26px;
  }
}

/* Teléfonos: la barra no tiene sitio para un icono más (con la campana de la cuenta, menos aún).
   Mientras se ve el del aviso, el de Ranking se aparta; si no, los iconos de la barra se aplastan. */
@media (max-width: 420px) {
  .topbar:has(.dock-mini:not([hidden])) .nav a[data-nav='rank'] {
    display: none !important;
  }
}

@media (max-width: 359px) {
  .dock-mini {
    width: 32px;
    height: 32px;
  }

  .dock-mini .mini-icon,
  .dock-mini .dock-radar {
    width: 24px;
    height: 24px;
  }
}

@keyframes dock-pulse {
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 45%, transparent), var(--shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dock-radar svg,
  .dock-chip.is-turn,
  .dock-mini,
  .dock-mini.is-turn {
    animation: none;
  }
}

@media (max-width: 640px) {
  .dock {
    padding: 6px 10px 2px;
  }

  .dock-chip {
    width: 100%;
    max-width: none;
    min-height: 44px;
  }

  .dock-chip.is-min {
    width: auto;
  }

  .dock-ico .mini-icon,
  .dock-radar {
    width: 32px;
    height: 32px;
  }

  .dock-text b {
    font-size: 0.86rem;
  }

  .dock-sub {
    font-size: 0.76rem;
  }

  .dock-chip .btn-sm {
    min-height: 32px;
    padding: 0 10px;
    font-size: 0.8rem;
  }

  .dock-chip .btn-icon.btn-sm {
    width: 32px;
    padding: 0;
  }

  .dock-chip {
    gap: 4px;
  }

  .dock-main {
    gap: 8px;
  }

  .dock-fold {
    width: 26px;
  }
}

@media (max-width: 480px) {
  .dock-cancel .dock-btn-label {
    display: none;
  }

  .dock-chip .dock-cancel {
    width: 32px;
    padding: 0;
    gap: 0;
  }
}

/* ───────────────────────────── «¡Partida encontrada!» ───────────────────────────── */

.mf-backdrop {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: rgba(5, 6, 18, 0.55);
  animation: mf-fade 0.2s ease both;
}

.mf-backdrop.closing {
  animation: mf-fade 0.18s ease reverse both;
}

@keyframes mf-fade {
  from {
    opacity: 0;
  }
}

.mf-card {
  position: relative;
  width: min(100%, 400px);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 22px 20px;
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: mf-pop 0.42s var(--ease-bounce) both;
}

@keyframes mf-pop {
  from {
    opacity: 0;
    transform: scale(0.86) translateY(18px);
  }
}

.mf-burst {
  position: absolute;
  inset: -40% -20% auto;
  height: 180px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 35%, transparent), transparent);
  pointer-events: none;
}

.mf-icon {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #fff;
  animation: mf-bounce 1.2s ease-in-out infinite;
}

.mf-icon svg {
  width: 48px;
  height: 48px;
}

@keyframes mf-bounce {
  50% {
    transform: translateY(-4px) rotate(-3deg);
  }
}

.mf-card h2 {
  position: relative;
  margin: 2px 0 0;
  font-size: 1.5rem;
}

.mf-game {
  margin: 0;
  color: var(--text-2);
  font-weight: 600;
}

.mf-players {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 8px;
}

.mf-player {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.85rem;
  font-weight: 600;
  max-width: 180px;
}

.mf-player > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mf-seats {
  font-size: 0.8rem;
  color: var(--text-3);
  align-self: center;
}

.mf-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.mf-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transition: transform 0.2s linear;
}

.mf-count {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-2);
  min-height: 1.4em;
  font-variant-numeric: tabular-nums;
}

.mf-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.mf-actions .btn {
  flex: 1;
  min-height: 48px;
}

.mf-actions .btn-primary {
  flex: 1.6;
  font-size: 1.05rem;
}

.mf-card.is-accepted .mf-bar span {
  animation: mf-wait 1.2s ease-in-out infinite;
}

@keyframes mf-wait {
  50% {
    opacity: 0.45;
  }
}

/* En el móvil, como una hoja abajo (a mano del pulgar). */
@media (max-width: 640px) {
  .mf-backdrop {
    place-items: end center;
  }

  .mf-card {
    width: 100%;
    padding: 22px 18px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-icon,
  .mf-card.is-accepted .mf-bar span {
    animation: none;
  }
}

/* ───────────────────────────── Página «Salas» ───────────────────────────── */

.salas {
  padding-top: 26px;
  padding-bottom: 56px;
}

.salas-head {
  align-items: flex-end;
}

.salas-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.salas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
}

/* El panel acompaña al bajar; si es más alto que la pantalla, se desplaza por dentro (el botón
   «Buscar partida» siempre se alcanza). El relleno deja ver su sombra dura. */
.salas-side {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  max-height: calc(100dvh - var(--topbar-h) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 0 10px 10px 0;
  margin-right: -10px;
}

.salas-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.salas-game {
  width: auto;
  min-width: 180px;
  max-width: 100%;
  min-height: 42px;
}

.salas-count {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--text-3);
  white-space: nowrap;
}

.salas-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.sala-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  animation: card-in 0.35s var(--ease) both;
}

.sala-card.is-mine {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.sala-art {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--g1), var(--g2));
}

.sala-art > svg {
  width: 46px;
  height: 46px;
}

.sala-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sala-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sala-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sala-name {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 1rem;
  line-height: 1.2;
}

.sala-mine {
  flex: none;
}

.sala-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sala-opts .chip {
  padding: 1px 8px;
  font-size: 0.72rem;
}

.sala-seats {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.sala-seat {
  display: inline-grid;
  place-items: center;
}

.sala-seat .avatar {
  width: 26px;
  height: 26px;
  font-size: 0.9rem;
}

.sala-seat.off {
  opacity: 0.45;
}

.sala-seat.free {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px dashed var(--border-strong);
}

.sala-n {
  margin-left: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.sala-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--text-3);
}

.sala-host {
  display: flex;
  min-width: 0;
  overflow: visible;
  color: var(--text-2);
}

.sala-host .avatar {
  width: 22px;
  height: 22px;
  font-size: 0.8rem;
}

a.sala-host:hover .cx-n {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sala-age {
  flex: none;
  white-space: nowrap;
}

/* «hace 3 min» / «3 min»: en el móvil, la corta (deja sitio al nombre de quien la creó). */
.sala-age .short {
  display: none;
}

@media (max-width: 640px) {
  .sala-age .long {
    display: none;
  }

  .sala-age .short {
    display: inline;
  }
}

.sala-age::before {
  content: '·';
  margin-right: 8px;
}

/* Con la bandera de quien la creó (§10) el nombre tiene menos sitio: siempre la edad corta. */
.sala-meta:has(.pflag) .sala-age .long {
  display: none;
}

.sala-meta:has(.pflag) .sala-age .short {
  display: inline;
}

.sala-act {
  align-self: center;
}

.salas-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 34px 20px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
}

.salas-empty p {
  margin: 0;
  max-width: 420px;
}

.salas-empty .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.salas-empty-ico {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--text-2);
}

.salas-empty-ico svg {
  width: 30px;
  height: 30px;
}

@media (max-width: 1100px) {
  .salas-layout {
    grid-template-columns: minmax(0, 1fr) 330px;
  }
}

@media (max-width: 900px) {
  .salas-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .salas-side {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    margin: 0;
  }
}

@media (max-width: 640px) {
  .salas {
    padding-top: 18px;
  }


  .salas-filters .seg {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .salas-filters .seg button {
    padding-inline: 4px;
  }

  .salas-game {
    flex: 1;
    min-width: 0;
  }

  .salas-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .sala-card {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 8px 10px 8px 8px;
  }

  .sala-art {
    width: 56px;
    height: 56px;
    border-radius: 10px;
  }

  .sala-art > svg {
    width: 34px;
    height: 34px;
  }
}

/* ───────────────────────────── Panel «Buscar partida» ───────────────────────────── */

.q-panel .panel-head svg {
  width: 18px;
  height: 18px;
}

.q-body {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
}

.q-intro,
.q-hint {
  margin: 0;
  font-size: 0.88rem;
}

.q-hint {
  font-size: 0.8rem;
}

.q-any {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.q-any svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--accent);
}

.q-any span {
  display: grid;
  line-height: 1.25;
}

.q-any small {
  color: var(--text-3);
  font-size: 0.78rem;
}

.q-any.on {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.q-pick {
  border-radius: 12px;
  border: 1px solid var(--border);
}

.q-pick summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
}

.q-pick summary::-webkit-details-marker {
  display: none;
}

.q-pick summary svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}

.q-pick[open] summary svg {
  transform: rotate(180deg);
}

.q-groups {
  display: grid;
  gap: 10px;
  padding: 0 10px 12px;
}

.q-group-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.q-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.q-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  max-width: 100%;
  padding: 3px 10px 3px 3px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.q-chip.on {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.q-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.q-tile {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
}

.q-tile svg {
  width: 18px;
  height: 18px;
}

.q-tile.sm {
  width: 20px;
  height: 20px;
}

.q-tile.sm svg {
  width: 14px;
  height: 14px;
}

.q-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  background: var(--green);
  color: #0c2a1f;
}

.q-live {
  display: flex;
  align-items: center;
  gap: 12px;
}

.q-live > div {
  flex: 1;
  min-width: 0;
}

.q-live p {
  margin: 2px 0 0;
  font-size: 0.82rem;
}

.q-time {
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.q-picked {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.q-picked .chip {
  padding: 2px 10px 2px 2px;
}

/* Lobby: estado de la búsqueda bajo «Buscar rival». */
.quick-state {
  min-height: 1.3em;
  margin: 0;
  font-size: 0.82rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Sala de la cola en espera: cuenta atrás para empezar sola. */
.overlay-card .auto-start {
  flex-wrap: wrap;
  row-gap: 2px;
  justify-content: center;
  max-width: 100%;
  margin: 4px auto 0;
  font-size: 0.82rem;
  white-space: normal;
  text-align: center;
}

.overlay-card .auto-start b {
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════ Neo-brutalista ════════════════════════════ */

:root[data-style='brutal'] .salas-live {
  border: 2px solid var(--px-line);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
}

:root[data-style='brutal'] .nav-badge {
  border: 2px solid var(--px-line);
  border-radius: 6px;
  background: var(--green);
  color: #111;
  font-family: var(--font-display);
  font-weight: 400;
}

:root[data-style='brutal'] .dock-chip {
  border: 3px solid var(--px-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--px-drop);
}

:root[data-style='brutal'] .dock-chip.is-min {
  border-radius: 999px;
}

:root[data-style='brutal'] .dock-chip.is-queue {
  background: var(--yellow);
  color: #111;
}

:root[data-style='brutal'] .dock-chip.is-queue .dock-sub {
  color: #333;
}

:root[data-style='brutal'] .dock-chip.is-queue .dock-fold {
  color: #333;
}

:root[data-style='brutal'] .dock-chip.is-queue .btn-ghost {
  --btn-fg: #111;
}

:root[data-style='brutal'] .dock-radar {
  border: 2px solid #111;
  border-radius: 8px;
  background: #fff;
  color: #111;
}

:root[data-style='brutal'] .dock-ico .mini-icon {
  border: 2px solid var(--px-line);
  border-radius: 8px;
}

:root[data-style='brutal'] .dock-chip.is-min .dock-radar,
:root[data-style='brutal'] .dock-chip.is-min .dock-ico .mini-icon {
  border-radius: 999px;
}

:root[data-style='brutal'] .dock-text b,
:root[data-style='brutal'] .dock-time {
  font-family: var(--font-display);
  font-weight: 400;
}

:root[data-style='brutal'] .dock-chip.is-turn {
  background: var(--green);
  color: #111;
}

:root[data-style='brutal'] .dock-chip.is-turn .dock-sub,
:root[data-style='brutal'] .dock-chip.is-win .dock-sub {
  color: #333;
}

:root[data-style='brutal'] .dock-chip.is-win {
  background: var(--yellow);
  color: #111;
}

:root[data-style='brutal'] .dock-chip.is-turn .dock-fold,
:root[data-style='brutal'] .dock-chip.is-win .dock-fold {
  color: #333;
}

@keyframes dock-pulse-brutal {
  50% {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--px-drop);
  }
}

:root[data-style='brutal'] .dock-chip.is-turn {
  animation: dock-pulse-brutal 1.2s ease-in-out 0.3s infinite;
}

:root[data-style='brutal'] .dock-mini {
  border: 3px solid var(--px-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 3px 3px 0 var(--px-drop);
}

:root[data-style='brutal'] .dock-mini.is-queue {
  background: var(--yellow);
}

:root[data-style='brutal'] .dock-mini .dock-radar {
  border: 2px solid #111;
  border-radius: 6px;
  background: #fff;
  color: #111;
}

:root[data-style='brutal'] .dock-mini .mini-icon {
  border: 2px solid var(--px-line);
  border-radius: 6px;
}

:root[data-style='brutal'] .dock-mini.is-turn {
  background: var(--green);
  animation: dock-mini-in 0.22s var(--ease) both, dock-pulse-brutal 1.2s ease-in-out 0.3s infinite;
}

:root[data-style='brutal'] .dock-mini.is-win {
  background: var(--yellow);
}

:root[data-style='brutal'] .dock-mini-n {
  border: 2px solid #111;
  background: var(--pink, var(--accent));
  color: #111;
  font-family: var(--font-display);
  font-weight: 400;
}

:root[data-style='brutal'] .mf-backdrop {
  background: rgba(17, 17, 17, 0.45);
}

:root[data-style='brutal'] .mf-card {
  border: 3px solid var(--px-line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--px-drop);
}

:root[data-style='brutal'] .mf-burst {
  inset: 0 0 auto;
  height: 64px;
  background: var(--yellow);
  border-bottom: 3px solid var(--px-line);
}

:root[data-style='brutal'] .mf-icon {
  border: 3px solid var(--px-line);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--px-drop);
}

:root[data-style='brutal'] .mf-card h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

:root[data-style='brutal'] .mf-player {
  border: 2px solid var(--px-line);
}

:root[data-style='brutal'] .mf-bar {
  height: 14px;
  border: 3px solid var(--px-line);
  border-radius: 6px;
  background: var(--surface-2);
}

:root[data-style='brutal'] .mf-bar span {
  background: var(--pink);
}

:root[data-style='brutal'] .sala-card {
  border: 3px solid var(--px-line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--px-drop);
}

:root[data-style='brutal'] .sala-card.is-mine {
  background: var(--surface-2);
  box-shadow: 4px 4px 0 var(--pink);
}

:root[data-style='brutal'][data-theme='dark'] .sala-card.is-mine {
  background: var(--surface-3);
}

:root[data-style='brutal'] .sala-art {
  border: 3px solid var(--px-line);
  border-radius: 10px;
}

:root[data-style='brutal'] .sala-name {
  font-family: var(--font-display);
  font-weight: 400;
}

:root[data-style='brutal'] .sala-seat.free {
  border: 2px dashed var(--px-line);
  opacity: 0.6;
}

:root[data-style='brutal'] .salas-empty {
  border: 3px dashed var(--px-line);
  background: var(--surface);
}

:root[data-style='brutal'] .salas-empty-ico {
  border: 3px solid var(--px-line);
  border-radius: 12px;
  background: var(--yellow);
  color: #111;
}

:root[data-style='brutal'] .q-any,
:root[data-style='brutal'] .q-pick {
  border: 3px solid var(--px-line);
  border-radius: var(--radius-sm);
}

:root[data-style='brutal'] .q-any.on {
  background: var(--yellow);
  color: #111;
  box-shadow: 3px 3px 0 var(--px-drop);
}

:root[data-style='brutal'] .q-any.on small,
:root[data-style='brutal'] .q-any.on svg {
  color: #333;
}

:root[data-style='brutal'] .q-chip {
  border: 2px solid var(--px-line);
  border-radius: 8px;
}

:root[data-style='brutal'] .q-chip.on {
  background: var(--pink);
  color: #111;
  box-shadow: 2px 2px 0 var(--px-drop);
}

:root[data-style='brutal'] .q-tile {
  border: 2px solid var(--px-line);
  border-radius: 6px;
}

:root[data-style='brutal'] .q-count {
  border: 2px solid var(--px-line);
  border-radius: 6px;
  color: #111;
}

:root[data-style='brutal'] .q-group-label {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ════════════════════════════ Píxel retro ════════════════════════════ */

:root[data-style='retro'] .salas-live {
  border-radius: 0;
  border: 0;
  box-shadow: var(--px-outline);
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
}

:root[data-style='retro'] .nav-badge {
  border-radius: 0;
  font-family: var(--font-display);
  color: #0c2a1f;
  box-shadow: inset 0 -2px 0 #15a36b, 0 0 0 2px var(--px-line);
}

:root[data-style='retro'] .dock-chip,
:root[data-style='retro'] .dock-chip.is-min {
  border-radius: 0;
  border: 4px solid var(--px-line);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--px-drop);
}

:root[data-style='retro'] .dock-chip.is-queue {
  background: var(--surface-2);
}

:root[data-style='retro'] .dock-radar,
:root[data-style='retro'] .dock-ico .mini-icon,
:root[data-style='retro'] .dock-chip.is-min .dock-radar,
:root[data-style='retro'] .dock-chip.is-min .dock-ico .mini-icon {
  border-radius: 0;
  box-shadow: 0 0 0 3px var(--px-line);
}

:root[data-style='retro'] .dock-radar {
  background: var(--green);
  color: #0c2a1f;
}

:root[data-style='retro'] .dock-radar svg {
  animation-timing-function: steps(8);
}

:root[data-style='retro'] .dock-text b {
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-transform: uppercase;
}

:root[data-style='retro'] .dock-time {
  font-family: var(--font-mono);
  font-size: 1.2rem;
}

/* La letra de píxeles es ancha: en el móvil, el título del aviso más pequeño para que quepa entero. */
@media (max-width: 640px) {
  :root[data-style='retro'] .dock-text b {
    font-size: 0.62rem;
  }

  :root[data-style='retro'] .dock-chip .btn-sm {
    padding: 0 8px;
    font-size: 0.62rem;
  }
}

:root[data-style='retro'] .dock-fold {
  border-radius: 0;
}

:root[data-style='retro'] .dock-chip.is-turn {
  border-color: var(--green);
  background: var(--surface-3);
}

@keyframes dock-pulse-retro {
  50% {
    box-shadow: 4px 4px 0 var(--green);
  }
}

:root[data-style='retro'] .dock-chip.is-turn {
  animation: dock-pulse-retro 1s steps(2) 0.3s infinite;
}

:root[data-style='retro'] .mf-backdrop {
  background: rgba(8, 4, 22, 0.75);
}

:root[data-style='retro'] .mf-card {
  border-radius: 0;
  border: 4px solid var(--px-line);
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--px-drop);
  animation-timing-function: steps(5);
}

:root[data-style='retro'] .mf-burst {
  inset: 0 0 auto;
  height: 56px;
  background: repeating-linear-gradient(90deg, var(--surface-3) 0 8px, var(--surface-2) 8px 16px);
  border-bottom: 4px solid var(--px-line);
}

:root[data-style='retro'] .mf-icon {
  border-radius: 0;
  box-shadow: 0 0 0 4px var(--px-line), 6px 6px 0 var(--px-drop);
  animation-timing-function: steps(2);
}

:root[data-style='retro'] .mf-card h2 {
  font-family: var(--font-arcade);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--yellow);
  text-shadow: 3px 3px 0 var(--px-line);
}

:root[data-style='retro'][data-theme='light'] .mf-card h2 {
  color: var(--purple);
  text-shadow: 2px 2px 0 rgba(27, 16, 53, 0.2);
}

:root[data-style='retro'] .mf-player {
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--px-line);
}

:root[data-style='retro'] .mf-bar {
  height: 14px;
  border-radius: 0;
  box-shadow: 0 0 0 3px var(--px-line);
  background: var(--bg-2);
}

:root[data-style='retro'] .mf-bar span {
  background: repeating-linear-gradient(90deg, var(--green) 0 10px, #15a36b 10px 12px);
  transition-timing-function: steps(4);
}

:root[data-style='retro'] .sala-card {
  border-radius: 0;
  border: 4px solid var(--px-line);
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--px-drop);
}

:root[data-style='retro'] .sala-card.is-mine {
  background: var(--surface-2);
  box-shadow: 6px 6px 0 var(--green);
}

:root[data-style='retro'] .sala-art {
  border-radius: 0;
  box-shadow: 0 0 0 3px var(--px-line);
}

:root[data-style='retro'] .sala-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
}

:root[data-style='retro'] .sala-seat.free {
  border-radius: 0;
  border: 3px dashed var(--border-strong);
}

:root[data-style='retro'] .sala-n,
:root[data-style='retro'] .salas-count {
  font-family: var(--font-mono);
  font-size: 1.05rem;
}

:root[data-style='retro'] .salas-empty {
  border-radius: 0;
  border: 4px dashed var(--border-strong);
}

:root[data-style='retro'] .salas-empty-ico {
  border-radius: 0;
  box-shadow: 0 0 0 3px var(--px-line);
}

:root[data-style='retro'] .q-any,
:root[data-style='retro'] .q-pick {
  border-radius: 0;
  border: 3px solid var(--px-line);
}

:root[data-style='retro'] .q-any b,
:root[data-style='retro'] .q-pick summary {
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
}

:root[data-style='retro'] .q-any.on {
  background: var(--accent-soft);
  box-shadow: inset 0 -3px 0 var(--green);
}

:root[data-style='retro'] .q-chip {
  border-radius: 0;
  border: 0;
  box-shadow: 0 0 0 2px var(--px-line);
  margin: 2px;
}

:root[data-style='retro'] .q-chip.on {
  background: var(--green);
  color: #0c2a1f;
}

:root[data-style='retro'] .q-tile,
:root[data-style='retro'] .q-count {
  border-radius: 0;
}

:root[data-style='retro'] .q-count {
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

:root[data-style='retro'] .q-time {
  font-family: var(--font-mono);
  font-size: 1.8rem;
}

:root[data-style='retro'] .q-group-label {
  font-family: var(--font-display);
}