:root {
  color-scheme: dark;
  --ink: #f7f1df;
  --muted: #b8b3a4;
  --line: rgba(247, 241, 223, 0.16);
  --panel: rgba(18, 23, 35, 0.88);
  --cyan: #55e6ff;
  --gold: #f9c846;
  --green: #78e08f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    linear-gradient(rgba(9, 13, 23, 0.46), rgba(9, 13, 23, 0.94)),
    url("https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=1800&q=80") center / cover fixed;
}

.lobby {
  display: grid;
  align-content: start;
  gap: 18px;
  width: min(1180px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 46px);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(18px, 4vw, 34px);
  background:
    linear-gradient(135deg, rgba(85, 230, 255, 0.13), rgba(249, 200, 70, 0.07)),
    rgba(18, 23, 35, 0.82);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
}

.categoryRail {
  display: flex;
  gap: 10px;
  overflow: auto;
  padding-bottom: 2px;
}

.categoryRail a {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.72rem 0.95rem;
  color: var(--ink);
  background: rgba(18, 23, 35, 0.86);
  font-weight: 1000;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.categoryRail a:hover {
  border-color: rgba(85, 230, 255, 0.55);
}

.kicker,
.eyebrow {
  margin: 0;
  color: var(--cyan);
  font-size: 0.8rem;
  font-weight: 1000;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(2.25rem, 6vw, 4.8rem);
  line-height: 0.95;
}

.subhead,
.gameCopy p {
  color: var(--muted);
  line-height: 1.45;
}

.gameGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.gameCard {
  display: grid;
  grid-template-rows: 220px auto auto;
  gap: 16px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(16px);
}

.gameCard:hover {
  border-color: rgba(85, 230, 255, 0.48);
  transform: translateY(-2px);
}

.gameArt {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 72% 28%, rgba(249, 200, 70, 0.16), transparent 20%),
    radial-gradient(circle at 30% 30%, rgba(85, 230, 255, 0.18), transparent 26%),
    linear-gradient(135deg, #08101f, #101827 54%, #060912);
}

.snakeArt {
  background:
    radial-gradient(circle at 30% 26%, rgba(120, 224, 143, 0.18), transparent 28%),
    linear-gradient(135deg, #081018, #142033 58%, #071018);
}

.pancakeArt {
  background:
    linear-gradient(160deg, #3b2520, #201616 55%, #151112);
}

.cookieArt {
  background:
    radial-gradient(circle at 70% 28%, rgba(255, 94, 158, 0.2), transparent 28%),
    radial-gradient(circle at 24% 78%, rgba(85, 230, 255, 0.16), transparent 26%),
    linear-gradient(145deg, #3d2032, #221826 56%, #130f1a);
}

.signalArt {
  background:
    radial-gradient(circle at 76% 24%, rgba(120, 224, 143, 0.2), transparent 24%),
    radial-gradient(circle at 28% 62%, rgba(85, 230, 255, 0.22), transparent 28%),
    linear-gradient(145deg, #071923, #142235 56%, #081018);
}

.ship {
  position: absolute;
  left: 38%;
  top: 44%;
  width: 110px;
  height: 34px;
  border-radius: 60% 10% 10% 60%;
  background: linear-gradient(135deg, #f7fbff, #7489a3 45%, #151c29);
  box-shadow: 0 0 28px rgba(85, 230, 255, 0.34);
  transform: rotate(-12deg);
}

.ship::before,
.ship::after {
  content: "";
  position: absolute;
  left: 18px;
  width: 48px;
  height: 22px;
  background: linear-gradient(135deg, #151c29, #7e91a8, #f7fbff);
}

.ship::before {
  top: -21px;
  clip-path: polygon(0 100%, 100% 100%, 28% 0);
}

.ship::after {
  bottom: -21px;
  clip-path: polygon(0 0, 100% 0, 28% 100%);
}

.token,
.snakeFood {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f7fff8, #78e08f 48%, #1e7d4b);
  box-shadow: 0 0 18px rgba(120, 224, 143, 0.56);
}

.token {
  right: 18%;
  top: 28%;
}

.rock {
  position: absolute;
  width: 46px;
  height: 38px;
  border-radius: 45% 55% 38% 62%;
  background: radial-gradient(circle at 30% 25%, #d5b27c, #806249 52%, #30231e);
}

.rockOne {
  left: 14%;
  top: 22%;
}

.rockTwo {
  right: 12%;
  bottom: 18%;
  transform: scale(0.72) rotate(24deg);
}

.snakeBody {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(135deg, #eaffb8, #78e08f 44%, #1d8d4f);
  box-shadow: 0 0 18px rgba(120, 224, 143, 0.22);
}

.b1 {
  left: 27%;
  top: 42%;
}

.b2 {
  left: calc(27% + 48px);
  top: 42%;
}

.b3 {
  left: calc(27% + 96px);
  top: 42%;
}

.f1 {
  right: 22%;
  top: 28%;
}

.f2 {
  left: 18%;
  bottom: 22%;
}

.panShape {
  position: absolute;
  left: 18%;
  bottom: 22%;
  width: 154px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 36%, #596163, #171819 66%);
  box-shadow: 0 18px 24px rgba(0, 0, 0, 0.28);
  transform: rotate(-8deg);
}

.panShape::after {
  content: "";
  position: absolute;
  left: 132px;
  top: 13px;
  width: 112px;
  height: 14px;
  border-radius: 999px;
  background: #161616;
}

.pancakeDisc {
  position: absolute;
  left: 37%;
  top: 34%;
  width: 92px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff0b8, #e7aa54 58%, #8b512b);
  box-shadow: 0 0 30px rgba(255, 214, 107, 0.18);
  transform: rotate(14deg);
}

.berryDot {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffd4e7, #ff5e9e 58%, #9c2557);
}

.berryOne {
  left: 23%;
  top: 24%;
}

.berryTwo {
  right: 24%;
  top: 36%;
}

.syrupDrop {
  position: absolute;
  left: 64%;
  bottom: 26%;
  width: 22px;
  height: 32px;
  border-radius: 50% 50% 55% 55%;
  background: linear-gradient(#ffe79b, #d88d23);
  transform: rotate(18deg);
}

.cookieTray {
  position: absolute;
  inset: 30px 34px;
  border: 3px solid rgba(255, 218, 128, 0.75);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    rgba(22, 17, 26, 0.78);
  background-size: 34px 34px;
}

.sweetTile {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 248, 231, 0.55);
  border-radius: 8px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.24);
}

.sweetBlue {
  left: 21%;
  top: 24%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, #e9fbff, #5ad6ff 48%, #2173d5);
}

.sweetPink {
  left: 48%;
  top: 28%;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 35% 25%, #ffe7ef, #ff6f91 52%, #a4254e);
  transform: rotate(-12deg);
}

.sweetGreen {
  right: 19%;
  top: 45%;
  clip-path: polygon(50% 5%, 96% 85%, 4% 85%);
  background: linear-gradient(135deg, #e9ffd7, #7de36f 52%, #3e9b35);
}

.sweetYellow {
  left: 28%;
  bottom: 23%;
  background: radial-gradient(circle at 30% 24%, #fffbe2, #ffe070 48%, #c88821);
}

.sweetStriped {
  right: 31%;
  bottom: 24%;
  background:
    repeating-linear-gradient(135deg, #ff6f91 0 7px, #ffe070 7px 14px, #5ad6ff 14px 21px);
}

.jamJar {
  position: absolute;
  right: 10%;
  top: 18%;
  width: 34px;
  height: 48px;
  border: 2px solid rgba(255, 248, 231, 0.62);
  border-radius: 8px 8px 12px 12px;
  background: linear-gradient(#ffd6e1 0 20%, #ff4f86 20% 100%);
  box-shadow: 0 0 20px rgba(255, 94, 158, 0.34);
}

.signalTower {
  position: absolute;
  left: 18%;
  bottom: 24%;
  width: 12px;
  height: 104px;
  background: linear-gradient(#55e6ff, #276981);
  box-shadow: 0 0 20px rgba(85, 230, 255, 0.48);
}

.signalTower::before {
  content: "";
  position: absolute;
  left: -15px;
  top: -22px;
  width: 42px;
  height: 42px;
  border: 3px solid rgba(85, 230, 255, 0.72);
  border-radius: 50%;
}

.signalRunner {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 34px;
  height: 48px;
  border-radius: 12px 12px 8px 8px;
  background: linear-gradient(135deg, #f7f1df, #55e6ff);
  box-shadow: 0 0 24px rgba(85, 230, 255, 0.34);
  transform: rotate(10deg);
}

.signalRunner::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -16px;
  width: 26px;
  height: 18px;
  border-radius: 8px;
  background: #f9c846;
}

.signalPulse {
  position: absolute;
  border: 2px solid rgba(85, 230, 255, 0.55);
  border-radius: 50%;
}

.p1 {
  left: 10%;
  top: 21%;
  width: 104px;
  height: 104px;
}

.p2 {
  left: 3%;
  top: 8%;
  width: 162px;
  height: 162px;
  opacity: 0.42;
}

.signalBeacon {
  position: absolute;
  right: 18%;
  bottom: 24%;
  width: 18px;
  height: 54px;
  border-radius: 10px 10px 3px 3px;
  background: linear-gradient(#78e08f, #28573f);
  box-shadow: 0 0 18px rgba(120, 224, 143, 0.55);
}

.signalDrone {
  position: absolute;
  right: 18%;
  top: 24%;
  width: 58px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffccd6, #ff6f91 60%, #682035);
  box-shadow: 0 0 18px rgba(255, 111, 145, 0.4);
}

.gameCopy {
  display: grid;
  gap: 8px;
}

.gameCopy h2 {
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.playButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #101319;
  background: linear-gradient(135deg, var(--green), var(--gold));
  font-weight: 1000;
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(120, 224, 143, 0.12);
}

.snake .playButton {
  background: linear-gradient(135deg, var(--green), var(--cyan));
}

.pancake .playButton {
  background: linear-gradient(135deg, #ffd66b, #78e0b5);
}

.cookie .playButton {
  background: linear-gradient(135deg, #ff6f91, #ffe070);
}

.signal .playButton {
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.heroStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(84px, 1fr));
  gap: 8px;
}

.heroStats span,
.chips span {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(9, 13, 23, 0.58);
}

.heroStats span {
  padding: 0.7rem;
  color: var(--muted);
  font-weight: 850;
}

.heroStats strong {
  display: block;
  color: var(--ink);
  font-size: 1.2rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips span {
  padding: 0.4rem 0.58rem;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 900;
}

.saveSummary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.56rem 0.64rem;
  background: rgba(9, 13, 23, 0.58);
}

.saveSummary span {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.saveSummary strong {
  justify-self: end;
  color: var(--ink);
  font-size: 0.9rem;
}

.saveSummary em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 850;
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .heroStats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gameGrid {
    grid-template-columns: 1fr;
  }
}