/* Moved out of app.css as it was, rule for rule and in the same order (#547), so the picker can
   choose this file's specs: Tessellate's HUD.
   index.html loads it right after siege-hud.css, where these rules stood. */

/* ------------------------------------------------------------ Tessellate HUD (games/tessellate/src/view/tessellate.css) */

.tg-clock {
  font-weight: 900;
  font-size: max(1.25rem, calc(var(--fs-base) * 2));
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0.1em 0.4em var(--shadow);
}

.tg-clock.warn {
  color: var(--warn);
}

.high-contrast .tg-clock {
  color: var(--ui-text);
  text-shadow:
    0 0 0.25em var(--edge),
    0 0 0.1em var(--edge);
}

.high-contrast .tg-clock.warn {
  color: var(--warn);
}

.tg-share {
  display: flex;
  align-items: center;
  gap: 0.4em;
  width: 100%;
  margin-top: 0.15em;
}

.tg-share .bar {
  flex: 1;
  height: 0.5em;
  min-width: 4em;
  border-radius: 1em;
  background: var(--ui-key);
  overflow: hidden;
}

.tg-share .bar i {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--c);
  border-radius: 1em;
  transition: width 0.25s;
}

.tg-share b {
  font-variant-numeric: tabular-nums;
  min-width: 2.6em;
  text-align: end;
}

.tg-card .pg-card-body {
  flex: 1;
}

.reduced-motion .tg-share .bar i {
  transition: none;
}