/* Ekran sesji — jedyny ekran używany na siłowni, cztery razy w tygodniu.

   Trzy rzeczy rządzą tym układem:
   1. Strażnik zajmuje górę i musi być duży — to on jest nagrodą za serię.
   2. Pola i przycisk STRIKE siedzą przy dole, w zasięgu kciuka jednej ręki.
   3. Nic nie może skakać między seriami — zdyszany człowiek nie trafia
      w ruchomy przycisk.

   Ruch: animujemy wyłącznie transformacje (ZASADY.md pkt 4). */

#sesja{
  position:fixed;inset:0;height:100dvh;background:#02040a;overflow:hidden;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
  display:flex;flex-direction:column;
}
#sesja[hidden]{display:none}

/* --- pasek górny: piętro i seria --- */
.ses-szczyt{
  position:relative;z-index:5;flex:none;
  padding:calc(14px + env(safe-area-inset-top,0px)) 18px 8px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:9px;font-weight:800;letter-spacing:.28em;color:#3d6478;
}
.ses-szczyt b{color:#5ee7ff;font-size:11px}

/* --- arena: Strażnik + pasek HP --- */
.arena{position:relative;flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:center}
.arena-tlo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 18%;opacity:.5;
}
.arena-ciemnia{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,4,10,.55) 0%,transparent 30%,rgba(2,4,10,.9) 92%);
}
/* Grafiki Strażników to portrety w kadrze prostokątnym, nie wycinanki.
   Bez maski wyglądały jak zdjęcie naklejone na scenę — twarda krawędź
   z każdej strony. Miękkie wygaszenie brzegów wtapia je w ciemność sali.
   Widoczne dopiero na zrzucie, nie w żadnym teście DOM. */
.straznik{
  position:relative;z-index:2;max-height:100%;width:auto;max-width:88%;
  object-fit:contain;filter:drop-shadow(0 0 46px rgba(94,231,255,.2));
  animation:oddechStraznika 5.5s ease-in-out infinite;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 44%,#000 55%,transparent 100%);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 44%,#000 55%,transparent 100%);
}
@keyframes oddechStraznika{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.012)}}
/* trafienie: odrzut + rozbłysk; pełny filtr w klatkach, żeby nie zgubić cienia */
.straznik.trafiony{animation:odrzutStraznika .34s cubic-bezier(.2,.9,.4,1)}
@keyframes odrzutStraznika{
  0%{transform:translate(0,0);filter:drop-shadow(0 0 42px rgba(94,231,255,.22))}
  14%{transform:translate(10px,-6px) scale(1.03);filter:brightness(4) saturate(0) drop-shadow(0 0 60px #fff)}
  48%{transform:translate(-5px,2px)}
  100%{transform:translate(0,0);filter:drop-shadow(0 0 42px rgba(94,231,255,.22))}
}
.straznik.pada{animation:padaStraznik 1.5s cubic-bezier(.3,.1,.6,1) forwards}
@keyframes padaStraznik{
  0%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 42px rgba(94,231,255,.22))}
  25%{filter:brightness(2.6) drop-shadow(0 0 70px #ff5c7f)}
  100%{transform:translateY(-22px) scale(1.05);filter:brightness(3) blur(9px);opacity:0}
}

.hp-pas{
  position:absolute;top:10px;left:18px;right:18px;z-index:4;
}
.hp-imie{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:9.5px;font-weight:800;letter-spacing:.26em;color:#7fa8bd;margin-bottom:5px;
}
.hp-imie b{color:#eaf7ff;font-size:13px;letter-spacing:.12em}
.hp-tor{
  height:9px;background:rgba(4,10,18,.8);border:1px solid rgba(94,231,255,.3);
  position:relative;overflow:hidden;
}
.hp-tor i{
  position:absolute;inset:0;transform-origin:left center;
  background:linear-gradient(90deg,#8d1430,#ff3d68);
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
/* duch: zostaje na chwilę w miejscu starego stanu, żeby widać było ubytek */
.hp-tor u{
  position:absolute;inset:0;transform-origin:left center;background:rgba(255,255,255,.28);
  transition:transform .7s ease .25s;
}
.hp-liczby{
  margin-top:4px;text-align:right;font-size:10px;font-weight:700;color:#5d8296;
  font-variant-numeric:tabular-nums;
}

/* --- liczby obrażeń --- */
.dmg{
  position:absolute;z-index:8;pointer-events:none;font-weight:900;font-size:34px;
  color:#fff;text-shadow:0 0 14px #ff3d68,0 2px 6px #000;
  font-variant-numeric:tabular-nums;animation:dmgLot 1s cubic-bezier(.2,1,.4,1) forwards;
}
.dmg.krytyk{font-size:46px;color:#ffd45e;text-shadow:0 0 22px #ffd45e,0 2px 6px #000}
@keyframes dmgLot{
  0%{transform:translate(-50%,6px) scale(.6)}
  18%{transform:translate(-50%,-8px) scale(1.15)}
  32%{transform:translate(-50%,-12px) scale(1)}
  100%{transform:translate(-50%,-64px) scale(.95);opacity:0}
}
.iskry-sesja{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none}
/* POWÓD: krycie ustawia KOD wprost przy każdym trafieniu, przejście tylko je
   wygładza. Gdyby nie ruszyło, rozbłysk i tak wskoczy i zgaśnie. */
.blysk-sesja{
  position:absolute;inset:0;z-index:9;background:#cfefff;opacity:0;pointer-events:none;
  transition:opacity .12s linear;mix-blend-mode:screen;
}

/* --- panel dolny: ćwiczenie, pola, STRIKE --- */
.ses-panel{
  position:relative;z-index:6;flex:none;
  padding:0 14px calc(14px + env(safe-area-inset-bottom,0px));
  max-width:440px;width:100%;margin:0 auto;
}
.cw-glowa{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cw-nazwa{font-size:17px;font-weight:700;color:#eaf7ff}
.cw-grupa{font-size:9px;font-weight:800;letter-spacing:.24em;color:#4c7d95}
.cw-serie{
  display:flex;gap:5px;margin-top:9px;flex-wrap:wrap;min-height:16px;
}
.cw-serie i{
  width:15px;height:5px;background:#16293a;border:1px solid rgba(94,231,255,.18);
}
.cw-serie i.zrobiona{background:#5ee7ff;box-shadow:0 0 9px rgba(94,231,255,.75);border-color:#5ee7ff}
.cw-serie i.rekord{background:#ffd45e;box-shadow:0 0 11px rgba(255,212,94,.85);border-color:#ffd45e}

.pola{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.pole{
  border:1px solid rgba(94,231,255,.26);background:rgba(6,16,26,.6);
  padding:7px 11px;border-radius:3px;
}
.pole span{display:block;font-size:8.5px;font-weight:800;letter-spacing:.24em;color:#4c7d95}
.pole input{
  width:100%;margin-top:2px;background:none;border:0;outline:none;font-family:inherit;
  color:#5ee7ff;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;
  padding:0;-moz-appearance:textfield;
}
.pole input::-webkit-outer-spin-button,.pole input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.pole:focus-within{border-color:#5ee7ff;box-shadow:0 0 20px rgba(94,231,255,.2)}

.strike{
  width:100%;margin-top:11px;appearance:none;cursor:pointer;font-family:inherit;
  padding:16px;border:1px solid #ff3d68;background:rgba(255,61,104,.14);
  color:#ffd9e2;font-size:14px;font-weight:800;letter-spacing:.3em;border-radius:3px;
  transition:background .16s,transform .08s;
}
.strike:active{transform:translateY(2px)}
.strike:hover:not(:disabled){background:rgba(255,61,104,.28)}
.strike:disabled{opacity:.25;cursor:default;border-color:#3a2030}
.strike:focus-visible{outline:2px solid #ffd45e;outline-offset:3px}

.ses-stopka{
  display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;
  font-size:9px;font-weight:800;letter-spacing:.2em;color:#3d6478;
}
.ses-stopka b{color:#8fc4da;font-size:12px;font-variant-numeric:tabular-nums}
.ses-koniec{
  appearance:none;cursor:pointer;font-family:inherit;background:none;
  border:1px solid rgba(94,231,255,.24);color:#5d8296;
  padding:7px 13px;font-size:9px;font-weight:800;letter-spacing:.2em;border-radius:3px;
}
.ses-koniec:hover{color:#d6eefa;border-color:rgba(94,231,255,.5)}

/* --- przerwa między seriami --- */
.przerwa{
  display:flex;align-items:center;gap:11px;margin-top:11px;padding:8px 12px;
  border:1px solid rgba(94,231,255,.3);background:rgba(6,16,26,.6);border-radius:3px;
}
.przerwa-opis{font-size:8.5px;font-weight:800;letter-spacing:.2em;color:#4c7d95;line-height:1.4}
.przerwa-zegar{
  flex:1;text-align:center;font-size:24px;font-weight:800;color:#5ee7ff;
  font-variant-numeric:tabular-nums;line-height:1;
}
.przerwa-pomin{
  appearance:none;cursor:pointer;font-family:inherit;background:none;
  border:1px solid rgba(94,231,255,.28);color:#5d8296;border-radius:3px;
  padding:6px 11px;font-size:9px;font-weight:800;letter-spacing:.18em;
}

@media (prefers-reduced-motion:reduce){
  .straznik,.straznik.trafiony,.dmg{animation:none}
  .hp-tor i,.hp-tor u{transition:none}
}