/* Znak 3D — mechanika płótna i podpowiedzi gestów (czesci/znak.php).
   Wartości wizualne z tokenów system.css; bez własnej palety. */

#scena {
  position: fixed; inset: 0 0 auto; z-index: 0;
  /* wysokość NAJWIĘKSZEGO okna (pasek adresu schowany): chowanie i pokazywanie paska na
     telefonie nie zmienia płótna — kamera i tor znaku stoją (scena.js, plotno) */
  width: 100%; height: 100vh; height: 100lvh;
  display: block;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity .6s ease;
}
/* scena pokazuje się po wyborze profilu — już w docelowej rozdzielczości */
#scena.gotowa { opacity: 1; }
/* etap tła pod preloadem: płótno widoczne z samym tłem (znak jeszcze ukryty) */
#scena.tlo { opacity: 1; }

.znak-blad {
  position: fixed; inset: auto var(--margines) var(--o-5);
  z-index: 1;
  display: none;           /* scena.js: display grid przy braku WebGL */
  place-items: center;
  color: var(--tekst-2);
  font-size: var(--r-0);
  text-align: center;
}

/* podpowiedź gestów — znacznik stawia widok (#podpowiedz, #podpowiedz-pyl, #pomoc).
   Szept (krytyka A 25.09): linie mono wprost na niebie, bez szklanej ramki — interfejs
   nie konkuruje ze znakiem. Mechanika (kiedy się pokazuje) — podpowiedz.js, system.md. */
.podpowiedz {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 6px);
  max-width: calc(100vw - 2 * var(--margines));
  margin: 0;
  padding: 0;
  color: var(--tekst-2);
  font-family: var(--kroj-mono);
  font-size: var(--r-mini);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.5;
  opacity: 0;
  transition: opacity .4s ease, transform .4s ease;
}
.podpowiedz.widoczna { opacity: 1; transform: translate(-50%, 0); }
.podpowiedz ul { margin: 0; padding: 0; list-style: none; }
.podpowiedz li { display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: color .3s ease; }
.podpowiedz li + li { margin-top: 2px; }
.podpowiedz .haczyk {
  flex: none;
  width: 9px; height: 9px;
  border: 1px solid var(--tekst-2);
  border-radius: 50%;
  transition: all .3s ease;
}
.podpowiedz li.zrobione { color: var(--tekst-2); }
.podpowiedz li.zrobione .haczyk {
  width: 5px; height: 9px;
  margin: 0 2px;
  border-width: 0 1.5px 1.5px 0;
  border-radius: 0;
  transform: rotate(45deg) translateY(-1px);
}
.podpowiedz[data-urzadzenie="dotyk"] [data-dla="mysz"],
.podpowiedz[data-urzadzenie="mysz"] [data-dla="dotyk"] { display: none; }

/* „?" stoi w nagłówku (naglowek.php): szkło i wymiar daje .pigulka.okragly-przycisk,
   krój i stany — system.css. Tu tylko mechanika. */
.znak-pomoc {
  cursor: pointer;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .podpowiedz, .podpowiedz li, .podpowiedz .haczyk, #scena { transition: none; }
}