/* ------------------------------------------------------------------
   app1 - "brakujace litery"

   Kolorystyka, naglowek, stopka, opis i przyciski siedza w
   app-wspolne/motyw.css, wczytywanym przed tym plikiem. Tutaj zostaje
   wylacznie to, co jest wlasciwe temu cwiczeniu: plansza ze zdaniem
   i pola na litery.

   Mechanika opiera sie na tym, ze poprawnie wpisana litera dostaje tlo
   planszy i "znika" w zdaniu, a luka jest widoczna. Wczesniej plansza
   byla czarna: luki bialymi kwadratami, trafione litery czarne. Teraz
   jest to samo, tylko odwrocone - biala karta jak w pozostalych dwoch
   cwiczeniach, luki jasnogranatowe z podkresleniem.
   ------------------------------------------------------------------ */

:root {
  /* Tlo planszy. Ten sam kolor dostaje poprawnie wpisana litera -
     stad jedna zmienna, zeby te dwie wartosci nie mogly sie rozjechac.
     Plansza to zwykla karta, wiec idzie za motywem sama z siebie. */
  --plansza: var(--karta);
  /* Luka do wypelnienia */
  --luka: #d5deef;
}

/* W ciemnym motywie luka musi byc JASNIEJSZA od planszy - odwrotnie niz
   w jasnym. Chodzi o to samo: ma byc widac, gdzie brakuje litery. */
:root[data-motyw="ciemny"] {
  --luka: #33436b;
}

#app {
  min-height: 100svh;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* ---------------------------------------------------------------
   Plansza ze zdaniem
   --------------------------------------------------------------- */

#sentence {
  display: inline-block;
  width: auto;
  max-width: min(1400px, calc(100% - 32px));
  margin: 28px auto 0;
  padding: 16px 12px;
  border: 1px solid var(--obwodka);
  border-radius: var(--zaokraglenie);
  background-color: var(--plansza);
  color: var(--tekst);
  box-shadow: var(--cien);
  font-family: "Roboto Mono", monospace;
  font-size: 2.2rem;
  letter-spacing: 2px;
  word-spacing: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: keep-all;

  @media (min-width: 1024px) {
    margin: 48px auto 0;
    padding: 26px 40px;
    font-size: 3rem;
  }
}

#sentence .word-container {
  display: inline-block;
  white-space: nowrap;
  margin: 4px 0;

  @media (min-width: 640px) {
    margin: 8px 0;
  }
}

/* Luka do wypelnienia - jasne pole z podkresleniem, jak w cwiczeniu
   na papierze. Musi byc widoczna z drugiego konca pokoju, bo to ona
   mowi, gdzie brakuje litery. */
#sentence input {
  width: 2rem;
  margin: 0 2px 0 0;
  padding: 0;
  border: 0;
  border-bottom: 3px solid var(--granat);
  border-radius: 4px 4px 0 0;
  background-color: var(--luka);
  color: var(--tekst);
  font-family: "Roboto Mono", monospace;
  font-size: 2.2rem;
  text-align: center;

  @media (min-width: 640px) {
    width: 2.6rem;
    margin: 0 4px 0 0;
  }

  @media (min-width: 1024px) {
    font-size: 3.2rem;
  }
}

/* Litera trafiona - wtapia sie w plansze, wiec zdanie czyta sie w calosci */
#sentence input.correct {
  width: 2rem;
  background-color: var(--plansza);
  border-bottom-color: transparent;
  color: var(--tekst);

  @media (min-width: 640px) {
    width: 2.6rem;
  }
}

/* Instrukcja obiecuje czerwone TLO pod bledna litera - i tak ma zostac */
#sentence input.incorrect {
  background-color: var(--czerwien);
  border-bottom-color: var(--czerwien);
  color: var(--na-kolorze);
}

#sentence input:focus,
#sentence input:focus-visible {
  outline: 2px solid var(--granat);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------
   Przyciski pomocy i podpowiedz po polsku
   --------------------------------------------------------------- */

.buttons {
  margin: 24px auto 0;
}

#polishSentence {
  margin: 20px auto 8px;
  padding: 0 16px;
  color: var(--granat);
  font-size: 2rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.3;

  @media (min-width: 1024px) {
    font-size: 2.6rem;
  }
}