/* Reszta stylów żyje jako klasy Tailwind bezpośrednio w index.html / app.js.
   Tu zostaje tylko to, czego wygodnie nie da się wyrazić utility-class'ami. */

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }

body { scrollbar-color: rgba(255,255,255,.2) transparent; scrollbar-width: thin; }

/* Tło jest wypełniane przez fixed-owane warstwy (theme.png + gradienty),
   ale przy gwałtownej zmianie wysokości strony (np. szybki swipe między
   "Mój tier" a krótszym "Tier dnia" na telefonie) potrafi na moment
   przeskoczyć widoczny fragment poniżej treści zanim te warstwy nadążą.
   Ciemne tło na html/body jest niewidoczne w normalnym użyciu (leży pod
   warstwami tła), ale gdy coś prześwituje, jest czarne zamiast białe. */
html, body {
  background-color: #0b0410;
}
/* body samo nie tworzy kontekstu stackowania, więc bez tego jego własne
   tło (wyżej) malowało się NAD potomkami o ujemnym z-index — czyli nad
   warstwami z theme.png i gradientami — i całe tło aplikacji wychodziło
   jednolicie czarne, mimo że obrazek poprawnie się wczytywał. */
body {
  isolation: isolate;
}

/* ---- złota "moneta" kafelka uczestnika ----
   Same kolory (per tier) liczą się w JS i lądują tu jako CSS custom
   properties (app.js -> applyTileGold) — dzięki temu :hover może
   nadpisać tylko background-size/box-shadow (przesuwając pasek połysku),
   bez wojny o specyficzność z inline stylem. Recepta na "wypukły metal"
   (ukośny gradient + warstwowe inset-shadowy) skopiowana 1:1 ze wzorca
   złotego przycisku, który dostaliśmy do naśladowania. */
.tile {
  background-image: linear-gradient(160deg,
    var(--tile-c1, #a54e07), var(--tile-c2, #b47e11), var(--tile-c3, #fef1a2),
    var(--tile-c2, #b47e11), var(--tile-c1, #a54e07));
  background-size: 100% 100%;
  background-position: center;
  border-color: var(--tile-border, #a55d07);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, .28), 0 3px 6px rgba(110, 80, 20, .4),
    inset 0 -2px 5px 1px var(--tile-in-dark, rgba(139, 66, 8, .9)),
    inset 0 -1px 1px 3px var(--tile-in-light, rgba(250, 227, 133, .9));
  transition: transform .15s ease, background-size .2s ease-in-out, box-shadow .2s ease-in-out;
}
.tile:hover {
  background-size: 150% 150%;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, .3), 0 6px 6px rgba(0, 0, 0, .25),
    inset 0 -2px 5px 1px var(--tile-in-dark, rgba(139, 66, 8, .9)),
    inset 0 -1px 1px 3px var(--tile-in-light, rgba(250, 227, 133, .9));
}

/* ---- SortableJS drag state (przeciąganie kafelków w "Mój tier") ----
   Natywne HTML5 drag & drop (bez forceFallback) — przeglądarka sama
   renderuje obraz przeciąganego kafelka, więc tu stylujemy tylko
   pozostawiony "slot" w miejscu, z którego kafelek został zabrany. */
.tile-ghost {
  opacity: .25;
}

/* ---- wejście widoku przy przełączaniu zakładek ----
   Poziomy slide (jak karuzela, w stronę zgodną z kolejnością zakładek)
   zamiast pionowego "spadania" — panele mają backdrop-blur, a ruch
   w pionie sprawiał, że rozmyte tło jakby "wpadało" w kafelki. */
@keyframes viewFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes viewSlideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes viewSlideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
.view-anim-in {
  animation: viewFadeIn .3s ease-out;
}
.view-anim-in-right {
  animation: viewSlideInRight .36s cubic-bezier(.22,1,.36,1);
}
.view-anim-in-left {
  animation: viewSlideInLeft .36s cubic-bezier(.22,1,.36,1);
}

/* ---- napis PARADISE TIER: pulsująca poświata na krawędziach liter ----
   Kolor napisu zostaje statyczny (dokładnie taki jak wcześniej — bez
   żadnego przelewającego się gradientu, bo to wyglądało jak skanowanie).
   drop-shadow trzyma się kanału alfa tekstu (transparentnego, wypełnionego
   tylko przez background-clip), więc poświata realnie obrysowuje kształty
   liter, a nie prostokąt wokół napisu — tylko delikatnie oddycha w miejscu. */
.paradise-title {
  background-image: linear-gradient(180deg, #fef9c3 0%, #fcd34d 55%, #ca8a04 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: paradiseGlow 4s ease-in-out infinite;
}
@keyframes paradiseGlow {
  0%, 100% {
    filter: drop-shadow(0 2px 14px rgba(250,200,80,.35)) drop-shadow(0 0 2px rgba(255,235,180,.3));
  }
  50% {
    filter: drop-shadow(0 2px 24px rgba(250,200,80,.6)) drop-shadow(0 0 6px rgba(255,235,180,.5));
  }
}
@media (prefers-reduced-motion: reduce) {
  .paradise-title { animation: none; }
}