/* JĘZYK OKNA SYSTEMU — używany przez całą grę, nie tylko przez kalibrację.

   Reguła ruchu: animujemy WYŁĄCZNIE transformacje. Stan spoczynkowy każdego
   elementu jest widoczny, więc przy zamrożonym renderowaniu nic nie znika —
   po prostu nie ma wjazdu. (ZASADY.md pkt 4.) */

.okno{
  position:relative;
  background:linear-gradient(160deg,rgba(10,26,42,.5),rgba(5,14,24,.62));
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(94,231,255,.42);
  padding:14px 15px 14px;
  box-shadow:0 0 40px rgba(94,231,255,.09),inset 0 0 34px rgba(94,231,255,.05);
  overflow:hidden;
  border-radius:3px;   /* prosta ramka — ścięcia i klamry wypadły na życzenie */
}
.okno::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(94,231,255,.045) 0 1px,transparent 1px 3px);
}
.okno.wchodzi{animation:oknoWjazd .34s cubic-bezier(.16,1.1,.3,1) both}
@keyframes oknoWjazd{from{transform:scale(1.05) translateY(-8px)}to{transform:none}}

/* linia skanująca — przejeżdża raz, przy wjeździe */
.okno-skan{
  position:absolute;left:0;right:0;top:0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,rgba(140,235,255,.22),rgba(140,235,255,.02) 70%,transparent);
  transform:translateY(-120%);
}
.okno.wchodzi .okno-skan{animation:skanPrzejazd .62s ease-out .06s both}
@keyframes skanPrzejazd{from{transform:translateY(-120%)}to{transform:translateY(300%)}}

.okno-naglowek{
  font-size:9px;font-weight:800;letter-spacing:.32em;color:#4c7d95;
  margin-bottom:9px;position:relative;
}
.okno-tresc{position:relative}

/* wariant: małe okno z odpowiedzią Systemu */
.okno.male{
  padding:10px 13px;border-color:rgba(94,231,255,.26);
  background:linear-gradient(160deg,rgba(8,20,32,.6),rgba(4,11,19,.72));
  border-radius:3px;
}
.okno.male .okno-tresc{
  font-size:13px;line-height:1.6;color:#8fc4da;
}

/* wariant: okno wjeżdżające NAD ekranem sesji — nagroda nie blokuje gry,
   panel z polami i STRIKE zostaje pod spodem dostępny */
.okno.nad-sesja{
  position:absolute;left:14px;right:14px;top:calc(118px + env(safe-area-inset-top,0px));   /* pod paskiem życia, nie na nim */
  z-index:12;max-width:412px;margin:0 auto;
}
.okno.nad-sesja .okno-tresc{font-size:14px;line-height:1.55;color:#cfe8f5}
.okno.nad-sesja.zloty{border-color:rgba(255,212,94,.55)}
.okno.nad-sesja.zloty .klamra{border-color:#ffd45e;box-shadow:0 0 14px rgba(255,212,94,.85)}
.okno.nad-sesja.zloty .okno-naglowek{color:#ffd45e}

/* wariant: werdykt — mocniejszy, złoty akcent */
.okno.werdykt{border-color:rgba(255,212,94,.5)}

@media (prefers-reduced-motion:reduce){
  .okno.wchodzi,.okno.wchodzi .okno-skan{animation:none}
}