/* ==========================================================================
   Glowmigos — the two bulb amigos, small
   Tip cards, score reactions, empty states. Never a mascot in every section.
   ========================================================================== */
.migo-glyph { display: inline-block; inline-size: 2.6rem; flex: none; }
.migo-glyph svg { inline-size: 100%; block-size: auto; overflow: visible; }

.tip {
  --tc: var(--c-gold);
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start;
  padding: 0.9rem 1rem;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent);
  background: color-mix(in srgb, var(--tc) 7%, rgba(10, 37, 96, 0.35));
  max-inline-size: 40rem;
}
.tip[data-migo="blue"] { --tc: var(--c-cyan); }
.tip__who { font-family: var(--f-display); font-weight: 800; font-size: 0.66rem; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--tc); }
.tip__text { color: var(--t-bright); font-size: 0.95rem; line-height: 1.5; margin-block-start: 0.15rem; }
.tip__text b { color: var(--tc); }

/* --- Meet the migos ----------------------------------------------------- */
.migos { display: grid; gap: clamp(1.4rem, 1rem + 2vw, 2.4rem); }
@media (min-width: 62rem) { .migos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.migos__art { inline-size: min(100%, 34rem); margin-inline: auto; }
.migos__cards { display: grid; gap: 0.8rem; }
.migo-card {
  --tc: var(--c-gold);
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center;
  padding: 1rem 1.1rem; border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: linear-gradient(170deg, rgba(16, 48, 122, 0.4), rgba(4, 16, 46, 0.4));
}
.migo-card[data-migo="blue"] { --tc: var(--c-cyan); }
.migo-card .migo-glyph { inline-size: 3.4rem; }
.migo-card__name { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; color: var(--tc); }
.migo-card__role { color: var(--t-body); font-size: 0.94rem; }
.migo-card__line { margin-block-start: 0.35rem; color: var(--t-muted); font-size: 0.86rem; font-style: italic; }