/* =========================================================================
   Tutok — LIVE flow screen styles  (prefix: lv-)
   Screens: tracking, session, rate.
   Shared component classes live in components.css; this file adds only the
   screen-specific structure + polish. All values consume design tokens.
   ========================================================================= */

/* =========================================================================
   TRACKING
   Map fills the top ~55%, an ETA banner overlaps its lower edge, and a
   scrollable card stack sits below, with a sticky footer.
   ========================================================================= */
.lv-track {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* ---- map region ---------------------------------------------------- */
.lv-map-wrap {
  position: relative;
  flex: 0 0 auto;
  height: 54%;
  min-height: 300px;
  isolation: isolate;
}
.lv-map-wrap .map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}
/* fade the map into the page at the bottom so the banner reads cleanly */
.lv-map-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg) 55%, transparent) 58%, var(--bg) 100%);
}
.lv-map-back {
  position: absolute;
  top: var(--s-3);
  left: var(--s-4);
  z-index: 9;
}
.lv-map-tag {
  position: absolute;
  top: var(--s-3);
  right: var(--s-4);
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  box-shadow: var(--sh-1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.lv-map-tag__icon { display: inline-flex; color: var(--brand); }
.lv-map-tag__icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* dock holds the banner so it overlaps the map's lower edge */
.lv-banner-dock {
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: 0;
  transform: translateY(38%);
  z-index: 12;
}

/* ---- ETA banner ---------------------------------------------------- */
.lv-banner {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--s-4) var(--s-5) var(--s-5);
  box-shadow: var(--sh-3);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lv-banner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-brand);
}
.lv-banner--arrived::before { background: var(--grad-success); }

.lv-banner__kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: .01em;
  color: var(--ink-soft);
}
.lv-banner__pulse {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--brand);
  position: relative;
  flex: 0 0 auto;
}
.lv-banner__pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .35;
  animation: lvPulse 1.8s var(--ease-io) infinite;
}
.lv-banner--arrived .lv-banner__pulse,
.lv-banner--arrived .lv-banner__pulse::after { background: var(--success); }

/* visit: big number + unit */
.lv-banner__eta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-2);
  margin-top: 6px;
}
.lv-eta-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 2.2rem + 4vw, 4rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lv-eta-unit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--muted);
}

/* online: connecting dots */
.lv-banner__connecting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.lv-banner__connecting-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--ink);
}
.lv-dots { display: inline-flex; gap: 7px; }
.lv-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand);
  animation: lvDot 1.2s var(--ease-io) infinite;
}
.lv-dots span:nth-child(2) { animation-delay: .18s; }
.lv-dots span:nth-child(3) { animation-delay: .36s; }

/* arrived state */
.lv-banner__arrived {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.lv-banner__arrived-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
}
.lv-banner__arrived-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lv-banner__arrived-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  color: var(--ink);
  text-align: left;
  line-height: 1.2;
}

/* progress track inside the banner */
.lv-banner__track {
  margin-top: var(--s-4);
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.lv-banner__track-fill {
  display: block;
  height: 100%;
  width: 62%;
  border-radius: inherit;
  background: var(--grad-brand);
  animation: lvCrawl 9s linear forwards;
}
.lv-banner__track-fill--indef {
  width: 40%;
  animation: lvIndef 1.6s var(--ease-io) infinite;
}

/* ---- card stack body ----------------------------------------------- */
.lv-track__body {
  flex: 1 1 auto;
  padding: calc(var(--s-7) + var(--s-2)) var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* tutor card */
.lv-tutor-card { padding: var(--s-4); }
.lv-tutor-card__top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.lv-tutor-card__person {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  border-radius: var(--r-md);
  transition: transform var(--dur-fast) var(--ease);
}
.lv-tutor-card__person:active { transform: scale(.99); }
.lv-tutor-card__meta { min-width: 0; }
.lv-tutor-card__name-row { display: flex; align-items: center; gap: 5px; }
.lv-tutor-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -.01em;
  color: var(--ink);
}
.lv-tutor-card__verify { color: var(--brand); display: inline-flex; flex: 0 0 auto; }
.lv-tutor-card__verify svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lv-tutor-card__rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.lv-tutor-card__rating-num { font-weight: 800; font-size: var(--fs-sm); color: var(--ink); }
.lv-tutor-card__sub { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.lv-tutor-card__line {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.lv-tutor-card__line-emoji { font-size: 1.1rem; }

/* call / message buttons */
.lv-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.lv-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lv-action__icon { display: inline-flex; }
.lv-action__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lv-action:active { transform: scale(.97); }
.lv-action--call {
  color: #fff;
  background: var(--grad-success);
  box-shadow: 0 8px 20px rgba(15,163,122,.32);
}
.lv-action--call:hover { filter: brightness(1.05); box-shadow: 0 12px 26px rgba(15,163,122,.4); }
.lv-action--msg {
  color: var(--brand-ink);
  background: var(--brand-soft);
}
.lv-action--msg:hover { background: color-mix(in srgb, var(--brand-soft) 72%, #fff); }

/* PIN card */
.lv-pin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--brand-soft) 70%, transparent), transparent 60%),
    var(--surface);
}
.lv-pin__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lv-pin__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--ink);
}
.lv-pin__hint { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.lv-pin__digits { display: inline-flex; gap: 7px; flex: 0 0 auto; }
.lv-pin__digit {
  width: 38px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--sh-2);
}

/* compact summary */
.lv-summary { padding: var(--s-4); }
.lv-summary__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.lv-summary__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.lv-summary__item-emoji {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 1.1rem;
}
.lv-summary__item-body { min-width: 0; display: flex; flex-direction: column; }
.lv-summary__item-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.lv-summary__item-value {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lv-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line);
}
.lv-summary__total-label { font-weight: 700; font-size: var(--fs-sm); color: var(--ink-soft); }
.lv-summary__total-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* cancel link */
.lv-cancel-row {
  margin-top: auto;
  padding: var(--s-3) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.lv-cancel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--muted);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  min-height: 44px;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lv-cancel:hover { color: var(--danger); background: var(--danger-soft); }

.lv-start-btn { letter-spacing: .01em; }

/* =========================================================================
   SESSION
   ========================================================================= */
.lv-session {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.lv-session-bar {
  padding: var(--s-3) var(--s-4);
  gap: var(--s-3);
}
.lv-session-bar__title { font-size: var(--fs-h3); }
.lv-subj-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.lv-subj-chip__emoji { font-size: 1.05em; }

.lv-session__body {
  flex: 1 1 auto;
  padding: var(--s-2) var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* timer hero */
.lv-session__hero {
  display: grid;
  place-items: center;
  padding: var(--s-5) 0 var(--s-6);
  position: relative;
}
.lv-session__hero::before {
  content: "";
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(124,58,237,.18), transparent 70%);
  filter: blur(6px);
  z-index: 0;
}
.lv-ring { position: relative; z-index: 1; }
.lv-ring__track { stroke: var(--surface-3); }
.lv-ring__bar {
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-slow) var(--ease);
}
.lv-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.lv-ring__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--danger-soft);
  color: var(--danger);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
}
.lv-ring__live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--danger);
  animation: lvBlink 1.4s steps(1, end) infinite;
}
.lv-ring__time {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 2.2rem + 3vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lv-ring__target {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* tutor row + mode */
.lv-session-tutor { padding: var(--s-4); }
.lv-session-tutor__mode { margin-top: var(--s-4); }
.lv-join-btn { letter-spacing: .01em; }
.lv-address {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 12px var(--s-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.lv-address__icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--sh-1);
}
.lv-address__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lv-address__body { min-width: 0; display: flex; flex-direction: column; }
.lv-address__label { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.lv-address__value { font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }

/* session tools */
.lv-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.lv-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lv-tool:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.lv-tool:active { transform: translateY(0) scale(.98); }
.lv-tool__emoji {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  font-size: 1.4rem;
}
.lv-tool__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-align: center;
}

.lv-end-btn { letter-spacing: .01em; }

/* =========================================================================
   RATE
   ========================================================================= */
.lv-rate {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.lv-rate__body {
  flex: 1 1 auto;
  padding: 0 var(--s-4) var(--s-4);
}

/* hero */
.lv-rate__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-2) var(--s-5);
}
.lv-rate__avatar { position: relative; }
.lv-rate__avatar-badge {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  box-shadow: 0 0 0 3px var(--bg);
}
.lv-rate__avatar-badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lv-rate__title {
  font-size: var(--fs-h1);
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: 18ch;
  line-height: 1.2;
}
.lv-rate__sub { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; margin-top: calc(var(--s-2) * -1 + 2px); }

/* big star selector */
.lv-stars {
  display: inline-flex;
  gap: var(--s-1);
  margin-top: var(--s-2);
}
.lv-star {
  color: var(--surface-3);
  padding: 4px;
  border-radius: var(--r-sm);
  transition: transform var(--dur-fast) var(--ease), color var(--dur) var(--ease);
}
.lv-star svg { display: block; }
.lv-star.is-on { color: var(--star); }
.lv-star:hover { transform: scale(1.08); }
.lv-star:active { transform: scale(.92); }
.lv-star.is-on svg { animation: lvPop var(--dur) var(--ease); }
.lv-rate__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--brand-ink);
  min-height: 1.4em;
}
.lv-rate__word--hint { color: var(--muted); font-weight: 700; font-size: var(--fs-body); }

/* compliment tags */
.lv-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* tips */
.lv-tip__note { font-size: var(--fs-sm); color: var(--muted); margin: calc(var(--s-1) * -1) 0 var(--s-3); }
.lv-tips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
}
.lv-tip {
  min-height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-inset);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-body);
  color: var(--ink-soft);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  font-variant-numeric: tabular-nums;
}
.lv-tip__none { font-size: var(--fs-sm); }
.lv-tip:hover { background: var(--surface-2); }
.lv-tip:active { transform: scale(.96); }
.lv-tip.is-on {
  background: var(--brand-soft);
  color: var(--brand-ink);
  box-shadow: inset 0 0 0 2px var(--brand);
}

/* comment */
.lv-comment { display: block; }
.lv-comment__field {
  display: block;
  width: 100%;
  min-height: 92px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  resize: vertical;
  transition: box-shadow var(--dur-fast) var(--ease);
}
.lv-comment__field::placeholder { color: var(--muted); }
.lv-comment__field:focus { box-shadow: inset 0 0 0 2px var(--brand); outline: none; }

/* receipt */
.lv-receipt { display: flex; flex-direction: column; gap: var(--s-3); }
.lv-receipt__rows {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-2) var(--s-4);
  box-shadow: var(--sh-1);
}
.lv-receipt__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
}
.lv-receipt__row + .lv-receipt__row { border-top: 1px solid var(--line); }
.lv-receipt__row-emoji {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 1.25rem;
}
.lv-receipt__row-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lv-receipt__row-label { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.lv-receipt__row-value { font-weight: 700; font-size: var(--fs-body); color: var(--ink); }
.lv-receipt__row-detail { color: var(--muted); font-weight: 600; font-size: var(--fs-sm); }

/* footer: two buttons, submit weighted heavier */
.lv-rate-footer .footer-cta__row,
.lv-rate-footer {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.lv-rate-footer__again { flex: 0 0 auto; }
.lv-rate-footer__submit { flex: 1 1 auto; }

/* =========================================================================
   Keyframes
   ========================================================================= */
@keyframes lvPulse {
  0% { transform: scale(.7); opacity: .5; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes lvDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .55; }
  30% { transform: translateY(-6px); opacity: 1; }
}
@keyframes lvCrawl { from { width: 8%; } to { width: 96%; } }
@keyframes lvIndef {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(280%); }
}
@keyframes lvBlink { 50% { opacity: .25; } }
@keyframes lvPop {
  0% { transform: scale(.6); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .lv-banner__pulse::after,
  .lv-dots span,
  .lv-banner__track-fill,
  .lv-banner__track-fill--indef,
  .lv-ring__live-dot,
  .lv-star.is-on svg { animation: none; }
  .lv-banner__track-fill { width: 70%; }
  .lv-banner__track-fill--indef { transform: none; }
}

/* =========================================================================
   Small-height phones: tighten the timer hero so the footer stays reachable
   ========================================================================= */
@media (max-height: 720px) {
  .lv-session__hero { padding: var(--s-3) 0 var(--s-4); }
  .lv-map-wrap { min-height: 260px; }
}

/* =========================================================================
   Narrow phones (~320px): keep the PIN + summary from overflowing
   ========================================================================= */
@media (max-width: 360px) {
  .lv-pin { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .lv-pin__digit { width: 34px; height: 42px; font-size: var(--fs-h3); }
  .lv-summary__item-value { font-size: var(--fs-xs); }
  .lv-tips { gap: 6px; }
  .lv-tip { min-height: 50px; }
}