/* =========================================================================
   UP VILLE — shared stylesheet for the Upvil floating-island site.
   One stylesheet drives every page (home, salad-shark, privacy, terms,
   contact). Theme: a soft, hand-painted tropical island in the sky.
   ========================================================================= */

:root {
  /* Sky */
  --sky-top: #6fc1e0;
  --sky-mid: #a9dcea;
  --sky-bot: #dff2f6;
  --sun: #fff4cf;

  /* Land & sea */
  --sand: #f6e6c4;
  --sand-deep: #ecd3a0;
  --water: #2bb3b0;
  --water-deep: #1f8f8c;
  --leaf: #5fae5f;
  --leaf-deep: #3d8b4a;

  /* Accents */
  --mango: #ff9a4d;
  --coral: #ff6f61;
  --berry: #ff5d8f;

  /* Neutrals */
  --cream: #fff8ea;
  --paper: #fffdf7;
  --ink: #2a3d45;
  --ink-soft: #51666f;
  --ink-faint: #7d9099;

  /* Type */
  --font-display: 'Baloo 2', 'Varela Round', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  /* Radii */
  --r-sm: 12px;
  --r: 20px;
  --r-lg: 32px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-card: 0 18px 40px -18px rgba(31, 74, 90, .45);
  --shadow-float: 0 26px 60px -22px rgba(31, 74, 90, .55);
  --shadow-soft: 0 10px 24px -14px rgba(31, 74, 90, .4);

  --maxw: 1120px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.65;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-bot) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: keep the sand pinned to the bottom on short pages */
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
.beach-footer { flex-shrink: 0; }

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

a { color: var(--water-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.08;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .2px;
}

/* Pixel-art game sprites stay crisp when scaled up; soft painterly
   art (clouds, island) opts back out via .smooth. */
.sprite { image-rendering: pixelated; image-rendering: crisp-edges; }
.smooth { image-rendering: auto; }

/* =========================================================================
   Ambient sky scene (injected on every page by /js/scene.js)
   ========================================================================= */
.sky-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.sky-sun {
  position: absolute;
  top: 8%; right: 12%;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sun) 0%, rgba(255,244,207,.55) 40%, rgba(255,244,207,0) 70%);
  animation: sun-pulse 9s ease-in-out infinite;
}
/* Clouds + birds are positioned at the left edge (no `left`/`right`); their
   horizontal position is driven entirely by scene.js via translateX, so they
   start off-screen left and are moved across each frame. */
.sky-cloud {
  position: absolute;
  opacity: .92;
  will-change: transform;
  transform: translateX(-9999px);   /* parked off-screen until JS places it */
}
.sky-cloud.c1 { top: 14%; width: 220px; }
.sky-cloud.c2 { top: 30%; width: 320px; opacity: .8; }
.sky-cloud.c3 { top: 52%; width: 180px; opacity: .7; }
.sky-cloud.c4 { top: 68%; width: 260px; opacity: .6; }
.sky-bird {
  position: absolute;
  width: 46px;
  will-change: transform;
  transform: translateX(-9999px);
}
.sky-bird.b1 { top: 22%; }
.sky-bird.b2 { top: 40%; width: 34px; }
.sky-bird.b3 { top: 58%; width: 28px; }
.sky-bird.b4 { top: 30%; width: 40px; }

@keyframes sun-pulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* =========================================================================
   Navigation — floating "cloud bar"
   ========================================================================= */
.cloudbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: var(--maxw);
  margin: 14px auto;
  padding: 10px 18px;
  background: rgba(255, 253, 247, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-soft);
  width: calc(100% - 28px);
}
.cloudbar .brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: .5px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cloudbar .brand .dot { color: var(--coral); }
.navlinks {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.navlinks a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.navlinks a:hover { background: rgba(43,179,176,.14); color: var(--water-deep); transform: translateY(-1px); }
.navlinks a.active { background: var(--ink); color: var(--cream); }
.navlinks a.cta { background: linear-gradient(135deg, var(--mango), var(--coral)); color: #fff; box-shadow: var(--shadow-soft); }
.navlinks a.cta:hover { color: #fff; filter: brightness(1.05); }

/* =========================================================================
   Layout helpers
   ========================================================================= */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
main { display: block; }
section { position: relative; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--water-deep);
  background: rgba(255,255,255,.75);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-soft);
}

/* Sticker logo (the upvil wordmark) */
.sticker-logo {
  font-family: var(--font-display);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow:
    -3px 0 0 var(--ink), 3px 0 0 var(--ink),
    0 -3px 0 var(--ink), 0 3px 0 var(--ink),
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink),
    -3px 3px 0 var(--ink), 3px 3px 0 var(--ink),
    0 8px 0 rgba(42,61,69,.35), -10px 12px 0 rgba(42,61,69,.18);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--mango), var(--coral));
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); filter: brightness(1.04); text-decoration: none; }
.btn.ghost { background: rgba(255,255,255,.9); color: var(--ink); border: 2px solid #fff; }

/* Store badges */
.store-row { display: flex; flex-wrap: wrap; gap: 14px; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px 11px 18px;
  background: #1b2a30;
  color: #fff;
  border-radius: 16px;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
  border: 2px solid rgba(255,255,255,.12);
}
.store-badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); text-decoration: none; }
.store-badge svg { width: 28px; height: 28px; flex: none; }
.store-badge .sb-text { display: flex; flex-direction: column; line-height: 1.1; }
.store-badge .sb-small { font-size: .68rem; opacity: .8; letter-spacing: .3px; }
.store-badge .sb-big { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }

/* Cards */
.card {
  background: var(--paper);
  border: 2px solid #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

/* Reveal-on-scroll (only active when JS is present) */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* =========================================================================
   HERO (home + salad shark)
   ========================================================================= */
.hero {
  position: relative;
  max-width: var(--maxw);
  margin: 10px auto 0;
  padding: 40px 22px 80px;
  text-align: center;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero .island-stage {
  position: relative;
  width: min(680px, 92%);
  margin: 18px auto 0;
}
.hero .island-stage .island {
  width: 100%;
  filter: drop-shadow(0 30px 30px rgba(31,74,90,.35));
  animation: hover-float 7s ease-in-out infinite;
}
.hero-logo {
  font-size: clamp(72px, 16vw, 168px);
  position: relative;
  z-index: 2;
  animation: pop-in .9s cubic-bezier(.18,.9,.25,1.4) both;
}
.hero .tagline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  color: var(--ink);
  max-width: 620px;
  margin: 18px auto 0;
  text-shadow: 0 2px 10px rgba(255,255,255,.7);
}
.hero .sub { color: var(--ink-soft); max-width: 560px; margin: 10px auto 0; font-size: 1.05rem; }
.hero .cta-row { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* mascot peeking from the island */
.hero .mascot {
  position: absolute;
  bottom: -6%;
  left: 50%;
  width: 150px;
  transform: translateX(-50%);
  z-index: 3;
  animation: bob 3.2s ease-in-out infinite;
  filter: drop-shadow(0 10px 8px rgba(31,74,90,.3));
}
.hero .palm-l, .hero .palm-r {
  position: absolute;
  bottom: -2%;
  width: 130px;
  z-index: 1;
  filter: drop-shadow(0 14px 10px rgba(31,74,90,.25));
}
.hero .palm-l { left: -4%; transform-origin: bottom center; animation: sway 5s ease-in-out infinite; }
.hero .palm-r { right: -4%; transform: scaleX(-1); transform-origin: bottom center; animation: sway 5.6s ease-in-out infinite reverse; }

@keyframes hover-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0) rotate(-2deg); } 50% { transform: translateX(-50%) translateY(-12px) rotate(2deg); } }
@keyframes sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(.6) translateY(30px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

/* scroll cue */
.scroll-cue {
  margin-top: 42px;
  font-size: 1.6rem;
  color: var(--ink-soft);
  animation: nudge 1.8s ease-in-out infinite;
}
@keyframes nudge { 0%,100% { transform: translateY(0); opacity:.6;} 50% { transform: translateY(8px); opacity:1;} }

/* =========================================================================
   Generic content sections
   ========================================================================= */
.section-pad { padding: 60px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin: 14px 0 10px; }
.section-head p { color: var(--ink-soft); font-size: 1.08rem; }

/* Featured game card (home) */
.featured {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 30px;
  align-items: center;
  background: linear-gradient(160deg, #ffffff, var(--cream));
  border: 2px solid #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  padding: 36px;
}
.featured .art {
  position: relative;
  min-height: 260px;
  border-radius: var(--r);
  background:
    radial-gradient(120% 90% at 50% 120%, var(--water) 0%, var(--water-deep) 55%, transparent 56%),
    linear-gradient(180deg, var(--sky-mid), var(--sky-bot));
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.featured .art .island { width: 88%; align-self: center; margin-bottom: -6%; }
.featured .art .shark { position: absolute; bottom: 12%; width: 130px; animation: bob 3s ease-in-out infinite; z-index: 2; }
.featured .copy h3 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.featured .copy p { color: var(--ink-soft); margin: 12px 0 22px; }
.featured .badge-mini { display:inline-block; font-family:var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase; color:#fff; background:var(--coral); padding:4px 12px; border-radius:var(--r-pill); }

/* Feature grid (salad shark) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature {
  background: var(--paper);
  border: 2px solid #fff;
  border-radius: var(--r);
  padding: 26px 22px;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.feature .ficon {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,154,77,.18), rgba(255,111,97,.18));
  margin-bottom: 14px;
}
.feature .ficon img { width: 40px; }
.feature h4 { font-size: 1.2rem; margin-bottom: 6px; }
.feature p { color: var(--ink-soft); font-size: .98rem; }

/* How-to-play strip */
.howto {
  background: linear-gradient(165deg, var(--water), var(--water-deep));
  border-radius: var(--r-lg);
  padding: 48px 36px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-float);
}
.howto h2 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.howto .lead { color: rgba(255,255,255,.92); max-width: 620px; margin: 12px auto 34px; font-size: 1.1rem; }
.howto-grid { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; }
.howto-card {
  background: rgba(255,255,255,.14);
  border: 2px solid rgba(255,255,255,.28);
  border-radius: var(--r);
  padding: 24px 28px;
  width: 270px;
  backdrop-filter: blur(4px);
}
.howto-card .pill { font-family: var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:1px; text-transform:uppercase; padding:4px 12px; border-radius:var(--r-pill); display:inline-block; margin-bottom:14px; }
.howto-card.eat .pill { background: var(--leaf); }
.howto-card.avoid .pill { background: var(--berry); }
.howto-card .foods { display:flex; gap:10px; justify-content:center; margin-bottom:14px; min-height:52px; align-items:center; }
.howto-card .foods img { width: 44px; }
.howto-card h4 { color:#fff; font-size:1.25rem; margin-bottom:6px; }
.howto-card p { color: rgba(255,255,255,.9); font-size:.96rem; }

/* flying fruit decorations inside howto */
.howto .fly { position:absolute; width:34px; opacity:.9; }
.howto .fly.f1 { top: 16%; left: 8%; animation: arc 6s ease-in-out infinite; }
.howto .fly.f2 { top: 22%; right: 10%; animation: arc 7.5s ease-in-out infinite reverse; }
.howto .fly.f3 { bottom: 14%; left: 14%; animation: arc 8s ease-in-out infinite; }
@keyframes arc { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-26px) rotate(180deg); } }

/* "Eat the rainbow" sprite row */
.veg-row { display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:flex-end; }
.veg-row img { width: 52px; transition: transform .2s ease; animation: bob 3s ease-in-out infinite; }
.veg-row img:nth-child(2n) { animation-duration: 3.6s; }
.veg-row img:nth-child(3n) { animation-duration: 4.2s; }
.veg-row img:hover { transform: translateY(-10px) scale(1.12); }

/* =========================================================================
   Promo hero banner + screenshot showcase (salad shark)
   ========================================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.promo-hero {
  width: min(880px, 94%);
  margin: 24px auto 4px;
  border-radius: var(--r-lg);
  border: 4px solid #fff;
  box-shadow: var(--shadow-float);
  image-rendering: pixelated;
  animation: hover-float 7s ease-in-out infinite;
}

.shots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.shot-card {
  background: var(--paper);
  border: 2px solid #fff;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.shot-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.shot-card .frame { aspect-ratio: 16 / 9; background: #0d1b22; overflow: hidden; }
.shot-card .frame img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
.shot-card .cap { padding: 16px 20px 20px; }
.shot-card .cap h4 { font-size: 1.15rem; margin-bottom: 4px; }
.shot-card .cap p { color: var(--ink-soft); font-size: .94rem; }

/* =========================================================================
   Legal / text pages
   ========================================================================= */
.page-head {
  text-align: center;
  padding: 30px 22px 10px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.page-head .sticker-logo { font-size: clamp(40px, 9vw, 76px); }
.page-head h1 { font-size: clamp(2rem, 5vw, 3rem); margin-top: 18px; }
.page-head p { color: var(--ink-soft); margin-top: 8px; }

.paper-card {
  max-width: 820px;
  margin: 24px auto 70px;
  background: var(--paper);
  border: 2px solid #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  padding: clamp(26px, 5vw, 54px);
}
.paper-card h2 { font-size: 1.5rem; margin: 30px 0 10px; color: var(--ink); }
.paper-card h2:first-child { margin-top: 0; }
.paper-card p, .paper-card li { color: var(--ink-soft); margin-bottom: 12px; }
.paper-card ul { padding-left: 22px; margin-bottom: 12px; }
.paper-card li { margin-bottom: 6px; }
.paper-card .updated { font-style: italic; color: var(--ink-faint); margin-bottom: 24px; }
.paper-card a { font-weight: 700; }

/* Contact */
.contact-card { max-width: 640px; text-align: center; margin: 24px auto 70px; }
/* The shark sprite sits in a small 53x38px patch of a 256x256 canvas, so we
   blow the image up well past the stage and clip the transparent padding —
   that's what actually makes the shark read big. */
.contact-card .shark-stage {
  width: min(300px, 78%);
  height: 150px;
  margin: 0 auto 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-card .shark {
  width: 620px;
  max-width: none;
  height: auto;
  flex: none;
  animation: swim 3.2s ease-in-out infinite;
}
@keyframes swim {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-9px) rotate(1.5deg); }
}
.contact-card .email-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  padding: 14px 26px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--mango), var(--coral)); color: #fff;
  box-shadow: var(--shadow-card); margin-top: 6px;
}
.contact-card .email-pill:hover { text-decoration: none; transform: translateY(-2px); }

/* =========================================================================
   Footer — beach
   ========================================================================= */
.beach-footer {
  position: relative;
  margin-top: 50px;
  padding: 70px 22px 36px;
  background: linear-gradient(180deg, var(--sand) 0%, var(--sand-deep) 100%);
  color: var(--ink);
  text-align: center;
}
/* Rounded sand bumps sitting on top of the footer. The circles are centred
   on the footer's top edge so only their upper domes show, and the sky fills
   the small valleys between them. */
.beach-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -16px;
  height: 18px;
  background:
    radial-gradient(circle at 16px 18px, var(--sand) 16px, transparent 17px) repeat-x;
  background-size: 32px 18px;
}
.beach-footer .f-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; }
.beach-footer .f-links { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 16px 0; }
.beach-footer .f-links a { color: var(--ink-soft); font-weight: 700; padding: 6px 12px; border-radius: var(--r-pill); }
.beach-footer .f-links a:hover { background: rgba(255,255,255,.5); text-decoration: none; }
.beach-footer .f-stores { display: flex; gap: 12px; justify-content: center; margin: 18px 0; flex-wrap: wrap; }
.beach-footer .copyright { color: var(--ink-soft); font-size: .9rem; margin-top: 14px; }
/* The crab patrols the top of the sand; scene.js drives its position and
   walk/idle frames. Parked off-screen until JS picks it up. */
.beach-footer .crab {
  position: absolute;
  top: 14px;
  left: 0;
  width: 64px;
  z-index: 3;
  transform: translateX(-9999px);
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 880px) {
  .featured { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .shots-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .cloudbar { flex-direction: column; gap: 10px; border-radius: var(--r-lg); padding: 14px; }
  .navlinks { justify-content: center; }
  .feature-grid { grid-template-columns: 1fr; }
  .shots-grid { grid-template-columns: 1fr; }
  .hero .palm-l, .hero .palm-r { display: none; }
  .featured { padding: 22px; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}