/* ══════════════════════════════════════════════════════════════════════
   Crimson Shop · Neon 3D Coverflow (categorias)
   Carrossel 3D estilo coverflow com borda holográfica animada.
   Declarar as variáveis do tema neon aqui para não depender da ordem
   de carregamento do neon-base.css.
   ══════════════════════════════════════════════════════════════════════ */

/* A paleta vem do neon-base.css (fonte única). Aqui só o easing. */
:root{
  --ease-neon:cubic-bezier(.22,1,.36,1);
}

/* ── Container ───────────────────────────────────────────────────────── */
.neon-carousel{
  position:relative;
  display:block;
  box-sizing:border-box;
  margin:0 auto;
  padding:6px 0 4px;
  perspective:1400px;
  perspective-origin:50% 46%;
  --neon-slide-w:248px;
  --neon-slide-h:252px;
  --neon-accent:var(--neon-purple);
}
.neon-carousel *,.neon-carousel *::before,.neon-carousel *::after{box-sizing:border-box}
.neon-carousel.is-empty{display:none}
.neon-carousel.is-ready{display:block}
/* Blindagem: qualquer conteúdo extra injetado no container (ex.: a grade
   antiga re-renderizada pelo app.js) fica escondido sem quebrar o layout */
.neon-carousel.is-ready > :not(.neon-carousel-viewport):not(.neon-carousel-arrow):not(.neon-carousel-hint){display:none}

/* ── Viewport / Track ────────────────────────────────────────────────── */
.neon-carousel-viewport{
  position:relative;
  overflow:hidden;
  overflow:clip;
  transform-style:preserve-3d;
  padding:40px 10px 32px;
  touch-action:pan-y;
}
.neon-carousel-track{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  height:calc(var(--neon-slide-h) + 72px);
  /* Sem preserve-3d: com ele, os slides laterais (translateZ negativo) ficam
     ATRÁS do plano do track e o track intercepta o clique — eles viravam
     impossíveis de clicar. O perspectiva já aplica o efeito de profundidade
     em cada slide, e o z-index continua controlando a sobreposição. */
  transform-style:flat;
  perspective:1400px;
  perspective-origin:50% 50%;
  transition:transform .45s var(--ease-neon);
}

/* ── Slide (card) ────────────────────────────────────────────────────── */
.neon-slide{
  position:relative;
  display:block;
  width:var(--neon-slide-w);
  padding:0;
  border:2px solid var(--neon-line);
  border-radius:18px;
  background:var(--neon-surface);
  color:var(--ink,#f3f4fa);
  font:inherit;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  opacity:1;
  transform-origin:center center;
  backface-visibility:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:transform .55s var(--ease-neon),opacity .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.neon-slide:focus-visible{
  outline:2px solid var(--neon-cyan);
  outline-offset:3px;
}
.neon-slide-media{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:4/3;
  overflow:hidden;
  background:radial-gradient(130% 130% at 50% 0%,color-mix(in srgb,var(--cat-color,var(--neon-purple)) 24%,var(--neon-surface)),var(--neon-surface));
}
.neon-slide-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease-neon);
}
.neon-slide-fallback{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:var(--cat-color,var(--neon-purple));
  font-size:26px;
  font-weight:700;
  letter-spacing:.04em;
}
.neon-slide-fallback .game-icon-frame{width:100%;height:100%}
.neon-slide-fallback .game-icon{width:40px;height:40px;stroke:currentColor}
.neon-slide-count{
  position:absolute;
  left:10px;
  top:10px;
  z-index:2;
  padding:3px 9px;
  border-radius:999px;
  background:var(--cat-color,var(--neon-purple));
  box-shadow:0 0 16px color-mix(in srgb,var(--cat-color,var(--neon-purple)) 65%,transparent);
  color:var(--neon-base);
  font-size:9px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.03em;
}
.neon-slide-copy{
  display:grid;
  gap:3px;
  padding:11px 12px 13px;
}
.neon-slide-copy strong{
  font-size:13px;
  font-weight:650;
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
  color:var(--ink,#f3f4fa);
}
.neon-slide-copy span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--muted,#8a8ea6);
  font-size:9px;
  letter-spacing:.02em;
}

/* ── Posições (coverflow 3D) ─────────────────────────────────────────── */
.neon-carousel.is-ready .neon-slide{
  position:absolute;
  top:50%;
  left:50%;
}
.neon-slide.is-active{
  z-index:6;
  opacity:1;
  transform:translate(-50%,-50%) translateX(0) scale(1.12) translateZ(46px);
  border-color:transparent;
  background-image:linear-gradient(var(--neon-surface),var(--neon-surface)),var(--holo-gradient);
  background-origin:border-box;
  background-clip:padding-box,border-box;
  background-size:100% 100%,300% 300%;
  box-shadow:0 0 30px rgba(168,85,247,.45),0 0 70px rgba(168,85,247,.22),0 26px 54px rgba(0,0,0,.6);
  box-shadow:0 0 30px color-mix(in srgb,var(--cat-color,var(--neon-purple)) 50%,transparent),0 0 74px color-mix(in srgb,var(--cat-color,var(--neon-purple)) 24%,transparent),0 26px 54px rgba(0,0,0,.6);
  animation:neon-holo 7s linear infinite;
}
.neon-slide.is-left{
  z-index:4;
  opacity:.45;
  transform:translate(-50%,-50%) translateX(-56%) scale(.78) rotateY(18deg) translateZ(-130px);
  box-shadow:0 16px 36px rgba(0,0,0,.5);
}
.neon-slide.is-right{
  z-index:4;
  opacity:.45;
  transform:translate(-50%,-50%) translateX(56%) scale(.78) rotateY(-18deg) translateZ(-130px);
  box-shadow:0 16px 36px rgba(0,0,0,.5);
}
.neon-slide.is-far{
  z-index:1;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-50%) translateX(96%) scale(.62) rotateY(-18deg) translateZ(-280px);
}
.neon-slide.is-far-left{transform:translate(-50%,-50%) translateX(-96%) scale(.62) rotateY(18deg) translateZ(-280px)}
.neon-slide:hover:not(.is-active){opacity:.7}

@keyframes neon-holo{
  0%{background-position:0 0,0% 50%}
  50%{background-position:0 0,100% 50%}
  100%{background-position:0 0,0% 50%}
}

/* ── Setas de navegação ──────────────────────────────────────────────── */
.neon-carousel-arrow{
  position:absolute;
  top:50%;
  z-index:20;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid color-mix(in srgb,var(--neon-accent,var(--neon-cyan)) 42%,var(--neon-line));
  border-radius:50%;
  background:color-mix(in srgb,var(--neon-base) 82%,transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--neon-accent,var(--neon-cyan));
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transform:translateY(-50%);
  box-shadow:0 0 14px color-mix(in srgb,var(--neon-accent,var(--neon-cyan)) 22%,transparent);
  transition:box-shadow .3s ease,border-color .3s ease,color .3s ease,opacity .3s ease,transform .3s var(--ease-neon);
}
.neon-carousel-arrow.is-prev{left:6px}
.neon-carousel-arrow.is-next{right:6px}
.neon-carousel-arrow:hover{
  border-color:var(--neon-accent,var(--neon-cyan));
  color:#fff;
  box-shadow:0 0 28px color-mix(in srgb,var(--neon-accent,var(--neon-cyan)) 58%,transparent);
  transform:translateY(-50%) scale(1.06);
}
.neon-carousel-arrow:active{transform:translateY(-50%) scale(.95)}
.neon-carousel-arrow:focus-visible{
  outline:2px solid var(--neon-accent,var(--neon-cyan));
  outline-offset:3px;
}
.neon-carousel-arrow[disabled],.neon-carousel-arrow[aria-disabled="true"]{
  opacity:.3;
  pointer-events:none;
  box-shadow:none;
}

/* ── Dica de arraste ─────────────────────────────────────────────────── */
.neon-carousel-hint{
  position:absolute;
  left:50%;
  bottom:2px;
  z-index:12;
  margin:0;
  transform:translateX(-50%);
  color:var(--muted-2,#7a7e94);
  font-size:9px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.neon-carousel.is-touch .neon-carousel-hint{opacity:.7}

/* ── Fallback: sem JS os cards ficam numa linha horizontal com scroll ── */
.neon-carousel:not(.is-ready) .neon-carousel-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 2px 10px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.neon-carousel:not(.is-ready) .neon-carousel-track{
  height:auto;
  justify-content:flex-start;
  gap:10px;
  transform:none;
  perspective:none;
}
.neon-carousel:not(.is-ready) .neon-slide{
  position:relative;
  top:auto;
  left:auto;
  flex:0 0 min(232px,70vw);
  opacity:1;
  transform:none;
  visibility:visible;
  pointer-events:auto;
  scroll-snap-align:center;
}
.neon-carousel:not(.is-ready) .neon-carousel-arrow,.neon-carousel:not(.is-ready) .neon-carousel-hint{display:none}

/* ── Responsivo ──────────────────────────────────────────────────────── */
@media (max-width:720px){
  .neon-carousel{--neon-slide-w:min(196px,54vw);--neon-slide-h:214px}
  .neon-carousel-viewport{padding:30px 4px 26px}
  .neon-carousel-track{height:calc(var(--neon-slide-h) + 62px)}
  .neon-slide.is-left{transform:translate(-50%,-50%) translateX(-52%) scale(.74) rotateY(16deg) translateZ(-120px)}
  .neon-slide.is-right{transform:translate(-50%,-50%) translateX(52%) scale(.74) rotateY(-16deg) translateZ(-120px)}
  .neon-carousel-arrow{width:36px;height:36px;font-size:18px}
  .neon-carousel-arrow.is-prev{left:0}
  .neon-carousel-arrow.is-next{right:0}
  .neon-slide-copy{padding:9px 10px 11px}
  .neon-slide-copy strong{font-size:12px}
}
@media (max-width:420px){
  .neon-carousel{--neon-slide-w:min(178px,58vw);--neon-slide-h:196px}
  .neon-carousel-hint{font-size:8px;letter-spacing:.1em}
}
@media (hover:none){
  .neon-carousel .neon-carousel-hint{opacity:.7}
  .neon-slide:hover:not(.is-active){opacity:.45}
}

/* ── Acessibilidade: sem movimento 3D ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .neon-carousel .neon-slide,
  .neon-carousel .neon-carousel-track,
  .neon-carousel .neon-carousel-arrow,
  .neon-carousel .neon-slide-image{
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
  .neon-carousel .neon-slide.is-active{animation:none}
  .neon-carousel .neon-slide.is-left{transform:translate(-50%,-50%) translateX(-56%) scale(.78)}
  .neon-carousel .neon-slide.is-right{transform:translate(-50%,-50%) translateX(56%) scale(.78)}
}

/* Quando o carrossel coverflow está ativo, a grade linear antiga some
   (ela continua no DOM como fallback caso o JS falhe). */
.has-neon-carousel .category-grid{display:none}
.has-neon-carousel .neon-carousel{display:block}

/* Ícone do jogo dentro do slide: precisa ocupar o espaço do card.
   (o .game-icon-frame é relativo e o img/svg preenchem 100%) */
.neon-slide-fallback{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-height:120px;
  color:var(--cat-color, var(--neon-purple-bright));
}
.neon-slide-fallback .game-icon-frame{
  position:relative;
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
}
.neon-slide-fallback .game-icon{
  width:60px;
  height:60px;
  stroke-width:1.2;
  opacity:.92;
  filter:drop-shadow(0 0 12px currentColor);
}
.neon-slide-fallback .game-icon-file{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:6px;
  object-fit:contain;
}
.neon-slide-fallback .game-icon-file[hidden]{display:none}