/**
 * Schattenwelt – Staff: Klassen-Übersicht & -Vergleich (RK-System Skill-Caps).
 * Nur auf /staff/classes[/vergleich] geladen. Farb-Tokens/.btn-gilded kommen aus layout.css.
 */

.skc-page,
.skc-page *,
.skc-page *::before,
.skc-page *::after {
    box-sizing: border-box;
}

.skc-title {
    font-family: 'Cinzel', Georgia, serif;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    color: var(--sw-gold-bright);
    text-align: center;
    margin: 0 0 0.5rem;
}

.skc-subtitle {
    text-align: center;
    color: var(--sw-text-muted);
    font-size: 0.9rem;
    margin: 0 0 1.25rem;
}

.skc-link {
    color: var(--sw-gold);
    white-space: nowrap;
}

.skc-link:hover {
    color: var(--sw-gold-bright);
}

.skc-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin: 0 0 1rem;
    font-size: 0.82rem;
    color: var(--sw-text-muted);
}

.skc-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.skc-swatch {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 3px;
    display: inline-block;
}

.skc-swatch--high { background: rgba(127, 216, 143, 0.55); }
.skc-swatch--mid { background: rgba(201, 166, 92, 0.55); }
.skc-swatch--low { background: rgba(224, 122, 122, 0.55); }

.skc-row--diff-marker {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 3px;
    display: inline-block;
    box-shadow: inset 3px 0 0 var(--sw-gold-bright);
    background: var(--sw-bg-panel-alt);
}

/* ── Kein Höhen-Deckel mehr: die Seite wächst normal nach unten (kein verschachtelter
   Scrollbereich). overflow-y:hidden statt "visible" ist hier bewusst gesetzt, weil ein
   Container mit overflow-x:auto + overflow-y:visible vom Browser sonst automatisch auch
   overflow-y:auto zugewiesen bekommt (CSS-Spec-Eigenheit) - mit hidden bleibt nur die
   horizontale Achse scrollbar, ohne dass vertikal ungewollt ein zweiter Scrollbalken entsteht. ── */
.skc-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--sw-border-gold);
    border-radius: var(--sw-radius-sm);
    background: var(--sw-panel-dark);
    scroll-behavior: smooth;
    /* Navigation ist bewusst nur ueber die Carousel-Pfeile gedacht - der native
       Scrollbalken wird hier versteckt, scrollLeft/scrollBy bleiben aber intakt. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.skc-scroll::-webkit-scrollbar {
    display: none;
}

/* ── Carousel-Pfeile: fest am Viewport verankert (nicht am Tabellen-Wrapper), damit sie
   trotz der jetzt beliebig langen Seite immer erreichbar bleiben, egal wie weit man
   runtergescrollt hat. ── */
.skc-carousel {
    position: relative;
}

.skc-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--sw-border-gold);
    background: var(--sw-panel-dark);
    color: var(--sw-gold-bright);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sw-shadow);
}

.skc-nav svg {
    display: block;
}

.skc-nav:hover:not(:disabled) {
    background: var(--sw-bg-panel-alt);
    color: var(--sw-gold);
}

.skc-nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.skc-nav--prev {
    left: clamp(0.5rem, 2vw, 2rem);
}

.skc-nav--next {
    right: clamp(0.5rem, 2vw, 2rem);
}

@media (max-width: 900px) {
    .skc-nav {
        width: 2.25rem;
        height: 2.25rem;
    }

    .skc-nav svg {
        width: 16px;
        height: 16px;
    }
}

.skc-table {
    border-collapse: collapse;
    font-size: 0.78rem;
    width: 100%;
}

.skc-table th,
.skc-table td {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--sw-border);
    white-space: nowrap;
}

.skc-th-corner,
.skc-th-class {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--sw-bg-panel);
    color: var(--sw-gold-bright);
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 600;
}

.skc-th-corner {
    left: 0;
    z-index: 4;
    text-align: left;
}

.skc-th-class {
    text-align: center;
    padding: 0.5rem 0.3rem;
}

.skc-th-class__label {
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-height: 11rem;
    white-space: nowrap;
}

.skc-th-class__label--horizontal {
    writing-mode: horizontal-tb;
    transform: none;
    max-height: none;
}

.skc-th-class__tier {
    display: block;
    color: var(--sw-text-muted);
    font-size: 0.68rem;
    font-weight: 400;
}

.skc-row-group td {
    position: sticky;
    left: 0;
    background: var(--sw-bg-panel-alt);
    color: var(--sw-gold);
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 600;
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-left: none;
    border-right: none;
}

.skc-td-skill {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--sw-bg-panel);
    color: var(--sw-text);
    text-align: left;
    font-weight: 500;
}

.skc-row--summary .skc-td-skill {
    color: var(--sw-gold-bright);
}

.skc-row--diff .skc-td-skill {
    box-shadow: inset 3px 0 0 var(--sw-gold-bright);
}

.skc-td-value {
    text-align: center;
    color: var(--sw-text);
}

.skc-td-value--high {
    background: rgba(127, 216, 143, 0.18);
    color: var(--sw-ok);
}

.skc-td-value--mid {
    background: rgba(201, 166, 92, 0.22);
    color: var(--sw-warning);
}

.skc-td-value--low {
    background: rgba(224, 122, 122, 0.2);
    color: var(--sw-danger);
}

.skc-td-value--sum {
    font-weight: 700;
    color: var(--sw-gold-bright);
    background: rgba(201, 166, 92, 0.1);
}

.skc-td-value--stats {
    color: var(--sw-text-muted);
}

/* ── Vergleichsformular ── */
.skc-compare-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
}

.skc-select {
    background: var(--sw-bg-panel);
    color: var(--sw-text);
    border: 1px solid var(--sw-border-gold);
    border-radius: var(--sw-radius-sm);
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    min-width: 190px;
}

.skc-empty {
    text-align: center;
    color: var(--sw-text-muted);
    padding: 2rem 1rem;
}

@media (max-width: 700px) {
    .skc-compare-form {
        flex-direction: column;
        align-items: stretch;
    }
}