/* =============================================================
   wiki-aurora.css — Ajustes propios de la wiki.
   El fondo animado y el componente multimedia viven en aurora.css,
   que se carga antes y lo comparten la wiki y la landing.
   ============================================================= */

/* El contenido va por encima de la capa de luz. */
.wiki-container { position: relative; z-index: 1; }
.wiki-container > * { position: relative; z-index: 1; }

/* Las tarjetas se vuelven un poco translúcidas para que el fondo respire.
   Sin `backdrop-filter`: desenfocar el fondo detrás de cada tarjeta obliga
   a recalcularlo en cada frame, y con un fondo en movimiento detrás eso
   hundía el scroll en escritorio. La translucidez sola ya da el efecto. */
.wiki-card { background-color: rgba(16, 13, 9, .8); }

/* ---------- Iconos de skill ----------
   Misma convención que el idle game: images/skill-icons/{SKILL_ID}.png.
   Ese directorio existe aparte a propósito, porque los IDs de skill y de
   item se solapan (ver su README). Mientras el icono no exista, el
   onerror marca el hueco y se ve un marco vacío en su lugar; dejar caer
   el PNG basta para que aparezca. */
.skill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(116, 109, 85, .5);
    border-radius: 5px;
    background: rgba(10, 8, 5, .6);
}
.skill-icon img { display: block; width: 32px; height: 32px; }
.skill-icon.is-empty {
    border-style: dashed;
    border-color: rgba(116, 109, 85, .35);
}
.skill-icon.is-empty::after {
    content: "\f0d0";                 /* fa-hammer: icono pendiente */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: rgba(199, 154, 69, .45);
}

/* ---------- Escalera de color y tiers de skill ----------
   Antes eran dos tablas de 13 y 16 filas: muy altas y con medio ancho
   vacío. En rejilla ocupan tres o cuatro filas y encajan con el resto. */
.pvp-ladder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
    margin: 0 0 18px;
}
.pvp-step {
    display: flex;
    align-items: baseline;
    gap: 10px;
    background: rgba(10, 8, 5, .55);
    border: 1px solid rgba(116, 109, 85, .3);
    border-left: 3px solid;
    border-radius: 6px;
    padding: 9px 12px;
}
.pvp-kills {
    color: #7d7768;
    font-size: 11.5px;
    min-width: 46px;
    text-align: right;
    flex-shrink: 0;
}
.pvp-name {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .4px;
}

.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 9px;
    margin: 0 0 18px;
}
.skill-card {
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(10, 8, 5, .55);
    border: 1px solid rgba(116, 109, 85, .3);
    border-radius: 6px;
    padding: 9px 11px;
}
.skill-meta { display: flex; flex-direction: column; min-width: 0; }
.skill-meta b {
    color: #ddca9f;
    font-size: 13.5px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.skill-meta small { color: #7d7768; font-size: 11px; margin-top: 2px; }

@media (max-width: 520px) {
    .pvp-ladder, .skill-grid { grid-template-columns: 1fr; }
}

/* ---------- Texto + media en dos columnas ---------- */
.wiki-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 8px;
}
.wiki-split > .wiki-media { margin-bottom: 0; }
.wiki-split .wiki-split-text > :first-child { margin-top: 0; }

@media (max-width: 900px) {
    .wiki-split { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Tablas en pantallas estrechas ----------
   Sin esto las tablas de horarios se apelmazan hasta ser ilegibles.
   Pasan a ser su propio contenedor con scroll horizontal. */
@media (max-width: 900px) {
    .wiki-card .wiki-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .wiki-card .wiki-table td,
    .wiki-card .wiki-table th { white-space: nowrap; }
}