/**
 * File: wp-content/plugins/fanclub-core/assets/css/legion.css
 * Legions-Badge – Vexillum-Design, römische Ziffern, Rahmen-System
 *
 * Tier-Farbe kommt per Inline-Style von PHP (style="--lc:#XXX").
 * Fallback: Brand-Gelb als Primitive (theme-stabil, nicht neon-aware —
 * der Badge bleibt bewusst gelb auch im Neon-Modus).
 */

/* ── Badge Klein ─────────────────────────────────────────────────────────── */
.fc-legion-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border: 1.5px solid currentColor; border-radius: 20px;
    font-size: 11px; font-weight: 700; letter-spacing: .4px;
    white-space: nowrap; vertical-align: middle;
    background: rgba(0,0,0,.04); font-family: Georgia, serif;
}
.fc-legion-badge--bvb {
    background: rgba(255,217,0,.1);
    box-shadow: 0 0 6px rgba(255,217,0,.28);
}

/* ── Badge Groß: Wrapper ─────────────────────────────────────────────────── */
.fc-lv-wrap {
    position: relative; display: inline-block; padding: 20px;
}
.fc-lv-inner {
    display: inline-flex; align-items: center; gap: 2rem;
    background: #111;
    border: 2px solid var(--lc, var(--fc-color-yellow-500));
    border-radius: 10px; padding: 1.5rem 2rem;
    box-shadow: 0 6px 32px rgba(0,0,0,.45);
    position: relative; z-index: 1;
}
[data-tier="9"] .fc-lv-inner {
    box-shadow: 0 6px 40px rgba(255,217,0,.22), 0 0 80px rgba(255,217,0,.07);
}
.fc-lv__svg { width: 110px; height: 152px; flex-shrink: 0; }
.fc-lv__info { color: #fff; min-width: 130px; }
.fc-lv__name { font-size: .95rem; color: #999; margin-bottom: .15rem; }
.fc-lv__label {
    font-size: 1.55rem; font-weight: 700;
    color: var(--lc, var(--fc-color-yellow-500));
    font-family: Georgia, serif; line-height: 1.2; margin-bottom: .25rem;
}
.fc-lv__years { font-size: .85rem; color: #666; }
.fc-lv__special {
    margin-top: .45rem; font-size: .78rem;
    color: var(--fc-color-yellow-500);
    font-weight: 600; letter-spacing: .3px;
}

/* ── Rahmen: Lorbeer ─────────────────────────────────────────────────────── */
.fc-lf { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.fc-lf--laurel .fc-lf-tl,
.fc-lf--laurel .fc-lf-tr,
.fc-lf--laurel .fc-lf-bl,
.fc-lf--laurel .fc-lf-br {
    position: absolute; width: 52px; height: 52px; opacity: .6;
}
.fc-lf--laurel .fc-lf-tl { top: 2px;    left: 2px;    transform: rotate(0deg);   }
.fc-lf--laurel .fc-lf-tr { top: 2px;    right: 2px;   transform: rotate(90deg);  }
.fc-lf--laurel .fc-lf-bl { bottom: 2px; left: 2px;    transform: rotate(270deg); }
.fc-lf--laurel .fc-lf-br { bottom: 2px; right: 2px;   transform: rotate(180deg); }

/* ── Rahmen: Chain (TODO SVG-Kettenmuster) ───────────────────────────────── */
.fc-lf--chain {
    border: 3px dashed var(--lc, var(--fc-color-yellow-500));
    border-radius: 12px; opacity: .25;
}

/* ── Rahmen: Imperial (TODO SVG-Ornamentecken) ───────────────────────────── */
.fc-lf--imperial {
    outline: 2px solid var(--lc, var(--fc-color-yellow-500));
    outline-offset: 6px; border-radius: 14px; opacity: .2;
}

/* ── Backend-Profil ──────────────────────────────────────────────────────── */
.fc-legion-profile-section {
    margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #ddd;
}
.fc-legion-profile-section h2 { font-size: 1.1rem; margin-bottom: 1.25rem; }

/* ── Frontend-Zusätze ────────────────────────────────────────────────────── */
.fc-badge-hint { color: #666; font-style: italic; }

@media (max-width: 480px) {
    .fc-lv-inner { flex-direction: column; text-align: center; gap: 1rem; padding: 1.25rem; }
    .fc-lv__svg  { width: 90px; height: 124px; }
}