/* ========= Brand tokens ========= */
:root{
  --brand:#1e40af;         /* deep blue */
  --brand-2:#3f87a6;       /* teal-blue */
  --accent:#ffd500;        /* bright yellow */
  --ink:#0f172a;
  --muted:#6b7280;
  --card:#ffffff;
  --bg:#f7f9fc;
}

@media (prefers-color-scheme: dark){
  :root{
    --card:#171a20;
    --bg:#0f1116;
    --ink:#e5e7eb;
    --muted:#9aa4b2;
  }
}

/* Page wrapper */
.games-wrap{
  background: var(--bg);
  padding: clamp(12px, 2vw, 24px);
}

/* ========= Hero / strap ========= */
.games-hero{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: clamp(28px, 6vw, 56px) clamp(20px, 4vw, 40px);
  color: #fff;
  background:
    radial-gradient(90% 140% at -10% -20%, rgba(255,213,0,.28), transparent 55%),
    radial-gradient(120% 120% at 120% 10%, rgba(63,135,166,.25), transparent 55%),
    linear-gradient(135deg, var(--brand), #0f2a86 65%);
  box-shadow: 0 16px 40px rgba(30,64,175,.25);
  margin: 0 auto clamp(16px, 3vw, 28px);
  max-width: 1200px;
}

.games-hero::after{
  /* subtle animated pattern */
  content:"";
  position:absolute; inset:-30%;
  background:
    conic-gradient(from 180deg at 50% 50%, rgba(255,255,255,.08), transparent 40%, rgba(255,255,255,.08) 60%, transparent 100%);
  filter: blur(60px);
  animation: slow-rotate 22s linear infinite;
  opacity: .5;
  pointer-events:none;
}

@keyframes slow-rotate { to { transform: rotate(360deg);} }

.hero-inner{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}

.hero-title{
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin: 0 0 .4rem;
  letter-spacing:.3px;
}

.hero-sub{
  margin: 0;
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  color: #e6efff;
}

.chip{
  display:inline-block;
  padding:.35rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color:#fff;
  text-decoration:none;
  margin-left:.45rem;
  border:1px solid rgba(255,255,255,.28);
  transition: transform .15s ease, background-color .2s ease;
}
.chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.22); }
.chip-clear{ background: rgba(255,213,0,.18); border-color: rgba(255,213,0,.45); }

/* ========= Grid ========= */
.games-section{
  max-width: 1200px;
  margin: 0 auto;
}

.game-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px, 2.2vw, 24px);
  margin-top: clamp(12px, 2vw, 20px);
}

/* ========= Card ========= */
.game-card{
  position: relative;
  display:flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, rgba(30,64,175,.6), rgba(255,213,0,.7)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .25s ease;
  will-change: transform;
  isolation: isolate;
}

html.dark-mode .game-card{
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, rgba(63,135,166,.7), rgba(255,213,0,.5)) border-box;
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
}

.game-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(30,64,175,.22);
}

.sheen{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  mix-blend-mode: screen;
  pointer-events: none;
}
.game-card:hover .sheen{ transform: translateX(120%); }

.thumb-wrap{
  position:relative;
  aspect-ratio: 16/9;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(30,64,175,.08), rgba(30,64,175,.02));
}

.game-thumb{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
}
.game-card:hover .game-thumb{ transform: scale(1.06); filter: saturate(1.05) contrast(1.02); }

/* Content */
.game-info{
  padding: 0.9rem 1rem 1rem;
  display:flex; flex-direction:column; gap:.4rem;
}

.game-title{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink);
}

.game-description{
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
}

/* Category badges */
.cats{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin:.4rem 0 0; padding:0; list-style:none;
}

.cat-badge{
  font-size:.78rem;
  padding:.25rem .55rem;
  border-radius:999px;
  background: color-mix(in oklab, var(--brand-2) 18%, transparent);
  color: color-mix(in oklab, var(--brand-2) 85%, #fff);
  border:1px solid color-mix(in oklab, var(--brand-2) 45%, transparent);
}

html.dark-mode .cat-badge{
  background: color-mix(in oklab, var(--brand-2) 26%, transparent);
  color:#e6f3ff;
  border-color: color-mix(in oklab, var(--brand-2) 55%, transparent);
}

/* CTA chip on card */
.game-card .cta{
  position:absolute;
  top:.75rem; right:.75rem;
  padding:.35rem .6rem;
  font-size:.8rem;
  background: var(--accent);
  color:#111;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(255,213,0,.35);
  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease;
}
.game-card:hover .cta{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255,213,0,.45);
}

.empty-state{
  text-align:center;
  color: var(--muted);
  padding: 2rem 0;
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  .game-card, .game-thumb, .sheen, .cta { transition: none !important; }
  .games-hero::after{ animation: none !important; }
}

/* Dark mode polish (works with your global dark mode toggles) */
html.dark-mode .games-hero{
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
html.dark-mode .game-title{ color:#e9eefb; }
html.dark-mode .game-description{ color:#b8c3d3; }


/* ===== Filter chips row ===== */
.chip-filter{
  max-width: 1200px;
  margin: clamp(10px, 2vw, 16px) auto 0;
  padding-inline: clamp(8px, 2vw, 14px);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}

.chip-pill{
  background: rgba(255,255,255,.85);
  color: #0f172a;
  border: 1px solid rgba(30,64,175,.20);
  border-radius: 999px;
  padding: .45rem .8rem;
  line-height: 1;
  font-size: .92rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease;
}

.chip-pill:hover{
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(30,64,175,.10);
}

.chip-pill.active{
  background: var(--accent);
  color: #111;
  border-color: #e1b800;
  box-shadow: 0 10px 22px rgba(255,213,0,.28);
}

.chip-pill .emoji{
  font-size: 1rem;
  line-height: 1;
}

/* Dark mode variants */
html.dark-mode .chip-pill{
  background: rgba(255,255,255,.10);
  color: #e6efff;
  border-color: rgba(255,255,255,.18);
}

html.dark-mode .chip-pill:hover{
  background: rgba(255,255,255,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

html.dark-mode .chip-pill.active{
  background: color-mix(in oklab, var(--brand) 35%, #ffd500 22%);
  color: #fff;
  border-color: rgba(255,213,0,.55);
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
}

/* ===== Global overrides for manual dark mode ===== */
html.dark-mode {
  --card:#171a20;
  --bg:#0f1116;
  --ink:#e5e7eb;
  --muted:#9aa4b2;
}

/* Wrapper */
html.dark-mode .games-wrap{
  background: var(--bg) !important;
}

/* Hero banner */
html.dark-mode .games-hero{
  color:#f5f7ff !important;
  background:
    radial-gradient(90% 140% at -10% -20%, rgba(255,213,0,.20), transparent 55%),
    radial-gradient(120% 120% at 120% 10%, rgba(63,135,166,.20), transparent 55%),
    linear-gradient(135deg, #122155, #0b1635 70%) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
}
html.dark-mode .hero-sub{ color:#b8c3d3 !important; }

/* Game cards */
html.dark-mode .game-card{
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, rgba(63,135,166,.5), rgba(255,213,0,.35)) border-box !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.45) !important;
}
html.dark-mode .game-title{ color:#e9eefb !important; }
html.dark-mode .game-description{ color:#a8b3c3 !important; }

/* Empty state */
html.dark-mode .empty-state{ color:#9aa4b2 !important; }

/* Filter chips */
html.dark-mode .chip-pill{
  background: rgba(255,255,255,.08) !important;
  color:#e6efff !important;
  border-color: rgba(255,255,255,.15) !important;
}
html.dark-mode .chip-pill:hover{
  background: rgba(255,255,255,.16) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35) !important;
}
html.dark-mode .chip-pill.active{
  background: color-mix(in oklab, var(--brand) 35%, #ffd500 22%) !important;
  color:#fff !important;
  border-color: rgba(255,213,0,.55) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.5) !important;
}