/* ===== CyberLite Universe AV1N3 — SAFE PRETTY CARDS + CROSSWORD FIRST =====
   Recovery stylesheet based on the approved V5A reference-art carousel.
   Loaded after styles.css so it safely overrides legacy card/grid rules. */

.games-section{
  position:relative !important;
}

.games-section .section-heading{
  align-items:center !important;
  gap:16px !important;
  padding:0 8px 10px !important;
}
.games-section .section-heading h2{
  margin:0 !important;
  font-size:clamp(2.1rem,2.8vw,3rem) !important;
  line-height:1 !important;
  letter-spacing:-.035em !important;
}

.cyber-carousel-shell{
  position:relative !important;
  width:100% !important;
}

/* Flex is deliberate: it completely defeats the older six-column grid. */
.games-section .game-grid{
  --carousel-gap:18px;
  display:flex !important;
  grid-template-columns:none !important;
  grid-auto-flow:unset !important;
  grid-auto-columns:unset !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:var(--carousel-gap) !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:12px 58px 22px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  scroll-padding-inline:58px !important;
  overscroll-behavior-x:contain !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
}
.games-section .game-grid::-webkit-scrollbar{
  display:none !important;
}

.games-section .game-card,
.games-section a.game-card,
.games-section button.game-card{
  --card-glow:rgba(82,193,255,.34);
  position:relative !important;
  display:block !important;
  flex:0 0 calc((100% - 116px - (var(--carousel-gap) * 3)) / 4) !important;
  width:auto !important;
  min-width:250px !important;
  max-width:none !important;
  min-height:0 !important;
  aspect-ratio:230 / 212 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:16px !important;
  background:transparent !important;
  color:inherit !important;
  appearance:none !important;
  box-shadow:0 13px 32px rgba(0,0,0,.42) !important;
  cursor:pointer !important;
  scroll-snap-align:start !important;
  scroll-snap-stop:always !important;
  isolation:isolate !important;
  transform:translateZ(0) !important;
  transition:transform .18s ease,box-shadow .22s ease,filter .22s ease !important;
}

.games-section .crossword-card{--card-glow:rgba(255,190,70,.44);}
.games-section .gator-card{--card-glow:rgba(126,255,75,.38);}
.games-section .space-card{--card-glow:rgba(63,170,255,.42);}
.games-section .chess-card{--card-glow:rgba(190,92,255,.42);}
.games-section .pool-card{--card-glow:rgba(115,255,92,.38);}
.games-section .pinball-card{--card-glow:rgba(255,75,203,.40);}
.games-section .air-card{--card-glow:rgba(52,194,255,.42);}

.games-section .game-card:hover,
.games-section .game-card:focus-visible{
  transform:translateY(-7px) scale(1.012) !important;
  box-shadow:0 21px 46px rgba(0,0,0,.52),0 0 28px var(--card-glow) !important;
  filter:saturate(1.06) brightness(1.035) !important;
  outline:none !important;
}
.games-section .game-card:active{
  transform:translateY(-1px) scale(.987) !important;
  transition-duration:.06s !important;
}
.games-section .game-card:focus-visible::after{
  content:"" !important;
  position:absolute !important;
  inset:4px !important;
  z-index:4 !important;
  pointer-events:none !important;
  border:2px solid rgba(199,243,255,.98) !important;
  border-radius:12px !important;
  box-shadow:0 0 18px rgba(72,209,255,.86) !important;
}

/* The reference artwork fills the complete card — no blank bands. */
.games-section .game-art{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  border:0 !important;
  border-radius:inherit !important;
  background-position:center center !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
}

.games-section .crossword-card .game-art{background-image:url('cyberlite-crossword-carousel.png') !important;}
.games-section .gator-card .game-art{background-image:url('double-gator-carousel.png') !important;}
.games-section .space-card .game-art{background-image:url('deep-space-defender-carousel.png') !important;}
.games-section .chess-card .game-art{background-image:url('cyberlite-chess-carousel.png') !important;}
.games-section .pool-card .game-art{background-image:url('pool-masters-carousel.png') !important;}
.games-section .pinball-card .game-art{background-image:url('pinball-legends-carousel.png') !important;}
.games-section .air-card .game-art{background-image:url('air-hockey-arena-carousel.png') !important;}

/* Preserve the original words for screen readers without covering the art. */
.games-section .game-copy,
.games-section .status-pill,
.games-section .game-button{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.cyber-carousel-arrow{
  position:absolute !important;
  top:50% !important;
  z-index:20 !important;
  width:54px !important;
  height:54px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:1px solid rgba(152,211,255,.72) !important;
  border-radius:50% !important;
  background:linear-gradient(145deg,rgba(12,22,48,.96),rgba(4,8,23,.98)) !important;
  color:#fff !important;
  font:900 2.15rem/1 Arial,sans-serif !important;
  box-shadow:0 10px 28px rgba(0,0,0,.54),0 0 20px rgba(51,176,255,.22),inset 0 1px 0 rgba(255,255,255,.09) !important;
  cursor:pointer !important;
  transform:translateY(-50%) !important;
  transition:transform .14s ease,opacity .18s ease,box-shadow .18s ease,border-color .18s ease !important;
}
.cyber-carousel-arrow:hover:not(:disabled),
.cyber-carousel-arrow:focus-visible:not(:disabled){
  border-color:rgba(119,230,255,.98) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.58),0 0 27px rgba(63,193,255,.55) !important;
  transform:translateY(-50%) scale(1.08) !important;
  outline:none !important;
}
.cyber-carousel-arrow:active:not(:disabled){
  transform:translateY(-50%) scale(.94) !important;
}
.cyber-carousel-arrow:disabled{
  opacity:.25 !important;
  cursor:default !important;
}
.cyber-carousel-prev{left:4px !important;}
.cyber-carousel-next{right:4px !important;}

@media (max-width:1180px){
  .games-section .game-card,
  .games-section a.game-card,
  .games-section button.game-card{
    flex-basis:calc((100% - 116px - (var(--carousel-gap) * 2)) / 3) !important;
  }
}

@media (max-width:860px){
  .games-section .game-card,
  .games-section a.game-card,
  .games-section button.game-card{
    flex-basis:calc((100% - 104px - var(--carousel-gap)) / 2) !important;
    min-width:255px !important;
  }
  .games-section .game-grid{
    padding-inline:52px !important;
    scroll-padding-inline:52px !important;
  }
  .cyber-carousel-arrow{
    width:46px !important;
    height:46px !important;
    font-size:1.8rem !important;
  }
}

@media (max-width:590px){
  .games-section .section-heading{
    padding-inline:4px !important;
  }
  .games-section .section-heading h2{
    font-size:clamp(1.85rem,7vw,2.25rem) !important;
  }
  .games-section .game-grid{
    --carousel-gap:14px;
    padding:10px 38px 18px !important;
    scroll-padding-inline:38px !important;
  }
  .games-section .game-card,
  .games-section a.game-card,
  .games-section button.game-card{
    flex:0 0 calc(100% - 76px) !important;
    min-width:0 !important;
  }
  .cyber-carousel-arrow{
    width:38px !important;
    height:38px !important;
    font-size:1.5rem !important;
  }
  .cyber-carousel-prev{left:0 !important;}
  .cyber-carousel-next{right:0 !important;}
}


/* AV1N3: the catalog order is authoritative. Crossword is slot #1. */
.games-section .crossword-card{order:-100 !important;}
@media (max-width:590px){
  .games-section .crossword-card{display:block !important; visibility:visible !important;}
}

@media (prefers-reduced-motion:reduce){
  .games-section .game-card,
  .cyber-carousel-arrow{
    transition:none !important;
  }
}