body {
    font-family: system-ui, sans-serif;
    background: #2b2018;
    color: #f0e6d2;
    max-width: 1600px;
    margin: 20px auto;
    padding: 0 20px;
  }
  h1 { color: #d4a95a; }
  .recursos {
    display: flex;
    gap: 20px;
    background: #3d2f22;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 30px;
  }
  .recurso {
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .emoji-recurso { font-size: 32px; }
  body { font-size: 16px; line-height: 1.5; }
  h1, h2, h3 { letter-spacing: 0.3px; }
  .edificio {
    background: #3d2f22;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .edificio-info h3 { margin: 0 0 5px 0; }
  .edificio-info p { margin: 0; color: #c9b48f; font-size: 14px; }
  button {
    background: #d4a95a;
    color: #2b2018;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
  }
  button:disabled {
    background: #6b5b45;
    cursor: not-allowed;
  }
  .construyendo { color: #7cd47c; font-size: 13px; }
  h2 { color: #d4a95a; margin-top: 40px; }
  .fila-con-sidebar {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  .menu-horizontal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 14px;
  }
  .menu-horizontal button {
    background: #3d2f22;
    border: 1px solid #6b5b45;
    color: #f0e6d2;
    padding: 10px 8px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
  }
  .menu-horizontal button:hover { border-color: #d4a95a; }
  .menu-horizontal button.inactivo { opacity: 0.4; cursor: default; }
  .menu-horizontal button.inactivo:hover { border-color: #6b5b45; }
  .columna-sidebar {
    flex: 0 0 190px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sidebar-misiones {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .casilla-mision {
    background-size: cover;
    background-position: center 15%;
    border-radius: 10px;
    border: 1px solid #6b5b45;
    aspect-ratio: 3/2;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 6px 8px;
  }
  .casilla-mision::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.85));
  }
  .casilla-mision:hover { border-color: #d4a95a; }
  .casilla-mision.completable { border-color: #7cd47c; box-shadow: 0 0 8px rgba(124,212,124,0.5); }
  .casilla-mision.bloqueada { filter: grayscale(1) brightness(0.5); cursor: default; }
  .casilla-mision .nombre-pj { font-size: 11px; font-weight: bold; position: relative; z-index: 1; }
  .casilla-mision .titulo-mision-pj { font-size: 10px; color: #d8cbb0; position: relative; z-index: 1; }
  .fila-principal {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  .fila-principal .fondo-pueblo {
    flex: 1;
    transition: flex-basis 0.5s ease, aspect-ratio 0.5s ease;
  }
  .fila-principal.modo-cuartel-general {
    position: relative;
    background-image: url('images/edificios/marco_cuartel_general.jpg');
    background-size: 100% 100%;
    aspect-ratio: 1672/940;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    align-items: stretch;
  }
  .fila-principal.modo-cuartel-general .fondo-pueblo {
    position: absolute;
    left: 6%; top: 23.4%; width: 43.6%; height: 65%;
    aspect-ratio: auto;
    animation: none;
    flex: none;
    border-radius: 4px;
  }
  .fila-principal.modo-cuartel-general #edificios,
  .fila-principal.modo-cuartel-general #camino-guerreros {
    display: none;
  }
  .fila-principal.modo-cuartel-general #vista-cuartel-general {
    position: absolute;
    left: 50.8%; top: 23.4%; width: 42.5%; height: 65%;
    background: none;
    border: none;
    padding: 10px;
    overflow-y: auto;
  }
  .fila-principal.modo-cuartel-general .rejilla-cg {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .fila-principal.modo-cuartel-general .carta-cg .nombre-cg { font-size: 10px; padding: 2px 3px 0; }
  .fila-principal.modo-cuartel-general .carta-cg .nivel-cg { font-size: 9px; padding: 0 3px 3px; }
  .fila-principal.modo-cuartel-general #vista-cuartel-general h2 {
    display: none;
  }
  .fila-principal.modo-cuartel-general #vista-cuartel-general .btn-volver {
    position: absolute;
    top: -4px; right: 10px;
    z-index: 2;
    font-size: 11px;
    padding: 4px 8px;
  }
  .fondo-pueblo {
    position: relative;
    border-radius: 12px;
    background-size: 108% auto;
    background-position: center;
    aspect-ratio: 16/7;
    width: 100%;
    overflow: hidden;
    transition: background-image 0.3s;
    animation: kenBurnsPueblo 40s ease-in-out infinite alternate;
  }
  @keyframes kenBurnsPueblo {
    0%   { background-size: 105% auto; background-position: 48% 46%; }
    100% { background-size: 118% auto; background-position: 52% 54%; }
  }
  .vista-cuartel-general {
    flex: 1;
    background: #3d2f22;
    border: 1px solid #6b5b45;
    border-radius: 12px;
    padding: 16px;
    max-height: 620px;
    overflow-y: auto;
  }
  .rejilla-cofres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
  }
  .carta-cofre {
    border-radius: 12px;
    padding: 16px 10px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.15);
    background-size: cover;
    background-position: center;
    aspect-ratio: 3/4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .nombre-cofre { font-weight: bold; margin-top: 4px; text-shadow: 0 1px 3px #000; }
  .disponibilidad-cofre { font-size: 12px; color: #f0e6d2; margin-top: 4px; min-height: 16px; text-shadow: 0 1px 3px #000; }
  .coste-cofre { font-size: 13px; margin: 8px 0; text-shadow: 0 1px 3px #000; }
  .boton-abrir-cofre {
    width: 100%;
    font-weight: bold;
  }
  .rejilla-cg {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  .carta-cg {
    background: #2b2018;
    border: 1px solid #4a3c2c;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    /* Fuerza su propia capa de composición en el navegador — sin esto,
       Chrome puede mezclar fragmentos de tarjetas vecinas ("fantasmas")
       al hacer scroll en una rejilla con muchas imágenes recortadas y
       de esquinas redondeadas. */
    transform: translateZ(0);
    will-change: transform;
  }
  .carta-cg:hover { border-color: #d4a95a; }
  .carta-cg.bloqueada { opacity: 0.45; cursor: default; }
  .carta-cg img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
  .carta-cg .nombre-cg { font-size: 12px; font-weight: bold; padding: 4px 4px 0; }
  .carta-cg .nivel-cg { font-size: 11px; color: #c9b48f; padding: 0 4px; }
  .carta-cg button {
    width: calc(100% - 8px);
    margin: 6px 4px 6px;
    padding: 5px;
    font-size: 11px;
  }
  .menu-inferior {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #4a3c2c;
  }
  .menu-inferior button {
    flex: 1;
    min-width: 90px;
    background: #3d2f22;
    border: 1px solid #6b5b45;
    color: #f0e6d2;
    padding: 10px 6px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
  }
  .menu-inferior button:hover { border-color: #d4a95a; }
  .menu-inferior button.inactivo { opacity: 0.4; cursor: default; }
  .menu-inferior button.inactivo:hover { border-color: #6b5b45; }
  #camino-guerreros {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(20,15,10,0.6);
    color: #a89676;
    font-size: 11px;
    padding: 5px 9px;
    border-radius: 6px;
    border: 1px solid #5a4a35;
    cursor: pointer;
  }
  #camino-guerreros:hover { color: #d4a95a; border-color: #8a6d2f; }
  #boton-civilizacion {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: linear-gradient(180deg,#5c4429,#3a2a18);
    color: #f1cf79;
    font-size: 15px;
    font-weight: bold;
    padding: 9px 16px;
    border-radius: 8px;
    border: 2px solid #8a6d2f;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,.4);
  }
  #boton-civilizacion:hover { border-color: #d4a95a; box-shadow: 0 3px 14px rgba(241,207,121,.3); }
  .rejilla-edificios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
  }
  #edificios.rejilla-edificios {
    display: block;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
  }
  #edificios .tile-edificio {
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    padding: 10px;
  }
  #edificios .tile-edificio .emoji-tile { font-size: 40px; }
  #edificios .tile-edificio .nombre-tile { font-size: 15px; }
  .tile-entrada-principal {
    width: 190px;
    aspect-ratio: auto !important;
    margin: 0;
    padding: 8px 10px !important;
    background: rgba(20,15,10,0.72) !important;
    border: 1px solid #8a6d2f;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
  }
  .tile-entrada-principal .emoji-tile { font-size: 22px !important; margin-bottom: 2px !important; }
  .tile-entrada-principal .nombre-tile { font-size: 13px !important; }
  .tile-entrada-principal span:last-child { font-size: 10px !important; }
  .carta-tropa {
    background: #2b2018;
    border: 1px solid #6b5b45;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
  }
  .carta-tropa:hover { border-color: #d4a95a; }
  .carta-tropa.bloqueada { cursor: default; border-color: #8a3a3a; }
  .nombre-tropa {
    background: #3d2f22;
    font-size: 13px;
    font-weight: bold;
    padding: 6px 4px;
  }
  .imagen-tropa-wrap { position: relative; }
  .imagen-tropa { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
  .imagen-tropa.gris { filter: grayscale(1) brightness(0.45); }
  .imagen-tropa-generica {
    aspect-ratio: 4/3;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px;
    background: #1f1710;
  }
  .candado-tropa {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
  }
  .cantidad-tropa {
    font-size: 18px;
    font-weight: bold;
    color: #d4a95a;
    padding: 8px 4px;
  }
  .nivel-requerido-tropa {
    font-size: 11px;
    color: #e08a8a;
    padding: 8px 4px;
  }
  .tile-edificio {
    background: #3d2f22;
    border-radius: 8px;
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s;
  }
  .tile-edificio:hover { border-color: #d4a95a; }
  .tile-edificio.bloqueado { opacity: 0.5; cursor: default; }
  .tile-edificio.bloqueado:hover { border-color: transparent; }
  .tile-edificio .emoji-tile { font-size: 28px; display: block; margin-bottom: 6px; }
  .tile-edificio .nombre-tile { font-size: 13px; font-weight: bold; display: block; }
  .tile-edificio .nivel-tile { font-size: 12px; color: #c9b48f; }
  .tile-edificio .construyendo-tile { font-size: 11px; color: #7cd47c; display: block; margin-top: 3px; }
  #detalle-edificio {
    background: #3d2f22;
    padding: 20px;
    border-radius: 8px;
  }
  .btn-volver {
    background: transparent;
    color: #d4a95a;
    border: 1px solid #6b5b45;
    margin-bottom: 15px;
  }
  .tabla-maestra {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 14px;
  }
  .tabla-maestra th, .tabla-maestra td {
    text-align: left;
    padding: 8px 6px;
    border-bottom: 1px solid #4a3c2c;
  }
  .fila-clicable { cursor: pointer; }
  .fila-clicable:hover td { background: #3d2f22; }
  .tabla-maestra th { color: #d4a95a; }
  .fila-bloqueada { opacity: 0.5; }
  .columnas-batalla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .fila-input-tropa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #3d2f22;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 14px;
  }
  .fila-input-tropa input {
    width: 70px;
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #6b5b45;
    background: #2b2018;
    color: #f0e6d2;
    text-align: right;
  }
  .categoria-resultado {
    background: #3d2f22;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
  }
  .panel-comandante {
    background: #241b12;
    border: 1px solid #6b5b45;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .panel-comandante select, .panel-comandante input[type="number"] {
    background: #2b2018;
    color: #f0e6d2;
    border: 1px solid #6b5b45;
    border-radius: 4px;
    padding: 6px;
  }
  .rejilla-cartas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
    margin-top: 10px;
  }
  .carta-comandante {
    aspect-ratio: 2/3;
    border-radius: 10px;
    border: 2px solid #8a6d2f;
    background-size: cover;
    background-position: center 20%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.15s;
  }
  .carta-comandante:hover { transform: scale(1.04); border-color: #ffd876; }
  .carta-comandante .candado-comandante {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  }
  .carta-comandante .franja-nombre {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    color: #ffd876;
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    padding: 18px 4px 6px;
  }
  .carta-comandante .franja-nivel {
    position: absolute; top: 6px; right: 6px;
    background: rgba(0,0,0,0.7);
    color: #ffd876;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 10px;
  }
  .carta-comandante .badge-rareza {
    position: absolute; top: 6px; left: 6px;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    color: #2b2018;
    font-weight: bold;
    text-transform: uppercase;
  }
  .rareza-normal { background: #b0b0b0; }
  .rareza-epico { background: #7ec8e3; }
  .rareza-mitico { background: #c58cf0; }
  .rareza-legendario { background: #ffd876; }
  .modal-fondo {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
  }
  .modal-carta {
    background: #2b2018;
    border: 2px solid #8a6d2f;
    border-radius: 14px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
  }
  .tabs-modal {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .tab-modal {
    flex: 1;
    border-radius: 0;
    background: #1a130c;
    color: #c9b48f;
    border: none;
    padding: 10px;
  }
  .tab-modal.activo { background: #2b2018; color: #ffd876; font-weight: bold; }
  .modal-carta .imagen-cabecera {
    width: 100%;
    aspect-ratio: 2/3;
    background-size: cover;
    background-position: center 20%;
  }
  .modal-carta .imagen-cabecera.sin-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    background: linear-gradient(135deg, #3d2f22, #1a130c);
  }
  .modal-carta .contenido { padding: 18px 20px; }
  .habilidad-desplegable {
    background: #2b2018;
    border: 1px solid #6b5b45;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .habilidad-desplegable:hover { border-color: #d4a95a; }
  .habilidad-cabecera { display: flex; align-items: center; gap: 8px; }
  .habilidad-cabecera .flecha-desplegable { margin-left: auto; transition: transform 0.2s; color: #c9b48f; }
  .habilidad-desplegable.abierta .flecha-desplegable { transform: rotate(180deg); }
  .habilidad-descripcion {
    color: #c9b48f;
    font-size: 14px;
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, margin-top 0.25s ease;
  }
  .habilidad-desplegable.abierta .habilidad-descripcion {
    max-height: 300px;
    margin-top: 10px;
  }
  .modal-carta h2 { margin: 0 0 4px; color: #ffd876; }
  .tropas-disponibles {
    background: #3d2f22;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 12px;
  }
  .cola-item {
    background: #3d2f22;
    padding: 8px 15px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #7cd47c;
  }
  .nav {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  .nav button {
    background: #3d2f22;
    color: #f0e6d2;
    border: 1px solid #6b5b45;
  }
  .nav button.activo {
    background: #d4a95a;
    color: #2b2018;
  }
  .oculto { display: none; }
  .hex-mundo { cursor: pointer; transition: opacity 0.15s; }
  .hex-mundo:hover { opacity: 0.8; }
  .hex-parcela { cursor: default; }
  #panel-provincia {
    background: #3d2f22;
    padding: 20px;
    border-radius: 8px;
    margin-top: 15px;
  }
  #contenedor-mapa {
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 8px;
    background: #6b8e4e;
    cursor: grab;
    touch-action: none;
  }
  #contenedor-mapa.arrastrando { cursor: grabbing; }
  .etiqueta-aldea {
    font-size: 14px;
    fill: #fff;
    text-anchor: middle;
    paint-order: stroke;
    stroke: #000;
    stroke-width: 3px;
  }
  .info-mapa {
    display: flex;
    justify-content: space-between;
    color: #c9b48f;
    font-size: 13px;
    margin-top: 8px;
  }

/* --- Selector de aldeas (arriba a la izquierda, estilo Tribal Wars 2) --- */
.selector-aldea {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 10px 10px;
  user-select: none;
}
.flecha-aldea {
  background: #3a2c1d;
  color: #d4a95a;
  border: 1px solid #6b5b45;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.flecha-aldea:hover { background: #4a3c2c; }
.nombre-aldea-caja {
  position: relative;
  background: #2b2018;
  border: 1px solid #6b5b45;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 22px;
  font-weight: bold;
  color: #f1cf79;
  font-family: Georgia, serif;
}
.nombre-aldea-caja:hover { background: #3a2c1d; }
.lista-desplegable-aldeas {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 260px;
  max-height: 340px;
  overflow-y: auto;
  background: #2b2018;
  border: 1px solid #6b5b45;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  z-index: 500;
  font-size: 14px;
}
.lista-desplegable-aldeas.oculto { display: none; }
.fila-aldea-lista {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  color: #e5d8b8;
  cursor: pointer;
  border-bottom: 1px solid #3a2c1d;
  font-weight: normal;
}
.fila-aldea-lista:last-child { border-bottom: none; }
.fila-aldea-lista:hover { background: #3a2c1d; }
.fila-aldea-lista.activa { background: #4a3c1d; color: #f1cf79; font-weight: bold; }
.coords-aldea-lista { color: #a89676; font-size: 12px; }

/* --- Celebración al abrir un cofre --- */
.celebracion-cofre-lluvia {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}
.celebracion-cofre-lluvia span {
  position: absolute;
  top: -40px;
  animation: caidaChispaCofre 2.2s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255,215,80,.8));
}
@keyframes caidaChispaCofre {
  0%   { transform: translateY(-40px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}
.celebracion-cofre-carta {
  border-color: #f1cf79 !important;
  box-shadow: 0 0 40px rgba(241,207,121,.5), 0 8px 30px rgba(0,0,0,.6) !important;
  animation: apareceCofreCarta .4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes apareceCofreCarta {
  0%   { transform: scale(.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.titulo-cofre-abierto {
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: bold;
  color: #f1cf79;
  margin-bottom: 18px;
  animation: brilloTituloCofre 1.6s ease-in-out infinite;
}
@keyframes brilloTituloCofre {
  0%, 100% { text-shadow: 0 0 8px rgba(241,207,121,.6); }
  50%      { text-shadow: 0 0 22px rgba(241,207,121,1), 0 0 40px rgba(255,180,60,.6); }
}
.tarjetas-recompensas-cofre {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.tarjeta-recompensa-cofre {
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.06), transparent 70%), #2b2018;
  border: 2px solid var(--glow, #f1cf79);
  border-radius: 12px;
  padding: 16px 18px;
  min-width: 120px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--glow, #f1cf79) 55%, transparent);
  animation: apareceTarjetaCofre .45s cubic-bezier(.2,1.4,.4,1) backwards;
}
.tarjeta-recompensa-cofre:nth-child(1) { animation-delay: .05s; }
.tarjeta-recompensa-cofre:nth-child(2) { animation-delay: .15s; }
.tarjeta-recompensa-cofre:nth-child(3) { animation-delay: .25s; }
.tarjeta-recompensa-cofre:nth-child(4) { animation-delay: .35s; }
@keyframes apareceTarjetaCofre {
  0%   { transform: translateY(16px) scale(.7); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.celebracion-civ-fondo {
  position: fixed; inset: 0; background: rgba(10,7,4,.82); z-index: 9999;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  cursor: pointer; animation: apareceFondoCiv .3s ease-out;
}
@keyframes apareceFondoCiv { 0% { opacity: 0; } 100% { opacity: 1; } }
.celebracion-civ-imagen {
  width: 220px; height: 220px; border-radius: 50%; object-fit: cover; background: #000;
  border: 4px solid var(--glow, #f1cf79);
  box-shadow: 0 0 50px color-mix(in srgb, var(--glow, #f1cf79) 70%, transparent), 0 0 100px color-mix(in srgb, var(--glow, #f1cf79) 35%, transparent);
  animation: apareceCivImagen .55s cubic-bezier(.2,1.4,.4,1);
}
@keyframes apareceCivImagen {
  0%   { transform: scale(.4) rotate(-8deg); opacity: 0; }
  70%  { transform: scale(1.06) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.celebracion-civ-etiqueta {
  color: #c9b48f; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; margin-top: 22px;
  animation: apareceFondoCiv .5s ease-out .2s backwards;
}
.celebracion-civ-nombre {
  font-family: Georgia, serif; font-size: 42px; font-weight: bold; color: var(--glow, #f1cf79); margin-top: 4px;
  animation: brilloTituloGlow 1.6s ease-in-out infinite, apareceFondoCiv .5s ease-out .25s backwards;
}
@keyframes brilloTituloGlow {
  0%, 100% { text-shadow: 0 0 8px color-mix(in srgb, var(--glow, #f1cf79) 60%, transparent); }
  50%      { text-shadow: 0 0 22px var(--glow, #f1cf79), 0 0 40px color-mix(in srgb, var(--glow, #f1cf79) 60%, transparent); }
}
.celebracion-civ-pista { color: #7a6b52; font-size: 12px; margin-top: 26px; animation: apareceFondoCiv .5s ease-out .4s backwards; }

.icono-recompensa-cofre {
  font-size: 34px;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 6px var(--glow, #f1cf79));
}
.titulo-recompensa-cofre {
  color: #f1cf79;
  font-weight: bold;
  font-size: 14px;
}
.detalle-recompensa-cofre {
  color: #c9b48f;
  font-size: 12px;
  margin-top: 3px;
}

/* --- Modal grande, estilo Tribal Wars 2 (Informes, Mensajes, Inventario) --- */
.modal-carta-grande {
  background: #2b2018;
  border: 2px solid #8a6d2f;
  border-radius: 14px;
  width: 92vw;
  max-width: 1100px;
  height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-carta-grande .contenido {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.lista-filas-grande {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 8px;
  align-content: start;
  padding: 4px 2px;
}
.fila-lista-grande {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #211810;
  border: 1px solid #4a3c2c;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.fila-lista-grande:hover {
  background: #3a2c1d;
  border-color: #8a6d2f;
}
.fila-lista-grande .icono-fila {
  font-size: 22px;
  width: 34px;
  text-align: center;
  flex-shrink: 0;
}
.fila-lista-grande .texto-fila {
  flex: 1;
  min-width: 0;
}
.fila-lista-grande .titulo-fila {
  font-weight: bold;
  color: #f1cf79;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fila-lista-grande .detalle-fila {
  font-size: 12px;
  color: #a89676;
}
.fila-lista-grande .resultado-fila {
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

/* --- Badge numérico verde para informes/mensajes sin leer --- */
.badge-dock {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #3fae4c;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #1f1710;
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.badge-dock.oculto { display: none; }


/* Insignia con el % ofensivo/defensivo de un bando en un informe. Al pasar el
   cursor enseña, al momento, de qué se compone (Fe + bonificaciones). */
.badge-mod {
  position: relative; display: inline-block; color: #f0e6d2; font-weight: bold;
  font-size: 12px; padding: 2px 11px; border-radius: 4px; cursor: help;
  border: 1px solid rgba(0,0,0,.35);
}
.badge-mod:hover::after {
  content: attr(data-tip);
  position: absolute; right: 0; top: 125%; z-index: 60;
  width: max-content; max-width: 330px; white-space: normal;
  background: #0f0a06; border: 1px solid #8a6d2f; border-radius: 6px;
  color: #f0e6d2; font-size: 12px; font-weight: normal; line-height: 1.45;
  padding: 7px 11px; box-shadow: 0 4px 14px rgba(0,0,0,.65); text-align: left;
}

/* ---------- Enlace a un jugador (informes, mapa, ranking) ---------- */
.chip-jugador {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  background: #1f1710; border: 1px solid #6b5b45; border-radius: 12px;
  padding: 1px 10px; font-size: 12px; font-weight: normal; color: #f1cf79;
  cursor: pointer; vertical-align: middle;
}
.chip-jugador:hover { background: #3a2c1d; border-color: #d4a95a; }

/* ---------- Perfil de jugador (horizontal) ---------- */
.perfil-carta {
  position: relative; width: min(880px, 96vw);
  background: linear-gradient(180deg, #3a2c1d, #2b2018);
  border: 2px solid #8a6d2f; border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.7); color: #e8d5a8;
}
.perfil-cerrar {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  background: rgba(0,0,0,.35); border: 1px solid #6b5b45; color: #e8d5a8;
  border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 14px;
}
.perfil-cerrar:hover { background: rgba(0,0,0,.6); color: #f1cf79; }
.perfil-cabecera {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 24px 28px 20px;
  background: radial-gradient(ellipse at 15% 30%, rgba(138,109,47,.22), transparent 60%);
}
.perfil-avatar { height: 210px; flex-shrink: 0; }
.perfil-datos { flex: 1 1 250px; min-width: 0; }
.perfil-nombre { font-family: Georgia, serif; font-size: 28px; font-weight: bold; color: #f1cf79; line-height: 1.1; word-break: break-word; }
.perfil-sub { color: #c9b48f; font-size: 13px; margin-top: 6px; }
.perfil-rango {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 12px;
  background: #1f1710; border: 1px solid #4a3c2c; border-radius: 10px; padding: 8px 14px; cursor: pointer;
}
.perfil-rango:hover { border-color: #d4a95a; }
.perfil-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.perfil-estadisticas { display: grid; grid-template-columns: repeat(3, minmax(92px, 1fr)); gap: 8px; flex: 0 1 350px; }
.perfil-estadistica { background: #1f1710; border: 1px solid #4a3c2c; border-radius: 8px; padding: 9px 6px; text-align: center; }
.perfil-estadistica .icono { font-size: 18px; }
.perfil-estadistica .valor { font-size: 17px; font-weight: bold; color: #f0e6d2; }
.perfil-estadistica .etiqueta { font-size: 10px; color: #a89676; }
.perfil-aldeas { border-top: 1px solid #4a3c2c; padding: 14px 28px 20px; }
.perfil-aldeas h3 { margin: 0 0 8px; font-size: 13px; color: #d4a95a; font-weight: bold; }
.perfil-aldea-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.perfil-aldea { background: #1f1710; border: 1px solid #4a3c2c; border-radius: 8px; padding: 6px 12px; font-size: 12px; }
.perfil-aldea b { color: #f1cf79; }

/* ---------- Ranking mundial ---------- */
.ranking-caja { width: min(640px, 96vw); max-height: 88vh; display: flex; flex-direction: column; background: linear-gradient(180deg,#3a2c1d,#2b2018); border: 2px solid #8a6d2f; border-radius: 14px; color: #e8d5a8; }
.ranking-lista { overflow-y: auto; padding: 0 14px 14px; }
.ranking-fila { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-bottom: 1px solid #4a3c2c; cursor: pointer; border-radius: 6px; }
.ranking-fila:hover { background: rgba(255,255,255,.05); }
.ranking-fila.ranking-mio { background: rgba(241,207,121,.12); border: 1px solid #8a6d2f; }
.ranking-puesto { width: 38px; text-align: center; font-weight: bold; color: #c9b48f; font-size: 15px; }
.ranking-avatar { width: 40px; height: 48px; flex-shrink: 0; }
.ranking-nombre { font-weight: bold; color: #f1cf79; }
.ranking-sub { font-size: 11px; color: #a89676; }
.ranking-puntos { margin-left: auto; font-weight: bold; color: #f0e6d2; }

/* Pestañas del ranking (categoría y tipo) */
.ranking-pestanas { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 20px 8px; }
.ranking-pestanas.grande { padding-top: 2px; border-bottom: 1px solid #4a3c2c; margin-bottom: 8px; }
.ranking-pestana { background: #1f1710; border: 1px solid #4a3c2c; color: #c9b48f; border-radius: 16px; padding: 4px 13px; font-size: 12px; cursor: pointer; }
.ranking-pestana:hover { border-color: #d4a95a; color: #f1cf79; }
.ranking-pestana.activa { background: #5c4429; border-color: #d4a95a; color: #f1cf79; font-weight: bold; }
.ranking-pestanas.grande .ranking-pestana { border-radius: 8px 8px 0 0; font-size: 13px; padding: 6px 16px; border-bottom: none; }
.ranking-pie { padding: 10px 20px 14px; border-top: 1px solid #4a3c2c; font-size: 12px; color: #c9b48f; text-align: center; }
.ranking-proximamente { padding: 34px 26px 40px; text-align: center; color: #a89676; line-height: 1.6; }
.ranking-proximamente .icono { font-size: 40px; margin-bottom: 8px; }

/* ---------- Alianzas ---------- */
.alianza-carta { position: relative; width: min(1000px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: linear-gradient(180deg,#3a2c1d,#2b2018); border: 2px solid #8a6d2f; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.7); color: #e8d5a8; overflow: hidden; }
.alianza-carta.estrecha { width: min(720px, 96vw); }
.alianza-titulo { padding: 18px 26px 4px; font-size: 22px; font-weight: bold; color: #f1cf79; font-family: Georgia, serif; }
.alianza-pestanas { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 60px 0 20px; border-bottom: 1px solid #4a3c2c; }
.alianza-pestanas .ranking-pestana { border-radius: 8px 8px 0 0; border-bottom: none; padding: 7px 16px; font-size: 13px; }
.alianza-cuerpo { overflow-y: auto; padding: 0 0 16px; }
.alianza-cuerpo h3 { margin: 0 0 8px; font-size: 14px; color: #d4a95a; padding: 0 22px; }
.alianza-cuerpo h4 { margin: 12px 0 6px; font-size: 12px; color: #a89676; padding: 0 22px; }
.alianza-seccion { padding: 14px 0 4px; border-top: 1px solid #4a3c2c; }
.alianza-seccion:first-child { border-top: none; }
.alianza-carta .perfil-cabecera { padding-top: 22px; }
.alianza-escudo { width: 112px; height: 132px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: bold; letter-spacing: 1px; color: #f1cf79; font-family: Georgia, serif;
  background: linear-gradient(160deg, #5c4429, #2b2018 70%); border: 3px solid #d4a95a; border-radius: 10px 10px 56px 56px; box-shadow: inset 0 0 18px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.5); text-shadow: 0 2px 4px #000; }
.alianza-escudo.pequeno { width: 44px; height: 52px; font-size: 13px; border-width: 2px; border-radius: 6px 6px 22px 22px; }
.alianza-descripcion { margin-top: 10px; font-size: 13px; line-height: 1.5; color: #d8c8a4; white-space: pre-wrap; max-width: 520px; }
.alianza-fila { display: flex; align-items: center; gap: 10px; padding: 7px 22px; border-bottom: 1px solid #3f3122; }
.alianza-fila.selecc { cursor: pointer; }
.alianza-fila.selecc:hover { background: rgba(255,255,255,.05); }
.alianza-fila.seleccionada { background: rgba(241,207,121,.13); box-shadow: inset 3px 0 0 #d4a95a; }
.alianza-col { width: 78px; text-align: right; font-weight: bold; color: #f0e6d2; font-size: 13px; }
.alianza-col span { display: block; font-size: 10px; font-weight: normal; color: #a89676; }
.alianza-miembros { display: flex; gap: 0; align-items: stretch; flex-wrap: wrap; }
.alianza-lista { flex: 2 1 460px; min-width: 0; padding-top: 8px; }
.alianza-lista .alianza-fila { padding-left: 16px; padding-right: 12px; }
.alianza-panel { flex: 1 1 280px; padding: 18px 20px; border-left: 1px solid #4a3c2c; background: rgba(0,0,0,.14); }
.alianza-panel-vacio { color: #a89676; text-align: center; padding: 60px 10px; font-size: 13px; }
.alianza-formulario { display: flex; flex-direction: column; gap: 8px; padding: 0 22px; }
.alianza-formulario input, .alianza-formulario textarea, .alianza-formulario select { background: #1f1710; border: 1px solid #4a3c2c; border-radius: 6px; color: #e8d5a8; padding: 7px 10px; font-family: inherit; font-size: 13px; }
.alianza-formulario input:focus, .alianza-formulario textarea:focus, .alianza-formulario select:focus { outline: none; border-color: #d4a95a; }
.foro-mensaje { margin: 0 22px 10px; background: #1f1710; border: 1px solid #4a3c2c; border-radius: 8px; padding: 10px 12px; }
.foro-autor { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.foro-texto { white-space: pre-wrap; font-size: 13px; line-height: 1.55; color: #e8d9b8; word-break: break-word; }
.etiqueta-alianza { color: #a89676; font-weight: normal; font-size: 12px; }

.alianza-seccion > p { padding: 0 22px; }
.alianza-seccion > button { margin-left: 22px; margin-right: 22px; }

/* ---------- Cargos y competencias ---------- */
.alianza-detalles { margin: 6px 22px 0; border-top: 1px solid #4a3c2c; padding-top: 8px; }
.alianza-detalles summary { cursor: pointer; color: #d4a95a; font-weight: bold; font-size: 13px; padding: 4px 0; }
.alianza-tabla-cargos { overflow-x: auto; padding: 4px 22px 0; }
.alianza-detalles .alianza-tabla-cargos { padding: 4px 0 0; }
.alianza-tabla-cargos table { border-collapse: collapse; width: 100%; font-size: 12px; }
.alianza-tabla-cargos th { color: #f1cf79; padding: 6px 6px; font-size: 11px; border-bottom: 1px solid #6b5b45; text-align: center; }
.alianza-tabla-cargos th:first-child, .alianza-tabla-cargos td:first-child { text-align: left; width: 34%; }
.alianza-tabla-cargos td { padding: 5px 6px; border-bottom: 1px solid #3f3122; text-align: center; color: #c9b48f; }
.alianza-tabla-cargos td:first-child { color: #e8d9b8; }
.alianza-tabla-cargos .mio { background: rgba(241,207,121,.13); }

/* ---------- Marcas de la tribu en el mapa ---------- */
#banner-orden-tribu { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 203; width: min(560px, 56vw); display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: linear-gradient(180deg,#3a2c1d,#2b2018); border: 2px solid #d4a95a; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.6); color: #e8d5a8; }
#banner-orden-tribu .orden-cab { font-size: 10px; letter-spacing: 1px; color: #a89676; }
#banner-orden-tribu .orden-texto { font-weight: bold; font-size: 14px; color: #f1cf79; word-break: break-word; }
#boton-marcas-tribu { position: fixed; top: 66px; right: 16px; z-index: 203; }
#panel-marcas-tribu { position: fixed; top: 108px; right: 16px; z-index: 203; width: 310px; max-height: 58vh; overflow-y: auto; background: linear-gradient(180deg,#3a2c1d,#2b2018); border: 2px solid #8a6d2f; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.7); color: #e8d5a8; }
#panel-marcas-tribu .tit, .dialogo-marca .tit { padding: 9px 14px; font-weight: bold; color: #f1cf79; font-family: Georgia, serif; border-bottom: 1px solid #4a3c2c; font-size: 14px; }
.fila-marca { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid #3f3122; }
.alianza-seccion .fila-marca { padding-left: 22px; padding-right: 22px; }
.dialogo-marca { position: fixed; z-index: 260; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 300px; background: linear-gradient(180deg,#3a2c1d,#2b2018); border: 2px solid #8a6d2f; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.75); color: #e8d5a8; }
.dialogo-marca input, .dialogo-marca select { background: #1f1710; border: 1px solid #4a3c2c; border-radius: 6px; color: #e8d5a8; padding: 7px 9px; font-size: 13px; font-family: inherit; }
.marca-tipo { width: 41px; height: 38px; font-size: 19px; background: #1f1710; border: 2px solid #4a3c2c; border-radius: 8px; cursor: pointer; }
.marca-tipo:hover { border-color: #d4a95a; }
.marca-tipo.sel { border-color: #c65b4a; background: #3a1f1a; box-shadow: 0 0 8px rgba(198,91,74,.6); }

/* ---------- Avisos en las pestañas de la alianza y foro sin leer ---------- */
.cuenta-pestana { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; margin-left: 6px; padding: 0 5px; background: #3fae4c; color: #fff; font-size: 11px; font-weight: bold; border-radius: 9px; vertical-align: middle; }
.foro-nuevo { color: #5fd06a; font-size: 11px; font-weight: bold; margin-left: 6px; }

/* ---------- Pantalla de Unidades ---------- */
.unidades-carta { position: relative; width: min(1320px, 98vw); max-height: 92vh; overflow-y: auto; background: linear-gradient(180deg,#3a2c1d,#2b2018); border: 2px solid #8a6d2f; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.7); color: #e8d5a8; }
.u-titulo { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 10px; font-size: 20px; font-weight: bold; color: #f1cf79; font-family: Georgia, serif; }
.u-seccion { margin: 0 12px 12px; border: 1px solid #4a3c2c; border-radius: 8px; overflow: hidden; background: #241a11; }
.u-barra { background: linear-gradient(180deg,#5c4429,#3a2c1d); color: #f1cf79; font-weight: bold; font-size: 13px; text-align: center; padding: 6px; border-bottom: 1px solid #6b5b45; }
.u-mult { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; flex-wrap: wrap; }
.u-mult .badge-mod { font-size: 16px; padding: 4px 16px; }
.u-mult-detalle { font-size: 12px; color: #a89676; }
.u-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.u-tabla th { padding: 6px 8px; background: #33261a; border-bottom: 1px solid #6b5b45; color: #c9b48f; font-weight: normal; text-align: left; white-space: nowrap; }
.u-tabla th.u-tropa { text-align: center; padding: 4px 2px; width: 46px; }
.u-tabla td { padding: 6px 8px; border-bottom: 1px solid #3f3122; vertical-align: middle; }
.u-tabla tr:last-child td { border-bottom: none; }
.u-num { text-align: center; font-weight: bold; color: #f0e6d2; }
.u-num.cero { color: #6b5b45; font-weight: normal; }
.u-total td { background: #33261a; font-weight: bold; color: #f1cf79; }
.u-vacia { text-align: center; padding: 16px; color: #a89676; font-size: 13px; }
.u-tiempo { display: inline-block; min-width: 68px; text-align: center; background: #2f5a2a; border: 1px solid #4d8a2e; color: #e8ffe0; font-family: monospace; font-weight: bold; padding: 3px 10px; border-radius: 4px; }
.u-cmd { font-size: 11px; color: #a89676; margin-top: 2px; }
.u-etq { font-size: 10px; color: #a89676; margin-left: 4px; }
.u-ir { padding: 2px 8px; }

/* ---------- Recoger apoyos ---------- */
.u-barra { position: relative; }
.u-accion { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11px; padding: 3px 12px; font-weight: normal; }
.u-ir + .u-ir { margin-left: 4px; }
.dialogo-recoger { position: fixed; z-index: 1100; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(430px, 94vw); max-height: 90vh; overflow-y: auto; background: linear-gradient(180deg,#3a2c1d,#2b2018); border: 2px solid #8a6d2f; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.75); color: #e8d5a8; }
.dialogo-recoger .tit { padding: 10px 16px; font-weight: bold; color: #f1cf79; font-family: Georgia, serif; border-bottom: 1px solid #4a3c2c; font-size: 15px; }
.dialogo-recoger input[type=number] { width: 100%; box-sizing: border-box; background: #1f1710; border: 1px solid #4a3c2c; border-radius: 6px; color: #e8d5a8; padding: 6px 8px; font-size: 13px; text-align: right; }
.recoger-estimacion { margin-top: 12px; padding: 10px 12px; background: #1f1710; border: 1px solid #4a3c2c; border-radius: 8px; font-size: 13px; }
.recoger-porque { display: block; font-size: 11px; color: #a89676; margin-top: 3px; }

/* ---------- Tema de la pantalla de Unidades: fondo azul claro ----------
   Toda la paleta está en estas variables: cambiar un color aquí lo cambia en la pantalla y en su diálogo de "elegir tropas". */
.unidades-carta, .dialogo-recoger {
  --u-fondo: linear-gradient(180deg, #d9ecfb, #bcd8f0);   /* fondo: azul claro */
  --u-borde: #2f5f8a;                                       /* marcos y líneas gruesas */
  --u-panel: #eaf4fc;                                       /* interior de cada sección */
  --u-barra: linear-gradient(180deg, #35597e, #213a56);     /* barras de sección (azul marino) */
  --u-barra-texto: #f3f9ff;
  --u-cabecera: #b3d1ea;                                    /* cabecera de las tablas */
  --u-linea: #bcd5e9;                                       /* líneas finas */
  --u-texto: #1b2f44;                                       /* texto normal */
  --u-titulo: #163a5c;                                      /* títulos */
  --u-suave: #5a7893;                                       /* texto secundario */
  --u-cero: #97aec3;                                        /* ceros apagados */
  --u-total: #c3dcf1;                                       /* fila de totales */
  --u-acento: #d0801f;                                      /* naranja: lo destacado al pasar el cursor */
  --u-boton: #f1f8fd; --u-boton-borde: #4a7fb0; --u-boton-texto: #1f4f7c;
}
.unidades-carta { background: var(--u-fondo); border-color: var(--u-borde); color: var(--u-texto); box-shadow: 0 12px 40px rgba(20, 45, 75, .55); }
.unidades-carta .u-titulo { color: var(--u-titulo); }
.unidades-carta .u-seccion { background: var(--u-panel); border-color: var(--u-borde); }
.unidades-carta .u-barra { background: var(--u-barra); color: var(--u-barra-texto); border-bottom-color: var(--u-borde); }
.unidades-carta .u-tabla th { background: var(--u-cabecera); color: var(--u-texto); border-bottom-color: var(--u-borde); font-weight: bold; }
.unidades-carta .u-tabla td { border-bottom-color: var(--u-linea); }
.unidades-carta .u-num { color: var(--u-texto); }
.unidades-carta .u-num.cero { color: var(--u-cero); }
.unidades-carta .u-total td { background: var(--u-total); color: var(--u-titulo); }
.unidades-carta .u-vacia, .unidades-carta .u-mult-detalle, .unidades-carta .u-cmd, .unidades-carta .u-etq { color: var(--u-suave); }
.unidades-carta .u-tiempo { background: #2f7d3a; border-color: #1f5a28; color: #fff; }
.unidades-carta .btn-volver, .dialogo-recoger .btn-volver { background: var(--u-boton); border: 1px solid var(--u-boton-borde); color: var(--u-boton-texto); }
.unidades-carta .btn-volver:hover, .dialogo-recoger .btn-volver:hover { background: #fff; border-color: var(--u-acento); color: #8a4f0a; }
.unidades-carta .u-barra .btn-volver { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .55); color: #f3f9ff; }
.unidades-carta .u-barra .btn-volver:hover { background: rgba(255, 255, 255, .28); border-color: #ffd28a; color: #fff; }
.unidades-carta .chip-jugador { background: #f5faff; border-color: var(--u-boton-borde); color: var(--u-boton-texto); }
.unidades-carta .chip-jugador:hover { background: #fff; border-color: var(--u-acento); }
/* el diálogo de elegir tropas hace juego */
.dialogo-recoger { background: var(--u-fondo); border-color: var(--u-borde); color: var(--u-texto); box-shadow: 0 12px 40px rgba(20, 45, 75, .6); }
.dialogo-recoger .tit { color: var(--u-titulo); border-bottom-color: var(--u-borde); }
.dialogo-recoger .u-tabla td { border-bottom-color: var(--u-linea); }
.dialogo-recoger .u-num { color: var(--u-texto); }
.dialogo-recoger input[type=number] { background: #fff; border-color: var(--u-boton-borde); color: var(--u-texto); }
.recoger-estimacion { background: var(--u-panel); border-color: var(--u-borde); color: var(--u-texto); }
.recoger-porque, .dialogo-recoger .u-cmd { color: var(--u-suave); }
.dialogo-recoger .u-principal, .dialogo-recoger .u-principal:hover { background: var(--u-acento); border-color: #a4610f; color: #fff; font-weight: bold; }
.dialogo-recoger .u-principal:hover { background: #e08d2c; }

/* =====================================================================================================
   INTEGRACIÓN VISUAL: todas las ventanas comparten el marco del juego (marrón oscuro con dorado: barra de título o de
   pestañas) y solo cambia el color del CONTENIDO de cada pantalla: Unidades en azul claro, Alianza en crema con burdeos.
   ===================================================================================================== */

/* --- Unidades: marco y título del juego, contenido azul --- */
.unidades-carta { border: 3px solid #8a6d2f; box-shadow: 0 12px 40px rgba(0, 0, 0, .75); background: #2b2018; }
.unidades-carta .u-titulo { background: linear-gradient(180deg, #4a3620, #2b2018); color: #f1cf79; padding: 12px 20px; margin-bottom: 12px; border-bottom: 2px solid #8a6d2f; }
.unidades-carta .u-titulo .btn-volver { background: #3d2f22; border-color: #8a6d2f; color: #f1cf79; }
.unidades-carta .u-titulo .btn-volver:hover { background: #4a3a29; border-color: #d4a95a; color: #fff3cf; }
.unidades-carta .u-seccion:last-child { margin-bottom: 12px; }
.unidades-carta > .u-seccion { box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
/* el cuerpo azul: el degradado se pone en un fondo detrás de las secciones */
.unidades-carta { background: linear-gradient(180deg, #4a3620 0, #2b2018 56px, #d9ecfb 56px, #bcd8f0 100%); }

/* --- Alianza: crema con burdeos; la barra de pestañas / el título siguen siendo el marco marrón del juego --- */
.alianza-cuerpo, #banner-orden-tribu, #panel-marcas-tribu, .dialogo-marca, #fondo-donar-habilidad {
  --a-fondo: linear-gradient(180deg, #f9f1de, #eee0c0);   /* crema */
  --a-panel: #fffaf0;
  --a-panel2: #f6ead0;
  --a-borde: #b8964f;
  --a-linea: #dfcda5;
  --a-texto: #3b2a1c;                                      /* marrón oscuro */
  --a-titulo: #7a2230;                                     /* burdeos */
  --a-acento: #8a2f3a;
  --a-oro: #97660f;
  --a-suave: #7d684b; --a-muy-suave: #9b8869; --a-suave2: #6f5b3f;
  --a-peligro: #a3272f;
  --a-boton: #f6e9cc; --a-boton-borde: #a8823a; --a-boton-texto: #5b3d10;
}
.alianza-titulo { border-bottom: 2px solid #8a6d2f; padding-bottom: 10px; }
.alianza-pestanas { border-bottom: 2px solid #8a6d2f; }
.alianza-cuerpo { background: var(--a-fondo); color: var(--a-texto); padding-top: 4px; }
.alianza-cuerpo h3 { color: var(--a-titulo); }
.alianza-cuerpo h4 { color: var(--a-suave); }
.alianza-cuerpo .alianza-seccion { border-top-color: var(--a-linea); }
.alianza-cuerpo .perfil-cabecera { background: radial-gradient(ellipse at 15% 30%, rgba(184, 150, 79, .25), transparent 60%); }
.alianza-cuerpo .perfil-nombre { color: var(--a-titulo); }
.alianza-cuerpo .perfil-sub { color: var(--a-suave); }
.alianza-cuerpo .perfil-rango { background: var(--a-panel); border-color: var(--a-borde); }
.alianza-cuerpo .perfil-rango:hover { border-color: var(--a-acento); }
.alianza-cuerpo .perfil-estadistica { background: var(--a-panel); border-color: var(--a-linea); }
.alianza-cuerpo .perfil-estadistica .valor { color: var(--a-texto); }
.alianza-cuerpo .perfil-estadistica .etiqueta { color: var(--a-suave); }
.alianza-cuerpo .alianza-escudo { background: linear-gradient(160deg, #94323f, #5a1a24 75%); border-color: #c9a24a; color: #f9e6b3; }
.alianza-cuerpo .alianza-descripcion { color: var(--a-texto); }
.alianza-cuerpo .alianza-fila { border-bottom-color: var(--a-linea); }
.alianza-cuerpo .alianza-fila.selecc:hover { background: rgba(138, 47, 58, .07); }
.alianza-cuerpo .alianza-fila.seleccionada { background: rgba(138, 47, 58, .12); box-shadow: inset 3px 0 0 var(--a-acento); }
.alianza-cuerpo .alianza-col { color: var(--a-texto); }
.alianza-cuerpo .alianza-col span { color: var(--a-suave); }
.alianza-cuerpo .alianza-panel { background: rgba(255, 255, 255, .45); border-left-color: var(--a-linea); }
.alianza-cuerpo .alianza-panel-vacio { color: var(--a-suave); }
.alianza-cuerpo .alianza-formulario input, .alianza-cuerpo .alianza-formulario textarea, .alianza-cuerpo .alianza-formulario select { background: #fffdf7; border-color: var(--a-boton-borde); color: var(--a-texto); }
.alianza-cuerpo .alianza-formulario input:focus, .alianza-cuerpo .alianza-formulario textarea:focus, .alianza-cuerpo .alianza-formulario select:focus { border-color: var(--a-acento); }
.alianza-cuerpo .foro-mensaje { background: var(--a-panel); border-color: var(--a-linea); }
.alianza-cuerpo .foro-texto { color: var(--a-texto); }
.alianza-cuerpo .foro-nuevo { color: #2f8a3a; }
.alianza-cuerpo .ranking-nombre { color: var(--a-titulo); }
.alianza-cuerpo .ranking-sub { color: var(--a-suave); }
.alianza-cuerpo .chip-jugador { background: var(--a-panel2); border-color: var(--a-boton-borde); color: var(--a-titulo); }
.alianza-cuerpo .chip-jugador:hover { background: #fff; border-color: var(--a-acento); }
.alianza-cuerpo .btn-volver, #banner-orden-tribu .btn-volver, .dialogo-marca .btn-volver { background: var(--a-boton); border: 1px solid var(--a-boton-borde); color: var(--a-boton-texto); }
.alianza-cuerpo .btn-volver:hover, #banner-orden-tribu .btn-volver:hover, .dialogo-marca .btn-volver:hover { background: #fff; border-color: var(--a-acento); color: var(--a-acento); }
.alianza-cuerpo .alianza-detalles { border-top-color: var(--a-linea); }
.alianza-cuerpo .alianza-detalles summary { color: var(--a-titulo); }
.alianza-cuerpo .alianza-tabla-cargos th { color: var(--a-titulo); border-bottom-color: var(--a-borde); }
.alianza-cuerpo .alianza-tabla-cargos td { border-bottom-color: var(--a-linea); color: var(--a-suave2); }
.alianza-cuerpo .alianza-tabla-cargos td:first-child { color: var(--a-texto); }
.alianza-cuerpo .alianza-tabla-cargos .mio { background: rgba(151, 102, 15, .16); }
.alianza-cuerpo .ranking-proximamente { color: var(--a-suave); }
.alianza-cuerpo .fila-marca { border-bottom-color: var(--a-linea); }

/* --- lo de la tribu que vive sobre el mapa: cartel de la Orden, lista de marcas y diálogo de marcar --- */
#banner-orden-tribu { background: var(--a-fondo); border-color: var(--a-acento); color: var(--a-texto); box-shadow: 0 6px 20px rgba(0, 0, 0, .55); }
#banner-orden-tribu .orden-cab { color: var(--a-suave); }
#banner-orden-tribu .orden-texto { color: var(--a-titulo); }
#panel-marcas-tribu, .dialogo-marca { background: var(--a-fondo); border-color: var(--a-borde); color: var(--a-texto); }
#panel-marcas-tribu .tit, .dialogo-marca .tit { color: var(--a-titulo); border-bottom-color: var(--a-linea); }
#panel-marcas-tribu .fila-marca { border-bottom-color: var(--a-linea); }
#panel-marcas-tribu .ranking-nombre { color: var(--a-titulo); }
#panel-marcas-tribu .ranking-sub { color: var(--a-suave); }
.dialogo-marca input, .dialogo-marca select { background: #fffdf7; border-color: var(--a-boton-borde); color: var(--a-texto); }
.dialogo-marca .marca-tipo { background: var(--a-panel2); border-color: var(--a-linea); }
.dialogo-marca .marca-tipo:hover { border-color: var(--a-acento); }
.dialogo-marca .marca-tipo.sel { border-color: var(--a-acento); background: #f2d8d6; box-shadow: 0 0 8px rgba(138, 47, 58, .4); }
.dialogo-marca .a-principal, .dialogo-marca .a-principal:hover { background: var(--a-acento); border-color: #5a1a24; color: #fff8e8; font-weight: bold; }
.dialogo-marca .a-principal:hover { background: #9c3947; }

/* botón de marcas sobre el mapa: crema, para que se lea encima del terreno; y los desplegables del diálogo no sobresalen */
#boton-marcas-tribu { background: #f6e9cc; border: 1px solid #a8823a; color: #5b3d10; font-weight: bold; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
#boton-marcas-tribu:hover { background: #fff; border-color: #8a2f3a; color: #8a2f3a; }
.dialogo-marca select, .dialogo-marca input { min-width: 0; box-sizing: border-box; }
.dialogo-marca select { flex: 1 1 0; width: 0; }
#panel-marcas-tribu .btn-volver { background: var(--a-boton); border: 1px solid var(--a-boton-borde); color: var(--a-boton-texto); }
#panel-marcas-tribu .btn-volver:hover { background: #fff; border-color: var(--a-acento); color: var(--a-acento); }
.dialogo-marca { width: 336px; }
.dialogo-marca .marca-tipo { display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }

/* ---------- Desplegables en crema: menú de cuenta y lista de pueblos (mismo crema que la alianza; marco marrón/dorado del juego) ---------- */
#menu-cuenta, .lista-desplegable-aldeas {
  --c-fondo: linear-gradient(180deg, #f9f1de, #eee0c0);
  --c-borde: #8a6d2f;
  --c-texto: #3b2a1c; --c-titulo: #7a2230; --c-suave: #7d684b;
  --c-bloque: #fffaf0; --c-linea: #dfcda5;
  --c-bien: #2f7a3a; --c-info: #2a5f92; --c-peligro: #a3272f;
}
#menu-cuenta .btn-volver { background: #f6e9cc; border: 1px solid #a8823a; color: #5b3d10; }
#menu-cuenta .btn-volver:hover { background: #fff; border-color: #8a2f3a; color: #8a2f3a; }
.lista-desplegable-aldeas { background: var(--c-fondo); border: 2px solid var(--c-borde); box-shadow: 0 8px 22px rgba(0, 0, 0, .55); }
.lista-desplegable-aldeas .fila-aldea-lista { color: var(--c-texto); border-bottom-color: var(--c-linea); }
.lista-desplegable-aldeas .fila-aldea-lista:hover { background: rgba(138, 47, 58, .09); }
.lista-desplegable-aldeas .fila-aldea-lista.activa { background: rgba(138, 47, 58, .15); color: var(--c-titulo); font-weight: bold; }
.lista-desplegable-aldeas .coords-aldea-lista { color: var(--c-suave); }

/* ---------- Plantillas con tecla rápida en el mapa ---------- */
.badge-tecla { display: inline-block; margin-left: 8px; background: #1f1710; color: #f1cf79; border: 1px solid #8a6d2f; border-radius: 4px; padding: 0 7px; font-size: 12px; font-weight: bold; }
#canvas-nucleo-mapa.plantilla-armada { cursor: crosshair !important; }
#tira-plantillas { position: fixed; left: 16px; bottom: 16px; z-index: 203; display: flex; flex-direction: column; gap: 4px; max-width: 250px; }
#tira-plantillas .tira-titulo { font-size: 10px; letter-spacing: 1px; color: #e6d3a3; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.chip-plantilla { display: flex; align-items: center; gap: 7px; background: linear-gradient(180deg, #5c4429, #3a2a18); border: 2px solid #2e2013; border-radius: 8px; color: #f0e6d2; padding: 5px 9px; font-size: 12px; cursor: pointer; text-align: left; box-shadow: 0 2px 6px rgba(0,0,0,.55); }
.chip-plantilla b { background: #1f1710; color: #f1cf79; border: 1px solid #8a6d2f; border-radius: 4px; min-width: 18px; text-align: center; padding: 0 4px; }
.chip-plantilla span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-plantilla i { font-style: normal; font-size: 11px; color: #c9b48f; background: rgba(0,0,0,.3); border-radius: 8px; padding: 0 6px; }
.chip-plantilla:hover { border-color: #d4a95a; }
.chip-plantilla.armada { border-color: #f1cf79; background: linear-gradient(180deg, #86622f, #4f3a1f); box-shadow: 0 0 14px rgba(241, 207, 121, .8); }
.chip-plantilla.sin-tropas { opacity: .6; }
.chip-plantilla.sin-tropas i { color: #ff9d8a; }
#banner-plantilla-armada { position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 204; display: flex; align-items: center; gap: 12px; padding: 9px 16px; background: linear-gradient(180deg, #3a2c1a, #1f160d); border: 2px solid #f1cf79; border-radius: 12px; color: #f0e6d2; box-shadow: 0 6px 20px rgba(0,0,0,.65); width: max-content; max-width: min(680px, 92vw); }
#banner-plantilla-armada .pa-icono { font-size: 26px; }
#banner-plantilla-armada .pa-titulo { font-weight: bold; color: #f1cf79; font-size: 14px; }
#banner-plantilla-armada .pa-sub { font-size: 11px; color: #c9b48f; margin-top: 2px; line-height: 1.4; }
#pila-avisos-rapidos { position: fixed; top: 16px; left: 16px; z-index: 9990; display: flex; flex-direction: column; gap: 6px; pointer-events: none; max-width: min(430px, 60vw); }
.aviso-rapido { background: linear-gradient(180deg, #3a2c1a, #1f160d); border: 2px solid #4d8a2e; border-radius: 8px; color: #e8ffe0; font-size: 13px; padding: 8px 12px; box-shadow: 0 3px 12px rgba(0,0,0,.6); animation: entra-aviso .18s ease-out; }
.aviso-rapido.error { border-color: #a8402e; color: #ffd9d2; }
.aviso-rapido.saliendo { opacity: 0; transition: opacity .3s; }
@keyframes entra-aviso { from { transform: translateX(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* =====================================================================================================
   PANTALLA DEL PUEBLO REDISEÑADA: barra superior (recursos con producción + colas), tarjetas de edificio,
   panel lateral por edificio, misiones compactas y dock inferior.  Marco marrón/dorado del juego; las tarjetas de
   datos y acciones del panel van en crema.
   ===================================================================================================== */
body { margin-top: 8px; }
#vista-aldea, #vista-batalla { padding-bottom: 84px; }
#barra-pueblo { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: linear-gradient(180deg, #3a2b1c, #2b2018); border: 1px solid #6b5b45; border-bottom: 2px solid #8a6d2f; border-radius: 12px; margin-bottom: 14px; position: relative; z-index: 20; }
#barra-pueblo .selector-aldea { margin: 0; flex-shrink: 0; }
#barra-pueblo .nombre-aldea-caja { font-size: 17px; padding: 5px 12px; }
#barra-pueblo .recursos { background: none; padding: 0; margin: 0; gap: 10px; flex: 1; min-width: 0; }
.recurso-pill { display: flex; gap: 8px; align-items: center; background: #241a11; border: 1px solid #4a3c2c; border-radius: 10px; padding: 6px 11px; flex: 1; min-width: 165px; max-width: 245px; }
.rp-ico { font-size: 24px; }
.rp-cuerpo { flex: 1; min-width: 0; }
.rp-num b { font-size: 18px; }
.rp-num small { color: #a89676; font-size: 12px; }
.rp-num em { float: right; font-style: normal; color: #7fd47c; font-size: 12px; font-weight: bold; margin-top: 3px; }
.rp-barra { height: 5px; background: #120c07; border-radius: 3px; margin: 3px 0; overflow: hidden; }
.rp-barra i { display: block; height: 100%; background: linear-gradient(90deg, #b98a3a, #f1cf79); }
.recurso-pill.plata .rp-barra i { background: linear-gradient(90deg, #8d97a3, #dfe6ee); }
.recurso-pill.acero .rp-barra i { background: linear-gradient(90deg, #4d7196, #8fb6dc); }
.recurso-pill.pob .rp-barra i { background: linear-gradient(90deg, #5b8a3d, #8fd05e); }
.rp-sub { font-size: 11px; color: #a89676; min-height: 14px; }
.rp-sub.aviso { color: #ff9d8a; }
#colas-pueblo { display: flex; flex-direction: column; gap: 5px; min-width: 250px; max-width: 290px; cursor: pointer; }
.cola-chip { display: flex; align-items: center; gap: 8px; justify-content: space-between; background: #241a11; border: 1px solid #6b5b45; border-radius: 8px; padding: 4px 10px; font-size: 12px; }
.cola-chip b { color: #f1cf79; }
.cola-chip .t { font-family: monospace; color: #9fe6a8; font-weight: bold; }
.cola-mas, .cola-vacia { font-size: 11px; color: #7a6b52; text-align: right; }

/* misiones: una columna de retratos */
.columna-sidebar { flex: 0 0 74px; }
.sidebar-misiones { align-items: center; gap: 10px; }
.sidebar-misiones::before { content: 'MISIONES'; font-size: 9px; letter-spacing: 1px; color: #a89676; }
.casilla-mision { width: 58px; height: 58px; aspect-ratio: 1 / 1; border-radius: 50%; border: 3px solid #8a6d2f; padding: 0; background-position: center 20%; box-shadow: 0 2px 8px rgba(0,0,0,.6); overflow: visible; flex-shrink: 0; }
.casilla-mision::before { display: none; }
.casilla-mision .nombre-pj, .casilla-mision .titulo-mision-pj { display: none; }
.casilla-mision .ins-mision { position: absolute; right: -5px; bottom: -5px; min-width: 21px; height: 21px; border-radius: 50%; background: #2f7d3a; font-size: 11px; font-style: normal; font-weight: bold; display: flex; align-items: center; justify-content: center; border: 2px solid #1a120c; color: #fff; }
.casilla-mision.completable { border-color: #7cd47c; animation: pulso-mision 1.6s ease-in-out infinite; }
.casilla-mision.completable .ins-mision { background: #3fae4c; }
.casilla-mision.bloqueada .ins-mision { background: #4a3c2c; }
/* Misión del mítico (Monique): brillo dorado, más grande y con destello */
.casilla-mision.mitica.completable { border-color: #ffd877; animation: pulso-mitica 1.8s ease-in-out infinite; }
.casilla-mision.mitica.completable .ins-mision { background: #e0a526; color: #2a1a05; }
@keyframes pulso-mitica { 0%, 100% { box-shadow: 0 0 6px rgba(255,205,90,.55), 0 0 14px rgba(255,170,40,.35); } 50% { box-shadow: 0 0 16px rgba(255,220,120,1), 0 0 34px rgba(255,170,40,.75), 0 0 52px rgba(255,140,30,.35); } }
@keyframes pulso-mision { 0%, 100% { box-shadow: 0 0 4px rgba(124,212,124,.5); } 50% { box-shadow: 0 0 14px rgba(124,212,124,.95); } }

/* la ilustración del pueblo pasa a ser una franja informativa */
#fila-principal { display: block; }
#fila-principal .fondo-pueblo { aspect-ratio: auto !important; height: 104px; background-size: cover !important; background-position: center 45% !important; animation: none !important; border: 2px solid #8a6d2f; }
#fondo-pueblo #edificios { display: none; }
#vista-cuartel-general { display: none !important; }
#banner-info { position: absolute; inset: 0; display: flex; align-items: center; gap: 22px; padding: 0 22px; }
#banner-info h1 { margin: 0; font: bold 26px Georgia, serif; color: #f1cf79; }
#banner-info p { margin: 3px 0 0; font-size: 12px; color: #d9c9a3; }
.hub-resumen { margin-left: auto; display: flex; gap: 9px; }
.hub-res { background: rgba(26,18,12,.85); border: 1px solid #6b5b45; border-radius: 9px; padding: 7px 12px; font-size: 12px; max-width: 260px; }
.hub-res b { color: #f1cf79; display: block; font-size: 13px; }
.hub-res.ok { border-color: #4d8a2e; }
.hub-res.ok b { color: #8fe08a; }
#monique-en-el-pueblo { width: 54px !important; bottom: 6px !important; left: auto !important; right: 8px !important; }

/* pestañas y rejilla de edificios */
.hub-fila-tabs { display: flex; align-items: center; gap: 8px; margin: 12px 0 9px; flex-wrap: wrap; }
#hub-tabs { display: flex; gap: 8px; }
.hub-tab { background: #33261a; border: 1px solid #4a3c2c; border-radius: 8px; padding: 6px 13px; font-size: 13px; color: #c9b48f; cursor: pointer; }
.hub-tab small { opacity: .7; margin-left: 4px; }
.hub-tab.on { background: #5c4429; border-color: #f1cf79; color: #f1cf79; font-weight: bold; }
.hub-atajos { margin-left: auto; font-size: 11px; color: #a89676; }
.hub-atajos b { background: #1f1710; border: 1px solid #8a6d2f; border-radius: 4px; padding: 0 5px; color: #f1cf79; margin: 0 2px; }
.hub-herramientas { display: flex; gap: 8px; }
.hub-herramientas #camino-guerreros, .hub-herramientas #boton-civilizacion { position: static !important; transform: none !important; margin: 0 !important; font-size: 12px !important; padding: 6px 12px !important; white-space: nowrap; }
.rejilla-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 11px; }
.carta-hub { background: linear-gradient(180deg, #33261a, #241a11); border: 1px solid #4a3c2c; border-radius: 11px; border-top: 3px solid #6b5b45; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 9px; cursor: pointer; }
.carta-hub:hover { border-color: #d4a95a; }
.carta-hub.eco { border-top-color: #5b8a3d; } .carta-hub.mil { border-top-color: #b0523f; } .carta-hub.esp { border-top-color: #d4a95a; }
.carta-hub.lista { border-color: #4d8a2e; box-shadow: 0 0 12px rgba(95,208,106,.25); }
.carta-hub.enobra { border-color: #f1cf79; }
.carta-hub.bloq { opacity: .6; }
.hub-foto { position: relative; height: 58px; background-size: cover; background-position: center; }
.hub-nivel { position: absolute; right: 7px; top: 6px; background: rgba(20,13,8,.85); border: 1px solid #8a6d2f; color: #f1cf79; border-radius: 6px; padding: 0 7px; font-size: 11px; font-weight: bold; }
.hub-tecla { position: absolute; left: 7px; top: 6px; background: #1f1710; border: 1px solid #8a6d2f; color: #f1cf79; border-radius: 4px; width: 19px; height: 19px; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.hub-pnivel { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.55); }
.hub-pnivel i { display: block; height: 100%; background: #f1cf79; }
.hub-nombre { padding: 7px 10px 0; font-weight: bold; font-size: 13px; }
.hub-efecto { padding: 1px 10px 5px; font-size: 11px; color: #a89676; min-height: 17px; }
.hub-costes { display: flex; gap: 4px; padding: 0 10px 6px; min-height: 24px; flex-wrap: wrap; }
.hub-chip { font-size: 11px; border-radius: 5px; padding: 1px 6px; background: #1a120c; border: 1px solid; }
.hub-chip.bien { border-color: #3f7a3a; color: #9fe6a8; } .hub-chip.mal { border-color: #a8402e; color: #ff9d8a; }
.hub-mejorar { margin: 0 10px; background: linear-gradient(180deg, #e4b95a, #b98a3a); color: #2a1d0e; border: none; border-radius: 8px; padding: 6px 4px; font-weight: bold; font-size: 12px; cursor: pointer; }
.hub-mejorar:hover { filter: brightness(1.1); }
.hub-estado { margin: 0 10px; background: #2b2018; color: #a89676; border: 1px solid #4a3c2c; border-radius: 8px; padding: 6px 4px; font-size: 12px; text-align: center; }
.hub-estado.obra { color: #f1cf79; border-color: #b98a3a; } .hub-estado.ok { color: #8fe08a; border-color: #3f7a3a; }
.hub-estado b { font-family: monospace; }

/* panel lateral del edificio */
#cajon-edificio { position: fixed; inset: 0; z-index: 300; }
.cajon-velo { position: absolute; inset: 0; background: rgba(10,6,3,.55); }
.cajon-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(660px, 96vw); display: flex; flex-direction: column; background: #2b2018; border-left: 3px solid #8a6d2f; box-shadow: -12px 0 40px rgba(0,0,0,.65); }
.cajon-titulo { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: linear-gradient(180deg, #4a3620, #2b2018); border-bottom: 2px solid #8a6d2f; color: #f1cf79; }
.cajon-titulo h2 { margin: 0; font: bold 21px Georgia, serif; color: #f1cf79; }
.ct-ico { font-size: 24px; }
.ct-nivel { background: #1f1710; border: 1px solid #8a6d2f; border-radius: 6px; padding: 1px 9px; font-size: 13px; }
.ct-x { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 11px; color: #c9b48f; }
.ct-x b { background: #3d2f22; border: 1px solid #8a6d2f; border-radius: 6px; padding: 3px 9px; color: #f1cf79; font-size: 12px; }
.ct-x button { background: #3d2f22; border: 1px solid #8a6d2f; border-radius: 6px; color: #f1cf79; cursor: pointer; padding: 3px 9px; }
.cajon-cuerpo { overflow-y: auto; padding: 14px 16px 26px; flex: 1; }
#cajon-cuerpo #detalle-edificio { background: transparent; padding: 0; }
#cajon-cuerpo #seccion-tropas-cuartel h2 { font-size: 16px; margin: 16px 0 8px; }
#cajon-cuerpo #seccion-tropas-cuartel h3 { font-size: 14px; margin: 14px 0 6px; }

/* cabecera del panel: tarjetas crema con datos y acción */
.cx-hero { display: flex; gap: 12px; background: #f6ecd4; border: 1px solid #dfcda5; border-radius: 10px; padding: 9px; color: #3b2a1c; margin-bottom: 12px; }
.cx-img { width: 130px; height: 82px; border-radius: 8px; background-size: cover; background-position: center; flex-shrink: 0; }
.cx-txt p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; color: #7d684b; }
.cx-dato { display: inline-block; background: #ecdcb6; border-radius: 6px; padding: 2px 9px; font-size: 12px; margin-right: 6px; color: #3b2a1c; }
.cx-mejora { background: #f6ecd4; border: 1px solid #dfcda5; border-radius: 10px; padding: 10px 12px; color: #3b2a1c; margin-bottom: 14px; }
.cx-mejora h4 { margin: 0 0 7px; font-size: 14px; color: #7a2230; }
.cx-mejora h4 small { font-weight: normal; color: #7d684b; font-size: 11px; margin-left: 6px; }
.cx-tabla { border-collapse: collapse; width: 100%; font-size: 12.5px; background: #fffaf0; border: 1px solid #dfcda5; color: #3b2a1c; }
.cx-tabla th, .cx-tabla td { padding: 5px 10px; border-bottom: 1px solid #dfcda5; text-align: left; color: #3b2a1c; }
.cx-tabla th { background: #ecdcb6; color: #7a2230; font-size: 11px; }
.cx-tabla td.n { text-align: right; }
.cx-tabla .mal, .ft-prev .mal { color: #a3272f; font-weight: bold; }
.cx-tabla .bien { color: #2f7a3a; font-weight: bold; }
.cx-avisos p { margin: 6px 0 0; font-size: 12.5px; color: #5b4a35; }
.cx-cupon { display: block; margin-top: 8px; font-size: 12.5px; color: #7a2230; cursor: pointer; }
.cx-btn { margin-top: 10px; width: 100%; background: linear-gradient(180deg, #9c3947, #7a2230); color: #fff8e8; border: none; border-radius: 8px; padding: 9px; font-weight: bold; font-size: 14px; cursor: pointer; }
.cx-btn:disabled { background: #e2d5b4; color: #8a7a5c; cursor: not-allowed; border: 1px solid #b8a274; }
.cx-aviso { background: #f6ecd4; border: 1px solid #dfcda5; border-radius: 10px; padding: 10px 12px; color: #3b2a1c; margin-bottom: 14px; font-size: 13px; }
.cx-aviso.obra { border-color: #b98a3a; } .cx-aviso.bien { color: #2f7a3a; font-weight: bold; }
.cx-detalles { margin-top: 12px; }
.cx-detalles summary { cursor: pointer; color: #d4a95a; font-weight: bold; padding: 6px 0; }

/* entrenar tropas: una fila por tropa, con cantidad y "Máx" */
.lista-tropas { display: flex; flex-direction: column; gap: 8px; }
.lista-tropas .vacio { color: #a89676; font-size: 13px; margin: 0; }
#tropas-disponibles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip-tienes { background: #3d2f22; border: 1px solid #6b5b45; border-radius: 8px; padding: 3px 10px; font-size: 12px; }
.fila-tropa { display: flex; gap: 10px; align-items: center; background: #f6ecd4; border: 1px solid #dfcda5; border-radius: 10px; padding: 8px; color: #3b2a1c; }
.ft-foto { width: 64px; height: 64px; border-radius: 8px; border: 2px solid #8a6d2f; background-size: cover; background-position: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.ft-info { flex: 1; min-width: 0; }
.ft-nombre { font-weight: bold; font-size: 14px; color: #7a2230; }
.ft-tienes { float: right; font-size: 11px; font-weight: normal; color: #7d684b; }
.ft-desc { font-size: 11.5px; color: #7d684b; margin: 2px 0 4px; line-height: 1.35; }
.ft-costes { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; align-items: center; }
.ft-costes span { background: #ecdcb6; border-radius: 5px; padding: 1px 6px; }
.ft-costes a { color: #7a2230; cursor: pointer; text-decoration: underline; margin-left: 4px; }
.ft-prev { font-size: 11px; color: #5b4a35; margin-top: 3px; min-height: 14px; }
.ft-accion { display: flex; flex-direction: column; gap: 5px; width: 128px; flex-shrink: 0; }
.ft-max { font-size: 11px; color: #7d684b; text-align: right; }
.ft-max b { color: #2f7a3a; }
.ft-cant { display: flex; gap: 4px; }
.ft-cant input { width: 66px; border: 1px solid #a8823a; border-radius: 6px; padding: 5px; text-align: right; background: #fff; font-size: 13px; color: #3b2a1c; }
.ft-cant button { background: #f6e9cc; border: 1px solid #a8823a; border-radius: 6px; color: #5b3d10; font-size: 11px; cursor: pointer; flex: 1; }
.ft-entrenar { background: linear-gradient(180deg, #9c3947, #7a2230); color: #fff8e8; border: none; border-radius: 8px; padding: 7px; font-weight: bold; font-size: 12px; cursor: pointer; }
.ft-entrenar:disabled { background: #e2d5b4; color: #8a7a5c; cursor: not-allowed; }
.lock-tropas { background: #efe2c2; border: 1px dashed #b8a274; border-radius: 9px; padding: 8px 11px; font-size: 12px; color: #7d684b; margin-top: 10px; }
.lock-tropas summary { cursor: pointer; }
.lock-tropas b { color: #7a2230; }
.lock-tropas .lock-lista { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.lock-tropas .lock-lista span { background: #f6ecd4; border: 1px solid #dfcda5; border-radius: 6px; padding: 2px 8px; }
#pila-avisos-rapidos { top: 96px; }

/* --- ajuste de alturas: la pantalla del pueblo tiene que caber en la ventana (con el dock encima) --- */
.hub-foto { height: 46px; }
.hub-nombre { padding: 6px 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-efecto { padding: 0 10px 4px; min-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-costes { min-height: 20px; flex-wrap: nowrap; gap: 3px; padding: 0 8px 5px; overflow: hidden; }
.hub-chip { font-size: 10.5px; padding: 0 5px; white-space: nowrap; }
.carta-hub { padding-bottom: 7px; }
.hub-mejorar, .hub-estado { padding: 5px 4px; }
#fila-principal .fondo-pueblo { height: 84px; }
.hub-fila-tabs { margin: 10px 0 8px; }
#barra-pueblo { margin-bottom: 10px; }
@media (max-height: 860px), (max-width: 1420px) {
  .rejilla-hub { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; }
  .hub-foto { height: 32px; }
  .hub-nombre { padding-top: 4px; font-size: 12.5px; }
  .hub-chip { font-size: 10px; padding: 0 4px; }
  #fila-principal .fondo-pueblo { height: 58px; }
  #banner-info { padding: 0 16px; gap: 14px; }
  #banner-info h1 { font-size: 19px; }
  #banner-info p { font-size: 11px; margin-top: 1px; }
  .hub-res { padding: 3px 9px; font-size: 11px; } .hub-res b { font-size: 12px; }
  .hub-fila-tabs { margin: 8px 0 6px; }
  #barra-pueblo { padding: 7px 12px; margin-bottom: 8px; }
  .recurso-pill { padding: 4px 9px; } .rp-ico { font-size: 20px; } .rp-num b { font-size: 16px; }
}
@media (max-height: 740px) {
  .rp-sub { display: none; }
  .hub-foto { height: 24px; }
  #fila-principal .fondo-pueblo { height: 46px; }
  .hub-res b + * { display: none; }
}
.cola-chip { padding: 3px 9px; font-size: 11.5px; }
#colas-pueblo { gap: 4px; }

/* --- cancelar obras y reclutamientos --- */
.hub-estado.obra { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hub-x, .chip-x { background: #3d2f22; border: 1px solid #8a6d2f; color: #f1cf79; border-radius: 6px; cursor: pointer; font-size: 11px; line-height: 1; padding: 3px 6px; flex-shrink: 0; }
.hub-x:hover, .chip-x:hover { background: #7a2230; border-color: #ff9d8a; color: #fff; }
.cola-chip .chip-x { margin-left: 2px; }
.cx-cancelar { display: block; margin-top: 8px; background: #fff5f2; border: 1px solid #b8483a; color: #a3272f; border-radius: 8px; padding: 6px 12px; font-weight: bold; font-size: 12.5px; cursor: pointer; }
.cx-cancelar:hover { background: #b8483a; color: #fff; }
.cola-cancelar { margin-left: 10px; background: #3d2f22; border: 1px solid #8a6d2f; color: #f1cf79; border-radius: 6px; cursor: pointer; font-size: 11px; padding: 2px 8px; }
.cola-cancelar:hover { background: #7a2230; border-color: #ff9d8a; color: #fff; }

/* --- cola de construcción por carriles (varios niveles apilados del mismo o de distinto edificio) --- */
.hub-mas { background: #2f7d3a; border: 1px solid #4d8a2e; color: #fff; border-radius: 6px; cursor: pointer; font-size: 11px; line-height: 1; padding: 3px 6px; margin-left: 2px; }
.hub-mas:hover { background: #3fae4c; }
.hub-subestado { margin: 2px 10px 0; font-size: 10.5px; color: #a89676; text-align: center; }
.cola-badge { background: #3d2f22; border: 1px solid #8a6d2f; color: #f1cf79; border-radius: 8px; padding: 0 5px; font-size: 10px; font-weight: bold; }
.cx-trabajo { display: flex; align-items: center; gap: 8px; background: #fffaf0; border: 1px solid #dfcda5; border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; font-size: 12.5px; color: #3b2a1c; }
.cx-trabajo.espera { opacity: .75; }
.cx-trabajo span { flex: 1; }
.cx-trabajo b { font-family: monospace; color: #2f7a3a; }
.cx-cancelar-mini { background: #f6e9cc; border: 1px solid #b8483a; color: #a3272f; border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: bold; cursor: pointer; white-space: nowrap; }
.cx-cancelar-mini:hover { background: #b8483a; color: #fff; }
.cx-nota { color: #7d684b; font-size: 12.5px; margin: 4px 0 0; }

/* --- Habilidades de tribu: árbol de 3 ramas, financiado por donaciones de la alianza --- */
.hab-intro { padding: 0 22px 10px; color: var(--a-suave); font-size: 12.5px; margin: 0; }
.hab-arbol { display: flex; gap: 18px; padding: 0 22px 24px; overflow-x: auto; }
.hab-columna { flex: 1; min-width: 240px; }
.hab-columna h4 { margin: 0 0 10px; color: var(--a-titulo); border-bottom: 2px solid var(--a-borde); padding-bottom: 6px; }
.hab-fila { display: flex; flex-direction: column; gap: 10px; }
.hab-flecha { text-align: center; color: var(--a-muy-suave); font-size: 16px; margin: 6px 0; }
.hab-carta { background: var(--a-panel); border: 1px solid var(--a-linea); border-radius: 10px; padding: 10px 12px; }
.hab-carta.bloqueada { opacity: .55; background: var(--a-panel2); }
.hab-carta.tope { border-color: #4d8a2e; }
.hab-titulo { font-weight: bold; color: var(--a-titulo); font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.hab-nivel { margin-left: auto; background: var(--a-panel2); border: 1px solid var(--a-linea); border-radius: 6px; padding: 0 6px; font-size: 11px; color: var(--a-suave); }
.hab-descripcion { margin: 4px 0 0; font-size: 12px; color: var(--a-suave); line-height: 1.4; }
.hab-actual { font-size: 11.5px; color: #2f7a3a; margin-top: 3px; font-weight: bold; }
.hab-siguiente { font-size: 11.5px; color: var(--a-suave); margin-top: 6px; }
.hab-barra { height: 6px; background: var(--a-panel2); border: 1px solid var(--a-linea); border-radius: 4px; overflow: hidden; margin: 5px 0; }
.hab-barra i { display: block; height: 100%; background: linear-gradient(90deg, #b8964f, #8a2f3a); }
.hab-donado { font-size: 10.5px; color: var(--a-muy-suave); }
.hab-donar-btn { width: 100%; margin-top: 8px; background: var(--a-boton); border: 1px solid var(--a-boton-borde); color: var(--a-boton-texto); border-radius: 8px; padding: 6px; font-weight: bold; font-size: 12px; cursor: pointer; }
.hab-donar-btn:hover { filter: brightness(0.96); }
.hab-bloqueo { font-size: 11.5px; color: var(--a-suave); margin-top: 6px; }
.hab-tope { font-size: 11.5px; color: #2f7a3a; font-weight: bold; margin-top: 6px; }
.hab-campo { display: block; font-size: 12px; color: #e8d5a8; margin-bottom: 10px; }
.hab-campo small { color: #c9b48f; font-weight: normal; }
.hab-campo input { display: block; width: 100%; margin-top: 4px; padding: 7px; border: 1px solid var(--a-boton-borde); border-radius: 6px; background: var(--a-panel); color: var(--a-texto); }

/* --- Donar en grupo: recuadro más grande, con una fila editable por cada pueblo --- */
.hab-donar-grupo { max-width: min(680px, 94vw); max-height: 88vh; overflow-y: auto; padding-bottom: 18px; }
.hab-grupo-pct { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.25); border: 1px solid #6b5b45; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 12.5px; color: #e8d5a8; flex-wrap: wrap; }
.hab-grupo-pct input { padding: 5px; border-radius: 6px; border: 1px solid var(--a-boton-borde); background: var(--a-panel); color: var(--a-texto); text-align: center; }
.hab-grupo-lista { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.hab-grupo-fila { background: rgba(0,0,0,.22); border: 1px solid #4a3c2c; border-radius: 10px; padding: 8px 12px; }
.hab-grupo-nombre { font-size: 13px; font-weight: bold; color: #f1cf79; margin-bottom: 6px; }
.hab-grupo-nombre small { font-weight: normal; color: #c9b48f; }
.hab-grupo-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hab-grupo-campo { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: #e8d5a8; }
.hab-grupo-campo small { color: #a89676; }
.hab-grupo-campo input { padding: 6px; border-radius: 6px; border: 1px solid var(--a-boton-borde); background: var(--a-panel); color: var(--a-texto); width: 100%; }
.hab-grupo-total { margin-top: 12px; padding: 8px 12px; background: rgba(0,0,0,.25); border-radius: 8px; font-size: 13px; color: #f1cf79; font-weight: bold; text-align: center; }
@media (max-width: 560px) {
  .hab-grupo-campos { grid-template-columns: 1fr; }
}

/* --- Habilidades de tribu: acceso a la rama completa desde la pestaña --- */
.hab-columna-titulo { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.hab-columna-titulo:hover { color: var(--a-acento); }
.hab-ver { margin-left: auto; font-size: 10.5px; font-weight: normal; color: var(--a-suave); }
.hab-resumen-rama { font-size: 11px; color: var(--a-muy-suave); margin: -6px 0 10px; }

/* --- Las 3 ramas, cada una con su ilustración, una debajo de otra dentro de la propia pestaña (sin tener que
   "entrar" en nada) --- */
.hab-rama-bloque { margin: 0 0 28px; }
.hab-rama-bloque-titulo { display: flex; align-items: center; gap: 10px; padding: 0 22px 8px; flex-wrap: wrap; }
.hab-rama-bloque-titulo h4 { margin: 0; color: var(--a-titulo); border-bottom: 2px solid var(--a-borde); padding-bottom: 4px; }
.hab-rama-bloque-lienzo { position: relative; width: 100%; aspect-ratio: 941 / 1672; background-size: cover; background-position: top center; border-top: 2px solid var(--a-borde); border-bottom: 2px solid var(--a-borde); }
.hab-nodo-mapa { position: absolute; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; border: 3px solid #d9b45c; background: radial-gradient(circle at 35% 30%, #4a3620, #1a120c 75%); color: #f1cf79; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 16px rgba(0,0,0,.7), 0 0 0 3px rgba(0,0,0,.5); padding: 0; }
.hab-nodo-mapa:hover { transform: translate(-50%, -50%) scale(1.08); }
.hab-nodo-emoji { font-size: 26px; line-height: 1; }
.hab-nodo-pips { display: flex; gap: 2px; margin-top: 3px; }
.hab-nodo-pips i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); display: block; }
.hab-nodo-pips i.on { background: #f1cf79; box-shadow: 0 0 4px #f1cf79; }
.hab-nodo-etiqueta { position: absolute; top: 100%; margin-top: 6px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #fff; background: rgba(10,8,6,.85); padding: 2px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.hab-nodo-mapa:hover .hab-nodo-etiqueta { opacity: 1; }
.hab-nodo-mapa.bloqueado { border-color: #5a4d38; background: radial-gradient(circle at 35% 30%, #2a2018, #0d0906 75%); filter: grayscale(.6); opacity: .8; }
.hab-nodo-mapa.progreso { border-color: #f1cf79; box-shadow: 0 0 22px rgba(241,207,121,.65), 0 0 0 3px rgba(0,0,0,.5); }
.hab-nodo-mapa.tope { border-color: #6fd66f; box-shadow: 0 0 22px rgba(111,214,111,.65), 0 0 0 3px rgba(0,0,0,.5); }
.hab-ficha { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); width: min(460px, 94vw); z-index: 3; display: flex; background: var(--a-panel); border: 2px solid var(--a-borde); border-radius: 14px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.75); }
.hab-ficha-img { width: 130px; flex-shrink: 0; background-size: cover; background-position: center; }
.hab-ficha-cuerpo { position: relative; flex: 1; min-width: 0; padding: 12px 14px; }
.hab-ficha .hab-carta { border: none; padding: 0; background: none; border-radius: 0; }
.hab-ficha .perfil-cerrar { position: absolute; top: -6px; right: -6px; background: #2b2018; border: 2px solid #8a6d2f; color: #f1cf79; border-radius: 50%; width: 26px; height: 26px; z-index: 1; }
@media (max-width: 560px) {
  .hab-ficha { width: 94vw; }
  .hab-ficha-img { width: 92px; }
}
@media (max-width: 700px) {
  .hab-nodo-mapa { width: 56px; height: 56px; }
  .hab-nodo-emoji { font-size: 20px; }
}

/* ===== El Camino del Guerrero ===== */
.camino-modal {
  background: #1a130c; border: 3px solid #8a7355; border-radius: 10px;
  max-width: 920px; width: 100%; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 0 60px rgba(0,0,0,.8);
}
.camino-cabecera {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 2px solid #5a4a35; background: #241a10;
}
.camino-cabecera h2 { margin: 0; color: #f1cf79; font-family: Georgia, serif; font-size: 19px; }
.camino-navegacion-libros {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 20px; background: #211911; color: #d4c4a0; font-size: 13px;
}
.camino-navegacion-libros button {
  background: #3a2c1c; color: #f1cf79; border: 1px solid #8a7355; border-radius: 5px;
  padding: 5px 12px; cursor: pointer; font-size: 13px;
}
.camino-navegacion-libros button:disabled { opacity: .35; cursor: default; }
.camino-libro-fondo {
  position: relative; background-size: cover; background-position: center;
  min-height: 520px; margin: 14px; border-radius: 6px; border: 1px solid #5a4a35;
}
.camino-nivel {
  position: absolute; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-weight: bold; font-size: 17px;
  border: 3px solid #3a2c1c; cursor: pointer; transition: transform .15s;
  box-shadow: 0 3px 8px rgba(0,0,0,.6);
}
.camino-nivel:hover { transform: translate(-50%, -50%) scale(1.12); }
.camino-nivel.completado { background: #3a7a3a; color: #eaffea; border-color: #2a5a2a; }
.camino-nivel.disponible { background: #c99a3e; color: #2a1a05; border-color: #8a6a1e; animation: camino-pulso 1.6s infinite; }
.camino-nivel.bloqueado { background: #2a2420; color: #6a5d4d; cursor: not-allowed; }
.camino-nivel.jefe { width: 56px; height: 56px; font-size: 20px; box-shadow: 0 0 18px rgba(230,180,60,.7); }
@keyframes camino-pulso { 0%,100% { box-shadow: 0 0 0 0 rgba(201,154,62,.6); } 50% { box-shadow: 0 0 0 10px rgba(201,154,62,0); } }

.camino-contenido-nivel { padding: 16px 20px 20px; color: #e8d9b8; }
.camino-contenido-nivel h3 { color: #f1cf79; font-size: 15px; margin: 0; }
.camino-cabecera.cabecera-jefe { background: linear-gradient(90deg, #241a10, #3a2410); border-bottom-color: #8a6a1e; }
.camino-cabecera.cabecera-victoria { background: linear-gradient(90deg, #1a2a14, #243a1a); border-bottom-color: #5a8a3a; }
.camino-cabecera.cabecera-derrota { background: linear-gradient(90deg, #2a1414, #3a1a1a); border-bottom-color: #8a3a3a; }

.camino-seccion-titulo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; margin: 16px 0 8px; }
.camino-seccion-titulo:first-child { margin-top: 0; }
.camino-stat-muralla { font-size: 12px; color: #a89676; }

.camino-tropas-enemigo-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.camino-tropa-enemiga {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: #2a1f14; border: 1px solid #5a4a35; border-radius: 6px; padding: 7px 10px; min-width: 70px;
}
.camino-tropa-enemiga .nombre { font-size: 11px; color: #c9b896; text-align: center; }
.camino-tropa-enemiga .cantidad { font-weight: bold; color: #f1cf79; font-size: 13px; }
.camino-icono-tropa { border-radius: 5px; object-fit: cover; border: 1px solid #5a4a35; }
.camino-icono-tropa-respaldo {
  border-radius: 5px; background: #3a2c1c; border: 1px solid #5a4a35; color: #f1cf79;
  display: flex; align-items: center; justify-content: center; font-weight: bold; text-transform: uppercase;
}
.camino-sin-bajas { color: #6a9a6a; font-style: italic; margin: 0; }

.camino-comandante-enemigo { display: flex; gap: 12px; align-items: center; background: #2a1f14; border: 1px solid #6a3a3a; border-radius: 6px; padding: 10px; margin-top: 12px; }
.camino-comandante-enemigo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid #8a5a3a; flex-shrink: 0; }
.camino-comandante-enemigo .nombre { color: #f1a579; font-weight: bold; display: flex; align-items: center; gap: 8px; }
.camino-comandante-enemigo .nivel-chip { background: #3a2414; border: 1px solid #8a5a3a; border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: normal; color: #d4a95a; }
.camino-comandante-enemigo .pasiva { font-size: 12px; color: #c9b896; margin-top: 4px; line-height: 1.4; }
.camino-sin-comandante { color: #8a9a8a; font-style: italic; margin-top: 12px; }
.camino-seccion-recompensa { background: #241f14; border: 1px dashed #6a5a3a; border-radius: 6px; padding: 10px 14px; margin-top: 16px; }
.camino-seccion-recompensa h3 { margin-bottom: 4px; }
.camino-seccion-recompensa p { margin: 0; }

.boton-grande-dorado {
  display: block; width: 100%; margin-top: 16px; padding: 12px;
  background: linear-gradient(180deg, #d4a95a, #a9772e); color: #2a1a05;
  border: 2px solid #8a6a1e; border-radius: 7px; font-family: Georgia, serif;
  font-weight: bold; font-size: 15px; cursor: pointer;
}
.boton-grande-dorado:hover { filter: brightness(1.1); }
.boton-grande-dorado + .boton-grande-dorado { margin-top: 8px; }
.boton-grande-dorado.boton-secundario { background: linear-gradient(180deg, #4a6a8a, #2e4a77); color: #e8f0f8; border-color: #1e3a5a; }

.camino-barra-poblacion {
  position: relative; height: 24px; background: #2a1f14; border: 1px solid #5a4a35; border-radius: 12px;
  overflow: hidden; margin-bottom: 4px;
}
.camino-barra-poblacion .relleno { height: 100%; background: linear-gradient(90deg, #5a8a4a, #8ac95a); transition: width .15s; }
.camino-barra-poblacion .relleno.exceso { background: linear-gradient(90deg, #a93a3a, #d45a5a); }
.camino-barra-poblacion span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: #f1e9d8; text-shadow: 0 1px 2px #000; }
.camino-nota-poblacion { font-size: 11px; color: #8a7a62; margin: 0 0 12px; font-style: italic; }

.camino-lista-tropas { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; margin-bottom: 12px; padding-right: 4px; }
.camino-fila-tropa { display: flex; align-items: center; gap: 10px; background: #2a1f14; border: 1px solid #5a4a35; border-radius: 6px; padding: 7px 10px; }
.camino-fila-tropa-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.camino-fila-tropa-info .nombre { font-weight: bold; color: #e8d9b8; }
.camino-fila-tropa-info .disponibles { font-size: 11px; color: #a89676; }
.camino-btn-max {
  background: #3a2c1c; color: #d4a95a; border: 1px solid #6a5a3a; border-radius: 4px;
  padding: 4px 8px; font-size: 11px; cursor: pointer; flex-shrink: 0;
}
.camino-btn-max:hover { background: #4a3a2a; }
.camino-input-tropa { width: 80px; background: #1a130c; border: 1px solid #8a7355; border-radius: 4px; color: #f1cf79; padding: 5px 7px; text-align: right; flex-shrink: 0; }
.camino-sin-tropas { color: #c97a5a; }
.camino-label-comandante { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; font-size: 13px; color: #c9b896; }
.camino-label-comandante select { background: #1a130c; border: 1px solid #8a7355; border-radius: 4px; color: #f1cf79; padding: 6px 8px; }
.camino-aviso-fatiga { background: #3a2a1a; border: 1px solid #8a6a3a; border-radius: 5px; padding: 8px 10px; color: #e0b579; font-size: 13px; margin: 0 0 12px; }
.camino-recompensa { background: #2a3a1f; border: 1px solid #6a8a3a; border-radius: 5px; padding: 8px 10px; color: #c9e089; margin: 12px 0 0; }

.camino-reloj-arena { text-align: center; color: #f1cf79; }
.camino-reloj-arena .reloj-giro { font-size: 90px; animation: camino-reloj-girar 1.8s linear infinite; }
@keyframes camino-reloj-girar { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }

/* ===== Probabilidades visibles en las tarjetas de cofre ===== */
.detalle-probabilidades-cofre {
  margin: 8px 0; background: rgba(20,15,10,.75); border: 1px solid #5a4a35; border-radius: 5px; padding: 6px 8px;
  font-size: 12px; color: #d4c4a0;
}
.detalle-probabilidades-cofre summary {
  cursor: pointer; color: #f1cf79; font-weight: bold; outline: none; user-select: none;
}
.fila-probabilidad-cofre {
  display: flex; justify-content: space-between; padding: 3px 0 3px 4px; border-top: 1px solid rgba(90,74,53,.4);
}
.fila-probabilidad-cofre b { color: #f1cf79; }

/* ===== Camino del Guerrero: libros distintos, modo ataque/defensa ===== */
.camino-libro-fondo { overflow: hidden; }
.camino-libro-imagen { position: absolute; inset: 0; background-size: cover; background-position: center; }
.camino-trazado { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.camino-nivel { z-index: 2; }
.camino-nivel-modo {
  position: absolute; right: -7px; bottom: -7px; font-size: 13px; line-height: 1;
  background: #1a130c; border: 1px solid #8a7355; border-radius: 50%; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}
.camino-nivel.bloqueado { border-color: #8a7355; }
.camino-subtitulo-libro { color: #c9b896; font-size: 12px; margin-top: 3px; font-family: Georgia, serif; font-style: italic; }
.camino-navegacion-libros span { text-align: center; line-height: 1.35; }
.camino-navegacion-libros small { color: #a89676; }
.camino-insignia-modo { display: inline-block; padding: 5px 12px; border-radius: 14px; font-weight: bold; font-size: 12px; margin-bottom: 10px; letter-spacing: .3px; }
.camino-insignia-modo.ataque { background: #4a2a14; border: 1px solid #c97a3a; color: #f1b57a; }
.camino-insignia-modo.defensa { background: #14304a; border: 1px solid #3a7ac9; color: #8ac0f1; }
.camino-aviso-defensa { background: #14243a; border: 1px solid #3a5a8a; border-radius: 6px; padding: 9px 12px; color: #b5cde8; font-size: 13px; line-height: 1.45; margin: 0 0 12px; }
.camino-cabecera.cabecera-defensa { background: linear-gradient(90deg, #14202e, #1a3350); border-bottom-color: #3a7ac9; }
.camino-comandante-enemigo .rol-comandante { font-size: 11px; color: #d4a95a; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }

/* ===== Camino del Guerrero: las dos habilidades del comandante ===== */
.habilidad-comandante { font-size: 12px; color: #c9b896; margin-top: 5px; line-height: 1.4; }
.etiqueta-habilidad { display: inline-block; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: .4px; padding: 1px 7px; border-radius: 9px; margin-right: 3px; }
.etiqueta-habilidad.principal { background: #4a2a14; border: 1px solid #c97a3a; color: #f1b57a; }
.etiqueta-habilidad.pasiva { background: #1f3a2a; border: 1px solid #4a9a6a; color: #8ad4a8; }
.camino-info-comandante { margin: 6px 0 4px; }
.camino-info-comandante:empty { display: none; }

/* ===== Camino del Guerrero: premio extra (cofre / reliquias) ===== */
.camino-recompensa-extra { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed #6a5a3a; color: #f1cf79; font-weight: bold; }
.camino-icono-reliquia { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }

/* ===== Camino del Guerrero: capítulos bloqueados (solo se pueden VER) ===== */
.camino-nivel.bloqueado { cursor: pointer; }
.camino-aviso-bloqueado { background: #2a2418; border: 1px solid #8a6d3a; border-radius: 6px; padding: 9px 12px; color: #e0c98a; font-size: 13px; line-height: 1.45; margin: 0 0 12px; }
.boton-grande-dorado[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.boton-grande-dorado[disabled]:hover { filter: grayscale(.6); }

/* ===== Camino del Guerrero: el NIVEL FINAL ===== */
.camino-nivel.final { font-size: 11px; letter-spacing: .5px; width: 66px; height: 66px; box-shadow: 0 0 24px rgba(240,90,40,.85), 0 0 10px rgba(255,220,120,.7); border-color: #c9461e; }
.camino-nivel.final.disponible { background: radial-gradient(circle at 35% 30%, #ffd98a, #e0791e 70%, #8a3a10); color: #2a0f02; }

/* ===== Pantalla "Elige tu punto de entrada": el mapa con un dado en cada zona ===== */
.entrada-contenedor { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.entrada-mapa {
  position: relative; aspect-ratio: 1671 / 941;
  width: min(96vw, calc((100vh - 170px) * 1671 / 941)); /* cabe entero en alto y en ancho, dejando sitio al texto de abajo */
  border-radius: 8px; overflow: hidden; box-shadow: 0 0 40px rgba(0,0,0,.9);
}
.entrada-mapa img { width: 100%; height: 100%; display: block; user-select: none; }
.entrada-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.entrada-prov { fill: rgba(255,235,170,0); stroke: rgba(255,240,200,.16); stroke-width: 1.5; cursor: pointer; transition: fill .15s, stroke .15s; }
.entrada-prov:hover { fill: rgba(255,225,130,.24); stroke: rgba(255,230,150,.85); stroke-width: 2.5; }
.entrada-prov.elegida { fill: rgba(255,205,90,.34); stroke: #f1cf79; stroke-width: 3; }
.entrada-prov.llena { fill: rgba(20,10,5,.5); cursor: not-allowed; }
.entrada-prov.llena:hover { stroke: rgba(200,90,70,.8); }
.entrada-info { position: absolute; pointer-events: none; padding: 6px 10px; border-radius: 6px; background: rgba(15,10,5,.92); border: 1px solid #b8923c; color: #e8dcc0; font-size: 13px; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.entrada-info b.con { color: #ffd76a; }
.entrada-barra { display: flex; justify-content: center; }
.entrada-confirmar { padding: 8px 28px; font-weight: bold; background: linear-gradient(#e8c25a, #b98a28); color: #2a1a04; border: 1px solid #f3dc92; border-radius: 6px; cursor: pointer; }
.entrada-confirmar:disabled { opacity: .4; cursor: default; }
.entrada-error { margin: 0; color: #e07a6a; font-size: 14px; font-weight: bold; text-align: center; }

/* ===== El Cuartel a PANTALLA COMPLETA, con todas las tropas (las bloqueadas, en gris y pulsables) ===== */
#cajon-edificio.cajon-completo .cajon-panel { width: 100vw; border-left: 0; }
#cajon-edificio.cajon-completo .cajon-cuerpo { padding: 18px clamp(14px, 3vw, 52px) 44px; }
#cajon-edificio.cajon-completo #cajon-cuerpo > * { max-width: 1560px; margin-left: auto; margin-right: auto; }
/* ojo: con :not(.oculto) — si no, este display:grid (más específico) le ganaba a .oculto y las listas no se escondían al abrir la ficha de una tropa */
#cajon-edificio.cajon-completo .lista-tropas:not(.oculto) { display: grid; grid-template-columns: repeat(auto-fill, minmax(470px, 1fr)); gap: 10px; }
#cajon-edificio.cajon-completo #detalle-tropa { max-width: 920px; }
#cajon-edificio.cajon-completo #cajon-cuerpo #seccion-tropas-cuartel h2 { font-size: 20px; }
#cajon-edificio.cajon-completo #cajon-cuerpo #seccion-tropas-cuartel h3 { font-size: 16px; }

.fila-tropa.bloqueada { background: #e6dcc3; border: 1px dashed #b8a274; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.fila-tropa.bloqueada:hover, .fila-tropa.bloqueada:focus-visible { border-color: #7a2230; box-shadow: 0 0 0 2px rgba(122,34,48,.35); outline: none; }
.fila-tropa.bloqueada .ft-foto { position: relative; filter: grayscale(.9) brightness(.82); }
.fila-tropa.bloqueada .ft-nombre { color: #6a5a45; }
.fila-tropa.bloqueada .ft-desc { color: #85715a; }
.ft-candado { position: absolute; right: -5px; bottom: -5px; font-size: 17px; line-height: 1; background: #3a2c1f; border: 1px solid #b8a274; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.ft-costes .ft-requisito { background: #f1dfb0; color: #7a2230; font-weight: bold; }
.ft-ver { font-size: 12px; font-weight: bold; color: #7a2230; text-align: right; align-self: center; white-space: nowrap; }

/* `.lista-tropas { display: flex }` está definida DESPUÉS de `.oculto { display: none }` y con la misma prioridad, así que ganaba siempre y las
   listas de tropas NO se escondían al abrir la ficha de una tropa (la ficha quedaba perdida debajo de la lista). Esta regla, más específica, lo arregla. */
.lista-tropas.oculto { display: none !important; }

/* en pantalla completa la imagen de la ficha de una tropa es más pequeña, para que el nombre, el requisito y las estadísticas se vean sin desplazarse */
#cajon-edificio.cajon-completo #detalle-tropa > img { max-width: 300px !important; }

/* ficha de una tropa en pantalla completa: la imagen a la izquierda y los datos a la derecha (si la tropa no tiene imagen, queda en una sola columna) */
#cajon-edificio.cajon-completo #detalle-tropa:not(.oculto):has(> img) { display: grid; grid-template-columns: 320px minmax(0, 1fr); column-gap: 28px; align-items: start; }
#cajon-edificio.cajon-completo #detalle-tropa:has(> img) > .btn-volver { grid-column: 1 / -1; justify-self: start; margin-bottom: 14px; }
#cajon-edificio.cajon-completo #detalle-tropa:has(> img) > img { grid-column: 1; grid-row: 2 / span 12; max-width: 100% !important; margin: 0 !important; }
#cajon-edificio.cajon-completo #detalle-tropa:has(> img) > :not(.btn-volver):not(img) { grid-column: 2; max-width: 760px !important; margin-left: 0 !important; margin-right: 0 !important; }

/* ===== Las FASES DEL MUNDO: la imagen de la fase casi a pantalla completa, con su X, el objetivo y los regalos escritos sobre ella ===== */
.fase-fondo { position: fixed; inset: 0; z-index: 100000; background: rgba(5,3,2,.88); display: flex; align-items: center; justify-content: center; padding: 10px; }
.fase-contenedor { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fase-marco { position: relative; aspect-ratio: var(--prop); width: min(97vw, calc((100vh - 76px) * var(--prop))); border-radius: 10px; overflow: hidden; border: 2px solid #8a6d2f; box-shadow: 0 0 60px rgba(0,0,0,.95); background: #000; }
.fase-marco > img { width: 100%; height: 100%; display: block; user-select: none; }
.fase-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1; color: #f1cf79; background: rgba(15,10,4,.82); border: 2px solid #e2b94e; box-shadow: 0 0 12px rgba(0,0,0,.8); z-index: 3; }
.fase-x:hover { background: #7a2230; color: #fff; }
.fase-panel { position: absolute; left: 50%; bottom: 2.5%; transform: translateX(-50%); width: min(94%, 1040px); z-index: 2; padding: clamp(6px, 1.1vw, 14px) clamp(10px, 1.6vw, 22px); text-align: center;
  background: linear-gradient(180deg, rgba(12,8,4,.80), rgba(12,8,4,.92)); border: 2px solid #b8923a; border-radius: 12px; box-shadow: 0 0 22px rgba(0,0,0,.85); color: #f0e6d2; font-size: clamp(11px, 1.3vw, 17px); }
.fase-objetivo { font-size: 1.12em; color: #f1cf79; margin-bottom: .35em; }
.fase-objetivo b { color: #ffe9a8; }
.fase-regalos-titulo { color: #d9c9a2; margin: .15em 0 .35em; font-size: .95em; }
.fase-regalos { display: flex; flex-wrap: wrap; justify-content: center; gap: .45em .6em; }
.fase-regalo { display: inline-flex; align-items: center; gap: .4em; background: rgba(0,0,0,.55); border: 2px solid var(--c, #d4a948); border-radius: 999px; padding: .2em .8em .2em .45em; box-shadow: 0 0 10px color-mix(in srgb, var(--c, #d4a948) 55%, transparent); }
.fase-regalo b { color: #fff; font-size: 1.1em; }
.fase-regalo small { color: #bfae88; font-size: .78em; margin-left: .2em; }
.fase-icono { font-size: 1.5em; line-height: 1; }
.fase-icono-img { width: 1.9em; height: 1.9em; object-fit: contain; }
.fase-regalo img { vertical-align: middle; }
.fase-nota { margin-top: .45em; color: #cdbd98; font-size: .88em; }
.fase-tiempo { margin-top: .3em; color: #9d8e6e; font-size: .78em; }
.fase-alerta { width: min(97vw, 1100px); box-sizing: border-box; text-align: center; padding: 8px 18px; border-radius: 8px; border: 2px solid #f1cf79; color: #fff3cf; font-weight: bold; font-size: clamp(14px, 1.8vw, 22px);
  background: linear-gradient(180deg, #8f1d28, #5a0f18); box-shadow: 0 0 26px rgba(224,71,58,.7); animation: fase-alerta-pulso 1.6s ease-in-out infinite; }
@keyframes fase-alerta-pulso { 0%, 100% { box-shadow: 0 0 18px rgba(224,71,58,.55); } 50% { box-shadow: 0 0 36px rgba(255,120,90,.95); } }

/* ===== Accesos rápidos a la IZQUIERDA: Bot de farmeo, Camino del Guerrero y fase del mundo (anclados; se ven en la aldea y en el mapa) =====
   Medallones con la paleta del juego: marco dorado (como los retratos de misiones), pergamino cálido por dentro y un aro oscuro por fuera para que
   se lean igual sobre el marrón de la interfaz que sobre el verde del mapa. */
.rail-izquierdo { position: fixed; left: 12px; top: 112px; z-index: 203; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.rail-izquierdo.oculto { display: none !important; }   /* con !important: la regla de arriba (display:flex) le ganaba a .oculto, igual que pasó con .lista-tropas */
.rail-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rail-etq { font-size: 9px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: #e8d5a8; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.rail-btn { width: 60px; height: 60px; padding: 0; border-radius: 50%; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid #b8923a; color: #3b2a1c; font-family: Georgia, serif; line-height: 1;
  background: radial-gradient(circle at 36% 28%, #fffaf0 0%, #f4e8c6 58%, #dcc690 100%);
  box-shadow: 0 0 0 2px rgba(43,32,24,.9), 0 4px 10px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.55), inset 0 -5px 9px rgba(120,86,30,.28);
  transition: transform .12s, border-color .12s, box-shadow .12s, filter .12s; }
.rail-btn:hover { transform: scale(1.08); border-color: #f1cf79; filter: brightness(1.06);
  box-shadow: 0 0 0 2px rgba(43,32,24,.9), 0 5px 14px rgba(0,0,0,.65), 0 0 0 5px rgba(241,207,121,.38), inset 0 0 0 2px rgba(255,255,255,.6), inset 0 -5px 9px rgba(120,86,30,.28); }
.rail-btn:active { transform: scale(.96); }
.rail-btn:focus-visible { outline: 2px solid #f1cf79; outline-offset: 4px; }
.rail-icono { font-size: 31px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(60,40,10,.35)); }
.rail-fase-t { font-size: 8.5px; font-weight: bold; letter-spacing: 1px; color: #7a2230; margin-bottom: 2px; }
.rail-fase-n { font-size: 25px; font-weight: bold; line-height: 1; color: #3b2a1c; }
/* la Fase Final palpita con su PROPIA animación: la genérica (fase-alerta-pulso) reemplazaba toda la sombra y le quitaba el aro oscuro, así que el círculo se veía más plano y pequeño que los demás */
@keyframes rail-pulso-final {
  0%, 100% { box-shadow: 0 0 0 2px rgba(43,32,24,.9), 0 4px 10px rgba(0,0,0,.6), 0 0 14px 3px rgba(224,71,58,.55), inset 0 0 0 2px rgba(255,255,255,.55), inset 0 -5px 9px rgba(120,86,30,.28); }
  50%      { box-shadow: 0 0 0 2px rgba(43,32,24,.9), 0 4px 10px rgba(0,0,0,.6), 0 0 26px 7px rgba(255,120,90,.95), inset 0 0 0 2px rgba(255,255,255,.55), inset 0 -5px 9px rgba(120,86,30,.28); }
}
.rail-btn.fase-final { border-color: #d6453a; animation: rail-pulso-final 1.6s ease-in-out infinite; }
.rail-btn.fase-final .rail-fase-t { color: #b3202c; }
/* en la aldea la columna de misiones se desplaza a la derecha para dejar sitio a los círculos, que quedan a su izquierda */
.fila-con-sidebar { padding-left: 66px; }

/* con la columna de círculos a la izquierda el contenido es más estrecho: el recordatorio de atajos cede espacio (se recorta con "…") para que las pestañas y los botones de la derecha sigan en UNA fila */
.hub-atajos { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }

/* --- Informes: filtros, favoritos y páginas --- */
#cuerpo-informes { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.barra-informes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.fila-chips-informes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-informes {
  background: #211810; color: #c9b48f; border: 1px solid #4a3c2c; border-radius: 16px;
  padding: 5px 11px; font-size: 12px; font-weight: bold; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.chip-informes:hover { background: #3a2c1d; border-color: #8a6d2f; }
.chip-informes.activo { background: #8a6d2f; border-color: #f1cf79; color: #fff6dc; }
.chip-informes .cuenta-chip {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 3px; border-radius: 9px;
  background: rgba(0,0,0,.35); font-size: 11px; text-align: center;
}
.select-informes {
  background: #211810; color: #e8d9b8; border: 1px solid #4a3c2c; border-radius: 8px;
  padding: 5px 8px; font-size: 12px; cursor: pointer;
}
.resumen-informes { font-size: 12px; color: #a89676; }
.paginador-informes {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px;
  padding: 10px 0 2px; flex-shrink: 0;
}
.btn-pag-informes {
  min-width: 32px; padding: 5px 8px; background: #211810; color: #e8d9b8;
  border: 1px solid #4a3c2c; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 13px;
}
.btn-pag-informes:hover:not(:disabled) { background: #3a2c1d; border-color: #8a6d2f; }
.btn-pag-informes.activa { background: #8a6d2f; border-color: #f1cf79; color: #fff6dc; }
.btn-pag-informes:disabled { opacity: .35; cursor: default; }
.puntos-pag-informes { color: #a89676; padding: 0 2px; }
.estrella-informe {
  background: none; border: none; color: #7a6b52; font-size: 20px; cursor: pointer;
  padding: 0 2px; flex-shrink: 0; line-height: 1;
}
.estrella-informe:hover { color: #f1cf79; }
.estrella-informe.activa { color: #f5c542; }
.estrella-detalle.activa { color: #f5c542; border-color: #f5c542; }
.fila-lista-grande.informe-no-leido { border-left: 3px solid #7fd47c; }
.punto-no-leido { color: #7fd47c; font-size: 11px; }
.btn-volver:disabled { opacity: .4; cursor: default; }
#cuerpo-informes .lista-filas-grande { grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); }
@media (max-width: 560px) {
  #cuerpo-informes .lista-filas-grande { grid-template-columns: 1fr; }
  .fila-chips-informes { gap: 4px; }
  .chip-informes { padding: 4px 8px; font-size: 11px; }
}

/* ---- Noticias del mundo ---- */
.nw-fondo { position: fixed; inset: 0; z-index: 99990; background: rgba(5,3,2,.78); display: flex; align-items: center; justify-content: center; padding: 14px; }
.nw-cartel { position: relative; width: min(94vw, 520px); padding: 22px 20px 16px; text-align: center; color: #f4e9cf; border-radius: 14px; border: 2px solid var(--c);
  background: linear-gradient(180deg, #2a1d12, #150e08); box-shadow: 0 0 0 rgba(0,0,0,0), 0 10px 40px rgba(0,0,0,.9); }
.nw-cartel.nw-b1 { box-shadow: 0 0 18px var(--c), 0 10px 40px rgba(0,0,0,.9); }
.nw-cartel.nw-b2 { box-shadow: 0 0 34px var(--c), 0 0 70px color-mix(in srgb, var(--c) 45%, transparent), 0 10px 40px rgba(0,0,0,.9); }
.nw-cartel.nw-b3 { box-shadow: 0 0 44px var(--c), 0 0 110px var(--c), 0 10px 40px rgba(0,0,0,.9); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #2a1d12), #150e08); }
.nw-pulso { animation: nw-pulso 1.8s ease-in-out infinite; }
@keyframes nw-pulso { 50% { filter: brightness(1.25); } }
.nw-etq { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--c); font-weight: bold; margin-bottom: 10px; }
.nw-img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; border: 3px solid var(--c); box-shadow: 0 0 22px var(--c); }
.nw-icono { font-size: 64px; line-height: 1.1; filter: drop-shadow(0 0 12px var(--c)); }
.nw-texto { margin: 14px 4px 6px; font-size: 18px; line-height: 1.35; }
.nw-tag { color: #f1cf79; }
.nw-hora { font-size: 12px; opacity: .65; margin-bottom: 12px; }
.nw-nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.nw-nav button { width: 44px; height: 38px; font-size: 18px; border-radius: 8px; cursor: pointer; color: #f1cf79; background: #3a2816; border: 1px solid #8a6d2f; }
.nw-nav button:disabled { opacity: .3; cursor: default; }
.nw-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; color: #f1cf79; background: rgba(15,10,4,.82); border: 1px solid #8a6d2f; }
.nw-insignia { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #c0392b; color: #fff; font-size: 11px; font-weight: bold; line-height: 18px; }
.nw-cofre { font-size: 14px; margin: 2px 0 6px; opacity: .95; }

/* =====================================================================
   CORREO DEL REINO (mensajes) — madera, hierro, pergamino y lacre
   ===================================================================== */
.ms-fondo { background: radial-gradient(ellipse at center, rgba(40,26,14,.9), rgba(6,4,2,.95)); }
.ms-libro {
  --ms-madera: #4a3620; --ms-madera-osc: #2a1c10; --ms-oro: #f1cf79; --ms-oro-osc: #b8903c;
  --ms-perga: #ecdcb0; --ms-perga-osc: #d6bf88; --ms-tinta: #3a2814; --ms-lacre: #a3201c;
  position: relative; width: min(97vw, 1220px); height: min(90vh, 820px); display: grid;
  grid-template-columns: 244px minmax(290px, 390px) 1fr; grid-template-rows: auto 1fr; gap: 0;
  background: linear-gradient(180deg, #5a4226, #35250f); border: 4px solid #1f140a; border-radius: 14px;
  box-shadow: 0 0 0 2px var(--ms-oro-osc), 0 18px 60px rgba(0,0,0,.9), inset 0 0 40px rgba(0,0,0,.55);
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; color: var(--ms-tinta); overflow: hidden;
}
/* remaches de hierro en las esquinas */
.ms-libro::before, .ms-libro::after { content: ''; position: absolute; width: 11px; height: 11px; border-radius: 50%; z-index: 5; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #d9d2c2, #6e675b 55%, #2c2823); box-shadow: 0 1px 2px #000; }
.ms-libro::before { top: 8px; left: 8px; }
.ms-libro::after { bottom: 8px; right: 8px; }

.ms-cabecera { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 10px 22px;
  background: linear-gradient(180deg, #6a4d2b, #3d2a15); border-bottom: 3px solid #1f140a; box-shadow: 0 2px 0 var(--ms-oro-osc), 0 4px 10px rgba(0,0,0,.5); position: relative; z-index: 4; }
.ms-titulo { font-size: 22px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; color: var(--ms-oro); text-shadow: 0 2px 0 #000, 0 0 14px rgba(241,207,121,.35); }
.ms-titulo-icono { display: inline-block; margin-right: 6px; filter: drop-shadow(0 2px 2px #000); }
.ms-titulo-adorno { color: var(--ms-oro-osc); margin-left: 8px; font-size: 16px; }
.ms-cerrar { background: linear-gradient(180deg, #7a2b24, #4a1511); color: #f5dcb0; border: 2px solid #2a0b08; border-radius: 6px; width: 32px; height: 32px; font-size: 15px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.ms-cerrar:hover { filter: brightness(1.25); }

/* ---- lateral: tablón de carpetas ---- */
.ms-lateral { padding: 14px 12px; display: flex; flex-direction: column; gap: 14px; border-right: 3px solid #1f140a;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px 9px), linear-gradient(180deg, #4d3820, #2f2010); }
.ms-redactar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; font: inherit; font-weight: bold; color: #fbe9c4;
  background: linear-gradient(180deg, #8c2a22, #5b1713); border: 2px solid #2a0b08; border-radius: 10px; letter-spacing: .5px; text-shadow: 0 1px 0 #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 8px rgba(0,0,0,.6); transition: transform .12s, filter .12s; }
.ms-redactar:hover { transform: translateY(-1px); filter: brightness(1.18); }
.ms-lacre { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; color: #f7d6a0;
  background: radial-gradient(circle at 35% 30%, #d4443c, #8c1c18 60%, #4d0d0b); box-shadow: inset 0 0 0 3px rgba(0,0,0,.18), inset 0 -2px 4px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.6); }
.ms-lacre.peq { width: 22px; height: 22px; font-size: 11px; vertical-align: middle; margin-right: 4px; }
.ms-carpetas { display: flex; flex-direction: column; gap: 7px; }
.ms-carpeta { display: flex; align-items: center; gap: 9px; padding: 9px 10px; font: inherit; text-align: left; cursor: pointer; color: #e8d5a8;
  background: linear-gradient(180deg, #6b4f2c, #4b3419); border: 2px solid #26180b; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 4px rgba(0,0,0,.45); transition: filter .12s, transform .12s; }
.ms-carpeta:hover { filter: brightness(1.15); }
.ms-carpeta.activa { color: #2a1a08; background: linear-gradient(180deg, #f1cf79, #c79a40); border-color: #6a4a14; transform: translateX(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 8px rgba(0,0,0,.6); }
.ms-carpeta-icono { font-size: 18px; width: 22px; text-align: center; }
.ms-carpeta-nombre { flex: 1; font-weight: bold; font-size: 14px; white-space: nowrap; }
.ms-nuevas { font-style: normal; font-size: 11px; font-weight: bold; min-width: 20px; padding: 2px 6px; text-align: center; border-radius: 10px; color: #fff; background: radial-gradient(circle at 35% 30%, #d4443c, #8c1c18); box-shadow: 0 1px 3px #000; }
.ms-total { font-style: normal; font-size: 11px; opacity: .7; }
.ms-carpeta.activa .ms-total { opacity: .85; }
.ms-lateral-pie { margin-top: auto; text-align: center; font-size: 26px; color: var(--ms-oro-osc); opacity: .55; }

/* ---- lista de cartas ---- */
.ms-columna-lista { display: flex; flex-direction: column; min-height: 0; border-right: 3px solid #1f140a; background: linear-gradient(180deg, #d9c590, #c7ae75); box-shadow: inset 0 0 30px rgba(90,60,20,.35); }
.ms-barra { display: flex; flex-direction: column; gap: 7px; padding: 10px 10px 8px; background: linear-gradient(180deg, #5c4326, #3f2c16); border-bottom: 2px solid #1f140a; }
.ms-busqueda { display: flex; align-items: center; gap: 6px; background: #f0e2bb; border: 2px solid #26180b; border-radius: 7px; padding: 4px 8px; box-shadow: inset 0 2px 4px rgba(90,60,20,.4); }
.ms-busqueda input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font: inherit; font-size: 13px; color: var(--ms-tinta); }
.ms-busqueda input::placeholder { color: #8a7650; font-style: italic; }
.ms-acciones { display: flex; align-items: center; gap: 5px; }
.ms-marcar-todo { display: inline-flex; align-items: center; padding: 0 6px; cursor: pointer; }
.ms-marcar-todo input, .ms-check input { accent-color: #8c1c18; width: 15px; height: 15px; cursor: pointer; }
.ms-btn-icono { font: inherit; line-height: 1; font-size: 14px; min-width: 32px; height: 28px; padding: 0 8px; cursor: pointer; color: #f1e2bc; background: linear-gradient(180deg, #7a5b33, #523a1c); border: 2px solid #26180b; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.ms-btn-icono:hover:not(:disabled) { filter: brightness(1.25); }
.ms-btn-icono:disabled { opacity: .35; cursor: default; }
.ms-btn-icono.ms-peligro.confirmar, .ms-btn.ms-peligro.confirmar { background: linear-gradient(180deg, #b3322a, #7a1a15); color: #fff; font-size: 12px; font-weight: bold; }
.ms-carpeta-titulo { padding: 9px 14px 5px; font-weight: bold; font-size: 15px; letter-spacing: 1px; color: #5a3a12; text-transform: uppercase; border-bottom: 1px dashed rgba(90,58,18,.45); }
.ms-carpeta-titulo small { text-transform: none; font-weight: normal; letter-spacing: 0; opacity: .75; }
.ms-lista { flex: 1; overflow-y: auto; padding: 6px 8px 10px; scrollbar-color: #7a5b33 transparent; }
.ms-fila { position: relative; display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px 9px 8px; margin: 5px 0; cursor: pointer; border-radius: 6px; border: 1px solid rgba(90,58,18,.35);
  background: linear-gradient(180deg, rgba(247,235,203,.85), rgba(232,215,172,.85)); box-shadow: 0 1px 3px rgba(60,40,10,.35); transition: transform .1s, box-shadow .1s; }
.ms-fila:hover { transform: translateX(3px); box-shadow: 0 3px 8px rgba(60,40,10,.5); }
.ms-fila.nueva { background: linear-gradient(180deg, #fff6d6, #f1dca0); border-color: #a3201c; border-left: 5px solid #a3201c; }
.ms-fila.leida { opacity: .86; }
.ms-fila.activa { outline: 2px solid #b8903c; background: linear-gradient(180deg, #fff0c4, #ecd18a); opacity: 1; }
.ms-check { padding-top: 3px; }
.ms-sello { flex: 0 0 26px; height: 26px; margin-top: 1px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #f9dca4;
  background: radial-gradient(circle at 35% 30%, #d4443c, #8c1c18 60%, #4d0d0b); box-shadow: inset 0 0 0 3px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.5); }
.ms-sello.roto { background: radial-gradient(circle at 35% 30%, #a39a88, #6e665a 60%, #4a443b); box-shadow: inset 0 0 0 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.4); }
.ms-sello.oro { color: #5a3a08; background: radial-gradient(circle at 35% 30%, #fff1b0, #e0b040 60%, #9a7218); }
.ms-fila-cuerpo { flex: 1; min-width: 0; }
.ms-fila-arriba { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ms-fila-quien { font-weight: bold; color: #2f1d08; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-fila.leida .ms-fila-quien { font-weight: normal; }
.ms-fila-fecha { font-size: 11px; color: #7a6238; white-space: nowrap; font-style: italic; }
.ms-fila-asunto { font-size: 13px; font-weight: bold; color: #4a2c0a; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-fila.leida .ms-fila-asunto { font-weight: normal; }
.ms-fila-tribu { font-size: 10px; font-weight: normal; color: #7a4a14; background: rgba(184,144,60,.25); border-radius: 4px; padding: 0 4px; }
.ms-fila-previa { font-size: 12px; color: #6e5a36; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-tag { color: #8a5a10; font-weight: bold; font-size: .92em; }
.ms-vacio { text-align: center; padding: 38px 20px; color: #7a6238; font-style: italic; line-height: 1.5; }
.ms-vacio-icono { font-size: 40px; opacity: .5; margin-bottom: 8px; filter: grayscale(.4); }
.ms-paginas { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 7px; font-size: 12px; background: linear-gradient(180deg, #5c4326, #3f2c16); color: #e8d5a8; border-top: 2px solid #1f140a; }

/* ---- lectura ---- */
.ms-columna-lectura { min-height: 0; overflow-y: auto; padding: 14px 16px; position: relative; scrollbar-color: #7a5b33 transparent;
  background: radial-gradient(ellipse at top, #3b2a16, #241709); }
.ms-lectura-vacia { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; color: #c9b48f; font-size: 15px; line-height: 1.6; }
.ms-lectura-vacia small { color: #98856a; font-size: 12px; }
.ms-escudo { width: 92px; height: 92px; border-radius: 50% 50% 46% 46%; display: flex; align-items: center; justify-content: center; font-size: 42px; color: #f1cf79;
  background: radial-gradient(circle at 35% 30%, #7a2b24, #3d1410); border: 4px solid var(--ms-oro-osc); box-shadow: 0 0 24px rgba(241,207,121,.18), inset 0 0 14px rgba(0,0,0,.6); }
.ms-carta { display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
.ms-carta-herramientas { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-btn { font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer; color: #f1e2bc; background: linear-gradient(180deg, #7a5b33, #523a1c); border: 2px solid #26180b; border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.45); }
.ms-btn:hover { filter: brightness(1.22); }
.ms-btn.activo { color: #3a2506; background: linear-gradient(180deg, #f6dc8e, #cf9f42); }
.ms-btn.ms-peligro { background: linear-gradient(180deg, #7a2b24, #4a1511); }
.ms-btn-dorado { font: inherit; font-weight: bold; font-size: 14px; padding: 9px 18px; cursor: pointer; color: #fbe9c4; letter-spacing: .5px; text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, #a02c24, #641813); border: 2px solid #2a0b08; border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 8px rgba(0,0,0,.6); }
.ms-btn-dorado:hover:not(:disabled) { filter: brightness(1.2); }
.ms-btn-dorado:disabled { opacity: .5; }
.ms-volver { display: none; align-self: flex-start; font: inherit; padding: 6px 12px; cursor: pointer; color: #f1e2bc; background: linear-gradient(180deg, #7a5b33, #523a1c); border: 2px solid #26180b; border-radius: 7px; }

.ms-pergamino { position: relative; padding: 26px 30px 22px; color: var(--ms-tinta); border-radius: 4px;
  background: radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.35), transparent 55%), radial-gradient(ellipse at 90% 95%, rgba(120,80,30,.28), transparent 50%),
    linear-gradient(180deg, #f1e3bb, #e2cd96);
  border: 1px solid #a98d52; box-shadow: 0 0 0 4px #c9ae72, 0 0 0 5px #7a5c2a, 0 8px 22px rgba(0,0,0,.65), inset 0 0 40px rgba(130,90,30,.35); }
.ms-pergamino-sello { position: absolute; top: -14px; right: 22px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; color: #f9dca4;
  background: radial-gradient(circle at 35% 30%, #d4443c, #8c1c18 60%, #4d0d0b); box-shadow: inset 0 0 0 4px rgba(0,0,0,.15), 0 3px 5px rgba(0,0,0,.6); }
.ms-pergamino-sello.oro { color: #5a3a08; background: radial-gradient(circle at 35% 30%, #fff1b0, #e0b040 60%, #9a7218); }
.ms-asunto { margin: 0 44px 0 0; font-size: 22px; line-height: 1.25; color: #3b1f06; letter-spacing: .5px; word-break: break-word; }
.ms-ornamento { text-align: center; margin: 8px 0 10px; color: #9a7428; letter-spacing: 6px; font-size: 14px; position: relative; }
.ms-ornamento::before, .ms-ornamento::after { content: ''; position: absolute; top: 50%; width: 32%; height: 1px; background: linear-gradient(90deg, transparent, #9a7428); }
.ms-ornamento::before { left: 0; } .ms-ornamento::after { right: 0; transform: scaleX(-1); }
.ms-meta { font-size: 13px; line-height: 1.8; padding-bottom: 10px; border-bottom: 1px dashed rgba(90,58,18,.5); margin-bottom: 14px; }
.ms-meta b { color: #6a3f0c; }
.ms-meta-fecha { font-style: italic; color: #7a6238; }
.ms-chip-lectura, .ms-chip-tribu-lect { display: inline-block; padding: 0 8px; margin: 1px 2px; border-radius: 10px; font-size: 12px; background: rgba(120,84,30,.16); border: 1px solid rgba(120,84,30,.35); }
.ms-chip-tribu-lect { background: rgba(163,32,28,.12); border-color: rgba(163,32,28,.4); }
.ms-texto { white-space: pre-wrap; word-break: break-word; font-size: 16px; line-height: 1.7; min-height: 120px; }
/* (capitular eliminada) */
.ms-firma { margin-top: 18px; text-align: right; font-style: italic; color: #6a3f0c; }

/* ---- redactor ---- */
.ms-pergamino-nuevo .ms-asunto { margin-right: 0; text-align: center; }
.ms-etiqueta-campo { display: block; margin: 12px 0 4px; font-weight: bold; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: #6a3f0c; }
.ms-etiqueta-campo small { text-transform: none; letter-spacing: 0; font-weight: normal; opacity: .75; }
.ms-destinatarios { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 42px; padding: 6px 8px; cursor: text; background: #f7ecc9; border: 2px solid #8a6b30; border-radius: 6px; box-shadow: inset 0 2px 5px rgba(90,60,20,.35); }
#ms-chips { display: contents; }
.ms-destinatarios input { flex: 1; min-width: 160px; background: transparent; border: 0; outline: 0; font: inherit; font-size: 14px; color: var(--ms-tinta); }
.ms-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 9px; font-size: 13px; border-radius: 14px; color: #f6e8c4; background: linear-gradient(180deg, #6b4f2c, #46301a); border: 1px solid #26180b; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.ms-chip small { opacity: .8; }
.ms-chip button { border: 0; padding: 0; min-width: 0; width: 18px; height: 18px; flex: 0 0 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; font-size: 10px; line-height: 1; color: #fbe9c4; background: rgba(0,0,0,.35); }
.ms-chip button:hover { background: #a3201c; }
.ms-chip.de-tribu { background: linear-gradient(180deg, #7e5a2a, #593d1b); }
.ms-chip-tribu { color: #fbe9c4; background: linear-gradient(180deg, #a02c24, #641813); border-color: #2a0b08; font-weight: bold; }
.ms-dropdown { position: relative; z-index: 20; margin-top: 3px; max-height: 250px; overflow-y: auto; background: #f7ecc9; border: 2px solid #8a6b30; border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.55); }
.ms-dropdown.oculto { display: none; }
.ms-dd-sec { padding: 5px 10px; font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: #fbe9c4; background: linear-gradient(180deg, #6b4f2c, #4b3419); }
.ms-dd-sec small { text-transform: none; letter-spacing: 0; font-weight: normal; opacity: .8; }
.ms-dd-item { padding: 7px 12px; font-size: 14px; cursor: pointer; border-bottom: 1px solid rgba(90,58,18,.18); }
.ms-dd-item:hover { background: #ecd18a; }
.ms-dd-item small { color: #8a7650; margin-left: 4px; }
.ms-dd-vacio { padding: 12px; text-align: center; font-style: italic; color: #8a7650; }
.ms-contador-dest { font-size: 12px; font-style: italic; color: #7a6238; margin-top: 4px; min-height: 16px; }
.ms-input { width: 100%; box-sizing: border-box; padding: 9px 11px; font: inherit; font-size: 15px; color: var(--ms-tinta); background: #f7ecc9; border: 2px solid #8a6b30; border-radius: 6px; outline: 0; box-shadow: inset 0 2px 5px rgba(90,60,20,.35); }
.ms-input:focus, .ms-destinatarios:focus-within { border-color: #b8441c; box-shadow: inset 0 2px 5px rgba(90,60,20,.35), 0 0 0 2px rgba(184,68,28,.35); }
.ms-area { min-height: 190px; resize: vertical; line-height: 1.6; }
.ms-pie-redactor { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ms-pie-redactor > div { display: flex; gap: 8px; }
.ms-caracteres { font-size: 12px; color: #7a6238; font-style: italic; }
.ms-caracteres.lleno { color: #a3201c; font-weight: bold; }
.ms-error-campo { min-height: 18px; margin-top: 8px; text-align: center; font-weight: bold; font-size: 13px; color: #a3201c; }
.ms-aviso { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 30; padding: 9px 18px; border-radius: 8px; font-weight: bold; font-size: 14px; color: #f1cf79; background: linear-gradient(180deg, #5b4226, #35250f); border: 2px solid var(--ms-oro-osc); box-shadow: 0 6px 18px rgba(0,0,0,.7); animation: ms-aparece .25s ease-out; }
.ms-aviso.error { color: #ffd2cc; border-color: #a3201c; }
@keyframes ms-aparece { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---- móvil: una columna cada vez ---- */
@media (max-width: 860px) {
  .ms-fondo { padding: 6px; }
  .ms-libro { height: 96vh; width: 100vw; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; border-radius: 10px; }
  .ms-titulo { font-size: 17px; letter-spacing: 2px; }
  .ms-lateral { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 8px; border-right: 0; border-bottom: 3px solid #1f140a; }
  .ms-redactar { padding: 6px 10px; } .ms-redactar .ms-lacre { width: 22px; height: 22px; font-size: 11px; }
  .ms-carpetas { flex-direction: row; flex-wrap: wrap; flex: 1; gap: 5px; }
  .ms-carpeta { padding: 6px 8px; } .ms-carpeta.activa { transform: none; } .ms-carpeta-nombre { font-size: 12px; } .ms-lateral-pie { display: none; }
  .ms-columna-lista { border-right: 0; min-height: 0; }
  .ms-columna-lectura { display: none; padding: 8px; }
  .ms-libro.ms-leyendo .ms-columna-lista { display: none; }
  .ms-libro.ms-leyendo .ms-columna-lectura { display: block; }
  .ms-volver { display: inline-block; }
  .ms-pergamino { padding: 20px 16px 16px; }
  .ms-asunto { font-size: 19px; }
}

/* =====================================================================
   BARRA INFERIOR ÚNICA (dock-cliente.js): aldea, mapa y simulador usan la misma
   ===================================================================== */
#dock-principal { position: fixed; bottom: 0; left: 0; right: 0; z-index: 210; display: flex; justify-content: center; pointer-events: none; }
#dock-principal .dock-caja { pointer-events: auto; display: flex; align-items: flex-end; gap: 4px; max-width: 100vw; padding: 7px 10px 5px;
  background: linear-gradient(180deg, #8a6b40, #4a3620); border: 3px solid #2e2013; border-bottom: none; border-radius: 14px 14px 0 0; box-shadow: 0 -4px 14px rgba(0,0,0,.5); }
#dock-principal .dock-sep { align-self: stretch; width: 2px; margin: 4px 3px; background: linear-gradient(180deg, transparent, rgba(30,20,10,.75), transparent); border-radius: 1px; }
#dock-principal .dock-btn { position: relative; width: 52px; padding: 3px 0 2px; display: flex; flex-direction: column; align-items: center; cursor: pointer; color: #2a1d0e; font: inherit; font-size: 9px; font-weight: bold; line-height: 1.1;
  background: linear-gradient(180deg, #c99a5b, #8a6229); border: 2px solid #3a2a18; border-radius: 8px; box-shadow: inset 0 1px 3px rgba(255,255,255,.3), 0 2px 4px rgba(0,0,0,.4); transition: transform .1s, filter .15s; }
#dock-principal .dock-btn:hover { filter: brightness(1.15); transform: translateY(-3px); }
#dock-principal .dock-btn.activo { outline: 2px solid #f1cf79; background: linear-gradient(180deg, #e8bf78, #a87a30); }
#dock-principal .dock-ico { font-size: 21px; line-height: 1.25; }
#dock-principal .dock-etq { white-space: nowrap; letter-spacing: -.2px; }
@media (max-width: 760px) {
  #dock-principal .dock-caja { gap: 2px; padding: 5px 5px 3px; }
  #dock-principal .dock-btn { width: 31px; padding: 2px 0; }
  #dock-principal .dock-etq { display: none; }
  #dock-principal .dock-ico { font-size: 18px; }
  #dock-principal .dock-sep { margin: 3px 1px; }
  #reloj-mapa { bottom: 62px !important; right: 8px !important; transform: scale(.62); transform-origin: bottom right; }   /* que el reloj del mapa no tape la barra */
}

/* ---- Zoom del mapa (+ / − / volver a mi aldea) ---- */
#canvas-nucleo-mapa { touch-action: none; }
.zoom-mapa { position: fixed; top: 84px; right: 16px; z-index: 202; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px;
  background: linear-gradient(180deg, #8a6b40, #4a3620); border: 3px solid #2e2013; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.55); font-family: Georgia, serif; }
.zoom-mapa button { width: 40px; height: 40px; padding: 0; font-size: 22px; font-weight: bold; line-height: 1; cursor: pointer; color: #2a1d0e;
  background: linear-gradient(180deg, #e0b878, #a87a30); border: 2px solid #3a2a18; border-radius: 8px; box-shadow: inset 0 1px 3px rgba(255,255,255,.4), 0 2px 3px rgba(0,0,0,.4); }
.zoom-mapa button:hover { filter: brightness(1.15); }
.zoom-mapa button:active { transform: translateY(1px); }
.zoom-mapa .zoom-mapa-casa { font-size: 19px; margin-top: 2px; }
.zoom-mapa-nivel { min-width: 40px; padding: 2px 0; text-align: center; font-size: 11px; font-weight: bold; color: #f1cf79; text-shadow: 0 1px 0 #000; }
@media (max-width: 760px) { .zoom-mapa { top: 74px; right: 8px; padding: 4px; } .zoom-mapa button { width: 36px; height: 36px; } }

/* =====================================================================
   TEMA MEDIEVAL COMÚN — el mismo marco de madera, oro y pergamino en todas las ventanas
   ===================================================================== */
:root { --med-oro: #f1cf79; --med-oro-osc: #b8903c; --med-madera: #4a3620; --med-madera-osc: #2a1c10; --med-serif: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; }
* { scrollbar-width: thin; scrollbar-color: #7a5b33 #1e150c; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #1e150c; }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #8a6b40, #5c4429); border: 2px solid #1e150c; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #b8903c, #7a5b33); }
::selection { background: rgba(241,207,121,.35); }

.modal-fondo { background: radial-gradient(ellipse at center, rgba(34,22,12,.88) 0%, rgba(5,3,2,.95) 100%); backdrop-filter: blur(2px); animation: med-vela .18s ease-out; }
@keyframes med-vela { from { opacity: 0; } to { opacity: 1; } }

/* ventanas grandes (Inventario, Informes…) y pequeñas (Ajustes, avisos): marco de madera con filete de oro y remaches */
.modal-carta-grande, .modal-carta {
  position: relative; border: 4px solid #1f140a; border-radius: 14px;
  background: radial-gradient(ellipse at top, #3a2b1b 0%, #2b2018 55%, #21170f 100%);
  box-shadow: 0 0 0 2px var(--med-oro-osc), 0 18px 60px rgba(0,0,0,.85), inset 0 0 50px rgba(0,0,0,.45);
  animation: med-entra .22s ease-out;
}
@keyframes med-entra { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-carta-grande::before, .modal-carta-grande::after, .modal-carta::before, .modal-carta::after {
  content: ''; position: absolute; width: 11px; height: 11px; border-radius: 50%; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at 35% 30%, #d9d2c2, #6e675b 55%, #2c2823); box-shadow: 0 1px 2px #000; }
.modal-carta-grande::before, .modal-carta::before { top: 8px; left: 8px; } .modal-carta-grande::after, .modal-carta::after { bottom: 8px; right: 8px; }
.modal-carta-grande .contenido, .modal-carta .contenido { padding: 16px 20px; }
.modal-carta-grande h2, .modal-carta h2 { font-family: var(--med-serif); color: var(--med-oro); letter-spacing: 1.5px; text-shadow: 0 2px 0 #000, 0 0 14px rgba(241,207,121,.25); }
.modal-carta-grande .contenido > div:first-child { padding-bottom: 10px; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, transparent, var(--med-oro-osc) 20%, var(--med-oro-osc) 80%, transparent) 1; }

/* botones "Volver / Cerrar" de las ventanas: madera con letra dorada (las ventanas con tema propio los siguen cambiando con sus reglas) */
.btn-volver { font-family: var(--med-serif); font-weight: bold; letter-spacing: .5px; cursor: pointer; border-radius: 8px; padding: 6px 14px;
  background: linear-gradient(180deg, #7a5b33, #4b3419); color: var(--med-oro); border: 2px solid #26180b; text-shadow: 0 1px 0 #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(0,0,0,.5); transition: filter .12s, transform .1s; }
.btn-volver:hover { filter: brightness(1.2); } .btn-volver:active { transform: translateY(1px); }

/* aldea: tarjetas con más cuerpo */
.carta-hub { transition: transform .15s ease, box-shadow .15s ease, border-color .15s; }
.carta-hub:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.55), 0 0 0 1px rgba(241,207,121,.35); }
.carta-hub.lista { animation: med-respira 3.2s ease-in-out infinite; }
@keyframes med-respira { 0%, 100% { box-shadow: 0 0 8px rgba(95,208,106,.18); } 50% { box-shadow: 0 0 16px rgba(95,208,106,.42); } }
.hub-mejorar { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 4px rgba(0,0,0,.45); text-shadow: 0 1px 0 rgba(255,255,255,.25); transition: filter .12s, transform .1s; }
.hub-mejorar:active { transform: translateY(1px); }
.hub-nivel { font-family: var(--med-serif); letter-spacing: .4px; }
.hub-nombre { font-family: var(--med-serif); letter-spacing: .3px; }
#barra-pueblo { box-shadow: 0 0 0 1px rgba(184,144,60,.35), 0 4px 14px rgba(0,0,0,.5); }

/* edificio que acaba de subir de nivel */
.carta-hub { position: relative; }
.carta-hub.sube-nivel { animation: med-sube 2.4s ease-out; z-index: 5; }
@keyframes med-sube { 0% { box-shadow: 0 0 0 0 rgba(241,207,121,.9); transform: scale(1); } 15% { box-shadow: 0 0 28px 8px rgba(241,207,121,.85); transform: scale(1.045); } 100% { box-shadow: 0 0 0 0 rgba(241,207,121,0); transform: scale(1); } }
.hub-sube-texto { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); pointer-events: none; white-space: nowrap; font-family: var(--med-serif); font-weight: bold; font-size: 20px; color: var(--med-oro);
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(241,207,121,.8); animation: med-flota 2.4s ease-out forwards; z-index: 6; }
@keyframes med-flota { 0% { opacity: 0; transform: translate(-50%, 12px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -34px); } }

/* ---- Ajustes ---- */
.aj-carta { max-width: 560px; width: 100%; }
.aj-cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, transparent, var(--med-oro-osc) 20%, var(--med-oro-osc) 80%, transparent) 1; }
.aj-cabecera h2 { margin: 0; }
.aj-seccion { margin: 16px 0 6px; font-family: var(--med-serif); font-weight: bold; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; color: var(--med-oro-osc); }
.aj-fila { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 12px; margin: 6px 0; border-radius: 9px; background: rgba(0,0,0,.28); border: 1px solid #4a3c2c; }
.aj-titulo { font-weight: bold; color: #e8d5a8; } .aj-ayuda { font-size: 12px; color: #a89676; margin-top: 2px; max-width: 330px; }
.aj-switch { flex: 0 0 52px; height: 28px; position: relative; padding: 0; cursor: pointer; border-radius: 16px; border: 2px solid #26180b; background: #3a2c1d; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); transition: background .2s; }
.aj-switch i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9cdb0, #8a7a5c); box-shadow: 0 1px 3px #000; transition: left .2s; }
.aj-switch.on { background: linear-gradient(180deg, #5a9a3a, #3d7226); } .aj-switch.on i { left: 26px; background: radial-gradient(circle at 35% 30%, #fff1b0, #e0b040); }
.aj-opciones { display: flex; border: 2px solid #26180b; border-radius: 9px; overflow: hidden; flex: 0 0 auto; }
.aj-opciones button { padding: 6px 14px; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: bold; color: #c9b48f; background: linear-gradient(180deg, #4a3620, #33241a); }
.aj-opciones button.on { color: #2a1a08; background: linear-gradient(180deg, #f1cf79, #c79a40); }
.aj-atajos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 10px 12px; font-size: 13px; color: #c9b48f; background: rgba(0,0,0,.28); border: 1px solid #4a3c2c; border-radius: 9px; }
.aj-atajos b { display: inline-block; min-width: 22px; padding: 0 6px; margin-right: 5px; text-align: center; border-radius: 5px; color: #2a1a08; background: linear-gradient(180deg, #e8c47a, #b98a3a); border: 1px solid #26180b; }
.aj-nota { margin-top: 12px; font-size: 12px; font-style: italic; color: #8a7a63; text-align: center; }
@media (max-width: 560px) { .aj-atajos { grid-template-columns: 1fr; } .aj-fila { flex-direction: column; align-items: flex-start; } }

/* Animaciones apagadas (Ajustes) o sistema con "reducir movimiento" */
body.sin-animaciones *, body.sin-animaciones *::before, body.sin-animaciones *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---- Móvil (aldea y mapa): los círculos (Bot, Camino, Fases, Noticias) pasan a una fila sobre la barra inferior y los recursos a 2×2 ---- */
@media (max-width: 640px) {
  .rail-izquierdo { flex-direction: row; left: 6px; top: auto; bottom: 58px; gap: 6px; }
  .rail-btn { width: 40px; height: 40px; } .rail-etq { display: none; }
  .rail-btn .rail-icono { font-size: 20px; } .rail-fase-t { font-size: 6px; } .rail-fase-n { font-size: 14px; }
  .fila-con-sidebar { padding-left: 0; }
  /* márgenes de seguridad por si el móvil tiene muesca o esquinas redondeadas (en la app de Android) */
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .rail-izquierdo, #mapa-nombre, #acceso-izq { margin-left: env(safe-area-inset-left); }
  #widget-cuenta, .zoom-mapa, #reloj-mapa { margin-right: env(safe-area-inset-right); }
  .columna-sidebar { flex: 0 0 46px; }
  .casilla-mision { width: 42px !important; height: 42px !important; min-width: 42px; aspect-ratio: 1; border-radius: 50% !important; padding: 0 !important; }
  #barra-pueblo { flex-wrap: wrap; gap: 8px; padding: 6px 8px; }
  #barra-pueblo .recursos { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .recurso-pill { min-width: 0; max-width: none; padding: 4px 7px; } .recurso-pill .rp-ico { font-size: 17px; }
  .hub-atajos { display: none; }
}

/* ---------- EVENTOS ---------- */
.ev-carta { max-width: 760px; width: 100%; }
.ev-tarjeta { margin: 12px 0; padding: 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(60,42,24,.65), rgba(26,19,12,.8)); border: 2px solid var(--med-oro-osc, #8a6a2c); box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,214,120,.08); }
.ev-tarjeta.terminado { opacity: .88; border-color: #4a3c2c; }
.ev-tarjeta.admin { border-style: dashed; }
.ev-cab { display: flex; gap: 12px; align-items: center; }
.ev-ico { font-size: 38px; filter: drop-shadow(0 2px 4px #000); }
.ev-cab h3 { margin: 0; color: #f1cf79; font-family: var(--med-serif, Georgia, serif); }
.ev-sub { font-size: 13px; color: #c9b48f; margin-top: 2px; }
.ev-desc { color: #d8c8a6; margin: 8px 0; }
.ev-premios { padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.5; color: #f1d9a0; background: rgba(240,176,48,.1); border: 1px solid rgba(240,176,48,.35); }
.ev-info { margin: 10px 0; padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.55; color: #d8c8a6; background: rgba(0,0,0,.28); border: 1px solid #4a3c2c; }
.ev-info .ev-btn { margin-left: 8px; }
.ev-mio { margin: 8px 0; font-size: 13px; color: #f1cf79; }
.ev-ganadores { margin: 10px 0; padding: 8px 10px; border-radius: 8px; color: #ffe9b0; background: rgba(240,176,48,.14); border: 1px solid rgba(240,176,48,.5); font-size: 14px; }
.ev-seccion { margin: 18px 0 4px; font-family: var(--med-serif, Georgia, serif); font-weight: bold; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; color: var(--med-oro-osc, #8a6a2c); }
.ev-prog { padding: 8px 12px; margin: 6px 0; border-radius: 9px; background: rgba(0,0,0,.28); border: 1px solid #4a3c2c; color: #d8c8a6; }
.ev-vacio { padding: 10px; color: #a89676; font-style: italic; text-align: center; } .ev-vacio.grande { padding: 36px 12px; font-size: 15px; }
.ev-ejercitos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.ev-ejercito { padding: 8px 10px; border-radius: 9px; background: rgba(0,0,0,.3); border: 1px solid #5a2a22; }
.ev-ejercito.caido { opacity: .5; border-color: #3a3a3a; }
.ev-ejercito .cab { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #e8d5a8; } .ev-ejercito .cab span { color: #a89676; font-size: 12px; text-align: right; }
.ev-ejercito .det { font-size: 11px; color: #a89676; margin-top: 4px; line-height: 1.4; }
.ev-barra { height: 8px; margin-top: 5px; border-radius: 5px; overflow: hidden; background: #1a0f0b; border: 1px solid #26180b; } .ev-barra i { display: block; height: 100%; background: linear-gradient(180deg, #e35a46, #a02a1e); }
.ev-ranks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; } .ev-ranks:has(> :only-child) { grid-template-columns: 1fr; }
.ev-tabla { width: 100%; border-collapse: collapse; font-size: 13px; color: #d8c8a6; }
.ev-tabla caption { text-align: left; font-weight: bold; color: #f1cf79; padding: 4px 0; }
.ev-tabla td { padding: 4px 6px; border-bottom: 1px solid #3a2e20; } .ev-tabla td.p { width: 30px; text-align: center; } .ev-tabla td.v { text-align: right; white-space: nowrap; color: #f1cf79; font-weight: bold; } .ev-tabla small { color: #a89676; font-weight: normal; }
.ev-tabla tr.mio td { background: rgba(240,176,48,.14); }
.ev-tag { color: #7fb0e0; font-weight: bold; }
.ev-pie { margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end; }
.ev-btn { padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: bold; border-radius: 8px; border: 2px solid #26180b; color: #2a1a08; background: linear-gradient(180deg, #f1cf79, #c79a40); }
.ev-btn:hover { filter: brightness(1.08); } .ev-btn[disabled] { filter: grayscale(.7) brightness(.7); cursor: not-allowed; } .ev-btn.grande { padding: 9px 18px; font-size: 14px; } .ev-btn.peligro { color: #fff; background: linear-gradient(180deg, #c8493a, #8a2a1f); margin-left: 6px; }
.ev-comandante { display: flex; gap: 14px; margin: 10px 0; } .ev-comandante img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: 2px solid var(--med-oro-osc, #8a6a2c); cursor: pointer; flex-shrink: 0; }
.ev-frag { display: flex; align-items: center; gap: 6px; margin: 8px 0; font-size: 22px; color: #3a2c1d; } .ev-frag i { font-style: normal; text-shadow: 0 0 1px #000; } .ev-frag i.on { color: #f0b030; text-shadow: 0 0 8px rgba(240,176,48,.8); } .ev-frag-ico { height: 44px; width: auto; filter: grayscale(1) brightness(.35); opacity: .75; transition: filter .2s; } .ev-frag-ico.on { filter: drop-shadow(0 0 6px rgba(255,220,140,.55)); opacity: 1; }
.ev-comandante .ev-frag img.ev-frag-ico { width: auto; height: 52px; border: none; border-radius: 0; object-fit: contain; cursor: default; }
.ev-frag span { font-size: 14px; color: #c9b48f; margin-left: 6px; }
.ev-ok { color: #7fd47c; font-weight: bold; margin-top: 8px; }
.ev-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; } .ev-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #c9b48f; } .ev-form input, .ev-form select { padding: 6px; border-radius: 6px; border: 1px solid #5a4630; background: #1a130c; color: #f1e3c0; font: inherit; }
.ev-adm-lista { margin-top: 12px; } .ev-adm-lista > div { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid #3a2e20; color: #d8c8a6; font-size: 13px; }
.ev-nota { font-size: 12px; color: #a89676; font-style: italic; margin-bottom: 8px; }
.ev-cron { padding: 6px 4px; border-bottom: 1px solid #3a2e20; font-size: 13px; color: #d8c8a6; } .ev-cron .h { color: #a89676; font-size: 11px; margin-right: 4px; } .ev-cron summary { cursor: pointer; } .ev-cron .det { margin: 6px 0 4px 14px; font-size: 12px; color: #c9b48f; line-height: 1.6; }
#dock-principal .dock-btn.dock-evento-activo .dock-ico { filter: drop-shadow(0 0 6px rgba(240,176,48,.9)); }
@media (max-width: 640px) { .ev-ejercitos, .ev-ranks, .ev-form { grid-template-columns: 1fr; } .ev-comandante { flex-direction: column; } .ev-comandante img { width: 100%; height: 160px; } .ev-info .ev-btn { margin: 6px 0 0; display: block; } }
.ev-banner { display: block; width: 100%; border-radius: 9px; margin: 0 0 12px; border: 1px solid #26180b; box-shadow: 0 3px 10px rgba(0,0,0,.5); aspect-ratio: 2 / 1; object-fit: cover; object-position: center 40%; background: #1a130c; }
.ev-banner-caja { position: relative; } .ev-banner-caja .ev-banner { margin-bottom: 12px; }
.ev-retrato { position: absolute; left: 4%; top: 8%; bottom: calc(12px + 8%); width: 27%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; pointer-events: none; }
.ev-ret-img { width: 100%; max-height: 78%; aspect-ratio: 1; border-radius: 50%; border: 3px solid #c8d4e8; box-shadow: 0 0 18px rgba(150,190,255,.65), 0 4px 12px rgba(0,0,0,.8); background-repeat: no-repeat; background-size: auto 260%; background-position: 54% 16%; background-color: #0b0f18; }
.ev-retrato b { margin-top: 6px; color: #e8eefc; font-size: 15px; text-shadow: 0 2px 6px #000; } .ev-retrato small { color: #aebfdc; text-shadow: 0 1px 4px #000; text-transform: capitalize; }
.ev-banner.mini { width: 110px; margin: 0; aspect-ratio: 1200 / 420; flex-shrink: 0; }
.ev-prog { display: flex; gap: 12px; align-items: center; }
.ev-cd { font-family: 'Courier New', monospace; font-variant-numeric: tabular-nums; letter-spacing: 1px; color: #f1cf79; }
.ev-cd.urgente { color: #ff8a70; animation: ev-parpadeo 1s steps(2) infinite; }
.sin-animaciones .ev-cd.urgente { animation: none; }
@keyframes ev-parpadeo { 50% { opacity: .55; } }
.ev-check { grid-column: 1 / -1; flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 13px !important; }
.ev-form-btns { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
#ev-hud { position: fixed; bottom: 86px; left: 50%; transform: translateX(-50%); z-index: 900; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; cursor: pointer; max-width: calc(100vw - 24px); pointer-events: none; }
#ev-hud .ev-hud-it { pointer-events: auto; }
.ev-hud-it .mas { display: none; padding: 0 6px; border-radius: 10px; background: #f0b030; color: #2a1a08; font-weight: bold; font-size: 12px; }
.ev-hud-it { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 22px; background: linear-gradient(180deg, rgba(74,54,32,.95), rgba(38,26,14,.95)); border: 2px solid var(--med-oro-osc, #8a6a2c); box-shadow: 0 3px 10px rgba(0,0,0,.6), inset 0 0 8px rgba(240,176,48,.15); color: #e8d5a8; font-size: 13px; white-space: nowrap; }
.ev-hud-it.prog { border-style: dashed; }
.ev-hud-it .i { font-size: 17px; } .ev-hud-it .n { max-width: 170px; overflow: hidden; text-overflow: ellipsis; font-weight: bold; } .ev-hud-it .t small { color: #a89676; font-size: 11px; } .ev-hud-it .t b { font-size: 15px; }
@media (max-width: 640px) { #ev-hud { left: auto; right: 8px; transform: none; justify-content: flex-end; } .ev-hud-it:nth-child(n+2) { display: none; } .ev-hud-it .mas { display: inline-block; } .ev-hud-it .n { max-width: 84px; } .ev-prog { flex-direction: column; align-items: flex-start; } .ev-banner.mini { width: 100%; } }

/* ===== Portada (pantalla de entrada) ===== */
.lb { position: fixed; inset: 0; z-index: 9999; background: #140d06; overflow-y: auto; overflow-x: hidden; font-family: var(--med-serif); color: #e8dcc0; scroll-behavior: smooth; }
.lb .oculto { display: none; }
.lb-hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px 64px; box-sizing: border-box; overflow: hidden; }
.lb-hero-fondo { position: absolute; inset: -4%; background: #140d06 url(images/portada/hero.webp) center/cover; animation: lb-pan 40s ease-in-out infinite alternate; }
@keyframes lb-pan { from { transform: scale(1) translateX(0); } to { transform: scale(1.08) translateX(-1.5%); } }
.sin-animaciones .lb-hero-fondo { animation: none; }
@media (prefers-reduced-motion: reduce) { .lb-hero-fondo { animation: none; } }
.lb-hero-vel { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(10,6,2,.35), rgba(10,6,2,.88) 85%), linear-gradient(180deg, rgba(10,6,2,.2), #140d06 98%); }
.lb-hero-cont { position: relative; display: flex; gap: 48px; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 1000px; width: 100%; }
.lb-marca { flex: 1 1 380px; text-align: center; }
.lb-corona { font-size: 54px; color: var(--med-oro); text-shadow: 0 0 24px rgba(241,207,121,.5); line-height: 1; }
.lb-marca h1 { margin: 6px 0 0; font-size: clamp(36px, 6vw, 62px); color: var(--med-oro); letter-spacing: 2px; text-shadow: 0 3px 0 #000, 0 0 30px rgba(0,0,0,.8); }
.lb-sub { color: #d9a441; letter-spacing: 8px; font-weight: bold; font-size: 14px; margin-top: 4px; text-shadow: 0 2px 0 #000; }
.lb-lema { font-size: 19px; line-height: 1.45; margin: 18px auto 14px; max-width: 420px; text-shadow: 0 2px 6px #000; }
.lb-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lb-chips span { background: rgba(42,28,16,.8); border: 1px solid var(--med-oro-osc); color: var(--med-oro); border-radius: 20px; padding: 4px 12px; font-size: 12px; }
.lb-card { flex: 0 1 350px; width: 100%; background: rgba(34,24,14,.93); border: 2px solid var(--med-oro-osc); border-radius: 14px; padding: 22px; box-shadow: 0 18px 60px rgba(0,0,0,.8), inset 0 0 40px rgba(0,0,0,.4); box-sizing: border-box; }
.lb-tabs { display: flex; gap: 4px; margin-bottom: 16px; background: #140d06; border-radius: 10px; padding: 4px; }
.lb-tabs button { flex: 1; background: none; border: 0; color: #a89676; padding: 9px; border-radius: 7px; cursor: pointer; font: bold 14px var(--med-serif); }
.lb-tabs button.act { background: linear-gradient(#b8903c, #8a6d2f); color: #1a1008; }
.lb-card label { display: block; font-size: 12px; color: #a89676; margin: 10px 0 4px; }
.lb-card input { width: 100%; padding: 11px; box-sizing: border-box; font-size: 16px; border-radius: 7px; border: 1px solid #6b5426; background: #1d140b; color: #f3e8cc; }
.lb-card input:focus { outline: 2px solid var(--med-oro); }
.lb-pass { position: relative; }
.lb-pass input { padding-right: 42px; }
.lb-ojo { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 36px; background: none; border: 0; cursor: pointer; font-size: 16px; filter: grayscale(.6); }
.lb-cta { width: 100%; margin-top: 18px; padding: 13px; font: bold 16px var(--med-serif); letter-spacing: .5px; color: #1a1008; border: 1px solid #f1cf79; border-radius: 9px; cursor: pointer; background: linear-gradient(#f1cf79, #b8903c); box-shadow: 0 4px 0 #6b5426, 0 8px 18px rgba(0,0,0,.5); }
.lb-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 #6b5426; }
.lb-nota { color: #8c7c5f; font-size: 12px; text-align: center; margin: 14px 0 0; }
.lb-bajar { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: var(--med-oro); font-size: 13px; text-decoration: none; opacity: .8; }
.lb-main { max-width: 1000px; margin: 0 auto; padding: 8px 16px 40px; }
.lb-main section { margin-top: 38px; }
.lb-main h2 { text-align: center; color: var(--med-oro); font-size: 24px; letter-spacing: 1.5px; margin: 0 0 18px; text-shadow: 0 2px 0 #000; }
.lb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.lb-stats div { background: var(--med-madera-osc); border: 1px solid var(--med-oro-osc); border-radius: 10px; padding: 12px; text-align: center; }
.lb-stats b { display: block; color: var(--med-oro); font-size: 20px; }
.lb-stats span { color: #a89676; font-size: 12px; }
.lb-ev { margin-top: 16px; border: 2px solid var(--med-oro-osc); border-radius: 12px; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background-size: cover; background-position: center; }
.lb-ev small { color: #d9a441; letter-spacing: 2px; font-size: 11px; display: block; }
.lb-ev h3 { margin: 4px 0 0; color: var(--med-oro); font-size: 22px; }
.lb-ev .t { text-align: right; }
.lb-ev .t b { font: bold 28px ui-monospace, Consolas, monospace; color: #fff; text-shadow: 0 0 12px rgba(241,207,121,.5); }
.lb-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.lb-pasos div { background: var(--med-madera-osc); border: 1px solid #6b5426; border-radius: 12px; padding: 18px; text-align: center; }
.lb-pasos b { font-size: 34px; }
.lb-pasos h3 { margin: 8px 0 6px; color: var(--med-oro); font-size: 17px; }
.lb-pasos p { margin: 0; color: #b9aa8a; font-size: 14px; line-height: 1.45; }
.lb-civs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lb-civs figure { margin: 0; border: 1px solid #6b5426; border-radius: 10px; overflow: hidden; background: #000; position: relative; }
.lb-civs img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; object-position: center 30%; }
.lb-civs figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 6px 8px; text-align: center; font-weight: bold; color: var(--med-oro); font-size: 14px; background: linear-gradient(transparent, rgba(0,0,0,.9)); }
.lb-coms { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; justify-content: center; flex-wrap: wrap; }
.lb-coms img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; border: 2px solid var(--med-oro-osc); background: #000; }
.lb-pie { margin-top: 44px; padding-top: 18px; border-top: 1px solid #4a3620; text-align: center; font-size: 13px; }
.lb-pie a { color: var(--med-oro); margin: 0 12px; }
.lb-pie span { display: block; margin-top: 12px; color: #7d6e52; font-size: 12px; }
@media (max-width: 700px) {
  .lb-civs { gap: 6px; } .lb-civs img { aspect-ratio: 3/4; } .lb-civs figcaption { font-size: 11px; }
  .lb-hero-cont { gap: 22px; } .lb-pasos { grid-template-columns: 1fr 1fr; gap: 8px; } .lb-pasos div { padding: 12px 8px; } .lb-pasos p { font-size: 12px; }
  .lb-corona { font-size: 40px; }
  .lb-lema { font-size: 16px; margin: 10px auto; }
  .lb-ev .t { text-align: left; }
}
.lb-gal-sub { text-align: center; color: #a89676; margin: -8px 0 18px; font-size: 14px; }
.lb-gal { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.lb-gal figure { margin: 0; background: var(--med-madera-osc); border: 1px solid var(--med-oro-osc); border-radius: 12px; overflow: hidden; }
.lb-gal figure.ancho { grid-column: 1 / -1; }
.lb-gal img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.lb-gal figcaption { padding: 10px 14px 12px; font-size: 13px; color: #b9aa8a; line-height: 1.45; }
.lb-gal figcaption b { color: var(--med-oro); }
.lb-zoom { position: fixed; inset: 0; z-index: 10001; background: rgba(5,3,1,.94); display: flex; align-items: center; justify-content: center; padding: 14px; cursor: zoom-out; }
.lb-zoom img { max-width: 100%; max-height: 100%; border-radius: 8px; }
@media (max-width: 700px) { .lb-gal { grid-template-columns: 1fr; } }
.lb-gal figure.ancho { max-width: 820px; width: 100%; justify-self: center; }

/* --- Unidades: pestañas y Reubicar --- */
.u-pestanas { display: flex; gap: 6px; margin: 0 12px 10px; }
.u-pestana { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--u-borde, #6b5b45); background: var(--u-panel, #241a11); color: var(--u-texto, #e8d5a8); font-weight: bold; cursor: pointer; }
.u-pestana.activa { background: var(--u-barra, #5c4429); color: var(--u-barra-texto, #f1cf79); }
.u-prov { height: 8px; background: rgba(0,0,0,.35); border-radius: 4px; overflow: hidden; }
.u-prov-fill { height: 100%; background: linear-gradient(90deg, #6a9a4e, #c9a04a); }
.u-prov-txt { font-size: 11px; opacity: .85; }
.u-reub-form { padding: 10px 14px; }
.u-reub-form select, .u-reub-form input[type=number] { background: #1f1710; color: #e8d9b8; border: 1px solid #6b5b45; border-radius: 6px; padding: 4px 6px; }
.u-reub-form input[type=number] { width: 100px; }
.reub-cmds { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.reub-cmd { font-size: 13px; cursor: pointer; }
.reub-cmd.off { opacity: .5; cursor: default; }
.u-reub-estim { margin-top: 10px; font-size: 13px; }
.u-aviso { margin: 0 12px 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.u-aviso.bien { background: rgba(80,140,80,.25); border: 1px solid #5a9a5a; }
.u-aviso.mal { background: rgba(190,80,60,.25); border: 1px solid #c65b4a; }

/* ===== Pantalla "Ataques entrantes": pantalla completa, crema claro ===== */
.rail-btn.atq-alerta { animation: atqPulso 1.4s ease-in-out infinite; }
@keyframes atqPulso { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.0); } 50% { box-shadow: 0 0 12px 3px rgba(192,57,43,.75); } }
#pantalla-ataques { position: fixed; inset: 0; z-index: 1500; background: #f8f1de; color: #3b2b1a; font-family: Georgia, 'Times New Roman', serif; overflow-y: auto; padding: 0 0 40px; }
#pantalla-ataques * { box-sizing: border-box; }
.atq-cabecera { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 28px; background: linear-gradient(180deg, #fffaf0, #f3e8cc); border-bottom: 2px solid #d8c291; box-shadow: 0 2px 10px rgba(90,60,20,.12); }
.atq-titulo { display: flex; align-items: center; gap: 14px; }
.atq-ico { font-size: 34px; }
.atq-titulo h2 { margin: 0; font-size: 26px; color: #6b2f1a; letter-spacing: .5px; }
.atq-sub { font-size: 13px; color: #8a7352; margin-top: 2px; }
.atq-cerrar { background: #7a3b22; color: #fff6e0; border: 2px solid #5a2915; border-radius: 8px; padding: 10px 18px; font-size: 15px; font-weight: bold; cursor: pointer; font-family: inherit; }
.atq-cerrar:hover { background: #944a2c; }
.atq-resumen { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 28px 4px; max-width: 1100px; margin: 0 auto; }
.atq-r { padding: 5px 12px; border-radius: 14px; font-size: 13px; font-weight: bold; border: 1px solid transparent; }
.atq-r.total { background: #3b2b1a; color: #fff6e0; }
.atq-r.real { background: #fbd9d3; color: #a1281a; border-color: #e5a69c; }
.atq-r.fake { background: #dfeedd; color: #2f6a35; border-color: #a9cfa8; }
.atq-r.sin { background: #ece2c8; color: #7b6540; border-color: #d3c297; }
.atq-lista { max-width: 1100px; margin: 0 auto; padding: 10px 28px; display: flex; flex-direction: column; gap: 14px; }
.atq-fila { display: flex; background: #fffdf6; border: 2px solid #dcc99b; border-radius: 12px; overflow: hidden; box-shadow: 0 3px 10px rgba(110,80,30,.12); }
.atq-franja { width: 10px; background: #c9b27c; flex: none; }
.atq-fila.real .atq-franja { background: #c0392b; } .atq-fila.real { border-color: #d98f84; }
.atq-fila.fake .atq-franja { background: #4f9a55; } .atq-fila.fake { border-color: #a5cba4; }
.atq-fila.otra .atq-franja { background: #d4a017; } .atq-fila.otra { border-color: #e2c470; }
.atq-cuerpo { flex: 1; padding: 14px 18px 12px; min-width: 0; }
.atq-ruta { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.atq-rol { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #9a845c; }
.atq-nombre { font-size: 20px; font-weight: bold; color: #4a2a14; margin: 2px 0; overflow-wrap: anywhere; }
.atq-pueblo.destino { text-align: right; }
.atq-coord { font-size: 14px; color: #7b6540; }
.atq-medio { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 140px; }
.atq-flecha { font-size: 20px; color: #a1281a; }
.atq-editar { background: #f0e1b8; border: 2px solid #c9ab62; color: #5a3d12; border-radius: 20px; padding: 6px 16px; font-size: 14px; font-weight: bold; cursor: pointer; font-family: inherit; }
.atq-editar:hover { background: #ead394; }
.atq-etq { font-size: 13px; font-weight: bold; padding: 3px 12px; border-radius: 12px; background: #ece2c8; color: #8a7352; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atq-etq.real { background: #c0392b; color: #fff; } .atq-etq.fake { background: #4f9a55; color: #fff; } .atq-etq.otra { background: #d4a017; color: #3b2b1a; }
.atq-editor { margin: 12px 0 4px; padding: 12px; background: #f6ecd0; border: 1px dashed #c9ab62; border-radius: 10px; }
.atq-rapidas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.atq-chip { border: 2px solid #c9ab62; background: #fffdf6; color: #5a3d12; border-radius: 18px; padding: 6px 16px; font-weight: bold; cursor: pointer; font-family: inherit; font-size: 14px; }
.atq-chip.real { background: #c0392b; border-color: #962d22; color: #fff; } .atq-chip.fake { background: #4f9a55; border-color: #3a7a40; color: #fff; } .atq-chip.otra:hover { background: #ead394; }
.atq-libre { display: flex; gap: 8px; flex-wrap: wrap; }
.atq-libre input { flex: 1; min-width: 180px; padding: 9px 12px; border: 2px solid #c9ab62; border-radius: 8px; background: #fffdf6; color: #3b2b1a; font-size: 15px; font-family: inherit; }
.atq-guardar, .atq-quitar { padding: 9px 16px; border-radius: 8px; border: 2px solid #5a2915; font-weight: bold; cursor: pointer; font-family: inherit; }
.atq-guardar { background: #7a3b22; color: #fff6e0; } .atq-quitar { background: #fffdf6; color: #7a3b22; border-color: #c9ab62; }
.atq-tiempo { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 12px; }
.atq-tiempo b { display: block; font-size: 18px; color: #3b2b1a; }
.atq-restante b { font-family: 'Courier New', monospace; font-size: 26px; color: #a1281a; letter-spacing: 1px; }
.atq-cd.urgente { animation: atqParpadeo 1s steps(2) infinite; }
@keyframes atqParpadeo { 50% { opacity: .35; } }
.atq-mapa { margin-left: auto; background: #fffdf6; border: 2px solid #c9ab62; color: #5a3d12; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: bold; font-family: inherit; }
.atq-mapa:hover { background: #f0e1b8; }
.atq-barra { height: 8px; background: #eadcb5; border-radius: 4px; margin-top: 10px; overflow: hidden; }
.atq-barra i { display: block; height: 100%; background: linear-gradient(90deg, #e0a24a, #c0392b); transition: width 1s linear; }
.atq-vacio { text-align: center; padding: 80px 20px; color: #8a7352; }
.atq-vacio .i { font-size: 64px; } .atq-vacio h3 { color: #4f7a43; font-size: 24px; margin: 8px 0; }
@media (max-width: 720px) {
  .atq-cabecera, .atq-resumen, .atq-lista { padding-left: 14px; padding-right: 14px; }
  .atq-ruta { grid-template-columns: 1fr; text-align: left; }
  .atq-pueblo.destino { text-align: left; }
  .atq-medio { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .atq-mapa { margin-left: 0; }
  .atq-titulo h2 { font-size: 20px; } .atq-sub { display: none; }
}

.ev-dur { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 8px 10px; border: 1px solid rgba(201,171,98,.35); border-radius: 8px; }
.ev-dur-t { width: 100%; font-size: 12px; font-weight: bold; opacity: .85; }
.ev-dur label { flex: 1 1 70px; min-width: 70px; }
.ev-presets { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }

.atq-r { cursor: pointer; font-family: inherit; } .atq-r b { margin-left: 4px; } .atq-r.act { outline: 2px solid #3b2b1a; outline-offset: 1px; }
.atq-paginas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; background: #f3e8cc; border: 1px solid #dcc99b; border-radius: 10px; font-size: 14px; }
.atq-pg-info { margin-right: auto; color: #6b5636; }
.atq-pg { min-width: 34px; height: 34px; padding: 0 8px; border: 2px solid #c9ab62; border-radius: 8px; background: #fffdf6; color: #5a3d12; font-weight: bold; cursor: pointer; font-family: inherit; }
.atq-pg:hover:not(:disabled) { background: #ead394; } .atq-pg.act { background: #7a3b22; color: #fff6e0; border-color: #5a2915; } .atq-pg:disabled { opacity: .4; cursor: default; }
.atq-pg-pt { color: #9a845c; }
.atq-pg-ir input { width: 64px; height: 34px; padding: 0 6px; border: 2px solid #c9ab62; border-radius: 8px; background: #fffdf6; font-family: inherit; }
.atq-pg-pp select { height: 34px; border: 2px solid #c9ab62; border-radius: 8px; background: #fffdf6; font-family: inherit; }
.atq-pg-ir, .atq-pg-pp { margin-left: 8px; color: #6b5636; }

.atq-ign { background: #fffdf6; border: 2px solid #d29a90; color: #8c2b1d; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: bold; font-family: inherit; margin-left: auto; }
.atq-ign + .atq-mapa { margin-left: 0; } .atq-ign:hover { background: #fbe3df; }
.atq-ign-caja { background: #f3e8cc; border: 1px solid #dcc99b; border-radius: 10px; }
.atq-ign-tit { width: 100%; text-align: left; background: none; border: 0; padding: 10px 14px; font-family: inherit; font-size: 14px; color: #6b5636; cursor: pointer; }
.atq-ign-tit span { float: right; }
.atq-ign-lista { padding: 0 14px 10px; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.atq-ign-it { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }

/* ===== Ataques entrantes en el dock (botón Unidades) ===== */
#dock-principal [data-dock="unidades"] .badge-dock { background: #c0392b; }
#dock-principal .dock-btn.atq-alerta { animation: atqPulso 1.4s ease-in-out infinite; }
.u-pest-ataques { flex: 1.4; } .u-pest-n { font-style: normal; background: #c0392b; color: #fff; border-radius: 10px; padding: 1px 7px; margin-left: 4px; font-size: 12px; }

/* ===== Acceso rápido izquierdo: Taberna del Mundo + brújula ===== */
#acceso-izq { position: fixed; left: 10px; bottom: 6px; z-index: 206; display: flex; align-items: center; gap: 8px; /* a la altura de la barra de opciones (dock), a su izquierda */ font-family: Georgia, serif; }
#acceso-izq.oculto { display: none !important; }
.acc-taberna { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; cursor: pointer; color: #fbe7b0; font-family: inherit;
  background: linear-gradient(180deg, #8a5a2e, #4a2c14); border: 3px solid #2a1709; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,150,.35); }
.acc-taberna:hover { filter: brightness(1.12); }
.acc-ico { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.acc-txt { display: flex; flex-direction: column; text-align: left; line-height: 1.15; } .acc-txt b { font-size: 15px; letter-spacing: .3px; } .acc-txt small { font-size: 11px; color: #d7bd8a; }
.tb-badge { position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #3fae4c; color: #fff; font-style: normal; font-weight: bold; font-size: 12px; line-height: 18px; text-align: center; border: 2px solid #1f1710; }
.acc-brujula { width: 56px; height: 56px; border-radius: 50%; cursor: pointer; font-size: 30px; line-height: 1; padding: 0;
  background: radial-gradient(circle at 35% 30%, #f1d28a, #a87a30 70%); border: 3px solid #3a2a18; box-shadow: 0 4px 14px rgba(0,0,0,.55), inset 0 1px 3px rgba(255,255,255,.5); }
.acc-brujula:hover { filter: brightness(1.12); transform: rotate(12deg); transition: transform .2s; }
.panel-brujula { position: absolute; left: 0; bottom: 70px; width: 290px; padding: 14px; color: #e8d5a8; background: linear-gradient(180deg, #3a2c1d, #2b2018); border: 2px solid #8a6d2f; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.panel-brujula.oculto { display: none; }
.pb-tit { font-weight: bold; color: #f1cf79; font-size: 16px; margin-bottom: 10px; }
.pb-fila { display: flex; gap: 8px; align-items: flex-end; } .pb-fila label { flex: 1; font-size: 12px; color: #c9b48f; min-width: 0; }
.pb-fila input { width: 100%; margin-top: 3px; padding: 8px; border-radius: 8px; border: 1px solid #6b5b45; background: #1a120a; color: #f4e6c4; font-size: 15px; font-family: inherit; }
.pb-ir { padding: 9px 14px; border-radius: 8px; border: 2px solid #3a2a18; background: linear-gradient(180deg, #e0b878, #a87a30); color: #2a1d0e; font-weight: bold; cursor: pointer; font-family: inherit; }
.pb-ayuda { font-size: 11px; color: #a89676; margin: 8px 0 4px; }
.pb-rec { font-size: 12px; color: #c9b48f; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 4px; }
.pb-rec button { padding: 3px 8px; border-radius: 12px; border: 1px solid #6b5b45; background: #241a11; color: #f1cf79; cursor: pointer; font-family: inherit; }
.pb-casa { margin-top: 6px; width: 100%; padding: 7px; border-radius: 8px; border: 1px solid #6b5b45; background: #241a11; color: #e8d5a8; cursor: pointer; font-family: inherit; }

.panel-taberna { position: absolute; left: 0; bottom: 70px; width: min(440px, calc(100vw - 16px)); height: min(600px, calc(100vh - 190px)); display: flex; flex-direction: column; overflow: hidden;
  background: #22160c; border: 3px solid #5b3a1c; border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,.7); }
.panel-taberna.oculto { display: none; }
.tb-cab { position: relative; flex: none; height: 150px; background: #2a1a0e; }
.tb-escena { position: absolute; inset: 0; background-size: cover; background-position: center; } .tb-escena svg { width: 100%; height: 100%; display: block; }
.tb-cab::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,10,4,.1) 35%, rgba(20,10,4,.88)); pointer-events: none; }
.tb-titulo { position: absolute; left: 16px; bottom: 10px; z-index: 2; color: #fbe7b0; text-shadow: 0 2px 4px #000; }
.tb-titulo h3 { margin: 0; font-size: 22px; letter-spacing: .5px; } .tb-titulo span { font-size: 12px; color: #9fe39a; }
.tb-cerrar { position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #2a1709; background: rgba(60,36,16,.85); color: #fbe7b0; cursor: pointer; font-weight: bold; }
.tb-lista { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; background: linear-gradient(180deg, #2b1c10, #1d130a); }
.tb-msg { max-width: 88%; align-self: flex-start; background: rgba(255,230,170,.08); border: 1px solid rgba(214,170,100,.22); border-radius: 4px 12px 12px 12px; padding: 6px 10px; }
.tb-msg.mio { align-self: flex-end; background: rgba(214,150,60,.2); border-color: rgba(230,170,80,.4); border-radius: 12px 4px 12px 12px; }
.tb-quien { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: bold; } .tb-quien a { cursor: pointer; } .tb-quien a:hover { text-decoration: underline; }
.tb-tag { color: #f1cf79; } .tb-quien time { font-size: 10px; color: #8d7a58; font-weight: normal; margin-left: auto; }
.tb-del { border: 0; background: none; color: #d46a5a; cursor: pointer; font-size: 12px; padding: 0 2px; }
.tb-texto { color: #f0e2c0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; margin-top: 2px; }
.tb-vacia { color: #a89676; text-align: center; padding: 30px 10px; font-style: italic; }
.tb-previos { align-self: center; border: 1px solid #6b5b45; background: #2f2012; color: #d7bd8a; border-radius: 14px; padding: 4px 12px; cursor: pointer; font-family: inherit; font-size: 12px; }
.tb-nuevos { position: absolute; left: 50%; bottom: 68px; transform: translateX(-50%); z-index: 3; border: 0; border-radius: 14px; padding: 5px 14px; background: #3fae4c; color: #fff; font-weight: bold; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.tb-nuevos.oculto { display: none; }
.tb-form { flex: none; display: flex; gap: 8px; padding: 10px 12px 6px; background: #2f2012; border-top: 2px solid #5b3a1c; }
.tb-form input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #6b5b45; background: #1a120a; color: #f4e6c4; font-size: 15px; font-family: inherit; }
.tb-enviar { padding: 0 18px; border-radius: 10px; border: 2px solid #3a2a18; background: linear-gradient(180deg, #e0b878, #a87a30); color: #2a1d0e; font-weight: bold; cursor: pointer; font-family: inherit; }
.tb-aviso { flex: none; min-height: 18px; padding: 0 14px 6px; font-size: 12px; color: #e0897a; background: #2f2012; }
@media (max-width: 760px) {
  #acceso-izq { left: 8px; bottom: 112px; gap: 8px; }
  .acc-txt { display: none; } .acc-taberna { padding: 8px 12px; } .acc-brujula { width: 50px; height: 50px; }
  .panel-taberna { height: min(560px, calc(100vh - 200px)); } .tb-cab { height: 110px; }
}
.pb-fila input, .tb-form input { box-sizing: border-box; }

.tb-cab { height: 190px; }
.tb-video, .tb-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tb-foto { background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s ease; transform: scale(1); }
.tb-foto.act { opacity: 1; animation: tbZoom 14s ease-in-out infinite alternate; }
@keyframes tbZoom { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
@media (max-width: 760px) { .tb-cab { height: 130px; } }

.tb-vo { display: block; margin-top: 3px; padding: 0; border: 0; background: none; color: #8fb8d8; font-size: 11px; cursor: pointer; font-family: inherit; } .tb-vo u { text-underline-offset: 2px; }
.tb-trad { color: #e8efe0; }
.tb-idioma { position: absolute; top: 8px; left: 8px; z-index: 3; }
.tb-idioma-sel, .aj-idioma-sel, .i18n-select { max-width: 150px; padding: 5px 8px; border-radius: 8px; border: 2px solid #2a1709; background: rgba(60,36,16,.88); color: #fbe7b0; font-family: inherit; font-size: 13px; cursor: pointer; }
.aj-idioma-sel { background: #241a11; border-color: #6b5b45; color: #e8d5a8; max-width: 180px; }

/* ===== Taberna a pantalla completa: vídeo de fondo y chat a la derecha ===== */
#acceso-izq.taberna-abierta { z-index: 1400; }
.panel-taberna { position: fixed; inset: 0; left: 0; bottom: 0; width: auto; height: auto; max-width: none; border: 0; border-radius: 0; display: block; background: #120a05; box-shadow: none; }
.panel-taberna.oculto { display: none; }
.tb-escena { position: absolute; inset: 0; } .tb-escena svg { width: 100%; height: 100%; display: block; }
.tb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tb-velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10,5,2,.15) 0%, rgba(10,5,2,.1) 50%, rgba(10,5,2,.75) 100%), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%); }
.tb-titulo { position: absolute; left: 34px; top: 26px; z-index: 3; color: #fbe7b0; text-shadow: 0 3px 8px #000; }
.tb-titulo h3 { margin: 0; font-size: 34px; letter-spacing: .6px; } .tb-titulo span { font-size: 14px; color: #9fe39a; }
.tb-idioma { position: absolute; left: 34px; top: 100px; z-index: 3; }
.tb-cerrar { position: absolute; top: 18px; right: 18px; z-index: 5; width: 40px; height: 40px; font-size: 18px; }
.tb-chat { position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 100%); z-index: 4; display: flex; flex-direction: column; padding: 70px 14px 14px; background: linear-gradient(90deg, rgba(20,10,4,0), rgba(20,10,4,.55) 18%, rgba(20,10,4,.7)); backdrop-filter: blur(3px); }
.tb-lista { background: transparent; flex: 1; } .tb-form, .tb-aviso { background: transparent; border-top: 0; }
.tb-form input { background: rgba(20,12,6,.85); }
.tb-msg { background: rgba(30,18,9,.72); backdrop-filter: blur(4px); }
.tb-msg.mio { background: rgba(120,72,24,.72); }
.tb-nuevos { bottom: 82px; }
@media (max-width: 760px) {
  .tb-titulo { left: 14px; top: 12px; } .tb-titulo h3 { font-size: 22px; } .tb-idioma { left: 14px; top: 62px; }
  .tb-chat { top: auto; height: 62%; width: 100%; padding: 8px 10px 10px; background: linear-gradient(180deg, rgba(20,10,4,0), rgba(20,10,4,.75) 14%); }
  .tb-velo { background: linear-gradient(180deg, rgba(10,5,2,.1), rgba(10,5,2,.6)); }
}

/* Tiempo de reclutamiento con descuento */
.ft-costes .ft-tiempo { cursor: help; }
.ft-costes .ft-tiempo s { opacity: .55; margin: 0 2px; }
.ft-costes .ft-rapido b { color: #2f7a35; }
.ft-costes .ft-lento b { color: #a0392d; }

/* Botón de sonido (junto a la Taberna y la brújula) */
.acc-sonido { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; color: #fbe7b0; border: 2px solid #2a190b; background: linear-gradient(#6b3f1c, #3d2410); box-shadow: 0 3px 8px rgba(0,0,0,.45); }
.acc-sonido:hover { filter: brightness(1.15); }
@media (max-width: 700px) { .acc-sonido { width: 36px; height: 36px; font-size: 16px; } }

.btn-peligro { background: #7a1f1f; color: #fff; border: 1px solid #b33; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.btn-peligro:hover:not(:disabled) { background: #a02828; }
.btn-peligro:disabled { opacity: .45; cursor: not-allowed; }

/* Registro: Guerrero / Guerrera */
.lb-genero { display: flex; gap: 14px; margin: 6px 0 10px; }
.lb-genero label { display: flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; }

/* SEGUNDA VIDA — pantalla completa de Curtu */
#fondo-segunda-vida { position: fixed; inset: 0; z-index: 100000; background: #07050c; display: flex; align-items: center; justify-content: center; overflow: hidden; animation: sv-entra 1.2s ease-out; }
#fondo-segunda-vida img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#fondo-segunda-vida::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 55%, rgba(0,0,0,.8) 100%); }
#fondo-segunda-vida .sv-texto { position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 5vh 6vw; text-align: center; color: #f3ead2; text-shadow: 0 2px 8px #000, 0 0 24px #000; pointer-events: none; }
#fondo-segunda-vida h1 { margin: 0; font-size: clamp(22px, 4vw, 44px); letter-spacing: .5px; color: #d9f7c2; }
#fondo-segunda-vida .sv-por { margin-top: 6px; font-size: clamp(13px, 1.6vw, 18px); opacity: .85; }
#fondo-segunda-vida p { margin: 4px 0; font-size: clamp(15px, 2vw, 24px); max-width: 900px; }
#fondo-segunda-vida .sv-frase { font-style: italic; color: #b6f08a; }
#fondo-segunda-vida button { pointer-events: auto; margin-top: 14px; padding: 12px 34px; font-size: clamp(16px, 2vw, 22px); font-weight: 700; color: #10200a; background: linear-gradient(#c8ff9a, #7cd34c); border: 2px solid #e6ffc9; border-radius: 10px; cursor: pointer; box-shadow: 0 0 22px rgba(120,255,80,.55); }
#fondo-segunda-vida button:hover { filter: brightness(1.12); }
#fondo-segunda-vida .sv-texto > div:first-child, #fondo-segunda-vida .sv-texto > h1 { }
@keyframes sv-entra { from { opacity: 0; } to { opacity: 1; } }

/* Consejo bajo la pantalla de punto cardinal */
.entrada-consejo { position: fixed; left: 50%; bottom: 8px; transform: translateX(-50%); width: min(720px, 92vw); margin: 0; text-align: center; text-shadow: 0 1px 4px #000; color: #c9b98f; font-size: 13px; line-height: 1.35; }
.entrada-consejo b, .carga-consejo b { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #e0b85a; margin-bottom: 3px; }

/* PANTALLAS DE CARGA con comandantes */
#fondo-carga { position: fixed; inset: 0; z-index: 100001; background: #07050c; overflow: hidden; transition: opacity .5s; }
#fondo-carga.saliendo { opacity: 0; pointer-events: none; }
#fondo-carga .carga-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; display: flex; align-items: center; justify-content: center; }
#fondo-carga .carga-slide.on { opacity: 1; }
#fondo-carga .carga-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(26px) brightness(.45) saturate(1.2); }
#fondo-carga .carga-slide.propia .carga-bg { inset: 0; filter: brightness(.8); }
#fondo-carga .carga-carta { position: relative; margin-top: -9vh; height: min(66vh, 600px); max-width: 90vw; object-fit: contain; border-radius: 14px; box-shadow: 0 10px 60px rgba(0,0,0,.8); animation: carga-zoom 9s ease-out forwards; }
#fondo-carga .carga-consejo { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); width: min(760px, 88vw); text-align: center; color: #f3ead2; font-size: clamp(13px, 1.7vw, 17px); line-height: 1.4; text-shadow: 0 2px 8px #000; padding: 10px 16px; background: linear-gradient(transparent, rgba(0,0,0,.55)); border-radius: 10px; }
#fondo-carga .carga-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.12); }
#fondo-carga .carga-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c8923a, #f1d58a); }
#fondo-carga .carga-saltar { position: absolute; right: 18px; top: 16px; background: rgba(0,0,0,.45); color: #e8dcc0; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
@keyframes carga-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
body.sin-animaciones #fondo-carga .carga-carta { animation: none; }

/* Pantallas de carga con arte propio: título destacado y degradado inferior para leer bien el texto */
#fondo-carga .carga-slide.propia::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(transparent, rgba(0,0,0,.82)); }
#fondo-carga .carga-slide.propia .carga-consejo { z-index: 2; bottom: 6vh; background: none; }
#fondo-carga .carga-slide.propia .carga-consejo b { font-size: clamp(18px, 2.4vw, 30px); letter-spacing: 1.5px; color: #f1d58a; text-transform: none; margin-bottom: 6px; }

/* Accesos de la izquierda (chat del mundo, brújula, sonido): a la altura de la barra de opciones. Si no caben a su izquierda, se hacen compactos y, en pantallas estrechas, suben encima de la barra. */
@media (max-width: 1320px) { .acc-txt { display: none; } .acc-taberna { padding: 8px 12px; } }
@media (min-width: 761px) and (max-width: 1110px) { #acceso-izq { bottom: 78px; } }

/* ===== Simulador: imágenes de tropas y comandantes ===== */
.sim-tropa { display:flex; align-items:center; gap:10px; }
.sim-tropa-img { width:46px; height:46px; border-radius:6px; object-fit:cover; border:2px solid #6b5b45; background:#1d150e; flex:none; }
.sim-tropa-img.ofensiva { border-color:#b5533c; }
.sim-tropa-img.defensiva { border-color:#4f7fae; }
.sim-cmd-vista { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:13px; }
.sim-cmd-img { width:52px; height:52px; border-radius:8px; object-fit:cover; border:2px solid #6b5b45; flex:none; }
.sim-cmd-img.grande { width:84px; height:84px; }
.sim-cmd-hab { color:#c9b48f; font-size:12px; margin-top:2px; }
.sim-rareza { font-size:11px; padding:1px 7px; border-radius:10px; font-weight:bold; vertical-align:middle; }
.sim-rareza.rareza-normal { background:#6b6b6b; color:#fff; }
.sim-rareza.rareza-epico { background:#7a3fb0; color:#fff; }
.sim-rareza.rareza-mitico { background:#c0392b; color:#fff; }
.sim-rareza.rareza-legendario { background:#d4a017; color:#2b1a05; }
.sim-cmd-img.rareza-normal { border-color:#8a8a8a; }
.sim-cmd-img.rareza-epico { border-color:#9b59d0; }
.sim-cmd-img.rareza-mitico { border-color:#e0533f; }
.sim-cmd-img.rareza-legendario { border-color:#f0c040; box-shadow:0 0 8px rgba(240,192,64,.6); }

/* ===== Informe "Batalla Simulada" ===== */
body.informe-abierto { overflow:hidden; }
#informe-batalla { position:fixed; inset:0; z-index:9500; overflow-y:auto; background:rgba(10,6,2,.88); padding:18px 10px 40px; }
.informe-papel { position:relative; max-width:900px; margin:0 auto; color:#2b1a08; padding:26px 28px 24px;
  background:linear-gradient(180deg,#ecdcb4,#dcc592 60%,#d3b97c); border-radius:6px; border:3px solid #6b4a1e;
  box-shadow:0 0 0 2px #2b1a08, 0 12px 40px rgba(0,0,0,.7); font-family:Georgia,'Times New Roman',serif; }
.informe-cerrar { position:absolute; top:10px; right:12px; background:transparent; border:none; font-size:22px; color:#6b4a1e; cursor:pointer; }
.informe-cab { text-align:center; border-bottom:2px double #8a6a35; padding-bottom:12px; margin-bottom:8px; }
.informe-sello { font-size:34px; }
.informe-cab h1 { margin:2px 0 6px; font-size:34px; letter-spacing:3px; text-transform:uppercase; color:#4a2a08; }
.informe-veredicto { display:inline-block; padding:6px 18px; border-radius:20px; font-weight:bold; font-size:16px; }
.informe-veredicto.gana-atq { background:#a8321f; color:#fff; }
.informe-veredicto.gana-def { background:#2c5f8f; color:#fff; }
.informe-sub { font-size:12px; color:#6b5430; margin-top:6px; font-style:italic; }
.informe-papel h2 { font-size:18px; color:#4a2a08; margin:18px 0 8px; border-bottom:1px solid #8a6a35; padding-bottom:3px; text-transform:uppercase; letter-spacing:1px; }
.inf-bandos { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.inf-bando { background:rgba(255,248,225,.45); border:1px solid #8a6a35; border-radius:6px; padding:8px 10px; }
.inf-bando h3 { margin:0 0 6px; font-size:16px; }
.inf-bando.atq h3 { color:#a8321f; } .inf-bando.def h3 { color:#2c5f8f; }
.inf-tabla { width:100%; border-collapse:collapse; font-size:13px; }
.inf-tabla th { text-align:left; font-size:11px; color:#6b5430; border-bottom:1px solid #8a6a35; padding:2px 4px; }
.inf-tabla td { padding:4px; border-bottom:1px dotted #b79f6a; vertical-align:middle; }
.inf-tabla .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.inf-tabla .caidas { color:#a8321f; font-weight:bold; } .inf-tabla .vivos { color:#2a6b2a; font-weight:bold; }
.inf-tabla tr.total td { border-top:2px solid #6b4a1e; font-weight:bold; }
.inf-tabla .sim-tropa-img { width:42px; height:42px; }
.barra-td { min-width:70px; } .barra-td small { font-size:10px; color:#6b5430; }
.inf-barra { height:7px; background:#c98a7a; border-radius:4px; overflow:hidden; }
.inf-barra i { display:block; height:100%; background:#4a9a4a; }
.inf-vacio { color:#6b5430; font-style:italic; font-size:13px; }
.inf-cmds { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.inf-cmd { display:flex; gap:12px; background:rgba(255,248,225,.45); border:1px solid #8a6a35; border-radius:6px; padding:10px; }
.inf-cmd:only-child { grid-column:1 / -1; }
.inf-cmd h4 { margin:0 0 4px; font-size:16px; } .inf-cmd h4 small { font-weight:normal; color:#6b5430; }
.inf-cmd p { margin:3px 0; font-size:13px; }
.inf-hab { margin-top:6px; padding-top:6px; border-top:1px dotted #8a6a35; font-size:13px; }
.inf-act { font-weight:bold; font-size:12px !important; }
.inf-fases h4 { margin:10px 0 4px; font-size:14px; color:#4a2a08; }
.inf-fase-fila { display:grid; grid-template-columns:130px 110px 1fr; gap:8px; font-size:13px; padding:3px 0; border-bottom:1px dotted #b79f6a; }
.inf-fase-fila .g-atq { color:#a8321f; font-weight:bold; } .inf-fase-fila .g-def { color:#2c5f8f; font-weight:bold; }
.inf-fase-fila small { color:#6b5430; }
.inf-muralla { margin-top:12px; padding:8px 10px; background:rgba(255,248,225,.45); border:1px solid #8a6a35; border-radius:6px; font-size:13px; }
.inf-notas { font-size:13px; color:#4a3818; margin:10px 0 0; padding-left:18px; }
.informe-pie { text-align:center; margin-top:18px; }
.informe-pie button { background:#6b4a1e; color:#f5e6c0; border:2px solid #2b1a08; padding:10px 24px; font-size:15px; border-radius:6px; cursor:pointer; }
@media (max-width:700px) {
  .informe-papel { padding:18px 12px; }
  .inf-bandos, .inf-cmds { grid-template-columns:1fr; }
  .inf-fase-fila { grid-template-columns:1fr; gap:0; }
  .informe-cab h1 { font-size:26px; }
}
.inf-asedio-fila { display:flex; gap:10px; align-items:center; background:rgba(255,248,225,.45); border:1px solid #8a6a35; border-radius:6px; padding:8px 10px; margin-bottom:8px; font-size:13px; line-height:1.5; }
.inf-asedio-fila .sim-tropa-img { width:46px; height:46px; }
.bonus-sim > summary { cursor:pointer; color:#d4a95a; font-weight:bold; margin-bottom:6px; }
.bonus-bloque { margin:8px 0; padding-top:6px; border-top:1px dotted #6b5b45; }
.bonus-bloque h5 { margin:0 0 4px; color:#d4a95a; font-size:13px; }
.bonus-sub { display:block; color:#a89676; font-size:11px; font-weight:normal; margin-top:1px; }
.bonus-fila select, .bonus-sim select { max-width:55%; }
.bonus-check { display:flex; gap:8px; align-items:flex-start; padding:4px 0; cursor:pointer; font-size:13px; }
.bonus-check input { margin-top:3px; }
.bonus-resumen { font-size:12px; color:#c9b48f; padding:2px 0 4px; }
.inf-bando ul { margin:4px 0 0; padding-left:18px; font-size:13px; }
.inf-pct { display:inline-block; margin-left:8px; padding:2px 10px; border-radius:12px; background:#4a2a08; color:#ffe9a8; font-size:14px; font-weight:bold; vertical-align:middle; }
.inf-bando h5 { margin:8px 0 2px; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:#6b5430; }
.inf-lineas { list-style:none; margin:0; padding:0; font-size:13px; }
.inf-lineas li { display:flex; justify-content:space-between; gap:10px; padding:2px 0; border-bottom:1px dotted #b79f6a; }
.inf-lineas b { color:#2a6b2a; white-space:nowrap; } .inf-lineas b.neg { color:#a8321f; }
.inf-lineas li.total { border-top:1px solid #6b4a1e; font-weight:bold; }

/* Historial del mundo (lista) */
.nw-hist { max-width: 520px; width: 94vw; max-height: 82vh; display: flex; flex-direction: column; }
.nw-lista { overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.nw-fila { display: flex; gap: 10px; align-items: center; padding: 7px 9px; border-left: 3px solid var(--c, #d4a948); background: rgba(255,255,255,.05); border-radius: 6px; font-size: 14px; text-align: left; }
.nw-fila.nw-nueva { background: rgba(212,169,72,.16); }
.nw-fila.nw-arde { background: linear-gradient(90deg, rgba(255,122,26,.28), rgba(255,255,255,.04)); animation: nw-llama 1.6s ease-in-out infinite alternate; }
@keyframes nw-llama { from { box-shadow: 0 0 0 rgba(255,122,26,0); } to { box-shadow: 0 0 10px rgba(255,122,26,.55); } }
.nw-fi { font-size: 22px; flex: 0 0 32px; text-align: center; } .nw-fi img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }
.nw-ft small { display: block; opacity: .6; font-size: 11px; margin-top: 2px; }

.cx-niveles-scroll { max-height: 280px; overflow-y: auto; position: relative; }
.cx-niveles-scroll .cx-tabla thead th { position: sticky; top: 0; }
.cx-tabla tr.nivel-actual td { background: #f3d98a; font-weight: bold; }

.aliado-def { position: relative; cursor: pointer; }
.aliado-def .mini { width: 46px; height: 62px; border-radius: 6px; background-size: cover; background-position: center; border: 2px solid #4a3c2c; position: relative; }
.aliado-def.elegido .mini { border-color: #f1cf79; box-shadow: 0 0 8px #f1cf79aa; }
.aliado-def .mini .nv { position: absolute; bottom: 0; right: 0; background: #000b; color: #f1cf79; font-size: 11px; padding: 0 4px; border-radius: 4px 0 0 0; }
.aliado-def .grande { display: none; position: absolute; right: 0; top: 66px; z-index: 50; width: 170px; height: 230px; border-radius: 10px; background-size: cover; background-position: center; border: 2px solid #f1cf79; box-shadow: 0 6px 18px #000c; }
.aliado-def:hover .grande { display: block; }
.aliado-def .grande .franja-nombre, .aliado-def .grande .franja-nivel { position: absolute; left: 0; right: 0; text-align: center; background: #000b; color: #f1cf79; padding: 3px; font-size: 12px; }
.aliado-def .grande .franja-nombre { bottom: 20px; font-weight: bold; }
.aliado-def .grande .franja-nivel { bottom: 0; font-size: 11px; color: #e8d9b8; }

/* Recompensa de comandante mítico en la ficha de misión */
.recompensa-mitica { display: block; text-align: center; margin-top: 10px; padding: 10px 6px 8px; border-top: 1px solid rgba(212,169,90,.35); }
.recompensa-mitica small { display: block; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #a89676; margin-bottom: 4px; }
.recompensa-mitica b { display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; font-weight: 700; letter-spacing: 1.5px; line-height: 1.15;
  background: linear-gradient(100deg, #b8801f 0%, #ffe9a3 30%, #f2b84a 50%, #fff2c2 70%, #b8801f 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(255,170,40,.45)); animation: brillo-mitica 3.2s linear infinite; }
@keyframes brillo-mitica { 0% { background-position: 220% 0; } 100% { background-position: -120% 0; } }

/* ===== Camino de niveles de un comandante ===== */
.niveles-cmd-modal { background:#1c140d; border:2px solid #6b5b45; border-radius:12px; width:min(1500px,97vw); max-height:94vh; display:flex; flex-direction:column; color:#e8d9b8; overflow:hidden; }
.niveles-cmd-cabecera { display:flex; align-items:center; gap:14px; padding:12px 16px; background:linear-gradient(90deg,#241a10,#3a2410); border-bottom:1px solid #8a6a1e; }
.niveles-cmd-retrato { width:64px; height:64px; object-fit:cover; border-radius:8px; border:2px solid #8a6a1e; }
.niveles-cmd-titulo { flex:1; min-width:0; }
.niveles-cmd-titulo h2 { margin:0 0 6px; font-family:Georgia,serif; font-size:19px; color:#f1cf79; }
.niveles-cmd-barra { position:relative; height:16px; background:#1a130c; border:1px solid #6b5b45; border-radius:8px; overflow:hidden; }
.niveles-cmd-barra div { height:100%; background:linear-gradient(90deg,#2f7d4a,#7fd47c); }
.niveles-cmd-barra span { position:absolute; inset:0; text-align:center; font-size:11px; line-height:16px; font-weight:bold; color:#fff; text-shadow:0 0 3px #000; }
.niveles-cmd-pa { font-size:12px; color:#c9b48f; margin-top:5px; }
.niveles-cmd-pista { overflow-x:auto; padding:18px 14px 10px; background:radial-gradient(ellipse at top,#2b2014,#1a130c); }
.niveles-cmd-fila { display:flex; gap:10px; position:relative; width:max-content; padding-top:6px; }
.niveles-cmd-fila::before { content:''; position:absolute; left:40px; right:40px; top:34px; height:4px; background:repeating-linear-gradient(90deg,#6b5b45 0 8px,transparent 8px 14px); }
.nivel-cmd { position:relative; width:128px; flex:0 0 128px; text-align:center; cursor:pointer; padding:6px 6px 8px; border:1px solid transparent; border-radius:10px; }
.nivel-cmd:hover { background:rgba(255,230,160,.06); }
.nivel-cmd.seleccionado { border-color:#c99a3e; background:rgba(201,154,62,.1); }
.nivel-cmd-circulo { margin:0 auto 8px; width:46px; height:46px; border-radius:50%; background:#2a2420; border:3px solid #4a3c2c; color:#8a7a62; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:18px; position:relative; z-index:1; }
.nivel-cmd.alcanzado .nivel-cmd-circulo { background:#3a7a3a; border-color:#2a5a2a; color:#eaffea; }
.nivel-cmd.actual .nivel-cmd-circulo { background:#c99a3e; border-color:#8a6a1e; color:#2a1a05; animation:camino-pulso 1.6s infinite; }
.nivel-cmd.hito .nivel-cmd-circulo { box-shadow:0 0 14px rgba(120,200,255,.7); }
.nivel-cmd-fuerza { position:relative; height:12px; background:#1a130c; border:1px solid #4a3c2c; border-radius:6px; overflow:hidden; margin-bottom:6px; }
.nivel-cmd-fuerza div { height:100%; background:linear-gradient(90deg,#8a6a1e,#f1cf79); }
.nivel-cmd-fuerza span { position:absolute; inset:0; font-size:9px; line-height:12px; font-weight:bold; color:#fff; text-shadow:0 0 3px #000; }
.nivel-cmd-pa { font-size:12px; color:#e8d9b8; font-weight:bold; }
.nivel-cmd-faltan { font-size:11px; color:#e0a070; min-height:14px; }
.nivel-cmd-desbloqueo { margin-top:4px; font-size:10px; color:#7fd0ff; line-height:1.2; }
.niveles-cmd-detalle { padding:12px 16px 14px; border-top:1px solid #4a3c2c; overflow-y:auto; }
.niveles-cmd-detalle-cab { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; font-size:13px; color:#c9b48f; margin-bottom:10px; }
.niveles-cmd-detalle-cab b:first-child { color:#f1cf79; font-size:16px; }
.niveles-cmd-habs { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px; }
.nivel-cmd-hab { background:#241a10; border:1px solid #4a3c2c; border-radius:8px; padding:10px 12px; }
.nivel-cmd-hab-titulo { color:#ffd876; margin-bottom:4px; }
.nivel-cmd-hab-texto { font-size:13px; line-height:1.4; }
.nivel-cmd-candado { color:#e0706a; font-size:12px; }
.niveles-cmd-tabla { margin-top:12px; font-size:12px; color:#c9b48f; }
.niveles-cmd-tabla summary { cursor:pointer; color:#d4a95a; }
.niveles-cmd-tabla table { margin-top:8px; border-collapse:collapse; }
.niveles-cmd-tabla th, .niveles-cmd-tabla td { border:1px solid #3a2e20; padding:3px 10px; text-align:left; }

/* ---- Castillo del Rey: pantalla completa con pestañas Ejércitos / Asedio ---- */
.cf-fondo { padding:0; align-items:stretch; justify-content:stretch; }
.cf-pantalla { width:100vw; height:100vh; display:flex; flex-direction:column; background:linear-gradient(180deg,#1a1108,#0d0904); color:#e8d9b8; overflow:hidden; }
.cf-cabecera { flex:0 0 auto; height:clamp(120px,19vh,190px); background:#000 center 30%/cover; position:relative; box-shadow:0 0 30px rgba(241,207,121,.25) inset; }
.cf-cabecera-velo { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.8)); display:flex; align-items:flex-end; gap:24px; padding:14px 22px; }
.cf-titulo h1 { margin:0; color:#f1cf79; font-size:clamp(22px,3.2vw,34px); text-shadow:0 2px 8px #000; letter-spacing:1px; }
.cf-titulo div { color:#d8b878; font-size:13px; letter-spacing:3px; text-transform:uppercase; }
.cf-estado { margin-left:auto; width:min(420px,38vw); }
.cf-estado-cab { display:flex; justify-content:space-between; font-size:13px; font-weight:bold; color:#e8d9b8; text-shadow:0 1px 4px #000; margin-bottom:4px; }
.cf-barra { height:12px; background:#2a2018; border-radius:6px; overflow:hidden; border:1px solid #4a3c2c; }
.cf-barra.grande { height:18px; border-radius:9px; }
.cf-barra > div { height:100%; transition:width .3s; }
.cf-cerrar { position:absolute; top:12px; right:14px; }
.cf-tabs { flex:0 0 auto; display:flex; gap:6px; padding:8px 18px 0; background:#120c06; border-bottom:2px solid #6b5b45; }
.cf-tab { background:#241a10; color:#c9b48f; border:1px solid #4a3c2c; border-bottom:none; border-radius:9px 9px 0 0; padding:10px 22px; font-size:15px; font-weight:bold; cursor:pointer; font-family:inherit; }
.cf-tab.activa { background:linear-gradient(180deg,#4a3410,#2a1c0a); color:#f1cf79; border-color:#d4a95a; }
.cf-conquistado { background:#1a2f1a; border-bottom:1px solid #3a6a3a; padding:10px 22px; color:#7fd47c; font-weight:bold; }
.cf-cuerpo { flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px 22px 24px; }
.cf-panel { display:none; } .cf-panel.activo { display:block; }
.cf-fila-niveles { display:flex; gap:12px; overflow-x:auto; padding:10px 4px 14px; }
.cf-nivel { flex:0 0 auto; width:104px; text-align:center; cursor:pointer; border:2px solid transparent; border-radius:12px; padding:8px 4px 6px; background:#140d06; }
.cf-nivel.bloqueado { opacity:.4; } .cf-nivel.caido { opacity:.75; }
.cf-nivel.seleccionado { border-color:#f1cf79; box-shadow:0 0 14px rgba(241,207,121,.5); opacity:1; }
.cf-nivel-retrato { position:relative; width:86px; height:106px; margin:0 auto; border-radius:10px; border:3px solid #4a3c2c; background:#1a130c center/cover; }
.cf-nivel.activo .cf-nivel-retrato { border-color:#f1cf79; box-shadow:0 0 16px rgba(241,207,121,.8); }
.cf-nivel.caido .cf-nivel-retrato { filter:grayscale(.9); }
.cf-nivel-icono { position:absolute; bottom:-8px; right:-8px; font-size:22px; }
.cf-nivel-num { font-size:13px; color:#d4a95a; font-weight:bold; margin-top:8px; }
.cf-nivel-barra { height:6px; background:#2a2018; border-radius:3px; overflow:hidden; margin:5px 6px 0; }
.cf-nivel-barra > div { height:100%; background:linear-gradient(90deg,#a02020,#e07f7f); }
.cf-detalle { display:flex; gap:22px; background:#140d06; border:2px solid #3a2c1c; border-radius:14px; padding:20px; margin-top:6px; }
.cf-detalle.activo { border-color:#f1cf79; }
.cf-detalle-retrato { width:min(200px,26vw); aspect-ratio:2/3; object-fit:cover; object-position:top; border-radius:12px; border:3px solid #d4a95a; flex-shrink:0; box-shadow:0 0 22px rgba(0,0,0,.6); }
.cf-detalle-datos { flex:1; min-width:0; }
.cf-detalle-cab { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.cf-detalle-nivel { color:#f1cf79; font-weight:bold; font-size:24px; }
.cf-detalle-nombre { color:#d4a95a; margin-left:12px; font-size:18px; }
.cf-detalle-sub { color:#a89676; font-size:12px; margin-left:10px; }
.cf-dato { font-size:13px; color:#a89676; margin:8px 0 14px; } .cf-dato b { color:#f1cf79; }
.cf-tropas { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.cf-tropa { text-align:center; background:#1a130c; border:1px solid #3a2c1c; border-radius:10px; padding:8px; }
.cf-tropa img { width:100%; height:84px; object-fit:cover; border-radius:7px; }
.cf-tropa-nombre { font-size:12px; margin-top:5px; color:#d8c9a8; }
.cf-tropa-cant { font-size:17px; font-weight:bold; color:#c65b4a; margin-top:2px; }
.cf-tropa.caida .cf-tropa-cant { color:#7a6a5a; } .cf-tropa.caida img { filter:grayscale(.9); }
.cf-caja { background:#140d06; border:1px solid #3a2c1c; border-radius:12px; padding:18px; max-width:980px; }
.cf-caja-cab { display:flex; justify-content:space-between; align-items:center; font-size:17px; font-weight:bold; margin-bottom:10px; } .cf-caja-cab span:last-child { color:#a89676; font-size:14px; }
.cf-subtitulo { color:#7fb0e0; font-size:14px; font-weight:bold; margin:16px 0 6px; }
.cf-tabla { margin-top:12px; width:100%; border-collapse:collapse; font-size:13px; color:#d8c9a8; }
.cf-tabla th { padding:6px 10px; border-bottom:1px solid #3a2c1c; color:#7fb0e0; text-align:left; }
.cf-tabla td { padding:6px 10px; border-bottom:1px solid #2a2018; vertical-align:middle; }
.cf-tabla img { width:40px; height:30px; object-fit:cover; border-radius:4px; vertical-align:middle; margin-right:10px; }
.cf-tabla img.cf-cmd-mini { width:26px; height:30px; border:1px solid #d4a95a; margin-right:8px; }
.cf-aviso { margin-top:12px; padding:9px 12px; background:#2a1c14; border:1px solid #6a4a2a; border-radius:7px; font-size:13px; color:#f1cf79; }
@media (max-width:700px) { .cf-detalle { flex-direction:column; } .cf-detalle-retrato { width:140px; } .cf-estado { display:none; } }


/* ===== Pase de Batalla ===== */
#pase-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(8,5,3,.9); display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; }
.pase-escena { width: min(1280px, 100%); max-height: 100%; display: flex; flex-direction: column; background: linear-gradient(rgba(36,26,17,.80), rgba(26,18,11,.90)), url(images/pase/fondo.webp) center / cover, linear-gradient(180deg, #3a2c1d, #241a11); border: 2px solid #8a6d2f; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.7); color: #e8d5a8; font-family: Georgia, serif; overflow: hidden; user-select: none; }
.pase-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #5b4630; flex-wrap: wrap; }
.pase-tit b { display: block; font-size: 22px; color: #f1cf79; letter-spacing: .5px; }
.pase-tit small { color: #c9b48f; font-size: 13px; }
.pase-acciones { display: flex; align-items: center; gap: 8px; }
.pase-btn { padding: 8px 14px; border-radius: 9px; border: 2px solid #3a2a18; background: linear-gradient(#e0b878, #a87a30); color: #2a1d0e; font: bold 14px Georgia, serif; cursor: pointer; }
.pase-btn.gold { background: linear-gradient(#ffd966, #e29a12); }
.pase-btn:disabled { opacity: .45; cursor: default; }
.pase-btn.late { animation: paseBoton .9s ease 2; }
@keyframes paseBoton { 0% { box-shadow: 0 0 0 rgba(255,210,90,0); } 40% { box-shadow: 0 0 22px rgba(255,210,90,.95); transform: scale(1.04); } 100% { box-shadow: 0 0 0 rgba(255,210,90,0); } }
.pase-badge-prem { padding: 7px 12px; border-radius: 9px; background: rgba(120,230,140,.14); border: 1px solid #5fbf7a; color: #9ff0b0; font-weight: bold; font-size: 13px; }
.pase-cerrar { display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; color: #f0d79a; background: rgba(20,14,10,.8); border: 2px solid #8a6a2a; font-size: 16px; font-weight: bold; }
.pase-cerrar:hover { background: #5b2a1b; }
.pase-cuerpo { display: flex; align-items: stretch; padding: 12px 8px 12px 12px; gap: 8px; min-height: 0; }
.pase-filas { flex: none; width: 70px; display: grid; grid-template-rows: 1fr 1fr 28px; gap: 8px; font-size: 12px; font-weight: bold; color: #c9b48f; text-align: center; }
.pase-filas span { display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(20,14,10,.55); border: 1px solid #5b4630; padding: 4px; }
.pase-fila-premium { color: #ffd966; }
.pase-tira { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding: 2px 4px 8px; scroll-snap-type: x proximity; }
.pase-col { flex: none; width: 108px; display: grid; grid-template-rows: 1fr 1fr 28px; gap: 8px; scroll-snap-align: center; }
.pase-col.hoy .pase-num { color: #fff; text-shadow: 0 0 8px #ffd24a; }
.pase-col.hoy .pase-casilla:not(.rec) { border-color: #f1cf79; }
.pase-col.final { width: 124px; }
.pase-col.final .pase-casilla { border-color: #e8b93f; box-shadow: 0 0 14px rgba(255,200,70,.35); }
.pase-col.futuro .pase-casilla { opacity: .62; }
.pase-casilla { position: relative; min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 6px; border-radius: 12px; background: linear-gradient(#32261a, #231a11); border: 2px solid #5b4630; cursor: default; box-sizing: border-box; }
.pase-casilla.premium { background: linear-gradient(#3c2c18, #271b0d); border-color: #8a6a2a; }
.pase-casilla img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 2px 4px #000); }
.pase-ico-inv { display: flex; align-items: center; justify-content: center; height: 56px; }
.pase-trio { display: flex; align-items: center; justify-content: center; height: 56px; }
.pase-trio img { width: 30px; height: 30px; margin: 0 -3px; filter: drop-shadow(0 2px 3px #000); }
.pase-emoji { font-size: 40px; line-height: 56px; height: 56px; filter: drop-shadow(0 2px 3px #000); }
.pase-txt-casilla { font-size: 11px; line-height: 1.2; text-align: center; color: #d9c79d; max-height: 2.4em; overflow: hidden; }
.pase-etq { position: absolute; right: 8px; top: 52px; font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000, 0 0 4px #000; }
.pase-mas { position: absolute; left: 6px; top: 6px; background: #7a3fc2; color: #fff; font-size: 11px; font-weight: bold; padding: 1px 6px; border-radius: 8px; }
.pase-cand { position: absolute; right: 6px; top: 4px; font-style: normal; font-size: 16px; filter: drop-shadow(0 1px 2px #000); }
.pase-casilla.prem-bloq { cursor: pointer; } .pase-casilla.prem-bloq img, .pase-casilla.prem-bloq .pase-emoji { opacity: .7; }
.pase-casilla.disp { cursor: pointer; border-color: #f1cf79; animation: paseLate 1.4s ease-in-out infinite; }
.pase-casilla.disp:hover { transform: scale(1.05); }
@keyframes paseLate { 0%, 100% { box-shadow: 0 0 0 rgba(255,210,90,0); } 50% { box-shadow: 0 0 16px rgba(255,210,90,.75); } }
.pase-casilla.rec { opacity: .55; }
.pase-casilla.rec::after { content: '✓'; position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; background: #3fae4c; color: #fff; font-weight: bold; font-size: 15px; }
.pase-num { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #8c7c5f; }
.pase-num.ok { color: #ffe08a; }
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  #pase-overlay { padding: 4px; }
  .pase-escena { width: 100%; height: 100%; max-height: 100%; border-radius: 10px; }
  .pase-cab { padding: 5px 10px; gap: 6px; flex-wrap: nowrap; }
  .pase-tit b { font-size: 14px; } .pase-tit small { font-size: 11px; }
  .pase-btn { padding: 6px 10px; font-size: 12px; } .pase-badge-prem { font-size: 11px; padding: 5px 8px; } .pase-cerrar { width: 32px; height: 32px; }
  .pase-cuerpo { flex: 1; padding: 6px 4px 6px 8px; gap: 6px; }
  .pase-filas { width: 52px; font-size: 10px; grid-template-rows: 1fr 1fr 22px; gap: 5px; }
  .pase-tira { gap: 5px; padding-bottom: 4px; }
  .pase-col { width: 84px; grid-template-rows: 1fr 1fr 22px; gap: 5px; } .pase-col.final { width: 96px; }
  .pase-casilla { min-height: 0; padding: 4px 3px; gap: 1px; border-radius: 9px; }
  .pase-casilla img { width: 38px; height: 38px; } .pase-ico-inv { height: 38px; transform: scale(.68); margin-bottom: 10px; } .pase-trio { height: 38px; } .pase-trio img { width: 22px; height: 22px; } .pase-emoji { font-size: 28px; line-height: 38px; height: 38px; }
  .pase-txt-casilla { font-size: 9px; max-height: 2.4em; } .pase-etq { top: 34px; right: 5px; font-size: 11px; } .pase-cand { font-size: 12px; right: 3px; top: 2px; }
  .pase-num { font-size: 12px; }
}

/* Títulos de perfil */
.titulo-perfil { display:inline-block; margin-left:6px; padding:1px 7px; border:1px solid #8a6d3b; border-radius:10px; background:rgba(212,169,90,.12); color:#e6c984; font-size:11px; font-weight:normal; letter-spacing:.2px; vertical-align:middle; }
.perfil-titulo { margin:2px 0 4px; }
.perfil-titulo .titulo-perfil { margin-left:0; font-size:12px; }
.titulo-fila { padding:10px 12px; border:1px solid #4a3a22; border-radius:8px; background:#1f1710; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.titulo-fila .titulo-perfil { margin-left:0; font-size:13px; }
.titulo-fila-como { color:#a89676; font-size:12px; text-align:right; }
.titulo-fila.elegido { border-color:#f1cf79; background:#2b2113; }
.titulo-fila.bloqueado { cursor:default; opacity:.6; }

.titulo-seccion { margin-top: 10px; padding: 4px 2px; font-weight: bold; color: #e8c872; border-bottom: 1px solid rgba(232,200,114,.35); }
.dif { font-size: 0.7em; padding: 1px 6px; border-radius: 8px; margin-left: 6px; vertical-align: middle; font-weight: bold; color: #111; }
.dif-normal { background: #cfcab9; } .dif-epico { background: #e8c872; } .dif-mitico { background: #e8924a; } .dif-legendario { background: #d9534f; color: #fff; }

/* Modelo D (fuego): color del título según su rareza */
.titulo-perfil.tit-normal { color:#e9e4d6; border-color:#8b887c; background:rgba(233,228,214,.08); }
.titulo-perfil.tit-epico { color:#ffd166; border-color:#b8923a; background:rgba(255,209,102,.1); text-shadow:0 0 6px rgba(255,179,0,.4); }
.titulo-perfil.tit-mitico { color:#ff8a3d; border-color:#c4621f; background:rgba(255,138,61,.1); text-shadow:0 0 8px rgba(255,90,0,.65); }
.titulo-perfil.tit-legendario { color:#fff4d6; border-color:#ff6a00; background:rgba(255,80,0,.14); animation:titulo-llama 1.4s ease-in-out infinite; }
@keyframes titulo-llama {
  0%,100% { text-shadow:0 0 6px #ff6a00, 0 -4px 10px #ff3d00, 0 -8px 16px #c40000; box-shadow:0 0 6px rgba(255,90,0,.5); }
  50% { text-shadow:0 0 10px #ffb300, 0 -6px 14px #ff6a00, 0 -12px 22px #ff1a00; box-shadow:0 0 12px rgba(255,140,0,.8); }
}

/* ===== Menú de Títulos ===== */
.hub-titulos .contenido { display:flex; flex-direction:column; min-height:0; }
.hub-cabecera { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.hub-cabecera h2 { flex:0 0 auto; }
.hub-contador { font-size:14px; opacity:.75; font-weight:normal; }
.hub-busqueda { flex:1 1 180px; min-width:140px; padding:7px 10px; border-radius:8px; border:1px solid #5a4630; background:#1d1610; color:#e6d8b8; }
.hub-menu { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; border-bottom:1px solid #4a3a28; scrollbar-width:thin; }
.hub-tab { flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid #5a4630; border-bottom:0; border-radius:10px 10px 0 0; background:#2a2016; color:#cdbb97; cursor:pointer; white-space:nowrap; font-size:13px; }
.hub-tab.activa { background:linear-gradient(#5b4222,#3a2a17); color:#ffe2a0; border-color:#c79a4a; box-shadow:0 -2px 10px rgba(255,190,80,.25); }
.hub-tab-ico { font-size:16px; }
.hub-tab-n { font-size:11px; opacity:.7; background:rgba(0,0,0,.35); padding:1px 6px; border-radius:8px; }
.hub-filtros { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:10px 0; }
.hub-sep { width:1px; height:20px; background:#5a4630; margin:0 4px; }
.hub-chip { padding:4px 11px; border-radius:14px; border:1px solid #5a4630; background:#241a11; color:#cdbb97; cursor:pointer; font-size:12px; }
.hub-chip.activa { background:#e8c872; color:#2a1c08; border-color:#e8c872; font-weight:bold; }
.hub-lista { flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; align-content:start; padding:2px 2px 10px; }
.hub-card { padding:10px 12px; border:1px solid #4a3a28; border-radius:10px; background:#241a11; display:flex; flex-direction:column; gap:6px; }
.hub-card.ganado { border-color:#8a6d3b; background:linear-gradient(#33261a,#241a11); cursor:pointer; }
.hub-card.bloqueado { opacity:.85; }
.hub-card.elegido { box-shadow:0 0 0 2px #e8c872; }
.hub-card-top { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.hub-card-top .titulo-perfil { margin-left:2px; font-size:13px; }
.hub-card-como { font-size:12.5px; color:#c9b48f; line-height:1.35; flex:1; }
.hub-card-pie { font-size:11px; opacity:.75; }
.hub-barra { height:8px; border-radius:6px; background:#120d08; border:1px solid #4a3a28; overflow:hidden; }
.hub-barra > div { height:100%; background:linear-gradient(90deg,#c4621f,#ffd166); }

.hub-equipar { margin-top:2px; align-self:flex-start; padding:4px 12px; border-radius:8px; border:1px solid #c79a4a; background:linear-gradient(#5b4222,#3a2a17); color:#ffe2a0; cursor:pointer; font-size:12px; }
.hub-equipar:hover { filter:brightness(1.2); }

/* Menú de Títulos: ilustración de comandante de fondo, más intensa cuanto más rara */
.hub-titulos { background-image: linear-gradient(rgba(20,14,8,.88), rgba(20,14,8,.94)), url('images/portada/hero.webp'); background-size: cover; background-position: center top; }
.hub-card { position:relative; overflow:hidden; }
.hub-card[style*="--arte"] { background-image: linear-gradient(90deg, #241a11 38%, rgba(36,26,17,.35) 100%), var(--arte); background-size: cover, 62% auto; background-repeat:no-repeat; background-position: center, right 20%; }
.hub-card.ganado[style*="--arte"] { background-image: linear-gradient(90deg, #33261a 38%, rgba(51,38,26,.3) 100%), var(--arte); }
.hub-card.bloqueado[style*="--arte"] { filter: saturate(.7); }
.hub-card.rz-epico { border-left:3px solid #ffd166; }
.hub-card.rz-mitico { border-left:3px solid #ff8a3d; box-shadow: inset 0 0 18px rgba(255,120,40,.08); }
.hub-card.rz-legendario { border-left:3px solid #ff4d1f; box-shadow: inset 0 0 26px rgba(255,80,20,.16), 0 0 10px rgba(255,80,20,.12); }
.hub-card.rz-legendario[style*="--arte"] { background-size: cover, 70% auto; }
.hub-lista { grid-auto-rows: max-content; }
.hub-card { min-height: 104px; }
.hub-card[style*="--arte"] { background-image: linear-gradient(90deg, #241a11 45%, rgba(36,26,17,.45) 100%), var(--arte); }
.hub-card.ganado[style*="--arte"] { background-image: linear-gradient(90deg, #33261a 45%, rgba(51,38,26,.4) 100%), var(--arte); }
.hub-card[style*="--arte"], .hub-card.rz-legendario[style*="--arte"] { background-size: cover, 78% auto; background-position: center, right -24px top -42px; }

/* ---- Puntero medieval: guantelete de acero (normal) y guantelete dorado (sobre lo que se puede pulsar) ---- */
html, body { cursor: url('images/cursor/mano.png') 10 2, auto; }
a, button, select, summary, label, [onclick], [role="button"], input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"], input[type="range"], .hub-card.ganado {
  cursor: url('images/cursor/mano-activa.png') 10 2, pointer !important;
}
input[type="text"], input[type="password"], input[type="number"], textarea { cursor: text; }
button:disabled, button.inactivo { cursor: url('images/cursor/mano.png') 10 2, not-allowed !important; }
/* Ilustraciones propias de los títulos (horizontales): ocupan la tarjeta entera, con el sujeto a la derecha */
.hub-card[style*="images/titulos"], .hub-card.rz-legendario[style*="images/titulos"] { background-size: cover, cover; background-position: center, center right; }
/* Ilustraciones propias de títulos: más luminosas (el degradado oscuro solo cubre la parte del texto) */
.hub-card[style*="images/titulos"], .hub-card.ganado[style*="images/titulos"] { background-image: linear-gradient(90deg, rgba(20,14,9,.80) 0%, rgba(20,14,9,.45) 50%, rgba(20,14,9,.05) 100%), var(--arte); }
.hub-card[style*="images/titulos"] { filter: none; text-shadow: 0 1px 3px rgba(0,0,0,.9); }


/* ===== MODO PREMIUM — solo cosmético (marcos de retrato, color de nombre, insignia) ===== */
.foto-premium img { border-color: #f2c14e !important; box-shadow: 0 0 10px rgba(242,193,78,.5); }
/* Colores de nombre por rareza. Normal y Épico: color liso; Mítico: resplandor fuerte; Legendario: efectos animados */
.nombre-premium-plata { color: #dfe4ec !important; }
.nombre-premium-celeste { color: #8fd6ff !important; text-shadow: 0 0 6px rgba(110,190,255,.4); }
.nombre-premium-dorado { color: #ffd76a !important; text-shadow: 0 0 8px rgba(255,200,80,.55); }
.nombre-premium-esmeralda { color: #6fe3a0 !important; text-shadow: 0 0 8px rgba(80,220,140,.5); }
.nombre-premium-violeta { color: #c39bff !important; text-shadow: 0 0 8px rgba(170,120,255,.55); }
.nombre-premium-ambar { color: #ff9c3d !important; text-shadow: 0 0 10px rgba(255,120,20,.75), 0 0 18px rgba(255,90,0,.4); }
.nombre-premium-rubi { color: #ff6b81 !important; text-shadow: 0 0 10px rgba(255,50,80,.75), 0 0 18px rgba(220,20,60,.4); }
.nombre-premium-llama { color: #fff4d6 !important; animation: titulo-llama 1.4s ease-in-out infinite; }
.nombre-premium-aurora { background: linear-gradient(90deg,#6ff2c0,#7fb4ff,#c39bff,#ff9ae0,#6ff2c0); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: nombre-aurora 4s linear infinite; filter: drop-shadow(0 0 5px rgba(160,180,255,.55)); }
.nombre-premium-tormenta { color: #d9ecff !important; animation: nombre-tormenta 1.8s ease-in-out infinite; }
@keyframes nombre-aurora { to { background-position: 250% 0; } }
@keyframes nombre-tormenta { 0%,100% { text-shadow: 0 0 6px #3d8bff, 0 0 14px #1f5fd8; } 45% { text-shadow: 0 0 6px #3d8bff, 0 0 14px #1f5fd8; } 50% { text-shadow: 0 0 4px #fff, 0 0 20px #9ccaff, 0 0 34px #3d8bff; } 55% { text-shadow: 0 0 6px #3d8bff, 0 0 14px #1f5fd8; } 70% { text-shadow: 0 0 4px #fff, 0 0 18px #9ccaff; } }
.premium-rareza { margin: 6px 0; }
.premium-rareza-t { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: bold; }
.rz-normal { color: #cfcab9; } .rz-epico { color: #e8c872; } .rz-mitico { color: #e8924a; } .rz-legendario { color: #e0574f; }
.premium-foto { display: flex; gap: 14px; align-items: center; }
.premium-foto-vista { width: 84px; height: 84px; flex: 0 0 auto; }
.insignia-premium { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: bold; letter-spacing: .5px; color: #2a1c05; background: linear-gradient(135deg, #ffe08a, #e0a93a); vertical-align: middle; box-shadow: 0 0 8px rgba(240,190,70,.5); }
.premium-panel { background: #1a130c; border: 2px solid #8a6a2c; border-radius: 12px; padding: 20px 22px; width: 560px; max-width: 94vw; max-height: 90vh; overflow: auto; font-family: Georgia, serif; color: #e8d9b8; box-shadow: 0 0 40px rgba(240,190,70,.15); }
.premium-panel h2 { margin: 0 0 4px; color: #f1cf79; }
.premium-lista { margin: 10px 0 0; padding: 0; list-style: none; }
.premium-lista li { padding: 7px 0; border-bottom: 1px solid #3a2c1d; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.premium-lista li small { display: block; color: #a89676; font-size: 12px; margin-top: 2px; }
.premium-opciones { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 14px; }
.premium-opcion { cursor: pointer; padding: 6px 12px; border-radius: 8px; border: 2px solid #4a3c2c; background: #241a10; font-size: 13px; }
.premium-opcion.sel { border-color: #f2c14e; background: #3a2a10; }
.nombre-premium-aurora > * { -webkit-text-fill-color: initial; }

/* ===== Resumen de pueblos (Premium): pantalla completa ===== */
/* ===== Resumen de pueblos (Premium) — tema claro, a pantalla completa ===== */
#modal-resumen {
  --rp-tinta: #1a2233; --rp-suave: #667085; --rp-linea: #e4e7ec; --rp-fondo2: #f7f8fa; --rp-fondo3: #eef1f5;
  --rp-oro: #b7791f; --rp-oro-claro: #fff4d6; --rp-verde: #16a34a; --rp-verde-osc: #137a3a; --rp-rojo: #d92d20; --rp-azul: #1d4ed8;
  position: fixed; inset: 0; z-index: 1350; background: #fff; display: flex; color: var(--rp-tinta);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased;
}
#modal-resumen *, #modal-resumen *::before, #modal-resumen *::after { box-sizing: border-box; }
#modal-resumen .rp-ventana { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 0; gap: 0; color: var(--rp-tinta); background: #fff; }
#modal-resumen .rp-cabecera { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 24px 0; background: #fff; border-bottom: 1px solid var(--rp-linea); }
#modal-resumen .rp-cabecera h2 { margin: 0 0 10px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--rp-tinta); white-space: nowrap; display: flex; align-items: center; gap: 10px; }
#modal-resumen .insignia-premium { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #7a4a00; background: linear-gradient(135deg, #ffe9a8, #f5c451); border: 1px solid #e3b13c; border-radius: 999px; padding: 3px 10px; box-shadow: 0 1px 2px rgba(183,121,31,.25); }
#modal-resumen .rp-tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; align-self: flex-end; }
#modal-resumen .rp-tab { background: transparent; color: var(--rp-suave); border: none; border-bottom: 3px solid transparent; border-radius: 0; padding: 10px 16px 11px; cursor: pointer; font-size: 14px; font-weight: 600; transition: color .15s, border-color .15s, background .15s; }
#modal-resumen .rp-tab:hover { color: var(--rp-tinta); background: var(--rp-fondo2); }
#modal-resumen .rp-tab.activa { background: transparent; color: var(--rp-tinta); border-bottom-color: var(--rp-oro); }
#modal-resumen .rp-n { background: var(--rp-fondo3); color: var(--rp-suave); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; margin-left: 6px; }
#modal-resumen .rp-tab.activa .rp-n { background: var(--rp-oro-claro); color: #8a5a00; }
#modal-resumen .rp-alerta { background: var(--rp-rojo); color: #fff; }
#modal-resumen .rp-cabecera > .rp-btn { margin-bottom: 10px; }
#modal-resumen .rp-cerrar { background: var(--rp-fondo2); border: 1px solid var(--rp-linea); color: var(--rp-suave); width: 36px; height: 36px; border-radius: 10px; font-size: 22px; cursor: pointer; line-height: 1; margin-bottom: 10px; transition: all .15s; }
#modal-resumen .rp-cerrar:hover { background: #fee4e2; color: var(--rp-rojo); border-color: #fecdca; }
#modal-resumen .rp-cuerpo { flex: 1; overflow: auto; padding: 18px 24px 28px; background: #fff; }
/* Botones */
#modal-resumen .rp-btn { background: #fff; color: var(--rp-tinta); border: 1px solid #d0d5dd; border-radius: 10px; padding: 8px 14px; cursor: pointer; font-size: 13px; font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: all .15s; }
#modal-resumen .rp-btn:hover:not(:disabled) { background: var(--rp-fondo2); border-color: #98a2b3; filter: none; }
#modal-resumen .rp-btn:disabled { opacity: .45; cursor: default; }
#modal-resumen .rp-barra-herr .rp-btn, #modal-resumen .rp-grande { background: linear-gradient(180deg, #1fb457, #16a34a); color: #fff; border-color: #138a3e; text-shadow: 0 1px 0 rgba(0,0,0,.15); }
#modal-resumen .rp-barra-herr .rp-btn:hover:not(:disabled), #modal-resumen .rp-grande:hover:not(:disabled) { background: linear-gradient(180deg, #19a24f, #137a3a); border-color: #0f6a31; }
#modal-resumen .rp-grande { padding: 12px 24px; font-size: 15px; margin-top: 14px; border-radius: 12px; box-shadow: 0 4px 12px rgba(22,163,74,.28); }
/* Tarjetas de cifras */
#modal-resumen .rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
#modal-resumen .rp-kpi { background: #fff; border: 1px solid var(--rp-linea); border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
#modal-resumen .rp-kpi-ico { font-size: 24px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--rp-fondo3); flex: none; }
#modal-resumen .rp-kpi b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
#modal-resumen .rp-kpi small { display: block; color: var(--rp-suave); font-size: 12px; font-weight: 500; margin-top: 1px; }
#modal-resumen .rp-kpi.k-madera .rp-kpi-ico { background: #fdf0dc; } #modal-resumen .rp-kpi.k-plata .rp-kpi-ico { background: #e8edf3; } #modal-resumen .rp-kpi.k-acero .rp-kpi-ico { background: #dff3f0; }
#modal-resumen .rp-kpi.k-alerta { border-color: #fecdca; background: #fff5f4; } #modal-resumen .rp-kpi.k-alerta .rp-kpi-ico { background: #fee4e2; } #modal-resumen .rp-kpi.k-alerta b { color: var(--rp-rojo); }
#modal-resumen .rp-kpi.k-oro .rp-kpi-ico { background: var(--rp-oro-claro); }
/* Barra de herramientas */
#modal-resumen .rp-barra-herr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
#modal-resumen .rp-resumen { color: var(--rp-suave); font-size: 13px; flex: 1 1 260px; }
#modal-resumen .rp-chip { color: var(--rp-tinta); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
#modal-resumen .rp-chip input { accent-color: var(--rp-verde); width: 16px; height: 16px; }
#modal-resumen .rp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
#modal-resumen .rp-chip-b { background: #fff; color: var(--rp-suave); border: 1px solid #d0d5dd; border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all .15s; }
#modal-resumen .rp-chip-b:hover { border-color: #98a2b3; color: var(--rp-tinta); }
#modal-resumen .rp-chip-b.activa { background: var(--rp-tinta); color: #fff; border-color: var(--rp-tinta); }
#modal-resumen .rp-chip-b.activa .rp-n { background: rgba(255,255,255,.2); color: #fff; }
#modal-resumen .rp-input { background: #fff; color: var(--rp-tinta); border: 1px solid #d0d5dd; border-radius: 8px; padding: 7px 10px; font-size: 13px; }
#modal-resumen .rp-input:focus { outline: 2px solid #bfdbfe; border-color: #60a5fa; }
#modal-resumen input.rp-input[type=number] { width: 84px; }
/* Tablas */
#modal-resumen .rp-tabla-caja { overflow: auto; border: 1px solid var(--rp-linea); border-radius: 14px; max-width: 100%; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
#modal-resumen .rp-tabla { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; background: #fff; }
#modal-resumen .rp-tabla th { background: var(--rp-fondo2); color: #475467; padding: 10px 10px; position: sticky; top: 0; z-index: 2; white-space: nowrap; font-weight: 700; font-size: 12px; border-bottom: 1px solid var(--rp-linea); vertical-align: bottom; }
#modal-resumen .rp-tabla td { padding: 8px 10px; border-top: 1px solid #f0f2f5; text-align: center; vertical-align: middle; background: #fff; }
#modal-resumen .rp-tabla tbody tr:nth-child(even) td { background: #fbfcfd; }
#modal-resumen .rp-tabla tbody tr:hover td { background: #f1f6ff; }
#modal-resumen .rp-pueblo { text-align: left !important; position: sticky; left: 0; z-index: 3; min-width: 170px; border-right: 1px solid var(--rp-linea); }
#modal-resumen .rp-tabla th.rp-pueblo { z-index: 4; background: var(--rp-fondo2); }
#modal-resumen .rp-pueblo-n { font-weight: 700; font-size: 14px; } #modal-resumen .rp-pueblo-n a { color: var(--rp-azul); text-decoration: none; } #modal-resumen .rp-pueblo-n a:hover { text-decoration: underline; }
#modal-resumen .rp-sub { color: var(--rp-suave); font-size: 11.5px; font-weight: 400; } #modal-resumen .rp-libre { color: var(--rp-verde-osc); font-weight: 600; }
#modal-resumen .rp-rec { font-variant-numeric: tabular-nums; font-weight: 600; } #modal-resumen .rp-rec.llena { color: var(--rp-rojo); }
#modal-resumen .rp-barra { height: 5px; width: 78px; background: #e8ebf0; border-radius: 3px; margin: 4px auto 0; overflow: hidden; }
#modal-resumen .rp-barra i { display: block; height: 100%; background: var(--rp-verde); border-radius: 3px; } #modal-resumen .rp-barra i.llena { background: var(--rp-rojo); }
#modal-resumen td.r-madera .rp-barra i { background: #d97706; } #modal-resumen td.r-plata .rp-barra i { background: #64748b; } #modal-resumen td.r-acero .rp-barra i { background: #0d9488; }
#modal-resumen td.r-madera .rp-barra i.llena, #modal-resumen td.r-plata .rp-barra i.llena, #modal-resumen td.r-acero .rp-barra i.llena { background: var(--rp-rojo); }
#modal-resumen .rp-ed { min-width: 84px; white-space: nowrap; }
#modal-resumen .rp-ed-icono { font-size: 20px; line-height: 1.2; } #modal-resumen .rp-ed-nombre { font-size: 10.5px; font-weight: 600; color: var(--rp-suave); }
#modal-resumen .rp-nivel { display: inline-block; min-width: 26px; padding: 2px 6px; border-radius: 7px; background: var(--rp-fondo3); font-size: 14px; font-weight: 800; color: var(--rp-tinta); margin-right: 4px; font-variant-numeric: tabular-nums; }
#modal-resumen .rp-nivel.max { background: #dcfae6; color: var(--rp-verde-osc); }
#modal-resumen .rp-cola { display: inline-block; background: var(--rp-oro-claro); color: #8a5a00; border-radius: 7px; padding: 2px 6px; font-size: 11px; font-weight: 700; margin-right: 4px; }
#modal-resumen .rp-sube { background: #ecfdf3; color: var(--rp-verde-osc); border: 1px solid #abefc6; border-radius: 8px; cursor: pointer; padding: 3px 9px; font-size: 13px; font-weight: 700; transition: all .12s; }
#modal-resumen .rp-sube:hover:not(:disabled) { background: var(--rp-verde); color: #fff; border-color: var(--rp-verde); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(22,163,74,.3); }
#modal-resumen .rp-sube:disabled { background: #f2f4f7; color: #c0c6d0; border-color: #e4e7ec; cursor: not-allowed; }
#modal-resumen .rp-mini { background: #fff; color: #475467; border: 1px solid #d0d5dd; border-radius: 7px; padding: 3px 9px; cursor: pointer; font-size: 11px; font-weight: 600; margin-top: 4px; transition: all .12s; }
#modal-resumen .rp-mini:hover { background: var(--rp-fondo3); color: var(--rp-tinta); } #modal-resumen .rp-rojo { background: #fff5f4; border-color: #fecdca; color: var(--rp-rojo); } #modal-resumen .rp-rojo:hover { background: #fee4e2; }
#modal-resumen .rp-tabla th .rp-mini { color: var(--rp-verde-osc); border-color: #abefc6; background: #ecfdf3; } #modal-resumen .rp-tabla th .rp-mini:hover { background: var(--rp-verde); color: #fff; }
#modal-resumen .rp-reloj { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--rp-verde-osc); } #modal-resumen .rp-peligro { color: var(--rp-rojo); }
#modal-resumen .rp-nota { color: var(--rp-suave); font-size: 12.5px; margin-top: 12px; }
#modal-resumen .rp-vacio { color: var(--rp-suave); text-align: center; padding: 40px 0; font-size: 15px; }
#modal-resumen .rp-reclutar { margin-top: 20px; padding: 18px 20px; border: 1px solid var(--rp-linea); border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
#modal-resumen .rp-reclutar h3 { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--rp-tinta); } #modal-resumen .rp-reclutar h3 span { color: var(--rp-oro); }
#modal-resumen .rp-recl-controles { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
#modal-resumen .rp-troppicker { display: flex; gap: 6px; flex-wrap: wrap; max-width: 680px; }
#modal-resumen .rp-tropa { background: #fff; border: 2px solid var(--rp-linea); border-radius: 10px; padding: 3px; cursor: pointer; transition: all .12s; } #modal-resumen .rp-tropa:hover { border-color: #98a2b3; }
#modal-resumen .rp-tropa.activa { border-color: var(--rp-oro); background: var(--rp-oro-claro); box-shadow: 0 2px 8px rgba(183,121,31,.25); }
#modal-resumen .rp-modo { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; } #modal-resumen .rp-modo input[type=radio] { accent-color: var(--rp-verde); }
#modal-resumen .rp-rec-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; }
#modal-resumen .rp-rec-fila { display: flex; gap: 10px; align-items: center; background: var(--rp-fondo2); border: 1px solid var(--rp-linea); border-radius: 10px; padding: 8px 12px; font-size: 13px; cursor: pointer; } #modal-resumen .rp-rec-fila:hover { border-color: #98a2b3; } #modal-resumen .rp-rec-fila.sin { opacity: .5; }
#modal-resumen .rp-rec-fila input { accent-color: var(--rp-verde); width: 16px; height: 16px; } #modal-resumen .rp-ok { color: var(--rp-verde-osc); }
#modal-resumen .rp-tr { display: inline-block; margin: 1px 8px 1px 0; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; } #modal-resumen .rp-trs { text-align: left !important; }
#modal-resumen .rp-entrantes { margin-bottom: 16px; border: 1px solid #fecdca; border-radius: 14px; padding: 12px 14px; background: #fff5f4; } #modal-resumen .rp-entrantes h3 { margin: 0 0 8px; color: var(--rp-rojo); font-size: 15px; }
#modal-resumen .rp-entrantes .rp-tabla { border: 1px solid #fecdca; border-radius: 10px; overflow: hidden; } #modal-resumen .rp-ent td { color: #7a271a; background: #fff !important; }
#modal-resumen .rp-tipo { text-align: left !important; white-space: nowrap; font-weight: 600; } #modal-resumen .rp-acc { white-space: nowrap; }
#modal-resumen .rp-u { min-width: 56px; max-width: 90px; } #modal-resumen .rp-u .rp-ed-nombre { white-space: normal; line-height: 1.1; margin-top: 3px; }
#modal-resumen .rp-num { font-variant-numeric: tabular-nums; font-weight: 600; } #modal-resumen .rp-num.cero { color: #c0c6d0; font-weight: 400; }
#modal-resumen .rp-total td { background: var(--rp-fondo2) !important; font-weight: 700; border-top: 2px solid var(--rp-linea); } #modal-resumen .rp-total .rp-pueblo { background: var(--rp-fondo2) !important; }
#modal-resumen .rp-gran td, #modal-resumen .rp-gran .rp-pueblo { background: var(--rp-oro-claro) !important; color: #6b4300; }
#modal-resumen .rp-cola-celda { min-width: 120px; }
#modal-resumen .rp-prod, #modal-resumen .rp-pob { font-variant-numeric: tabular-nums; white-space: nowrap; }
#modal-resumen .rp-prod span { margin-right: 8px; font-weight: 600; }
@media (max-width: 760px) { #modal-resumen .rp-cabecera { padding: 10px 12px 0; gap: 8px; } #modal-resumen .rp-cuerpo { padding: 12px; } #modal-resumen .rp-pueblo { min-width: 130px; } }

/* Barracón de Élite: elección de Élite */
.elite-aviso { margin:6px 0 12px; padding:10px 14px; border:1px solid #6b5230; border-radius:8px; background:rgba(0,0,0,.25); color:#e4cf9f; }
.elite-selector-grande { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; margin-bottom:14px; }
.elite-grande { position:relative; min-height:430px; border:2px solid #6b5230; border-radius:10px; overflow:hidden; background:#1b140b; display:flex; align-items:flex-end; }
.elite-grande img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.8); transition:filter .2s, transform .4s; }
.elite-grande:not(.desactivada):hover img { filter:brightness(1); transform:scale(1.04); }
.elite-grande.desactivada img { filter:brightness(.4) grayscale(.5); }
.elite-grande:not(.desactivada):hover { border-color:#e0b85a; box-shadow:0 0 14px rgba(224,184,90,.5); }
.elite-grande-texto { position:relative; width:100%; padding:70px 16px 16px; background:linear-gradient(transparent, rgba(0,0,0,.92) 55%); color:#f1e2bd; }
.elite-grande-texto h3 { margin:0 0 4px; color:#f1d9a0; font-size:1.25rem; text-shadow:0 1px 3px #000; }
.elite-grande-texto p { margin:4px 0; font-size:.9rem; }
.elite-grande-texto .eg-unidades { color:#e0b85a; font-weight:700; }
.boton-elegir-elite { margin-top:8px; padding:8px 16px; border:1px solid #e0b85a; border-radius:6px; background:#7a4a14; color:#fff1c9; font-weight:700; cursor:pointer; }
.boton-elegir-elite:hover { background:#a0621a; }
.elite-elegida { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; min-height:340px; margin:6px 0 12px; border:2px solid #e0b85a; border-radius:10px; overflow:hidden; background:#1b140b; }
.elite-elegida img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:brightness(.85); }
.elite-elegida::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 45%, rgba(0,0,0,.9)); pointer-events:none; }
.elite-elegida-texto, .elite-elegida-reset { position:relative; z-index:1; padding:12px 16px; color:#f1e2bd; text-shadow:0 1px 3px #000; }
.elite-elegida-texto span { display:block; font-size:.8rem; color:#e0b85a; }
.elite-elegida-texto b { font-size:1.8rem; color:#f1d9a0; }
.elite-elegida-reset { text-align:right; }
.elite-elegida-reset button { padding:7px 14px; border:1px solid #c9a45a; border-radius:6px; background:rgba(60,20,10,.85); color:#ffd9a0; font-weight:700; cursor:pointer; }
.elite-elegida-reset small { display:block; margin-top:3px; color:#d8c08a; }

/* ===== Resumen estilo Tribal Wars 2 (pergamino): ventana, pestañas, filtros, tabla ===== */
#modal-resumen.tw { --rp-tinta:#2a1b0b; --rp-suave:#6a4e27; --rp-linea:#a98550; --rp-fondo2:#dcbb86; --rp-fondo3:#cfa86e; --rp-oro:#7a4a14; --rp-oro-claro:#f1d9a0; background:#bf9a5e; }
#modal-resumen.tw .rp-ventana { background:#d9b77e; }
#modal-resumen.tw .rp-cabecera { background:linear-gradient(#34455a,#1f2b3b); border-bottom:2px solid #0f1822; padding:6px 14px; gap:12px; flex-wrap:nowrap; }
#modal-resumen.tw .rp-cabecera h2 { color:#f1e6c9; margin:0; font-size:20px; text-shadow:0 1px 2px #000; flex:1; }
#modal-resumen.tw .rp-cabecera > .rp-btn { margin:0; background:#4c607a; color:#f1e6c9; border-color:#2a3a4d; }
#modal-resumen.tw .rp-cerrar { background:linear-gradient(#d33,#9a1111); color:#fff; border:2px solid #4a0a0a; border-radius:3px; width:34px; height:34px; }
#modal-resumen.tw .rp-tabs { display:flex; gap:4px; padding:5px 6px 0; background:#2a1d10; align-self:stretch; flex:none; }
#modal-resumen.tw .rp-tab { flex:1; text-align:center; background:linear-gradient(#a8844c,#8a6a38); color:#f4e3bd; border:2px solid #4a3418; border-bottom:none; border-radius:4px 4px 0 0; padding:9px 10px; font-weight:700; letter-spacing:.02em; text-shadow:0 1px 1px #000; }
#modal-resumen.tw .rp-tab:hover { background:linear-gradient(#bd975a,#9a7a44); color:#fff; }
#modal-resumen.tw .rp-tab.activa { background:linear-gradient(#e9c98f,#d5b277); color:#2a1b0b; text-shadow:none; border-bottom:none; }
#modal-resumen.tw .rp-n { background:#4a3418; color:#f4e3bd; } #modal-resumen.tw .rp-tab.activa .rp-n { background:#7a4a14; color:#fff; } #modal-resumen.tw .rp-alerta { background:#c62828; color:#fff; }
#modal-resumen.tw .rp-cuerpo { background:#d9b77e; padding:10px 14px 24px; }
#modal-resumen.tw .rp-tabla-caja { border:2px solid #8a6a38; border-radius:2px; background:#d9b77e; box-shadow:none; }
#modal-resumen.tw .rp-tabla { background:#d9b77e; }
#modal-resumen.tw .rp-tabla th { background:linear-gradient(#bd975a,#a98550); color:#2a1b0b; border-bottom:2px solid #7a5a2c; }
#modal-resumen.tw .rp-tabla td { background:#e3c590; border-top:1px solid #c4a068; color:#2a1b0b; }
#modal-resumen.tw .rp-tabla tbody tr:nth-child(even) td { background:#dbb97f; }
#modal-resumen.tw .rp-tabla tbody tr:hover td { background:#efd8a8; }
#modal-resumen.tw .rp-total td, #modal-resumen.tw .rp-total .rp-pueblo { background:#cfa86e !important; }
#modal-resumen.tw .rp-gran td, #modal-resumen.tw .rp-gran .rp-pueblo { background:#f1d9a0 !important; color:#4a2a00; }
#modal-resumen.tw .rp-btn, #modal-resumen.tw .rp-chip-b, #modal-resumen.tw .rp-input, #modal-resumen.tw .rp-mini { background:#ecd4a0; color:#2a1b0b; border:1px solid #8a6a38; }
#modal-resumen.tw .rp-chip-b.activa { background:#4a3418; color:#f4e3bd; }
#modal-resumen.tw .rp-barra-herr .rp-btn, #modal-resumen.tw .rp-grande { background:linear-gradient(#8a5a1e,#6a4010); color:#fff1c9; border-color:#3a2208; }
#modal-resumen.tw .rp-kpi, #modal-resumen.tw .rp-reclutar { background:#e3c590; border-color:#a98550; }
#modal-resumen.tw .rp-rec-fila { background:#e9d0a0; border-color:#a98550; }
#modal-resumen.tw .rp-tabla-caja .rp-pueblo a { color:#2a1b0b; font-weight:700; }
#modal-resumen.tw .rp-vacio { color:#4a3418; text-align:center; padding:24px; }
/* barra de filtros */
.tw-barra { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.tw-caja { background:#c9a569; border:2px solid #8a6a38; padding:4px 8px 8px; min-width:200px; }
.tw-caja-t { background:linear-gradient(#5f4421,#47310f); color:#f4e3bd; font-size:12px; font-weight:700; padding:3px 8px; margin:-4px -8px 6px; }
.tw-select { width:100%; background:#f1dca8; border:2px solid #7a5a2c; color:#2a1b0b; padding:6px 8px; font-size:13px; font-weight:600; }
.tw-select.tw-mini { width:auto; padding:3px 6px; }
.tw-iconos { display:flex; gap:5px; flex-wrap:wrap; }
.tw-ico { width:38px; height:34px; font-size:18px; background:linear-gradient(#e2c07c,#c49a50); border:2px solid #6a4a1c; cursor:pointer; padding:0; position:relative; }
.tw-ico:hover { background:linear-gradient(#f0d28f,#d4aa5c); }
.tw-ico.act { background:linear-gradient(#9a1a1a,#c23a2a); border-color:#f1d9a0; box-shadow:0 0 6px rgba(241,217,160,.7) inset; }
.tw-embudo { background:linear-gradient(#e0a64a,#b8761c); } .tw-embudo sup { position:absolute; top:-2px; right:2px; font-size:10px; background:#222; color:#fff; border-radius:8px; padding:0 4px; }
.tw-banda { background:linear-gradient(#34455a,#25344a); color:#f1e6c9; text-align:center; font-weight:700; font-size:13px; padding:5px; margin:6px 0; border:1px solid #111c28; }
.tw-pie { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.tw-pp { display:flex; align-items:center; gap:8px; color:#4a3418; font-size:13px; }
.tw-pags { display:flex; gap:3px; } .tw-pg { min-width:28px; height:26px; background:linear-gradient(#b08a50,#8a6a38); color:#f4e3bd; border:2px solid #4a3418; cursor:pointer; font-weight:700; }
.tw-pg.act { background:#f1dca8; color:#2a1b0b; } .tw-pg-pt { color:#4a3418; padding:0 4px; }
/* tabla de edificios */
.tw-tabla th { padding:4px 4px !important; } .tw-th-ed { cursor:pointer; } .tw-th-ed:hover { background:#e3c590 !important; }
.tw-pueblo { text-align:left !important; min-width:150px; } .tw-pueblo .rp-sub { color:#6a4e27; }
.tw-tags { white-space:nowrap; font-size:15px; } .tw-tags span { margin:0 1px; } .tw-prov { font-size:12px; color:#4a3418; white-space:nowrap; } .tw-pts { font-size:12px; color:#4a3418; }
.tw-libres { display:inline-block; min-width:58px; padding:3px 6px; border:2px solid #3a2a12; color:#fff; font-weight:800; text-shadow:0 1px 1px #000; }
.tw-libres.mucho { background:linear-gradient(#5d9a2a,#3f7a16); } .tw-libres.medio { background:linear-gradient(#d6b02a,#b08a10); } .tw-libres.poco { background:linear-gradient(#d9762a,#b0520c); } .tw-libres.cero { background:linear-gradient(#7a1010,#4a0808); }
.tw-ed { padding:3px 2px !important; }
.tw-nv { min-width:30px; height:26px; background:#f1dca8; color:#2a1b0b; border:2px solid #b08a50; font-weight:800; font-size:14px; cursor:pointer; padding:0 3px; }
.tw-nv.libre:hover { background:#fff0c4; border-color:#2e7d32; box-shadow:0 0 6px rgba(46,125,50,.6); }
.tw-nv.enobra { border-color:#7a4a14; background:#ffe08a; } .tw-nv sup { color:#7a1a1a; font-size:10px; margin-left:2px; }
.tw-nv.max { background:#b8dca0; border-color:#4f7a2a; } .tw-nv.cero { color:#8a6a38; } .tw-nv.bloq { cursor:default; opacity:.85; }
.tw-obras { white-space:nowrap; } .tw-obra { display:inline-flex; flex-direction:column; align-items:center; margin:0 2px; border:2px solid #f1d9a0; background:#2a1d10; padding:1px; } .tw-obra small { font-size:9px; color:#f1d9a0; } .tw-obra.vacia { width:34px; height:34px; background:#8a6a38; border-color:#6a4a1c; opacity:.5; }

/* ===== Grupos de pueblos ===== */
.gp-insignia { display:inline-flex; align-items:center; justify-content:center; border-radius:5px; border:1px solid rgba(0,0,0,.45); box-shadow:0 1px 2px rgba(0,0,0,.4); margin:0 1px; vertical-align:middle; line-height:1; flex:none; }
.gp-panel { background:#241a10; color:#e8d9b8; border:2px solid #f2c14e; border-radius:12px; width:min(640px, 94vw); max-height:88vh; overflow:auto; padding:16px 18px; }
.gp-cab { display:flex; justify-content:space-between; align-items:center; } .gp-cab h3 { margin:0; color:#f1cf79; }
.gp-x { width:32px; height:32px; font-size:20px; }
.gp-nota { color:#c9b48f; font-size:13px; margin:6px 0 10px; }
.gp-lista { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.gp-fila { display:flex; align-items:center; gap:10px; background:#33261a; border:1px solid #4a3c2c; border-radius:8px; padding:5px 10px; } .gp-nombre { flex:1; font-weight:700; }
.gp-mini { background:#4a3c2c; border:1px solid #6b5230; border-radius:6px; cursor:pointer; padding:3px 8px; color:#fff; }
.gp-vacio { color:#a89676; text-align:center; margin:6px 0; }
.gp-btn { background:linear-gradient(#8a5a1e,#6a4010); color:#fff1c9; border:1px solid #f2c14e; border-radius:7px; padding:8px 16px; font-weight:700; cursor:pointer; } .gp-btn.sec { background:#3a2c1d; border-color:#6b5230; } .gp-btn:disabled { opacity:.5; cursor:not-allowed; }
.gp-form { background:#2c2014; border:1px solid #6b5230; border-radius:10px; padding:10px 12px; } .gp-form h4 { margin:0 0 8px; color:#f1cf79; }
.gp-prev { display:flex; align-items:center; gap:10px; } .gp-prev input, .gp-buscar { flex:1; width:100%; background:#14100a; color:#f1e6c9; border:1px solid #6b5230; border-radius:6px; padding:7px 10px; font-size:14px; }
.gp-sub { margin:10px 0 4px; color:#f1cf79; font-weight:700; font-size:13px; } .gp-sub small { color:#a89676; font-weight:400; }
.gp-rejilla { display:flex; flex-wrap:wrap; gap:5px; } .gp-op { width:36px; height:34px; font-size:18px; background:#3a2c1d; border:2px solid #4a3c2c; border-radius:6px; cursor:pointer; padding:0; } .gp-op.sel { border-color:#f2c14e; box-shadow:0 0 6px #f2c14e; } .gp-col { border-color:rgba(0,0,0,.4); }
.gp-acc { display:flex; gap:8px; margin-top:12px; }
.gp-pueblos { max-height:260px; overflow:auto; margin-top:6px; display:flex; flex-direction:column; gap:4px; }
.gp-pueblo { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#33261a; border-radius:6px; padding:4px 10px; } .gp-pn small { color:#a89676; }
.gp-chips { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; } .gp-chip { width:32px; height:28px; font-size:15px; background:#14100a; border:2px solid #4a3c2c; border-radius:6px; cursor:pointer; padding:0; opacity:.55; } .gp-chip.on { opacity:1; border-color:#fff3; }
.fila-grupos { border-top:1px solid #4a3c2c; color:#f1cf79; font-weight:700; cursor:pointer; }
/* en el Resumen */
.tw-grupo { border-color:#2a1b0b; } .tw-grupo.act { box-shadow:0 0 0 3px #f1d9a0, 0 0 8px #fff8; } .tw-gestionar { background:linear-gradient(#e2c07c,#c49a50); } .tw-sep { width:2px; background:#8a6a38; margin:0 4px; align-self:stretch; }

/* Selector de idioma (ES / EN / RU): en la pantalla de entrada y, con la sesión iniciada, fijo en un lateral */
.lb-idiomas-fila { display: flex; gap: 6px; justify-content: center; margin: 0 0 12px; }
.lb-idioma { background: rgba(255,235,190,.08); color: #e8d9b8; border: 1px solid rgba(226,184,74,.35); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.lb-idioma.act, .lb-idioma:hover { background: linear-gradient(#e2b84a, #a87a30); color: #2a1a08; border-color: #f1cf79; font-weight: 700; }
#i18n-insignia { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 205; display: flex; flex-direction: column; gap: 3px; padding: 5px 4px; background: rgba(28,19,10,.88); border: 1px solid #b8893a; border-right: none; border-radius: 10px 0 0 10px; box-shadow: -2px 2px 10px rgba(0,0,0,.45); }
#i18n-insignia button { width: 30px; padding: 5px 0; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #e8d9b8; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
#i18n-insignia button:hover { border-color: #e2b84a; }
#i18n-insignia button.act { background: linear-gradient(#e2b84a, #a87a30); color: #2a1a08; }
@media (max-width: 700px) { #i18n-insignia { top: auto; bottom: 120px; transform: none; } }

.carta-comandante.carta-proximamente { cursor:default; filter:grayscale(.6); position:relative; }
.carta-comandante.carta-proximamente .proximamente-candado { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:46px; opacity:.85; }
.hub-card .hub-proximamente { color:#d9b45a; font-weight:bold; }

.cf-reglas { text-align:center; padding:6px 4px 14px; }
.cf-reglas-img { height:260px; border-radius:12px; background-size:cover; background-position:center; border:2px solid #6b5b45; box-shadow:0 6px 24px #000a; margin-bottom:14px; }
.cf-reglas-tit { color:#f1cf79; margin:8px 0 12px; }
.cf-fases { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-bottom:14px; }
.cf-fase-c { position:relative; background:#241a10; border:1px solid #6b5b45; border-radius:10px; padding:16px 12px 14px; display:flex; flex-direction:column; gap:6px; align-items:center; color:#e8d9b8; }
.cf-fase-n { position:absolute; top:-10px; left:-8px; width:26px; height:26px; border-radius:50%; background:#d4a95a; color:#2a2018; font-weight:bold; display:flex; align-items:center; justify-content:center; }
.cf-fase-ico { font-size:30px; }
.cf-regla-final { background:linear-gradient(90deg,#4a3410,#6b4c14,#4a3410); border:1px solid #d4a95a; border-radius:10px; padding:12px; color:#ffe9a8; font-weight:bold; font-size:16px; }
.cf-dueno { margin-top:10px; color:#c9b48f; }
.cf-proximamente { text-align:center; padding:50px 10px; color:#c9b48f; }
.cf-prox-candado { font-size:70px; }
.cf-proximamente h2 { color:#f1cf79; }

/* Tutorial guiado */
#tuto-foco { position:fixed; z-index:200000; border:3px solid #ffd35a; border-radius:10px; box-shadow:0 0 0 9999px rgba(0,0,0,.55), 0 0 18px 4px #ffd35a; pointer-events:none; transition:all .25s ease; }
#tuto-cartel { position:fixed; z-index:200001; left:50%; bottom:90px; transform:translateX(-50%); width:min(520px,94vw); background:#241a10; border:2px solid #d4a95a; border-radius:14px; padding:16px 18px; box-shadow:0 8px 30px #000c; color:#e8d9b8; }
#tuto-cartel h3 { margin:2px 0 8px; color:#f1cf79; }
#tuto-cartel p { margin:0 0 14px; line-height:1.5; }
#tuto-cartel .tuto-paso { font-size:11px; color:#a89676; text-transform:uppercase; letter-spacing:.06em; }
#tuto-cartel .tuto-botones { display:flex; justify-content:space-between; gap:10px; }
#tuto-cartel .tuto-saltar { background:none; border:1px solid #6b5b45; color:#c9b48f; border-radius:8px; padding:8px 14px; cursor:pointer; }
#tuto-cartel .tuto-siguiente { background:#d4a95a; color:#2a2018; border:none; border-radius:8px; padding:8px 22px; font-weight:bold; cursor:pointer; }

#tuto-diana { position:fixed; left:50%; top:50%; width:110px; height:110px; margin:-88px 0 0 -55px; pointer-events:none; z-index:199999; border-radius:50%; }

/* Chapa de rol y etiquetas de los comandantes */
.carta-comandante .cmd-chapa { position:absolute; left:4px; top:30px; display:flex; flex-direction:column; gap:3px; align-items:flex-start; z-index:2; }
.cmd-rol, .cmd-etq { display:inline-flex; align-items:center; gap:4px; border-radius:10px; padding:1px 6px; font-size:12px; line-height:18px; background:rgba(0,0,0,.78); border:1px solid #6b5b45; color:#f1e3c0; }
.cmd-rol { border-color:var(--c); background:color-mix(in srgb, var(--c) 40%, #000); font-weight:bold; }
.cmd-chapa-ficha { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding:8px 10px 2px; }
.cmd-chapa-ficha .cmd-rol, .cmd-chapa-ficha .cmd-etq { font-size:13px; padding:2px 10px; }
.cmd-leyenda { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px; }


/* Iconos ilustrados (menú inferior, menú circular del mapa y emoticonos de edificios/tropas/recursos) */
#dock-principal .dock-ico img { width: 34px; height: 34px; display: block; border-radius: 6px; }
@media (max-width: 700px) { #dock-principal .dock-ico img { width: 24px; height: 24px; border-radius: 4px; } }
.mapa-ico-img { width: 36px; height: 36px; display: block; }
.emo-med.emo-img { width: 1.6em; height: 1.6em; border-radius: 4px; vertical-align: -0.4em; }
.emo-tabs { grid-column: 1 / -1; display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 2px; }
.emo-tabs button { flex: 1 1 auto; background: rgba(255,235,190,.07); border: 1px solid #4a3820; border-radius: 6px; color: #e8dcc0; font: 600 11px/1.2 inherit; padding: 4px 6px; cursor: pointer; line-height: 1.2; }
.emo-panel .emo-tabs button.on { background: rgba(226,184,74,.28); border-color: #e2b84a; color: #fff3cf; }
.emo-panel button.emo-i img { width: 40px; height: 40px; border-radius: 5px; }

.ico-ed { width: 1.55em; height: 1.55em; vertical-align: -0.4em; border-radius: 4px; }
.ct-ico .ico-ed { width: 40px; height: 40px; vertical-align: middle; }
.emoji-tile .ico-ed { width: 1.4em; height: 1.4em; vertical-align: middle; }
.rp-ico .ico-rec { width: 34px; height: 34px; display: block; }

@media (max-width: 700px) { .rp-ico .ico-rec { width: 24px; height: 24px; } }
.emo-panel button img { object-fit: contain; }
.emo-panel button img { width: 34px; height: 34px; }
.emo-panel button.emo-i img { width: 40px; height: 40px; }
.emo-panel .emo-tabs button { flex: 1 1 auto; width: auto; padding: 5px 6px; line-height: 1.2; font-size: 11px; font-weight: 600; color: #e8dcc0; background: rgba(255,235,190,.07); border: 1px solid #4a3820; border-radius: 6px; cursor: pointer; }
.emo-panel .emo-tabs button.on { background: rgba(226,184,74,.28); border-color: #e2b84a; color: #fff3cf; }

/* El Camino de los Guerreros: mismo marco amarillo que Elegir Civilización */
#camino-guerreros { background: linear-gradient(180deg,#5c4429,#3a2a18) !important; color: #f1cf79 !important; font-weight: bold; border: 2px solid #d4a95a !important; border-radius: 8px; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.4), 0 0 0 1px rgba(241,207,121,.25); }
#camino-guerreros:hover { border-color: #f1cf79 !important; box-shadow: 0 3px 14px rgba(241,207,121,.35); }
#boton-civilizacion { border-color: #d4a95a; }

/* =====================================================================================================================
   MÓVIL HORIZONTAL (teléfono: pantalla baja + táctil). PC y tablet NO entran aquí, así que su interfaz queda igual.
   ===================================================================================================================== */
#dock-mas-panel, #dock-principal .dock-mas, #mapa-nombre, #aviso-girar { display: none; }
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  /* --- barra de abajo: Aldea, Mapa, Informes, Mensajes + «Más» --- */
  #dock-principal .dock-sec, #dock-principal .dock-sep { display: none !important; }
  #dock-principal .dock-caja { gap: 6px; padding: 4px 8px 3px; }
  #dock-principal .dock-btn { width: 64px; padding: 2px 0 1px; font-size: 10px; }
  #dock-principal .dock-etq { display: block; }
  #dock-principal .dock-ico { font-size: 18px; }
  #dock-principal .dock-ico img { width: 26px; height: 26px; }
  #dock-principal .dock-btn:hover { transform: none; }
  #dock-principal .dock-mas { display: flex; color: #2a1d0e; background: linear-gradient(180deg, #e0b878, #a87a30); border: 2px solid #3a2a18; border-radius: 10px; }
  #dock-principal .dock-mas.activo { outline: 2px solid #f1cf79; }
  #dock-mas-panel { display: block; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 70px); overflow: auto; pointer-events: auto;
    padding: 8px; background: linear-gradient(180deg, #3a2c1d, #2b2018); border: 2px solid #8a6d2f; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.65); }
  #dock-mas-panel.oculto { display: none; }
  .dock-mas-rejilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .dock-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px 4px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 10px; font-weight: bold; color: #2a1d0e; background: linear-gradient(180deg, #e8c98a, #b68a3e); border: 2px solid #3a2a18; }
  .dock-tile .dock-ico { font-size: 18px; line-height: 1.2; } .dock-tile .dock-ico img { width: 26px; height: 26px; display: block; }
  .dock-tile .dock-etq { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .dock-idiomas { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #5b4630; color: #e8d5a8; font-size: 11px; }
  .dock-idiomas span { margin-right: auto; }
  .dock-idioma { padding: 5px 10px; font: inherit; font-size: 11px; font-weight: 700; color: #e8d9b8; background: #241a11; border: 1px solid #6b5b45; border-radius: 6px; }
  .dock-idioma.act { background: linear-gradient(#e2b84a, #a87a30); color: #2a1a08; }
  #dock-principal .badge-dock { top: -4px; right: -2px; }

  /* --- quitar lo que sobra --- */
  #acceso-izq .acc-sonido, #btn-sonido, #i18n-insignia { display: none !important; }

  /* --- barra del pueblo (aldea): nombre pequeño y recursos con más sitio --- */
  #barra-pueblo { flex-wrap: nowrap; gap: 6px; padding: 3px 6px; margin-bottom: 4px; border-radius: 8px; position: sticky; top: 0; }
  #barra-pueblo .selector-aldea { max-width: 128px; }
  #barra-pueblo .nombre-aldea-caja { font-size: 11px; padding: 3px 6px; max-width: 86px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #barra-pueblo .flecha-aldea { padding: 2px 5px; font-size: 11px; }
  #barra-pueblo .recursos { flex: 1; display: flex; gap: 4px; min-width: 0; }
  .recurso-pill { min-width: 0; max-width: none; padding: 3px 6px; gap: 5px; border-radius: 8px; }
  .recurso-pill .rp-ico { font-size: 16px; } .recurso-pill .rp-ico img { width: 24px; height: 24px; }
  .recurso-pill .rp-num { white-space: nowrap; display: flex; align-items: baseline; gap: 4px; flex-wrap: nowrap; }
  .recurso-pill .rp-num b { font-size: 13px; } .recurso-pill .rp-num small { font-size: 10px; } .recurso-pill .rp-num em { float: none; font-size: 10px; margin: 0; margin-left: auto; }
  .recurso-pill .rp-barra { height: 3px; margin: 2px 0 0; } .recurso-pill .rp-sub { display: none; }
  .recurso-pill { flex: 0 0 auto; } #barra-pueblo .recursos > :last-child { font-size: 10px; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }

  /* --- mapa: 3 atajos a la izquierda, nombre arriba, taberna+brújula abajo --- */
  .rail-izquierdo { left: 8px; top: 52px; gap: 7px; }
  .rail-izquierdo .rail-sec, .rail-etq { display: none; }
  .rail-btn { width: 42px; height: 42px; border-width: 2px; }
  .rail-icono { font-size: 21px; }
  #mapa-nombre { display: block; position: fixed; left: 8px; top: 8px; z-index: 202; max-width: 38vw; padding: 7px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font: bold 13px Georgia, serif; color: #f1cf79; background: rgba(31,23,16,.88); border: 1px solid #6b5b45; border-radius: 10px; }
  #acceso-izq { left: 8px; bottom: 6px; gap: 6px; }
  .acc-txt { display: none; } .acc-taberna { padding: 6px 10px; } .acc-ico { font-size: 22px; } .acc-brujula { width: 42px; height: 42px; font-size: 22px; }
  .tb-badge { top: -7px; right: -7px; }
  #widget-cuenta { top: 6px !important; right: 8px !important; }
  #boton-cuenta { padding: 3px 10px 3px 4px !important; } #avatar-cuenta-cont { width: 28px !important; height: 28px !important; } #nombre-cuenta { font-size: 12px !important; }
  #reloj-mapa { top: 52px !important; bottom: auto !important; right: 8px !important; transform: scale(.62); transform-origin: top right; }
  .zoom-mapa { top: auto; bottom: 62px; right: 8px; }
  .fila-con-sidebar { padding-left: 0; }
  /* aldea: sin filtros de edificios ni recordatorio de atajos de teclado (en táctil no sirven) */
  #hub-tabs, .hub-atajos { display: none !important; }
  /* tutorial: banda baja y fina, justo encima de la barra, para no tapar el contenido */
  #tuto-cartel { left: 8px; right: 8px; transform: none; width: auto; top: auto !important; bottom: 58px !important; padding: 6px 10px; border-radius: 10px; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
  #tuto-cartel .tuto-paso { grid-column: 1; font-size: 9px; } #tuto-cartel h3 { grid-column: 1; font-size: 13px; margin: 0 0 2px; }
  #tuto-cartel p { grid-column: 1; margin: 0; font-size: 11.5px; line-height: 1.3; }
  #tuto-cartel .tuto-botones { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; gap: 6px; }
  #tuto-cartel .tuto-saltar, #tuto-cartel .tuto-siguiente { padding: 6px 12px; font-size: 12px; }
}

/* Aviso «gira el móvil» (teléfono en vertical) */
@media (orientation: portrait) and (max-width: 700px) and (pointer: coarse) {
  #aviso-girar { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; font-family: Georgia, serif; color: #e8d5a8; background: #1b140e; }
  #aviso-girar b { font-size: 20px; color: #f1cf79; }
}

/* Pantalla de entrada (login/registro) en móvil horizontal: todo en una pantalla, marca a la izquierda y formulario a la derecha */
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .lb-hero { min-height: 100dvh; padding: 8px 12px 28px; }
  .lb-hero-cont { flex-wrap: nowrap; gap: 20px; max-width: 100%; }
  .lb-marca { flex: 1 1 0; min-width: 0; }
  .lb-corona { font-size: 30px; } .lb-marca h1 { font-size: 34px; margin: 2px 0 0; } .lb-sub { font-size: 11px; letter-spacing: 5px; margin-top: 2px; }
  .lb-lema { font-size: 13px; margin: 8px auto 0; max-width: 300px; line-height: 1.3; } .lb-chips { display: none; }
  .lb-card { flex: 0 0 340px; width: 340px; padding: 10px 14px; border-radius: 12px; }
  .lb-tabs { margin-bottom: 6px; padding: 3px; } .lb-tabs button { padding: 6px; font-size: 13px; }
  .lb-card label { margin: 5px 0 2px; font-size: 11px; } .lb-card input { padding: 7px 9px; font-size: 15px; }
  .lb-cta { margin-top: 9px; padding: 9px; font-size: 15px; }
  .lb-card input[type=radio] { width: auto; padding: 0; margin: 0; }
  #lb-gen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #lb-gen > label { margin: 4px 0; } .lb-genero { margin: 2px 0 2px; gap: 12px; font-size: 13px; }
  .lb-hero { align-items: flex-start; padding-top: 6px; } .lb-card { margin-top: 0; }
  .lb-nota { display: none; } .lb-bajar { display: none; }
  .lb-idiomas-fila { margin-bottom: 4px; } .lb-idiomas-fila button { padding: 3px 9px; font-size: 12px; }
}

/* Selector de civilizaciones en móvil horizontal: 3 columnas compactas dentro de la pantalla (las tarjetas ya no se aplastan) */
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .civ-contenido { padding: 10px 14px !important; }
  .civ-contenido h1 { font-size: 17px !important; } .civ-contenido p { font-size: 11px !important; margin-top: 3px !important; line-height: 1.35 !important; }
  .civ-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; max-height: calc(100vh - 110px) !important; }
  .civ-rejilla > div { border-width: 2px !important; border-radius: 9px !important; }
  .civ-rejilla > div img { aspect-ratio: 21/9 !important; }
  .civ-rejilla > div > div { padding: 5px 8px 6px !important; } .civ-rejilla > div > div > div:first-child { font-size: 13px !important; } .civ-rejilla > div > div > div:nth-child(2) { font-size: 9px !important; }
}

.pase-i { vertical-align: middle; object-fit: contain; margin-right: 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.pase-btn .pase-i { margin-right: 6px; }
.pase-cand .pase-i { margin: 0; }
.pase-casilla.rec::after { content: ''; background: url(images/pase/check.webp) center/contain no-repeat; width: 28px; height: 28px; }

/* Móvil horizontal: pantalla de premios del cofre más compacta (cabe entera, con botón visible) */
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .celebracion-cofre-carta { max-height: 94vh; overflow-y: auto; }
  .celebracion-cofre-carta .titulo-cofre-abierto { font-size: 18px; margin: 0 0 6px; }
  .tarjetas-recompensas-cofre { gap: 8px; flex-wrap: wrap; justify-content: center; }
  .tarjeta-recompensa-cofre { min-width: 0; padding: 7px 10px; width: 118px; }
  .tarjeta-recompensa-cofre .icono-recompensa-cofre { margin-bottom: 2px; font-size: 26px; }
  .tarjeta-recompensa-cofre .icono-recompensa-cofre img, .tarjeta-recompensa-cofre .icono-recompensa-cofre > span:not(:has(img)) { max-width: 46px; max-height: 46px; }
  .tarjeta-recompensa-cofre .icono-recompensa-cofre span[style*="position:relative"] { width: 46px !important; height: 46px !important; }
  .tarjeta-recompensa-cofre .icono-recompensa-cofre img[style*="width:30px"] { width: 22px !important; height: 22px !important; }
  .tarjeta-recompensa-cofre .titulo-recompensa-cofre { font-size: 11px; }
  .tarjeta-recompensa-cofre .detalle-recompensa-cofre { font-size: 10px; }
  .celebracion-cofre-carta .btn-volver { margin-top: 8px !important; padding: 6px 16px; }
}