/* ══════════════════════════════════════════════════════════
   PTN Guide — update-v3.css (ПОЛНАЯ ВЕРСИЯ)
   Все стили для: баннеры, сетка карточек, фильтры Sinners,
   фильтры Attires/Crimebrands, страница грешника, табы
   ══════════════════════════════════════════════════════════ */

/* ── Page Banners ─────────────────────────────────────── */
.page-banner {
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(30,15,15,0.9), rgba(20,20,40,0.95));
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.page-banner__title {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.9);
    margin: 0;
    text-align: center;
}
.page-banner--sinners   { background: linear-gradient(135deg, #1a0a0a, #1a1a2e); }
.page-banner--attires   { background: linear-gradient(135deg, #1a0a1a, #2e1a0a); }
.page-banner--crimebrands { background: linear-gradient(135deg, #0a0a1e, #1e1a2e); }

/* ══════════════════════════════════════════════════════════
   SINNER GRID + CARDS (используется во всех разделах)
   ══════════════════════════════════════════════════════════ */
.sinner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    padding: 1rem 1.5rem 3rem;
}

.sinner-card {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    transition: all 0.25s ease;
    position: relative;
}
.sinner-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201,162,76,0.4);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

.sinner-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(40,40,60,0.6), rgba(20,20,35,0.8));
}
.sinner-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sinner-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(40,40,60,0.8), rgba(20,20,35,0.9));
}
.sinner-card__placeholder span {
    font-size: 2.5rem;
    font-weight: 800;
    color: rgba(255,255,255,0.12);
    font-family: 'Cinzel', serif;
}

.sinner-card__info {
    padding: 0.6rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.sinner-card__name {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sinner-card__code {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.02em;
}

/* Rank badge */
.sinner-card__rank {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 2;
}
.sinner-card__rank--s { background: linear-gradient(135deg, #c9a24c, #f5d98a); color: #1a1408; }
.sinner-card__rank--a { background: linear-gradient(135deg, #7b5ea7, #b490d9); color: #1a1028; }
.sinner-card__rank--b { background: linear-gradient(135deg, #4a7a8a, #6ab0c0); color: #0a1a20; }

/* Tendency icon on card */
.sinner-card__tendency {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

/* Rank border colors */
.sinner-card--rank-s { border-bottom: 2px solid rgba(201,162,76,0.6); }
.sinner-card--rank-a { border-bottom: 2px solid rgba(123,94,167,0.6); }
.sinner-card--rank-b { border-bottom: 2px solid rgba(74,122,138,0.6); }

/* Card animations */
.sinner-card {
    animation: fadeInUp 0.35s ease both;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   S1N-STYLE FILTERS (Sinners page)
   ══════════════════════════════════════════════════════════ */
.s1n-filters {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    max-height: 1200px;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
}
.s1n-filters.is-collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
    opacity: 0;
}
/* Filters toggle button (collapse/expand the filter panel) */
.s1n-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    color: rgba(255,255,255,0.65);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.s1n-filter-toggle:hover,
.s1n-filter-toggle.is-active { background: rgba(255,255,255,0.08); color: #fff; }
.s1n-filter-toggle__chev { transition: transform 0.2s ease; }
.s1n-filter-toggle.is-active .s1n-filter-toggle__chev { transform: rotate(180deg); }

/* Attires archive — collapsible filter panel. Kept in <head> (not the template's body <style>) so the
   collapsed state applies on first paint and there's no flash-of-expanded-filters on reload. */
.at-archive__toolbar { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0.25rem; }
.at-filter-toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; color: rgba(255,255,255,0.65); font-size: 0.82rem; font-family: inherit; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.at-filter-toggle:hover, .at-filter-toggle.is-active { background: rgba(255,255,255,0.08); color: #fff; }
.at-filter-toggle__chev { transition: transform 0.2s ease; }
.at-filter-toggle.is-active .at-filter-toggle__chev { transform: rotate(180deg); }
.at-archive__controls { overflow: hidden; max-height: 1200px; transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease; }
.at-archive__controls.is-collapsed { max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-bottom-color: transparent; opacity: 0; }
.s1n-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}
.s1n-row:last-child { margin-bottom: 0; }
.s1n-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.s1n-group--full { flex: 1; min-width: 100%; }
.s1n-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}
.s1n-opts {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
}
.s1n-opts--wrap { flex-wrap: wrap; }

/* Base button */
.s1n-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1.3;
    font-family: inherit;
}
.s1n-btn:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.9);
}
.s1n-btn.is-active {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}

/* Rank buttons */
.s1n-rank { min-width: 36px; font-weight: 800; font-size: 0.85rem; }
.s1n-rank--s { color: #c9a24c; border-color: rgba(201,162,76,0.3); }
.s1n-rank--s.is-active { background: rgba(201,162,76,0.25); border-color: #c9a24c; color: #f5d98a; }
.s1n-rank--a { color: #9b7ac5; border-color: rgba(155,122,197,0.3); }
.s1n-rank--a.is-active { background: rgba(155,122,197,0.25); border-color: #9b7ac5; color: #c4a8e8; }
.s1n-rank--b { color: #5a9aaa; border-color: rgba(90,154,170,0.3); }
.s1n-rank--b.is-active { background: rgba(90,154,170,0.25); border-color: #5a9aaa; color: #7ec0d0; }

/* Tendency icon buttons */
.s1n-icon { width: 38px; height: 38px; padding: 5px; }
.s1n-icon img {
    width: 100%; height: 100%; object-fit: contain;
    filter: brightness(0.6) grayscale(0.3);
    transition: filter 0.15s;
}
.s1n-icon.is-active img, .s1n-icon:hover img { filter: brightness(1) grayscale(0); }

/* OTHER outline variants */
.s1n-btn--outline-gold { border-color: rgba(201,162,76,0.5); color: #c9a24c; }
.s1n-btn--outline-gold.is-active { background: rgba(201,162,76,0.15); border-color: #c9a24c; }
.s1n-btn--outline { border-color: rgba(255,255,255,0.15); }

/* Search bar */
.s1n-search-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.s1n-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    max-width: 320px;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    color: rgba(255,255,255,0.5);
}
.s1n-search svg { flex-shrink: 0; }
.s1n-search input {
    flex: 1; background: none; border: none; outline: none;
    color: #fff; font-size: 0.85rem; font-family: inherit;
}
.s1n-search input::placeholder { color: rgba(255,255,255,0.3); }
.s1n-count { font-size: 0.75rem; color: rgba(255,255,255,0.35); }

/* ══════════════════════════════════════════════════════════
   FILTER BAR (Attires & Crimebrands — collapsible)
   ══════════════════════════════════════════════════════════ */
.filter-section {
    padding: 0 1.5rem;
}

.filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.filter-bar__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    max-width: 320px;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
}
.filter-bar__search-icon {
    width: 18px;
    height: 18px;
    fill: rgba(255,255,255,0.35);
    flex-shrink: 0;
}
.filter-bar__input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.85rem;
    font-family: inherit;
}
.filter-bar__input::placeholder { color: rgba(255,255,255,0.3); }

.filter-bar__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    color: rgba(255,255,255,0.6);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.filter-bar__toggle svg { fill: currentColor; }
.filter-bar__toggle:hover,
.filter-bar__toggle.is-active {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

/* Filter panels (hidden by default) */
.filters-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.filters-panel.is-open {
    max-height: 500px;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.filter-group__label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}
.filter-group__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* Filter buttons (shared with Attires/Crimebrands) */
.filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.filter-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); }
.filter-btn.is-active { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.3); }

/* Rank-colored filter buttons */
.filter-btn--rank-s { color: #c9a24c; border-color: rgba(201,162,76,0.3); }
.filter-btn--rank-s.is-active { background: rgba(201,162,76,0.2); border-color: #c9a24c; }
.filter-btn--rank-a { color: #9b7ac5; border-color: rgba(155,122,197,0.3); }
.filter-btn--rank-a.is-active { background: rgba(155,122,197,0.2); border-color: #9b7ac5; }
.filter-btn--rank-b { color: #5a9aaa; border-color: rgba(90,154,170,0.3); }
.filter-btn--rank-b.is-active { background: rgba(90,154,170,0.2); border-color: #5a9aaa; }
.filter-btn--sm { font-size: 0.7rem; padding: 0.2rem 0.5rem; }
.filter-btn--reset {
    background: rgba(180,40,40,0.2);
    border: 1px solid rgba(180,40,40,0.4);
    color: #e88;
}
.filter-btn--reset:hover { background: rgba(180,40,40,0.35); }

/* Results count */
.results-count {
    padding: 0.5rem 1.5rem;
    color: rgba(255,255,255,0.4);
    font-size: 0.78rem;
}

/* ══════════════════════════════════════════════════════════
   SINGLE SINNER PAGE — Hero, Tabs, Panels
   ══════════════════════════════════════════════════════════ */
.sinner-hero {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    overflow: hidden;
    background: linear-gradient(135deg, #0d0d1a, #1a1a2e);
}
.sinner-hero--s { background: linear-gradient(135deg, #1a1408, #2e2410 50%, #1a1a2e); }
.sinner-hero--a { background: linear-gradient(135deg, #1a1028, #2e1a40 50%, #1a1a2e); }
.sinner-hero--b { background: linear-gradient(135deg, #0a1a20, #142a35 50%, #1a1a2e); }

.sinner-hero__bg {
    position: absolute; right: 0; bottom: 0;
    height: 100%; width: auto; max-width: 45%;
    display: flex; align-items: flex-end; justify-content: flex-end;
}
.sinner-hero__portrait {
    height: 100%; width: auto; object-fit: contain;
    opacity: 0.6;
    mask-image: linear-gradient(to left, rgba(0,0,0,0.7), transparent);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.7), transparent);
}
.sinner-hero__placeholder-large {
    height: 100%; aspect-ratio: 3/4;
    display: flex; align-items: center; justify-content: center; opacity: 0.15;
}
.sinner-hero__placeholder-large span { font-size: 6rem; font-weight: 900; color: rgba(255,255,255,0.3); }
.sinner-hero__info { position: relative; z-index: 2; }
.sinner-hero__code { font-size: 0.75rem; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; }
.sinner-hero__name { font-size: 2.5rem; font-weight: 900; letter-spacing: 0.04em; margin: 0.25rem 0 0.75rem; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.sinner-hero__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Tags */
.tag {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.65rem; border-radius: 4px;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
}
.tag__icon { width: 16px; height: 16px; object-fit: contain; }
.tag--rank-s { background: rgba(201,162,76,0.2); border-color: rgba(201,162,76,0.4); color: #f5d98a; }
.tag--rank-a { background: rgba(123,94,167,0.2); border-color: rgba(123,94,167,0.4); color: #b490d9; }
.tag--rank-b { background: rgba(74,122,138,0.2); border-color: rgba(74,122,138,0.4); color: #6ab0c0; }
.tag--tendency { background: rgba(180,80,80,0.15); border-color: rgba(180,80,80,0.3); }
.tag--dmg { background: rgba(80,180,120,0.15); border-color: rgba(80,180,120,0.3); }
.tag--alignment { background: rgba(80,120,180,0.15); border-color: rgba(80,120,180,0.3); }

/* Tabs */
.sinner-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0 1.5rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sinner-tabs::-webkit-scrollbar { display: none; }
.sinner-tabs__btn {
    position: relative; padding: 0.85rem 1.25rem;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,255,255,0.4); background: none; border: none;
    cursor: pointer; white-space: nowrap; transition: color 0.2s; font-family: inherit;
}
.sinner-tabs__btn:hover { color: rgba(255,255,255,0.7); }
.sinner-tabs__btn.is-active { color: #c9a24c; }
.sinner-tabs__btn.is-active::after {
    content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
    height: 2px; background: #c9a24c;
}

/* Panels */
.sinner-panels { padding: 1.5rem; }
.sinner-panel { display: none; }
.sinner-panel.is-active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Info grid */
.sinner-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.info-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; padding: 1.25rem;
}
.info-card--full { grid-column: 1 / -1; }
.info-card__title {
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255,255,255,0.5); margin: 0 0 1rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.info-card__content p { color: rgba(255,255,255,0.7); line-height: 1.7; }

/* Stats */
.stats-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.stats-row__label { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.5); min-width: 35px; }
.stats-row__bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.stats-row__bar { height: 100%; background: linear-gradient(90deg, #c9a24c, #f5d98a); border-radius: 3px; }
.stats-row__value { font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.7); min-width: 35px; text-align: right; }

/* Details table */
.details-table { width: 100%; border-collapse: collapse; }
.details-table td { padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.82rem; }
.details-table td:first-child { color: rgba(255,255,255,0.45); font-weight: 600; width: 100px; }
.details-table td:last-child { color: rgba(255,255,255,0.8); }

/* Guide links, voicelines, gallery, lore, records */
.guide-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 1rem; margin-bottom: 0.5rem;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px; text-decoration: none; transition: all 0.2s;
}
.guide-link:hover { background: rgba(255,255,255,0.06); border-color: rgba(201,162,76,0.3); }
.guide-link__title { color: rgba(255,255,255,0.85); font-weight: 600; font-size: 0.85rem; }
.guide-link__date { color: rgba(255,255,255,0.35); font-size: 0.72rem; }

.voicelines-list { display: flex; flex-direction: column; gap: 0.75rem; }
.voiceline { padding: 0.75rem 1rem; background: rgba(255,255,255,0.03); border-left: 3px solid rgba(201,162,76,0.4); border-radius: 0 6px 6px 0; }
.voiceline__trigger { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(201,162,76,0.7); display: block; margin-bottom: 0.3rem; }
.voiceline__text { font-size: 0.85rem; color: rgba(255,255,255,0.7); line-height: 1.6; margin: 0; font-style: italic; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
.gallery-item { border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); transition: all 0.3s; }
.gallery-item:hover { border-color: rgba(201,162,76,0.4); transform: scale(1.02); }
.gallery-item img { width: 100%; height: auto; display: block; }

.lore-content, .records-content { color: rgba(255,255,255,0.75); line-height: 1.7; }
.lore-content h2, .lore-content h3 { color: rgba(255,255,255,0.9); margin-top: 1.5rem; }
.records-content blockquote { border-left: 3px solid rgba(201,162,76,0.4); padding-left: 1rem; margin: 1rem 0; color: rgba(255,255,255,0.6); font-style: italic; }

.text-muted { color: rgba(255,255,255,0.3); font-style: italic; padding: 2rem 0; text-align: center; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
/* Music player follows the sidebar: full-width once the sidebar is a drawer. */
@media (max-width: 1024px), (hover: none) {
    .pl-player { left: 0; }
}
@media (max-width: 1024px) {
    .sinner-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
}
@media (max-width: 768px) {
    .sinner-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; padding: 0.75rem 1rem 2rem; }
    .page-banner { padding: 1.5rem 1rem; }
    .page-banner__title { font-size: 1.5rem; }
    .s1n-filters { padding: 0.75rem 1rem; }
    .s1n-row { gap: 1rem; }
    .s1n-opts { flex-wrap: wrap; }
    .s1n-btn { font-size: 0.7rem; padding: 0.3rem 0.5rem; }
    .s1n-icon { width: 32px; height: 32px; padding: 4px; }
    .s1n-search-wrap { padding: 0.5rem 1rem; }
    .filter-section { padding: 0 1rem; }
    .sinner-hero { min-height: 240px; padding: 1.25rem; }
    .sinner-hero__name { font-size: 1.75rem; }
    .sinner-hero__bg { max-width: 40%; opacity: 0.5; }
    .tag { font-size: 0.65rem; padding: 0.2rem 0.5rem; }
    .sinner-tabs { padding: 0 1rem; }
    .sinner-tabs__btn { padding: 0.7rem 0.8rem; font-size: 0.7rem; }
    .sinner-panels { padding: 1rem; }
    .sinner-info-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 480px) {
    .sinner-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .s1n-search-wrap { flex-wrap: wrap; }
    .s1n-search { max-width: none; flex-basis: 100%; }
    .sinner-card__name { font-size: 0.72rem; }
    .sinner-hero__name { font-size: 1.35rem; }
    .sinner-hero__bg { display: none; }
}

/* ══════════════════════════════════════════════════════════
   HOVER ZOOM на карточках (изображение масштабируется)
   ══════════════════════════════════════════════════════════ */
.sinner-card__img {
    transition: transform 0.35s ease;
}
.sinner-card:hover .sinner-card__img {
    transform: scale(1.08);
}
/* Обрезаем overflow чтобы зум не вылезал */
.sinner-card__img-wrap {
    overflow: hidden;
}

/* ── Stat Badge (appears on card when sorting by HP/ATK/DEF/RES/Height) ── */
.sinner-card__stat-badge {
    position: absolute;
    bottom: 60px;
    right: 6px;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #f5d98a;
    background: rgba(0,0,0,0.75);
    border: 1px solid rgba(201,162,76,0.4);
    border-radius: 4px;
    z-index: 3;
    letter-spacing: 0.03em;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* ── Skills Grid (single sinner page) ─────────────────── */
.skills-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.skill-item {
    padding: 0.85rem 1rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid rgba(100,180,195,0.5);
    border-radius: 0 6px 6px 0;
}
.skill-item--mania {
    border-left-color: rgba(201,162,76,0.6);
    background: rgba(201,162,76,0.04);
}
.skill-item__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}
.skill-item__type {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(100,180,195,0.8);
    background: rgba(100,180,195,0.1);
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
}
.skill-item--mania .skill-item__type {
    color: #c9a24c;
    background: rgba(201,162,76,0.15);
}
.skill-item__name {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}
.skill-item__desc {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════
   SINGLE SINNER — s1n.gg-style layout
   ══════════════════════════════════════════════════════════ */

/* ── Hero Header ──────────────────────────────────────── */
.sh { display:flex; justify-content:space-between; align-items:center; padding:1.5rem 2rem; background:linear-gradient(135deg,#0d0d1a,#1a1a2e); border-bottom:1px solid rgba(255,255,255,0.06); }
.sh__left { display:flex; align-items:center; gap:1rem; }
.sh__portrait { width:80px; height:80px; object-fit:cover; border-radius:8px; border:2px solid rgba(255,255,255,0.1); }
.sh__portrait-ph { width:80px; height:80px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.05); border-radius:8px; font-size:2rem; font-weight:900; color:rgba(255,255,255,0.15); }
.sh__name { font-size:1.8rem; font-weight:800; margin:0; line-height:1.2; }
.sh__code { font-size:0.75rem; color:rgba(255,255,255,0.35); letter-spacing:0.05em; }
.sh__right { display:flex; align-items:center; gap:0.75rem; }
.sh__tend-icon { width:40px; height:40px; object-fit:contain; }
.sh__rank { font-size:2rem; font-weight:900; }
.sh__rank--s { color:#c9a24c; }
.sh__rank--a { color:#9b7ac5; }
.sh__rank--b { color:#5a9aaa; }

/* ── Tags ─────────────────────────────────────────────── */
.sh__tags { display:flex; flex-wrap:wrap; gap:0.4rem; padding:0.75rem 2rem; border-bottom:1px solid rgba(255,255,255,0.04); }
.ptag { font-size:0.72rem; font-weight:600; padding:0.25rem 0.65rem; border-radius:4px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.65); }
.ptag--primary { background:rgba(201,162,76,0.12); border-color:rgba(201,162,76,0.3); color:#c9a24c; }

/* ── Info 3-column layout ─────────────────────────────── */
.info-3col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.25rem; margin-bottom:1.25rem; }
.info-2col { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-bottom:1.5rem; }

/* ── Stat lines ───────────────────────────────────────── */
.stat-line { display:flex; align-items:center; gap:0.5rem; padding:0.4rem 0; border-bottom:1px solid rgba(255,255,255,0.04); font-size:0.82rem; }
.stat-line__icon { width:20px; text-align:center; font-size:0.9rem; }
.stat-line__label { flex:1; color:rgba(255,255,255,0.6); }
.stat-line__vals { text-align:right; color:rgba(255,255,255,0.9); }
.stat-line__min { color:rgba(255,255,255,0.4); }

/* ── Info box (Initial Attribute / Mania) ─────────────── */
.info-box { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:1rem 1.25rem; }
.info-box__title { font-size:0.82rem; font-weight:700; color:rgba(255,255,255,0.9); margin:0 0 0.5rem; }
.info-box--mania { background:rgba(201,162,76,0.04); border-color:rgba(201,162,76,0.15); }
.info-box--mania .info-box__title { color:#c9a24c; }
/* Removed: .hl-text span[style*="color"] !important rule — let inline styles win */

/* ── Skills + Shackles 2-column ───────────────────────── */
.skills-shackles { display:grid; grid-template-columns:1.3fr 1fr; gap:1.5rem; }
.sk-col {}

/* ── Skill Item ───────────────────────────────────────── */
.sk-item { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:1rem 1.25rem; margin-bottom:1rem; }
.sk-item--ecb { border-color:rgba(201,162,76,0.2); background:rgba(201,162,76,0.03); }
.sk-head { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.5rem; }
.sk-type { font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#63b4c3; background:rgba(100,180,195,0.12); padding:2px 8px; border-radius:3px; }
.sk-name { font-size:0.95rem; font-weight:700; color:rgba(255,255,255,0.95); }
.sk-desc { font-size:0.8rem; color:rgba(255,255,255,0.6); line-height:1.6; margin:0; }
.sk-lore { font-size:0.78rem; color:rgba(255,255,255,0.4); margin-top:0.75rem; }

/* ── LVL selector ─────────────────────────────────────── */
.sk-lvl-row { display:flex; align-items:center; gap:0.35rem; margin-bottom:0.6rem; }
.sk-lvl-label { font-size:0.65rem; font-weight:600; color:rgba(255,255,255,0.3); text-transform:uppercase; letter-spacing:0.08em; margin-right:0.3rem; }
.sk-lvls { display:flex; gap:2px; }
.sk-lvl { width:26px; height:24px; font-size:0.7rem; font-weight:600; border:none; background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.4); cursor:pointer; transition:all 0.15s; border-radius:2px; }
.sk-lvl:hover { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.7); }
.sk-lvl.is-active { background:rgba(255,255,255,0.15); color:#fff; }

/* Show Levels toggle */
.sk-details { margin-top:0.5rem; }
.sk-details summary { font-size:0.75rem; color:rgba(255,255,255,0.4); cursor:pointer; user-select:none; }
.sk-details summary:hover { color:rgba(255,255,255,0.7); }
.sk-details[open] summary { margin-bottom:0.5rem; }
.sk-lvl-content { }
.sk-lvl-panel { display:none; font-size:0.78rem; color:rgba(255,255,255,0.6); line-height:1.5; padding:0.3rem 0; }
.sk-lvl-panel.is-active { display:block; }

/* ── Shackle Items ────────────────────────────────────── */
.shackle-item { display:flex; gap:0.75rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:0.85rem 1rem; margin-bottom:0.6rem; }
.shackle-num { font-size:0.75rem; font-weight:800; color:rgba(155,122,197,0.8); background:rgba(155,122,197,0.1); width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:6px; flex-shrink:0; }
.shackle-body b { font-size:0.85rem; color:rgba(255,255,255,0.9); }
.shackle-body p { font-size:0.78rem; color:rgba(255,255,255,0.55); line-height:1.5; margin:0.25rem 0 0; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width:900px) {
    .info-3col { grid-template-columns:1fr 1fr; }
    .skills-shackles { grid-template-columns:1fr; }
    .sh { flex-direction:column; align-items:flex-start; gap:1rem; }
}
@media (max-width:600px) {
    .info-3col, .info-2col { grid-template-columns:1fr; }
    .sh__name { font-size:1.3rem; }
    .sh__portrait { width:60px; height:60px; }
    .sh__rank { font-size:1.5rem; }
}

/* ══════════════════════════════════════════════════════════
   SKILLS — s1n.gg-style with icon, energy, ordinal
   ══════════════════════════════════════════════════════════ */
.sk-item { padding: 0; overflow: hidden; }
.sk-head-row {
    display: flex; align-items: stretch;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sk-icon-box {
    flex-shrink: 0; width: 64px;
    background: rgba(0,0,0,0.4);
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
}
.sk-icon-ph {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, rgba(155,122,197,0.4), rgba(100,80,150,0.6));
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: rgba(255,255,255,0.6);
}
.sk-head-info {
    flex: 1; padding: 0.6rem 1rem;
    display: flex; flex-direction: column; justify-content: center; gap: 0.35rem;
}
.sk-name-line { display: flex; align-items: center; }
.sk-name { font-size: 0.95rem; font-weight: 700; color: #fff; }
.sk-head-right {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0 0.85rem;
    border-left: 1px solid rgba(255,255,255,0.04);
}
.sk-ord, .sk-lvl-badge {
    font-size: 0.7rem; font-family: monospace;
    padding: 3px 8px; border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.55);
    background: rgba(0,0,0,0.3);
    white-space: nowrap;
}
.sk-tags { display: flex; gap: 0.35rem; }
.sk-tag {
    font-size: 0.68rem; font-weight: 600;
    padding: 2px 7px; border-radius: 3px;
    border: 1px solid; line-height: 1.3;
}
.sk-tag--na { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }
.sk-tag--ult { background: rgba(201,162,76,0.15); border-color: rgba(201,162,76,0.4); color: #c9a24c; }
.sk-tag--energy { background: rgba(80,160,220,0.15); border-color: rgba(80,160,220,0.4); color: #50a0dc; }
.sk-tag--passive { background: rgba(120,120,120,0.15); border-color: rgba(120,120,120,0.4); color: rgba(255,255,255,0.6); }

/* LVL tabs row */
.sk-lvl-row {
    display: flex; align-items: stretch;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sk-lvl-label {
    flex-shrink: 0; padding: 0.5rem 0.75rem;
    font-size: 0.65rem; font-family: monospace;
    color: rgba(255,255,255,0.3);
    border-right: 1px solid rgba(255,255,255,0.05);
}
.sk-lvls { display: flex; flex: 1; }
.sk-lvl {
    flex: 1; padding: 0.5rem 0;
    font-size: 0.75rem; font-family: monospace;
    background: none; border: none;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.15s;
}
.sk-lvl:hover { color: rgba(255,255,255,0.7); }
.sk-lvl.is-active {
    color: #fff;
    background: rgba(255,255,255,0.06);
}

.sk-body { padding: 0.85rem 1rem; }
.sk-desc { font-size: 0.82rem; line-height: 1.6; color: rgba(255,255,255,0.65); margin: 0; }
/* Removed: .sk-desc span[style*="color"] !important rule — let inline styles win */

.sk-details { margin-top: 0.6rem; }
.sk-details summary {
    font-size: 0.72rem; color: rgba(255,255,255,0.35);
    cursor: pointer; list-style: none; padding: 0.25rem 0;
    user-select: none;
}
.sk-details summary::-webkit-details-marker { display: none; }
.sk-details summary:hover { color: rgba(255,255,255,0.7); }
.sk-levels-list { padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.04); margin-top: 0.4rem; }
.sk-lvl-line { font-size: 0.75rem; padding: 0.25rem 0; color: rgba(255,255,255,0.55); line-height: 1.5; }
.sk-lvl-num { display: inline-block; width: 50px; font-family: monospace; color: rgba(255,255,255,0.3); font-size: 0.7rem; }

/* ══════════════════════════════════════════════════════════
   GUIDES TAB — s1n.gg-style
   ══════════════════════════════════════════════════════════ */
.guides-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; }

/* LEFT: Investment panel */
.guide-invest {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    height: fit-content;
}
.invest-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.invest-row:last-child { border-bottom: none; }
.invest-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    font-size: 0.95rem;
}
.invest-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
}
.invest-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    font-family: monospace;
    margin-top: 2px;
}

/* RIGHT: Accordion */
.guide-section {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}
.guide-section summary {
    list-style: none;
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    display: flex; align-items: center; gap: 0.5rem;
}
.guide-section summary::-webkit-details-marker { display: none; }
.guide-arrow {
    display: inline-block;
    transition: transform 0.2s;
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
}
.guide-section:not([open]) .guide-arrow { transform: rotate(-90deg); }
.guide-body {
    padding: 0 1.25rem 1rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
}

/* Builds list */
.guide-builds {
    display: flex; flex-direction: column; gap: 0.5rem;
}
.build-item {
    background: rgba(255,255,255,0.03);
    border-left: 3px solid rgba(99,180,195,0.4);
    padding: 0.75rem 1rem;
    border-radius: 0 6px 6px 0;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
    font-family: monospace;
}

/* Synergies */
.guide-syn {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
}

/* Crimebrand sets grid */
.cb-sets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.cb-set {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 1rem;
}
.cb-set__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-align: center;
}
.cb-set__desc {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .guides-layout { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   ECB CARD with image slot (like s1n.gg)
   ══════════════════════════════════════════════════════════ */
.ecb-card {
    display: flex; gap: 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(201,162,76,0.2);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.ecb-img-box {
    flex-shrink: 0;
    width: 200px;
    background: linear-gradient(135deg, #9b7ac5, #6b5a99);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.ecb-img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.ecb-img-ph {
    color: rgba(255,255,255,0.9);
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1rem;
    line-height: 1.4;
}
.ecb-body {
    flex: 1;
    padding: 1rem 1.25rem;
}
.ecb-head {
    display: flex;
    flex-direction: column;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ecb-head b {
    font-size: 1rem;
    color: rgba(255,255,255,0.95);
}
.ecb-sub {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    margin-top: 2px;
}
.ecb-desc {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    margin: 0 0 0.85rem;
}
.ecb-flavor {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.ecb-flavor__label {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}
.ecb-flavor p {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    font-style: italic;
    line-height: 1.5;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════
   CRIMEBRAND SETS GRID (in Guides tab)
   ══════════════════════════════════════════════════════════ */
.cb-sets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
}
.cb-set {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
}
.cb-set__title {
    padding: 0.75rem 1rem;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}
.cb-set__imgs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    padding: 0.6rem;
}
.cb-set__img {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 7px;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
a.cb-set__img:hover {
    transform: translateY(-2px);
    border-color: rgba(201,162,76,0.6);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.cb-set__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.cb-set__img--ph {
    background: linear-gradient(135deg, rgba(155,122,197,0.3), rgba(100,80,150,0.4));
}
.cb-set__img--ph img { display: none; }
.cb-set__desc {
    padding: 0.75rem 1rem 1rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   LANGUAGE TOGGLE
   ══════════════════════════════════════════════════════════ */
.lang-toggle {
    position: fixed;
    top: 80px;
    right: 20px;
    display: flex;
    background: rgba(20,20,30,0.95);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    overflow: hidden;
    z-index: 100;
    backdrop-filter: blur(8px);
}
.lang-btn {
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    transition: all 0.15s;
    border-right: 1px solid rgba(255,255,255,0.05);
}
.lang-btn:last-child { border-right: none; }
.lang-btn:hover { color: rgba(255,255,255,0.8); }
.lang-btn.is-active {
    color: #c9a24c;
    background: rgba(201,162,76,0.1);
}

@media (max-width: 900px) {
    .ecb-card { flex-direction: column; }
    .ecb-img-box { width: 100%; height: 200px; }
    .lang-toggle { top: 60px; right: 10px; }
}

/* ══════════════════════════════════════════════════════════
   GLOBAL LANGUAGE TOGGLE (on every page)
   ══════════════════════════════════════════════════════════ */
.ptn-lang-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    background: rgba(20,20,30,0.95);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    overflow: hidden;
    z-index: 9999;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.ptn-lang-btn {
    padding: 7px 16px;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    text-decoration: none !important;
    transition: all 0.15s;
    border-right: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
}
.ptn-lang-btn:last-child { border-right: none; }
.ptn-lang-btn:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.04); }
.ptn-lang-btn.is-active {
    color: #c9a24c;
    background: rgba(201,162,76,0.12);
}

/* Old .lang-toggle from previous version — disable */
.lang-toggle { display: none !important; }

/* ══════════════════════════════════════════════════════════
   SKILL ICON & RANGE
   ══════════════════════════════════════════════════════════ */
.sk-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sk-icon-box {
    width: 64px;
    background: rgba(0,0,0,0.4);
    overflow: hidden;
}

.sk-range {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sk-range-label {
    font-size: 0.62rem;
    font-family: monospace;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.1em;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 2px;
}
.sk-range-img {
    max-height: 88px;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    object-fit: contain;
}
/* ── Range grids rendered with s1n's own cell art (cell sprites in assets/range-icons/) ── */
.sk-range-grids {
    --rg-cell: 22px;
    --rg-gap: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
}
.sk-range-grids .rg {
    display: grid;
    gap: var(--rg-gap);
}
.sk-range-grids .rg-c {
    width: var(--rg-cell);
    height: var(--rg-cell);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.sk-range-grids .rg-h { background-image: url(../range-icons/cell_hit.png); }
.sk-range-grids .rg-p { background-image: url(../range-icons/cell_caster.png); }
.sk-range-grids .rg-t { background-image: url(../range-icons/cell_target.png); }
.sk-range-grids .rg-e { background: none; }

/* ══════════════════════════════════════════════════════════
   ABILITY TAGS MODAL
   ══════════════════════════════════════════════════════════ */
.ptag { cursor: pointer; transition: opacity 0.15s; }
.ptag:hover { opacity: 0.7; }

.ptn-tags-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.ptn-tags-modal.is-open { display: flex; }
.ptn-tags-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
}
.ptn-tags-modal__box {
    position: relative;
    background: #14141e;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    max-width: 600px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.5rem 1.75rem 2rem;
    box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}
.ptn-tags-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.6rem;
}
.ptn-tags-modal__close:hover { color: #fff; }
.ptn-tags-modal__title {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ══════════════════════════════════════════════════════════
   ФИКСЫ: старая RU + мобильный переключатель
   ══════════════════════════════════════════════════════════ */
/* Прячем любые остатки старой RU-метки (некликабельной) */
body > .lang-marker,
body > .ru-marker,
body > [class*="ru-only"]:not(.ptn-lang-btn):not(.ptn-lang-toggle),
#wpadminbar ~ .lang-static {
    display: none !important;
}

/* Если где-то остался текст "RU" без класса .ptn-lang-* — спрячем по позиции */
/* Это запасной CSS-выпил, если где-то остался span с фиксированным top:20px right:20px */
body > div[style*="position:fixed"][style*="top:20px"][style*="right:20px"]:not(.ptn-lang-toggle),
body > div[style*="position: fixed"][style*="top: 20px"][style*="right: 20px"]:not(.ptn-lang-toggle) {
    display: none !important;
}

/* Мобильный переключатель */
@media (max-width: 768px) {
    .ptn-lang-toggle {
        top: auto;
        bottom: 12px;
        right: 12px;
        font-size: 0.7rem;
    }
    .ptn-lang-btn {
        padding: 5px 12px;
        font-size: 0.72rem;
    }
}
@media (max-width: 480px) {
    .ptn-lang-toggle {
        bottom: 10px;
        right: 10px;
    }
    .ptn-lang-btn {
        padding: 4px 10px;
    }
}

/* ══════════════════════════════════════════════════════════
   TIP-LINK (tooltips from <u><link=TipId=N>...</link></u>)
   ══════════════════════════════════════════════════════════ */
.tip-link {
    color: rgba(255,255,255,0.95);
    border-bottom: 1px dashed rgba(255,255,255,0.35);
    padding: 0 2px;
    cursor: help;
    transition: color 0.15s, border-color 0.15s;
}
.tip-link:hover {
    color: #c9a24c;
    border-bottom-color: #c9a24c;
}

/* ══════════════════════════════════════════════════════════
   ECB ADDITIONAL LEVELS (LVL 2/3 lines when unique upgrade)
   ══════════════════════════════════════════════════════════ */
.ecb-levels {
    margin-top: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(255,255,255,0.07);
}
.ecb-lvl-line {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.35rem 0;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
}
.ecb-lvl-num {
    flex-shrink: 0;
    background: rgba(201,162,76,0.15);
    color: #c9a24c;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: 3px;
    margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════
   AGGRESSIVE REMOVAL OF OLD STATIC RU ELEMENT
   ══════════════════════════════════════════════════════════ */
/* Hide any RU/Russian indicator that isn't our toggle */
*:not(.ptn-lang-btn):not(.ptn-lang-toggle):not(option) {
    /* leave style intact; visibility handled via specific rules */
}

/* Match common patterns of static language indicators near the search bar / header */
header .lang-current,
header .current-language,
header .lang-display,
.site-header .lang-current,
.site-header .lang-flag,
.wpml-ls-current-language,
.weglot-flags > a:not([class*="active"]),
.gtranslate_wrapper,
.qtranxs-lang-current,
.menu .current-lang,
nav .lang-static,
.search-form ~ .lang-indicator,
.search-form ~ .lang-label,
.searchform ~ .lang-current,
.search-bar ~ .lang-indicator {
    display: none !important;
}

/* Generic catch-all for inline RU markers (very strict — must be a leaf span with exact "RU" text) */
/* This is handled via JS too for stubborn elements */

/* ══════════════════════════════════════════════════════════
   FIX: TIP-LINK — remove dashed underline + question mark cursor
   ══════════════════════════════════════════════════════════ */
.tip-link {
    color: rgba(255, 255, 255, 0.92) !important;
    border-bottom: none !important;
    padding: 0 !important;
    cursor: text !important;
    font-style: normal !important;
}
.tip-link:hover {
    color: rgba(255, 255, 255, 0.92) !important;
    border-bottom: none !important;
}

/* ══════════════════════════════════════════════════════════
   ECB EXTRA LINE (when LVL 2 & LVL 3 merged into one "X / Y" line)
   ══════════════════════════════════════════════════════════ */
.ecb-extra-line {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.55;
    margin: 0.6rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.07);
}

/* ══════════════════════════════════════════════════════════
   TOOLTIP TAG DEFINITION (auto-injected once per page)
   ══════════════════════════════════════════════════════════ */
.tag-def {
    margin: 0.85rem 0 0;
    padding: 0.7rem 0.9rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(201, 162, 76, 0.5);
    border-radius: 0 4px 4px 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.55;
}
.tag-def__name {
    color: #c9a24c;
    font-weight: 700;
    margin-right: 0.3rem;
}
.tag-def + .tag-def {
    margin-top: 0.5rem;
}

/* ══════════════════════════════════════════════════════════
   FIX: UNIFORM MUTED TEXT COLOR
   Все описания (Info, Mania, Skills, ECB, Shackles) — единый цвет
   Подсветки (числа, типы урона) остаются яркими, контраст усиливается
   ══════════════════════════════════════════════════════════ */
:root {
    --ptn-text-muted: rgba(255, 255, 255, 0.78);
}

/* Uniform muted text color for body content; inline span styles for highlights win naturally */
.info-box p,
.info-box .hl-text,
.sk-desc,
.sk-lvl-line,
.shackle-body p,
.shackle-body,
.ecb-desc,
.ecb-flavor p,
.tag-def,
.guide-body,
.guide-syn,
.cb-set__desc,
.build-item {
    color: var(--ptn-text-muted);
}

/* If something elsewhere forces white, gently nudge to muted */
.sinner-panels p,
.sinner-panels .lore-content,
.sinner-panels .lore-content p {
    color: var(--ptn-text-muted);
}

/* Headers and labels stay slightly more muted */
.info-card__title,
.ecb-sub,
.ecb-flavor__label,
.tag-group__label,
.invest-label {
    /* keep their existing colors */
}

/* Highlighted spans (numbers + damage types) — inline style takes precedence */
/* No override needed; the `<span style="color:...">` from PHP/JS handles it */
/* ═══════════════════════════════════════════════════════════════
   Mobile language toggle position fix
   На мобильных переносит EN/RU кнопку из правого нижнего угла
   (где она наезжала на музыкальный плеер) в правый верхний —
   рядом с поисковой строкой топбара. Дизайн самой кнопки не меняется.

   Добавить в конец /assets/css/update-v3.css
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ptn-lang-toggle {
        top: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 1001;
        box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    }
    .ptn-lang-btn {
        padding: 4px 9px !important;
        font-size: 0.72rem !important;
    }
    /* Резервируем место под язык-свитч в шапке.
       .tb имеет flex layout с padding 0 20px, увеличиваем правый отступ
       чтобы поисковая строка укоротилась и не лезла под кнопку. */
    .tb {
        padding-right: 105px !important;
    }
}

/* Совсем узкие экраны — сделаем кнопку ещё компактнее */
@media (max-width: 380px) {
    .ptn-lang-btn {
        padding: 4px 7px !important;
        font-size: 0.68rem !important;
    }
    .tb {
        padding-right: 90px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   CHIEF TERMINAL — sidebar link
   ═══════════════════════════════════════════════════════════════ */
.sb-terminal {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 12px 6px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.15s;
    min-width: 0;
}
.sb-terminal:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
    border-color: rgba(239,68,68,0.3);
}
.sb-terminal.is-logged {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.25);
    color: rgba(255,255,255,0.92);
}
.sb-terminal.is-logged:hover {
    background: rgba(239,68,68,0.15);
}
.sb-terminal__avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.78rem;
    flex-shrink: 0;
    text-transform: uppercase;
}
.sb-terminal.is-logged .sb-terminal__avatar {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #fff;
}
.sb-terminal__label {
    font-size: 0.82rem; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   MUSIC / PLAYLIST PAGE — moved here from archive-playlist.php's inline <style>
   so it loads in <head> (before content) and there's no flash of unstyled list on load.
   ══════════════════════════════════════════════════════════ */
.pl-archive { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem 8rem; color: rgba(255,255,255,0.85); }
.page-banner--music { margin-bottom: 0.5rem; }
.pl-empty { text-align: center; padding: 4rem 1rem; color: rgba(255,255,255,0.5); }
.pl-controls { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; padding: 1rem 0 1.5rem; }
.pl-search-wrap { flex: 1 1 220px; min-width: 0; position: relative; display: flex; align-items: center; }
.pl-search-ico { position: absolute; left: 12px; width: 16px; height: 16px; fill: rgba(255,255,255,0.35); pointer-events: none; }
.pl-input { width: 100%; padding: 0.6rem 0.9rem 0.6rem 2.1rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #fff; font-size: 0.92rem; }
.pl-input::placeholder { color: rgba(255,255,255,0.35); }
.pl-input:focus { outline: none; border-color: #ef4444; }
.pl-sort { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.pl-sort__label { font-size: 0.72rem; color: rgba(255,255,255,0.4); letter-spacing: 0.06em; }
.pl-sort__pills { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pl-sort-pill { padding: 0.35rem 0.75rem; font-size: 0.78rem; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; cursor: pointer; transition: all 0.12s; }
.pl-sort-pill:hover { color: #fff; }
.pl-sort-pill.is-active { background: rgba(239,68,68,0.18); color: #ef4444; border-color: rgba(239,68,68,0.45); }
.pl-list { display: flex; flex-direction: column; gap: 0.7rem; }
.pl-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; overflow: hidden; transition: border-color 0.15s; }
.pl-card:hover { border-color: rgba(255,255,255,0.12); }
.pl-card.is-hidden { display: none; }
.pl-card--favs { border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.04); }
.pl-card--favs:hover { border-color: rgba(239,68,68,0.4); }
.pl-card__head { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem; width: 100%; background: transparent; border: none; cursor: pointer; color: inherit; text-align: left; }
.pl-card__head:hover { background: rgba(255,255,255,0.02); }
.pl-card__cover { width: 60px; height: 60px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; }
.pl-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-card__cover-ph { font-size: 1.6rem; opacity: 0.4; }
.pl-card__cover--favs { background: rgba(239,68,68,0.18); }
.pl-card__cover--favs svg { width: 32px; height: 32px; fill: #ef4444; }
.pl-card__info { flex: 1; min-width: 0; }
.pl-card__title { color: #fff; font-size: 1.02rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card__meta { color: rgba(255,255,255,0.5); font-size: 0.78rem; margin-top: 2px; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pl-card__chev { color: rgba(255,255,255,0.4); font-size: 1.1rem; transition: transform 0.2s; flex-shrink: 0; }
.pl-card.is-open .pl-card__chev { transform: rotate(180deg); }
.pl-card__body { padding: 0 1rem 0.9rem; }
.pl-card__desc { color: rgba(255,255,255,0.7); font-size: 0.88rem; line-height: 1.55; margin: 0.4rem 0 0.8rem; padding: 0.5rem 0.7rem; background: rgba(255,255,255,0.02); border-left: 2px solid rgba(239,68,68,0.4); border-radius: 0 4px 4px 0; }
.pl-card__empty { color: rgba(255,255,255,0.4); font-style: italic; padding: 1rem; text-align: center; }
.pl-favs-toolbar { display: flex; justify-content: flex-end; padding: 0.2rem 0 0.4rem; }
.pl-favs-clear { background: transparent; border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.55); padding: 0.3rem 0.7rem; font-size: 0.78rem; border-radius: 4px; cursor: pointer; transition: all 0.12s; }
.pl-favs-clear:hover { color: #ef4444; border-color: rgba(239,68,68,0.4); }
.pl-tracklist { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.pl-track { display: grid; grid-template-columns: 36px 36px 1fr auto auto; gap: 0.7rem; align-items: center; padding: 0.55rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.12s; }
.pl-track:hover { background: rgba(255,255,255,0.03); }
.pl-track__num { color: rgba(255,255,255,0.4); font-size: 0.85rem; text-align: center; font-variant-numeric: tabular-nums; }
.pl-track__play { width: 34px; height: 34px; border: none; color: #fff; border-radius: 50%; cursor: pointer; padding: 0; background: radial-gradient(125% 125% at 50% 22%, #ff6a6a 0%, #ef4444 48%, #d22f2f 100%); display: flex; align-items: center; justify-content: center; transition: transform 0.18s cubic-bezier(.34,1.45,.5,1), box-shadow 0.2s ease, filter 0.2s ease; box-shadow: 0 3px 9px rgba(239,68,68,0.32), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 2px rgba(120,10,10,0.22); }
.pl-track__play:hover { background: radial-gradient(125% 125% at 50% 22%, #ff8585 0%, #f25454 48%, #db3c3c 100%); box-shadow: 0 5px 16px rgba(239,68,68,0.52), 0 0 0 4px rgba(239,68,68,0.18), inset 0 1px 0 rgba(255,255,255,0.34); }
.pl-track__play:active { box-shadow: 0 2px 6px rgba(239,68,68,0.42), inset 0 2px 4px rgba(120,10,10,0.28); }
.pl-track__play:disabled { opacity: 0.22; cursor: not-allowed; box-shadow: none; background: rgba(255,255,255,0.06); }
.pl-track__play .pl-icon { width: 13px; height: 13px; fill: #fff; pointer-events: none; }
.pl-track__play .pl-icon--play  { display: block; transform: translateX(-0.8px); }
.pl-track__play .pl-icon--pause { display: none; }
.pl-track__play.is-playing { box-shadow: 0 3px 12px rgba(239,68,68,0.45), 0 0 0 3px rgba(239,68,68,0.22), inset 0 1px 0 rgba(255,255,255,0.30); }
.pl-track__play.is-playing .pl-icon--play  { display: none; }
.pl-track__play.is-playing .pl-icon--pause { display: block; transform: none; }
.pl-track__title { color: rgba(255,255,255,0.92); font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pl-track__title small { display: block; font-size: 0.72rem; color: rgba(255,255,255,0.45); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.pl-track.is-current .pl-track__title { color: #ef4444; font-weight: 600; }
.pl-track__duration { color: rgba(255,255,255,0.4); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.pl-track__fav { width: 30px; height: 30px; background: transparent; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.12s; }
.pl-track__fav:hover { background: rgba(255,255,255,0.08); }
.pl-track__fav svg { width: 16px; height: 16px; fill: rgba(255,255,255,0.25); transition: fill 0.15s, transform 0.15s; }
.pl-track__fav:hover svg { fill: #ef4444; transform: scale(1.12); }
.pl-track__fav.is-fav svg { fill: #ef4444; }
.pl-player[hidden], .pl-card[hidden] { display: none !important; }  /* respect the hidden attr: author display: was overriding the UA [hidden] rule, flashing an empty player bar on load */
.pl-player { position: fixed; left: var(--sb-exp); right: 0; bottom: 0; z-index: 100; background: rgba(15,15,18,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,0.08); padding: 0.7rem 1.2rem; padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: minmax(180px, 1.2fr) auto minmax(220px, 1.4fr) auto; gap: 1rem; align-items: center; }
.pl-player__info { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.pl-player__cover { width: 44px; height: 44px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.pl-player__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-player__meta { min-width: 0; }
.pl-player__title { color: #fff; font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-player__sub { color: rgba(255,255,255,0.5); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-player__controls { display: flex; gap: 0.35rem; align-items: center; }
.pl-player__btn { background: transparent; border: none; color: rgba(255,255,255,0.7); cursor: pointer; padding: 6px; border-radius: 5px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; transition: all 0.12s; }
.pl-player__btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.pl-player__btn svg { width: 17px; height: 17px; fill: currentColor; }
.pl-player__btn--play { color: #fff; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(125% 125% at 50% 22%, #ff6a6a 0%, #ef4444 48%, #d22f2f 100%); box-shadow: 0 3px 10px rgba(239,68,68,0.32), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 2px rgba(120,10,10,0.22); transition: transform 0.18s cubic-bezier(.34,1.45,.5,1), box-shadow 0.2s ease, filter 0.2s ease; }
.pl-player__btn--play:hover { background: radial-gradient(125% 125% at 50% 22%, #ff8585 0%, #f25454 48%, #db3c3c 100%); box-shadow: 0 5px 16px rgba(239,68,68,0.50), 0 0 0 4px rgba(239,68,68,0.16), inset 0 1px 0 rgba(255,255,255,0.34); }
.pl-player__btn--play:active { box-shadow: 0 2px 7px rgba(239,68,68,0.42), inset 0 2px 4px rgba(120,10,10,0.26); }
.pl-player__btn--play svg { width: 18px; height: 18px; fill: #fff; }
.pl-player__btn--play .pl-icon--play  { display: block; transform: translateX(-0.8px); }
.pl-player__btn--play .pl-icon--pause { display: none; }
.pl-player__btn--play.is-playing .pl-icon--play  { display: none; }
.pl-player__btn--play.is-playing .pl-icon--pause { display: block; transform: none; }
.pl-player__btn--mode { position: relative; }
.pl-player__btn--mode.is-active { color: #ef4444; background: rgba(239,68,68,0.12); }
.pl-player__btn--mode.is-active::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #ef4444; }
#pl-repeat .pl-icon--repeat-one { display: none; }
#pl-repeat[data-mode="one"] .pl-icon--repeat-all { display: none; }
#pl-repeat[data-mode="one"] .pl-icon--repeat-one { display: block; }
.pl-player__progress { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.pl-player__time { color: rgba(255,255,255,0.55); font-size: 0.72rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pl-player__bar { flex: 1; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; cursor: pointer; overflow: hidden; position: relative; }
.pl-player__bar::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.pl-player__bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ef4444, #dc2626); border-radius: 2px; transition: width 0.1s linear; }
.pl-player__vol { display: flex; align-items: center; gap: 0.4rem; }
.pl-player__vol input { width: 80px; accent-color: #ef4444; }
.pl-player__vol span { font-size: 0.95rem; opacity: 0.7; }
@media (max-width: 880px) {
    .pl-player { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 0.5rem 0.8rem; padding: 0.6rem 0.9rem; padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); }
    .pl-player__info { grid-column: 1; grid-row: 1; }
    .pl-player__controls { grid-column: 2; grid-row: 1; }
    .pl-player__progress { grid-column: 1 / -1; grid-row: 2; }
    .pl-player__vol { display: none; }
}
@media (max-width: 600px) {
    .pl-archive { padding: 0 0.8rem 9rem; }
    .pl-controls { padding: 0.7rem 0 1rem; gap: 0.7rem; }
    .pl-sort__label { display: none; }
    .pl-sort-pill { padding: 0.3rem 0.6rem; font-size: 0.72rem; }
    .pl-card__head { gap: 0.65rem; padding: 0.6rem 0.7rem; }
    .pl-card__cover { width: 48px; height: 48px; }
    .pl-card__cover--favs svg { width: 26px; height: 26px; }
    .pl-card__title { font-size: 0.95rem; }
    .pl-card__meta { font-size: 0.72rem; gap: 0.3rem; }
    .pl-card__body { padding: 0 0.7rem 0.7rem; }
    .pl-track { grid-template-columns: 28px 30px 1fr 28px; gap: 0.5rem; padding: 0.5rem 0.4rem; }
    .pl-track__num { font-size: 0.78rem; }
    .pl-track__duration { display: none; }
    .pl-track__title { font-size: 0.88rem; }
    .pl-track__play { width: 30px; height: 30px; }
    .pl-track__fav { width: 28px; height: 28px; }
    .pl-player { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 0.4rem; padding: 0.55rem 0.8rem; padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px)); }
    .pl-player__info { grid-column: 1; grid-row: 1; }
    .pl-player__cover { width: 38px; height: 38px; }
    .pl-player__title { font-size: 0.84rem; }
    .pl-player__sub { font-size: 0.72rem; }
    .pl-player__controls { grid-column: 1; grid-row: 2; justify-self: center; gap: 0.2rem; }
    .pl-player__btn { width: 36px; height: 36px; padding: 6px; }
    .pl-player__btn svg { width: 18px; height: 18px; }
    .pl-player__btn--play { width: 44px; height: 44px; box-shadow: 0 2px 7px rgba(239,68,68,0.30), inset 0 1px 0 rgba(255,255,255,0.28); }
    .pl-player__btn--play:hover { box-shadow: 0 2px 9px rgba(239,68,68,0.4), inset 0 1px 0 rgba(255,255,255,0.3); }
    .pl-player__btn--play svg { width: 20px; height: 20px; }
    .pl-player__progress { grid-column: 1; grid-row: 3; gap: 0.5rem; }
    .pl-player__time { font-size: 0.68rem; }
}
@media (max-width: 380px) {
    .pl-track { grid-template-columns: 30px 1fr 28px; }
    .pl-track__num { display: none; }
    .pl-player__controls { gap: 0.1rem; }
    .pl-player__btn { width: 34px; height: 34px; }
    .pl-player__btn--play { width: 42px; height: 42px; }
}

/* ═══════════════════ Materials (Rank-Up + Skills) ═══════════════════ */
.mat-card .mat-prevs { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.mat-prev {
    display:flex; flex-direction:column; gap:0.55rem; align-items:stretch;
    padding:0.7rem 0.6rem; cursor:pointer; text-align:left; font:inherit; color:inherit;
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
    border:1px solid rgba(255,255,255,0.07); border-radius:8px;
    transition:border-color .15s ease, background .15s ease;
}
.mat-prev:hover { border-color:rgba(200,167,78,0.55); background:rgba(255,255,255,0.055); }
.mat-prev:focus-visible { outline:2px solid var(--gold,#c8a74e); outline-offset:2px; }
.mat-prev__lbl { font-size:0.66rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.mat-prev__icos { display:flex; gap:0.5rem; }
.mat-prev__cell { display:flex; flex-direction:column; align-items:center; gap:0.22rem; flex:1; min-width:0; }
.mat-prev__cell img { width:40px; height:40px; object-fit:contain; border-radius:6px; background:rgba(0,0,0,0.25); }
.mat-prev__name { font-size:0.6rem; color:rgba(255,255,255,0.55); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

.mat-modal {
    position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:1.25rem;
    background:rgba(0,0,0,0.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    opacity:0; transition:opacity .2s ease;
}
.mat-modal[hidden] { display:none !important; }
.mat-modal.is-open { opacity:1; }
body.mat-modal-open { overflow:hidden; }
.mat-modal__panel {
    position:relative; width:100%; max-width:600px; max-height:88vh; overflow-y:auto;
    background:linear-gradient(180deg,#15151b,#101015); border:1px solid rgba(255,255,255,0.1); border-radius:12px;
    padding:1.4rem 1.5rem 1.6rem; box-shadow:0 24px 60px rgba(0,0,0,0.6);
    transform:translateY(10px) scale(0.99); transition:transform .2s ease;
}
.mat-modal.is-open .mat-modal__panel { transform:none; }
.mat-modal__close {
    position:absolute; top:0.55rem; right:0.55rem; width:34px; height:34px; border:none; border-radius:8px;
    background:rgba(255,255,255,0.08); color:#fff; font-size:1.4rem; line-height:1; cursor:pointer;
}
.mat-modal__close:hover { background:rgba(255,255,255,0.18); }
.mat-modal__close:focus-visible { outline:2px solid var(--gold,#c8a74e); outline-offset:2px; }
.mat-modal__title { margin:0 0 0.3rem; font-size:1.02rem; font-weight:700; color:#fff; letter-spacing:0.02em; }
.mat-modal__sub { font-size:0.78rem; font-weight:500; color:rgba(255,255,255,0.45); }
.mat-sec { padding:1rem 0; border-bottom:1px solid rgba(255,255,255,0.07); }
.mat-sec:last-child { border-bottom:none; padding-bottom:0.1rem; }
.mat-sec__h { font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:0.75rem; }
.mat-grid { display:grid; gap:0.85rem 0.5rem; }
.mat-grid--4 { grid-template-columns:repeat(4,1fr); }
.mat-item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.25rem; }
.mat-item__ico { width:54px; height:54px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; }
.mat-item__ico img { width:46px; height:46px; object-fit:contain; }
.mat-item__amt { font-size:0.82rem; font-weight:700; color:var(--gold,#c8a74e); }
.mat-item__name { font-size:0.62rem; line-height:1.25; color:rgba(255,255,255,0.6); }

@media (max-width:560px){
    .mat-item__ico { width:46px; height:46px; }
    .mat-item__ico img { width:40px; height:40px; }
    .mat-modal__panel { padding:1.1rem 1rem 1.3rem; }
    .mat-prev__cell img { width:36px; height:36px; }
}
@media (prefers-reduced-motion: reduce){
    .mat-modal, .mat-modal__panel { transition:none; }
}