/* Long Haul: lived-in frontier. Warm amber cockpit light, teal and rust hull paint, deep blue space.
   One screen everywhere (no page scroll); motion on transform/opacity; reduced motion calms it. */

:root {
  --lh-space: #05091a;
  --lh-ink: #f4e7d0;
  --lh-ink-dim: #b8aa93;
  --lh-ink-faint: #7f7667;
  --lh-amber: #ffb347;
  --lh-amber-hot: #ffd08a;
  --lh-amber-deep: #c96d17;
  --lh-teal: #3fb7a8;
  --lh-teal-hot: #8aeedd;
  --lh-rust: #b8522c;
  --lh-red: #e8705a;
  --lh-steel: #8d8778;
  --lh-panel: linear-gradient(180deg, rgba(24, 34, 54, 0.86), rgba(11, 17, 32, 0.9));
  --lh-edge: rgba(255, 196, 130, 0.16);
  --lh-r: 14px;
  --lh-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
  --lh-node: 40px;
  --lh-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html, body { height: 100%; overflow: hidden; }
body.lh {
  min-height: 0;
  color: var(--lh-ink);
  background: var(--lh-space);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
.lh [hidden] { display: none !important; }
.lh :focus-visible { outline: 3px solid var(--lh-amber-hot); outline-offset: 3px; border-radius: 10px; }

.lh-space { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
/* A warm cockpit vignette over space: the glass you are looking through. */
body.lh::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(3, 5, 14, 0.7) 100%),
    linear-gradient(180deg, rgba(255, 170, 90, 0.06), transparent 18%, transparent 82%, rgba(255, 150, 70, 0.07));
}

.lh-shell {
  position: relative; z-index: 2;
  height: 100dvh;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- Top bar: the console strip ---------- */
.lh-top {
  display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  padding: 10px clamp(12px, 2vw, 24px);
  background: linear-gradient(180deg, rgba(8, 12, 24, 0.92), rgba(12, 18, 32, 0.74));
  border-bottom: 1px solid rgba(255, 179, 71, 0.22);
  box-shadow: 0 1px 0 rgba(255, 179, 71, 0.08), 0 10px 30px -18px rgba(255, 150, 60, 0.5);
}
.lh-brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; }
.lh-home {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 12px; color: var(--lh-ink);
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background var(--dur), transform var(--dur);
}
.lh-home:hover { background: rgba(255, 179, 71, 0.16); transform: translateX(-2px); }
.lh-home svg { width: 22px; height: 22px; }
.lh-brand__text { min-width: 0; }
/* The wordmark: hull-paint amber (lit from above, deeper at the keel) with a stamped dark edge,
   over the Marigold's paint scheme as a stripe -- orange, a gap, teal, a gap, rust. The fill is a
   gradient clipped to the glyphs; `color` stays solid amber so contrast tools and forced colours
   still see a real text colour. */
.lh-brand__name {
  position: relative; padding-bottom: 5px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; color: var(--lh-amber);
  background: linear-gradient(180deg, #ffe4b2 0%, #ffb347 50%, #dc7a22 100%) 0 0 / 100% 1em no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(60, 24, 4, 0.95)) drop-shadow(0 0 10px rgba(255, 160, 60, 0.35));
}
.lh-brand__name::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: calc(100% - 0.14em); height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #e8702a 0 62%, transparent 62% 65%, #2f8f86 65% 86%, transparent 86% 89%, #b8522c 89%);
  /* scuffed paint: a few chips knocked out of the stripe */
  -webkit-mask-image: linear-gradient(90deg, #000 0 23%, rgba(0, 0, 0, 0.6) 23.6%, #000 24.2% 71%, rgba(0, 0, 0, 0.55) 71.6%, #000 72.4%);
  mask-image: linear-gradient(90deg, #000 0 23%, rgba(0, 0, 0, 0.6) 23.6%, #000 24.2% 71%, rgba(0, 0, 0, 0.55) 71.6%, #000 72.4%);
}
@media (forced-colors: active) {
  .lh-brand__name { -webkit-text-fill-color: currentColor; background: none; filter: none; }
}
.lh-brand__sub {
  margin: 4px 0 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #cbbda4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The crew patch: the chapter's ship icon in a stitched roundel -- teal band, dark gap, amber rim.
   A glint crosses it every few seconds (slow and faint with reduced motion). */
.lh-insignia {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #1f3d42, #0a141c 72%);
  box-shadow: 0 0 0 2px #2f8f86, 0 0 0 4px #10161f, 0 0 0 5px rgba(255, 179, 71, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 150, 60, 0.22);
  margin-inline: 3px 1px;
}
.lh-insignia .lh-hauler { position: absolute; left: 12%; top: 22%; width: 76%; height: 56%; }
.lh-insignia__img { position: absolute; inset: -22%; width: 144%; height: 144%; max-width: none; object-fit: cover; display: block; }
.lh-insignia::before {
  content: ''; position: absolute; inset: 3px; z-index: 1; border-radius: 50%;
  border: 1.5px dashed rgba(255, 196, 130, 0.5);
}
.lh-insignia::after {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 240, 210, 0.5) 50%, transparent 62%);
  transform: translateX(-130%); animation: lh-glint 7s 2s ease-in-out infinite;
}
@keyframes lh-glint { 0%, 82% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) {
  .lh-insignia::after { opacity: 0.45; animation-duration: 14s; animation-timing-function: linear; }
}

.lh-stats { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; flex-wrap: nowrap; }
.lh-stat {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 12px 6px 8px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(20, 28, 44, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 220, 170, 0.06);
}
.lh-stat__icon { width: 28px; height: 28px; flex: none; display: grid; place-items: center; }
.lh-stat__icon .lh-ico { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(255, 170, 80, 0.25)); }
.lh-stat__body { display: grid; min-width: 0; line-height: 1.05; }
.lh-stat__label { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lh-ink-faint); font-weight: 800; }
.lh-stat__value { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lh-stat__num { display: inline-block; }
.lh-stat__of { color: var(--lh-ink-faint); font-size: 0.8em; margin-left: 1px; }
.lh-stat__sub { font-size: 0.66rem; color: var(--lh-amber-hot); font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 2px; }
.lh-stat--debt .lh-stat__value { color: var(--lh-red); }
.lh-stat--credits .lh-stat__value { color: var(--lh-teal-hot); }
.lh-stat--stars .lh-stat__value { color: var(--lh-amber-hot); }
.lh-stat--fuel.is-low .lh-stat__value { color: var(--lh-red); }
.lh-stat.is-up .lh-stat__num, .lh-stat.is-down .lh-stat__num { animation: lh-bump 600ms var(--lh-ease); }
.lh-stat.is-up .lh-stat__icon .lh-ico { animation: lh-icon-pop 700ms var(--lh-ease); }
@keyframes lh-bump { 30% { transform: translateY(-3px) scale(1.12); } }
@keyframes lh-icon-pop { 30% { transform: scale(1.25) rotate(-8deg); } }

.lh-gauge { display: block; height: 4px; margin-top: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.lh-gauge i {
  display: block; height: 100%; transform-origin: left; transition: transform 600ms var(--lh-ease);
  background: linear-gradient(90deg, var(--lh-amber-deep), var(--lh-amber) 70%, var(--lh-amber-hot));
  box-shadow: 0 0 8px rgba(255, 179, 71, 0.7);
}

/* ---------- Screens ---------- */
.lh-screens { position: relative; min-height: 0; }
.lh-screen { position: absolute; inset: 0; z-index: 0; } /* each screen its own stack: one shown over another stays on top */
.lh-screen[hidden] { display: none; }
.lh-screen:not([hidden]) { animation: lh-screen-in 420ms var(--lh-ease); }
@keyframes lh-screen-in { from { opacity: 0; transform: translateY(8px); } }

.lh-loading { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; max-width: none; color: var(--lh-ink-dim); letter-spacing: 0.08em; }
.lh-loading__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lh-amber); box-shadow: 0 0 12px var(--lh-amber); animation: lh-blink 1s ease-in-out infinite; }
@keyframes lh-blink { 50% { opacity: 0.25; transform: scale(0.7); } }

.lh-card-screen { display: grid; place-items: center; padding: 16px; }
.lh-card {
  width: min(28rem, 100%); padding: 28px 24px 24px; text-align: center;
  background: var(--lh-panel); border: 1px solid var(--lh-edge); border-radius: var(--lh-r);
  box-shadow: 0 30px 60px -30px #000;
}
.lh-card h2 { font-family: var(--font-display); font-size: var(--step-2); color: var(--lh-amber); margin-bottom: 8px; }
.lh-card p { color: var(--lh-ink-dim); margin: 0 auto 18px; }
.lh-card__icon { width: 72px; height: 72px; margin: 0 auto 6px; display: block; animation: lh-drift 4s ease-in-out infinite; }
@keyframes lh-drift { 50% { transform: translateY(-5px) rotate(-3deg); } }

/* ---------- Buttons ---------- */
.lh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 12px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em;
  color: var(--lh-ink); background: linear-gradient(180deg, #2a3650, #1a2338);
  border: 1px solid rgba(138, 238, 221, 0.22);
  box-shadow: 0 3px 0 #0b1020, 0 10px 20px -12px #000;
  transition: transform 160ms var(--lh-ease), filter 160ms;
}
.lh-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
.lh-btn:active:not(:disabled) { transform: translateY(2px); }
.lh-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.lh-btn .lh-ico { width: 22px; height: 22px; flex: none; }
.lh-btn--primary {
  position: relative; isolation: isolate;
  color: #2a1606; border: 0;
  background: linear-gradient(180deg, #ffd38a 0%, #ffb347 45%, #e88a2a 100%);
  box-shadow: 0 4px 0 #8a4310, 0 12px 26px -10px rgba(255, 140, 50, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.lh-btn--primary::after {
  content: ''; position: absolute; inset: -6px; z-index: -1; border-radius: 16px;
  background: radial-gradient(closest-side, rgba(255, 179, 71, 0.55), transparent);
  animation: lh-breathe 2.6s ease-in-out infinite;
}
.lh-btn--primary:disabled { opacity: 0.55; filter: saturate(0.4); }
.lh-btn--primary:disabled::after { animation: none; opacity: 0; }
@keyframes lh-breathe { 0%, 100% { opacity: 0.35; transform: scale(0.96); } 50% { opacity: 0.9; transform: scale(1.04); } }
.lh-btn--side { min-width: 48px; }

/* ---------- Hub layout ---------- */
.lh-hub__grid {
  position: relative; height: 100%;
  display: grid; gap: 14px; padding: 14px clamp(12px, 1.6vw, 22px) 16px;
  grid-template-columns: clamp(12rem, 15vw, 17rem) minmax(0, 1fr) clamp(14rem, 18vw, 21rem);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: 'events chart ledger' 'actions actions actions';
}
.lh-rail { grid-area: events; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.lh-events { flex: 1 1 auto; }
.lh-plan { flex: none; gap: 6px; }
.lh-plan__kicker { margin: 4px 0 0; font-family: var(--lh-mono); font-size: 0.72rem; color: var(--lh-teal-hot); letter-spacing: 0.06em; }
.lh-plan__name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--lh-ink); line-height: 1.15; }
.lh-plan__note { margin: 0; color: var(--lh-ink-dim); font-size: 0.9rem; }
.lh-plan__facts { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font-size: 0.9rem; color: var(--lh-ink-dim); }
.lh-plan__facts li { display: flex; align-items: center; gap: 8px; }
.lh-plan__facts .lh-ico { width: 16px; height: 16px; color: var(--lh-amber); }
.lh-new {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 99px; color: #2a1606; background: var(--lh-amber);
  position: relative;
}
/* The glow breathes on a pseudo-element's opacity (compositor-only), not on box-shadow. */
.lh-new::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 12px rgba(255, 179, 71, 0.8); opacity: 0;
  animation: lh-glow-pulse 2.2s ease-in-out infinite;
}
.lh-plan__facts .is-new { color: var(--lh-ink); font-weight: 600; }
@keyframes lh-glow-pulse { 50% { opacity: 1; } }
.lh-ledger { grid-area: ledger; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 179, 71, 0.35) transparent; }
.lh-ledger .lh-port, .lh-ledger .lh-hold, .lh-ledger .lh-rumour { flex: none; }
.lh-chartwrap { grid-area: chart; }
.lh-actions { grid-area: actions; }

/* Riveted panel with a worn teal stripe. */
.lh-panel {
  position: relative; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 16px 16px;
  background:
    radial-gradient(circle at 8px 8px, rgba(255, 220, 170, 0.28) 1.6px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 8px) 8px, rgba(255, 220, 170, 0.28) 1.6px, transparent 2.4px),
    radial-gradient(circle at 8px calc(100% - 8px), rgba(255, 220, 170, 0.2) 1.6px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), rgba(255, 220, 170, 0.2) 1.6px, transparent 2.4px),
    var(--lh-panel);
  border: 1px solid var(--lh-edge); border-radius: var(--lh-r);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.07), 0 24px 50px -28px #000;
  backdrop-filter: blur(6px);
}
.lh-panel::before {
  content: ''; position: absolute; left: 18px; right: 30%; top: 0; height: 4px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--lh-teal) 0 46%, var(--lh-rust) 46% 52%, var(--lh-teal) 52% 78%, rgba(63, 183, 168, 0.4) 78% 84%, var(--lh-teal) 84%);
  opacity: 0.85;
}
.lh-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lh-panel__title {
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--lh-amber);
}
.lh-sheet-close { display: none; }

/* Events rail */
.lh-event-empty {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  margin-top: 4px; padding: 20px 14px; border-radius: 12px;
  border: 1px dashed rgba(138, 238, 221, 0.22); background: rgba(63, 183, 168, 0.05);
}
.lh-event-empty p { margin: 0; color: var(--lh-ink-dim); font-size: 0.92rem; line-height: 1.45; }
.lh-event-empty__icon .lh-ico { width: 54px; height: 54px; }
.lh-ico__wave { animation: lh-wave 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lh-ico__wave--2 { animation-delay: 0.4s; }
@keyframes lh-wave { 0%, 100% { opacity: 0.15; } 40% { opacity: 1; } }

/* Lanes Ledger */
.lh-ledger__sub { margin: -6px 0 0; font-size: 0.75rem; color: var(--lh-ink-faint); letter-spacing: 0.04em; }
.lh-port { padding: 10px 12px 6px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.05); }
.lh-port__name { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--lh-ink); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.lh-badge { font-family: var(--font-body); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; background: var(--lh-teal); color: #062824; }
.lh-prices { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.lh-prices th { text-align: left; font-weight: 600; color: var(--lh-ink-dim); padding: 3px 10px 3px 0; }
.lh-prices td { padding: 3px 0; }
.lh-price { text-align: right; font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; padding-right: 10px !important; }
.lh-trend { text-align: right; width: 1%; white-space: nowrap; }
.lh-trend__chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 99px; text-transform: uppercase; }
.lh-trend__arrow { width: 0; height: 0; border: 4px solid transparent; }
.is-cheap .lh-trend__chip { color: #9ff3e3; background: rgba(63, 183, 168, 0.16); }
.is-cheap .lh-trend__arrow { border-top-color: currentColor; margin-top: 4px; }
.is-dear .lh-trend__chip { color: #ffb19f; background: rgba(232, 112, 90, 0.16); }
.is-dear .lh-trend__arrow { border-bottom-color: currentColor; margin-bottom: 4px; }
.is-fair .lh-trend__chip { color: var(--lh-ink-dim); background: rgba(255, 255, 255, 0.06); }
.is-fair .lh-trend__arrow { width: 7px; height: 2px; border: 0; background: currentColor; }
.lh-hold { padding: 2px 2px 0; }
.lh-hold__row { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--lh-ink-dim); text-transform: uppercase; letter-spacing: 0.1em; }
.lh-hold__row strong { color: var(--lh-ink); font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
.lh-gauge--hold i { background: linear-gradient(90deg, #1f7c72, var(--lh-teal) 70%, var(--lh-teal-hot)); box-shadow: 0 0 8px rgba(63, 183, 168, 0.7); }
.lh-hold__goods { margin: 6px 0 0; font-size: 0.82rem; color: var(--lh-ink-dim); }
.lh-empty { color: var(--lh-ink-dim); font-size: 0.9rem; margin: 0; }
.lh-rumour {
  margin: auto 0 0; padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 179, 71, 0.12), rgba(255, 179, 71, 0.02));
  border-left: 3px solid var(--lh-amber);
}
.lh-rumour figcaption { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lh-amber); display: flex; align-items: center; gap: 6px; }
.lh-rumour figcaption::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lh-amber); box-shadow: 0 0 8px var(--lh-amber); animation: lh-blink 1.6s ease-in-out infinite; }
.lh-rumour blockquote { margin: 4px 0 0; font-size: 0.95rem; color: var(--lh-ink); font-style: italic; }

/* ---------- The star chart ---------- */
.lh-chartwrap {
  position: relative; min-height: 0; min-width: 0;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(138, 238, 221, 0.14);
  background:
    linear-gradient(rgba(138, 238, 221, 0.045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(138, 238, 221, 0.045) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(90% 80% at 50% 50%, rgba(10, 30, 50, 0.06), rgba(5, 9, 26, 0.3));
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.35);
}
/* Corner brackets of the nav-plot glass. */
.lh-chartwrap::before {
  content: ''; position: absolute; inset: 10px; pointer-events: none; z-index: 1;
  --c: rgba(255, 179, 71, 0.55);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 18px no-repeat;
}
/* A slow scanner sweep across the glass. */
.lh-chartwrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 22%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(138, 238, 221, 0.03) 60%, rgba(138, 238, 221, 0.07) 88%, transparent);
  animation: lh-sweep 11s linear infinite;
}
@keyframes lh-sweep { from { transform: translateX(-100%); } to { transform: translateX(560%); } }

.lh-chart__head { position: absolute; top: 14px; left: 22px; right: 22px; z-index: 3; pointer-events: none; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lh-chart__title { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lh-amber); }
.lh-chart__meta { margin: 0; font-family: var(--lh-mono); font-size: 0.74rem; color: var(--lh-ink-dim); letter-spacing: 0.04em; }
.lh-chart__meta [data-lit] { color: var(--lh-amber-hot); font-weight: 700; }
.lh-chart__host { position: absolute; inset: 0; }

.lh-lanes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lh-lane path { fill: none; stroke-linecap: round; }
.lh-lane__glow { stroke: rgba(255, 170, 70, 0.28); stroke-width: 9; }
.lh-lane__core { stroke: #ffc56b; stroke-width: 2.4; }
.lh-lane__flow { stroke: #fff4d6; stroke-width: 3.4; stroke-dasharray: 2 26; animation: lh-flow 2.8s linear infinite; }
@keyframes lh-flow { to { stroke-dashoffset: -56; } }
.lh-lane--next .lh-lane__line { stroke: var(--lh-teal-hot); stroke-width: 2.4; stroke-dasharray: 7 9; animation: lh-march 1.2s linear infinite, lh-pulse-line 1.8s ease-in-out infinite; }
@keyframes lh-march { to { stroke-dashoffset: -32; } }
@keyframes lh-pulse-line { 50% { opacity: 0.35; } }
.lh-lane--locked .lh-lane__line { stroke: rgba(184, 170, 147, 0.32); stroke-width: 1.6; stroke-dasharray: 1 7; }

.lh-nodes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.lh-node {
  --lh-size: var(--lh-node);
  position: absolute; width: var(--lh-size); height: var(--lh-size); margin: calc(var(--lh-size) / -2) 0 0 calc(var(--lh-size) / -2);
  padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; border-radius: 50%;
  display: grid; place-items: center; z-index: 2;
}
.lh-node__ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.lh-node__disc {
  grid-area: 1 / 1;
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  font-family: var(--font-display); font-weight: 600; font-size: calc(var(--lh-size) * 0.4); font-variant-numeric: tabular-nums;
  transition: transform 200ms var(--lh-ease);
}
.lh-node:hover .lh-node__disc { transform: scale(1.12); }
.lh-node.is-cleared .lh-node__disc {
  color: #3a1d06;
  background: radial-gradient(circle at 35% 30%, #fff1cf, #ffc56b 45%, #d9761f 100%);
  box-shadow: 0 0 0 2px rgba(58, 29, 6, 0.6), 0 0 18px rgba(255, 170, 70, 0.6);
}
.lh-node.is-next .lh-node__disc {
  color: #052420;
  background: radial-gradient(circle at 35% 30%, #ffffff, #a9fff0 40%, #2fa696 100%);
  box-shadow: 0 0 0 3px rgba(5, 36, 32, 0.6), 0 0 26px rgba(138, 238, 221, 0.85);
  animation: lh-node-throb 1.8s ease-in-out infinite;
}
@keyframes lh-node-throb { 50% { transform: scale(1.08); } }
.lh-node.is-next .lh-node__ring, .lh-node.is-next::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--lh-teal-hot);
  animation: lh-ring 1.8s ease-out infinite; pointer-events: none;
}
.lh-node.is-next::after { animation-delay: 0.9s; }
@keyframes lh-ring { from { transform: scale(0.9); opacity: 0.9; } to { transform: scale(2); opacity: 0; } }
.lh-node.is-locked .lh-node__disc {
  color: rgba(244, 231, 208, 0.45); font-size: calc(var(--lh-size) * 0.34);
  background: radial-gradient(circle at 40% 35%, rgba(60, 70, 92, 0.9), rgba(16, 22, 38, 0.95));
  box-shadow: inset 0 0 0 1.5px rgba(184, 170, 147, 0.35);
}
.lh-node.is-locked:hover .lh-node__disc { transform: scale(1.05); }

/* The Lane Lord's gate: bigger, ringed in rust, the ring turning slowly. */
.lh-node.is-boss { --lh-size: calc(var(--lh-node) * 1.35); }
.lh-node.is-boss .lh-node__disc .lh-ico { width: 52%; height: 52%; }
.lh-chart:not(.is-roomy) .lh-node__tag:not(.lh-node__tag--boss) { display: none; } /* the port pip says it */
.lh-node.is-boss.is-locked .lh-node__disc {
  color: #ffd2c2;
  background: radial-gradient(circle at 40% 35%, #7a2f1a, #3a130b 75%);
  box-shadow: inset 0 0 0 2px rgba(255, 140, 110, 0.5), 0 0 24px rgba(232, 112, 90, 0.45);
}
.lh-node.is-boss .lh-node__ring {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  border: 2px dashed rgba(232, 112, 90, 0.8);
  animation: lh-spin 14s linear infinite; pointer-events: none;
}
.lh-node.is-boss::before {
  content: ''; position: absolute; inset: -16px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 112, 90, 0.28), transparent);
  animation: lh-breathe 3.2s ease-in-out infinite;
}
@keyframes lh-spin { to { transform: rotate(360deg); } }

.lh-node__pips { position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%); display: flex; gap: 1px; }
.lh-node__pips i {
  width: 10px; height: 10px; display: block;
  clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 61%, 81% 100%, 50% 78%, 19% 100%, 29% 61%, 0 38%, 37% 35%);
  background: rgba(244, 231, 208, 0.22);
}
.lh-node__pips i.on { background: #ffd36b; filter: drop-shadow(0 0 3px rgba(255, 200, 90, 0.9)); }
.lh-node__tag {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lh-teal-hot); padding: 2px 7px; border-radius: 6px;
  background: rgba(5, 20, 26, 0.75); border: 1px solid rgba(138, 238, 221, 0.25);
}
.lh-node.tag-below .lh-node__tag { bottom: auto; top: calc(100% + 16px); }
.lh-node.tag-left .lh-node__tag, .lh-node.tag-right .lh-node__tag { bottom: auto; top: 50%; transform: translateY(-50%); }
.lh-node.tag-left .lh-node__tag { left: auto; right: calc(100% + 8px); }
.lh-node.tag-right .lh-node__tag { left: calc(100% + 8px); }
.lh-node.tag-above .lh-node__tag { top: auto; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.lh-node__tag--boss { color: #ffb19f; border-color: rgba(232, 112, 90, 0.4); background: rgba(40, 10, 6, 0.75); }
.lh-node.is-boss.tag-below .lh-node__tag { top: calc(100% + 14px); }

.lh-node__port {
  position: absolute; top: -3px; right: -3px; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle, #e9fffb 0 2px, var(--lh-teal) 2.5px 4px, #0a2a28 4.5px);
  box-shadow: 0 0 6px rgba(138, 238, 221, 0.7);
}
.lh-node.is-shake .lh-node__disc { animation: lh-shake 420ms ease-in-out; }
@keyframes lh-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.lh-node.is-fresh .lh-node__disc { animation: lh-pop 700ms 1.2s var(--lh-ease) backwards; }
@keyframes lh-pop { from { transform: scale(0.4); opacity: 0.3; } 60% { transform: scale(1.25); opacity: 1; } }
.lh-chart.is-busy .lh-node { cursor: progress; }

/* The Marigold: parked beside the current node, bobbing, engines breathing. */
.lh-ship { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; will-change: transform; }
.lh-ship__rot { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.lh-ship__bob {
  position: absolute; width: 92px; height: 50px; left: -54px; top: -68px;
  animation: lh-bob 3.4s ease-in-out infinite;
  will-change: transform; /* rasterise the shadow filter once; the bob then only moves the layer */
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 12px rgba(255, 170, 80, 0.25));
}
.lh-ship__bob .lh-hauler, .lh-ship__img { width: 100%; height: 100%; display: block; object-fit: contain; }
.lh-ship__bob.has-img { width: 66px; height: 66px; left: -33px; top: -84px; border-radius: 50%; }
.lh-ship__bob.has-img::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255, 196, 120, 0.75), 0 0 14px rgba(63, 183, 168, 0.5);
}
.lh-ship__bob.has-img .lh-ship__img { transform: scale(1.75); clip-path: circle(28.5% at 50% 50%); }
@keyframes lh-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
.lh-hauler__flame { animation: lh-flame 0.22s steps(2) infinite alternate; transform-origin: 20px 33px; }
@keyframes lh-flame { from { opacity: 0.75; transform: scaleX(0.85); } to { opacity: 1; transform: scaleX(1.1); } }
.lh-hauler__nav { animation: lh-blink 1.4s steps(1) infinite; }
.lh-hauler__nav--g { animation-delay: 0.7s; }

/* Comm line: short replies from the chart (locked lanes, refusals). */
.lh-comm {
  position: absolute; left: 50%; bottom: 14px; z-index: 4; margin: 0; max-width: calc(100% - 32px);
  padding: 8px 14px; border-radius: 10px; font-size: 0.9rem; font-weight: 600;
  background: rgba(10, 14, 26, 0.92); border: 1px solid rgba(255, 179, 71, 0.4); color: var(--lh-amber-hot);
  opacity: 0; transform: translate(-50%, 10px); transition: opacity 260ms, transform 260ms var(--lh-ease); pointer-events: none;
}
.lh-comm.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Bottom action bar ---------- */
.lh-actions { display: grid; gap: 10px; }
.lh-actions__row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.lh-go { min-height: 58px; padding: 0 26px; font-size: 1.2rem; min-width: min(20rem, 100%); }
.lh-go .lh-ico { width: 24px; height: 24px; }
.lh-go__cost {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 3px 9px 3px 5px; border-radius: 99px;
  background: rgba(58, 29, 6, 0.85); color: var(--lh-amber-hot); font-size: 0.9rem;
}
.lh-go__cost .lh-ico { width: 18px; height: 18px; }
.lh-go[data-kind='end'] {
  color: var(--lh-ink-dim); opacity: 1; filter: none;
  background: linear-gradient(180deg, #2a3348, #161d2e); box-shadow: 0 3px 0 #0b1020, inset 0 0 0 1px rgba(255, 179, 71, 0.18);
}
.lh-go[aria-busy='true'] .lh-go__label { animation: lh-blink 0.9s ease-in-out infinite; }
.lh-ticker { display: none; }
.lh-only-narrow { display: none; }

/* ---------- Narrow screens: the chart takes the stage; panels become sheets ---------- */
@media (max-width: 959px) {
  :root { --lh-node: 34px; }
  .lh-top { padding: 6px 10px 8px; gap: 6px 10px; }
  .lh-home { width: 34px; height: 34px; border-radius: 10px; }
  .lh-brand__sub { font-size: 0.64rem; margin-top: 3px; }
  .lh-brand__name { padding-bottom: 4px; }
  .lh-insignia { width: 36px; height: 36px; margin-inline: 1px 0; }
  .lh-insignia__img { inset: -30%; width: 160%; height: 160%; }
  .lh-insignia::before { inset: 2px; border-width: 1px; }
  .lh-stats { width: 100%; gap: 5px; }
  .lh-stat { flex: 1 1 0; padding: 4px 6px 4px 5px; gap: 5px; border-radius: 10px; }
  .lh-stat__icon, .lh-stat__icon .lh-ico { width: 20px; height: 20px; }
  .lh-stat__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lh-stat__value { font-size: 0.95rem; }
  .lh-stat__sub { font-size: 0.58rem; margin-top: 1px; }
  .lh-gauge { height: 3px; margin-top: 2px; }

  .lh-hub__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: 'chart' 'actions';
    gap: 8px; padding: 8px 10px 10px;
  }
  .lh-chartwrap { border-radius: 14px; }
  .lh-chart__head { top: 10px; left: 14px; right: 14px; gap: 8px; }
  .lh-chart__title { font-size: 0.72rem; }
  .lh-chart__meta { font-size: 0.66rem; }
  .lh-chart__meta [data-chapter], .lh-chart__meta [data-chapter] + .lh-sep { display: none; }
  .lh-node__tag { font-size: 0.56rem; padding: 1px 5px; letter-spacing: 0.08em; }
  .lh-node__pips i { width: 8px; height: 8px; }
  .lh-ship__bob { width: 52px; height: 28px; left: -30px; top: -42px; }
  .lh-ship__bob.has-img { width: 46px; height: 46px; left: -23px; top: -56px; }

  .lh-panel { backdrop-filter: none; }
  .lh-rail { display: contents; }
  .lh-plan { display: none; }
  .lh-panel[data-sheet] {
    position: absolute; z-index: 6; left: 10px; right: 10px; bottom: 10px; max-height: calc(100% - 20px);
    overflow: auto; visibility: hidden; opacity: 0; transform: translateY(24px);
    transition: opacity 240ms, transform 320ms var(--lh-ease), visibility 0s 320ms;
    background:
      radial-gradient(circle at 8px 8px, rgba(255, 220, 170, 0.28) 1.6px, transparent 2.4px),
      radial-gradient(circle at calc(100% - 8px) 8px, rgba(255, 220, 170, 0.28) 1.6px, transparent 2.4px),
      linear-gradient(180deg, rgba(24, 34, 54, 0.98), rgba(11, 17, 32, 0.99));
    box-shadow: 0 -20px 60px -10px rgba(0, 0, 0, 0.8);
  }
  .lh-panel[data-sheet].is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 240ms, transform 320ms var(--lh-ease), visibility 0s; }
  .lh-sheet-close {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--lh-ink);
  }
  .lh-sheet-close .lh-ico { width: 18px; height: 18px; }
  .lh-rumour { margin-top: 0; }

  .lh-actions { gap: 8px; }
  .lh-ticker {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; cursor: pointer;
    border-radius: 10px; border: 1px solid rgba(255, 179, 71, 0.22);
    background: linear-gradient(90deg, rgba(255, 179, 71, 0.12), rgba(10, 14, 26, 0.7) 60%);
    color: var(--lh-ink); text-align: left; overflow: hidden;
  }
  .lh-ticker__tag { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lh-amber); }
  .lh-ticker__tag .lh-ico { width: 16px; height: 16px; }
  .lh-ticker__text { font-size: 0.85rem; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lh-only-narrow { display: inline-flex; }
  .lh-actions__row { gap: 8px; }
  .lh-btn--side { padding: 0 10px; flex: none; }
  .lh-btn--side span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lh-btn--side .lh-ico { width: 24px; height: 24px; }
  .lh-go { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 14px; font-size: 1.05rem; }
}
@media (max-width: 959px) and (max-height: 600px) {
  :root { --lh-node: 30px; } /* short phones: smaller discs so the zig-zag never stacks them */
}
@media (max-width: 959px) and (min-width: 560px) {
  .lh-btn--side span { position: static; width: auto; height: auto; clip: auto; }
}
@media (min-width: 960px) and (max-width: 1499px) {
  .lh-trend__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 960px) and (max-height: 760px) {
  .lh-top { padding-block: 6px; }
  .lh-hub__grid { gap: 10px; padding-block: 10px; }
  .lh-go { min-height: 50px; }
}

/* ---------- Reduced motion: calmer, slower, never still ---------- */
@media (prefers-reduced-motion: reduce) {
  .lh-screen:not([hidden]) { animation-duration: 200ms; }
  .lh-chartwrap::after { animation-duration: 24s; }
  .lh-lane__flow { animation-duration: 8s; }
  .lh-lane--next .lh-lane__line { animation: lh-pulse-line 3.6s ease-in-out infinite; }
  .lh-node.is-next .lh-node__disc { animation: none; }
  .lh-node.is-next .lh-node__ring, .lh-node.is-next::after { animation-duration: 3.6s; }
  .lh-node.is-boss .lh-node__ring { animation-duration: 40s; }
  .lh-ship__bob { animation-duration: 6s; }
  .lh-hauler__flame { animation: lh-breathe 2.4s ease-in-out infinite; }
  .lh-btn--primary::after { animation-duration: 5s; }
  .lh-node.is-shake .lh-node__disc { animation: lh-nudge 400ms ease-in-out; }
  .lh-stat.is-up .lh-stat__icon .lh-ico { animation: none; }
}
@keyframes lh-nudge { 50% { transform: translateX(-2px); } }

/* ======================================================================
   Shared: pack art layers (drawn fallback first, real image cross-fades in)
   ====================================================================== */
.lh-art { position: absolute; inset: 0; overflow: hidden; }
.lh-art > svg, .lh-art__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.lh-art__img { opacity: 0; transition: opacity 500ms ease; }
.lh-art.has-img .lh-art__img { opacity: 1; }
.lh-twinkle { animation: lh-blink 3.6s ease-in-out infinite; }
.lh-blinker { animation: lh-blink 1.8s steps(2, jump-none) infinite; }
.lh-breath { animation: lh-soft 3.2s ease-in-out infinite; }
.lh-neon { animation: lh-neon 5.5s linear infinite; }
@keyframes lh-soft { 50% { opacity: 0.6; } }
@keyframes lh-neon { 0%, 61%, 65%, 100% { opacity: 1; } 62% { opacity: 0.2; } 63.5% { opacity: 0.85; } 64% { opacity: 0.3; } }
@keyframes lh-kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.08) translate(-1.2%, -0.8%); } }
@keyframes lh-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes lh-rise-side { from { opacity: 0; transform: translateX(-18px); } }

/* BOLT: hovers, his eye breathes, his antenna blinks. */
.lh-bolt__body { animation: lh-hover 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lh-bolt__shadow { animation: lh-hover-shadow 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lh-bolt__eye { animation: lh-soft 2.6s ease-in-out infinite; }
.lh-bolt__arm { animation: lh-wave-arm 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 0% 0%; }
@keyframes lh-hover { 50% { transform: translateY(-10px) rotate(-2deg); } }
@keyframes lh-hover-shadow { 50% { transform: scaleX(0.82); opacity: 0.2; } }
@keyframes lh-wave-arm { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-14deg); } 90% { transform: rotate(6deg); } }

/* ======================================================================
   Port: docking, market, hold
   ====================================================================== */
.lh-portscreen { overflow: hidden; }
.lh-port__bg { position: absolute; inset: 0; transform-origin: 50% 40%; }
.lh-port__art > svg, .lh-port__art .lh-art__img { animation: lh-kenburns 46s ease-in-out infinite alternate; transform-origin: 40% 45%; }
.lh-port__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 9, 26, 0.55) 0%, rgba(5, 9, 26, 0) 30%, rgba(5, 9, 26, 0) 48%, rgba(5, 9, 26, 0.72) 70%),
    linear-gradient(180deg, rgba(5, 9, 26, 0.25), transparent 30%, transparent 70%, rgba(5, 9, 26, 0.8));
}
.lh-port__grid {
  position: relative; height: 100%;
  display: grid; gap: 14px 28px; padding: clamp(14px, 2.4vw, 34px) clamp(14px, 2.4vw, 34px) 18px;
  grid-template-columns: minmax(0, 1fr) clamp(34rem, 40vw, 46rem);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: 'head market' 'tip market' '. market' 'actions market';
}
.lh-portscreen.is-docking .lh-port__grid, .lh-portscreen.is-docking .lh-port__bg, .lh-portscreen.is-docking .lh-port__shade { opacity: 0; }
.lh-portscreen.is-docked .lh-port__shade { animation: lh-fade-in 400ms ease backwards; }
.lh-portscreen.is-docked .lh-port__head { animation: lh-rise-side 600ms var(--lh-ease) 60ms backwards; }
.lh-portscreen.is-docked .lh-tip { animation: lh-rise-side 600ms var(--lh-ease) 260ms backwards; }
.lh-portscreen.is-docked .lh-market { animation: lh-rise 600ms var(--lh-ease) 140ms backwards; }
.lh-portscreen.is-docked .lh-good { animation: lh-rise 500ms var(--lh-ease) backwards; }
.lh-portscreen.is-docked .lh-good:nth-child(1) { animation-delay: 240ms; }
.lh-portscreen.is-docked .lh-good:nth-child(2) { animation-delay: 300ms; }
.lh-portscreen.is-docked .lh-good:nth-child(3) { animation-delay: 360ms; }
.lh-portscreen.is-docked .lh-good:nth-child(n+4) { animation-delay: 420ms; }
.lh-portscreen.is-docked .lh-port__actions { animation: lh-rise 500ms var(--lh-ease) 420ms backwards; }
@keyframes lh-fade-in { from { opacity: 0; } }

.lh-port__head { grid-area: head; align-self: start; max-width: 34rem; }
.lh-port__kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 3px 10px; border-radius: 99px;
  font-family: var(--lh-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #062824; background: var(--lh-teal); box-shadow: 0 0 18px rgba(63, 183, 168, 0.5);
}
.lh-port__dot { width: 7px; height: 7px; border-radius: 50%; background: #eafffb; animation: lh-blink 1.4s ease-in-out infinite; }
.lh-port__title {
  margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(1.7rem, 3.6vw, 3.6rem); letter-spacing: 0.04em; color: var(--lh-amber);
  text-shadow: 0 2px 0 #3a1d06, 0 0 30px rgba(255, 170, 70, 0.5), 0 0 2px #000;
}
.lh-port__title:focus, .lh-port__title:focus-visible { outline: none; box-shadow: none; } /* focused only to be announced */
.lh-port__blurb { margin: 8px 0 0; font-size: clamp(0.9rem, 1.1vw, 1.1rem); color: var(--lh-ink); font-style: italic; text-shadow: 0 1px 6px #000; max-width: 28rem; }

/* BOLT's tip */
.lh-tip { grid-area: tip; align-self: start; position: relative; display: flex; align-items: center; gap: 4px; max-width: 32rem; }
.lh-tip.is-out { opacity: 0; transform: translateX(-12px); transition: opacity 240ms, transform 240ms; }
.lh-tip__bolt { position: relative; flex: none; width: 104px; aspect-ratio: 400 / 440; }
.lh-tip__bubble {
  position: relative; margin: 0; padding: 12px 40px 12px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(250, 240, 222, 0.96), rgba(232, 214, 186, 0.96)); color: #2a1a0c;
  font-size: 1rem; line-height: 1.35; box-shadow: 0 14px 30px -14px #000;
}
.lh-tip__bubble::before { content: ''; position: absolute; left: -9px; top: 50%; margin-top: -9px; border: 9px solid transparent; border-left: 0; border-right-color: rgba(244, 231, 208, 0.96); }
.lh-tip__who { display: block; font-family: var(--lh-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; color: #8a4a12; margin-bottom: 2px; }
.lh-tip__close {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(42, 26, 12, 0.08); color: #5a3a1c;
}
.lh-tip__close svg { width: 14px; height: 14px; }
.lh-tip__close:hover { background: rgba(42, 26, 12, 0.16); }

/* Market */
.lh-market { grid-area: market; align-self: center; max-height: 100%; gap: 12px; padding: 18px 18px 16px; }
.lh-market__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lh-market__sub { font-size: 0.75rem; color: var(--lh-ink-faint); letter-spacing: 0.04em; }
.lh-goods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lh-good {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px;
  padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 10%, transparent), rgba(0, 0, 0, 0.25) 40%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 200ms;
}
.lh-good::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tint); opacity: 0.8; }
.lh-good.is-busy { border-color: rgba(255, 179, 71, 0.35); }
.lh-good.is-busy .lh-trade[aria-busy='true'] .lh-trade__verb { animation: lh-blink 0.8s ease-in-out infinite; }
.lh-good.is-done { animation: lh-row-flash 700ms ease-out; }
@keyframes lh-row-flash { 0% { border-color: var(--tint); } 100% { border-color: rgba(255, 255, 255, 0.06); } }
.lh-good__info { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; }
.lh-good__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.lh-good__svg { width: 30px; height: 30px; }
.lh-core-glow { animation: lh-soft 2s ease-in-out infinite; }
.lh-good__name { margin: 0; display: grid; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.15; min-width: 0; }
.lh-good__own { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; color: var(--lh-ink-faint); }
.lh-good.has-cargo .lh-good__own { color: var(--lh-ink-dim); }
.lh-good.has-cargo .lh-good__own b { color: var(--lh-amber-hot); }
.lh-good__price { margin: 0; display: grid; justify-items: end; gap: 2px; }
.lh-good__price > b { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; font-variant-numeric: tabular-nums; line-height: 1; }
.lh-cmp { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; white-space: nowrap; color: var(--lh-ink-faint); }
.lh-cmp__arrow { width: 0; height: 0; border: 5px solid transparent; }
.lh-good.is-cheaper .lh-cmp { color: #9ff3e3; }
.lh-good.is-cheaper .lh-cmp__arrow { border-top-color: currentColor; margin-top: 5px; }
.lh-good.is-cheaper .lh-good__price > b { color: var(--lh-teal-hot); }
.lh-good.is-dearer .lh-cmp { color: #ffb19f; }
.lh-good.is-dearer .lh-cmp__arrow { border-bottom-color: currentColor; margin-bottom: 5px; }
.lh-good.is-dearer .lh-good__price > b { color: #ffc4b4; }

.lh-good__ctl { display: flex; align-items: center; gap: 8px; }
.lh-qty { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); }
.lh-qty button {
  min-width: 40px; height: 40px; padding: 0 8px; border: 0; border-radius: 8px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--lh-ink-dim); background: transparent;
  transition: background 160ms, color 160ms, transform 160ms var(--lh-ease);
}
.lh-qty button:hover { color: var(--lh-ink); background: rgba(255, 255, 255, 0.06); }
.lh-qty button[aria-checked='true'] { color: #2a1606; background: linear-gradient(180deg, #ffd38a, #f0a040); box-shadow: 0 2px 0 #8a4310; }
.lh-trade {
  display: grid; justify-items: center; align-content: center; min-width: 76px; height: 46px; padding: 0 12px; border-radius: 11px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; line-height: 1.05; border: 0;
  transition: transform 160ms var(--lh-ease), filter 160ms;
}
.lh-trade:hover { transform: translateY(-2px); filter: brightness(1.1); }
.lh-trade:active { transform: translateY(2px); }
.lh-trade__verb { font-size: 0.98rem; white-space: nowrap; }
.lh-trade__amt { font-family: var(--lh-mono); font-size: 0.72rem; opacity: 0.85; font-variant-numeric: tabular-nums; }
.lh-trade--buy { color: #eafffb; background: linear-gradient(180deg, #3cbfae, #1f7c72); box-shadow: 0 3px 0 #0d3e39, inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.lh-trade--sell { color: #2a1606; background: linear-gradient(180deg, #ffd38a, #e88a2a); box-shadow: 0 3px 0 #8a4310, inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.lh-portscreen.is-busy .lh-trade { cursor: progress; }

.lh-market__foot { display: flex; align-items: flex-end; gap: 18px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.lh-holdbar { flex: 1; min-width: 0; }
.lh-holdbar__row { margin: 6px 0 6px; display: flex; justify-content: space-between; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lh-ink-dim); }
.lh-holdbar__row strong { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; color: var(--lh-ink); font-size: 0.95rem; }
.lh-holdbar.is-full .lh-holdbar__row strong { color: var(--lh-red); }
.lh-crates { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; }
.lh-crates i {
  display: block; height: 14px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.lh-crates i.on { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 100%, #fff 30%), var(--c)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 0 6px color-mix(in srgb, var(--c) 50%, transparent); }
.lh-crates i.pop { animation: lh-crate-pop 480ms var(--lh-ease) backwards; }
@keyframes lh-crate-pop { from { transform: translateY(-14px) scale(0.4); opacity: 0; } 60% { transform: translateY(2px) scale(1.15); opacity: 1; } }
.lh-purse { margin: 0; display: grid; justify-items: end; }
.lh-purse span { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lh-ink-faint); }
.lh-purse strong { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--lh-teal-hot); font-variant-numeric: tabular-nums; line-height: 1.1; }

.lh-port__actions { grid-area: actions; display: flex; align-items: flex-end; }
.lh-leave { min-height: 54px; padding: 0 26px; font-size: 1.1rem; }

/* Toasts and floaters */
.lh-toasts { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 8; display: grid; gap: 6px; justify-items: center; width: max-content; max-width: calc(100% - 32px); pointer-events: none; }
.lh-toast {
  margin: 0; padding: 10px 16px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; text-align: center;
  background: rgba(14, 10, 10, 0.94); color: #ffd7cc; border: 1px solid rgba(232, 112, 90, 0.6);
  box-shadow: 0 14px 30px -10px #000; animation: lh-toast-in 320ms var(--lh-ease);
}
.lh-toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity 300ms, transform 300ms; }
@keyframes lh-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
.lh-floater {
  position: absolute; z-index: 9; pointer-events: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; font-variant-numeric: tabular-nums;
}
.lh-floater--gain { color: var(--lh-teal-hot); text-shadow: 0 0 14px rgba(138, 238, 221, 0.8), 0 2px 0 #062824; }
.lh-floater--spend { color: #ffd0c2; font-size: 1.2rem; text-shadow: 0 2px 0 #3a0f08; }

/* Docking iris: the station grows out of its chart node into the port backdrop. */
.lh-iris { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.lh-iris__disc {
  position: absolute; border-radius: 50%; overflow: hidden; background: #05091a; will-change: transform;
  box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.85), 0 0 80px 10px rgba(255, 150, 60, 0.45);
}
.lh-iris__art { position: absolute; box-shadow: 0 0 60px 30px rgba(5, 9, 26, 0.6); }
.lh-iris__fill { position: absolute; inset: 0; opacity: 0.6; filter: blur(8px) saturate(0.8); }

/* Narrow: one column -- name, tip, market, leave. */
@media (max-width: 959px) {
  .lh-port__grid {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: 'head' 'tip' 'market' 'actions';
    gap: 8px; padding: 10px 10px 10px;
  }
  .lh-port__shade { background: linear-gradient(180deg, rgba(5, 9, 26, 0.1), rgba(5, 9, 26, 0.35) 22%, rgba(5, 9, 26, 0.86) 42%, rgba(5, 9, 26, 0.94)); }
  .lh-port__head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; }
  .lh-port__kicker { order: 2; margin: 0; font-size: 0.6rem; padding: 2px 8px; }
  .lh-port__title { font-size: 1.55rem; }
  .lh-port__blurb { order: 3; width: 100%; margin: 0; font-size: 0.8rem; }
  .lh-tip__bolt { width: 48px; }
  .lh-tip__bubble { font-size: 0.8rem; padding: 6px 36px 6px 11px; line-height: 1.28; }
  .lh-tip__who { font-size: 0.58rem; }
  .lh-market { align-self: stretch; padding: 10px 10px 8px; gap: 6px; }
  .lh-market::before { left: 14px; }
  /* The top bar already shows credits, and every price is labelled: the panel heading and the
     purse step aside on phones so three goods fit with their controls. */
  .lh-market__head, .lh-purse { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lh-goods { gap: 6px; }
  .lh-good { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 6px 8px 7px 10px; }
  .lh-good::before { top: 8px; bottom: 8px; }
  .lh-good__info { gap: 9px; }
  .lh-good__icon { width: 32px; height: 32px; border-radius: 8px; }
  .lh-good__svg { width: 24px; height: 24px; }
  .lh-good__name { font-size: 1rem; }
  .lh-good__own { font-size: 0.7rem; }
  .lh-good__price > b { font-size: 1.1rem; }
  .lh-cmp { font-size: 0.62rem; }
  .lh-good__ctl { gap: 6px; }
  .lh-qty { flex: 1; }
  .lh-qty button { flex: 1; min-width: 0; height: 34px; padding: 0 4px; font-size: 0.88rem; }
  .lh-trade { min-width: 70px; height: 40px; padding: 0 8px; }
  .lh-trade__verb { font-size: 0.88rem; }
  .lh-trade__amt { font-size: 0.64rem; }
  .lh-market__foot { gap: 12px; padding-top: 2px; }
  .lh-holdbar__row { margin: 2px 0 4px; font-size: 0.68rem; }
  .lh-holdbar__row strong { font-size: 0.85rem; }
  .lh-crates i { height: 10px; border-radius: 2px; }
  .lh-crates { gap: 2px; }
  .lh-purse strong { font-size: 1.15rem; }
  .lh-port__actions { justify-content: stretch; }
  .lh-leave { width: 100%; min-height: 50px; }
  .lh-toasts { bottom: 74px; }
}
/* Compact market (long lists on small screens): one line per good; the picked good opens. */
.lh-portscreen.is-compact .lh-goods { gap: 3px; }
.lh-portscreen.is-compact .lh-good { padding-block: 2px; gap: 4px; }
.lh-portscreen.is-compact .lh-good__name > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-portscreen.is-compact .lh-good__ownlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lh-portscreen.is-compact .lh-good__own b { display: inline-block; min-width: 1.6em; padding: 0 5px; border-radius: 99px; text-align: center; background: rgba(255, 255, 255, 0.08); }
.lh-portscreen.is-compact .lh-tip__bolt { width: 34px; }
.lh-portscreen.is-compact .lh-tip__who { display: none; }
.lh-portscreen.is-compact .lh-good:not(.is-open) .lh-good__ctl { display: none; }
.lh-portscreen.is-compact .lh-good__info { cursor: pointer; border-radius: 8px; min-height: 36px; }
.lh-portscreen.is-compact .lh-good__icon { width: 28px; height: 28px; }
.lh-portscreen.is-compact .lh-good__svg { width: 20px; height: 20px; }
.lh-portscreen.is-compact .lh-good__name { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; }
.lh-portscreen.is-compact .lh-good__price { grid-auto-flow: column; align-items: baseline; gap: 8px; }
.lh-portscreen.is-compact .lh-good.is-open { border-color: color-mix(in srgb, var(--tint) 45%, transparent); }
.lh-portscreen.is-compact .lh-good.is-open .lh-good__ctl { animation: lh-rise 260ms var(--lh-ease); }
/* Short phones: the blurb goes first, then the tip shrinks to one line. */
@media (max-width: 959px) and (max-height: 700px) {
  .lh-port__blurb { display: none; }
}
/* Mid widths: the market column is too narrow for one line per good -- controls go under. */
@media (min-width: 960px) and (max-width: 1399px) {
  .lh-good { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lh-good__ctl { justify-content: flex-end; }
  .lh-qty { flex: 1; }
  .lh-qty button { flex: 1; }
}
@media (min-width: 960px) and (max-height: 760px) {
  .lh-port__grid { padding-block: 14px; gap: 10px 22px; }
  .lh-tip__bolt { width: 76px; }
  .lh-good { padding-block: 7px; }
  .lh-qty button { height: 36px; }
  .lh-trade { height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .lh-port__art > svg, .lh-port__art .lh-art__img { animation-duration: 120s; }
  .lh-bolt__body, .lh-bolt__shadow { animation-duration: 6s; }
  .lh-bolt__arm { animation: none; }
  .lh-blinker { animation-duration: 3.6s; }
  .lh-neon { animation: lh-soft 6s ease-in-out infinite; }
  .lh-portscreen.is-docked .lh-port__head, .lh-portscreen.is-docked .lh-tip,
  .lh-portscreen.is-docked .lh-market, .lh-portscreen.is-docked .lh-good,
  .lh-portscreen.is-docked .lh-port__actions { animation-name: lh-fade-in; animation-duration: 300ms; }
  .lh-crates i.pop { animation: lh-fade-in 300ms ease backwards; }
}

/* ======================================================================
   Scenes: still with depth, portrait, typed dialogue, choices
   ====================================================================== */
.lh-scenescreen {
  position: fixed; inset: 0; z-index: 20; overflow: hidden; background: #03050c; cursor: pointer;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  padding: calc(env(safe-area-inset-top) + 7vh) clamp(14px, 4vw, 64px) calc(env(safe-area-inset-bottom) + clamp(14px, 4vh, 44px));
  --tone: var(--lh-amber); --tone-ink: #2a1606;
}
.lh-scenescreen[data-tone='teal'] { --tone: var(--lh-teal); --tone-ink: #062824; }
.lh-scenescreen[data-tone='red'] { --tone: #e8705a; --tone-ink: #2a0806; }
.lh-scenescreen[data-tone='steel'] { --tone: #9fd4ff; --tone-ink: #0a1a2a; }
.lh-scene__still, .lh-scene__dust, .lh-scene__vignette, .lh-scene__bars { position: absolute; inset: 0; pointer-events: none; }
.lh-scene__dust { width: 100%; height: 100%; }
.lh-scene__still .lh-art > svg, .lh-scene__still .lh-art__img { animation: lh-depth 26s ease-in-out infinite alternate; transform-origin: 55% 45%; }
@keyframes lh-depth { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1.6%, -1%); } }
.lh-scene__vignette {
  background:
    radial-gradient(130% 100% at 50% 40%, transparent 50%, rgba(2, 3, 8, 0.75) 100%),
    linear-gradient(180deg, transparent 50%, rgba(2, 3, 8, 0.75) 88%);
}
.lh-scene__bars i { position: absolute; left: 0; right: 0; height: 6vh; background: #000; transform: translateY(-100%); transition: transform 700ms var(--lh-ease); }
.lh-scene__bars i + i { top: auto; bottom: 0; transform: translateY(100%); }
.lh-scenescreen.is-open .lh-scene__bars i { transform: none; }
.lh-scenescreen.is-open .lh-scene__still { animation: lh-scene-in 1100ms ease-out; }
@keyframes lh-scene-in { from { opacity: 0; transform: scale(1.04); } }

.lh-scene__skip {
  position: absolute; z-index: 3; top: calc(env(safe-area-inset-top) + 1.4vh); right: clamp(12px, 2vw, 28px);
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 99px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--lh-ink);
  background: rgba(10, 14, 26, 0.6); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(4px);
}
.lh-scene__skip svg { width: 16px; height: 16px; }
.lh-scene__skip:hover { background: rgba(255, 179, 71, 0.2); }

.lh-scene__portrait {
  position: relative; z-index: 1; align-self: end; justify-self: start; margin: 0 0 -22px 2%;
  width: clamp(150px, 21vw, 360px); aspect-ratio: 400 / 480; pointer-events: none;
}
.lh-scenescreen[data-side='right'] .lh-scene__portrait { justify-self: end; margin: 0 2% -22px 0; }
.lh-scene__face {
  border-radius: 18px; overflow: hidden; background: #0b1020;
  border: 2px solid color-mix(in srgb, var(--tone) 70%, transparent);
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.45), 0 0 40px -6px var(--tone), 0 30px 60px -20px #000;
}
.lh-scene__face::after { /* comm-screen glass: a faint scanline and a sheen */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 5px), linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 40%);
}

.lh-scene__box {
  position: relative; z-index: 2; width: min(62rem, 100%); justify-self: center; cursor: pointer;
  padding: 26px 28px 18px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(14, 20, 36, 0.92), rgba(8, 12, 24, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.1); border-top: 3px solid var(--tone);
  box-shadow: 0 30px 60px -20px #000, 0 -10px 40px -26px var(--tone);
}
.lh-scene__name {
  position: absolute; top: -17px; left: 22px; margin: 0; padding: 5px 14px; border-radius: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tone-ink); background: var(--tone); box-shadow: 0 6px 18px -6px var(--tone);
}
.lh-scenescreen[data-side='right'] .lh-scene__name { left: auto; right: 22px; }
.lh-scene__text { margin: 0; min-height: 3.9em; font-size: clamp(1.05rem, 1.55vw, 1.45rem); line-height: 1.45; color: var(--lh-ink); max-width: none; }
.lh-scene__box.is-typing .lh-scene__text::after { content: '▍'; color: var(--tone); animation: lh-blink 0.7s steps(2) infinite; margin-left: 2px; }
.lh-scene__next {
  display: flex; align-items: center; gap: 6px; margin: 4px 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--tone); background: transparent; border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
}
.lh-scene__next svg { width: 16px; height: 16px; animation: lh-nudge-x 1.1s ease-in-out infinite; }
.lh-scene__box.is-typing .lh-scene__next { opacity: 0.45; }
@keyframes lh-nudge-x { 50% { transform: translateX(4px); } }
.lh-scene__choices { display: grid; gap: 10px; margin-top: 10px; }
.lh-scene__choice {
  justify-content: flex-start; text-align: left; gap: 12px; min-height: 54px; padding: 8px 16px; width: 100%;
  font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; line-height: 1.25;
  animation: lh-rise 420ms var(--lh-ease) backwards;
}
.lh-scene__choice:hover:not(:disabled) { border-color: var(--lh-amber); }
.lh-scene__choice.is-picked { border-color: var(--lh-amber); background: linear-gradient(180deg, #4a3a22, #2a2014); opacity: 1; }
.lh-scene__choice[aria-busy='true'] { animation: lh-blink 0.9s ease-in-out infinite; }
.lh-scene__key { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px; font-family: var(--lh-mono); font-size: 0.8rem; color: var(--lh-amber); border: 1px solid rgba(255, 179, 71, 0.45); }
.lh-scene__reward { margin-left: auto; flex: none; padding: 3px 9px; border-radius: 99px; font-size: 0.78rem; font-weight: 800; color: #062824; background: var(--lh-teal-hot); }
.lh-scene__floater { z-index: 5; font-size: 1.9rem; }

@media (max-width: 959px) {
  .lh-scenescreen { padding: calc(env(safe-area-inset-top) + 64px) 10px calc(env(safe-area-inset-bottom) + 12px); }
  .lh-scene__bars i { height: 0; }
  .lh-scene__portrait { width: min(44vw, 210px); margin-bottom: -14px; }
  .lh-scene__box { padding: 22px 16px 12px; border-radius: 14px; }
  .lh-scene__name { font-size: 0.82rem; top: -15px; left: 14px; padding: 4px 11px; }
  .lh-scenescreen[data-side='right'] .lh-scene__name { right: 14px; }
  .lh-scene__text { font-size: 1.02rem; min-height: 4.4em; }
  .lh-scene__choice { min-height: 48px; font-size: 0.92rem; padding: 6px 12px; }
  .lh-scene__reward { font-size: 0.7rem; }
}

/* ======================================================================
   Boss title card
   ====================================================================== */
.lh-titlecard {
  position: fixed; inset: 0; z-index: 30; overflow: hidden; cursor: pointer;
  display: grid; align-items: center; padding: 0 clamp(18px, 7vw, 120px);
  background: radial-gradient(120% 90% at 70% 50%, #6a1a12 0%, #2a0806 45%, #070203 100%);
  animation: lh-tc-in 260ms ease-out;
}
.lh-titlecard.is-out { opacity: 0; transition: opacity 300ms ease; }
@keyframes lh-tc-in { from { opacity: 0; } }
.lh-titlecard__streaks {
  position: absolute; inset: -20%; pointer-events: none; opacity: 0.35;
  background: repeating-linear-gradient(100deg, transparent 0 40px, rgba(255, 120, 80, 0.25) 40px 42px, transparent 42px 120px, rgba(255, 200, 160, 0.15) 120px 121px);
  animation: lh-streak 900ms linear infinite;
}
@keyframes lh-streak { to { transform: translateX(-121px); } }
.lh-titlecard__art {
  /* The card art is a wide gate shot: it bleeds in from the right, feathered into the red. */
  --tw: min(72vw, 1180px);
  position: absolute; right: -6vw; top: calc(50% - var(--tw) * 0.29); width: var(--tw); aspect-ratio: 16 / 9; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%); mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
  animation: lh-tc-art 1600ms cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes lh-tc-art { from { transform: translateX(30%); opacity: 0; } 25% { transform: translateX(-2%); opacity: 1; } to { transform: translateX(-5%); } }
.lh-titlecard__text { position: relative; z-index: 1; max-width: 60%; }
.lh-titlecard__kicker {
  display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-family: var(--lh-mono); font-size: clamp(0.8rem, 1.4vw, 1.1rem);
  letter-spacing: 0.4em; text-transform: uppercase; color: #ffb19f; animation: lh-rise-side 400ms 100ms ease-out backwards;
}
.lh-titlecard__kicker::before { content: ''; width: 46px; height: 2px; background: currentColor; }
.lh-titlecard__name {
  margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 0.92; text-transform: uppercase;
  font-size: clamp(3rem, 10vw, 9.5rem); letter-spacing: 0.02em; color: #ffe2d6;
  text-shadow: 0 6px 0 #3a0a06, 0 0 50px rgba(255, 90, 60, 0.75);
  animation: lh-slam 520ms 160ms cubic-bezier(.3, 1.4, .5, 1) backwards;
}
@keyframes lh-slam { from { transform: scale(2.6); opacity: 0; } 60% { transform: scale(0.94); opacity: 1; } }
.lh-titlecard__sub { margin: 14px 0 0; font-size: clamp(1rem, 1.8vw, 1.5rem); font-style: italic; color: #ffcfc0; animation: lh-rise-side 500ms 620ms ease-out backwards; }
.lh-titlecard:not(.is-calm) { animation: lh-tc-in 260ms ease-out, lh-tc-shake 360ms 520ms ease-out; }
@keyframes lh-tc-shake { 20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -5px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(2px, -1px); } }
.lh-titlecard__skip {
  position: absolute; z-index: 2; top: calc(env(safe-area-inset-top) + 14px); right: 16px; min-height: 44px; padding: 0 16px; border-radius: 99px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; color: #ffe2d6; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 180, 160, 0.3);
}
@media (max-width: 959px) {
  .lh-titlecard { align-items: start; padding-top: 22vh; }
  .lh-titlecard__text { max-width: 100%; }
  .lh-titlecard__art { --tw: 150vw; right: -40vw; top: auto; bottom: 4vh; }
}
.lh-titlecard.is-calm .lh-titlecard__streaks { animation-duration: 4s; }
.lh-titlecard.is-calm .lh-titlecard__name { animation: lh-calm-slam 500ms 100ms ease-out backwards; }
@keyframes lh-calm-slam { from { transform: scale(1.12); opacity: 0; } }
.lh-titlecard.is-calm .lh-titlecard__art { animation: lh-fade-in 500ms ease-out both; }

/* Small story props inside drawings */
.lh-swing { animation: lh-swing 5s ease-in-out infinite; }
@keyframes lh-swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.lh-steam { animation: lh-steam 3s ease-in-out infinite; }
@keyframes lh-steam { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.lh-spin-slow { animation: lh-spin 18s linear infinite; }
.lh-glint { animation: lh-soft 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .lh-scene__still .lh-art > svg, .lh-scene__still .lh-art__img { animation-duration: 60s; animation-name: lh-depth-calm; }
  @keyframes lh-depth-calm { from { transform: scale(1); } to { transform: scale(1.03) translate(-0.6%, -0.4%); } }
  .lh-scene__bars i { transition-duration: 300ms; }
  .lh-scenescreen.is-open .lh-scene__still { animation-duration: 400ms; }
  .lh-scene__next svg { animation-duration: 2.4s; }
  .lh-swing { animation-duration: 10s; }
  .lh-spin-slow { animation-duration: 60s; }
}

/* ======================================================================
   Out of fuel
   ====================================================================== */
.lh-dry { width: min(30rem, 100%); display: grid; justify-items: center; padding: 22px 24px 20px; }
.lh-dry__art { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin-bottom: 4px; }
.lh-dry__bolt { position: relative; width: clamp(120px, 16vh, 170px); aspect-ratio: 400 / 440; }
/* Sputtering: puffs of smoke off BOLT's antenna while the tanks are dry. */
.lh-dry__bolt::before, .lh-dry__bolt::after {
  content: ''; position: absolute; left: 52%; top: 6%; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 196, 186, 0.55), transparent 70%); animation: lh-puff 2.4s ease-out infinite; pointer-events: none;
}
.lh-dry__bolt::after { animation-delay: 1.2s; left: 58%; }
.lh-nofuel.is-ready .lh-dry__bolt::before, .lh-nofuel.is-ready .lh-dry__bolt::after { display: none; }
@keyframes lh-puff { from { transform: translate(0, 0) scale(0.4); opacity: 0.9; } to { transform: translate(14px, -46px) scale(2.2); opacity: 0; } }
.lh-tank { position: relative; width: 46px; height: clamp(96px, 13vh, 132px); margin-bottom: 8px; }
.lh-tank__cap { position: absolute; left: 13px; top: -8px; width: 20px; height: 10px; border-radius: 4px 4px 0 0; background: #6f6a5e; }
.lh-tank__glass {
  position: absolute; inset: 0; overflow: hidden; border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.4)); border: 3px solid #8d8778;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7);
}
.lh-tank__glass::after { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); }
.lh-tank__fuel {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform-origin: bottom; transition: transform 900ms var(--lh-ease);
  background: linear-gradient(180deg, #ff8a5a, #c2401e);
}
.lh-tank__fuel i { position: absolute; left: -50%; top: -5px; width: 200%; height: 10px; border-radius: 50%; background: #ffb08a; animation: lh-slosh 2.2s ease-in-out infinite alternate; }
.lh-nofuel.is-ready .lh-tank__fuel { background: linear-gradient(180deg, #ffd08a, #e88a2a); }
.lh-nofuel.is-ready .lh-tank__fuel i { background: #ffe3a8; }
.lh-nofuel.is-filled .lh-tank__glass { animation: lh-tank-glow 1.2s ease-out; }
@keyframes lh-slosh { from { transform: translateX(-12%) rotate(-3deg); } to { transform: translateX(12%) rotate(3deg); } }
@keyframes lh-tank-glow { 0% { box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7), 0 0 0 rgba(255, 179, 71, 0); } 30% { box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 179, 71, 0.9); } }
.lh-dry__who { margin: 0; font-family: var(--lh-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; color: var(--lh-teal-hot); }
.lh-card .lh-dry__title { margin: 2px 0 6px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.1; }
.lh-dry__title:focus, .lh-dry__title:focus-visible, .lh-endcard__title:focus, .lh-endcard__title:focus-visible { outline: none; box-shadow: none; }
.lh-card .lh-dry__need { margin: 0 0 10px; }
.lh-dry__need b { font-family: var(--font-display); color: var(--lh-red); font-variant-numeric: tabular-nums; }
.lh-nofuel.is-ready .lh-dry__need b { color: var(--lh-amber-hot); }
.lh-card .lh-dry__clock {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 14px; border-radius: 99px;
  font-family: var(--lh-mono); font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--lh-amber-hot);
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 179, 71, 0.3);
}
.lh-dry__clock .lh-ico { width: 18px; height: 18px; }
.lh-dry__actions { display: grid; gap: 10px; width: 100%; }
.lh-dry__ad { min-height: 54px; }
.lh-dry__adtext { display: grid; justify-items: start; line-height: 1.15; }
.lh-dry__left { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; opacity: 0.75; }
.lh-dry__ad[aria-busy='true'] [data-ad-label] { animation: lh-blink 0.9s ease-in-out infinite; }
.lh-card .lh-dry__note { margin: 10px 0 0; min-height: 1.3em; font-size: 0.9rem; color: var(--lh-teal-hot); }
.lh-nofuel .lh-card { animation: lh-rise 500ms var(--lh-ease) backwards; }

/* ======================================================================
   End of the map: fog past the gate, a card
   ====================================================================== */
.lh-endscreen { pointer-events: none; }
.lh-fog { position: absolute; inset: 0; width: 100%; height: 100%; }
.lh-uncharted {
  position: absolute; margin: 0; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font-family: var(--lh-mono); font-weight: 700; font-size: clamp(0.9rem, 1.6vw, 1.4rem); letter-spacing: 0.6em; text-transform: uppercase;
  color: rgba(214, 232, 240, 0.55); text-shadow: 0 0 18px rgba(160, 196, 210, 0.6);
  animation: lh-uncharted 6s ease-in-out infinite;
}
.lh-endscreen.is-first .lh-uncharted { animation: lh-word-in 1.6s 1.1s ease-out backwards, lh-uncharted 6s 2.7s ease-in-out infinite; }
@keyframes lh-uncharted { 50% { opacity: 0.55; } }
@keyframes lh-word-in { from { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }
.lh-endcard {
  position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%); width: min(36rem, calc(100% - 24px)); pointer-events: auto;
}
.lh-endcard__full {
  padding: 20px 22px 18px; border-radius: var(--lh-r); text-align: center;
  background: linear-gradient(180deg, rgba(20, 30, 46, 0.94), rgba(9, 14, 26, 0.97));
  border: 1px solid rgba(160, 196, 210, 0.28); box-shadow: 0 30px 60px -24px #000, 0 0 50px -20px rgba(160, 196, 210, 0.6);
}
.lh-endscreen.is-first .lh-endcard__full { animation: lh-rise 700ms 900ms var(--lh-ease) backwards; }
.lh-endcard__kicker { margin: 0 0 4px; font-family: var(--lh-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #a8c8d6; }
.lh-endcard__title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--lh-amber); }
.lh-endcard__text { margin: 0 auto 10px; color: var(--lh-ink); max-width: 26rem; }
.lh-endcard__clock { margin: 0 0 14px; font-size: 0.85rem; color: var(--lh-ink-dim); }
.lh-endcard__clock b { font-family: var(--lh-mono); font-size: 1rem; color: var(--lh-teal-hot); font-variant-numeric: tabular-nums; }
.lh-endcard__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lh-endcard__actions .lh-btn { flex: 1 1 13rem; white-space: nowrap; }
.lh-endcard__actions .lh-btn .lh-ico { width: 20px; height: 20px; }
.lh-endcard__actions .lh-go__cost { margin-left: 2px; }
.lh-endcard__chip {
  display: flex; align-items: center; gap: 10px; margin: 0 auto; min-height: 44px; padding: 0 16px; border-radius: 99px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; color: var(--lh-ink);
  background: rgba(14, 22, 34, 0.92); border: 1px solid rgba(160, 196, 210, 0.35); box-shadow: 0 12px 30px -12px #000;
}
.lh-endcard__chip b { font-family: var(--lh-mono); font-weight: 600; font-size: 0.85rem; color: var(--lh-teal-hot); }
.lh-endcard__chipdot { width: 8px; height: 8px; border-radius: 50%; background: #a8c8d6; box-shadow: 0 0 8px #a8c8d6; animation: lh-blink 1.6s ease-in-out infinite; }
@media (max-width: 959px) {
  .lh-endcard { bottom: 118px; }
  .lh-endcard__full { padding: 12px 14px 12px; }
  .lh-endcard__kicker { display: none; }
  .lh-endcard__title { font-size: 1.3rem; margin-bottom: 2px; }
  .lh-endcard__text { font-size: 0.88rem; margin-bottom: 4px; }
  .lh-endcard__clock { margin-bottom: 10px; }
  .lh-endcard__actions { gap: 8px; }
  .lh-endcard__actions .lh-btn { min-height: 44px; font-size: 0.92rem; padding: 0 10px; }
  .lh-dry { padding: 16px 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .lh-dry__bolt::before, .lh-dry__bolt::after { animation-duration: 4.8s; }
  .lh-tank__fuel i { animation-duration: 5s; }
  .lh-endscreen.is-first .lh-uncharted { animation: lh-fade-in 600ms ease-out backwards, lh-uncharted 12s 600ms ease-in-out infinite; }
  .lh-endscreen.is-first .lh-endcard__full { animation: lh-fade-in 300ms 300ms ease-out backwards; }
}

/* ======================================================================
   Reactor: the board in the Marigold's reactor housing, HUD, BOLT, result
   ====================================================================== */
.lh-reactor { overflow: hidden; }
.lh-rx {
  position: absolute; inset: 0;
  display: grid; gap: 8px; padding: 8px 10px 10px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "hud" "bay" "side";
}
/* Warm engine-room glow behind the housing. */
.lh-rx::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 52%, rgba(63, 183, 168, 0.16), transparent 70%),
    radial-gradient(90% 60% at 50% 110%, rgba(255, 150, 60, 0.18), transparent 70%);
  animation: lh-core-breathe 5s ease-in-out infinite;
}
@keyframes lh-core-breathe { 50% { opacity: 0.6; } }
.lh-rx.is-boss::before {
  background:
    radial-gradient(60% 55% at 50% 52%, rgba(232, 112, 90, 0.18), transparent 70%),
    radial-gradient(90% 60% at 50% 110%, rgba(255, 90, 60, 0.2), transparent 70%);
}

/* ---------- HUD ---------- */
.lh-rx__hud {
  grid-area: hud; position: relative; min-width: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "dial head" "dial goals" "dial meter" "cannon cannon";
  align-items: center; gap: 2px 10px; padding: 6px 10px;
  background: var(--lh-panel); border: 1px solid var(--lh-edge); border-radius: var(--lh-r);
  box-shadow: 0 16px 30px -24px #000;
}
.lh-rx__head { grid-area: head; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.lh-rx__kicker {
  margin: 0; flex: none; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lh-teal-hot);
}
.lh-rx__title {
  margin: 0; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.15;
  color: var(--lh-amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lh-rx__title:focus, .lh-rx__title:focus-visible { outline: none; box-shadow: none; }
.lh-rx.is-boss .lh-rx__kicker { color: #ff9c86; }

/* Moves: a round gauge with an amber ring that drains as moves are spent. */
.lh-rx__dial {
  grid-area: dial; position: relative; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 50% 35%, #2a2216, #0d0b08 70%);
  box-shadow: inset 0 0 0 2px rgba(255, 179, 71, 0.15), 0 0 18px -6px rgba(255, 170, 70, 0.6);
}
.lh-rx__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lh-rx__ring circle { fill: none; stroke: rgba(255, 179, 71, 0.14); stroke-width: 6; }
.lh-rx__ring .lh-rx__ringfill { stroke: var(--lh-amber); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 400ms var(--lh-ease); filter: drop-shadow(0 0 3px rgba(255, 179, 71, 0.8)); }
.lh-rx__label { position: relative; font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lh-ink-dim); line-height: 1; }
.lh-rx__num { position: relative; font-family: var(--lh-mono); font-size: 1.45rem; line-height: 1.05; color: var(--lh-amber-hot); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(255, 179, 71, 0.7); }
.lh-rx__dial.is-tick .lh-rx__num { animation: lh-rx-tick 360ms var(--lh-ease); }
@keyframes lh-rx-tick { 40% { transform: scale(1.22); } }
.lh-rx__dial.is-low .lh-rx__ringfill { stroke: var(--lh-red); }
.lh-rx__dial.is-low .lh-rx__num { color: #ffc2b4; text-shadow: 0 0 12px rgba(232, 112, 90, 0.9); }
.lh-rx__dial.is-low { animation: lh-rx-low 1.2s ease-in-out infinite; }
@keyframes lh-rx-low { 50% { transform: scale(1.06); } }

.lh-rx__goals { grid-area: goals; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; min-width: 0; }
.lh-rx__goal { display: flex; align-items: center; gap: 5px; min-width: 0; }
.lh-rx__goalicon { position: relative; width: 30px; height: 30px; flex: none; display: block; }
.lh-rx__goalicon > svg, .lh-rx__goalicon > img, .lh-rx__goalicon .lh-gz { width: 100%; height: 100%; display: block; }
.lh-rx__goalicon .tm-piece { clip-path: circle(46% at 50% 50%); }
.lh-rx__goalicon img.lh-gz { border-radius: 50%; object-fit: cover; }
/* The rust goal says what it counts on every screen: a rust plate, "Rust plates" (playtest 2). */
.lh-rx__goal--rust .lh-rx__goalname { display: block; }
.lh-rx__goalicon.is-catch { animation: lh-rx-catch 280ms var(--lh-ease); }
@keyframes lh-rx-catch { 50% { transform: scale(1.3); } }
.lh-rx__goaltext { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.lh-rx__goalname { display: none; font-size: 0.82rem; color: var(--lh-ink-dim); }
.lh-rx__goalnum { font-family: var(--lh-mono); font-size: 0.95rem; color: var(--lh-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lh-rx__goal.is-bump .lh-rx__goalnum { animation: lh-rx-tick 340ms var(--lh-ease); display: inline-block; }
.lh-rx__goal.is-done .lh-rx__goalnum { color: var(--lh-teal-hot); }
.lh-rx__goal.is-done .lh-rx__goalicon::after {
  content: '✓'; position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #052a24; background: var(--lh-teal-hot);
  box-shadow: 0 0 8px rgba(138, 238, 221, 0.8);
}

.lh-rx__meter { grid-area: meter; display: flex; align-items: center; gap: 8px; min-width: 0; }
.lh-rx__meterlabel { flex: none; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lh-ink-dim); }
.lh-rx__meterlabel b { font-family: var(--lh-mono); font-size: 0.8rem; letter-spacing: 0; color: var(--lh-ink); font-variant-numeric: tabular-nums; }
.lh-rx__bar { position: relative; flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 2px #000, 0 0 0 1px rgba(255, 179, 71, 0.18); }
.lh-rx__bar i {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, #c96d17, #ffb347 60%, #fff0c8); box-shadow: 0 0 10px rgba(255, 179, 71, 0.55);
  transition: transform 420ms var(--lh-ease);
}
.lh-rx__bar s {
  position: absolute; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; text-decoration: none;
  background: #3a3226; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.lh-rx__bar s[data-mark="3"] { left: 100%; }
.lh-rx__bar s.on { background: #ffc35a; animation: lh-rx-staron 500ms var(--lh-ease); }
@keyframes lh-rx-staron { 50% { transform: scale(1.7); } }

.lh-rx__cannon {
  grid-area: cannon; margin: 4px 0 0; display: flex; align-items: center; gap: 8px; padding: 4px 10px;
  border-radius: 10px; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: #ffd6cc;
  background: rgba(120, 30, 20, 0.35); border: 1px solid rgba(232, 112, 90, 0.35);
}
.lh-rx__cannonicon { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--lh-red); position: relative; flex: none; }
.lh-rx__cannonicon::before, .lh-rx__cannonicon::after { content: ''; position: absolute; background: var(--lh-red); }
.lh-rx__cannonicon::before { left: 50%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; }
.lh-rx__cannonicon::after { top: 50%; left: -5px; right: -5px; height: 2px; margin-top: -1px; }
.lh-rx__cannon.is-armed { color: #fff; background: rgba(190, 40, 26, 0.6); animation: lh-rx-armed 900ms ease-in-out infinite; }
@keyframes lh-rx-armed { 50% { opacity: 0.65; } }

/* ---------- The bay: board in its housing ---------- */
.lh-rx__bay { grid-area: bay; position: relative; min-height: 0; container-type: size; display: grid; place-items: center; }
.lh-rx__frame {
  --pad: clamp(8px, 2.4cqmin, 20px);
  position: relative; box-sizing: border-box;
  width: min(100cqw, calc((100cqh - 2 * var(--pad)) * var(--w, 8) / var(--h, 8) + 2 * var(--pad)));
  padding: var(--pad); border-radius: 22px;
  background:
    radial-gradient(circle at 12px 12px, #d9c7a2 2px, #4a3f30 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 12px, #d9c7a2 2px, #4a3f30 3px, transparent 4px),
    radial-gradient(circle at 12px calc(100% - 12px), #d9c7a2 2px, #4a3f30 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #d9c7a2 2px, #4a3f30 3px, transparent 4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.25)),
    linear-gradient(135deg, #4b4f57, #2b2e34 45%, #3a3d44 70%, #24262b);
  box-shadow:
    inset 0 2px 0 rgba(255, 236, 200, 0.22), inset 0 -4px 0 rgba(0, 0, 0, 0.45),
    0 0 0 1px #121418, 0 30px 50px -24px #000, 0 0 60px -20px rgba(63, 183, 168, 0.45);
}
.lh-rx.is-boss .lh-rx__frame { box-shadow: inset 0 2px 0 rgba(255, 236, 200, 0.22), inset 0 -4px 0 rgba(0, 0, 0, 0.45), 0 0 0 1px #121418, 0 30px 50px -24px #000, 0 0 70px -18px rgba(232, 112, 90, 0.55); }
/* Running lamps along the top edge, chasing slowly. */
.lh-rx__lamps { position: absolute; top: calc(var(--pad) * 0.32); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; pointer-events: none; }
.lh-rx__lamps i { width: 7px; height: 4px; border-radius: 3px; background: #ffb347; box-shadow: 0 0 6px #ffb347; opacity: 0.25; animation: lh-rx-lamp 2s ease-in-out infinite; }
.lh-rx__lamps i:nth-child(2) { animation-delay: 0.2s; } .lh-rx__lamps i:nth-child(3) { animation-delay: 0.4s; }
.lh-rx__lamps i:nth-child(4) { animation-delay: 0.6s; } .lh-rx__lamps i:nth-child(5) { animation-delay: 0.8s; }
@keyframes lh-rx-lamp { 20% { opacity: 1; } 60% { opacity: 0.25; } }
.lh-rx__stripe {
  position: absolute; left: 22%; right: 22%; bottom: calc(var(--pad) * 0.28); height: calc(var(--pad) * 0.4); border-radius: 3px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, #ffb347 0 6px, #1a1712 6px 12px); opacity: 0.75;
}
.lh-rx__pipe { position: absolute; top: 18%; bottom: 18%; width: calc(var(--pad) * 0.45); border-radius: 6px; pointer-events: none;
  background: linear-gradient(90deg, #7a5a34, #d9a25e 45%, #6a4a26); box-shadow: 0 0 0 1px #2a1d0e; }
.lh-rx__pipe--l { left: calc(var(--pad) * 0.25); }
.lh-rx__pipe--r { right: calc(var(--pad) * 0.25); }
.lh-rx__pipe::after { content: ''; position: absolute; left: 0; right: 0; top: 30%; height: 18%; border-radius: 4px; background: rgba(255, 220, 160, 0.5); animation: lh-rx-flow 3.2s linear infinite; }
@keyframes lh-rx-flow { from { transform: translateY(-140%); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(300%); opacity: 0; } }

/* The reactor core, lit (playtest 1, feedback 2): a warm grey-teal panel under a work light, each
   cell a soft bevelled socket, so the dark-faced parts stand off it without the board turning into a
   white slab in a lived-in cockpit. Contrast floor: every part's disc and the cell ring around it
   differ by >= 0.30 in relative luminance (longhaul-contrast.spec.js). */
.lh-board.board {
  --lh-cell: #b4c6c2;
  --lh-cell-alt: #acbfbb;
  border-radius: 12px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 35%, #bfcfca, #a9bcb8 60%, #93a7a3);
  box-shadow: inset 0 0 0 2px #0c0e12, inset 0 3px 8px rgba(20, 32, 46, 0.35), 0 0 0 2px #5a5e66, 0 0 26px -6px rgba(170, 230, 255, 0.25);
}
/* The work light breathing over the panel. */
.lh-board.board::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 50% 40%, rgba(255, 246, 228, 0.18), transparent 62%);
  animation: lh-core-breathe 3.6s ease-in-out infinite;
}
.lh-board .b-sandcell::before {
  inset: 2.5%; border-radius: 18%;
  background: linear-gradient(160deg, #c0d1cd, var(--lh-cell) 55%, #a5bab6);
  box-shadow: inset 0 1px 1px rgba(255, 244, 225, 0.55), inset 0 -1.5px 2px rgba(40, 52, 56, 0.25), 0 1px 0 rgba(255, 244, 225, 0.3);
}
.lh-board .b-sandcell--alt::before { background: linear-gradient(160deg, #b9cbc7, var(--lh-cell-alt) 55%, #9fb4b0); }
/* A gap in the reactor: a dark grate, so it never reads as a cell. */
.lh-board .b-sandcell.is-hole::before {
  inset: 0; border-radius: 4px;
  background: repeating-linear-gradient(45deg, #1d232c 0 4px, #2b333e 4px 8px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
}
.lh-board .b-art { inset: 4%; }
.lh-board .tm-piece { clip-path: circle(44% at 50% 50%); }
/* Parts: a light rim round the dark face and a soft contact shadow on the panel. */
.lh-board .b-sprite:not(.is-popping) .b-art > .tm-piece { filter: drop-shadow(0 1.5px 1px rgba(16, 28, 44, 0.4)); }
.lh-board .b-art::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 88%; height: 88%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.95), 0 0 6px 1px rgba(255, 255, 255, 0.7);
}
.lh-board .b-art--sp3::before { width: 75.5%; height: 75.5%; } /* the blast charge's disc is drawn at 0.86 */
.lh-board .b-sprite.is-popping .b-art::before { display: none; }
/* Markers reach past their part; at the board's edge they stop inside the frame, not on it. */
.lh-board .b-sprites { clip-path: inset(2px round 10px); }
.lh-board .b-cell:hover { background: rgba(40, 80, 120, 0.08); }
.lh-board .b-cell.is-selected { box-shadow: inset 0 0 0 3px var(--lh-amber-deep), 0 0 16px 2px rgba(255, 160, 50, 0.8); background: rgba(255, 179, 71, 0.2); }
.lh-board .b-cell:focus-visible { box-shadow: inset 0 0 0 3px #1a2433, inset 0 0 0 6px var(--lh-amber); }
.lh-board .b-banner { font-size: clamp(1.4rem, 6cqw, 2.6rem); text-shadow: 0 3px 0 #3a1d06, 0 -2px 0 #3a1d06, 3px 0 0 #3a1d06, -3px 0 0 #3a1d06, 0 8px 18px rgba(0, 0, 0, 0.7); }
.lh-board .b-banner--intro { color: var(--lh-amber-hot); }
.lh-board .b-floater { text-shadow: 0 2px 0 #3a1d06, 0 -1px 0 #3a1d06, 2px 0 0 #3a1d06, -2px 0 0 #3a1d06, 0 4px 10px rgba(0, 0, 0, 0.6); }
.lh-banner--cannon { color: #ffb4a4 !important; top: 22% !important; }
/* Idle life: parts breathe a little, out of step with each other. */
.lh-board .b-sprite:nth-child(3n) .b-art > .tm-piece { animation: lh-rx-idle 4.2s ease-in-out infinite; }
.lh-board .b-sprite:nth-child(3n + 1) .b-art > .tm-piece { animation: lh-rx-idle 5.1s -1.7s ease-in-out infinite; }
@keyframes lh-rx-idle { 50% { transform: scale(1.04) rotate(-2deg); } }

/*
 * Rivet special: the part's own art stays (its kind is what you match to fire it), under a brass ring
 * that turns, a halo of the part's colour, and a brass rivet badge (an engraved plus, a sweeping glint).
 */
.lh-rivet { position: absolute; inset: 0; display: block; pointer-events: none; }
.lh-rivet__ring {
  position: absolute; inset: -2%; border-radius: 50%;
  background: conic-gradient(from 0deg, #fff1c4, #b07a2a 20%, #ffe2a0 35%, #7a4a12 55%, #ffd88a 75%, #b07a2a 90%, #fff1c4);
  -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 64% 70%, transparent 72%);
  mask: radial-gradient(circle, transparent 0 62%, #000 64% 70%, transparent 72%);
  animation: tm-spin 6s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255, 214, 140, 0.9));
}
.lh-rivet::before {
  content: ''; position: absolute; inset: 4%; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--tint, #ffb347), 0 0 12px 2px var(--tint, #ffb347);
  opacity: 0.7;
}
.lh-rivet__badge {
  position: absolute; right: -4%; top: -4%; width: 44%; height: 44%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 38% 32%, #fff6d8, #e6b56a 38%, #a8701f 68%, #5a3a10);
  box-shadow: 0 0 0 1.5px #2a1d0e, 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 6px rgba(255, 214, 140, 0.8);
}
.lh-rivet__badge::before, .lh-rivet__badge::after { content: ''; position: absolute; background: #2a1d0e; border-radius: 2px; box-shadow: 0 1px 0 rgba(255, 240, 200, 0.6); }
.lh-rivet__badge::before { left: 44%; top: 20%; bottom: 20%; width: 12%; }
.lh-rivet__badge::after { top: 44%; left: 20%; right: 20%; height: 12%; }
.lh-rivet__glint {
  position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.9) 48%, transparent 60%) no-repeat;
  background-size: 250% 100%; animation: lh-rx-glint 2.4s ease-in-out infinite;
}
@keyframes lh-rx-glint { 0%, 55% { background-position: 150% 0; } 100% { background-position: -100% 0; } }

/*
 * Meltdown (playtest 2): the part's own art (its kind is what it melts) in a red-hot core: a glow that
 * swells like a reactor running hot, a turning black-and-amber hazard band, and a radiation badge.
 */
.lh-melt { position: absolute; inset: 0; display: block; pointer-events: none; }
.lh-melt__core {
  position: absolute; inset: -6%; border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(255, 90, 30, 0) 74%, rgba(255, 120, 40, 0.9) 82%, rgba(255, 50, 20, 0.6) 91%, rgba(255, 40, 10, 0) 100%);
  animation: lh-melt-heat 1.3s ease-in-out infinite;
}
@keyframes lh-melt-heat { 50% { transform: scale(1.07); filter: brightness(1.35); } }
.lh-melt__band {
  position: absolute; inset: -1%; border-radius: 50%;
  background: repeating-conic-gradient(#1d0d04 0 12deg, #ffb020 12deg 24deg);
  -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 62% 69%, transparent 71%);
  mask: radial-gradient(circle, transparent 0 60%, #000 62% 69%, transparent 71%);
  animation: tm-spin 7s linear infinite reverse;
  filter: drop-shadow(0 0 3px rgba(255, 90, 30, 0.9));
}
.lh-melt__badge {
  position: absolute; right: -6%; top: -6%; width: 46%; height: 46%; border-radius: 50%; z-index: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 120, 40, 0.95);
  animation: lh-melt-badge 1.3s ease-in-out infinite;
}
.lh-melt__badge svg { width: 100%; height: 100%; display: block; }
@keyframes lh-melt-badge { 50% { transform: scale(1.1); } }
/*
 * Supernova: the biggest thing on the board. Its part shrinks into a white-hot star; a cyan-violet
 * corona and a long four-point flare spill past the cell (the sprite sits over its neighbours).
 */
.lh-board .b-sprite:has(.lh-snova) { z-index: 2; }
/* A part on a dark cell paints nothing at all: the fog alone shows there (review I-2). */
.lh-board .b-sprite.is-dark { z-index: 0; }
.lh-board .b-sprite.is-dark .b-art { visibility: hidden; }
.lh-snova { position: absolute; inset: 0; display: block; pointer-events: none; }
/* Behind everything: a wide violet-blue corona with a dark edge, so it reads on the light panel too. */
.lh-snova__corona {
  position: absolute; inset: -34%; border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.95) 0 22%, rgba(120, 210, 255, 0.85) 38%, rgba(90, 80, 255, 0.6) 58%, rgba(60, 20, 140, 0.45) 76%, rgba(40, 10, 100, 0) 100%);
  animation: lh-snova-pulse 1.6s ease-in-out infinite;
}
@keyframes lh-snova-pulse { 50% { transform: scale(1.14); opacity: 0.8; } }
.lh-snova__flare { position: absolute; inset: -50%; display: block; animation: lh-snova-flare 5s linear infinite; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 6px #4fc3ff); }
.lh-snova__flare svg { width: 100%; height: 100%; display: block; }
@keyframes lh-snova-flare { 0% { transform: rotate(0) scale(1); } 25% { transform: rotate(22deg) scale(0.84); } 50% { transform: rotate(45deg) scale(1); } 75% { transform: rotate(67deg) scale(0.84); } 100% { transform: rotate(90deg) scale(1); } }
/* The star's body: a deep navy disc with a white-hot heart, and a turning cyan-magenta-gold rim. */
.lh-snova__back {
  position: absolute; inset: 2%; border-radius: 50%;
  background: radial-gradient(circle closest-side, #fff 0 30%, #bdeeff 46%, #3a5cff 70%, #1a0a50 94%);
  box-shadow: 0 0 0 2px #1a0a40, 0 0 14px 4px rgba(120, 200, 255, 0.95);
}
.lh-snova__ring {
  position: absolute; inset: -4%; border-radius: 50%;
  background: conic-gradient(#7fe8ff, #ff7ad9, #ffe27a, #7fe8ff, #b04dff, #ff7ad9, #7fe8ff);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 86%, #000 88% 98%, transparent 100%);
  mask: radial-gradient(circle closest-side, transparent 0 86%, #000 88% 98%, transparent 100%);
  animation: tm-spin 3s linear infinite;
}
.lh-snova__part { position: absolute; inset: 20%; display: block; border-radius: 50%; filter: drop-shadow(0 0 4px #fff); }
.lh-snova__part > svg, .lh-snova__part > .tm-piece { width: 100%; height: 100%; display: block; }
.lh-board .b-art:has(.lh-snova)::before { display: none; }

/* Reach markers (playtest 1): every special shows what it hits, past its disc, on any board. */
.lh-reach { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.lh-reach > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.lh-reach path, .lh-reach circle { vector-effect: non-scaling-stroke; }
.lh-reach__streak { fill: none; stroke: #fff6dc; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 7; opacity: 0.8;
  filter: drop-shadow(0 0 2px #ffb347); animation: lh-reach-run 0.9s linear infinite; }
.lh-reach--v .lh-reach__streak, .lh-reach--h .lh-reach__streak { paint-order: stroke; }
.lh-reach__core { fill: none; stroke: rgba(255, 240, 200, 0.4); stroke-width: 6; stroke-linecap: round; filter: blur(2px); }
@keyframes lh-reach-run { to { stroke-dashoffset: -32; } }
.lh-reach__head { fill: #fffaf0; stroke: #3a1d06; stroke-width: 2; stroke-linejoin: round; paint-order: stroke; }
.lh-reach--v > svg, .lh-reach--h > svg { filter: drop-shadow(0 0 3px rgba(255, 179, 71, 0.95)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.lh-reach--v .lh-reach__head { animation: lh-reach-v 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lh-reach--v .lh-reach__head:first-of-type { --dir: -1; }
.lh-reach--h .lh-reach__head { animation: lh-reach-h 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lh-reach--h .lh-reach__head:first-of-type { --dir: -1; }
@keyframes lh-reach-v { 50% { transform: translateY(calc(var(--dir, 1) * 18%)); } }
@keyframes lh-reach-h { 50% { transform: translateX(calc(var(--dir, 1) * 18%)); } }
.lh-reach__ring { fill: none; stroke: #ffe7a8; stroke-width: 3.5; filter: drop-shadow(0 0 3px #ff8a2a); }
.lh-reach__tick { stroke: #ffd08a; stroke-width: 3; stroke-linecap: round; }
.lh-reach--ring > svg { animation: lh-reach-pulse 1.2s ease-in-out infinite; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
@keyframes lh-reach-pulse { 50% { transform: scale(1.08); } }
.lh-reach__glow { fill: url(#lhq-halo); }
.lh-reach__ray { fill: #fff3c4; stroke: #7a3cff; stroke-width: 1; stroke-linejoin: round; paint-order: stroke; }
.lh-reach--halo > svg { animation: tm-spin 9s linear infinite; filter: drop-shadow(0 0 3px #ffb347); }
.lh-reach__arm { fill: url(#lhq-brass); stroke: #3a250a; stroke-width: 1.5; stroke-linejoin: round; paint-order: stroke; }
.lh-reach--plus > svg { filter: drop-shadow(0 0 3px rgba(255, 214, 140, 0.9)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); animation: lh-reach-pulse 1.4s ease-in-out infinite; }
.lh-reach__melt { fill: rgba(255, 110, 40, 0.12); stroke: #ff7a2a; stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linejoin: round; animation: lh-reach-run 1.1s linear infinite; }
.lh-reach--melt .lh-reach__head { fill: #ffd08a; stroke: #4a1404; }
.lh-reach--melt > svg { filter: drop-shadow(0 0 3px rgba(255, 90, 30, 0.95)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.lh-reach__novaglow { fill: rgba(110, 200, 255, 0.2); stroke: #2a1a7a; stroke-width: 5; stroke-linejoin: round; opacity: 0.85; }
.lh-reach__nova { fill: none; stroke: #eafaff; stroke-width: 2.5; stroke-dasharray: 3 6; stroke-linecap: round; stroke-linejoin: round; animation: lh-reach-run 0.8s linear infinite; }
.lh-reach__spark { fill: #fff; stroke: #5fb8ff; stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: lh-reach-twinkle 1.2s ease-in-out infinite; }
.lh-reach__spark:nth-of-type(2n) { animation-delay: -0.6s; }
@keyframes lh-reach-twinkle { 50% { transform: scale(0.4) rotate(45deg); opacity: 0.5; } }
.lh-reach--nova > svg { filter: drop-shadow(0 0 4px rgba(127, 216, 255, 0.95)); }
/* A plated special: the same marker over the steel. */
.lh-plate__reach { position: absolute; inset: 4%; pointer-events: none; }
/* The preview: the cells a hovered, selected or focused special will hit glow softly. */
.lh-board .b-cell.is-reach::after {
  content: ''; position: absolute; inset: 3%; border-radius: 22%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 200, 110, 0) 45%, rgba(255, 170, 60, 0.42) 100%);
  box-shadow: inset 0 0 0 2.5px rgba(232, 140, 30, 0.95), 0 0 10px rgba(255, 160, 50, 0.6);
  animation: lh-reach-glow 1.2s ease-in-out infinite alternate;
}
.lh-board .b-cell.is-reach-src::after { box-shadow: inset 0 0 0 3px #c96d17, 0 0 14px rgba(255, 160, 50, 0.95); }
@keyframes lh-reach-glow { from { opacity: 0.6; } to { opacity: 1; } }
/* A plated special holds its fire: its reach shows dimmed. */
.lh-board.is-held .b-cell.is-reach::after { opacity: 0.4; animation: none; box-shadow: inset 0 0 0 2px rgba(90, 100, 110, 0.8); background: rgba(60, 70, 80, 0.12); }
/* The one-line hint by a previewed overload or plated special. */
.lh-reach-hint {
  position: absolute; left: 50%; z-index: 5; margin: 0; max-width: 86%; width: max-content;
  transform: translate(-50%, calc(-100% - 4px)); padding: 0.3em 0.7em; border-radius: 8px;
  font-weight: 700; font-size: clamp(0.72rem, 2.6cqw, 0.95rem); line-height: 1.25; text-align: center;
  color: #fff4dc; background: rgba(26, 18, 8, 0.9); box-shadow: 0 0 0 1.5px #ffb347, 0 4px 12px rgba(0, 0, 0, 0.45);
  pointer-events: none; animation: lh-hint-in 180ms ease-out;
}
.lh-reach-hint--below { transform: translate(-50%, 4px); }
@keyframes lh-hint-in { from { opacity: 0; } }

/* Gizmo overlays (all decorative). */
.lh-frostlayer { position: absolute; inset: 0; pointer-events: none; }
.lh-frost {
  position: absolute; left: 0; top: 0; width: calc(100% / var(--w)); height: calc(100% / var(--h));
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
}
.lh-frost::before {
  content: ''; position: absolute; inset: 2%; border-radius: 22%;
  background: radial-gradient(circle at 50% 50%, rgba(143, 243, 255, 0.15) 30%, rgba(143, 243, 255, 0.55) 62%, rgba(220, 252, 255, 0.85) 90%);
  box-shadow: 0 0 10px rgba(143, 243, 255, 0.6);
}
.lh-frost::after {
  content: ''; position: absolute; inset: 2%; border-radius: 22%;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.55) 45%, transparent 60%);
  animation: lh-rx-shimmer 3.4s var(--ph, 0s) ease-in-out infinite;
}
/* On the grey-teal panel the coolant pools cyan with an icy rim, so it reads as a spill and the
   parts in it still stand off it (the contrast probe measures parts in coolant too). */
.lh-board .lh-frost::before {
  background: radial-gradient(circle at 50% 50%, rgba(60, 200, 235, 0.3) 30%, rgba(70, 205, 240, 0.7) 60%, rgba(196, 246, 255, 0.95) 88%);
  box-shadow: 0 0 0 1.5px rgba(10, 110, 170, 0.7), 0 0 10px rgba(24, 160, 214, 0.7);
}
@keyframes lh-rx-shimmer { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.lh-frost.is-creep::before, .lh-frost-top.is-creep { animation: lh-rx-creep 420ms var(--lh-ease) both; }
@keyframes lh-rx-creep { from { transform: scale(0.2); opacity: 0; } }
.lh-frost.is-gone, .lh-frost-top.is-gone { animation: lh-rx-gone 460ms ease-in forwards; }
@keyframes lh-rx-gone { to { transform: scale(1.35); opacity: 0; } }
.b-block.lh-frost-top { pointer-events: none; }
.lh-frost-top::before {
  content: ''; position: absolute; inset: 0; border-radius: 22%;
  background:
    radial-gradient(circle at 12% 14%, rgba(240, 254, 255, 0.95) 0 5%, transparent 9%),
    radial-gradient(circle at 86% 80%, rgba(240, 254, 255, 0.85) 0 4%, transparent 8%),
    radial-gradient(circle at 84% 18%, rgba(240, 254, 255, 0.7) 0 3%, transparent 6%),
    radial-gradient(circle, transparent 0 46%, rgba(190, 248, 255, 0.4) 52%, transparent 60%);
}

.lh-slag .lh-gz, .lh-plate .lh-gz { position: absolute; inset: 3%; width: 94%; height: 94%; display: block; }
/* Slag sits in a scorched crater, bigger than a part, so it never reads as a piece. */
.lh-slag::before {
  content: ''; position: absolute; inset: 0; border-radius: 30%;
  background: radial-gradient(circle, rgba(255, 110, 30, 0.35), rgba(60, 24, 8, 0.85) 55%, rgba(20, 10, 4, 0.9) 72%, transparent 76%);
}
.lh-slag .lh-gz { inset: -4%; width: 108%; height: 108%; }
.lh-slag img.lh-gz { clip-path: circle(40% at 50% 52%); object-fit: cover; filter: contrast(1.15) saturate(1.2); }
.lh-slag { animation: tm-born 360ms var(--ease-bounce); }
.lh-slag.is-still { animation: none; }
.lh-slag::after {
  content: ''; position: absolute; inset: 18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 138, 42, 0.55), transparent 70%);
  mix-blend-mode: screen; animation: lh-rx-ember 2.8s ease-in-out infinite;
}
@keyframes lh-rx-ember { 50% { opacity: 0.25; } }
.lh-slag.is-gone { animation: lh-rx-crack 440ms ease-in forwards; }
@keyframes lh-rx-crack { 20% { transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)) scale(1.15) rotate(-6deg); } 100% { transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)) scale(0.3) rotate(25deg); opacity: 0; } }

.lh-plate .lh-plate__steel {
  position: absolute; inset: 0;
  -webkit-mask: radial-gradient(circle, transparent 0 var(--hole, 40%), #000 calc(var(--hole, 40%) + 3%));
  mask: radial-gradient(circle, transparent 0 var(--hole, 40%), #000 calc(var(--hole, 40%) + 3%));
}
.lh-plate .lh-plate__steel .lh-gz { inset: 1%; width: 98%; height: 98%; border-radius: 14%; object-fit: cover; }
.lh-plate[data-plates="2"] { --hole: 36%; }
.lh-plate[data-plates="3"] { --hole: 31%; }
.lh-plate[data-plates="3"] .lh-plate__steel { filter: brightness(0.85) sepia(0.25); }
/* Full width so the pips' % size resolves (a shrink-to-fit box left them 0px wide). */
.lh-plate__pips { position: absolute; left: 0; right: 0; bottom: 3%; display: flex; justify-content: center; gap: 3px; }
.lh-plate__pips i {
  width: clamp(5px, 11%, 9px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6dc, #d9a25e 55%, #5a3a10); box-shadow: 0 0 0 1px #1a1208;
}
.lh-plate.is-dent .lh-plate__steel { animation: lh-rx-dent 360ms ease-out; }
@keyframes lh-rx-dent { 25% { transform: translateX(-6%) rotate(-4deg) scale(0.96); } 60% { transform: translateX(4%) rotate(3deg); } }
.lh-plate.is-slam .lh-plate__steel { animation: lh-rx-slam 320ms cubic-bezier(0.5, 0, 0.75, 0) both; }
@keyframes lh-rx-slam { from { transform: scale(1.7); opacity: 0; } 70% { transform: scale(0.94); opacity: 1; } }
.lh-plate.is-gone { animation: lh-rx-plateoff 440ms ease-in forwards; }
@keyframes lh-rx-plateoff { to { transform: translate(calc(var(--c) * 100% + 20%), calc(var(--r) * 100% - 40%)) rotate(30deg) scale(0.6); opacity: 0; } }

/*
 * Chapters 2-4 gizmos (all decorative; the cell buttons stay on top and keep every cell playable).
 * Rust: a crust round the part with the middle cut away, so the part's art reads through; a pip per
 * plate, and a dial counting the turns until it creeps back (red on its last turn).
 */
@property --rust-hole { syntax: '<percentage>'; inherits: true; initial-value: 38%; }
.lh-rust .lh-rust__crust {
  position: absolute; inset: 0; overflow: hidden; border-radius: 16%;
  -webkit-mask: radial-gradient(circle, transparent 0 var(--rust-hole, 38%), #000 calc(var(--rust-hole, 38%) + 5%));
  mask: radial-gradient(circle, transparent 0 var(--rust-hole, 38%), #000 calc(var(--rust-hole, 38%) + 5%));
  filter: drop-shadow(0 1px 1px rgba(30, 12, 4, 0.6));
}
.lh-rust .lh-rust__crust .lh-gz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.14); }
.lh-rust[data-plates="2"] { --rust-hole: 35%; }
.lh-rust[data-plates="3"] { --rust-hole: 31%; }
.lh-rust[data-plates="3"] .lh-rust__crust { filter: brightness(0.85) saturate(1.2) drop-shadow(0 1px 1px rgba(30, 12, 4, 0.6)); }
/* The crust's inner edge flickers like flaking rust, slowly. */
.lh-rust .lh-rust__crust::after {
  content: ''; position: absolute; inset: 0; border-radius: 16%;
  background: radial-gradient(circle, transparent calc(var(--rust-hole, 38%) + 2%), rgba(255, 138, 58, 0.55) calc(var(--rust-hole, 38%) + 6%), transparent calc(var(--rust-hole, 38%) + 13%));
  animation: lh-rust-glow 3.4s ease-in-out infinite;
}
@keyframes lh-rust-glow { 50% { opacity: 0.25; } }
.lh-rust__pips { position: absolute; left: 0; right: 0; bottom: 3%; display: flex; justify-content: center; gap: 3px; }
.lh-rust__pips i {
  width: clamp(5px, 11%, 9px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3e0, #ffb27a 55%, #a8501e); box-shadow: 0 0 0 1.5px #1a0a04;
}
/* The regrow dial: the ring empties as the turns run down; the number is the turns left. */
.lh-rust__due {
  position: absolute; right: 1%; top: 1%; width: max(34%, 17px); aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 50%; background: #1d140e; box-shadow: 0 0 0 1.5px #e9b27a, 0 1px 3px rgba(0, 0, 0, 0.6);
}
.lh-rust__due svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lh-rust__due circle { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 3; }
.lh-rust__due .lh-rust__duefill { stroke: #ffb347; stroke-dasharray: calc(var(--due, 1) * 100) 100; transition: stroke-dasharray 300ms ease-out; }
.lh-rust__due b { position: relative; font: 700 clamp(11px, 2.2cqmin, 14px) / 1 var(--font-body, sans-serif); color: #fff1d8; }
.lh-rust.is-due .lh-rust__due { background: #5a120a; box-shadow: 0 0 0 1.5px #ff6a4a, 0 0 8px rgba(255, 80, 50, 0.9); animation: lh-rust-warn 1.1s ease-in-out infinite; }
.lh-rust.is-due .lh-rust__duefill { stroke: #ff6a4a; }
@keyframes lh-rust-warn { 50% { transform: scale(1.14); } }
/* Creeping back: the crust grows in from the cell's edge toward the part. */
.lh-rust.is-creep .lh-rust__crust { animation: lh-rust-creep 620ms cubic-bezier(0.3, 0.7, 0.4, 1) both; }
/* --rust-hole is a registered percentage, so the cut-away closes in smoothly as the rust creeps back. */
@keyframes lh-rust-creep {
  from { --rust-hole: 72%; opacity: 0.35; filter: sepia(1) brightness(1.5); }
  to { opacity: 1; }
}
.lh-rust.is-creep .lh-rust__pips i:last-child { animation: lh-rust-pip 620ms ease-out; }
@keyframes lh-rust-pip { from { transform: scale(0); } 60% { transform: scale(1.5); } }
.lh-rust.is-dent .lh-rust__crust { animation: lh-rx-dent 360ms ease-out; }
.lh-rust.is-gone { animation: lh-rx-plateoff 440ms ease-in forwards; }
.lh-flake {
  position: absolute; width: 8px; height: 6px; margin: -3px 0 0 -4px; border-radius: 2px 4px 1px 3px;
  background: linear-gradient(135deg, #d0783a, #5a2a10); box-shadow: 0 0 0 1px rgba(30, 10, 2, 0.5);
  animation: lh-rx-fly 640ms cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
.lh-board .b-floater.lh-floater--rust { color: #ffb07a; }

/* Portals: paired rings (same hue, same number). The in ring sits low in its cell -- parts drop into
   it -- and its exit high in its own cell, where they come out. */
.b-block.lh-portal { z-index: 1; }
.lh-portal__ring, .lh-portal__glow { position: absolute; left: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%) scaleY(0.5); }
.lh-portal--in .lh-portal__ring, .lh-portal--in .lh-portal__glow { top: 85%; }
.lh-portal--out .lh-portal__ring, .lh-portal--out .lh-portal__glow { top: 15%; }
.lh-portal__ring { border-radius: 50%; box-shadow: 0 0 0 2px var(--hue), 0 0 10px 2px var(--hue); }
.lh-portal__ring .lh-gz { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; animation: tm-spin 5s linear infinite; }
.lh-portal--out .lh-portal__ring .lh-gz { animation-direction: reverse; }
.lh-portal__glow {
  width: 90%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--hue) 0 30%, transparent 70%); opacity: 0.55; filter: blur(2px);
  animation: lh-portal-breathe 2.2s ease-in-out infinite;
}
@keyframes lh-portal-breathe { 50% { opacity: 0.25; } }
.lh-portal__tag {
  position: absolute; left: 3%; display: grid; place-items: center; width: max(30%, 16px); aspect-ratio: 1; border-radius: 50%;
  font: 800 clamp(11px, 2.2cqmin, 14px) / 1 var(--font-body, sans-serif); color: #10121a; background: var(--hue);
  box-shadow: 0 0 0 1.5px #10121a;
}
.lh-portal--in .lh-portal__tag { bottom: 4%; }
.lh-portal--out .lh-portal__tag { top: 4%; }
.lh-portal.is-pass .lh-portal__ring { animation: lh-portal-pass 360ms ease-out; }
.lh-portal.is-pass .lh-portal__glow { animation: lh-portal-flash 360ms ease-out; }
@keyframes lh-portal-pass { 40% { transform: translate(-50%, -50%) scaleY(0.62) scaleX(1.25); } }
@keyframes lh-portal-flash { 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.5, 0.9); } }
.lh-portal.is-swapped > * { animation: lh-portal-in 520ms var(--ease-bounce, ease-out) both; }
@keyframes lh-portal-in { from { opacity: 0; scale: 0.2; } }
.lh-portal.is-gone > * { animation: lh-portal-out 380ms ease-in forwards; }
@keyframes lh-portal-out { to { opacity: 0; scale: 0.2; } }

/* Drift rows: a conveyor belt under the parts, treads creeping the way the row slides... */
.lh-floorlayer { position: absolute; inset: 0; pointer-events: none; }
.lh-belt {
  position: absolute; left: 0; width: 100%; top: calc(var(--r) * 100% / var(--h)); height: calc(100% / var(--h));
  overflow: hidden; border-block: 2px solid #5b4a33;
  background: linear-gradient(180deg, #8b8f86, #a3a69b 30%, #9a9d92 70%, #7b7e76);
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.3), inset 0 -3px 4px rgba(0, 0, 0, 0.3);
}
.lh-belt__tread {
  position: absolute; inset: 0 -40px; opacity: 0.55;
  background: repeating-linear-gradient(90deg, rgba(40, 36, 30, 0.55) 0 3px, transparent 3px 20px);
  animation: lh-belt-run 2.4s linear infinite;
}
.lh-belt--l .lh-belt__tread { animation-direction: reverse; }
@keyframes lh-belt-run { from { transform: translateX(-20px); } to { transform: translateX(0); } }
.lh-belt.is-shift .lh-belt__tread { animation-duration: 0.35s; }
/* ...chevrons in the gaps between parts, with a light running along them... */
.b-block.lh-beltmarks { left: 0; width: 100%; transform: translateY(calc(var(--r) * 100%)); z-index: 1; }
.lh-beltmarks__chevs { position: absolute; inset: 0; filter: drop-shadow(0 0 1px #1a0e04) drop-shadow(0 0 1px #1a0e04); }
/* Two lines of small chevrons near the row's top and bottom edges, at the cell boundaries: there the
   round parts leave room, so the marks never sit on a part (they did at 360 px down the middle). */
.lh-beltmarks__chevs i {
  position: absolute; top: 12%; left: calc(var(--k) * 100% / var(--w)); width: calc(15% / var(--w)); aspect-ratio: 0.6;
  transform: translate(-50%, -50%);
  background: #ffb347; clip-path: polygon(0 0, 42% 0, 100% 50%, 42% 100%, 0 100%, 58% 50%);
  opacity: 0.8; animation: lh-chev-run 1.8s linear infinite; animation-delay: calc(var(--k) * 0.18s - 3s);
}
.lh-beltmarks__chevs--low i { top: 88%; }
.lh-beltmarks--l .lh-beltmarks__chevs i { transform: translate(-50%, -50%) scaleX(-1); animation-delay: calc((var(--n) - var(--k)) * 0.18s - 3s); }
@keyframes lh-chev-run { 0%, 60%, 100% { opacity: 0.8; } 15% { opacity: 1; background: #fff3cf; } }
.lh-beltmarks.is-shift .lh-beltmarks__chevs i { animation: lh-chev-flash 420ms ease-out; }
@keyframes lh-chev-flash { 30% { opacity: 1; background: #fff6dc; filter: drop-shadow(0 0 4px #ffb347); } }
/* ...and an end cap drawn as a steel tab with a double chevron and the turns left until the next
   slide (the pack's drift plate read as a "play" button, so it is not used here). */
.lh-beltmarks__cap {
  position: absolute; top: 1px; right: 1px; height: max(30%, 15px); padding: 0 3px 0 2px; box-sizing: border-box;
  display: flex; align-items: center; gap: 1px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(74, 79, 87, 0.86), rgba(42, 45, 51, 0.86)); box-shadow: 0 0 0 1.5px #121417, 0 1px 3px rgba(0, 0, 0, 0.5);
}
.lh-beltmarks--l .lh-beltmarks__cap { right: auto; left: 1px; flex-direction: row-reverse; padding: 0 2px 0 3px; }
.lh-beltmarks__capchev { position: relative; display: block; height: 60%; aspect-ratio: 1.1; }
.lh-beltmarks__capchev::before, .lh-beltmarks__capchev::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 55%; background: #ffb347;
  clip-path: polygon(0 0, 42% 0, 100% 50%, 42% 100%, 0 100%, 58% 50%);
}
.lh-beltmarks__capchev::before { left: 0; }
.lh-beltmarks__capchev::after { right: 0; }
.lh-beltmarks--l .lh-beltmarks__capchev { scale: -1 1; }
.lh-beltmarks__cap b {
  min-width: 0.9em; text-align: center;
  font: 800 clamp(11px, 2.1cqmin, 14px) / 1 var(--font-body, sans-serif); color: #ffe2b0;
}
.lh-beltmarks.is-due .lh-beltmarks__cap { background: linear-gradient(180deg, #8a3a1a, #5a1e0a); animation: lh-rust-warn 1.1s ease-in-out infinite; }
.b-sprite.lh-wrap { transition-duration: 200ms; }

/* The dark (the Silence): fog over every unlit cell, overlapping its neighbours into one bank; it
   hides the part, never the cell's button. A match lifts it outward from the light, for good. */
.b-block.lh-dark { z-index: 3; }
.lh-dark::before {
  content: ''; position: absolute; inset: -1px; background: rgba(9, 13, 21, 0.98);
  box-shadow: 0 0 14px 7px rgba(12, 20, 34, 0.8);
}
/* Texture at rest (not a flat black panel): smoke wisps from the pack art, and a faint cold-blue
   glimmer that breathes out of step from cell to cell. Both only add light: the part stays hidden. */
.lh-dark__wisp {
  position: absolute; inset: -30%; overflow: hidden; opacity: 0.9; mix-blend-mode: screen; filter: brightness(1.7) saturate(1.2);
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent); mask: radial-gradient(closest-side, #000 35%, transparent);
}
.lh-dark__wisp .lh-gz { position: absolute; inset: -30%; width: 160%; height: 160%; object-fit: cover; display: block; animation: lh-dark-drift 9s var(--ph, 0s) ease-in-out infinite alternate; }
.lh-dark::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 40%) var(--gy, 60%), rgba(120, 170, 235, 0.16), transparent 55%);
  animation: lh-dark-glimmer 7s var(--ph, 0s) ease-in-out infinite;
}
@keyframes lh-dark-glimmer { 50% { opacity: 0.25; } }
@keyframes lh-dark-drift { from { transform: translate(-8%, 4%) rotate(-6deg); } to { transform: translate(8%, -4%) rotate(6deg); } }
.lh-dark:not(.is-still) { animation: lh-dark-in 600ms ease-out; }
@keyframes lh-dark-in { from { opacity: 0; } }
.lh-dark.is-lifting { animation: lh-dark-lift 760ms ease-out var(--lift-delay, 0ms) forwards; }
@keyframes lh-dark-lift { to { opacity: 0; transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100% - 12%)) scale(1.35); filter: blur(6px); } }
.lh-lamp {
  position: absolute; width: calc(150% / var(--w)); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 226, 150, 0.6), rgba(255, 179, 71, 0.22) 45%, transparent 70%);
  opacity: 0; animation: lh-lamp 900ms ease-out var(--d, 0ms) forwards;
}
@keyframes lh-lamp { 25% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } }

@media (prefers-reduced-motion: reduce) {
  .lh-rust .lh-rust__crust::after, .lh-rust.is-due .lh-rust__due, .lh-beltmarks.is-due .lh-beltmarks__cap, .lh-portal__glow { animation: none; }
  .lh-rust.is-creep .lh-rust__crust, .lh-rust.is-creep .lh-rust__pips i:last-child { animation-duration: 200ms; }
  .lh-portal__ring .lh-gz { animation-duration: 40s; }
  .lh-portal.is-pass > *, .lh-portal.is-swapped > *, .lh-portal.is-gone > * { animation-duration: 200ms; }
  .lh-belt__tread { animation-duration: 12s; }
  .lh-belt.is-shift .lh-belt__tread { animation-duration: 12s; }
  .lh-beltmarks__chevs i { animation: none; opacity: 0.8; }
  .lh-beltmarks.is-shift .lh-beltmarks__chevs i { animation: lh-chev-flash 300ms ease-out; }
  .lh-dark__wisp .lh-gz { animation: none; }
  .lh-dark::after { animation: none; opacity: 0.7; }
  .lh-dark:not(.is-still) { animation-duration: 200ms; }
  .lh-dark.is-lifting { animation: lh-dark-fade 260ms ease-out forwards; }
  .lh-flake { animation-duration: 400ms; }
}
@keyframes lh-dark-fade { to { opacity: 0; } }

/* Pack art with a black margin (rust): cut it off wherever the image shows (goal icon, flyer, demo). */
img.lh-gz--crop { clip-path: inset(6% round 14%); }

/* Effects. */
.lh-chunk, .lh-drop, .lh-bolt, .lh-rivetpop { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; animation: lh-rx-fly 680ms cubic-bezier(0.2, 0.8, 0.4, 1) forwards; }
.lh-chunk { width: 11px; height: 9px; border-radius: 3px 5px 2px 4px; background: linear-gradient(135deg, #6a625a, #2a2420); box-shadow: inset 0 0 0 1px #ff8a2a; }
.lh-drop { border-radius: 50% 50% 50% 0; background: #b8f6ff; box-shadow: 0 0 6px #8ff3ff; }
.lh-bolt { width: 12px; height: 6px; border-radius: 2px; background: linear-gradient(#c9ccd0, #6d7278); }
.lh-rivetpop { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6dc, #d9a25e 55%, #5a3a10); }
@keyframes lh-rx-fly { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 90deg)) scale(0.3); opacity: 0; } }
.lh-ember { position: absolute; width: calc(220% / var(--w)); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 220, 160, 0.95), rgba(255, 120, 40, 0.5) 40%, transparent 70%); animation: tm-blast 560ms ease-out forwards; }
.lh-steam { position: absolute; width: calc(120% / var(--w)); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(240, 248, 255, 0.85), rgba(240, 248, 255, 0) 70%); animation: lh-rx-steam 880ms ease-out forwards; }
@keyframes lh-rx-steam { from { transform: translate(-50%, -50%) scale(0.4); opacity: 1; } to { transform: translate(-50%, -160%) scale(1.6); opacity: 0; } }
.lh-ping { position: absolute; width: calc(100% / var(--w)); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  border: 3px solid #ffd88a; box-shadow: 0 0 12px #ffb347; animation: lh-rx-ping 640ms ease-out forwards; }
@keyframes lh-rx-ping { from { transform: translate(-50%, -50%) scale(0.5); opacity: 1; } to { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } }

/* Meltdown and Supernova going off (playtest 2): wide beams in their own colours, a shockwave, a
   spark from every part of the kind they take, a tinted flash. The supernova's is the biggest. */
.lh-bigborn { position: absolute; width: calc(100% / var(--w)); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  border: 4px solid #ff8a3a; box-shadow: 0 0 16px #ff5a1a, inset 0 0 12px #ff5a1a; animation: lh-bigborn 820ms ease-out forwards; }
.lh-bigborn--nova { border-color: #eafaff; box-shadow: 0 0 22px #7fd8ff, inset 0 0 16px #a98cff; animation-duration: 900ms; }
@keyframes lh-bigborn { from { transform: translate(-50%, -50%) scale(0.4); opacity: 1; } to { transform: translate(-50%, -50%) scale(4); opacity: 0; } }
.lh-board .b-beam.lh-beam--melt { background: linear-gradient(var(--beam-dir, 180deg), rgba(255, 60, 20, 0) 10%, rgba(255, 110, 40, 0.9) 38%, #fff1c8 50%, rgba(255, 110, 40, 0.9) 62%, rgba(255, 60, 20, 0) 90%); filter: drop-shadow(0 0 6px #ff5a1a); animation-duration: 760ms; }
.lh-board .b-beam.lh-beam--nova { background: linear-gradient(var(--beam-dir, 180deg), rgba(120, 90, 255, 0) 5%, rgba(127, 216, 255, 0.9) 34%, #fff 50%, rgba(127, 216, 255, 0.9) 66%, rgba(120, 90, 255, 0) 95%); filter: drop-shadow(0 0 10px #9fe6ff); animation-duration: 960ms; }
.lh-board .b-beam--v.lh-beam--melt, .lh-board .b-beam--v.lh-beam--nova { --beam-dir: 90deg; }
.lh-shock { position: absolute; width: calc(500% / var(--w)); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff6dc 0 10%, rgba(255, 140, 50, 0.85) 26%, rgba(255, 60, 20, 0.45) 46%, transparent 66%);
  animation: lh-shock 760ms ease-out forwards; }
.lh-shock--nova { width: calc(900% / var(--w));
  background: radial-gradient(circle, #fff 0 10%, rgba(200, 244, 255, 0.9) 22%, rgba(127, 216, 255, 0.6) 38%, rgba(140, 100, 255, 0.35) 54%, transparent 68%);
  animation-duration: 1050ms; }
@keyframes lh-shock { 0% { transform: translate(-50%, -50%) scale(0.1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } }
.lh-zap { position: absolute; width: calc(46% / var(--w)); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 25%, #ffb347 45%, rgba(255, 90, 30, 0) 70%); animation: lh-zap 560ms cubic-bezier(0.5, 0, 0.8, 0.4) forwards; }
.lh-zap--nova { background: radial-gradient(circle, #fff 0 25%, #9fe6ff 45%, rgba(140, 100, 255, 0) 70%); animation-duration: 700ms; }
@keyframes lh-zap { 0% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.5); opacity: 0.2; } }
.lh-board .b-flash.lh-flash--melt { background: radial-gradient(circle, rgba(255, 150, 70, 0.6), rgba(255, 60, 20, 0) 70%); }
.lh-board .b-flash.lh-flash--nova { background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(160, 230, 255, 0.5) 45%, rgba(140, 100, 255, 0) 75%); animation-duration: 800ms; }
.lh-board .b-banner.lh-banner--melt { color: #ffc08a; }
.lh-board .b-banner.lh-banner--nova { color: #eafaff; text-shadow: 0 3px 0 #1a1050, 0 -2px 0 #1a1050, 3px 0 0 #1a1050, -3px 0 0 #1a1050, 0 0 24px #7fd8ff; }

/* Cannon: a red targeting band sweeps in and keeps pulsing until the shot lands. */
.lh-target {
  position: absolute; left: 0; width: 100%; pointer-events: none;
  top: calc(var(--r) * 100% / var(--h)); height: calc(100% / var(--h));
}
.lh-target__line {
  position: absolute; inset: 0; border-block: 3px dashed rgba(255, 90, 70, 0.95);
  background: linear-gradient(90deg, rgba(255, 70, 50, 0.12), rgba(255, 70, 50, 0.42));
  box-shadow: 0 0 18px rgba(255, 70, 50, 0.55), inset 0 0 14px rgba(255, 70, 50, 0.35);
  animation: lh-rx-armed 900ms ease-in-out infinite;
}
.lh-target__sweep {
  position: absolute; inset: 0; transform-origin: right;
  background: linear-gradient(90deg, transparent, rgba(255, 90, 70, 0.75) 85%, #fff);
  animation: lh-rx-sweep 650ms ease-out forwards;
}
@keyframes lh-rx-sweep { from { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } to { transform: scaleX(1); opacity: 0; } }
.lh-target__reticle {
  position: absolute; right: 4px; top: 50%; height: 72%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%;
  border: 2px solid #ff5a46; box-shadow: 0 0 10px #ff5a46; animation: lh-rx-reticle 1.2s ease-in-out infinite;
}
@keyframes lh-rx-reticle { 50% { transform: translateY(-50%) scale(0.7) rotate(45deg); } }
.lh-cannonshot {
  position: absolute; left: 0; width: 100%; pointer-events: none;
  top: calc(var(--r) * 100% / var(--h) + 100% / var(--h) * 0.35); height: calc(100% / var(--h) * 0.3);
  background: linear-gradient(90deg, transparent, rgba(255, 120, 80, 0.9) 60%, #fff4e8);
  transform-origin: right; animation: lh-rx-shot 380ms cubic-bezier(0.5, 0, 0.75, 0) forwards;
  filter: drop-shadow(0 0 8px #ff5a46);
}
@keyframes lh-rx-shot { from { transform: scaleX(0); } 70% { transform: scaleX(1); opacity: 1; } to { transform: scaleX(1); opacity: 0; } }
.lh-muzzle {
  position: absolute; right: -6%; width: calc(300% / var(--w)); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  top: calc(var(--r) * 100% / var(--h) + 50% / var(--h)); transform: translateY(-50%);
  background: radial-gradient(circle, #fff, rgba(255, 140, 90, 0.8) 30%, transparent 70%);
  animation: tm-flash 520ms ease-out forwards;
}
.lh-board.has-cannon::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 4px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 90, 70, 0.6), transparent);
}

/* The round ends: a sputter on a loss, a burst of light as the board drains on a win. */
.lh-rx.is-sputter .lh-board::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(8, 6, 4, 0.6);
  animation: lh-rx-sputter 1.4s steps(1) both;
}
@keyframes lh-rx-sputter { 0% { opacity: 0; } 10% { opacity: 0.8; } 18% { opacity: 0.2; } 30% { opacity: 0.9; } 38% { opacity: 0.4; } 55%, 100% { opacity: 1; } }
.lh-burst {
  position: absolute; left: 50%; top: 50%; width: 140%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fffbe8 0 12%, rgba(255, 214, 140, 0.9) 28%, rgba(138, 238, 221, 0.4) 48%, transparent 68%);
}
/* "Won with N moves left" (playtest 1, feedback 6): big over the board, held before the bonus plays. */
.lh-rx__wonwith {
  position: absolute; left: 50%; top: 50%; z-index: 6; margin: 0; width: max-content; max-width: calc(100% - 24px);
  transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; padding: 14px 26px 16px;
  border-radius: 18px; text-align: center; pointer-events: none;
  background: rgba(14, 10, 4, 0.88); border: 2px solid var(--lh-amber);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35), 0 18px 40px -12px #000, 0 0 40px -6px rgba(255, 170, 70, 0.7);
}
.lh-rx__wonwith b { font-family: var(--font-display); font-size: clamp(1.4rem, 6cqw, 2.4rem); line-height: 1.05; color: var(--lh-amber-hot); text-shadow: 0 0 18px rgba(255, 170, 70, 0.6); }
.lh-rx__wonwith span { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 4.2cqw, 1.6rem); color: var(--lh-ink); }
.lh-rx__wonwith em { font-style: normal; font-family: var(--lh-mono); font-weight: 700; font-size: 1.35em; color: #fff4dc; padding: 0 0.1em; }
.lh-rx__wonwith.is-on { animation: lh-wonwith-in 420ms var(--lh-ease) both; }
@keyframes lh-wonwith-in { from { transform: translate(-50%, -50%) scale(0.7); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; } }
/* The victory run (playtest 2): a panel over the board's top edge counts the rounds, the streak
   multiplier and the bonus as every leftover power-up fires; "Tap to skip" under it. */
.lh-rx__vrun {
  position: absolute; left: 50%; top: 6px; z-index: 6; width: max-content; max-width: calc(100% - 16px);
  transform: translateX(-50%); display: grid; justify-items: center; gap: 0; padding: 6px 18px 7px;
  border-radius: 16px; text-align: center; pointer-events: none;
  background: linear-gradient(180deg, rgba(40, 18, 4, 0.92), rgba(14, 10, 4, 0.92)); border: 2px solid var(--lh-amber);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), 0 12px 28px -10px #000, 0 0 30px -6px rgba(255, 170, 70, 0.8);
  animation: lh-vrun-in 380ms var(--lh-ease) both;
}
.lh-rx__vrun p { margin: 0; }
.lh-vrun__kicker { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lh-teal-hot); font-weight: 700; }
.lh-vrun__round { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 4.6cqw, 1.7rem); line-height: 1.1; color: var(--lh-amber-hot); text-shadow: 0 0 14px rgba(255, 170, 70, 0.6); }
.lh-vrun__mult { font-family: var(--lh-mono); font-size: 0.85em; padding: 0 8px; border-radius: 99px; color: #2a1606; background: var(--lh-amber-hot); box-shadow: 0 0 12px rgba(255, 179, 71, 0.9); }
.lh-vrun__mult.is-up { animation: lh-vrun-mult 320ms var(--lh-ease); }
.lh-vrun__pts { font-family: var(--lh-mono); font-weight: 700; font-size: clamp(1rem, 4cqw, 1.4rem); color: #fff4dc; font-variant-numeric: tabular-nums; }
.lh-vrun__skip { font-size: 0.75rem; color: var(--lh-ink-dim); }
.lh-rx__vrun.is-done { border-color: var(--lh-teal-hot); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), 0 12px 28px -10px #000, 0 0 34px -4px rgba(138, 238, 221, 0.85); }
.lh-rx__vrun.is-done .lh-vrun__skip { visibility: hidden; }
.lh-rx__vrun.is-done .lh-vrun__pts { animation: lh-vrun-mult 420ms var(--lh-ease); color: var(--lh-teal-hot); }
@keyframes lh-vrun-in { from { transform: translate(-50%, -14px) scale(0.85); opacity: 0; } }
/* A phone: one compact strip over the board's top edge, so the blasts below stay in view. */
@container (max-width: 520px) {
  .lh-rx__vrun { grid-template-columns: auto auto auto; align-items: baseline; column-gap: 10px; top: 2px; padding: 4px 12px 5px; border-radius: 12px; }
  .lh-vrun__skip { grid-column: 1 / -1; }
  .lh-vrun__round { font-size: 1.05rem; }
  .lh-vrun__pts { font-size: 1rem; }
}
@keyframes lh-vrun-mult { 50% { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) {
  .lh-rx__vrun { animation: lh-fade-in 240ms ease-out both; }
  .lh-vrun__mult.is-up, .lh-rx__vrun.is-done .lh-vrun__pts { animation: none; }
}
.lh-vic__won { margin: 0 0 6px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 2.6vw, 1.3rem); color: var(--lh-ink); }
.lh-vic__won b { font-family: var(--lh-mono); font-size: 1.3em; color: var(--lh-amber-hot); }
.lh-vic__wonpay { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: 0.78em; color: #2a1606; background: var(--lh-amber); vertical-align: 0.1em; }
.lh-rx__sending {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); margin: 0; z-index: 2;
  display: none; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; white-space: nowrap;
  font-size: 0.85rem; color: var(--lh-ink); background: rgba(10, 14, 26, 0.9); border: 1px solid var(--lh-edge);
}
.lh-rx__sending i { width: 8px; height: 8px; border-radius: 50%; background: var(--lh-teal-hot); animation: lh-rx-armed 700ms ease-in-out infinite; }
.lh-rx.is-reporting .lh-rx__sending { display: inline-flex; }
.lh-rx__note {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 5; width: max-content; max-width: calc(100% - 16px);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px;
  border-radius: 14px; background: rgba(36, 14, 10, 0.95); border: 1px solid rgba(232, 112, 90, 0.55);
  box-shadow: 0 16px 30px -12px #000; color: #ffd6cc; font-weight: 600;
}
.lh-rx__note .lh-btn { min-height: 44px; }

/* ---------- BOLT and the leave control ---------- */
.lh-rx__side {
  grid-area: side; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 6px 8px; background: var(--lh-panel); border: 1px solid var(--lh-edge); border-radius: var(--lh-r);
}
.lh-rx__bolt {
  position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none;
  background: radial-gradient(circle at 50% 40%, #3a3020, #0f0c08); box-shadow: 0 0 0 2px #6b5634, 0 0 0 4px #1a1510, 0 0 14px -2px rgba(255, 179, 71, 0.6);
}
.lh-rx__boltart { position: absolute; inset: 0; animation: lh-rx-hover 3.2s ease-in-out infinite; }
@keyframes lh-rx-hover { 50% { transform: translateY(-3%); } }
.lh-rx__boltart .lh-art { border-radius: 50%; }
.lh-rx__boltart .lh-art__img { transform: scale(1.18); }
.lh-rx__comm { min-width: 0; }
.lh-rx__who { margin: 0; font-size: 0.6rem; letter-spacing: 0.18em; color: var(--lh-teal-hot); }
.lh-rx__says {
  margin: 0; font-size: 0.8rem; line-height: 1.25; color: var(--lh-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lh-rx__says.is-new { animation: lh-fade-in 400ms ease-out; }
.lh-rx__leave { position: relative; }
.lh-rx__leavebtn { min-height: 44px; padding: 0 12px; font-size: 0.85rem; }
.lh-rx__confirm {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 6; width: 15rem; padding: 12px; text-align: left;
  background: #141b2c; border: 1px solid var(--lh-edge); border-radius: 12px; box-shadow: 0 20px 40px -14px #000;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.lh-rx__confirm p { margin: 0 0 4px; width: 100%; font-size: 0.9rem; color: var(--lh-ink); }
.lh-rx__confirm .lh-btn { min-height: 44px; flex: 1; padding: 0 10px; font-size: 0.9rem; }

/* ---------- Result card (victory / loss) ---------- */
.lh-rx__result {
  position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 12px;
  background: radial-gradient(ellipse at 50% 45%, rgba(5, 9, 26, 0.45), rgba(5, 9, 26, 0.82));
}
.lh-vic {
  position: relative; width: min(25rem, 100%); padding: 22px 20px 20px; text-align: center; border-radius: 20px;
  background: linear-gradient(180deg, rgba(36, 44, 66, 0.97), rgba(14, 19, 34, 0.98));
  border: 1px solid rgba(255, 196, 130, 0.35);
  box-shadow: 0 0 0 1px #0a0e18, 0 40px 80px -30px #000, 0 0 80px -20px rgba(255, 170, 70, 0.55);
}
.lh-vic::before {
  content: ''; position: absolute; left: 50%; top: -2px; width: 60%; height: 3px; transform: translateX(-50%); border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--lh-amber-hot), transparent);
}
.lh-vic--lost { box-shadow: 0 0 0 1px #0a0e18, 0 40px 80px -30px #000, 0 0 70px -24px rgba(232, 112, 90, 0.5); }
.lh-vic__kicker { margin: 0; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lh-teal-hot); }
.lh-vic--lost .lh-vic__kicker { color: #ff9c86; }
.lh-vic__title { margin: 4px 0 8px; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.05; color: var(--lh-amber); text-shadow: 0 0 22px rgba(255, 170, 70, 0.5); }
.lh-vic__title:focus, .lh-vic__title:focus-visible { outline: none; box-shadow: none; }
.lh-vic__stars { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin: 4px 0 8px; }
.lh-vic__star { position: relative; width: 54px; height: 54px; display: block; filter: grayscale(1) brightness(0.45); opacity: 0.5; }
.lh-vic__star:nth-child(2) { width: 70px; height: 70px; margin-bottom: 10px; }
.lh-vic__star .lh-ico { width: 100%; height: 100%; }
.lh-vic__star.is-landed, .lh-vic.is-settled .lh-vic__star.is-on { filter: drop-shadow(0 0 12px rgba(255, 195, 90, 0.85)); opacity: 1; }
.lh-vic__score { margin: 0 0 10px; color: var(--lh-ink-dim); }
.lh-vic__score:has(+ .lh-vic__run) { margin-bottom: 2px; }
.lh-vic__run { margin: 0 0 10px; font-size: 0.9rem; color: var(--lh-ink-dim); }
.lh-vic__run b { font-family: var(--lh-mono); color: var(--lh-teal-hot); }
.lh-vic__score b { font-family: var(--lh-mono); color: var(--lh-ink); }
.lh-vic__new { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: 0.8rem; font-weight: 700; color: #2a1606; background: #ffc35a; }
.lh-vic__pay { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.lh-vic__pay li {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06);
}
.lh-vic__pay b { font-family: var(--lh-mono); font-size: 1.15rem; color: var(--lh-amber-hot); font-variant-numeric: tabular-nums; }
.lh-vic__ico .lh-ico { width: 26px; height: 26px; display: block; }
.lh-vic__hold {
  display: flex; flex-wrap: wrap-reverse; align-content: flex-start; gap: 2px; width: 58px; height: 28px; padding: 2px;
  border: 2px solid #6b5634; border-top: 0; border-radius: 0 0 6px 6px;
}
.lh-vic__hold i { width: 11px; height: 11px; border-radius: 2px; background: linear-gradient(135deg, #e8b06a, #8a5420); box-shadow: inset 0 0 0 1px #4a2a0c; }
.lh-vic__dock { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; color: var(--lh-teal-hot); font-weight: 600; }
.lh-vic__dock .lh-ico { width: 20px; height: 20px; }
.lh-vic__go { width: 100%; min-height: 54px; font-size: 1.15rem; }
.lh-vic__text { margin: 0 auto 10px; color: var(--lh-ink-dim); max-width: 22rem; }
.lh-vic__left { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; justify-items: center; }
.lh-vic__left li { display: flex; align-items: center; gap: 8px; color: var(--lh-ink); font-weight: 600; }
.lh-vic__actions { display: grid; gap: 8px; }
.lh-vic__actions .lh-btn { min-height: 50px; }

.lh-fly { position: fixed; z-index: 60; pointer-events: none; }
.lh-fly > svg, .lh-fly > img { width: 100%; height: 100%; display: block; }
.lh-fly .tm-piece { clip-path: circle(44% at 50% 50%); }
.lh-flychip {
  position: fixed; z-index: 61; pointer-events: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px;
  border-radius: 99px; font-family: var(--lh-mono); font-weight: 700; color: #2a1606; background: var(--lh-amber-hot);
  box-shadow: 0 0 18px rgba(255, 179, 71, 0.9);
}
.lh-flychip .lh-ico { width: 20px; height: 20px; }

/* Warp: the screens fade and swell as the stars streak (transform/opacity only). */
body.is-warping .lh-screens { opacity: calc(1 - var(--warp, 0) * 0.92); transform: scale(calc(1 + var(--warp, 0) * 0.07)); }
body.is-warping-calm .lh-screens { transform: none; opacity: calc(1 - var(--warp, 0) * 0.7); }
body.is-warping .lh-screen:not([hidden]) { animation: none; }

/* ---------- Reactor: wider screens ---------- */
@media (min-width: 640px) and (max-width: 959px) {
  .lh-rx { padding: 10px 16px 14px; }
  .lh-rx__goalname { display: block; }
}
@media (min-width: 960px) {
  .lh-rx {
    grid-template-columns: clamp(15rem, 19vw, 20rem) minmax(0, 1fr) clamp(14rem, 17vw, 19rem);
    grid-template-rows: minmax(0, 1fr); grid-template-areas: "hud bay side";
    gap: clamp(14px, 1.6vw, 28px); padding: clamp(14px, 2vh, 26px) clamp(14px, 1.8vw, 30px);
  }
  .lh-rx__hud {
    align-self: center; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "dial" "goals" "meter" "cannon";
    gap: 16px; padding: 22px 20px; justify-items: stretch;
  }
  .lh-rx__head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .lh-rx__kicker { font-size: 0.75rem; }
  .lh-rx__title { font-size: 1.6rem; white-space: normal; }
  .lh-rx__dial { justify-self: center; width: 128px; height: 128px; }
  .lh-rx__label { font-size: 0.72rem; }
  .lh-rx__num { font-size: 2.9rem; }
  .lh-rx__ring circle { stroke-width: 5; }
  .lh-rx__goals { flex-direction: column; gap: 10px; }
  .lh-rx__goal { gap: 12px; padding: 6px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.05); }
  .lh-rx__goalicon { width: 46px; height: 46px; }
  .lh-rx__goalname { display: block; }
  .lh-rx__goalnum { font-size: 1.15rem; }
  .lh-rx__meter { flex-direction: column; align-items: stretch; gap: 10px; }
  .lh-rx__meterlabel { font-size: 0.75rem; }
  .lh-rx__meterlabel b { font-size: 1rem; }
  .lh-rx__bar { height: 10px; margin: 0 8px; }
  .lh-rx__cannon { font-size: 1rem; padding: 8px 12px; }
  .lh-rx__side {
    align-self: center; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 14px; padding: 22px 18px;
  }
  .lh-rx__bolt { width: 132px; height: 132px; }
  .lh-rx__who { font-size: 0.75rem; }
  .lh-rx__says {
    font-size: 1rem; line-height: 1.4; -webkit-line-clamp: 5; position: relative; padding: 12px 14px; border-radius: 14px;
    background: rgba(63, 183, 168, 0.1); border: 1px solid rgba(138, 238, 221, 0.2);
  }
  .lh-rx__says::before {
    content: ''; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg);
    background: #1a2e38; border-left: 1px solid rgba(138, 238, 221, 0.2); border-top: 1px solid rgba(138, 238, 221, 0.2);
  }
  .lh-rx__leave { justify-self: stretch; display: grid; }
  .lh-rx__confirm { left: 0; right: auto; width: 100%; }
  .lh-vic { width: min(30rem, 100%); padding: 30px 30px 26px; }
  .lh-vic__star { width: 72px; height: 72px; }
  .lh-vic__star:nth-child(2) { width: 94px; height: 94px; margin-bottom: 14px; }
}
@media (min-width: 960px) and (max-height: 760px) {
  .lh-rx__hud, .lh-rx__side { padding-block: 14px; gap: 10px; }
  .lh-rx__dial { width: 96px; height: 96px; }
  .lh-rx__num { font-size: 2.2rem; }
  .lh-rx__bolt { width: 96px; height: 96px; }
}
/* Short phones: the HUD and BOLT tighten so the board keeps its room. */
@media (max-width: 959px) and (max-height: 600px) {
  .lh-rx { gap: 6px; padding-block: 6px; }
  .lh-rx__dial { width: 52px; height: 52px; }
  .lh-rx__num { font-size: 1.2rem; }
  .lh-rx__goalicon { width: 24px; height: 24px; }
  .lh-rx__bolt { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .lh-rx::before { animation-duration: 10s; }
  .lh-rx__lamps i { animation-duration: 6s; }
  .lh-rx__pipe::after { animation-duration: 9s; }
  .lh-board.board::before { animation-duration: 8s; }
  .lh-board .b-sprite:nth-child(3n) .b-art > .tm-piece, .lh-board .b-sprite:nth-child(3n + 1) .b-art > .tm-piece { animation-duration: 12s; }
  /* The shared board's effects, calmed here (ui.css no longer flattens Long Haul): no shake, no
     flash, no spark storms; beams and blasts still play, softer. */
  .lh .board.is-quake { animation: none; }
  .lh .b-flash, .lh .b-spark { display: none; }
  .lh .b-blast, .lh .b-nova, .lh .b-beam { opacity: 0.65; }
  .lh .b-sprite.is-selected .b-art { animation-duration: 2.4s; }
  /* The shared board steps every 30 ms under reduced motion: moves settle quickly instead of
     overlapping half-finished slides. */
  .lh .b-sprite, .lh .b-sprite.is-falling, .lh .b-sprite.is-shuffling { transition-duration: 60ms; transition-delay: 0ms; }
  .lh .b-art.is-hint-h, .lh .b-art.is-hint-v { animation-duration: 3s; }
  .lh-rivet__ring { animation-duration: 18s; }
  .lh-reach__streak { animation-duration: 3s; }
  .lh-reach--v .lh-reach__head, .lh-reach--h .lh-reach__head, .lh-reach--ring > svg, .lh-reach--plus > svg { animation-duration: 3.2s; }
  .lh-reach--halo > svg { animation-duration: 30s; }
  .lh-board .b-cell.is-reach::after { animation-duration: 3s; }
  .lh-rivet__glint { animation-duration: 6s; }
  .lh-melt__core, .lh-melt__badge { animation-duration: 4s; }
  .lh-melt__band { animation-duration: 20s; }
  .lh-snova__corona { animation-duration: 5s; }
  .lh-snova__flare { animation-duration: 16s; }
  .lh-snova__ring { animation-duration: 12s; }
  .lh-reach__melt, .lh-reach__nova { animation-duration: 3s; }
  .lh-reach__spark { animation-duration: 3.6s; }
  .lh-frost::after { animation-duration: 8s; }
  .lh-slag::after { animation-duration: 6s; }
  .lh-target__line { animation-duration: 2.4s; }
  .lh-target__reticle { animation: none; }
  .lh-rx__cannon.is-armed { animation-duration: 2.4s; }
  .lh-rx__dial.is-low { animation: none; }
  .lh-rx__boltart { animation-duration: 6s; }
  .lh-chunk, .lh-drop, .lh-bolt, .lh-rivetpop { animation-duration: 400ms; }
  .lh-bigborn, .lh-shock { animation-duration: 500ms; opacity: 0.6; }
  .lh-rx.is-sputter .lh-board::after { animation: lh-fade-in 600ms ease-out both; }
}

/* The cockpit around the reactor: canopy glass (the starfield shows through), struts, dash. */
.lh-cockpit { position: absolute; inset: 0; pointer-events: none; }
.lh-cockpit__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lh-ck-scope { stroke-dasharray: 6 4; animation: lh-ck-scope 2.4s linear infinite; }
@keyframes lh-ck-scope { to { stroke-dashoffset: -40; } }
.lh-ck-needle { transform-box: fill-box; transform-origin: 100% 100%; animation: lh-ck-needle 3.6s ease-in-out infinite; }
@keyframes lh-ck-needle { 50% { transform: rotate(-14deg); } }
body.is-warping .lh-cockpit { opacity: 1; }
/* Phones: the HUD's cannon line is a slim row of its own under the meter (never over the title). */
@media (max-width: 959px) {
  .lh-rx__cannon { margin: 3px 0 0; padding: 2px 8px; font-size: 0.75rem; gap: 6px; }
  .lh-rx__cannonicon { width: 11px; height: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .lh-ck-scope { animation-duration: 8s; }
  .lh-ck-needle { animation-duration: 10s; }
}

/* BOLT's portraits are painted on a flat orange ground: frame them as a round porthole badge. */
:is(.lh-dry__bolt, .lh-tip__bolt, .lh-scene__portrait) .lh-art[data-art^="bolt-"] .lh-art__img {
  inset: auto; left: 7%; top: 50%; width: 86%; height: auto; aspect-ratio: 1; transform: translateY(-50%);
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px #8a6a3a, 0 0 0 6px #1a1510, 0 10px 24px -6px rgba(0, 0, 0, 0.7);
}
:is(.lh-dry__bolt, .lh-tip__bolt, .lh-scene__portrait) .lh-art[data-art^="bolt-"].has-img { overflow: visible; }

/* Victory: slow god-rays behind the stars and a warm wash up the card. */
.lh-vic__stars { position: relative; isolation: isolate; }
.lh-rx__result.is-won .lh-vic__stars::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 340px; height: 340px; margin: -170px 0 0 -170px; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 130, 0.22) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 62%);
  mask: radial-gradient(circle, #000 0 18%, transparent 62%);
  animation: tm-spin 24s linear infinite;
}
.lh-rx__result.is-won .lh-vic { background: radial-gradient(ellipse 80% 45% at 50% 22%, rgba(255, 170, 70, 0.18), transparent 70%), linear-gradient(180deg, rgba(36, 44, 66, 0.97), rgba(14, 19, 34, 0.98)); }
.lh-vic__spark { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #ffe7a8; box-shadow: 0 0 8px #ffb347; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .lh-rx__result.is-won .lh-vic__stars::before { animation-duration: 90s; }
}

/* ---------- One-time explainers (playtest 1, feedback 3) ---------- */
.lh-explain {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(3, 6, 16, 0.62); backdrop-filter: blur(2px);
  animation: lh-explain-in 220ms ease-out;
}
.lh-explain.is-closing { animation: lh-explain-out 180ms ease-in forwards; }
@keyframes lh-explain-in { from { opacity: 0; } }
@keyframes lh-explain-out { to { opacity: 0; } }
.lh-explain__card {
  width: min(34rem, 100%); max-height: 100%; overflow: auto;
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 20px; text-align: left;
  background: var(--lh-panel); border: 1px solid rgba(255, 179, 71, 0.35); border-radius: var(--lh-r);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 30px 70px -20px #000, 0 0 40px -14px rgba(255, 170, 70, 0.6);
  animation: lh-explain-rise 320ms var(--lh-ease);
}
@keyframes lh-explain-rise { from { transform: translateY(18px) scale(0.96); } }
.lh-explain__demo {
  padding: 8px; border-radius: 12px;
  background: radial-gradient(ellipse 90% 70% at 50% 35%, #bfcfca, #a9bcb8 60%, #93a7a3);
  box-shadow: inset 0 0 0 2px #0c0e12, 0 0 0 2px #5a5e66;
}
.lh-explain__kicker { margin: 0 0 2px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lh-teal-hot); }
.lh-explain__title { margin: 0 0 10px; font-family: var(--font-display); font-size: var(--step-2, 1.5rem); line-height: 1.1; color: var(--lh-amber); }
.lh-explain__say { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.lh-explain__bolt { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #ffd08a, #c96d17); box-shadow: 0 0 0 2px #2a1d0e; }
.lh-explain__bolt .lh-art { position: absolute; inset: 0; border-radius: 50%; }
.lh-explain__bolt .lh-art__img { transform: scale(1.18); }
.lh-explain__line { margin: 0; color: var(--lh-ink); font-size: 1.02rem; line-height: 1.4; }
.lh-explain__line b { color: var(--lh-amber-hot); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; }
.lh-explain__ok { min-width: 9rem; }
@media (max-width: 560px) {
  .lh-explain__card { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
  .lh-explain__demo { width: min(14rem, 72%); justify-self: center; }
  .lh-explain__ok { width: 100%; }
}

/* The demo board: one loop (--xd) -- the match glows and pops, the special forms, then its reach pops. */
.lh-xd { --xd: 4.2s; position: relative; display: grid; grid-template-columns: repeat(var(--w), 1fr); aspect-ratio: var(--w) / var(--h); width: 100%; }
.lh-explain.is-calm .lh-xd { --xd: 7s; }
.lh-xd__c { position: relative; aspect-ratio: 1; }
.lh-xd__c > span { position: absolute; inset: 4%; display: block; }
.lh-xd__c .tm-piece, .lh-xd__c .lh-gz { width: 100%; height: 100%; }
.lh-xd__c > span > svg, .lh-xd__c > span > .tm-piece { position: absolute; inset: 0; display: block; }
.lh-xd__c .lh-reach { inset: 0; }
.lh-xd__p, .lh-xd__sp, .lh-xd__over, .lh-xd__crate, .lh-xd__frost { animation: var(--xd) ease-in-out infinite both; }
.is-m .lh-xd__p, .is-s .lh-xd__p, .is-x .lh-xd__p, .is-h .lh-xd__p { animation-name: lh-xd-match; }
/* Booster demos: the Spanner's part glints before it goes; the Coolant flush's +5 floats up over the board. */
.is-h::after { content: ''; position: absolute; inset: -6%; border: 2px solid #ffd08a; border-radius: 22%; opacity: 0; animation: lh-xd-aim var(--xd) ease-in-out infinite both; }
.lh-xd__badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0.2em 0.6em; border-radius: 0.5em;
  background: rgba(20, 40, 60, 0.85); color: #c4f6ff; font-weight: 700; white-space: nowrap; opacity: 0;
  animation: lh-xd-badge var(--xd) ease-in-out infinite both; pointer-events: none;
}
@keyframes lh-xd-aim {
  0%, 4% { opacity: 0; transform: scale(1.3); }
  12%, 24% { opacity: 1; transform: none; }
  32%, 100% { opacity: 0; }
}
@keyframes lh-xd-badge {
  0%, 20% { opacity: 0; transform: translate(-50%, -20%); }
  32%, 70% { opacity: 1; transform: translate(-50%, -50%); }
  84%, 100% { opacity: 0; transform: translate(-50%, -80%); }
}
.is-r .lh-xd__p { animation-name: lh-xd-reach; }
.is-pl .lh-xd__p { animation-name: lh-xd-hit; }
.lh-xd__sp { opacity: 0; animation-name: lh-xd-special; }
.is-g .lh-xd__over { animation-name: lh-xd-slag; }
.lh-xd__crate { opacity: 0; inset: 18%; animation-name: lh-xd-crate; }
.is-pl .lh-xd__over { animation-name: lh-xd-plateoff; }
.is-k .lh-xd__over { opacity: 0; animation-name: lh-xd-slam; }
.lh-xd__plate .lh-gz { border-radius: 14%; }
.lh-xd__frost { inset: 2%; border-radius: 22%; background: radial-gradient(circle, rgba(60, 200, 235, 0.3) 30%, rgba(70, 205, 240, 0.7) 60%, rgba(196, 246, 255, 0.95) 88%); }
.is-fc .lh-xd__frost { animation-name: lh-xd-creep; }
.is-x .lh-xd__frost { animation-name: lh-xd-mop; }
.lh-xd__warn {
  position: absolute; left: 0; right: 0; top: calc(var(--r) * 100% / var(--h)); height: calc(100% / var(--h));
  border-radius: 6px; box-shadow: inset 0 0 0 3px #ff4a3a, 0 0 12px rgba(255, 74, 58, 0.8); background: rgba(255, 74, 58, 0.16);
  opacity: 0; animation: lh-xd-warn var(--xd) linear infinite both; pointer-events: none;
}
/* A fire demo (the rivet): forged as usual, then a swap lines up two more of its kind and it fires. */
.lh-xd--fire { --xd: 6.4s; }
.lh-explain.is-calm .lh-xd--fire { --xd: 10s; }
.lh-xd--fire .is-s .lh-xd__sp { animation-name: lh-xd-forgefire; }
.lh-xd--fire .is-r .lh-xd__p { animation-name: lh-xd-reach-late; }
/* Shape demos (the Meltdown, the Supernova): the match builds part by part -- the five, then the run
   that crosses it -- each part ringed as it joins (--k is its turn); then it all pops at once and the
   power-up forms and fires. The ring holder hides at 31% of the loop; each ring shows from its turn. */
.lh-xd--shape { --xd: 7s; }
.lh-explain.is-calm .lh-xd--shape { --xd: 11s; }
.lh-xd--shape .is-m .lh-xd__p, .lh-xd--shape .is-s .lh-xd__p { animation-name: lh-xd-shapematch; }
.lh-xd--shape .is-s .lh-xd__sp { animation-name: lh-xd-shapespecial; }
.lh-xd__c > .lh-xd__mark { inset: -2%; z-index: 1; opacity: 0; animation: lh-xd-markhold var(--xd) linear infinite both; }
.lh-xd__mark i {
  position: absolute; inset: 0; border-radius: 50%; display: block; opacity: 0;
  box-shadow: 0 0 0 2px #fff4d6, 0 0 10px 3px #ffb347;
  animation: lh-xd-mark var(--xd) ease-out infinite both; animation-delay: calc(var(--k) * var(--xd) * 0.028);
}
@keyframes lh-xd-markhold { 0%, 30% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes lh-xd-mark { 0% { opacity: 0; transform: scale(0.4); } 3% { opacity: 1; transform: scale(1.18); } 6%, 60% { opacity: 1; transform: none; } 61%, 100% { opacity: 0; } }
@keyframes lh-xd-shapematch {
  0%, 30% { transform: none; filter: none; opacity: 1; }
  32%, 34% { transform: scale(1.14); filter: brightness(1.4) drop-shadow(0 0 5px #ffd08a); opacity: 1; }
  39%, 88% { transform: scale(0); opacity: 0; }
  96%, 100% { transform: none; filter: none; opacity: 1; }
}
@keyframes lh-xd-shapespecial {
  0%, 37% { transform: scale(0.3); opacity: 0; }
  45% { transform: scale(1.25); opacity: 1; }
  51%, 58% { transform: none; opacity: 1; filter: none; }
  63% { transform: scale(1.25); opacity: 1; filter: brightness(1.6) drop-shadow(0 0 10px #fff4d6); }
  70%, 100% { transform: scale(0); opacity: 0; }
}
.lh-xd--shape .lh-xd__sp { z-index: 2; }
.is-w { z-index: 1; }
.is-w .lh-xd__p { animation-name: lh-xd-swapdown; }
.is-a .lh-xd__p { animation-name: lh-xd-swapup; }
.is-q .lh-xd__p { animation-name: lh-xd-firematch; }
@keyframes lh-xd-forgefire {
  0%, 30% { transform: scale(0.3); opacity: 0; }
  38% { transform: scale(1.25); opacity: 1; }
  44%, 60% { transform: none; opacity: 1; filter: none; }
  64%, 69% { transform: scale(1.2); opacity: 1; filter: brightness(1.5) drop-shadow(0 0 8px #ffd08a); }
  74%, 100% { transform: scale(0); opacity: 0; }
}
/* One cell down or up: the part's box is 92% of its cell. */
@keyframes lh-xd-swapdown {
  0%, 46% { transform: none; filter: none; opacity: 1; }
  54%, 60% { transform: translateY(108.7%); filter: none; opacity: 1; }
  64%, 69% { transform: translateY(108.7%) scale(1.14); filter: brightness(1.35) drop-shadow(0 0 5px #ffd08a); opacity: 1; }
  74%, 90% { transform: translateY(108.7%) scale(0); opacity: 0; }
  92% { transform: none; opacity: 0; }
  100% { transform: none; filter: none; opacity: 1; }
}
@keyframes lh-xd-swapup {
  0%, 46% { transform: none; opacity: 1; }
  54%, 88% { transform: translateY(-108.7%); opacity: 1; }
  91% { transform: translateY(-108.7%); opacity: 0; }
  92% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes lh-xd-firematch {
  0%, 60% { transform: none; filter: none; opacity: 1; }
  64%, 69% { transform: scale(1.14); filter: brightness(1.35) drop-shadow(0 0 5px #ffd08a); opacity: 1; }
  74%, 90% { transform: scale(0); opacity: 0; }
  98%, 100% { transform: none; filter: none; opacity: 1; }
}
@keyframes lh-xd-reach-late {
  0%, 72% { transform: none; filter: none; opacity: 1; }
  76% { transform: scale(1.14); filter: brightness(1.45) drop-shadow(0 0 6px #ffb347); opacity: 1; }
  82%, 90% { transform: scale(0); opacity: 0; }
  98%, 100% { transform: none; filter: none; opacity: 1; }
}
@keyframes lh-xd-match {
  0%, 12% { transform: none; filter: none; opacity: 1; }
  22%, 28% { transform: scale(1.14); filter: brightness(1.35) drop-shadow(0 0 5px #ffd08a); opacity: 1; }
  36%, 88% { transform: scale(0); opacity: 0; }
  96%, 100% { transform: none; filter: none; opacity: 1; }
}
@keyframes lh-xd-special {
  0%, 34% { transform: scale(0.3); opacity: 0; }
  42% { transform: scale(1.25); opacity: 1; }
  48%, 56% { transform: none; opacity: 1; filter: none; }
  62% { transform: scale(1.2); opacity: 1; filter: brightness(1.5) drop-shadow(0 0 8px #ffd08a); }
  70%, 100% { transform: scale(0); opacity: 0; }
}
@keyframes lh-xd-reach {
  0%, 58% { transform: none; filter: none; opacity: 1; }
  64% { transform: scale(1.14); filter: brightness(1.45) drop-shadow(0 0 6px #ffb347); opacity: 1; }
  72%, 88% { transform: scale(0); opacity: 0; }
  96%, 100% { transform: none; filter: none; opacity: 1; }
}
@keyframes lh-xd-hit {
  0%, 12%, 40%, 100% { transform: none; filter: none; }
  22%, 28% { transform: scale(1.1); filter: brightness(1.35) drop-shadow(0 0 5px #ffd08a); }
}
@keyframes lh-xd-slag {
  0%, 26% { transform: none; opacity: 1; }
  30% { transform: rotate(-6deg) scale(1.04); opacity: 1; }
  33% { transform: rotate(6deg); opacity: 1; }
  40%, 88% { transform: scale(1.35); opacity: 0; }
  96%, 100% { transform: none; opacity: 1; }
}
@keyframes lh-xd-crate {
  0%, 36% { transform: none; opacity: 0; }
  44% { transform: translateY(-10%); opacity: 1; }
  72%, 100% { transform: translateY(-80%); opacity: 0; }
}
@keyframes lh-xd-plateoff {
  0%, 30% { transform: none; opacity: 1; }
  36% { transform: translateY(8%) rotate(8deg); opacity: 1; }
  50%, 88% { transform: translateY(80%) rotate(34deg); opacity: 0; }
  96%, 100% { transform: none; opacity: 1; }
}
@keyframes lh-xd-slam {
  0%, 46% { transform: translateY(-70%) scale(1.4); opacity: 0; }
  54% { transform: none; opacity: 1; }
  57% { transform: scale(0.94); }
  60%, 88% { transform: none; opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes lh-xd-creep {
  0%, 8% { transform: scale(0.2); opacity: 0; }
  20%, 88% { transform: none; opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes lh-xd-mop {
  0%, 30% { transform: none; opacity: 1; }
  40%, 88% { transform: scale(1.35); opacity: 0; }
  96%, 100% { transform: none; opacity: 1; }
}
@keyframes lh-xd-warn {
  0%, 8% { opacity: 0; }
  14%, 24%, 34%, 44% { opacity: 1; }
  19%, 29%, 39% { opacity: 0.45; }
  52%, 100% { opacity: 0; }
}

/* Demos for the chapter 2-4 gizmos. Rust: the match scrapes the crust off, then it creeps back. */
.is-ru .lh-xd__p { animation-name: lh-xd-hit; }
.lh-xd__rust { -webkit-mask: radial-gradient(circle, transparent 0 38%, #000 43%); mask: radial-gradient(circle, transparent 0 38%, #000 43%); animation-name: lh-xd-rust; }
.lh-xd__rust .lh-gz { border-radius: 16%; object-fit: cover; }
@keyframes lh-xd-rust {
  0%, 26% { transform: none; opacity: 1; filter: none; }
  30% { transform: rotate(-5deg) scale(1.05); opacity: 1; }
  42%, 58% { transform: translateY(40%) rotate(20deg) scale(0.7); opacity: 0; }
  60% { transform: scale(1.5); opacity: 0; filter: sepia(1) brightness(1.6); }
  80%, 100% { transform: none; opacity: 1; filter: none; }
}
/* Portals: the exit cell's part is cleared, the part on the in ring drops through and comes out of
   the exit ring, the parts above it drop a cell and a new one comes in behind them. */
.lh-xd__c > .lh-xd__ring { inset: auto 18% auto 18%; aspect-ratio: 1; transform: scaleY(0.5); border-radius: 50%; box-shadow: 0 0 0 2px #3fd6e8, 0 0 8px #3fd6e8; z-index: 1; }
.lh-xd__c > .lh-xd__ring--in { bottom: -30%; }
.lh-xd__c > .lh-xd__ring--out { top: -30%; }
.lh-xd__ring .lh-gz { border-radius: 50%; object-fit: cover; }
.lh-xd__arrive, .lh-xd__new { opacity: 0; animation: var(--xd) ease-in-out infinite both; }
.is-po .lh-xd__p { animation-name: lh-xd-match; }
.is-po .lh-xd__arrive { animation-name: lh-xd-arrive; }
.is-pi .lh-xd__p { animation-name: lh-xd-sink; }
.is-pd .lh-xd__p, .is-pe .lh-xd__p { animation-name: lh-xd-dropone; }
.is-pe .lh-xd__new { animation-name: lh-xd-newpart; }
@keyframes lh-xd-sink {
  0%, 34% { transform: none; opacity: 1; }
  44%, 90% { transform: translateY(45%) scale(0.1); opacity: 0; }
  98%, 100% { transform: none; opacity: 1; }
}
@keyframes lh-xd-arrive {
  0%, 44% { transform: translateY(-45%) scale(0.1); opacity: 0; }
  54%, 88% { transform: none; opacity: 1; }
  96%, 100% { transform: none; opacity: 0; }
}
@keyframes lh-xd-dropone {
  0%, 46% { transform: none; opacity: 1; }
  56%, 88% { transform: translateY(108.7%); opacity: 1; }
  92% { transform: translateY(108.7%); opacity: 0; }
  93% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes lh-xd-newpart {
  0%, 54% { transform: scale(0.3); opacity: 0; }
  64%, 88% { transform: none; opacity: 1; }
  94%, 100% { transform: none; opacity: 0; }
}
.lh-xd__link { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.lh-xd__link path { fill: none; stroke: #3fd6e8; stroke-width: 0.07; stroke-linecap: round; stroke-dasharray: 0.16 0.14; animation: lh-xd-link 1.2s linear infinite; filter: drop-shadow(0 0 0.04px #0c2a30); }
.lh-xd__link path + path { stroke-dasharray: none; animation: none; }
@keyframes lh-xd-link { to { stroke-dashoffset: -0.6; } }
.lh-explain.is-calm .lh-xd__link path { animation-duration: 4s; }
/* Drift: the row slides one step along its belt; the end part wraps round to the start. */
.lh-xd__belt {
  position: absolute; left: 0; right: 0; top: calc(var(--r) * 100% / var(--h)); height: calc(100% / var(--h));
  overflow: hidden; border-block: 2px solid #5b4a33; background: linear-gradient(180deg, #8b8f86, #a3a69b 30%, #9a9d92 70%, #7b7e76);
}
.lh-xd__tread { position: absolute; inset: 0 -40px; background: repeating-linear-gradient(90deg, rgba(40, 36, 30, 0.5) 0 3px, transparent 3px 20px); animation: lh-belt-run 2.4s linear infinite; }
.lh-xd__belt i {
  position: absolute; top: 50%; left: calc(var(--k) * 100% / var(--w)); width: 9%; max-width: 12px; aspect-ratio: 0.62; z-index: 2;
  transform: translate(-50%, -50%); background: #ffb347; clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}
.is-dt .lh-xd__p { animation-name: lh-xd-slide; }
.is-dw .lh-xd__p { animation-name: lh-xd-wrap; }
@keyframes lh-xd-slide {
  0%, 30% { transform: none; opacity: 1; }
  44%, 88% { transform: translateX(108.7%); opacity: 1; }
  93% { transform: translateX(108.7%); opacity: 0; }
  94% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes lh-xd-wrap {
  0%, 30% { transform: none; opacity: 1; }
  37% { transform: translateX(60%); opacity: 0; }
  38% { transform: translateX(-494%); opacity: 0; }
  44%, 88% { transform: translateX(-434.8%); opacity: 1; }
  93% { transform: translateX(-434.8%); opacity: 0; }
  94% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
/* The dark: fog over the board but the bottom row; the match there lights the row above it. */
.lh-xd__c > .lh-xd__fog { inset: -1px; z-index: 1; background: rgba(8, 12, 19, 0.97); box-shadow: 0 0 8px 4px rgba(8, 12, 19, 0.8); animation: var(--xd) ease-in-out infinite both; }
.is-dl .lh-xd__fog { animation-name: lh-xd-lift; }
@keyframes lh-xd-lift {
  0%, 36% { transform: none; opacity: 1; filter: none; }
  50%, 88% { transform: translateY(-12%) scale(1.3); opacity: 0; filter: blur(4px); }
  96%, 100% { transform: none; opacity: 1; }
}
.lh-explain.is-calm .lh-xd__tread { animation-duration: 12s; }

/* ---------- Help: Power-ups (replays every explainer) ---------- */
.lh-helpbtn {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; order: 1;
  border-radius: 12px; color: var(--lh-amber-hot); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 179, 71, 0.3);
}
.lh-helpbtn:hover { background: rgba(255, 179, 71, 0.16); }
.lh-top > .lh-stats { order: 2; }
@media (max-width: 959px) { .lh-helpbtn { width: 34px; height: 34px; border-radius: 10px; } }
.lh-help {
  position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; grid-template-rows: minmax(0, 1fr); /* a long list scrolls inside the card */
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(3, 6, 16, 0.6);
}
.lh-help__card {
  width: min(36rem, 100%); max-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-auto-rows: auto; gap: 10px;
  padding: 18px; background: var(--lh-panel); border: 1px solid rgba(255, 179, 71, 0.3); border-radius: var(--lh-r);
  box-shadow: 0 30px 70px -20px #000;
}
.lh-help__title { margin: 0; font-family: var(--font-display); font-size: var(--step-2, 1.5rem); color: var(--lh-amber); }
.lh-help__title span { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lh-teal-hot); font-family: var(--font-body); }
.lh-help__list { margin: 0; padding: 0; list-style: none; overflow: auto; display: grid; gap: 6px; }
.lh-help__item {
  width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 6px 10px; border-radius: 10px; cursor: pointer; text-align: left; color: var(--lh-ink);
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
}
.lh-help__item:hover { background: rgba(255, 179, 71, 0.12); }
.lh-help__icon { width: 44px; height: 44px; position: relative; border-radius: 10px; background: #a9bcb8; }
.lh-help__icon > * { position: absolute; inset: 6%; width: 88%; height: 88%; }
.lh-help__icon .lh-reach { inset: 6%; }
/* The meltdown's and supernova's wide markers would cover the name beside the icon: drawn smaller here. */
.lh-help__icon .lh-reach--melt, .lh-help__icon .lh-reach--nova { inset: 22%; width: 56%; height: 56%; }
.lh-help__icon:has(.lh-snova) { overflow: hidden; }
.lh-help__name { display: block; font-family: var(--font-display); font-weight: 600; color: var(--lh-amber-hot); }
.lh-help__line { display: block; font-size: 0.86rem; color: var(--lh-ink-dim); line-height: 1.3; }
.lh-help__play { font-size: 0.8rem; color: var(--lh-teal-hot); white-space: nowrap; }
.lh-help__close { justify-self: end; }
@media (max-width: 560px) { .lh-help__line { display: none; } .lh-help__card { padding: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .lh-rx__wonwith.is-on { animation-name: lh-explain-in; animation-duration: 260ms; }
  .lh-explain, .lh-explain__card { animation-duration: 120ms; }
  .lh-explain__card { animation-name: lh-explain-in; }
}

/* ======================================================================
   Chapter advance: "Sector cleared -> next sector", once, over the chart
   ====================================================================== */
.lh-sector {
  position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); width: min(30rem, calc(100% - 24px));
  padding: 20px 22px 18px; border-radius: var(--lh-r); text-align: center;
  background: linear-gradient(180deg, rgba(20, 30, 46, 0.95), rgba(9, 14, 26, 0.97));
  border: 1px solid rgba(138, 238, 221, 0.35); box-shadow: 0 30px 60px -24px #000, 0 0 60px -18px rgba(138, 238, 221, 0.7);
  animation: lh-sector-in 700ms var(--lh-ease) backwards;
}
.lh-sector__kicker { margin: 0 0 4px; font-family: var(--lh-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lh-teal-hot); }
.lh-sector__title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.8rem); color: var(--lh-amber); outline: none; }
.lh-sector__arrow { display: inline-block; animation: lh-sector-arrow 1.6s ease-in-out infinite; }
.lh-sector__text { margin: 0 auto 14px; color: var(--lh-ink); max-width: 24rem; }
.lh-sector .lh-btn { min-width: 12rem; }
@keyframes lh-sector-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(0.96); } }
@keyframes lh-sector-arrow { 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
  .lh-sector { animation-name: lh-explain-in; animation-duration: 260ms; }
  .lh-sector__arrow { animation-duration: 3.2s; }
}

/* ======================================================================================
   Store and Hangar (spec 03-economy-store): a trading-post counter and the Marigold's bay.
   Plain prices on painted tin; a special is a chalked-up price tag, struck list price beside it.
   One screen: the page never scrolls; on phones the store's two sections are tabs and a long
   list scrolls inside its own panel.
   ====================================================================================== */
.lh-shopscreen { display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(8px, 1.6vw, 24px); }
.lh-shop {
  position: relative; min-height: 0; min-width: 0; width: min(78rem, 100%); justify-self: center;
  display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
.lh-shop__head {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 8px 10px 8px 12px; border-radius: var(--lh-r);
  background: linear-gradient(180deg, rgba(58, 34, 14, 0.82), rgba(26, 18, 12, 0.88));
  border: 1px solid rgba(255, 179, 71, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.12), 0 16px 34px -24px #000;
}
.lh-shop__sign {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--lh-amber-hot);
  background: radial-gradient(circle at 50% 35%, #4a3216, #1a1108); box-shadow: inset 0 0 0 2px rgba(255, 179, 71, 0.35);
}
.lh-shop__sign .lh-ico { width: 28px; height: 28px; filter: drop-shadow(0 0 6px rgba(255, 170, 80, 0.5)); }
.lh-shop__titles { min-width: 0; margin-right: auto; }
.lh-shop__kicker { margin: 0; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lh-teal-hot); }
.lh-shop__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.05; color: var(--lh-amber); }
.lh-shop__title:focus, .lh-shop__title:focus-visible { outline: none; box-shadow: none; }
.lh-shop__wallet {
  margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 99px; white-space: nowrap;
  background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 211, 107, 0.3); color: var(--lh-ink);
}
.lh-shop__wallet b { font-family: var(--font-display); font-size: 1.1rem; color: #ffd36b; font-variant-numeric: tabular-nums; }
.lh-shop__wallet--credits b { color: var(--lh-teal-hot); }
.lh-shop__walleticon .lh-ico { width: 22px; height: 22px; display: block; }
.lh-shop__wallet.is-up b { animation: lh-bump 600ms var(--lh-ease); }
.lh-shop__close { min-height: 44px; padding: 0 14px; }
.lh-shop__close .lh-ico { width: 18px; height: 18px; }

/* The test-mode banner: hazard-striped, unmissable, never a modal. */
.lh-shop__test {
  margin: 0; padding: 6px 12px; border-radius: 10px; text-align: center; font-size: 0.9rem; font-weight: 600; color: #fff3d6;
  background: repeating-linear-gradient(135deg, rgba(232, 112, 42, 0.92) 0 14px, rgba(150, 60, 18, 0.92) 14px 28px);
  border: 1px solid #ffb347; text-shadow: 0 1px 0 #3a1406;
}
.lh-shop__test b { letter-spacing: 0.14em; }

.lh-shop__tabs { display: none; }
.lh-shop__body { min-height: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.lh-shop__panel { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 179, 71, 0.35) transparent; }
.lh-shop__sub { margin: -6px 0 2px; font-size: 0.8rem; color: var(--lh-ink-dim); }
.lh-shop__empty { list-style: none; padding: 14px; border-radius: 12px; color: var(--lh-ink-dim); border: 1px dashed rgba(138, 238, 221, 0.22); grid-column: 1 / -1; }
.lh-shop p { max-width: none; }
/* The status line sits on its own dark plate, so it reads on any backdrop (the rock, the nebula). */
.lh-shop__note { margin: 0; min-height: 1.4em; justify-self: center; max-width: 100%; text-align: center; font-size: 0.92rem; color: var(--lh-ink); }
.lh-shop__note:not(:empty) { padding: 4px 14px; border-radius: 10px; background: rgba(10, 10, 16, 0.88); border: 1px solid rgba(255, 255, 255, 0.08); }
.lh-shop__note[data-tone='good'] { color: var(--lh-teal-hot); }
.lh-shop__note[data-tone='bad'] { color: #ffb1a1; }

/* Bar packs: crates on the counter. */
.lh-packs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lh-pack {
  position: relative; display: grid; gap: 8px; justify-items: center; text-align: center; align-content: start;
  padding: 16px 12px 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(64, 48, 30, 0.55), rgba(20, 22, 32, 0.75));
  border: 1px solid rgba(255, 196, 130, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.08);
}
.lh-pack.is-tagged { border-color: rgba(255, 196, 130, 0.5); box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.12), 0 0 26px -12px rgba(255, 170, 70, 0.7); }
.lh-pack__tag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 2px 10px; border-radius: 99px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #2a1606; background: linear-gradient(180deg, #ffd38a, #ffb347);
}
.lh-pack--starter .lh-pack__tag, .lh-pack--noads .lh-pack__tag { color: #062a26; background: linear-gradient(180deg, #b9fff2, #8aeedd); }
.lh-pack__pile { position: relative; width: 74px; height: 40px; display: flex; flex-wrap: wrap-reverse; justify-content: center; align-content: flex-start; gap: 2px; }
.lh-pack__pile i {
  width: 30px; height: 13px; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #ffe7a3, #ffc84a 55%, #b8780f);
  animation: lh-ingot 4.5s ease-in-out infinite;
}
.lh-pack__pile i:nth-child(2) { animation-delay: -1.1s; }
.lh-pack__pile i:nth-child(3) { animation-delay: -2.2s; }
.lh-pack__pile i:nth-child(4) { animation-delay: -3.3s; }
@keyframes lh-ingot { 0%, 80%, 100% { filter: none; } 88% { filter: brightness(1.35); } }
.lh-pack__noads {
  width: 40px !important; height: 40px !important; clip-path: none !important; border-radius: 50%; animation: none !important;
  background: radial-gradient(circle, transparent 52%, #8aeedd 54% 64%, transparent 66%), linear-gradient(135deg, transparent 46%, #8aeedd 47% 55%, transparent 56%) !important;
}
.lh-pack__text { display: grid; gap: 2px; justify-items: center; min-width: 0; }
.lh-pack__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--lh-amber-hot); }
.lh-pack__what { font-size: 0.88rem; color: var(--lh-ink-dim); line-height: 1.3; }
.lh-pack__what b { font-family: var(--font-display); font-size: 1.3rem; color: #ffd36b; }
.lh-pack__buy { width: 100%; min-height: 46px; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.lh-pack.is-owned .lh-pack__buy { color: var(--lh-teal-hot); background: rgba(63, 183, 168, 0.12); box-shadow: inset 0 0 0 1px rgba(138, 238, 221, 0.35); opacity: 1; filter: none; }
.lh-pack.is-owned .lh-pack__buy::after { display: none; }

/* Hauler's Club (Task 7): one wide card under the packs -- a hauler's guild plate, teal on brass. */
.lh-pack--club {
  grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; text-align: left; align-items: center; gap: 14px;
  padding: 14px 14px 12px; border-color: rgba(138, 238, 221, 0.4);
  background: linear-gradient(100deg, rgba(20, 58, 56, 0.6), rgba(20, 22, 32, 0.8) 60%);
}
.lh-pack--club.is-tagged { box-shadow: inset 0 1px 0 rgba(200, 255, 245, 0.1), 0 0 26px -14px rgba(63, 183, 168, 0.8); }
.lh-pack--club .lh-pack__tag { left: 30px; transform: none; color: #062a26; background: linear-gradient(180deg, #b9fff2, #8aeedd); }
.lh-pack--club .lh-pack__text { justify-items: start; gap: 4px; }
.lh-club__badge { width: 52px; height: 52px; }
.lh-club__badge i {
  width: 52px !important; height: 52px !important; border-radius: 50%; clip-path: none !important; animation: none !important;
  background: radial-gradient(circle at 50% 50%, #062a26 0 30%, transparent 31%), conic-gradient(from 0deg, #8aeedd, #ffd38a, #8aeedd, #ffd38a, #8aeedd) !important;
  box-shadow: 0 0 0 3px rgba(6, 42, 38, 0.9), 0 0 18px -4px rgba(138, 238, 221, 0.7);
  -webkit-mask: radial-gradient(circle, #000 0 70%, transparent 71%); mask: radial-gradient(circle, #000 0 70%, transparent 71%);
}
.lh-club__terms, .lh-club__status { font-size: 0.86rem; color: var(--lh-ink); line-height: 1.35; }
.lh-club__status { color: var(--lh-teal-hot); }
.lh-club__status:focus { outline: 2px solid var(--lh-teal-hot); outline-offset: 2px; border-radius: 4px; }
.lh-club__actions { display: flex; justify-content: flex-end; }
.lh-club__join { min-width: 9rem; }
.lh-club__per { font-size: 0.78em; font-weight: 600; margin-left: 1px; }
.lh-club__cancel, .lh-club__yes, .lh-club__keep { min-height: 44px; padding: 0 14px; white-space: nowrap; }
.lh-club__confirm { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* A special: the struck list price, the real % off and the true end time. */
.lh-price-was { color: rgba(58, 29, 6, 0.7); font-weight: 500; font-size: 0.85em; text-decoration-thickness: 2px; }
.lh-ware__buy .lh-price-was { color: var(--lh-ink-faint); }
.lh-sale { margin: 2px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; font-size: 0.78rem; }
.lh-sale__pct {
  padding: 1px 8px; border-radius: 6px; font-weight: 800; color: #fff3e8; background: #b8522c;
  box-shadow: inset 0 0 0 1px rgba(255, 196, 130, 0.45); transform: rotate(-2deg);
}
.lh-sale__ends { color: var(--lh-amber-hot); }
.lh-pack.is-sale { border-color: rgba(232, 112, 90, 0.55); }

/* What bars buy: a parts-counter list. */
.lh-wares { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lh-ware {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 10px 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.24); border: 1px solid rgba(255, 255, 255, 0.06);
}
.lh-ware.is-sale { border-color: rgba(232, 112, 90, 0.5); }
.lh-ware__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.lh-ware__icon .lh-ico { width: 28px; height: 28px; }
.lh-ware__text { display: grid; gap: 2px; min-width: 0; }
.lh-ware__name { font-family: var(--font-display); font-weight: 600; color: var(--lh-ink); }
.lh-ware__what { font-size: 0.82rem; color: var(--lh-ink-dim); line-height: 1.3; }
.lh-ware .lh-sale { justify-content: flex-start; }
.lh-ware__have { font-size: 0.8rem; color: var(--lh-teal-hot); font-variant-numeric: tabular-nums; }
.lh-ware__why, .lh-bay__why { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; color: var(--lh-ink-dim); font-style: italic; }
.lh-ware__why .lh-ico, .lh-bay__why .lh-ico { width: 14px; height: 14px; }
.lh-ware__buy { min-height: 44px; min-width: 6.2rem; padding: 0 12px; font-variant-numeric: tabular-nums; }
.lh-ware__buy .lh-ico { width: 20px; height: 20px; }
.lh-ware.is-locked .lh-ware__icon { filter: grayscale(0.8); opacity: 0.6; }

/* ---------- Hangar ---------- */
.lh-hangar { grid-template-rows: auto minmax(0, 1fr) auto; }
.lh-hangar__grid {
  min-height: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr); grid-template-rows: auto auto; align-content: start;
  grid-template-areas: 'hold tune rack' 'debt debt rack';
}
.lh-bay:nth-child(1) { grid-area: hold; }
.lh-bay:nth-child(2) { grid-area: tune; }
.lh-bay--rack { grid-area: rack; overflow-y: auto; }
.lh-bay--debt { grid-area: debt; }
.lh-bay > div { display: grid; gap: 10px; align-content: start; }
.lh-bay__now { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.lh-bay__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--lh-amber); background: rgba(255, 179, 71, 0.1); }
.lh-bay__icon .lh-ico { width: 24px; height: 24px; }
.lh-bay__label { display: block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lh-ink-faint); }
.lh-bay__value { font-family: var(--font-display); font-size: 1.35rem; color: var(--lh-ink); }
.lh-bay__value--debt { color: var(--lh-red); }
.lh-pips { display: inline-flex; gap: 4px; }
.lh-pips i { width: 12px; height: 18px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.lh-pips i.is-on { background: linear-gradient(180deg, #8aeedd, #2f8f86); box-shadow: 0 0 8px rgba(63, 183, 168, 0.6); }
.lh-bay__next { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 179, 71, 0.06); border: 1px dashed rgba(255, 179, 71, 0.28); }
.lh-bay__next p { margin: 0; }
.lh-bay__nextname { font-family: var(--font-display); font-weight: 600; color: var(--lh-amber-hot); }
.lh-bay__effect { font-size: 0.88rem; color: var(--lh-ink-dim); }
.lh-bay__buy { margin-top: 4px; min-height: 46px; font-variant-numeric: tabular-nums; }
.lh-bay__buy .lh-ico { width: 20px; height: 20px; }
.lh-bay__max { margin: 0; color: var(--lh-teal-hot); font-size: 0.9rem; }
.lh-rackrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lh-rackrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.24); border: 1px solid rgba(255, 255, 255, 0.06);
}
.lh-rackrow__icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
}
.lh-rackrow__icon .lh-ico { width: 28px; height: 28px; }
.lh-rackrow__text { display: grid; gap: 2px; min-width: 0; }
.lh-rackrow__name { font-family: var(--font-display); font-weight: 600; }
.lh-rackrow__n { margin-left: 4px; color: var(--lh-amber-hot); font-variant-numeric: tabular-nums; }
.lh-rackrow__what { font-size: 0.8rem; color: var(--lh-ink-dim); line-height: 1.3; }
.lh-rackrow__buy { min-height: 44px; padding: 0 12px; font-variant-numeric: tabular-nums; }
.lh-rackrow__buy .lh-ico { width: 18px; height: 18px; }
.lh-rackrow.is-locked .lh-rackrow__icon { filter: grayscale(0.7); opacity: 0.7; }
.lh-debt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lh-debt__step { min-width: 44px; min-height: 44px; padding: 0; font-size: 1.3rem; }
.lh-debt__amt { display: inline-flex; align-items: center; gap: 5px; min-width: 6.5rem; justify-content: center; font-family: var(--font-display); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.lh-debt__amt .lh-ico { width: 20px; height: 20px; }
.lh-debt__max { min-height: 44px; padding: 0 12px; font-size: 0.9rem; }
.lh-bay--debt > div { grid-template-columns: minmax(0, 1fr); }

/* Phones: the store's sections become tabs; the Hangar's bays stack in one scrolling column. */
@media (max-width: 959px) {
  .lh-shopscreen { padding: 8px 10px 10px; }
  .lh-shop { gap: 8px; }
  .lh-shop__head { gap: 8px; padding: 6px 6px 6px 8px; }
  .lh-shop__sign { width: 36px; height: 36px; }
  .lh-shop__sign .lh-ico { width: 22px; height: 22px; }
  .lh-shop__kicker { display: none; }
  .lh-shop__wallet { padding: 4px 10px 4px 6px; }
  .lh-shop__close { min-height: 40px; padding: 0 10px; }
  .lh-shop__close span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lh-shop__test { padding: 4px 8px; font-size: 0.8rem; }
  .lh-shop__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .lh-shop__tab {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 10px; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; color: var(--lh-ink-dim);
    background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .lh-shop__tab .lh-ico { width: 18px; height: 18px; }
  .lh-shop__tab[aria-selected='true'] { color: #2a1606; background: linear-gradient(180deg, #ffd38a, #ffb347); border-color: transparent; }
  .lh-shop__body { grid-template-columns: minmax(0, 1fr); }
  .lh-shopscreen[data-tab='packs'] [data-panel='items'], .lh-shopscreen[data-tab='items'] [data-panel='packs'] { display: none; }
  .lh-shop__panel { padding: 14px 10px 10px; gap: 8px; }
  .lh-shop__panel > .lh-panel__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lh-shop__sub { margin: 0; font-size: 0.74rem; }
  .lh-packs { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lh-pack {
    grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; text-align: left; align-items: center;
    gap: 10px; padding: 8px 8px 8px 10px; border-radius: 12px;
  }
  .lh-packs { padding-top: 6px; gap: 10px; }
  .lh-pack__tag { top: -8px; left: 62px; transform: none; font-size: 0.56rem; padding: 1px 7px; }
  .lh-pack__pile { width: 44px; height: 30px; }
  .lh-pack__pile i { width: 19px; height: 9px; }
  .lh-pack__noads { width: 28px !important; height: 28px !important; }
  .lh-pack__text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  .lh-pack__text .lh-sale { flex-basis: 100%; }
  .lh-pack__name { font-size: 1rem; }
  .lh-pack__what { font-size: 0.8rem; }
  .lh-pack__what b { font-size: 1.05rem; }
  .lh-pack__buy { width: auto; min-width: 5.4rem; min-height: 44px; padding: 0 10px; font-size: 1rem; }
  .lh-pack--club { grid-template-columns: auto minmax(0, 1fr); padding: 12px 10px 10px; gap: 6px 10px; }
  .lh-pack--club .lh-pack__tag { left: 62px; }
  .lh-pack--club .lh-pack__text { display: grid; }
  .lh-club__badge { width: 44px; height: 44px; align-self: start; }
  .lh-club__badge i { width: 40px !important; height: 40px !important; }
  .lh-club__actions { grid-column: 1 / -1; justify-content: stretch; }
  .lh-club__actions > * { flex: 1; }
  .lh-club__join { min-width: 0; }
  .lh-club__terms, .lh-club__status { font-size: 0.8rem; }
  .lh-sale { justify-content: flex-start; font-size: 0.72rem; gap: 2px 6px; }
  .lh-ware { gap: 8px; padding: 8px; }
  .lh-ware__icon { width: 34px; height: 34px; }
  .lh-ware__icon .lh-ico { width: 24px; height: 24px; }
  .lh-ware__what { font-size: 0.76rem; }
  .lh-ware__buy { min-width: 4.6rem; padding: 0 8px; }

  .lh-hangar__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: max-content; grid-template-areas: none; overflow-y: auto; gap: 8px; align-content: start; }
  .lh-hangar__grid > .lh-bay { grid-area: auto; overflow: visible; padding: 14px 12px 12px; gap: 8px; }
  .lh-bay > div { gap: 8px; }
  .lh-bay__next { padding: 8px 10px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
  .lh-bay__next .lh-bay__buy { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0 12px; }
  .lh-bay__value { font-size: 1.15rem; }
}
@media (max-width: 959px) and (max-height: 700px) {
  .lh-shop__sub { display: none; }
}
@media (min-width: 960px) and (max-height: 860px) {
  .lh-packs { gap: 10px; }
  .lh-pack { padding: 14px 10px 10px; gap: 6px; }
  .lh-pack__pile { height: 30px; }
  .lh-wares { gap: 6px; }
  .lh-ware { padding: 7px 10px; }
}

/* Phones: five stats once the account holds bars -- each takes the room its number needs. */
@media (max-width: 959px) {
  .lh-stat { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 420px) {
  .lh-stats { gap: 4px; }
  .lh-stat { padding: 4px 5px 4px 4px; gap: 3px; }
  .lh-stat__icon, .lh-stat__icon .lh-ico { width: 17px; height: 17px; }
  .lh-stat__value { font-size: 0.88rem; }
}

/* ---------- Hub: the Store button and the Open lanes "free" chip ---------- */
.lh-btn--store { border-color: rgba(255, 179, 71, 0.4); color: var(--lh-amber-hot); }
.lh-go__cost.is-free { color: #062a26; background: linear-gradient(180deg, #b9fff2, #8aeedd); font-weight: 700; }
.lh-go__cost.is-free .lh-ico { width: 16px; height: 16px; }
.lh-stat--fuel.is-lanes { border-color: rgba(138, 238, 221, 0.5); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 16px -4px rgba(63, 183, 168, 0.7); }
.lh-stat--fuel.is-lanes .lh-stat__sub { color: var(--lh-teal-hot); font-weight: 700; }
.lh-stat__lanes, .lh-stat__refill { display: block; }
.lh-stat__laneicon { display: none; }
/* Phones (review I-2): while Open lanes run, the fuel tile shows the lanes mark and the timer at 11px or
   more -- no words, no refill line under it -- so all five stats stay on a 360 screen. */
@media (max-width: 959px) {
  .lh-stat--fuel.is-lanes .lh-stat__sub { font-size: 0.6875rem; margin-top: 2px; }
  .lh-stat--fuel.is-lanes .lh-stat__refill { display: none; }
  .lh-stat__lanes { display: inline-flex; align-items: center; gap: 2px; }
  .lh-stat__laneicon { display: inline-grid; }
  .lh-stat__laneicon .lh-ico { width: 11px; height: 11px; }
  .lh-stat__laneword { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.lh-stat--fuel.is-lanes .lh-stat__refill { color: var(--lh-amber-hot); font-weight: 400; }
.lh-stat--fuel.is-lanes .lh-gauge i { background: linear-gradient(90deg, #2f8f86, #8aeedd); box-shadow: 0 0 8px rgba(63, 183, 168, 0.8); }
.lh-help__booster { display: grid; place-items: center; background: #23303a; border-radius: 10px; }
.lh-help__booster .lh-ico { width: 30px; height: 30px; position: static; }

/* ---------- Reactor: the booster rack, Spanner aim, the continue offer ---------- */
.lh-rx__tune { grid-area: dial; align-self: end; justify-self: center; margin: 0; font-size: max(0.6875rem, 11px); color: var(--lh-teal-hot); white-space: nowrap; transform: translateY(100%); }
.lh-rack { display: flex; gap: 6px; justify-content: center; }
.lh-rack__pre { position: relative; display: flex; }
.lh-rack__b {
  position: relative; display: grid; grid-template-columns: auto auto; grid-template-areas: 'icon n' 'name name';
  align-items: center; justify-items: center; column-gap: 2px; min-width: 52px; min-height: 52px; padding: 4px 6px; border-radius: 12px;
  font: inherit; color: var(--lh-ink); cursor: pointer;
  background: linear-gradient(180deg, #2a3650, #1a2338); border: 1px solid rgba(138, 238, 221, 0.22); box-shadow: 0 3px 0 #0b1020;
  transition: transform 160ms var(--lh-ease), filter 160ms;
}
.lh-rack__b:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
.lh-rack__b:disabled { cursor: not-allowed; opacity: 0.45; }
.lh-rack__icon { grid-area: icon; }
.lh-rack__icon .lh-ico { width: 26px; height: 26px; display: block; }
.lh-rack__n { grid-area: n; font-family: var(--font-display); font-size: 0.95rem; color: var(--lh-amber-hot); font-variant-numeric: tabular-nums; }
.lh-rack__n::before { content: '×'; font-size: 0.8em; opacity: 0.7; }
.lh-rack__name { grid-area: name; font-size: max(0.6875rem, 11px); letter-spacing: 0.02em; text-transform: uppercase; color: var(--lh-ink-dim); white-space: nowrap; }
.lh-rack__b[aria-pressed='true'] { background: linear-gradient(180deg, #ffd38a, #ffb347); color: #2a1606; border-color: transparent; box-shadow: 0 0 18px rgba(255, 179, 71, 0.7); }
.lh-rack__b[aria-pressed='true'] .lh-rack__name, .lh-rack__b[aria-pressed='true'] .lh-rack__n { color: #2a1606; }
.lh-rack__b.is-ready::after {
  content: ''; position: absolute; inset: -3px; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 138, 61, 0.8), 0 0 16px rgba(255, 138, 61, 0.7); opacity: 0;
  animation: lh-glow-pulse 2.2s ease-in-out infinite;
}
.lh-rack__b.is-passive { cursor: default; box-shadow: none; background: rgba(0, 0, 0, 0.25); border-style: dashed; }
.lh-rack__menu {
  position: absolute; z-index: 9; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 13rem;
  display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: #141b2c; border: 1px solid var(--lh-edge); box-shadow: 0 20px 40px -14px #000;
}
.lh-rack__menuhead { margin: 0; font-size: 0.78rem; color: var(--lh-ink-dim); }
.lh-rack__menu .lh-btn { min-height: 44px; font-size: 0.92rem; }
.lh-board.is-aiming .b-cell { cursor: crosshair; }
.lh-board .b-cell.is-aim::after {
  content: ''; position: absolute; inset: 6%; z-index: 3; border-radius: 50%; pointer-events: none;
  border: 3px solid #ffd08a; box-shadow: 0 0 0 2px rgba(42, 22, 6, 0.8), 0 0 16px rgba(255, 179, 71, 0.9);
  background: radial-gradient(circle, transparent 38%, rgba(255, 179, 71, 0.25) 40%);
  animation: lh-aim 900ms ease-in-out infinite;
}
@keyframes lh-aim { 50% { transform: scale(0.88); } }
.lh-offer__b { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 10px; padding: 6px 14px; }
.lh-offer__b .lh-ico { grid-row: 1 / span 2; width: 26px; height: 26px; }
.lh-offer__have { font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; opacity: 0.85; }

@media (max-width: 959px) {
  .lh-rx__side { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'bolt comm leave' 'rack rack rack'; row-gap: 6px; }
  .lh-rx__bolt { grid-area: bolt; }
  .lh-rx__comm { grid-area: comm; }
  .lh-rx__leave { grid-area: leave; }
  .lh-rack { grid-area: rack; }
  .lh-rack__b { grid-template-columns: auto auto auto; grid-template-areas: 'icon n name'; column-gap: 5px; min-height: 40px; padding: 2px 10px; flex: 1 1 0; }
  .lh-rack__icon .lh-ico { width: 22px; height: 22px; }
  .lh-rack__pre { flex: 1 1 0; }
  .lh-rack__pre .lh-rack__b { width: 100%; }
  .lh-rx__tune { transform: none; font-size: max(0.6875rem, 11px); }
}
/* Narrow phones: the names stay (review M-9), tighter; the × goes. */
@media (max-width: 420px) {
  .lh-rack { gap: 4px; }
  .lh-rack__b { column-gap: 4px; padding: 2px 6px; }
  .lh-rack__name { font-size: max(0.6875rem, 11px); letter-spacing: 0; }
  .lh-rack__n::before { content: none; }
}
@media (max-width: 959px) and (max-height: 600px) {
  .lh-rack__b { min-height: 36px; }
  .lh-rack__name { display: none; }
}
@media (min-width: 960px) {
  .lh-rack { justify-self: stretch; }
  .lh-rack__b { flex: 1 1 0; }
  .lh-rx__tune { font-size: 0.72rem; }
}

/* ---------- Paid help (spec 06 section 6): fuel cell on empty, an empty rack slot buys 3, skip a jump ---------- */
/* Plain buttons, never primary; every line at 11px or more; the store's test-mode banner beside them. */
.lh-dry__refuel { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 10px; }
.lh-dry__cell { min-height: 54px; color: var(--lh-amber-hot); border-color: rgba(255, 179, 71, 0.45); }
.lh-dry__cell .lh-ico { width: 22px; height: 22px; flex: none; }
.lh-dry__cell[aria-busy='true'] [data-cell-label] { animation: lh-blink 0.9s ease-in-out infinite; }
.lh-dry__left { font-size: max(0.72rem, 11px); }
/* Short phones (360x640): the ad and the fuel cell share one row, BOLT shrinks, so the outcome line stays on screen. */
@media (max-height: 700px) {
  .lh-dry__bolt { width: clamp(84px, 15vh, 120px); }
  .lh-dry__refuel { grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); gap: 8px; }
  .lh-dry__refuel .lh-btn { padding-inline: 10px; gap: 6px; }
  .lh-card .lh-dry__need { margin-bottom: 6px; }
  .lh-card .lh-dry__note { margin-top: 6px; }
}
.lh-paid__test { padding: 3px 8px; font-size: max(0.75rem, 11px); border-radius: 8px; }
.lh-card .lh-paid__test { margin: 0; color: #fff3d6; }
.lh-rack { flex-wrap: wrap; }
.lh-rack__buy { border-style: dashed; border-color: rgba(255, 179, 71, 0.5); background: linear-gradient(180deg, #2c2a3a, #1d1c2c); grid-template-areas: 'icon price' 'name name'; }
.lh-rack__price { grid-area: price; font-size: max(0.6875rem, 11px); font-weight: 700; line-height: 1.1; color: var(--lh-amber-hot); text-align: left; }
.lh-rack__buy .lh-rack__name { font-size: max(0.6875rem, 11px); }
.lh-rack__buy[aria-busy='true'] .lh-rack__price { animation: lh-blink 0.9s ease-in-out infinite; }
.lh-rack__test { flex: 1 0 100%; text-align: center; }
.lh-vic__skip { display: grid; gap: 6px; }
.lh-vic__skip:empty { display: none; }
.lh-skip { color: var(--lh-amber-hot); border-color: rgba(255, 179, 71, 0.45); }
.lh-skip .lh-offer__have { font-size: max(0.75rem, 11px); }
.lh-skip[aria-busy='true'] > span:first-of-type { animation: lh-blink 0.9s ease-in-out infinite; }
.lh-vic__note { margin: 6px 0 0; font-size: max(0.82rem, 11px); color: var(--lh-amber-hot); }
.lh-vic__note:empty { display: none; }
.lh-vic__note:focus { outline: 2px solid var(--lh-amber-hot); outline-offset: 2px; border-radius: 4px; }
/* The skip on the chart's jump panel (review I-2): in the flight plan on wide screens, above the action row on phones. */
.lh-hubskip { display: grid; gap: 6px; margin-top: 8px; }
.lh-hubskip:empty { display: none; }
.lh-hubskip .lh-skip { width: 100%; }
.lh-hubskip--narrow { display: none; margin-top: 0; }
@media (max-width: 959px) {
  .lh-hubskip--narrow:not(:empty) { display: grid; }
  .lh-hubskip--narrow .lh-skip { min-height: 44px; padding-block: 4px; }
}
@media (max-width: 959px) {
  /* Below 960px the buy slot still says what it buys (review m-2): the name over the price, beside the icon. */
  .lh-rack__buy { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'icon name' 'icon price'; justify-items: start; row-gap: 0; }
  .lh-rack__price { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .lh-pack__pile i { animation-duration: 9s; }
  .lh-rack__b.is-ready::after { animation-duration: 4.4s; }
  .lh-board .b-cell.is-aim::after { animation-duration: 2.4s; }
  .lh-shop__wallet.is-up b { animation-duration: 200ms; }
}

/* ---------- Text pages: links on the chart and in Help (how to play, about, changelog, privacy, terms) ---------- */
.lh-hubfoot, .lh-help__pages { text-align: center; font-size: 0.8rem; color: var(--lh-ink-dim); line-height: 1.6; }
.lh-hubfoot a, .lh-help__pages a { color: var(--lh-ink); text-underline-offset: 3px; }
.lh-hubfoot a:hover, .lh-help__pages a:hover { color: var(--lh-amber-hot); }
.lh-help__id { margin: 0; font-size: 0.76rem; color: var(--lh-ink-dim); text-align: center; overflow-wrap: anywhere; }
.lh-help__id code { font-family: var(--lh-mono); color: var(--lh-ink); }
@media (max-width: 959px) { .lh-hubfoot { font-size: 0.72rem; line-height: 1.3; } }