/* ====================================================================== */
/* Podstawowe */
body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    background: #171b21;
    overflow-x: hidden;
    position: relative;
}

/* latające emotki / nicki */
.flying-nick {
    font-family: 'Montserrat', sans-serif !important;
    position: fixed;
    text-align: center;
    color: #fff;
    left: 50vw;
    top: 50vh;
    opacity: 1;
    font-weight: bold;
    pointer-events: none;
    z-index: 350;
    text-shadow: 0 0 8px #232, 0 0 2px #fff;
    transition: left 10s cubic-bezier(.5,.1,.6,.8), top 10s cubic-bezier(.5,.1,.6,.8), opacity 2s;
}
.flying-nick.font1 { font-family: 'Pacifico', cursive; }
.flying-nick.font2 { font-family: 'Indie Flower', cursive; }
.flying-nick.font3 { font-family: 'Fredoka One', cursive; }
.flying-nick.font4 { font-family: 'Comic Neue', cursive; }
.flying-nick.font5 { font-family: 'Amatic SC', cursive; }

/* Przycisk zmiany kolorów - odziedziczy .control-pill (poniżej) */
.color-mode-btn {
    /* kolory specyficzne - pozycjonowanie usunięte, kontrolowane przez .top-controls */
    background: #ffd057;
    color: #222;
    box-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.color-mode-btn:hover {
    background: #67a0c7;
    color: #fff;
}

/* TŁO - kontener tekstowy */
.background-text {
    position: fixed;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* pojedynczy wpis na tle */
.bg-entry {
    position: absolute;
    opacity: 0;
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: pre;
    user-select: none;
    will-change: opacity, transform;
    pointer-events: auto;
    cursor: pointer;
    line-height: 1.02;
}
.fade-in { opacity: 1 !important; }
.spinny { animation: wpis-subtle 1s ease-in-out; }
@keyframes wpis-subtle { 0%{transform:scale(1);}50%{transform:scale(1.05);}100%{transform:scale(1);} }

/* gwiazdka / przelot */
.star-emote {
    position: fixed;
    left: -80px;
    top: 10vh;
    will-change: left, top, opacity;
    opacity: 1;
    z-index: 9999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: left 3s cubic-bezier(.6,.1,.8,.3), opacity 0.5s;
    filter: drop-shadow(0 0 12px #ffd057);
    font-weight: bold;
}
.star-emote.font1 { font-family: 'Pacifico', cursive; }
.star-emote.font2 { font-family: 'Indie Flower', cursive; }
.star-emote.font3 { font-family: 'Fredoka One', cursive; }
.star-emote.font4 { font-family: 'Comic Neue', cursive; }
.star-emote.font5 { font-family: 'Amatic SC', cursive; }

/* GŁÓWNY PANEL - logo i info */
.main-panel {
    position: relative;
    z-index: 10;
    max-width: 540px;
    width: 98vw;
    margin: 0 auto;
    padding: 130px 8px 0 8px;
    box-sizing: border-box;
}

/* Logo - sticky header */
.logo-bg {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 536px;
    height: 129px;
    margin: 0 auto;
    border-radius: 48px;
    z-index: 1000;
    pointer-events: none;
    background: transparent;
    box-shadow: 0 12px 44px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}
.logo-bg::before {
    /* pełne kryjące tło pod logo (jeśli logo PNG ma przezroczystość) */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 48px;
    background: linear-gradient(90deg,#d1b139 0%,#67a0c7 100%);
    opacity: 1;
    z-index: 100;
}
.logo-img {
    position: relative;
    z-index: 101;
    width: 536px;
    height: 129px;
    object-fit: contain;
    display: block;
    margin: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    pointer-events: auto;
    -webkit-font-smoothing: antialiased;
}

/* panel informacyjny */
.info-panel {
    text-align: center;
    color: #fff;
    font-size: 1.18em;
    margin: 0 auto 32px auto;
    font-family: 'Montserrat', sans-serif;
    background: #1b2027de;
    border-radius: 32px;
    padding: 16px 0 12px 0;
    box-shadow: 0 2px 32px #171b25d0;
    width: 92%;
    z-index: 349;
    max-width: 560px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* lista wpisów - przycisk */
.list-btn {
    display: block;
    margin: 18px auto 0 auto;
    background: #67a0c7;
    color: #fff;
    font-size: 1.15em;
    font-weight: bold;
    border: none;
    border-radius: 20px;
    padding: 13px 36px;
    cursor: pointer;
    z-index: 349;
    box-shadow: 0 4px 24px #171b25a0;
    transition: background 0.2s, color 0.2s;
}
.list-btn:hover { background: #ffd057; color: #171b25; }

/* MODAL LIST */
.modal-list {
    display: none;
    position: fixed;
    left: 0; top: 0; width: 100vw; height: 100vh;
    background: rgba(40,48,65,0.88);
    z-index: 99;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background: #20232e;
    border-radius: 28px;
    max-width: 520px;
    width: 92vw;
    max-height: 80vh;
    overflow-y: auto;
    margin: 0 auto;
    box-shadow: 0 6px 32px #000a;
    padding: 32px 26px 26px 26px;
    position: relative;
}
.modal-content h3 {
    color: #ffd057;
    font-family: 'Pacifico', cursive;
    font-size: 2em;
    margin-top: 0;
}
.wpis-list { list-style: none; padding: 0; margin: 0; }
.wpis-list li {
    padding: 12px 0;
    border-bottom: 1px solid #273044;
    color: #fff;
    font-size: 1.08em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wpis-list .wpis-date {
    font-size: 0.95em;
    color: #ffd057;
    margin-left: 12px;
    min-width: 150px;
    text-align: right;
}
.pagination { text-align: center; margin: 18px 0 0 0; }
.pagination button {
    background: #20232e;
    color: #ffd057;
    border: none;
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 1em;
    margin: 0 5px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.pagination button.active,
.pagination button:hover { background: #ffd057; color: #20232e; }
.close-btn {
    position: absolute;
    top: 18px;
    right: 28px;
    background: #ffd057;
    color: #20232e;
    border: none;
    border-radius: 16px;
    padding: 6px 16px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 12px #23293740;
    transition: background 0.2s;
}
.close-btn:hover { background: #67a0c7; color: #fff; }

/* STOPKA - floating input (formularz dodawania) */
.floating-input {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 540px;
    background: linear-gradient(90deg, #44495c 0%, #000 100%);
    box-shadow: 0 -6px 28px rgba(0,0,0,0.45);
    z-index: 20;
    padding: 18px 20px 12px 20px;
    border-radius: 18px 18px 0 0;
    border: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
}
.floating-input input#nick-input {
    flex: 0 0 160px;
    min-width: 110px;
    max-width: 180px;
    font-size: 1em;
    padding: 13px;
    border-radius: 8px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    background: #171b21e0;
    color: #ffd057;
    outline: none;
    box-shadow: 0 1px 4px #d1b13980 inset;
}
.floating-input input#nick-input::placeholder { color: #bfa53a; opacity: 0.9; }
.floating-input input#wpis-input {
    flex: 1;
    font-size: 1.15em;
    padding: 13px;
    border-radius: 8px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    background: #171b21e0;
    color: #ffd057;
    outline: none;
    box-shadow: 0 1px 4px #d1b13980 inset;
}
.floating-input input#wpis-input::placeholder { color: #bfa53a; opacity: 0.8; }
.floating-input button {
    background: #ffd057;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    color: #1b2027;
    font-size: 1em;
}
.floating-input button:hover { background: #67a0c7; color: #fff; }

/* Tryby kolorów */
body.light { background: #f7f7fc; color: #222 !important; }
body.light .info-panel { background: #fff; color: #222; box-shadow: 0 2px 16px #bbb; }
body.light .floating-input { background: #fff; color: #222; }
body.light .logo-bg { background: linear-gradient(90deg,#ffd057 0%,#67a0c7 100%); }

body.neon { background: #090a16; }
body.neon .logo-bg {
    background: linear-gradient(90deg,#00ffe6 0%,#fffb00 100%);
    box-shadow: 0 0 64px #00ffe6b0, 0 0 24px #fffb00b0;
}
body.neon .info-panel {
    background: #141438;
    color: #fff;
    text-shadow: 0 0 3px #00ffe6, 0 0 6px #fffb00;
    box-shadow: 0 2px 32px #00ffe6b0;
}
body.neon .floating-input { background: #141438; color: #00ffe6; }
body.neon .list-btn { background: #00ffe6; color: #141438; }
body.neon .flying-nick { color: #fff !important; }

/* RESPONSYWNOŚĆ na mobile (drobne) */
@media only screen and (max-width: 600px) {
   .logo-bg {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        padding: 0;
        background: rgba(255, 208, 87, 0.7);
        box-shadow: 0 2px 12px #ffd057a0;
        left: 8px;
        top: 8px;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
   }
   .logo-img {
        width: 40px;
        height: 40px;
        max-width: 40px;
        max-height: 40px;
        margin: 0;
        border-radius: 12px;
        object-fit: contain;
        background: none;
        box-shadow: none;
    }

    .floating-input {
        max-width: 100vw;
        width: 100vw;
        padding: 16px 2vw 14px 2vw;
        border-radius: 16px 16px 0 0;
        gap: 10px;
    }
    .floating-input input#nick-input { min-width: 90px; max-width: 120px; font-size: 1.18em; padding: 11px; border-radius: 9px; }
    .floating-input input#wpis-input { font-size: 1.22em; padding: 11px; border-radius: 9px; }
    .floating-input button { font-size: 1.11em; padding: 13px 22px; border-radius: 10px; }
    .wpis-list li { padding: 8px 0; font-size: 0.99em; }
    .wpis-list .wpis-date { font-size: 0.92em; min-width: 105px; }
    .pagination { margin: 12px 0 0 0; }
    .pagination button { font-size: 0.95em; padding: 4px 10px; border-radius: 6px; }
    .close-btn { top: 12px; right: 12px; font-size: 1em; padding: 5px 12px; border-radius: 12px; }
}

/* Kolor i hover dla shuffle (zachowujemy wcześniejsze style) */
#shuffle-btn { background: #67a0c7; }
#shuffle-btn:hover { background: #ffd057; color: #171b25; }

/* przygaszenie innych wpisów (gdy otwarty klon) */
.bg-entry-dim {
    opacity: 0.08 !important;
    filter: blur(1px);
    pointer-events: none;
    transition: opacity 240ms ease, filter 240ms ease;
}

/* overlay (ciemne tło) */
.bg-overlay {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    z-index: 99990;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 220ms ease;
}

/* klonowany element (dodatkowe style) */
.bg-entry-clone {
    box-shadow: 0 10px 22px rgba(0,0,0,0.36);
    border-radius: 8px;
    background: transparent;
    overflow: auto;
    transform-origin: center center;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;   /* padding wliczony w maxWidth/maxHeight */
    padding: 12px;            /* odstęp między krawędzią a treścią */
    scrollbar-gutter: stable; /* rezerwuje miejsce na scrollbar (nowoczesne przeglądarki) */
}

/* stylizacja paska przewijania wewnątrz klonu (opcjonalne) */
.bg-entry-clone::-webkit-scrollbar { width: 12px; height: 12px; }
.bg-entry-clone::-webkit-scrollbar-track { background: transparent; }
.bg-entry-clone::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    border: 3px solid transparent; /* zwiększa "gutter" wizualnie */
    background-clip: padding-box;
}

}
@media (max-width: 600px) {
    .bg-entry-clone { box-shadow: 0 8px 18px rgba(0,0,0,0.36); }
}
@media (max-width: 700px) {
    .bg-entry { line-height: 1.0; }
}

/* ------------------------------------------------------------------------- */
/* BACKGROUND PATTERN - delikatna tekstura gdy .background-text jest pusty   */
/* ------------------------------------------------------------------------- */
.background-text:empty::before {
    content: "";
    position: fixed;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    opacity: 0.06;
    z-index: 1;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 48px 48px;
}
.background-text:empty ~ .main-panel { padding-top: 116px; }

/* ------------------------------------------------------------------------- */
/* Ujednolicony styling dla przycisków ("pigułki") i kontenera top-controls  */
/* ------------------------------------------------------------------------- */

/* wspólne style "pigułek" (przycisków) */
.control-pill, .top-controls .control-pill {
  position: relative;
  background: #ffd057;
  color: #171b25;
  border: none;
  border-radius: 22px;
  padding: 8px 12px;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  white-space: nowrap;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* delikatne różnice dla shuffle - zachowany kolor */
#shuffle-btn.control-pill { background: #67a0c7; color: #fff; }
#shuffle-btn.control-pill:hover { background: #5f8fb0; }

/* Top controls - wrapper (będzie pozycjonowany przez media queries) */
.top-controls {
  position: fixed;
  z-index: 220;
  display: flex;
  pointer-events: none; /* interaction only through inner row */
  padding: 0 8px;
  top: 10px;
}

/* wewnętrzny rząd/kontener przycisków */
.top-controls .controls-row {
  display: flex;
  gap: 10px;
  align-items: center;
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
}

/* Hide native scrollbars by default for horizontal cases */
.top-controls .controls-row::-webkit-scrollbar { height: 6px; }
.top-controls .controls-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.04); border-radius: 6px; }

/* ====================================================================== */
/* Responsive behavior for controls                                        */
/* - <=900px: stacked column at right/top (on mobile), above content, clickable
   >=901px: horizontal row at right (desktop)                              */
/* ====================================================================== */

/* MOBILE / TABLET: stacked vertical controls on the right, above content */
@media (max-width: 900px) {
  .top-controls {
    right: 12px;
    left: auto;
    top: 12px;
    transform: none;
    width: auto;
    max-width: none;
    z-index: 100000;        /* nad wszystkim */
    pointer-events: auto;   /* muszą odbierać kliknięcia */
    justify-content: flex-end;
  }

  .top-controls .controls-row {
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    overflow: visible;
    background: transparent;
  }

  .top-controls .controls-row > button,
  .top-controls .control-pill,
  .top-controls button {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    margin: 0;
    flex: 0 0 auto;
    display: block;
    min-width: 56px;
    padding: 8px 12px;
    text-align: center;
  }

  /* tight screens tweaks */
  @media (max-width: 360px) {
    .top-controls { right: 8px; top: 8px; }
    .top-controls .controls-row { gap: 8px; }
    .top-controls .controls-row > button { padding: 7px 10px; font-size: 0.92rem; min-width: 48px; }
  }
}

/* DESKTOP: horizontal row at right, with original spacing */
@media (min-width: 901px) {
  .top-controls {
    left: auto;
    right: 16px;
    top: 12px;
    transform: none;
    max-width: none;
    z-index: 220;
    pointer-events: none;
  }
  .top-controls .controls-row {
    flex-direction: row;
    gap: 12px;
    overflow: visible;
    align-items: center;
    pointer-events: auto;
  }

  /* If you want the exact spacing like earlier (per-button offsets), prefer to keep them
     in JS or set individual margins here. Avoid using `position: fixed / right: X` on buttons. */
}
/* --- circle layout: obrazek kota w środku --- */
.circle-center-cat {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 46vmin;
  max-height: 46vmin;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;             /* wpisy mają 40+, więc będą nad kotem */
  opacity: 0.98;
  transition: opacity 240ms ease, transform 240ms ease;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  background: transparent;
  display: block;
  image-rendering: auto;
  object-fit: cover;
}

/* ====================================================================== */
/* KONIEC PLIKU CSS */
/* ====================================================================== */