/* ── Circuit Course Mascot Boxes ──────────────────────────────────────────── */
/* Usage in markdown:
     <div class="mascot rezi" markdown>
     **Definition: Term**
     Content here...
     </div>
*/

.mascot {
  display: flex;
  gap: 1.1rem;
  border-radius: 10px;
  padding: 1rem 1.2rem 1rem 1rem;
  margin: 1.4rem 0;
  align-items: flex-start;
  position: relative;
}

/* Mascot image shown via ::before pseudo-element */
.mascot::before {
  content: '';
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  margin-top: 2px;
}

/* Mascot name badge shown via ::after */
.mascot::after {
  position: absolute;
  top: -11px;
  left: 88px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 12px;
  color: white;
}

/* Content area */
.mascot > * {
  flex: 1;
  min-width: 0;
}

/* ── Rezi — Definitions (Purple) ──────────────────────────────────────────── */
.mascot.rezi {
  background-color: rgba(124, 58, 237, 0.06);
  border-left: 4px solid #7C3AED;
  border-top: 1px solid rgba(124, 58, 237, 0.2);
  border-right: 1px solid rgba(124, 58, 237, 0.2);
  border-bottom: 1px solid rgba(124, 58, 237, 0.2);
}
.mascot.rezi::before {
  background-image: url('../img/mascots/rezi.svg');
}
.mascot.rezi::after {
  content: 'Rezi — Definition';
  background-color: #7C3AED;
}
.mascot.rezi strong:first-child,
.mascot.rezi p:first-child strong {
  color: #5B21B6;
}

/* ── Cappy — Tips & Notes (Blue) ─────────────────────────────────────────── */
.mascot.cappy {
  background-color: rgba(37, 99, 235, 0.06);
  border-left: 4px solid #2563EB;
  border-top: 1px solid rgba(37, 99, 235, 0.2);
  border-right: 1px solid rgba(37, 99, 235, 0.2);
  border-bottom: 1px solid rgba(37, 99, 235, 0.2);
}
.mascot.cappy::before {
  background-image: url('../img/mascots/cappy.svg');
}
.mascot.cappy::after {
  content: 'Cappy — Tip';
  background-color: #2563EB;
}
.mascot.cappy strong:first-child,
.mascot.cappy p:first-child strong {
  color: #1D4ED8;
}

/* ── Sparky — Warnings & Cautions (Orange) ───────────────────────────────── */
.mascot.sparky {
  background-color: rgba(234, 88, 12, 0.06);
  border-left: 4px solid #EA580C;
  border-top: 1px solid rgba(234, 88, 12, 0.2);
  border-right: 1px solid rgba(234, 88, 12, 0.2);
  border-bottom: 1px solid rgba(234, 88, 12, 0.2);
}
.mascot.sparky::before {
  background-image: url('../img/mascots/warning.png');
}
.mascot.sparky::after {
  content: 'Sparky — Warning';
  background-color: #EA580C;
}
.mascot.sparky strong:first-child,
.mascot.sparky p:first-child strong {
  color: #C2410C;
}

/* ── Ohmy — Key Formulas (Green) ─────────────────────────────────────────── */
.mascot.ohmy {
  background-color: rgba(22, 163, 74, 0.06);
  border-left: 4px solid #16A34A;
  border-top: 1px solid rgba(22, 163, 74, 0.2);
  border-right: 1px solid rgba(22, 163, 74, 0.2);
  border-bottom: 1px solid rgba(22, 163, 74, 0.2);
}
.mascot.ohmy::before {
  background-image: url('../img/mascots/ohmy.svg');
}
.mascot.ohmy::after {
  content: 'Ohmy — Formula';
  background-color: #16A34A;
}
.mascot.ohmy strong:first-child,
.mascot.ohmy p:first-child strong {
  color: #15803D;
}

/* ── Fusi — Safety (Red) ─────────────────────────────────────────────────── */
.mascot.fusi {
  background-color: rgba(220, 38, 38, 0.06);
  border-left: 4px solid #DC2626;
  border-top: 1px solid rgba(220, 38, 38, 0.2);
  border-right: 1px solid rgba(220, 38, 38, 0.2);
  border-bottom: 1px solid rgba(220, 38, 38, 0.2);
}
.mascot.fusi::before {
  background-image: url('../img/mascots/fusi.svg');
}
.mascot.fusi::after {
  content: 'Fusi — Safety';
  background-color: #DC2626;
}
.mascot.fusi strong:first-child,
.mascot.fusi p:first-child strong {
  color: #991B1B;
}

/* ── Sparky pose variants (PNG) ──────────────────────────────────────────── */
.mascot.sparky-welcome {
  background-color: rgba(234, 88, 12, 0.06);
  border-left: 4px solid #EA580C;
  border-top: 1px solid rgba(234, 88, 12, 0.2);
  border-right: 1px solid rgba(234, 88, 12, 0.2);
  border-bottom: 1px solid rgba(234, 88, 12, 0.2);
}
.mascot.sparky-welcome::before {
  background-image: url('../img/mascots/sparky-welcome.png');
}
.mascot.sparky-welcome::after {
  content: 'Sparky — Welcome';
  background-color: #EA580C;
}
.mascot.sparky-welcome strong:first-child,
.mascot.sparky-welcome p:first-child strong {
  color: #C2410C;
}

.mascot.sparky-thinking {
  background-color: rgba(234, 88, 12, 0.06);
  border-left: 4px solid #EA580C;
  border-top: 1px solid rgba(234, 88, 12, 0.2);
  border-right: 1px solid rgba(234, 88, 12, 0.2);
  border-bottom: 1px solid rgba(234, 88, 12, 0.2);
}
.mascot.sparky-thinking::before {
  background-image: url('../img/mascots/sparky-thinking.png');
}
.mascot.sparky-thinking::after {
  content: 'Sparky — Thinking';
  background-color: #EA580C;
}
.mascot.sparky-thinking strong:first-child,
.mascot.sparky-thinking p:first-child strong {
  color: #C2410C;
}

.mascot.sparky-tip {
  background-color: rgba(234, 88, 12, 0.06);
  border-left: 4px solid #EA580C;
  border-top: 1px solid rgba(234, 88, 12, 0.2);
  border-right: 1px solid rgba(234, 88, 12, 0.2);
  border-bottom: 1px solid rgba(234, 88, 12, 0.2);
}
.mascot.sparky-tip::before {
  background-image: url('../img/mascots/sparky-tip.png');
}
.mascot.sparky-tip::after {
  content: 'Sparky — Tip';
  background-color: #EA580C;
}
.mascot.sparky-tip strong:first-child,
.mascot.sparky-tip p:first-child strong {
  color: #C2410C;
}

/* ── Responsive: stack on small screens ──────────────────────────────────── */
@media (max-width: 480px) {
  .mascot {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .mascot::before {
    width: 56px;
    height: 56px;
  }
}