/* Theme variables */
:root, :root[data-theme="dark"]{
  --bg:#0e0f13; --fg:#e9eef4; --muted:#aab4c0; --card:#161821; --card2:#1e2130;
  --brand:#00e6ff; --brand2:#7af0ff; --accent:#ffd166; --shadow: 0 10px 25px rgba(0,0,0,.3);
}
/* Light theme when toggled OR when system prefers light and no toggle set */
:root[data-theme="light"]{
  --bg:#f7f8fb; --fg:#0e1220; --muted:#5b6572; --card:#ffffff; --card2:#f1f3f7;
  --brand:#007a85; --brand2:#00b8c7; --accent:#a46300;
}

/* Optional: respect system preference on first load (before JS runs) */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f7f8fb; --fg:#0e1220; --muted:#5b6572; --card:#ffffff; --card2:#f1f3f7;
    --brand:#007a85; --brand2:#00b8c7; --accent:#a46300;
  }
}

html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
  background:var(--bg); color:var(--fg); transition: background .2s ease, color .2s ease;
}

/* ===== HEADER ===== */
.site-header{
  position:sticky; top:0; z-index:20; backdrop-filter:saturate(120%) blur(8px);
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem;
}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.2px}
.brand .title{font-size:1.1rem}
.brand .accent{color:var(--brand)}
.logo{border-radius:12px; box-shadow:var(--shadow)}

.controls{display:flex; gap:.6rem; align-items:center}
.search{
  appearance:none; background:var(--card2); color:var(--fg);
  border:1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  border-radius:12px; padding:.6rem .8rem; min-width:210px;
}
.btn{
  border:1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background:var(--card); color:var(--fg);
  padding:.6rem .9rem; border-radius:12px; cursor:pointer;
}
.btn.primary{
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#001217; border:none; font-weight:700;
}
.btn.ghost{background:transparent}

/* ===== HERO SECTION ===== */
.hero{
  padding:3rem 1rem 2rem; text-align:center;
  max-width:1000px; margin:0 auto;
}
.hero h1{
  font-size:clamp(1.8rem, 3.5vw, 3rem);
  margin:.2rem 0 .4rem;
}
.hero p{
  color:var(--muted); margin:.4rem auto 1rem; max-width:52ch;
}
.hero-actions{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}

/* ===== GRID ===== */
.grid{
  padding:1rem; margin:0 auto 3rem; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  max-width:1200px;
}

/* ===== GAME CARD ===== */
.card{
  background:linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}

/* === THUMBNAILS: 256×256, no stretch, badge fixed === */
:root { --thumb-size: 256px; }

.thumbwrap{
  position:relative;
  display:block;
  width:100%;
  max-width:var(--thumb-size);
  aspect-ratio:1 / 1;
  margin:0 auto;
  border-radius:12px;
  overflow:hidden;
  background:var(--card2);
}

.thumb{
  width:100%;
  height:100%;
  object-fit:contain;        /* show full logo without distortion */
  display:block;
  background:transparent;
}

/* badge sits inside the thumb, fully visible */
.badge{
  position:absolute;
  bottom:10px;
  right:10px;
  z-index:2;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#001217;
  padding:.35rem .55rem;
  border-radius:999px;
  font-weight:700;
  font-size:.8rem;
  border:1px solid color-mix(in srgb, black 10%, transparent);
}

/* Responsive thumbnails (smaller on phones) */
@media (max-width:700px){
  .thumbwrap{max-width:45vw;}
}

/* ===== CARD BODY ===== */
.card-body{padding:.9rem}
.card-title{margin:.1rem 0 .2rem; font-size:1.05rem}
.card-desc{margin:0; color:var(--muted); min-height:2.6em}
.card-meta{display:flex; gap:.4rem; margin-top:.7rem; flex-wrap:wrap}
.pill{
  font-size:.75rem; padding:.2rem .5rem; border-radius:999px;
  background:var(--card2);
  border:1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  color:var(--muted);
}

/* ===== FOOTER ===== */
.site-footer{
  padding:2rem 1rem; text-align:center; color:var(--muted);
  border-top:1px solid color-mix(in srgb, var(--fg) 10%, transparent);
}