/* =======================================================
   CSS DLA STRONY NYAVERSE - STYL RETRO/NEOCITIES
   ======================================================= */

/* GŁÓWNE USTAWIENIA STRONY */
body {
  background-image: url("sakura.jpg"); /* Tło całej strony */
  background-size: cover;              /* Obraz tła wypełnia całe okno */
  background-position: center;         /* Wyśrodkowanie tła */
  background-repeat: no-repeat;        /* Nie powtarzaj tła */
  background-attachment: fixed;        /* Tło stoi w miejscu podczas scrollowania */
  font-family: "Kemco Pixel", monospace; /* Pixelowy font */
  color: black;                        /* Kolor tekstu */
  font-size: 16px;
  image-rendering: pixelated;          /* Zapobiega rozmyciu grafik pixel-art */
  margin: 0;                           /* Usuwa domyślne marginesy przeglądarki */
}

/* KONTENER GŁÓWNY - TRZYMA SIDEBAR I TREŚĆ OBOK SIEBIE */
.container {
  display: flex;             /* Układ elastyczny (obok siebie) */
  align-items: flex-start;   /* Wyrównaj do góry */
  padding-top: 0;
  padding-left: 40px;
  gap: 40px;                 /* Odstęp między sidebarem a treścią */
}

/* PASEK BOCZNY (SIDEBAR) */
.sidebar {
  display: flex;
  flex-direction: column;    /* Elementy wewnątrz paska jeden pod drugim */
  gap: 15px;                 /* Odstępy między elementami sidebaru */
  width: 240px;              /* Stała szerokość paska */
  flex-shrink: 0;            /* Pasek nie będzie się zwężał */
  background-color: white;
  border-left: 2px solid black;
  border-right: 2px solid black;
  padding: 30px 15px;
  box-sizing: border-box;    /* Padding nie powiększa szerokości paska */
  box-shadow: 6px 6px 0px rgba(0,0,0,0.5); /* Cień retro */
  
  /* STICKY - Sprawia, że menu "płynie" za użytkownikiem */
  position: sticky;
  top: 0;
  height: 100vh;             /* Wysokość na cały ekran */
  overflow-y: auto;          /* Jeśli menu będzie za długie, pojawi się scroll */
}

/* PRZYCISKI W MENU (LINKI) */
.menu-item {
  background-color: white;
  border: 2px solid black;
  padding: 8px 10px;
  text-decoration: none;     /* Usuwa podkreślenie linku */
  color: #d14d85;            /* Pastelowy róż */
  font-weight: bold;
  text-align: center;
  display: block;            /* Każdy link zajmuje całą szerokość */
  box-shadow: 3px 3px 0px rgba(0,0,0,0.5);
  transition: all 0.1s;      /* Płynna zmiana przy najechaniu */
  text-shadow: 0.5px 0.5px 0px #fff, -0.5px -0.5px 0px #fff;
}

/* EFEKT PO NAJECHANIU NA PRZYCISK */
.menu-item:hover {
  transform: translate(-1px, -1px); /* Delikatne przesunięcie */
  box-shadow: 4px 4px 0px rgba(0,0,0,0.5);
  background-color: #fff0f5; 
  color: #ff1493;            /* Mocniejszy róż */
}

/* SEKCJA GŁÓWNA (TREŚĆ) */
.main-content {
  flex-grow: 1;              /* Zajmuje resztę dostępnego miejsca */
  max-width: 800px;
  padding-top: 30px;
}

/* KAFELKI Z TREŚCIĄ (NP. LISTA KONWENTÓW) */
.kafelek {
  background-color: white;
  border: 2px solid black;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 6px 6px 0px rgba(0,0,0,0.5);
  width: 100%;
  box-sizing: border-box;
}

/* KLASA DO WYŚRODKOWANIA OBRAZKA */
.centre-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;    /* Zapobiega wychodzeniu obrazka poza kontener */
  height: auto;
  image-rendering: pixelated; /* Zachowanie stylu retro */
}

/* STOPKA SIDEBARU - DOLNA CZĘŚĆ PASKA */
.sidebar-footer {
  margin-top: auto;          /* Pcha stopkę na sam dół białego paska */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
}

/* SIATKA NA DEKORACJE - UKŁAD 2x3 BEZ ODSTĘPÓW */
.decor-grid {
  display: grid;
  grid-template-columns: repeat(2, 100px); /* Ustawiamy sztywną szerokość kolumn na 88px */
  gap: 0px;                               /* Usuwamy całkowicie odstępy */
  justify-content: center;                /* Wyśrodkowujemy całą siatkę w pasku */
  margin-bottom: 10px;                    /* Tylko odstęp od logo Neocities na dole */
}

/* POSZCZEGÓLNE ZNACZKI */
.sidebar-decor {
  display: block;
  width: 100px;             /* Oryginalna szerokość przycisku Neocities */
  height: 57px;            /* Oryginalna wysokość */
  image-rendering: pixelated; 
  /* Usuwamy marginesy i paddingi, by obrazki się stykały */
  margin: 0;
  padding: 0;
  /* Opcjonalnie usuwamy cień, jeśli ma nie być żadnych przerw wizualnych */
  filter: none; 
}

/* EFEKT HOVER - Teraz obrazek będzie "wychodził" nad inne */
.sidebar-decor:hover {
  transform: scale(1.2);
  z-index: 5;              /* Sprawia, że powiększony znaczek jest nad sąsiadami */
  position: relative;
}

/* LOGO NEOCITIES NA DOLE */
.sidebar-logo {
  display: block;
  max-width: 80%;
  image-rendering: pixelated;
}

/* DODATKI DO TEKSTU I NAGŁÓWKÓW */
h1, h2, h3 {
  margin-top: 0;
  text-transform: lowercase; /* Małe litery w nagłówkach (retro style) */
}

/* OBRAZEK W ROGU (NP. MIKU) */
.fixed-corner-img {
  position: fixed;           /* Przyklejony do okna przeglądarki */
  bottom: 0;                 /* Na samym dole */
  right: 0;                  /* Po prawej stronie */
  z-index: 100;              /* Zawsze na wierzchu innych elementów */
  max-width: 300px;
  pointer-events: none;      /* Nie blokuje klikania w to, co pod spodem */
  image-rendering: pixelated;
}

/* PRZYWRÓCENIE RÓŻOWEGO KOLORU LINKÓW */
/* :visited sprawia, że link nie robi się fioletowy po kliknięciu */
.menu-item, .menu-item:visited {
  color: #d14d85 !important;
  text-decoration: none !important;
}

.menu-item:hover {
  color: #ff1493 !important;
  background-color: #fff0f5 !important;
}

/* Linki wewnątrz białych kafelków z treścią */
.kafelek a, .kafelek a:visited {
  color: #d14d85 !important;
  text-decoration: underline !important;
}

.kafelek a:hover {
  color: #ff1493 !important;
  background-color: #fff0f5 !important;
  text-decoration: none !important;
}


/* --- PLAYER SPOTIFY NAD MIKU --- */
.spotify-float {
  position: fixed;
  bottom: 260px; /* Wysokość nad Miku - dopasuj jeśli Miku jest wyżej/niżej */
  right: 20px;   /* Odstęp od prawej krawędzi */
  width: 250px;  /* Szerokość małego kafelka */
  z-index: 99;   /* Tuż pod Miku (która ma 100) */
  
  /* Styl kafelka retro */
  background: white;
  border: 2px solid black;
  padding: 5px;
  box-shadow: 6px 6px 0px rgba(0,0,0,0.5);
}