/* =========================================================
   OH MY GEMMES — Encyclopédie Feng Shui
   Override du thème cosmique : noir / bordeaux / rouge impérial / or
   À charger APRÈS style.css uniquement sur feng-shui.php
========================================================= */

:root {
    /* Override des variables existantes */
    --bg-1: #0a0606;
    --bg-2: #2a0a0a;
    --bg-3: #4a1010;
    --bg-4: #1a0e0a;

    --pink:     #d4a017;   /* or impérial */
    --lavender: #c0392b;   /* rouge laqué */
    --mint:     #00a884;   /* jade vert */
    --peach:    #e8c050;   /* or pâle */
    --sky:      #d4a017;
    --gold:     #d4a017;

    --text:       #f5e8d0;
    --text-muted: rgba(245, 232, 208, 0.75);
    --text-dim:   rgba(245, 232, 208, 0.45);

    --glass:        rgba(212, 160, 23, 0.06);
    --glass-hover:  rgba(212, 160, 23, 0.12);
    --glass-border: rgba(212, 160, 23, 0.25);

    --shadow-glow: 0 0 24px rgba(212, 160, 23, 0.4);

    --popup-bg:    #fdf8ee;
    --popup-text:  #1a0e0a;
    --popup-muted: #6b4a30;
    --popup-terra: #8b3a2b;
    --popup-border: #e8d8b8;
    --popup-beige: #f5ead0;
}

body {
    background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 35%, var(--bg-3) 60%, var(--bg-4) 100%);
    background-attachment: fixed;
    color: var(--text);
}

/* Lanternes flottantes (remplace les étoiles) */
.stars-bg .star-dot {
    background: #d4a017;
    box-shadow: 0 0 6px rgba(212, 160, 23, 0.8), 0 0 12px rgba(192, 57, 43, 0.4);
    opacity: 0.5;
    border-radius: 50%;
}

/* Trigrammes en watermark sur l'arrière-plan */
body::before {
    content: '☰  ☷  ☴  ☵  ☶  ☲  ☳  ☱';
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18vw;
    color: rgba(212, 160, 23, 0.025);
    z-index: 0;
    pointer-events: none;
    font-family: serif;
    letter-spacing: 1.5em;
    overflow: hidden;
}

/* Header — title shimmer or-rouge-jade */
.site-title {
    background: linear-gradient(90deg, #d4a017, #c0392b, #00a884, #d4a017, #c0392b);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Logo glow rouge/or */
.site-logo {
    border-color: rgba(212, 160, 23, 0.4);
    box-shadow: 0 0 30px rgba(212, 160, 23, 0.6), 0 0 60px rgba(192, 57, 43, 0.3);
}

/* Encyclo links — override thème impérial */
.encyclo-link {
    border-color: rgba(212, 160, 23, 0.3);
    background: rgba(212, 160, 23, 0.06);
    color: #f5e8d0;
}
.encyclo-link:hover {
    background: rgba(212, 160, 23, 0.12);
    border-color: #d4a017;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 18px rgba(212, 160, 23, 0.4);
}
.encyclo-link.active {
    color: #1a0e0a;
    background: linear-gradient(135deg, #d4a017, #c0392b, #00a884, #d4a017);
    background-size: 200% auto;
    border-color: transparent;
    box-shadow: 0 6px 24px rgba(212, 160, 23, 0.5), 0 0 32px rgba(192, 57, 43, 0.35);
    font-weight: 700;
}
.encyclo-link.active:hover {
    box-shadow: 0 10px 32px rgba(212, 160, 23, 0.7), 0 0 40px rgba(192, 57, 43, 0.5);
}

/* Stats */
.stat-num { color: #d4a017; }
.stat { border-color: rgba(212, 160, 23, 0.2); }

/* Search */
.search-input {
    border-color: rgba(212, 160, 23, 0.25);
    background: rgba(212, 160, 23, 0.05);
}
.search-input:focus {
    border-color: #d4a017;
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15);
}
.search-btn {
    background: linear-gradient(135deg, #d4a017, #c0392b);
    color: #1a0e0a;
}
.search-btn:hover {
    box-shadow: 0 6px 20px rgba(212, 160, 23, 0.5);
}

/* Filter pills */
.filter-pill {
    border-color: rgba(212, 160, 23, 0.2);
    background: rgba(212, 160, 23, 0.05);
    color: var(--text);
}
.filter-pill.active {
    background: linear-gradient(135deg, #d4a017, #c0392b);
    color: #1a0e0a;
}
.filter-pill:hover { border-color: #d4a017; background: rgba(212, 160, 23, 0.1); }
.filter-select option { background: #1a0e0a; color: #f5e8d0; }

/* Cards créatures */
.creature-card {
    background: linear-gradient(135deg, rgba(42, 10, 10, 0.6), rgba(74, 16, 16, 0.4));
    border: 1px solid rgba(212, 160, 23, 0.25);
    border-radius: 14px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}
.creature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1px;
    background: linear-gradient(135deg, transparent, rgba(212,160,23,0.4), transparent);
    -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: 0;
    transition: opacity 0.3s;
}
.creature-card:hover {
    transform: translateY(-6px);
    border-color: #d4a017;
    box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 24px rgba(212, 160, 23, 0.25);
}
.creature-card:hover::before { opacity: 1; }

.card-color-zone {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    position: relative;
    overflow: hidden;
}
.card-color-zone::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 60%);
}

.card-rarity-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(212, 160, 23, 0.4);
    z-index: 2;
}

.card-body { padding: 1rem 1.1rem 1.1rem; }

.card-name {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #f5e8d0;
    margin-bottom: 0.05rem;
}
.card-chinese {
    font-family: 'Fredoka', serif;
    color: #d4a017;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.1rem;
}
.card-pinyin {
    font-style: italic;
    color: rgba(212, 160, 23, 0.7);
    font-size: 0.78rem;
    margin-bottom: 0.7rem;
    letter-spacing: 0.05em;
}
.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.7rem;
}
.card-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(212, 160, 23, 0.1);
    border: 1px solid rgba(212, 160, 23, 0.25);
    color: rgba(245, 232, 208, 0.85);
}
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: rgba(245, 232, 208, 0.7);
    padding-top: 0.6rem;
    border-top: 1px solid rgba(212, 160, 23, 0.15);
}

/* Modal popup */
.modal-overlay { background: rgba(10, 4, 4, 0.88); }
.modal {
    background: var(--popup-bg);
    color: var(--popup-text);
    border: 2px solid #d4a017;
}

.detail-section-title { color: var(--popup-terra); }
.detail-box { background: var(--popup-beige); border-color: var(--popup-border); }
.collector-note { background: var(--popup-beige); border-left-color: var(--popup-terra); }

/* Pills section feng shui */
.fs-function-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 4px 12px;
    background: linear-gradient(135deg, #faf0e0, #f0e0c0);
    border: 1px solid #d4a017;
    border-radius: 14px;
    font-size: 0.82rem;
    color: #8b3a2b;
    font-weight: 600;
}
.fs-element-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 4px 12px;
    background: #fff;
    border: 1.5px solid;
    border-radius: 14px;
    font-size: 0.8rem;
    font-weight: 500;
}
.fs-direction-pill {
    background: #f5ead0;
    border: 1px solid #c08040;
    color: #8b3a2b;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 0.82rem;
}
.fs-material-pill {
    background: rgba(0, 168, 132, 0.1);
    border: 1px solid #00a884;
    color: #006649;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 0.82rem;
}

.modal-title-zh {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0.2rem;
    letter-spacing: 0.1em;
}
.modal-title-pinyin {
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin-top: 0.1rem;
}

/* Bottom nav */
.bottom-nav {
    background: rgba(10, 4, 4, 0.9);
    border-top: 1px solid rgba(212, 160, 23, 0.3);
}
.nav-item.active { color: #d4a017; }

/* Back link */
.back-link {
    background: rgba(212, 160, 23, 0.05);
    border-color: rgba(212, 160, 23, 0.3);
    color: rgba(245, 232, 208, 0.75);
}
.back-link:hover {
    color: #d4a017;
    background: rgba(212, 160, 23, 0.12);
    box-shadow: 0 0 14px rgba(212, 160, 23, 0.3);
}

/* Footer */
.site-footer a { color: #d4a017; }

/* Hardness filter caché (pas de sens en feng shui) */
.hardness-filter { display: none; }
.filter-toggle { display: none; }