/* ============================================================
   Oddech · wyciszenie — style
   Minimalizm, pełny ekran, dobre na mobilce i desktopie.
   ============================================================ */

:root{
  --text: rgba(244, 247, 244, 0.92);
  --text-soft: rgba(240, 244, 240, 0.62);
  --glass: rgba(18, 24, 20, 0.46);
  --glass-brd: rgba(255, 255, 255, 0.14);
  --accent: rgba(255, 255, 255, 0.9);
  --ease: cubic-bezier(.37, 0, .63, 1);
  --pad-safe: env(safe-area-inset-top, 0px);
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

/* atrybut hidden musi wygrać z display ustawionym w klasach poniżej */
[hidden]{ display: none !important; }

html, body{
  height: 100%;
  background: #0b0f0d;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body{ overflow: hidden; }

.app{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Warstwy tła (wideo / placeholder) ---------- */
.stage{
  position: absolute;
  inset: 0;
  overflow: hidden;                 /* przycina overscan wideo — brak szczelin na krawędziach */
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: opacity;
}
.stage.is-active{ opacity: 1; }

/* pętla wideo z przenikaniem: dwa nałożone <video> */
.loopvid{ position: absolute; inset: 0; overflow: hidden; }
.loopvid__v{
  position: absolute;
  /* overscan: wideo wychodzi ~8px poza kadr (przycięte), żeby na iOS nie było
     sub-pixelowej szczeliny (czarny pasek) ani „ducha" (podwojenie) na brzegu */
  top: -8px; left: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  object-fit: cover;
  transform: translateZ(0);         /* własna warstwa GPU — czyściej na iOS */
  backface-visibility: hidden;
  will-change: opacity;
}

/* delikatny „oddech" placeholdera, żeby tło żyło zanim wgrasz wideo */
.placeholder-motion{
  position: absolute;
  inset: -10%;
  background: radial-gradient(40% 40% at 30% 30%, rgba(255,255,255,.08), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform: translate(-4%, -3%) scale(1.05); opacity:.5; }
  to  { transform: translate(6%, 5%) scale(1.15);  opacity:.9; }
}

/* winieta — głębia i czytelność napisów */
.vignette{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.42) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.14), transparent 30%, transparent 72%, rgba(0,0,0,.30));
}

/* ---------- Przewodnik oddechu ---------- */
.breath{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
  /* delikatna centralna poświata — utrzymuje czytelność koła i napisów
     także na jasnych scenach (morze, góry), na ciemnych ledwo widoczna */
  background: radial-gradient(34vmin 34vmin at 50% 50%,
              rgba(0,0,0,.34) 0%, rgba(0,0,0,.14) 55%, transparent 100%);
}
.breath.show{ opacity: 1; }

.breath__circle,
.breath__ring{
  position: absolute;
  top: 50%; left: 50%;
  width: 34vmin; height: 34vmin;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
}

.breath__circle{
  background: radial-gradient(circle at 50% 50%,
              rgba(255,255,255,.20) 0%,
              rgba(255,255,255,.09) 55%,
              rgba(255,255,255,.03) 74%,
              transparent 80%);
  border: 2.5px solid rgba(255,255,255,.88);
  box-shadow:
    0 0 0 1.5px rgba(0,0,0,.32),          /* ciemny włos na zewnątrz — kontrast na jasnym tle */
    0 0 6vmin rgba(255,255,255,.35),      /* zewnętrzna poświata */
    inset 0 0 5vmin rgba(255,255,255,.18);/* wewnętrzna poświata */
}

.breath__ring{
  border: 1px solid rgba(255,255,255,.22);
  width: 58vmin; height: 58vmin;   /* orientacyjny „sufit" wdechu */
  box-shadow: inset 0 0 4vmin rgba(255,255,255,.05),
              0 0 1px rgba(0,0,0,.35);   /* cień czytelny także na jasnym tle */
}

/* ---------- Znacznik postępu sesji: wypełniający się pierścień ---------- */
.progress{
  position: absolute;
  top: 50%; left: 50%;
  width: 84vmin; height: 84vmin;
  transform: translate(-50%, -50%) rotate(-90deg);   /* start u góry (12:00) */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.5));        /* czytelny też na jasnej scenie */
}
.progress.show{ opacity: 1; }
.progress__track{ fill: none; stroke: rgba(255,255,255,.10); stroke-width: 0.45; }
.progress__arc{
  fill: none;
  stroke: rgba(255,255,255,.72);
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-dasharray: 295.31;      /* obwód = 2·π·47 */
  stroke-dashoffset: 295.31;     /* start: pusty */
}
.progress.run .progress__arc{
  animation: progressFill var(--dur, 60s) linear forwards;
}
@keyframes progressFill{ to{ stroke-dashoffset: 0; } }

.breath__caption{
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
.breath__word{
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  font-size: clamp(1.1rem, 4.4vmin, 2rem);
  font-weight: 300;
  letter-spacing: .32em;
  text-transform: lowercase;
  color: var(--text);
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 1px 22px rgba(0,0,0,.4);
  white-space: nowrap;
  opacity: 0;
  will-change: opacity, filter, transform;
}

/* ---------- Górne ikony: głośnik + ustawienia (koło zębate) ---------- */
.topbar{
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  z-index: 60;                       /* zawsze na wierzchu i zawsze widoczne */
  display: flex;
  gap: 10px;
  transition: opacity .35s ease;
}
.app.menu-open .topbar{ opacity: 0; pointer-events: none; }   /* przy otwartym panelu chowamy (panel ma swój X) */
.icon-btn{
  width: 44px; height: 44px;
  display: grid; place-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  cursor: pointer;
  transition: background .3s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover{ background: rgba(0,0,0,.44); }
.icon-btn:active{ transform: scale(.93); }
.icon-btn svg{ width: 22px; height: 22px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.icon-btn .ic-off{ display: none; }
#muteToggle[aria-pressed="true"] .ic-on{ display: none; }
#muteToggle[aria-pressed="true"] .ic-off{ display: block; }

/* ---------- Tło do zamykania panelu (klik poza) ---------- */
.backdrop{
  position: absolute;
  inset: 0;
  z-index: 45;
  background: rgba(4, 8, 6, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.app.menu-open .backdrop{ opacity: 1; pointer-events: auto; }

/* ---------- Panel ustawień ---------- */
.panel{
  position: absolute;
  z-index: 46;
  top: 0; right: 0;
  height: 100dvh;
  width: min(340px, 86vw);
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  border-left: 1px solid var(--glass-brd);
  transform: translateX(100%);
  transition: transform .5s var(--ease);
  overflow-y: auto;
  touch-action: pan-y;               /* pozwala śledzić gest przesunięcia */
}
.panel:not([hidden]){ display: flex; }
.app.menu-open .panel{ transform: translateX(0); }

.panel__head{
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.panel__close{
  border: none; background: none;
  padding: 8px; margin: -8px -6px -8px 0;
  color: var(--text); cursor: pointer; line-height: 0;
  border-radius: 50%;
  transition: color .2s ease, background .2s ease;
}
.panel__close svg{ width: 24px; height: 24px; }
.panel__close:hover{ color: #fff; background: rgba(255,255,255,.10); }

/* kursywowa podpowiedź pod wyborem (np. opis rytmu oddechu) */
.ctrl__hint{
  margin: 2px 0 0;
  font-style: italic;
  font-weight: 300;
  font-size: .82rem;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--text-soft);
}

/* przycisk „rozpocznij sesję" w panelu */
.panel__start{
  margin-top: 6px;
  padding: 15px 24px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--text);
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.16), rgba(255,255,255,.05) 70%, rgba(255,255,255,.02));
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 999px;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.28), 0 0 5vmin rgba(255,255,255,.18);
  cursor: pointer;
  transition: background .3s ease, box-shadow .3s ease;
}
.panel__start:hover{ background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.3), rgba(255,255,255,.10) 70%); }

.ctrl{ display: flex; flex-direction: column; gap: 10px; }
.ctrl--row{ flex-direction: row; align-items: center; justify-content: space-between; }
.ctrl__label{
  font-size: .92rem;
  font-weight: 300;
  letter-spacing: .02em;
  color: var(--text);
  display: flex; justify-content: space-between; align-items: baseline;
}
.ctrl__label em{ font-style: normal; font-size: .8rem; color: var(--text-soft); }

/* select */
.select-wrap{ position: relative; }
.select-wrap::after{
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--text-soft);
  border-bottom: 1.5px solid var(--text-soft);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.ctrl__select{
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 12px 34px 12px 14px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--text);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  cursor: pointer;
}
.ctrl__select:focus-visible{ outline: 2px solid rgba(255,255,255,.4); }
.ctrl__select option{ color: #10201a; }
.ctrl__select option:disabled{ color: #7a8a82; }

/* suwak */
.range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.22);
  cursor: pointer;
}
.range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(255,255,255,.5);
  border: none;
}
.range::-moz-range-thumb{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  box-shadow: 0 0 12px rgba(255,255,255,.5);
}

/* przełącznik */
.switch{
  width: 46px; height: 26px;
  border-radius: 20px;
  border: 1px solid var(--glass-brd);
  background: rgba(255,255,255,.10);
  position: relative;
  cursor: pointer;
  transition: background .3s ease;
  flex: none;
}
.switch span{
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform .3s var(--ease);
}
.switch[aria-checked="true"]{ background: rgba(255,255,255,.32); }
.switch[aria-checked="true"] span{ transform: translateX(20px); }

/* ---------- Nakładki (start / koniec) ---------- */
.overlay{
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: rgba(6, 10, 8, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity .8s ease;
}
.overlay.fade-out{ opacity: 0; pointer-events: none; }

.start__pulse{
  width: 72px; height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.24), rgba(255,255,255,.04) 70%);
  box-shadow: 0 0 40px rgba(255,255,255,.18);
  animation: startPulse 4s var(--ease) infinite;
}
@keyframes startPulse{
  0%,100%{ transform: scale(.9); opacity:.7; }
  50%    { transform: scale(1.12); opacity:1; }
}
.start__btn{
  padding: 16px 42px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: lowercase;
  color: var(--text);
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.16), rgba(255,255,255,.05) 70%, rgba(255,255,255,.02));
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 999px;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.28), 0 0 6vmin rgba(255,255,255,.2);
  cursor: pointer;
  transition: background .3s ease, box-shadow .3s ease;
}
.start__btn:hover{ background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.3), rgba(255,255,255,.10) 70%); }
.start__sub{
  font-size: .82rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ---------- Ekran końca (kafelki) + komunikat — na filmiku ---------- */
.endscreen, .message{
  position: absolute;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 32px;
  text-align: center;
  /* delikatna centralna poświata dla czytelności — film wciąż widoczny */
  background: radial-gradient(62vmin 56vmin at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,.18) 55%, transparent 100%);
  transition: opacity .8s ease;
}

/* scena z jasnym środkiem/dołem (ognisko): tekst do góry, na czarną część kadru */
.message--top{
  justify-content: flex-start;
  padding-top: 8vh;
  background: radial-gradient(58vmin 46vmin at 50% 24%, rgba(0,0,0,.5), rgba(0,0,0,.16) 55%, transparent 100%);
}
/* w trybie „do góry" przycisk też idzie pod tekst (na czerni), a nie na dół (na ogień) */
.message--top .message__cta{
  position: static;
  transform: none;
  bottom: auto;
  margin-top: 2vh;
}

.endscreen__q{
  font-size: clamp(1.05rem, 5vmin, 1.4rem);
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: lowercase;
  color: var(--text);
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 1px 22px rgba(0,0,0,.4);
  max-width: 20ch;
}

.tiles{ display: flex; flex-direction: column; gap: 16px; width: min(340px, 82vw); }

/* kafelek „w stylu kółka": pigułka z białym obrysem + ciemny włos + poświata */
.tile{
  display: block;
  font-family: inherit;
  font-size: clamp(.9rem, 4vmin, 1.05rem);
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: lowercase;
  color: var(--text);
  text-align: center;
  text-decoration: none;
  padding: 17px 24px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.85);
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.15), rgba(255,255,255,.05) 70%, rgba(255,255,255,.02));
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.30), 0 0 5vmin rgba(255,255,255,.20);
  cursor: pointer;
  transition: background .3s ease, box-shadow .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.tile:hover, .tile:active{
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.28), rgba(255,255,255,.10) 70%, rgba(255,255,255,.04));
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.30), 0 0 7vmin rgba(255,255,255,.34);
}

/* ---------- Komunikat: tekst linijka po linijce (wdmuchiwany / zdmuchiwany) ---------- */
/* narastający blok tekstu — wyśrodkowany w pionie, linijki zostają */
.message__lines{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 32ch;
  padding: 32px 34px;
  border-radius: 44px;
  /* delikatne „podniesienie" — miękka ciemna poświata pod tekstem, gaśnie na krawędziach (bez twardej ramki) */
  background: radial-gradient(112% 100% at 50% 50%, rgba(0,0,0,.52) 0%, rgba(0,0,0,.34) 52%, rgba(0,0,0,0) 100%);
}
.message__line{
  margin: 0 0 0.6em;
  font-size: clamp(1.02rem, 4.8vmin, 1.7rem);
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 1.45;
  text-transform: lowercase;
  text-align: center;
  color: var(--text);
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 1px 22px rgba(0,0,0,.4);
  opacity: 0;
  will-change: opacity, filter, transform;
}
.message__line:last-child{ margin-bottom: 0; }
.message__cta{
  position: absolute;
  left: 50%; bottom: 16%;
  transform: translateX(-50%);
  width: min(320px, 78vw);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.message__cta.show{ opacity: 1; }

/* ---------- W bezruchu chowamy tylko kursor; ikony (koło zębate + głośnik) ZAWSZE widoczne ---------- */
.app.idle{ cursor: none; }

/* ---------- Mobilka: panel jako dolny arkusz ---------- */
@media (max-width: 560px){
  .panel{
    top: auto; bottom: 0;
    height: auto; max-height: 82dvh;
    width: 100%;
    padding: 26px 22px calc(env(safe-area-inset-bottom, 0px) + 26px);
    border-left: none;
    border-top: 1px solid var(--glass-brd);
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
  }
  .app.menu-open .panel{ transform: translateY(0); }
  .panel__head{ text-align: center; }
}

/* ---------- Mniej ruchu ---------- */
@media (prefers-reduced-motion: reduce){
  .placeholder-motion,
  .start__pulse{ animation: none; }
  .stage{ transition: opacity .6s linear; }
}