/* ══════════════════════════════════════════
   MagnoliaMC — Coming Soon Template
   ══════════════════════════════════════════ */

:root {
    --primary:    #F2A7C9;
    --secondary:  #9B6DC5;
    --gold:       #D4AF6A;
    --gold-light: #F0D898;
    --pink-300:   #FFBCDF;
    --gold-400:   #D4AF6A;
    --primary-glow: rgba(242,167,201,0.35);
    --rainbow-1: #FFB3C6; --rainbow-2: #FFD6A5; --rainbow-3: #FDFFB6;
    --rainbow-4: #CAFFBF; --rainbow-5: #9BF6FF; --rainbow-6: #BDB2FF; --rainbow-7: #FFC6FF;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

.cs-body {
    font-family: 'DM Sans', sans-serif;
    min-height: 100vh;
    background: #FDF8FC;
    position: relative;
    overflow-x: hidden;
}
.cs-body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 10% 0%, rgba(255,179,198,0.25) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 10%, rgba(189,178,255,0.2) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 50% 100%, rgba(159,246,255,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 30% at 80% 70%, rgba(255,198,255,0.18) 0%, transparent 50%);
}

/* Petals */
.petals { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.petal  { position: absolute; font-size: 1rem; opacity: 0.2; animation: floatPetal linear infinite; }
@keyframes floatPetal {
    0%   { transform: translateY(108vh) rotate(0deg); opacity: 0; }
    6%   { opacity: 0.2; }
    94%  { opacity: 0.2; }
    100% { transform: translateY(-40px) rotate(420deg); opacity: 0; }
}

@keyframes rainbowSlide { 0%{background-position:0%} 100%{background-position:300%} }
@keyframes shimmerText  { 0%{background-position:0% center} 100%{background-position:200% center} }
@keyframes csFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); opacity: 0.6; }
    50% { transform: translateY(-14px) rotate(5deg); opacity: 1; }
}
@keyframes csAppear {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Page layout */
.cs-page {
    position: relative; z-index: 1;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1.25rem;
}

.cs-wrap {
    width: 100%; max-width: 560px;
    animation: csAppear 0.6s ease both;
}

/* Rainbow bar */
.cs-rainbow {
    height: 5px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--rainbow-1), var(--rainbow-2), var(--rainbow-3), var(--rainbow-4), var(--rainbow-5), var(--rainbow-6), var(--rainbow-7), var(--rainbow-1));
    background-size: 300% 100%;
    animation: rainbowSlide 3.5s linear infinite;
}

/* Card */
.cs-card {
    background: #FFFFFF;
    border: 1.5px solid rgba(212,175,106,0.3);
    border-top: none;
    border-radius: 0 0 18px 18px;
    padding: 2.5rem 2.25rem 2.25rem;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 64px rgba(30,20,38,0.12), 0 0 60px rgba(212,175,106,0.07);
}

.cs-gold-line {
    position: absolute; top: 0; left: 2rem; right: 2rem; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-400), var(--primary), var(--gold-400), transparent);
    background-size: 200% auto;
    animation: shimmerText 3s linear infinite;
}

/* Logo */
.cs-logo { margin-bottom: 1.25rem; }
.cs-wordmark {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 35%, var(--pink-300) 65%, var(--gold-light) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: shimmerText 4s linear infinite;
    letter-spacing: 0.04em;
}

/* Badge */
.cs-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: #FFEBF5; border: 1px solid rgba(242,167,201,0.35);
    border-radius: 999px; padding: 0.3rem 1.1rem;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--primary); margin-bottom: 1.25rem;
}

/* Heading */
.cs-heading {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: clamp(1.3rem, 4vw, 1.9rem);
    font-weight: 700; color: #1E1426; line-height: 1.3;
    margin-bottom: 1rem; letter-spacing: 0.02em;
}

/* Sub */
.cs-sub {
    font-size: 1rem; color: #2A1248; line-height: 1.75;
    margin-bottom: 1.5rem; max-width: 400px; margin-left: auto; margin-right: auto;
}

/* Divider */
.cs-divider {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 1.5rem; color: var(--gold); font-size: 0.7rem;
}
.cs-divider::before { content:''; flex:1; height:1px; background: linear-gradient(90deg, transparent, rgba(212,175,106,0.4)); }
.cs-divider::after  { content:''; flex:1; height:1px; background: linear-gradient(90deg, rgba(212,175,106,0.4), transparent); }

/* Discord */
.cs-discord-label {
    font-size: 0.82rem; color: #5A4870; margin-bottom: 0.75rem;
    font-weight: 600; letter-spacing: 0.03em;
}
.cs-discord-btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: linear-gradient(135deg, #5865F2, #7289DA);
    color: white; border-radius: 999px;
    padding: 0.8rem 2.25rem;
    font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(88,101,242,0.35);
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 1.5rem;
}
.cs-discord-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(88,101,242,0.45); }
.cs-discord-btn i { font-size: 1.1rem; }

/* Server IP */
.cs-ip {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: #FDF2F8; border: 1.5px solid rgba(200,170,220,0.28);
    border-radius: 12px; padding: 0.6rem 1rem;
    font-size: 0.88rem; color: #5A4870;
}
.cs-ip code {
    font-family: 'DM Sans', sans-serif; font-weight: 700; color: #1E1426;
    background: #FFEBF5; border-radius: 4px; padding: 0.1rem 0.5rem; font-size: 0.88rem;
}

/* Footer */
.cs-footer {
    text-align: center; margin-top: 1.25rem;
    font-size: 0.8rem; color: #8270A0; letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════
   Wiki / Custom Pages — Design System
   Appended for the /wiki custom page route.
   ══════════════════════════════════════════ */

:root {
    /* Pinks (extending --pink-300 already defined above) */
    --pink-50:   #FFF5FA;
    --pink-100:  #FFEBF5;
    --pink-200:  #FFD6E8;

    /* Gold extensions */
    --gold-50:   #FBF5E4;
    --gold-dark: #8C6F37;

    /* Surfaces */
    --surface:    #FFFFFF;
    --surface-2:  #FDF8FC;

    /* Borders */
    --border:        rgba(200,170,220,0.22);
    --border-soft:   rgba(200,170,220,0.18);
    --border-gold:   rgba(212,175,106,0.35);

    /* Text */
    --text:       #1E1426;
    --text-mid:   #4A3760;
    --text-soft:  #6F5C8A;

    /* Radii */
    --radius-xs:  8px;
    --radius-sm:  12px;
    --radius-md:  16px;
}

/* ── Wiki page layout ── */
.mmc-sidebar {
    position: sticky;
    top: 1.5rem;
    align-self: flex-start;
    width: 240px; flex-shrink: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 0.75rem;
    box-shadow: 0 8px 28px rgba(30,20,38,0.06);
    z-index: 1;
}
.mmc-main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 1rem;
    position: relative; z-index: 1;
}

/* Sidebar quick-nav back-to-store button */
.sidebar-menu-btn {
    display: block;
    background: linear-gradient(135deg, var(--pink-100), var(--pink-50));
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.85rem;
    color: var(--text);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.sidebar-menu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(242,167,201,0.25);
    border-color: var(--border-gold);
}
.sidebar-adventure-icon {
    display: block; font-size: 1.4rem; line-height: 1; margin-bottom: 0.25rem;
}
.sidebar-menu-title {
    display: block;
    font-family: 'Cinzel', serif; font-size: 0.88rem; font-weight: 700; color: var(--text);
}
.sidebar-menu-sub {
    display: block;
    font-size: 0.72rem; color: var(--text-soft); margin-top: 0.1rem;
}

.sidebar-category-list { display: flex; flex-direction: column; gap: 0.1rem; }
.sidebar-category-title {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-soft);
    padding: 0.65rem 0.6rem 0.45rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.sidebar-cat-item {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-left: 3px solid transparent;
    border-radius: 0 8px 8px 0;
    font-size: 0.85rem; font-weight: 600; color: var(--text-mid);
    text-decoration: none;
    transition: background 0.18s, color 0.18s, border-left-color 0.18s;
}
.sidebar-cat-item:hover {
    background: var(--pink-50);
    color: var(--text);
}
.cat-dot {
    width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}

/* ── Hero ── */
.adventure-hero {
    position: relative;
    background: linear-gradient(135deg, #2A1248 0%, #3B1B5F 55%, #5A1C72 100%);
    border-radius: var(--radius-md);
    padding: 2rem 1.75rem;
    overflow: hidden;
    color: white;
    box-shadow: 0 16px 48px rgba(42,18,72,0.25);
}
.adventure-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 80% 0%, rgba(242,167,201,0.35) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 0% 100%, rgba(212,175,106,0.25) 0%, transparent 55%);
    pointer-events: none;
}
.adventure-eyebrow {
    position: relative; z-index: 1;
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold-light);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    margin-bottom: 0.85rem;
}
.adventure-title {
    position: relative; z-index: 1;
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700; line-height: 1.15;
    background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--pink-300), var(--gold-light));
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: shimmerText 5s linear infinite;
    margin-bottom: 0.4rem;
}
.adventure-subtitle {
    position: relative; z-index: 1;
    color: rgba(255,255,255,0.75);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* ── Cards ── */
.mmc-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.5rem 1.4rem;
    box-shadow: 0 8px 28px rgba(30,20,38,0.06);
    position: relative;
}
.mmc-card--regal {
    border-color: var(--border-gold);
    background:
        linear-gradient(180deg, rgba(212,175,106,0.04), transparent 40%),
        var(--surface);
}

.card-section-label {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gold-dark);
    background: var(--gold-50);
    border: 1px solid var(--border-gold);
    border-radius: 999px;
    padding: 0.22rem 0.7rem;
    margin-bottom: 0.7rem;
}
.card-title {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 1.35rem; font-weight: 700; color: var(--text);
    margin-bottom: 0.85rem; line-height: 1.25; letter-spacing: 0.01em;
}
.card-title--sm { font-size: 1.15rem; }
.card-body-text {
    font-size: 0.92rem; color: var(--text-mid); line-height: 1.7; margin: 0;
}

/* ══════════════════════════════════════════
   Wiki content — ported from inline <style>
   ══════════════════════════════════════════ */

/* Tab pills in hero */
.wiki-tab-pills { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1rem; position:relative; z-index:1; }
.wiki-tab-pill { background:rgba(255,255,255,0.08); border:1.5px solid rgba(255,255,255,0.15); border-radius:999px; padding:0.4rem 1rem; font-family:'DM Sans',sans-serif; font-size:0.8rem; font-weight:600; color:rgba(255,255,255,0.65); cursor:pointer; transition:background 0.2s, border-color 0.2s, color 0.2s; }
.wiki-tab-pill:hover { background:rgba(255,255,255,0.12); color:white; }
.wiki-tab-pill.active { background:linear-gradient(135deg,var(--primary),var(--secondary)); border-color:transparent; color:white; box-shadow:0 3px 12px var(--primary-glow); }

/* Tab content */
.wiki-tab-content { display:none; }
.wiki-tab-content.active { display:block; }

/* Sidebar tab links */
.wiki-tab-link.active { background:linear-gradient(90deg, var(--pink-100), transparent); border-left-color: var(--primary); color: var(--secondary); font-weight: 700; }

/* All existing wiki styles */
.wiki-section { scroll-margin-top: 2rem; }
.wiki-rule-category { font-family:'Cinzel',serif; font-size:0.82rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:0.65rem; display:flex; align-items:center; gap:0.5rem; }
.wiki-rule-category::before { content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--border-gold),transparent); }
.wiki-rule-category::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--border-gold)); }
.wiki-rules { display:flex; flex-direction:column; gap:0.7rem; margin-bottom:1rem; }
.wiki-rule { display:flex; gap:1rem; align-items:flex-start; }
.wiki-rule-num { font-family:'Cinzel',serif; font-size:0.78rem; font-weight:800; color:var(--gold); background:var(--gold-50); border:1.5px solid var(--border-gold); border-radius:var(--radius-xs); padding:0.2rem 0.5rem; flex-shrink:0; min-width:32px; text-align:center; }
.wiki-rule strong { display:block; font-size:0.95rem; font-weight:700; color:var(--text); margin-bottom:0.2rem; }
.wiki-rule p { font-size:0.85rem; color:var(--text-soft); line-height:1.6; margin:0; }
.wiki-note { background:var(--pink-50); border:1px solid var(--border-soft); border-radius:var(--radius-xs); padding:0.75rem 1rem; font-size:0.82rem; color:var(--text-mid); display:flex; gap:0.6rem; align-items:flex-start; }
.wiki-note i { color:var(--primary); margin-top:0.1rem; flex-shrink:0; }
.wiki-rank-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:0.75rem; margin-bottom:1rem; }
.wiki-rank-card { background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:0.9rem; border-top:3px solid var(--rank-color); }
.wiki-rank-name { font-family:'Cinzel',serif; font-size:0.88rem; font-weight:700; color:var(--text); margin-bottom:0.5rem; }
.wiki-rank-perks { list-style:none; padding:0; margin:0 0 0.6rem; display:flex; flex-direction:column; gap:0.25rem; }
.wiki-rank-perks li { font-size:0.8rem; color:var(--text-mid); display:flex; align-items:flex-start; gap:0.4rem; }
.wiki-rank-perks li::before { content:'✦'; color:var(--gold); font-size:0.55rem; margin-top:0.25rem; flex-shrink:0; }
.wiki-rank-price { font-size:0.75rem; font-weight:700; color:var(--gold-dark); background:var(--gold-50); border:1px solid var(--border-gold); border-radius:999px; padding:0.2rem 0.6rem; display:inline-block; }
.wiki-affinity-grid { display:flex; flex-direction:column; gap:0.75rem; }
.wiki-affinity-card { background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:0.9rem; border-left:4px solid var(--aff-color, var(--primary)); }
.wiki-affinity-header { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.45rem; }
.wiki-affinity-emoji { font-size:1.75rem; line-height:1; }
.wiki-affinity-name { font-family:'Cinzel',serif; font-size:1rem; font-weight:700; color:var(--text); }
.wiki-affinity-focus { font-size:0.75rem; color:var(--text-soft); font-weight:600; letter-spacing:0.05em; }
.wiki-affinity-overview { font-size:0.95rem; color:var(--text-mid); line-height:1.65; margin-bottom:0.85rem; }
.wiki-affinity-ability { background:rgba(155,109,197,0.08); border:1px solid rgba(155,109,197,0.2); border-radius:var(--radius-xs); padding:0.5rem 0.75rem; margin-bottom:0.65rem; }
.wiki-ability-label { font-size:0.78rem; font-weight:800; color:var(--secondary); margin-bottom:0.3rem; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.wiki-cd { background:rgba(155,109,197,0.15); border-radius:999px; padding:0.1rem 0.5rem; font-size:0.7rem; color:var(--secondary); }
.wiki-affinity-ability p { font-size:0.84rem; color:var(--text-mid); line-height:1.6; margin:0; }
.wiki-affinity-cols { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.wiki-perk-title { font-size:0.72rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-bottom:0.4rem; }
.wiki-petals-grid { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:0.4rem; }
.wiki-petal-pill { background:var(--pink-100); border:1px solid var(--border-soft); border-radius:999px; padding:0.2rem 0.65rem; font-size:0.78rem; color:var(--text-mid); font-weight:500; }
.wiki-tree-stages { display:flex; flex-direction:column; gap:0.4rem; }
.wiki-tree-stage { display:flex; align-items:center; gap:0.75rem; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-xs); padding:0.5rem 0.85rem; }
.wiki-tree-stage--final { border-color:var(--border-gold); background:var(--gold-50); }
.wiki-stage-num { font-family:'Cinzel',serif; font-size:0.85rem; font-weight:800; color:var(--gold); background:var(--gold-50); border:1.5px solid var(--border-gold); border-radius:999px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wiki-tree-stage strong { font-size:0.9rem; font-weight:700; color:var(--text); }
.wiki-stage-petals { font-size:0.8rem; color:var(--text-soft); }
.wiki-commands { border:1.5px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.wiki-command-row { display:grid; grid-template-columns:185px 1fr; gap:0.75rem; padding:0.45rem 0.85rem; font-size:0.82rem; align-items:center; }
.wiki-command-row:not(:last-child) { border-bottom:1px solid var(--border-soft); }
.wiki-command-row:nth-child(even) { background:var(--surface-2); }
.wiki-command-header { background:var(--pink-50); font-size:0.7rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-mid); }
.wiki-command-row code { font-family:'DM Sans',sans-serif; background:var(--pink-100); border:1px solid var(--border-soft); border-radius:4px; padding:0.2rem 0.5rem; font-size:0.82rem; color:var(--secondary); font-weight:600; }
.wiki-command-row span { color:var(--text-mid); }
.wiki-steps { display:flex; flex-direction:column; gap:0.7rem; }
.wiki-step { display:flex; gap:1rem; align-items:flex-start; }
.wiki-step-num { font-family:'Cinzel',serif; font-size:0.85rem; font-weight:800; color:white; background:linear-gradient(135deg,var(--primary),var(--secondary)); border-radius:999px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 3px 10px var(--primary-glow); }
.wiki-step strong { display:block; font-size:0.95rem; font-weight:700; color:var(--text); margin-bottom:0.2rem; }
.wiki-step p { font-size:0.85rem; color:var(--text-soft); line-height:1.6; margin:0; }
.wiki-modes { display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1rem; }
.wiki-mode-card { display:flex; gap:0.75rem; align-items:flex-start; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.75rem; }
.wiki-mode-icon { font-size:1.75rem; flex-shrink:0; }
.wiki-mode-card strong { display:block; font-size:0.95rem; font-weight:700; color:var(--text); margin-bottom:0.2rem; }
.wiki-mode-card p { font-size:0.85rem; color:var(--text-soft); line-height:1.6; margin:0; }
.wiki-staff-grid { display:flex; flex-wrap:wrap; gap:0.75rem; }
.wiki-subteam-label { font-family:'Cinzel',serif; font-size:0.78rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--text); margin:1rem 0 0.5rem; display:flex; align-items:center; gap:0.6rem; }
.wiki-subteam-label::before { content:''; width:14px; height:14px; border-radius:4px; background:var(--team-color, var(--gold)); border:1px solid rgba(0,0,0,0.08); flex-shrink:0; box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.wiki-subteam-label::after { content:''; flex:1; height:2px; background:linear-gradient(90deg, var(--team-color, var(--gold)), transparent); border-radius:2px; opacity:0.7; }
.wiki-staff-card { background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:0.9rem; text-align:center; min-width:110px; }
.wiki-staff-avatar { width:48px; height:48px; border-radius:8px; display:block; margin:0 auto 0.5rem; image-rendering:pixelated; }
.wiki-staff-name { font-family:'Cinzel',serif; font-size:0.82rem; font-weight:700; color:var(--text); }
.wiki-staff-role { font-size:0.68rem; font-weight:700; color:var(--text); margin-top:0.4rem; padding:0.22rem 0.6rem; border-radius:999px; display:inline-block; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05); letter-spacing:0.02em; }
.wiki-faq { display:flex; flex-direction:column; gap:0; border:1.5px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.wiki-faq-item { border-bottom:1px solid var(--border); }
.wiki-faq-item:last-child { border-bottom:none; }
.wiki-faq-q { width:100%; background:none; border:none; padding:0.75rem 1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:0.9rem; font-weight:600; color:var(--text); text-align:left; transition:background 0.18s; }
.wiki-faq-q:hover { background:var(--pink-50); }
.wiki-faq-q i { color:var(--primary); flex-shrink:0; transition:transform 0.2s; }
.wiki-faq-q.open i { transform:rotate(180deg); }
.wiki-faq-a { display:none; padding:0 1rem 0.75rem; font-size:0.95rem; color:var(--text-mid); line-height:1.7; }
.wiki-faq-a.open { display:block; }
.wiki-connect { display:grid; grid-template-columns:2fr 1fr 1fr; gap:1rem; margin-bottom:1.25rem; }
.wiki-discord-layout { display:grid; grid-template-columns:1fr 230px; gap:1.25rem; align-items:start; }
.wiki-discord-channels { display:flex; flex-direction:column; gap:0.6rem; }
.wiki-discord-widget { flex-shrink:0; }
.wiki-connect-box { background:var(--surface-2); border:1.5px solid var(--border-gold); border-radius:var(--radius-sm); padding:1.1rem 1.25rem; }
.wiki-connect-label { font-size:0.72rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-soft); margin-bottom:0.5rem; }
.wiki-connect-value { font-family:'Cinzel',serif; font-size:0.95rem; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Wiki page body (overrides cs-body when wiki layout is present) ── */
.cs-body:has(.mmc-sidebar) {
    background: var(--surface-2);
}
.cs-body:has(.mmc-sidebar) > .mmc-sidebar,
.cs-body > .mmc-sidebar { /* fallback if :has not supported */
    position: sticky;
}

/* Wrap sidebar + main as a row at the page level */
body:has(.mmc-sidebar) {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
    align-items: flex-start;
}

@media (max-width: 900px) {
    body:has(.mmc-sidebar) {
        flex-direction: column;
        padding: 1rem;
    }
    .mmc-sidebar {
        position: static;
        width: 100%;
    }
    .wiki-affinity-cols { grid-template-columns: 1fr; }
    .wiki-connect { grid-template-columns: 1fr; }
    .wiki-command-row { grid-template-columns: 1fr; gap: 0.2rem; }
}
@media (max-width: 700px) {
    .wiki-discord-layout { grid-template-columns: 1fr; }
}

/* ── Dark mode overrides (activates on html.dark-mode) ── */
html.dark-mode .wiki-rule-num,
html.dark-mode .wiki-rank-price { background: #1A1408; }
html.dark-mode .wiki-note { background: #1A0E20; }
html.dark-mode .wiki-mode-card,
html.dark-mode .wiki-rank-card,
html.dark-mode .wiki-staff-card,
html.dark-mode .wiki-connect-box,
html.dark-mode .wiki-affinity-card,
html.dark-mode .wiki-tree-stage { background: #1A1028; }
html.dark-mode .wiki-tree-stage--final { background: #1A1408; }
html.dark-mode .wiki-faq-q:hover { background: #1A0E20; }
html.dark-mode .wiki-command-row:nth-child(even) { background: #1A1028; }
html.dark-mode .wiki-command-header { background: #1A0E20; }
html.dark-mode .wiki-petal-pill { background: #2A1535; }
html.dark-mode .wiki-affinity-ability { background: rgba(155,109,197,0.12); }
html.dark-mode .wiki-staff-role { color: #1a1a1a; }