:root {
  --bg: #0e1013; /* fallback base */
  --surface: #151922;
  --muted: #8b93a6;
  --text: #e6e9f2;
  --primary: #6aa9ff;
  --success: #48d597;
  --warning: #ffb02e;
  --danger: #ff6b6b;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  /* Neon gradient background similar to the reference */
  background:
    radial-gradient(1200px 600px at 85% 0%, rgba(0, 255, 240, 0.35), transparent 60%),
    radial-gradient(900px 700px at 100% 60%, rgba(255, 0, 150, 0.45), transparent 60%),
    radial-gradient(900px 700px at 0% 100%, rgba(255, 60, 0, 0.55), transparent 60%),
    radial-gradient(900px 700px at 0% 0%, rgba(90, 0, 255, 0.5), transparent 60%),
    linear-gradient(135deg, #0b0f1a 0%, #0f1320 40%, #0b0f1a 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
}

.app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

/* Sidebar */
.sidebar { background: linear-gradient(180deg, #111521 0%, #0e111a 100%); border-right: 1px solid rgba(255,255,255,0.06); padding: 18px 14px; position: sticky; top: 0; height: 100dvh; }
.sidebar__brand { font-weight: 800; font-size: 1.25rem; margin: 6px 8px 14px; }
.nav-heading { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: .08em; margin: 14px 8px 6px; }
.nav-list { list-style: none; padding: 0; margin: 0; }
.nav-list--cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 10px; }
.nav-item a { display: block; color: var(--text); text-decoration: none; padding: 8px 10px; border-radius: 10px; transition: background .2s ease; }
.nav-item a:hover { background: rgba(255,255,255,0.06); }
.nav-item--active a { background: rgba(255,255,255,0.1); }
.nav-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 12px 0; }

/* Content */
.content { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); position: sticky; top: 0; z-index: 5; }
.search { flex: 1 1 320px; }
.search__input { width: 100%; padding: 12px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background: #0f1320; color: var(--text); }
.facts { list-style: none; display: flex; gap: 12px; padding: 0; margin: 0; color: var(--muted); font-size: .95rem; }

.main { padding: 18px; }

/* Cards */
/* Show all game boxes on the page in a responsive grid (no horizontal scrolling) */
.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
/* Ensure no horizontal scroll for game rows */
.row--scroll { overflow: visible; padding-bottom: 0; }
.row--scroll::-webkit-scrollbar { height: 0; }
.row--scroll::-webkit-scrollbar-thumb { background: transparent; }

.hero { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.card { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--surface); aspect-ratio: 16 / 9; box-shadow: 0 6px 16px rgba(0,0,0,0.35); transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,0.45); }
.card__title { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 8px 10px; border-radius: 10px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 10%, rgba(0,0,0,0.65) 100%); color: #fff; font-weight: 700; text-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.badge { position: absolute; top: 10px; left: 10px; font-size: .75rem; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,0.2); color: #fff; backdrop-filter: blur(6px); }
.badge--new { background: linear-gradient(135deg, #7cd67c, #49b649); }
.badge--update { background: linear-gradient(135deg, #6aa9ff, #3a7bff); }

/* Thumb gradients */
[class^="thumb--gradient"], [class*=" thumb--gradient"] { background-size: cover; }
.thumb--tictactoe { 
  background-image: url('assets/tictactoe-tile.svg');
  background-size: cover;
  background-position: center;
}
.thumb--pacman {
  background-image: url('assets/pacman-tile.svg');
  background-size: cover;
  background-position: center;
}
.thumb--gradient-1 { background-image: linear-gradient(135deg,#8fe3a1,#2ea8ff); }
.thumb--gradient-2 { background-image: linear-gradient(135deg,#ffd36e,#ff7a7a); }
.thumb--gradient-3 { background-image: linear-gradient(135deg,#8bb7ff,#d08bff); }
.thumb--gradient-4 { background-image: linear-gradient(135deg,#5fe1d4,#76a9ff); }
.thumb--gradient-5 { background-image: linear-gradient(135deg,#ff9a9e,#fad0c4); }
.thumb--gradient-6 { background-image: linear-gradient(135deg,#a18cd1,#fbc2eb); }
.thumb--gradient-7 { background-image: linear-gradient(135deg,#f6d365,#fda085); }
.thumb--gradient-8 { background-image: linear-gradient(135deg,#96e6a1,#d4fc79); }
.thumb--gradient-9 { background-image: linear-gradient(135deg,#84fab0,#8fd3f4); }
.thumb--gradient-10{ background-image: linear-gradient(135deg,#a6c0fe,#f68084); }
.thumb--gradient-11{ background-image: linear-gradient(135deg,#fccb90,#d57eeb); }
.thumb--gradient-12{ background-image: linear-gradient(135deg,#cfd9df,#e2ebf0); }
.thumb--gradient-13{ background-image: linear-gradient(135deg,#fda085,#f6d365); }
.thumb--gradient-14{ background-image: linear-gradient(135deg,#5ee7df,#b490ca); }
.thumb--gradient-15{ background-image: linear-gradient(135deg,#f4d03f,#16a085); }
.thumb--gradient-16{ background-image: linear-gradient(135deg,#96fbc4,#f9f586); }
.thumb--gradient-17{ background-image: linear-gradient(135deg,#b1c6ff,#f7aef8); }
.thumb--gradient-18{ background-image: linear-gradient(135deg,#fad0c4,#ffd1ff); }
.thumb--gradient-19{ background-image: linear-gradient(135deg,#f6d365,#fda085); }
.thumb--gradient-20{ background-image: linear-gradient(135deg,#d299c2,#fef9d7); }

/* Sections */
.section { margin-bottom: 26px; }
.section__header { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 10px; }
.section__title { margin: 0; font-size: 1.1rem; }
.section__more { color: var(--muted); text-decoration: none; }
.section__more:hover { color: var(--text); }

/* Responsive */
@media (max-width: 1100px) {
  .hero { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .facts { display: none; }
  .hero { grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}
@media (max-width: 560px) {
  .hero { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
}