/* ============================================================
   HOME.CSS — Gridpanions home/landing page
   Standalone styles — not shared with game screens
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* +2px over the browser default — this file is only ever loaded by
   home.html, so unlike site.css (shared with login/signup/join/
   upgrade) there's no risk of scaling pages this wasn't meant for.
   Every rem-sized rule below (and site.css's mirrored teacher-panel
   block) scales from this, across every breakpoint. */
html { font-size: 18px; }

:root {
  --home-bg:       #f0f4f8;
  --home-surface:  #ffffff;
  --home-border:   #d1dbe8;
  --home-text:     #1a2332;
  --home-muted:    #5a6a7e;
  --home-radius:   14px;
  --home-shadow:   0 4px 20px rgba(0,0,0,0.10);
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--home-bg);
  color: var(--home-text);
  min-height: 100vh;
}

/* ── ANNOUNCEMENT BANNER (admin-controlled) ──────────────────── */

.site-banner {
  background: #fff2da;
  color: #6b4200;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.6rem 1.2rem;
}

/* ── HERO ─────────────────────────────────────────────────── */

.hero {
  /* Branded header gradient — deep navy into grid blue into a
     purple-blue, echoing the coordinate-grid theme of the game itself.
     Shared with site.css's .hero (welcome.html) for a consistent look
     across both of the site's main brand pages. */
  background: linear-gradient(135deg, #102A43 0%, #244A8F 55%, #493D9E 100%);
  color: #fff;
  padding: 2.5rem 1.5rem 2.2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* A teacher's active Gridpanions standing either side of the hero's
   centred content (renderHeroTeacherPets() in xp-system.js — it sets
   the size and edge gap from the room available, and hides them when
   there isn't enough). The description line narrows a little while
   they're shown so there's room beside it. */
.hero-pet-flank {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 1;
  pointer-events: none;
}
.hero-pet-flank-left  { left: var(--pet-edge, 16px); }
.hero-pet-flank-right { right: var(--pet-edge, 16px); }
.hero-pet-flank img {
  width: var(--pet-size, 160px);
  height: auto;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
  animation: hero-pet-bob 3.2s ease-in-out infinite;
}
.hero-pet-flank-right img { animation-delay: -1.2s; }
@keyframes hero-pet-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .hero-pet-flank img { animation: none; } }
.hero.has-hero-pets .hero-sub { max-width: 600px; margin-left: auto; margin-right: auto; }

/* Small "active Gridpanion" avatar strip on a teacher's dashboard (see
   renderActiveTeacherPets() in xp-system.js) — top-left corner of the
   hero, out of the way of the centred title/CTAs below it. */
.teacher-pet-strip {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.teacher-pet-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255, 255, 255, 0.6);
  object-fit: contain;
  padding: 3px;
  box-sizing: border-box;
}

/* A faint square coordinate-grid overlay (nodding at Gridpanions' own
   coordinate-game concept without competing with the logo) plus a
   handful of small, low-opacity gold sparkle accents kept toward the
   banner's outer edges — never inside the vertical strip the logo/
   headline actually sit in. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='0.5' y='0.5' width='39' height='39' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11,0 L13,9 L22,11 L13,13 L11,22 L9,13 L0,11 L9,9 Z' fill='%23F4B942' fill-opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8,0 L10,6 L16,8 L10,10 L8,16 L6,10 L0,8 L6,6 Z' fill='%23F4B942' fill-opacity='0.4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7,0 L9,5 L14,7 L9,9 L7,14 L5,9 L0,7 L5,5 Z' fill='%23F4B942' fill-opacity='0.45'/%3E%3C/svg%3E");
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 6% 14%, 93% 20%, 90% 82%;
  background-size: 40px 40px, 22px 22px, 16px 16px, 14px 14px;
  /* Purely decorative — must never intercept taps meant for the
     account-bar's Log out link (or anything else) layered on top of it. */
  pointer-events: none;
}

/* Soft teal/cyan glow centred behind the logo, so it lifts off the
   darker gradient instead of blending into it. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 42% at 50% 28%, rgba(100,204,197,0.32), transparent 70%);
  pointer-events: none;
}

.hero-inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  /* Above the ::before/::after decorative layers — see site.css's
     matching .hero-inner comment. */
  z-index: 1;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 0.5rem;
}

/* logos/logo1.png — same wordmark+mascot lockup as welcome.html's
   .site-logo (site.css), sized down slightly to fit this page's
   narrower hero rhythm. */
/* Same size as welcome.html's .site-logo (site.css), so both heroes match. */
.hero-logo {
  display: block;
  width: clamp(220px, 42vw, 480px);
  height: auto;
  margin: 0 auto 0.6rem;
}

.hero-sub {
  font-size: 1.1rem;
  opacity: 0.85;
  margin-bottom: 2rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ── HERO CTA ROW (signed-out: Join a Game / Log In / Sign Up) ─────
   Ported from site.css (welcome.html's own hero row) so a signed-out
   visitor gets the same buttons here — home.css has no equivalent of
   its own since this hero never needed CTAs before. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-bottom: 1.2rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(0.7rem, 0.55rem + 0.6vw, 0.95rem) clamp(1.2rem, 0.9rem + 1.2vw, 1.7rem);
  border-radius: 100px;
  font-size: clamp(0.92rem, 0.85rem + 0.25vw, 1.05rem);
  font-weight: 700;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:hover { transform: translateY(-1px); }
.cta-row .btn {
  padding: clamp(0.85rem, 0.6rem + 1vw, 1.15rem) clamp(1.5rem, 1rem + 2vw, 2.3rem);
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.3rem);
}
.btn-light {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.btn-light:hover { background: rgba(255,255,255,0.22); }
.btn-outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.14); }
.join-icon-egg {
  height: 1.15em;
  width: auto;
  vertical-align: -0.2em;
}

/* ── ACCOUNT BAR (signed-in state, top of screen) ─────────────── */

.is-hidden { display: none !important; }

/* Optimistic student-role gate (see the inline script right after the
   side panels in home.html) — hides Game Rules/Print Worksheet/Host Game
   on every theme card the instant body.role-student is set, before the
   cards even finish parsing. Pure CSS on purpose: a JS pass that waits
   for the cards to exist first is exactly what made those buttons
   visibly flash before disappearing. Host Game (.btn-teacher) is just as
   much a teacher-only action as the other two — a signed-in student has
   no use for it and clicking it only leads to a login/upgrade wall — but
   was missing from this selector, so every card still showed it. */
body.role-student .theme-card .btn-rules,
body.role-student .theme-card .btn-teacher { display: none !important; }

.account-bar {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.82rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 100px;
  padding: 0.45rem 1rem 0.45rem 1.1rem;
  z-index: 5;
}
.account-bar strong { font-weight: 700; }
.account-bar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.85;
  display: inline-block;
  /* Larger tap target than the bare underlined text — negative margin
     offsets the padding so it doesn't shift the pill's visible size. */
  padding: 0.5rem 0.3rem;
  margin: -0.5rem -0.3rem;
}
.account-bar a:hover { opacity: 1; }
@media (max-width: 560px) {
  .account-bar { position: static; margin: 0.5rem auto 0; width: fit-content; }
}

/* ── CURRICULUM SECTION ───────────────────────────────────── */

.curriculum-block {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--home-radius);
  padding: 1.25rem 1.5rem;
  text-align: left;
  max-width: 800px;
  margin: 0 auto;
}

.curriculum-heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}

.curriculum-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

/* Blue-grey tint (not the brand blue used on actual buttons) — one tag
   per AC v9 Mathematics strand, each linking to that strand's page
   (strand-view.html). Text stays near-white since
   this sits on the dark hero gradient, unlike site.css's light-card
   counterpart. */
.curr-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(109,149,191,0.22);
  border: 1px solid rgba(109,149,191,0.6);
  border-radius: 100px;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}
a.curr-tag { color: inherit; text-decoration: none; }
a.curr-tag:hover { filter: brightness(1.15); }

.curr-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.curr-toggle:hover { color: #fff; }

/* ── THEME CARDS GRID ─────────────────────────────────────── */

.themes-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}

.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--home-muted);
  margin-bottom: 1.25rem;
}

/* auto-fill (not auto-fit) so a short row — the three-card Popular
   Games row, or one with its seasonal slot empty — keeps the same card
   width as a full grid instead of stretching to fill the space. */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
/* Desktop/laptop/tablet-landscape: always three across, even when the
   side menu narrows the space (auto-fill alone dropped to two columns
   around 1024px, pushing Grid Sprint onto its own row). */
@media (min-width: 760px) {
  .themes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* When three-across makes a card narrower than its usual ~280px (laptops
   with the side menu open), tighten the action buttons so each label and
   its Teacher/Students badge stay on one line instead of wrapping. */
.theme-card { container-type: inline-size; }
@container (max-width: 330px) {
  .theme-card .card-body { padding: 1.1rem 1rem 0; }
  .theme-card .card-actions { padding: 0.9rem 0.85rem 1.1rem; }
  .theme-card .card-btn { padding: 0.6rem 0.75rem; font-size: 0.8rem; column-gap: 0.4rem; row-gap: 0.1rem; flex-wrap: wrap; white-space: nowrap; }
  .theme-card .card-btn .role-badge { font-size: 0.58rem; letter-spacing: 0.4px; }
}

/* ── SECTION TITLE ROW ("Popular Games" + All Games button) ──
   Title matches .card-title's size so it reads at the same weight as
   the game names on the cards below it. */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
/* On three-across screens the heading row uses the same columns as the
   cards, so "Popular Games" sits over the first card and the All Games
   button sits directly above the third (Grid Sprint). */
@media (min-width: 760px) {
  .section-head {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.25rem;
  }
  .section-head .section-title { grid-column: 1 / 3; }
  .section-head .section-btn { grid-column: 3; justify-self: end; }
}
.section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--home-text);
}
.section-btn,
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.12s;
}
.section-btn {
  padding: 0.6rem 1.4rem;
  font-size: 0.95rem;
  box-shadow: 0 3px 10px rgba(36,74,143,0.35);
  color: #fff;
  background: linear-gradient(135deg, #102A43 0%, #244A8F 55%, #493D9E 100%);
}
.section-btn:hover { opacity: 0.88; transform: scale(0.98); }

/* Back button on games.html and the browse-by pages. */
.back-btn {
  padding: 0.45rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: var(--home-text);
  background: var(--home-surface);
  border: 1px solid var(--home-border);
}
.back-btn:hover { background: #e5eaf0; }

/* ── BROWSE BY (Year Level / Strand / Content Descriptor) ──── */
.section-divider {
  border: none;
  border-top: 6px solid var(--home-text);
  border-radius: 3px;
  margin: 2.5rem 0 2rem;
}
.browse-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--home-text);
  margin-bottom: 1rem;
}
.themes-section { container-type: inline-size; }
/* Browse-by cards (home.html) — the same white rounded card as
   .theme-card, with its description on top and a grid-textured button
   pinned to the bottom (flex column), so all three line up. */
.browse-card {
  display: flex;
  flex-direction: column;
  background: var(--home-surface);
  border-radius: var(--home-radius);
  box-shadow: var(--home-shadow);
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}
.browse-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
}
.browse-card .card-body { flex: 1; }
/* Same 6px stripe as the game cards, in the buttons' brand gradient. */
.browse-card .card-stripe { background: linear-gradient(90deg, #102A43 0%, #244A8F 55%, #493D9E 100%); }
.browse-card-actions {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--home-border);
}
.browse-card-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(36,74,143,0.3);
  transition: opacity 0.15s, transform 0.12s;
}
.browse-card-btn:hover { opacity: 0.9; transform: scale(0.99); }
.browse-card { container-type: inline-size; }
@container (max-width: 330px) {
  .browse-card .card-body { padding: 1.1rem 1rem 0; }
  .browse-card .browse-card-actions { padding: 0.9rem 0.85rem 1.1rem; }
  .browse-card .browse-card-btn { padding: 0.6rem 0.75rem; font-size: 0.8rem; justify-content: center; }
}
@container (max-width: 240px) {
  .browse-card .browse-card-btn span[aria-hidden] { display: none; }
}
/* ── YEAR LEVEL CARDS (year-level.html / year-levels.js) ──────
   Same footprint as .theme-card (sits in the same three-across
   .themes-grid), each on its own pastel --year-bg. The standard is
   clipped to its opening lines until "Read the full standard" opens
   the card; align-items:start stops one open card stretching its
   row-mates. */
.year-grid { align-items: start; }
.year-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--year-bg, #fff);
  border-radius: var(--home-radius);
  box-shadow: var(--home-shadow);
  border-top: 6px solid var(--year-accent, #244A8F);
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}
.year-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
}
.year-card-body { padding: 1.25rem 1.25rem 0.5rem; }
.year-card-emoji {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.6rem;
  display: block;
}
.year-card-heading {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--year-accent, var(--home-muted));
  margin-bottom: 0.5rem;
}
.year-standard {
  position: relative;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #2d3748;
  max-height: 9.3em;          /* ~6 lines */
  overflow: hidden;
}
.year-standard p + p { margin-top: 0.6rem; }
/* Fade the clipped text into the card colour so it reads as "more". */
.year-standard::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3em;
  background: linear-gradient(to bottom, transparent, var(--year-bg, #fff));
}
.year-card.is-open .year-standard { max-height: none; }
.year-card.is-open .year-standard::after { display: none; }
.year-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.75rem 1.25rem 1.25rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  border: 2px solid var(--year-accent, #244A8F);
  background: rgba(255,255,255,0.7);
  color: var(--year-accent, #244A8F);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.year-toggle:hover { background: #fff; }
.year-toggle-arrow { transition: transform 0.2s; }
.year-card.is-open .year-toggle-arrow { transform: rotate(180deg); }
/* ── GRID TEXTURE ────────────────────────────────────────────
   The same fine white 20px coordinate grid as upgrade.html's plan
   buttons ("Get the Month plan"), laid over a 3-stop gradient taken from
   --strand-1/2/3 (strand buttons) or derived from --year-accent (Year
   Level buttons). */
.grid-texture {
  background-color: var(--strand-2, #244A8F);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='0.5' y='0.5' width='19' height='19' fill='none' stroke='%23ffffff' stroke-opacity='0.18' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--strand-1, #102A43) 0%, var(--strand-2, #244A8F) 55%, var(--strand-3, #493D9E) 100%);
  background-repeat: repeat, no-repeat;
  background-size: 20px 20px, 100% 100%;
  color: #fff;
}

.year-games-btn {
  --strand-1: color-mix(in srgb, var(--year-accent, #244A8F) 60%, #000);
  --strand-2: var(--year-accent, #244A8F);
  --strand-3: color-mix(in srgb, var(--year-accent, #244A8F) 70%, #fff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.75rem 1.25rem 0;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.12s;
}
.year-games-btn:hover { opacity: 0.9; transform: scale(0.99); }
.year-card .year-toggle { margin-top: 0.5rem; }

/* ── STRAND BUTTONS (strand.html / strands.js) ─────────────── */
.strand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
@media (min-width: 760px) {
  .strand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.strand-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 11rem;
  padding: 1.5rem 1rem;
  border-radius: var(--home-radius);
  border: 2px solid rgba(255,255,255,0.35);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.strand-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}
.strand-btn-emoji { font-size: 2.6rem; line-height: 1; }
.strand-btn-name {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.strand-btn-sub {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.9;
}

/* strand-view.html header — same texture/colours as its strand button. */
.strand-page-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: var(--home-radius);
  box-shadow: var(--home-shadow);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.strand-page-title { font-size: 1.4rem; font-weight: 700; }
.strand-page-sub { font-size: 0.88rem; opacity: 0.92; margin-top: 0.2rem; }
a.year-strand { text-decoration: none; }
a.year-strand:hover { background: #e0e7f1; }

/* ── CONTENT DESCRIPTOR PAGE (content-descriptor.html) ──────── */
.cd-explainer {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.cd-example {
  display: inline-flex;
  gap: 0.2rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.9rem;
}
.cd-example .cd-part { padding: 0.15rem 0.5rem; font-size: inherit; }
.cd-part {
  display: inline-block;
  min-width: 2.2em;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.1rem 0.45rem;
  border-radius: 8px;
  color: #fff;
}
.cd-part-ac     { background: #244A8F; }
.cd-part-year   { background: #c2185b; }
.cd-part-strand { background: #ef6c00; }
.cd-part-num    { background: #059669; }
.cd-key {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem 1rem;
  font-size: 0.88rem;
  color: var(--home-text);
}
.cd-key li { display: flex; align-items: center; gap: 0.5rem; }
.cd-key .cd-part { flex-shrink: 0; }
.cd-strand-key {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--home-muted);
}

.cd-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.cd-view { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cd-view-label { font-size: 0.85rem; font-weight: 700; color: var(--home-muted); margin-right: 0.2rem; }
.cd-view-btn {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 2px solid #244A8F;
  background: var(--home-surface);
  color: #244A8F;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.cd-view-btn[aria-pressed="true"] {
  color: #fff;
  background-color: #244A8F;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='0.5' y='0.5' width='19' height='19' fill='none' stroke='%23ffffff' stroke-opacity='0.18' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #102A43 0%, #244A8F 55%, #493D9E 100%);
  background-size: 20px 20px, 100% 100%;
}
.cd-search {
  flex: 1 1 220px;
  max-width: 340px;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--home-border);
  font-size: 0.9rem;
  background: var(--home-surface);
  color: var(--home-text);
}

.cd-sections { display: grid; gap: 0.75rem; }
.cd-section {
  border-radius: var(--home-radius);
  box-shadow: var(--home-shadow);
  overflow: hidden;
}
.cd-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
.cd-section > summary::-webkit-details-marker { display: none; }
.cd-section > summary::after {
  content: '▾';
  margin-left: 0.5rem;
  transition: transform 0.2s;
}
.cd-section[open] > summary::after { transform: rotate(180deg); }
.cd-section-title { font-size: 1.15rem; flex: 1; }
.cd-count { font-size: 0.8rem; font-weight: 700; opacity: 0.85; }
.cd-section-year {
  background: var(--year-bg);
  border-top: 5px solid var(--year-accent);
  color: var(--home-text);
}
.cd-section-year .cd-count { color: var(--year-accent); }
.cd-section-strand > summary { color: #fff; }
.cd-section-body {
  background: var(--home-surface);
  padding: 0.5rem 1.25rem 1rem;
}
.cd-group {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--home-muted);
  margin: 0.9rem 0 0.4rem;
}
/* Strand view: each year heading in that year's colours (as the year
   view's section headers). */
.cd-group.cd-group-year {
  background: var(--year-bg);
  border-left: 5px solid var(--year-accent);
  color: var(--year-accent);
  border-radius: 8px;
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
}
.cd-list { list-style: none; display: grid; gap: 0.6rem; }
.cd-row {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--home-border);
  border-radius: 10px;
}
.cd-code {
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
}
/* ACARA writes descriptions starting lower-case; capitalise for display. */
.cd-desc::first-letter { text-transform: uppercase; }
.cd-desc { font-size: 0.9rem; line-height: 1.5; color: var(--home-text); }
.cd-games {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  font-size: 0.8rem;
}
.cd-game {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 100px;
  background: #eef2f7;
  color: #2d3748;
}
.game-links { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.game-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  color: #fff;
  text-decoration: none;
  background-color: #244A8F;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='0.5' y='0.5' width='19' height='19' fill='none' stroke='%23ffffff' stroke-opacity='0.18' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #102A43 0%, #244A8F 55%, #493D9E 100%);
  background-size: 20px 20px, 100% 100%;
  transition: opacity 0.15s, transform 0.12s;
}
.game-link:hover { opacity: 0.88; transform: translateY(-1px); }
.game-link::after { content: '→'; }
.game-link.is-locked::after { content: '🔒'; }
.game-links-none { font-size: 0.78rem; color: var(--home-muted); font-style: italic; }
.year-curriculum-games { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }

.cd-nogames { font-size: 0.78rem; color: var(--home-muted); font-style: italic; }
.cd-empty { font-size: 0.88rem; color: var(--home-muted); padding: 0.6rem 0 0.2rem; }
@media (max-width: 560px) {
  .cd-row { flex-direction: column; gap: 0.4rem; }
  .cd-example { font-size: 1.25rem; }
}

/* ── YEAR PAGE (year.html?level=…) ─────────────────────────── */
.year-page-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--year-bg, #fff);
  border-top: 6px solid var(--year-accent, #244A8F);
  border-radius: var(--home-radius);
  box-shadow: var(--home-shadow);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.year-page-head .year-card-emoji { margin: 0; }
.year-page-head .section-title { font-size: 1.4rem; }
.year-page-sub {
  font-size: 0.88rem;
  color: #2d3748;
  margin-top: 0.2rem;
}
.year-curriculum {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.75rem;
}
.year-curriculum-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--home-muted);
  margin-bottom: 0.75rem;
}
.year-curriculum-list { list-style: none; display: grid; gap: 0.9rem; }
.year-curriculum-item + .year-curriculum-item {
  border-top: 1px solid var(--home-border);
  padding-top: 0.9rem;
}
.year-curriculum-meta { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.35rem; }
.year-strand {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  background: #eef2f7;
  color: #2d3748;
}
.ac-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: #244A8F;
}
.year-curriculum-list.is-scrollable {
  overflow-y: auto;
  padding-right: 0.5rem;
  overscroll-behavior: contain;
}
.year-curriculum-more {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #244A8F;
  text-align: center;
}

/* Year-level chips under each game card's title (game-cards.js). */
.card-years {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.1rem 0 0.6rem;
  font-size: 0.85rem;
}
.year-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.6rem;
  border-radius: 100px;
  background: #244A8F;
  color: #fff;
  text-decoration: none;
}
.year-chip:hover { background: #102A43; }

.year-curriculum-desc { font-size: 0.88rem; line-height: 1.5; color: var(--home-text); }
.year-curriculum-games { font-size: 0.8rem; color: var(--home-muted); margin-top: 0.3rem; }

.year-source {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--home-muted);
  text-align: center;
}

.browse-placeholder {
  font-size: 0.95rem;
  color: var(--home-muted);
  background: var(--home-surface);
  border: 1px dashed var(--home-border);
  border-radius: var(--home-radius);
  padding: 2rem 1.25rem;
  text-align: center;
}

/* ── INDIVIDUAL THEME CARD ────────────────────────────────── */

.theme-card {
  position: relative;
  background: var(--home-surface);
  border-radius: var(--home-radius);
  box-shadow: var(--home-shadow);
  border: 2px solid transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s, box-shadow 0.18s;
}
.theme-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
}

/* ── PRO BADGE (every theme except Pirate, which stays free) ─ */

.pro-badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 3;
  background: linear-gradient(135deg, #f8d670, #BA7517);
  color: #3a2400;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.9px;
  padding: 0.28rem 0.7rem;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(138,80,16,0.45);
  text-transform: uppercase;
}

.pro-badge-unlocked {
  background: linear-gradient(135deg, #6fd68a, #1D9E75);
  color: #06331f;
  box-shadow: 0 2px 8px rgba(29,158,117,0.45);
}

/* Shown on the Pirate card only for a signed-in free-plan teacher —
   confirms it's included on their current plan, the same spot every
   other card's Pro ribbon sits in. See the plan-gating script below. */
.free-badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 3;
  background: linear-gradient(135deg, #6fd68a, #1D9E75);
  color: #06331f;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.9px;
  padding: 0.28rem 0.7rem;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(29,158,117,0.45);
  text-transform: uppercase;
}

/* ── COMING SOON BADGE (deactivated themes) ──────────────────── */

.coming-soon-badge {
  position: absolute;
  top: 1.35rem;
  right: -3.1rem;
  z-index: 3;
  width: 12rem;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #cbd5e1, #64748b);
  color: #1e293b;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.9px;
  padding: 0.32rem 0;
  text-align: center;
  box-shadow: 0 2px 8px rgba(30,41,59,0.35);
  text-transform: uppercase;
}

/* ── DEACTIVATED CARD ─────────────────────────────────────────── */

.theme-card.card-disabled {
  opacity: 0.62;
  filter: grayscale(0.4);
}
.theme-card.card-disabled:hover {
  transform: none;
  box-shadow: var(--home-shadow);
}

.card-btn-disabled,
.card-btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
}

.card-stripe {
  height: 6px;
  width: 100%;
}

.card-body {
  padding: 1.25rem 1.25rem 0;
  flex: 1;
}

.card-emoji {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.6rem;
  display: block;
}

.card-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--home-text);
}

.card-desc {
  font-size: 1.1rem; /* same as the hero's .hero-sub */
  color: var(--home-muted);
  line-height: 1.5;
  margin-bottom: 0.85rem;
}

.card-mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.mini-tag {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  background: var(--tag-bg, #eef2f7);
  color: var(--tag-color, #4a5568);
}

.card-actions {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--home-border);
  margin-top: 0.5rem;
}

/* ── CARD ACTION BUTTONS ──────────────────────────────────── */

.card-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: opacity 0.15s, transform 0.12s;
  width: 100%;
  text-align: left;
}
.card-btn:hover { opacity: 0.88; transform: scale(0.99); }

.card-btn .role-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  opacity: 0.75;
}

.btn-teacher {
  color: #fff;
}

.btn-student {
  border: 2px solid;
}

.btn-rules {
  background: var(--home-bg);
  color: var(--home-muted);
  border: 1px solid var(--home-border);
  font-size: 0.82rem;
  font-weight: 500;
}
.btn-rules:hover { background: #e5eaf0; color: var(--home-text); }

/* ── PIRATE CARD ──────────────────────────────────────────── */
/* Matches theme.css's Treasure Map palette (Deep Ocean / Treasure Gold)
   — the gradient runs dark-to-light so left-aligned button text (and
   the .card-btn .role-badge on the right, already at reduced opacity)
   both stay readable in white, unlike a flat bright-gold fill would. */
.card-pirate .card-stripe { background: linear-gradient(90deg, #12355B, #F4B942); }
.card-pirate .mini-tag { --tag-bg: #FFF3D0; --tag-color: #17202A; }
.card-pirate .btn-teacher { background: linear-gradient(90deg, #12355B, #F4B942); }
.card-pirate .btn-student { border-color: #1E6F9F; color: #12355B; background: #FFF3D0; }

/* ── MATHS CARD ───────────────────────────────────────────── */
.card-maths .card-stripe { background: linear-gradient(90deg, #1a1f3c, #3a4580); }
.card-maths .mini-tag { --tag-bg: #eef0fa; --tag-color: #1a1f3c; }
.card-maths .btn-teacher { background: #1a1f3c; }
.card-maths .btn-student { border-color: #f5c842; color: #8a6a00; background: #fffde8; }

/* ── SCIENCE CARD ─────────────────────────────────────────── */
.card-science .card-stripe { background: linear-gradient(90deg, #0891b2, #06b6d4); }
.card-science .mini-tag { --tag-bg: #e0f7fa; --tag-color: #0e7490; }
.card-science .btn-teacher { background: #0891b2; }
.card-science .btn-student { border-color: #0891b2; color: #0891b2; background: #f0feff; }

/* ── XMAS CARD ────────────────────────────────────────────── */
.card-xmas .card-stripe { background: linear-gradient(90deg, #c0392b, #27ae60); }
.card-xmas .mini-tag { --tag-bg: #fef3f0; --tag-color: #96281b; }
.card-xmas .btn-teacher { background: linear-gradient(90deg, #c0392b, #27ae60); }
.card-xmas .btn-student { border-color: #27ae60; color: #1a7a42; background: #f0fff6; }

/* ── HALLOWEEN CARD ───────────────────────────────────────── */
.card-halloween .card-stripe { background: linear-gradient(90deg, #ff7518, #6a3fa0); }
.card-racer .card-stripe { background: linear-gradient(90deg, #dc2626, #1a1a1a); }
.card-racer .mini-tag { --tag-bg: #fff2f0; --tag-color: #a31c1c; }
.card-halloween .mini-tag { --tag-bg: #fdece0; --tag-color: #cc5c0e; }
.card-halloween .btn-teacher { background: linear-gradient(90deg, #ff7518, #6a3fa0); }
.card-halloween .btn-student { border-color: #ff7518; color: #cc5c0e; background: #fff6ee; }

/* ── BACK TO SCHOOL CARD ──────────────────────────────────── */
.card-easter .card-stripe { background: linear-gradient(90deg, #f490b8, #d6407f); }
.card-easter .mini-tag { --tag-bg: #fde2ee; --tag-color: #a92a5f; }
.card-easter .btn-teacher { background: linear-gradient(90deg, #f490b8, #d6407f); }
.card-easter .btn-student { border-color: #d6407f; color: #a92a5f; background: #fff0f6; }
.card-backtoschool .card-stripe { background: linear-gradient(90deg, #0f3d2e, #24614c); }
.card-backtoschool .mini-tag { --tag-bg: #e3f1ea; --tag-color: #0f3d2e; }
.card-backtoschool .btn-teacher { background: linear-gradient(90deg, #0f3d2e, #24614c); }

/* ── GRID STRIKE CARD ─────────────────────────────────────── */
.card-gridstrike .card-stripe { background: linear-gradient(90deg, #39e08a, #7c3aed); }
.card-gridstrike .mini-tag { --tag-bg: #eafff4; --tag-color: #0f6b3f; }
.card-gridstrike .btn-teacher { background: linear-gradient(90deg, #39e08a, #7c3aed); }
.card-gridstrike .btn-student { border-color: #1f9e5f; color: #0f6b3f; background: #f0fff8; }
.card-gridchance { --gc-rainbow: linear-gradient(90deg, #e53935, #fb8c00, #fdd835, #43a047, #1e88e5, #5e35b1, #8e24aa); }
.card-gridchance .card-stripe { background: var(--gc-rainbow); }
.card-gridchance .mini-tag:nth-child(4n+1) { --tag-bg: #ffebee; --tag-color: #b71c1c; }
.card-gridchance .mini-tag:nth-child(4n+2) { --tag-bg: #fff3e0; --tag-color: #a14a00; }
.card-gridchance .mini-tag:nth-child(4n+3) { --tag-bg: #e8f5e9; --tag-color: #1b5e20; }
.card-gridchance .mini-tag:nth-child(4n+4) { --tag-bg: #ede7f6; --tag-color: #4527a0; }
.card-gridchance .btn-teacher { background: linear-gradient(90deg, #d32f2f, #ef6c00, #c49000, #2e7d32, #1565c0, #6a1b9a); }
.card-gridchance .btn-student {
  border: 2px solid transparent; color: #4527a0;
  background: linear-gradient(#faf5ff, #faf5ff) padding-box, var(--gc-rainbow) border-box;
}
.card-backtoschool .btn-student { border-color: #0f3d2e; color: #0f3d2e; background: #e3f1ea; }

/* ── RULES MODAL ──────────────────────────────────────────── */

.modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  padding: 1.5rem;
  align-items: center;
  justify-content: center;
}
.modal-bg.open { display: flex; }

.modal-box {
  background: var(--home-surface);
  border-radius: var(--home-radius);
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  padding: 1.75rem;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--home-bg);
  border: 1px solid var(--home-border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.modal-close:hover { background: #e5eaf0; }

.rules-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-right: 2.5rem;
}

.rules-icon { font-size: 2.2rem; line-height: 1; }

.rules-title {
  font-size: 1.4rem;
  font-weight: 700;
}

.rules-subtitle {
  font-size: 0.8rem;
  color: var(--home-muted);
  margin-top: 0.15rem;
}

.rules-section {
  margin-bottom: 1.25rem;
}

.rules-section h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--home-muted);
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--home-border);
}

.rules-steps {
  list-style: none;
  counter-reset: steps;
}
.rules-steps li {
  counter-increment: steps;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  font-size: 0.88rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--home-border);
}
.rules-steps li:last-child { border-bottom: none; }
.rules-steps li::before {
  content: counter(steps);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--home-bg);
  border: 1.5px solid var(--home-border);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--home-muted);
  flex-shrink: 0;
  margin-top: 1px;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}

.tile-item {
  background: var(--home-bg);
  border: 1px solid var(--home-border);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font-size: 0.8rem;
}

.tile-item .tile-name {
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.tile-item .tile-desc {
  font-size: 0.73rem;
  color: var(--home-muted);
  line-height: 1.4;
}

/* Rules modal's "Gridpanions grow through six stages" row — the actual
   generic per-stage art (see PET_STAGES in xp-system.js), not the bare
   emoji this used to show, so it stays in sync with what students see
   on their own progress panel and stage-up celebration. */
.stage-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0 0 0.9rem;
}
.stage-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
}
.stage-strip-item img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.stage-strip-arrow {
  color: var(--home-muted);
  font-size: 0.85rem;
}

/* ── FOOTER ───────────────────────────────────────────────── */

footer {
  text-align: center;
  padding: 1.5rem;
  font-size: 0.78rem;
  color: var(--home-muted);
  border-top: 1px solid var(--home-border);
}

/* ── TEACHER SIDE PANEL (signed-in teachers only) ──
   Fixed sidebar ≥900px wide viewports; a slide-in drawer (toggle +
   backdrop) below that, since a fixed 220px sidebar would eat too
   much of a phone/tablet screen to stay permanently visible.
   Mirrors the same block in site.css (welcome.html) so the panel
   looks and behaves identically on both pages. */

.teacher-side-panel {
  /* Same navy → grid-blue → purple-blue gradient as the main hero
     banner (.hero), so the side menu reads as the same brand surface
     rather than a plain dark sidebar. */
  background: linear-gradient(135deg, #102A43 0%, #244A8F 55%, #493D9E 100%);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 260px;
  color: #fff;
  padding: 1.6rem 1.25rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}
.teacher-side-panel.open { transform: translateX(0); }
/* A faint echo of the hero banner's coordinate-grid overlay — kept to
   z-index:-1 so it sits behind the panel's own links/buttons (which are
   plain in-flow content, not individually positioned) instead of
   covering them. */
.teacher-side-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='0.5' y='0.5' width='39' height='39' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}

.teacher-panel-signedin {
  font-size: 0.92rem;
  opacity: 0.85;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.teacher-panel-signedin strong { font-weight: 700; }

.teacher-panel-heading {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.55;
  margin-bottom: 0.5rem;
}

.teacher-panel-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 0.75rem;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 1.02rem;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
}
.teacher-panel-link:hover { background: rgba(255,255,255,0.14); }
/* Pins Log out to the bottom of the panel (a flex column — see
   .teacher-side-panel above) regardless of how many links sit above it,
   reading as a clearly separate, deliberate exit action rather than
   just the next item in the list. */
.teacher-panel-link[data-account-logout] { margin-top: auto; }

.teacher-panel-close {
  align-self: flex-end;
  background: none;
  border: none;
  color: #fff;
  opacity: 0.7;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.3rem;
  margin-bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.teacher-panel-close:hover { opacity: 1; }

.teacher-panel-toggle {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 190;
  background: rgba(20,40,65,0.85);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 999px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
}

.teacher-panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 150;
}
.teacher-panel-backdrop.open { display: block; }

@media (min-width: 900px) {
  .teacher-side-panel { transform: translateX(0); box-shadow: 2px 0 14px rgba(0,0,0,0.18); }
  .teacher-panel-close, .teacher-panel-toggle, .teacher-panel-backdrop { display: none !important; }
  body.has-teacher-panel { margin-left: 260px; }
}

/* ── RESPONSIVE ───────────────────────────────────────────── */

@media (max-width: 500px) {
  .hero { padding: 2rem 1rem 2rem; }
  .curriculum-block { padding: 1rem; }
  .themes-section { padding: 1.5rem 0.75rem 2rem; }
}