/* Suit Overdrive - estilos. Pensado primero para celular (pantalla vertical). */

:root {
  --fondo: #000;            /* fondo negro */
  --panel: #12151d;
  --azul: #3b78e7;          /* botón Google */
  --azul-boton: #1c86c9;    /* botón principal */
  --azul-borde: #0f5f94;
  --azul-noche: #0d1450;    /* cintas y títulos */
  --cian: #22c0ea;
  --texto: #ffffff;
  --texto-suave: #c6cee2;
  --campo: #d9dee7;
  --campo-texto: #1a1f2b;
  --error: #ff7b7b;
  --oro: #ffd23f;
  --c-ataque: #ff8a7a;
  --c-defensa: #7ab6ff;
  --c-azul-claro: #b9c4ff;
  --c-peligro: #ff9aa6;
}

/* ---------- tema claro (después de iniciar sesión) ----------
   Todas las pantallas tienen fondo negro y texto blanco. Los paneles que son oscuros por diseño
   (tarjetas, HUD del duelo, chat...) conservan su aspecto: aquí se les devuelve el texto claro.
   Va al principio del archivo y con :where() para que cualquier regla propia de un componente gane. */
body.tema-claro {
  --texto: #ffffff;
  --texto-suave: #d0d7e8;
  --error: #ff8f98;
  --oro: #ffd23f;
  --c-ataque: #ff8a7a;
  --c-defensa: #7ab6ff;
  --c-azul-claro: #b9c4ff;
  --c-peligro: #ff9aa6;
  background-color: #000;
  background-image: none;
}
.tema-claro :where(body,
  .aspecto-marco,
  .aspecto input:checked + .aspecto-marco,
  .avatar-reserva,
  .ficha,
  .btn-menu,
  .cinta,
  .btn-cinta,
  .btn-cinta:hover,
  .aviso-ok,
  .panel-crear,
  .lista-salas,
  .fila-sala,
  .fila-sala:hover,
  .ranking td,
  .equipo-titulo,
  .casilla,
  .casilla-yo,
  .arma-marco,
  .arma input:checked + .arma-marco,
  .hud,
  .dorso,
  .barra,
  .barra-energia .barra-relleno,
  .estado,
  .estado-escudo,
  .estado-hielo,
  .eventos,
  .carta-defensa,
  .carta-magica,
  .carta-critico,
  .carta-nombre,
  .detalle-carta,
  .resultado,
  .chat,
  .vestidor,
  .vista-vestuario:has(.ajuste:not([hidden])) .vestidor,
  input[type="file"],
  .pieza,
  .pieza-mini,
  .ajuste,
  .btn-castillo,
  .usuario,
  .insignia,
  .insignia-moderador,
  .historial-fila,
  .mazo-ranura,
  .mazo-ranura-elegida,
  .mazo-carta,
  .mazo-mini,
  .jefe-tarjeta,
  .jefe-tarjeta-elegida,
  .casilla-jefe,
  .banners-marco,
  .banner-ranura,
  .banner-ranura img,
  .btn-tile,
  .pestana.activa,
  input[type="file"]) {
  --texto: #ffffff;
  --texto-suave: #c6cee2;
  --error: #ff7b7b;
  --oro: #ffd23f;
  --c-ataque: #ff8a7a;
  --c-defensa: #7ab6ff;
  --c-azul-claro: #b9c4ff;
  --c-peligro: #ff9aa6;
  color: var(--texto);
}
.tema-claro .acciones { background: linear-gradient(180deg, rgba(0, 0, 0, 0.92), #000 30%); }
.tema-claro .aviso-ok { background: #e2f6ec; color: #0b3a28; }
.tema-claro .nota-alerta { color: #8a4300; }

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background-color: var(--fondo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .55 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--texto);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

.pantalla {
  width: 100%;
  max-width: 440px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom));
}

.vista {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.cargando {
  margin: 40vh 0 0;
  text-align: center;
  color: var(--texto-suave);
}

/* ---------- logo ---------- */

.logo {
  display: flex;
  justify-content: center;
  margin: 8px 0 18px;
}

.logo img,
.logo svg {
  display: block;
  width: min(62%, 230px);
  height: auto;
}

.logo-chico img,
.logo-chico svg { width: min(38%, 140px); }

.logo-hex { fill: #0e1a3a; stroke: #2f8de0; stroke-width: 10; stroke-linejoin: round; }
.logo-t1 { fill: #fff; font: italic 900 58px "Arial Black", Impact, sans-serif; letter-spacing: -1px; }
.logo-t2 { fill: #fff; font: italic 800 25px "Arial Black", Impact, sans-serif; letter-spacing: 1px; }

/* ---------- textos ---------- */

.titulo {
  margin: 0 0 4px;
  text-align: center;
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.separador {
  margin: 6px 0 0;
  text-align: center;
  font-size: 1.1rem;
}

.nota {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-suave);
}

.etiqueta {
  display: block;
  font-weight: 700;
}

.mensaje {
  min-height: 1.4em;
  margin: 0;
  text-align: center;
  font-weight: 600;
  color: var(--error);
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- formularios ---------- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
select {
  width: 100%;
  padding: 12px 12px;
  border: 2px solid #5b6a86;
  border-radius: 4px;
  background: var(--campo);
  color: var(--campo-texto);
  font: inherit;
}

input::placeholder { color: #6b7488; }

/* ---------- botones ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: 2px solid transparent;
  border-radius: 6px;
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.15s ease;
}

.btn:hover:not(:disabled) { filter: brightness(1.1); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-google { background: var(--azul); border-color: #2d62c0; }

.g-icono {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #3b78e7;
  font-weight: 900;
}

.btn-principal { background: var(--azul-boton); border-color: var(--azul-borde); }

.enlace {
  align-self: center;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: 1.1rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.enlace:hover { color: var(--cian); }

/* ---------- elegir aspecto ---------- */

.aspectos { margin: 0; padding: 0; border: 0; }

.aspectos legend {
  margin-bottom: 8px;
  padding: 0;
  font-weight: 700;
}

.aspectos-rejilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.aspecto { position: relative; display: block; cursor: pointer; }

.aspecto input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.aspecto-marco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 2px solid #2a3040;
  border-radius: 6px;
  background: var(--panel);
}

.aspecto input:checked + .aspecto-marco {
  border-color: var(--cian);
  background: #0f2233;
}

.aspecto input:focus-visible + .aspecto-marco {
  outline: 3px solid var(--cian);
  outline-offset: 2px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  overflow: hidden;
}

.avatar img { width: 100%; height: 100%; object-fit: contain; }

.avatar-reserva {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #1b3a6b, #0d1450);
  border: 2px solid #2f8de0;
  font-size: 1.8rem;
  font-weight: 800;
  font-style: italic;
}

/* ---------- menú principal ---------- */

.ficha {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-left: 6px solid var(--cian);
  background: var(--azul-noche);
}

.ficha .avatar { width: 64px; height: 64px; }
.ficha-nombre { margin: 0; font-size: 1.25rem; font-weight: 800; font-style: italic; }
.ficha-nivel { margin: 0; color: var(--texto-suave); }

.menu { display: flex; flex-direction: column; gap: 12px; margin: 6px 0; }

.btn-menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 20px;
  border: 0;
  background: linear-gradient(180deg, #3d6bf2, #2549c9);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
  color: #fff;
  font: inherit;
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 800;
  text-align: left;
}

.btn-menu small {
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
  color: #cfd9ff;
}

.btn-menu:disabled { opacity: 0.7; cursor: not-allowed; }

/* ---------- arena de duelo ---------- */

.cabecera-arena {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cinta {
  margin: 0;
  padding: 10px 30px 10px 16px;
  background: linear-gradient(180deg, #3d6bf2, #2549c9);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  color: #fff;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1.1;
}

.cinta-chica {
  align-self: flex-start;
  margin-top: 6px;
  padding: 6px 26px 6px 14px;
  font-size: 1.1rem;
}

.btn-cinta {
  padding: 9px 16px 9px 22px;
  border: 0;
  background: var(--azul-noche);
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
  color: #fff;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.btn-cinta:hover { background: #17227a; }

.activos {
  margin: 0;
  font-size: 0.9rem;
  color: var(--texto-suave);
}

.aviso {
  margin: 0;
  padding: 8px 12px;
  border-left: 4px solid #e0a030;
  background: #2a2112;
  font-size: 0.9rem;
}

.aviso[hidden] { display: none; }

.aviso-ok { border-left-color: #3ecf8e; background: #10281f; }

.panel-crear {
  padding: 12px;
  border: 2px solid var(--azul-noche);
  background: var(--panel);
}

.modos { display: grid; gap: 8px; margin-top: 8px; }

/* Tutorial: botón y panel debajo de "Crear Sala" */
.btn-tutorial { width: 100%; margin-top: 8px; }
.panel-tutorial { margin-top: 8px; }
.panel-tutorial[hidden] { display: none; }
.tutorial-pisos { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.tutorial-piso {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 2px solid var(--cian);
  background: #0b0e16;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tutorial-piso:disabled { opacity: 0.45; cursor: not-allowed; }
.tutorial-piso-hecho { border-color: #3ecf8e; }
.tutorial-piso-nombre { font-weight: 900; }
.tutorial-piso-datos { font-size: 0.8rem; opacity: 0.85; }

/* Cuadro de la IA guía durante el duelo del Tutorial */
.tutorial-guia {
  margin: 6px 0;
  padding: 8px 10px;
  border: 2px solid var(--cian);
  border-left-width: 6px;
  background: #0d1b2a;
}
.tutorial-guia[hidden] { display: none; }
.tutorial-guia, .tutorial-guia p { color: #eaf6ff; }
.tutorial-guia-titulo { color: #7fdcff; }
.tutorial-guia-solo { opacity: 0.85; }
.tutorial-guia-titulo { margin: 0 0 4px; color: #7fdcff; font-size: 0.8rem; font-weight: 900; text-transform: uppercase; }
.tutorial-guia-texto { margin: 0; font-size: 0.92rem; line-height: 1.35; }
.tutorial-tienda { font-weight: 700; }

.lista-salas {
  margin: 0;
  padding: 6px;
  max-height: 270px;
  overflow-y: auto;
  list-style: none;
  border: 3px solid var(--cian);
  background: #0b0e16;
}

.lista-salas li + li { margin-top: 6px; }

.lista-vacia {
  padding: 18px 8px;
  text-align: center;
  color: var(--texto-suave);
}

.fila-sala {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  background: var(--azul-noche);
  clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fila-sala { position: relative; }
.fila-sala:hover { background: #17227a; }
.fila-sala:disabled { cursor: default; }
.fila-sala:disabled:hover { background: var(--azul-noche); }
.fila-no-disponible .fila-sala { opacity: 0.75; }
.marca-sala {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  padding: 3px 12px;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}
.marca-espera { background: #1f8a3b; }
.marca-llena { background: #6b5a14; }
.marca-juego { background: #a3202e; }
.fila-sala-titulo { font-size: 1.1rem; font-weight: 700; }
.fila-sala-detalle { font-size: 0.85rem; color: var(--c-azul-claro); }

.ranking {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
  font-size: 0.95rem;
}

.ranking th {
  padding: 2px 10px;
  text-align: left;
  color: var(--cian);
  font-weight: 700;
}

.ranking td {
  padding: 7px 10px;
  background: var(--azul-noche);
}

/* ---------- sala de espera ---------- */

.centrado { text-align: center; }

.equipo-titulo {
  margin: 0 0 8px;
  padding: 4px 12px;
  border-left: 6px solid var(--cian);
  background: var(--azul-noche);
  font-size: 1.05rem;
  font-style: italic;
}

.versus {
  margin: 10px 0;
  text-align: center;
  font-size: 1.6rem;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--cian);
}

.casillas { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.casilla {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 8px 12px;
  border: 2px solid #2a3040;
  border-radius: 6px;
  background: var(--panel);
}

.casilla-yo { border-color: var(--cian); background: #0f2233; }

.casilla-vacia {
  justify-content: center;
  border-style: dashed;
  color: var(--texto-suave);
}

.casilla-datos { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.casilla-nombre { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.casilla-nivel { font-size: 0.85rem; color: var(--texto-suave); }
.casilla-estado { font-size: 0.85rem; font-weight: 700; color: var(--texto-suave); }
.estado-listo { color: #3ecf8e; }
.estado-desconectado { color: #e0a030; }

.avatar-chico { width: 44px; height: 44px; }
.avatar-chico .avatar-reserva { font-size: 1.1rem; }

.btn-secundario {
  background: transparent;
  border-color: #3b4560;
}

/* ---------- elegir arma (sala) ---------- */

.armas { margin: 0; padding: 0; border: 0; }
.armas legend { margin-bottom: 8px; padding: 0; font-weight: 700; }
.armas-lista { display: flex; flex-direction: column; gap: 8px; }

.arma { position: relative; display: block; cursor: pointer; }
.arma input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.arma-marco {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 2px solid #2a3040;
  border-radius: 6px;
  background: var(--panel);
}

.arma input:checked + .arma-marco { border-color: var(--cian); background: #0f2233; }
.arma input:focus-visible + .arma-marco { outline: 3px solid var(--cian); outline-offset: 2px; }
.arma-nombre { font-weight: 800; font-style: italic; }
.arma-datos { font-size: 0.85rem; color: var(--texto-suave); }

/* ---------- duelo ---------- */

.vista-duelo {
  --celda-base: clamp(40px, 6.5vh, 64px);
  --hueco: 3px;
  gap: 6px;
}

.vista-duelo .mensaje:empty { min-height: 0; }

.hud {
  padding: 6px 10px;
  border-left: 5px solid #2a3040;
  background: var(--azul-noche);
}

.hud-turno { border-left-color: var(--cian); }

.hud-cabecera { display: flex; align-items: center; gap: 10px; }
.hud-cabecera .avatar { width: 34px; height: 34px; }
.hud-info { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.hud-nombre { overflow: hidden; font-weight: 800; font-style: italic; text-overflow: ellipsis; white-space: nowrap; }
.hud-sub { font-size: 0.8rem; color: var(--c-azul-claro); }

.dorsos { display: flex; }

.dorso {
  display: block;
  width: 16px;
  height: 24px;
  margin-left: -6px;
  border: 1px solid #5fb4ff;
  border-radius: 2px;
  background: linear-gradient(135deg, #1b5fb0, #0b2a55);
}

.barras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }

.barra {
  position: relative;
  height: 20px;
  overflow: hidden;
  border: 1px solid #000;
  background: #0a0c14;
}

.barra-relleno { height: 100%; transition: width 0.25s ease; }
.barra-vida .barra-relleno { background: #c93a45; }
.barra-energia .barra-relleno { background: #2c78d8; }

.barra-texto {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  text-shadow: 0 1px 2px #000;
}

.estados { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.estados:empty { display: none; }
.estados { margin-top: 4px; }

.estado {
  padding: 1px 8px;
  border-radius: 10px;
  background: #24304f;
  font-size: 0.75rem;
  font-weight: 700;
}

.estado-escudo { background: #1d4fa3; }
.estado-hielo { background: #0f7f9c; }
.estado-fuego { background: #a8431c; }
.estado-alcance { background: #5a3b9c; }

.barra-turno { display: flex; align-items: center; justify-content: space-between; }
.turno { margin: 0; font-weight: 800; font-style: italic; color: var(--texto-suave); }
.turno.es-mio { color: var(--cian); }
.reloj { margin: 0; font-variant-numeric: tabular-nums; font-weight: 800; }
.reloj-urgente { color: var(--error); }

.tablero {
  /* Plano de casillas girado como en la imagen de referencia: primero 45° y luego se inclina 60°.
     --celda, --columnas, --filas, --cabeza y --alto-iso vienen del .escenario. */
  position: absolute;
  left: 50%;
  top: calc(var(--cabeza) + var(--alto-iso) / 2);
  display: grid;
  grid-template-columns: repeat(var(--columnas, 5), var(--celda));
  grid-template-rows: repeat(var(--filas, 6), var(--celda));
  gap: var(--hueco);
  width: calc(var(--columnas, 5) * var(--celda) + (var(--columnas, 5) - 1) * var(--hueco));
  height: calc(var(--filas, 6) * var(--celda) + (var(--filas, 6) - 1) * var(--hueco));
  transform: translate(-50%, -50%) rotateX(60deg) rotateZ(-45deg);
}

.celda {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 0;
  background: #e6e6e6;
  color: #000;
  cursor: default;
}

.celda:disabled { opacity: 1; }
.celda-yo { background: #9fd6f0; border-color: #1d8fd1; }
.celda-rival { background: #f0b4b4; border-color: #c93a45; }
.celda-aliado { background: #b9ecc9; border-color: #2e9b57; }
.celda-blanco { outline: 3px solid #ffd23f; outline-offset: 1px; }
.celda-mover { border-color: #fff; border-style: dashed; cursor: pointer; background: #dfe5ee; }
.celda-mover:hover { background: #fff; }

.celda-rango {
  border-color: var(--cian);
  box-shadow: inset 0 0 0 2px var(--cian), 0 0 8px var(--cian);
}

.celda-rango.celda-rival { cursor: pointer; border-color: #ff5964; box-shadow: inset 0 0 0 2px #ff5964, 0 0 8px #ff5964; }

.avatar-tablero { width: calc(var(--celda) - 8px); height: calc(var(--celda) - 8px); }
.avatar-mini { width: 26px; height: 26px; }
.avatar-mini .avatar-reserva { font-size: 0.8rem; border-width: 1px; }
.avatar-tablero .avatar-reserva { font-size: 1.2rem; }

.eventos {
  min-height: 2.7em;
  margin: 0;
  padding: 3px 10px;
  list-style: none;
  background: #0b0e16;
  border-left: 3px solid #2a3040;
  font-size: 0.82rem;
  color: var(--texto-suave);
}

.evento-nuevo { color: var(--texto); font-weight: 700; }

.mano {
  display: flex;
  gap: 8px;
  padding: 8px 2px 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.carta {
  position: relative;
  display: flex;
  flex: 0 0 84px;
  flex-direction: column;
  height: 104px;
  padding: 5px;
  border: 3px solid #000;
  border-radius: 6px;
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  scroll-snap-align: start;
}

.carta-ataque { background: linear-gradient(180deg, #d8402f, #6b130c); } /* rojo */
.carta-defensa { background: linear-gradient(180deg, #2f5fe0, #0c1f73); } /* azul */
.carta-magica { background: linear-gradient(180deg, #9a4de0, #3d1275); } /* morado */
.carta-recarga { background: linear-gradient(180deg, #f6d44a, #c79a05); color: #1b1500; } /* amarillo */
.carta-critico { background: linear-gradient(180deg, #ff9a2e, #a1470a); } /* daño crítico: naranja */

.carta-nombre {
  padding: 2px 0;
  background: #000;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
}

.carta-arte {
  display: grid;
  flex: 1;
  place-items: center;
  min-height: 0;
  overflow: hidden;
}

.carta-arte img { width: 100%; height: 100%; object-fit: contain; }
.carta-inicial { font-size: 2.2rem; font-style: italic; font-weight: 900; opacity: 0.85; }

.carta-costo {
  align-self: flex-end;
  min-width: 26px;
  padding: 1px 6px;
  border: 2px solid #000;
  border-radius: 12px;
  background: #fff;
  color: #0a1a4a;
  font-weight: 900;
}

/* Diseño de carta completa: la imagen es toda la carta (trae marco, nombre, coste y texto). */
.carta-completa {
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
}
.carta-completa > img { display: block; width: auto; height: 100%; border-radius: 6px; user-select: none; -webkit-user-drag: none; }

/* "+3" del Sello oscuro sobre la carta. */
.carta-sobrecoste {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 24px;
  padding: 1px 5px;
  border: 2px solid #000;
  border-radius: 12px;
  background: #4a1a78;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
  pointer-events: none;
}

.carta-bloqueada { filter: grayscale(0.7) brightness(0.75); }
.carta-elegida { transform: translateY(-6px); outline: 3px solid var(--cian); outline-offset: 1px; filter: none; }

.detalle-carta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 3.6em;
  padding: 6px 12px;
  border-left: 4px solid var(--cian);
  background: #0f1624;
}

.detalle-carta p { margin: 0; }
.detalle-fila { flex-direction: row; align-items: center; gap: 10px; }
.detalle-columna { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.btn-jugar { width: auto; min-width: 84px; padding: 10px 14px; }
.detalle-titulo { font-weight: 800; }
.detalle-texto { font-size: 0.88rem; line-height: 1.3; }
.nota-alerta { color: #ffb347; }

/* Los botones de acción quedan fijos abajo para llegar a ellos aunque haya que bajar en la pantalla. */
.acciones {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0 -20px;
  padding: 6px 20px max(4px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(10, 11, 14, 0.92), #0a0b0e 30%);
  border-top: 1px solid #1a2030;
}

.acciones:empty { display: none; }
.acciones-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.acciones .btn { padding: 11px 8px; font-size: 0.92rem; letter-spacing: 0; }
.enlace-chico { font-size: 0.9rem; }

.resultado {
  padding: 16px;
  border: 3px solid var(--cian);
  background: var(--azul-noche);
  text-align: center;
}

.resultado[hidden] { display: none; }
.resultado-gana { border-color: #3ecf8e; }
.resultado-pierde { border-color: #ff5964; }
.resultado-titulo { margin: 0 0 6px; font-size: 2rem; font-style: italic; font-weight: 900; }
.resultado-texto { margin: 0 0 12px; }

/* ---------- duelos por equipos ---------- */

.equipo-hud-multi {
  display: grid;
  grid-template-columns: repeat(var(--n, 2), 1fr);
  gap: 6px;
}

.hud-mini { min-width: 0; padding: 5px 6px; border-left-width: 4px; }
.hud-mini .hud-cabecera { gap: 6px; }
.hud-mini .hud-nombre { font-size: 0.85rem; }
.hud-mini .hud-sub { overflow: hidden; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.hud-mini .barras { gap: 4px; margin-top: 3px; }
.hud-mini .barra { height: 16px; }
.hud-mini .barra-texto { font-size: 0.72rem; }
.hud-mini .estado { padding: 0 6px; font-size: 0.65rem; }
.hud-eliminado { opacity: 0.55; border-left-color: #555; }

.objetivos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.objetivos-titulo { font-size: 0.85rem; color: var(--texto-suave); }

.chip-objetivo {
  padding: 3px 10px;
  border: 2px solid #3b4560;
  border-radius: 14px;
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.chip-objetivo[aria-pressed="true"] { border-color: #ffd23f; background: #3a3210; }

.acciones-fila-una { grid-template-columns: 1fr; }
.acciones-pie { display: flex; align-items: center; justify-content: center; gap: 18px; }

.btn-chat-alternar {
  padding: 4px 10px;
  border: 0;
  background: none;
  color: var(--cian);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- chat ---------- */

.chat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-left: 4px solid #2a3040;
  background: #0b0e16;
}

.chat-titulo { margin: 0; font-size: 0.95rem; font-style: italic; color: var(--texto-suave); }

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 150px;
  min-height: 56px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  font-size: 0.9rem;
}

.chat-msg { overflow-wrap: anywhere; }
.chat-autor { margin-right: 6px; color: var(--cian); }
.chat-mio .chat-autor { color: #3ecf8e; }
.chat-vacio { color: var(--texto-suave); font-size: 0.85rem; }

.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; min-width: 0; padding: 8px 10px; }
.btn-enviar { width: auto; padding: 8px 14px; }

.chat-duelo { margin-top: 2px; }

/* ---------- accesibilidad ---------- */

:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }

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


/* ---------- personajes de cuerpo completo sobre el tablero ---------- */

/* El escenario es el rombo que ocupa el tablero girado, con aire arriba para que las figuras
   de la fila de atrás no se corten. Los 3 modos de duelo usan el mismo tablero de 6 x 5. */
.escenario {
  /* La casilla se achica sola cuando el tablero es más grande (por ejemplo, el Blood Castle). */
  --suma: calc(var(--columnas, 5) + var(--filas, 6));
  --celda: min(var(--celda-base), calc((min(100vw, 440px) - 40px) / (0.70711 * var(--suma)) - var(--hueco)));
  --paso: calc(var(--celda) + var(--hueco));
  --ancho-iso: calc(0.70711 * var(--suma) * var(--paso));
  --alto-iso: calc(0.35355 * var(--suma) * var(--paso));
  --cabeza: calc(var(--celda) * 1.5);
  position: relative;
  width: var(--ancho-iso);
  height: calc(var(--cabeza) + var(--alto-iso) + var(--celda) * 0.3);
  margin: 0 auto;
}

/* Capa de figuras: cubre el escenario, encima y sin bloquear los toques. Las figuras se quedan
   de pie (no se giran con el tablero); solo su posición se proyecta sobre el plano girado. */
.sprites {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sprite {
  position: absolute;
  left: calc(var(--c, 0) * (var(--celda) + var(--hueco)));
  top: calc(var(--f, 0) * (var(--celda) + var(--hueco)));
  width: var(--celda);
  height: var(--celda);
  transition: left 0.35s ease, top 0.35s ease;
  pointer-events: none;
}

/* Al apuntar el ataque, tocar la figura del rival equivale a tocar su casilla. */
.sprite-activo,
.sprite-activo .sprite-cuerpo { pointer-events: auto; cursor: pointer; }

/* Los pies quedan sobre la casilla; el resto del cuerpo sobresale hacia arriba. */
.sprite-cuerpo {
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: calc(var(--celda) * 1.6);
  height: calc(var(--celda) * 2.4);
  transform: translateX(-50%);
}

.sprite-figura {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  animation: respirar 2.6s ease-in-out infinite;
}

.sprite-rival .sprite-figura { animation-delay: -1.3s; }

/* Brillo del personaje: administrador morado, moderadores verde; los demás por nivel (30 rojo, 60 azul, 85 rosado, 100 amarillo). */
.brillo-rojo { filter: drop-shadow(0 0 5px #ff2d2d) drop-shadow(0 0 12px #ff2d2d); }
.brillo-azul { filter: drop-shadow(0 0 5px #2d7bff) drop-shadow(0 0 12px #2d7bff); }
.brillo-rosado { filter: drop-shadow(0 0 5px #ff5fb4) drop-shadow(0 0 12px #ff5fb4); }
.brillo-morado { filter: drop-shadow(0 0 5px #a855f7) drop-shadow(0 0 12px #a855f7); }
.brillo-verde { filter: drop-shadow(0 0 5px #22c55e) drop-shadow(0 0 12px #22c55e); }
.brillo-amarillo { filter: drop-shadow(0 0 5px #ffd400) drop-shadow(0 0 12px #ffd400); }

.sprite-capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.sprite-sombra {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 86%;
  height: 26%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 70%);
}

/* Flechita sobre la cabeza de quien tiene el turno. */
.sprite-marca {
  position: absolute;
  left: 50%;
  bottom: calc(22% + var(--celda) * 2.4 + 2px);
  display: none;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid var(--cian);
  transform: translateX(-50%);
  animation: flotar 1s ease-in-out infinite;
}

.sprite-turno .sprite-marca { display: block; }

.sprite-derrotado .sprite-cuerpo { opacity: 0.55; filter: grayscale(1); }

/* Figuras sobre el tablero girado: 25% más pequeñas que antes (1,2 x 1,8 casillas) y con los pies
   en el centro de su casilla. Solo afecta al duelo; el Vestuario y la Tienda se quedan como están. */
.escenario .sprite {
  --xr: calc((var(--c, 0) - (var(--columnas, 5) - 1) / 2) * var(--paso));
  --yr: calc((var(--f, 0) - (var(--filas, 6) - 1) / 2) * var(--paso));
  left: calc(50% + 0.70711 * (var(--xr) + var(--yr)));
  top: calc(var(--cabeza) + var(--alto-iso) / 2 + 0.35355 * (var(--yr) - var(--xr)));
  margin: calc(var(--celda) / -2) 0 0 calc(var(--celda) / -2);
}

.escenario .sprite-cuerpo {
  bottom: 40%;
  width: calc(var(--celda) * 1.2);
  height: calc(var(--celda) * 1.8);
}

.escenario .sprite-sombra {
  bottom: 20%;
  width: 90%;
  height: 40%;
}

.escenario .sprite-marca { bottom: calc(40% + var(--celda) * 1.8 + 2px); }

/* Figura de reserva mientras no pongas tu propio dibujo. */
.sil-cuerpo { stroke: #0b1030; stroke-width: 3; }
.sil-miembro { stroke-width: 10; stroke-linecap: round; }
.sprite-yo .sil-cuerpo { fill: #2f8de0; }
.sprite-yo .sil-miembro { stroke: #2f8de0; }
.sprite-rival .sil-cuerpo { fill: #d9525c; }
.sprite-rival .sil-miembro { stroke: #d9525c; }
.sprite-aliado .sil-cuerpo { fill: #2e9b57; }
.sprite-aliado .sil-miembro { stroke: #2e9b57; }
.sil-numero { fill: #fff; font-size: 24px; font-weight: 800; }

@keyframes respirar {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.015); }
}

@keyframes flotar {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .sprite { transition: none; }
  .sprite-figura, .sprite-marca { animation: none; }
}

/* ---------- vestuario ---------- */

.vista-vestuario { gap: 12px; }

.vestidor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 10px;
  border: 2px solid #2a3040;
  border-radius: 6px;
  background: var(--panel);
}

/* Mientras acomodas una pieza, la vista previa se queda a la vista. */
.vista-vestuario:has(.ajuste:not([hidden])) .vestidor {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #0d1018;
}

.vestidor-escena {
  --celda: 72px;
  --hueco: 3px;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: calc(var(--celda) * 1.75);
}

.vestidor .nota { margin: 0; text-align: center; }

.vest-casilla {
  position: relative;
  width: var(--celda);
  height: var(--celda);
  border: 3px solid #1d8fd1;
  border-radius: 3px;
  background: #9fd6f0;
}

.vest-casilla .sprite { left: -3px; top: -3px; }

.subtitulo { margin: 8px 0 0; font-size: 1.1rem; font-weight: 800; font-style: italic; }

input[type="file"] {
  width: 100%;
  padding: 8px;
  border: 2px dashed #5b6a86;
  border-radius: 4px;
  background: var(--panel);
  color: var(--texto);
  font: inherit;
}

.piezas { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.piezas-grupo { margin-top: 6px; font-weight: 800; font-style: italic; color: var(--cian); }

.pieza {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px 10px;
  align-items: center;
  padding: 8px;
  border: 2px solid #2a3040;
  border-radius: 6px;
  background: var(--panel);
}

.pieza-puesta { border-color: #3ecf8e; }
.pieza-elegida { border-color: var(--cian); }

.pieza-mini {
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 4px;
  background: conic-gradient(#2a3040 25%, #1b2030 0 50%, #2a3040 0 75%, #1b2030 0) 0 0 / 12px 12px;
}

.pieza-mini img { width: 100%; height: 100%; object-fit: contain; }

.pieza-datos { display: flex; flex-direction: column; min-width: 0; }
.pieza-nombre { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pieza-estado { font-size: 0.85rem; color: var(--texto-suave); }
.pieza-puesta .pieza-estado { color: #3ecf8e; }

.pieza-botones { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.btn-chico { padding: 8px 6px; font-size: 0.9rem; letter-spacing: 0; }

.ajuste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--cian);
  border-radius: 6px;
  background: var(--panel);
}

.ajuste .subtitulo, .ajuste .nota { margin: 0; }
.ajuste-fila { display: flex; flex-direction: column; gap: 2px; }
.ajuste-rotulo { display: flex; justify-content: space-between; font-weight: 700; }
.ajuste-valor { font-variant-numeric: tabular-nums; color: var(--cian); }
.ajuste input[type="range"] { width: 100%; height: 32px; accent-color: var(--cian); }

/* ---------- oro y marcador ---------- */

.moneda {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.1em;
  border: 2px solid #b8860b;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3a8, #ffd23f 55%, #e0a100);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  vertical-align: -0.12em;
}

.marcador {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-left: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  font-style: normal;
  white-space: nowrap;
}

.marcador-dato { font-variant-numeric: tabular-nums; }
.marcador-oro { color: var(--oro); }

.casilla-datos .marcador,
.hud-info .marcador,
.fila-sala-titulo .marcador { margin-left: 0; }

.fila-sala-titulo .marcador { margin-left: 8px; }

.ficha-oro { margin: 2px 0; font-weight: 800; color: var(--oro); }

.ranking td, .ranking th { white-space: nowrap; }
.ranking td:nth-child(2) { white-space: normal; word-break: break-word; }
.ranking td:nth-child(3), .ranking td:nth-child(4) { font-variant-numeric: tabular-nums; }

.resultado-oro { margin: 0 0 12px; font-size: 1.15rem; font-weight: 800; color: var(--oro); }

.mensaje-ok { color: #3ecf8e; }

/* ---------- vestuario: administrador ---------- */

.casilla-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.casilla-opcion input { width: 22px; height: 22px; accent-color: var(--cian); }

.pieza-botones-uno { grid-template-columns: 1fr; }

.pieza-venta-estado { font-size: 0.85rem; color: var(--texto-suave); }
.pieza-venta-estado.en-tienda { color: var(--oro); }

.pieza-venta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.pieza-precio {
  grid-column: 1 / -1;
  width: 100%;
  padding: 8px 10px;
  border: 2px solid #3a4560;
  border-radius: 4px;
  background: var(--campo);
  color: var(--campo-texto);
  font: inherit;
}

/* ---------- tienda ---------- */

/* La tienda usa más ancho que el resto del juego, para parecerse a una tienda de escritorio. */
.pantalla:has(.vista-tienda:not([hidden])) { max-width: 980px; }
.pantalla:has(.vista-vestuario:not([hidden])), .pantalla:has(.vista-guild:not([hidden])) { max-width: 760px; }

.vista-tienda,
.vista-vestuario,
.vista-guild,
.vista-admin {
  --t-fondo: #cfe6f7;
  --t-borde: #86bdea;
  --t-texto: #12335a;
  --t-azul: #2f6fc0;
  --t-azul-claro: #5da4e6;
}

.tienda {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.tienda-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border: 3px solid var(--t-borde);
  border-radius: 14px;
  background: var(--t-fondo);
  color: var(--t-texto);
}

.tienda-lateral { display: flex; flex-direction: column; gap: 12px; }

.tienda-rotulo {
  margin: 0;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--t-azul);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tienda-tabs { display: flex; flex-wrap: wrap; gap: 4px; }

.tienda-tab {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 6px 8px;
  border: 2px solid var(--t-borde);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #a9d0f0;
  color: var(--t-texto);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.tienda-tab-activa { background: #fff; color: var(--t-azul); }

.tienda-rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  min-height: 200px;
  padding: 8px;
  border-radius: 10px;
  background: #e9f4fc;
}

.tienda-vacio {
  grid-column: 1 / -1;
  align-self: center;
  margin: 0;
  text-align: center;
  font-weight: 600;
  color: #4a6b92;
}

.tienda-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--t-azul-claro);
  border-radius: 8px;
  background: #fff;
  color: var(--t-texto);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.tienda-item:focus-visible { outline: 3px solid #ffb703; outline-offset: 2px; }
.tienda-item-elegido { border-color: #ff9f1c; box-shadow: 0 0 0 3px rgba(255, 159, 28, 0.45); }
.tienda-item-mio { background: #f1f7fc; }

.tienda-item-nombre {
  display: block;
  padding: 3px 6px;
  overflow: hidden;
  background: var(--t-azul);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tienda-item-foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 6px;
}

.tienda-item-foto img,
.tienda-item-recorte { width: 100%; height: 100%; object-fit: contain; }

.tienda-item-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 3px 4px 5px;
}

.tienda-precio { font-weight: 800; font-variant-numeric: tabular-nums; color: #8a5a00; }
.tienda-precio-grande { font-size: 1.3rem; }
.tienda-item-caro .tienda-precio { color: #c0303a; }

.tienda-nuevo {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e63946;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

.tienda-etiqueta {
  white-space: nowrap;
  padding: 1px 8px;
  border-radius: 999px;
  background: #cfe6f7;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--t-azul);
}

.tienda-etiqueta-cesta { background: #ffe3b3; color: #8a5a00; }

.tienda-paginas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-weight: 700;
}

.tienda-flecha {
  width: 44px;
  height: 40px;
  border: 2px solid var(--t-borde);
  border-radius: 10px;
  background: #fff;
  color: var(--t-azul);
  font: inherit;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.tienda-flecha:disabled { opacity: 0.4; cursor: default; }

.tienda-barra { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; }

.tienda-campo { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; font-weight: 800; }

.tienda-campo input,
.tienda-campo select {
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 2px solid var(--t-borde);
  border-radius: 8px;
  background: #fff;
  color: var(--t-texto);
  font: inherit;
  font-weight: 600;
}

.tienda-oro {
  margin: 0;
  text-align: center;
  font-weight: 800;
}

.tienda-cesta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tienda-hueco {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 8px;
  border: 2px dashed var(--t-borde);
  border-radius: 8px;
  background: #e9f4fc;
}

.tienda-hueco-lleno { border-style: solid; background: #fff; }

.tienda-hueco-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tienda-quitar {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #e5484d;
  color: #fff;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.tienda-total { margin: 0; text-align: center; font-weight: 800; }
.tienda-total-falta { color: #c0303a; }

.vista-tienda .mensaje { color: #c0303a; }
.vista-tienda .mensaje.mensaje-ok { color: #1f7a4d; }

.vista-tienda .vestidor-escena { --celda: 72px; --hueco: 3px; padding-top: calc(var(--celda) * 1.75); }

@media (min-width: 760px) {
  .tienda { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}

/* Marcador (victorias y oro) dentro de las fichas pequeñas de los duelos por equipos. */
.hud-mini .marcador { gap: 0 6px; font-size: 0.68rem; }

/* ======================================================================
   Fase 5: panel de administración, cartas nuevas, mazos y Blood Castle
   ====================================================================== */

.par-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.par-campos .etiqueta { display: flex; flex-direction: column; gap: 4px; }
.subtitulo-chico { margin: 6px 0 0; font-size: 0.95rem; font-weight: 800; font-style: italic; color: var(--cian); }

/* ---------- menú ---------- */
.btn-castillo { border-color: #8e1b2a; background: linear-gradient(135deg, #3a0d16, #12151d); }
.btn-castillo small { color: #ff9aa6; }
.btn-admin { border-color: #b8860b; }
.btn-admin small { color: #ffd23f; }
.btn-peligro { border-color: #8e1b2a; color: var(--c-peligro); }

/* ---------- panel de administración ---------- */
.usuarios { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.usuario { border: 2px solid #2a3040; border-radius: 6px; background: var(--panel); }
.usuario-elegido { border-color: var(--cian); }
.usuario-bloqueado { opacity: 0.75; border-color: #8e1b2a; }
.usuario-boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.usuario-datos { display: flex; flex-direction: column; min-width: 0; }
.usuario-nombre { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-email, .usuario-cifras { overflow: hidden; font-size: 0.8rem; color: var(--texto-suave); text-overflow: ellipsis; }
.usuario-insignias { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.insignia { padding: 1px 8px; border-radius: 10px; background: #24304f; font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.insignia-admin { background: #7a5a00; color: #ffe08a; }
.insignia-moderador { background: #1d4fa3; }
.insignia-bloqueado { background: #8e1b2a; }
.usuario-panel { display: flex; flex-direction: column; gap: 8px; }
.historial { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.historial-fila { padding: 6px 8px; border-left: 3px solid #2a3040; background: var(--panel); font-size: 0.82rem; line-height: 1.3; overflow-wrap: anywhere; }
.vista-admin .tienda-barra { display: flex; align-items: flex-end; gap: 8px; }
.vista-admin .tienda-campo { flex: 1; }

/* ---------- piezas con puntos y cartas en listas ---------- */
.pieza-puntos { font-size: 0.82rem; font-weight: 700; color: var(--oro); }
.pieza-extra { grid-column: 1 / -1; display: grid; gap: 6px; }
.pieza-puntos-fila { grid-template-columns: auto 1fr auto 1fr; align-items: center; }
.pieza-puntos-fila .btn { grid-column: 1 / -1; }
.pieza-carta { grid-template-columns: 84px 1fr; }
.pieza-carta:has(.carta-completa) { grid-template-columns: auto 1fr; } /* la carta completa trae su propio ancho */
.pieza-carta .carta { cursor: default; }

/* ---------- panel de creación de cartas ---------- */
.carta-previa { display: flex; align-items: center; gap: 12px; padding: 10px; border: 2px dashed #2a3040; border-radius: 6px; }
.carta-previa .carta { cursor: default; }
.carta-previa .nota { margin: 0; }
.carta-fusion { outline: 3px solid #ffd23f; outline-offset: 1px; transform: translateY(-6px); }
.tienda-item-foto-carta { position: relative; padding: 2px; }
.tienda-item-foto-carta img { max-height: 100%; }
.tienda-item-foto-carta .carta-costo { position: absolute; top: 2px; right: 2px; }

/* ---------- mazos ---------- */
.mazos { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 2px solid #2a3040; }
#mazos-panel { display: flex; flex-direction: column; gap: 10px; }
.mazos-ranuras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mazo-ranura {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  border: 2px solid #2a3040;
  border-radius: 6px;
  background: var(--panel);
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mazo-ranura-elegida { border-color: var(--cian); background: #0f2233; }
.mazo-ranura-activa { box-shadow: inset 0 0 0 2px #3ecf8e; }
.mazo-ranura-nombre { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.mazo-ranura-dato { font-size: 0.72rem; color: var(--texto-suave); }
.mazo-ranura-marca { font-size: 0.65rem; font-weight: 800; color: #3ecf8e; }
.mazo-total { margin: 0; font-weight: 800; color: var(--oro); }
.mazo-total-ok { color: #3ecf8e; }
.mazo-cartas { display: flex; flex-direction: column; gap: 4px; max-height: 420px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.mazo-carta { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; border: 2px solid #2a3040; border-radius: 6px; background: var(--panel); }
.mazo-carta-en-mazo { border-color: #3ecf8e; }
.mazo-mini { display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; border-radius: 4px; background: #0a0c14; }
.mazo-mini img { width: 100%; height: 100%; object-fit: contain; }
.mazo-carta-datos { display: flex; flex-direction: column; min-width: 0; }
.mazo-carta-nombre { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.mazo-carta-sub { overflow: hidden; font-size: 0.72rem; color: var(--texto-suave); text-overflow: ellipsis; white-space: nowrap; }
.mazo-control { display: flex; align-items: center; gap: 6px; }
.btn-contador { width: 32px; height: 32px; border: 2px solid var(--azul-borde); border-radius: 6px; background: var(--azul-boton); color: #fff; font-size: 1.1rem; font-weight: 800; cursor: pointer; }
.btn-contador:disabled { opacity: 0.35; cursor: not-allowed; }
.contador-valor { min-width: 22px; font-weight: 800; text-align: center; }
.mazo-acciones { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Blood Castle ---------- */
.cinta-castillo { background: #5a0f1c; }
.jefes-lista { display: flex; flex-direction: column; gap: 8px; }
.jefe-tarjeta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 2px solid #3a2a30;
  border-radius: 6px;
  background: var(--panel);
  color: var(--texto);
  font: inherit;
  text-align: left;
}
button.jefe-tarjeta { cursor: pointer; }
.jefe-tarjeta-elegida { border-color: #ff5a6e; background: #2a0f16; }
.jefe-tarjeta-emoji { font-size: 2.2rem; line-height: 1; }
.jefe-tarjeta-info { display: flex; flex-direction: column; min-width: 0; }
.jefe-tarjeta-nombre { font-size: 1.05rem; font-weight: 800; font-style: italic; }
.jefe-tarjeta-datos { font-size: 0.8rem; color: var(--texto-suave); }
.castillo-recompensa { margin: 0; text-align: center; font-weight: 800; color: var(--oro); }
.casilla-jefe { border-color: #8e1b2a; background: #2a0f16; }
.hud-jefe { border-left-color: #ff5a6e; background: #3a0d16; }
.hud-jefe .jefe-emoji { font-size: 1.9rem; line-height: 1; }
.barras-una { grid-template-columns: 1fr; }
.hud-stats { color: var(--oro); font-weight: 700; }
.sprite-jefe .sprite-cuerpo { transform: scale(1.25); transform-origin: 50% 100%; }
.jefe-reserva { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.vista-castillo .casillas { margin: 0; }


/* ---------- avisos visuales del duelo: casillas rojas y azules, corazón y rayo ---------- */

/* Rojo = daño en área (aro del Inferno, zona del Veneno, Colisión, Explosión).
   Azul = defensa (alrededor de quien tiene Escudo, Soul Barrier o defensa extra).
   Los colores van en capas encima de la casilla para no perder el color del equipo. */
.celda-rojo::after,
.celda-azul::before,
.celda-fx-rojo::after,
.celda-fx-azul::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.celda-rojo::after { background: rgba(255, 40, 55, 0.55); box-shadow: inset 0 0 0 2px #ff2837; }
.celda-azul::before { background: rgba(45, 120, 255, 0.5); box-shadow: inset 0 0 0 2px #2d78ff; }
.celda-trampa::after {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0 4px, rgba(255, 40, 55, 0) 4px 9px),
    rgba(255, 40, 55, 0.7);
}

/* Destello de lo que acaba de pasar (dura un par de segundos y se apaga). */
.celda-fx-rojo::after,
.celda-fx-azul::before {
  animation: celda-destello 1.8s ease-out both;
  animation-delay: var(--fx-atraso, 0s);
}
.celda-fx-rojo::after { background: rgba(255, 40, 55, 0.85); }
.celda-fx-azul::before { background: rgba(45, 120, 255, 0.85); }
.celda-rojo.celda-fx-rojo::after { background: rgba(255, 40, 55, 0.85); }

@keyframes celda-destello {
  0% { opacity: 1; }
  100% { opacity: 0.55; }
}
/* Si ya había color permanente, el destello se funde con él; si no, se apaga del todo. */
.celda-fx-rojo:not(.celda-rojo)::after,
.celda-fx-azul:not(.celda-azul)::before {
  animation-name: celda-destello-apagar;
}
@keyframes celda-destello-apagar {
  0% { opacity: 1; }
  70% { opacity: 0.8; }
  100% { opacity: 0; }
}

/* Casillas que se pueden elegir con Colisión. */
.celda-elegible { cursor: pointer; border-color: #ffd23f; border-style: dashed; box-shadow: inset 0 0 0 2px #ffd23f; }
.celda-elegible:hover { background: #fff2b8; }
.celda-casilla-elegida { background: #ff8a8a; border-style: solid; outline: 3px solid #ff2837; outline-offset: 1px; }

/* Corazón (recuperar vida) y rayo (recargar energía) sobre el personaje. */
.sprite-icono {
  position: absolute;
  left: 50%;
  bottom: calc(40% + var(--celda) * 1.8 + 8px);
  z-index: 5;
  font-size: calc(var(--celda) * 0.75);
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
  animation: icono-aviso 1.8s ease-out both;
}
@keyframes icono-aviso {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(0.5); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1.2); }
  75% { opacity: 1; transform: translate(-50%, -14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -28px) scale(1); }
}

/* Espada (carta de ataque) y escudo (carta de defensa) sobre la cabeza del personaje. */
.sprite-icono-ataque { left: 36%; }
.sprite-icono-defensa { left: 64%; }

.estado-veneno { background: #4d7a1a; }

@media (prefers-reduced-motion: reduce) {
  .sprite-icono { animation: icono-quieto 1.8s linear both; }
  @keyframes icono-quieto {
    0%, 85% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 0); }
  }
  .celda-fx-rojo::after,
  .celda-fx-azul::before { animation: none; }
}


/* ---------- banners de anuncios (menú de inicio) ---------- */

.banners { width: 100%; margin: 4px 0 8px; }
.banners-marco {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--azul-borde);
  border-radius: 8px;
  background: var(--panel);
  aspect-ratio: 3 / 1;
}
.banners-marco img { display: block; width: 100%; height: 100%; object-fit: cover; }
.banner-diapositiva { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.banner-diapositiva.activo { opacity: 1; pointer-events: auto; }
.banners-puntos { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.banner-punto {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid var(--cian);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.banner-punto[aria-current='true'] { background: var(--cian); }

.banners-ranuras { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.banner-ranura { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 2px solid #2a3040; border-radius: 8px; background: var(--panel); }
.banner-ranura h3 { margin: 0; font-size: 1rem; }
.banner-ranura img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 6px; background: #000; }
.banner-vacio { display: grid; place-items: center; aspect-ratio: 3 / 1; border: 2px dashed #2a3040; border-radius: 6px; color: var(--texto-suave); }
.banner-ranura-botones { display: flex; flex-wrap: wrap; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .banner-diapositiva { transition: none; }
}


/* ---------- ataque y defensa de cada pieza (tienda y perfil) ---------- */
.tienda-item-stats { display: flex; justify-content: center; gap: 6px; font-size: 0.72rem; font-weight: 800; }
.stat-ataque { color: var(--c-ataque); }
.stat-defensa { color: var(--c-defensa); }
.ficha-bonos { margin: 0; font-size: 0.85rem; font-weight: 700; }


/* ---------- Sala de Reuniones ---------- */

.reunion {
  --celda-base: clamp(40px, 6.5vh, 64px);
  --hueco: 3px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reunion .mensaje:empty { min-height: 0; }

/* El fondo que sube el administrador va detrás del tablero. */
.reu-escena {
  padding: 8px 0;
  border-radius: 8px;
  background-color: #10131b;
  background-image: var(--reu-fondo, none);
  background-size: cover;
  background-position: center;
}

/* Casillas: el diseño del administrador se repite en todo el tablero (o se alterna en ajedrez). */
.celda-reunion {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-color: #cfd6e4;
  background-image: var(--reu-casilla, none);
  background-size: 100% 100%;
  cursor: pointer;
}
.celda-reunion.celda-par { background-color: #b9c3d8; }
.celda-reunion.celda-alterna { background-image: var(--reu-casilla2, var(--reu-casilla, none)); }
.celda-reunion:hover:not(:disabled) { filter: brightness(1.2); }
.celda-reunion.celda-ocupada { cursor: default; }
.celda-reunion:focus-visible { outline: 3px solid var(--cian); outline-offset: -3px; }

/* Nombre y burbuja de chat sobre cada personaje. */
.sprite-nombre,
.sprite-burbuja {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}
.sprite-nombre {
  bottom: calc(40% + var(--celda) * 1.8 + 2px);
  max-width: calc(var(--celda) * 3);
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(10, 11, 14, 0.75);
  font-size: 0.68rem;
  font-weight: 800;
}
.sprite-yo .sprite-nombre { background: rgba(14, 109, 148, 0.9); }
.sprite-burbuja {
  bottom: calc(40% + var(--celda) * 1.8 + 22px);
  z-index: 6;
  max-width: calc(var(--celda) * 4);
  white-space: normal;
  padding: 3px 8px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  animation: icono-quieto-burbuja 6s linear both;
}
@keyframes icono-quieto-burbuja {
  0%, 90% { opacity: 1; }
  100% { opacity: 0; }
}



/* ---------- menú de inicio: fondo blanco, botones principales y administración al final ---------- */

body.tema-claro { color: var(--texto); }
.tema-claro .enlace { color: #8fd4ff; }
.tema-claro .enlace:hover { color: #c9ebff; }
.tema-claro .aviso { background: #fff4dc; color: #4a3500; }
.tema-claro .subtitulo { color: var(--azul-noche); }
/* La ficha, el chat y la sala conservan su aspecto oscuro sobre el fondo blanco. */
.tema-claro .ficha,
.tema-claro .reunion .chat {
  --texto: #ffffff;
  --texto-suave: #c6cee2;
  --panel: #12151d;
  color: #ffffff;
}

.menu-principal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 2px 0;
}
.btn-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #3d6bf2, #2549c9);
  color: #fff;
  font: inherit;
  font-size: 0.98rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}
.btn-tile:hover { filter: brightness(1.1); }
.btn-tile:active { transform: translateY(1px); }
.btn-tile.btn-castillo { background: linear-gradient(180deg, #b3243a, #7a1224); }
.btn-tile.btn-admin { background: linear-gradient(180deg, #4b5470, #2c3348); }
/* Con imagen propia (img/botones/<nombre>.png) el botón es solo la imagen; el texto queda para lectores de pantalla. */
.btn-tile.con-imagen { min-height: 0; padding: 0; background: none; border-radius: 0; }
.btn-menu.con-imagen { padding: 0; background: none; clip-path: none; }
.btn-menu.con-imagen img { display: block; width: 100%; height: auto; }
.btn-menu.con-imagen > span,
.btn-menu.con-imagen > small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-tile.con-imagen img { display: block; width: 100%; height: auto; }
.btn-tile.con-imagen > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.menu-admin { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 2px solid #d5dbea; }
.menu-admin .subtitulo { margin: 0; }
.menu-admin-rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* Pestañas Tienda / Mi vestuario */
.pestanas { display: flex; gap: 8px; }
.pestana {
  flex: 1;
  padding: 10px 8px;
  border: 2px solid var(--azul-borde);
  border-radius: 8px;
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.pestana.activa { background: linear-gradient(180deg, #3d6bf2, #2549c9); border-color: #3d6bf2; color: #fff; cursor: default; }


/* ---------- ajustes según la imagen de referencia ---------- */

.titulo-menu { margin: 6px 0 0; font-size: 1.9rem; font-weight: 600; line-height: 1.1; color: #101626; }
.titulo-admin { margin: 10px 0 0; font-size: 2rem; font-weight: 900; font-style: italic; line-height: 1.1; color: #22256f; }
.menu-admin { gap: 10px; border-top: 0; padding-top: 0; }
.menu-admin-lista { display: flex; flex-direction: column; gap: 12px; }

/* Tres botones principales en fila, con forma inclinada si no hay imagen propia. */
.menu-principal { gap: 4px; }
.btn-tile:not(.con-imagen) { clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); border-radius: 0; }

/* Sala de Reuniones: casillas gris azuladas con líneas oscuras, como en la referencia. */
.reu-escena { background-color: #eef2fa; border-radius: 0; }
.celda-reunion { border: 1px solid rgba(10, 12, 20, 0.75); background-color: #c9d1e5; }
.celda-reunion.celda-par { background-color: #b6c1dc; }
.sprite-nombre { background: rgba(21, 140, 165, 0.95); color: #fff; }
.sprite-yo .sprite-nombre { background: rgba(14, 90, 148, 0.97); }


/* Botones transparentes: sobre fondo blanco llevan texto oscuro; dentro de un panel oscuro, texto claro. */
.tema-claro .btn-secundario { color: var(--texto); border-color: #8a96b3; }
.tema-claro .btn-peligro { border-color: #b3243a; }


/* ---------- Mi vestuario: mismo aspecto claro y azul que la Tienda ---------- */

.vista-vestuario .vestidor,
.vista-vestuario .formulario,
.vista-vestuario .mazos,
.vista-vestuario .ajuste {
  border: 3px solid var(--t-borde);
  border-radius: 14px;
  background: var(--t-fondo);
  color: var(--t-texto);
}
.vista-vestuario:has(.ajuste:not([hidden])) .vestidor { background: var(--t-fondo); }
.vista-vestuario .vestidor-escena { border: 2px solid var(--t-borde); border-radius: 10px; background: #f2f9ff; }
.vista-vestuario .mazos { padding: 10px; }
.vista-vestuario .subtitulo,
.vista-vestuario .subtitulo-chico,
.vista-vestuario .etiqueta,
.vista-vestuario .casilla-opcion { color: var(--t-texto); }
.vista-vestuario .piezas-grupo,
.vista-vestuario .ajuste-valor { color: var(--t-azul); }
.vista-vestuario .nota,
.vista-vestuario .pieza-estado,
.vista-vestuario .pieza-venta-estado,
.vista-vestuario .mazo-ranura-dato,
.vista-vestuario .mazo-carta-sub { color: #4a6f9a; }
.vista-vestuario .pieza,
.vista-vestuario .mazo-carta,
.vista-vestuario .mazo-ranura {
  border: 2px solid var(--t-azul-claro);
  background: #fff;
  color: var(--t-texto);
}
.vista-vestuario .pieza-mini,
.vista-vestuario .mazo-mini { background: #e4f1fc; }
.vista-vestuario .pieza-puesta,
.vista-vestuario .mazo-carta-en-mazo { border-color: #2e9e6b; }
.vista-vestuario .pieza-puesta .pieza-estado,
.vista-vestuario .mazo-ranura-marca,
.vista-vestuario .mazo-total-ok { color: #1f7a4d; }
.vista-vestuario .pieza-elegida,
.vista-vestuario .mazo-ranura-elegida { border-color: var(--t-azul); background: #eaf4fc; }
.vista-vestuario .mazo-ranura-activa { box-shadow: inset 0 0 0 2px #2e9e6b; }
.vista-vestuario .pieza-puntos,
.vista-vestuario .mazo-total { color: #a8650a; }
.vista-vestuario input[type="text"],
.vista-vestuario input[type="number"],
.vista-vestuario select,
.vista-vestuario input[type="file"] {
  border: 2px solid var(--t-borde);
  background: #fff;
  color: var(--t-texto);
}
.vista-vestuario .mensaje { color: #c0303a; }
.vista-vestuario .mensaje.mensaje-ok { color: #1f7a4d; }

/* ---------- Pestañas de Tienda / Mi vestuario / Guild (mismas en las tres pantallas) ---------- */

.pestana { position: relative; }
.pestana-aviso {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: #d8342c;
  color: #fff;
  font-size: 0.75rem;
  line-height: 18px;
}
.pestana-aviso[hidden] { display: none; }

.aviso-global {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 1000;
  max-width: 460px;
  margin: 0 auto;
  padding: 10px 14px;
  border: 2px solid var(--t-borde, #86bdea);
  border-radius: 10px;
  background: #fff;
  color: #12335a;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.aviso-global[hidden] { display: none; }

/* ---------- Guild ---------- */

.vista-guild { gap: 12px; }
.vista-guild .mensaje { color: #c0303a; }
.guild-panel { gap: 8px; }
.guild-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.guild-titulo { margin: 0; font-size: 1.25rem; font-weight: 900; font-style: italic; color: var(--t-azul); }
.guild-rol, .guild-rol-mini { font-size: 0.8rem; font-weight: 800; color: #4a6f9a; }
.guild-rol { padding: 2px 10px; border-radius: 999px; background: #fff; border: 2px solid var(--t-borde); }
.guild-datos { margin: 0; font-weight: 700; }
.vista-guild .nota, .vista-guild .subtitulo { color: #4a6f9a; margin: 0; }
.vista-guild .subtitulo { color: var(--t-texto); }
.guild-lista, .guild-ranking { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.guild-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  border: 2px solid var(--t-azul-claro);
  border-radius: 10px;
  background: #fff;
  color: var(--t-texto);
}
.guild-nombre { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.guild-acciones { display: inline-flex; gap: 6px; }
.btn-mini { padding: 6px 10px; font-size: 0.8rem; letter-spacing: 0; }
.guild-ranking-fila {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 2px solid var(--t-azul-claro);
  border-radius: 10px;
  background: #fff;
  color: var(--t-texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.guild-ranking-fila:disabled { cursor: default; opacity: 1; }
.guild-ranking-fila:not(:disabled):hover, .guild-ranking-fila.elegido { border-color: var(--t-azul); background: #eaf4fc; }
.guild-ranking-fila.mio { border-color: #2e9e6b; }
.rk-puesto { font-weight: 900; color: var(--t-azul); }
.rk-nombre { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.rk-dato { font-size: 0.85rem; font-weight: 700; color: #4a6f9a; }
.guild-ranking li:nth-child(-n + 3) .rk-puesto { color: #a8650a; }
.guild-confirmar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 2px; padding: 8px 10px; border-radius: 10px; background: #fff; color: var(--t-texto); }
.guild-confirmar p { margin: 0; font-weight: 700; }
.guild-form { display: flex; flex-wrap: wrap; gap: 8px; }
.guild-form input { flex: 1; min-width: 140px; }
.guild-premio { margin-top: 8px; }
.vista-guild input[type="text"] { border: 2px solid var(--t-borde); background: #fff; color: var(--t-texto); }

/* Nombre del Guild debajo del nombre del jugador, y copa / medalla sobre el personaje. */
.guild-tag {
  display: block;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b8770d;
}
.sprite-nombre .guild-tag { color: #ffe08a; font-size: 0.62rem; }
.sprite-insignia {
  position: absolute;
  bottom: calc(var(--celda, 40px) * 1.75);
  left: 50%;
  z-index: 3;
  width: calc(var(--celda, 40px) * 0.5);
  height: calc(var(--celda, 40px) * 0.5);
  transform: translateX(-50%);
  font-size: calc(var(--celda, 40px) * 0.42);
  line-height: 1;
  text-align: center;
  pointer-events: none;
}
.sprite-insignia img { width: 100%; height: 100%; object-fit: contain; }
.insignia-fila { position: static; display: inline-block; width: 1.2em; height: 1.2em; font-size: 1rem; transform: none; }

/* Guild Wars */
.guildwars-banner {
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #b8770d, #8a5608);
  color: #fff;
  font-weight: 900;
  text-align: center;
}
.guildwars-banner[hidden] { display: none; }
.fila-guildwars .fila-sala-titulo { color: #b8770d; }
.panel-staff { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px; border: 2px dashed var(--t-borde, #86bdea); border-radius: 12px; }
.panel-staff[hidden] { display: none; }

/* ---------- fondo y banner de las salas de duelo (los sube el administrador) ---------- */

/* Fondo general: sala de espera, duelo y Blood Castle. Solo se activa si hay imagen. */
body.tema-claro.en-sala-duelo.con-fondo-duelo {
  background-image: var(--duelos-fondo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Para que el texto se lea sobre cualquier imagen, lo que no tiene panel propio lleva un velo claro. */
.con-fondo-duelo #vista-sala,
.con-fondo-duelo #vista-castillo {
  padding: 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.78);
}
.con-fondo-duelo .vista-duelo .barra-turno,
.con-fondo-duelo .vista-duelo .mensaje:not(:empty) {
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.78);
}

/* Banner adicional en la parte inferior de las salas (el duelo lo lleva debajo del botón Rendirse). */
.banner-chat {
  display: block;
  width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: contain;
  border-radius: 6px;
}

/* ---------- tema negro: textos legibles sobre el fondo negro ---------- */

/* 1) Texto suelto sobre el fondo negro: los colores oscuros de antes se aclaran. */
.tema-claro .subtitulo { color: #a9bcff; }
.titulo-menu { color: #fff; }
.titulo-admin { color: #b4c2ff; }
.tema-claro .nota-alerta { color: #ffb347; }
.tema-claro .btn-secundario { color: #fff; border-color: #aab3c9; }
.vista-tienda .mensaje,
.vista-vestuario .mensaje,
.vista-guild .mensaje { color: #ff8f98; }
.vista-tienda .mensaje.mensaje-ok,
.vista-vestuario .mensaje.mensaje-ok { color: #5be3a1; }
.vista-vestuario .nota { color: #b9cdee; }
.vista-vestuario .piezas-grupo { color: #8fc0ff; }

/* 2) Paneles claros (tienda, vestuario, Guild): conservan su fondo azul claro, así que dentro de ellos
   el texto vuelve a ser oscuro, con los mismos colores de siempre. */
.tema-claro :where(.tienda-panel,
  .tienda-item,
  .tienda-rejilla,
  .tienda-hueco,
  .guild-panel,
  .guild-fila,
  .guild-ranking-fila,
  .guild-confirmar,
  .vista-vestuario .vestidor,
  .vista-vestuario .formulario,
  .vista-vestuario .mazos,
  .vista-vestuario .ajuste,
  .vista-vestuario .mazo-ranura,
  .aviso-global,
  .sprite-burbuja,
  .tema-claro .aviso,
  .tema-claro .aviso-ok) {
  --texto: #0b1630;
  --texto-suave: #35456a;
  --error: #b3242f;
  --oro: #8a5a00;
  --c-ataque: #c4351f;
  --c-defensa: #1a5fc2;
  --c-azul-claro: #2f3fa0;
  --c-peligro: #b3243a;
}
.tema-claro :where(.tienda-panel,
  .tienda-item,
  .tienda-rejilla,
  .tienda-hueco,
  .guild-panel,
  .guild-fila,
  .guild-ranking-fila,
  .guild-confirmar,
  .vista-vestuario .vestidor,
  .vista-vestuario .formulario,
  .vista-vestuario .mazos,
  .vista-vestuario .ajuste,
  .vista-vestuario .mazo-ranura) .subtitulo,
.tema-claro :where(.tienda-panel,
  .tienda-item,
  .tienda-rejilla,
  .tienda-hueco,
  .guild-panel,
  .guild-fila,
  .guild-ranking-fila,
  .guild-confirmar,
  .vista-vestuario .vestidor,
  .vista-vestuario .formulario,
  .vista-vestuario .mazos,
  .vista-vestuario .ajuste,
  .vista-vestuario .mazo-ranura) .subtitulo-chico { color: var(--t-texto); }
.tema-claro :where(.tienda-panel,
  .tienda-item,
  .tienda-rejilla,
  .tienda-hueco,
  .guild-panel,
  .guild-fila,
  .guild-ranking-fila,
  .guild-confirmar,
  .vista-vestuario .vestidor,
  .vista-vestuario .formulario,
  .vista-vestuario .mazos,
  .vista-vestuario .ajuste,
  .vista-vestuario .mazo-ranura) .nota { color: #4a6f9a; }
.tema-claro :where(.tienda-panel,
  .tienda-item,
  .tienda-rejilla,
  .tienda-hueco,
  .guild-panel,
  .guild-fila,
  .guild-ranking-fila,
  .guild-confirmar,
  .vista-vestuario .vestidor,
  .vista-vestuario .formulario,
  .vista-vestuario .mazos,
  .vista-vestuario .ajuste,
  .vista-vestuario .mazo-ranura) .mensaje { color: #c0303a; }
.tema-claro :where(.tienda-panel,
  .tienda-item,
  .tienda-rejilla,
  .tienda-hueco,
  .guild-panel,
  .guild-fila,
  .guild-ranking-fila,
  .guild-confirmar,
  .vista-vestuario .vestidor,
  .vista-vestuario .formulario,
  .vista-vestuario .mazos,
  .vista-vestuario .ajuste,
  .vista-vestuario .mazo-ranura) .mensaje.mensaje-ok { color: #1f7a4d; }

/* ---------- salas contra la IA (debajo del Tutorial) ---------- */

.salas-ia { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.salas-ia .subtitulo { margin: 0; }
.salas-ia-lista { display: flex; flex-direction: column; gap: 10px; }
.btn-sala-ia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--azul-borde);
  border-radius: 8px;
  background: linear-gradient(180deg, #3d6bf2, #2549c9);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.btn-sala-ia > span { font-size: 1.15rem; font-weight: 800; }
.btn-sala-ia > small { font-size: 0.8rem; opacity: 0.9; }
.btn-sala-ia[data-sala-ia='intermedio'] { background: linear-gradient(180deg, #1f9d6b, #14704c); }
.btn-sala-ia[data-sala-ia='experto'] { background: linear-gradient(180deg, #d98a1f, #a5620c); }
.btn-sala-ia[data-sala-ia='psicopata'] { background: linear-gradient(180deg, #b3243a, #7a1224); }
.btn-sala-ia:hover { filter: brightness(1.1); }
.btn-sala-ia:active { transform: translateY(1px); }

/* Con imagen propia (img/botones/<nombre>.png) el botón es solo la imagen; el texto queda para lectores de pantalla. */
.btn-sala-ia.con-imagen,
.btn-tutorial.con-imagen { padding: 0; border: 0; background: none; border-radius: 0; }
.btn-sala-ia.con-imagen img,
.btn-tutorial.con-imagen img { display: block; width: 100%; height: auto; }
.btn-sala-ia.con-imagen > span,
.btn-sala-ia.con-imagen > small,
.btn-tutorial.con-imagen > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-sala-ia.con-imagen,
.btn-tutorial.con-imagen { position: relative; }

/* Botón "Crear Sala" con imagen propia (img/botones/crear-sala.png): solo la imagen, con altura limitada junto al título. */
.btn-cinta.con-imagen { padding: 0; background: none; clip-path: none; position: relative; }
.btn-cinta.con-imagen:hover { background: none; filter: brightness(1.1); }
.btn-cinta.con-imagen img { display: block; height: 44px; width: auto; max-width: 100%; }
.btn-cinta.con-imagen > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ---------- fondos fijos (img/fondos/pagina.png y img/fondos/tablero.png) ---------- */

/* Fondo de todas las páginas, solo del ancho de un celular (igual que la columna del juego, 440 px).
   En pantallas más grandes queda centrado y a los lados se ve el negro de siempre. Va detrás de todo. */
body.con-fondo-pagina::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, 440px);
  transform: translateX(-50%);
  z-index: -1;
  background: url("img/fondos/pagina.png") center / cover no-repeat;
  pointer-events: none;
}
/* Si el administrador subió un fondo propio para las salas de duelo, ese tiene prioridad en ellas. */
body.con-fondo-pagina.en-sala-duelo.con-fondo-duelo::before { display: none; }

/* Zona del tablero: mismo fondo en todas las salas de juego (duelos, salas de IA y Blood Castle). */
.zona-tablero {
  padding: 8px 0;
  border-radius: 10px;
  overflow: hidden;
}
body.con-fondo-tablero .zona-tablero {
  background: #0b0e16 url("img/fondos/tablero.png") center / cover no-repeat;
}

/* ======================================================================
   Rediseño: Página principal, Arena de duelo y Sala de reuniones
   ====================================================================== */

/* Franja azul con letras blancas (títulos de sección) */
.franja {
  margin: 0;
  padding: 7px 12px;
  background: #3b52ff;
  color: #fff;
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
}
.franja-una-linea { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(0.85rem, 4.4vw, 1.05rem); }
.nota-franja { margin: 0; text-align: center; }

/* Página principal: logo + perfil reducido */
.inicio-cabecera { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.inicio-cabecera .logo { margin: 0; align-items: center; }
.inicio-cabecera .logo img,
.inicio-cabecera .logo svg { width: 100%; }
.ficha-compacta { gap: 8px; min-width: 0; padding: 6px 8px; border-left-width: 4px; overflow: hidden; }
.ficha-compacta .avatar { width: 44px; height: 44px; }
.ficha-compacta .ficha-avatar { flex: none; }
.ficha-compacta .ficha-datos { min-width: 0; flex: 1; }
.ficha-compacta p { margin: 0; font-size: 0.72rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha-compacta .ficha-nombre { font-size: 0.95rem; }
.ficha-compacta .marcador { margin: 0; }

/* Botones en columna (izquierda) + imagen de noticias (derecha) */
.inicio-cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.inicio-cuerpo .menu-principal { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.inicio-cuerpo .btn-tile:not(.con-imagen) { min-height: 68px; }
.inicio-noticias { position: relative; min-height: 260px; border: 2px solid var(--azul-borde); background: var(--panel); overflow: hidden; }
.inicio-noticias img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inicio-noticias-vacio { position: absolute; inset: 0; display: grid; place-items: center; color: var(--texto-suave); }

/* 3 banners horizontales, uno debajo de otro */
.banners-lista { display: flex; flex-direction: column; gap: 10px; }
.banners-lista img { display: block; width: 100%; aspect-ratio: 10 / 3; object-fit: cover; border: 2px solid var(--azul-borde); background: var(--panel); }

/* Arena de duelo */
.vista-arena .lista-salas { height: 260px; max-height: none; scrollbar-gutter: stable; }
.eventos-especiales { display: flex; flex-direction: column; gap: 8px; }
.eventos-especiales .btn-tutorial { margin-top: 0; }
.eventos-especiales .salas-ia-lista { gap: 8px; }
.btn-crear { margin-top: 0; }

/* Sala de reuniones */
.vista-reuniones .reunion { gap: 10px; }

/* Panel de administración de imágenes: mapa de ubicación */
.banner-ranura-noticias img { max-width: 220px; aspect-ratio: 7 / 10; align-self: center; }
.banner-ubicacion { margin: 0; font-size: 0.85rem; line-height: 1.35; }
.mapa-inicio { display: flex; flex-direction: column; gap: 3px; width: 150px; padding: 4px; border: 1px solid #2a3040; background: #0b0e16; align-self: center; font-size: 0.55rem; text-align: center; }
.mapa-caja, .mapa-franja { padding: 2px; border: 1px solid #55607a; color: #b9c4ff; }
.mapa-cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.mapa-botones { height: 38px; display: grid; place-items: center; }
.mapa-noticias { height: 38px; display: grid; place-items: center; }
.mapa-franja { background: #3b52ff; color: #fff; border-color: #3b52ff; }
.mapa-resaltada { background: #ffd23f; border-color: #ffd23f; color: #101626; font-weight: 800; }

/* ---------- Diamantes y bonos de las piezas ---------- */
.diamante {
  display: inline-block;
  width: 0.95em;
  height: 0.85em;
  vertical-align: -0.1em;
  background: linear-gradient(135deg, #bff6ff 0%, #31c6f0 45%, #1478c8 100%);
  clip-path: polygon(50% 100%, 0 36%, 20% 0, 80% 0, 100% 36%);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}
.stat-mov { color: #8be28b; }
.stat-ene { color: #ffd23f; }
.stat-oro { color: #ffb347; }
.tienda-moneda { display: flex; gap: 6px; margin: 4px 0; }
.tienda-moneda-opcion { flex: 1; padding: 6px 4px; border: 2px solid var(--azul-borde); border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 0.8rem; cursor: pointer; }
.tienda-moneda-opcion[aria-checked='true'] { background: #3b52ff; border-color: #fff; color: #fff; font-weight: 800; }
.tienda-item-stats { flex-wrap: wrap; }


/* ======================================================================
   Duelo: pantalla fija (tablero siempre a la vista)
   Arriba: turno + tablero (fijos). Centro: perfiles lado a lado, mano y resumen (con scroll si
   hace falta). Abajo: botones (fijos).
   ====================================================================== */

.vista-duelo:not([hidden]) {
  /* Ocupa exactamente la pantalla: nada obliga a bajar para ver el tablero. */
  height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  min-height: 0;
  overflow: visible; /* el tablero puede llegar a los bordes de la pantalla sin recortarse */
  gap: 6px;
}

.duelo-fijo { flex: none; display: flex; flex-direction: column; gap: 4px; }
.duelo-fijo .barra-turno { padding: 0 2px; }
.duelo-fijo .turno,
.duelo-fijo .reloj { font-size: 1.05rem; line-height: 1.2; }

/* El tablero se achica solo para caber en ~36% de la altura de la pantalla (y en el ancho).
   Casillas grandes; la cabeza de las figuras necesita menos aire arriba (1,3 casillas). */
.vista-duelo .escenario {
  --cabeza: calc(var(--celda) * 1.3);
  --celda: min(
    var(--celda-base),
    calc((min(100vw, 440px) - 12px) / (0.70711 * var(--suma)) - var(--hueco)),
    calc((36dvh - 0.35355 * var(--suma) * var(--hueco)) / (1.6 + 0.35355 * var(--suma)))
  );
}

/* Personajes más pequeños que las casillas (0,9 x 1,35 casillas). */
.vista-duelo .escenario .sprite-cuerpo {
  width: calc(var(--celda) * 0.9);
  height: calc(var(--celda) * 1.35);
}
.vista-duelo .escenario .sprite-marca { bottom: calc(40% + var(--celda) * 1.35 + 2px); }

/* El tablero puede usar casi todo el ancho de la pantalla (sin recortarse en los bordes). */
.vista-duelo .zona-tablero { margin: 0 -14px; padding: 2px 0; overflow: visible; }

/* Zona central: lo único que se desplaza si la pantalla es muy baja. */
.duelo-centro {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.duelo-centro > * { flex: none; }
.duelo-centro .resultado { order: -1; }

/* Perfiles: rival a la izquierda, tú a la derecha. */
.duelo-perfiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}
.duelo-perfiles > div { min-width: 0; }
.duelo-perfiles .equipo-hud-multi { grid-template-columns: minmax(0, 1fr); gap: 4px; }

.duelo-perfiles .hud {
  position: relative;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid #2a3040;
  border-left-width: 4px;
}
.duelo-perfiles .hud-cabecera { gap: 7px; }
.duelo-perfiles .hud-nombre { font-size: 0.92rem; line-height: 1.15; }
.duelo-perfiles .hud-sub {
  overflow: hidden;
  font-size: 0.7rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duelo-perfiles .hud-lado .avatar { width: 36px; height: 36px; }
.duelo-perfiles .hud-lado .hud-sub.hud-stats { color: var(--oro); font-weight: 700; }
.duelo-perfiles .marcador { margin: 0; font-size: 0.72rem; }
.duelo-perfiles .hud-lado .barras { grid-template-columns: minmax(0, 1fr); gap: 3px; margin-top: 4px; }
.duelo-perfiles .hud-lado .barra { height: 18px; }
.duelo-perfiles .hud-lado .barra-texto { font-size: 0.76rem; }
.duelo-perfiles .hud-jefe .jefe-emoji { font-size: 1.6rem; }

/* Cartas boca abajo del rival: pegadas a la esquina para no quitar ancho al nombre. */
.duelo-perfiles .dorsos { position: absolute; top: 5px; right: 8px; }
.duelo-perfiles .dorso { width: 9px; height: 13px; margin-left: -4px; }
.duelo-perfiles .hud-lado:has(.dorsos) .hud-nombre { padding-right: 34px; }

/* Mano de cartas: aparece (sube) cuando empieza tu turno. */
.mano-zona { min-height: 36px; }
.mano-zona.mano-activa { min-height: 116px; animation: mano-entra 0.35s ease-out; }
.mano-zona .mano { padding-top: 4px; }
.mano-espera { margin: 0; padding: 8px 2px; font-size: 0.85rem; text-align: center; }

@keyframes mano-entra {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Resumen de jugadas: más bajo (unas 2 líneas) y con scroll propio. */
.vista-duelo .eventos {
  min-height: 0;
  max-height: calc(2 * 1.25em + 8px);
  padding: 3px 10px;
  overflow-y: auto;
  font-size: 0.78rem;
  line-height: 1.25;
  scrollbar-width: thin;
}

.vista-duelo .chat-log { max-height: 90px; min-height: 40px; }

/* Pie: mensajes breves y botones, siempre a la vista. */
.duelo-pie { flex: none; display: flex; flex-direction: column; gap: 2px; }
.duelo-pie .mensaje { margin: 0; font-size: 0.85rem; line-height: 1.25; }
.duelo-pie .mensaje:empty { display: none; }
.duelo-pie .acciones { position: static; margin: 0 -20px; padding: 6px 20px 2px; }

@media (prefers-reduced-motion: reduce) {
  .mano-zona.mano-activa { animation: none; }
}

/* Fichas angostas: nivel/arma y ataque/defensa pasan a otra línea en vez de cortarse. */
.duelo-perfiles .hud-lado .hud-sub { overflow: visible; text-overflow: clip; white-space: normal; }
.duelo-perfiles .hud-lado .avatar { width: 32px; height: 32px; }

/* ---------- música y sonidos ---------- */

.audio-control {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.audio-boton {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(13, 20, 80, 0.8);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.audio-aviso {
  margin: 0;
  padding: 6px 10px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  background: rgba(13, 20, 80, 0.9);
  color: #fff;
  font-size: 0.8rem;
  max-width: calc(100vw - 70px);
  pointer-events: none; /* el toque pasa a la pantalla y así se activa la música */
}
.audio-aviso[hidden] { display: none; }
.audio-boton:hover { background: rgba(13, 20, 80, 0.95); }
.audio-boton:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }
.audio-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(260px, calc(100vw - 24px));
  padding: 12px;
  border: 2px solid #86bdea;
  border-radius: 10px;
  background: #0d1450;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.audio-panel[hidden] { display: none; }
.audio-titulo { margin: 0; font-size: 1rem; font-weight: 900; }
.audio-fila { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; font-weight: 700; }
.audio-fila input[type='range'] { width: 100%; }
.audio-cancion, .audio-nota { margin: 0; font-size: 0.8rem; color: #c6cee2; overflow-wrap: anywhere; }

/* ---------- descripción de la carta y botón JUGAR: compactos, encima de la mano ---------- */
#duelo-detalle {
  min-height: 3em; /* reserva su alto para que la mano no salte al elegir una carta */
  gap: 2px;
  padding: 4px 8px;
  border-radius: 8px;
  border-left-width: 4px;
}
#duelo-detalle[hidden],
#duelo-detalle:empty { display: none; }
#duelo-detalle.detalle-fila { gap: 8px; }
#duelo-detalle .detalle-titulo { font-size: 0.85rem; line-height: 1.2; }
#duelo-detalle .detalle-texto { font-size: 0.78rem; line-height: 1.25; }
#duelo-detalle .nota { margin: 0; font-size: 0.78rem; line-height: 1.25; }
#duelo-detalle .btn-jugar { min-width: 72px; padding: 7px 12px; font-size: 0.9rem; }


/* ---------- animaciones con imágenes del administrador ---------- */

/* Imagen de pie sobre una casilla afectada (por ejemplo fuego de Inferno o escudo de defensa). */
.escenario .fx-casilla {
  --xr: calc((var(--c, 0) - (var(--columnas, 5) - 1) / 2) * var(--paso));
  --yr: calc((var(--f, 0) - (var(--filas, 6) - 1) / 2) * var(--paso));
  position: absolute;
  left: calc(50% + 0.70711 * (var(--xr) + var(--yr)));
  top: calc(var(--cabeza) + var(--alto-iso) / 2 + 0.35355 * (var(--yr) - var(--xr)));
  width: calc(var(--celda) * 1.1);
  height: calc(var(--celda) * 1.1);
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -62%);
  animation: fx-casilla-aviso 1.8s ease-out both;
}
@keyframes fx-casilla-aviso {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.5); }
  15% { opacity: 1; transform: translate(-50%, -62%) scale(1.15); }
  35% { transform: translate(-50%, -66%) scale(0.95); }
  55% { transform: translate(-50%, -62%) scale(1.05); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -75%) scale(1); }
}

/* Imagen que viaja de un personaje a otro (la espada del ataque). Sale del tablero girado, sin torcerse con él. */
.escenario .fx-proyectil {
  position: absolute;
  z-index: 70;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .escenario .fx-casilla { animation: fx-casilla-quieto 1.8s linear both; }
  @keyframes fx-casilla-quieto {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; }
  }
}


/* ---------- logo del juego sobre el personaje de administradores y moderadores ---------- */

/* Pequeño y flotando por encima de la cabeza (y de la flecha de turno): no tapa al personaje ni se puede tocar. */
.sprite-logo-staff {
  position: absolute;
  bottom: calc(var(--celda, 40px) * 1.75 + 14px);
  left: 50%;
  z-index: 4;
  width: calc(var(--celda, 40px) * 0.5);
  height: calc(var(--celda, 40px) * 0.5);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.95;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.sprite-logo-staff img,
.sprite-logo-staff svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.logo-staff-admin { filter: drop-shadow(0 0 3px #ffd23f) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.logo-staff-moderador { filter: drop-shadow(0 0 3px #bfd7ff) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }

/* Si también lleva la copa o medalla del Guild, el logo se apila encima. */
.sprite-staff-con-insignia .sprite-logo-staff { bottom: calc(var(--celda, 40px) * 2.25 + 14px); }

/* En el tablero girado la cabeza está más abajo (figura de 1,35 casillas). */
.vista-duelo .escenario .sprite-logo-staff { bottom: calc(var(--celda) * 1.75 + 14px); }
.vista-duelo .escenario .sprite-staff-con-insignia .sprite-logo-staff { bottom: calc(var(--celda) * 2.25 + 14px); }

/* Sala de Reuniones: el logo va encima del nombre, y el globo del chat sube para no taparlo. */
.sprite-staff-en-sala .sprite-logo-staff { bottom: calc(40% + var(--celda, 40px) * 1.8 + 30px); }
.sprite-staff-en-sala .sprite-burbuja { bottom: calc(40% + var(--celda, 40px) * 1.8 + 30px + var(--celda, 40px) * 0.55); }

/* ---------- fila de estadísticas del perfil (ataque, defensa, movimiento, vida) ---------- */
/* Reemplaza la línea de texto "Ataque · Defensa" que había antes: una sola línea, mismo alto. */
.hud-statsfila {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: space-between;
  gap: 2px 4px;
  margin-top: 2px;
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: nowrap;
}
.hud-statsfila .stat { display: inline-flex; align-items: baseline; gap: 2px; min-width: 0; }
.hud-statsfila .stat-et { font-size: 0.58rem; font-style: normal; font-weight: 700; letter-spacing: 0.02em; color: var(--c-azul-claro); }
.hud-statsfila .stat-val { font-weight: 800; color: var(--oro); }
.hud-statsfila .stat-atq .stat-val { color: #ff9a8a; }
.hud-statsfila .stat-def .stat-val { color: #8ac8ff; }
.hud-statsfila .stat-mov .stat-val { color: #9cf0b4; }
.hud-statsfila .stat-vid .stat-val { color: #ff9aa8; }
.hud-mini .hud-statsfila { margin-top: 1px; font-size: 0.64rem; }
.hud-mini .hud-statsfila .stat-et { font-size: 0.52rem; }
.hud-eliminado .hud-statsfila { display: none; }


/* ======================================================================
   TIENDA - diseño para celular (según tienda_interfaz.png)
   Arriba: carrito (izquierda) y vista previa + total + pago (derecha).
   Abajo: filtro y lista de piezas con scroll propio (flechas arriba y abajo).
   ====================================================================== */

body.tema-claro:has(.vista-tienda:not([hidden])) { background-color: #cfe6f5; }
.pantalla:has(.vista-tienda:not([hidden])) { max-width: 600px; padding-left: 10px; padding-right: 10px; }

.vista-tienda {
  --t-fondo: #cfe6f5;
  --t-borde: #86bdea;
  --t-texto: #12335a;
  --t-azul: #2e6fc0;
  --t-azul-claro: #5da4e6;
  --t-titulo: #2a4fd0;
  --t-precio: #b8283c;
  gap: 10px;
  color: var(--t-texto);
}

/* Los textos de dentro vuelven a ser oscuros sobre el fondo azul claro. */
.vista-tienda .tienda {
  --texto: #0b1630;
  --texto-suave: #35456a;
  --error: #b3242f;
  --oro: #8a5a00;
  --c-ataque: #c4351f;
  --c-defensa: #1a5fc2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  color: var(--t-texto);
}

/* Título y pestañas */
.vista-tienda .cinta-tienda {
  padding: 4px 16px 6px;
  border: 2px solid #1b2a66;
  background: var(--t-titulo);
  clip-path: none;
  font-size: clamp(2.2rem, 11vw, 3.2rem);
  line-height: 1.1;
}

.vista-tienda .pestanas { gap: 6px; }
.vista-tienda .pestana {
  min-height: 46px;
  padding: 6px 4px;
  border: 2px solid #1b2a66;
  border-radius: 2px;
  background: var(--t-titulo);
  color: #fff;
  font-size: clamp(1rem, 4.6vw, 1.3rem);
}
.vista-tienda .pestana.activa { background: #1c3aa8; border-color: #1b2a66; box-shadow: inset 0 -4px 0 #ffd23f; }

/* Parte de arriba: dos columnas */
.tienda-superior {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 10px;
  align-items: start;
}

.tienda-carrito { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tienda-carrito .tienda-rotulo {
  padding: 2px 10px;
  border: 2px solid #1b2a66;
  border-radius: 0;
  background: var(--t-azul);
  font-size: clamp(1.05rem, 5vw, 1.4rem);
  letter-spacing: 0;
  text-transform: none;
}

.vista-tienda .tienda-cesta {
  gap: 6px;
  padding: 8px;
  border: 2px solid #2b3a52;
  border-radius: 8px;
  background: var(--t-fondo);
}

.vista-tienda .tienda-hueco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 4px;
  min-height: 52px;
  padding: 4px 6px;
  border: 2px dashed var(--t-azul-claro);
  border-radius: 6px;
  background: #e6f2fb;
}
.vista-tienda .tienda-hueco-lleno { border-style: solid; background: #fff; }
.vista-tienda .tienda-hueco-nombre { font-size: 0.85rem; }
.vista-tienda .tienda-quitar { width: 28px; height: 28px; font-size: 1.1rem; }
.vista-tienda .tienda-hueco-precio { grid-column: 1 / -1; font-size: 0.85rem; }

/* Columna derecha */
.tienda-derecha { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.tienda-vista-caja {
  padding: 5px;
  border: 2px solid #1b2a66;
  border-radius: 12px;
  background: #d9ecfa;
}
.vista-tienda .tienda-vista-caja .vestidor-escena {
  --celda: 48px;
  --hueco: 3px;
  padding: calc(var(--celda) * 1.75) 0 8px;
  border: 2px solid #9cc8ee;
  border-radius: 8px;
  background: #f2f9ff;
}
.tienda-leyenda {
  margin: 4px 2px 0;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.25;
  color: #4a6f9a;
}

.tienda-total-caja { display: flex; align-items: center; gap: 8px; }
.tienda-total-caja[hidden] { display: none; }
.tienda-total-rotulo { font-size: clamp(1.3rem, 6vw, 1.9rem); line-height: 1.1; color: #333; }
.tienda-total-valores { display: flex; flex-direction: column; gap: 2px; font-size: 1.15rem; font-weight: 800; }
.tienda-total-fila { display: flex; align-items: center; gap: 6px; opacity: 0.6; }
.tienda-total-fila .moneda, .tienda-total-fila .diamante { font-size: 1.25em; }
.tienda-total-activa { opacity: 1; }
.tienda-total-num { font-variant-numeric: tabular-nums; color: #222; }

.vista-tienda .tienda-moneda { display: flex; gap: 6px; margin: 0; }
.vista-tienda .tienda-moneda[hidden] { display: none; }
.vista-tienda .tienda-moneda-opcion {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  padding: 4px 4px;
  border: 2px solid var(--t-azul);
  border-radius: 6px;
  background: #eaf4fc;
  color: var(--t-texto);
  font-size: 0.8rem;
  line-height: 1.2;
}
.vista-tienda .tienda-moneda-opcion[aria-checked='true'] {
  border-color: #fff;
  background: #3b52ff;
  box-shadow: 0 0 0 2px #3b52ff;
  color: #fff;
  font-weight: 800;
}
.vista-tienda .tienda-oro { font-size: 0.8rem; font-weight: 700; }
.vista-tienda .tienda-oro .tienda-precio { margin-right: 2px; font-size: 0.85rem; color: var(--t-texto); }

/* Avisos y botón COMPRAR (a todo el ancho, como en la imagen) */
.vista-tienda .tienda-total { min-height: 0; font-size: 0.9rem; }
.vista-tienda .tienda .mensaje { min-height: 0; color: #c0303a; }
.vista-tienda .tienda .mensaje.mensaje-ok { color: #1f7a4d; }
.vista-tienda .btn.tienda-comprar {
  min-height: 50px;
  border: 0;
  border-radius: 6px;
  background: var(--t-azul);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}
.vista-tienda .btn.tienda-comprar:disabled { background: #6aaedb; color: #e8f4ff; opacity: 1; }
.vista-tienda .btn.tienda-comprar[hidden] { display: none; }

/* Filtro */
.tienda-filtro { display: flex; align-items: center; gap: 12px; }
.tienda-filtro-rotulo { font-size: clamp(1.6rem, 8vw, 2.3rem); font-weight: 800; line-height: 1; color: #333; }
.tienda-filtro select {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 56px 0 14px;
  border: 2px solid var(--t-azul);
  border-radius: 0;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect width='48' height='48' fill='%232e6fc0'/><path d='M10 14h28L24 36z' fill='white'/></svg>") no-repeat right center / 50px 100%;
  color: #222;
  font: inherit;
  font-size: 1.4rem;
  -webkit-appearance: none;
  appearance: none;
}

.tienda-mas summary { padding: 4px 2px; font-size: 0.9rem; font-weight: 700; color: var(--t-texto); cursor: pointer; }
.tienda-mas[open] summary { margin-bottom: 6px; }

/* Lista con scroll propio */
.tienda-lista-caja {
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 2px solid var(--t-borde);
  border-radius: 12px;
  background: #e6f2fb;
}

.vista-tienda .tienda-rejilla {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  height: min(62dvh, 520px);
  min-height: 280px;
  padding: 4px;
  overflow-y: auto;
  border-radius: 0;
  background: transparent;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vista-tienda .tienda-rejilla::-webkit-scrollbar { display: none; }
.vista-tienda .tienda-vacio { margin: auto 0; padding: 12px; }

.tienda-scroll {
  display: flex;
  flex: 0 0 34px;
  flex-direction: column;
  border: 2px solid var(--t-azul);
  background: #e6f2fb;
}
.tienda-scroll-flecha {
  flex: 0 0 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: var(--t-azul);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.tienda-scroll-flecha:disabled { opacity: 0.45; cursor: default; }
.tienda-scroll-pista { position: relative; flex: 1; min-height: 0; background: #f3f9fe; }
.tienda-scroll-pulgar {
  position: absolute;
  inset: 0 0 auto 0;
  background: var(--t-azul-claro);
  cursor: grab;
  touch-action: none;
}

/* Tarjeta de cada pieza */
.vista-tienda .tienda-item {
  flex: 0 0 auto;
  width: 100%;
  border: 2px solid var(--t-azul-claro);
  border-radius: 10px;
  background: #fff;
  text-align: left;
}
.vista-tienda .tienda-item-nombre {
  align-self: stretch;
  padding: 2px 10px 3px;
  background: var(--t-azul);
  font-size: 1.1rem;
  font-weight: 800;
}
.tienda-item-cuerpo { display: flex; align-self: stretch; align-items: stretch; min-height: 88px; }
.vista-tienda .tienda-item-foto {
  flex: 0 0 28%;
  height: 88px;
  aspect-ratio: auto;
  padding: 4px;
}
.vista-tienda .tienda-nuevo { top: 2px; left: 2px; padding: 0 6px; font-size: 0.6rem; }

.vista-tienda .tienda-item-stats {
  flex: 0 0 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1px;
  padding: 0 8px;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}
.vista-tienda .tienda-item-stats .stat-mov { color: #52b852; }
.vista-tienda .tienda-item-stats .stat-ene { color: #d19a00; }
.vista-tienda .tienda-item-stats .stat-oro { color: #f0a030; }
.vista-tienda .tienda-item-stats-carta { flex: 1 1 0; min-width: 0; white-space: normal; font-size: 0.85rem; }
.tienda-item-desc {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: #35456a;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.vista-tienda .tienda-item-pie {
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  padding: 4px 8px;
  border-left: 2px solid var(--t-azul-claro);
}
.vista-tienda .tienda-item-pie .tienda-precio-linea { display: flex; align-items: center; gap: 6px; font-size: 1.3rem; line-height: 1.2; color: var(--t-precio); }
.tienda-precio-linea .moneda, .tienda-precio-linea .diamante { flex: none; font-size: 1.15em; }
.vista-tienda .tienda-item-pie .tienda-etiqueta { align-self: center; }

.vista-tienda .enlace { color: var(--t-texto); }
.vista-tienda .enlace:hover { color: var(--t-azul); }

@media (min-width: 420px) {
  .vista-tienda .tienda-vista-caja .vestidor-escena { --celda: 58px; }
}