/* ============================================
   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 {
  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);
  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;
  overflow-y: auto;  /* Scrollowanie dla długich tekstów */
  overflow-x: hidden;
  /* Flex usunięty - jest w wewnętrznym divie */
}

.card-back {
  transform: 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;
  }
}

/* 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: 1.2;
  }
  
  #wordAnswer {
    font-size: 1.75rem; /* 28px - zwiększone z 24px */
    line-height: 1.2;
  }
  
  /* 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 */
  #quizView:not(.hidden) > div:nth-of-type(2) {
    position: absolute;
    top: 5.5rem;
    left: 1rem;
    right: 1rem;
    z-index: 10;
  }
  
  /* Progress bar - POD licznikiem */
  #quizView:not(.hidden) > div:nth-of-type(3) {
    position: absolute;
    top: 7.5rem;
    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: 26rem;      /* Stała wysokość - zapobiega skokowi */
    min-height: 26rem;  /* Minimalna wysokość */
    max-height: 26rem;  /* Maksymalna wysokość */
  }
  
  /* Sama fiszka - stała wysokość 20rem (zgodna z card-container) */
  #quizView:not(.hidden) .card-inner {
    height: 26rem; /* 416px - zgodne z max-height card-container */
    width: 100%;
  }
  
  /* Instrukcja "Kliknij..." - POD fiszką z opóźnieniem */
  #quizView:not(.hidden) > p {
    position: absolute;
    bottom: 13rem;  /* 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.15 !important;
    padding: 0 0.5rem;
  }
  
  #wordAnswer {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.15 !important;
    padding: 0 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: 2.25rem; /* 36px */
  }
  
  #wordAnswer {
    font-size: 1.875rem; /* 30px */
  }
  
  /* 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%;
  }
  
  .card-container {
    height: 22rem; /* 352px - zmniejszone z 28rem (448px) */
    min-height: 22rem; /* 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: 2.5rem; /* 40px */
  }
  
  #wordAnswer {
    font-size: 2rem; /* 32px */
  }
  
  /* 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: 3rem; /* 48px */
  }
  
  #wordAnswer {
    font-size: 2.5rem; /* 40px */
  }
}

/* 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: 3.5rem; /* 56px */
  }
  
  #wordAnswer {
    font-size: 2.75rem; /* 44px */
  }
}

/* ============================================
   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;
  }
}

/* ============================================
   DUCH OSIĄGNIĘĆ - ANIMACJE
   ============================================ */
@keyframes ghostBounce {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes ghostFadeOut {
  from {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
}
/* ============================================
   MOBILE LANDSCAPE - optymalizacja dla poziomej orientacji
   ============================================ */
@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, #achievementsView {
    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;
  }
  
  /* Osiągnięcia - 2 kolumny */
  #achievementsList > div {
    padding: 0.5rem !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;
  }
  
  /* Notyfikacje osiągnięć - mniejsze */
  #achievementNotification {
    padding: 0.5rem !important;
    font-size: 0.875rem !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 {
  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;
}

/* ============================================
   ACHIEVEMENT NOTIFICATION - GLOBAL
   ============================================ */

#achievementNotification {
  transition: opacity 0.3s ease-out, transform 0.6s ease-out;
  pointer-events: auto;
}

/* Stan początkowy (ukryty) */
#achievementNotification.hidden {
  opacity: 0;
  transform: translateY(-150%);
  pointer-events: none;
}

/* Animacja pojawienia się */
@keyframes slideDownBounce {
  0% {
    transform: translateY(-150%);
    opacity: 0;
  }
  60% {
    transform: translateY(10px);
    opacity: 1;
  }
  80% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Klasa do uruchomienia animacji */
#achievementNotification.showing {
  animation: slideDownBounce 0.6s ease-out;
  opacity: 1;
  transform: translateY(0);
}

/* Animacja znikania */
#achievementNotification.hiding {
  animation: slideUpFade 0.4s ease-in forwards;
}

@keyframes slideUpFade {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-150%);
    opacity: 0;
  }
}

/* ============================================
   ACHIEVEMENT NOTIFICATION - TEXT STROKE
   ============================================ */

/* Day mode - czarny tekst z białą obwódką */
.achievement-notification-text {
  -webkit-text-stroke: 1.5px white;
  text-stroke: 1.5px white;
  paint-order: stroke fill;
}

.achievement-notification-icon {
  -webkit-text-stroke: 2px white;
  text-stroke: 2px white;
  paint-order: stroke fill;
}

.achievement-notification-close {
  -webkit-text-stroke: 1px white;
  text-stroke: 1px white;
  paint-order: stroke fill;
}

/* Dark mode - biały tekst z czarną obwódką */
.dark .achievement-notification-text {
  -webkit-text-stroke: 1.5px black;
  text-stroke: 1.5px black;
}

.dark .achievement-notification-icon {
  -webkit-text-stroke: 2px black;
  text-stroke: 2px black;
}

.dark .achievement-notification-close {
  -webkit-text-stroke: 1px black;
  text-stroke: 1px black;
}

/* ============================================
   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 */
}