/* Scena dialogowa — WREN w rogu + kwestia na dole, jak w visual novel.

   Portret to TRZY kopie tej samej grafiki w jednym gnieździe:
   - baza (wycięta z tła) stoi zawsze widoczna,
   - mrugnięcie: pełna klatka z zamkniętymi oczami, przycięta maską do samych
     oczu; pokazuje ją KOD atrybutem hidden na ułamek sekundy,
   - spawy: klatka z rozświetlonymi łączeniami, przycięta do twarzy; jej
     krycie faluje dekoracyjnie.
   Reguła ruchu bez zmian: wjazd portretu i dryf to wyłącznie transformacje. */

#dialog{position:fixed;inset:0;z-index:30;background:#02040a;overflow:hidden}
/* wariant nakładkowy: WREN wchodzi NAD trwającą scenę, nie zamiast niej */
#dialog.przezroczysty{background:transparent}

#dialog .tlo-sala{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;
}
#dialog .dialog-winieta{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,transparent 40%,rgba(2,4,10,.78) 100%);
}

/* --- gniazdo portretu: prawy dolny róg, nad dymkiem --- */
/* Dolna krawędź portretu MUSI chować się za dymkiem: grafika jest ucięta
   w pół tułowia i wisząca w powietrzu krawędź natychmiast zdradza obrazek.
   Dymek (z-index 2) przykrywa cięcie jak w klasycznych visual novel. */
/* Dół portretu ROZPŁYWA SIĘ maską zamiast kończyć cięciem bitmapy: dymek
   nie dochodzi do krawędzi ekranu, więc w szparach obok niego widać było
   ucięty tułów. Maska na gnieździe obejmuje też warstwy mrugania i spawów.

   Wygaszenie zaczyna się PÓŹNO (86%) i tylko na ostatnim skrawku. Przy
   rozpływie od 70% tło prześwitywało przez pół sylwetki i wyglądało to tak,
   jakby grafika zza pleców leżała NA niej. Dolny skrawek i tak zakrywa dymek. */
.dialog-postac{
  position:absolute;right:-3vw;bottom:15vh;z-index:1;
  width:min(42vw,196px);aspect-ratio:3/4;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 86%,transparent 100%);
}
#dialog.gra .dialog-postac{animation:postacWjazd .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes postacWjazd{from{transform:translateX(46%)}to{transform:none}}

.dialog-postac img,.dialog-postac video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* --- oko: klatka mrugnięcia + błysk optyki ---
   Maskę i wyrównanie klatki wylicza `ui/portret.js` ze współrzędnych oczu,
   bo są inne dla każdego wariantu portretu. Tu zostaje tylko układ. */
.portret-mrug{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* POWÓD: warstwa spawów to dekoracja o NIEWIDOCZNYM stanie spoczynkowym —
   portret pod nią stoi zawsze, więc zamrożone renderowanie niczego nie ukryje. */
.portret-spawy{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;
  -webkit-mask-image:radial-gradient(ellipse 34% 30% at 40% 42%,#000 55%,transparent 100%);
  mask-image:radial-gradient(ellipse 34% 30% at 40% 42%,#000 55%,transparent 100%);
}
.portret-blysk{
  position:absolute;pointer-events:none;
  mix-blend-mode:screen;
}

/* mrugnięcie: widoczne tylko przez chwilę, gdy kod zdejmie hidden;
   maska ogranicza klatkę do okolic oczu, więc drobne różnice generacji
   poza nimi nie mają jak zamigotać */
.dialog-mrug{
  -webkit-mask-image:
    radial-gradient(ellipse 17% 6% at 39% 37%,#000 55%,transparent 100%),
    radial-gradient(ellipse 11% 5% at 20% 40%,#000 55%,transparent 100%);
  mask-image:
    radial-gradient(ellipse 17% 6% at 39% 37%,#000 55%,transparent 100%),
    radial-gradient(ellipse 11% 5% at 20% 40%,#000 55%,transparent 100%);
}

/* POWÓD: warstwa spawów to czysta dekoracja o NIEWIDOCZNYM stanie
   spoczynkowym — bazowy portret pod spodem stoi zawsze; zamrożone
   renderowanie może ją najwyżej zatrzymać w pół rozbłysku. */
.dialog-spawy{
  opacity:0;
  -webkit-mask-image:radial-gradient(ellipse 34% 30% at 40% 42%,#000 55%,transparent 100%);
  mask-image:radial-gradient(ellipse 34% 30% at 40% 42%,#000 55%,transparent 100%);
}

/* --- dymek na dole: język okna Systemu + tabliczka z imieniem --- */
/* Dymek idzie OD KRAWĘDZI DO KRAWĘDZI: przy bocznych marginesach zostawały
   szpary, w których było widać dolną krawędź portretu. */
.dialog-dol{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 0 calc(10px + env(safe-area-inset-bottom));
}
.dialog-okno{border-left:none;border-right:none;border-radius:0}
.dialog-plyta{
  display:inline-block;position:relative;z-index:1;
  margin:0 0 -1px 6px;padding:6px 14px 5px;
  background:linear-gradient(160deg,rgba(14,34,52,.92),rgba(7,18,30,.95));
  border:1px solid rgba(94,231,255,.42);border-bottom:none;border-radius:3px 3px 0 0;
  font-size:11px;font-weight:800;letter-spacing:.3em;color:#5ee7ff;
}
.dialog-okno{min-height:96px}
.dialog-okno .okno-tresc{
  font-size:15px;line-height:1.65;color:#d7edf6;min-height:52px;
}

/* wskaźnik „tapnij dalej" — trójkącik oddychający transformacją */
.dialog-dalej{
  position:absolute;right:26px;bottom:14px;
  width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:9px solid rgba(94,231,255,.85);
}
#dialog .dialog-dalej{animation:dalejOddech 1.1s ease-in-out infinite alternate}
@keyframes dalejOddech{from{transform:translateY(0)}to{transform:translateY(4px)}}

@media (prefers-reduced-motion:reduce){
  #dialog.gra .dialog-postac,#dialog .dialog-dalej{animation:none}
}