/* ═══════════════════════════════════════════════════════════════════
   GUARDIANS · MAGIC RULES (magic.css) — page layer over the shared
   law-shelf machinery (css/system.css). portal.css is LAW.
   ═══════════════════════════════════════════════════════════════════ */

/* This shelf's spectrum */
.lp-overview  { --lp: var(--arc-hi); }
.lp-action    { --lp: #c9d2dc; }
.lp-mana      { --lp: var(--gold); }
.lp-sustain   { --lp: #d8c79a; }
.lp-casting   { --lp: #b79ae0; }
.lp-mr        { --lp: #8f6fd0; }
.lp-power     { --lp: #e0906a; }
.lp-psychic   { --lp: #9a7fd6; }
.lp-learning  { --lp: #a8c8a0; }
.lp-schools   { --lp: #f0eaf8; }

/* The thirty schools */
.school-cat {
  font-family: var(--f-arc); font-weight: 400; font-size: 1.2rem;
  color: #f0eaf8; margin: 20px 0 12px;
}
.school-cat .count {
  font-size: 0.75rem; color: var(--arc-hi); vertical-align: middle;
  border: 1px solid var(--arc-line); border-radius: 999px; padding: 1px 10px; margin-left: 8px;
}
.school-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.school {
  border: 1px solid rgba(183, 154, 224, 0.2); border-radius: 10px;
  background: rgba(183, 154, 224, 0.04); padding: 14px 16px;
}
.school h4 { margin: 0 0 6px; font-size: 0.98rem; letter-spacing: 0.04em; color: #ffe3ae; }
.school p { margin: 0; font-family: var(--f-arc); font-size: 0.88rem; line-height: 1.55; color: #ab9fc4; }

/* Jane holds the stage — keep her rings above the bottom scrim */
.hero-stage.grounds .stage-art { object-position: 50% 42%; }

/* Readability over Jane's bright rings — SHADOW ONLY (this page only).
   No colors set here: the proof line's teal hover (Tela's thread —
   the green-white glow and the underline sweep) must stay exactly as
   portal-plus wrote it. The halo carries into hover too. */
.hero-stage.grounds .proof,
.hero-stage.grounds .cta-caption {
  text-shadow: 0 1px 3px rgba(5, 4, 12, 0.95), 0 0 12px rgba(5, 4, 12, 0.9), 0 0 28px rgba(5, 4, 12, 0.8);
}
.hero-stage.grounds .proof:hover {
  text-shadow: 0 1px 3px rgba(5, 4, 12, 0.95), 0 0 12px rgba(5, 4, 12, 0.9), 0 0 16px rgba(0, 212, 212, 0.45);
}

/* Two kinds of power, felt in the fingertips */
.school { transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }
.school h4 { transition: text-shadow 0.3s ease, color 0.3s ease; }
/* Magic — the arcane ignite */
.school-magic:hover {
  transform: translateY(-3px);
  border-color: var(--gold-soft);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 207, 136, 0.22);
}
.school-magic:hover h4 { text-shadow: 0 0 14px rgba(255, 207, 136, 0.55); }
/* Psychic — the lavender levitation: no fire, only mind */
.school-psychic:hover {
  transform: translateY(-5px) scale(1.015);
  border-color: #9a7fd6;
  background: radial-gradient(ellipse at 50% 40%, rgba(154, 127, 214, 0.16), rgba(183, 154, 224, 0.04) 70%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 26px rgba(154, 127, 214, 0.3);
}
.school-psychic:hover h4 { color: #cdb6ff; text-shadow: 0 0 16px rgba(154, 127, 214, 0.6); }
@media (prefers-reduced-motion: reduce) {
  .school, .school h4 { transition: none; }
  .school-magic:hover, .school-psychic:hover { transform: none; }
}