/* ============================================================
   Home "Games we support" — 3D flip-card carousel.
   Kept in its own file so it doesn't collide with styles.css.
   Card backs are theme-coloured CSS placeholders; to use a real
   card-back image, add e.g.
     .gc-back--optcg { background-image: url("images/back-optcg.webp"); }
   ============================================================ */
.games-section { text-align: center; overflow: hidden; }
.gc-title { font-family: var(--font-display); font-size: clamp(1.6rem,4vw,2.4rem); color: var(--text-primary); margin:.4rem 0 0; }
.gc-sub { color: var(--text-secondary); margin:.5rem 0 0; }

.gc-viewport { position:relative; display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:2.5rem; }
.gc-stage { position:relative; width:100%; max-width:520px; height:360px; perspective:1400px; }

.gc-card {
  position:absolute; top:50%; left:50%; width:224px; height:312px; margin:-156px 0 0 -112px;
  transform-style:preserve-3d; cursor:pointer; will-change:transform;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}
.gc-card.is-active { transform: translateX(0) rotateY(0) scale(1);        opacity:1;   z-index:3; }
.gc-card.is-left   { transform: translateX(-80%) rotateY(38deg) scale(.82); opacity:.55; z-index:2; }
.gc-card.is-right  { transform: translateX(80%)  rotateY(-38deg) scale(.82); opacity:.55; z-index:2; }
.gc-card:focus-visible { outline:none; }
.gc-card:focus-visible .gc-face { box-shadow:0 0 0 3px var(--accent), 0 18px 40px rgba(0,0,0,.28); }

.gc-card-inner { position:absolute; inset:0; transform-style:preserve-3d; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.gc-card.is-flipped .gc-card-inner { transform: rotateY(180deg); }

.gc-face {
  position:absolute; inset:0; border-radius:12px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  display:flex; align-items:center; justify-content:center;
}

/* ---- card BACK (game-themed placeholder) ---- */
.gc-back { color:#fff; border:6px solid rgba(255,255,255,.12); background-size:cover; background-position:center; }
.gc-back::before { content:""; position:absolute; inset:10px; border-radius:8px; border:2px solid rgba(255,255,255,.28); pointer-events:none; }
.gc-back-emblem { display:flex; flex-direction:column; align-items:center; gap:.7rem; z-index:1; padding:1rem; }
.gc-back-mark { width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.7rem; letter-spacing:.03em; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.55); }
.gc-back-name { font-family:var(--font-display); font-size:1.15rem; letter-spacing:.06em; text-transform:uppercase; }
.gc-back--optcg     { background:radial-gradient(circle at 50% 32%, #c33636, #7d1418 72%); }
.gc-back--pokemon   { background:radial-gradient(circle at 50% 32%, #3d74d6, #14356e 72%); }
.gc-back--cyberpunk { background:linear-gradient(150deg, #17173a, #08080f); }
.gc-back--cyberpunk .gc-back-mark { color:#33e6ff; border-color:#33e6ff; background:rgba(51,230,255,.08); box-shadow:0 0 18px rgba(51,230,255,.55); }
.gc-back--cyberpunk .gc-back-name { color:#ff4fd8; text-shadow:0 0 12px rgba(255,79,216,.6); }
.gc-pokeball { background:linear-gradient(#ee1c25 0 47%, #fff 53% 100%); border:3px solid #1a1a1a; position:relative; }
.gc-pokeball::after { content:""; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid #1a1a1a; }

/* ---- card FRONT (support matrix) ---- */
.gc-front { transform:rotateY(180deg); background:var(--bg-card); border:1px solid var(--border-accent); color:var(--text-primary); flex-direction:column; gap:1rem; padding:1.4rem; }
.gc-front-name { font-family:var(--font-display); font-size:1.15rem; margin:0; color:var(--text-primary); }
.gc-support { list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; gap:.6rem; }
.gc-support li { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.35rem .6rem; padding:.55rem .8rem; border-radius:8px; font-weight:700; background:var(--bg-card-hover); border:1px solid var(--border); }
.gc-tag { font-size:.68rem; font-weight:800; padding:.18rem .5rem; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.gc-yes .gc-tag { background:var(--accent); color:var(--on-accent); }
.gc-soon { opacity:.72; }
.gc-soon .gc-tag { background:var(--menu-hover); color:var(--menu-text); }

/* ---- arrows + hint ---- */
.gc-arrow { flex:0 0 auto; width:32px; height:32px; border:none; background:none; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--transition); z-index:5; }
.gc-arrow img { width:100%; height:100%; display:block; }
.gc-arrow:hover { transform:scale(1.1); }
.gc-hint { margin-top:1.5rem; color:var(--text-muted); font-size:.85rem; }

@media (max-width:560px){
  .gc-stage { height:330px; max-width:340px; }
  .gc-card { width:190px; height:266px; margin:-133px 0 0 -95px; }
  .gc-card.is-left,.gc-card.is-right { opacity:.32; }
  .gc-front-name { font-size:1rem; white-space:nowrap; }
}
@media (prefers-reduced-motion: reduce){ .gc-card,.gc-card-inner { transition-duration:.01ms; } }

/* ---- real card-back images (drop-in; ../ because this file is in css/) ----
   Pokémon: official back sourced from web. Add One Piece / Cyberpunk the same
   way once their images land in images/ (e.g. back-optcg.webp, back-cyberpunk.webp):
     .gc-back--optcg     { background-image:url("../images/back-optcg.webp"); ... }
     .gc-back--cyberpunk { background-image:url("../images/back-cyberpunk.webp"); ... } */
.gc-back--pokemon { background-image:url("../images/back-pokemon.jpg"); background-size:cover; border-width:0; }
.gc-back--pokemon::before, .gc-back--pokemon .gc-back-emblem { display:none; }
.gc-back--optcg { background-image:url("../images/back-optcg.webp"); background-size:cover; background-position:center; border-width:0; }
.gc-back--optcg::before, .gc-back--optcg .gc-back-emblem { display:none; }
.gc-back--cyberpunk { background-image:url("../images/back-cyberpunk.webp"); background-size:cover; background-position:center; border-width:0; }
.gc-back--cyberpunk::before, .gc-back--cyberpunk .gc-back-emblem { display:none; }
/* space between the carousel and the hero Build buttons */
.gc-viewport { margin-bottom: 2.5rem; }