@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap'); /* Disable text selection */ :root { --color-background: #121212; --color-surface-1: #1E1E1E; /* Panels, main UI elements */ --color-surface-2: #2A2A2A; /* Cards, interactive elements */ --color-primary: #FF8C00; /* Main accent - DarkOrange */ --color-primary-light: #FFA500; /* Lighter accent for highlights/hovers */ --color-text-primary: #EAEAEA; --color-text-secondary: #A0A0A0; --color-border: #3A3A3A; --color-success: #28A745; --color-magic: #9370DB; /* MediumPurple */ --color-tech: #4682B4; /* SteelBlue */ --color-auto: #3CB371; /* MediumSeaGreen */ --font-family: 'Inter', sans-serif; --border-radius-sm: 8px; --border-radius-md: 12px; --border-radius-lg: 16px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3); } html, body, #ui, #clicker, #upgrade-panel, #magic-shop-panel, #cursor-shop-panel, #tech-shop-panel, #auto-shop-panel, /* Added auto-shop-panel */ #skill-tree-panel, /* Nowy panel drzewka umiejętności */ .upgrade-item, button, #quick-buy { /* Added quick-buy */ user-select: none; } /* Reset and basics */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Use Inter for crisp UI text */ body, button, input, select { font-family: 'Inter', sans-serif; color: #F5F6FA; line-height: 1.4; } /* Fullscreen blurred background */ html { /* ✅ KLUCZOWA POPRAWKA: Przenosimy skalowanie na główny element */ zoom: 75%; transform-origin: center; /* Utrzymuje centrowanie */ /* Kompensacja wysokości, aby wypełnić cały ekran */ height: 133.33vh; /* Ukrywamy paski przewijania, które mogą powstać przez skalowanie */ overflow: hidden; /* Tło pozostaje bez zmian */ background: url('../assets/background.png') no-repeat center center fixed; background-size: cover; } body { /* ✅ Z body usuwamy całą logikę skalowania */ width: 100%; height: 100%; /* Pozostawiamy tylko style wizualne i czcionki */ background-color: rgba(18, 18, 18, 0.6); backdrop-filter: blur(10px); font-family: 'Inter', sans-serif; color: #F5F6FA; line-height: 1.4; overflow: hidden; /* Dodatkowe zabezpieczenie przed paskami przewijania */ } #session-reload-btn { width: 100%; margin-top: 1rem; } /* Styl dla ikony w nagłówku nakładki */ #session-expired-overlay h2 i { color: #FFD700; /* Złoty kolor dla ostrzeżenia */ margin-right: 1rem; } /* Falling carrots container */ #falling-carrots { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10; } /* Default falling carrot (non-clickable) */ .falling-carrot { position: absolute; top: -4rem; font-size: 2.5rem; color: rgba(255,165,0,0.85); filter: blur(2px); opacity: 0.75; will-change: transform; animation: fall linear infinite; pointer-events: none; } @keyframes fall { to { transform: translate(var(--dx, 0vw), 110vh) rotate(var(--rot, 15deg)) scaleX(var(--flip, 1)); } } /* Clickable blue carrot */ .blue-carrot { /* Kolor i rozmiar */ color: #00BFFF !important; /* Jaśniejszy, bardziej "magiczny" odcień niebieskiego */ font-size: 10rem !important; /* Znacząco zwiększamy rozmiar */ /* Poświata i cień dla lepszej widoczności */ filter: drop-shadow(0 0 20px #00BFFF) drop-shadow(0 0 8px #FFFFFF); /* Pozycjonowanie i interakcja */ z-index: 1001; /* Upewniamy się, że jest na samym wierzchu */ cursor: pointer; pointer-events: auto; /* Umożliwia klikanie */ /* Animacja dla bardziej "pływającego" efektu */ animation: fall-and-sway linear; } /* Nowa animacja, która dodaje delikatne kołysanie */ @keyframes fall-and-sway { 0% { transform: translate(var(--dx, 0vw), -10vh) rotate(var(--rot, 15deg)); } 25% { transform: translate(calc(var(--dx, 0vw) + 2vw), 25vh) rotate(calc(var(--rot, 15deg) - 5deg)); } 50% { transform: translate(calc(var(--dx, 0vw) - 2vw), 50vh) rotate(calc(var(--rot, 15deg) + 5deg)); } 75% { transform: translate(calc(var(--dx, 0vw) + 1vw), 75vh) rotate(var(--rot, 15deg)); } 100% { transform: translate(var(--dx, 0vw), 110vh) rotate(var(--rot, 15deg)); } } /* Fullscreen container constraints */ body, html { width: 100%; height: 100%; overflow: hidden; } /* Top UI bar */ /* Top UI bar - REVISED */ #ui { position: fixed; top: 0; left: 0; width: 100%; display: flex; flex-direction: column; /* Ustawia nowy header i substats jeden pod drugim */ align-items: center; gap: 10px; padding: clamp(6px, 1vw, 10px); z-index: 100; } /* Sub-stats row - REVISED */ #substats { display: flex; gap: 12px; /* Odstęp między mini-widżetami */ flex-wrap: wrap; justify-content: center; padding: clamp(6px, 1vw, 5px); /* Usuwamy tło z kontenera, ponieważ teraz każdy element będzie miał własne */ } /* Resources row */ #resources { display: flex; gap: 24px; justify-content: center; } .res-item { display: flex; align-items: center; gap: 8px; } .res-icon { font-size: 28px; text-shadow: 0 0 8px rgba(255,255,255,0.6); } .chart-blue { color: #7FDBFF !important; filter: drop-shadow(0 0 8px #7FDBFF); } .magic-purple { color: #DDA0DD !important; filter: drop-shadow(0 0 8px #DDA0DD); } .res-text { display: flex; flex-direction: column; line-height: 1; } .res-value { font-size: 22px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.6); } .res-label { font-size: 0.75rem; font-weight: 300; color: #CCCCCC; text-transform: uppercase; letter-spacing: 0.5px; } /* Sub-stats row */ .stat-item { background: var(--color-surface-1); /* Tło widżetu, takie jak w panelu głównym */ border: 1px solid var(--color-border); /* Ramka widżetu */ border-radius: var(--border-radius-md); /* Zaokrąglone rogi */ padding: 8px 16px; /* Wewnętrzny odstęp */ display: flex; align-items: center; gap: 12px; min-width: 175px; /* Stała minimalna szerokość dla spójności */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: all 0.2s ease-in-out; } .stat-item:hover { transform: translateY(-2px); border-color: var(--color-text-secondary); } .stat-icon { font-size: 1.6rem; /* Dopasowana wielkość ikony */ text-shadow: none; /* Usuwamy stary cień */ width: 28px; /* Stała szerokość dla lepszego wyrównania */ text-align: center; } .stat-text { display: flex; flex-direction: column; line-height: 1.2; } .stat-text span { /* Wartość statystyki */ font-size: 1.1rem; font-weight: 700; color: var(--color-text-primary); text-shadow: none; } .stat-text small { /* Etykieta statystyki */ font-size: 0.7rem; font-weight: 400; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } /* Zachowujemy unikalne kolory ikon */ .pointer-green { color: #2ECC40; } .chart-orange { color: #FF851B; } .bolt-yellow { color: #FFDC00; } .star-gold { color: #FFE066; } .bomb-red { color: #FF4136; } /* Main clicker */ /* Kontener zapewniający centrowanie */ #clicker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* USUNIĘTO width: 50vw; */ /* USUNIĘTO height: 50vh; */ display: flex; align-items: center; justify-content: center; z-index: 0; } /* Same przyciski marchewki */ #carrot-btn { /* przywracamy możliwość odbierania kliknięć */ pointer-events: auto; /* animacja “oddechu” */ animation: carrot-pulse 3s ease-in-out infinite; /* zachowujemy dotychczasowy styl */ cursor: pointer; display: block; line-height: 1; animation: carrot-float 3s ease-in-out infinite, carrot-glow-pulse 3s ease-in-out infinite; transition: transform 0.1s ease; /* KLUCZOWA ZMIANA: Ustawiamy kolor i poświatę za pomocą zmiennych CSS. Nadajemy im domyślne, pomarańczowe wartości, które będą używane na starcie gry. */ color: var(--carrot-color, #FFA500); filter: drop-shadow(0 0 16px var(--glow-color, rgba(255,165,0,0.8))); } #carrot-btn:active { transform: scale(1.15) !important; } @keyframes carrot-float { 0% { transform: scale(1) translateY(0); } 50% { transform: scale(1.02) translateY(-8px); } 100% { transform: scale(1) translateY(0); } } /* --- 2. Poprawiona animacja poświaty (bez transformacji) --- */ @keyframes carrot-glow-pulse { 0% { text-shadow: 0 0 16px var(--glow-color, rgba(255,165,0,0.9)); } 50% { text-shadow: 0 0 24px var(--glow-color, rgba(255,165,0,1)); } 100% { text-shadow: 0 0 16px var(--glow-color, rgba(255,165,0,0.9)); } } /* --- 3. Animacja kliknięcia (kontrolowana przez JS)--- */ /* --- 4. Zastosowanie nowych animacji do marchewki --- */ /* Domyślna marchewka ma teraz obie animacje: unoszenie i poświatę */ #carrot-btn { animation: carrot-float 3s ease-in-out infinite, carrot-glow-pulse 3s ease-in-out infinite; } /* Skórka tęczowa ma unoszenie + własną animację kolorów (zastępuje poświatę) */ .skin-rainbow { text-shadow: none !important; animation: carrot-float 3s ease-in-out infinite, rainbow-text-anim 4s linear infinite; } .skin-abyss { text-shadow: none !important; animation: carrot-float 3s ease-in-out infinite, abyss-pulse-anim 3s ease-in-out infinite; } /* Reguła dla eksplozji pozostaje przypisana do głównej marchewki, co jest prawidłowe */ #carrot-btn.skin-rainbow.explode, #carrot-btn.skin-abyss.explode { animation: explode 0.4s ease-out forwards; } /* Animacja eksplozji nadpisuje wszystko inne (bez zmian) */ #carrot-btn.explode, #carrot-btn.skin-rainbow.explode, #carrot-btn.skin-abyss.explode { animation: explode 0.4s ease-out forwards; } @keyframes carrot-pulse { 0% { transform: scale(1) translateY(0); text-shadow: 0 0 16px var(--glow-color, rgba(255,165,0,0.9)); } 50% { transform: scale(1.02) translateY(-8px); text-shadow: 0 0 24px var(--glow-color, rgba(255,165,0,1)); } 100% { transform: scale(1) translateY(0); text-shadow: 0 0 16px var(--glow-color, rgba(255,165,0,0.9)); } } /* Explode animation on clicker (improved for better visibility) */ #carrot-btn.explode { animation: explode 0.4s ease-out forwards; /* Shorter, more impactful animation */ } @keyframes explode { 0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 16px var(--glow-color, rgba(255,165,0,0.8))); } 25% { transform: scale(2.0) rotate(15deg); filter: drop-shadow(0 0 30px var(--glow-color, rgba(255,165,0,1))); } 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 16px var(--glow-color, rgba(255,165,0,0.8))); } } /* Panels: unified style */ Jasne, odświeżmy wygląd głównych paneli, aby były szersze i miały bardziej nowoczesny, estetyczny wygląd. Poniżej znajduje się poprawiona wersja Twojego fragmentu CSS. Wprowadzone zmiany zostały opatrzone komentarzami, abyś wiedział, co dokładnie zostało zrobione. Zastąp cały swój poprzedni blok CSS dla paneli poniższym kodem: CSS #upgrade-panel, #magic-shop-panel, #cursor-shop-panel, #tech-shop-panel, #auto-shop-panel, #skill-tree-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); /* --- GŁÓWNA ZMIANA: Zwiększamy szerokość --- */ width: 95vw; max-width: 1100px; /* Zwiększono z 900px do 1100px */ height: 90vh; /* Lekko zwiększamy wysokość dla lepszych proporcji */ max-height: 850px; /* --- ZMIANY ESTETYCZNE: "Ładniejszy" wygląd --- */ /* Tło z efektem "szkła" dla lepszej współpracy z backdrop-filter */ background: rgba(30, 30, 30, 0.75); /* Subtelna ramka z jaśniejszą górną krawędzią dla efektu głębi */ border: 1px solid var(--color-border); border-top: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--border-radius-lg); /* Zachowujemy duże zaokrąglenie */ /* Cień zewnętrzny i delikatny cień wewnętrzny dla dodania plastyczności */ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); /* Pozostałe właściwości bez zmian */ display: flex; flex-direction: column; overflow: hidden; z-index: 300; } .hidden { display: none; } /* Panel headers */ .panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.1); } .panel-header > button { background: none; border: none; color: #F5F6FA; font-size: 1.25rem; cursor: pointer; filter: drop-shadow(0 0 4px rgba(255,255,255,0.8)); } /* === Przyciski Mnożnika Zakupu - NOWY WYGLĄD === */ .multiplier { display: flex; background: var(--color-surface-2); /* Tło dla całego segmentu */ border-radius: var(--border-radius-sm); border: 1px solid var(--color-border); overflow: hidden; /* Zapewnia, że wewnętrzne elementy nie wyjdą poza zaokrąglenie */ } .multiplier button { background: transparent; /* Domyślnie przezroczyste tło */ color: var(--color-text-secondary); /* Domyślnie stonowany tekst */ border: none; border-left: 1px solid var(--color-border); /* Separator między przyciskami */ padding: 0.5rem 1rem; /* 8px 16px */ font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease-in-out; } .multiplier button:first-child { border-left: none; /* Usuwa separator dla pierwszego przycisku */ } /* Efekt po najechaniu na nieaktywny przycisk */ .multiplier button:hover:not(.active) { background: rgba(255, 255, 255, 0.05); color: var(--color-text-primary); } /* Styl dla AKTYWNEGO przycisku */ .multiplier button.active { background: var(--color-primary); color: #1a1a1a; /* Ciemny tekst dla kontrastu */ box-shadow: inset 0 0 8px rgba(0,0,0,0.3); } /* Grid lists */ #upgrade-list, #magic-list, #cursor-list, #tech-list, #auto-list, #ach-list { /* Dodana lista drzewka umiejętności */ padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Upgrade item cards (unified style for all shop items) */ .upgrade-item { background: rgba(255,255,255,0.1); padding: 14px; border-radius: 8px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .upgrade-item .name { font-size: 1.125rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.6); } .upgrade-item i { font-size: 1.5rem; } /* Default icon size */ .upgrade-item .level, .upgrade-item .gain { font-size: 0.875rem; color: #ddd; } .upgrade-item .gain i.fa-carrot { color: #FFA500; filter: drop-shadow(0 0 6px #FFA500); } /* Buttons inside upgrade items */ .upgrade-item button { background: linear-gradient(135deg, #ff9f1a, #ffe066); color: #1a1a1a; padding: 8px 0; border: none; border-radius: 6px; font-size: 1rem; font-weight: 500; box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 0 6px rgba(255,159,26,0.6); transition: background 0.2s, transform 0.1s; cursor: pointer; } /* Specific colors for tech and auto buttons, overriding the general .upgrade-item button */ #tech-list .upgrade-item button { background: linear-gradient(135deg, #5a8ab2, #32405f); /* Blue for tech */ box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 0 6px rgba(90,138,178,0.6); } #tech-list .upgrade-item button:hover:not(:disabled) { background: linear-gradient(135deg, #32405f, #5a8ab2); } #auto-list .upgrade-item button { background: linear-gradient(135deg, #2ecc71, #27ae60); /* Green for auto */ box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 0 6px rgba(46,204,113,0.6); } #auto-list .upgrade-item button:hover:not(:disabled) { background: linear-gradient(135deg, #27ae60, #2ecc71); } /* New: Styles for Skill Tree Panel and its items */ .skill-item { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; transition: all 0.2s ease; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } /* Unikalny styl po najechaniu dla karty umiejętności */ #skill-tree-list .skill-item:hover { transform: translateY(-4px); border-color: var(--color-magic); /* Fioletowa ramka */ box-shadow: 0 0 1.5rem rgba(147, 112, 219, 0.3); /* Fioletowa poświata */ } /* Ikona w karcie umiejętności */ #skill-tree-list .skill-item .card-header i { color: var(--color-magic); /* Fioletowy kolor ikony */ } /* Przycisk zakupu w karcie umiejętności */ #skill-tree-list .skill-item button { background: var(--color-magic); color: var(--color-text-primary); } #skill-tree-list .skill-item button:hover:not(:disabled) { background: #A488E4; /* Jaśniejszy fiolet */ box-shadow: 0 0 1rem rgba(147, 112, 219, 0.6); } /* Styl dla wyświetlania punktów umiejętności w panelu */ .skill-points { text-align: center; font-size: 1.1rem; font-weight: 600; color: var(--color-primary-light); margin-bottom: 1.5rem; padding: 0.75rem; background: rgba(0,0,0,0.2); border-radius: var(--border-radius-md); border: 1px solid var(--color-border); } /* Disable overlay on disabled buttons */ .upgrade-item button:disabled { opacity: 0.5; cursor: default; box-shadow: none; } /* Hover only on active */ .upgrade-item button:hover:not(:disabled) { background: linear-gradient(135deg, #ffe066, #ff9f1a); transform: translateY(-2px); } /* Progress bars */ .upgrade-item .progress { width: 100%; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; overflow: hidden; } .upgrade-item .progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #FFA500,#FFDD55); transition: width 0.1s linear; } /* --- NOWY, ZAAWANSOWANY SYSTEM POPUPÓW --- */ /* --- NOWE, UNIKALNE ANIMACJE --- */ /* Animacja dla zwykłego kliku: Prosto w górę */ /* +++ NOWY, POPRAWIONY KOD +++ */ /* =================================================================== */ /* ### NOWY, CZYSTY WYGLĄD POP-UPÓW Z LICZBAMI ### */ /* =================================================================== */ .pop { position: absolute; pointer-events: none; font-family: var(--font-family); /* Używamy czcionki 'Inter' dla spójności */ font-weight: 700; /* Pogrubiona czcionka dla lepszej widoczności */ display: flex; align-items: center; opacity: 0; z-index: 500; /* USUNIĘTO -webkit-text-stroke, ZASTĘPUJEMY CIENIEM */ } .pop-carrot-icon { margin-right: 5px; font-size: 80%; opacity: 0.8; } /* 1. Standardowy Klik */ .pop-click { font-size: 1.8rem; color: #FFFFFF; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Czysty cień dla czytelności */ animation: anim-click 1.2s ease-out forwards; z-index: 200; } .pop-click .pop-carrot-icon { color: #FFFFFF; } /* 2. Automatyczna Produkcja */ .pop-auto { font-size: 0.5rem; color: #B0B0B0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); animation: anim-auto 1.5s ease-out forwards; z-index: 200; } .autobuyer-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--color-text-secondary); } .autobuyer-toggle button { padding: 4px 12px; font-weight: 700; border-radius: 5px; border: 1px solid var(--color-border); background: #c0392b; /* Domyślnie czerwony (OFF) */ color: white; cursor: pointer; transition: background-color 0.2s; } .autobuyer-toggle button.active { background: var(--color-success); /* Zielony (ON) */ } .card-stats { display: flex; flex-direction: column; /* Ustawia elementy jeden pod drugim */ gap: 6px; /* Mały odstęp między "Poziom" a przełącznikiem */ align-items: flex-start; /* Wyrównuje wszystko do lewej */ } /* 3. Trafienie Krytyczne */ .pop-critical { font-size: 1.2rem; color: #FFD700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.7), 0 2px 5px rgba(0,0,0,0.5); z-index: 200; animation: anim-critical 2.8s cubic-bezier(0.25, 1.5, 0.5, 1) forwards; /* Zwiększono czas do 1.8s */ } .pop-critical .pop-carrot-icon { color: #FFD700; } /* 4. Eksplozja */ .pop-explode { font-size: 3.5rem; font-weight: 900; color: #FF4500; text-shadow: 0 0 15px rgba(255, 69, 0, 0.7), 0 3px 6px rgba(0,0,0,0.6); /* Ognista poświata + mocny cień */ z-index: 200; animation: anim-explode 1.2s ease-out forwards; } .pop-explode .pop-carrot-icon { color: #FF4500; } /* --- Animacje (pozostają bez zmian) --- */ @keyframes anim-click { 0% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80px) scale(0.7); } } @keyframes anim-auto { 0% { opacity: 0.8; transform: translate(-50%, 0) scale(0.8); } 100% { opacity: 0; transform: translate(-100%, -70px) scale(0.5); } } @keyframes anim-critical { 0% { opacity: 1; transform: translate(-50%, 0) scale(0.5) rotate(-10deg); } 30% { transform: translate(-40%, -60px) scale(1.3) rotate(5deg); } 100% { opacity: 0; transform: translate(0%, -150px) scale(0.8) rotate(15deg); } } @keyframes anim-explode { 0% { opacity: 1; transform: translate(-50%, 0) scale(0.8); } 15% { transform: translate(-55%, -30px) scale(1.4) rotate(-5deg); } 30% { transform: translate(-45%, -60px) scale(1.2) rotate(5deg); } 100% { opacity: 0; transform: translate(-50%, -150px) scale(1) rotate(0deg); } } /* === Powiadomienia (Event Notification) - NOWY WYGLĄD === */ #event-notification { position: fixed; bottom: 67.5rem; /* Pozycjonowanie tuż nad hotbarem (ok. 104px) */ left: 50%; transform: translateX(-50%) translateY(2rem); /* Startowa pozycja pod ekranem */ background: var(--color-surface-2); /* Używamy spójnego tła */ color: var(--color-primary-light); /* Pomarańczowy tekst dla wyróżnienia */ padding: 0.75rem 1.5rem; /* 12px 24px */ border: 1px solid var(--color-border); border-radius: var(--border-radius-md); font-size: 0.95rem; font-weight: 600; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.4s ease; z-index: 1100; /* Upewniamy się, że jest na wierzchu */ } /* Stan, w którym powiadomienie jest widoczne */ #event-notification.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Stan ukryty (dla animacji zamykania) */ #event-notification.hide { opacity: 0; transform: translateX(-50%) translateY(2rem); } /* === Hotbar - NOWY, ELEGANCKI WYGLĄD === */ #hotbar { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.75rem; /* Mniejszy odstęp */ background: var(--color-surface-1); /* Spójne tło z panelami */ padding: 0.75rem; border-radius: var(--border-radius-lg); /* Większe, gładsze zaokrąglenie */ border: 1px solid var(--color-border); backdrop-filter: blur(8px); box-shadow: var(--shadow-md); z-index: 150; } #hotbar button { display: flex; align-items: center; gap: 0.625rem; background: var(--color-surface-2); /* Domyślnie subtelne tło */ color: var(--color-text-secondary); /* Domyślnie stonowany tekst */ border: 1px solid var(--color-border); padding: 0.625rem 1rem; border-radius: var(--border-radius-md); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease-in-out; position: relative; box-shadow: none; /* Usuwamy domyślny cień */ } #hotbar button i { font-size: 1rem; transition: color 0.2s ease-in-out; } /* Efekt po najechaniu na nieaktywny przycisk */ #hotbar button:hover:not(.active) { transform: translateY(-3px); color: var(--color-text-primary); border-color: var(--color-text-secondary); background: var(--color-surface-1); } /* Styl dla AKTYWNEGO przycisku (gdy panel jest otwarty) */ #hotbar button.active { background: var(--color-primary); color: #1a1a1a; /* Ciemny tekst dla kontrastu z pomarańczowym tłem */ border-color: var(--color-primary-light); box-shadow: 0 0 1rem rgba(255, 140, 0, 0.5); } #hotbar button.active i { color: #1a1a1a; } /* === Custom scrollbar for panels === */ /* Unified scrollbar styles for all relevant panels */ #upgrade-panel::-webkit-scrollbar, #magic-shop-panel::-webkit-scrollbar, #cursor-shop-panel::-webkit-scrollbar, #tech-shop-panel::-webkit-scrollbar, #auto-shop-panel::-webkit-scrollbar, #achievements-panel::-webkit-scrollbar, #skill-tree-panel::-webkit-scrollbar { /* Dodany panel drzewka umiejętności */ width: 12px; } #upgrade-panel::-webkit-scrollbar-track, #magic-shop-panel::-webkit-scrollbar-track, #cursor-shop-panel::-webkit-scrollbar-track, #tech-shop-panel::-webkit-scrollbar-track, #auto-shop-panel::-webkit-scrollbar-track, #achievements-panel::-webkit-scrollbar-track, #skill-tree-panel::-webkit-scrollbar-track { /* Dodany panel drzewka umiejętności */ background: rgba(0,0,0,0.4); border-radius: 6px; } #upgrade-panel::-webkit-scrollbar-thumb, #magic-shop-panel::-webkit-scrollbar-thumb, #cursor-shop-panel::-webkit-scrollbar-thumb, #tech-shop-panel::-webkit-scrollbar-thumb, #auto-shop-panel::-webkit-scrollbar-thumb, #achievements-panel::-webkit-scrollbar-thumb, #skill-tree-panel::-webkit-scrollbar-thumb { /* Dodany panel drzewka umiejętności */ background: #ff9f1a; border-radius: 6px; box-shadow: inset 0 0 6px rgba(0,0,0,0.4); } #upgrade-panel::-webkit-scrollbar-thumb:hover, #magic-shop-panel::-webkit-scrollbar-thumb:hover, #cursor-shop-panel::-webkit-scrollbar-thumb:hover, #tech-shop-panel::-webkit-scrollbar-thumb:hover, #auto-shop-panel::-webkit-scrollbar-thumb:hover, #achievements-panel::-webkit-scrollbar-thumb:hover, #skill-tree-panel::-webkit-scrollbar-thumb:hover { /* Dodany panel drzewka umiejętności */ background: #ffa500; } /* Firefox scrollbar styles */ #upgrade-panel, #magic-shop-panel, #cursor-shop-panel, #tech-shop-panel, #auto-shop-panel, #achievements-panel, #skill-tree-panel { /* Dodany panel drzewka umiejętności */ scrollbar-width: thin; scrollbar-color: #ff9f1a rgba(0,0,0,0.4); } /* =================================================================== */ /* === WIDŻET PROFILU I PANEL POZIOMU - NOWA WERSJA === */ /* =================================================================== */ /* --- Widżet Profilu (lewy górny róg) --- */ #profile-widget { position: fixed; top: 1.25rem; /* 20px */ left: 1.25rem; /* 20px */ width: 280px; /* Nieco szerszy dla lepszego układu */ background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); /* Spójne zaokrąglenie */ padding: 1rem; /* 16px */ box-shadow: var(--shadow-md); color: var(--color-text-primary); backdrop-filter: blur(8px); z-index: 500; transition: all 0.2s ease-in-out; } #profile-widget:hover { border-color: var(--color-primary); } /* Awatar */ #profile-widget .avatar-container { display: flex; justify-content: center; margin-bottom: 1rem; } .avatar-mask { width: 80px; height: 80px; border: 2px solid var(--color-primary); /* Subtelniejsza ramka */ border-radius: 50%; overflow: hidden; background: var(--color-surface-2); cursor: pointer; transition: transform 0.2s ease; } .avatar-mask:hover { transform: scale(1.05); } .avatar-mask img { width: 100%; height: 100%; object-fit: cover; } .avatar-overlay { /* Style dla nakładki pozostają bez zmian - są dobre */ } /* Nazwa gracza */ #player-name-container { text-align: center; margin-bottom: 0.75rem; } #player-name { width: 100%; padding: 0.5rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); color: var(--color-text-primary); font-size: 0.9rem; text-align: center; } #player-name:focus { outline: none; border-color: var(--color-primary); } #player-name-display { font-size: 1.2rem; font-weight: 600; color: var(--color-primary-light); } /* Poziom */ .level-display { text-align: center; font-size: 1rem; margin-bottom: 0.5rem; } .level-display span { font-weight: 700; color: var(--color-primary); } /* Pasek XP */ .xp-bar-bg { width: 100%; height: 0.75rem; /* 12px */ background: var(--color-surface-2); border-radius: var(--border-radius-sm); overflow: hidden; border: 1px solid var(--color-border); } .xp-bar-fill { width: 0%; height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)); transition: width 0.3s ease; } .xp-text { text-align: center; font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 0.25rem; } /* Media query dla mniejszych ekranów (bez zmian, ale zachowane) */ @media (max-width: 600px) { #profile-widget { /* Ukrywamy widżet na bardzo małych ekranach, by nie zasłaniał gry */ display: none; } } /* --- Panel Poziomu (przerobiony na styl panelu bocznego) --- */ #level-panel { /* Ta klasa sprawia, że panel będzie wyglądał jak inne */ /* i będzie domyślnie ukryty, dopóki JS go nie pokaże */ display: none; } /* Style wewnętrzne - teraz używają klas spójnych z innymi panelami */ #level-panel .level-header { padding: 1.25rem; text-align: center; border-bottom: 1px solid var(--color-border); } #level-panel .level-header h4 { font-size: 1.5rem; font-weight: 600; color: var(--color-text-primary); } #level-panel .level-header small { font-size: 0.9rem; color: var(--color-text-secondary); } #level-panel .xp-bar { width: 100%; height: 1rem; background: var(--color-surface-2); border-radius: var(--border-radius-sm); overflow: hidden; margin-top: 1rem; } #level-panel .skill-points { font-size: 1.1rem; text-align: center; margin: 1rem 0; font-weight: 600; color: var(--color-primary-light); } /* Lista umiejętności przerobiona na styl kart */ #level-panel .skill-list { list-style: none; display: grid; gap: 1rem; padding: 1.25rem; } #level-panel .skill-list li { /* Wygląd karty, podobny do .upgrade-item */ background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); padding: 1rem; display: flex; justify-content: space-between; align-items: center; } #level-panel .skill-list span { font-size: 1rem; font-weight: 500; } #level-panel .skill-btn { /* Styl przycisku spójny z innymi panelami */ background: var(--color-primary); color: #1a1a1a; font-weight: 700; border: none; padding: 0.625rem 1.25rem; border-radius: var(--border-radius-sm); cursor: pointer; transition: all 0.2s ease; margin-left: 1rem; } #level-panel .skill-btn:hover:not(:disabled) { background: var(--color-primary-light); transform: scale(1.05); } #level-panel .skill-btn:disabled { background: var(--color-surface-2); color: var(--color-text-secondary); cursor: not-allowed; opacity: 0.7; } /* === Automation Shop Panel === */ /* Specific panel for automation, reusing general panel styles */ #auto-shop-panel .panel-header { /* Inherits most styles from .panel-header, specific overrides can go here */ } #auto-shop-panel .panel-header .close-btn { /* Inherits most styles from .panel-header > button */ } /* Lista automatyzacji */ /* Inherits grid styles from general lists */ #auto-list .upgrade-item i { color: #2ecc71; /* Specific color for automation icons */ filter: drop-shadow(0 0 6px #2ecc71); } /* === Quick-Buy Widget - NOWY WYGLĄD === */ #quick-buy { position: fixed; bottom: 6.5rem; /* Pozycjonowanie tuż nad nowym hotbarem (ok. 105px) */ left: 50%; transform: translateX(-50%); z-index: 140; /* Pomiędzy panelami a hotbarem */ transition: opacity 0.3s ease, transform 0.3s ease; } /* Karta wewnątrz Quick-Buy, która jest teraz głównym elementem wizualnym */ #quick-buy .quick-card { display: flex; align-items: center; gap: 1rem; /* 16px */ background: var(--color-surface-1); border: 1px solid var(--color-primary); /* Wyróżniająca ramka */ padding: 0.75rem 1rem; /* 12px 16px */ border-radius: var(--border-radius-lg); box-shadow: 0 0 1.5rem rgba(255,140,0,0.3), var(--shadow-md); backdrop-filter: blur(8px); } /* Ikona */ #quick-buy .quick-icon { font-size: 2rem; color: var(--color-primary-light); filter: none; /* Usuwamy stary filtr */ width: 2.5rem; /* Stała szerokość dla wyrównania */ text-align: center; } /* Informacje (nazwa + koszt) */ #quick-buy .quick-info { display: flex; flex-direction: column; color: var(--color-text-primary); font-weight: 500; white-space: nowrap; } #quick-buy .quick-info .quick-name { font-size: 1rem; font-weight: 600; } #quick-buy .quick-info .quick-cost { font-size: 0.9rem; color: var(--color-text-secondary); /* Domyślny kolor, JS go nadpisze dla magiczek */ } /* Przycisk zakupu */ #quick-buy #quick-buy-btn { margin-left: 0.75rem; /* 12px */ padding: 0.625rem 1.25rem; /* 10px 20px */ background: var(--color-primary); color: #1a1a1a; font-weight: 700; border: none; border-radius: var(--border-radius-sm); box-shadow: none; cursor: pointer; transition: all 0.2s ease; } #quick-buy #quick-buy-btn:hover:not(:disabled) { background: var(--color-primary-light); transform: scale(1.05); box-shadow: 0 0 1rem rgba(255, 140, 0, 0.5); } #quick-buy #quick-buy-btn:disabled { background: var(--color-surface-2); color: var(--color-text-secondary); opacity: 0.7; cursor: not-allowed; } /* Ukrywanie widżetu */ #quick-buy.hidden { opacity: 0; transform: translate(-50%, 1rem); /* Dodaje efekt wysuwania się */ pointer-events: none; } /* === Achievements Panel - Finalna Wersja (Po Prawej Stronie) === */ #achievements-panel { position: fixed; top: 1.25rem; /* Używamy zmiennych - 20px */ right: 1.25rem; /* Używamy zmiennych - 20px */ left: auto; transform: none; width: 460px; max-width: 90vw; max-height: calc(100vh - 2.5rem); /* Margines 20px z góry i z dołu */ background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); backdrop-filter: blur(10px); display: flex; flex-direction: column; overflow: hidden; z-index: 1000; } #achievements-panel .panel-header { padding: 1rem 1.25rem; /* 16px 20px */ font-size: 1.1rem; font-weight: 600; background: rgba(0,0,0,0.2); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } #achievements-panel .panel-content { padding: 0; overflow-y: auto; flex-grow: 1; } #ach-summary { padding: 0.75rem 1.25rem; font-weight: 600; background: rgba(0,0,0,0.15); border-bottom: 1px solid var(--color-border); color: var(--color-primary-light); } /* Lista osiągnięć (kontener) */ #ach-list { list-style: none; /* Usuwamy kropki z listy */ display: flex; flex-direction: column; /* Osiągnięcia jedno pod drugim */ gap: 0.75rem; /* Odstęp między kartami */ padding: 1.25rem; /* Wewnętrzny margines w panelu */ } /* Karta pojedynczego osiągnięcia */ .ach-item { display: flex; align-items: center; gap: 1rem; background: var(--color-surface-2); padding: 0.75rem 1rem; border-radius: var(--border-radius-md); border: 1px solid var(--color-border); transition: all 0.2s ease; } .ach-item:hover { transform: translateY(-2px); border-color: var(--color-text-secondary); } /* Ikona osiągnięcia */ .ach-item i { font-size: 1.8rem; color: var(--color-text-secondary); width: 2.5rem; text-align: center; flex-shrink: 0; } /* Kontener na informacje tekstowe */ .ach-item .info { flex-grow: 1; min-width: 0; } .ach-item .info .name { font-weight: 600; color: var(--color-text-primary); } .ach-item .info .reward, .ach-item .info .pts { font-size: 0.8rem; color: var(--color-text-secondary); } /* Przycisk odbioru nagrody */ .ach-item .claim-btn { margin-left: auto; background: var(--color-success); color: #FFF; font-weight: 700; border: none; border-radius: var(--border-radius-sm); padding: 0.5rem 1rem; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; flex-shrink: 0; } .ach-item .claim-btn:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 0 12px rgba(40, 167, 69, 0.6); } .ach-item .claim-btn:disabled { background: var(--color-surface-1); color: var(--color-text-secondary); cursor: not-allowed; opacity: 0.8; } /* Style dla różnych stanów osiągnięcia */ .ach-item.completed:not(.claimable) { opacity: 0.6; } .ach-item.claimable { border-color: var(--color-success); background: rgba(40, 167, 69, 0.1); } .ach-item.claimable:hover { border-color: #34ce57; box-shadow: 0 0 15px rgba(40, 167, 69, 0.3); } .ach-item.claimable i { color: var(--color-success); } /* === PRZYCISKI UŻYTKOWE (OSIĄGNIĘCIA I ZAPIS) - WERSJA FINALNA === */ /* Kontener pozycjonujący */ /* =================================================================== */ /* === PRZYCISKI UŻYTKOWE (OSIĄGNIĘCIA I ZAPIS) - FINAL === */ /* =================================================================== */ /* --- Kontenery pozycjonujące --- */ #achievements-btn, #save-container { position: fixed; top: 1.25rem; /* 20px */ z-index: 950; } #achievements-btn { right: 1.25rem; /* 20px */ } #save-container { right: 5.75rem; /* Pozycjonowanie obok przycisku osiągnięć (ok. 92px) */ } /* --- Ujednolicony wygląd obu przycisków --- */ #achievements-btn, #save-btn { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; background: var(--color-surface-1); color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: 50%; box-shadow: var(--shadow-md); cursor: pointer; transition: all 0.2s ease-in-out; } /* --- Ikony wewnątrz przycisków --- */ #achievements-btn i, #save-btn i { font-size: 1.3rem; transition: all 0.2s ease-in-out; } /* Domyślny kolor ikony pucharu */ #achievements-btn i { color: var(--color-primary); } /* Domyślny kolor ikony zębatki */ #save-btn i { color: var(--color-text-secondary); /* Domyślnie stonowany kolor */ } /* --- Efekt po najechaniu myszką --- */ #achievements-btn:hover, #save-btn:hover { transform: scale(1.1) translateY(-2px); border-color: var(--color-primary-light); background: var(--color-primary); box-shadow: 0 6px 16px rgba(0,0,0,0.3), 0 0 1rem var(--color-primary-light); } /* Zmiana koloru ikon po najechaniu */ #achievements-btn:hover i, #save-btn:hover i { color: var(--color-surface-1); /* Ciemny kolor dla kontrastu */ } /* --- Kropka powiadomienia na przycisku osiągnięć --- */ #achievements-btn #ach-points { display: none; /* Ukrycie starego licznika '0' */ } #achievements-btn.has-claim::after { content: ""; position: absolute; top: 0.4rem; right: 0.4rem; width: 0.8rem; height: 0.8rem; background-color: #FF4136; border: 2px solid var(--color-surface-1); border-radius: 50%; box-shadow: 0 0 0.25rem rgba(0,0,0,0.5); } /* --- Menu rozwijane od przycisku zapisu --- */ .save-dropdown { position: relative; } .dropdown-menu { position: absolute; top: 130%; right: 0; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); overflow: hidden; box-shadow: var(--shadow-md); min-width: 180px; backdrop-filter: blur(4px); z-index: 610; } .dropdown-menu button { display: block; width: 100%; padding: 0.75rem 1rem; background: none; color: var(--color-text-primary); border: none; text-align: left; font-size: 0.95rem; transition: background 0.15s ease; } .dropdown-menu button:hover { background: rgba(255, 255, 255, 0.05); color: var(--color-primary-light); } .dropdown-menu button + button { border-top: 1px solid var(--color-border); } /* Utility */ .hidden { display: none !important; } /* —————— Welcome Screen —————— */ #welcome-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 1000; } #welcome-screen .welcome-box { background: rgba(30,30,30,0.95); padding: 40px 60px; border-radius: 12px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.7); } #welcome-screen h1 { font-size: 2.5rem; margin-bottom: 16px; color: #FFA500; text-shadow: 0 0 8px rgba(255,165,0,0.8); } #welcome-screen p { font-size: 1rem; margin-bottom: 24px; color: #DDD; } #welcome-screen .welcome-buttons button { background: linear-gradient(135deg, #ff9f1a, #ffe066); color: #1a1a1a; border: none; padding: 14px 28px; margin: 0 8px; font-size: 1rem; font-weight: 600; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 6px rgba(255,159,26,0.6); cursor: pointer; transition: transform 0.1s, background 0.2s; } #welcome-screen .welcome-buttons button:hover { transform: translateY(-2px); background: linear-gradient(135deg, #ffe066, #ff9f1a); } /* === Autosave / Playtime Widget - PRZEBUDOWA === */ #autosave-widget { position: fixed; top: 325px; /* Pozycja pod widżetem profilu */ left: 1.25rem; /* Wyrównanie do lewej krawędzi (20px) */ width: 280px; /* Dopasowanie szerokości do pozostałych widżetów */ background: var(--color-surface-1); border-radius: var(--border-radius-md); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); font-family: 'Inter', sans-serif; color: var(--color-text-primary); overflow: hidden; z-index: 700; backdrop-filter: blur(8px); } /* Nagłówek widżetu */ #autosave-widget .header { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.2); padding: 10px 14px; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--color-border); } #autosave-widget .header i { font-size: 1.1rem; color: var(--color-primary); } /* Każdy wiersz ze statystyką */ #autosave-widget .item { display: flex; align-items: center; padding: 12px 14px; gap: 12px; } #autosave-widget .item + .item { border-top: 1px solid var(--color-border); } #autosave-widget .item i { font-size: 1rem; width: 24px; text-align: center; color: var(--color-text-secondary); } #autosave-widget .label { flex: 1; font-size: 0.85rem; } #autosave-widget .value { font-size: 0.9rem; font-weight: 600; color: var(--color-primary-light); } /* === Volume Control Widget - NOWY WYGLĄD === */ #volume-control { position: fixed; bottom: 1.25rem; /* 20px */ left: 1.25rem; /* 20px */ display: flex; align-items: center; gap: 0.75rem; /* 12px */ background: var(--color-surface-1); padding: 0.625rem 1rem; /* 10px 16px */ border-radius: var(--border-radius-lg); /* Spójne zaokrąglenie */ border: 1px solid var(--color-border); backdrop-filter: blur(8px); box-shadow: var(--shadow-md); z-index: 1000; } #volume-control i { font-size: 1.2rem; color: var(--color-primary); /* Używamy głównego koloru akcentu */ width: 1.5rem; /* Stała szerokość dla lepszego wyrównania */ text-align: center; } #volume-control input[type="range"] { width: 120px; /* Nieco dłuższy suwak */ -webkit-appearance: none; background: transparent; cursor: pointer; } /* Ścieżka suwaka */ #volume-control input[type="range"]::-webkit-slider-runnable-track { height: 0.375rem; /* 6px */ background: var(--color-surface-2); /* Ciemne tło dla ścieżki */ border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); } /* Kciuk/uchwyt suwaka */ #volume-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1rem; /* 16px */ height: 1rem; /* 16px */ background: var(--color-text-primary); /* Jasny uchwyt */ border: 2px solid var(--color-primary); border-radius: 50%; margin-top: -0.375rem; /* Precyzyjne wycentrowanie na ścieżce */ transition: transform 0.1s ease; } #volume-control input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.2); /* Lekkie powiększenie przy najechaniu */ } #volume-control input[type="range"]:focus { outline: none; } /* header */ #autosave-widget .header { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.2); padding: 8px 12px; font-size: 1rem; font-weight: 600; text-transform: uppercase; } #autosave-widget .header i { font-size: 1.2rem; filter: drop-shadow(0 0 4px rgba(0,0,0,0.5)); } /* each stat row */ #autosave-widget .item { display: flex; align-items: center; padding: 10px 12px; gap: 8px; } #autosave-widget .item + .item { border-top: 1px solid rgba(0,0,0,0.2); } #autosave-widget .item i { font-size: 1.1rem; width: 20px; text-align: center; filter: drop-shadow(0 0 4px rgba(0,0,0,0.4)); } #autosave-widget .label { flex: 1; font-size: 0.85rem; opacity: 0.8; } #autosave-widget .value { font-size: 0.9rem; font-weight: 500; } /* —————— Dropdown Menu —————— */ .save-dropdown { position: relative; } .dropdown-menu { position: absolute; top: 110%; right: 0; background: rgba(0,0,0,0.8); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.6); } .dropdown-menu button { display: block; width: 100%; padding: 12px 16px; background: none; color: #fff; border: none; text-align: left; font-size: 0.95rem; } .dropdown-menu button:hover { background: rgba(255,255,255,0.1); } .hidden { display: none; } .particle-container { position:absolute; top:0; left:25%; bottom:0; width:55%; //mix-blend-mode: soft-light; --timescale:0.5s; z-index: -1; } .pt { display:block; position:absolute; left:calc( var(--x) * 1%); top:calc( var(--y) * 1% ); height:50px; /*border:dotted thin gray;*/ animation: moveUpDown calc( var(--timescale) * var(--yt) ) infinite cubic-bezier(.45,.05,.55,.95) alternate; animation-delay:calc( -1s * var(--d, 0) ); } .pt b{ display:block; background:url(https://res.cloudinary.com/monson-productions/image/upload/v1645640126/glowey_yfdvor.png); background-size:contain; /*border:dotted thin green; */ width: calc( 0.1vw * var(--w) ); height:calc( 0.1vw * var(--w) ); position:absolute; opacity:var(--o, 1); animation: moveRightLeft calc( var(--timescale) * var(--xt) ) infinite cubic-bezier(.45,.05,.55,.95) alternate , flicker calc( 2s * var(--xd) ) infinite alternate cubic-bezier(.45,.05,.55,.95); animation-delay:calc( -1s * var(--d, 0) ) , calc( -0.2s * var(--d, 0) ); } @keyframes moveUpDown { 0% {} 100% {transform:translateY( calc(50% * var(--yd, 3)) ); } } @keyframes moveRightLeft { 0% { transform:translateX( calc(-50% * var(--xd, 3)) );} 100% {transform:translateX( calc(50% * var(--xd, 3)) ); } } @keyframes flicker{ 0% { opacity:calc( var(--o, 1) - 0.1); } 100% { opacity:calc( var(--o, 1) + 0.1); } } /* --- Styl dla Modalu Produkcji Offline --- */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 2000; /* Upewnij się, że jest na samej górze */ backdrop-filter: blur(5px); opacity: 1; transition: opacity 0.3s ease-in-out; } .modal-overlay.hidden { opacity: 0; pointer-events: none; } .modal-content { background: var(--color-surface-1); color: var(--color-text-primary); padding: 30px 40px; border-radius: var(--border-radius-lg); border: 2px solid var(--color-primary); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); text-align: center; max-width: 450px; width: 90%; transform: scale(0.95); animation: modal-appear 0.4s cubic-bezier(0.25, 1.5, 0.5, 1) forwards; } @keyframes modal-appear { to { transform: scale(1); } } .modal-content h2 { font-size: 2rem; color: var(--color-primary-light); margin-bottom: 12px; } .modal-content p { font-size: 1rem; color: var(--color-text-secondary); margin-bottom: 24px; } .modal-content .summary { background: rgba(0, 0, 0, 0.2); border-radius: var(--border-radius-md); padding: 20px; margin-bottom: 24px; } .modal-content .summary-item { display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; padding: 10px 0; } .modal-content .summary-item + .summary-item { border-top: 1px solid var(--color-border); } .modal-content .summary-item .label { color: var(--color-text-secondary); } .modal-content .summary-item .value { font-weight: 600; color: var(--color-text-primary); } .modal-content .summary-item .value .fa-carrot { color: var(--color-primary); margin-right: 5px; } .modal-content button { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); color: var(--color-surface-1); font-weight: 600; font-size: 1rem; border: none; padding: 12px 24px; border-radius: var(--border-radius-sm); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .modal-content button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4); } #carrot-btn.frenzy { animation: frenzy-pulse 0.5s ease-in-out infinite; filter: drop-shadow(0 0 40px rgba(255, 255, 0, 1)); } @keyframes frenzy-pulse { 0% { transform: scale(1.05); color: #FFFF00; } 50% { transform: scale(1.15); color: #FFD700; } 100% { transform: scale(1.05); color: #FFFF00; } } /* Styl dla odznaki z punktami umiejętności */ #skill-tree-btn { position: relative; /* Niezbędne, aby pozycjonować odznakę względem przycisku */ } #skill-point-badge { position: absolute; top: -8px; right: -8px; background-color: #FF4136; /* Intensywny czerwony kolor */ color: white; width: 22px; height: 22px; border-radius: 50%; /* Tworzy idealne kółko */ display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid var(--color-surface-1); /* Obwódka w kolorze tła dla kontrastu */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); transition: transform 0.2s ease-in-out, opacity 0.2s; transform: scale(1); opacity: 1; } #skill-point-badge.hidden { transform: scale(0); opacity: 0; pointer-events: none; /* Ukryta odznaka nie blokuje kliknięć */ } /* --- Style dla Opisów Ulepszeń --- */ .upgrade-item .info .description { font-size: 0.8rem; /* Odrobinę mniejszy font */ color: var(--color-text-secondary); /* Jaśniejszy, drugorzędny kolor tekstu */ font-style: italic; /* Kursywa, aby odróżnić od nazwy */ margin-top: 4px; /* Mały odstęp od nazwy ulepszenia */ margin-bottom: 6px; /* Odstęp przed informacją o poziomie/zysku */ line-height: 1.3; /* Lepsza czytelność dla dłuższych opisów */ max-width: 95%; /* Gwarancja, że tekst nie wyjdzie poza kontener */ } /* Delikatna modyfikacja layoutu kontenera .info, aby zrobić miejsce */ .upgrade-item .info { flex-direction: column; /* Zmieniamy układ na kolumnowy */ justify-content: center; /* Wycentruj zawartość w pionie */ align-items: flex-start; /* Wyrównaj tekst do lewej */ padding-right: 10px; /* Dodatkowy odstęp od przycisku */ } /* Dostosowanie wielkości pozostałych informacji dla spójności */ .upgrade-item .info .level, .upgrade-item .info .gain { font-size: 0.85rem; } /* --- Styl dla Nowego Panelu Statystyk --- */ .header-stats { display: flex; justify-content: center; align-items: stretch; gap: 15px; width: 100%; max-width: 900px; /* Ograniczenie szerokości na dużych ekranach */ } .stats-widget { background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); padding: 8px 15px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); flex-grow: 1; max-width: 250px; transition: all 0.2s ease-in-out; } .stats-widget__icon { font-size: 1.5rem; color: var(--color-text-secondary); } .stats-widget__info { display: flex; flex-direction: column; } .stats-widget__value { font-size: 1.3rem; font-weight: 700; color: var(--color-text-primary); line-height: 1.2; } .stats-widget__label { font-size: 0.75rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } /* --- Styl dla Głównego Widżetu (Marchewki) --- */ .stats-widget--primary { flex-grow: 1.5; /* Niech będzie trochę większy od pozostałych */ max-width: 400px; border-color: var(--color-primary); background: linear-gradient(145deg, var(--color-surface-1), var(--color-surface-2)); } .stats-widget--primary .stats-widget__icon { font-size: 2.5rem; color: var(--color-primary); } .stats-widget--primary .stats-widget__value { font-size: 2rem; color: var(--color-primary-light); } .stats-widget--primary .stats-widget__label { font-size: 0.8rem; color: var(--color-primary); } /* Dostosowanie kolorów ikon w widżetach */ .header-stats .stats-widget:nth-child(1) .stats-widget__icon { /* CPS */ color: #39CCCC; } .header-stats .stats-widget:nth-child(3) .stats-widget__icon { /* Magiczki */ color: #FFD700; } /* ---------------------------------- */ /* Responsive tweaks for all resolutions */ /* ---------------------------------- */ /* 1) Carrot button: zamiast stałych 600px */ #carrot-btn { font-size: clamp(150px, 25vw, 350px); } /* 2) Top bar (#ui): mniejsze paddingi i gap-y na mniejszych ekranach */ #ui { padding: clamp(8px, 1.5vw, 12px); gap: clamp(8px, 1.2vw, 10px); } /* 3) Resources row */ #resources { gap: clamp(16px, 2vw, 24px); } /* 4) Sub-stats */ #substats { gap: clamp(8px, 1vw, 14px); } @media (max-width: 600px) { #hotbar { flex-direction: column; gap: 8px; } } .stat-item { min-width: clamp(120px, 8vw, 175px); padding: clamp(6px, 0.8vw, 8px) clamp(8px, 1vw, 16px); gap: clamp(6px, 0.8vw, 12px); } /* 5) Hotbar na dole */ #hotbar { padding: clamp(8px, 1.2vw, 16px) clamp(12px, 2vw, 24px); gap: clamp(8px, 1.5vw, 16px); } /* 6) Panelowe szerokości */ #upgrade-panel, #magic-shop-panel, #cursor-shop-panel, #tech-shop-panel, #auto-shop-panel, #skill-tree-panel { width: 90vw; max-width: clamp(400px, 50vw, 600px); } /* 7) Fallback dla naprawdę małych ekranów (< 1280px) */ @media (max-width: 1280px) { #carrot-btn { font-size: clamp(200px, 35vw, 400px); } .stats-widget--primary { max-width: 300px; } #skill-tree-panel { width: 95vw; max-width: 500px; } } /* =================================================================== */ /* ### KOMPLETNA PRZEBUDOWA PANELI Z ULEPSZENIAMI ### */ /* =================================================================== */ /* --- 1. Główny kontener panelu --- */ /* =================================================================== */ /* ### GŁÓWNA PRZEBUDOWA PANELI, NAGŁÓWKÓW I KART ### */ /* =================================================================== */ /* --- 1. Główny kontener panelu --- */ .panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95vw; max-width: 900px; height: 85vh; max-height: 800px; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; backdrop-filter: blur(10px); overflow: hidden; z-index: 600; } .upgrade-indicator { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; background-color: var(--color-success); /* Zielony kolor tła */ color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; border: 2px solid var(--color-surface-1); box-shadow: 0 0 10px var(--color-success); /* Zielona poświata */ animation: indicator-pulse 1.5s infinite; z-index: 12; } @keyframes indicator-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* --- 2. Nowy wygląd nagłówka panelu --- */ .panel-header { padding: 1rem 1.5rem; font-size: 1.25rem; font-weight: 600; border-bottom: 1px solid var(--color-border); background: rgba(0,0,0,0.2); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .panel-header > span { display: flex; align-items: center; gap: 0.75rem; } .panel-header > span i { color: var(--color-primary); } .panel-header .close-btn { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 50%; width: 2.25rem; height: 2.25rem; color: var(--color-text-secondary); cursor: pointer; transition: all 0.2s ease; } .panel-header .close-btn:hover { background: var(--color-primary); color: #000; transform: rotate(90deg); } /* --- 3. Przyciski mnożnika (x1, x5, x10) w nagłówku --- */ .multiplier { display: flex; background: var(--color-surface-2); border-radius: var(--border-radius-sm); border: 1px solid var(--color-border); overflow: hidden; margin-left: auto; /* Przesuwa na prawo */ margin-right: 1rem; } .multiplier button { background: transparent; color: var(--color-text-secondary); border: none; border-left: 1px solid var(--color-border); padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease-in-out; } .multiplier button:first-child { border-left: none; } .multiplier button:hover:not(.active) { background: rgba(255, 255, 255, 0.05); color: var(--color-text-primary); } .multiplier button.active { background: var(--color-primary); color: #1a1a1a; box-shadow: inset 0 0 8px rgba(0,0,0,0.3); } /* --- 4. Obszar na treść i siatka --- */ .panel-content { padding: 1.5rem; overflow-y: auto; flex-grow: 1; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; padding: 0; } /* --- 5. Nowy wygląd "karty" ulepszenia --- */ .upgrade-item { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); padding: 1rem; padding-bottom: 1.25rem; /* Miejsce na pasek postępu */ display: flex; flex-direction: column; gap: 0.75rem; transition: all 0.2s ease; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; /* Ważne dla paska postępu */ } .upgrade-item:hover { transform: translateY(-4px); border-color: var(--color-primary); box-shadow: 0 0 1.5rem rgba(255,140,0,0.2); } /* Wiersz z ikoną i nazwą */ .card-header { display: flex; align-items: center; gap: 1rem; } .card-header i { font-size: 1.5rem; width: 2rem; text-align: center; } .card-header .name { font-size: 1rem; font-weight: 600; } /* Opis ulepszenia */ .description { font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.4; flex-grow: 1; min-height: 2.6rem; } /* Stopka karty */ .card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .card-footer .stats { font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary); } .card-footer .gain i { color: var(--color-primary-light); } /* Przycisk zakupu */ .card-footer button { background: var(--color-primary); color: #000; font-weight: 700; border: none; padding: 0.625rem 1.25rem; border-radius: var(--border-radius-sm); cursor: pointer; transition: all 0.2s ease; } .card-footer button:hover:not(:disabled) { background: var(--color-primary-light); transform: scale(1.05); box-shadow: 0 0 1rem rgba(255,140,0,0.5); } .card-footer button:disabled { background: var(--color-surface-1); color: var(--color-text-secondary); cursor: not-allowed; opacity: 0.7; } /* Pasek postępu na dole karty */ .progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(0,0,0,0.3); } .progress-bar { width: 0%; height: 100%; background: var(--color-primary); transition: width 0.1s linear; border-radius: 0 2px 2px 0; } /* =================================================================== */ /* ### DEDYKOWANY STYL DLA PANELU TECHNOLOGII ### */ /* =================================================================== */ /* Używamy ogólnych styli .panel i .grid, które już istnieją. */ /* Poniżej znajdują się tylko style specyficzne dla technologii. */ /* Styl karty w panelu technologii */ #tech-list .upgrade-item:hover { border-color: var(--color-tech); /* Niebieska ramka po najechaniu */ box-shadow: 0 0 1.5rem rgba(70, 130, 180, 0.3); /* Niebieska poświata */ } /* Ikona w karcie technologii */ #tech-list .upgrade-item .card-header i { color: var(--color-tech); /* Niebieski kolor ikony */ } /* Przycisk zakupu w karcie technologii */ #tech-list .upgrade-item button { background: var(--color-tech); /* Niebieskie tło przycisku */ color: var(--color-text-primary); /* Jasny tekst dla lepszego kontrastu */ } #tech-list .upgrade-item button:hover:not(:disabled) { background: #5A9DCE; /* Jaśniejszy odcień niebieskiego po najechaniu */ box-shadow: 0 0 1rem rgba(70, 130, 180, 0.6); /* Niebieska poświata przycisku */ } #tech-list .upgrade-item button:disabled { background: var(--color-surface-1); color: var(--color-text-secondary); opacity: 0.7; } /* =================================================================== */ /* ### DEDYKOWANY STYL DLA PANELU AUTOMATYZACJI ### */ /* =================================================================== */ /* Styl karty w panelu automatyzacji */ #auto-list .upgrade-item:hover { border-color: var(--color-auto); /* Zielona ramka po najechaniu */ box-shadow: 0 0 1.5rem rgba(60, 179, 113, 0.3); /* Zielona poświata */ } /* Ikona w karcie automatyzacji */ #auto-list .upgrade-item .card-header i { color: var(--color-auto); /* Zielony kolor ikony */ } /* Przycisk zakupu w karcie automatyzacji */ #auto-list .upgrade-item .buy-btn { background: var(--color-auto); color: var(--color-text-primary); /* Możesz tu przenieść inne style, które miały być wspólne dla przycisków */ border: none; padding: 0.625rem 1.25rem; border-radius: var(--border-radius-sm); cursor: pointer; transition: all 0.2s ease; } #auto-list .upgrade-item .buy-btn:hover:not(:disabled) { background: #48C47E; box-shadow: 0 0 1rem rgba(60, 179, 113, 0.6); } #auto-list .upgrade-item .buy-btn:disabled { background: var(--color-surface-1); color: var(--color-text-secondary); opacity: 0.7; } /* Układ dla lewej części karty (Poziom + przełącznik) */ .card-stats { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } /* Wygląd kontenera z przełącznikiem */ .autobuyer-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--color-text-secondary); } /* Wygląd samego przycisku ON/OFF */ .autobuyer-toggle button { padding: 4px 12px; font-weight: 700; border-radius: 5px; border: 1px solid var(--color-border); background: #c0392b; /* Kolor dla stanu OFF */ color: white; cursor: pointer; transition: background-color 0.2s; } /* Wygląd przycisku ON/OFF w stanie aktywnym */ .autobuyer-toggle button.active { background: var(--color-success); /* Kolor dla stanu ON */ } /* =================================================================== */ /* ### DEDYKOWANY STYL DLA PANELU UMIEJĘTNOŚCI ### */ /* =================================================================== */ /* Używamy ogólnych styli .panel i .grid, które już istnieją. */ /* Poniżej znajdują się tylko style specyficzne dla umiejętności. */ /* Styl karty w panelu umiejętności */ #skill-tree-list .skill-item:hover { border-color: var(--color-magic); /* Fioletowa ramka po najechaniu */ box-shadow: 0 0 1.5rem rgba(147, 112, 219, 0.3); /* Fioletowa poświata */ } /* Ikona w karcie umiejętności */ #skill-tree-list .skill-item .card-header i { color: var(--color-magic); /* Fioletowy kolor ikony */ } /* Przycisk zakupu w karcie umiejętności */ #skill-tree-list .skill-item button { background: var(--color-magic); /* Fioletowe tło przycisku */ color: var(--color-text-primary); /* Jasny tekst dla lepszego kontrastu */ } #skill-tree-list .skill-item button:hover:not(:disabled) { background: #A488E4; /* Jaśniejszy odcień fioletu po najechaniu */ box-shadow: 0 0 1rem rgba(147, 112, 219, 0.6); /* Fioletowa poświata przycisku */ } #skill-tree-list .skill-item button:disabled { background: var(--color-surface-1); color: var(--color-text-secondary); opacity: 0.7; } /* Styl dla wyświetlania punktów umiejętności w panelu */ .skill-points { text-align: center; font-size: 1.1rem; font-weight: 600; color: var(--color-primary-light); margin-bottom: 1.5rem; /* Zwiększony margines */ padding: 0.75rem; background: rgba(0,0,0,0.2); border-radius: var(--border-radius-md); border: 1px solid var(--color-border); } /* =================================================================== */ /* ### KOMPAKTOWY WIDŻET POWIADOMIEŃ O BOOSTACH ### */ /* =================================================================== */ .boost-widget { position: fixed; bottom: 11rem; /* Pozycja nad widżetem Quick-Buy */ left: 50%; transform: translateX(-50%) scale(0.9) translateY(2rem); /* Pozycja startowa animacji */ width: 320px; background: var(--color-surface-1); border: 1px solid var(--color-primary); /* ZMIANA: Ramka na pomarańczową */ border-radius: var(--border-radius-md); box-shadow: 0 0 1.5rem rgba(255, 140, 0, 0.4), var(--shadow-md); /* ZMIANA: Poświata na pomarańczową */ z-index: 150; overflow: hidden; opacity: 0; transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.4s ease; pointer-events: none; } .boost-widget.show { transform: translateX(-50%) scale(1); opacity: 1; } .boost-widget.hidden { transform: translateX(-50%) scale(0.9) translateY(2rem); opacity: 0; } .boost-widget-content { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; } .boost-widget-content i { font-size: 1.2rem; color: var(--color-primary); /* ZMIANA: Ikona na pomarańczową */ } .boost-widget-content .boost-text { flex-grow: 1; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-primary); } .boost-widget-content .boost-timer { font-size: 1rem; font-weight: 700; color: var(--color-primary-light); background: rgba(0,0,0,0.3); padding: 0.25rem 0.5rem; border-radius: var(--border-radius-sm); } /* Pasek postępu na dole widżetu */ .boost-widget-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(0,0,0,0.3); } .boost-widget-progress-fill { width: 100%; height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)); /* ZMIANA: Pasek postępu na pomarańczowy */ } /* =================================================================== */ /* ### NOWY PANEL STATYSTYK OGÓLNYCH ### */ /* =================================================================== */ .stats-panel { position: fixed; top: 450px; /* Zwiększona wartość 'top', aby zrobić miejsce */ left: 1.25rem; width: 280px; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); padding: 0; box-shadow: var(--shadow-md); color: var(--color-text-primary); backdrop-filter: blur(8px); z-index: 499; transition: all 0.2s ease-in-out; } .stats-panel:hover { border-color: var(--color-text-secondary); } /* Nagłówek panelu statystyk */ .stats-panel-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(0,0,0,0.2); border-bottom: 1px solid var(--color-border); } .stats-panel-header i { color: var(--color-text-secondary); } /* Kontener na wiersze ze statystykami */ .stats-panel-content { padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.625rem; /* Odstęp między wierszami */ } /* Pojedynczy wiersz statystyki */ .stat-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; } .stat-label { display: flex; align-items: center; gap: 0.625rem; color: var(--color-text-secondary); } .stat-label i { width: 1.25rem; text-align: center; } .stat-value { font-weight: 700; color: var(--color-text-primary); background: rgba(0,0,0,0.2); padding: 0.125rem 0.5rem; border-radius: var(--border-radius-sm); min-width: 40px; text-align: right; } /* =================================================================== */ /* ### POPRAWKA POZYCJONOWANIA PANELU OSIĄGNIĘĆ ### */ /* =================================================================== */ #achievements-panel { /* Nadpisujemy styl z .panel, aby nie był na środku */ left: auto; /* Usuwa pozycjonowanie od lewej */ right: 1.25rem; /* Dokuje panel 20px od prawej krawędzi */ transform: none; /* Usuwa centrowanie */ /* Poniższe właściwości zapewniają, że panel jest przyklejony do góry */ top: 1.25rem; height: auto; /* Wysokość dopasuje się do zawartości, ale nie więcej niż max-height */ max-height: calc(100vh - 2.5rem); /* Pozostawia margines na górze i na dole */ } /* =================================================================== */ /* ### DEDYKOWANE POWIADOMIENIE O OSIĄGNIĘCIACH (TOAST) ### */ /* =================================================================== */ .toast-notification { position: fixed; top: 200px; /* NOWA POZYCJA: Pod panelem substats */ left: 50%; /* NOWA ANIMACJA: Pojawianie się na środku z góry */ transform: translateX(-50%) translateY(-20px) scale(0.95); width: 380px; /* Możemy je trochę poszerzyć */ max-width: 90vw; background: var(--color-surface-1); border: 1px solid var(--color-primary); border-left-width: 5px; border-radius: var(--border-radius-md); box-shadow: 0 5px 20px rgba(0,0,0,0.4); backdrop-filter: blur(8px); display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; z-index: 2500; opacity: 0; pointer-events: none; transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.4s ease; } .toast-notification.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } .toast-notification.hidden { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.95); } .toast-icon { font-size: 2.5rem; color: var(--color-primary); } .toast-content { display: flex; flex-direction: column; } .toast-title { font-weight: 700; font-size: 1.1rem; color: var(--color-text-primary); } .toast-message { font-size: 0.95rem; color: var(--color-text-secondary); } /* =================================================================== */ /* ### STYLE PRZYCISKÓW I PANELI DZIENNYCH ### */ /* =================================================================== */ /* --- 1. Pozycjonowanie przycisków w prawym górnym rogu --- */ #achievements-btn, #save-container, #daily-tasks-btn, #daily-reward-btn { position: fixed; top: 1.25rem; /* 20px */ z-index: 950; } #achievements-btn { right: 1.25rem; } #save-container { right: 5.75rem; } #daily-reward-btn { right: 10.25rem; } #daily-tasks-btn { right: 14.75rem; } /* --- 2. Ujednolicony wygląd wszystkich okrągłych przycisków --- */ #achievements-btn, #save-btn, #daily-tasks-btn, #daily-reward-btn { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: 50%; box-shadow: var(--shadow-md); cursor: pointer; transition: all 0.2s ease-in-out; } #achievements-btn i, #save-btn i, #daily-tasks-btn i, #daily-reward-btn i { font-size: 1.3rem; transition: all 0.2s ease-in-out; } /* --- 3. Unikalne kolory ikon przycisków --- */ #achievements-btn i { color: var(--color-primary); } #save-btn i { color: var(--color-text-secondary); } #daily-tasks-btn i { color: var(--color-tech); } /* Niebieski */ #daily-reward-btn i { color: var(--color-magic); } /* Fioletowy */ /* --- 4. Efekt :hover dla wszystkich okrągłych przycisków --- */ #achievements-btn:hover, #save-btn:hover, #daily-tasks-btn:hover, #daily-reward-btn:hover { transform: scale(1.1) translateY(-2px); border-color: var(--color-primary-light); background: var(--color-primary); box-shadow: 0 6px 16px rgba(0,0,0,0.3), 0 0 1rem var(--color-primary-light); } #achievements-btn:hover i, #save-btn:hover i, #daily-tasks-btn:hover i, #daily-reward-btn:hover i { color: var(--color-surface-1); /* Ciemny kolor dla kontrastu */ } /* --- 5. Ustawienie kompaktowego rozmiaru dla paneli --- */ #daily-tasks-panel, #daily-reward-panel { max-width: 500px; height: auto; min-height: 250px; } /* --- 6. Stylizacja zawartości Panelu Zadań Dziennych --- */ #daily-tasks-panel .panel-content { display: flex; flex-direction: column; gap: 0.75rem; } #daily-tasks-panel .panel-content > p { text-align: center; font-size: 0.9rem; color: var(--color-text-secondary); margin-bottom: 0.5rem; } .task-placeholder { display: flex; justify-content: space-between; align-items: center; background: var(--color-surface-2); padding: 0.75rem 1rem; border-radius: var(--border-radius-md); border: 1px solid var(--color-border); border-left-width: 4px; transition: all 0.2s ease; } .task-placeholder span { font-weight: 500; } .task-placeholder { border-left-color: var(--color-success); } .task-placeholder i { color: var(--color-success); font-size: 1.2rem; } .task-placeholder.incomplete { border-left-color: var(--color-border); opacity: 0.7; } .task-placeholder.incomplete i { color: var(--color-text-secondary); } #claim-all-quests-reward-btn { margin-top: 1rem; padding: 0.75rem; font-size: 1rem; font-weight: 700; background: var(--color-primary); color: #1a1a1a; border: none; border-radius: var(--border-radius-sm); cursor: pointer; transition: all 0.2s ease; } #claim-all-quests-reward-btn:hover:not(:disabled) { background: var(--color-primary-light); transform: scale(1.02); box-shadow: 0 0 1rem rgba(255,140,0,0.5); } #claim-all-quests-reward-btn:disabled { background: var(--color-surface-2); color: var(--color-text-secondary); cursor: not-allowed; opacity: 0.7; } /* --- 7. Stylizacja zawartości Panelu Nagrody Dziennej --- */ #daily-reward-panel .panel-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex-grow: 1; padding: 2rem; } #daily-reward-panel p { font-size: 1rem; color: var(--color-text-secondary); max-width: 300px; } #daily-reward-timer { font-size: 2.5rem; font-weight: 700; color: var(--color-primary); margin: 1rem 0; text-shadow: 0 0 10px var(--color-primary); } #claim-daily-reward-btn { margin-top: 1rem; padding: 0.8rem 2rem; font-size: 1.1rem; font-weight: 700; background: var(--color-success); color: white; border: none; border-radius: var(--border-radius-sm); cursor: pointer; transition: all 0.2s ease; } #claim-daily-reward-btn:hover:not(:disabled) { background: #2fbf51; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); } #claim-daily-reward-btn:disabled { background: var(--color-surface-2); color: var(--color-text-secondary); cursor: not-allowed; opacity: 0.7; transform: none; box-shadow: none; } [id$="-btn"].has-claim::after, #save-container button.has-claim::after { content: ""; position: absolute; top: -0.3rem; /* Odległość od góry */ right: -0.3rem; /* Odległość od prawej */ width: 1.0rem; /* Średnica kropki (ok. 13px) */ height: 1.0rem; background-color: #FF4136; /* Intensywna czerwień */ border: 2px solid var(--color-surface-1); /* Obwódka w kolorze tła przycisku dla kontrastu */ border-radius: 50%; /* Tworzy idealne kółko */ box-shadow: 0 0 0.5rem rgba(255, 65, 54, 0.7); /* Czerwona poświata */ /* Animacja dla płynnego pojawiania się */ animation: indicator-pop 0.3s cubic-bezier(0.2, 1.5, 0.5, 1); } /* =================================================================== */ /* ### MENU GŁÓWNE, PAUZA I USTAWIENIA ### */ /* =================================================================== */ /* --- 1. Menu Główne --- */ #main-menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 5000; } .menu-background-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-background); opacity: 0.9; backdrop-filter: blur(10px); } .menu-content { position: relative; z-index: 1; } .menu-logo { font-size: 8rem; color: var(--color-primary); text-shadow: 0 0 30px var(--color-primary); margin-bottom: 1rem; } #main-menu h1 { font-size: 4rem; font-weight: 700; color: var(--color-text-primary); } #main-menu p { font-size: 1.25rem; color: var(--color-text-secondary); margin-bottom: 3rem; } .menu-nav { display: flex; flex-direction: column; gap: 1rem; align-items: center; } .menu-nav button { background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-primary); padding: 0.8rem 1.5rem; border-radius: var(--border-radius-sm); font-size: 1.1rem; font-weight: 500; cursor: pointer; min-width: 250px; display: flex; align-items: center; justify-content: center; gap: 0.75rem; transition: all 0.2s ease; } .menu-nav button:hover { background: var(--color-primary); color: #111; border-color: var(--color-primary-light); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.3); } /* --- 2. Ogólny Styl Nakładek (Pauza, Ustawienia) --- */ .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(18, 18, 18, 0.8); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 4000; opacity: 0; transition: opacity 0.3s ease; } .overlay:not(.hidden) { opacity: 1; } .settings-box, .pause-box { background: var(--color-surface-1); padding: 2rem; border-radius: var(--border-radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); width: 100%; max-width: 500px; } .settings-box h2, .pause-box h2 { text-align: center; font-size: 2rem; margin-bottom: 2rem; color: var(--color-primary-light); } /* --- 3. Panel Ustawień --- */ .setting-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .setting-item label { font-size: 1rem; font-weight: 500; } .setting-item select, .setting-item input { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); padding: 0.5rem; color: var(--color-text-primary); } .settings-close-btn { width: 100%; margin-top: 1rem; /* Korzysta ze stylu .menu-nav button */ background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-primary); padding: 0.8rem 1.5rem; border-radius: var(--border-radius-sm); font-size: 1.1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .settings-close-btn:hover { background: var(--color-primary); color: #111; } /* --- 4. Menu Pauzy --- */ .pause-nav { display: flex; flex-direction: column; gap: 1rem; } .pause-nav button { /* Korzysta ze stylu .menu-nav button */ background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-primary); padding: 0.8rem 1.5rem; border-radius: var(--border-radius-sm); font-size: 1.1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .pause-nav button:hover { background: var(--color-primary); color: #111; } /* +++ DO DODANIA (na końcu pliku styles.css) +++ */ /* =================================================================== */ /* ### STYLE WYDARZENIA "GORĄCZKA ZŁOTYCH MARCHEWEK" ### */ /* =================================================================== */ .clickable-golden-carrot { position: absolute; top: -5rem; /* Startuje poza ekranem */ font-size: 3rem; /* Jest większa od standardowych */ color: #FFD700; /* Złoty kolor */ /* Poświata, aby się wyróżniała */ filter: drop-shadow(0 0 15px #FFD700) drop-shadow(0 0 5px #FFFFFF); z-index: 1000; /* Musi być na wierzchu */ cursor: pointer; /* Kursor dłoni, aby pokazać, że jest klikalna */ pointer-events: auto; /* Umożliwia klikanie */ /* Animacja spadania */ animation: fall linear; will-change: transform; } #orbit-container { position: absolute; top: 50%; /* ✅ POPRAWKA: Wyrównujemy pozycję do głównej marchewki */ left: 50%; width: 200px; height: 300px; transform: translate(-50%, -50%); pointer-events: none; animation: orbit-spin 30s linear infinite; } @keyframes orbit-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* 2. Styl pojedynczej, orbitującej marchewki */ .orbiting-carrot { position: absolute; top: -1%; left: 47%; transform-origin: 0 175px; /* Punkt obrotu (połowa wysokości/szerokości kontenera) */ transform: translateX(-50%); /* Animacja "klikania" */ } .orbiting-carrot i { font-size: 1.5rem; color: #88f78d; filter: drop-shadow(0 0 5px #88f78d); } /* 3. Animacja klikania dla satelitów */ #fullscreen-announcement-container { position: fixed; top: 40%; /* Nieco wyżej niż sam środek */ left: 50%; transform: translate(-50%, -50%); z-index: 3000; /* Upewniamy się, że jest na wierzchu */ pointer-events: none; /* Nie blokuje kliknięć */ width: 100%; display: flex; justify-content: center; } /* 2. Wygląd samego napisu "LEVEL UP" */ .level-up-fx { position: absolute; /* Umożliwia swobodną animację w kontenerze */ font-family: var(--font-family); font-size: 5rem; /* Duży, czytelny rozmiar */ font-weight: 700; /* Pogrubienie */ color: var(--color-primary-light); text-shadow: 0 0 15px var(--color-primary), 0 3px 6px rgba(0,0,0,0.5); white-space: nowrap; /* Zapobiega łamaniu tekstu */ /* Przypisanie animacji */ animation: level-up-anim 2s cubic-bezier(0.25, 1.5, 0.5, 1) forwards; } /* 3. Definicja klatek kluczowych animacji */ @keyframes level-up-anim { 0% { transform: scale(0.5); opacity: 0; } 20% { transform: scale(1.1); opacity: 1; } 40% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.2) translateY(-100px); opacity: 0; } } /* =================================================================== */ /* ### SYSTEM ARTEFAKTÓW I EKWIPUNKU ### */ /* =================================================================== */ /* --- 1. Przycisk przełączania ekwipunku (prawy górny róg) --- */ #inventory-btn { position: fixed; top: 1.25rem; right: 19.25rem; /* Pozycjonowanie obok innych przycisków */ z-index: 950; display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: 50%; box-shadow: var(--shadow-md); cursor: pointer; transition: all 0.2s ease-in-out; } #inventory-btn i { font-size: 1.3rem; color: #CD7F32; /* Brązowy kolor ikony */ transition: all 0.2s ease-in-out; } #inventory-btn:hover { transform: scale(1.1) translateY(-2px); border-color: var(--color-primary-light); background: var(--color-primary); box-shadow: 0 6px 16px rgba(0,0,0,0.3), 0 0 1rem var(--color-primary-light); } #inventory-btn:hover i { color: var(--color-surface-1); } /* --- 2. Główny panel artefaktów (prawy dolny róg) --- */ #artifact-panel { /* Nadpisujemy styl z .panel, aby nie był na środku */ position: fixed; left: auto; /* Usuwa pozycjonowanie od lewej */ bottom: auto; /* Usuwa pozycjonowanie od dołu */ transform: none; /* Usuwa centrowanie */ /* NOWA POZYCJA */ top: 5.5rem; /* ok. 88px od góry - pod przyciskami */ right: 1.25rem; /* ok. 20px od prawej */ width: 420px; max-width: 90vw; height: auto; max-height: calc(100vh - 7rem); /* Max wysokość z marginesem */ z-index: 900; } #artifact-panel .panel-content { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; } .inventory-section.inventory-backpack { flex-grow: 1; /* Sprawia, że plecak wypełnia dostępną przestrzeń */ display: flex; flex-direction: column; } .inventory-header { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-secondary); margin-bottom: 0.75rem; text-align: center; flex-shrink: 0; } /* --- 3. Siatki na przedmioty --- */ .item-grid { display: grid; gap: 10px; } #equipped-items-grid { grid-template-columns: repeat(3, 1fr); /* 3 kolumny dla wyposażenia */ } .backpack-grid { /* Zmieniamy na 2 kolumny, aby lepiej wykorzystać miejsce */ grid-template-columns: repeat(5, 1fr); /* NAJWAŻNIEJSZA ZMIANA: Ograniczenie wysokości i włączenie przewijania */ max-height: 35vh; /* Ogranicza wysokość do 35% wysokości okna przeglądarki */ max-width: 95vh; overflow-y: auto; /* Włącza pasek przewijania, gdy jest za dużo przedmiotów */ flex-grow: 1; padding-right: 10px; /* Dodatkowe miejsce na pasek przewijania */ } /* --- 4. Sloty na wyposażone przedmioty --- */ .equipment-slot { width: 100%; aspect-ratio: 1 / 1; background: var(--color-surface-2); border: 2px dashed var(--color-border); border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; font-size: 2.5rem; } .equipment-slot.has-item { border-style: solid; border-color: var(--rarity-color); cursor: pointer; } .equipment-slot.has-item:hover { transform: scale(1.05); box-shadow: 0 0 15px var(--rarity-color); } .equipment-slot.has-item i { color: var(--rarity-color); filter: drop-shadow(0 0 8px var(--rarity-color)); } /* --- 5. Karty artefaktów w plecaku --- */ .artifact-card { background: var(--color-surface-2); border: 1px solid var(--color-border); border-left-width: 5px; /* Akcent kolorystyczny rzadkości */ border-radius: var(--border-radius-sm); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; transition: all 0.2s ease; border-left-color: var(--rarity-color); } .artifact-card:hover { transform: translateY(-2px); border-color: var(--rarity-color); border-left-width: 5px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .artifact-card-header { display: flex; align-items: center; gap: 0.75rem; } .artifact-icon { font-size: 1.8rem; color: var(--rarity-color); width: 2rem; text-align: center; } .artifact-details .name { font-weight: 600; color: var(--color-text-primary); } .artifact-details .rarity { font-size: 0.8rem; font-weight: 500; text-transform: uppercase; color: var(--rarity-color); } .artifact-bonuses { list-style: none; font-size: 0.85rem; color: var(--color-text-secondary); padding-left: 0.5rem; } .artifact-actions { margin-top: auto; } .artifact-actions .equip-btn { width: 100%; background: var(--color-primary); color: #1a1a1a; border: none; padding: 0.5rem; border-radius: var(--border-radius-sm); font-weight: 600; cursor: pointer; } .artifact-actions .equip-btn:hover { background: var(--color-primary-light); } /* --- 6. Kolory dla rzadkości --- */ [data-rarity="Normalny"] { --rarity-color: #A0A0A0; } [data-rarity="Rzadki"] { --rarity-color: #3498db; } [data-rarity="Epicki"] { --rarity-color: #9b59b6; } [data-rarity="Legendarny"] { --rarity-color: #f1c40f; } /* --- 7. Menu kontekstowe do sprzedaży --- */ #artifact-context-menu { position: fixed; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); box-shadow: var(--shadow-md); z-index: 5001; overflow: hidden; padding: 5px; animation: context-menu-appear 0.1s ease-out; } @keyframes context-menu-appear { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } #artifact-context-menu button { display: flex; align-items: center; gap: 10px; background: none; border: none; color: var(--color-text-primary); padding: 0.6rem 1rem; width: 100%; text-align: left; cursor: pointer; border-radius: var(--border-radius-sm); } #artifact-context-menu button:hover { background: #c0392b; /* Czerwony kolor przy sprzedaży */ color: white; } #context-sell-value { margin-left: auto; font-weight: 600; color: #f1c40f; /* Kolor magiczek */ } .artifact-actions { margin-top: auto; display: flex; /* Ustawia przyciski obok siebie */ gap: 10px; /* Dodaje odstęp między przyciskami */ } .artifact-actions .equip-btn, .artifact-actions .sell-btn { width: 100%; border: none; padding: 0.5rem; border-radius: var(--border-radius-sm); font-weight: 600; cursor: pointer; transition: background-color 0.2s; } .artifact-actions .equip-btn { background: var(--color-primary); color: #1a1a1a; } .artifact-actions .equip-btn:hover { background: var(--color-primary-light); } .artifact-actions .sell-btn { background: #c0392b; /* Czerwony kolor dla sprzedaży */ color: white; } .artifact-actions .sell-btn:hover { background: #e74c3c; } .backpack-grid { overflow-y: auto; } /* Styl paska dla przeglądarek WebKit (Chrome, Edge, Safari, Opera) */ .backpack-grid::-webkit-scrollbar { width: 12px; } .backpack-grid::-webkit-scrollbar-track { background: rgba(18, 18, 18, 0.7); border-radius: 10px; margin: 5px 0; } .backpack-grid::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 10px; border: 2px solid rgba(18, 18, 18, 0.7); } .backpack-grid::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); } /* Styl paska dla przeglądarki Firefox */ .backpack-grid { scrollbar-width: thin; scrollbar-color: var(--color-primary) rgba(18, 18, 18, 0.7); } #equipped-stats-widget { position: fixed; bottom: 6.5rem; /* Pozycja nad głównym hotbarem */ right: 1.25rem; width: 280px; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); backdrop-filter: blur(8px); z-index: 750; /* Poniżej paneli, ale nad resztą UI */ padding: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; transition: all 0.3s ease; } .widget-header { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-secondary); text-align: center; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 8px; } .widget-header i { color: var(--color-primary); } .widget-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .widget-slot { aspect-ratio: 1 / 1; position: relative; /* ✅ DODAJ TĘ LINIĘ */ background: var(--color-surface-2); border: 2px solid var(--color-border); border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; font-size: 2rem; transition: all 0.2s ease; } .widget-slot.has-item { border-style: solid; border-color: var(--rarity-color); cursor: pointer; } .widget-slot.has-item:hover { transform: scale(1.1); box-shadow: 0 0 15px var(--rarity-color); } .widget-slot.has-item i { color: var(--rarity-color); filter: drop-shadow(0 0 5px var(--rarity-color)); } .widget-bonuses { background: rgba(0,0,0,0.2); border-radius: var(--border-radius-sm); padding: 0.5rem 0.75rem; font-size: 0.85rem; color: var(--color-text-secondary); } .widget-bonuses ul { list-style: none; padding: 0; margin: 0; } .widget-bonuses li { padding: 2px 0; } .widget-bonuses .bonus-value { font-weight: 700; color: var(--color-text-primary); } /* --- TOOLTIP (dymek z informacją) --- */ #artifact-tooltip { position: fixed; background: rgba(18, 18, 18, 0.95); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); /* Używamy spójnego promienia */ padding: 0.75rem; width: 260px; /* Nieco szerszy dla lepszego układu */ z-index: 5000; pointer-events: none; backdrop-filter: blur(5px); transition: opacity 0.15s ease, transform 0.15s ease; opacity: 1; transform: scale(1); min-height: 50px; /* Zapobiega "zapadaniu się" w linię */ } #artifact-tooltip.hidden { opacity: 0; transform: scale(0.95); } #tooltip-header { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); margin-bottom: 0.5rem; } #tooltip-icon { font-size: 2.2rem; /* Powiększona ikona */ width: 2.5rem; text-align: center; color: var(--rarity-color); filter: drop-shadow(0 0 5px var(--rarity-color)); } #tooltip-details { display: flex; flex-direction: column; } #tooltip-name { font-weight: 600; font-size: 1.1rem; color: var(--color-text-primary); } #tooltip-rarity { font-size: 0.8rem; font-weight: 500; text-transform: uppercase; color: var(--rarity-color); } #tooltip-bonuses { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; color: var(--color-text-secondary); } #tooltip-bonuses li { padding: 3px 0; /* Zwiększony odstęp dla czytelności */ } /* Przycisk akcji w nagłówku panelu (np. Synteza) - NOWY, BARDZIEJ WIDOCZNY STYL */ .header-action-btn { /* Podstawowe właściwości */ display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; /* === ZMIANY POPRAWIAJĄCE WIDOCZNOŚĆ === */ /* 1. Tło: Delikatne podświetlenie w kolorze technologii */ background: rgba(70, 130, 180, 0.15); /* Półprzezroczysty --color-tech */ /* 2. Tekst i ikona: od razu w kolorze technologii */ color: var(--color-tech); /* Używamy niebieskiego koloru */ /* 3. Ramka: Również w kolorze technologii, co wyraźnie oddziela przycisk */ border: 1px solid var(--color-tech); /* */ border-radius: 50px; /* Kształt "pastylki" */ /* Pozycjonowanie */ margin-left: auto; margin-right: 1rem; /* Płynne przejścia */ transition: all 0.2s ease-in-out; } /* Ikona wewnątrz przycisku */ .header-action-btn i { margin-right: 0.25rem; transition: transform 0.2s ease-in-out; } /* Efekt po najechaniu myszką - teraz bardziej intensywny */ .header-action-btn:hover { color: var(--color-text-primary); /* Biały tekst dla maksymalnego kontrastu */ background: var(--color-tech); /* Pełny, niebieski kolor tła */ border-color: #8bb5d7; /* Jaśniejszy odcień niebieskiego dla ramki */ transform: translateY(-2px); box-shadow: 0 0 12px rgba(70, 130, 180, 0.7); /* Bardziej widoczna poświata */ } /* Efekt dla ikony po najechaniu */ .header-action-btn:hover i { transform: rotate(-15deg) scale(1.1); } .synthesis-content { display: grid; grid-template-columns: 420px 1fr; gap: 1.5rem; padding: 1.5rem; flex-grow: 1; min-height: 0; } /* LEWA KOLUMNA: Manualna i Szybka Synteza */ .synthesis-main-column { display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; /* --- POPRAWKA: Usunięto padding-right, który powodował ucinanie --- */ padding-right: 0.5rem; } .synthesis-section { background: rgba(0,0,0,0.15); border-radius: var(--border-radius-md); padding: 1.5rem; border: 1px solid var(--color-border); } .synthesis-section h4 { margin: -1.5rem -1.5rem 1rem -1.5rem; padding: 0.75rem 1rem; background: rgba(0,0,0,0.2); border-bottom: 1px solid var(--color-border); border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; text-align: center; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; } /* Style dla slotów, strzałki, etc. (bez zmian) */ .synthesis-core { display: flex; align-items: center; justify-content: space-around; background: rgba(0,0,0,0.2); padding: 1rem; border-radius: var(--border-radius-md); } .synthesis-slots-container { display: flex; gap: 1rem; } .synthesis-slot, .synthesis-result-preview { width: 90px; height: 90px; background: var(--color-surface-2); border: 2px dashed var(--color-border); border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; transition: all 0.2s ease; } .synthesis-slot.has-item, .synthesis-result-preview.has-item { border-style: solid; border-color: var(--rarity-color); cursor: pointer; } .synthesis-slot.has-item:hover { transform: scale(1.05); box-shadow: 0 0 15px var(--rarity-color); } .synthesis-slot.has-item i, .synthesis-result-preview.has-item i { color: var(--rarity-color); filter: drop-shadow(0 0 8px var(--rarity-color)); } /* Informacje o syntezie (bez zmian) */ .synthesis-details { text-align: center; padding-top: 1rem; } #synthesis-chance-display { font-size: 1.1rem; font-weight: 600; margin-top: 0.5rem; color: var(--color-text-primary); } #synthesis-chance-display span { color: var(--color-primary-light); font-size: 1.3rem; } #item-drop-container { position: fixed; top: 25%; /* Pozycja w górnej części ekranu */ left: 50%; transform: translateX(-50%); z-index: 9998; /* Bardzo wysoko, ale pod menu pauzy itp. */ pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .item-drop-popup { display: flex; align-items: center; gap: 1rem; background: var(--color-surface-1); color: var(--color-text-primary); padding: 1rem 1.5rem; border-radius: var(--border-radius-lg); border: 2px solid; /* Kolor będzie ustawiany przez zmienną */ border-color: var(--rarity-color, var(--color-border)); box-shadow: 0 0 20px var(--rarity-color, #000), var(--shadow-md); min-width: 320px; animation: item-drop-anim 4s ease-out forwards; } @keyframes item-drop-anim { 0% { opacity: 0; transform: translateY(30px) scale(0.9); } 10% { opacity: 1; transform: translateY(0) scale(1.05); } 20% { transform: translateY(0) scale(1); } 90% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-30px) scale(0.9); } } .item-drop-popup .icon { font-size: 3rem; color: var(--rarity-color); filter: drop-shadow(0 0 8px var(--rarity-color)); } .item-drop-popup .details { display: flex; flex-direction: column; } .item-drop-popup .name { font-size: 1.1rem; font-weight: 700; } .item-drop-popup .rarity { font-size: 0.9rem; font-weight: 500; text-transform: uppercase; color: var(--rarity-color); } /* --- NOWY, POPRAWIONY STYL PRZYCISKU "SYNTETYZUJ" --- */ #synthesis-confirm-btn { margin-top: 1rem; padding: 0.8rem 2rem; font-size: 1.1rem; font-weight: 700; background: var(--color-primary); color: #1a1a1a; border: none; border-radius: var(--border-radius-sm); cursor: pointer; transition: all 0.2s ease; width: 100%; } #synthesis-confirm-btn:hover:not(:disabled) { background: var(--color-primary-light); transform: scale(1.02); box-shadow: 0 0 1rem rgba(255,140,0,0.5); } #synthesis-confirm-btn:disabled { background: var(--color-surface-2); color: var(--color-text-secondary); cursor: not-allowed; opacity: 0.7; } .skill-tree-reset-container { /* Rozciąga się na wszystkie 3 kolumny siatki */ grid-column: 1 / -1; text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .skill-tree-reset-container p { font-size: 0.9rem; color: var(--color-text-secondary); margin-bottom: 1rem; } #reset-skills-btn { background: #c0392b; /* Czerwony kolor dla akcji "niebezpiecznej" */ color: white; border: 1px solid #e74c3c; padding: 0.8rem 1.5rem; font-size: 1rem; font-weight: 700; border-radius: var(--border-radius-sm); cursor: pointer; transition: all 0.2s ease; } #reset-skills-btn:hover:not(:disabled) { background: #e74c3c; transform: translateY(-2px); box-shadow: 0 0 15px rgba(231, 76, 60, 0.5); } #reset-skills-btn .cost { opacity: 0.8; font-weight: 500; } #reset-skills-btn:disabled { background: var(--color-surface-2); color: var(--color-text-secondary); cursor: not-allowed; opacity: 0.7; border-color: var(--color-border); } /* PRAWA KOLUMNA: Lista Dostępnych Składników (bez zmian) */ .synthesis-inventory-section { display: flex; flex-direction: column; min-height: 0; padding: 0 !important; background: none !important; border: none !important; } #synthesis-inventory-list { flex-grow: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: var(--border-radius-md); } /* Nowy przycisk "Dodaj" na karcie artefaktu w panelu syntezy */ .artifact-card .add-synthesis-btn { background: var(--color-tech); /* Niebieski, aby odróżnić od "Wyposaż" */ color: white; border: none; padding: 0.5rem; border-radius: var(--border-radius-sm); font-weight: 600; cursor: pointer; margin-top: 0.5rem; } .artifact-card .add-synthesis-btn:hover:not(:disabled) { background: #5a9dce; } .artifact-card .add-synthesis-btn:disabled { background: var(--color-surface-2); color: var(--color-text-secondary); cursor: not-allowed; opacity: 0.7; } /* ====================================================== */ /* ### STYLE DLA SYSTEMU CHATU I GRACZY ONLINE ### */ /* ====================================================== */ /* ============================================================= */ /* ### KOMPLETNY I OSTATECZNY KOD STYLÓW CHATU ### */ /* ============================================================= */ #tavern-panel-content { display: flex; flex-direction: column; gap: 1.5rem; } .tavern-section h3 { font-size: 1rem; text-transform: uppercase; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; margin-bottom: 1rem; } .mercenary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .mercenary-card { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; box-shadow: var(--shadow-sm); } .mercenary-header { display: flex; gap: 1rem; align-items: center; } .mercenary-avatar { font-size: 2.5rem; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-surface-1); color: var(--color-primary-light); } .mercenary-name { font-size: 1.1rem; font-weight: 700; } .mercenary-title { font-size: 0.9rem; color: var(--color-text-secondary); } .mercenary-bonus { background: rgba(0,0,0,0.2); padding: 0.5rem; border-radius: var(--border-radius-sm); font-weight: 600; text-align: center; color: var(--color-success); } .mercenary-card .hire-btn { margin-top: auto; background: var(--color-primary); color: #1a1a1a; } .mercenary-level { font-size: 0.8rem; font-weight: 700; background: var(--color-surface-1); color: var(--color-primary-light); padding: 2px 8px; border-radius: 50px; border: 1px solid var(--color-border); } .mercenary-xp-bar { width: 100%; height: 8px; background-color: rgba(0,0,0,0.3); border-radius: 4px; overflow: hidden; } .mercenary-xp-fill { width: 0%; /* Ustawiane przez JS */ height: 100%; background-color: var(--color-primary); border-radius: 4px; transition: width 0.3s ease; } .mission-card { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); padding: 1.5rem; margin-bottom: 1rem; } .mission-card h4 { font-size: 1.2rem; color: var(--color-primary-light); margin: 0 0 0.5rem 0; } .mission-card p { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0 0 1rem 0; } .mission-details { display: flex; gap: 1.5rem; margin-bottom: 1rem; } .mission-details span { font-weight: 600; } .mission-timer { font-size: 1.2rem; font-weight: 700; text-align: center; margin-bottom: 1rem; } .mission-card.active { border-color: var(--color-primary); } .fire-btn { background-color: #c0392b; /* Czerwony kolor dla akcji "niebezpiecznej" */ color: white; border: 1px solid #e74c3c; } .fire-btn:hover { background-color: #e74c3c; } .info-text { text-align: center; font-size: 0.9rem; color: var(--color-text-secondary); padding: 0.5rem; background: rgba(0,0,0,0.15); border-radius: var(--border-radius-sm); } .mission-timer { font-family: 'Roboto Mono', monospace; /* Lepsza czcionka dla licznika */ font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 1.5rem; padding: 0.75rem; background: rgba(0,0,0,0.3); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); color: var(--color-primary-light); text-shadow: 0 0 8px var(--color-primary); transition: color 0.3s; } /* Dodatkowy styl, gdy misja jest gotowa do odbioru */ #claim-mission-btn:not(:disabled) + .mission-timer { color: var(--color-success); text-shadow: 0 0 8px var(--color-success); } .mission-card { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); display: flex; flex-direction: column; transition: all 0.2s ease; padding: 1rem; margin-bottom: 1rem; } .mission-card:hover { transform: translateY(-4px); border-color: var(--color-primary); box-shadow: var(--shadow-md); } .mission-card h4 { font-size: 1.2rem; color: var(--color-primary-light); margin: 0 0 0.5rem 0; } .mission-card p.mission-description { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0 0 1rem 0; min-height: 40px; } /* NOWY styl dla wiersza z czasem i kosztem */ .mission-info-row { display: flex; justify-content: space-between; padding: 0.75rem 0; margin-bottom: 1rem; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); font-weight: 600; color: var(--color-text-secondary); } .mission-info-row span { display: flex; align-items: center; gap: 0.5rem; } /* NOWY styl dla sekcji z nagrodami */ .mission-rewards-wrapper { margin-bottom: 1.5rem; flex-grow: 1; /* Wypycha przycisk na dół karty */ } .mission-rewards-wrapper h5 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 0.75rem; } .mission-rewards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .mission-rewards li { background: rgba(0,0,0,0.2); padding: 0.5rem; border-radius: var(--border-radius-sm); display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 500; } .mission-rewards li i { color: var(--color-primary-light); width: 20px; text-align: center; } /* Styl dla aktywnej misji (bez zmian) */ .mission-card.active { border-color: var(--color-primary); } .mission-timer { font-size: 1.2rem; font-weight: 700; text-align: center; margin-bottom: 1rem; } /* Styl przycisku startu */ .mission-card .btn-primary { margin-top: auto; /* Zapewnia, że przycisk jest zawsze na dole */ } .modal-overlay { position: fixed; /* Kluczowe: Pozycjonuje względem okna przeglądarki */ top: 0; left: 0; width: 100%; height: 100%; background: rgba(18, 18, 18, 0.85); backdrop-filter: blur(8px); /* Kluczowe: Centruje zawartość (białe pudełko) w pionie i poziomie */ display: flex; align-items: center; justify-content: center; padding: 2rem; /* Margines bezpieczeństwa na małych ekranach */ z-index: 5000; /* Upewnia się, że jest na samym wierzchu */ /* Ukrywanie i pokazywanie z animacją */ opacity: 1; transition: opacity 0.3s ease; } /* Stan ukryty (dodajemy !important, aby mieć pewność) */ .modal-overlay.hidden { opacity: 0; pointer-events: none; } /* 2. Wycentrowane pudełko z treścią */ .modal-content.replace-merc-modal-content { background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); padding: 2rem; width: 100%; max-width: 800px; text-align: center; } #merc-selection-list { margin: 2rem 0; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } #merc-selection-list .mercenary-card { cursor: pointer; transition: all 0.2s ease; } #merc-selection-list .mercenary-card:hover { transform: translateY(-5px) scale(1.03); border-color: var(--color-primary-light); box-shadow: 0 0 15px var(--color-primary-light); } #cancel-replace-btn { margin-top: 1rem; padding: 0.75rem 2rem; } .mercenary-card { border-left-width: 5px; border-left-color: var(--rarity-color); } .mercenary-rarity { font-size: 0.8rem; font-weight: 500; color: var(--rarity-color); } /* Ustawiamy zmienną --rarity-color na podstawie atrybutu data-rarity */ .mercenary-card[data-rarity="Zwykły"] { --rarity-color: #A0A0A0; } .mercenary-card[data-rarity="Doświadczony"] { --rarity-color: #3498db; } .mercenary-card[data-rarity="Elitarny"] { --rarity-color: #9b59b6; } .mercenary-card[data-rarity="Heros"] { --rarity-color: #f1c40f; } #tavern-refresh-timer { font-size: 0.8rem; font-weight: 500; color: var(--color-text-secondary); margin-left: 1rem; font-style: italic; } .section-header-with-timer { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } /* Usuwamy margines z nagłówka, bo jest już w kontenerze */ .section-header-with-timer h3 { margin-bottom: 0; } /* NOWY, WYRÓŻNIONY WYGLĄD TIMERA */ #tavern-refresh-timer { display: flex; align-items: center; gap: 0.5rem; background: var(--color-surface-2); color: var(--color-text-secondary); font-size: 0.9rem; font-weight: 600; font-family: 'Roboto Mono', monospace; padding: 0.5rem 1rem; border-radius: 50px; /* Kształt pigułki */ border: 1px solid var(--color-border); transition: all 0.3s ease; } #tavern-refresh-timer i { color: var(--color-primary); } /* Styl, gdy odświeżenie jest gotowe */ #tavern-refresh-timer.ready i { color: var(--color-success); } #chat-container { position: fixed; bottom: 3.9rem; /* odstęp od dolnego hotbara */ left: 1.5rem; width: clamp(250px, 30vw, 380px); max-width: 90vw; /* Ustal wysokość tak, aby chat nie wchodził na stats ani widgety powyżej */ max-height: calc( 74vh - 3.9rem /* bottom hotbar offset */ - 1.25rem /* margines górny */ - 120px /* profile widget height */ - 1.25rem /* gap */ - 150px /* autosave widget height */ - 1.25rem /* gap */ - 3.5rem /* stats panel (header) height */ ); min-height: 200px; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); z-index: 1000; display: flex; flex-direction: column; overflow: hidden; } /* === HEADER I INPUT CONTAINER === */ #chat-header, #chat-input-container { padding: 0.75rem 1rem; background: rgba(0,0,0,0.2); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } #chat-header { display: flex; justify-content: space-between; align-items: center; } #chat-header > span i { color: var(--color-primary); margin-right: 0.5rem; } #online-counter { font-size: 0.8rem; color: var(--color-text-secondary); } #online-counter i { color: var(--color-success); } #online-count { font-weight: 700; color: var(--color-text-primary); } /* === MESSAGES CONTAINER === */ #chat-messages { flex-grow: 1; padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--color-primary) rgba(0, 0, 0, 0.3); } #chat-messages::-webkit-scrollbar { width: 10px; } #chat-messages::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); border-radius: 10px; } #chat-messages::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 10px; border: 2px solid var(--color-surface-1); } #chat-messages::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); } /* === SINGLE MESSAGE === */ .chat-message { display: flex; gap: 0.75rem; margin-bottom: 1rem; max-width: 90%; align-self: flex-start; } .chat-avatar { width: clamp(32px, 4vw, 40px); height: clamp(32px, 4vw, 40px); border-radius: 50%; border: 2px solid var(--color-border); flex-shrink: 0; background: var(--color-surface-2); } .message-content { display: flex; flex-direction: column; } .message-header { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; } .message-header .author { font-weight: 700; font-size: 0.9rem; color: var(--color-primary-light); } .message-header .level { font-size: 0.75rem; font-weight: 600; color: var(--color-text-secondary); background: var(--color-surface-2); padding: 1px 6px; border-radius: var(--border-radius-sm); } .message-header .timestamp { font-size: 0.7rem; color: var(--color-text-secondary); } .message-content .text { background: var(--color-surface-2); padding: 0.6rem 0.9rem; border-radius: var(--border-radius-md); font-size: 0.9rem; line-height: 1.4; word-wrap: break-word; } /* === OWN MESSAGE STYLES === */ .chat-message.my-message { align-self: flex-end; flex-direction: row-reverse; } .chat-message.my-message .message-header { justify-content: flex-end; } .chat-message.my-message .text { background: var(--color-primary); color: #111; } /* === INPUT AREA === */ #chat-input-container { display: flex; border-top: 1px solid var(--color-border); padding: 0.5rem; flex-shrink: 0; } #chat-input { flex-grow: 1; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); color: var(--color-text-primary); padding: 0.75rem; outline: none; } #chat-input:focus { border-color: var(--color-primary); } #chat-send-btn { background: var(--color-primary); border: none; color: #111; font-size: 1rem; width: clamp(2.5rem, 3vw, 3rem); height: clamp(2.5rem, 3vw, 3rem); margin-left: 0.5rem; border-radius: var(--border-radius-sm); cursor: pointer; } #chat-send-btn:hover { background: var(--color-primary-light); } .profile-action-btn { width: 100%; margin-top: 1rem; padding: 0.75rem; font-weight: 600; font-size: 0.9rem; background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-secondary); border-radius: var(--border-radius-md); cursor: pointer; transition: all 0.2s ease; } .profile-action-btn:hover { background: var(--color-primary); color: #111; border-color: var(--color-primary-light); } .profile-action-btn i { margin-right: 0.5rem; } /* Panel rankingu */ #ranking-panel { width: 600px; max-width: 90vw; height: 70vh; max-height: 800px; } #ranking-list-container { height: 100%; overflow-y: auto; padding-right: 10px; /* Miejsce na pasek przewijania */ } /* Tabela rankingu */ .ranking-table { width: 100%; border-collapse: collapse; font-size: 1rem; } .ranking-table th, .ranking-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border); } .ranking-table th { font-weight: 700; text-transform: uppercase; font-size: 0.8rem; color: var(--color-text-secondary); position: sticky; top: 0; background: var(--color-surface-1); /* Tło dla "przyklejonego" nagłówka */ } .ranking-table .rank-pos { font-weight: 700; width: 50px; text-align: center; } .ranking-table .rank-name { font-weight: 600; } .ranking-table .rank-score { font-family: 'Roboto Mono', monospace; font-weight: 500; color: var(--color-primary-light); } /* Podświetlenie gracza */ .ranking-table .player-highlight { background: rgba(255, 165, 0, 0.1); border-left: 3px solid var(--color-primary); border-right: 3px solid var(--color-primary); } /* Podsumowanie pozycji gracza na dole */ #player-rank-summary { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); text-align: center; font-weight: 600; color: var(--color-text-secondary); } #player-rank-position { font-size: 1.2rem; color: var(--color-text-primary); } /* Styl paska przewijania dla rankingu */ #ranking-list-container::-webkit-scrollbar { width: 10px; } #ranking-list-container::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); } #ranking-list-container::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 10px; } #ranking-list-container { scrollbar-width: thin; scrollbar-color: var(--color-primary) rgba(0, 0, 0, 0.3); } .overlay#auth-overlay { display: flex; opacity: 1; background: rgba(18, 18, 18, 0.9); backdrop-filter: blur(10px); z-index: 9999; transition: opacity 0.3s ease; } .overlay#auth-overlay.hidden { opacity: 0; pointer-events: none; } .auth-box { background: var(--color-surface-1); padding: 2rem; border-radius: var(--border-radius-lg); border: 1px solid var(--color-border); width: 100%; max-width: 450px; text-align: center; box-shadow: var(--shadow-md); } .auth-box h2 { font-size: 2rem; color: var(--color-primary-light); margin-bottom: 1.5rem; } .auth-form { display: flex; flex-direction: column; gap: 1rem; } .auth-form input { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); padding: 0.8rem 1rem; font-size: 1rem; color: var(--color-text-primary); outline: none; transition: border-color 0.2s; } .auth-form input:focus { border-color: var(--color-primary); } .auth-form button { padding: 0.8rem; font-size: 1.1rem; font-weight: 700; border-radius: var(--border-radius-sm); border: none; cursor: pointer; transition: all 0.2s; } .auth-form button.btn-primary { background: var(--color-primary); color: #111; } .auth-form button.btn-primary:hover { background: var(--color-primary-light); } .auth-form button.btn-secondary { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); margin-top: 0.5rem; } .auth-form button.btn-secondary:hover { background: var(--color-surface-2); color: var(--color-text-primary); } .auth-switch-text { margin-top: 1.5rem; font-size: 0.9rem; color: var(--color-text-secondary); } .auth-switch-text span { color: var(--color-primary-light); font-weight: 600; cursor: pointer; } #auth-error { color: #FF4136; background: rgba(255, 65, 54, 0.1); padding: 0.75rem; border-radius: var(--border-radius-sm); margin-top: 1rem; font-size: 0.9rem; font-weight: 500; display: none; } .overlay#offline-progress-overlay { display: flex; opacity: 1; background: rgba(18, 18, 18, 0.9); backdrop-filter: blur(10px); z-index: 10000; /* Musi być na samym wierzchu */ transition: opacity 0.3s ease; } .overlay#offline-progress-overlay.hidden { opacity: 0; pointer-events: none; } .offline-progress-box { background: var(--color-surface-1); padding: 2rem; border-radius: var(--border-radius-lg); border: 1px solid var(--color-border); width: 100%; max-width: 500px; text-align: center; box-shadow: var(--shadow-md); color: var(--color-text-secondary); /* ✅ DODAJ TĘ LINIĘ, aby skompensować zoom na body */ transform: scale(calc(1 / 0.75)); } .offline-progress-box h2 { font-size: 2rem; color: var(--color-primary-light); margin-bottom: 0.5rem; } .offline-progress-box p { margin-bottom: 2rem; font-size: 1rem; line-height: 1.5; } .offline-stats { margin-bottom: 2rem; display: flex; flex-direction: column; gap: 1rem; } .stat-item { display: flex; justify-content: space-between; align-items: center; background: var(--color-surface-2); padding: 0.75rem 1rem; border-radius: var(--border-radius-sm); } .stat-label { font-weight: 600; } .stat-value { font-family: 'Roboto Mono', monospace; font-weight: 700; color: var(--color-text-primary); } .stat-item.main-stat { margin-top: 1rem; padding: 1.25rem; border: 1px solid var(--color-primary); background: rgba(255, 165, 0, 0.05); } .stat-item.main-stat .stat-label { font-size: 1.1rem; } .stat-item.main-stat .stat-value { font-size: 1.5rem; color: var(--color-primary-light); } #offline-progress-close-btn { width: 100%; padding: 0.8rem; font-size: 1.1rem; font-weight: 700; border-radius: var(--border-radius-sm); border: none; cursor: pointer; transition: all 0.2s; background: var(--color-primary); color: #111; } #offline-progress-close-btn:hover { background: var(--color-primary-light); } #ranking-list-container::-webkit-scrollbar { width: 10px; } #ranking-list-container::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); border-radius: 10px; } #ranking-list-container::-webkit-scrollbar-thumb { background: var(--color-primary); /* Używamy głównego koloru gry */ border-radius: 10px; border: 2px solid var(--color-surface-1); } #ranking-list-container::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); /* */ } /* --- Dla przeglądarki Firefox --- */ #ranking-list-container { scrollbar-width: thin; scrollbar-color: var(--color-primary) rgba(0, 0, 0, 0.3); /* */ } #timed-chest-widget { position: fixed; right: 1.3rem; bottom: 65rem; /* Pozycjonowanie nad panelem aktywnych bonusów */ width: clamp(260px, 18vw, 280px); background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); backdrop-filter: blur(8px); z-index: 500; padding: 1rem; } .widget-header { font-weight: 600; color: var(--color-text-secondary); text-align: center; margin-bottom: 1rem; } .widget-header i { color: var(--color-primary); margin-right: 0.5rem; } /* Przycisk otwierania / licznik */ #open-chest-btn { width: 100%; padding: 1rem; font-size: 1.2rem; font-weight: 700; font-family: 'Roboto Mono', monospace; background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-secondary); border-radius: var(--border-radius-md); cursor: not-allowed; transition: all 0.2s ease; } #open-chest-btn:not(:disabled) { background: var(--color-success); color: #fff; cursor: pointer; border-color: #3f9e56; animation: pulse-green 2s infinite; } #open-chest-btn:not(:disabled):hover { background: #57d174; } @keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(72, 187, 120, 0); } 100% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0); } } /* Nakładka animacji */ #chest-opening-panel { width: 90vw; max-width: 800px; height: auto; } .chest-opening-content { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 300px; padding: 2rem !important; /* Nadpisujemy padding z .panel-content */ } /* Główny kontener "ruletki" */ .chest-spinner-container { width: 100%; height: 160px; background: rgba(0,0,0,0.3); border: 2px solid var(--color-border); border-image: linear-gradient(to right, var(--color-primary), var(--color-primary-light)) 1; box-shadow: 0 0 25px rgba(0,0,0,0.5), inset 0 0 15px rgba(0,0,0,0.4); position: relative; overflow: hidden; } /* Znacznik, pod którym zatrzymuje się nagroda */ .spinner-marker { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 100%; background: linear-gradient(to bottom, transparent, var(--color-primary-light), transparent); box-shadow: 0 0 15px var(--color-primary-light), 0 0 25px var(--color-primary-light); z-index: 2; border: none; } /* Taśma z przedmiotami */ .spinner-reel { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; padding: 0 50vw; will-change: transform; } .reel-spin-animation { animation: spinReel 7s cubic-bezier(0.1, 0.6, 0.2, 1) forwards; } @keyframes spinReel { from { transform: translateX(0); } to { transform: var(--spin-target-position); } } .spinner-item { width: 140px; height: 140px; display: flex; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; margin: 0 5px; /* POPRAWKA: Dodajemy tło i ramkę dla lepszej widoczności */ background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .spinner-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background-color: var(--rarity-color); box-shadow: 0 0 8px var(--rarity-color); } .spinner-item i { font-size: 3.5rem; color: var(--rarity-color); filter: drop-shadow(0 0 8px var(--rarity-color)); margin-bottom: 0.5rem; } .spinner-item span { font-weight: 600; font-size: 0.8rem; color: var(--color-text-primary); /* Używamy głównego koloru tekstu */ text-shadow: 0 1px 3px rgba(0,0,0,0.7); /* Dodajemy cień dla czytelności */ text-align: center; padding: 0 5px; } .btn-primary { background: var(--color-primary); color: #111; font-weight: 700; font-size: 1.1rem; border: none; padding: 0.8rem 1.5rem; border-radius: var(--border-radius-sm); cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .btn-primary:hover:not(:disabled) { background: var(--color-primary-light); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); } .btn-primary:disabled { background: var(--color-surface-2); color: var(--color-text-secondary); cursor: not-allowed; opacity: 0.7; } /* Panel z ostateczną nagrodą */ #chest-reward-display { text-align: center; margin-top: 2rem; /* Dodajemy margines, aby oddzielić od "ruletki" */ animation: reward-appear 0.5s ease forwards; } @keyframes reward-appear { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } #chest-reward-display h3 { font-size: 2rem; color: var(--color-primary-light); margin-bottom: 1.5rem; } #reward-item-card { width: 280px; background: var(--color-surface-2); border: 2px solid var(--rarity-color); border-radius: var(--border-radius-lg); padding: 2rem; margin: 0 auto 2rem auto; box-shadow: 0 0 20px var(--rarity-color); } #reward-item-card .icon { font-size: 6rem; margin-bottom: 1rem; } #reward-item-card .name { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.5rem; } #reward-item-card .rarity { font-size: 1.1rem; margin-bottom: 1.5rem; text-transform: uppercase; } #reward-item-card .desc { font-size: 1.1rem; } /* 1440p breakpoint (Twoja obecna rozdzielczość) */ @media (max-width: 1440px) { /* dopasuj wielkości dla dużych monitorów */ } /* 1280p breakpoint */ @media (max-width: 1280px) { /* zmniejsz gaps, padding, font-size */ } /* 1080p breakpoint */ @media (max-width: 1080px) { #clicker { top: 48%; } #carrot-btn { font-size: clamp(120px, 30vw, 300px); } .stat-item { min-width: 140px; } #upgrade-panel { max-width: 95vw; height: 90vh; } } /* 900p breakpoint (laptopy) */ @media (max-width: 900px) { #clicker { top: 45%; } #carrot-btn { font-size: clamp(100px, 35vw, 250px); } .stat-item { min-width: 120px; } } #character-panel { max-width: 1200px; /* Znacząco poszerzamy panel */ max-height: 900px; height: 90vh; /* Pozostałe style z .panel bez zmian */ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; backdrop-filter: blur(10px); overflow: hidden; z-index: 300; } /* --- 2. Układ siatki wewnątrz panelu --- */ #character-panel .character-content-grid { display: grid; /* Dajemy więcej miejsca na ekwipunek po prawej */ grid-template-columns: 350px 1fr; gap: 1.5rem; padding: 1.5rem; flex-grow: 1; min-height: 0; } .character-column, .inventory-column { display: flex; flex-direction: column; gap: 1.5rem; min-height: 0; } .section-header { font-weight: 600; color: var(--color-text-secondary); margin-bottom: 0.75rem; text-align: center; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; } /* --- 3. Siatka ekwipunku (bez przewijania) --- */ .inventory-grid-container { display: grid; /* Układ 10x10, aby zmieścić 100 przedmiotów */ grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(10, 1fr); gap: 8px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: var(--border-radius-md); /* Usuwamy pasek przewijania i dopasowujemy wysokość */ overflow: visible; flex-grow: 0; } .inventory-grid-container, #ranking-list-container, .panel-content { /* Ogólna reguła dla wszystkich paneli z przewijaniem */ /* Dla Firefox */ scrollbar-width: thin; scrollbar-color: var(--color-primary) var(--color-surface-1); } /* Dla przeglądarek WebKit (Chrome, Edge, Safari) */ .inventory-grid-container::-webkit-scrollbar, #ranking-list-container::-webkit-scrollbar, .panel-content::-webkit-scrollbar { width: 14px; } .header-action-btn.locked { background: #c0392b; /* Czerwony kolor dla stanu zablokowanego */ color: white; border-color: #e74c3c; } .header-action-btn.locked:hover { background: #e74c3c; box-shadow: 0 0 12px rgba(231, 76, 60, 0.7); } .inventory-grid-container::-webkit-scrollbar-track, #ranking-list-container::-webkit-scrollbar-track, .panel-content::-webkit-scrollbar-track { background: var(--color-surface-1); border-radius: 10px; } .inventory-grid-container::-webkit-scrollbar-thumb, #ranking-list-container::-webkit-scrollbar-thumb, .panel-content::-webkit-scrollbar-thumb { background-color: var(--color-primary); border-radius: 10px; border: 3px solid var(--color-surface-1); } .inventory-grid-container::-webkit-scrollbar-thumb:hover, #ranking-list-container::-webkit-scrollbar-thumb:hover, .panel-content::-webkit-scrollbar-thumb:hover { background-color: var(--color-primary-light); } .synergy-section { margin-top: 1rem; padding: 1rem; background: linear-gradient(145deg, rgba(255, 215, 0, 0.1), rgba(0,0,0,0.15)); border: 1px solid var(--color-primary); border-radius: var(--border-radius-md); } .pop-karototron { font-size: 1.2rem; /* Mniejszy niż standardowy klik */ color: #2ecc71; /* Zielony, pasujący do automatyzacji */ text-shadow: 0 0 8px rgba(46, 204, 113, 0.7), 0 1px 3px rgba(0,0,0,0.5); animation: anim-karototron 1.5s ease-out forwards; } .pop-karototron .pop-carrot-icon { color: #2ecc71; } @keyframes anim-karototron { 0% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; /* Animacja w lewo i do góry, zamiast prosto w górę */ transform: translate(-150px, -60px) scale(0.6); } } .synergy-header { font-size: 1.1rem; font-weight: 700; text-align: center; color: var(--color-primary-light); margin-bottom: 1rem; text-shadow: 0 0 8px var(--color-primary); } .synergy-section ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .synergy-section li { font-size: 0.9rem; color: var(--color-text-secondary); } .synergy-section li i { margin-right: 0.5rem; color: var(--color-primary); width: 20px; text-align: center; } /* --- 4. Nowy, estetyczny wygląd slota w ekwipunku --- */ .inventory-slot { position: relative; width: 100%; aspect-ratio: 1 / 1; background: linear-gradient(145deg, var(--color-surface-2), #333); border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: var(--color-text-secondary); transition: all 0.2s ease; } .inventory-slot.has-item { border: 2px solid var(--rarity-color); cursor: pointer; } .inventory-slot.has-item i { color: var(--rarity-color); filter: drop-shadow(0 0 4px var(--rarity-color)); } .inventory-slot.has-item:hover { transform: scale(1.1); box-shadow: 0 0 15px var(--rarity-color); z-index: 10; } /* --- 5. Wskaźnik poziomu ulepszenia --- */ .item-level-badge { position: absolute; bottom: 2px; right: 4px; background: rgba(0, 0, 0, 0.75); color: #FFD700; font-size: 0.7rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; z-index: 11; } /* --- 6. Pozostałe elementy w panelu (dla spójności) --- */ .character-column { justify-content: space-between; } .character-gear-wrapper, .artifacts-section, .stats-section { background: rgba(0,0,0,0.15); padding: 1rem; border-radius: var(--border-radius-md); } .gear-slot, .artifact-display-slot { position: relative; } .tooltip-header { display: flex; justify-content: space-between; align-items: center; } .upgrade-label { background-color: var(--color-success); color: white; font-size: 0.75rem; font-weight: 700; padding: 3px 8px; border-radius: 50px; animation: indicator-pulse 1.5s infinite; } .tooltip-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; gap: 10px; /* Dodajemy odstęp między elementami */ } .tooltip-stat { background: rgba(0, 0, 0, 0.25); border-radius: var(--border-radius-sm); padding: 8px 12px; flex-grow: 1; /* Każdy element zajmuje tyle samo miejsca */ text-align: center; display: flex; flex-direction: column; /* Ustawia etykietę i wartość jedna pod drugą */ gap: 2px; } /* Etykieta (np. "Gear Score", "Wartość") */ .tooltip-stat span { font-size: 0.75rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } /* Wartość (np. "1.5K", "25") */ .tooltip-stat strong { font-size: 1.2rem; font-weight: 700; color: var(--color-text-primary); } /* Specjalne wyróżnienie dla Gear Score */ .tooltip-gear-score { background: rgba(255, 140, 0, 0.1); border: 1px solid var(--color-primary); } .tooltip-gear-score span { color: var(--color-primary); } .tooltip-gear-score strong { color: var(--color-primary-light); text-shadow: 0 0 8px var(--color-primary); } /* Panel Kowala */ .blacksmith-content { display: flex; flex-direction: column; gap: 1rem; z-index: 1200; } .blacksmith-core { display: flex; align-items: center; justify-content: space-around; background: rgba(0,0,0,0.2); padding: 1rem; border-radius: var(--border-radius-md); z-index: 1200; } .blacksmith-slot, .blacksmith-result-preview { width: 90px; height: 90px; background: var(--color-surface-2); border: 2px dashed var(--color-border); border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; transition: all 0.2s ease; z-index: 1200; } .blacksmith-slot.has-item, .blacksmith-result-preview.has-item { border-style: solid; border-color: var(--rarity-color); cursor: pointer; z-index: 1200; } [data-rarity="Umbralny"] { --rarity-color: #a0fafa; } .umbral-text { color: #a0fafa; } /* ====================================================== */ /* === ULEPSZONE STYLE PANELU WEJŚCIA DO LOCHÓW === */ /* ====================================================== */ /* Nowy, wielokolumnowy układ dla zawartości panelu */ #dungeon-panel-content { display: grid; grid-template-columns: 1fr 1fr; /* Dwie równe kolumny */ gap: 2rem; align-items: flex-start; padding: 1.5rem; } /* Kolumna z informacjami o bossie i nagrodach */ .dungeon-column { display: flex; flex-direction: column; gap: 1.5rem; } .dungeon-section { background: rgba(0,0,0,0.2); border-radius: var(--border-radius-md); padding: 1rem; border: 1px solid var(--color-border); } .dungeon-section h4 { margin: 0 0 1rem 0; text-align: center; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; } /* Podgląd bossa */ .dungeon-boss-preview { text-align: center; } #dungeon-boss-icon { font-size: 6rem; color: var(--color-primary-light); margin-bottom: 0.5rem; } #dungeon-boss-name { font-size: 1.5rem; font-weight: 600; } #dungeon-boss-stats { font-size: 1rem; color: var(--color-text-secondary); } #boss-icon-battle.shake { animation: shake 0.3s; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px) rotate(-2deg); } 75% { transform: translateX(5px) rotate(2deg); } } /* Lista nagród */ .dungeon-rewards-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .dungeon-rewards-list li { display: flex; align-items: center; gap: 10px; } .dungeon-rewards-list i { color: var(--color-primary); } /* Szansa na pokonanie bossa */ .dungeon-success-chance { text-align: center; } #dungeon-chance-value { display: block; font-size: 3rem; font-weight: 700; margin-bottom: 0.5rem; } .dungeon-success-chance p { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0; } /* Przycisk startu na dole */ #dungeon-start-container { grid-column: 1 / -1; /* Rozciąga się na obie kolumny */ text-align: center; padding-top: 1rem; border-top: 1px solid var(--color-border); } /* Widżet wyposażenia */ #character-gear-widget { position: fixed; right: 1.3rem; bottom: 25rem; /* Domyślna pozycja nad skrzynką */ width: clamp(260px, 18vw, 280px); background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); backdrop-filter: blur(8px); z-index: 500; padding: 1rem; } #character-gear-widget .widget-header { text-align: center; margin-bottom: 1rem; } #gear-widget-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } #gear-widget-slots .widget-slot { aspect-ratio: 1 / 1; background: var(--color-surface-2); border: 2px solid var(--color-border); border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: all 0.2s ease; } #gear-widget-slots .widget-slot.has-item { border-style: solid; border-color: var(--rarity-color); } #gear-widget-slots .widget-slot.has-item i { color: var(--rarity-color); } /* Panel Postaci */ #character-panel .character-content { display: flex; gap: 1.5rem; padding: 1.5rem; flex-grow: 1; min-height: 0; } .character-gear-wrapper { flex-basis: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .character-gear { display: flex; flex-direction: column; gap: 1rem; } .gear-row { display: flex; justify-content: center; gap: 1rem; } .gear-slot { width: 70px; height: 70px; background: var(--color-surface-2); border: 2px dashed var(--color-border); border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--color-text-secondary); transition: all 0.2s ease; cursor: pointer; } .gear-slot.has-item { border-style: solid; border-color: var(--rarity-color); } .gear-slot.has-item:hover { transform: scale(1.05); box-shadow: 0 0 15px var(--rarity-color); } .gear-slot.has-item i { color: var(--rarity-color); } .gear-slot i { transition: color 0.2s; } #character-panel .inventory-backpack { flex-basis: 60%; display: flex; flex-direction: column; min-height: 0; } #character-inventory-list { flex-grow: 1; overflow-y: auto; display: grid; grid-template-columns: 1fr; gap: 0.75rem; padding: 0.5rem; } /* Karta przedmiotu w plecaku */ .item-card { background: var(--color-surface-2); border: 1px solid var(--color-border); border-left-width: 5px; border-radius: var(--border-radius-sm); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; transition: all 0.2s ease; border-left-color: var(--rarity-color); } .item-card:hover { transform: translateY(-2px); border-color: var(--rarity-color); border-left-width: 5px; } .item-card-header { display: flex; align-items: center; gap: 0.75rem; } .item-icon { font-size: 1.8rem; width: 2rem; text-align: center; color: var(--rarity-color); } .item-details .name { font-weight: 600; } .item-details .rarity { font-size: 0.8rem; text-transform: uppercase; color: var(--rarity-color); } .item-bonuses { list-style: none; font-size: 0.85rem; color: var(--color-text-secondary); padding-left: 0.5rem; margin-top: 5px; } .item-actions { margin-top: auto; display: flex; gap: 10px; } .item-actions button { width: 100%; border: none; padding: 0.5rem; border-radius: var(--border-radius-sm); font-weight: 600; cursor: pointer; transition: background-color 0.2s; } .item-actions .equip-btn { background: var(--color-primary); color: #1a1a1a; } .item-actions .equip-btn:hover { background: var(--color-primary-light); } .item-actions .sell-btn { background: #c0392b; color: white; } .item-actions .sell-btn:hover { background: #e74c3c; } /* Panel Kowala */ .blacksmith-content { display: flex; flex-direction: column; gap: 1rem; text-align: center; z-index: 1200; } .blacksmith-slot-container { display: flex; justify-content: center; align-items: center; gap: 1rem; background: rgba(0,0,0,0.2); padding: 1rem; border-radius: var(--border-radius-md); z-index: 1200; } #blacksmith-item-slot { width: 120px; height: 120px; font-size: 4rem; } .blacksmith-info { font-size: 1.1rem; } .blacksmith-info p { margin-bottom: 0.5rem; } #upgrade-cost-display { font-weight: 700; color: var(--color-primary-light); } #confirm-upgrade-btn { padding: 0.8rem 1.5rem; font-size: 1.1rem; align-self: center; } #character-panel .character-content-grid { display: grid; grid-template-columns: 350px 1fr; gap: 1.5rem; padding: 1.5rem; flex-grow: 1; min-height: 0; } .character-column, .inventory-column { display: flex; flex-direction: column; gap: 1.5rem; min-height: 0; } .section-header { font-weight: 600; color: var(--color-text-secondary); margin-bottom: 0.75rem; text-align: center; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; } /* Siatka plecaka */ .inventory-grid-container { display: grid; /* ✅ ZMIANA: Stała siatka 10x10 */ grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); gap: 8px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: var(--border-radius-md); /* ✅ ZMIANA: Usunięcie paska przewijania i dopasowanie wysokości */ overflow: visible; flex-grow: 0; } .inventory-slot { position: relative; width: 100%; aspect-ratio: 1 / 1; background: linear-gradient(145deg, var(--color-surface-2), #333); /* Delikatny gradient */ border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; /* Trochę większa ikona przedmiotu */ color: var(--color-text-secondary); transition: all 0.2s ease; } .inventory-slot.has-item { border: 2px solid var(--rarity-color); cursor: pointer; } .inventory-slot.has-item i { color: var(--rarity-color); /* Dodajemy subtelną poświatę do ikony */ filter: drop-shadow(0 0 4px var(--rarity-color)); } /* Tooltip (okienko po najechaniu) */ .inventory-slot .item-tooltip { visibility: hidden; opacity: 0; position: absolute; bottom: 110%; /* Pojawia się nad slotem */ left: 50%; transform: translateX(-50%); width: 280px; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-md); padding: 1rem; z-index: 1000; box-shadow: var(--shadow-lg); transition: opacity 0.2s, visibility 0.2s; pointer-events: none; /* Ignoruje kliknięcia */ } .inventory-slot:hover .item-tooltip { visibility: hidden; opacity: 1; } .tooltip-header { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; } .tooltip-rarity { font-size: 0.8rem; text-transform: uppercase; margin-bottom: 8px; color: var(--rarity-color); } .tooltip-bonuses { list-style: none; margin: 0 0 8px; padding: 0; font-size: 0.9rem; color: var(--color-text-secondary); } .tooltip-sell { font-size: 0.9rem; margin-top: 8px; } .tooltip-actions { margin-top: 1rem; display: flex; flex-direction: column; gap: 8px; } .tooltip-actions button { width: 100%; border: none; padding: 0.6rem; border-radius: var(--border-radius-sm); font-weight: 600; cursor: pointer; transition: background-color 0.2s; pointer-events: all; /* Przyciski są klikalne */ background: var(--color-primary); color: #1a1a1a; } .tooltip-actions button:hover { background: var(--color-primary-light); } /* Sekcja statystyk */ .stats-list { display: flex; flex-direction: column; gap: 0.75rem; } .stat-item { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 10px; background: var(--color-surface-2); padding: 0.5rem 0.75rem; border-radius: var(--border-radius-sm); font-size: 0.95rem; } .stat-item i { color: var(--color-primary); } .stat-value { font-weight: 700; } /* Sekcja założonych artefaktów */ .artifact-display-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .artifact-display-slot { aspect-ratio: 1 / 1; background: var(--color-surface-2); border: 2px dashed var(--color-border); border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; font-size: 2.8rem; color: var(--color-text-secondary); transition: all 0.2s ease; } .artifact-display-slot.has-item { border-style: solid; border-color: var(--rarity-color); cursor: pointer; } .artifact-display-slot.has-item i { color: var(--rarity-color); } .artifact-display-slot.has-item:hover { transform: scale(1.05); box-shadow: 0 0 15px var(--rarity-color); } #character-panel .panel-header { display: flex; justify-content: space-between; /* Rozkłada elementy na boki */ align-items: center; } #character-panel .panel-header > span { flex-grow: 1; /* Tytuł zajmuje dostępną przestrzeń */ } #character-panel .panel-header > div { display: flex; gap: 0.75rem; /* Odstęp między przyciskami "Synteza" i "Kowal" */ } #character-panel .character-content-grid { display: grid; grid-template-columns: 350px 1fr; /* Lewa kolumna stała, prawa elastyczna */ gap: 1.5rem; padding: 1.5rem; flex-grow: 1; min-height: 0; /* Kluczowe dla poprawnego działania overflow */ } .character-column, .inventory-column { display: flex; flex-direction: column; gap: 1.5rem; min-height: 0; } .section-header { font-weight: 600; color: var(--color-text-secondary); margin-bottom: 0.75rem; text-align: center; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; } /* --- LEWA KOLUMNA: WYPOSAŻENIE, STATYSTYKI, ARTEFAKTY --- */ .character-gear-wrapper { background: rgba(0,0,0,0.15); padding: 1rem; border-radius: var(--border-radius-md); } .character-gear { display: flex; flex-direction: column; gap: 1rem; } .gear-row { display: flex; justify-content: center; gap: 1rem; } /* Sekcja statystyk */ .stats-list { display: flex; flex-direction: column; gap: 0.75rem; } .stat-item { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 10px; background: var(--color-surface-2); padding: 0.5rem 0.75rem; border-radius: var(--border-radius-sm); font-size: 0.95rem; } .stat-item i { color: var(--color-primary); } .stat-value { font-weight: 700; } /* Sekcja założonych artefaktów */ .artifact-display-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .artifact-display-slot { aspect-ratio: 1 / 1; background: var(--color-surface-2); border: 2px dashed var(--color-border); border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; font-size: 2.8rem; color: var(--color-text-secondary); transition: all 0.2s ease; } .artifact-display-slot.has-item { border-style: solid; border-color: var(--rarity-color); cursor: pointer; } .artifact-display-slot.has-item i { color: var(--rarity-color); } .artifact-display-slot.has-item:hover { transform: scale(1.05); box-shadow: 0 0 15px var(--rarity-color); } /* --- PRAWA KOLUMNA: SIATKA EKWIPUNKU --- */ .inventory-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: var(--border-radius-md); overflow-y: auto; /* NAJWAŻNIEJSZE: Włącza przewijanie */ flex-grow: 1; /* Sprawia, że siatka wypełnia dostępną przestrzeń */ } .inventory-slot { position: relative; /* Kluczowe dla działania tooltipa */ width: 100%; aspect-ratio: 1 / 1; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--color-text-secondary); transition: all 0.2s ease; } .inventory-slot.has-item { border: 2px solid var(--rarity-color); cursor: pointer; } .inventory-slot.has-item i { color: var(--rarity-color); } .inventory-slot.has-item:hover { transform: scale(1.1); /* ✅ EFEKT "GLOW": Poświata w kolorze rzadkości po najechaniu */ box-shadow: 0 0 15px var(--rarity-color); z-index: 10; } .item-level-badge { position: absolute; bottom: 2px; right: 4px; background: rgba(0, 0, 0, 0.7); color: #FFD700; /* Złoty kolor dla lepszej widoczności */ font-size: 0.7rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; z-index: 11; } /* --- NOWY, ELEGANCKI TOOLTIP (DYMEK Z INFORMACJAMI) --- */ .inventory-slot .item-tooltip { visibility: hidden; opacity: 0; position: absolute; bottom: 110%; /* Pojawia się nad slotem */ left: 50%; transform: translateX(-50%); width: 280px; background: var(--color-surface-1); border: 1px solid var(--rarity-color); border-radius: var(--border-radius-md); padding: 1rem; z-index: 1000; box-shadow: var(--shadow-lg); transition: opacity 0.2s, visibility 0.2s; pointer-events: none; /* Ignoruje kliknięcia, dopóki nie najedziemy na przyciski */ } .inventory-slot:hover .item-tooltip { visibility: visible; opacity: 1; } .tooltip-header { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; color: var(--rarity-color); } .tooltip-rarity { font-size: 0.8rem; text-transform: uppercase; margin-bottom: 8px; color: var(--rarity-color); } .tooltip-bonuses { list-style: none; margin: 0 0 8px; padding: 0; font-size: 0.9rem; color: var(--color-text-secondary); } .tooltip-sell { font-size: 0.9rem; margin-top: 8px; } .tooltip-actions { margin-top: 1rem; display: flex; flex-direction: column; gap: 8px; } .tooltip-actions button { width: 100%; border: none; padding: 0.6rem; border-radius: var(--border-radius-sm); font-weight: 600; cursor: pointer; transition: background-color 0.2s; pointer-events: all; /* Przyciski są klikalne */ background: var(--color-primary); color: #1a1a1a; } .tooltip-actions button:hover { background: var(--color-primary-light); } #inventory-tooltip { position: fixed; width: 280px; padding: 1rem; background: var(--color-surface-1); border: 1px solid var(--rarity-color, var(--color-border)); border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); z-index: 10000; /* Domyślnie jest całkowicie ukryty i nie zajmuje miejsca */ display: none; /* Animacja pojawiania się */ opacity: 0; transform: scale(0.95); transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out; } /* Klasa .visible sprawia, że tooltip staje się widoczny */ #inventory-tooltip.visible { display: block; opacity: 1; transform: scale(1); } /* ====================================================== */ /* === NOWY, SUBTELNY WYGLĄD POP-UPU COMBO === */ /* ====================================================== */ #combo-popup-container { position: fixed; top: 60%; left: 50%; transform: translateX(-50%); z-index: 9999; pointer-events: none; display: flex; justify-content: center; height: 50px; /* Stała wysokość, aby zapobiec "skakaniu" */ align-items: center; } .combo-popup { font-family: 'Inter', sans-serif; font-size: 2rem; font-weight: 700; color: var(--color-primary-light); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); /* Domyślnie jest niewidoczny */ opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; } /* Klasa .visible sprawia, że jest widoczny */ .combo-popup.visible { opacity: 1; transform: translateY(0); } /* Klasa .pop-update uruchamia animację "podbicia" */ .combo-popup.pop-update { animation: combo-pop-update 0.2s ease-out; } @keyframes combo-pop-update { 50% { transform: translateY(0) scale(1.15); } } /* Style dla zawartości tooltipa (bez zmian) */ #inventory-tooltip .tooltip-header { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; color: var(--rarity-color); } #inventory-tooltip .tooltip-rarity { font-size: 0.8rem; text-transform: uppercase; margin-bottom: 8px; color: var(--rarity-color); } #inventory-tooltip .tooltip-bonuses { list-style: none; margin: 0 0 8px; padding: 0; font-size: 0.9rem; color: var(--color-text-secondary); } #inventory-tooltip .tooltip-sell { font-size: 0.9rem; margin-top: 8px; } #inventory-tooltip .tooltip-actions { margin-top: 1rem; display: flex; flex-direction: column; gap: 8px; } #inventory-tooltip .tooltip-actions button { width: 100%; border: none; padding: 0.6rem; border-radius: var(--border-radius-sm); font-weight: 600; cursor: pointer; transition: background-color 0.2s; background: var(--color-primary); color: #1a1a1a; } #inventory-tooltip .tooltip-actions button:hover { background: var(--color-primary-light); } #character-gear-widget { position: fixed; bottom: 25rem; /* Pozycja nad widżetem artefaktów */ right: 1.25rem; width: 280px; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); backdrop-filter: blur(8px); z-index: 750; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; } #character-gear-widget .widget-header { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-secondary); text-align: center; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 8px; } #character-gear-widget .widget-header i { color: var(--color-primary); } #character-gear-widget .widget-slots { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 sloty w rzędzie */ gap: 10px; } #character-gear-widget .widget-slot { aspect-ratio: 1 / 1; background: var(--color-surface-2); border: 2px solid var(--color-border); border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; /* Dopasowany rozmiar ikon */ transition: all 0.2s ease; } #character-gear-widget .widget-slot.has-item { border-style: solid; border-color: var(--rarity-color); } #character-gear-widget .widget-slot.has-item i { color: var(--rarity-color); } #chest-opening-panel .chest-opening-content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; } #chest-rewards-container { display: flex; justify-content: center; align-items: center; gap: 1.5rem; perspective: 1000px; /* Włącza perspektywę 3D dla animacji obrotu */ } .reward-card { width: 160px; height: 220px; position: relative; cursor: pointer; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); } .reward-card.is-flipping { transform: rotateY(180deg); } .reward-card .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; /* Ukrywa tylną stronę obracanego elementu */ border-radius: var(--border-radius-lg); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; box-shadow: var(--shadow-md); } /* Tył karty (widoczny na początku) */ .reward-card .card-back { background: linear-gradient(145deg, var(--color-surface-2), var(--color-surface-1)); border: 2px solid var(--color-primary); font-size: 5rem; color: var(--color-primary); } .reward-card .card-back:hover { border-color: var(--color-primary-light); box-shadow: 0 0 20px var(--color-primary-light); } /* Przód karty (widoczny po obróceniu) */ .reward-card .card-front { background: var(--color-surface-2); border: 2px solid var(--rarity-color, var(--color-border)); transform: rotateY(180deg); padding: 1rem; text-align: center; } .reward-card .card-front .icon { font-size: 4rem; color: var(--rarity-color); filter: drop-shadow(0 0 8px var(--rarity-color)); } .reward-card .card-front .name { font-size: 1.1rem; font-weight: 600; } .reward-card.disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(80%); } .reward-card.disabled:hover { transform: none; /* Wyłącza efekt podniesienia dla zablokowanych kart */ box-shadow: var(--shadow-md); } /* ====================================================== */ /* === NOWE STYLE DLA PANELU SYNTEZY === */ /* ====================================================== */ /* Główny kontener na grupy przycisków */ #quick-synthesis-buttons { display: flex; flex-direction: column; gap: 1.5rem; } /* Styl dla pojedynczej grupy przycisków (zarówno podstawowej, jak i zaawansowanej) */ .quick-synth-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; } /* --- Sekcja Zaawansowana --- */ /* Specjalne, wyróżnione tło i ramka dla grupy zaawansowanej */ .advanced-synthesis { padding: 1rem; border: 1px solid var(--color-primary); border-radius: var(--border-radius-md); background: linear-gradient(145deg, rgba(255, 140, 0, 0.05), rgba(0,0,0,0.15)); box-shadow: 0 0 15px rgba(255, 140, 0, 0.1); margin-top: 1rem; /* Dodatkowy odstęp od góry */ } /* Nagłówek "Synteza Zaawansowana" */ .advanced-synthesis h5 { grid-column: 1 / -1; /* Nagłówek rozciąga się na całą szerokość siatki */ text-align: center; color: var(--color-primary-light); font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; } /* --- Przyciski (wspólne i unikalne style) --- */ .quick-synth-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.75rem; font-weight: 600; font-size: 0.9rem; border: 2px solid; /* Grubość ramki jest stała */ background: rgba(0,0,0,0.2); border-radius: var(--border-radius-sm); cursor: pointer; transition: all 0.2s ease; } .quick-synth-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 12px var(--rarity-color); } .quick-synth-btn .item-count { font-size: 0.8rem; opacity: 0.8; margin-top: 4px; } .quick-synth-btn:disabled { border-color: var(--color-border); color: var(--color-text-secondary); opacity: 0.5; cursor: not-allowed; } /* --- Style dla poszczególnych rzadkości --- */ .quick-synth-btn[data-rarity="Normalny"] { --rarity-color: #A0A0A0; } .quick-synth-btn[data-rarity="Rzadki"] { --rarity-color: #3498db; } .quick-synth-btn[data-rarity="Epicki"] { --rarity-color: #9b59b6; } .quick-synth-btn[data-rarity="Legendarny"] { --rarity-color: #f1c40f; } .quick-synth-btn[data-rarity="Starożytny"] { --rarity-color: #ff8c00; } .quick-synth-btn[data-rarity="Umbralny"] { --rarity-color: #480072; } .quick-synth-btn[data-rarity="Kosmiczny"] { --rarity-color: #4b0082; } /* Dynamiczne ustawienie koloru na podstawie atrybutu data-rarity */ .quick-synth-btn { border-color: var(--rarity-color); color: var(--rarity-color); } .quick-synth-btn:hover:not(:disabled) { background: var(--rarity-color); color: var(--color-surface-1); } /* Efekty specjalne dla wyższych rzadkości */ .quick-synth-btn[data-rarity="Umbralny"] { animation: chroma-effect 4s infinite linear; } .quick-synth-btn[data-rarity="Starożytny"] { animation: ancestral-glow-effect 3s infinite linear; } .quick-synth-btn[data-rarity="Kosmiczny"] { border-width: 3px; } .shop-content { display: flex; flex-grow: 1; min-height: 0; } .shop-item-description { font-size: 0.85rem; color: var(--color-text-secondary); margin: 8px 0; } .shop-item-bonuses { list-style: none; padding: 0; margin: 0 0 12px 0; font-size: 0.9rem; font-weight: 500; } .shop-item-bonuses li { color: var(--color-success); /* Zielony kolor dla bonusów */ } .shop-sidebar { width: 200px; flex-shrink: 0; padding: 1rem; border-right: 1px solid var(--color-border); background: rgba(0,0,0,0.1); overflow-y: auto; } .shop-main-content { flex-grow: 1; padding: 1.5rem; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; align-content: start; } /* Przyciski kategorii */ .shop-category-btn { display: block; width: 100%; padding: 0.75rem; margin-bottom: 0.5rem; background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-secondary); border-radius: var(--border-radius-sm); text-align: left; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .shop-category-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .shop-category-btn.active { background: var(--color-primary); color: #1a1a1a; border-color: var(--color-primary); } /* Karta przedmiotu w sklepie */ .shop-item-card { background: var(--color-surface-2); border-radius: var(--border-radius-md); border: 1px solid var(--color-border); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-sm); } .shop-item-preview { height: 120px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #333, var(--color-surface-2)); border-bottom: 1px solid var(--color-border); } .shop-item-preview .fa-carrot { font-size: 5rem; filter: drop-shadow(0 0 10px currentColor); } .shop-item-info { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; flex-grow: 1; } .shop-item-name { font-weight: 600; font-size: 1.1rem; } .shop-item-cost { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 700; color: var(--color-primary-light); } .shop-item-cost .fa-coins { color: #FEEA00; } .shop-item-button { margin-top: auto; width: 100%; /* ✅ POPRAWKA: Zmniejszamy pionowy padding, zachowując poziomy */ padding: 0.5rem 1rem; font-weight: 700; border: none; border-radius: var(--border-radius-sm); cursor: pointer; transition: background-color 0.2s; } .shop-item-button.buy { background: var(--color-primary); color: #1a1a1a; } .shop-item-button.equip { background: var(--color-success); color: white; } .shop-item-button.equipped { background: var(--color-surface-1); color: var(--color-text-secondary); cursor: default; } .shop-item-button.placeholder { background: #444; color: #888; cursor: not-allowed; } #shop-currency-widget { position: fixed; top: 5.25rem; /* 20px */ right: 1.25rem; /* 20px */ z-index: 950; display: flex; flex-direction: column; align-items: flex-end; /* Wyrównuje elementy do prawej */ gap: 0.5rem; /* Odstęp między licznikiem a przyciskiem */ } /* Wygląd licznika monet */ #currency-display { display: flex; align-items: center; gap: 0.5rem; background: var(--color-surface-1); padding: 0.5rem 1rem; border-radius: 50px; /* Kształt "pastylki" */ border: 1px solid var(--color-primary); box-shadow: var(--shadow-md); color: var(--color-primary-light); font-weight: 700; } #currency-display span { font-size: 1.1rem; } #currency-display i { color: #FEEA00; /* Złoty kolor ikony */ font-size: 1rem; } /* Wygląd przycisku sklepu */ #item-shop-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--color-surface-2); color: var(--color-text-secondary); border: 1px solid var(--color-border); padding: 0.6rem 1.2rem; border-radius: var(--border-radius-sm); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } #item-shop-btn:hover { background: var(--color-primary); color: #1a1a1a; border-color: var(--color-primary-light); transform: scale(1.05); } #item-shop-panel .shop-content { display: flex; flex-grow: 1; min-height: 0; } .shop-sidebar { width: 220px; flex-shrink: 0; padding: 1.5rem 1rem; border-right: 1px solid var(--color-border); background: rgba(0,0,0,0.1); overflow-y: auto; } .shop-main-content { flex-grow: 1; padding: 1.5rem; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; align-content: start; } /* Przyciski kategorii */ .shop-category-btn { display: block; width: 100%; padding: 0.8rem; margin-bottom: 0.5rem; background: transparent; border: 1px solid var(--color-border); color: var(--color-text-secondary); border-radius: var(--border-radius-sm); text-align: left; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .shop-category-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .shop-category-btn.active { background: var(--color-primary); color: #1a1a1a; border-color: var(--color-primary); } /* Karta przedmiotu w sklepie */ .shop-item-card { background: var(--color-surface-2); border-radius: var(--border-radius-md); border: 1px solid var(--color-border); display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: all 0.2s ease; min-height: 320px; /* Zapewnia spójną wysokość kart */ } .shop-item-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .shop-item-preview { height: 140px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #333, var(--color-surface-2)); } .shop-item-preview .fa-carrot { font-size: 6rem; filter: drop-shadow(0 0 10px currentColor); } .shop-item-preview .fa-box-open { font-size: 5rem; color: var(--color-primary); } /* NOWA sekcja "body" z nazwą i opisem */ .shop-item-body { padding: 1rem; flex-grow: 1; /* To sprawia, że stopka jest zawsze na dole */ display: flex; flex-direction: column; } .shop-item-name { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; } .shop-item-description { font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.4; } /* NOWA sekcja "footer" z ceną i przyciskiem */ .shop-item-footer { padding: 1rem; border-top: 1px solid var(--color-border); background: rgba(0,0,0,0.2); display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .shop-item-cost { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; font-weight: 700; color: var(--color-primary-light); flex-shrink: 0; } .shop-item-cost .fa-coins { color: #FEEA00; } .shop-item-cost .fa-credit-card { color: var(--color-text-secondary); } /* Przycisk akcji */ .shop-item-button { padding: 0.6rem 1rem; font-weight: 700; border: none; border-radius: var(--border-radius-sm); cursor: pointer; transition: all 0.2s; white-space: nowrap; } .shop-item-button.buy { background: var(--color-primary); color: #1a1a1a; } .shop-item-button.buy:hover:not(:disabled) { background: var(--color-primary-light); transform: scale(1.05); } .shop-item-button.equip { background: var(--color-success); color: white; } .shop-item-button.equipped { background: var(--color-surface-1); color: var(--color-text-secondary); cursor: default; } .shop-item-button.placeholder { background: #444; color: #888; cursor: not-allowed; } .shop-item-button:disabled:not(.equipped):not(.placeholder) { background: var(--color-border); color: var(--color-text-secondary); cursor: not-allowed; } .shop-item-cost.owned { font-weight: 700; font-size: 1.1rem; color: var(--color-success); /* Zielony kolor dla podkreślenia statusu */ text-align: left; flex-grow: 1; /* Pozwala etykiecie zająć dostępną przestrzeń */ } .tooltip-comparison { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); } .tooltip-comparison h4 { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0 0 8px 0; font-weight: 500; } /* Kolor dla lepszej statystyki */ .stat-upgrade { color: #2ecc71; /* Zielony */ font-weight: 600; } /* Kolor dla gorszej statystyki */ .stat-downgrade { color: #e74c3c; /* Czerwony */ font-weight: 600; } #main-game-container.dungeon-active { } /* Główny kontener panelu walki */ #dungeon-battle-panel { /* Upewniamy się, że panel wygląda jak inne */ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90vw; max-width: 800px; z-index: 2500; /* Ustawiamy wysoki z-index, aby był na wierzchu */ } /* Układ panelu walki (portret i informacje) */ .dungeon-battle-content { display: grid; grid-template-columns: 2fr 3fr; /* Portret bossa zajmuje 2/5, info 3/5 */ gap: 2rem; align-items: center; padding: 1.5rem; } /* Portret Bossa */ .boss-portrait { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%); border-radius: var(--border-radius-md); border: 2px solid #c0392b; } #boss-icon-battle { font-size: clamp(100px, 15vw, 200px); color: #e74c3c; filter: drop-shadow(0 0 20px #c0392b); animation: boss-pulse 2s infinite ease-in-out; } @keyframes boss-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* Kolumna z informacjami o Bossie */ .boss-info { display: flex; flex-direction: column; gap: 1rem; } .boss-info h3 { font-size: 2.5rem; color: var(--color-primary-light); margin: 0; text-align: center; } .boss-info p { text-align: center; margin: -0.5rem 0 0.5rem 0; font-size: 1rem; color: var(--color-text-secondary); } /* Pasek HP Bossa */ .boss-hp-bar { width: 100%; height: 35px; background: var(--color-surface-2); border: 2px solid var(--color-border); border-radius: 8px; position: relative; display: flex; align-items: center; justify-content: center; } .boss-hp-bar .boss-hp-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #c0392b, #e74c3c); border-radius: 6px; transition: width 0.2s linear; } #hotbar #dungeon-enter-btn, #hotbar #character-panel-btn, #hotbar #skill-tree-btn { background: var(--color-primary); color: #1a1a1a; border-color: var(--color-primary-light); font-weight: 700; /* Dodatkowe pogrubienie dla wyróżnienia */ } /* Wspólny styl dla efektu :hover dla wszystkich wyróżnionych przycisków */ #hotbar #dungeon-enter-btn:hover, #hotbar #character-panel-btn:hover, #hotbar #skill-tree-btn:hover { background: var(--color-primary-light); border-color: var(--color-primary); } #main-game-container.dungeon-active { } @keyframes chroma-effect { 0% { border-color: #FF69B4; /* Różowy */ box-shadow: 0 0 15px #FF69B4, inset 0 0 5px rgba(255, 105, 180, 0.5); } 33% { border-color: #9b59b6; /* Fioletowy (przejściowy) */ box-shadow: 0 0 20px #9b59b6, inset 0 0 7px rgba(155, 89, 182, 0.5); } 66% { border-color: #00FFFF; /* Cyjanowy */ box-shadow: 0 0 15px #00FFFF, inset 0 0 5px rgba(0, 255, 255, 0.5); } 100% { border-color: #FF69B4; /* Powrót do różowego */ box-shadow: 0 0 15px #FF69B4, inset 0 0 5px rgba(255, 105, 180, 0.5); } } /** * Krok 2: Zastosowanie animacji do przedmiotów "Umbralny". * Ten selektor znajduje wszystkie sloty (w plecaku, w ekwipunku, w widżetach), * które przechowują przedmiot o rzadkości "Umbralny". */ .inventory-slot[data-rarity="Umbralny"], .gear-slot[data-rarity="Umbralny"], .artifact-display-slot[data-rarity="Umbralny"], .widget-slot[data-rarity="Umbralny"] { /* Nadpisujemy statyczny kolor i włączamy naszą animację */ animation: chroma-effect 4s infinite linear; } /** * Krok 3 (Opcjonalnie): Możemy też dodać subtelną animację do samej ikony. * To sprawi, że ikona również będzie delikatnie zmieniać kolor. */ @keyframes chroma-icon-effect { 0% { color: #FF69B4; } 33% { color: #d1a9e8; } 66% { color: #00FFFF; } 100% { color: #FF69B4; } } .inventory-slot[data-rarity="Umbralny"] i, .gear-slot[data-rarity="Umbralny"] i, .artifact-display-slot[data-rarity="Umbralny"] i, .widget-slot[data-rarity="Umbralny"] i { animation: chroma-icon-effect 4s infinite linear; } #character-gear-widget .widget-slot[data-rarity="Umbralny"], #equipped-stats-widget .widget-slot[data-rarity="Umbralny"] { animation: chroma-effect 4s infinite linear; } /** * Stosujemy animację również do ikon wewnątrz tych widżetów. */ #character-gear-widget .widget-slot[data-rarity="Umbralny"] i, #equipped-stats-widget .widget-slot[data-rarity="Umbralny"] i { animation: chroma-icon-effect 4s infinite linear; } /* Ostateczny, sprawdzony styl dla samego panelu walki */ #dungeon-battle-panel { /* Pozycjonowanie i centrowanie */ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Wygląd (dziedziczony z .panel, ale tu dla pewności) */ width: 90vw; max-width: 800px; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; z-index: 2500; /* Upewnia się, że jest na wierzchu */ } /* Ukrywanie panelu */ #dungeon-battle-panel.hidden { display: none; } /* Układ wewnątrz panelu (portret i informacje) */ .dungeon-battle-content { display: grid; grid-template-columns: 2fr 3fr; gap: 2rem; align-items: center; padding: 1.5rem; } /* Portret Bossa */ .boss-portrait { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%); border-radius: var(--border-radius-md); border: 2px solid #c0392b; } #boss-icon-battle { font-size: clamp(100px, 15vw, 200px); color: #e74c3c; filter: drop-shadow(0 0 20px #c0392b); animation: boss-pulse 2s infinite ease-in-out; } /* Informacje o Bossie (prawa kolumna) */ .boss-info { display: flex; flex-direction: column; gap: 1rem; } .boss-info h3 { font-size: 2.5rem; color: var(--color-primary-light); margin: 0; text-align: center; } .boss-info p { text-align: center; margin: -0.5rem 0 0.5rem 0; font-size: 1rem; color: var(--color-text-secondary); } /* Pasek HP Bossa */ .boss-hp-bar { width: 100%; height: 35px; background: var(--color-surface-2); border: 2px solid var(--color-border); border-radius: 8px; position: relative; display: flex; align-items: center; justify-content: center; } .boss-hp-bar .boss-hp-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #c0392b, #e74c3c); border-radius: 6px; transition: width 0.2s linear; } .boss-hp-bar span { position: relative; z-index: 1; color: white; font-weight: 700; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); } /* Licznik czasu */ .dungeon-timer-container { text-align: center; font-size: 2.5rem; font-weight: 700; color: white; text-shadow: 2px 2px 5px black; } .dungeon-timer-container i { margin-right: 1rem; color: var(--color-primary); } /* Twoje obrażenia na sekundę (DPS) */ .player-dps-container { margin-top: 1rem; padding: 1rem; background: rgba(0,0,0,0.2); border-radius: var(--border-radius-md); text-align: center; } .player-dps-container h4 { margin: 0 0 0.5rem 0; font-size: 1rem; color: var(--color-text-secondary); } #player-dps-text { font-size: 1.8rem; font-weight: 700; color: var(--color-primary-light); } .boss-hp-bar span { position: relative; z-index: 1; color: white; font-weight: 700; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); } /* Licznik czasu */ .dungeon-timer-container { text-align: center; font-size: 2.5rem; font-weight: 700; color: white; text-shadow: 2px 2px 5px black; } .dungeon-timer-container i { margin-right: 1rem; color: var(--color-primary); } /* Twoje obrażenia na sekundę (DPS) */ .player-dps-container { margin-top: 1rem; padding: 1rem; background: rgba(0,0,0,0.2); border-radius: var(--border-radius-md); text-align: center; } .player-dps-container h4 { margin: 0 0 0.5rem 0; font-size: 1rem; color: var(--color-text-secondary); } #player-dps-text { font-size: 1.8rem; font-weight: 700; color: var(--color-primary-light); } #dungeon-panel-content { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; /* Zmniejszony odstęp */ align-items: flex-start; padding: 1.5rem; } .dungeon-column { display: flex; flex-direction: column; gap: 1.5rem; } .dungeon-section { background: rgba(0,0,0,0.2); border-radius: var(--border-radius-md); padding: 1rem; border: 1px solid var(--color-border); } .dungeon-section h4 { margin: 0 0 1rem 0; text-align: center; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; } /* --- NOWE, WYRÓŻNIONE STYLE --- */ /* Podgląd bossa */ .dungeon-boss-preview { text-align: center; background: linear-gradient(145deg, rgba(192, 57, 43, 0.1), rgba(0,0,0,0.2)); border-color: #c0392b; } /* Podtytuł "Piętro X" */ #dungeon-floor-indicator { font-size: 1rem; font-weight: 500; color: var(--color-text-secondary); margin: 0 0 0.5rem 0; } /* Główny tytuł z nazwą i ikoną bossa */ #dungeon-boss-name { font-size: 1.8rem; font-weight: 700; color: var(--color-primary-light); margin: 0 0 1rem 0; display: flex; align-items: center; justify-content: center; gap: 0.75rem; } /* Statystyki HP bossa */ #dungeon-boss-stats { display: inline-flex; /* Ustawia elementy w linii */ align-items: center; gap: 0.5rem; background: rgba(0,0,0,0.4); padding: 0.5rem 1rem; border-radius: 50px; /* Kształt pigułki */ border: 1px solid var(--color-border); font-size: 1.1rem; font-weight: 600; } #dungeon-boss-stats i { color: #e74c3c; /* Czerwone serce */ } /* Lista nagród */ .dungeon-rewards-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .dungeon-rewards-list li { display: flex; align-items: center; gap: 10px; } .dungeon-rewards-list i { color: var(--color-primary); } /* Potencjał bojowy gracza */ .dungeon-player-stats { background: linear-gradient(145deg, rgba(255, 140, 0, 0.1), rgba(0,0,0,0.2)); border: 1px solid var(--color-primary); } .dungeon-player-stats h4 { color: var(--color-primary-light); } /* Szansa na zwycięstwo */ .dungeon-success-chance { text-align: center; } #dungeon-chance-value { display: block; font-size: 3rem; font-weight: 700; margin-bottom: 0.5rem; } .dungeon-success-chance p { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0; } /* Przycisk startu */ #dungeon-start-container { grid-column: 1 / -1; text-align: center; padding-top: 1rem; border-top: 1px solid var(--color-border); } #start-dungeon-btn { font-size: 1.2rem; padding: 1rem 3rem; } @keyframes ancestral-glow-effect { 0% { border-color: #ff8c00; box-shadow: 0 0 15px #ff8c00; } 50% { border-color: #ffd700; box-shadow: 0 0 20px #ffd700; } 100% { border-color: #ff8c00; box-shadow: 0 0 15px #ff8c00; } } [data-rarity="Starożytny"] { animation: ancestral-glow-effect 3s infinite linear; } [data-rarity="Starożytny"] i { color: #ff8c00; /* Pomarańczowy kolor ikony */ } /* Statyczny, ale mocny styl dla przedmiotów "Kosmiczny" */ [data-rarity="Kosmiczny"] { border: 3px solid #4b0082; box-shadow: 0 0 20px #8a2be2, inset 0 0 10px #4b0082; } [data-rarity="Kosmiczny"] i { color: #9400d3; /* Kolor indygo/fioletowy */ filter: drop-shadow(0 0 8px #fff); } @keyframes avatar-pulse-effect { 0% { border-color: #ffffff; box-shadow: 0 0 15px #ffffff, inset 0 0 5px rgba(255, 255, 255, 0.5); } 50% { border-color: #dcdcdc; box-shadow: 0 0 25px #ffffff, inset 0 0 10px rgba(255, 255, 255, 0.8); } 100% { border-color: #ffffff; box-shadow: 0 0 15px #ffffff, inset 0 0 5px rgba(255, 255, 255, 0.5); } } [data-rarity="Avatar"] { animation: avatar-pulse-effect 2s infinite ease-in-out; } [data-rarity="Avatar"] i { color: #ffffff; filter: drop-shadow(0 0 8px #fff); } #daily-tasks-panel .panel-content { display: flex; flex-direction: column; gap: 1rem; } .quest-card { background: var(--color-surface-2); border: 1px solid var(--color-border); border-left-width: 4px; border-radius: var(--border-radius-md); padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; transition: border-color 0.3s; } .quest-card.incomplete { border-left-color: var(--color-border); } .quest-card.complete { border-left-color: var(--color-success); } .quest-header { display: flex; justify-content: space-between; align-items: center; font-weight: 600; } .quest-header .fas { color: var(--color-primary-light); } .quest-header .fa-check-circle { color: var(--color-success); } .quest-progress { width: 100%; height: 10px; background-color: rgba(0,0,0,0.3); border-radius: 5px; overflow: hidden; } .quest-progress-bar { height: 100%; width: 0%; /* Szerokość ustawiana przez JS */ background: var(--color-primary); border-radius: 5px; transition: width 0.3s ease-in-out; } .quest-progress-text { font-size: 0.8rem; text-align: right; color: var(--color-text-secondary); } .synthesis-section { background: rgba(0,0,0,0.15); border-radius: var(--border-radius-md); padding: 1.5rem; border: 1px solid var(--color-border); } .synthesis-section h4 { margin: -1rem -1rem 1rem -1rem; padding: 0.75rem 1rem; background: rgba(0,0,0,0.2); border-bottom: 1px solid var(--color-border); border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; text-align: center; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; } #synthesis-quick-section #quick-synthesis-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; } .quick-synth-btn { border: 2px solid var(--color-border); transition: all 0.2s ease; padding: 0.75rem; font-weight: 600; } .quick-synth-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.2); } /* Style dla poszczególnych rzadkości */ .quick-synth-btn[data-rarity="Normalny"] { border-color: #A0A0A0; color: #A0A0A0; } .quick-synth-btn[data-rarity="Rzadki"] { border-color: #3498db; color: #3498db; } .quick-synth-btn[data-rarity="Epicki"] { border-color: #9b59b6; color: #9b59b6; } .quick-synth-btn[data-rarity="Legendarny"] { border-color: #f1c40f; color: #f1c40f; } /* Efekty specjalne dla wyższych rzadkości */ .quick-synth-btn[data-rarity="Umbralny"] { border-color: #480072; animation: chroma-effect 4s infinite linear; } .quick-synth-btn[data-rarity="Starożytny"] { border-color: #ff8c00; animation: ancestral-glow-effect 3s infinite linear; } #skill-tree-list { width: 100; display: grid; grid-template-columns: repeat(3, 1fr); /* Tworzy trzy równe kolumny */ gap: 1.5rem; align-items: start; /* Wyrównuje kolumny do góry */ } .skill-tree-branch { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; background: rgba(0,0,0,0.2); border-radius: var(--border-radius-md); } .skill-tree-branch h4 { text-align: center; margin: 0 0 1rem 0; color: var(--color-primary); border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; } .skill-item.locked { opacity: 0.5; filter: grayscale(80%); pointer-events: none; } #hotbar #character-panel-btn { background: #CD7F32; /* Brązowy/Miedziany */ border-color: #e0a369; } #hotbar #character-panel-btn:hover { background: #e0a369; border-color: #CD7F32; } /* Styl dla przycisku "Umiejętności" */ #hotbar #skill-tree-btn { background: #9b59b6; /* Fioletowy */ border-color: #c38de6; } #hotbar #skill-tree-btn:hover { background: #c38de6; border-color: #9b59b6; } /* Zachowujemy wyróżnienie dla przycisku "Lochy" */ #hotbar #dungeon-enter-btn { background: var(--color-primary); border-color: var(--color-primary-light); } #hotbar #dungeon-enter-btn:hover { background: var(--color-primary-light); border-color: var(--color-primary); } #equipment-widget { position: fixed; right: 1.3rem; bottom: 6.5rem; width: clamp(280px, 18vw, 320px); /* Nieco szerszy */ background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); backdrop-filter: blur(8px); z-index: 500; display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem; } /* Siatka na wszystkie sloty */ #equipment-widget-slots { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 kolumny */ gap: 10px; } /* Ogólny styl dla wszystkich slotów w widżecie */ .widget-slot { aspect-ratio: 1 / 1; background: var(--color-surface-2); border: 2px solid var(--color-border); border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; /* Większe ikony */ transition: all 0.2s ease; color: var(--color-text-secondary); } .widget-slot.has-item { border-style: solid; border-color: var(--rarity-color); } .widget-slot.has-item:hover { transform: scale(1.1); box-shadow: 0 0 12px var(--rarity-color); } .widget-slot.has-item i { color: var(--rarity-color); filter: drop-shadow(0 0 4px var(--rarity-color)); } /* --- WYRÓŻNIENIE SLOTÓW NA ARTEFAKTY --- */ .artifact-widget-slot { /* Zmieniamy kształt na okrągły */ border-radius: 50%; /* Nadajemy fioletową poświatę dla pustych slotów */ border-color: rgba(147, 112, 219, 0.4); background: radial-gradient(ellipse at center, rgba(147, 112, 219, 0.15) 0%, rgba(0,0,0,0.2) 70%); } .artifact-widget-slot.has-item { /* Gdy slot jest zajęty, ramka przejmuje kolor rzadkości, ale tło pozostaje */ border-color: var(--rarity-color); } .artifact-widget-slot i { /* Ikona zastępcza w pustym slocie artefaktu będzie fioletowa */ color: var(--color-magic); opacity: 0.6; } /* Nagłówek panelu */ .stats-panel-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(0,0,0,0.2); border-bottom: 1px solid var(--color-border); } .stats-panel-header i { color: var(--color-text-secondary); } /* Kontener na wiersze ze statystykami */ .stats-panel-content { padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; /* Zwiększony odstęp dla czytelności */ } /* Pojedynczy wiersz statystyki */ .stat-row { display: grid; /* Używamy siatki dla idealnego wyrównania */ grid-template-columns: 24px 1fr auto; /* Ikona | Etykieta | Wartość */ align-items: center; gap: 0.75rem; font-size: 0.9rem; } .stat-label { display: flex; align-items: center; color: var(--color-text-secondary); font-weight: 500; } .stat-label i { width: 24px; text-align: center; color: var(--color-primary); /* Ujednolicony, pomarańczowy kolor dla wszystkich ikon */ opacity: 0.8; } .stat-value { font-weight: 700; color: var(--color-text-primary); background: rgba(0,0,0,0.2); padding: 0.125rem 0.5rem; border-radius: var(--border-radius-sm); min-width: 40px; text-align: right; font-family: 'Roboto Mono', monospace; /* Czcionka "techniczna" dla liczb */ } /* Stopka z Gear Scorem */ #equipment-widget-footer { text-align: center; font-weight: 600; color: var(--color-text-secondary); background: rgba(0,0,0,0.2); padding: 0.5rem; border-radius: var(--border-radius-sm); margin-top: 5px; border-top: 1px solid var(--color-border); } #gear-score-value { font-size: 1.2rem; color: var(--color-primary-light); margin-left: 0.5rem; text-shadow: 0 0 5px var(--color-primary); } #auto-synthesis-section { margin-top: 1.5rem; padding: 1rem; background: rgba(0,0,0,0.2); border-radius: var(--border-radius-md); } #auto-synthesis-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin-top: 0.5rem; } .auto-synth-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: var(--color-surface-2); border-radius: var(--border-radius-sm); cursor: pointer; transition: background 0.2s ease; } .auto-synth-option:hover { background: var(--color-surface-3); } .auto-synth-toggle { width: 20px; height: 20px; border: 2px solid var(--color-border); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .auto-synth-toggle.active { background: var(--color-primary); border-color: var(--color-primary-light); } .auto-synth-toggle.active i { color: #fff; opacity: 1; } .auto-synth-toggle i { font-size: 0.8rem; color: var(--color-text-secondary); opacity: 0; transition: opacity 0.2s ease; } .auto-synth-label { font-weight: 600; } .pop { position: fixed; /* ZMIANA: Używamy fixed dla lepszej wydajności */ pointer-events: none; font-family: var(--font-family); font-weight: 700; display: flex; align-items: center; z-index: 500; /* Domyślnie ukryty i gotowy do animacji */ opacity: 0; transform: translate(-50%, 0); /* Pozycjonowanie względem lewej krawędzi */ /* Animacja będzie teraz kontrolowana przez klasę .active */ transition: opacity 1.5s ease-out, transform 1.5s ease-out; } /* Klasa .active uruchamia animację i pokazuje pop-up */ .pop.active { opacity: 1; transform: translate(-50%, -100px) scale(0.8); /* Końcowa pozycja animacji */ } .widget-bonuses { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 0.6rem; /* Odstęp między wierszami */ } /* Pojedynczy wiersz statystyki */ .widget-bonus-row { display: grid; grid-template-columns: 20px 1fr auto; /* Ikona | Etykieta | Wartość */ align-items: center; gap: 0.75rem; font-size: 0.9rem; } .widget-bonus-row i { width: 20px; text-align: center; color: var(--color-primary); /* Ujednolicony kolor ikon */ opacity: 0.8; } .widget-bonus-row .bonus-label { color: var(--color-text-secondary); font-weight: 500; } .widget-bonus-row .bonus-value { font-weight: 700; color: var(--color-text-primary); background: rgba(0,0,0,0.2); padding: 2px 6px; border-radius: var(--border-radius-sm); justify-self: end; /* Wyrównuje wartość do prawej */ } .widget-bonus-row.no-bonus { display: block; text-align: center; color: var(--color-text-secondary); font-style: italic; } @keyframes rainbow-text-anim { 0% { color: #ff0000; filter: drop-shadow(0 0 8px #ff0000); } 15% { color: #ff7f00; filter: drop-shadow(0 0 8px #ff7f00); } 30% { color: #ffff00; filter: drop-shadow(0 0 8px #ffff00); } 45% { color: #00ff00; filter: drop-shadow(0 0 8px #00ff00); } 60% { color: #0000ff; filter: drop-shadow(0 0 8px #0000ff); } 75% { color: #4b0082; filter: drop-shadow(0 0 8px #4b0082); } 90% { color: #9400d3; filter: drop-shadow(0 0 8px #9400d3); } 100% { color: #ff0000; filter: drop-shadow(0 0 8px #ff0000); } } /* Animacja OTCHŁANI */ @keyframes abyss-pulse-anim { 0% { color: #2c3e50; filter: drop-shadow(0 0 5px #34495e); } 50% { color: #bdc3c7; filter: drop-shadow(0 0 15px #ecf0f1); } 100% { color: #2c3e50; filter: drop-shadow(0 0 5px #34495e); } } /* Klasy, które aktywują animacje. Zastępują one domyślną animację 'carrot-pulse'. */ #carrot-btn.skin-rainbow { /* Nadpisujemy animację - teraz jest to tęcza ORAZ pulsowanie */ animation: rainbow-text-anim 4s linear infinite, carrot-pulse 3s ease-in-out infinite; } #carrot-btn.skin-abyss { /* Nadpisujemy animację - otchłań ORAZ pulsowanie */ animation: abyss-pulse-anim 3s ease-in-out infinite, carrot-pulse 3s ease-in-out infinite; } /* --- 4. Zapewnienie, że animacja kliknięcia działa na animowanych skinach --- */ /* Gdy dodana jest klasa .explode, nadpisuje ona WSZYSTKIE inne animacje */ #carrot-btn.skin-rainbow.explode, #carrot-btn.skin-abyss.explode { animation: explode 0.4s ease-out forwards; } @keyframes artifact-glow-animation { 0% { box-shadow: 0 0 10px 0px var(--rarity-color), inset 0 0 5px 0px var(--rarity-color); } 50% { box-shadow: 0 0 20px 5px var(--rarity-color), inset 0 0 10px 2px var(--rarity-color); } 100% { box-shadow: 0 0 10px 0px var(--rarity-color), inset 0 0 5px 0px var(--rarity-color); } } /* --- KLASA AKTYWUJĄCA ANIMACJĘ --- */ /* Stosujemy animację do wszystkich miejsc, gdzie może pojawić się artefakt */ .inventory-slot.is-artifact, .gear-slot.is-artifact, .artifact-display-slot.is-artifact, .widget-slot.is-artifact { animation: artifact-glow-animation 3s infinite ease-in-out; } @keyframes rainbow-text-anim { 0% { color: #ff0000; filter: drop-shadow(0 0 8px #ff0000); } 15% { color: #ff7f00; filter: drop-shadow(0 0 8px #ff7f00); } 30% { color: #ffff00; filter: drop-shadow(0 0 8px #ffff00); } 45% { color: #00ff00; filter: drop-shadow(0 0 8px #00ff00); } 60% { color: #0000ff; filter: drop-shadow(0 0 8px #0000ff); } 75% { color: #4b0082; filter: drop-shadow(0 0 8px #4b0082); } 90% { color: #9400d3; filter: drop-shadow(0 0 8px #9400d3); } 100% { color: #ff0000; filter: drop-shadow(0 0 8px #ff0000); } } /* --- Animacja OTCHŁANI --- */ @keyframes abyss-pulse-anim { 0% { color: #2c3e50; filter: drop-shadow(0 0 5px #34495e); } 50% { color: #bdc3c7; filter: drop-shadow(0 0 15px #ecf0f1); } 100% { color: #2c3e50; filter: drop-shadow(0 0 5px #34495e); } } /* Klasy, które aktywują animacje. Zastępują one domyślną animację 'carrot-pulse'. */ #carrot-btn.skin-rainbow { /* Nadpisujemy animację - teraz jest to tęcza ORAZ pulsowanie */ animation: rainbow-text-anim 4s linear infinite, carrot-pulse 3s ease-in-out infinite; } #carrot-btn.skin-abyss { /* Nadpisujemy animację - otchłań ORAZ pulsowanie */ animation: abyss-pulse-anim 3s ease-in-out infinite, carrot-pulse 3s ease-in-out infinite; } /* --- Zapewnienie, że animacja kliknięcia działa na animowanych skinach --- */ /* Gdy dodana jest klasa .explode, nadpisuje ona WSZYSTKIE inne animacje */ #carrot-btn.skin-rainbow.explode, #carrot-btn.skin-abyss.explode { animation: explode 0.4s ease-out forwards; } /* === Skill Tree panel – pełny widok === */ #skill-tree-panel { position: fixed !important; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90vw; max-width: 1200px; max-height: 90vh; /* ogranicza wysokość do okna */ overflow: hidden; /* ukrywa nadmiar */ z-index: 9999; border-radius: 12px; box-shadow: 0 0 40px rgba(0,0,0,0.6); } #skill-tree-panel .panel-content, #skill-tree-content, #skill-tree-inner { overflow-y: auto !important; overflow-x: hidden; max-height: calc(90vh - 80px); /* dopasuj wg wysokości nagłówka */ padding-right: 8px; scrollbar-color: orange transparent; scrollbar-width: thin; } /* Styl scrollbarów (dla WebKit) */ #skill-tree-panel ::-webkit-scrollbar { width: 8px; } #skill-tree-panel ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ff9800, #ff6600); border-radius: 8px; } /* Animowane pojawianie się panelu (opcjonalnie) */ #skill-tree-panel.open { animation: skill-tree-fade-in 200ms ease-out forwards; } @keyframes skill-tree-fade-in { from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* Zmniejszanie panelu na bardzo małych ekranach (opcjonalne) */ @media (max-height: 700px) { #skill-tree-panel { transform: translate(-50%, -50%) scale(0.9); } }