:root {
  --lv-dot: 9px;
  --lv-dot-off: var(--ink-soft);
  --lv-dot-on: #2fbf5b;
  --lv-dot-ring: rgba(47, 191, 91, 0.28);
  --lv-tag-bg: var(--pop-soft);
  --lv-tag-ink: var(--pop-ink);
  --lv-tag-fs: var(--fs-2xs);
  --lv-seek: 112px;
  --lv-seek-ring: rgba(76, 176, 90, 0.35);
  --lv-seek-t: 1.8s;
  --lv-window-h: 4px;
  --lv-window-bg: var(--accent);
  --lv-window-track: var(--surface-sunk);
  --lv-bar-h: 44px;
  --lv-bar-gap: var(--sp-2);
  --lv-bar-pad: 0 var(--sp-2) 0 var(--sp-1);
  --lv-btn: 36px;
  --lv-tug-h: 5px;
  --lv-tug-w: 72px;
  --lv-tug-me: var(--accent);
  --lv-tug-them: var(--pop);
  --lv-them-fs: var(--fs-m);
  --lv-clock-fs: var(--fs-s);
  --lv-clock-mine: var(--accent-ink);
  --lv-status-fs: var(--fs-xs);
  --lv-warn-bg: var(--pop-soft);
  --lv-warn-ink: var(--pop-ink);
  --lv-go-bg: var(--accent-soft);
  --lv-go-ink: var(--accent-ink);
  --lv-count-fs: 96px;
  --lv-count-ink: var(--art-white);
  --lv-count-edge: rgba(27, 26, 32, 0.45);
  --lv-count-at: 64%;
  --lv-count-t: 0.75s;
  --lv-emo: 40px;
  --lv-emo-fs: 22px;
  --lv-pop-fs: 40px;
  --lv-pop-t: 1.6s;
  --lv-pop-rise: -64px;
  --lv-invite-w: min(420px, calc(100vw - 2 * var(--sp-3)));
  --lv-invite-top: calc(var(--safe-top) + var(--sp-3));
  --lv-invite-z: 45;
  --lv-invite-text: 11rem;
  --lv-line-ink: var(--ink-soft);
  --lv-line-fw: var(--fw-b);
  --lv-shadow: 0 10px 30px rgba(20, 30, 20, 0.22);
}

.dark,
.is-dark {
  --lv-dot-on: #5fdc84;
  --lv-dot-ring: rgba(95, 220, 132, 0.25);
  --lv-seek-ring: rgba(127, 211, 138, 0.3);
  --lv-count-edge: rgba(0, 0, 0, 0.6);
  --lv-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.lc {
  --lv-btn: 48px;
  --lv-emo: 48px;
  --lv-bar-h: 52px;
}

.lv-go {
  position: relative;
}

.lv-dot {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: var(--lv-dot);
  height: var(--lv-dot);
  border-radius: 50%;
  background: var(--lv-dot-off);
  opacity: 0.5;
}

.lv-dot.on {
  background: var(--lv-dot-on);
  opacity: 1;
  box-shadow: 0 0 0 3px var(--lv-dot-ring);
}

.lv-pick {
  position: relative;
}

.lv-tag {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 0 var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--lv-tag-bg);
  color: var(--lv-tag-ink);
  font-size: var(--lv-tag-fs);
  font-weight: var(--fw-x);
}

.lv-intro {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  margin-bottom: var(--gap-m);
}

.lv-intro p {
  margin: 0;
  font-size: var(--fs-s);
}

.lv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

.lv-card h3,
.lv-card p {
  margin: 0;
}

.lv-score {
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--fs-l);
}

.lv-seek {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--lv-seek);
  height: var(--lv-seek);
}

.lv-seek > i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--lv-seek-ring);
  animation: lv-ring var(--lv-seek-t) var(--ease) infinite;
}

.lv-seek > i + i {
  animation-delay: calc(var(--lv-seek-t) / 2);
}

.lv-window {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--lv-window-h);
  background: var(--lv-window-bg);
  border-radius: var(--r-pill);
  transform-origin: left center;
  animation: lv-shrink var(--lv-window) linear forwards;
  pointer-events: none;
}

.lv-window.lv-inline {
  position: relative;
  display: block;
  width: 100%;
  box-shadow: 0 0 0 1px var(--lv-window-track);
}

.lv-rematch {
  position: relative;
  overflow: hidden;
}

.lv-reason {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  margin: 0;
  font-size: var(--fs-s);
  color: var(--ink-soft);
}

.lv-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border-radius: var(--r-m);
  background: var(--hud-glass);
}

.lv-tray.flat {
  background: none;
  padding: 0;
}

.lv-emo {
  width: var(--lv-emo);
  height: var(--lv-emo);
  border-radius: 50%;
  background: var(--surface-2);
  font-size: var(--lv-emo-fs);
  line-height: 1;
}

.lv-emo:active {
  transform: scale(var(--press-s));
}

#game-hud .g-slot {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--lv-bar-h);
  pointer-events: none;
}

#game-hud .g-slot .lv-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  width: 100%;
}

#game-hud .g-slot .lv-bar,
#game-hud .g-slot .lv-tray,
#game-hud .g-slot .lv-status {
  pointer-events: auto;
}

.lv-bar {
  display: flex;
  align-items: center;
  gap: var(--lv-bar-gap);
  min-height: var(--lv-bar-h);
  max-width: 100%;
  padding: var(--lv-bar-pad);
  border-radius: var(--r-pill);
  background: var(--hud-glass);
  color: var(--ink);
}

.lv-who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.lv-who b {
  max-width: var(--lv-tug-w);
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lv-tug {
  display: block;
  width: var(--lv-tug-w);
  height: var(--lv-tug-h);
  border-radius: var(--r-pill);
  background: var(--lv-tug-them);
  overflow: hidden;
}

.lv-tug i {
  display: block;
  height: 100%;
  width: calc(var(--f) * 100%);
  background: var(--lv-tug-me);
  transition: width var(--t-med) var(--ease);
}

.lv-them {
  font-size: var(--lv-them-fs);
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
}

#game-hud:has(.lv-live[data-mode="race"]) .g-line {
  color: var(--lv-line-ink);
  font-weight: var(--lv-line-fw);
}

.lv-clock {
  min-width: 2.6em;
  font-size: var(--lv-clock-fs);
  font-weight: var(--fw-x);
  color: var(--ink-soft);
  text-align: center;
}

.lv-clock.mine {
  color: var(--lv-clock-mine);
}

.lv-react {
  width: var(--lv-btn);
  height: var(--lv-btn);
  min-width: var(--lv-btn);
  min-height: var(--lv-btn);
}

.lv-status {
  margin: 0;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--hud-glass);
  font-size: var(--lv-status-fs);
  font-weight: var(--fw-x);
}

.lv-status.warn {
  background: var(--lv-warn-bg);
  color: var(--lv-warn-ink);
}

.lv-status.go {
  background: var(--lv-go-bg);
  color: var(--lv-go-ink);
}

.lv-count {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--lv-count-at);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.lv-count b {
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--lv-count-fs);
  line-height: 1;
  color: var(--lv-count-ink);
  -webkit-text-stroke: 3px var(--lv-count-edge);
  paint-order: stroke fill;
  animation: lv-tick var(--lv-count-t) var(--ease) both;
}

.lv-fx {
  position: relative;
  width: 100%;
  height: 0;
}

.lv-pop {
  position: absolute;
  left: 50%;
  top: 0;
  font-size: var(--lv-pop-fs);
  line-height: 1;
  animation: lv-float var(--lv-pop-t) var(--ease) forwards;
}

.lv-invite {
  position: fixed;
  left: 50%;
  top: var(--lv-invite-top);
  z-index: var(--lv-invite-z);
  width: var(--lv-invite-w);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  overflow: hidden;
  transform: translateX(-50%);
  box-shadow: var(--lv-shadow);
  animation: drop var(--t-med) var(--ease);
}

.lv-invite[hidden] {
  display: none;
}

.lv-invite .grow {
  flex: 1 1 var(--lv-invite-text);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lv-invite small {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.lv-invite .row-btns {
  margin-left: auto;
}

.lv-inv small {
  display: block;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.qz-turn {
  font-weight: var(--fw-x);
  color: var(--accent-ink);
}

.reduce-motion .lv-window,
.reduce-motion .lv-seek > i {
  animation: none !important;
}

@keyframes lv-ring {
  from {
    transform: scale(0.45);
    opacity: 1;
  }

  to {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes lv-shrink {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@keyframes lv-tick {
  from {
    transform: scale(1.4);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes lv-float {
  from {
    transform: translate(-50%, 0) scale(0.6);
    opacity: 0;
  }

  20% {
    transform: translate(-50%, 0) scale(1.1);
    opacity: 1;
  }

  to {
    transform: translate(-50%, var(--lv-pop-rise)) scale(1);
    opacity: 0;
  }
}