/* Fungilingo — glossário e quiz de Micologia */
.fl-hero h2 { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.fl-logo { font-size: 1.1em; }
.fl-breadcrumb { position: relative; z-index: 2; display: flex; justify-content: center; gap: .5rem; margin-bottom: 1rem; color: #fff; opacity: .8; font-size: var(--font-size-sm); }
.fl-breadcrumb a { color: #fff; }
.fl-breadcrumb .fa-chevron-right { font-size: .6rem; margin-top: 5px; }

/* Progresso */
.fl-stats-wrap { padding: var(--space-xl) 0 0; }
.fl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.fl-stat { display: flex; align-items: center; gap: var(--space-md); background: var(--white); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-lg); box-shadow: var(--shadow-sm); }
.fl-stat > i { font-size: 1.5rem; color: var(--primary); width: 1.8rem; text-align: center; }
.fl-stat .fa-fire { color: #e67e22; }
.fl-stat .fa-bolt { color: #f1b400; }
.fl-stat strong { display: block; font-size: var(--font-size-xl); line-height: 1.1; color: var(--dark); }
.fl-stat span { font-size: var(--font-size-xs); color: var(--gray); text-transform: uppercase; letter-spacing: .04em; }
.fl-levelbar { height: 8px; background: var(--light-gray); border-radius: var(--radius-full); margin-top: var(--space-md); overflow: hidden; }
.fl-levelbar > div { height: 100%; width: 0; background: var(--gradient-primary); transition: width .6s ease; }
.fl-levelhint { font-size: var(--font-size-xs); color: var(--gray); margin: var(--space-xs) 0 0; text-align: right; }

/* Abas */
.fl-main { padding: var(--space-xl) 0 var(--space-3xl); }
.fl-tabs { display: flex; gap: var(--space-sm); justify-content: center; margin-bottom: var(--space-xl); flex-wrap: wrap; }
.fl-tab { border: 2px solid var(--light-gray); background: var(--white); color: var(--dark-gray); padding: .7rem 1.4rem; border-radius: var(--radius-full); font-weight: 600; font-family: var(--font-heading); cursor: pointer; font-size: var(--font-size-base); transition: all var(--transition-base); }
.fl-tab:hover { border-color: var(--primary); color: var(--primary); }
.fl-tab.active { background: var(--gradient-primary); color: #fff; border-color: transparent; box-shadow: var(--shadow-md); }

/* Glossário */
.fl-search { position: relative; max-width: 640px; margin: 0 auto var(--space-lg); }
.fl-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--gray); }
.fl-search input { width: 100%; padding: .9rem 1rem .9rem 2.8rem; border: 2px solid var(--light-gray); border-radius: var(--radius-full); font-size: var(--font-size-base); font-family: var(--font-body); background: var(--white); }
.fl-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(42, 98, 61, .12); }
.fl-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; margin-bottom: var(--space-md); }
.fl-chip { border: 1px solid var(--light-gray); background: var(--white); color: var(--dark-gray); border-radius: var(--radius-full); padding: .35rem .85rem; font-size: var(--font-size-sm); cursor: pointer; }
.fl-chip:hover { border-color: var(--primary); }
.fl-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.fl-count { text-align: center; color: var(--gray); font-size: var(--font-size-sm); margin-bottom: var(--space-lg); }
.fl-terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-lg); }
.fl-term { min-width: 0; overflow-wrap: anywhere; background: var(--white); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); border-top: 4px solid var(--primary); display: flex; flex-direction: column; scroll-margin-top: 120px; }
.fl-term.learned { border-top-color: #2ecc71; }
.fl-term.flash { animation: flFlash 1.6s ease; }
@keyframes flFlash { 0%, 100% { box-shadow: var(--shadow-sm); } 30% { box-shadow: 0 0 0 4px rgba(46, 204, 113, .45); } }
.fl-term-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.fl-term h3 { font-size: var(--font-size-lg); color: var(--primary); margin: 0; }
.fl-cat { font-size: var(--font-size-xs); background: var(--primary-light-bg); color: var(--primary); padding: .15rem .6rem; border-radius: var(--radius-full); white-space: nowrap; font-weight: 600; }
.fl-term p { color: var(--dark-gray); line-height: 1.6; margin: 0 0 var(--space-md); }
.fl-term-refs { font-size: var(--font-size-sm); background: var(--light); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
.fl-term-refs > span { font-weight: 600; color: var(--dark); display: block; margin-bottom: .25rem; }
.fl-term-refs ul { margin: 0; padding-left: 1.1rem; }
.fl-term-refs li { margin: .2rem 0; line-height: 1.4; }
.fl-term-refs a { color: var(--primary); }
.fl-term-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.fl-learn { border: 2px solid var(--primary); background: transparent; color: var(--primary); border-radius: var(--radius-full); padding: .35rem .9rem; font-weight: 600; cursor: pointer; font-size: var(--font-size-sm); }
.fl-learn:hover { background: var(--primary-light-bg); }
.fl-term.learned .fl-learn { background: #2ecc71; border-color: #2ecc71; color: #fff; }
.fl-report { font-size: var(--font-size-sm); color: var(--gray); text-decoration: none; cursor: pointer; }
.fl-report:hover { color: #c0392b; }
.fl-empty { text-align: center; color: var(--gray); padding: var(--space-xl); }

/* Cartões / Quiz */
.fl-card { background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-2xl); max-width: 760px; margin: 0 auto; text-align: center; }
.fl-big-icon { font-size: 3.5rem; line-height: 1; margin-bottom: var(--space-md); }
.fl-card h3 { color: var(--primary); }
.fl-rules { list-style: none; padding: 0; margin: var(--space-lg) auto; display: inline-flex; flex-direction: column; gap: .5rem; text-align: left; }
.fl-rules i { color: var(--primary); width: 1.2rem; }
.fl-btn { background: var(--gradient-primary); color: #fff; border: none; border-radius: var(--radius-full); padding: .85rem 1.8rem; font-weight: 700; font-size: var(--font-size-base); cursor: pointer; font-family: var(--font-heading); box-shadow: 0 4px 0 rgba(0, 0, 0, .15); transition: transform .1s, box-shadow .1s; display: inline-flex; align-items: center; gap: .5rem; }
.fl-btn:hover { transform: translateY(-1px); }
.fl-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.fl-btn:disabled { opacity: .6; cursor: wait; }
.fl-btn-ghost { background: var(--white); color: var(--primary); border: 2px solid var(--primary); box-shadow: none; }
.fl-error { color: #c0392b; margin-top: var(--space-md); }
.fl-muted { color: var(--gray); }

.fl-quiz-top { display: flex; align-items: center; gap: var(--space-md); }
.fl-progress { flex: 1; height: 14px; background: var(--light-gray); border-radius: var(--radius-full); overflow: hidden; }
.fl-progress > div { height: 100%; width: 0; background: linear-gradient(90deg, #2ecc71, #27ae60); border-radius: var(--radius-full); transition: width .4s ease; }
.fl-score { font-weight: 800; color: #d39e00; font-size: var(--font-size-lg); min-width: 4.5rem; text-align: right; }
.fl-qmeta { color: var(--gray); font-size: var(--font-size-sm); margin: var(--space-md) 0 var(--space-xs); text-align: left; }
.fl-question { text-align: left; font-size: var(--font-size-xl); line-height: 1.4; color: var(--dark) !important; margin-bottom: var(--space-lg); }
.fl-options { display: grid; gap: var(--space-sm); }
.fl-option { display: flex; align-items: center; gap: var(--space-md); text-align: left; width: 100%; background: var(--white); border: 2px solid var(--light-gray); border-bottom-width: 4px; border-radius: var(--radius-lg); padding: .9rem 1rem; font-size: var(--font-size-base); cursor: pointer; color: var(--dark); transition: border-color .15s, background .15s; font-family: var(--font-body); }
@media (hover: hover) { .fl-option:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-light-bg); } }
.fl-option:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.fl-option kbd { flex: 0 0 auto; width: 1.8rem; height: 1.8rem; border-radius: var(--radius-sm); border: 1px solid var(--light-gray); display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); color: var(--gray); font-family: var(--font-body); }
.fl-option.correct { border-color: #2ecc71; background: #eafaf1; }
.fl-option.wrong { border-color: #e74c3c; background: #fdecea; }
.fl-option:disabled { cursor: default; }
.fl-feedback { margin-top: var(--space-lg); border-radius: var(--radius-lg); padding: var(--space-lg); text-align: left; }
.fl-feedback.ok { background: #eafaf1; border: 2px solid #2ecc71; }
.fl-feedback.no { background: #fdecea; border: 2px solid #e74c3c; }
.fl-feedback-head { font-size: var(--font-size-lg); margin-bottom: var(--space-xs); color: var(--dark); }
.fl-feedback.ok .fl-feedback-head i { color: #27ae60; }
.fl-feedback.no .fl-feedback-head i { color: #c0392b; }
.fl-feedback-head span { float: right; font-weight: 800; color: #d39e00; }
.fl-feedback p { margin: 0 0 var(--space-md); color: var(--dark-gray); line-height: 1.55; }
.fl-feedback-actions { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.fl-feedback-actions .fl-btn { margin-left: auto; }
.fl-feedback-actions a { font-size: var(--font-size-sm); }

.fl-end-score { font-size: var(--font-size-lg); }
.fl-end-score strong { font-size: var(--font-size-3xl); color: var(--primary); }
.fl-submit { margin: var(--space-lg) auto 0; max-width: 460px; text-align: left; }
.fl-submit label { font-weight: 600; display: block; margin-bottom: .4rem; }
.fl-submit > div { display: flex; gap: var(--space-sm); }
.fl-submit input { flex: 1; min-width: 0; padding: .8rem 1rem; border: 2px solid var(--light-gray); border-radius: var(--radius-full); font-size: var(--font-size-base); }
.fl-submit small { color: var(--gray); display: block; margin-top: .4rem; }
.fl-rank-msg { font-size: var(--font-size-lg); font-weight: 700; color: var(--primary); margin-top: var(--space-lg); }
.fl-end-actions { display: flex; gap: var(--space-sm); justify-content: center; margin-top: var(--space-xl); flex-wrap: wrap; }

/* Ranking */
.fl-rank-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.fl-rank-head h3 { margin: 0; }
.fl-rank-period { display: inline-flex; background: var(--light); border-radius: var(--radius-full); padding: 3px; }
.fl-rank-period button { border: none; background: transparent; padding: .4rem .9rem; border-radius: var(--radius-full); cursor: pointer; font-weight: 600; color: var(--dark-gray); }
.fl-rank-period button.active { background: var(--gradient-primary); color: #fff; }
.fl-ranking { list-style: none; padding: 0; margin: 0; text-align: left; }
.fl-ranking li { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: var(--space-md); padding: .7rem .9rem; border-radius: var(--radius-md); }
.fl-ranking li:nth-child(odd) { background: var(--light); }
.fl-ranking li.me { outline: 2px solid var(--primary); }
.fl-ranking .pos { font-weight: 800; text-align: center; color: var(--gray); font-size: var(--font-size-lg); }
.fl-ranking .name { font-weight: 600; color: var(--dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-ranking .name small { display: block; font-weight: 400; color: var(--gray); white-space: normal; }
.fl-ranking .pts { font-weight: 800; color: #d39e00; }
.fl-ranking li.fl-muted { display: block; text-align: center; background: none; }
.fl-rank-note { font-size: var(--font-size-xs); margin-top: var(--space-md); }
.fl-footnote { text-align: center; margin-top: var(--space-2xl); color: var(--gray); }

/* Toast de XP */
.fl-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--dark); color: #fff; padding: .7rem 1.2rem; border-radius: var(--radius-full); font-weight: 700; opacity: 0; transition: all .3s ease; z-index: 10000; pointer-events: none; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
.fl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 768px) {
    .fl-stats { grid-template-columns: repeat(2, 1fr); }
    .fl-stat { padding: var(--space-sm) var(--space-md); }
    .fl-card { padding: var(--space-lg); }
    .fl-terms { grid-template-columns: minmax(0, 1fr); }
    .fl-question { font-size: var(--font-size-lg); }
    .fl-tab { padding: .55rem 1rem; font-size: var(--font-size-sm); }
    .fl-feedback-actions .fl-btn { margin-left: 0; width: 100%; justify-content: center; }
    .fl-submit > div { flex-direction: column; }
}

/* Apelido */
.fl-player { text-align: left; font-size: var(--font-size-sm); color: var(--primary); font-weight: 600; margin: var(--space-sm) 0 0; }
#fl-start-form { margin-bottom: var(--space-sm); }
.fl-submit input[aria-invalid="true"] { border-color: #e74c3c; }