/* ============================================================
   TUDOD-E? / SZÓFORGATÓ – Közös alap
   Minden oldal betölti ezt a fájlt.
============================================================ */

:root {
    /* ══ 3 FŐSZÍN ══ */
    --szin-smaragd:     #1B4D3E;   /* navbar, fejlécek, másodlagos gomb */
    --szin-bordo:       #801818;   /* elsődleges CTA gombok, kiemelés */
    --szin-arany:       #D4AF37;   /* rangok, arany elemek */

    /* ══ MÁSODLAGOS SZÍNEK ══ */
    --szin-nep-piros:   #9B2335;   /* hover állapot, népi akcentus */
    --szin-bot-zold:    #2E7D4F;   /* siker, helyes válasz */
    --szin-tuz:         #E8821A;   /* figyelem, warning */

    /* ══ HÁTTÉRSZÍNEK ══ */
    --hatter-pergamen:  #FBF9F4;   /* főoldal és játékoldal alap */
    --hatter-lenvaszon: #F2E8D9;   /* kártyák mélyebb háttere */
    --hatter-kartya:    #FFFFFF;   /* Bootstrap kártyák */
    --hatter-sotet:     #1A2238;   /* sötét szekciók */

    /* ══ SZÖVEGSZÍNEK ══ */
    --szoveg-alap:      #1A2238;
    --szoveg-halvany:   #5C6470;
    --szoveg-feher:     #FAF6EF;

    /* ══ ÁLLAPOTSZÍNEK (játék) ══ */
    --allapot-helyes:   #2E7D4F;
    --allapot-hibas:    #C0392B;
    --allapot-kihagyott:#D4AF37;
    --allapot-megold:   #2E7D4F;

    /* ══ SZEGÉLYEK ══ */
    --szeg-vilagos:     #E8DFD0;
    --szeg-sotet:       #2a2d3e;
}

/* ══ ALAP ══ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--hatter-pergamen);
    color: var(--szoveg-alap);
    min-height: 100vh;
}

/* Pergamen textúra – finom SVG zaj overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ══ GOMB HIERARCHIA ══ */

/* 1. Elsődleges – bordó */
.btn-elso {
    background: var(--szin-bordo);
    color: var(--szoveg-feher);
    border: none;
    border-radius: 8px;
    font-weight: 700;
    padding: 0.5rem 1.4rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.2s, transform 0.15s;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
}
.btn-elso:hover {
    background: var(--szin-nep-piros);
    color: var(--szoveg-feher);
    transform: translateY(-1px);
}

/* 2. Másodlagos – smaragd */
.btn-masod {
    background: var(--szin-smaragd);
    color: var(--szoveg-feher);
    border: none;
    border-radius: 8px;
    font-weight: 700;
    padding: 0.5rem 1.4rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.2s;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
}
.btn-masod:hover { background: #143d30; color: var(--szoveg-feher); }

/* 3. Körvonalás – semleges */
.btn-korvonal {
    background: transparent;
    color: var(--szoveg-halvany);
    border: 1px solid var(--szeg-vilagos);
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: border-color 0.2s, color 0.2s;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
}
.btn-korvonal:hover {
    border-color: var(--szin-smaragd);
    color: var(--szin-smaragd);
}

/* Játékoldal gombok (sötét témán is működnek) */
.btn-kesz {
    background: var(--szin-bordo);
    color: var(--szoveg-feher);
    border: none;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.88rem;
    padding: 0.45rem 1.1rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.btn-kesz:hover { background: var(--szin-nep-piros); color: var(--szoveg-feher); }

.btn-sec {
    background: transparent;
    color: var(--szoveg-halvany);
    border: 1px solid var(--szeg-vilagos);
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 700;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.btn-sec:hover { color: var(--szin-smaragd); border-color: var(--szin-smaragd); }

/* ══ CHIP ══ */
.chip {
    background: var(--hatter-lenvaszon);
    border: 1px solid var(--szeg-vilagos);
    border-radius: 20px;
    padding: 0.2rem 0.8rem;
    font-size: 0.78rem;
    color: var(--szoveg-halvany);
}
.chip strong { color: var(--szin-bordo); }

/* ══ UTILITY ══ */
.text-arany   { color: var(--szin-arany)   !important; }
.text-smaragd { color: var(--szin-smaragd) !important; }
.text-bordo   { color: var(--szin-bordo)   !important; }
.bg-pergamen  { background-color: var(--hatter-pergamen) !important; }
.bg-lenvaszon { background-color: var(--hatter-lenvaszon) !important; }
.fw-black     { font-weight: 900; }