/* ============================================================
   Ezoterium — Wróżba z astrologii
   Wspólne style wszystkich etapów wróżby (/wrozba/astrologia/).
   Scena jest ciemniejsza niż w tarocie — tarcza ma świecić sama.
   ============================================================ */

:root {
  --bg: #05040f;
  --ink: #f4eefe;
  --ink-soft: rgba(240, 235, 253, .92);
  --ink-mute: rgba(226, 220, 248, .76);
  --ink-faint: rgba(214, 208, 240, .58);
  --accent: #e8c478;
  --accent-rgb: 232, 196, 120;
  --accent-light: #f3e6c4;
  --accent-12: rgba(232, 196, 120, .12);
  --accent-24: rgba(232, 196, 120, .24);
  --accent-38: rgba(232, 196, 120, .38);
  --accent-60: rgba(232, 196, 120, .60);
  --hot: #fff6df;
  --light-rgb: 243, 230, 196;
  --serif-display: 'Cormorant Garamond', Georgia, serif;
  --serif-text: 'Manrope', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif-text);
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
}

h1, h2 { font-family: var(--serif-display); font-weight: 500; margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- animacje ---------- */
@keyframes tw        { 0%, 100% { opacity: .22; } 50% { opacity: 1; } }
@keyframes driftBg   { 0%, 100% { transform: translate(0, 0); }
                       50%      { transform: translate(1.2%, -1.2%); } }
@keyframes pulseGlow { 0%, 100% { opacity: .7; filter: brightness(1); }
                       50%      { opacity: 1;  filter: brightness(1.35); } }
@keyframes riseIn    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* jak riseIn, ale dla elementów wyśrodkowanych przez translate(-50%,-50%) */
@keyframes bloomIn   { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
                       to   { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ============================================================
   SCENA
   ============================================================ */

.scene {
  position: relative;
  display: flex;
  flex-direction: column;
  /* scena zajmuje dokładnie jeden ekran — tarcza dostaje resztę wysokości */
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  background: radial-gradient(130% 100% at 50% 46%,
    #17102f 0%, #0c0922 42%, #05040f 78%, #020208 100%);
}

/* mgławice powoli przepływają pod gwiazdami */
.scene__nebula {
  position: absolute;
  inset: -4%;
  pointer-events: none;
  filter: blur(16px);
  animation: driftBg 44s ease-in-out infinite;
  background:
    radial-gradient(ellipse 170px 75px at 16% 26%, rgba(150, 110, 220, .14), transparent 70%),
    radial-gradient(ellipse 150px 60px at 74% 20%, rgba(90, 130, 220, .12), transparent 70%),
    radial-gradient(ellipse 210px 85px at 58% 80%, rgba(200, 90, 170, .09), transparent 70%),
    radial-gradient(ellipse 260px 115px at 40% 46%, rgba(120, 90, 200, .07), transparent 70%);
}

.scene__sky { position: absolute; inset: 0; pointer-events: none; }

.star {
  position: absolute;
  left: var(--l); top: var(--t);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff;
  animation: tw var(--du) ease-in-out var(--d) infinite;
}

/* kanwa lecącego kosmosu — gwiazdy w ruchu, po wyborze daty gwiazdozbiory */
.scene__flight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scene__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background: radial-gradient(120% 120% at 50% 50%, transparent 46%, rgba(2, 2, 8, .72) 100%);
}

/* ============================================================
   GÓRNA BELKA
   ============================================================ */

.topbar {
  position: relative;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(12px, 2.4vh, 24px) clamp(16px, 4vw, 44px);
}

.topbar__back {
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--ink-mute);
  text-transform: uppercase;
  text-decoration: none;
  transition: color .3s ease;
}
.topbar__back:hover { color: var(--ink); }

/* belka z tytułem strony: tytuł dokładnie na środku, niezależnie
   od szerokości linku powrotu po lewej */
.topbar--heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.topbar--heading .topbar__back { justify-self: start; }
.topbar--heading > :last-child { justify-self: end; }

.topbar__heading {
  font-size: clamp(24px, 3.4vw, 36px);
  color: var(--ink);
  letter-spacing: .02em;
  text-align: center;
  text-shadow: 0 0 26px rgba(var(--accent-rgb), .28);
}

.topbar__mark {
  font-family: var(--serif-display);
  font-size: clamp(15px, 2vw, 19px);
  letter-spacing: .42em;
  text-indent: .42em;
  color: #efeaff;
}

.topbar__reset {
  border: 1px solid var(--accent-60);
  background: rgba(232, 196, 120, .08);
  color: var(--accent-light);
  font-family: var(--serif-text);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 22px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
  transition: background .3s ease, color .3s ease;
}
.topbar__reset:hover { background: rgba(232, 196, 120, .2); color: #fff; }
.topbar__reset--off { opacity: 0; pointer-events: none; }

/* ============================================================
   SCENA ETAPU
   ============================================================ */

.stage {
  position: relative;
  z-index: 70;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 clamp(14px, 4vw, 40px) clamp(10px, 2vh, 22px);
}

/* podtytuł — ten sam głos, co motto na stronie głównej */
.stage__sub {
  margin: 0 auto;
  max-width: 46ch;
  flex-shrink: 0;
  text-align: center;
  font-size: clamp(13px, 1.7vw, 16px);
  line-height: 1.55;
  letter-spacing: .1em;
  color: rgba(214, 205, 244, .62);
  animation: riseIn .6s ease both;
  transition: opacity .28s ease;
}
.stage__sub.is-swap { opacity: 0; }

.stage__title {
  margin: 10px 0 5px;
  font-size: clamp(24px, 3.6vw, 40px);
  color: var(--ink);
  letter-spacing: .01em;
}

.eyebrow {
  color: rgba(232, 196, 120, .72);
  font-size: 12.5px;
  letter-spacing: .42em;
  text-transform: uppercase;
}

/* ============================================================
   ETAP 1 — TARCZA DATY URODZENIA

   Tarcza jest kwadratem o boku --d; wszystkie promienie, grubości
   i stopnie pisma liczą się z tego jednego wymiaru. JS ustawia --d
   po zmierzeniu wolnego miejsca i nie dotyka niczego więcej.
   ============================================================ */

.stage__dial {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  /* tarcza siada przy dole pola — cały luz idzie na górę, pod wskazówkę */
  align-items: flex-end;
  justify-content: center;
  /* odlot na widza po kliknięciu przycisku w środku */
  transform-origin: 50% 45%;
  transition: transform .9s cubic-bezier(.5, 0, .75, .5), opacity .85s ease;
}

.stage__dial.is-flyby {
  transform: scale(3);
  opacity: 0;
  pointer-events: none;
}

/* własny display wygrywa z atrybutem hidden — chowamy wprost */
.stage__dial[hidden] { display: none; }

/* formularz spina tarczę, pole miejsca i odczyt w jedną kolumnę */
.stage__flow {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dial {
  --r-year:  calc(var(--d) * .442);
  --r-month: calc(var(--d) * .360);
  --r-day:   calc(var(--d) * .283);
  --r-hour:  calc(var(--d) * .212);
  --r-min:   calc(var(--d) * .145);
  --r-hub:   calc(var(--d) * .104);
  --band:    calc(var(--d) * .028);

  position: relative;
  width: var(--d, 0);
  height: var(--d, 0);
  flex: none;
  cursor: grab;
  touch-action: none;
  animation: riseIn .8s ease both;
}
.dial.is-dragging { cursor: grabbing; }

/* ---------- zbliżenie na wąskich ekranach ----------
   Tarcza rośnie ponad szerokość okna i pokazuje tylko górny wycinek:
   łuki wartości i środek z przyciskiem. Wejściowy najazd robi transform
   (klasa dial--intro znika chwilę po starcie). */

.stage__dial--zoom { overflow: hidden; }

.dial--zoom {
  position: absolute;
  left: 50%;
  top: 44px;                       /* miejsce na wskazówkę nad tarczą */
  transform: translateX(-50%);
  transform-origin: 50% 0;
  transition: transform 1.15s cubic-bezier(.45, 0, .25, 1);
  animation: none;
}

.dial--zoom.dial--intro { transform: translateX(-50%) scale(var(--intro-scale, .4)); }

.dial--snap { transition: none !important; }

/* ---------- podkład: obręcze i poświata środka ---------- */

.dial__plate {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), .13) 0, transparent calc(var(--r-hub) * 1.4)),
    radial-gradient(circle at 50% 50%,
      transparent calc(var(--r-min) - var(--band)),
      rgba(var(--accent-rgb), .099) calc(var(--r-min) - var(--band) + 1px),
      rgba(var(--accent-rgb), .026) var(--r-min),
      rgba(var(--accent-rgb), .099) calc(var(--r-min) + var(--band)),
      transparent calc(var(--r-min) + var(--band) + 1px)),
    radial-gradient(circle at 50% 50%,
      transparent calc(var(--r-hour) - var(--band)),
      rgba(var(--accent-rgb), .099) calc(var(--r-hour) - var(--band) + 1px),
      rgba(var(--accent-rgb), .026) var(--r-hour),
      rgba(var(--accent-rgb), .099) calc(var(--r-hour) + var(--band)),
      transparent calc(var(--r-hour) + var(--band) + 1px)),
    radial-gradient(circle at 50% 50%,
      transparent calc(var(--r-day) - var(--band)),
      rgba(var(--accent-rgb), .099) calc(var(--r-day) - var(--band) + 1px),
      rgba(var(--accent-rgb), .026) var(--r-day),
      rgba(var(--accent-rgb), .099) calc(var(--r-day) + var(--band)),
      transparent calc(var(--r-day) + var(--band) + 1px)),
    radial-gradient(circle at 50% 50%,
      transparent calc(var(--r-month) - var(--band)),
      rgba(var(--accent-rgb), .099) calc(var(--r-month) - var(--band) + 1px),
      rgba(var(--accent-rgb), .026) var(--r-month),
      rgba(var(--accent-rgb), .099) calc(var(--r-month) + var(--band)),
      transparent calc(var(--r-month) + var(--band) + 1px)),
    radial-gradient(circle at 50% 50%,
      transparent calc(var(--r-year) - var(--band)),
      rgba(var(--accent-rgb), .126) calc(var(--r-year) - var(--band) + 1px),
      rgba(var(--accent-rgb), .034) var(--r-year),
      rgba(var(--accent-rgb), .126) calc(var(--r-year) + var(--band)),
      transparent calc(var(--r-year) + var(--band) + 1px)),
    radial-gradient(circle at 50% 42%, rgba(28, 22, 52, .5) 0, rgba(10, 8, 26, .46) 55%, transparent 78%);
}

/* ---------- kreski dzielące pola ---------- */

.dial__div {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  /* kreska trafia między dwa sąsiednie pola, czyli o pół kroku od ich środków */
  background: repeating-conic-gradient(from calc(var(--step) / 2),
    rgba(var(--accent-rgb), .46) 0 .3deg, transparent .3deg var(--step));
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
}

.dial__div--year {
  --step: 15deg;
  --mask: radial-gradient(circle at 50% 50%,
    transparent calc(var(--r-year) - var(--band)),
    #000 calc(var(--r-year) - var(--band) + 1px),
    #000 calc(var(--r-year) + var(--band)),
    transparent calc(var(--r-year) + var(--band) + 1px));
}
.dial__div--month {
  --step: 30deg;
  --mask: radial-gradient(circle at 50% 50%,
    transparent calc(var(--r-month) - var(--band)),
    #000 calc(var(--r-month) - var(--band) + 1px),
    #000 calc(var(--r-month) + var(--band)),
    transparent calc(var(--r-month) + var(--band) + 1px));
}
/* krok pierścienia dni zależy od długości miesiąca — ustawia go JS */
.dial__div--day {
  --step: 11.613deg;
  --mask: radial-gradient(circle at 50% 50%,
    transparent calc(var(--r-day) - var(--band)),
    #000 calc(var(--r-day) - var(--band) + 1px),
    #000 calc(var(--r-day) + var(--band)),
    transparent calc(var(--r-day) + var(--band) + 1px));
}
.dial__div--hour {
  --step: 15deg;
  --mask: radial-gradient(circle at 50% 50%,
    transparent calc(var(--r-hour) - var(--band)),
    #000 calc(var(--r-hour) - var(--band) + 1px),
    #000 calc(var(--r-hour) + var(--band)),
    transparent calc(var(--r-hour) + var(--band) + 1px));
}
.dial__div--min {
  --step: 18deg;
  --mask: radial-gradient(circle at 50% 50%,
    transparent calc(var(--r-min) - var(--band)),
    #000 calc(var(--r-min) - var(--band) + 1px),
    #000 calc(var(--r-min) + var(--band)),
    transparent calc(var(--r-min) + var(--band) + 1px));
}

/* ---------- liczby na pierścieniach ---------- */

.dial__layer { position: absolute; inset: 0; pointer-events: none; }

.dial__num {
  position: absolute;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--serif-display);
  font-weight: 500;
  will-change: transform, opacity;
  text-shadow: 0 1px 2px rgba(2, 2, 9, .9), 0 0 8px rgba(2, 2, 9, .7);
}

.dial__num--year  { font-size: calc(var(--d) * .024); }
.dial__num--month { font-size: calc(var(--d) * .022); letter-spacing: .05em; }
.dial__num--day   { font-size: calc(var(--d) * .021); }
.dial__num--hour  { font-size: calc(var(--d) * .019); }
.dial__num--min   { font-size: calc(var(--d) * .018); }

/* ---------- środek: przycisk „Dalej" ---------- */

.dial__hub {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--r-hub) * 2);
  height: calc(var(--r-hub) * 2);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* zapala go JS po pierwszym obrocie pierścienia */
.dial__go {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--r-hub) * 1.5);
  height: calc(var(--r-hub) * 1.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--accent-60);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%,
    rgba(var(--accent-rgb), .22), rgba(16, 11, 40, .62) 78%);
  color: var(--accent-light);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 26px rgba(var(--accent-rgb), .35), inset 0 0 18px rgba(var(--accent-rgb), .12);
  animation:
    bloomIn .5s cubic-bezier(.2, .8, .2, 1) both,
    pulseGlow 2.2s ease-in-out .5s infinite;
  transition: box-shadow .3s ease, color .3s ease;
}
.dial__go:hover, .dial__go:focus-visible {
  color: #fff;
  box-shadow: 0 0 40px rgba(var(--accent-rgb), .6), inset 0 0 22px rgba(var(--accent-rgb), .2);
}
.dial__go[hidden] { display: none; }

.dial__go svg {
  width: 56%;
  height: 56%;
  /* strzałka celuje w prawo — cień prowadzi ją lekko do przodu */
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .5));
}

/* ---------- wskazówka zawieszona nad tarczą ---------- */

.dial__pointer {
  position: absolute;
  left: 50%;
  /* w całości powyżej zewnętrznej krawędzi pierścienia lat */
  bottom: calc(50% + var(--r-year) + var(--band) + 6px);
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dial__pointer::before {
  content: '';
  width: 11px; height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #cfe0ff 45%, #5a6cc0 100%);
  box-shadow: 0 0 14px 3px rgba(140, 160, 240, .7);
  animation: pulseGlow 3.4s ease-in-out infinite;
}

.dial__pointer::after {
  content: '';
  margin-top: 1px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 16px solid #cfe0ff;
  filter: drop-shadow(0 0 6px rgba(140, 160, 240, .6));
}

/* ============================================================
   ODCZYT NA DOLE STRONY
   ============================================================ */

.birth {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  animation: riseIn .7s ease both;
}

.readout { text-align: center; }

.readout__label {
  color: rgba(var(--accent-rgb), .6);
  font-size: 10px;
  letter-spacing: .42em;
  text-transform: uppercase;
}

.readout__date {
  margin-top: 3px;
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(15px, 2vw, 22px);
  letter-spacing: .02em;
  color: var(--ink);
  text-shadow: 0 0 22px rgba(var(--accent-rgb), .35);
  white-space: nowrap;
}

.birth__error {
  margin: 0;
  padding: 8px 18px;
  border: 1px solid rgba(212, 120, 120, .5);
  border-radius: 18px;
  background: rgba(90, 30, 40, .3);
  font-size: 13.5px;
  color: #f6d9d9;
}

/* przycisk zwykłej podstrony (np. powrót z etapu w przygotowaniu) */
.cta {
  border: 1px solid var(--accent);
  border-radius: 26px;
  padding: 12px 34px;
  background: rgba(232, 196, 120, .14);
  color: var(--accent-light);
  font-family: var(--serif-text);
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(var(--accent-rgb), .18);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.cta:hover {
  background: rgba(232, 196, 120, .28);
  color: #fff;
  box-shadow: 0 0 32px rgba(var(--accent-rgb), .38);
}

/* ============================================================
   ETAP 1½ — MIEJSCE NARODZIN

   Panel nadlatuje z głębi kosmosu w miejsce tarczy (animacja warpIn).
   Pole podpowiada miasta; lista wisi pod polem.
   ============================================================ */

@keyframes warpIn {
  from { opacity: 0; transform: scale(.05); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes nudge {
  0%, 100% { transform: none; }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

.place {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vh, 20px);
}
.place[hidden] { display: none; }
.place.is-arriving { animation: warpIn 1.05s cubic-bezier(.18, .7, .25, 1) both; }

/* odlot na widza po „Dalej" — w drodze do kosmogramu */
.place.is-flyby {
  transform: scale(3);
  opacity: 0;
  pointer-events: none;
  transition: transform .8s cubic-bezier(.5, 0, .75, .5), opacity .7s ease;
}

.place__label {
  color: rgba(232, 196, 120, .72);
  font-size: 12.5px;
  letter-spacing: .42em;
  text-transform: uppercase;
}

.place__combo {
  position: relative;
  width: min(460px, 100%);
}
.place__combo.is-missing { animation: nudge .22s ease 2; }
.place__combo.is-missing .place__input { border-color: rgba(212, 120, 120, .8); }

.place__input {
  display: block;
  width: 100%;
  padding: 13px 20px;
  border: 1px solid var(--accent-38);
  border-radius: 16px;
  background: rgba(10, 7, 26, .72);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-family: var(--serif-display);
  font-size: clamp(19px, 2.6vw, 26px);
  letter-spacing: .02em;
  text-align: center;
  box-shadow: 0 0 30px rgba(var(--accent-rgb), .12), inset 0 0 24px rgba(2, 2, 10, .5);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.place__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 34px rgba(var(--accent-rgb), .3), inset 0 0 24px rgba(2, 2, 10, .5);
}
.place__input::placeholder { color: var(--ink-faint); }

.place__list {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--accent-24);
  border-radius: 14px;
  background: rgba(12, 9, 30, .97);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.place__list[hidden] { display: none; }

.place__opt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.place__opt small {
  color: var(--ink-faint);
  font-size: 12.5px;
  letter-spacing: .05em;
}
.place__opt.is-active,
.place__opt:hover { background: var(--accent-12); color: var(--accent-light); }
.place__opt.is-active small,
.place__opt:hover small { color: var(--accent-60); }

.place__hint {
  margin: 0;
  max-width: 44ch;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--ink-faint);
  text-wrap: pretty;
}

.place__back {
  border: 0;
  padding: 4px 8px;
  background: none;
  color: var(--ink-mute);
  font-family: var(--serif-text);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s ease;
}
.place__back:hover { color: var(--accent-light); }

/* ============================================================
   ETAP 2 — KOSMOGRAM

   SVG przychodzi z serwera gotowy i poprawnie obrócony; klasy is-on
   dokłada astro-kosmogram.js w rytmie wejścia. Bez JS wszystko widać
   od razu (reguły .no-js niżej).
   ============================================================ */

.chartbox {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* miejsce na współrzędne wystające poza obręcz koła */
  padding: 18px 0 10px;
}

.chart {
  height: 100%;
  max-height: 690px;
  aspect-ratio: 1;
  animation: warpIn 1.15s cubic-bezier(.18, .7, .25, 1) both;
}

.chart > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (max-width: 700px) {
  .chart { height: auto; width: min(92vw, 100%); }
}

/* kreski rysujące się od środka (osie, wierzchołki domów) */
.chart__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s cubic-bezier(.5, 0, .15, 1);
  filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .3));
}
.chart__line.is-on { stroke-dashoffset: 0; }

.chart__fade {
  opacity: 0;
  transition: opacity .9s ease;
}
.chart__fade.is-on { opacity: 1; }

/* cięciwy aspektów — rysują się jak kreski, ale bez złotej poświaty */
.chart__asp {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s cubic-bezier(.5, 0, .2, 1), opacity .25s ease, stroke-width .25s ease;
}
.chart__asp.is-on { stroke-dashoffset: 0; }

.chart__planet {
  opacity: 0;
  transform: scale(.4);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .5s ease, transform .5s cubic-bezier(.34, 1.4, .5, 1);
}
.chart__planet.is-on { opacity: 1; transform: scale(1); }

/* bez JS koło ma być kompletne od pierwszej klatki */
.no-js .chart__line, .no-js .chart__asp { stroke-dashoffset: 0; }
.no-js .chart__fade { opacity: 1; }
.no-js .chart__planet { opacity: 1; transform: none; }

/* ---------- podpis pod kołem ---------- */

.chart__caption {
  flex-shrink: 0;
  text-align: center;
  animation: riseIn 1s ease .6s both;
}

.chart__when {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(17px, 2.4vw, 26px);
  letter-spacing: .02em;
  color: var(--ink);
  text-shadow: 0 0 22px rgba(var(--accent-rgb), .3);
}

.chart__where {
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.chart__note {
  margin: 8px auto 0;
  max-width: 52ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(232, 196, 120, .66);
  text-wrap: pretty;
}

.chart__edit {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color .3s ease;
}
.chart__edit:hover { color: var(--accent-light); }

/* ---------- powiększenie kosmogramu (astro-zoom.js) ---------- */

.chart { position: relative; }
html:not(.no-js) .chart { cursor: zoom-in; }

.chart__zoom {
  position: absolute;
  top: 0;
  right: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--accent-38);
  border-radius: 50%;
  background: rgba(10, 8, 26, .6);
  color: var(--accent-light);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.chart__zoom:hover { background: rgba(232, 196, 120, .2); border-color: var(--accent); color: #fff; }
.chart__zoom svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.no-js .chart__zoom { display: none; }

.zoomer {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: radial-gradient(120% 100% at 50% 45%, rgba(23, 16, 47, .96), rgba(3, 2, 10, .97));
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .25s ease;
  user-select: none;
  -webkit-user-select: none;
}
.zoomer.is-open { opacity: 1; }

/* pole rysunku — pasek przycisków ma pod nim własne miejsce */
.zoomer__stage {
  position: absolute;
  inset: 0 0 66px;
  touch-action: none;
  cursor: zoom-in;
}
.zoomer.is-zoomed .zoomer__stage { cursor: grab; }
.zoomer.is-dragging .zoomer__stage { cursor: grabbing; }

.zoomer__stage svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(.94);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.zoomer.is-open .zoomer__stage svg { transform: none; }

.zoomer__hint {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 140px);
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  pointer-events: none;
  transition: opacity .6s ease;
}
.zoomer.is-used .zoomer__hint { opacity: 0; }
.zoomer__hint-touch { display: none; }
@media (hover: none) {
  .zoomer__hint-mouse { display: none; }
  .zoomer__hint-touch { display: inline; }
}

.zoomer__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  padding: 0 0 3px;
  border: 1px solid var(--accent-38);
  border-radius: 50%;
  background: rgba(10, 8, 26, .7);
  color: var(--accent-light);
  font-family: var(--serif-display);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.zoomer__close:hover { background: rgba(232, 196, 120, .2); color: #fff; }

.zoomer__bar {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--accent-24);
  border-radius: 30px;
  background: rgba(10, 8, 26, .75);
}

.zoomer__btn {
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 21px;
  background: transparent;
  color: var(--accent-light);
  font-family: var(--serif-display);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.zoomer__btn:hover { background: rgba(232, 196, 120, .16); color: #fff; }

.zoomer__level {
  min-width: 74px;
  font-family: var(--serif-text);
  font-size: 13px;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

/* ---------- dymki przy planetach (astro-chart-tips.js) ---------- */

.has-tip { cursor: pointer; outline: none; }

/* wybrana planeta i jej aspekty zostają jasne, reszta przygasa */
svg.is-focus .chart__planet.is-on:not(.is-lit) { opacity: .28; }
svg.is-focus .chart__asp:not(.is-lit) { opacity: .1; }
svg.is-focus .chart__asp.is-lit { stroke-width: 3.2px; }

.charttip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 400;
  width: max-content;
  max-width: min(290px, calc(100vw - 16px));
  padding: 12px 15px 13px;
  border: 1px solid var(--accent-38);
  border-radius: 14px;
  background: rgba(12, 9, 30, .95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55), inset 0 0 30px rgba(var(--accent-rgb), .05);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.charttip.is-on { opacity: 1; }

.charttip__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--serif-display);
  font-size: 21px;
  font-weight: 500;
  color: var(--ink);
}
.charttip__glyph { color: var(--accent); }

.charttip__pos {
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-light);
}

.charttip__asp {
  margin: 9px 0 0;
  padding: 8px 0 0;
  list-style: none;
  border-top: 1px solid rgba(var(--accent-rgb), .18);
}
.charttip__asp li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.charttip__asp-glyph {
  width: 1.2em;
  flex-shrink: 0;
  text-align: center;
}
/* te same barwy, co cięciwy: harmonijne błękitem, napięciowe czerwienią */
.charttip__asp .is-soft .charttip__asp-glyph { color: rgb(150, 170, 245); }
.charttip__asp .is-hard .charttip__asp-glyph { color: rgb(226, 132, 132); }
.charttip__asp .is-join .charttip__asp-glyph { color: var(--accent); }

.charttip__dev {
  margin-left: auto;
  padding-left: 10px;
  font-size: 12.5px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   ETAP W PRZYGOTOWANIU
   ============================================================ */

.soon {
  margin: auto;
  max-width: 540px;
  text-align: center;
  animation: riseIn .6s ease both;
}

.soon__date {
  margin: 18px 0 0;
  font-family: var(--serif-display);
  font-size: clamp(22px, 3.4vw, 32px);
  color: var(--accent-light);
  text-shadow: 0 0 26px rgba(var(--accent-rgb), .35);
}

.soon__note {
  margin: 14px 0 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-mute);
  text-wrap: pretty;
}

/* ============================================================
   ETAP 3 — HOROSKOP (strona przewijalna)
   ============================================================ */

/* wariant sceny: zwykła, przewijalna strona z treścią */
.scene--page {
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: visible;
  user-select: text;
  -webkit-user-select: text;
}

/* dekoracje zostają nieruchome, zamiast rozciągać się na całą treść */
.scene--page .scene__nebula,
.scene--page .scene__sky,
.scene--page .scene__vignette { position: fixed; }

.stage--page {
  display: block;
  flex: none;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: clamp(40px, 7vh, 80px);
}

.report__head {
  text-align: center;
  padding: clamp(10px, 2.4vh, 26px) 0 clamp(18px, 3vh, 30px);
  animation: riseIn .7s ease both;
}

/* nagłówek bez tytułu (tytuł stoi w belce) — sam wiersz z chwilą */
.report__head--ciasny { padding: 2px 0 clamp(10px, 1.8vh, 18px); }

.report__title {
  margin: 12px 0 8px;
  font-size: clamp(26px, 4vw, 42px);
  color: var(--ink);
  letter-spacing: .01em;
  text-wrap: balance;
}

.report__meta {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.report__sec {
  margin-top: clamp(22px, 4vh, 40px);
  padding: clamp(20px, 3.4vw, 34px) clamp(18px, 3.6vw, 38px);
  border: 1px solid var(--accent-24);
  border-radius: 22px;
  background: linear-gradient(170deg, rgba(20, 14, 46, .55), rgba(10, 8, 26, .6));
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3), inset 0 0 40px rgba(var(--accent-rgb), .04);
  animation: riseIn .7s ease both;
  animation-delay: calc(var(--i, 0) * .12s);
}

.report__sec-head {
  text-align: center;
  margin-bottom: clamp(14px, 2.4vh, 22px);
}

.report__sec-title {
  margin: 8px 0 0;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--accent-light);
  letter-spacing: .02em;
}

.report__item {
  padding: clamp(12px, 2vh, 18px) 0;
}
.report__item + .report__item {
  border-top: 1px solid rgba(var(--accent-rgb), .14);
}

.report__item-head {
  margin: 0 0 8px;
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--accent);
  letter-spacing: .03em;
}

.report__item p {
  margin: 0;
  font-size: clamp(15px, 1.9vw, 16.5px);
  line-height: 1.65;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.report__item p + p { margin-top: 10px; }

.report__foot {
  margin-top: clamp(26px, 4.6vh, 46px);
  text-align: center;
}

.report__disclaimer {
  margin: 18px 0 0;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-faint);
}

/* rząd przycisków pod kosmogramem */
.chart__next {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.cta--row {
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: .16em;
}

/* ============================================================
   WYBÓR ASTROLOGA — KOŁO Z DWUNASTOMA MIEJSCAMI
   (ten sam układ, co koło numerologów)
   ============================================================ */

/* scena może urosnąć ponad ekran — koło z nagłówkiem bywa wyższe niż okno */
.scene--tall {
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
}
.scene--tall .scene__nebula,
.scene--tall .scene__sky,
.scene--tall .scene__flight,
.scene--tall .scene__vignette { position: fixed; }

@keyframes seatIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes starPulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

.pickhead {
  text-align: center;
  animation: riseIn .6s ease both;
}

.pickhead__title {
  margin: 2px 0 6px;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: .02em;
  color: var(--ink);
  text-shadow: 0 0 30px rgba(var(--accent-rgb), .35);
}

.pickhead__who {
  margin: 0;
  font-family: var(--serif-display);
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: .04em;
  color: var(--accent-light);
}

.circle {
  position: relative;
  width: min(600px, 92vw, 70svh);
  aspect-ratio: 1;
  margin: clamp(10px, 2.4vh, 24px) auto;
  flex-shrink: 0;
}

.circle__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--accent);
  animation: riseIn .8s ease both;
}

/* gwiazdozbiór znaku Słońca w środku koła */
.circle__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.circle__stars {
  position: absolute;
  inset: 16% 16% 20%;
  width: 68%;
  height: 64%;
  overflow: visible;
  stroke: rgba(var(--light-rgb), .45);
  stroke-width: .9;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .55));
  animation: riseIn 1s ease .3s both;
}

.circle__star {
  fill: var(--hot);
  stroke: none;
  animation: starPulse 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.7s);
}

.circle__label {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  font-size: clamp(9px, 1.2vw, 11px);
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--light-rgb), .6);
}

.seat {
  position: absolute;
  z-index: 2;
  width: 17%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  text-decoration: none;
  transform: translate(-50%, -50%);
  animation: seatIn .6s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: calc(.25s + var(--i) * .06s);
  transition: transform .3s ease;
}
.seat:hover, .seat:focus-visible { transform: translate(-50%, -50%) scale(1.12); z-index: 5; }
.seat:focus-visible { outline: none; }

.seat__photo {
  width: 64%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--light-rgb), .4);
  background: rgba(10, 8, 26, .75);
  color: var(--accent);
  font-family: var(--serif-display);
  font-size: 20px;
  box-shadow: 0 0 16px rgba(4, 3, 14, .7);
  filter: saturate(.75) brightness(.85);
  transition: box-shadow .3s ease, border-color .3s ease, filter .3s ease;
}
.seat__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  display: block;
}

/* dyżurujący teraz — jasne zdjęcie i świecąca obręcz */
.seat.is-online .seat__photo {
  border-color: var(--accent);
  filter: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2), 0 0 24px rgba(var(--accent-rgb), .5);
}
.seat:hover .seat__photo, .seat:focus-visible .seat__photo {
  border-color: var(--hot);
  filter: none;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .25), 0 0 30px rgba(var(--accent-rgb), .6);
}

.seat__name {
  font-size: clamp(9.5px, 1.25vw, 12.5px);
  line-height: 1.15;
  letter-spacing: .03em;
  color: var(--ink-soft);
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(2, 2, 9, .95), 0 0 8px rgba(2, 2, 9, .8);
}
.seat:hover .seat__name { color: var(--hot); }

.seat__status {
  font-size: clamp(8px, 1vw, 10px);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-faint);
  text-shadow: 0 1px 4px rgba(2, 2, 9, .95);
}
.seat.is-online .seat__status { color: #8fe3b4; }
.seat.is-online .seat__status::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin: 0 5px 1px 0;
  border-radius: 50%;
  background: #6fe0a0;
  box-shadow: 0 0 8px #6fe0a0;
  vertical-align: middle;
}

.pickfoot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  text-align: center;
  animation: riseIn .8s ease .9s both;
}

.pick__note {
  margin: 0 auto;
  max-width: 54ch;
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: .04em;
  color: var(--ink-mute);
  text-wrap: pretty;
}

.pick__back {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color .3s ease;
}
.pick__back:hover { color: var(--accent-light); }

/* wąski ekran: dwanaście miejsc siedzi ciasno — bez pierścienia znaków
   i bez słowa „dyżur" przed godziną, żeby podpisy nie wchodziły na siebie */
@media (max-width: 640px) {
  .circle__zodiac { display: none; }
  .seat__pre { display: none; }
}

/* ============================================================
   ROZMOWA Z ASTROLOGIEM — EKRAN ŁĄCZENIA I CZAT
   (ten sam język wizualny, co rozmowa z tarocistą)
   ============================================================ */

@keyframes connectSpin  { to { transform: rotate(360deg); } }
@keyframes connectPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes connectDot   { 0%, 60%, 100% { opacity: 0; } 30% { opacity: 1; } }
@keyframes dot { 0%, 70%, 100% { transform: translateY(0); opacity: .35; }
                 35%           { transform: translateY(-4px); opacity: 1; } }

.connect {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: auto;
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(46, 30, 96, .55), transparent 70%),
    rgba(5, 4, 15, .97);
  backdrop-filter: blur(6px);
  opacity: 1;
  transition: opacity .7s ease, visibility .7s ease;
}
.no-js .connect { display: none; }
.connect.is-gone { opacity: 0; visibility: hidden; }

.connect__inner { text-align: center; animation: riseIn .8s ease both; }

.connect__orb {
  position: relative;
  width: clamp(132px, 22vh, 190px);
  aspect-ratio: 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.connect__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent-24);
  border-top-color: var(--accent);
  border-right-color: var(--accent-60);
  animation: connectSpin 2.6s linear infinite;
}
.connect__ring--slow {
  inset: 11px;
  border-color: var(--accent-12);
  border-bottom-color: var(--accent-60);
  border-left-color: var(--accent-24);
  animation: connectSpin 4.4s linear infinite reverse;
}

.connect__photo {
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
  box-shadow: 0 0 34px rgba(var(--accent-rgb), .26), inset 0 0 26px rgba(80, 60, 150, .2);
  animation: connectPulse 3s ease-in-out infinite;
}

.connect__seal {
  font-family: var(--serif-display);
  font-size: clamp(34px, 6vh, 48px);
  color: var(--accent);
  animation: connectPulse 3s ease-in-out infinite;
}

.connect__text {
  margin: clamp(20px, 3.2vh, 32px) 0 0;
  font-family: var(--serif-display);
  font-size: clamp(17px, 2.4vw, 24px);
  letter-spacing: .14em;
  color: var(--accent-light);
}

.connect__dots i {
  font-style: normal;
  opacity: 0;
  animation: connectDot 1.5s ease-in-out infinite;
}
.connect__dots i:nth-child(2) { animation-delay: .25s; }
.connect__dots i:nth-child(3) { animation-delay: .5s; }

/* ---------- nagłówek rozmowy ---------- */

.ask {
  width: min(680px, 94vw);
  animation: riseIn .6s ease both;
}

.ask--chat {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 auto;
}

.ask__head {
  flex-shrink: 0;
  text-align: center;
  margin-bottom: clamp(10px, 1.8vh, 18px);
}

.ask__guide {
  position: relative;
  width: clamp(60px, 8.6vh, 88px);
  aspect-ratio: 1;
  margin: 0 auto clamp(8px, 1.4vh, 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--accent-60);
  background: linear-gradient(160deg, rgba(40, 28, 84, .55), rgba(10, 7, 30, .75));
  box-shadow: 0 0 30px rgba(var(--accent-rgb), .22), inset 0 0 26px rgba(80, 60, 150, .2);
  color: var(--accent);
  font-family: var(--serif-display);
  font-size: 26px;
}
.ask__guide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  display: block;
}

.ask__title {
  margin: 0;
  font-size: clamp(21px, 3vw, 30px);
  color: var(--ink);
  letter-spacing: .01em;
}

.ask__sub {
  margin: 4px 0 0;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- okno rozmowy ---------- */

.chat.chat--ask {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: clamp(10px, 2vh, 22px);
  border: 1px solid rgba(212, 175, 90, .34);
  border-radius: 22px;
  background: rgba(13, 9, 32, .62);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 50px rgba(120, 90, 200, .16),
              inset 0 0 44px rgba(80, 60, 150, .12);
  animation: riseIn .6s ease both;
}

.chat__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 90, .3) transparent;
  user-select: text;
  -webkit-user-select: text;
}
.chat__scroll::-webkit-scrollbar { width: 7px; }
.chat__scroll::-webkit-scrollbar-thumb { background: rgba(212, 175, 90, .3); border-radius: 6px; }
.chat__scroll::-webkit-scrollbar-track { background: transparent; }

.msg {
  display: flex;
  gap: 9px;
  align-items: flex-end;
  animation: riseIn .4s ease both;
}
.msg--mine { justify-content: flex-end; }

.msg__avatar {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--accent-rgb), .5);
  border-radius: 50%;
  background: rgba(16, 11, 40, .6);
  color: var(--accent);
  font-family: var(--serif-display);
  font-size: 14px;
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .25);
}

.msg__bubble {
  max-width: 80%;
  padding: 11px 15px;
  border: 1px solid rgba(212, 175, 90, .22);
  border-radius: 18px 18px 18px 5px;
  background: rgba(58, 44, 116, .28);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3), inset 0 0 26px rgba(80, 60, 150, .16);
}
.msg--mine .msg__bubble {
  border-radius: 18px 18px 5px 18px;
  border-color: rgba(var(--accent-rgb), .32);
  background: rgba(var(--accent-rgb), .13);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28), 0 0 22px rgba(var(--accent-rgb), .1);
}

.msg__text {
  min-height: 1.2em;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(236, 230, 252, .92);
  white-space: pre-wrap;
  text-wrap: pretty;
}
.msg--mine .msg__text { color: #f6efdd; }

.msg__dots {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 3px 2px;
}
.msg__dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: dot 1.1s ease-in-out infinite;
}
.msg__dots span:nth-child(2) { animation-delay: .18s; }
.msg__dots span:nth-child(3) { animation-delay: .36s; }

.chat__form {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(212, 175, 90, .16);
}

.chat__field {
  flex: 1;
  padding: 12px 18px;
  border: 1px solid rgba(212, 175, 90, .4);
  border-radius: 24px;
  background: rgba(16, 11, 40, .5);
  color: var(--ink);
  font-family: var(--serif-text);
  font-size: 15.5px;
  line-height: 1.4;
  outline: none;
  resize: none;
  overflow: hidden;
  box-shadow: inset 0 0 24px rgba(80, 60, 150, .14);
  user-select: text;
  -webkit-user-select: text;
}
.chat__field::placeholder { color: rgba(210, 200, 240, .42); }
.chat__field:focus { border-color: var(--accent-60); }

.chat__send {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .14);
  color: var(--accent-light);
  font-size: 19px;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), .25);
  transition: all .3s ease;
}
.chat__send:hover { background: rgba(var(--accent-rgb), .24); color: #fff; }

.chat__form:has(.chat__field:placeholder-shown) .chat__send {
  border-color: rgba(var(--accent-rgb), .3);
  background: transparent;
  color: rgba(var(--accent-rgb), .4);
  box-shadow: none;
  cursor: not-allowed;
}

.no-js .chat--ask { display: none; }

/* ---------- topbar: kolumna dwóch przycisków ---------- */

.topbar__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.topbar__actions .topbar__reset { padding: 7px 15px; font-size: 11.5px; }

/* przycisk pod działem raportu */
.report__ask {
  margin-top: clamp(10px, 1.8vh, 16px);
  padding-top: clamp(10px, 1.8vh, 16px);
  border-top: 1px solid rgba(var(--accent-rgb), .14);
  text-align: center;
}

/* ============================================================
   HOROSKOP DLA GIEŁDY (astrologia mundalna)

   Strona przewijalna: koło sesji na górze, pod nim barometr,
   czynniki i najbliższe sesje. Zielone = wzrosty, czerwone =
   spadki; ton nadaje klasa is-up / is-down / is-flat.
   ============================================================ */

.chartbox--page {
  flex: none;
  padding: 0 0 clamp(6px, 1.4vh, 14px);
}
.chartbox--page .chart {
  height: auto;
  width: min(100%, 560px);
}

/* odczyt czeka, aż dorysuje się koło (astro-gielda.js) */
.after-chart {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .3, 1);
}
.after-chart.is-on { opacity: 1; transform: none; }

/* bez JS-a nie ma czego czekać — odczyt widać od razu */
.no-js .after-chart[hidden] { display: block; opacity: 1; transform: none; }

.baro {
  --dir: var(--ink-mute);
  margin: 0 auto clamp(14px, 2.4vh, 22px);
  max-width: 560px;
}
.baro.is-up   { --dir: #6fd39a; }
.baro.is-down { --dir: #e2707a; }
.baro.is-flat { --dir: var(--accent); }

.baro__scale {
  position: relative;
  height: 12px;
  border-radius: 8px;
  border: 1px solid var(--accent-24);
  background: linear-gradient(90deg,
    rgba(226, 112, 122, .38) 0%, rgba(226, 112, 122, .12) 34%,
    rgba(232, 196, 120, .14) 50%,
    rgba(111, 211, 154, .12) 66%, rgba(111, 211, 154, .38) 100%);
}

.baro__zero {
  position: absolute;
  left: 50%;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: rgba(var(--accent-rgb), .5);
}

.baro__needle {
  position: absolute;
  left: var(--p, 50%);
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--dir);
  box-shadow: 0 0 18px var(--dir), 0 0 4px rgba(0, 0, 0, .5);
  animation: needleIn .8s cubic-bezier(.34, 1.3, .5, 1) both;
}

/* wskazówka wyskakuje ze środka skali — pozycję trzyma left, nie transform */
@keyframes needleIn {
  from { opacity: 0; transform: scale(.3); }
  to   { opacity: 1; transform: scale(1); }
}

.baro__ends,
.baro__nums {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.baro__nums {
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px clamp(14px, 4vw, 40px);
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-mute);
}
.baro__num { white-space: nowrap; }
.baro__num b { color: var(--dir); font-weight: 500; }

/* ---------- lista czynników ---------- */

.factors + .factors { margin-top: clamp(14px, 2.4vh, 22px); }

.factors__head {
  margin: 0 0 8px;
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
}

.factors__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.factor {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(var(--accent-rgb), .12);
}
.factor.is-up   { --dir: #6fd39a; }
.factor.is-down { --dir: #e2707a; }
.factor.is-flat { --dir: var(--ink-faint); }

.factor__mark {
  flex: none;
  width: 22px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dir);
}

.factor__body { flex: 1; min-width: 0; }

.factor__head {
  display: block;
  font-family: var(--serif-display);
  font-size: 16px;
  color: var(--ink);
  letter-spacing: .02em;
}

.factor__text {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
  text-wrap: pretty;
}

.factor__score {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--dir);
}
.factor__score b { font-weight: 500; }

.factor__vol {
  font-size: 11px;
  font-style: normal;
  color: rgba(232, 196, 120, .7);
}

/* ============================================================
   HOROSKOP DLA POLSKI

   Pięć dziedzin państwa, każda z własnym wskaźnikiem: wiersz
   z nazwą, skalą napięcie–harmonia i liczbą. Niżej te same
   listy czynników, co na giełdzie, oraz tabela najbliższych dni.
   ============================================================ */

.dials {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dial-row {
  display: grid;
  grid-template-columns: minmax(8em, 1fr) minmax(90px, 1.1fr) minmax(0, 11em) 3.4em;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(var(--accent-rgb), .12);
}
.dial-row.is-up   { --dir: #6fd39a; }
.dial-row.is-down { --dir: #e2707a; }
.dial-row.is-flat { --dir: var(--accent); }

.dial-row__name {
  font-family: var(--serif-display);
  font-size: 17px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, color .3s ease;
}
.dial-row__name:hover { color: var(--accent-light); border-bottom-color: var(--accent-38); }

.dial-row__scale {
  position: relative;
  height: 9px;
  border-radius: 6px;
  border: 1px solid var(--accent-24);
  background: linear-gradient(90deg,
    rgba(226, 112, 122, .38) 0%, rgba(226, 112, 122, .12) 34%,
    rgba(232, 196, 120, .14) 50%,
    rgba(111, 211, 154, .12) 66%, rgba(111, 211, 154, .38) 100%);
}
.dial-row__zero {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: rgba(var(--accent-rgb), .5);
}
.dial-row__needle {
  position: absolute;
  left: var(--p, 50%);
  top: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--dir);
  box-shadow: 0 0 14px var(--dir), 0 0 4px rgba(0, 0, 0, .5);
}

.dial-row__verdict {
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dir);
}
.dial-row__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--dir);
}

/* ton dziedziny pod jej nagłówkiem */
.report__sec-verdict {
  margin: 8px 0 0;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dir, var(--ink-mute));
}
.report__sec-verdict.is-up   { --dir: #6fd39a; }
.report__sec-verdict.is-down { --dir: #e2707a; }
.report__sec-verdict.is-flat { --dir: var(--accent); }

/* ============================================================
   CO ROBIĆ, CZEGO UNIKAĆ — dwie kolumny rad
   ============================================================ */

.rady {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 2.4vw, 26px);
}

.rady__kol {
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgba(var(--accent-rgb), .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .02);
}
.rady__kol.is-up   { --dir: #6fd39a; border-color: rgba(111, 211, 154, .26); }
.rady__kol.is-down { --dir: #e2707a; border-color: rgba(226, 112, 122, .26); }

.rady__head {
  margin: 0 0 10px;
  font-family: var(--serif-text);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dir, var(--accent));
}

.rady__lista {
  margin: 0;
  padding-left: 18px;
  list-style: none;
}
.rady__lista li {
  position: relative;
  padding: 5px 0;
  font-size: clamp(14px, 1.9vw, 15.5px);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.rady__lista li::before {
  content: "·";
  position: absolute;
  left: -14px;
  color: var(--dir, var(--accent));
}

/* ============================================================
   ARCHIWUM PRZEPOWIEDNI — lista i stronicowanie
   ============================================================ */

.archfilter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin-bottom: clamp(12px, 2vh, 20px);
}

.archfilter__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px 7px 10px;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 22px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.archfilter__item:hover { color: var(--ink); border-color: var(--accent-38); }
.archfilter__item.is-on {
  color: var(--ink);
  border-color: var(--accent-60);
  background: rgba(var(--accent-rgb), .1);
}
.archfilter__glif {
  display: block;
  width: 20px;
  height: 20px;
  color: var(--c, var(--accent));
}
.archfilter__item:not(:first-child) { padding-left: 8px; }

/* ---------- lista przepowiedni ---------- */

.arch {
  margin: 0;
  padding: 0;
  list-style: none;
}

.arch__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(var(--accent-rgb), .12);
}
.arch__row:first-child { border-top: 0; }

.arch__glif {
  flex: none;
  display: block;
  width: 30px;
  height: 30px;
  color: var(--c, var(--accent));
  filter: drop-shadow(0 0 7px rgba(var(--accent-rgb), .25));
}

.arch__link {
  font-family: var(--serif-display);
  font-size: clamp(15px, 2vw, 18px);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
  text-wrap: pretty;
}
.arch__link:hover {
  color: var(--accent-light);
  border-bottom-color: var(--accent-38);
}

.arch__pusto {
  margin: 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-mute);
  text-wrap: pretty;
}

/* ---------- stronicowanie ---------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 26px);
  margin-top: clamp(18px, 3vh, 28px);
}

.pager__btn {
  padding: 9px 18px;
  border: 1px solid var(--accent-24);
  border-radius: 22px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color .3s ease, color .3s ease;
}
.pager__btn:hover { border-color: var(--accent-60); color: var(--ink); }
.pager__btn.is-off { opacity: .3; }

.pager__stan {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (max-width: 560px) {
  .arch__glif { width: 24px; height: 24px; }
  .archfilter__item { font-size: 11px; letter-spacing: .08em; padding: 6px 12px 6px 8px; }
  .pager { gap: 10px; }
  .pager__btn { padding: 8px 12px; font-size: 11px; }
}

/* ============================================================
   HOROSKOP DLA LOTTO — kule z liczbami
   ============================================================ */

.balls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* szerokość kuli liczona z szerokości sekcji, żeby sześć sztuk zawsze
     mieściło się w jednym rzędzie — stała szerokość łamała rząd na 5 + 1 */
  --gap: clamp(6px, 1.6vw, 16px);
  gap: var(--gap);
  margin: 0 0 clamp(16px, 2.6vh, 24px);
  padding: 0;
  list-style: none;
}

.ball {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc((100% - 5 * var(--gap)) / 6);
  max-width: 92px;
}
.ball--spare {
  width: calc((100% - 3 * var(--gap)) / 4);
  max-width: 78px;
}

.ball__num {
  display: flex;
  width: clamp(48px, 8vw, 66px);
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--accent-60);
  background: radial-gradient(circle at 38% 32%, rgba(var(--light-rgb), .22), rgba(var(--accent-rgb), .08) 60%, transparent 75%);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), .22), inset 0 0 18px rgba(var(--accent-rgb), .14);
  font-family: var(--serif-display);
  font-size: clamp(22px, 3.4vw, 30px);
  color: var(--hot);
  text-shadow: 0 0 18px rgba(var(--accent-rgb), .5);
}

.ball__src {
  margin-top: 8px;
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: .04em;
  color: var(--ink-faint);
  text-align: center;
  text-wrap: balance;
}

/* na telefonie sześć kul w jednym rzędzie byłoby nieczytelne —
   lepiej wyglądają dwa równe rzędy po trzy */
@media (max-width: 560px) {
  .balls { --gap: 10px; }
  .ball { width: calc((100% - 2 * var(--gap)) / 3); max-width: none; }
  .ball--spare { width: calc((100% - 3 * var(--gap)) / 4); }
}

/* rezerwowe — te same kule, tylko przygaszone */
.balls--spare { margin-top: 10px; }
.ball--spare .ball__num {
  width: clamp(44px, 7vw, 56px);
  border-color: var(--accent-24);
  box-shadow: none;
  font-size: clamp(18px, 2.6vw, 23px);
  color: var(--ink-soft);
  text-shadow: none;
}

/* ---------- tabela najbliższych dni ---------- */

.days { overflow-x: auto; }

/* na wąskim ekranie tabela nie mieści się w całości — mówimy o tym wprost */
.days__hint {
  display: none;
  margin: 10px 0 0;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--ink-faint);
  text-align: center;
}

.days__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.days__table th,
.days__table td {
  padding: 10px 6px;
  border-top: 1px solid rgba(var(--accent-rgb), .12);
  text-align: center;
  white-space: nowrap;
}
.days__table thead th {
  border-top: 0;
  font-family: var(--serif-text);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.days__table tbody th {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 15px;
  text-align: left;
  color: var(--ink);
}
.days__table td.is-up   { --dir: #6fd39a; }
.days__table td.is-down { --dir: #e2707a; }
.days__table td.is-flat { --dir: var(--accent); }

.days__mark { color: var(--dir); }
.days__num {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
}

@media (max-width: 560px) {
  .dial-row {
    grid-template-columns: 1fr auto;
    row-gap: 6px;
  }
  .dial-row__scale { grid-column: 1 / -1; order: 3; }
  .dial-row__verdict { order: 4; font-size: 11px; }
  .dial-row__num { order: 5; }
  .days__table { font-size: 12px; }
  .days__table thead th { font-size: 10px; letter-spacing: .06em; }
  .days__table tbody th { font-size: 13px; }
  .days__hint { display: block; }
}

/* ---------- najbliższe sesje ---------- */

.sessions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.session {
  display: grid;
  grid-template-columns: 1fr auto minmax(0, 11em) 3.6em;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid rgba(var(--accent-rgb), .12);
}
.session.is-up   { --dir: #6fd39a; }
.session.is-down { --dir: #e2707a; }
.session.is-flat { --dir: var(--accent); }

.session__day {
  font-family: var(--serif-display);
  font-size: 16px;
  color: var(--ink);
}
.session__mark { color: var(--dir); }
.session__verdict {
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.session__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--dir);
}

@media (max-width: 560px) {
  .session {
    grid-template-columns: auto 1fr auto;
    row-gap: 2px;
  }
  .session__day { grid-column: 2; }
  .session__mark { grid-row: 1 / span 2; grid-column: 1; }
  .session__verdict { grid-column: 2; }
  .session__num { grid-column: 3; grid-row: 1 / span 2; }
  .factor__text { font-size: 13px; }
}

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */

/* bez JS tarcza nic nie pokazuje — zostaje informacja pod odczytem */
.no-js .stage__dial { display: none; }

@media (max-width: 560px) {
  .topbar__mark { display: none; }
  /* dłuższe napisy działów (np. „Horoskop dla Ciebie") nie mogą łamać belki */
  .topbar__back { white-space: nowrap; font-size: 11.5px; letter-spacing: .12em; }
  .topbar__reset { font-size: 11px; padding: 8px 13px; letter-spacing: .1em; }
  /* na wąskim ekranie tytuł schodzi pod link powrotu, na całą szerokość */
  .topbar--heading { grid-template-columns: 1fr; row-gap: 10px; }
  .topbar--heading > :last-child { display: none; }
  .topbar__heading { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene__nebula, .star, .dial__pointer::before { animation: none; }
  .report__head, .report__sec { animation: none; }
  .connect__ring, .connect__photo, .connect__seal { animation: none; }
  .pickhead, .pickfoot, .circle__lines, .circle__stars, .circle__star, .seat { animation: none; }
  .seat { transition: none; }
  .stage__sub, .birth, .dial { animation: none; }
  .dial--zoom, .stage__dial { transition: none; }
  .place.is-arriving { animation: none; }
  .place.is-flyby { transition: none; }
  .chart, .chart__caption, .baro__needle { animation: none; }
  .after-chart { transition: none; }
  .zoomer, .zoomer__stage svg, .zoomer__hint, .charttip { transition: none; }
  .chart__line, .chart__asp, .chart__fade, .chart__planet { transition: none; }
  .dial__go { animation: bloomIn .01s both; }
}