/* Theme D: Parchment look + Playfair/Garamond fonts */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Playfair+Display:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap');

:root {
  /* Fonts */
  --font-body: 'EB Garamond', serif;
  --font-heading: 'Playfair Display', serif;

  /* Core colors */
  --bg: #f5f0e8;
  --bg-header: #ebe5d9;
  --bg-card: #faf6ef;
  --text: #3e3428;
  --text-heading: #2c2418;
  --text-muted: #8b7d6b;
  --text-detail: #6b5d4d;
  --accent: #8b6914;
  --border: #c4b8a4;
  --border-light: #d4c9b5;

  /* Buttons */
  --btn-bg: #8b7355;
  --btn-text: #faf6ef;
  --btn-hover: #7a6347;

  /* Score/level */
  --score-color: #5c4f3d;
  --level-filled: #8b7355;
  --level-empty: #d4c9b5;
  --btn-icon-color: #7a6b56;

  /* Feedback */
  --fb-correct-bg: #e8f0e0;
  --fb-correct-border: #8aaa6b;
  --fb-correct-text: #3d5a1e;
  --fb-correct-msg: #4a7a2a;
  --fb-wrong-bg: #f5e6d8;
  --fb-wrong-border: #c49a6c;
  --fb-wrong-text: #7a4a1a;
  --fb-other-bg: #f0ebe3;

  /* Knowledge bars */
  --bar-bg: #d4c9b5;
  --bar-tick: #f5f0e8;

  /* Modal */
  --modal-overlay: rgba(62,52,40,0.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text);
       min-height: 100vh; display: flex; flex-direction: column; font-size: 17px; }

.header { display: flex; justify-content: space-between; align-items: center; gap: 0.8em;
          padding: 0.8em 1em; background: var(--bg-header); border-bottom: 1px solid var(--border-light); }
.level-bar-bg { width: 50%; height: 8px; background: var(--bar-bg); border-radius: 4px; overflow: hidden; margin-left: auto; }
.level-bar-fill { height: 100%; background: var(--level-filled); border-radius: 4px; transition: width 0.3s; }
.knowledge-pct { font-family: var(--font-heading); font-size: 0.85em; font-weight: 600; color: var(--score-color); min-width: 8em; text-align: right; white-space: nowrap; }

.main { flex: 1; display: flex; flex-direction: column; padding: 1.2em 1em; max-width: 600px;
        margin: 0 auto; width: 100%; }

.prompt { color: var(--text-muted); font-size: 0.95em; margin-bottom: 1em; font-style: normal; text-transform: uppercase; letter-spacing: 0.05em; }
.question-label { font-family: var(--font-heading); font-size: 1.4em; font-weight: 500; margin-bottom: 0.3em; color: var(--text-heading); }
.question-detail { color: var(--text-detail); font-size: 1em; margin-bottom: 1em; font-style: normal; }
.question-period { color: var(--accent); font-size: 1.05em; margin-bottom: 0.5em; font-style: normal; font-family: var(--font-heading); }
.choices { display: flex; flex-direction: column; gap: 0.5em; }
.choices.grid-years { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.choices.grid-years .choice-btn { justify-content: center; text-align: center; font-size: 0.95em; padding: 1em 0.5em; }
.choice-btn { padding: 0.9em 1em; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-card);
              color: var(--text); font-size: 1.05em; cursor: pointer; text-align: left;
              font-family: inherit; transition: background 0.15s;
              display: flex; justify-content: space-between; align-items: center; }
.choice-btn:active { background: var(--bg-header); }
.choice-btn .date { color: var(--text-muted); font-size: 0.85em; }

.feedback { flex: 1; display: flex; flex-direction: column; }
.fb-choices { margin-bottom: 1em; }
.fb-choice { padding: 0.6em 0.9em; border-radius: 4px; margin-bottom: 0.3em; font-size: 1em; }
.fb-correct { background: var(--fb-correct-bg); border: 1px solid var(--fb-correct-border); color: var(--fb-correct-text); }
.fb-wrong { background: var(--fb-wrong-bg); border: 1px solid var(--fb-wrong-border); color: var(--fb-wrong-text); }
.fb-other { background: var(--fb-other-bg); border: 1px solid var(--border-light); color: var(--text-muted); }
.fb-label { font-family: var(--font-heading); font-size: 1.2em; font-weight: 500; margin-bottom: 0.3em; color: var(--text-heading); }
.fb-desc { color: var(--text-detail); font-size: 0.95em; margin-bottom: 0.5em; }
.fb-hint { color: var(--accent); font-size: 0.95em; margin-bottom: 1.2em; font-style: normal; }
.next-btn { margin-top: auto; margin-bottom: auto; padding: 0.9em; border-radius: 4px; border: 1px solid var(--btn-bg);
            background: var(--btn-bg); color: var(--btn-text); font-size: 1.05em; font-weight: 600;
            cursor: pointer; width: 100%; font-family: var(--font-heading); }
.next-btn:active { background: var(--btn-hover); }

.fb-correct-msg { text-align: center; font-family: var(--font-heading); font-size: 1.4em; font-weight: 500; color: var(--fb-correct-msg);
                  margin-bottom: 1em; padding: 0.5em; }

/* Correct answer toast overlay */
.toast-correct { position: fixed;
                 background: none; border: none;
                 color: #b8895a; font-size: 2.5em;
                 font-family: var(--font-heading); font-weight: 700;
                 z-index: 200; opacity: 0; transition: opacity 0.2s;
                 pointer-events: none; }
.toast-correct.show { opacity: 1; }

.modal-overlay { display: none; position: fixed; inset: 0; background: var(--modal-overlay);
                 z-index: 100; justify-content: center; align-items: center; }
.modal-overlay.open { display: flex; }
.modal { background: var(--bg-card); border-radius: 8px; padding: 1.5em; max-width: 500px;
         width: 90%; max-height: 85vh; overflow-y: auto; border: 1px solid var(--border); }
.modal h2 { margin-bottom: 1em; font-family: var(--font-heading); font-size: 1.2em; color: var(--text); }
.modal-close { float: right; background: none; border: none; color: var(--text-muted); font-size: 1.5em; cursor: pointer; }
.km-period { margin-bottom: 0.8em; }
.km-name { font-weight: 600; font-size: 0.95em; margin-bottom: 0.2em; color: var(--text); }
.km-bar-bg { background: var(--bar-bg); border-radius: 3px; height: 10px; overflow: hidden; position: relative; }
.km-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.km-tick { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bar-tick); z-index: 1; }
.km-prob { font-size: 0.8em; color: var(--text-muted); }
.km-sub { margin-left: 1em; margin-top: 0.3em; font-size: 0.85em; }
.km-sub .km-bar-bg { height: 7px; }

.home-link { color: var(--text-muted); text-decoration: none; font-size: 0.9em; }

/* Menu */
.menu-container { position: relative; }
.btn-menu { background: none; border: 1px solid var(--border); color: var(--btn-icon-color); border-radius: 50%;
            width: 2em; height: 2em; font-size: 0.9em; cursor: pointer;
            font-family: var(--font-heading); font-weight: 700;
            display: flex; align-items: center; justify-content: center; }
.menu-dropdown { display: none; position: absolute; right: 0; top: 2.5em;
                 background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px;
                 min-width: 140px; z-index: 50; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.menu-dropdown.open { display: block; }
.menu-item { display: block; width: 100%; padding: 0.7em 1em; border: none; background: none;
             color: var(--text); font-family: var(--font-body); font-size: 0.95em;
             cursor: pointer; text-align: left; }
.menu-item:hover { background: var(--bg-header); }
.menu-item + .menu-item { border-top: 1px solid var(--border-light); }

/* Theme cards */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; }
.theme-card { border: 2px solid var(--border); border-radius: 6px; padding: 1em;
              cursor: pointer; text-align: center; transition: border-color 0.15s; }
.theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme-card-name { font-family: var(--font-heading); font-size: 1.1em; font-weight: 600; margin-top: 0.5em; color: var(--text); }
.theme-card-preview { height: 60px; border-radius: 4px; border: 1px solid var(--border-light); }

/* === Pop Art theme === */
body.theme-pop {
  --font-body: 'Comic Neue', cursive;
  --font-heading: 'Bangers', cursive;

  --bg: #fff200;
  --bg-header: #ff3b3b;
  --bg-card: #ffffff;
  --text: #1a1a1a;
  --text-heading: #000000;
  --text-muted: #555555;
  --text-detail: #333333;
  --accent: #0057ff;
  --border: #000000;
  --border-light: #333333;

  --btn-bg: #ff3b3b;
  --btn-text: #ffffff;
  --btn-hover: #cc0000;

  --score-color: #ffffff;
  --level-filled: #ffffff;
  --level-empty: rgba(255,255,255,0.4);
  --btn-icon-color: #ffffff;

  --fb-correct-bg: #00cc44;
  --fb-correct-border: #009933;
  --fb-correct-text: #ffffff;
  --fb-correct-msg: #00cc44;
  --fb-wrong-bg: #ff3b3b;
  --fb-wrong-border: #cc0000;
  --fb-wrong-text: #ffffff;
  --fb-other-bg: #e0e0e0;

  --bar-bg: #e0e0e0;
  --bar-tick: #ffffff;

  --modal-overlay: rgba(0,0,0,0.7);
}
body.theme-pop .choice-btn { border-width: 2px; border-radius: 0; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
body.theme-pop .next-btn { border-width: 2px; border-radius: 0; text-transform: uppercase; letter-spacing: 0.1em; }
body.theme-pop .fb-choice { border-width: 2px; border-radius: 0; }
body.theme-pop .modal { border-width: 3px; border-radius: 0; }
body.theme-pop .header { border-bottom-width: 3px; }
body.theme-pop .btn-menu { border-radius: 0; border-width: 2px; }

/* === Big / Accessibility theme === */
body.theme-big {
  font-size: 21px;
  --text: #1a1a1a;
  --text-heading: #000000;
  --text-muted: #444444;
  --text-detail: #222222;
  --accent: #6b4c00;
  --border: #888888;
  --border-light: #999999;
  --score-color: #1a1a1a;
  --fb-correct-text: #1a4d0a;
  --fb-wrong-text: #6b1a00;
}
body.theme-big .question-detail { font-size: 1.15em; }
body.theme-big .choice-btn { font-size: 1.2em; padding: 0.5em 0.7em; flex-wrap: wrap; }
body.theme-big .choice-btn .date { width: 100%; text-align: right; }
body.theme-big .fb-choice { font-size: 1.15em; padding: 0.8em 1em; }
body.theme-big .fb-desc { font-size: 1.1em; }
body.theme-big .fb-hint { font-size: 1.1em; }
body.theme-big .next-btn { font-size: 1.2em; }
body.theme-big .prompt { font-size: 1.05em; }
body.theme-big .km-name { font-size: 1.05em; }
body.theme-big .km-bar-bg { height: 14px; }
body.theme-big .km-sub .km-bar-bg { height: 10px; }