/* ============================================================================
   RPG Heroes – Wiki (wiki.css)
   High-end Enterprise Design für das Spiel-Wiki.
   Wird ausschließlich von /wiki geladen (pageStyles).
   ============================================================================ */

:root {
    --wiki-gold: #d6ad62;
    --wiki-gold-hot: #f0d18b;
    --wiki-amber: #f59e0b;
    --wiki-ember: #fb923c;
    --wiki-crimson: #dc2626;
    --wiki-azure: #3b82f6;
    --wiki-emerald: #10b981;
    --wiki-violet: #8b5cf6;
    --wiki-cyan: #06b6d4;
    --wiki-ink: #e7eaf0;
    --wiki-muted: #8d98aa;
    --wiki-parchment: #1e1b16;
}

/* ─── HERO ──────────────────────────────────────────────────────────────── */
.wiki-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(214, 173, 98, .22);
    border-radius: 1.75rem;
    padding: 2.5rem 2rem 2rem;
    margin-bottom: 2rem;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(139, 92, 246, .14), transparent 55%),
        radial-gradient(ellipse at 88% 100%, rgba(6, 182, 212, .12), transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(214, 173, 98, .06), transparent 65%),
        linear-gradient(165deg, rgba(15, 10, 28, .98), rgba(15, 23, 42, .96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 28px 64px rgba(0,0,0,.45);
}
.wiki-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(139, 92, 246, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, .04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse at 45% 40%, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 45% 40%, black 0%, transparent 75%);
}
.wiki-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .85), transparent);
}
.wiki-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .85rem;
    border: 1px solid rgba(139, 92, 246, .35);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(139, 92, 246, .14), rgba(6, 182, 212, .10));
    color: #c4b5fd;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    box-shadow: 0 0 22px rgba(139, 92, 246, .12), inset 0 1px 0 rgba(255,255,255,.07);
}
.wiki-live-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: #8b5cf6;
    box-shadow: 0 0 9px rgba(139, 92, 246, .85);
    animation: wiki-live-pulse 2s ease-in-out infinite;
}
.wiki-hero-title {
    margin-top: 1rem;
    font-family: 'Cinzel', 'Cinzel Fallback', serif;
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    letter-spacing: .02em;
    background: linear-gradient(135deg, #fff 0%, #e2e8f0 20%, #c4b5fd 45%, #8b5cf6 70%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 36px rgba(139, 92, 246, .2);
    line-height: 1.05;
    white-space: nowrap;
}
.wiki-hero-subtitle {
    margin-top: .75rem;
    max-width: 42rem;
    color: #a8b0bf;
    font-size: .95rem;
    line-height: 1.6;
}

/* ─── Stats ────────────────────────────────────────────────────────────── */
.wiki-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin-top: 1.8rem;
}
@media (min-width: 768px) { .wiki-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wiki-stat {
    position: relative;
    overflow: hidden;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(139, 92, 246, .18);
    border-radius: 1rem;
    background: linear-gradient(155deg, rgba(18, 12, 32, .85), rgba(15, 23, 42, .85));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.wiki-stat::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, rgba(139, 92, 246, .28), transparent 45%, transparent 55%, rgba(6, 182, 212, .18));
    border-radius: inherit;
    padding: 1px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .6;
}
.wiki-stat-label {
    color: #718096;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.wiki-stat-value {
    margin-top: .45rem;
    color: #f8fafc;
    font-family: 'Cinzel', 'Cinzel Fallback', serif;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}
.wiki-stat-suffix { color: #c4b5fd; font-size: .85rem; font-weight: 700; margin-left: .2rem; }
.wiki-stat-bar { margin-top: .6rem; height: 4px; border-radius: 99px; background: rgba(0,0,0,.5); overflow: hidden; }
.wiki-stat-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #06b6d4, #f0d18b); box-shadow: 0 0 12px rgba(139, 92, 246, .5); }

/* ─── Tome-Bühne (animiertes Buch) ──────────────────────────────────────── */
.wiki-tome-stage {
    position: relative;
    width: clamp(180px, 28vw, 300px);
    aspect-ratio: 1;
    margin: 0 auto;
    display: grid;
    place-items: center;
    isolation: isolate;
}
.wiki-tome-glow {
    position: absolute;
    inset: -18%;
    background: radial-gradient(circle, rgba(139, 92, 246, .22), transparent 60%);
    filter: blur(22px);
    animation: wiki-glow 4s ease-in-out infinite;
}
.wiki-tome {
    position: relative;
    z-index: 2;
    width: 70%;
    height: auto;
    filter: drop-shadow(0 14px 24px rgba(0,0,0,.5));
}
.wiki-tome-glow-line {
    filter: blur(3.5px);
}
.wiki-quill {
    position: absolute;
    z-index: 3;
    top: 16%;
    right: 6%;
    width: 30%;
    transform-origin: 40% 92%;
    animation: wiki-quill 3.5s ease-in-out infinite;
    filter: drop-shadow(0 4px 10px rgba(139, 92, 246, .4));
}
.wiki-rune {
    position: absolute;
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    background: radial-gradient(circle, #c4b5fd, #8b5cf6);
    box-shadow: 0 0 10px #8b5cf6, 0 0 20px #7c3aed;
    opacity: 0;
    pointer-events: none;
}
.wiki-rune--1 { top: 38%; left: 28%; animation: wiki-rune 3.8s ease-out infinite; }
.wiki-rune--2 { top: 42%; left: 58%; animation: wiki-rune 3.8s ease-out infinite .45s; }
.wiki-rune--3 { top: 34%; left: 44%; animation: wiki-rune 3.8s ease-out infinite .9s; }
.wiki-rune--4 { top: 46%; left: 36%; animation: wiki-rune 3.8s ease-out infinite 1.35s; }
.wiki-rune--5 { top: 48%; left: 54%; animation: wiki-rune 3.8s ease-out infinite 1.8s; }
.wiki-rune--6 { top: 32%; left: 52%; animation: wiki-rune 3.8s ease-out infinite 2.25s; }

/* ─── Sidebar ──────────────────────────────────────────────────────────── */
.wiki-sidebar {
    border: 1px solid rgba(139, 92, 246, .18);
    border-radius: 1.25rem;
    background: linear-gradient(160deg, rgba(18, 12, 32, .92), rgba(15, 23, 42, .9));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px rgba(0,0,0,.32);
    overflow: hidden;
}
/* Sticky nur im Desktop-Layout (lg, ab 1024px), wenn die Sidebar als
   schmale Spalte neben dem Inhalt steht. Darunter liegt sie einzeln über
   dem Content – dort würde Sticky die volle Breite am Viewport festnageln
   und den Text dahinter verdecken.
   top: 5.5rem berücksichtigt die Höhe des fixierten Navigations-Headers
   (≈ 5rem mit py-4 + h-12 + border), sodass die Sidebar niemals dahinter
   verschwindet. */
@media (min-width: 1024px) {
    .wiki-sidebar {
        position: sticky;
        top: 5.5rem;
    }
}
.wiki-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .45), transparent);
}
.wiki-sidebar-header {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.35rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.wiki-sidebar-icon {
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    border-radius: .8rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(6, 182, 212, .08));
    border: 1px solid rgba(139, 92, 246, .30);
    color: #a78bfa;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 6px 16px rgba(139, 92, 246, .18);
    overflow: hidden;
}
.wiki-sidebar-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: wiki-icon-shine 3s ease-in-out infinite;
}
.wiki-sidebar-title {
    font-family: 'Cinzel', 'Cinzel Fallback', serif;
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .04em;
}
.wiki-nav-list {
    padding: .6rem;
}
.wiki-nav-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border-radius: .6rem;
    color: #94a3b8;
    font-size: .78rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .18s ease;
    margin-bottom: 1px;
}
.wiki-nav-item:hover {
    color: #e2e8f0;
    background: rgba(139, 92, 246, .08);
}
.wiki-nav-item.is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(6, 182, 212, .08));
    border: 1px solid rgba(139, 92, 246, .3);
    font-weight: 600;
}
.wiki-nav-dot {
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(139, 92, 246, .4);
    transition: all .18s ease;
}
.wiki-nav-item:hover .wiki-nav-dot { background: rgba(139, 92, 246, .7); }
.wiki-nav-item.is-active .wiki-nav-dot { background: #8b5cf6; box-shadow: 0 0 8px rgba(139, 92, 246, .6); }

.wiki-sidebar-footer {
    padding: .75rem 1.25rem 1rem;
    border-top: 1px solid rgba(255,255,255,.05);
}
.wiki-faq-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .8rem;
    border-radius: .7rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, .12), rgba(6, 182, 212, .06));
    border: 1px solid rgba(139, 92, 246, .25);
    color: #c4b5fd;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .18s ease;
}
.wiki-faq-link:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, .22), rgba(6, 182, 212, .12));
    border-color: rgba(139, 92, 246, .45);
    color: #ddd6fe;
}

/* ─── Content Sections ─────────────────────────────────────────────────── */
.wiki-section {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, .16);
    border-radius: 1.25rem;
    background: linear-gradient(155deg, rgba(18, 12, 32, .92), rgba(15, 23, 42, .9));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 36px rgba(0,0,0,.32);
    scroll-margin-top: 5.5rem;
}
.wiki-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .35), transparent);
}
.wiki-section-header {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.35rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.wiki-section-icon {
    width: 2.8rem;
    height: 2.8rem;
    display: grid;
    place-items: center;
    border-radius: .8rem;
    border: 1px solid rgba(139, 92, 246, .25);
    color: #a78bfa;
    flex-shrink: 0;
    overflow: hidden;
}
.wiki-section-icon svg { width: 55%; height: 55%; }
.wiki-section-icon--red { background: linear-gradient(135deg, rgba(220, 38, 38, .18), rgba(239, 68, 68, .08)); border-color: rgba(220, 38, 38, .35); color: #fca5a5; }
.wiki-section-icon--emerald { background: linear-gradient(135deg, rgba(16, 185, 129, .18), rgba(52, 211, 153, .08)); border-color: rgba(16, 185, 129, .35); color: #6ee7b7; }
.wiki-section-icon--blue { background: linear-gradient(135deg, rgba(59, 130, 246, .18), rgba(96, 165, 250, .08)); border-color: rgba(59, 130, 246, .35); color: #93c5fd; }
.wiki-section-icon--amber { background: linear-gradient(135deg, rgba(245, 158, 11, .18), rgba(251, 191, 36, .08)); border-color: rgba(245, 158, 11, .35); color: #fcd34d; }
.wiki-section-icon--cyan { background: linear-gradient(135deg, rgba(6, 182, 212, .18), rgba(34, 211, 238, .08)); border-color: rgba(6, 182, 212, .35); color: #67e8f9; }
.wiki-section-icon--green { background: linear-gradient(135deg, rgba(34, 197, 94, .18), rgba(74, 222, 128, .08)); border-color: rgba(34, 197, 94, .35); color: #86efac; }
.wiki-section-icon--purple { background: linear-gradient(135deg, rgba(168, 85, 247, .18), rgba(192, 132, 252, .08)); border-color: rgba(168, 85, 247, .35); color: #c4b5fd; }
.wiki-section-icon--pink { background: linear-gradient(135deg, rgba(244, 114, 182, .18), rgba(249, 168, 212, .08)); border-color: rgba(244, 114, 182, .35); color: #f9a8d4; }
.wiki-section-title {
    font-family: 'Cinzel', 'Cinzel Fallback', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .03em;
    line-height: 1.2;
}
.wiki-section-badge {
    margin-left: auto;
    padding: .3rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(139, 92, 246, .2);
    background: rgba(139, 92, 246, .08);
    color: #a78bfa;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.wiki-section-body {
    padding: 1.5rem;
    color: #a8b0bf;
    font-size: .88rem;
    line-height: 1.7;
}
.wiki-section-body strong { color: #e2e8f0; }
.wiki-section-body p + p { margin-top: .85rem; }
.wiki-section-body p + h3 { margin-top: 1.5rem; }
.wiki-section-body h3 {
    font-family: 'Cinzel', 'Cinzel Fallback', serif;
    font-size: 1rem;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: .03em;
    margin-bottom: .6rem;
}

/* ─── Info Boxes ───────────────────────────────────────────────────────── */
.wiki-info-box {
    display: flex;
    gap: .75rem;
    padding: 1rem 1.1rem;
    border-radius: .8rem;
    font-size: .82rem;
    line-height: 1.6;
    margin-top: 1rem;
}
.wiki-info-box--amber { background: rgba(245, 158, 11, .07); border: 1px solid rgba(245, 158, 11, .18); color: #fcd34d; }
.wiki-info-box--emerald { background: rgba(16, 185, 129, .07); border: 1px solid rgba(16, 185, 129, .18); color: #6ee7b7; }
.wiki-info-box--blue { background: rgba(59, 130, 246, .07); border: 1px solid rgba(59, 130, 246, .18); color: #93c5fd; }
.wiki-info-box--red { background: rgba(239, 68, 68, .07); border: 1px solid rgba(239, 68, 68, .18); color: #fca5a5; }
.wiki-info-box--purple { background: rgba(168, 85, 247, .07); border: 1px solid rgba(168, 85, 247, .18); color: #c4b5fd; }
.wiki-info-box--orange { background: rgba(249, 115, 22, .07); border: 1px solid rgba(249, 115, 22, .18); color: #fdba74; }
.wiki-info-box--cyan { background: rgba(6, 182, 212, .07); border: 1px solid rgba(6, 182, 212, .18); color: #67e8f9; }
.wiki-info-box-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: .5rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    font-size: 1rem;
}

/* ─── Class Cards ──────────────────────────────────────────────────────── */
.wiki-class-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .85rem;
    margin-top: .85rem;
}
.wiki-class-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 1.25rem;
    background: linear-gradient(155deg, rgba(18, 12, 32, .8), rgba(15, 23, 42, .8));
    border: 1px solid rgba(139, 92, 246, .14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.3);
    transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .25s ease;
}
.wiki-class-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(0,0,0,.35), 0 0 20px rgba(139, 92, 246, .1);
}
.wiki-class-card--warrior { border-top: 2px solid #ef4444; }
.wiki-class-card--warrior:hover { border-color: rgba(239, 68, 68, .4); }
.wiki-class-card--priest { border-top: 2px solid #10b981; }
.wiki-class-card--priest:hover { border-color: rgba(16, 185, 129, .4); }
.wiki-class-card--mage { border-top: 2px solid #3b82f6; }
.wiki-class-card--mage:hover { border-color: rgba(59, 130, 246, .4); }
.wiki-class-card--rogue { border-top: 2px solid #22c55e; }
.wiki-class-card--rogue:hover { border-color: rgba(34, 197, 94, .4); }

.wiki-class-icon {
    width: 2.8rem;
    height: 2.8rem;
    display: grid;
    place-items: center;
    border-radius: .7rem;
    border: 1px solid;
    margin-bottom: .85rem;
}
.wiki-class-icon--warrior { background: linear-gradient(135deg, rgba(239, 68, 68, .15), rgba(220, 38, 38, .06)); border-color: rgba(239, 68, 68, .25); color: #fca5a5; }
.wiki-class-icon--priest { background: linear-gradient(135deg, rgba(16, 185, 129, .15), rgba(5, 150, 105, .06)); border-color: rgba(16, 185, 129, .25); color: #6ee7b7; }
.wiki-class-icon--mage { background: linear-gradient(135deg, rgba(59, 130, 246, .15), rgba(37, 99, 235, .06)); border-color: rgba(59, 130, 246, .25); color: #93c5fd; }
.wiki-class-icon--rogue { background: linear-gradient(135deg, rgba(34, 197, 94, .15), rgba(22, 163, 74, .06)); border-color: rgba(34, 197, 94, .25); color: #86efac; }
.wiki-class-icon svg { width: 55%; height: 55%; }

.wiki-class-name {
    font-family: 'Cinzel', 'Cinzel Fallback', serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .65rem;
}
.wiki-class-name--warrior { color: #fca5a5; }
.wiki-class-name--priest { color: #6ee7b7; }
.wiki-class-name--mage { color: #93c5fd; }
.wiki-class-name--rogue { color: #86efac; }

.wiki-class-stats {
    list-style: none;
    padding: 0;
    margin: 0 0 .65rem;
    display: grid;
    gap: .3rem;
}
.wiki-class-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .7rem;
    padding: .3rem .45rem;
    border-radius: .4rem;
    background: rgba(0,0,0,.2);
}
.wiki-class-stat-label { color: #718096; }
.wiki-class-stat-value { color: #e2e8f0; font-weight: 700; font-variant-numeric: tabular-nums; }
.wiki-class-flavor {
    font-size: .68rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
    padding-top: .5rem;
    border-top: 1px solid rgba(255,255,255,.05);
}

/* ─── Tables ───────────────────────────────────────────────────────────── */
.wiki-table-wrapper {
    overflow-x: auto;
    border-radius: .8rem;
    border: 1px solid rgba(255,255,255,.06);
    margin-top: .85rem;
}
.wiki-table {
    width: 100%;
    font-size: .8rem;
    border-collapse: collapse;
}
.wiki-table thead th {
    padding: .75rem 1rem;
    color: #64748b;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: left;
    background: rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.wiki-table tbody td {
    padding: .7rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
    color: #cbd5e1;
}
.wiki-table tbody tr:last-child td { border-bottom: none; }
.wiki-table tbody tr:hover { background: rgba(139, 92, 246, .04); }
.wiki-table .col-accent-red { color: #fca5a5; font-weight: 700; }
.wiki-table .col-accent-blue { color: #93c5fd; font-weight: 700; }
.wiki-table .col-accent-green { color: #86efac; font-weight: 700; }
.wiki-table .col-accent-amber { color: #fde68a; font-weight: 700; }
.wiki-table .col-accent-emerald { color: #6ee7b7; font-weight: 700; }
.wiki-table .col-accent-pink { color: #f9a8d4; font-weight: 700; }

/* ─── Feature Grid ─────────────────────────────────────────────────────── */
.wiki-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .65rem;
    margin-top: .85rem;
}
.wiki-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .85rem .6rem;
    border-radius: .75rem;
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.05);
    text-align: center;
    transition: all .18s ease;
}
.wiki-feature-item:hover { border-color: rgba(139, 92, 246, .25); background: rgba(139, 92, 246, .06); transform: translateY(-1px); }
.wiki-feature-icon {
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border-radius: .55rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    font-size: 1.1rem;
}
.wiki-feature-name { font-size: .72rem; font-weight: 700; color: #e2e8f0; }
.wiki-feature-desc { font-size: .62rem; color: #64748b; line-height: 1.4; }

/* ─── Code blocks ──────────────────────────────────────────────────────── */
.wiki-code {
    display: block;
    padding: .85rem 1rem;
    border-radius: .7rem;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.06);
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: .78rem;
    color: #e2e8f0;
    line-height: 1.55;
    margin-top: .5rem;
}
.wiki-code .highlight { color: #fde68a; }

/* ─── Special ability badges ───────────────────────────────────────────── */
.wiki-ability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .6rem;
    margin-top: .75rem;
}
.wiki-ability {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .85rem;
    border-radius: .7rem;
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.05);
}
.wiki-ability-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: .5rem;
}
.wiki-ability-icon--red { background: linear-gradient(135deg, rgba(239,68,68,.15), rgba(220,38,38,.06)); border: 1px solid rgba(239,68,68,.2); color: #fca5a5; }
.wiki-ability-icon--blue { background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(37,99,235,.06)); border: 1px solid rgba(59,130,246,.2); color: #93c5fd; }
.wiki-ability-icon--green { background: linear-gradient(135deg, rgba(34,197,94,.15), rgba(22,163,74,.06)); border: 1px solid rgba(34,197,94,.2); color: #86efac; }
.wiki-ability-icon--emerald { background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(5,150,105,.06)); border: 1px solid rgba(16,185,129,.2); color: #6ee7b7; }
.wiki-ability-icon svg { width: 55%; height: 55%; }
.wiki-ability-label { font-size: .75rem; font-weight: 700; color: #e2e8f0; margin-bottom: .15rem; }
.wiki-ability-desc { font-size: .66rem; color: #64748b; line-height: 1.4; }

/* ─── Item Slots (grid) ───────────────────────────────────────────────── */
.wiki-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .5rem;
    margin-top: .85rem;
}
.wiki-slot-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .75rem .5rem;
    border-radius: .7rem;
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.05);
    text-align: center;
}
.wiki-slot-icon {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: .5rem;
    background: linear-gradient(135deg, rgba(139,92,246,.1), rgba(6,182,212,.05));
    border: 1px solid rgba(139,92,246,.2);
    font-size: 1rem;
}
.wiki-slot-name { font-size: .72rem; font-weight: 700; color: #e2e8f0; }
.wiki-slot-desc { font-size: .6rem; color: #64748b; }

/* ─── Ordered / Unordered Lists ────────────────────────────────────────── */
.wiki-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: .35rem;
    margin-top: .6rem;
}
.wiki-list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .8rem;
    color: #a8b0bf;
    padding: .25rem 0;
}
.wiki-list-marker {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(139, 92, 246, .1);
    color: #a78bfa;
    font-size: .55rem;
    font-weight: 800;
    margin-top: .15rem;
}
.wiki-list-marker--emerald { background: rgba(16, 185, 129, .1); color: #6ee7b7; }
.wiki-list-marker--amber { background: rgba(245, 158, 11, .1); color: #fcd34d; }
.wiki-list-marker--red { background: rgba(239, 68, 68, .1); color: #fca5a5; }
.wiki-list-marker--blue { background: rgba(59, 130, 246, .1); color: #93c5fd; }

/* ─── Animationen ──────────────────────────────────────────────────────── */
@keyframes wiki-live-pulse { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes wiki-glow { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes wiki-quill { 0%, 100% { transform: rotate(-3deg) translateY(0); } 25% { transform: rotate(5deg) translateY(-5px); } 50% { transform: rotate(-2deg) translateY(-2px); } 75% { transform: rotate(3deg) translateY(-7px); } }
@keyframes wiki-rune { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 25% { opacity: .9; transform: translate(var(--rx, 12px), var(--ry, -16px)) scale(1.1); } 100% { opacity: 0; transform: translate(calc(var(--rx, 12px) * 2.5), calc(var(--ry, -16px) * 2.5)) scale(0); } }
.wiki-rune--1 { --rx: 14px; --ry: -18px; }
.wiki-rune--2 { --rx: -12px; --ry: -14px; }
.wiki-rune--3 { --rx: 18px; --ry: -10px; }
.wiki-rune--4 { --rx: -16px; --ry: -20px; }
.wiki-rune--5 { --rx: 10px; --ry: -22px; }
.wiki-rune--6 { --rx: -14px; --ry: -8px; }
@keyframes wiki-icon-shine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* ─── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wiki-live-dot, .wiki-tome-glow, .wiki-quill, .wiki-rune, .wiki-sidebar-icon::after { animation: none !important; }
    .wiki-class-card, .wiki-feature-item { transition: none !important; }
}

@media (max-width: 1024px) {
    .wiki-hero { padding: 1.5rem 1.25rem 1.25rem; border-radius: 1.25rem; }
    .wiki-tome-stage { width: 160px; }
    .wiki-stats { grid-template-columns: 1fr 1fr; }
    .wiki-section-body { padding: 1rem; }
    .wiki-section-header { padding: 1rem; }
}