:root {
  --arcade-bg: #0c0d14;
  --arcade-panel: #151724;
  --arcade-card: #1b1e2e;
  --arcade-card-2: #22263a;
  --arcade-line: rgba(255,255,255,.08);
  --arcade-ink: #f9faff;
  --arcade-muted: #aeb6c8;
  --arcade-purple: #7c3aed;
  --arcade-blue: #38bdf8;
  --arcade-green: #22c55e;
  --arcade-gold: #facc15;
  --arcade-pink: #fb7185;
  --arcade-radius: 18px;
  --arcade-shadow: 0 18px 60px rgba(0,0,0,.32);
}

.arcade-body {
  margin: 0;
  min-height: 100vh;
  color: var(--arcade-ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(124,58,237,.22), transparent 32rem),
    radial-gradient(circle at 80% 12%, rgba(56,189,248,.14), transparent 30rem),
    var(--arcade-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.arcade-body a { color: inherit; }

.arcade-shell {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  min-height: 100vh;
}

.arcade-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 14px 8px;
  border-right: 1px solid var(--arcade-line);
  background: rgba(10,11,18,.88);
  backdrop-filter: blur(18px);
}

.arcade-logo {
  display: grid;
  place-items: center;
  gap: 5px;
  width: 58px;
  min-height: 68px;
  color: var(--arcade-ink);
  text-decoration: none;
  font-size: .68rem;
  line-height: 1.05;
  text-align: center;
}

.arcade-logo-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed, #38bdf8);
  box-shadow: 0 10px 28px rgba(124,58,237,.34);
  font-size: 1.2rem;
}

.arcade-side-nav {
  display: grid;
  gap: 7px;
  width: 100%;
}

.side-chip {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--arcade-muted);
  background: transparent;
  font: inherit;
  font-size: 1.05rem;
  cursor: pointer;
}

.side-chip span {
  font-size: .58rem;
  line-height: 1;
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-chip:hover,
.side-chip.active {
  color: var(--arcade-ink);
  border-color: rgba(124,58,237,.42);
  background: linear-gradient(180deg, rgba(124,58,237,.26), rgba(56,189,248,.08));
}

.arcade-main {
  min-width: 0;
  padding: 16px 22px 42px;
}

.arcade-topbar {
  position: sticky;
  top: 0;
  z-index: 9;
  display: grid;
  grid-template-columns: auto minmax(220px, 640px) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0 16px;
  background: linear-gradient(180deg, rgba(12,13,20,.96), rgba(12,13,20,.82) 78%, transparent);
  backdrop-filter: blur(14px);
}

.back-link {
  text-decoration: none;
  color: var(--arcade-muted);
  font-weight: 800;
}

.arcade-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--arcade-line);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.arcade-search span {
  color: var(--arcade-blue);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.arcade-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--arcade-ink);
  background: transparent;
  font: inherit;
  font-weight: 700;
}

.arcade-search input::placeholder { color: rgba(249,250,255,.46); }

.topbar-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--arcade-line);
  border-radius: 999px;
  color: var(--arcade-muted);
  background: rgba(255,255,255,.06);
  font-size: .78rem;
  font-weight: 900;
}

.status-pill.live {
  color: #052e16;
  background: linear-gradient(135deg, #86efac, #22c55e);
}

.arcade-collections {
  display: grid;
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 12px;
  margin: 2px 0 18px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.collection-card {
  min-height: 104px;
  min-width: 170px;
  padding: 16px;
  border: 1px solid var(--arcade-line);
  border-radius: 20px;
  color: var(--arcade-ink);
  text-align: left;
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.03)),
    radial-gradient(circle at 95% 12%, rgba(124,58,237,.38), transparent 4rem);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.collection-card strong { display: block; margin-bottom: 8px; font-size: 1rem; }
.collection-card span { color: var(--arcade-muted); font-weight: 700; }
.collection-card:hover { transform: translateY(-2px); border-color: rgba(56,189,248,.36); }

.arcade-hero-section,
.game-row-section,
.arcade-quality-panel {
  margin-bottom: 28px;
}

.section-title-row,
.row-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.arcade-eyebrow {
  margin: 0 0 5px;
  color: var(--arcade-blue);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.section-title-row h1,
.arcade-quality-panel h2,
.row-heading h2 {
  margin: 0;
  color: var(--arcade-ink);
  line-height: .98;
}

.section-title-row h1 {
  max-width: 760px;
  font-size: clamp(2.2rem, 5vw, 4.9rem);
  letter-spacing: -.06em;
}

.arcade-note {
  max-width: 370px;
  margin: 0;
  color: var(--arcade-muted);
  font-weight: 650;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(250px, 1.25fr) minmax(250px, 1.25fr) minmax(180px, .62fr) minmax(180px, .62fr);
  grid-auto-rows: 112px;
  gap: 12px;
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  min-height: 110px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--arcade-radius);
  color: white;
  text-decoration: none;
  background: var(--arcade-card);
  box-shadow: 0 14px 38px rgba(0,0,0,.25);
  isolation: isolate;
}

.game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent);
}

.game-card::after {
  content: "";
  position: absolute;
  inset: 36% 0 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
}

.game-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

.hero-card {
  min-height: 236px;
  grid-row: span 2;
  padding: 18px;
}

.stacked-card { min-height: 112px; }
.small-card {
  flex: 0 0 204px;
  width: 204px;
  min-height: 128px;
}

.game-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 18px;
  scroll-snap-type: x proximity;
}

.coming-row {
  min-height: 158px;
}

.game-row .game-card { scroll-snap-align: start; }

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 5px 8px;
  border-radius: 999px;
  color: #111827;
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.badge.hot { background: linear-gradient(135deg, #fbbf24, #fb7185); }
.badge.original { background: linear-gradient(135deg, #c084fc, #38bdf8); color: white; }
.badge.top { background: linear-gradient(135deg, #fde68a, #facc15); }
.badge.updated { background: linear-gradient(135deg, #93c5fd, #38bdf8); }
.badge.soon { background: rgba(255,255,255,.16); color: white; border: 1px solid rgba(255,255,255,.18); }

.game-title {
  display: block;
  font-size: 1.08rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.hero-card .game-title { font-size: 1.55rem; }
.game-meta {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.78);
  font-size: .82rem;
  font-weight: 800;
}

.game-art-icon {
  position: absolute;
  right: 16px;
  top: 40px;
  font-size: clamp(3rem, 8vw, 5.5rem);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.35));
}

.art-coin { background: radial-gradient(circle at 78% 22%, #facc15 0 0.9rem, transparent 1rem), linear-gradient(135deg, #0f766e, #1d4ed8 60%, #111827); }
.art-blackwood { background: radial-gradient(circle at 75% 20%, rgba(250,204,21,.65), transparent 4rem), linear-gradient(135deg, #111827, #4c1d95 55%, #2f1b12); }
.art-ladder { background: repeating-linear-gradient(45deg, rgba(255,255,255,.11) 0 8px, transparent 8px 18px), linear-gradient(135deg, #166534, #0f766e); }
.art-word { background: radial-gradient(circle at 82% 12%, rgba(250,204,21,.55), transparent 4rem), linear-gradient(135deg, #7c2d12, #a16207); }
.art-snake { background: radial-gradient(circle at 70% 20%, rgba(34,197,94,.7), transparent 3rem), linear-gradient(135deg, #052e16, #064e3b); }
.art-blocks { background: linear-gradient(135deg, #1d4ed8, #7c3aed); }
.art-truck { background: linear-gradient(135deg, #0f172a, #f97316); }
.art-farm { background: linear-gradient(135deg, #14532d, #84cc16); }
.art-case { background: linear-gradient(135deg, #312e81, #701a75); }
.art-hidden { background: radial-gradient(circle at 78% 22%, rgba(250,204,21,.52), transparent 3.6rem), linear-gradient(135deg, #1f1724, #5b2b1a 55%, #312e81); }
.art-3d-study { background: radial-gradient(circle at 72% 25%, rgba(253,230,138,.62), transparent 4rem), radial-gradient(circle at 28% 72%, rgba(168,85,247,.42), transparent 4.5rem), linear-gradient(135deg, #0f172a, #3b1d2f 62%, #92400e); }
.art-chess { background: linear-gradient(135deg, #111827, #374151 55%, #7c3aed); }

.art-chess::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.10) 25%, transparent 25% 50%, rgba(255,255,255,.10) 50% 75%, transparent 75%),
    linear-gradient(180deg, rgba(255,255,255,.10) 25%, transparent 25% 50%, rgba(255,255,255,.10) 50% 75%, transparent 75%);
  background-size: 42px 42px;
  opacity: .22;
}

.row-heading h2 { font-size: 1.45rem; }
.row-heading span { color: var(--arcade-muted); font-weight: 700; }

.arcade-quality-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr);
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--arcade-line);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(255,255,255,.05));
  box-shadow: var(--arcade-shadow);
}

.arcade-quality-panel p,
.arcade-quality-panel li { color: var(--arcade-muted); font-weight: 650; }
.arcade-quality-panel ul { margin: 0; padding-left: 20px; }
.arcade-quality-panel li + li { margin-top: 10px; }
.arcade-quality-panel strong { color: var(--arcade-ink); }

.empty-state {
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 18px;
  color: var(--arcade-muted);
  text-align: center;
  font-weight: 800;
}

.game-card.is-hidden,
.game-row-section.is-hidden,
.arcade-hero-section.is-hidden { display: none !important; }

/* Existing individual game pages */
.game-wrap { max-width: 980px; margin: 0 auto; padding: 24px; }
.game-panel { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 20px; box-shadow: var(--shadow); }
.game-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.game-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.stat-pill { background: #ecfdf5; border: 1px solid #bbf7d0; color: #14532d; border-radius: 999px; padding: 8px 12px; font-weight: 800; }
.game-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.game-message { min-height: 28px; color: var(--teal-dark); font-weight: 800; }
.board-grid { display: grid; grid-template-columns: repeat(8, minmax(30px, 1fr)); gap: 6px; margin: 16px 0; }
.cell { aspect-ratio: 1; border-radius: 10px; border: 1px solid #d9e6df; display:flex; align-items:center; justify-content:center; font-weight:900; background:#f8fafc; position:relative; font-size: .85rem; }
.cell.climb { background:#dcfce7; color:#166534; }
.cell.slide { background:#fee2e2; color:#991b1b; }
.cell.player { outline: 4px solid #0f766e; box-shadow: 0 0 0 4px rgba(15,118,110,.12); }
.cell.goal { background:#fef3c7; color:#92400e; }
.word-tray { display:flex; flex-wrap:wrap; gap:10px; margin: 18px 0; }
.tile { width: 46px; height: 52px; border: 2px solid #0f766e; background:#fef3c7; color:#10201c; border-radius: 12px; font-size:1.4rem; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 0 #d97706; }
.word-input { width: 100%; max-width: 420px; padding: 14px 16px; border-radius: 14px; border: 2px solid #d9e6df; font-size: 1.1rem; font-weight: 800; text-transform: uppercase; }
.score-list { display:grid; gap:8px; margin-top:14px; }
.score-row { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid #ecf0ed; padding:8px 0; }
.snake-canvas-wrap { display:flex; justify-content:center; margin:16px 0; }
#snakeCanvas { width:min(92vw, 420px); height:min(92vw, 420px); background:#0f172a; border-radius:18px; box-shadow:var(--shadow); touch-action:none; }
.dpad { display:grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 54px); gap:8px; justify-content:center; margin: 12px auto; }
.dpad button:nth-child(1) { grid-column:2; grid-row:1; }
.dpad button:nth-child(2) { grid-column:1; grid-row:2; }
.dpad button:nth-child(3) { grid-column:3; grid-row:2; }
.dpad button:nth-child(4) { grid-column:2; grid-row:3; }

@media (max-width: 980px) {
  .arcade-shell { grid-template-columns: 1fr; }
  .arcade-sidebar {
    position: sticky;
    top: 0;
    height: auto;
    flex-direction: row;
    justify-content: start;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--arcade-line);
  }
  .arcade-logo { min-width: 70px; }
  .arcade-side-nav { display: flex; width: auto; }
  .side-chip { min-width: 72px; }
  .arcade-topbar { grid-template-columns: 1fr; }
  .topbar-actions { justify-content: flex-start; }
  .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arcade-quality-panel { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .arcade-main { padding: 12px 12px 32px; }
  .arcade-collections { grid-template-columns: repeat(5, 178px); }
  .section-title-row { display: block; }
  .section-title-row h1 { font-size: clamp(2.25rem, 12vw, 3.4rem); }
  .arcade-note { margin-top: 10px; }
  .hero-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .hero-card, .stacked-card { min-height: 172px; grid-row: auto; }
  .small-card { flex-basis: 176px; width: 176px; }
  .game-wrap { padding: 14px; }
  .board-grid { gap:4px; }
  .cell { border-radius: 7px; font-size:.7rem; }
}