/* ─────────────────────────────────────────────────────────────────────────
   The level emblem, the streak line and the badge row.

   Its own file because two pages show it and they have nothing else in
   common: the app, which loads styles.css and has themes, and the public
   card at /u/<name>, which api/preview.py renders with four hardcoded
   colours and no variables at all. Every colour below is a var() with a
   fallback for exactly that reason - the theme wins where there is one.

   Both sides emit the same markup: eight <i> and a data-level. Nothing but
   that number is shared between the JavaScript and the Python, and the
   drawing lives here, once.
   ───────────────────────────────────────────────────────────────────────── */

.lvl-emblem { position: relative; display: inline-grid; place-items: center;
  width: 46px; height: 46px; flex: none; }
.lvl-emblem i { position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cream-faint, #5B667E); opacity: .35;
  /* eight around a circle: each is pushed out along its own angle */
  transform: rotate(calc(var(--i) * 45deg)) translateY(-18px); }
.lvl-emblem i:nth-child(1) { --i: 0; }  .lvl-emblem i:nth-child(2) { --i: 1; }
.lvl-emblem i:nth-child(3) { --i: 2; }  .lvl-emblem i:nth-child(4) { --i: 3; }
.lvl-emblem i:nth-child(5) { --i: 4; }  .lvl-emblem i:nth-child(6) { --i: 5; }
.lvl-emblem i:nth-child(7) { --i: 6; }  .lvl-emblem i:nth-child(8) { --i: 7; }
/*  the core: one dot for the reader themselves, breathing slowly */
.lvl-emblem::after { content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: var(--cool, #00F2FE); box-shadow: 0 0 10px -1px var(--cool, #00F2FE);
  animation: lvl-core 3.2s ease-in-out infinite; }
@keyframes lvl-core { 0%, 100% { transform: scale(1); opacity: .92; }
                      50%      { transform: scale(1.16); opacity: 1; } }

/*  Lit segments, one per level reached. The rule is written out eight times
    rather than computed, because nth-child cannot take a custom property -
    and eight lines that say exactly what they do beat a clever one. */
.lvl-emblem[data-level="1"] i:nth-child(-n+1), .lvl-emblem[data-level="2"] i:nth-child(-n+2),
.lvl-emblem[data-level="3"] i:nth-child(-n+3), .lvl-emblem[data-level="4"] i:nth-child(-n+4),
.lvl-emblem[data-level="5"] i:nth-child(-n+5), .lvl-emblem[data-level="6"] i:nth-child(-n+6),
.lvl-emblem[data-level="7"] i:nth-child(-n+7), .lvl-emblem[data-level="8"] i:nth-child(-n+8) {
  background: var(--cool, #00F2FE); opacity: 1; box-shadow: 0 0 6px -1px var(--cool, #00F2FE);
}
/*  ...and the one just earned pulses, so the emblem says which level this is
    without counting: the newest dot is the moving one. */
.lvl-emblem[data-level="1"] i:nth-child(1), .lvl-emblem[data-level="2"] i:nth-child(2),
.lvl-emblem[data-level="3"] i:nth-child(3), .lvl-emblem[data-level="4"] i:nth-child(4),
.lvl-emblem[data-level="5"] i:nth-child(5), .lvl-emblem[data-level="6"] i:nth-child(6),
.lvl-emblem[data-level="7"] i:nth-child(7), .lvl-emblem[data-level="8"] i:nth-child(8) {
  background: var(--teal, #4fe0c8); box-shadow: 0 0 9px 0 var(--teal, #4fe0c8);
  animation: lvl-pip 1.9s ease-in-out infinite;
}
@keyframes lvl-pip { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/*  Frontier has every segment lit, so the whole ring turns over instead. */
.lvl-emblem[data-level="8"] { animation: lvl-spin 22s linear infinite; }
@keyframes lvl-spin { to { transform: rotate(360deg); } }

/*  A card is read by people who did not ask for movement, and by people who
    asked not to have any. Everything above holds its shape without it. */
@media (prefers-reduced-motion: reduce) {
  .lvl-emblem, .lvl-emblem::after, .lvl-emblem i { animation: none !important; }
}

/* ── the streak, and the badge row ─────────────────────────────────────── */
.sh-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sh-meta-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lvl-line { font-family: var(--mono, ui-monospace, monospace); font-size: 0.72rem; color: var(--cream, #ffffff); letter-spacing: .04em; }
.lvl-streak { font-family: var(--mono, ui-monospace, monospace); font-size: 0.68rem; color: var(--amber, #e6a94b); letter-spacing: .04em; }
.lvl-streak::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px; background: var(--amber, #e6a94b);
  box-shadow: 0 0 8px 0 var(--amber-glow, #ffa9d6); animation: lvl-core 2.4s ease-in-out infinite; }

.bdg-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; }
.bdg { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 100px;
  font-family: var(--mono, ui-monospace, monospace); font-size: 0.63rem; letter-spacing: .03em;
  border: 1px solid var(--paper-edge, #232c44); color: var(--cream-faint, #5B667E); background: var(--ink-2, #11122a); }
.bdg svg, .bdg .ic { width: 12px; height: 12px; }
.bdg.on { color: var(--cream, #ffffff); border-color: var(--teal-deep, #2a9d8a); background: var(--ink-3, #181a38); }
.bdg.on .bdg-pip, .bdg.on svg { color: var(--teal, #4fe0c8); }
.bdg-pip { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .4; }
.bdg.on .bdg-pip { opacity: 1; box-shadow: 0 0 7px -1px var(--teal, #4fe0c8); }
.bdg-count { font-family: var(--mono, ui-monospace, monospace); font-size: 0.66rem; color: var(--cream-dim, #A1A1AA); }