/* ============================================================================
 *  С МИСЪЛ — марковата палитра
 *
 *  Взета директно от index.html на сайта, за да няма разминаване:
 *      --emerald #2B5B54   --sunshine #FFD348   --apricot #F48364
 *      --cream   #F9E8CD   --navy     #2C3E6B   --sage    #8EAA7E
 *      шрифтове: Playfair Display (заглавия) + Inter (текст)
 *
 *  Зарежда се СЛЕД edu-app.css и edu-games.css и просто преобръща
 *  променливите. Затова цялата логика на игрите остава непокътната —
 *  сменя се само облеклото.
 *
 *  Само за страниците, които вижда ученикът. Админ панелът остава неутрален
 *  нарочно: там е важна четимостта на много данни, не атмосферата.
 * ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* --- brand --- */
  --brand-emerald:   #2B5B54;
  --brand-emerald-d: #1e4039;
  --brand-sunshine:  #FFD348;
  --brand-apricot:   #F48364;
  --brand-cream:     #F9E8CD;
  --brand-mint:      #F0F4D7;
  --brand-navy:      #2C3E6B;
  --brand-sage:      #8EAA7E;
  --brand-dusty:     #90A3C4;
  --brand-lavender:  #C8B4D8;

  /* --- mapped onto the app's variables --- */
  --edu-bg:        var(--brand-cream);
  --edu-surface:   #ffffff;
  --edu-ink:       #1a1a2e;
  --edu-muted:     #555566;
  --edu-line:      #E7D9BE;              /* cream, a few shades down */
  --edu-brand:     var(--brand-emerald);
  --edu-brand-ink: #ffffff;
  --edu-brand-dim: #E7EFED;              /* emerald at 8% on white */

  --edu-ok:        #2F6B4F;
  --edu-warn:      #8A5A18;
  --edu-warn-bg:   #FDF1D4;
  --edu-err:       #B4462C;
  --edu-err-bg:    #FBE7E1;

  --edu-radius:    14px;
  --edu-shadow:    0 1px 2px rgba(43,91,84,.06), 0 8px 24px rgba(43,91,84,.09);
}

/* --- typography ------------------------------------------------------- */
body.edu {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--brand-cream);
}

body.edu h1, body.edu h2, body.edu h3,
body.edu .edu-h, body.edu .g-top h1, body.edu .hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: -.005em;
}

/* The wordmark is the one on the real site: 🧠 + "С МИСЪЛ" in Playfair,
   sunshine on emerald. Sunshine on cream is unreadable (1.2:1), so the
   emerald pill comes along with it — the same pairing as the navbar. */
body.edu .edu-logo {
  width: fit-content;
  margin: 0 auto 28px;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 17px 9px;
  background: var(--brand-emerald);
  border-radius: 12px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; letter-spacing: .07em; font-size: 17px;
  color: var(--brand-sunshine);          /* 5.4:1 on emerald */
}
body.edu .edu-logo::before { content: '🧠'; font-size: 19px; line-height: 1; }
body.edu .edu-logo span { color: var(--brand-sunshine); }
body.edu .edu-logo:hover { background: var(--brand-emerald-d); }

/* --- surfaces --------------------------------------------------------- */
body.edu .edu-card,
body.edu .g-stage,
body.edu .g-card,
body.edu .mat,
body.edu .price-strip {
  border-color: var(--edu-line);
  border-radius: var(--edu-radius);
}

/* --- buttons ---------------------------------------------------------- */
body.edu .edu-btn {
  background: var(--brand-emerald);
  border-radius: 11px;
  font-weight: 600;
  letter-spacing: .005em;
}
body.edu .edu-btn:hover:not(:disabled) { background: var(--brand-emerald-d); filter: none; }
body.edu .edu-btn--ghost {
  background: transparent; color: var(--brand-emerald);
  border: 1.5px solid var(--brand-emerald);
}
body.edu .edu-btn--ghost:hover:not(:disabled) { background: var(--edu-brand-dim); }

/* --- the highlighted plan gets the sunshine, not the emerald ---------- */
body.edu .edu-plan--best { border-color: var(--brand-sunshine); }
body.edu .edu-plan__tag {
  background: var(--brand-sunshine);
  color: #4A3410;
  font-weight: 700;
}

/* --- game cards ------------------------------------------------------- */
body.edu .g-card:hover { border-color: var(--brand-emerald); }
body.edu .g-card__foot b { color: var(--brand-emerald); }
body.edu .mat:hover { border-color: var(--brand-emerald); }
body.edu .mat__sub { color: var(--brand-emerald); }
body.edu .blk__type, body.edu .g-pill { color: var(--brand-emerald); }

/* --- quiz answers ----------------------------------------------------- */
body.edu .g-ans:hover:not(:disabled) {
  border-color: var(--brand-emerald); background: var(--edu-brand-dim);
}
body.edu .g-ans.right {
  border-color: var(--brand-sage); background: #EDF3E8; color: #2C5230;
}
body.edu .g-bar i { background: var(--brand-emerald); }
body.edu .g-bar.low i { background: var(--brand-sunshine); }
body.edu .g-bar.out i { background: var(--brand-apricot); }

/* --- matching / cards ------------------------------------------------- */
body.edu .m-tile.sel  { border-color: var(--brand-emerald); background: var(--edu-brand-dim); }
body.edu .m-tile.done { border-color: var(--brand-sage); background: #EDF3E8; color: #2C5230; }
body.edu .card-face   { border-color: var(--edu-line); }
body.edu .card-face.back { background: var(--brand-mint); }
body.edu .card-grade .yes { border-color: var(--brand-sage); color: #2C5230; }
body.edu .card-grade .no  { border-color: var(--brand-apricot); color: var(--edu-err); }

/* --- ordering --------------------------------------------------------- */
body.edu .ord-item.over  { border-color: var(--brand-emerald); background: var(--edu-brand-dim); }
body.edu .ord-item.right { border-color: var(--brand-sage); background: #EDF3E8; }
body.edu .ord-num { background: var(--brand-mint); color: var(--brand-emerald); }

/* --- feedback --------------------------------------------------------- */
body.edu .g-feed--ok { background: #EDF3E8; color: #2C5230; }
body.edu .edu-msg--ok { background: #EDF3E8; color: #2C5230; }
body.edu .edu-pill--active { background: #EDF3E8; color: #2C5230; }

/* --- inputs ----------------------------------------------------------- */
body.edu .edu-field input:focus,
body.edu .modal input:focus, body.edu .modal textarea:focus {
  border-color: var(--brand-emerald);
  box-shadow: 0 0 0 3px rgba(43,91,84,.13);
}

/* --- the shared top bar ---------------------------------------------- */
.ednav {
  background: rgba(249,232,205,.95) !important;
  border-bottom-color: #E7D9BE !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
.ednav a.pri { background: #2B5B54 !important; }
.ednav a:hover { background: rgba(43,91,84,.09) !important; }
.ednav .badge { background: #FFD348 !important; color: #4A3410 !important; }

/* --- the Gamify button on material pages ------------------------------ */
.edu-gamify {
  background: linear-gradient(135deg, #2B5B54, #1e4039) !important;
  box-shadow: 0 4px 14px rgba(43,91,84,.3) !important;
}
.edu-gamify:hover { box-shadow: 0 7px 20px rgba(43,91,84,.38) !important; }
.edu-gamify-box {
  background: var(--brand-mint) !important;
  border-color: #DDE4C8 !important;
  border-radius: 16px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
.edu-gamify-box h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #1a1a2e !important;
}