/* Maths Garden (assets/garden.js): a light farming game in the student portal. */
/* The lesson styles (learning.css) read these; the garden page is outside .lu-overlay. */
.gd { --gd-soil: #8a5a36; --gd-grass: #d9efcf; --gd-line: #d8e4dc;
  --lu-green: #064f35; --lu-green-2: #0b6f4a; --lu-amber: #f39a18; --lu-line: #d8e4dc; --lu-soft: #edf5ef; --lu-ink: #10201b; --lu-muted: #55645f; --lu-bad: #c95b43; }
.gd-top { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 14px; }
.gd-stat { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gd-stat strong { font-size: 1.1rem; }
.gd-stat small { color: #55645f; }
.gd-stat-icon { font-size: 1.4rem; }
.gd-level { flex: 1; justify-content: center; flex-wrap: wrap; }
.gd-bar { display: inline-block; width: 90px; height: 8px; border-radius: 999px; background: #edf5ef; overflow: hidden; vertical-align: middle; }
.gd-bar span { display: block; height: 100%; background: #f39a18; border-radius: inherit; }
.gd-bar-big { width: 100%; height: 14px; margin: 8px 0; }
.gd-bar-big span { background: #0b6f4a; }
.gd-tabs { margin-top: 12px; }
.gd-message { background: #fff7e8; border: 1px solid #f3d29a; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-weight: 700; }
.gd-tip { background: #edf5ef; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.gd-note { font-size: 0.9rem; margin: 8px 0 0; }

.gd-garden { background: var(--gd-grass); border-radius: 16px; padding: 12px; margin-bottom: 14px; border: 2px solid #b9dcab; }
.gd-decor { display: flex; flex-wrap: wrap; gap: 6px; font-size: 1.8rem; margin-bottom: 8px; }
.gd-beds { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.gd-bed { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 12px; background: #c99b6d;
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 6px, transparent 6px 14px); border: 2px solid var(--gd-soil); text-align: center; }
.gd-bed.is-empty { background-color: #d8b892; }
.gd-bed.is-grown { box-shadow: 0 0 0 3px #f39a18; }
.gd-plant { font-size: 2.6rem; line-height: 1.1; }
.gd-bed-name { font-weight: 800; color: #3b2615; font-size: 0.92rem; }
.gd-drops { font-size: 0.85rem; letter-spacing: 1px; }
.gd-drops span { opacity: 0.25; }
.gd-drops span.is-on { opacity: 1; }
.gd-bed .lu-button { width: 100%; padding: 8px 6px; justify-content: center; }

.gd-picker-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gd-picker-head h3 { margin: 0; font-size: 1.05rem; }
.gd-seeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.gd-seed { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--gd-line); border-radius: 12px; background: #fff; font: inherit; color: inherit; cursor: pointer; }
.gd-seed:hover:not([disabled]) { border-color: #0b6f4a; background: #f4faf5; }
.gd-seed[disabled] { opacity: 0.45; cursor: not-allowed; }
.gd-seed small { color: #55645f; font-size: 0.8rem; }
.gd-seed-emoji { font-size: 1.9rem; }

.gd-basket-items { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0 12px; font-weight: 700; }
.gd-list { display: flex; flex-direction: column; gap: 8px; }
.gd-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #edf5ef; }
.gd-row:last-child { border-bottom: 0; }
.gd-row.is-locked { opacity: 0.55; }
.gd-row-emoji { font-size: 1.8rem; width: 2.2rem; text-align: center; }
.gd-row-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gd-row-main small { color: #55645f; }
.gd-row-buttons { display: flex; gap: 6px; }
.gd-up { color: #0b6f4a; font-weight: 700; }
.gd-down { color: #c95b43; font-weight: 700; }
.gd-owned { color: #0b6f4a; font-weight: 700; }
.gd-prices { display: flex; flex-wrap: wrap; gap: 8px; }
.gd-price { background: #f4faf5; border: 1px solid var(--gd-line); border-radius: 999px; padding: 5px 10px; font-size: 0.9rem; }
.gd-price.is-locked { opacity: 0.5; }
.gd-goal h3 { margin: 2px 0 0; }
.gd-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gd-feed small { color: #55645f; margin-left: 4px; }

.gd-q-emoji { font-size: 2.2rem; letter-spacing: 4px; margin: 4px 0 10px; }
.gd-result.is-right h3 { color: #0b6f4a; }
.gd-result.is-wrong h3 { color: #c95b43; }
.gd-visit .gd-garden { margin-top: 12px; }

@media (max-width: 420px) {
  .gd-top { padding: 10px; gap: 6px; }
  .gd-bar { width: 60px; }
  .gd-beds { grid-template-columns: repeat(2, 1fr); }
}

/* How to play, the staff demo bar and the staff class view (2026-10-17). */
.gd-help-btn { margin-left: auto; }
.gd-howto-steps { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 12px; }
.gd-howto-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.05rem; line-height: 1.45; }
.gd-howto-icon { font-size: 2rem; width: 2.6rem; text-align: center; flex: none; }
.gd-demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #fff7e8; border: 1px solid #f3d29a; border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.gd-demo-bar select { width: auto; font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid #d8e4dc; }
.gd-demo-bar .lu-button { margin-left: auto; }
.gd-demo-overlay .lu-overlay-body > .gd { max-width: 900px; margin: 0 auto; }
.gd-howto { max-width: 760px; margin: 0 auto; }
.gd-staff-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.gd-staff-class { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 700; }
.gd-staff-class select { width: auto; font: inherit; padding: 6px 8px; }
.gd-staff-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.gd-staff-stats > div { background: #f4faf5; border: 1px solid #d8e4dc; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
.gd-staff-stats strong { font-size: 1.4rem; }
.gd-staff-stats span { color: #55645f; font-size: 0.9rem; }
.gd-staff-goal { grid-column: span 2; }
.gd-staff-table { width: 100%; }
.gd-staff-table tr.is-idle td { color: #8a968f; }
.gd-staff-detail td { background: #f9fbf8; }
.gd-low td { color: #c95b43; }
.gd-staff .gd-feed { max-height: 320px; overflow-y: auto; }
/* The game outside the student portal (admin and teacher demo): the student
   portal's card and tab styles, scoped to the garden, and Bootstrap's .card
   (column flex) undone. */
.gd .card { display: block; background: #fff; border: 0; border-radius: 14px; box-shadow: 0 1px 3px rgba(16, 32, 27, 0.12); padding: 16px; margin-bottom: 14px; }
.gd .card.gd-top { display: flex; flex-direction: row; padding: 12px 14px; }
.gd .card .eyebrow { margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; font-weight: 700; color: #0b6f4a; }
.gd .muted { color: #55645f; }
.gd .segment-row { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; }
.gd .segment { appearance: none; border: 0; background: #edf5ef; color: #55645f; border-radius: 10px; padding: 9px 14px; font: inherit; font-size: 0.82rem; font-weight: 700; white-space: nowrap; cursor: pointer; flex-shrink: 0; }
.gd .segment.active { background: #064f35; color: #fff; }
/* A long class list scrolls inside the panel. */
.gd-staff-scroll { max-height: 460px; overflow-y: auto; margin-bottom: 12px; }
.gd-staff-scroll thead th { position: sticky; top: 0; background: #fff; }