/* === Categories: image fit & crop tuning ===
   - Make top images taller so important content isn't cut.
   - Use background cover with per-card positioning so the composition looks right.
   - Keep responsive behavior.
*/

/* Base media area for all category cards */
.grid.grid-3 > a.card .media {
  height: clamp(180px, 26vw, 260px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  border-bottom: 1px solid var(--muted-2);
}

/* Fine‑tune each tile so the visible area is composed nicely */
.grid.grid-3 > a.card:nth-child(1) .media {           /* GAME KEYS */
  background-position: center 12%;
}

.grid.grid-3 > a.card:nth-child(2) .media {           /* ITEMS & CURRENCY */
  background-position: center 10%;
}

/* ACCOUNTS – show more of the bottom where the word lives */
.grid.grid-3 > a.card:nth-child(3) .media {
  background-position: center bottom;
}

/* Small screens: slightly reduce the height to keep cards balanced */
@media (max-width: 640px) {
  .grid.grid-3 > a.card .media { height: clamp(160px, 35vw, 210px); }
}

/* ====== Hover: subtle grow of the whole category card ====== */

@media (hover:hover){

  .grid.grid-3 > a.card{

    transform: translateZ(0) scale(1);

    transition: transform .20s cubic-bezier(.22,.61,.36,1), box-shadow .20s ease;

    will-change: transform;

  }

  .grid.grid-3 > a.card:hover{

    transform: translateY(-6px) scale(1.03);

    box-shadow: 0 16px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05) inset;

    z-index: 5; /* żeby kafelek był nad sąsiadami */

  }

}

/* Szacunek dla preferencji dostępności */

@media (prefers-reduced-motion: reduce){

  .grid.grid-3 > a.card{ transition: none; }

}


/* === CTA hover lift (Shop Keys / Find a Coach / Get Bundle / Log in) === */

.btn{

  transform: translateY(0);

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;

  will-change: transform;

}

.btn:hover{

  transform: translateY(-2px);

  box-shadow: 0 8px 22px rgba(0,0,0,.25);

  filter: brightness(1.03);

}

.btn:active{

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(0,0,0,.2);

}

/* Ghost wariant – lekko mocniejsze obramowanie w hover */

.btn.ghost:hover{

  border-color: var(--a2);

}



/* Szacunek dla reduced motion */

@media (prefers-reduced-motion: reduce){

  .btn:hover,

  .btn:active{ transform:none; box-shadow:none; filter:none; }

}


/* === Lift + pink ring dla Light/Dark, Wishlist, Cart (header) === */

.nav .nav-actions .icon-btn,

.nav .nav-actions .theme-toggle{

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, background-color .18s ease;

  will-change: transform, box-shadow;

}



@media (hover:hover){

  .nav .nav-actions .icon-btn:hover,

  .nav .nav-actions .theme-toggle:hover{

    transform: translateY(-2px);

    border-color: #ec4899; /* różowa ramka */

    box-shadow: 0 0 0 2px rgba(236,72,153,.50), 0 8px 24px rgba(0,0,0,.35);

  }

}



.nav .nav-actions .icon-btn:focus-visible,

.nav .nav-actions .theme-toggle:focus-visible{

  outline: none;

  transform: translateY(-2px);

  border-color: #ec4899;

  box-shadow: 0 0 0 2px rgba(236,72,153,.65), 0 8px 24px rgba(0,0,0,.35);

}



.nav .nav-actions .icon-btn:active,

.nav .nav-actions .theme-toggle:active{

  transform: translateY(-1px);

  box-shadow: 0 0 0 2px rgba(236,72,153,.45), 0 4px 14px rgba(0,0,0,.40);

}


/* === More dropdown: nie znikaj przy przejeździe myszką na panel === */

@media (hover:hover){

  /* mostek hover nad panelem (wysokość = przerwa miedzy linkiem a panelem) */

  #moreMenu::before{

    content:"";

    position:absolute;

    left:0; right:0;

    top:-10px;          /* jeśli masz inną przerwę niż ~8px, dostosuj */

    height:10px;

  }

  /* panel ma być widoczny gdy hover jest na linku LUB na panelu */

  #moreToggle:hover + #moreMenu,

  #moreMenu:hover,

  #moreToggle:focus + #moreMenu{

    display:block !important;

  }

}


/* --- FuzzyText fix dla pozycji CHEATS/LICENCE w menu More --- */

/* Trzymamy fallback widoczny, a canvas kładziemy nad nim (brak "znikania"). */

#moreMenu .fuzzy-link{ position:relative; display:inline-flex; align-items:center; }

#moreMenu .fuzzy-link .fuzzy-fallback{ visibility:visible !important; }   /* <- nie ukrywamy już tekstu */

#moreMenu .fuzzy-link canvas.fuzzy-canvas{

  position:absolute; left:0; top:50%; transform:translateY(-50%);

  pointer-events:none; display:none; z-index:1;

}

#moreMenu .fuzzy-link.fuzzy-active canvas.fuzzy-canvas{ display:block; }  /* efekt nakładany nad fallback */