/* === FLASHCARD STUDY SYSTEM — standalone lesson page === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --fc-olive-dark: #2c3a14;
  --fc-olive: #46591f;
  --fc-green: #16a34a;
  --fc-green-dark: #166534;
  --fc-bg-top: #101708;
  --fc-bg-bottom: #0a0f05;
  --fc-text: #f2f5ec;
  --fc-muted: #b9c4a8;
  --radius: 12px;
}

html { height: 100%; }

body {
  font-family: 'Barlow Condensed', 'Highway Gothic', 'Arial Narrow', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  letter-spacing: .02em;
  min-height: 100vh;
  color: var(--fc-text);
  background: linear-gradient(180deg, var(--fc-bg-top) 0%, var(--fc-bg-bottom) 100%);
  line-height: 1.5;
  isolation: isolate;
}

body::before {
  content: '';
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background-image: url('../Images/Forrest BG Dark.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: -1;
  pointer-events: none;
}

/* ── Navigation bar ─────────────────────────────────────────── */
.fc-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 1.25rem;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.fc-nav-brand { display: inline-flex; align-items: center; gap: .45rem; color: #fff; font-size: 1.4rem; text-decoration: none; letter-spacing: .03em; }
/* Brand logo renders at 100% of its original file size (no scaling) */
.brand-logo { height: auto; width: auto; }
.fc-nav-brand .brand-logo { height: 26px; width: auto; }
.fc-nav-brand:hover { opacity: .85; }
.fc-nav-right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fc-nav-links { display: flex; gap: .25rem; flex-wrap: wrap; }
.fc-nav-links a {
  color: var(--fc-muted); text-decoration: none; font-size: .95rem;
  padding: .35rem .85rem; border-radius: 99px; transition: background .2s ease, color .2s ease;
}
.fc-nav-links a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.fc-nav-links a.active { background: var(--fc-green-dark); color: #fff; }
/* "About" info icon — circle with a lowercase i */
.fc-nav-info { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; flex-shrink: 0; transition: background .2s ease, transform .2s ease; }
.fc-nav-info:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06); }
.fc-nav-info.active { background: var(--fc-green-dark); }
.fc-nav-info svg { display: block; }
/* "Leaderboard" crown icon */
.fc-nav-crown { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; flex-shrink: 0; transition: background .2s ease, transform .2s ease; }
.fc-nav-crown:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06); }
.fc-nav-crown svg { display: block; }
/* "Buy Me A Coffee" mug icon */
.fc-nav-coffee { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; flex-shrink: 0; transition: background .2s ease, transform .2s ease; }
.fc-nav-coffee:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06); }
.fc-nav-coffee.active { background: var(--fc-green-dark); }
.fc-nav-coffee svg { display: block; }

/* "Home" house icon — routes to the user's chosen state page */
.fc-nav-home { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; flex-shrink: 0; transition: background .2s ease, transform .2s ease; }
.fc-nav-home:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06); }
.fc-nav-home.active { background: var(--fc-green-dark); }
.fc-nav-home svg { display: block; }

/* Language selector — custom dropdown (consistent with the nav pills) */
.top-bar-lang { position: relative; }
.top-bar-lang-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .85rem; border-radius: 99px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); color: #fff;
  font-size: .9rem; cursor: pointer; transition: background .2s ease;
}
.top-bar-lang-btn:hover { background: rgba(255, 255, 255, .2); }
.top-bar-lang-btn:focus-visible { outline: 2px solid var(--fc-green); outline-offset: 1px; }
.top-bar-lang-btn svg { flex-shrink: 0; opacity: .7; transition: transform .18s ease; }
.top-bar-lang.open .top-bar-lang-btn > svg { transform: rotate(180deg); }
/* Flag icons (button + dropdown options) — sized like the landing top bar */
.lang-flag { width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); flex-shrink: 0; }
#lang-current-label { display: inline-flex; align-items: center; }
.lang-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 132px; margin: 0; padding: .3rem; list-style: none;
  background: rgba(15, 20, 28, .97); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5); z-index: 60;
}
.top-bar-lang.open .lang-menu { display: block; }
.lang-menu li[role="option"] { display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border-radius: 8px; color: #fff; font-size: .9rem; cursor: pointer; white-space: nowrap; transition: background .12s ease, color .12s ease; }
.lang-menu li[role="option"]:hover, .lang-menu li[role="option"]:focus { background: rgba(255, 255, 255, .12); outline: none; }
.lang-menu li[role="option"][aria-selected="true"] { color: var(--fc-green); font-weight: 700; }

/* Sign In pill — matches the landing top bar (port of style.css .top-bar-auth) */
.top-bar-auth { display: flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 99px; background: rgba(255, 255, 255, .1); transition: background .2s ease; cursor: pointer; user-select: none; }
.top-bar-auth:hover { background: rgba(255, 255, 255, .2); }
.top-bar-auth-icon { color: #fff; filter: brightness(0) invert(1); font-size: 1rem; line-height: 1; display: inline-block; }
.top-bar-auth-label { color: #fff; font-size: .85rem; letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); white-space: nowrap; }

/* ── Progress bar (top) ─────────────────────────────────────── */
.fc-progress-wrap {
  max-width: 720px; margin: 1.25rem auto .25rem; padding: 0 1rem;
  display: flex; align-items: center; gap: .9rem;
}
.fc-progress-track {
  flex: 1; height: 10px; border-radius: 99px; overflow: hidden;
  background: rgba(255, 255, 255, .12);
}
.fc-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--fc-green-dark), var(--fc-green));
  border-radius: 99px; transition: width .4s ease;
}
.fc-progress-label { color: var(--fc-muted); font-size: .85rem; white-space: nowrap; }

/* ── Topic dropdown (single pill select, matches the tab look) ─ */
.fc-topic-row { max-width: 900px; margin: 1rem auto; padding: 0 1rem; display: flex; justify-content: center; }
#topicSelect {
  -webkit-appearance: none; appearance: none;
  padding: .45rem 2.4rem .45rem 1.1rem; border-radius: 99px; cursor: pointer;
  font-family: inherit; font-size: .92rem; color: var(--fc-muted);
  background-color: rgba(0, 0, 0, .6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b9c4a8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  border: 1px solid rgba(255, 255, 255, .14); outline: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#topicSelect:hover { background-color: rgba(0, 0, 0, .78); color: #fff; }
#topicSelect:focus { border-color: var(--fc-green); }
#topicSelect option { color: var(--fc-text); background: #101708; font-family: inherit; }
#topicSelect option:checked { background: var(--fc-green-dark); color: #fff; }

/* Tab pill (shared with the scenarios difficulty buttons) */
.fc-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem 1rem; border-radius: 99px; cursor: pointer;
  font-size: .92rem; color: var(--fc-muted);
  background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .14);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.fc-tab:hover { background: rgba(0, 0, 0, .78); color: #fff; }
.fc-tab.active { background: var(--fc-green-dark); border-color: var(--fc-green); color: #fff; }

/* ── Card stage ─────────────────────────────────────────────── */
.fc-stage { max-width: 720px; margin: 1.5rem auto 3rem; padding: 0 1rem; text-align: center; }

.fc-card-scene { perspective: 800px; width: min(600px, 100%); margin: 0 auto; }
.fc-card {
  position: relative; width: 100%; height: clamp(300px, 48vw, 380px);
  transform-style: preserve-3d; transition: transform .4s ease-in-out; cursor: pointer;
}
.fc-card.flipped { transform: rotateY(180deg); }
.fc-card:focus-visible { outline: 3px solid var(--fc-green); outline-offset: 4px; border-radius: var(--radius); }

.fc-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: clamp(2.25rem, 6vw, 2.75rem); border-radius: var(--radius); text-align: center;
  box-shadow: 0 6px 28px rgba(34, 85, 17, .45), 0 2px 8px rgba(0, 0, 0, .35);
}
/* Black sign frame — real border so inner corners are rounded (inset shadows can't be) */
.fc-front::before, .fc-back::before {
  content: ''; position: absolute; inset: 14px;
  border: 18px solid #000; border-radius: 26px;
  pointer-events: none;
}
.fc-face > * { position: relative; z-index: 1; }
/* Question side — bright sign yellow fill */
.fc-front { background-color: #ffd400; }
/* Answer side — bright sign orange fill */
.fc-back {
  background-color: #ff8c00;
  transform: rotateY(180deg);
}

/* Sign-style text contrast on the yellow/orange faces */
.fc-front .fc-text, .fc-back .fc-text { color: #14160a; }
.fc-back .fc-detail { color: rgba(20, 22, 10, .78); }
.fc-front .fc-flip-hint { color: rgba(0, 0, 0, .5); }
.fc-front .fc-cat-badge, .fc-back .fc-cat-badge { background: #000; color: #fff; }

.fc-cat-badge {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: #dcead0; background: rgba(0, 0, 0, .35);
  padding: .3rem .9rem; border-radius: 99px;
}
.fc-text { font-size: clamp(1.25rem, 4vw, 1.7rem); line-height: 1.35; font-weight: 700; }
.fc-answer { color: #eafff0; }
.fc-detail { font-size: .98rem; color: var(--fc-muted); max-width: 90%; }
.fc-flip-hint { position: absolute; bottom: 2.6rem; font-size: .78rem; color: rgba(255, 255, 255, .45); letter-spacing: .04em; }

/* ── Test-Yourself toggle ───────────────────────────────────── */
.fc-test-toggle {
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
  margin-top: 1.25rem; user-select: none; color: var(--fc-muted); font-size: .98rem;
}
.fc-test-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.fc-switch {
  width: 46px; height: 25px; border-radius: 99px; flex-shrink: 0;
  background: rgba(255, 255, 255, .18); position: relative; transition: background .2s ease;
}
.fc-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; transition: transform .2s ease;
}
.fc-test-toggle input:checked + .fc-switch { background: var(--fc-green); }
.fc-test-toggle input:checked + .fc-switch::after { transform: translateX(21px); }
.fc-test-toggle input:focus-visible + .fc-switch { outline: 3px solid var(--fc-green); outline-offset: 2px; }

/* ── Controls bar ───────────────────────────────────────────── */
.fc-controls { display: flex; justify-content: center; gap: .6rem; margin-top: 1.4rem; flex-wrap: wrap; }
.fc-btn {
  padding: .65rem 1.3rem; font-size: 1rem; color: var(--fc-text); cursor: pointer;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px; transition: background .2s ease, transform .1s ease, opacity .2s ease;
}
.fc-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .17); }
.fc-btn:active:not(:disabled) { transform: translateY(1px); }
.fc-btn:disabled { opacity: .35; cursor: default; }
.fc-btn-primary { background: var(--fc-green-dark); border-color: var(--fc-green); color: #fff; min-width: 120px; }
.fc-btn-primary:hover:not(:disabled) { background: var(--fc-green); }

/* ── Test-mode guess row ────────────────────────────────────── */
.fc-guess-row { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1.1rem; flex-wrap: wrap; }
.fc-guess-prompt { color: var(--fc-muted); font-size: .95rem; }
.fc-btn-yes { background: rgba(22, 163, 74, .25); border-color: var(--fc-green); }
.fc-btn-yes:hover:not(:disabled) { background: var(--fc-green-dark); }
.fc-btn-no { background: rgba(220, 38, 38, .22); border-color: #dc2626; }
.fc-btn-no:hover:not(:disabled) { background: rgba(220, 38, 38, .45); }

/* ── Counter / empty state ──────────────────────────────────── */
.fc-counter { margin-top: 1.1rem; color: var(--fc-muted); font-size: .9rem; letter-spacing: .04em; }
.fc-empty { color: var(--fc-muted); font-size: 1.15rem; padding: 2rem 0; }

/* ── Responsive (320px+) ────────────────────────────────────── */
@media (max-width: 480px) {
  .fc-nav { flex-direction: column; align-items: stretch; text-align: center; gap: .5rem; }
  .fc-controls { gap: .4rem; }
  .fc-btn { padding: .6rem .9rem; font-size: .92rem; }
}

/* ── Reward toast (completion reward notification) ──────────── */
.fc-reward-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: 200; max-width: min(92vw, 480px); text-align: center;
  background: rgba(20, 30, 12, .96); color: #fde68a;
  border: 1px solid rgba(251, 191, 36, .75); border-radius: 12px;
  padding: .8rem 1.4rem; font-size: .98rem; letter-spacing: .02em;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .55);
  animation: fcToastIn .35s ease both; transition: opacity .4s ease;
}
.fc-reward-toast.fade { opacity: 0; }
@keyframes fcToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Auth modal + toasts (ported from style.css so Sign In works like the landing page) ── */
.modal-overlay {
  /* Landing theme vars, scoped here so the light modal doesn't leak into the dark lesson pages */
  --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-400: #94a3b8; --gray-500: #64748b;
  --gray-700: #334155; --gray-800: #1e293b; --primary: #16a34a; --primary-dark: #166534;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 16px rgba(0,0,0,.10); --shadow-lg: 0 10px 40px rgba(0,0,0,.12);
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.55);
  z-index: 9998; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px);
}
.modal-content { position: relative; background: #fff; border-radius: 16px; padding: 2.5rem 2rem; box-shadow: var(--shadow-lg); max-width: 400px; width: 92%; animation: fadeUp .3s ease both; color: var(--gray-800); }
.modal-sm { min-height: auto; }
.modal-close { position: absolute; top: .75rem; right: .85rem; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--gray-400); padding: .2rem .5rem; border-radius: 8px; transition: background .2s ease, color .2s ease; }
.modal-close:hover { background: var(--gray-100); color: var(--gray-700); }
.modal-tabs { display: flex; gap: .25rem; margin-bottom: 1.5rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--gray-200); background: var(--gray-100); padding: 3px; }
.tab-btn { flex: 1; padding: .6rem 0; font-size: .95rem; text-align: center; cursor: pointer; border: none; background: transparent; color: var(--gray-500); white-space: nowrap; transition: background .2s ease, color .2s ease; }
.tab-btn.active { background: #fff; color: var(--primary-dark); box-shadow: var(--shadow-sm); }
.modal-content input[type="text"],
.modal-content input[type="password"] { width: 100%; padding: .7rem 1rem; margin-bottom: .75rem; border-radius: 9px; border: 1.5px solid var(--gray-200); font-size: 1rem; transition: border-color .2s ease, box-shadow .2s ease; }
.modal-content input:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.15); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.8rem; font-size: 1rem; border: none; border-radius: 8px; cursor: pointer; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; user-select: none; text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--primary); color: #fff; }
.modal-overlay .btn-primary:hover { background: var(--primary-dark); box-shadow: 0 4px 14px rgba(22,101,52,.35); }
.btn-secondary { background: var(--gray-100); color: var(--gray-700); }
.modal-overlay .btn-secondary:hover { background: var(--gray-200); }

#toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 99999; display: flex; flex-direction: column-reverse; gap: .5rem; pointer-events: none; }
.toast { padding: .75rem 1.25rem; border-radius: 10px; color: #fff; font-size: .95rem; box-shadow: 0 4px 16px rgba(0,0,0,.1); animation: toastIn .3s ease both; pointer-events: auto; max-width: 420px; background: #334155; }
.toast-success { background: #16a34a; }
.toast-error { background: #dc2626; }
.toast-info { background: #334155; }
.toast.success { background: #16a34a; }
.toast.info    { background: #6366f1; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: none; } }

/* === JKW FOOTER LOGO (all pages) — pinned to the very bottom of the browser window at any size, 15px from the left edge; no auto-scale, right side runs off-page on narrow screens === */
.jkw-footer { position: fixed; left: 0; bottom: 0; width: 100%; display: flex; justify-content: flex-start; z-index: 950; pointer-events: none; opacity: .85; }
.jkw-footer img { display: block; height: 26px; width: auto; margin: 0 0 0 15px; filter: grayscale(1) brightness(.5); }
/* Continues the greyscale bar (SVG Layer_2, #b02c2c → #484848 → #242424 at 50% brightness) from the image's right edge to the viewport's right edge at any window width */
.jkw-footer::after { content: ''; position: absolute; left: 1201px; right: 0; top: 0; bottom: 0; background: #242424; clip-path: polygon(6.5px 0, 100% 0, 100% 100%, 0 100%); }

/* Mobile phones get the compressed WebP forest background (1.3MB → 61KB) */
@media (max-width: 768px) {
  body::before { background-image: url('../Images/mobile/forrest-bg-dark.webp'); }

  /* Sign In button is icon-only on mobile (matches the landing top bar) */
  .top-bar-auth { padding: .35rem .7rem; }
  .top-bar-auth .top-bar-auth-label { display: none; }
}