/* ===========================================================================
   Wall Spaghetti — bright, friendly, playful (light theme)
   Fonts: Fredoka (display) · Nunito (body) · Silkscreen (tiny pixel labels)
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Lilita+One&family=Nunito:wght@400;600;700;800&family=Silkscreen:wght@400;700&display=swap');

:root {
  --cream:   #fbf4e8;
  --cream-2: #fffdf8;
  --card:    #ffffff;

  --ink:     #2a2438;
  --muted:   #6d6780;
  --faint:   #9a94ab;
  --line:    #ece0cc;

  --blue:    #0088ff;
  --blue-d:  #0066cc;   /* button underside */
  --blue-ink:#00559f;
  --blue-sky:#dcefff;

  --yellow:  #ffc23d;
  --yellow-d:#e09a12;
  --coral:   #ff6b7d;
  --coral-d: #e04a5e;
  --mint:    #35cf9a;

  --maxw:    1080px;
  --font-logo:    'Lilita One', system-ui, sans-serif;  /* game-y wordmark / big titles */
  --font-display: 'Fredoka', system-ui, sans-serif;     /* headings / UI */
  --font-body:    'Nunito', system-ui, sans-serif;
  --font-pixel:   'Silkscreen', monospace;
}

* { box-sizing: border-box; }
/* overscroll-behavior stops the rubber-band bounce, so no stray background
   colour surfaces above the hero or below the footer when you overscroll */
html { scroll-behavior: smooth; overscroll-behavior-y: none; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1, h2 { font-family: var(--font-logo); font-weight: 400; line-height: 1.04; letter-spacing: 0.01em; margin: 0; }
h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
p { margin: 0 0 1rem; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-ink); }

/* pixel mini-label (sparse nod to the logo) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-sky);
  padding: 6px 11px;
  border-radius: 8px;
}

/* checkerboard chess-nod divider */
.checker {
  height: 14px;
  background-image:
    repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%);
  background-size: 14px 14px;
  opacity: 0.12;
}

/* --------------------------------------------------------------- Buttons - */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  padding: 13px 24px;
  border-radius: 15px;
  border: none;
  cursor: pointer;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 5px 0 var(--blue-d);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}
.btn:hover  { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 7px 0 var(--blue-d); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--blue-d); }
.btn svg { width: 19px; height: 19px; }

.btn-yellow  { background: var(--yellow); color: var(--ink); box-shadow: 0 5px 0 var(--yellow-d); }
.btn-yellow:hover, .btn-yellow:active { color: var(--ink); }
.btn-yellow:active { box-shadow: 0 2px 0 var(--yellow-d); }
.btn-ghost   { background: var(--card); color: var(--ink); box-shadow: 0 5px 0 var(--line); }
.btn-ghost:hover, .btn-ghost:active { color: var(--ink); }
.btn-ghost:active { box-shadow: 0 2px 0 var(--line); }
.btn-discord { background: #5865f2; box-shadow: 0 5px 0 #3b45c0; }
.btn-discord:hover, .btn-discord:active { color: #fff; }
.btn-discord:active { box-shadow: 0 2px 0 #3b45c0; }

/* ---------------------------------------------------------------- Nav ---- */
.nav { padding: 18px 0; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand img { width: 42px; height: 42px; image-rendering: pixelated; transition: transform 0.2s ease; }
.brand:hover img { transform: rotate(-9deg) scale(1.08); }
.brand span { font-family: var(--font-logo); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.01em; }
.brand span .b { color: var(--blue); }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a:not(.btn) {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  color: var(--muted); padding: 9px 14px; border-radius: 11px;
}
.nav-links a:not(.btn):hover { color: var(--ink); background: rgba(0,0,0,0.04); }
.nav-links a.active { color: var(--blue); }

/* --------------------------------------------------------------- Home ---- */
/* full-viewport hero, filled with the brand blue */
.home-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: hidden;
  background: radial-gradient(125% 95% at 50% 0%, #33a3ff 0%, var(--blue) 52%, #0070dc 100%);
}
/* nav fixed over the page; white while over the hero, cream once scrolled past */
.nav-hero {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
/* brand hidden while the hero (with its big logo + title) is on screen */
.nav-hero .brand {
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.nav-hero .brand span, .nav-hero .brand span .b { color: #fff; }
.nav-hero .nav-links a:not(.btn) { color: rgba(255,255,255,0.88); }
.nav-hero .nav-links a:not(.btn):hover { color: #fff; background: rgba(255,255,255,0.16); }
.nav-hero .btn-discord { background: #fff; color: var(--blue); box-shadow: 0 5px 0 rgba(0,0,0,0.18); }
.nav-hero .btn-discord:hover, .nav-hero .btn-discord:active { color: var(--blue); }

/* scrolled past the hero: reveal brand, switch to the cream bar */
.nav-hero.scrolled { background: var(--cream); box-shadow: 0 3px 0 var(--line); }
.nav-hero.scrolled .brand { opacity: 1; transform: none; pointer-events: auto; }
.nav-hero.scrolled .brand span { color: var(--ink); }
.nav-hero.scrolled .brand span .b { color: var(--blue); }
.nav-hero.scrolled .nav-links a:not(.btn) { color: var(--muted); }
.nav-hero.scrolled .nav-links a:not(.btn):hover { color: var(--ink); background: rgba(0,0,0,0.04); }
.nav-hero.scrolled .btn-discord { background: #5865f2; color: #fff; box-shadow: 0 5px 0 #3b45c0; }

.hero-inner {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 96px 24px 40px;
}
.hero-inner .pot {
  width: 196px; height: 196px; margin: 0 auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 16px 26px rgba(0, 40, 90, 0.45));
}
.hero-inner h1 {
  font-size: clamp(2.7rem, 10vw, 5.8rem);
  margin: 24px 0 0;
  color: #fff;
  text-shadow: 0 5px 0 rgba(0, 48, 104, 0.42);
}
.hero-inner h1 .b { color: #fff; }
.hero-inner .tagline {
  max-width: 500px; margin: 18px auto 0;
  font-size: 1.25rem; color: rgba(255,255,255,0.92);
}
.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 46px;
  font-family: var(--font-pixel);
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}
.scroll-cue:hover { color: #fff; }
.scroll-cue .chev { font-size: 1.3rem; animation: nudge 1.6s ease-in-out infinite; line-height: 1; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* scroll-reveal (game list animates in) */
.reveal { opacity: 0; transform: translateY(38px) scale(0.98); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .scroll-cue .chev { animation: none; } }

/* featured game card */
.home-featured { padding: 20px 24px 90px; }
.showcase {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 34px;
  align-items: center;
  background: var(--card);
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 20px 50px -22px rgba(0, 90, 180, 0.4);
}
.showcase .art { border-radius: 18px; overflow: hidden; box-shadow: 0 12px 24px -12px rgba(0,0,0,0.4); transform: rotate(-1.5deg); }
.showcase .art img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 72% center; }
.showcase h2 { font-size: clamp(2.1rem, 5vw, 3.2rem); margin: 12px 0 12px; }
.showcase p { color: var(--muted); margin: 0 0 22px; }
.showcase .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* -------------------------------------------------------------- Sections - */
.section { padding: 70px 0; }
.section-head { text-align: center; margin-bottom: 42px; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 12px 0 0; }
.section-head p { color: var(--muted); margin: 12px 0 0; }

/* --------------------------------------------------------------- About --- */
.about-hero { text-align: center; padding: 50px 0 20px; }
.about-hero h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); margin-top: 16px; }
.about-card {
  max-width: 720px; margin: 40px auto 0;
  background: var(--card);
  border-radius: 24px;
  padding: 38px 40px;
  box-shadow: 0 16px 40px -22px rgba(0,90,180,0.35);
  text-align: center;
}
.about-card p { font-size: 1.2rem; color: var(--muted); }
.about-card p strong { color: var(--ink); font-weight: 800; }
.about-card .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

.cast { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 720px; margin: 26px auto 0; }
.char {
  display: flex; gap: 20px; align-items: center;
  background: var(--card); border-radius: 20px; padding: 22px;
  box-shadow: 0 12px 30px -20px rgba(0,90,180,0.4);
}
.char .portrait {
  width: 104px; height: 104px; flex-shrink: 0;
  border-radius: 16px; object-fit: contain; image-rendering: pixelated;
  background: var(--blue-sky);
}
.char.queen .portrait { background: #ffe1e8; }
.char .role { font-family: var(--font-pixel); font-size: 0.54rem; text-transform: uppercase; color: var(--coral-d); }
.char.hero .role { color: var(--yellow-d); }
.char h3 { font-size: 1.35rem; margin: 6px 0 6px; }
.char p { color: var(--muted); font-size: 1.02rem; margin: 0; }

/* --------------------------------------------------- Game detail page ---- */
.game-hero { padding: 30px 0 10px; }
.game-hero .banner {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 22px 50px -24px rgba(0,0,0,0.6);
}
.game-hero .banner img { width: 100%; max-height: 440px; object-fit: cover; object-position: center 28%; }
.game-hero .banner .overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; padding: 38px;
  background: linear-gradient(90deg, rgba(20,16,34,0.9) 4%, rgba(20,16,34,0.4) 44%, transparent 78%);
}
.game-hero .banner .inner { max-width: 540px; }
.game-hero .banner h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); color: #fff; margin: 14px 0 0; }
.game-hero .banner .lead { color: #eae6f5; font-size: 1.2rem; margin: 14px 0 0; }
.game-hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }

.meta-bar {
  max-width: var(--maxw); margin: 24px auto 0;
  background: var(--card); border-radius: 18px;
  padding: 20px 26px;
  display: flex; flex-wrap: wrap; gap: 16px 40px;
  box-shadow: 0 10px 30px -22px rgba(0,90,180,0.4);
}
.meta-item .k { font-family: var(--font-pixel); font-size: 0.56rem; text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 4px; }
.meta-item .v { font-family: var(--font-display); font-weight: 600; }
.meta-item .v.pos { color: var(--mint); }

/* body copy block */
.copy-block { max-width: 720px; margin: 0 auto; text-align: center; }
.copy-block p { font-size: 1.18rem; color: var(--muted); }

/* feature cards (colorful) */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature {
  background: var(--card); border-radius: 22px; padding: 28px; text-align: center;
  box-shadow: 0 14px 34px -22px rgba(0,90,180,0.45);
  transition: transform 0.15s ease;
}
.feature:hover { transform: translateY(-6px) rotate(-1deg); }
.feature .ico {
  width: 66px; height: 66px; margin: 0 auto 16px;
  display: grid; place-items: center; font-size: 2rem;
  border-radius: 20px;
}
.feature:nth-child(1) .ico { background: var(--blue-sky); }
.feature:nth-child(2) .ico { background: #ffe1e5; }
.feature:nth-child(3) .ico { background: #fff0cc; }
.feature h3 { font-size: 1.3rem; margin: 0 0 8px; }
.feature p { color: var(--muted); font-size: 1.02rem; margin: 0; }

/* screenshots — full-bleed dark band (the shots are dark, so let them own it) */
.shots-section { background: #14111f; padding: 76px 0; }
.shots-section .wrap { max-width: 1200px; }
.shots-section .section-head h2 { color: #fff; }
.shots-section .eyebrow { background: rgba(255,255,255,0.1); color: #cfe4ff; }
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.shots a {
  display: block; border-radius: 16px; line-height: 0;
  background: #211d33;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 34px -20px rgba(0,0,0,0.8);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.shots a.wide { grid-column: 1 / -1; }
.shots a:nth-child(2) { transform: rotate(-1deg); }
.shots a:nth-child(3) { transform: rotate(1.1deg); }
.shots a:nth-child(4) { transform: rotate(0.8deg); }
.shots a:nth-child(5) { transform: rotate(-1.1deg); }
.shots a:hover { transform: translateY(-4px) rotate(0deg); box-shadow: 0 22px 40px -20px rgba(0,0,0,0.9); }
.shots img { width: 100%; border-radius: 10px; image-rendering: pixelated; }

/* tags */
.tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tag {
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  color: var(--blue-ink); background: var(--blue-sky);
  padding: 7px 16px; border-radius: 999px;
  transition: transform 0.12s ease;
}
.tag:hover { transform: translateY(-2px) rotate(-2deg); }
.tag:nth-child(3n+2) { color: var(--coral-d); background: #ffe1e5; }
.tag:nth-child(3n+3) { color: var(--yellow-d); background: #fff0cc; }

/* big CTA panel */
.cta-band {
  text-align: center;
  background: var(--blue);
  color: #fff;
  border-radius: 28px;
  padding: 56px 30px;
  box-shadow: 0 20px 44px -22px rgba(0, 136, 255, 0.7);
}
.cta-band h2 { font-size: clamp(2rem, 4vw, 2.8rem); color: #fff; }
.cta-band p { opacity: 0.9; margin: 12px 0 26px; }
.cta-band .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------- Footer --- */
.footer { border-top: 3px solid var(--line); padding: 40px 0; margin-top: 20px; }
.footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.footer .brand span { font-size: 1.05rem; }
.footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer nav a { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--muted); }
.footer nav a:hover { color: var(--blue); }
.footer .copy { color: var(--faint); font-size: 0.85rem; width: 100%; }

/* --------------------------------------------------------- Responsive ---- */
@media (max-width: 820px) {
  .showcase { grid-template-columns: 1fr; }
  .showcase .art { order: -1; }
  .feature-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .cast { grid-template-columns: 1fr; }
  .nav-links a:not(.btn):not(.nav-keep) { display: none; }
}
@media (max-width: 560px) {
  .shots { grid-template-columns: 1fr; }
  .shots a { transform: none !important; }
  .char { flex-direction: column; text-align: center; }
  .game-hero .banner .overlay { background: linear-gradient(0deg, rgba(20,16,34,0.92) 22%, rgba(20,16,34,0.5) 100%); }
}