/* ============================================================
   PLAYDEX — Portal-style game cards
   4:3 aspect ratio, subject-forward, bright, tag chips
   ============================================================ */

/* ============ CARD ============ */
.gc {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--au-r-md);
  cursor: pointer;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.gc:hover { transform: translateY(-4px); }

.gc-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--au-r-md);
  overflow: hidden;
  background: var(--au-surface);
  isolation: isolate;
  transition: box-shadow .3s, transform .3s;
  box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.7);
}
.gc:hover .gc-thumb {
  box-shadow: 0 20px 40px -12px rgba(168, 85, 247, 0.55), 0 0 0 2px var(--au-lime), 0 0 24px rgba(192, 255, 62, 0.35);
}

.gc-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 6% 6% 22% 6%;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.gc:hover .gc-art { transform: scale(1.08); }
.gc-art svg { max-width: 100%; max-height: 100%; }

/* Title bar at bottom (in the thumb) */
.gc-title-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 10px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85) 60%);
  color: white;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.gc-title-bar .name {
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.gc-title-bar .cat {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* Hover overlay: dark scrim + circular PLAY */
.gc-play {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  background: rgba(6,7,10,0.55);
  opacity: 0;
  transition: opacity .2s;
  border-radius: var(--au-r-md);
}
.gc:hover .gc-play { opacity: 1; }
.gc-play-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--au-lime), #96D420);
  color: #0A1400;
  display: grid; place-items: center;
  box-shadow: 0 0 32px rgba(192, 255, 62, 0.75), 0 8px 20px -4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
  transform: scale(0.7);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.gc:hover .gc-play-btn { transform: scale(1); }
.gc-play-btn svg { width: 22px; height: 22px; margin-left: 3px; }

/* Badge (top-left) */
.gc-badge-slot {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 4;
}

/* Favorite heart (top-right) */
.gc-fav {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 5;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(10, 12, 18, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity .2s, color .18s, transform .18s;
}
.gc:hover .gc-fav { opacity: 1; }
.gc-fav:hover { color: var(--au-loss); transform: scale(1.1); }
.gc-fav.active { color: var(--au-loss); opacity: 1; }
.gc-fav svg { width: 14px; height: 14px; }

/* Tag chips row (below card) */
.gc-tags {
  display: flex;
  gap: 4px;
  padding: 8px 4px 0;
  flex-wrap: wrap;
}
.gc-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  height: 20px;
  border-radius: var(--au-r-pill);
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.25);
  color: var(--au-violet-hi);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.gc-tag.lime {
  background: rgba(192, 255, 62, 0.08);
  border-color: rgba(192, 255, 62, 0.25);
  color: var(--au-lime);
}
.gc-tag.gold {
  background: rgba(255, 201, 74, 0.08);
  border-color: rgba(255, 201, 74, 0.3);
  color: var(--au-gold);
}
.gc-tag .players-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--au-lime);
  box-shadow: 0 0 5px var(--au-lime);
}

/* ============ THUMBNAIL BACKGROUNDS ============ */
/* Bright, subject-forward portal-style backgrounds */

.gt-slot-fortune {
  background:
    radial-gradient(circle at 50% 45%, #FF3B9C 0%, #A0225C 45%, #4B0F2E 100%);
}
.gt-slot-777 {
  background:
    radial-gradient(circle at 50% 45%, #6A3FD1 0%, #382584 55%, #150A38 100%);
}
.gt-slot-mega {
  background:
    radial-gradient(circle at 50% 45%, #6D3AB8 0%, #3A1E70 50%, #180838 100%);
}
.gt-slot-aztec {
  background: radial-gradient(circle at 50% 45%, #E89A2F 0%, #7A4A0A 55%, #2E1A08 100%);
}
.gt-slot-nova {
  background: radial-gradient(circle at 50% 45%, #22B4E1 0%, #084A5C 55%, #041F30 100%);
}
.gt-slot-wild {
  background: radial-gradient(circle at 50% 45%, #E85D2F 0%, #7A2A0A 55%, #2E1408 100%);
}
.gt-slot-galaxy {
  background: radial-gradient(circle at 50% 45%, #6A3FD1 0%, #2E1E7A 50%, #10083D 100%);
}
.gt-slot-neon {
  background: radial-gradient(circle at 50% 45%, #E040FB 0%, #6A1D8B 50%, #2E0D3D 100%);
}

.gt-crash-rocket   { background: linear-gradient(160deg, #22E1FF 0%, #084A7A 60%, #041F30 100%); }
.gt-crash-quantum  { background: linear-gradient(200deg, #34D399 0%, #085A4B 55%, #041F1F 100%); }
.gt-crash-nova     { background: linear-gradient(160deg, #E040FB 0%, #4A1E70 55%, #180838 100%); }

.gt-roulette-neon  { background: radial-gradient(circle at 50% 50%, #E040FB 0%, #6A1D8B 50%, #2E0D3D 100%); }
.gt-roulette-lux   { background: radial-gradient(circle at 50% 50%, #6D3AB8 0%, #3A2570 55%, #180838 100%); }
.gt-roulette-orbit { background: radial-gradient(circle at 50% 50%, #22B4E1 0%, #084A7A 55%, #041F30 100%); }

.gt-blackjack-royal { background: radial-gradient(ellipse at 50% 55%, #34D399 0%, #085A4B 60%, #041F1F 100%); }
.gt-blackjack-vip   { background: radial-gradient(ellipse at 50% 55%, #6D3AB8 0%, #382584 55%, #150A38 100%); }

.gt-baccarat { background: radial-gradient(ellipse at 50% 55%, #E85D2F 0%, #7A2A0A 55%, #2E1408 100%); }

.gt-poker-royale  { background: radial-gradient(ellipse at 50% 55%, #34D399 0%, #085A4B 60%, #041F1F 100%); }
.gt-poker-stellar { background: radial-gradient(ellipse at 50% 55%, #22B4E1 0%, #084A7A 55%, #041F30 100%); }

.gt-dice-cosmic   { background: radial-gradient(circle at 30% 30%, #6D3AB8 0%, transparent 55%), radial-gradient(circle at 70% 70%, #22B4E1 0%, transparent 55%), #150A38; }
.gt-dice-infinity { background: radial-gradient(circle at 50% 50%, #E040FB 0%, #4A1E70 55%, #180838 100%); }

.gt-plinko-gold { background: linear-gradient(180deg, #E040FB 0%, #4A1E70 60%, #150A38 100%); }
.gt-plinko-max  { background: linear-gradient(180deg, #22B4E1 0%, #1E4A7A 60%, #041F30 100%); }

.gt-wheel-lucky { background: radial-gradient(circle at 50% 55%, #6D3AB8 0%, #382584 60%, #150A38 100%); }
.gt-wheel-mega  { background: radial-gradient(circle at 50% 55%, #E040FB 0%, #6A1D8B 60%, #2E0D3D 100%); }

.gt-jackpot-diamond { background: radial-gradient(circle at 50% 50%, #22B4E1 0%, #084A7A 55%, #041F30 100%); }
.gt-jackpot-city    { background: radial-gradient(circle at 50% 50%, #FFC94A 0%, #B8830F 45%, #4A2E08 100%); }

.gt-treasure { background: linear-gradient(180deg, #E89A2F 0%, #7A4A0A 55%, #2E1A08 100%); }
.gt-arcade   { background: radial-gradient(circle at 50% 50%, #E040FB 0%, #6A1D8B 60%, #2E0D3D 100%); }

/* Live dealer scenes */
.gt-live-roulette  { background: radial-gradient(ellipse at 50% 100%, rgba(224,64,251,0.5), transparent 65%), linear-gradient(180deg, #2E0D3D 0%, #10131C 100%); }
.gt-live-blackjack { background: radial-gradient(ellipse at 50% 100%, rgba(52,211,153,0.55), transparent 65%), linear-gradient(180deg, #085A4B 0%, #10131C 100%); }
.gt-live-baccarat  { background: radial-gradient(ellipse at 50% 100%, rgba(232,154,47,0.4), transparent 65%), linear-gradient(180deg, #2E1A08 0%, #10131C 100%); }
.gt-live-show      { background: radial-gradient(ellipse at 50% 100%, rgba(224,64,251,0.55), transparent 65%), linear-gradient(180deg, #4A1E70 0%, #10131C 100%); }

/* ============================================================
   PORTAL GRID (dense, 7-8 cols on desktop)
   ============================================================ */
.au-games-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}
@media (max-width: 1560px) { .au-games-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 1300px) { .au-games-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1080px) { .au-games-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .au-games-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .au-games-grid { grid-template-columns: repeat(2, 1fr); } }

/* Rail card widths */
.au-rail-card { width: 200px; }
.au-rail-card-lg { width: 260px; }
@media (max-width: 720px) {
  .au-rail-card { width: 156px; }
  .au-rail-card-lg { width: 200px; }
}