@font-face {
  font-family: "UniSansHeavyCAPS";
  src: url("fonts/Uni Sans Heavy.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "UniSansHeavyCAPS";
  src: url("fonts/Uni Sans Heavy.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

b, strong {
  font-weight: normal;
  color: #0679ca;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000000; /* czarne pasy na zewnątrz obszaru prezentacji */
}

body {
  font-family: "UniSansHeavyCAPS", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
 * Główny obszar prezentacji utrzymujemy w stałych proporcjach 16:9
 * i centrowany – reszta ekranu to czarne pasy.
 */
#app {
  position: relative;
  /* Podstawowe wymiary w oparciu o szerokość (16:9) */
  width: 100vw;
  height: 56.25vw; /* 9/16 = 0.5625 */
  /* Nie wychodzimy poza wysokość ekranu – węższe ekrany ograniczają szerokość */
  max-height: 100vh;
  max-width: 177.78vh; /* 16/9 ≈ 1.7778 */
  overflow: hidden;
}

#video-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: #ffffff;
}

#video-layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

#slide-layer {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 6vw;
  pointer-events: none;
}

.slide-content {
  max-width: 80vw;
  /* Pozwalamy treści rosnąć w górę, a dopiero potem skalujemy ją JS-em */
  max-height: none;
  text-align: center;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3vh;
  word-wrap: break-word;
  overflow: visible;
  perspective: 1000px;
  transform-origin: center center;
}

/* Szerszy wariant (np. gdy lista laureatów jest w 2 kolumnach) */
.slide-content--wide {
  max-width: 92vw;
}

.slide-title {
  font-weight: 700;
  font-size: min(7vh, 5vw);
  line-height: 1.35;
  padding-top: 0.1em;
}

.slide-subtitle {
  font-weight: 400;
  font-size: min(4.5vh, 3.4vw);
  line-height: 1.35;
  padding-top: 0.1em;
}

/* Delikatnie mniejsza typografia tylko na slajdach z nazwą konkretnej olimpiady */
.slide-content--olympiad-title .slide-title {
  font-size: min(6vh, 4.2vw);
}

.slide-content--olympiad-title .slide-subtitle {
  font-size: min(3.8vh, 2.9vw);
}

/* Slajdy tytułowe bez laureatów – cały tekst na niebiesko */
.slide-content--blue-title .slide-title,
.slide-content--blue-title .slide-subtitle {
  color: #0679ca;
}

.winners-header {
  font-weight: 700;
  font-size: min(4vh, 2.88vw);
  line-height: 1.35;
  padding-top: 0.1em;
  margin-bottom: 2vh;
}

.winners-list {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  /* wracamy do centrowania listy w kolumnie */
  align-items: center;
}

/* 2-kolumnowy układ dla długich list (dzielimy równo po liczbie osób) */
.winners-list--two-cols {
  width: 100%;
  display: flex;
  flex-direction: row; /* Wymuszamy układ poziomy (nadpisuje column z .winners-list) */
  justify-content: center;
  align-items: flex-start;
  gap: 6vw;
}

.winners-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  /* elementy w kolumnie znów centrowane, ale sam blok osoby ma układ poziomy */
  align-items: center;
  gap: 2vh;
}

/* Przy układzie kolumnowym nie dokładamy dodatkowego odstępu z margin-bottom */
.winners-list--two-cols .winner-person-block {
  margin-bottom: 0;
}

/* Poziomy układ dla statystyk medali */
.winners-list--medals {
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 6vw;
  width: 100%;
}

/* Wariant dla 1 rodzaju medali (np. same złote) - OGROMNE */
.winners-list--medals.medals-count-1 {
  gap: 0;
}
.winners-list--medals.medals-count-1 .medal-icon--large {
  width: min(35vh, 25vw);
}
.winners-list--medals.medals-count-1 .winner-name {
  font-size: min(8vh, 6vw);
}

/* Wariant dla 2 rodzajów medali - BARDZO DUŻE */
.winners-list--medals.medals-count-2 {
  gap: 15vw;
}
.winners-list--medals.medals-count-2 .medal-icon--large {
  width: min(28vh, 20vw);
}
.winners-list--medals.medals-count-2 .winner-name {
  font-size: min(6.5vh, 4.8vw);
}

/* Wariant dla 3 rodzajów medali - DUŻE (takie jak ustaliliśmy ostatnio) */
.winners-list--medals.medals-count-3 {
  gap: 8vw;
}
/* Tu dziedziczy standardowe .medal-icon--large (~21.6vh) i font (~5.5vh) */

/* Zwiększona czcionka na slajdzie z medalami */
.slide-content--medals .winners-header {
  /* -30% względem poprzedniego (5.5vh/4vw -> 3.85vh/2.8vw) */
  font-size: min(3.85vh, 2.8vw);
}

.slide-content--medals .winner-name {
  font-size: min(5.5vh, 4vw);
}

/* Slajdy z listą laureatów – wracamy do wyrównania do środka */
.slide-content--representation {
  text-align: center;
  align-items: center;
}

/* Dwukolumnowa lista laureatów – trochę węższy kontener,
 * żeby nie opierała się o boczne krawędzie przy bardzo długich nazwiskach. */
.slide-content--representation.slide-content--wide {
  max-width: 82%;
}

.slide-content--representation .winner-name,
.slide-content--representation .winner-details {
  text-align: center;
}

.winner--medal {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.winner {
  max-width: 80vw;
}

/* Blok jednej osoby na slajdzie laureatów */
.winner-person-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  margin-bottom: 2vh;
}

/* Wiersz z medalem i nazwiskiem w jednej linii */
.winner-name-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

/* Ikona medalu - podstawowy rozmiar */
.medal-icon {
  width: min(4.4vh, 3.2vw);
  height: auto;
  flex-shrink: 0;
}

/* Większa ikona na slajdzie statystyk medali (jeszcze powiększona o 20%) */
.medal-icon--large {
  width: min(21.6vh, 15.12vw);
}

/* Ikona przy nazwisku jednej osoby (z lewej strony)
 * Wysokość ~= 250% wysokości liter nazwiska (2.5em w wierszu z nazwiskiem).
 */
.medal-icon--person {
  height: 2.5em;
  width: auto;
  margin-bottom: 0;
}

/* Wrapper dla ikony + napisu na slajdzie statystyk */
.medal-label-icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.winner-name {
  font-weight: 700;
  /* Bazowy, "bezpieczny" rozmiar – używany przy dłuższych listach */
  font-size: min(4.4vh, 3.2vw);
  line-height: 1.35;
  padding-top: 0.1em;
  color: #0679ca;
}

.winner-details {
  font-weight: 400;
  font-size: min(2.8vh, 2.08vw);
  line-height: 1.35;
  padding-top: 0.1em;
  margin-top: 0.8vh;
}

/*
 * Dynamiczne warianty rozmiaru czcionki w zależności od liczby laureatów
 * (klasy dokładane w JS na slajdach typu "reprezentacja").
 */

/* Bardzo mało osób (1–4) – DUŻE, ale z limitem żeby nie "eksplodowały" */
.slide-content--density-very-low .winner-name {
  font-size: min(6vh, 4.3vw);
}

.slide-content--density-very-low .winner-details {
  font-size: min(3.6vh, 2.7vw);
}

/* Mała/średnia lista (5–8 osób) – powiększone względem bazowego, ale z limitem */
.slide-content--density-low .winner-name {
  font-size: min(5vh, 3.6vw);
}

.slide-content--density-low .winner-details {
  font-size: min(3vh, 2.2vw);
}

#loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  text-align: center;
}

#loading-overlay.hidden {
  display: none;
}

.loader {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

#start-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  text-align: center;
  padding: 2rem;
}

#start-overlay.visible {
  display: flex;
}

#start-overlay h1 {
  font-family: "UniSansHeavyCAPS", sans-serif;
  font-weight: 700;
  font-size: 3rem;
  margin-bottom: 1rem;
}

#start-overlay p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  max-width: 32rem;
}

#start-button {
  pointer-events: auto;
  cursor: pointer;
  border: none;
  font-family: "UniSansHeavyCAPS", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  padding: 0.9rem 2.4rem;
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#start-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.5);
}

#start-button:active {
  transform: translateY(1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}

#download-offline-button {
  pointer-events: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  border: none;
  text-decoration: none;
  font-family: "UniSansHeavyCAPS", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.7rem 1.8rem;
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#download-offline-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.5);
}

#download-offline-button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}

#download-offline-button:disabled {
  cursor: wait;
  opacity: 0.8;
}

#download-offline-button .btn-loader {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.3);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

#download-offline-button.loading .btn-loader {
  display: inline-block;
}

#download-offline-button.loading .btn-text {
  display: none;
}

#download-offline-button .btn-loading-text {
  display: none;
}

#download-offline-button.loading .btn-loading-text {
  display: inline;
}

.fade-seq {
  opacity: 0;
  transform: translateY(10px);
}

.letter {
  display: inline-block;
  line-height: 1em;
}

#error-message {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 1.1rem;
}

#error-message.visible {
  display: flex;
}