/* LOV³ runda 2 - układ strony lov3.love: pierwszy ekran (#s-intro), niebo, strona po odczycie (#finale).
   Wymaga: fonts/lov3-kroje.css, lov3-tokeny.css, lov3-przyciski.css (w tej kolejności, przed tym plikiem).
   Wartości z wzorców R2-1 (402x874), R2-2 (1440x900) i R2-8 (402x874). */

/* niebo: jedno nieruchome płótno pod całą stroną (zastępuje .starfield) */
.r2-niebo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.r2-niebo[hidden]{display:none}
#s-reveal{position:relative;padding-left:24px;padding-right:24px}
.r2-niebo-odczyt{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:-1;display:block}

/* pierwszy ekran, telefon (do 1023 px): treść przy dole, niebo nad nią */
#s-intro{justify-content:flex-start;align-items:stretch;text-align:left;padding:32px 24px 28px}
.r2-znak{display:block;align-self:flex-start;height:36px;line-height:0}      /* jedyne miejsce znaku na stronie */
.r2-znak svg{display:block;height:100%;width:auto}
.r2-dol{margin-top:auto;display:flex;flex-direction:column}
.r2-sygnatura{margin:0 0 24px;color:var(--papier)}
.r2-sygnatura .wers{display:block;text-wrap:balance}
.r2-drogi{margin:0 0 38px}
.r2-podpis{margin:0;font:500 15px/20px var(--f-interfejs);color:var(--papier2)}
.r2-podpis .wers{display:block}

/* pierwszy ekran, komputer (od 1024 px) */
@media (min-width:1024px){
  .r2-drogi{flex-direction:row;gap:16px}.r2-drogi>*{width:auto;min-width:280px}
  /* 120 px boku; w oknach 1024-1111 px bok zwęża się, żeby rząd 3 × 280 + 2 × 16 = 872 px mieścił się bez przewijania w poziomie */
  #s-intro{padding:64px min(120px, calc((100% - 872px) / 2)) 40px}
  .r2-znak{height:52px}
  .r2-sygnatura{width:600px;margin-bottom:92px}
  .r2-drogi{margin-bottom:128px}
}

/* strona po odczycie: dwa rzędy, każde zdanie nad swoim przyciskiem */
#fin-line1{margin-top:30px;text-align:left;width:100%;font:400 26px/32px var(--f-naglowek);color:var(--papier)}
#fin-line2{margin-top:4px;text-align:left;width:100%;font:italic 400 22px/28px var(--f-naglowek);color:var(--papier2);opacity:1;transition:none}
#para{margin:28px 0 0;max-width:none;width:100%;text-align:left}
#para-lead{margin:0 0 4px;color:var(--papier)}
.r2-legenda{margin:0 0 4px;color:var(--papier2)}
.r2-pola{display:flex;gap:12px;margin:0 0 12px}
/* bez strzałek (DECYZJE.md): appearance none, bez cyjanowej ikony .sel, prawy margines jak lewy */
.r2-pola .sel{flex:1;min-width:0;height:52px;box-sizing:border-box;padding:0 12px;border:1px solid var(--linia);border-radius:8px;
  font:400 16px/24px var(--f-interfejs);color:var(--papier);text-align:left;text-align-last:left;background-image:none}
.r2-pola .sel:last-child{flex:1.2}
.r2-pola .sel:focus{border-color:var(--linia)}
.r2-pola .sel:focus-visible{outline:var(--fokus-grubosc) solid var(--fokus);outline-offset:var(--fokus-odstep-px);border-color:var(--linia)}

/* fokus znaku: jak przyciski - 2 px w kolorze tekstu, odstęp 2 px w kolorze tła */
.r2-znak:focus-visible{outline:var(--fokus-grubosc) solid var(--fokus);outline-offset:var(--fokus-odstep-px);box-shadow:0 0 0 var(--fokus-odstep-px) var(--fokus-odstep)}
.r2-znak:focus:not(:focus-visible){outline:none}
#para-go{width:100%;margin-top:0}
#para-note{margin-top:12px;font:400 15px/20px var(--f-interfejs);color:var(--papier2);opacity:1}
#r2-dalej{width:100%;text-align:left;margin-top:34px}
#r2-dalej p{margin:0 0 42px;color:var(--papier)}
#r2-dalej .tecza{width:100%}
#again.ramka{width:100%;margin-top:12px}
@media (min-width:1024px){#fin-line1,#fin-line2,#para,#r2-dalej,#again.ramka{max-width:420px;margin-left:auto;margin-right:auto}}