/* ============================================
   BOOZNIAK FLASHCARDS - STYLES
   ============================================ */

/* ============================================
   CSS VARIABLES - KOLORY BOOZNIAK
   ============================================ */
:root {
  /* Kolory podstawowe */
  --boozniak-orange: #fdb21a;
  --boozniak-graphite: #3d4e5c;
  
  /* Kolory dodatkowe */
  --boozniak-burgundy: #a0354a;
  --boozniak-purple: #673AB7;
  --boozniak-teal: #009688;
  
  /* Odcienie szarości */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* Kolory dla fiszek */
  --card-front-bg: #f9fafb;
  --card-back-bg: #f0fdf4;
  --card-back-border: #bbf7d0;
  --card-back-text: #166534;
  
  /* Przejścia */
  --transition-fast: 0.2s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.6s;
}

/* ============================================
   ANIMACJE PRZEJŚĆ MIĘDZY WIDOKAMI
   ============================================ */

/* Fade in/out dla widoków */
#loginView,
#settingsView,
#quizView,
#resultsView {
  animation: fadeIn 0.3s ease-in-out;
}

#loginView.hidden,
#settingsView.hidden,
#quizView.hidden,
#resultsView.hidden {
  animation: fadeOut 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ============================================
   TYPOGRAFIA
   ============================================ */
body {
  font-family: 'Inter', sans-serif;
}

.font-american-typewriter {
  font-family: "American Typewriter Semibold", "American Typewriter", Consolas, "Courier New", Courier, monospace;
  font-weight: 600;
}

/* ============================================
   ANIMACJA FISZKI (3D FLIP)
   ============================================ */
.card-container {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 26rem;  /* Minimalna wysokość */
  max-height: 26rem;  /* Maksymalna wysokość - zapobiega skokowi */
  overflow: visible;  /* Dla animacji 3D */
}

.card-container:hover {
  /* transform usunięty - zapobiega "skokowi" ekranu */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-2xl */
}

.card-container:active {
  /* transform usunięty - zapobiega "skokowi" ekranu */
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform var(--transition-slow);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.card-inner.is-flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Wymuś własną warstwę kompozytującą (GPU) na obu stronach fiszki -
     na iPadzie/Safari backface-visibility potrafi zawodzić (widać
     jednocześnie przód i tył, jeden lustrzany) gdy przeglądarka nie
     utworzy dla danego elementu osobnej warstwy 3D, co zdarza się
     niedeterministycznie zależnie od układu strony (np. w pionie na
     tablecie, gdzie inaczej się przelicza wysokość karty niż w poziomie).
     translateZ(0) jest standardowym sposobem wymuszenia takiej warstwy. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* UWAGA: żadnego overflow na .card-face! Ustawienie overflow innego niż
     "visible" na elemencie wewnątrz kontekstu preserve-3d wymusza w WebKit
     (Safari/iPad) spłaszczenie warstwy 3D, przez co backface-visibility
     przestaje działać i podczas obracania widać JEDNOCZEŚNIE pytanie
     i odpowiedź nałożone na siebie. Przewijanie długich treści zapewniają
     #wordToTranslate/#wordAnswer, które mają własne overflow-y: auto.
     Flex usunięty - jest w wewnętrznym divie. */
}

.card-front {
  /* Jawny transform (zamiast domyślnego "brak transformu") - w niektórych
     wersjach Safari backface-visibility liczy się poprawnie tylko wtedy,
     gdy OBIE strony fiszki mają jawnie zdefiniowaną transformację 3D. */
  -webkit-transform: translateZ(0) rotateY(0deg);
  transform: translateZ(0) rotateY(0deg);
}

.card-back {
  -webkit-transform: translateZ(0) rotateY(180deg);
  transform: translateZ(0) rotateY(180deg);
}

/* ============================================
   PRZYCISKI - CUSTOM STYLES
   ============================================ */

/* Przycisk Start - hover z kolorem Boozniak */
#startButton:hover:not(:disabled) {
  background-color: var(--boozniak-orange);
}

/* Przycisk Dalej - kolor Boozniak */
#nextButton {
  background-color: var(--boozniak-orange);
}

#nextButton:hover {
  background-color: #f5a509;
}

/* Przycisk Restart - hover z kolorem Boozniak */
#restartButton:hover {
  background-color: var(--boozniak-orange);
}

/* Przyciski kierunku tłumaczenia - aktywny stan */
.direction-btn.active,
.direction-btn[aria-pressed="true"] {
  background-color: var(--boozniak-graphite);
  color: white;
  border: 2px solid var(--boozniak-graphite);
  font-weight: 600;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Dark mode - aktywny przycisk kierunku z pomarańczową czcionką */
.dark .direction-btn.active,
.dark .direction-btn[aria-pressed="true"] {
  background-color: var(--boozniak-graphite);
  color: var(--boozniak-orange);
  border: 2px solid var(--boozniak-orange);
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(253, 178, 26, 0.2);
}

/* Dark mode - nieaktywne przyciski kierunku */
.dark .direction-btn:not(.active):not([aria-pressed="true"]) {
  background-color: var(--gray-700);
  color: var(--gray-300);
}

/* Hover dla nieaktywnych przycisków */
.direction-btn:not(.active):not([aria-pressed="true"]):hover {
  background-color: var(--gray-600);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ============================================
   PRZYCISKI GŁOŚNIKA (SPEAKER)
   ============================================ */
button[id^="speakButton"]:hover {
  color: var(--boozniak-orange);
}

button[id^="speakButton"]:active {
  color: #f5a509;
}

/* Animacja speaking - pulsujący pierścień */
@keyframes speakPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(107, 114, 128, 0.7); /* gray-500 w light mode */
  }
  50% {
    box-shadow: 0 0 0 10px rgba(107, 114, 128, 0);
  }
}

button[id^="speakButton"].speaking {
  animation: speakPulse 1s ease-out infinite;
  color: rgb(107, 114, 128);
  background-color: rgba(107, 114, 128, 0.1);
}

/* Dark mode - pomarańczowy pulsujący pierścień */
@keyframes speakPulseDark {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(253, 178, 26, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(253, 178, 26, 0);
  }
}

.dark button[id^="speakButton"].speaking {
  animation: speakPulseDark 1s ease-out infinite;
  color: var(--boozniak-orange);
  background-color: rgba(253, 178, 26, 0.2);
}

/* ============================================
   RESPONSYWNOŚĆ - MOBILE FIRST
   ============================================ */

/* Desktop i tablet - ograniczona szerokość kontenera */
@media (min-width: 641px) {
  #mainContainer {
    max-width: 512px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* #quizView jest rodzeństwem #mainContainer w <body> (display:flex), nie jego
   dzieckiem, i - inaczej niż #mainContainer - nie ma żadnego stylu szerokości.
   Bez tego kurczy się do naturalnej szerokości treści (shrink-to-fit flexboxa).
   Dotyczy to tylko zakresu 641-1023px (telefon w poziomie / tablet), gdzie
   nie ma jeszcze position:fixed wyciągającego go z tego układu - od 1024px
   w górę quizView i tak dostaje własny układ pełnoekranowy (patrz niżej),
   więc górna granica jest tu celowa, żeby go nie nadpisać. */
#quizView {
  width: 100%;
}

@media (min-width: 641px) and (max-width: 1023px) {
  #quizView {
    max-width: 512px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Małe ekrany - optymalizacja */
@media (max-width: 640px) {
  /* MainContainer pełna wysokość na mobile */
  #mainContainer {
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  /* UKRYJ nagłówek "FISZKI" i box z tytułem w Settings View NA MOBILE */
  #app #settingsTitle {
    display: none;
  }
  
  #app #settingsSubtitle {
    display: none;
  }
  
  /* WIĘKSZE ikony głośnika na mobile */
  #quizView button[id^="speakButton"] svg {
    width: 2rem; /* 32px zamiast 24px */
    height: 2rem;
  }
  
  /* Większy padding dla przycisków głośnika */
  #quizView button[id^="speakButton"] {
    padding: 1rem;
  }
  
  .card-container {
    height: 26rem; /* 416px - zgodne z max-height */
  }
  
  #wordToTranslate {
    font-size: 2rem; /* 32px - zwiększone z 30px */
    line-height: 2.0 !important; /* 🔧 ZWIĘKSZONE dla lepszej czytelności */
    letter-spacing: 0.02em;
    padding: 2rem;
    max-height: 18rem;
    overflow-y: auto;
  }
  
  #wordAnswer {
    font-size: 1.75rem; /* 28px - zwiększone z 24px */
    line-height: 2.0 !important; /* 🔧 ZWIĘKSZONE dla lepszej czytelności */
    letter-spacing: 0.02em;
    padding: 2rem;
    max-height: 18rem;
    overflow-y: auto;
  }
  
  /* Pełna wysokość na mobile */
  body.text-gray-900 {
    align-items: center;
    padding: 0;
  }
  
  #app #mainContainer {
    margin: 0;
    border-radius: 0;
    max-height: 100vh;
    min-height: 100vh;
    overflow-y: auto; /* Pozwól na scroll dla settings/login */
  }
  
  /* BLOKADA scrollu TYLKO dla widoku quizu */
  #quizView:not(.hidden) ~ * {
    overflow: hidden;
  }
  
  /* NOWY LAYOUT: Tylko dla widoku quizu - UPROSZCZONY */
  #quizView:not(.hidden) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 1rem !important;
    overflow: hidden !important;
    background: white !important;
    z-index: 9999 !important;
  }
  
  /* Dark mode tło dla quizu */
  .dark #quizView:not(.hidden) {
    background: rgb(31, 41, 55) !important;
  }
  
  /* Header z przyciskami - na samej górze */
  #quizView:not(.hidden) > div:first-of-type {
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    right: 1rem;
    z-index: 10;
  }
  
  /* Licznik fiszek - POD headerem
     top zwiększony z 5.5rem, bo nagłówek może mieć 3 linijki
     (przycisk Zakończ sesję + imię + email) i się z nim zlewał */
  #quizView:not(.hidden) > div:nth-of-type(2) {
    position: absolute;
    top: 6.25rem;
    left: 1rem;
    right: 1rem;
    z-index: 10;
  }

  /* Progress bar - POD licznikiem */
  #quizView:not(.hidden) > div:nth-of-type(3) {
    position: absolute;
    top: 8.25rem;
    left: 1rem;
    right: 1rem;
    z-index: 10;
  }

  /* Spacer elastyczny PRZED fiszką - wypycha ją w dół */
  #quizView:not(.hidden)::before {
    content: "";
    display: block;
    flex: 0.3; /* 30% przestrzeni nad fiszką */
  }

  /* Wrapper dla fiszki - wyśrodkowany vertical */
  #quizView:not(.hidden) .card-container {
    position: absolute;
    top: 50%;
    left: 1rem;
    right: 1rem;
    transform: translateY(-50%);
    margin: 0 auto;
    width: calc(100% - 2rem);
    height: 29rem;      /* Stała wysokość - zapobiega skokowi */
    min-height: 29rem;  /* Minimalna wysokość */
    max-height: 29rem;  /* Maksymalna wysokość */
  }

  /* Sama fiszka - stała wysokość zgodna z card-container */
  #quizView:not(.hidden) .card-inner {
    height: 29rem;
    width: 100%;
  }

  /* Etykieta "PYTANIE"/"ODPOWIEDŹ" + treść - bliżej góry karty zamiast
     wyśrodkowane na całej jej wysokości, żeby zyskać miejsce na treść */
  #quizView:not(.hidden) .card-face > div:first-child {
    justify-content: flex-start !important;
    padding-top: 1.5rem !important;
  }

  /* Instrukcja "Kliknij..." - POD fiszką z opóźnieniem */
  #quizView:not(.hidden) > p {
    position: absolute;
    bottom: 10.5rem;  /* Nad przyciskami */
    left: 1rem;
    right: 1rem;
    text-align: center;
    z-index: 10;
    opacity: 0;
    animation: fadeInDelayed 0.5s ease-in 0.3s forwards;
  }
  
  @keyframes fadeInDelayed {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* Ukryj komunikat kiedy fiszka jest odwrócona (widać przyciski) */
  #quizView:not(.hidden):has(.card-inner.is-flipped) > p {
    display: none;
  }
  
  /* Przyciski FIXED na dole - thumb zone - DOMYŚLNIE (light mode) */
  #quizView:not(.hidden) #knowledgeButtons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: linear-gradient(to top, 
      rgb(255, 255, 255) 0%, 
      rgb(255, 255, 255) 60%, 
      rgba(255, 255, 255, 0.9) 80%, 
      rgba(255, 255, 255, 0) 100%);
    padding: 2rem 1rem 1.5rem 1rem;
    margin: 0;
  }
  
  /* Dark mode gradient dla przycisków - MUSI BYĆ PO domyślnym */
  .dark #quizView:not(.hidden) #knowledgeButtons {
    background: linear-gradient(to top, 
      rgb(31, 41, 55) 0%, 
      rgb(31, 41, 55) 60%, 
      rgba(31, 41, 55, 0.9) 80%, 
      rgba(31, 41, 55, 0) 100%) !important;
  }
}

/* Tablet w pionie - jak mobile */
@media (min-width: 641px) and (max-width: 1023px) and (orientation: portrait) {
  body {
    align-items: center !important;
    padding: 0 !important;
  }
  
  #mainContainer {
    margin: 0 !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
    height: 100vh !important;
  }
  
  .card-container {
    height: 18rem;
  }
}

/* Bardzo małe ekrany (iPhone SE, małe Androidy) */
@media (max-width: 380px) {
  .card-container {
    height: 14rem !important; /* 224px - mniejsza fiszka */
  }
  
  #wordToTranslate {
    font-size: 1.5rem !important; /* 24px */
    line-height: 1.8 !important; /* 🔧 Zwiększone dla mobile */
    padding: 0.75rem 0.5rem;
  }
  
  #wordAnswer {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.8 !important; /* 🔧 Zwiększone dla mobile */
    padding: 0.75rem 0.5rem;
  }
  
  /* Mniejsze ikony głośnika */
  #knowledgeButtons button svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }
  
  /* Mniejszy padding w fiszkach */
  .card-face {
    padding: 1rem !important;
  }
  
  /* Mniejsze logo w fiszce */
  .card-face img {
    width: 4rem !important; /* 64px zamiast 96px */
  }
  
  /* Mniejsze labele */
  #frontLabel, #backLabel {
    font-size: 0.75rem !important;
  }
}

/* Średnie ekrany (tablety) */
@media (min-width: 641px) and (max-width: 1023px) {
  .card-container {
    height: 26rem; /* 416px */
  }
  
  #wordToTranslate {
    font-size: 1.875rem; /* 30px */
    line-height: 1.4 !important;
    letter-spacing: 0.02em;
    padding: 1rem;
  }

  #wordAnswer {
    font-size: 1.5rem; /* 24px */
    line-height: 1.4 !important;
    letter-spacing: 0.02em;
    padding: 1rem;
  }
  
  /* Na większych ekranach content na górze */
  body {
    align-items: flex-start !important;
    overflow-y: auto !important;
  }
}

/* Duże ekrany (laptopy i większe) - bardziej prostokątny */
@media (min-width: 1024px) {
  /* QUIZ VIEW - FULL SCREEN NA DESKTOP */
  #quizView:not(.hidden) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: white !important;
    z-index: 9999 !important;
    padding: 2rem !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* Dark mode dla quiz view */
  .dark #quizView:not(.hidden) {
    background: rgb(31, 41, 55) !important;
  }
  
  /* Container dla zawartości quizu - ograniczona szerokość */
  #quizView:not(.hidden) > * {
    max-width: 56rem; /* 896px */
    width: 100%;
  }
  
  /* Wysokość fiszki dopasowana do wysokości okna. Przy sztywnych 22rem na
     niższych ekranach (tablet w poziomie, niskie okno przeglądarki) suma
     nagłówka, fiszki, instrukcji i przycisków przekraczała wysokość ekranu
     i przyciski WIEM/NIE WIEM były ucięte. 28rem to zmierzona wysokość
     całej reszty interfejsu; clamp() gwarantuje, że fiszka nie zrobi się
     absurdalnie mała ani nie urośnie powyżej dotychczasowych 22rem. */
  .card-container {
    height: clamp(12rem, calc(100vh - 28rem), 22rem);
    min-height: 12rem; /* Nadpisz wartość z podstawowego stylu */
    max-height: 22rem; /* Nadpisz wartość z podstawowego stylu */
    max-width: 48rem; /* 768px */
    margin: 0 auto; /* Wyśrodkowanie w poziomie */
  }
  
  #wordToTranslate {
    font-size: 2rem; /* 32px */
  }

  #wordAnswer {
    font-size: 1.625rem; /* 26px */
  }

  /* Limit wysokości tekstu ustawiony jest na końcu pliku (blok min-width:1024px
     przy komentarzu o line-height) - tamta reguła jest później w kaskadzie
     i i tak wygrywa, więc trzymamy ją w jednym miejscu. */

  /* Zmniejsz marginesy wokół fiszki na dużych ekranach */
  #quizView .mb-4 {
    margin-bottom: 0.75rem !important; /* Zmniejsz z 1rem */
  }
  
  #knowledgeButtons {
    margin-top: 1rem !important; /* Zmniejsz z 1.5rem */
  }
  
  /* Na większych ekranach content na górze */
  body {
    align-items: flex-start !important;
    overflow-y: auto !important;
  }
}

/* Bardzo duże ekrany (>1280px) */
@media (min-width: 1280px) {
  /* Container dla zawartości quizu - większa szerokość */
  #quizView:not(.hidden) > * {
    max-width: 64rem; /* 1024px */
  }
  
  .card-container {
    height: 24rem; /* 384px - zmniejszone z 30rem (480px) */
    min-height: 24rem; /* Nadpisz wartość z podstawowego stylu */
    max-height: 24rem; /* Nadpisz wartość z podstawowego stylu */
    max-width: 56rem; /* 896px */
    margin: 0 auto; /* Wyśrodkowanie w poziomie */
  }
  
  #wordToTranslate {
    font-size: 2.125rem; /* 34px */
  }

  #wordAnswer {
    font-size: 1.75rem; /* 28px */
  }
}

/* Ekstra duże ekrany (>1536px) */
@media (min-width: 1536px) {
  /* Container dla zawartości quizu - największa szerokość */
  #quizView:not(.hidden) > * {
    max-width: 72rem; /* 1152px */
  }
  
  .card-container {
    height: 26rem; /* 416px - zmniejszone z 32rem (512px) */
    min-height: 26rem; /* Nadpisz wartość z podstawowego stylu */
    max-height: 26rem; /* Nadpisz wartość z podstawowego stylu */
    max-width: 64rem; /* 1024px */
    margin: 0 auto; /* Wyśrodkowanie w poziomie */
  }
  
  #wordToTranslate {
    font-size: 2.25rem; /* 36px */
  }

  #wordAnswer {
    font-size: 1.875rem; /* 30px */
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Ukrywanie elementu */
.hidden {
  display: none !important;
}

/* Ukrycie wizualne (zachowuje miejsce w DOM) */
.invisible {
  visibility: hidden !important;
}

/* Animacja fade-in */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn var(--transition-normal);
}

/* Animacja dla przycisków Znam/Nie znam */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#knowledgeButtons:not(.hidden) {
  animation: scaleIn 0.3s ease-out;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus dla użytkowników klawiatury */
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--boozniak-orange);
  outline-offset: 2px;
}

/* Lepsze kontrasy dla tekstu */
.text-boozniak-orange {
  color: var(--boozniak-orange);
}

.bg-boozniak-orange {
  background-color: var(--boozniak-orange);
}

.bg-boozniak-graphite {
  background-color: var(--boozniak-graphite);
}

.bg-boozniak-burgundy {
  background-color: var(--boozniak-purple); /* Fioletowy #673AB7 */
}

.bg-boozniak-burgundy:hover {
  background-color: #5e35b1; /* Ciemniejszy fioletowy */
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .qr-overlay,
  footer {
    display: none;
  }
  
  body {
    background: white;
  }
}
/* ============================================
   IKONA STRZAŁEK NA FISZCE
   ============================================ */
.card-face svg.absolute {
  z-index: 10 !important;
}

/* ============================================
   PUDEŁKA - DARK MODE
   ============================================ */
/* Wymuszenie szarego tła dla pudełek w dark mode */
.dark .box-container {
  background-color: rgb(55, 65, 81) !important; /* gray-700 */
}

/* ============================================
   FISZKA - KOLORY TEKSTU
   ============================================ */
/* Tylna strona fiszki (zielona) - kolory tekstu */
.card-back #backLabel {
  color: rgb(21, 128, 61); /* green-700 w light mode */
}

.card-back #wordAnswer {
  color: rgb(22, 101, 52); /* green-800 w light mode */
}

/* Dark mode - białe teksty */
.dark .card-back #backLabel {
  color: rgb(209, 213, 219); /* gray-300 */
}

.dark .card-back #wordAnswer {
  color: white;
}

/* ============================================
   DUCH CONFIRMATION
   ============================================ */
#confirmationGhost {
  width: 192px;
  height: 192px;
}

@media (min-width: 1024px) {
  #confirmationGhost {
    width: 240px;
    height: 240px;
  }
}

/* ============================================
   BLOKADA TRYBU POZIOMEGO NA TELEFONACH - iOS Safari nie honoruje blokady
   orientacji ani z manifest.json, ani z JS (screen.orientation.lock), więc
   to jedyny niezawodny sposób. Szerokość/wysokość podane jawnie w vw/vh
   (zamiast "inset:0") oraz #mainContainer i #quizView jawnie ukryte poniżej
   - to zabezpieczenie na wypadek, gdyby samo position:fixed miało w Safari
   problem z pełnym pokryciem ekranu wewnątrz #body ustawionego na
   display:flex (obserwowane na realnym iPhonie, mimo poprawnych wymiarów
   w narzędziach deweloperskich).
   ============================================ */
#landscapeBlock {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: #fff;
}

.dark #landscapeBlock {
  background: var(--gray-900);
}

.landscape-block-logo {
  max-height: 60px;
  width: auto;
  margin-bottom: 1.75rem;
}

.landscape-block-logo-dark {
  display: none;
}

.dark .landscape-block-logo-light {
  display: none;
}

.dark .landscape-block-logo-dark {
  display: block;
}

.landscape-block-icon {
  margin-bottom: 1.25rem;
}

.landscape-block-phone {
  transform-origin: 50px 50px;
  animation: landscape-rotate-hint 3s ease-in-out infinite;
}

@keyframes landscape-rotate-hint {
  0%, 35% { transform: rotate(0deg); }
  55%, 75% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .landscape-block-phone {
    animation: none;
  }
}

.landscape-block-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--boozniak-graphite);
  margin-bottom: 0.5rem;
}

.dark .landscape-block-title {
  color: #f3f5f6;
}

.landscape-block-text {
  color: var(--gray-500);
  max-width: 300px;
  font-size: 0.95rem;
}

/* Tylko urządzenia dotykowe (pointer: coarse) - bez tego warunku komunikat
   "Obróć telefon" pokazałby się też na komputerze z niskim oknem przeglądarki,
   gdzie obracać nie ma czego. */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  #landscapeBlock {
    display: flex !important;
  }

  /* Zabezpieczenie - nawet gdyby #landscapeBlock nie pokrył całego ekranu,
     zepsuta zawartość i tak nie będzie widoczna */
  #mainContainer,
  #quizView {
    display: none !important;
  }
}

/* ============================================
   MOBILE LANDSCAPE - optymalizacja dla poziomej orientacji (w praktyce
   nieaktywne - #landscapeBlock i reguła powyżej ukrywają całą zawartość
   w tych warunkach, zostawione jako zapasowe dopasowanie)
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  /* Body - zapobiegnij poziomemu scrollowi */
  body {
    overflow-x: hidden;
    width: 100vw;
  }
  
  /* Poszerzony kontener - wykorzystaj całą szerokość */
  #app {
    padding: 0.5rem 1rem;
    max-width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
  }
  
  /* Logo - DUŻE, bardzo widoczne */
  img[alt*="logo"], img[alt*="Logo"] {
    max-height: 70px !important;
    width: auto !important;
  }
  
  /* Nagłówek z logo - flex row */
  #app > div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem !important;
  }
  
  /* Zapobiegnij poziomemu scrollowi - wszystkie widoki */
  #settingsView, #quizView, #modeSelectionView, #confirmationView, #resultsView, #statsView {
    overflow-x: hidden;
    max-width: 100%;
  }
  
  /* Wszystkie kontenery - nie wychodź poza ekran */
  div, button, section {
    max-width: 100%;
    overflow-wrap: break-word;
  }
  
  /* Grid i flex - nie przekraczaj szerokości */
  .grid, .flex {
    max-width: 100%;
  }
  
  /* Zmniejsz wysokość nagłówków */
  h1, h2 {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  h3 {
    font-size: 1rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  /* Kompaktowy header w quizie */
  #quizView > div:first-child {
    margin-bottom: 0.5rem !important;
  }
  
  /* Fiszka - optymalna wysokość dla landscape */
  #flashcardContainer {
    min-height: 160px !important;
    max-height: 200px !important;
    padding: 1.25rem !important;
  }
  
  .flashcard-inner {
    font-size: 1.5rem !important;
  }
  
  /* Przyciski ZNAM/NIE ZNAM - większe, wyraźniejsze */
  #knownButton, #unknownButton {
    padding: 0.75rem 2rem !important;
    font-size: 1rem !important;
  }
  
  #knowledgeButtons {
    gap: 1.5rem !important;
  }
  
  /* Progress - kompaktowy */
  #currentQuestion, #totalQuestions {
    font-size: 1rem !important;
  }
  
  /* Instrukcje - ukryj na landscape */
  .lg\:hidden {
    display: block !important;
  }
  
  p.text-center.text-base {
    display: none !important;
  }
  
  /* Przyciski w Settings - kompaktowe aby nie wywoływać scrolla */
  button {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Box stats - kompaktowe */
  #boxStatsContainer > div {
    padding: 0.75rem !important;
  }
  
  /* Zmniejsz marginesy między sekcjami */
  .mb-6 {
    margin-bottom: 0.75rem !important;
  }
  
  .mb-4 {
    margin-bottom: 0.5rem !important;
  }
  
  /* Streak - inline */
  #streakDays {
    font-size: 1rem !important;
  }
  
  /* Header buttons (wyloguj, zakończ sesję) - w jednej linii z logo */
  #settingsView > div:first-child,
  #quizView > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  /* Dark mode toggle - zawsze po prawej stronie */
  #settingsView > div:first-child > div:first-child,
  #quizView > div:first-child > div:first-child {
    order: 1;
    align-self: flex-start;
  }
  
  #settingsView #darkModeToggle,
  #quizView #darkModeToggleQuiz {
    order: 2;
    align-self: flex-start;
    margin-left: auto;
  }
  
  /* Mode selection - kompaktowe, bez poziomego scrolla */
  #modeSelectionView .space-y-4 > button {
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
    width: 100% !important;
  }
  
  /* Kierunek tłumaczenia - mniejsze przyciski */
  .direction-btn {
    padding: 0.5rem !important;
    font-size: 0.75rem !important;
  }
  
  /* Confirmation view - kompaktowy */
  #confirmationView {
    padding: 1rem !important;
  }
  
  #confirmationCount {
    font-size: 2rem !important;
  }
  
  /* Email pod przyciskami - mniejszy */
  #userEmail, #userEmailQuiz {
    font-size: 0.75rem !important;
  }
  
  /* Stats - kompaktowe */
  #statsView .space-y-3 > div,
  #statsView .space-y-4 > div {
    padding: 0.75rem !important;
  }
  
  /* Dark mode toggle - mniejszy */
  button[id*="darkModeToggle"] {
    font-size: 1.25rem !important;
  }
}

/* ============================================
   DARK MODE TOGGLE - większy touch target na mobile
   ============================================ */

/* Przycisk dark mode dla loginView - w prawym górnym rogu mainContainer */
#darkModeToggleLogin {
  position: absolute !important;
  top: 0.5rem !important;
  right: 1.5rem !important;
  z-index: 10 !important;
  display: none !important; /* Domyślnie ukryty */
}

/* Pokaż przycisk TYLKO gdy mainContainer zawiera widoczny loginView */
#mainContainer:has(#loginView:not(.hidden)) #darkModeToggleLogin {
  display: flex !important;
}

@media (max-width: 1023px) {
  /* Na mobile - lekki padding od krawędzi */
  #darkModeToggleLogin {
    top: 0.5rem !important;
    right: 0.5rem !important;
  }
  
  /* Wszystkie przyciski dark mode - min 44px touch target */
  button[id*="darkModeToggle"] {
    padding: 0.75rem !important;  /* 12px padding */
    font-size: 2rem !important;   /* 32px ikona */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Ikony wewnątrz - większe */
  button[id*="darkModeToggle"] span {
    font-size: 2rem;
    line-height: 1;
  }
}

/* Na bardzo małych ekranach - jeszcze większe */
@media (max-width: 640px) {
  button[id*="darkModeToggle"] {
    padding: 1rem !important;     /* 16px padding */
    font-size: 2.25rem !important; /* 36px ikona */
    min-width: 48px;
    min-height: 48px;
  }
  
  button[id*="darkModeToggle"] span {
    font-size: 2.25rem;
  }
}

/* ============================================
   PROGRESS BARS
   ============================================ */

/* Quiz progress bar */
#quizProgressBar {
  background-color: #fdb21a;
  height: 8px;
  min-width: 4px;
  border-radius: 9999px;
  transition: width 0.3s ease;
  display: block;
}

/* Stats progress bar */
#statsProgressBar {
  background-color: #3b82f6;
  height: 12px;
  min-width: 4px;
  border-radius: 9999px;
  transition: width 0.5s ease;
  display: block;
}

/* ============================================
   STATS VIEW - PUDEŁKA
   ============================================ */

/* Pudełko 1 - NIE ZNAM */
.stats-box-1 {
  background-color: #fef2f2;
}

.dark .stats-box-1 {
  background-color: rgb(55, 65, 81); /* gray-700 */
}

.stats-box-1-text {
  color: #ff0000;
}

.dark .stats-box-1-text {
  color: rgb(248, 113, 113); /* red-400 */
}

/* Pudełko 2 - UCZĘ SIĘ */
.stats-box-2 {
  background-color: #f3e8ff;
}

.dark .stats-box-2 {
  background-color: rgb(55, 65, 81); /* gray-700 */
}

.stats-box-2-text {
  color: #9333ea;
}

.dark .stats-box-2-text {
  color: rgb(192, 132, 252); /* purple-400 */
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.toast-container-top {
  top: 6.5rem;
}

.toast {
  min-width: 250px;
  max-width: 400px;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideIn 0.3s ease-out;
  font-size: 14px;
  font-weight: 500;
}

.toast.toast-success {
  background-color: #10b981;
  color: white;
}

.toast.toast-error {
  background-color: #ef4444;
  color: white;
}

.toast.toast-info {
  background-color: #3b82f6;
  color: white;
}

.toast.toast-warning {
  background-color: #f59e0b;
  color: white;
}

.dark .toast {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.toast.hiding {
  animation: slideOut 0.3s ease-in forwards;
}

/* ============================================
   LEVEL SELECTION - CATEGORY BUTTONS & ACCORDION
   ============================================ */

/* Animacja category buttons */
.category-btn {
  transition: all 0.2s ease;
}

.category-btn:hover {
  transform: translateX(4px);
}

.category-btn:active {
  transform: translateX(2px) scale(0.98);
}

/* Animacja chevron */
#ppChevron,
#prChevron {
  transition: transform 0.3s ease;
}

/* Akordeon - smooth height animation */
#ppCategories,
#prCategories {
  transition: max-height 0.3s ease-out;
  overflow: hidden;
}

#ppCategories.hidden,
#prCategories.hidden {
  max-height: 0;
}

#ppCategories:not(.hidden),
#prCategories:not(.hidden) {
  max-height: 1000px; /* Wystarczająco dużo dla wszystkich kategorii */
}

/* ============================================
   ZWIĘKSZONE ODSTĘPY NA FISZKACH - PRAWO OŚWIATOWE
   Dodane: 2026-01-27
   ============================================ */

/* Uniwersalne style dla tekstów na fiszkach */
#wordToTranslate,
#wordAnswer {
  line-height: 2.0 !important;
  letter-spacing: 0.02em !important;
  padding: 2rem !important;
  max-height: 18rem;
  overflow-y: auto;
}

/* Akapity odpowiedzi (główna odpowiedź + Wyjaśnienie/Przykład/Podstawa prawna) */
#wordAnswer p {
  margin: 0;
}

#wordAnswer p + p {
  margin-top: 0.6em;
}

/* "Wyjaśnienie:"/"Przykład:"/"Podstawa prawna:" - bez pogrubienia, w odróżnieniu od głównej odpowiedzi */
#wordAnswer p.answer-secondary {
  font-weight: 400;
}

/* "justify-content: center" na kontenerze z overflow blokuje scroll do treści
   wykraczającej ponad górną krawędź - "safe center" centruje gdy się mieści,
   a przy przepełnieniu wyrównuje do góry, żeby dało się przewinąć do końca */
.card-face > .absolute.inset-0 {
  justify-content: safe center;
}

/* Na desktopie line-height 2.0 przy dużej czcionce powoduje,
   że tekst nie mieści się w karcie (podwójny padding + sztuczny
   limit wysokości nakładają się na padding karty .card-face).

   UWAGA: tu MUSI zostać limit wysokości i własne przewijanie tekstu.
   Wcześniej było tu "max-height: none; overflow-y: visible", co działało
   tylko dopóki obcinała .card-face - a ta nie może już mieć overflow
   (psuło to backface-visibility przy obracaniu fiszki, patrz komentarz
   przy .card-face). Bez limitu długa odpowiedź wylewała się poza kartę
   i NIEWIDZIALNYM blokiem przykrywała przyciski WIEM/NIE WIEM,
   przechwytując kliknięcia - przyciski wyglądały na martwe.
   Limit podąża za kurczącą się kartą (patrz .card-container wyżej);
   różnica 4rem to miejsce na etykietę PYTANIE/ODPOWIEDŹ i padding. */
@media (min-width: 1024px) {
  #wordToTranslate,
  #wordAnswer {
    line-height: 1.35 !important;
    padding: 0.5rem 0.5rem !important;
    max-height: clamp(8rem, calc(100vh - 32rem), 18rem);
    overflow-y: auto;
  }
}

/* Nadpisz Tailwind classes */
.text-2xl,
.text-3xl {
  line-height: 2.0 !important;
}

/* Płynny scrollbar dla długich pytań */
#wordToTranslate::-webkit-scrollbar,
#wordAnswer::-webkit-scrollbar {
  width: 6px;
}

#wordToTranslate::-webkit-scrollbar-track,
#wordAnswer::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

#wordToTranslate::-webkit-scrollbar-thumb,
#wordAnswer::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

#wordToTranslate::-webkit-scrollbar-thumb:hover,
#wordAnswer::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Dark mode scrollbar */
.dark #wordToTranslate::-webkit-scrollbar-thumb,
.dark #wordAnswer::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}

.dark #wordToTranslate::-webkit-scrollbar-thumb:hover,
.dark #wordAnswer::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Responsywność mobile */
@media (max-width: 640px) {
  #wordToTranslate,
  #wordAnswer {
    font-size: 1.25rem !important;
    line-height: 1.8 !important;
    padding: 1.5rem !important;
  }
}

/* ============================================
   PRZEŁĄCZNIK PRZYPOMNIEŃ PUSH
   ============================================ */
.reminder-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.reminder-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.reminder-toggle-track {
  position: relative;
  width: 46px;
  height: 26px;
  background: #d1d5db;
  border-radius: 9999px;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.dark .reminder-toggle-track {
  background: #4b5563;
}

.reminder-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.reminder-toggle input:checked + .reminder-toggle-track {
  background: #fdb21a;
}

.reminder-toggle input:checked + .reminder-toggle-track .reminder-toggle-thumb {
  transform: translateX(20px);
}

.reminder-toggle input:focus-visible + .reminder-toggle-track {
  outline: 2px solid #fdb21a;
  outline-offset: 2px;
}

/* ============================================
   MODAL (np. potwierdzenie resetu postępu)
   ============================================ */
.modal-overlay.hidden {
  display: none;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 1rem;
}

.modal-card {
  width: 100%;
  max-width: 24rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

.reset-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
}

#loader .animate-spin {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  border-style: solid;
  border-width: 4px;
  border-color: transparent;
  border-bottom-color: #fdb21a;
  animation: modal-spin 0.8s linear infinite;
}

@keyframes modal-spin {
  to {
    transform: rotate(360deg);
  }
}