/* ------------------------------------------------------------------
   app3 - "tlumaczenie zdan"

   Kolorystyka, naglowek, stopka, opis i przyciski siedza w
   app-wspolne/motyw.css, wczytywanym przed tym plikiem.

   Zdanie po polsku wyglada tak samo jak w app2 (biala karta, wersaliki,
   krok maszynowy) - w obu cwiczeniach jest tym samym: tekstem, z ktorego
   sie pracuje.
   ------------------------------------------------------------------ */

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

/* ---------------------------------------------------------------
   Zdanie po polsku
   --------------------------------------------------------------- */

#sentence {
  width: min(var(--szerokosc), 100% - 32px);
  margin: 24px auto 0;
  padding: 16px 12px;
  background-color: var(--karta);
  border: 1px solid var(--obwodka);
  border-radius: var(--zaokraglenie);
  box-shadow: var(--cien);
  color: var(--tekst);
  font-family: "Roboto Mono", "Roboto", monospace;
  font-size: 2rem;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;

  @media (min-width: 640px) {
    padding: 24px 20px;
    font-size: 2.6rem;
  }

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

/* ---------------------------------------------------------------
   Pole na tlumaczenie

   Obwodka niesie informacje zwrotna: zielona przy dobrym znaku,
   czerwona przy zlym. Klasy ustawia app.js przy kazdym nacisnieciu.
   --------------------------------------------------------------- */

#translationInput {
  display: block;
  width: min(100rem, 100% - 32px);
  margin: 20px auto;
  padding: 12px 16px;
  border: 2px solid var(--obwodka);
  border-radius: 6px;
  background-color: var(--karta);
  color: var(--tekst);
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-size: 2rem;

  @media (min-width: 640px) {
    font-size: 2.4rem;
  }

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

#translationInput:focus {
  outline: none;
  border-color: var(--granat);
  box-shadow: 0 0 0 3px var(--pierscien);
}

#translationInput.correct,
#translationInput.correct:focus {
  border-color: var(--zielen);
  box-shadow: 0 0 0 3px var(--pierscien-zielen);
}

#translationInput.incorrect,
#translationInput.incorrect:focus {
  border-color: var(--czerwien);
  box-shadow: 0 0 0 3px var(--pierscien-czerwien);
}

/* ---------------------------------------------------------------
   Ekran po ostatnim zdaniu - app.js tylko przelacza display
   --------------------------------------------------------------- */

#summary {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
  padding: 30vh 16px 0;
  background-color: var(--granat);
  color: var(--na-kolorze);
  text-align: center;
  text-transform: uppercase;
  line-height: 1.6;
  font-size: 2.6rem;

  @media (min-width: 640px) {
    font-size: 3.6rem;
  }

  @media (min-width: 1024px) {
    padding: 30vh 50px 0;
    font-size: 4.8rem;
  }

  @media (min-width: 1400px) {
    font-size: 6rem;
  }
}

/* W ciemnym motywie akcent jest jasny, a ten ekran zajmuje cale okno -
   po skonczonym cwiczeniu wieczorem bylby blyskiem w oczy. Dlatego tutaj,
   jako jedyny, idzie tlem w druga strone: ciemna plansza, jasny napis. */
:root[data-motyw="ciemny"] #summary {
  background-color: var(--granat-jasny);
  color: var(--tekst);
}