/* ==========================================================================
   Glowmigos — Glow Score
   ========================================================================== */
.score { display: grid; gap: clamp(1.2rem, 0.8rem + 1.6vw, 2rem); }
@media (min-width: 62rem) { .score { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; } }

.score__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 40rem) { .score__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.score__chip { justify-content: center; }
.score__chip {
  --zc: var(--c-gold);
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-block-size: 2.9rem; padding: 0.5rem 1rem 0.5rem 0.8rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--hairline-strong);
  background: rgba(10, 37, 96, 0.45);
  font-family: var(--f-display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--t-body);
  transition: border-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), box-shadow var(--d-mid) var(--e-out), transform var(--d-fast) var(--e-out);
}
.score__chip .bulb { inline-size: 0.6rem; block-size: 0.6rem; --bulb-color: #2B3F6E; box-shadow: none; }
.score__chip:hover { transform: translateY(-1px); color: var(--t-bright); border-color: var(--zc); }
.score__chip[aria-pressed="true"] {
  color: var(--t-bright); border-color: var(--zc);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--zc) 30%, transparent), 0 0 24px -8px var(--zc);
}
.score__chip[aria-pressed="true"] .bulb { --bulb-color: var(--zc); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--zc) 80%, transparent); }

.score__panel {
  display: grid; gap: 1rem;
  padding: clamp(1.2rem, 0.9rem + 1.4vw, 1.9rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline-strong);
  background: linear-gradient(172deg, #0A2560, #04102E 70%);
}
.score__label { font-size: 0.66rem; font-weight: 800; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-gold); }
.score__meter { position: relative; block-size: 0.9rem; border-radius: var(--r-pill); background: #071634; border: 1px solid var(--hairline); overflow: hidden; }
.score__fill {
  position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--c-gold), var(--c-sun) 40%, var(--c-pink) 80%, var(--c-cyan));
  box-shadow: 0 0 20px rgba(255, 213, 42, 0.6);
  transition: transform 700ms var(--e-out);
}
.score__dots { display: flex; gap: 0.5rem; }
.score__dot { inline-size: 1rem; block-size: 1rem; border-radius: 50%; background: #16264A; transition: background var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out); }
.score__dot.is-lit { background: var(--c-sun); box-shadow: 0 0 12px 2px rgba(255, 213, 42, 0.8); }
.score__react { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: center; }
.score__line { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--t-bright); line-height: 1.35; }
.score__who { font-size: 0.66rem; font-weight: 800; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--c-gold); }
.score__who[data-migo="blue"] { color: var(--c-cyan); }
.score__cta { justify-self: start; }