/* Burn Race bar (site/race-bar.js). It reads the depth-zone tokens of tidelings.css (--card, --fg, --fg-dim, --track, --amount), so
   it is light glass with ink text on the surface and a deep pebble below; the fallbacks are the dark defaults. Two states: the
   progress tube, and the glowing race banner. [data-race-bar="tile"]: inside a home tile, the tile is the card. */
[data-race-bar][hidden] { display: none !important; }
.race-bar { --rb-coral: var(--accent, #ff7a59); --rb-fg: var(--fg, #e9fbff); --rb-dim: var(--fg-dim, #9cc9de);
  display: grid; gap: 6px; padding: 12px 14px 13px; color: var(--rb-fg); text-align: left;
  border-radius: 18px 14px 20px 12px / 16px 20px 14px 18px; background: var(--card, rgba(8, 46, 78, .82));
  box-shadow: inset 0 0 0 1px var(--card-line, transparent), inset 0 1px 0 var(--card-hi, rgba(233, 251, 255, .09)); font-variant-numeric: tabular-nums; }
.race-bar__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; font-size: .84rem; color: var(--rb-dim); }
.race-bar__row b { color: var(--rb-fg); font-weight: 700; }
.race-bar__tube { position: relative; height: 10px; border-radius: 6px; background: var(--track, rgba(233, 251, 255, .14)); overflow: hidden; }
.race-bar__tube::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 100%); border-radius: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rb-coral) 70%, #fff), var(--rb-coral) 60%); transition: width .52s cubic-bezier(.22, .8, .3, 1); }
.race-bar__note { margin: 0; font-size: .78rem; color: var(--rb-dim); }
.race-bar__note a { color: var(--rb-fg); }
/* the race: a glowing banner with the countdown */
.race-bar--on { gap: 4px; box-shadow: inset 0 0 0 1.5px var(--rb-coral), 0 0 26px rgba(255, 122, 89, .5);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 122, 89, .4), rgba(255, 122, 89, .1) 60%, transparent 85%), var(--card, rgba(8, 46, 78, .82));
  animation: race-glow 1.8s ease-in-out infinite alternate; }
.race-bar__title { font-weight: 800; font-size: 1.02rem; color: var(--rb-fg); }
.race-bar__clock { font-weight: 800; font-size: 1.6rem; line-height: 1.1; color: var(--amount, #ffd65a); }
.race-bar__clock small { font-size: .78rem; font-weight: 600; color: var(--rb-dim); margin-left: 6px; }
@keyframes race-glow { to { box-shadow: inset 0 0 0 1.5px var(--rb-coral), 0 0 40px rgba(255, 122, 89, .75); } }
/* inside a home tile */
[data-race-bar="tile"] .race-bar { padding: 0; background: none; box-shadow: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .race-bar--on { animation: none; } .race-bar__tube::before { transition: none; } }