/* Spacer 3D w nakładce na całe okno (walk.js). Ten sam świat co strona: pasy kurtyny ze startu, Cormorant
   na tytułach, złoty akcent --truss. Kurtyna zasuwa się na stronę, pod nią łączy się stream, potem pasy
   unoszą się nad obrazem spaceru, jak przy wejściu na stronę. */
html.walk-open, html.walk-open body { overflow: hidden; }

.walk-layer { position: fixed; inset: 0; z-index: 300; color: var(--chalk); font-family: var(--sans); }
.walk-layer[hidden], .walk-layer [hidden] { display: none !important; }
.walk-layer:fullscreen { width: 100%; height: 100%; background: var(--ink-deep); }
.walk-layer ::selection { background: var(--truss); color: var(--ink-deep); }

/* Ramka streamu wchodzi dopiero pod zasuniętą kurtynę (has-stage), żeby pasy zasuwały się na stronę, nie na czerń */
.walk-stage { position: absolute; inset: 0; background: #000; opacity: 0; }
.walk-layer.has-stage .walk-stage { opacity: 1; }
.walk-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.walk-curtain { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.walk-curtain .stripes i { transform: translateY(-101%); background: var(--ink); }
.walk-curtain.cover .stripes i { transform: translateY(0); }
.walk-curtain .stripes i:nth-child(1) { transition-delay: .03s; } .walk-curtain .stripes i:nth-child(2) { transition-delay: .06s; }
.walk-curtain .stripes i:nth-child(3) { transition-delay: .09s; } .walk-curtain .stripes i:nth-child(4) { transition-delay: .12s; }
.walk-curtain .stripes i:nth-child(5) { transition-delay: .15s; } .walk-curtain .stripes i:nth-child(6) { transition-delay: .18s; }
.walk-curtain .stripes i:nth-child(7) { transition-delay: .21s; }

/* Ładowanie, komunikaty i „Still there?”: jeden blok na środku ekranu */
.walk-status, .walk-message, .walk-stay { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 40px)); max-height: calc(100% - 32px); overflow-y: auto; text-align: center; }
/* Margines na obwódkę fokusu przycisków, którą przewijany blok inaczej przycina */
.walk-status, .walk-message { padding: 8px; }
.walk-layer:focus { outline: none; }
.walk-status, .walk-message { animation: walk-in .7s var(--ease-soft) .45s both; }
@keyframes walk-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); } }
.ws-title, .wm-title { margin: 0 0 16px; font: 400 clamp(34px, 3.4vw, 52px)/1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.ws-step { margin: 0 0 22px; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--chalk-2); }
.ws-pct { margin: 0 0 26px; font: 300 clamp(64px, 7vw, 104px)/1 var(--serif); color: var(--truss); font-variant-numeric: tabular-nums; }
.ws-hint { margin: 0 auto 26px; max-width: 42ch; font-size: 14px; line-height: 1.55; color: var(--chalk-2); }
.ws-hint:empty { display: none; }
.ws-queue { margin: 0 0 24px; font-size: 14px; line-height: 1.6; color: var(--chalk); }
.ws-queue p { margin: 0 0 6px; }
.ws-hint, .wm-text, .ws-queue p { text-wrap: pretty; }
.ws-queue a, .walk-message a:not(.walk-btn) { color: var(--chalk); text-decoration: underline; text-decoration-color: var(--truss); text-underline-offset: 4px; }
.wm-text { margin: 0 auto; max-width: 40ch; font-size: 15px; line-height: 1.6; color: var(--chalk-2); }
.walk-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }

/* Przyciski w języku pigułek z nagłówka strony; złoto na najechaniu jak okrągłe strzałki kafli */
.walk-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px; border-radius: 999px;
  border: 1px solid rgba(250, 250, 247, .3); background: transparent; color: var(--chalk); font: 600 11.5px var(--sans);
  letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.walk-btn.primary { background: var(--chalk); border-color: var(--chalk); color: var(--ink-deep); }
.walk-btn:active { transform: scale(.985); }
@media (hover: hover) {
  .walk-btn.ghost:hover { border-color: rgba(250, 250, 247, .6); }
  .walk-btn.primary:hover { background: var(--truss); border-color: var(--truss); }
}
.walk-layer :focus-visible { outline: 2px solid var(--truss); outline-offset: 3px; }
.walk-stage iframe:focus-visible { outline: none; }

.walk-stay { z-index: 5; padding: 34px 30px 30px; border-radius: 14px; background: rgba(19, 22, 24, .94); box-shadow: 0 28px 80px rgba(6, 8, 9, .45); }
.walk-stay .walk-btn { margin-top: 24px; }

/* Pasek u góry na środku: rogi i dół obrazu zajmuje interfejs gry (logo, lista zadań, minimapa, pasek menu) */
.walk-controls { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.walk-controls > * { pointer-events: auto; }
.wc-bar { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 32px); }
/* iPad w pełnym ekranie: Safari kładzie u góry własny pasek z X, więc przyciski schodzą pod niego */
.walk-layer.is-ipad-fs .wc-bar { top: calc(88px + env(safe-area-inset-top, 0px)); }
.wc-btn { display: inline-flex; flex: none; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 12px; white-space: nowrap;
  border-radius: 999px; border: 1px solid rgba(250, 250, 247, .2); background: rgba(22, 25, 27, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--chalk); font: 600 11px var(--sans);
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: border-color .3s ease, background .3s ease; }
.wc-btn svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) { .wc-btn:hover { border-color: rgba(250, 250, 247, .5); } }
.wc-btn[aria-pressed="true"] { background: var(--chalk); color: var(--ink-deep); border-color: transparent; }
.wc-btn .i-in { display: none; }
.walk-layer.is-fullscreen .wc-btn .i-out { display: none; }
.walk-layer.is-fullscreen .wc-btn .i-in { display: block; }
/* Telefon poziomo: obraz ma ok. 400 px wysokości, więc przyciski bez podpisów */
@media (max-height: 500px) {
  .wc-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wc-btn { padding: 0 12px; }
  .ws-title, .wm-title { font-size: 30px; margin-bottom: 10px; }
  .ws-step { margin-bottom: 12px; }
  .ws-pct { font-size: 52px; margin-bottom: 14px; }
  .ws-hint { margin-bottom: 14px; }
  .walk-actions { margin-top: 18px; }
}
/* Telefon pionowo w trakcie spaceru: obraz jest mały, więc pod nim prośba o obrót */
.wc-rotate { display: none; }
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 600px) {
  .walk-layer.is-live .wc-rotate { position: absolute; left: 50%; bottom: calc(12% + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px; width: min(320px, calc(100% - 40px)); margin: 0; padding: 12px 16px; border-radius: 14px;
    background: rgba(22, 25, 27, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; line-height: 1.4; pointer-events: none; }
  .wc-rotate svg { flex: none; width: 28px; height: 28px; color: var(--truss); }
}

@media (prefers-reduced-motion: reduce) {
  .walk-curtain .stripes i { transition: none; }
  .walk-status, .walk-message { animation: none; }
}