/* Games page — builds on your base theme (styles.css) */

/* HERO */
.games-hero{
  position:relative; overflow:hidden;
  padding:64px 0 28px;
  border-bottom:1px solid var(--outline);
}
.games-hero .hero-inner{ position:relative; z-index:1 }
.games-hero .chip{ background:var(--chip-bg) }
.games-hero .subtitle{ margin-top:6px }

.hero-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none }
.orb{ position:absolute; width:380px; height:380px; border-radius:999px; filter:blur(32px); opacity:.55;
      background: radial-gradient(closest-side, var(--brand), transparent 70%) }
.orb.o1{ left:-100px; top:-60px; animation:float 12s ease-in-out infinite }
.orb.o2{ right:-120px; top:20%; animation:float 14s ease-in-out infinite reverse }
.orb.o3{ left:40%; bottom:-120px; animation:float 18s ease-in-out infinite }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

/* Filters */
.filters{ display:grid; gap:14px; margin-top:22px; color:var(--text); }
.search-wrap{ position:relative; max-width:520px }
.search-wrap input{
  width:100%; background:var(--input-bg); border:1px solid var(--input-border); color:var(--text);
  padding:12px 40px 12px 14px; border-radius:12px; outline:none;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease)
}
.search-wrap input::placeholder{ color:#ffffff; opacity:.6 }
.search-wrap input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--focus-ring); background:var(--brand-glass) }
.search-wrap .icon{ position:absolute; right:12px; top:50%; transform:translateY(-50%); opacity:.85; color:var(--text); }

.filters-group{ display:grid; gap:8px; }
.filter-label{
  font-weight:800; letter-spacing:.02em; color:var(--text);
  opacity:.95; user-select:none;
}

.chip-row{ display:flex; flex-wrap:wrap; gap:10px }
.tag-chip{
  color:var(--text); /* always white text */
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:700;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease)
}
.tag-chip:hover{ transform:translateY(-1px) }
.tag-chip.is-active{
  background:linear-gradient(180deg,var(--brand),var(--accent));
  border-color:transparent;
  color:#fff; /* active is still white */
}

/* Featured rail */
.featured{ margin:28px auto 10px }
.rail{ position:relative; overflow:auto; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px, 360px); gap:16px; scroll-snap-type:x mandatory; padding-bottom:8px }
.feature-card{
  scroll-snap-align:center; background:var(--card-gradient);
  border:1px solid var(--outline); border-radius:16px; overflow:hidden;
  transform-origin:50% 80%; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .35s var(--ease)
}
.feature-card:hover{ transform:translateY(-4px) rotateX(2deg); border-color:var(--brand-soft-x); box-shadow:0 24px 60px rgba(0,0,0,.5) }
.feature-media{ position:relative; height:180px; overflow:hidden }
.feature-media img, .feature-media video{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.06); transition:transform .6s var(--ease) }
.feature-card:hover .feature-media img{ transform:scale(1.1) }
.feature-body{ padding:14px 14px 16px }
.feature-body .badge{ display:inline-block; padding:6px 10px; border-radius:999px; background:var(--chip-bg); border:1px solid var(--chip-border); font-weight:700; margin-bottom:8px }
.feature-body h3{ margin:6px 0 6px }
.feature-body p{ margin:0 0 8px; opacity:.9 }
.rail-actions{ display:flex; gap:8px }
.rail-actions .btn.ghost{ padding:8px 10px }

/* Grid */
.games-grid{ margin:28px auto 60px }
.grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px }
@media (max-width: 1100px){ .grid{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width: 700px){ .grid{ grid-template-columns:1fr } }

.game-card{
  position:relative; border:1px solid var(--outline); border-radius:16px; overflow:hidden;
  background:var(--card-gradient); box-shadow: var(--surface-elev);
  transform:translateY(10px) scale(.98); opacity:0;
  transition:transform .7s var(--ease), opacity .7s var(--ease), border-color .35s var(--ease)
}
.game-card.revealed{ transform:none; opacity:1 }
.game-card.hide{ pointer-events:none; opacity:.0; transform:translateY(8px) scale(.98) }

.cover{ position:relative; height:220px; overflow:hidden }
.cover img, .cover video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06) }
.cover .hover-video{ opacity:0; transition:opacity .25s var(--ease) }
.game-card:hover .hover-video{ opacity:1 }

.cover .shine{ position:absolute; inset:0; background:radial-gradient(600px 180px at 20% -20%, var(--brand-sheen), transparent 60%); mix-blend-mode:screen; pointer-events:none }
.cover .badge{ position:absolute; left:12px; top:12px; padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.5); border:1px solid var(--outline); font-weight:700 }

.info{ padding:14px 14px 16px }
.title{ margin:4px 0 6px }
.desc{ margin:0 0 10px; opacity:.9 }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px }
.tag{ padding:6px 10px; border-radius:999px; background:var(--chip-bg); border:1px solid var(--chip-border); font-weight:700 }

.game-card:hover{ border-color:var(--brand-soft-x) }

/* Tilt effect hint */
.game-card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--brand), var(--accent), transparent);
  opacity:.0; transition:opacity .25s var(--ease)
}
.game-card:hover::after{ opacity:.9 }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .feature-card,.game-card,.feature-media img{ transition:none !important }
  .orb{ animation:none !important }
}

/* Collapse filtered-out cards so the grid reflows cleanly */
.game-card.hide{ display:none !important; }

@media (max-width: 600px){
  .games-hero{padding:48px 0 22px;}
  .filters{gap:12px;}
  .search-wrap{max-width:none;}
  .filters-group{gap:6px;}
  .chip-row{gap:8px;}
  .featured{margin:24px auto 8px;}
  .rail{grid-auto-columns:minmax(240px, 80%);padding-bottom:4px;}
  .feature-media{height:160px;}
  .feature-body{padding:12px 12px 14px;}
}

@media (max-width: 480px){
  .rail{grid-auto-columns:minmax(220px, 88%);}
  .feature-media{height:150px;}
  .filters{gap:10px;}
  .tag-chip{padding:7px 10px;}
}