/* 
   === PORADNIK CSS - JAK TO DZIAŁA? ===
   CSS (Cascading Style Sheets) to język, który mówi przeglądarce, JAK ma wyglądać to, co napisaliśmy w HTML.
   To tutaj definiujemy kolory, rozmiary, pozycje na ekranie i animacje.
*/

/* 1. IMPORTY I CZCIONKI */
/* Ściągamy podstawową czcionkę z Google Fonts (Inter) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* Pobieramy oryginalne, dedykowane czcionki z serwerów Riot Games (Beaufort - z szeryfami/zadziorami, używana do nagłówków) */
@font-face {
    font-family: 'Beaufort';
    src: url('https://lolstatic-a.akamaihd.net/web-fonts/Beaufort-Medium.woff') format('woff');
    font-weight: 500;
}

@font-face {
    font-family: 'Beaufort';
    src: url('https://lolstatic-a.akamaihd.net/web-fonts/Beaufort-Bold.woff') format('woff');
    font-weight: 700;
}

/* Spiegel to druga czcionka z Lola, używana głównie do tekstów i liczb (bezszeryfowa) */
@font-face {
    font-family: 'Spiegel';
    src: url('https://lolstatic-a.akamaihd.net/web-fonts/Spiegel-Regular.woff') format('woff');
    font-weight: 400;
}

/* 2. ZMIENNE CSS (ROOT) */
/* :root to najwyższy poziom dokumentu. Definiujemy tu własne "skróty" kolorów.
   Dzięki temu, jeśli zmienimy zdanie co do koloru złota, poprawiamy to TYLKO TUTAJ, a cała strona zmienia się automatycznie. */
:root {
    --gold-1: #c8aa6e;
    --gold-2: #c89b3c;
    --gold-3: #c4b998;
    --gold-4: #f0e6d2;
    --blue-bg: #010a13;
    --blue-border: #1e282d;
    --hextech-glow: #0ac8b9;
    --text-main: #f0e6d2;
    --danger: #ff4e50;
}

/* 3. ANIMACJE (KEYFRAMES) */
/* Animacja tła: powiększa delikatnie obrazek i porusza nim we wszystkie strony (od -1% do +1%) */
@keyframes panMapGPU {
    0% { transform: scale(1.05) translate3d(-1%, -1%, 0); }
    50% { transform: scale(1.05) translate3d(1%, 1%, 0); }
    100% { transform: scale(1.05) translate3d(-1%, -1%, 0); }
}

/* 4. GŁÓWNE ZASADY STRONY */
html, body {
    background-color: transparent; /* Tło przezroczyste, by było widać obrazek z .bg-map */
    color: var(--text-main); /* Używamy naszej zmiennej dla koloru czcionki */
    font-family: 'Spiegel', 'Inter', sans-serif;
    margin: 0;
    padding: 8rem 1rem 3rem 4rem; /* Odstępy: góra, prawo, dół, lewo */
    min-height: 100vh; /* Minimum 100% wysokości ekranu (Viewport Height) */
    
    /* Flexbox! Genialne narzędzie do układania elementów na stronie. */
    display: flex;
    justify-content: flex-start; /* Układa zawartość od lewej strony (wcześniej było center) */
    align-items: flex-start; /* Przykleja zawartość do góry ekranu */
    overflow-x: clip; /* Ucina wszystko, co wychodzi poza ekran w poziomie (zapobiega poziomemu suwakowi) */
}

/* Tło strony - duży splash art */
.bg-map {
    position: fixed; /* "Zamraża" tło - nie przesuwa się przy scrollowaniu */
    top: -2%; left: -2%;
    width: 104%; height: 104%; /* Jest celowo większe niż 100%, aby przy animacji rogi nie były puste */
    background: url('https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ahri_27.jpg') no-repeat center 10%;
    background-size: cover; /* cover sprawia, że obrazek zawsze pokrywa cały element, nie zależnie od proporcji */
    z-index: -2; /* Z-index ustawia "warstwy". Ujemne liczby rzucają element do tyłu. */
    animation: panMapGPU 90s ease-in-out infinite alternate; /* Aktywacja animacji zdefiniowanej wyżej */
}

/* Ciemna, półprzezroczysta narzuta (gradient) na tło, żeby jasne zdjęcie nie gryzło się z jasnym tekstem */
.bg-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(1, 10, 19, 0.4) 0%, rgba(10, 20, 40, 0.15) 100%);
    z-index: -1; /* Jest "nad" obrazkiem (-2), ale "pod" głównym kontenerem (0) */
}

/* --- ANIMACJA PYŁKÓW (HEXTECH DUST) --- */
@keyframes floatUp {
    /* translate3d korzysta ze wsparcia karty graficznej - animacja jest super płynna */
    0% { transform: translate3d(var(--x), var(--y), 0) scale(0.5); opacity: 0; }
    20% { opacity: 0.8; }
    80% { opacity: 0.8; }
    100% { transform: translate3d(calc(var(--x) + 30px), -10vh, 0) scale(1.5); opacity: 0; }
}

.particles {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; /* Cząsteczki "przelatują" nad wszystkim, ale dzięki tej komendzie myszka przez nie przenika (nie blokują klikania) */
    z-index: -1;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 6px; height: 6px;
    background: var(--hextech-glow);
    box-shadow: 0 0 15px 3px var(--hextech-glow), 0 0 30px 5px rgba(10, 200, 185, 0.6);
    border-radius: 50%; /* Tworzy z kwadratu idealne kółko */
    animation: floatUp 15s linear infinite;
    animation-delay: var(--d); /* Zmienna przekazywana z JavaScript (var(--d) = delay) */
}

/* 5. GŁÓWNY KONTENER I "SZKŁO" */
.container {
    width: 100%;
    max-width: 850px; /* Nie pozwoli mu być szerszym niż 850 pikseli */
    background: transparent;
    border: 1px solid rgba(200, 155, 60, 0.3);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    padding: 3rem;
    position: relative; /* Pozwala na pozycjonowanie absolutne jego "dzieci" względem jego krawędzi */
}

/* Magiczne złote rogi wokół .container (używamy tzw. pseudo-elementów ::before i ::after). 
   Tworzymy je w CSS, bez dodawania śmieci do HTML. */
.container::before, .container::after {
    content: ""; /* Musi być (choćby puste), inaczej pseudo-element w ogóle się nie pojawi */
    position: absolute; /* Ustawia się w rogach ".container" */
    width: 30px;
    height: 30px;
    border: 2px solid var(--gold-2);
    pointer-events: none;
}
.container::before {
    top: 10px; left: 10px; /* Lewy górny róg */
    border-right: none;
    border-bottom: none; /* Ukrywamy połowę krawędzi kwadratu, zostawiając sam "kątownik" L */
}
.container::after {
    bottom: 10px; right: 10px; /* Prawy dolny róg */
    border-left: none;
    border-top: none;
}

/* Klasa "glass-panel" nakłada efekt szkła (rozmycie tła) na różne elementy. 
   Osiągamy to właściwością backdrop-filter! */
.glass-panel {
    background: rgba(1, 10, 19, 0.65); /* Półprzezroczysty czarny */
    backdrop-filter: blur(10px); /* Rozmywa to, co jest POD obiektem, imitując mrożone szkło */
}

/* Nagłówek h1 ułożony przy pomocy Flexboxa jako kolumna (napis na górze, licznik pod spodem) */
h1 {
    font-family: 'Beaufort', serif;
    font-weight: 700;
    text-transform: uppercase; /* Wymusza WIELKIE LITERY bez względu na to, jak wpiszesz to w HTML */
    letter-spacing: 2px;
    margin: 0;
    color: var(--gold-1);
    font-size: 2rem;
    
    display: flex;
    flex-direction: column; /* Ustawia dzieci (napis i licznik) jeden pod drugim */
    align-items: center; /* Centruje w pionie... a w kolumnie - w poziomie! */
    gap: 15px; /* Daje stały, ładny odstęp między dziećmi we flexboxie */
}

/* Jak zrobić tekst pomalowany na gradient (płynne przejście kolorów) zamiast jednego koloru? */
.gradient-text {
    background: linear-gradient(to bottom, #ffffff 0%, #f0e6d2 40%, #c89b3c 100%);
    -webkit-background-clip: text; /* Mówi przeglądarce: nałóż ten gradient na tło, ale przytnij to tło do samych LITER tekstu! */
    -webkit-text-fill-color: transparent; /* Zrób litery "szklane", żeby przezroczysty tekst pokazał to przycięte tło-gradient */
    display: inline-block;
}

.total-counter {
    font-family: 'Spiegel', sans-serif;
    font-size: 3rem;
    color: var(--hextech-glow);
    font-weight: bold;
    padding: 0.5rem 2rem;
    border-radius: 4px;
    border: 1px solid rgba(200, 155, 60, 0.5);
    outline: none;
    transition: all 0.3s ease; /* Płynne, 0.3-sekundowe przejście wszelkich zmian (np. koloru przy kliknięciu) */
}

/* 6. TABELA I KOLUMNY */
.table-wrapper {
    overflow-x: auto; /* Jeśli ekran jest za mały (np. na telefonie), pojawi się poziomy suwak TYLKO na tabeli */
    margin-bottom: 2rem;
    border-radius: 4px;
    border: 1px solid var(--blue-border);
}

table {
    width: 100%;
    table-layout: fixed; /* Kluczowe! Mówi przeglądarce, żeby sztywno trzymała się szerokości kolumn (np. width: 15%), nawet gdy wewnątrz jest długi tekst. */
    border-collapse: collapse; /* Usuwa brzydkie "podwójne" ramki wokół komórek */
}

th, td {
    padding: 1.2rem 1.5rem;
    vertical-align: top;
}

th {
    border-bottom: 2px solid var(--gold-2);
    white-space: nowrap; /* Zabrania "zawijania" tekstu (np. Posiadane Skiny zawsze w jednej linii w nagłówku) */
}

/* Różne szerokości poszczególnych kolumn - muszą sumować się do 100% dla dobrego działania table-layout: fixed */
.col-champ { width: 15%; font-weight: 600; color: var(--gold-4); }
.col-ratio { width: 10%; text-align: center; color: var(--hextech-glow); }
.col-skins { width: 65%; color: #d1d9e1; text-transform: uppercase; }
.col-actions { width: 10%; text-align: right; vertical-align: middle; }

/* 7. WIDOK SKINA I PRZYCISKI */
.skin-entry {
    display: flex; /* Flexbox ponownie! */
    justify-content: space-between; /* "Rozpycha" element z lewej i element z prawej do krawędzi (np. tekst skina do lewej, a przycisk USUŃ do prawej) */
    align-items: center; /* Oraz centruje je ładnie w linii poziomej */
}

.skin-tile {
    width: 32px;
    height: 32px;
    border-radius: 8px; /* "Zmiękcza" ostre kanty obrazka robiąc z niego Squircle */
    object-fit: cover; /* Zachowuje proporcje przyciętego splasharta na mały kwadracik ikony */
}

.btn-delete-skin {
    opacity: 0; /* Znika... */
    transition: opacity 0.2s, transform 0.2s; /* Płynne zmiany */
}

/* Gdy myszka najedzie na DANY WIERSZ ze skinem (:hover na rodzicu), to dziecko (.btn-delete-skin) staje się widoczne (opacity z 0 do 0.7) */
.skin-entry:hover .btn-delete-skin {
    opacity: 0.7; 
}

/* 8. PANEL DODAWANIA (STICKY I FLEX) */
.add-panel {
    position: sticky; /* Sticky to sprytne pozycjonowanie. Zachowuje się normalnie, aż "dotknie" szczytu ekranu podczas scrollowania, wtedy zastyga w miejscu jak "fixed"! */
    top: 1rem; /* Zastyga 1rem poniżej krawędzi */
    z-index: 50; /* Z-index mówi mu "Bądź wyżej/przed tabelą", gdy ta wjeżdża pod niego. */
}

.add-form {
    display: flex; 
    gap: 1rem; /* Robi odstępy między inputami a przyciskiem w formularzu */
}

.autocomplete-wrapper {
    position: relative;
    flex: 1; /* Pozwala inputom na rozszerzanie się i "wypełnianie" wolnej przestrzeni (zajmą tyle samo miejsca co inne flex: 1) */
}

/* Lista wyników wyszukiwania ("Wybierz lub wpisz") */
.custom-dropdown {
    position: absolute; /* Unosi się NAD resztą layoutu */
    top: 100%; /* Zaczyna się DOKŁADNIE na samym dole swojego rodzica (pod inputem) */
    left: 0;
    width: 100%;
}

/* 9. PANEL "OGROMNY PODGLĄD SPLASH ARTU PO PRAWEJ" */
.preview-panel {
    position: fixed; /* Odrywamy obrazek od reszty okien. Jest przypięty "sztywno" do ekranu monitora, całkowicie ignorując .glass-panel i .container */
    top: 50%; /* Zrzucamy jego krawędź do połowy ekranu w pionie */
    right: 5vw; /* Odsuwamy go od prawej o 5% szerokości ekranu (Viewport Width) */
    transform: translateY(-50%); /* Komenda transform: translate przesuwa element do góry o połowę JEGO WŁASNEJ wysokości. To "matematyczny" trick na perfekcyjne wyśrodkowanie w CSS! */
    z-index: 150; /* Musi być na absolutnym wierzchu (wyżej niż 50 dla add-panel) */
    opacity: 0;
    visibility: hidden; /* Używamy visibility i opacity zamiast "display: none", bo "display" nie da się ładnie zanimować za pomocą przejść (transition). */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* Kiedy JS zdejmie mu klasę ".hidden" (:not(.hidden)), to włącza widoczność */
.preview-panel:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.preview-image {
    width: 700px;
    max-width: 45vw; /* Ekran może być mały, więc zabezpieczamy się by obrazek nie zajął więcej niż 45% szerokości całego monitora */
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 20px 50px rgba(0,0,0,0.9), 0 0 30px rgba(200, 155, 60, 0.3); /* Dwa cienie nakładane na siebie: ciemny mocny zlewający się z tłem i żółty z blaskiem! */
}

/* 10. WERSJA NA MAŁE EKRANY (MEDIA QUERIES) */
/* Jeśli ktoś wejdzie z telefonu (albo po prostu zwęzi okno poniżej 900px), to strona załaduje te dodatkowe komendy "nadpisujące" poprzednie */
@media (max-width: 900px) {
    .add-form {
        flex-direction: column; /* Zmień układ z poziomego (row) na pionowy (jeden nad drugim) */
    }
    
    .preview-panel {
        /* Przerabiamy Splash Art - już nie jest zawieszony po prawej! Odrzucamy fixed. */
        display: block !important;
        position: relative;
        width: 100%;
        text-align: center;
    }
    
    .preview-image {
        width: 100%;
        max-width: 300px; /* Robi się mały */
    }
}