/* Import czcionek, je艣li nie jest w */ @font-face { font-family: 'Minercraftory'; /* W艂asna nazwa czcionki do u偶ycia w CSS */ src: url('../ttf/Minercraftory.ttf') format('truetype'); /* 馃敟 Wzgl臋na 艣cie偶ka do pliku TTF */ font-weight: normal; font-style: normal; } /* 1. T艁O - CIEP艁Y WZ脫R I SUBTELNE BLASKI SAKURY */ body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; /* Baza: Ciemny, g艂臋boki wi艣niowy kolor */ background-color: #1f141a; margin: 0; padding: 0; overflow: hidden; font-family: 'Roboto', sans-serif; /* Pixelowy wz贸r + T艁O BLASKU */ background-image: radial-gradient(circle at 50% 10%, rgba(255, 105, 180, 0.15), transparent 40%), radial-gradient(circle at 90% 90%, rgba(139, 71, 93, 0.1), transparent 50%), repeating-linear-gradient(45deg, #222 0, #222 3px, #1f141a 3px, #1f141a 6px); background-size: cover, cover, 200% 200%; animation: background-move 20s linear infinite, sakura-fade-glow 10s ease-in-out infinite alternate; position: relative; } @keyframes background-move { 0% { background-position: 0 0; } 100% { background-position: 200% 200%; } } @keyframes sakura-fade-glow { 0% { opacity: 0.9; } 100% { opacity: 1; filter: brightness(1.1); } } /* --- KONTENER I STYL DLA P艁ATK脫W ANIMOWANYCH PRZEZ JS --- */ #sakura-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 90; /* 馃敟 Z-INDEX: Pod nak艂adk膮 (100), ale nad t艂em body. */ pointer-events: none; overflow: hidden; } .petal { /* Ustawienia wizualne */ display: block; position: absolute; /* 馃敟 ZMIENIONE: U偶ycie obrazka zamiast koloru */ background-image: url('../img/sakura-flower.png'); background-size: contain; background-repeat: no-repeat; background-position: center; /* 馃敟 ZMIENIONE: Wi臋kszy rozmiar dla obrazka */ width: 20px; height: 20px; /* P艂atek musi by膰 poza polem widzenia przed startem JS */ transform: translate3d(-100px, -100px, 0); will-change: transform; /* 馃敟 POPRAWKA: Prawid艂owa sk艂adnia filter: drop-shadow */ /* U偶ywamy rgba(255, 105, 180, 0.9) jako JEDN膭 warto艣膰 koloru */ filter: drop-shadow(0px 0px 5px rgba(255, 105, 180, 0.9)); /* Zapewnienie, 偶e JS ma pe艂n膮 kontrol臋 */ transition: none; } /* --- KONIEC STYLI P艁ATK脫W --- */ #loader-overlay { background-color: rgba(0, 0, 0, 0.4); /* Lekko zmniejszone krycie, by p艂atki by艂y widoczne */ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100vh; z-index: 100; /* G艂贸wna warstwa nak艂adki */ } /* --- STYL DLA TYTU艁U SAKURALAND (Pixel Art Neon) --- */ .sakura-title { font-size: 3.5em; font-weight: 900; color: #FFC0CB; margin-bottom: 20px; display: flex; position: relative; z-index: 110; /* 馃敟 Z-INDEX: Najwy偶ej, by by膰 nad nak艂adk膮 i p艂atkami. */ letter-spacing: 5px; font-family: 'Minercraftory', cursive; text-shadow: 10px 10px 0 #8b475d, 5px 5px 0 #d87093, 0 0 20px rgba(255, 105, 180, 1), 0 0 60px rgba(255, 105, 180, 0.9); text-rendering: crisp-edges; animation: neon-flicker 10s infinite alternate; } /* Wzmocnienie efektu migotania */ @keyframes neon-flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { text-shadow: 10px 10px 0 #8b475d, 0 0 15px #FF69B4, 0 0 50px #FF69B4; } 20%, 24%, 55% { text-shadow: 10px 10px 0 #D87093, 0 0 8px #ff00c8, 0 0 30px #ff00c8; color: #fff0f5; } } .sakura-title span { display: inline-block; position: relative; transform-origin: bottom; animation: ultimate_sakura_jump 2s steps(1) infinite; } @keyframes ultimate_sakura_jump { /* Fazy spoczynku */ 0%, 5%, 45%, 90%, 100% { transform: translateY(0) scaleY(1); } /* Lekkie przykucni臋cie przed skokiem */ 10% { transform: translateY(6px) scaleY(0.85); } /* W艂a艣ciwy, dynamiczny skok w g贸r臋 */ 15% { transform: translateY(-30px) scaleY(1.15); } /* Lekkie opadanie */ 25% { transform: translateY(-20px) scaleY(1); } /* Ponowne l膮dowanie (lekkie przykucni臋cie) */ 35% { transform: translateY(0) scaleY(0.9); } /* Odbicie w g贸r臋 */ 40% { transform: translateY(-8px) scaleY(1.05); } /* Powr贸t do pozycji wyj艣ciowej */ 42% { transform: translateY(0) scaleY(1); } } /* --- HAS艁O SERWERA (MOTTO) --- */ .server-motto { color: #FFEBEE; font-size: 1.2em; font-weight: 700; margin-bottom: 50px; letter-spacing: 2px; font-family: 'Press Start 2P', cursive; text-shadow: 0 0 15px rgba(255, 105, 180, 1); animation: motto-glow 3s ease-in-out infinite alternate; } @keyframes motto-glow { 0% { opacity: 0.8; text-shadow: 0 0 8px #FF69B4; } 100% { opacity: 1; text-shadow: 0 0 20px #FF69B4, 0 0 25px #FFC0CB; } } /* --- PANEL 艁ADOWANIA - G艁脫WNY KONTENER (Ciep艂y, Japo艅ski Panel) --- */ .loading-panel { background: #c7b095; border: 5px solid transparent; /* JAPO艃SKA CZERWIE艃 W PIXELOWEJ RAMIE */ border-image: url('data:image/svg+xml;utf8,') 9 repeat; padding: 20px 30px; width: 90%; max-width: 850px; /* Ciep艂y cie艅 i mocny blask */ box-shadow: 6px 6px 0 #8b475d, 0 0 30px rgba(255, 105, 180, 1.2); text-align: left; position: relative; z-index: 105; /* 馃敟 Z-INDEX: Nad nak艂adk膮 i p艂atkami, ale pod tytu艂em. */ } /* Dodatkowy blask wewn膮trz panelu za pomoc膮 ::before */ .loading-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.4); pointer-events: none; z-index: 101; } .panel-content-wrapper { display: flex; gap: 30px; align-items: center; position: relative; z-index: 102; } .progress-details { flex-grow: 1; } /* --- LEWA KOLUMNA: LOGO --- */ .loading-visual-container { width: 150px; height: 150px; flex-shrink: 0; border: 5px solid #FF69B4; box-shadow: 0 0 35px rgba(255, 105, 180, 2), 0 0 20px rgba(255, 255, 255, 0.8); background-color: #1a1a1a; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; } .server-logo { width: 100%; height: 100%; object-fit: cover; display: block; filter: drop-shadow(0 0 10px rgba(255, 105, 180, 0.9)); animation: logo-pulsate 4s ease-in-out infinite alternate; } /* Logo Pulsate animation */ @keyframes logo-pulsate { 0% { transform: scale(1) rotate(0deg); filter: brightness(1) drop-shadow(0 0 8px #FF69B4); } 100% { transform: scale(1.05) rotate(1deg); filter: brightness(1.2) drop-shadow(0 0 15px #FFC0CB); } } /* --- PRAWA KOLUMNA: STATUS 艁ADOWANIA --- */ #loading-status { /* Ciemny, czytelny kolor na jasnym, ciep艂ym tle */ color: #4b3e33; font-size: 1.4em; margin-top: 0; margin-bottom: 10px; font-weight: 700; text-shadow: 1px 1px 0 #f0e6e6; } /* Pasek post臋pu - Kontener */ .progress-bar-container { width: 100%; height: 30px; background-color: #f0f0f0; border-radius: 0; overflow: hidden; /* Obramowanie w japo艅skiej czerwieni */ border: 3px solid #CC3333; margin-bottom: 10px; position: relative; /* Ciep艂e, mocne cienie */ box-shadow: inset 2px 2px 0 #a08c78, 4px 4px 0 #8b475d; } .progress-bar { height: 100%; /* JEDNOLITY R脫呕 SAKURA */ background: #ff69b4; transition: width 0.3s ease-out; box-shadow: 0 0 10px #ff00c8; will-change: width, transform; animation: progress-stripe 1s linear infinite, progress-pulse 1s infinite alternate; background-image: linear-gradient( -45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent ); background-size: 30px 30px; position: absolute; } /* Animacja paska (paski) */ @keyframes progress-stripe { from { background-position: 30px 0; } to { background-position: 0 0; } } /* Pulsuj膮cy blask paska */ @keyframes progress-pulse { 0% { box-shadow: 0 0 10px #ff00c8; } 100% { box-shadow: 0 0 15px #FFC0CB; } } .progress-percent { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Ciemny, czytelny kolor na pasku */ color: #4b3e33; font-family: 'Press Start 2P', cursive; font-size: 0.8em; text-shadow: 1px 1px 0 #f0e6e6; z-index: 20; } /* Wskaz贸wka dnia - Japo艅ska Plakietka (Etykieta) */ .tip-of-the-day { color: #4b3e33; font-size: 0.9em; font-style: italic; margin-top: 15px; text-align: center; padding: 10px 15px; /* Jasne t艂o z czerwonymi akcentami */ background-color: #fff0f5; border: 3px solid #CC3333; box-shadow: 0 0 10px rgba(255, 105, 180, 0.8); animation: tip-flash 6s ease-in-out infinite; } @keyframes tip-flash { 0%, 100% { opacity: 1; border-color: #CC3333; } 50% { opacity: 0.8; border-color: #FFC0CB; } } /* --- Media Queries (RESPONSYWNO艢膯) --- */ /* Tablet i mniejsze laptopy (max 1024px) */ @media (max-width: 1024px) { .loading-panel { max-width: 90%; } .sakura-title { font-size: 3em; } } /* Telefon i tablet (max 768px) - Uk艂ad kolumnowy */ @media (max-width: 768px) { .loading-panel { max-width: 90%; } .panel-content-wrapper { flex-direction: column; gap: 20px; text-align: center; } .loading-visual-container { width: 120px; height: 120px; box-shadow: 0 0 15px rgba(255, 105, 180, 1); border: 4px solid #FF69B4; } .sakura-title { font-size: 2.5em; text-shadow: 5px 5px 0 #8b475d, 0 0 5px rgba(255, 105, 180, 0.8), 0 0 15px rgba(255, 105, 180, 0.5); /* 艁agodniejsze cienie */ animation: none; } body { background-image: none; /* Usuni臋cie skomplikowanego wzoru */ background-color: #1f141a; animation: none; /* Wy艂膮czenie background-move i sakura-fade-glow */ } .loading-panel { box-shadow: 3px 3px 0 #8b475d, 0 0 15px rgba(255, 105, 180, 1); } .server-motto { font-size: 1em; margin-bottom: 30px; } #loading-status { color: #4b3e33; font-size: 1.2em; text-align: center; } .progress-details { width: 100%; } } /* Najmniejsze telefony (max 480px) */ @media (max-width: 480px) { .sakura-title { font-size: 1.8em; letter-spacing: 3px; text-shadow: 3px 3px 0 #8b475d, 0 0 8px rgba(255, 105, 180, 0.9); } .loading-panel { padding: 15px; } .progress-bar-container { height: 25px; } .progress-percent { font-size: 0.7em; } }