@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: oklch(0.58 0.09 195);
  font-family: Helvetica, Arial, sans-serif;
}

.hub {
  min-height: 100vh;
  background: radial-gradient(circle at 30% 20%, oklch(0.65 0.1 195), oklch(0.5 0.09 200) 55%, oklch(0.4 0.08 210) 100%);
  display: flex;
  flex-direction: row-reverse;
  position: relative;
  overflow: hidden;
}

.icon-strip {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
}

/* ---- Sidebar ---- */

.sidebar {
  width: 380px;
  flex-shrink: 0;
  border-left: 2px dashed oklch(0.9 0.02 195 / 0.4);
  padding: 40px 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: -12px 0 32px oklch(0.15 0.03 210 / 0.35);
  position: relative;
  z-index: 2;
}

.sidebar-label {
  color: white;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 4px;
}

.game-card {
  background: white;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.card-thumb {
  height: 140px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, oklch(0.3 0.06 200), oklch(0.2 0.04 210));
}

.card-thumb-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.card-thumb-shot.visible {
  opacity: 1;
}

.card-thumb-placeholder {
  background: oklch(0.93 0.01 195);
  color: oklch(0.6 0.02 195);
  font-size: 28px;
}

.card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-body h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: oklch(0.2 0.02 195);
  line-height: 1.2;
}

.card-body p {
  margin: 0;
  font-size: 13.5px;
  color: oklch(0.4 0.02 195);
  line-height: 1.45;
}

.tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.tag {
  background: oklch(0.94 0.03 195);
  color: oklch(0.4 0.09 195);
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 3px;
}

.play-link {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: oklch(0.5 0.13 220);
}

.game-card-placeholder {
  opacity: 0.6;
  cursor: default;
}

.game-card-placeholder .card-body p {
  color: oklch(0.45 0.02 195);
}

/* ---- Hero ---- */

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 80px;
  position: relative;
  z-index: 2;
}

.hero h1 {
  margin: 0;
  font-size: 108px;
  font-weight: 800;
  color: white;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero .tagline {
  margin: 24px 0 0;
  font-size: 22px;
  font-style: italic;
  color: oklch(0.94 0.02 195 / 0.85);
}

/* ---- Mascot ---- */

.mascot {
  position: absolute;
  left: 48px;
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

.eye {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Split into two nested elements so the cursor-tracking translate (applied
   to pupil-wrap via JS) and the blink scaleY animation (applied to pupil)
   don't fight over the same element's transform property. */
.pupil-wrap {
  width: 16px;
  height: 16px;
}

.pupil {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: oklch(0.2 0.02 195);
  animation: blink 4s infinite;
}

.pupil-delay {
  animation-delay: 0.1s;
}

/* ---- Small screens: stack instead of side-by-side ---- */

@media (max-width: 820px) {
  .hub {
    /* DOM order is [sidebar, hero] (needed for row-reverse on desktop);
       column-reverse keeps the hero on top and the games list below when
       stacked, instead of flipping to games-first. */
    flex-direction: column-reverse;
    overflow: visible;
  }
  .sidebar {
    width: auto;
    border-left: none;
    border-top: 2px dashed oklch(0.9 0.02 195 / 0.4);
    box-shadow: 0 -12px 32px oklch(0.15 0.03 210 / 0.35);
  }
  .hero {
    padding: 48px 32px 24px;
  }
  .hero h1 {
    font-size: 15vw;
  }
  .mascot {
    position: static;
    margin: 0 32px 24px;
  }
}