/* Wpasowanie holo-karty (simeydotme/pokemon-cards-css) w siatkę TCGX.
   Ładowane PO wszystkich plikach efektów, więc nadpisuje geometrię. */

/* Rozmiar karty bierze się WYŁĄCZNIE z krawędzi kafelka (inset: 0).
   Wcześniej stały tu jeszcze `width/height: 100%` oraz odziedziczone z base.css
   `aspect-ratio` — trzy warunki na to samo pudełko. Procentowa wysokość liczona
   względem rodzica, którego wysokość sama wynika z proporcji, to na WebKicie
   (iPhone) klasyczne miejsce, gdzie po OBROCIE EKRANU zostaje stara wartość:
   kafelek ma już 242 px, a karta w środku dalej 397 px sprzed obrotu i wchodzi
   na kolejny rząd. Przy samych `inset` silnik liczy pudełko wprost z krawędzi
   rodzica i nie ma czego zapamiętać. */
.holo-card.card {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  --card-aspect: 63 / 88;
  --card-radius: 4.55% / 3.25%;
}

.holo-card .card__translater,
.holo-card .card__rotator {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* rotator odbiera zdarzenia wskaźnika (karta ma pointer-events:none) */
.holo-card .card__rotator {
  pointer-events: auto;
}

.holo-card .card__front,
.holo-card .card__front img {
  width: 100%;
  height: 100%;
}
.holo-card .card__front img {
  object-fit: contain;
}

/* Ery z WŁASNĄ MASKĄ okna (obrazek public/holo/masks/*.png z rysunku usera)
   zamiast geometrycznego clip. Maskę nakłada mechanizm .masked z base.css
   (mask-size: cover). Tu tylko wyłączamy domyślny clip (--clip), żeby liczyła się
   sama maska. WOTC ma osobno Basic i Stage 1/2 (z wyciętym kwadracikiem ewolucji;
   wybór w HoloCard wg data-subtypes). Kształty: scripts/mask-from-drawing.mjs. */
/* Każda karta z maską (.masked) — wyłączamy geometryczny clip, żeby liczył się
   sam kształt maski. Dotyczy WOTC/e-Card/EX-stage i przyszłych er (oraz kart
   simey'a z per-kartową maską). */
.holo-card.masked .card__shine,
.holo-card.masked .card__shine::before,
.holo-card.masked .card__shine::after,
.holo-card.masked .card__glare::after {
  clip-path: none !important;
}

/* REVERSE HOLO na kartach z maską (.masked): maska PNG jest pozytywem (białe = okno
   ilustracji), więc domyślnie holo ląduje W OKNIE — a reverse holo ma świecić na CIELE
   karty, z czystym oknem ilustracji. Odwracamy maskę composite'em: warstwa maski XOR
   pełne pokrycie = wszystko POZA oknem. Bez osobnych plików, działa dla dowolnego
   kształtu okna (Pokémon/stage/trener). Dotyczy LC/e-Card/DP/PT/HGSS (reverse holo). */
.holo-card.masked[data-rarity$="reverse holo"] .card__shine,
.holo-card.masked[data-rarity$="reverse holo"] .card__shine::before,
.holo-card.masked[data-rarity$="reverse holo"] .card__shine::after {
  -webkit-mask-image: var(--mask), linear-gradient(#fff, #fff);
  mask-image: var(--mask), linear-gradient(#fff, #fff);
  -webkit-mask-size: cover, cover;
  mask-size: cover, cover;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Karty LEGEND (HGSS: Ho-Oh/Lugia/Entei&Raikou… — 18 szt.) to full-arty. Holo pokrywa
   CAŁĄ kartę, bez okna/maski/clipu (inaczej niż zwykłe rare holo tej ery). */
.holo-card[data-subtypes*="legend"] .card__shine,
.holo-card[data-subtypes*="legend"] .card__shine::before,
.holo-card[data-subtypes*="legend"] .card__shine::after,
.holo-card[data-subtypes*="legend"] .card__glare::after {
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Pokémon-GX / Tag Team-GX = full-art (cała karta), niezależnie od rzadkości.
   Kilka GX ma w danych rare holo / reverse holo → dostawały okno. */
.holo-card[data-subtypes*="gx"] .card__shine,
.holo-card[data-subtypes*="gx"] .card__shine::before,
.holo-card[data-subtypes*="gx"] .card__shine::after,
.holo-card[data-subtypes*="gx"] .card__glare::after {
  clip-path: none !important;
}

/* Karty ENERGII (XY i nowsze, nie-maskowane) to full-arty — nie mają okna ilustracji jak
   Pokémony, więc reverse holo ma pokrywać CAŁĄ kartę (bez wyciętego okna --clip-invert).
   Ery z maskami (WOTC/e-Card…) mają .masked → tu nietknięte. */
.holo-card:not(.masked)[data-supertype="energy"][data-rarity$="reverse holo"] .card__shine,
.holo-card:not(.masked)[data-supertype="energy"][data-rarity$="reverse holo"] .card__glare::after {
  clip-path: none !important;
}

/* Karty EX (Pokémon-EX ery BW/XY, też Mega EX) to full-arty — holo na CAŁEJ karcie,
   bez wyciętego okna. Subtypy: "ex", "ex,basic", "ex,mega" (tylko te zawierają "ex"). */
.holo-card[data-era="bw"][data-subtypes*="ex"] .card__shine,
.holo-card[data-era="bw"][data-subtypes*="ex"] .card__glare::after,
.holo-card[data-era="xy"][data-subtypes*="ex"] .card__shine,
.holo-card[data-era="xy"][data-subtypes*="ex"] .card__glare::after {
  clip-path: none !important;
}

/* SUN & MOON (sm): okno ilustracji jest SZERSZE i sięga NIŻEJ niż domyślne (SWSH).
   Zmierzone na kartach holo SM (basic/stage1/stage2): boki 7/93% (było 8/92),
   dół 50% (było 47,15% — było za wysoko), góra 8,5% (było 9,85% — lekko podniesione).
   Nadpisujemy TYLKO zmienne okna dla data-era="sm" — inne ery i maski PNG nietknięte.
   Trainerów SM nie ruszamy (mają osobne --clip-trainer). */
.holo-card[data-era="sm"] {
  --clip: inset(8.5% 7% 50% 7%);
  --clip-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 50%, 93% 50%, 93% 8.5%, 7% 8.5%, 7% 50%, 0 52.85%);
  --clip-stage: polygon(93% 8.5%, 57% 8.5%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 7% 16%, 7% 50%, 93% 50%);
  --clip-stage-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 50%, 93% 50%, 93% 8.5%, 57% 8.5%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 7% 16%, 7% 50%, 0 52.85%);
}

/* BLACK & WHITE / XY: ilustracja Pokémonów sięga NIŻEJ niż domyślne okno — dół
   47,15% → 50,15% (+3%). Góra/boki bez zmian; TRAINERZY bez zmian (okno OK).
   XY = ta sama generacja co BW (do weryfikacji). */
.holo-card[data-era="bw"],
.holo-card[data-era="xy"] {
  --clip: inset(9.85% 8% 49.85% 8%);
  --clip-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 50.15%, 91.5% 50.15%, 91.5% 9.85%, 8% 9.85%, 8% 50.15%, 0 53%);
  --clip-stage: polygon(91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 50.15%, 92% 50.15%);
  --clip-stage-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 50.15%, 91.5% 50.15%, 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 50.15%, 0 53%);
}

/* płynny powrót tiltu po zjechaniu kursorem; w trakcie interakcji — natychmiast */
.holo-card.card:not([data-interacting]) .card__rotator {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.holo-card.card[data-interacting] .card__rotator {
  transition: box-shadow 0.4s ease;
}

/* WYDAJNOŚĆ I TRANSFER NA TELEFONACH: kafelki w siatkach (baza kart, set, „inne karty",
   kolekcja, nadchodzące) dostają .holo-static — nie da się ich wziąć do ręki, bo tapnięcie
   otwiera kartę. Bez hovera i bez tiltu efekt i tak nie ma jak się pokazać, a kosztuje
   tekstury foil (na SWSH ~100 kB na kartę) i kilkadziesiąt warstw z mix-blend-mode.
   Dlatego na małych ekranach gasimy je zupełnie — display:none na warstwie z teksturą
   sprawia, że przeglądarka w ogóle jej nie pobiera.
   Widok POJEDYNCZEJ karty (CardViewer, bez .holo-static) zachowuje pełny efekt.
   UWAGA: wcześniej regułę zaczepiliśmy o .card-grid — klasy, której siatki 11a już nie
   używają — więc od redesignu nie działała wcale. */
@media (max-width: 767px) {
  .holo-static .card__shine,
  .holo-static .card__glare {
    display: none !important;
  }
  /* Kafelek zostaje ZWYKŁYM obrazkiem: bez przestrzeni 3D, bez warstwy kompozytora,
     bez will-change. Nie chodzi już tylko o wydajność — kilkadziesiąt osobnych warstw
     GPU na stronę potrafi po OBRÓCENIU TELEFONU zostać z rozmiarem sprzed obrotu
     (karty nachodzą na siebie, dopóki się nie przewinie). Skoro na dotyku i tak nic
     nie obracamy, nie ma po co trzymać tych warstw. */

  /* ROZMIAR LICZONY OD SIEBIE, NIE OD RODZICA — to jest sedno problemu z obracaniem
     telefonu. Karta była pozycjonowana bezwzględnie (inset: 0) w kafelku, którego
     wysokość bierze się z proporcji; WebKit po zmianie orientacji potrafi zostać przy
     starych wymiarach takiego pudełka i karta wychodziła poza kafelek (raz nachodząc
     na sąsiedni rząd, raz — po dodaniu przycinania — będąc ucięta).
     Teraz karta jest zwykłym elementem w przepływie: bierze 100% szerokości i sama
     wyznacza wysokość z proporcji 63:88. Nie ma czego zapamiętać, więc nie ma co się
     rozjechać. Dotyczy TYLKO kafelków w siatkach — widok pojedynczej karty (obracany
     palcem) zostaje na pozycjonowaniu bezwzględnym, bo tam liczy się warstwa 3D. */
  .holo-static {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 63 / 88 !important;
  }
  .holo-static .card__translater,
  .holo-static .card__rotator,
  .holo-static .card__front {
    width: 100% !important;
    height: 100% !important;
  }
  .holo-static,
  .holo-static .card__translater,
  .holo-static .card__rotator,
  .holo-static .card__front {
    transform: none !important;
    transform-style: flat !important;
    perspective: none !important;
    will-change: auto !important;
  }
}

/* Tryb "zabawy kartą" na dotyku (widok pojedynczej karty po tapnięciu): lekki pop
   jako sygnał, że karta reaguje na palec. touch-action:none daje już base.css
   (.card.active), więc przeciąganie obraca kartę zamiast przewijać stronę. */
.holo-card.active {
  transform: scale(1.04);
  transition: transform 0.2s ease;
  z-index: 5;
}

/* DOTYK: żadnego zoomu od podwójnego tapnięcia na karcie. Tap włącza tryb zabawy,
   a przeglądarka traktowała drugi tap (albo tap + szybkie przeciągnięcie) jako
   double-tap zoom — strona skakała w powiększenie zamiast obracać kartę.
   `manipulation` zabija double-tap, ale ZOSTAWIA przewijanie i pinch, więc kartę
   nadal da się przybliżyć palcami, żeby przeczytać drobny druk. */
.holo-card .card__translater,
.holo-card .card__rotator {
  touch-action: manipulation;
}

/* Aktywna karta: ŻADNEGO cienia ani poświaty. base.css dokłada tu białą krawędź +
   glow w kolorze typu, a zwykły cień przy przechyleniu wystaje spod karty jako
   ciemny prostokąt („czarna karta pod kartą"). W trybie zabawy ma być sama karta —
   sygnałem, że jest aktywna, jest powiększenie (scale wyżej). */
.holo-card.card.active .card__rotator,
.holo-card.card.active .card__rotator:focus {
  box-shadow: none;
}