/* ============================================
   DATIL.GAMES — Styles
   Tropical-fresh game studio aesthetic

   Animation budget: timing-under-300ms,
   ease-out for entrances, ease-in for exits,
   one focal animation per viewport.
   ============================================ */

:root {
  --cream: #F5F7F9;
  --orange: #E88607;
  --teal: #19C1D8;
  --teal-light: #73E5E0;
  --dark: #1E2A35;
  --dark-soft: #2C3E51;
  --amber: #FFD98D;
  --gold: #FFE36E;
  --deep-teal: #105263;
  --mid-teal: #3A7E8E;
  --mist: #E4E8EA;
  --coral: #F2665F;

  /* Alpha borders — adapt to any bg */
  --border-subtle: rgba(25, 193, 216, 0.08);
  --border-hover: rgba(25, 193, 216, 0.20);

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;

  /* Timing: entrances ease-out, exits ease-in, transitions ease-in-out */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Duration budget */
  --dur-press: 150ms;   /* hover, press, toggle */
  --dur-state: 200ms;   /* small state changes */
  --dur-enter: 260ms;   /* element entrances */
  --dur-ambient: 20s;   /* slow background loops */

  /* Layered shadow system — single light source, no pure black */
  --shadow-card:
    0 1px 2px rgba(10, 20, 30, 0.12),
    0 4px 8px rgba(10, 20, 30, 0.08),
    0 12px 32px rgba(10, 20, 30, 0.06);
  --shadow-card-hover:
    0 2px 4px rgba(10, 20, 30, 0.14),
    0 8px 16px rgba(10, 20, 30, 0.10),
    0 24px 48px rgba(10, 20, 30, 0.08);
  --shadow-btn:
    0 1px 2px rgba(10, 20, 30, 0.10),
    0 2px 6px rgba(10, 20, 30, 0.06);
  --shadow-btn-hover:
    0 2px 4px rgba(10, 20, 30, 0.12),
    0 8px 20px rgba(10, 20, 30, 0.10);

  /* Spacing scale (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --sp-40: 10rem;

  /* Radius scale — concentric: inner = outer - gap */
  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-full: 100px;
}

/* ---- Reset & Base ---- */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--dark);
  color: var(--cream);
  overflow-x: hidden;
  cursor: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ---- Grain Overlay ---- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
}

/* ---- Cursor Glow ---- */

.cursor-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25, 193, 216, 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: transform;
}

/* ---- Floating Shapes ---- */

.floating-shapes {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  will-change: transform;
}

.shape--1 {
  width: 400px;
  height: 400px;
  background: var(--orange);
  top: 10%;
  left: -5%;
  animation: float-drift var(--dur-ambient) ease-in-out infinite;
}

.shape--2 {
  width: 300px;
  height: 300px;
  background: var(--teal);
  top: 40%;
  right: -8%;
  animation: float-drift var(--dur-ambient) ease-in-out infinite reverse;
  animation-delay: -7s;
}

.shape--3 {
  width: 250px;
  height: 250px;
  background: var(--gold);
  bottom: 20%;
  left: 30%;
  animation: float-drift 25s ease-in-out infinite;
  animation-delay: -13s;
}

.shape--4 {
  width: 200px;
  height: 200px;
  background: var(--amber);
  top: 60%;
  left: 10%;
  animation: float-drift 22s ease-in-out infinite reverse;
  animation-delay: -4s;
}

.shape--5 {
  width: 350px;
  height: 350px;
  background: var(--mid-teal);
  bottom: -5%;
  right: 20%;
  animation: float-drift 28s ease-in-out infinite;
  animation-delay: -18s;
}

/* Single ambient keyframe — slow, subtle, no scale fighting */
@keyframes float-drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(30px, -40px); }
  50% { transform: translate(-20px, 20px); }
  75% { transform: translate(15px, 30px); }
}

/* ---- Navigation ---- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-6) var(--sp-12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(30, 42, 53, 0.6);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-state) var(--ease-standard);
}

.nav.scrolled {
  background: rgba(30, 42, 53, 0.88);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  cursor: auto;
  transition: transform var(--dur-press) var(--ease-out);
}

.nav__logo-star {
  flex-shrink: 0;
  animation: star-rotate 20s linear infinite;
}

@keyframes star-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.nav__logo-wordmark {
  letter-spacing: 0.06em;
}

.nav__logo:hover {
  transform: scale(1.04);
}

.nav__logo:active {
  transform: scale(0.97);
}

.nav__links {
  display: flex;
  gap: var(--sp-8);
}

.nav__link {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.6;
  cursor: auto;
  transition: opacity var(--dur-press) var(--ease-standard),
              color var(--dur-press) var(--ease-standard);
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1.5px;
  background: var(--teal);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-state) var(--ease-out);
}

.nav__link:hover {
  opacity: 1;
  color: var(--teal);
}

.nav__link:hover::after {
  transform: scaleX(1);
}

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

.hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--sp-32) var(--sp-12) var(--sp-16);
  text-align: center;
}

.hero__content {
  max-width: 900px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid rgba(25, 193, 216, 0.15);
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-8);
  background: rgba(25, 193, 216, 0.04);
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  animation: pulse-dot 2.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-8);
  text-wrap: balance;
}

.hero__line {
  display: block;
}

.hero__line--accent {
  color: var(--orange);
}

.hero__sub {
  font-size: 1.15rem;
  line-height: 1.7;
  opacity: 0.55;
  max-width: 480px;
  margin: 0 auto var(--sp-12);
  text-wrap: pretty;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--dark);
  background: var(--teal);
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--radius-full);
  cursor: auto;
  box-shadow: var(--shadow-btn);
  transition: transform var(--dur-press) var(--ease-out),
              box-shadow var(--dur-press) var(--ease-out);
  position: relative;
}

/* Pseudo-element shadow layer for performant hover animation */
.hero__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 8px 24px rgba(25, 193, 216, 0.3);
  opacity: 0;
  transition: opacity var(--dur-press) var(--ease-standard);
  z-index: -1;
}

.hero__cta:hover {
  transform: translateY(-2px);
}

.hero__cta:hover::after {
  opacity: 1;
}

.hero__cta:active {
  transform: translateY(0) scale(0.98);
}

.hero__cta svg {
  transition: transform var(--dur-state) var(--ease-out);
}

.hero__cta:hover svg {
  transform: translateY(2px);
}

.hero__scroll-hint {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(25, 193, 216, 0.4), transparent);
  animation: scroll-hint 2.5s ease-in-out infinite;
}

@keyframes scroll-hint {
  0% { clip-path: inset(0 0 100% 0); }
  40% { clip-path: inset(0 0 0% 0); }
  60% { clip-path: inset(0 0 0% 0); }
  100% { clip-path: inset(100% 0 0 0); }
}

/* ---- Featured Game ---- */

.featured {
  position: relative;
  z-index: 2;
  padding: var(--sp-24) var(--sp-12) var(--sp-32);
  max-width: 1200px;
  margin: 0 auto;
}

.featured__label,
.upcoming__label {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--sp-12);
}

.featured__label-line,
.upcoming__label-line {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--teal);
  opacity: 0.3;
}

.featured__card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: rgba(44, 62, 81, 0.45);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-state) var(--ease-out),
              box-shadow var(--dur-state) var(--ease-out),
              border-color var(--dur-state) var(--ease-standard);
  will-change: transform;
}

.featured__card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card-hover);
}

.featured__art {
  position: relative;
  overflow: hidden;
  background: var(--dark-soft);
  min-height: 300px;
}

.featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 4s var(--ease-out);
}

.featured__card:hover .featured__img {
  transform: scale(1.03);
}

.featured__live-badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cream);
  background: rgba(30, 42, 53, 0.7);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  z-index: 3;
}

.featured__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #36D867;
  animation: pulse-dot 2s ease-in-out infinite;
}

.featured__info {
  padding: var(--sp-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured__platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-bottom: var(--sp-4);
}

.featured__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
  line-height: 1.1;
  text-wrap: balance;
}

.featured__desc {
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.55;
  margin-bottom: var(--sp-8);
  max-width: 400px;
  text-wrap: pretty;
}

.featured__play-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--dark);
  background: var(--cream);
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--radius-full);
  cursor: auto;
  align-self: flex-start;
  box-shadow: var(--shadow-btn);
  transition: transform var(--dur-press) var(--ease-out),
              box-shadow var(--dur-press) var(--ease-out),
              background var(--dur-press) var(--ease-standard);
  position: relative;
}

.featured__play-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
  background: var(--gold);
}

.featured__play-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-btn);
}

.featured__play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--cream);
  font-size: 0.65rem;
  padding-left: 2px;
  transition: transform var(--dur-press) var(--ease-out);
}

.featured__play-btn:hover .featured__play-icon {
  transform: scale(1.05);
}

/* ---- Upcoming / Coming Soon ---- */

.upcoming {
  position: relative;
  z-index: 2;
  padding: var(--sp-16) var(--sp-12) var(--sp-40);
  max-width: 1200px;
  margin: 0 auto;
}

.upcoming__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

.game-card {
  background: rgba(44, 62, 81, 0.4);
  border: 1px solid var(--border-subtle);
  /* Concentric radius: outer 20px, inner art gets 20px - 1px border = 19px via overflow */
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-state) var(--ease-out),
              box-shadow var(--dur-state) var(--ease-out),
              border-color var(--dur-state) var(--ease-standard);
  will-change: transform;
}

.game-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card-hover);
}

.game-card__art {
  position: relative;
  height: 260px;
  overflow: hidden;
}

/* -- The Hunt: dark forest, creature silhouette between trees -- */

.game-card__art--hunt {
  background: linear-gradient(180deg, #0d1820 0%, #122a1e 40%, #0d1820 100%);
}

/* Forest of triangular trees */
.hunt__trees {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hunt__tree {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
}

.hunt__tree--1 {
  left: 5%;
  border-width: 0 22px 130px 22px;
  border-bottom-color: #0a1a14;
}

.hunt__tree--2 {
  left: 22%;
  border-width: 0 18px 160px 18px;
  border-bottom-color: #0f2119;
}

.hunt__tree--3 {
  right: 28%;
  border-width: 0 20px 150px 20px;
  border-bottom-color: #0c1d16;
}

.hunt__tree--4 {
  right: 8%;
  border-width: 0 24px 180px 24px;
  border-bottom-color: #0a1a14;
}

.hunt__tree--5 {
  left: 42%;
  border-width: 0 16px 120px 16px;
  border-bottom-color: #0f2119;
}

/* Creature silhouette — abstract brainrot shape peeking between trees */
/* Creature — smooth unified silhouette using stacked radials */
.hunt__creature {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 44px;
  z-index: 2;
  transition: transform 0.4s var(--ease-out);
  /* Body: single smooth blob shape */
  background:
    /* Head — top circle */
    radial-gradient(ellipse 18px 16px at 50% 14px, #080e0b 99%, transparent 100%),
    /* Left ear — flows from head */
    radial-gradient(ellipse 6px 10px at 28% 3px, #080e0b 99%, transparent 100%),
    /* Right ear — flows from head */
    radial-gradient(ellipse 6px 10px at 72% 2px, #080e0b 99%, transparent 100%),
    /* Torso — wide bottom */
    radial-gradient(ellipse 20px 22px at 50% 34px, #080e0b 99%, transparent 100%),
    /* Neck connection */
    radial-gradient(ellipse 12px 10px at 50% 24px, #080e0b 99%, transparent 100%);
}

/* Glowing eyes */
.hunt__creature::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #FFE36E;
  box-shadow:
    0 0 6px 2px rgba(255, 227, 110, 0.5),
    0 0 14px 4px rgba(255, 227, 110, 0.15),
    10px 0 0 0 #FFE36E,
    10px 0 6px 2px rgba(255, 227, 110, 0.5),
    10px 0 14px 4px rgba(255, 227, 110, 0.15);
}

.game-card--hunt:hover .hunt__creature {
  transform: translateX(-50%) translateY(-5px) scale(1.06);
}

/* Ambient glow behind creature */
.hunt__glow {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 80px;
  background: radial-gradient(ellipse, rgba(255, 227, 110, 0.06) 0%, transparent 70%);
  z-index: 1;
}

.hunt__fog {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(44, 62, 81, 0.7), transparent);
  z-index: 4;
}

.hunt__title {
  position: absolute;
  bottom: var(--sp-4);
  left: var(--sp-6);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  color: rgba(245, 247, 249, 0.08);
  z-index: 5;
}

/* -- Capyjump: CSS Andes landscape -- */

.game-card__art--capy {
  overflow: hidden;
  cursor: pointer;
  outline: none;
  position: relative;
  background: #6AADCF;
}

.game-card__art--capy:focus {
  cursor: default;
}

/* Sky gradient */
.andes__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    #5A9BC0 0%,
    #7CB8D8 25%,
    #A8D0E4 50%,
    #D4DFD8 72%,
    #C8C4A8 88%,
    #A89870 100%
  );
  z-index: 0;
}

/* ---- Mountain layers (each 300% wide for seamless loop) ---- */

/* Layer 1: Far snow-capped peaks */
.andes__snow {
  position: absolute;
  bottom: 45%;
  left: 0;
  width: 300%;
  height: 55%;
  z-index: 1;
  will-change: transform;
  background: linear-gradient(180deg, #C8D8E4 0%, #8AA0B0 100%);
  clip-path: polygon(
    0% 100%, 0% 72%,
    1.5% 60%, 3% 48%, 4% 42%, 5.5% 35%, 6.5% 40%, 7.5% 44%,
    9% 38%, 10.5% 28%, 11.5% 25%, 12.5% 30%, 13.5% 35%,
    15% 42%, 16% 45%, 17% 40%, 18.5% 32%, 20% 22%,
    21% 18%, 22% 24%, 23% 30%, 24.5% 38%, 26% 45%,
    27% 50%, 28.5% 44%, 30% 36%, 31% 30%, 32% 40%,
    33.3% 72%,
    34.8% 60%, 36.3% 48%, 37.3% 42%, 38.8% 35%, 39.8% 40%, 40.8% 44%,
    42.3% 38%, 43.8% 28%, 44.8% 25%, 45.8% 30%, 46.8% 35%,
    48.3% 42%, 49.3% 45%, 50.3% 40%, 51.8% 32%, 53.3% 22%,
    54.3% 18%, 55.3% 24%, 56.3% 30%, 57.8% 38%, 59.3% 45%,
    60.3% 50%, 61.8% 44%, 63.3% 36%, 64.3% 30%, 65.3% 40%,
    66.6% 72%,
    68.1% 60%, 69.6% 48%, 70.6% 42%, 72.1% 35%, 73.1% 40%, 74.1% 44%,
    75.6% 38%, 77.1% 28%, 78.1% 25%, 79.1% 30%, 80.1% 35%,
    81.6% 42%, 82.6% 45%, 83.6% 40%, 85.1% 32%, 86.6% 22%,
    87.6% 18%, 88.6% 24%, 89.6% 30%, 91.1% 38%, 92.6% 45%,
    93.6% 50%, 95.1% 44%, 96.6% 36%, 97.6% 30%, 98.6% 40%,
    100% 72%, 100% 100%
  );
}

/* Snow caps — white tops via pseudo-element */
.andes__snow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.1) 40%, transparent 55%);
  z-index: 1;
}

/* Layer 2: Dark rocky mountains */
.andes__rock {
  position: absolute;
  bottom: 35%;
  left: 0;
  width: 300%;
  height: 50%;
  z-index: 2;
  will-change: transform;
  background: linear-gradient(180deg, #4A6070 0%, #3A4E5A 60%, #2E4048 100%);
  clip-path: polygon(
    0% 100%, 0% 68%,
    2% 58%, 3.5% 52%, 5% 48%, 7% 55%, 8% 50%,
    10% 42%, 11.5% 38%, 13% 44%, 14.5% 50%,
    16% 46%, 17.5% 40%, 19% 35%, 20% 42%, 21.5% 48%,
    23% 52%, 24.5% 46%, 26% 38%, 27.5% 34%, 29% 40%,
    30.5% 50%, 32% 56%, 33.3% 68%,
    35.3% 58%, 36.8% 52%, 38.3% 48%, 40.3% 55%, 41.3% 50%,
    43.3% 42%, 44.8% 38%, 46.3% 44%, 47.8% 50%,
    49.3% 46%, 50.8% 40%, 52.3% 35%, 53.3% 42%, 54.8% 48%,
    56.3% 52%, 57.8% 46%, 59.3% 38%, 60.8% 34%, 62.3% 40%,
    63.8% 50%, 65.3% 56%, 66.6% 68%,
    68.6% 58%, 70.1% 52%, 71.6% 48%, 73.6% 55%, 74.6% 50%,
    76.6% 42%, 78.1% 38%, 79.6% 44%, 81.1% 50%,
    82.6% 46%, 84.1% 40%, 85.6% 35%, 86.6% 42%, 88.1% 48%,
    89.6% 52%, 91.1% 46%, 92.6% 38%, 94.1% 34%, 95.6% 40%,
    97.1% 50%, 98.6% 56%, 100% 68%, 100% 100%
  );
}

/* Layer 3: Lake / water */
.andes__lake {
  position: absolute;
  bottom: 25%;
  left: 0;
  right: 0;
  height: 18%;
  z-index: 3;
  background: linear-gradient(180deg,
    #3A7E95 0%,
    #4A90A8 30%,
    #5AA0B5 60%,
    #4890A5 100%
  );
}

/* Shimmer highlights on water */
.andes__lake::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0px,
    rgba(255,255,255,0.04) 40px,
    transparent 80px,
    rgba(255,255,255,0.06) 120px,
    transparent 160px
  );
}

/* Layer 4: Near shore / rocky terrain */
.andes__shore {
  position: absolute;
  bottom: 20%;
  left: 0;
  width: 300%;
  height: 22%;
  z-index: 4;
  will-change: transform;
  background: linear-gradient(180deg, #6A7A5A 0%, #5A6A48 50%, #4E5E3C 100%);
  clip-path: polygon(
    0% 100%, 0% 55%,
    2% 48%, 4% 42%, 5.5% 38%, 7% 45%, 9% 50%,
    11% 44%, 13% 36%, 14.5% 40%, 16% 48%,
    18% 52%, 19.5% 46%, 21% 55%, 23% 50%,
    25% 42%, 27% 38%, 28.5% 44%, 30% 52%,
    32% 56%, 33.3% 55%,
    35.3% 48%, 37.3% 42%, 38.8% 38%, 40.3% 45%, 42.3% 50%,
    44.3% 44%, 46.3% 36%, 47.8% 40%, 49.3% 48%,
    51.3% 52%, 52.8% 46%, 54.3% 55%, 56.3% 50%,
    58.3% 42%, 60.3% 38%, 61.8% 44%, 63.3% 52%,
    65.3% 56%, 66.6% 55%,
    68.6% 48%, 70.6% 42%, 72.1% 38%, 73.6% 45%, 75.6% 50%,
    77.6% 44%, 79.6% 36%, 81.1% 40%, 82.6% 48%,
    84.6% 52%, 86.1% 46%, 87.6% 55%, 89.6% 50%,
    91.6% 42%, 93.6% 38%, 95.1% 44%, 96.6% 52%,
    98.6% 56%, 100% 55%, 100% 100%
  );
}

/* Layer 5: Foreground foothills */
.andes__foot {
  position: absolute;
  bottom: 12%;
  left: 0;
  width: 300%;
  height: 20%;
  z-index: 5;
  will-change: transform;
  background: linear-gradient(180deg, #5A6845 0%, #4A5838 60%, #3E4C30 100%);
  clip-path: polygon(
    0% 100%, 0% 50%,
    3% 42%, 6% 48%, 9% 40%, 12% 45%,
    15% 38%, 18% 50%, 21% 44%, 24% 52%,
    27% 46%, 30% 42%, 33.3% 50%,
    36.3% 42%, 39.3% 48%, 42.3% 40%, 45.3% 45%,
    48.3% 38%, 51.3% 50%, 54.3% 44%, 57.3% 52%,
    60.3% 46%, 63.3% 42%, 66.6% 50%,
    69.6% 42%, 72.6% 48%, 75.6% 40%, 78.6% 45%,
    81.6% 38%, 84.6% 50%, 87.6% 44%, 90.6% 52%,
    93.6% 46%, 96.6% 42%, 100% 50%, 100% 100%
  );
}

/* Ground — earthy trail */
.andes__ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(180deg, #6A5A3A 0%, #584A2E 100%);
  border-top: 2px solid #8A7A55;
  z-index: 6;
}

/* Grass tufts — spawned by JS for variety */
.andes__grass {
  position: absolute;
  bottom: 38px;
  left: 0;
  z-index: 7;
  right: 0;
  height: 10px;
  z-index: 2;
  pointer-events: none;
}

.andes__tuft {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 8px;
  background: #6D8B4A;
  border-radius: 2px 2px 0 0;
  opacity: 0.5;
}

.andes__tuft::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 3px;
  height: 6px;
  background: #5A7A3E;
  border-radius: 2px 2px 0 0;
  transform: rotate(-12deg);
}

.andes__tuft::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -3px;
  width: 3px;
  height: 5px;
  background: #7A9B55;
  border-radius: 2px 2px 0 0;
  transform: rotate(10deg);
}

/* ---- Capybara: SVG sprite ---- */

.capy__runner {
  position: absolute;
  bottom: 36px;
  left: 25%;
  width: 52px;
  height: 64px;
  z-index: 10;
  overflow: visible;
}

.capy__sprite {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
  /* SVG has its own idle bounce/lean — plays naturally when not in game */
}

/* Playing: override with speed-synced run animation */
.game-card__art--capy.playing .capy__sprite {
  animation: capy-run var(--run-speed, 0.4s) steps(4) infinite;
}

@keyframes capy-run {
  0%   { transform: translateY(0)    scaleY(1)    scaleX(1); }
  25%  { transform: translateY(-3px) scaleY(0.95) scaleX(1.02); }
  50%  { transform: translateY(0)    scaleY(1.04) scaleX(0.98); }
  75%  { transform: translateY(-3px) scaleY(0.95) scaleX(1.02); }
  100% { transform: translateY(0)    scaleY(1)    scaleX(1); }
}

/* Squash on landing */
.capy__runner.landing .capy__sprite {
  animation: capy-squash 0.12s ease-out forwards !important;
}

@keyframes capy-squash {
  0%   { transform: scaleX(1.2) scaleY(0.82) translateY(2px); }
  100% { transform: scaleX(1) scaleY(1) translateY(0); }
}

/* Airborne — lean forward, stretch */
.capy__runner.airborne .capy__sprite {
  animation: none !important;
  transform: rotate(-10deg) scaleY(1.06);
}

/* Ground shadow */
.capy__shadow {
  position: absolute;
  bottom: -3px;
  left: 6px;
  width: 38px;
  height: 8px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  transition: transform 0.15s var(--ease-out), opacity 0.15s;
}

/* ---- Game obstacles ---- */

.capy__obs {
  position: absolute;
  z-index: 10;
}

/* Rock — angular, jagged */
.capy__obs--rock {
  bottom: 40px;
  background: #6B5D4A;
  border-radius: 3px 5px 1px 2px;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.1);
}

.capy__obs--rock::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 40%;
  height: 35%;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
}

.capy__obs--rock::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -4px;
  width: 5px;
  height: 45%;
  background: #5A4E3A;
  border-radius: 3px 2px 1px 1px;
}

/* Cactus — tall with arms */
.capy__obs--cactus {
  bottom: 40px;
  background: #4A7A3A;
  border-radius: 3px 3px 1px 1px;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.1);
}

.capy__obs--cactus::before {
  content: '';
  position: absolute;
  top: 30%;
  left: -6px;
  width: 6px;
  height: 35%;
  background: #4A7A3A;
  border-radius: 3px 0 0 3px;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.06);
}

.capy__obs--cactus::after {
  content: '';
  position: absolute;
  top: 20%;
  right: -5px;
  width: 5px;
  height: 28%;
  background: #3E6E30;
  border-radius: 0 3px 3px 0;
}

/* Llama — standing silhouette, tall */
.capy__obs--llama {
  bottom: 40px;
  width: 20px;
  height: 38px;
}

/* Llama body */
.capy__obs--llama::before {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 2px;
  width: 16px;
  height: 14px;
  background: #C8B8A0;
  border-radius: 6px 8px 2px 2px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06);
}

/* Llama legs */
.capy__obs--llama::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 4px;
  width: 3px;
  height: 12px;
  background: #A89878;
  border-radius: 1px;
  box-shadow: 8px 0 0 #A89878;
}

.llama__neck {
  position: absolute;
  bottom: 22px;
  right: 2px;
  width: 5px;
  height: 14px;
  background: #C8B8A0;
  border-radius: 2px 3px 0 0;
  transform: rotate(-5deg);
}

.llama__head {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 7px;
  background: #D0C0A8;
  border-radius: 4px 5px 2px 3px;
}

/* Llama ear */
.llama__head::before {
  content: '';
  position: absolute;
  top: -3px;
  right: 1px;
  width: 3px;
  height: 4px;
  background: #B8A890;
  border-radius: 2px 2px 0 0;
}

/* Llama eye */
.llama__head::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 2px;
  height: 2px;
  background: #3A3020;
  border-radius: 50%;
}

.llama__legs { display: none; } /* handled by ::after on parent */

/* Boulder — large round rock, menacing */
.capy__obs--boulder {
  bottom: 40px;
  background: radial-gradient(circle at 35% 35%, #8A7A68, #5A4E3A);
  border-radius: 50% 45% 50% 48%;
  box-shadow:
    inset -3px -3px 0 rgba(0,0,0,0.12),
    inset 2px 2px 0 rgba(255,255,255,0.05);
}

/* Crack detail */
.capy__obs--boulder::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 25%;
  width: 45%;
  height: 1px;
  background: rgba(0,0,0,0.15);
  transform: rotate(-15deg);
}

/* Gap — hole in the ground */
.capy__obs--gap {
  bottom: 0;
  height: 40px;
  background: #1A120A;
  border-radius: 0;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.5);
  z-index: 7; /* above ground */
}

/* Gap edges */
.capy__obs--gap::before {
  content: '';
  position: absolute;
  top: 0;
  left: -3px;
  width: 3px;
  height: 100%;
  background: #4A3A28;
  border-radius: 2px 0 0 0;
}

.capy__obs--gap::after {
  content: '';
  position: absolute;
  top: 0;
  right: -3px;
  width: 3px;
  height: 100%;
  background: #4A3A28;
  border-radius: 0 2px 0 0;
}

/* Ground eruption — rock that shoots up from below */
.capy__obs--eruption {
  bottom: 40px;
  width: 10px;
  height: 28px;
  animation: eruption-rise 0.3s ease-out forwards;
}

.capy__obs--eruption::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -1px;
  width: 12px;
  height: 100%;
  background: linear-gradient(180deg, #7A6A50 0%, #5A4A35 100%);
  border-radius: 4px 3px 1px 2px;
  box-shadow: inset -2px 0 0 rgba(0,0,0,0.1);
}

/* Dust particles */
.capy__obs--eruption::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -8px;
  width: 26px;
  height: 8px;
  background: radial-gradient(ellipse, rgba(140,120,80,0.5) 0%, transparent 70%);
  border-radius: 50%;
  animation: dust-fade 0.5s ease-out forwards;
}

@keyframes eruption-rise {
  0% { transform: translateY(30px); opacity: 0.5; }
  60% { transform: translateY(-4px); }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes dust-fade {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(2); }
}

/* Warning marker — ground tremor before eruption */
.capy__warn {
  position: absolute;
  bottom: 38px;
  width: 16px;
  height: 4px;
  z-index: 8;
  animation: warn-shake 0.15s ease-in-out infinite alternate;
}

.capy__warn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(200, 60, 40, 0.6);
  border-radius: 2px;
}

.capy__warn::after {
  content: '!';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  color: rgba(200, 60, 40, 0.8);
}

@keyframes warn-shake {
  0% { transform: translateX(-1px); }
  100% { transform: translateX(1px); }
}

/* ---- Condor (CSS silhouette) ---- */

.capy__condor {
  position: absolute;
  z-index: 10;
  width: 36px;
  height: 14px;
}

/* Body */
.capy__condor::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 8px;
  background: #1A1520;
  border-radius: 5px 5px 3px 3px;
}

/* Wings */
.capy__condor::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 4px;
  background: #2A2030;
  border-radius: 2px;
  animation: condor-flap 0.5s ease-in-out infinite;
}

@keyframes condor-flap {
  0%, 100% { transform: scaleY(1) rotate(0deg); top: 2px; }
  50% { transform: scaleY(0.6) rotate(0deg); top: 5px; }
}

/* Head */
.capy__condor-head {
  position: absolute;
  top: 2px;
  right: -3px;
  width: 6px;
  height: 5px;
  background: #E8E0D8;
  border-radius: 50%;
  z-index: 1;
}

/* ---- Death screen ---- */

.capy__death {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(30, 20, 15, 0.7);
  backdrop-filter: blur(4px);
}

.game-card__art--capy.dead .capy__death {
  display: flex;
  animation: death-in 0.3s ease-out;
}

@keyframes death-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.capy__death-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.capy__death-score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  line-height: 1;
}

.capy__death-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.capy__death-retry {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--dark);
  background: rgba(255,255,255,0.9);
  border: none;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}

.capy__death-retry:hover {
  transform: scale(1.05);
}

.capy__death-retry:active {
  transform: scale(0.96);
}

/* Death shake on character */
.capy__runner.hit {
  animation: hit-shake 0.3s ease-out;
}

@keyframes hit-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px) rotate(-5deg); }
  40% { transform: translateX(4px) rotate(5deg); }
  60% { transform: translateX(-2px) rotate(-3deg); }
  80% { transform: translateX(2px); }
}

/* Score */
.capy__score {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-4);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.5);
  z-index: 12;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity var(--dur-state) var(--ease-out);
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.game-card__art--capy.playing .capy__score {
  opacity: 1;
}

/* ---- Play Overlay: centered, beautiful ---- */

.capy__overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.08) 100%);
  transition: opacity var(--dur-enter) var(--ease-out);
}

.game-card__art--capy.playing .capy__overlay {
  opacity: 0;
  pointer-events: none;
}

.capy__overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

/* "Juega un Preview" — warm CTA badge */
.capy__overlay-badge {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--dark);
  background: linear-gradient(135deg, var(--gold) 0%, #FFA455 100%);
  padding: 8px 20px;
  border-radius: var(--radius-full);
  border: none;
  box-shadow:
    0 2px 10px rgba(232, 134, 7, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform var(--dur-press) var(--ease-out),
              box-shadow var(--dur-press) var(--ease-out);
}

.capy__overlay:hover .capy__overlay-badge {
  transform: translateY(-1px);
  box-shadow:
    0 4px 18px rgba(232, 134, 7, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.12);
}

/* Play circle — subtler, the badge is the star */
.capy__play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out),
              background var(--dur-press) var(--ease-standard),
              border-color var(--dur-press) var(--ease-standard);
}

.capy__play-btn:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}

.capy__play-btn:active {
  transform: scale(0.94);
}

.capy__play-btn-icon {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  padding-left: 2px;
}

/* Hint text — show correct one per device */
.capy__overlay-hint--touch,
.capy__overlay-keys--touch { display: none; }

/* Tap icon — circle with ripple */
.capy__touch-tap {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  position: relative;
}

.capy__touch-tap::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}

.capy__touch-tap::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
}

/* Swipe icon — line with arrow */
.capy__touch-swipe {
  width: 28px;
  height: 28px;
  position: relative;
}

.capy__touch-swipe::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 16px;
  height: 2px;
  background: rgba(255,255,255,0.35);
  border-radius: 1px;
}

/* Arrow head */
.capy__touch-swipe::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 4px;
  width: 7px;
  height: 7px;
  border-top: 2px solid rgba(255,255,255,0.35);
  border-right: 2px solid rgba(255,255,255,0.35);
  transform: translateY(-50%) rotate(45deg);
}

@media (pointer: coarse) {
  .capy__overlay-hint--desktop,
  .capy__overlay-keys--desktop { display: none; }
  .capy__overlay-hint--touch,
  .capy__overlay-keys--touch { display: flex; }
}

.capy__overlay-hint {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
}

/* Key instruction row */
.capy__overlay-keys {
  display: flex;
  gap: var(--sp-6);
}

.capy__key-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.capy__kbd {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
}

.capy__kbd-label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Pause pill (visible only when playing) ---- */

.capy__pause {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-4);
  z-index: 12;
  display: none;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--dur-press) var(--ease-standard);
}

.capy__pause:hover {
  background: rgba(0, 0, 0, 0.35);
}

.game-card__art--capy.playing .capy__pause {
  display: flex;
}

.game-card__body {
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
}

.game-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.game-card__platform {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.45;
}

.game-card__status {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 3px 10px;
  border: 1px solid rgba(255, 227, 110, 0.25);
  border-radius: var(--radius-full);
}

.game-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}

.game-card__desc {
  font-size: 0.9rem;
  line-height: 1.65;
  opacity: 0.5;
  text-wrap: pretty;
}

/* ---- About ---- */

.about {
  position: relative;
  z-index: 2;
  padding: var(--sp-24) var(--sp-12) var(--sp-32);
  text-align: center;
}

.about__content {
  max-width: 640px;
  margin: 0 auto;
}

.about__eyebrow {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--sp-6);
}

.about__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-6);
  text-wrap: balance;
}

.about__highlight {
  color: var(--orange);
  position: relative;
}

.about__highlight::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 3px;
  background: var(--orange);
  border-radius: 2px;
  opacity: 0.35;
}

.about__text {
  font-size: 1.05rem;
  line-height: 1.8;
  opacity: 0.55;
  margin-bottom: var(--sp-8);
  text-wrap: pretty;
}

.about__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--teal);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid rgba(25, 193, 216, 0.2);
  border-radius: var(--radius-full);
  cursor: auto;
  transition: transform var(--dur-press) var(--ease-out),
              background var(--dur-press) var(--ease-standard),
              border-color var(--dur-press) var(--ease-standard);
}

.about__link:hover {
  transform: translateY(-2px);
  background: rgba(25, 193, 216, 0.06);
  border-color: rgba(25, 193, 216, 0.4);
}

.about__link:active {
  transform: translateY(0) scale(0.98);
}

.about__link svg {
  transition: transform var(--dur-press) var(--ease-out);
}

.about__link:hover svg {
  transform: translate(2px, -2px);
}

/* ---- Footer ---- */

.footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border-subtle);
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.footer__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.footer__tagline {
  font-size: 0.8rem;
  opacity: 0.35;
}

.footer__copy {
  font-size: 0.8rem;
  opacity: 0.3;
}

.footer__copy a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  opacity: 0.8;
  transition: opacity var(--dur-press) var(--ease-standard);
  cursor: auto;
}

.footer__copy a:hover {
  opacity: 1;
}

/* ---- Scroll Reveal ---- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  /* Entrance: ease-out, under 300ms */
  transition: opacity var(--dur-enter) var(--ease-out),
              transform var(--dur-enter) var(--ease-out);
}

/* Stagger: 30ms per item (under 50ms rule) */
.reveal.visible:nth-child(2) { transition-delay: 30ms; }
.reveal.visible:nth-child(3) { transition-delay: 60ms; }
.reveal.visible:nth-child(4) { transition-delay: 90ms; }
.reveal.visible:nth-child(5) { transition-delay: 120ms; }

/* ---- Reduced Motion ---- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .cursor-glow,
  .floating-shapes {
    display: none;
  }
}

/* ---- Responsive ---- */

/* ---- Tablet (max 900px) ---- */

@media (max-width: 900px) {
  .nav { padding: var(--sp-4) var(--sp-6); }
  .hero { padding: 7rem var(--sp-6) var(--sp-16); }
  .featured { padding: var(--sp-16) var(--sp-6) var(--sp-24); }

  /* Stack featured card vertically on tablet */
  .featured__card {
    grid-template-columns: 1fr;
  }

  .featured__art {
    min-height: 220px;
    aspect-ratio: 16 / 9;
  }

  .featured__info {
    padding: var(--sp-6) var(--sp-8) var(--sp-8);
  }

  .upcoming { padding: var(--sp-8) var(--sp-6) var(--sp-24); }

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

  .about { padding: var(--sp-16) var(--sp-6) var(--sp-24); }

  .footer__inner {
    flex-direction: column;
    gap: var(--sp-4);
    text-align: center;
    padding: var(--sp-8) var(--sp-6);
  }

  .footer__brand {
    flex-direction: column;
    gap: var(--sp-2);
  }

  .cursor-glow { display: none; }

  /* Capyjump: touch controls overlay */
  .capy__overlay-hint {
    content: 'Toca para jugar';
  }

  .capy__overlay-keys {
    gap: var(--sp-4);
  }

  .capy__kbd {
    width: 36px;
    height: 34px;
    font-size: 1rem;
  }
}

/* ---- Mobile (max 600px) ---- */

@media (max-width: 600px) {
  .nav {
    padding: var(--sp-3) var(--sp-4);
  }

  .nav__logo {
    font-size: 1.1rem;
    gap: var(--sp-2);
  }

  .nav__logo-star {
    width: 22px;
    height: 22px;
  }

  .nav__links {
    gap: var(--sp-6);
  }

  .nav__link {
    font-size: 0.8rem;
  }

  .hero {
    padding: 6rem var(--sp-4) var(--sp-12);
    min-height: auto;
  }

  .hero__title {
    font-size: clamp(2rem, 10vw, 3rem);
    margin-bottom: var(--sp-6);
  }

  .hero__badge {
    font-size: 0.65rem;
    padding: var(--sp-1) var(--sp-3);
    margin-bottom: var(--sp-6);
  }

  .hero__sub {
    font-size: 0.95rem;
    margin-bottom: var(--sp-8);
  }

  .hero__cta {
    font-size: 0.85rem;
    padding: var(--sp-3) var(--sp-6);
  }

  .hero__scroll-hint { display: none; }

  .featured { padding: var(--sp-8) var(--sp-4) var(--sp-16); }

  .featured__label,
  .upcoming__label {
    font-size: 0.7rem;
    margin-bottom: var(--sp-6);
  }

  .featured__art {
    min-height: 180px;
  }

  .featured__info {
    padding: var(--sp-4) var(--sp-4) var(--sp-6);
  }

  .featured__title {
    font-size: 1.6rem;
  }

  .featured__desc {
    font-size: 0.9rem;
  }

  .featured__play-btn {
    font-size: 0.85rem;
    padding: var(--sp-3) var(--sp-6);
  }

  .upcoming { padding: var(--sp-4) var(--sp-4) var(--sp-16); }

  .game-card__art {
    height: 200px;
  }

  .game-card__title {
    font-size: 1.3rem;
  }

  .about {
    padding: var(--sp-12) var(--sp-4) var(--sp-16);
  }

  .about__title {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .about__text {
    font-size: 0.95rem;
  }

  /* Capyjump mobile: touch-friendly overlay */
  .capy__play-btn {
    width: 48px;
    height: 48px;
  }

  .capy__play-btn-icon {
    font-size: 0.9rem;
  }

  .capy__overlay-badge {
    font-size: 0.6rem;
  }

  .capy__overlay-keys {
    gap: var(--sp-3);
  }

  .capy__kbd {
    width: 28px;
    height: 26px;
    font-size: 0.75rem;
  }

  .capy__kbd-label {
    font-size: 0.5rem;
  }
}

/* ---- Small mobile (max 400px) ---- */

@media (max-width: 400px) {
  .hero__title {
    font-size: 1.8rem;
  }

  .featured__title {
    font-size: 1.4rem;
  }

  .nav__logo-wordmark {
    font-size: 0.9rem;
  }
}