/*
Theme Name: Flatsome Child - JLA
Description: Minimalistyczna nadbudowa dla systemu JLA-FLUX
Author: JLA
Template: flatsome
Version: 1.0
*/

/* =========================================================
   PROTOKÓŁ JLA: ARCHITEKTURA BRUTALISTYCZNA (STABILIZACJA)
========================================================= */

/* --- 1. HUD: PEŁNY EKRAN --- */
body, html { margin: 0 !important; padding: 0 !important; overflow-x: hidden; }

.jla-hud-matrix {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    background: #FFFFFF !important;
    margin: 0 !important; padding: 0 !important;
}

/* --- 2. OBRAZ: NEUTRALIZACJA ARTEFAKTÓW --- */
.jla-dynamic-image {
    width: 100vw !important; height: 100vh !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    pointer-events: none !important;
}

.jla-dynamic-image img {
    max-width: 100vw !important; max-height: 100vh !important;
    object-fit: contain !important;
    border: none !important;
}

/* --- 3. STACJA DOKUJĄCA: DOLNA KRAWĘDŹ --- */
.jla-hud-dock {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important;
    width: 100vw !important; 
    z-index: 9999 !important;
    display: flex !important; 
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

.jla-hud-dock .row,
.jla-hud-dock .col {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 100% !important;
}

/* --- 4. FUZJA: PRZYCISKI W JEDNEJ LINII --- */
.jla-fusion-core {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100vw !important;
    pointer-events: auto !important;
    margin: 0 !important; 
    padding: 0 !important;
}

/* --- 5. ZUNIFIKOWANE PRZYCISKI --- */
body .wpulike,
body .wpulike-default,
body .scriptlesssocialsharing-buttons a.button {
    flex: 1 !important; 
    background: #FFFFFF !important;
    border: 3px solid #000000 !important; 
    border-bottom: none !important; 
    border-right: none !important; 
    padding: 20px 10px !important;
    margin: 0 !important;
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

body .wpulike:last-child,
body .scriptlesssocialsharing-buttons a.button:last-child {
    border-right: 3px solid #000000 !important;
}

/* Stylizacja napisów wewnątrz przycisków */
body .wpulike .wp_ulike_btn,
body .wpulike .count-box,
body .scriptlesssocialsharing-buttons a.button span {
    font-family: 'gl0', monospace !important;
    font-size: 14px !important; 
    font-weight: bold !important;
    text-transform: uppercase !important;
    color: #000000 !important;
}

/* --- 6. NAWIGACJA (BOCZNA) --- */
.jla-nav-panel {
    position: fixed !important;
    top: 0 !important; height: 100vh !important;
    width: 33.33vw !important;
    display: flex !important; align-items: center !important;
    z-index: 40 !important;
    color: #000000 !important;
    font-size: 40px !important;
    opacity: 0.2;
    transition: opacity 0.3s ease !important;
}
.jla-nav-left { left: 0 !important; justify-content: flex-start !important; padding-left: 20px !important; }
.jla-nav-right { right: 0 !important; justify-content: flex-end !important; padding-right: 20px !important; }
.jla-nav-panel.jla-dead { opacity: 0.05 !important; pointer-events: none !important; }
.jla-nav-panel:hover { opacity: 1 !important; }

/* --- 7. TWARDY FEEDBACK (HOVER) --- */
body .wpulike:hover,
body .scriptlesssocialsharing-buttons a.button:hover { 
    background: #000000 !important; color: #FFFFFF !important;
}
body .wpulike:hover .wp_ulike_btn, 
body .wpulike:hover .count-box { color: #FFFFFF !important; }
body .wpulike:hover .count-box { border-left-color: #FFFFFF !important; }

/* --- JLA: NAPRAWA NAWIGACJI (KĄTOWNIKI) --- */
body .jla-wizje-nav {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    z-index: 99999 !important;
    display: block !important;
    border-style: solid !important;
    border-color: #000000 !important;
    opacity: 1 !important; /* Wymuszenie widoczności */
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Kątownik w lewo */
.jla-wizje-nav-left {
    left: 20px !important;
    border-width: 3px 0 0 3px !important; /* Lewa i górna krawędź */
    transform: translateY(-50%) rotate(-45deg) !important;
}

/* Kątownik w prawo */
.jla-wizje-nav-right {
    right: 20px !important;
    border-width: 3px 3px 0 0 !important; /* Górna i prawa krawędź */
    transform: translateY(-50%) rotate(45deg) !important;
}

/* Hover dla pewności */
body .jla-wizje-nav:hover {
    border-color: #ff0000 !important; /* Opcjonalnie: zmiana na czerwony po najechaniu */
    transform: translateY(-50%) scale(1.1) !important;
}

/* --- TRYB APP / GRA: ZABLOKOWANIE ELASTYCZNEGO PRZEWIJANIA --- */
html, body {
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* Dynamiczna wysokość pod ekrany komórek */
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #F5F2EC; /* Piaskowy Trawertyn JLA */
  color: #111111;
  font-family: 'Courier New', Courier, monospace;
  -webkit-user-select: none; /* Blokada zaznaczania tekstu jak w apce/grze */
  user-select: none;
  touch-action: manipulation; /* Likwidacja opóźnienia kliknięcia na dotyk */
}

/* Jeśli chcesz, aby główny kontener działał jak okno aplikacji fullscreen */
.jla-app-viewport {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  overflow-y: auto; /* Przewijanie wnętrza, a nie całej przeglądarki */
  box-sizing: border-box;
}

<!-- === BAZA DOKU LEWEJ KOLUMNY === -->
<div class="jla-desktop-void"></div>
<div class="jla-vertical-sidebar">
  <div class="jla-sidebar-header">// ASSOCIATION JLA</div>
  
  <div class="jla-ticker-wrap">
    <div class="jla-ticker">
      ZAINSPIRUJ | ZNAJDŹ | ZBUDUJ | ZAINSPIRUJ | ZNAJDŹ | ZBUDUJ | ZAINSPIRUJ | ZNAJDŹ | ZBUDUJ | ZAINSPIRUJ | ZNAJDŹ | ZBUDUJ |
    </div>
  </div>

  <!-- KONTENER NA TWOJE SHORTCODE'Y -->
  <div class="jla-sidebar-menu jla-stack-bottom">
    <!-- W UX Builderze wstawisz tutaj po prostu moduły [jla_cegla ...] -->
    <?php echo do_shortcode('[jla_cegla title="WIZJE26" bg="#444444" tri="czerwony" link="/wizje" index="1"]'); ?>
    <?php echo do_shortcode('[jla_cegla title="PROTOKÓŁ" bg="#a2a2a2" tri="zloty" link="/protokol" index="2"]'); ?>
    <?php echo do_shortcode('[jla_cegla title="LOG IN" bg="#111111" tri="niebieski" link="/dostep" index="3"]'); ?>
  </div>
</div>

<style>
/* ... (zachowaj tutaj poprzednie style jla-desktop-void i jla-vertical-sidebar) ... */

/* --- UKŁAD TETRIS (DOBIJANIE OD DOŁU) --- */
.jla-sidebar-menu.jla-stack-bottom {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Układa cegły od samego dołu ekranu */
  flex-grow: 1; /* Wypełnia resztę miejsca pod nagłówkiem */
  gap: 20px; 
}

/* --- PRZYCISK: GEOMETRIA --- */
.jla-wipeout-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  aspect-ratio: 2 / 1; 
  box-sizing: border-box;
  background-color: var(--jla-bg);
  color: #F5F2EC;
  font-family: 'Courier New', Courier, monospace;
  padding: 20px;
  text-decoration: none;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 35px) 0, 100% 35px, 100% 100%, 0 100%);
  overflow: hidden; /* Wymagane dla stroboskopu */
}

/* --- EFEKT STROBOSKOPU (DIAMENTOWY REFLEKS) --- */
.jla-strobe-fx::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  animation: jlaDiamondStrobe 6s infinite;
  animation-delay: var(--jla-delay); /* Błysk jest zsynchronizowany z upadkiem */
  z-index: 1;
}

@keyframes jlaDiamondStrobe {
  0% { left: -100%; }
  15% { left: 200%; }
  100% { left: 200%; }
}

/* --- FIZYKA UPADKU TETRIS (SLIDE + DROP) --- */
.jla-tetris-drop {
  opacity: 0;
  transform: translate(100vw, -100vh); /* Start: Prawy górny róg, poza ekranem */
  animation: jlaTetrisFall 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
  animation-delay: var(--jla-delay); /* Opóźnienie z Shortcode'a (index * 0.3s) */
}

@keyframes jlaTetrisFall {
  0%   { transform: translate(100%, -100vh); opacity: 0; }
  30%  { transform: translate(0, -100vh); opacity: 1; } /* Wjazd poziomy do kolumny */
  100% { transform: translate(0, 0); opacity: 1; } /* Uderzenie w stertę na dole */
}

/* --- MIGAJĄCY TRÓJKĄT STATUSU --- */
.jla-wipeout-btn::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 35px; height: 35px;
  background-color: var(--jla-tri);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  animation: jlaBlinkWarning 0.8s infinite step-start;
  z-index: 2;
}

@keyframes jlaBlinkWarning { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.jla-btn-title { font-size: 32px; font-weight: bold; letter-spacing: 2px; line-height: 1; position: relative; z-index: 3; }
</style>

<!-- SYGNALIZACJA DŹWIĘKOWA: "PIP!" (ZSYNCHRONIZOWANA Z UDERZENIEM) -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  // Prosty, surowy syntezator fali (MIDI "PIP") zakodowany w Base64 - zero zewnętrznych plików!
  const pipSound = new Audio('data:audio/wav;base64,UklGRigAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YQQAAAAAAAD//w==');
  pipSound.volume = 0.2; // Subtelna głośność

  // Nasłuchujemy, kiedy każda cegła skończy animację upadku "jlaTetrisFall"
  document.querySelectorAll('.jla-tetris-drop').forEach(brick => {
    brick.addEventListener('animationend', (event) => {
      if(event.animationName === 'jlaTetrisFall') {
        pipSound.cloneNode(true).play().catch(() => {}); // Klon, aby dźwięki mogły nakładać się na siebie
      }
    });
  });
});
</script>