/* ================================================================
   TRELLUS — style kart gier (gamecard)
   ================================================================ */
.gamecard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.25rem;
  width: 100%;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  overflow-x: hidden;
  /* padding musi być większy niż promień rozmycia box-shadow na hover
     (patrz .gamecard:hover) — inaczej overflow-y:auto obcina poświatę */
  padding: 2rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.gamecard-grid::-webkit-scrollbar        { width: 5px; }
.gamecard-grid::-webkit-scrollbar-track  { background: transparent; }
.gamecard-grid::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.14); border-radius: 4px; }

.gamecard {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  /* uwaga: BEZ overflow:hidden tutaj — element ma box-shadow na hover/focus
     i jest przesuwany transformem; overflow:hidden na tym samym elemencie
     obcina wtedy cień (znany błąd renderowania w Chromium). Zaokrąglenie
     rogów robią osobno .gamecard-cover (góra) i .gamecard-info (dół). */
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  text-decoration: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(0.22,1,0.36,1),
    transform 0.6s cubic-bezier(0.22,1,0.36,1),
    border-color 0.3s, box-shadow 0.3s;
  transition-delay: var(--gc-delay, 0s);
}

.panel.in-view .gamecard {
  opacity: 1;
  transform: translateY(0);
}

/* hover + focus (kombinacja z .panel.in-view, żeby wygrać ze specyficznością
   reguły odpowiedzialnej za wjazd karty i faktycznie unosić kartę) */
.gamecard:hover,
.panel.in-view .gamecard:hover,
.gamecard:focus-visible,
.panel.in-view .gamecard:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(61,244,255,0.35);
  /* cień BEZ przesunięcia (0 0 ...) — z offsetem cień sięga dalej w jedną
     stronę niż w drugą i łatwo o asymetryczne, "ucięte" obcinanie przez
     overflow rodzica */
  box-shadow: 0 0 28px rgba(61,244,255,0.22);
}

.gamecard:focus { outline: none; }
.gamecard:focus-visible,
.panel.in-view .gamecard:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(61,244,255,0.28), 0 0 28px rgba(61,244,255,0.22);
}

.gamecard:hover .gamecard-cover img { transform: scale(1.06); }

.gamecard-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, rgba(183,63,255,0.25), rgba(61,244,255,0.15));
  overflow: hidden;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.gamecard-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.gamecard-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(5,4,11,0.88) 100%);
  pointer-events: none;
}

.gamecard-cover--fallback img { opacity: 0; }
.gamecard-cover--fallback::before {
  content: '🎮';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  opacity: 0.45;
}

.gamecard-status {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.gamecard-status--live {
  background: rgba(255,45,80,0.85);
  color: #fff;
  box-shadow: 0 0 12px rgba(255,45,80,0.5);
}
.gamecard-status--planned {
  background: rgba(255,255,255,0.16);
  color: #fff;
}

.gamecard-info {
  padding: 0.85rem 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  overflow: hidden;
}

.gamecard-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text, #eef0ff);
  line-height: 1.3;
}

.gamecard-tag {
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(183,63,255,0.12);
  border: 1px solid rgba(183,63,255,0.25);
  color: var(--violet, #b73fff);
}

.gamecard-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: rgba(255,255,255,0.35);
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .gamecard-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    max-height: none;
    overflow-y: visible;
    gap: 0.9rem;
    padding: 0.5rem;
  }
}