/* --- Base --- */
html,body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:#0d0d0d;
  color:#fff;
  max-width:100%;
  overflow-x:hidden;              /* never allow horizontal overflow */
}
/* Subtle, layered site background for depth */
body::before{
  content:"";
  position:fixed;
  inset:-10vmax;                  /* bleed to avoid edges on resize */
  z-index:-2;
  background:
    radial-gradient(60vmax 60vmax at -10% -10%, rgba(229,9,20,.14), transparent 60%),
    radial-gradient(50vmax 50vmax at 110% 0%, rgba(60,130,246,.10), transparent 55%),
    radial-gradient(70vmax 70vmax at 50% 120%, rgba(0, 220, 190, .08), transparent 60%),
    linear-gradient(180deg, #0f0f10 0%, #0b0b0c 100%);
  filter: saturate(110%);
}
/* Very faint texture/grid to soften large flats */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.12;
  mix-blend-mode: overlay;
}
*, *::before, *::after{ box-sizing:border-box; }

header{
  position:sticky;
  top:0;
  background:rgba(12,12,12,.65);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid rgba(229,9,20,.35);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  z-index:100;
}

nav{
  display:flex;
  gap:1rem;
  align-items:center;
  padding:.75rem 1rem;
}

nav a{
  color:#e50914;
  text-decoration:none;
  font-weight:500;
}
nav a:hover{ color:#fff; }

main{
  max-width:1200px;
  margin:0 auto;
  padding:2rem 1rem 4rem;
}

.hero{
  position:relative;
  text-align:center;
  padding:6rem 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  box-shadow:
    0 12px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(229,9,20,.06);
  overflow:hidden;
}
/* Soft ambient glows behind hero copy */
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
  filter: blur(30px);
}
.hero::before{
  top:-20%; left:-10%; width:60%; height:160%;
  background: radial-gradient(closest-side, rgba(229,9,20,.22), transparent 70%);
  transform: rotate(-6deg);
}
.hero::after{
  right:-10%; bottom:-30%; width:55%; height:150%;
  background: radial-gradient(closest-side, rgba(60,130,246,.18), transparent 70%);
}
.hero h1{
  font-size: clamp(2.25rem, 6vw, 4rem);
  margin-bottom:.5rem;
  letter-spacing:.2px;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.hero h1::after{
  content:"";
  display:block;
  width:120px; height:3px; margin:.6rem auto 0;
  border-radius:2px;
  background: linear-gradient(90deg, rgba(229,9,20,.9), rgba(229,9,20,.2));
}
.hero p{
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  color:#d0d0d4;
  max-width: 42ch;
  margin: 0 auto;
}

.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;
  margin-top:4rem;
}
.feature{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  padding:2rem;
  border-radius:.75rem;
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(229,9,20,.04) inset;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(229,9,20,.08) inset;
}
.feature h2{ margin-top:0; color:#e50914; }

.cta{ text-align:center; margin-top:4rem; }

button{
  padding:.5rem 1rem;
  border-radius:.5rem;
  border:1px solid #e50914;
  background:#e50914;
  color:#fff;
  cursor:pointer;
  transition:background .25s,color .25s, box-shadow .25s, transform .25s;
}
button:hover{
  background:#fff; color:#e50914;
  box-shadow: 0 8px 24px rgba(229,9,20,.25);
  transform: translateY(-1px);
}

footer{
  text-align:center;
  padding:2rem 1rem;
  border-top:1px solid #111;
  color:#666;
}
footer p{ margin:0; }

/* Gentle vignette around main content */
main{ position:relative; }
main::after{
  content:"";
  position:absolute; inset:-40px;
  pointer-events:none; z-index:-1;
  background: radial-gradient(70% 60% at 50% 0%, rgba(255,255,255,.06), transparent 70%);
}

/* --- Media / Video --- */
.media { margin-top: 4rem; text-align:center; }
.media h2{ font-size:2rem; margin:.25rem 0 .75rem; letter-spacing:.2px; }
.video-wrap{
  width:100%;
  max-width:1200px; margin:0 auto;
  border-radius:.75rem; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
  background: radial-gradient(1200px 300px at 50% -50%, rgba(229,9,20,.15), transparent 60%), #0a0a0a;
}
.video-frame{ position:relative; padding-top:56.25%; }
iframe.cf-video{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.caption { color:#ccc; font-size:1.1rem; max-width:900px; margin:1rem auto 0; line-height:1.6; }
/* Hide the old verbose caption in this section */
.media .caption:not(.caption--short){ display:none; }

/* --- Gallery --- */
.gallery { margin-top: 4rem; }
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}
.card{
  background:#111;
  border:1px solid #1c1c1c;
  border-radius:.5rem;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.35); }
.card img, .card video{ display:block; width:100%; height:160px; object-fit:cover; }
.card .card-body{ padding:.75rem; }
.card .title{ margin:0; font-size:1rem; color:#eee; }
.card .meta{ margin:.25rem 0 0; color:#999; font-size:.85rem; }

/* --- Game (inline) --- */
.game{ margin-top:4rem; text-align:center; }
#gameHost{ display:flex; justify-content:center; }

/* Strict inline sizing: never wider than the viewport */
#snakeCanvas{
  background: repeating-linear-gradient(0deg,#0a0a0a,#0a0a0a 8px,#0d0d0d 8px,#0d0d0d 16px);
  border:1px solid #222; border-radius:.5rem; outline:none;
  box-shadow:0 0 12px rgba(0,0,0,.35);
  display:block; margin:0 auto;
  width:clamp(280px, 92vw, 640px);  /* <= this prevents widening the page */
  height:auto;
  touch-action:none;
}
.hint{ color:#aaa; font-size:.9rem; margin-top:.5rem; }
.nav a[aria-current="page"]{ color:#fff; border-bottom:2px solid #e50914; }

/* --- Overlay (modal) for pop-out game --- */
/* We use a JS-updated --vh variable for reliable mobile viewport height */
.overlay{
  position:fixed;
  inset:0;
  width:100vw;
  height:calc(var(--vh, 1dvh) * 100); /* fallback to dvh if JS not run */
  background:rgba(0,0,0,.7);
  display:grid;                 /* grid centers perfectly */
  place-items:center;           /* center both axes */
  z-index:10000;                /* above header */
  -webkit-backdrop-filter:saturate(120%) blur(2px);
  backdrop-filter:saturate(120%) blur(2px);
  padding:4vmin;                /* breathing room on tiny screens */
  display:none;                 /* hidden by default */
}
.overlay.open{ display:grid; }

.overlay-inner{
  position:relative;
  background:#0f0f0f;
  border:1px solid #222;
  border-radius:.75rem;
  padding:clamp(.5rem, 2vmin, 1rem);
  box-shadow:0 10px 40px rgba(0,0,0,.6);
  width:min(92vw, 900px);
  max-height:calc(var(--vh, 1dvh) * 92);
  overflow:hidden;              /* keep everything inside */
}

.overlay-close{
  position:absolute; top:.25rem; right:.5rem;
  background:transparent; border:0; color:#aaa;
  font-size:2rem; line-height:1; cursor:pointer;
}
.overlay-close:hover{ color:#fff; }

/* Lock background scroll when modal is open */
body.modal-open{
  overflow:hidden;
  height:calc(var(--vh, 1dvh) * 100);
  overscroll-behavior:contain;
}

/* Canvas inside modal: always fully visible, centered, contained */
.overlay #snakeCanvas{
  width:100%;
  height:auto;
  max-height:calc(var(--vh, 1dvh) * 85);
  object-fit:contain;
}

/* Tighten further on very small screens */
@media (max-width: 600px){
  .overlay{
    padding:3vmin;
  }
  .overlay-inner{
    border-radius:.5rem;
    width:min(96vw, 900px);
    max-height:calc(var(--vh, 1dvh) * 96);
  }
  .overlay #snakeCanvas{
    max-height:calc(var(--vh, 1dvh) * 88);
  }
}