/*
 * Gobblins promo site, mobile first: every rule below is written for a phone;
 * the min-width blocks at the end of each section add the tablet and desktop
 * layouts. The game's sky (icon purple → pink), jelly buttons, Fredoka.
 */
:root {
  --sky-top: #4b23a8;
  --sky-bottom: #f0648c;
  --ink: #2a1630;
  --sun: #ffc93c;
  --mint: #7ed957;
  --sea: #5aa9e6;
  --grape: #9b6cf0;
  --glass: rgba(255, 255, 255, 0.14);
  --glass-line: rgba(255, 255, 255, 0.28);
  --card: #ffffff;
  --card-ink: #2a1630;
  --muted: #6b5a73;
  --radius: 24px;
  --shadow: 0 16px 34px rgba(42, 22, 48, 0.28);
  --gutter: 16px;
  --nav-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root { --card: #241638; --card-ink: #f6eefe; --muted: #bfaed1; }
}

* { box-sizing: border-box; }
/* Nothing may widen the page: on phones that zooms out and shifts every section. */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  color: #fff;
  background: linear-gradient(180deg, var(--sky-top) 0%, #7a2fb0 35%, #c64a9e 70%, var(--sky-bottom) 100%);
  background-color: #9b3aa8;
  font: 500 17px/1.55 "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-weight: 700; line-height: 1.1; margin: 0; }
p { margin: 0; }

.candy {
  color: var(--sun);
  -webkit-text-stroke: 0.09em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.25);
}
.wrap { width: min(1120px, 100% - var(--gutter) * 2); margin-inline: auto; }
section, .hero { position: relative; }
section { padding: 72px 0; }
.eyebrow { font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; opacity: 0.85; }
.section-title { font-size: clamp(32px, 9vw, 58px); margin: 8px 0 12px; }
.lead { font-size: clamp(17px, 4.4vw, 21px); max-width: 620px; opacity: 0.94; margin-inline: auto; }
/* Phones read everything centred; wider screens left-align where a layout has columns. */
.center, .hero, .play, .seasons > div:first-child, .cta { text-align: center; }

/* ── nav ─────────────────────────────────────────── */
nav.top {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 var(--gutter);
  transition: background 0.3s, box-shadow 0.3s;
}
nav.top.scrolled, nav.top.open { background: rgba(75, 35, 168, 0.88); backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
nav.top .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 24px; margin-right: auto; }
nav.top .brand img { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); }
.pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 44px;
  border: 2px solid var(--glass-line); background: var(--glass); color: #fff; text-decoration: none;
  font: 600 15px "Fredoka", sans-serif; padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.pill.get { background: var(--mint); border-color: rgba(0, 0, 0, 0.2); -webkit-text-stroke: 0.05em var(--ink); paint-order: stroke fill; }
.burger { width: 44px; padding: 0; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2.5px; border-radius: 2px; background: #fff; position: relative; transition: transform 0.25s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
nav.top.open .burger span { background: transparent; }
nav.top.open .burger span::before { transform: translateY(6px) rotate(45deg); }
nav.top.open .burger span::after { transform: translateY(-6px) rotate(-45deg); }
nav.top .links {
  position: absolute; top: var(--nav-h); left: 0; right: 0; display: grid; gap: 4px;
  padding: 8px var(--gutter) 18px; background: #4b23a8; border-radius: 0 0 24px 24px; box-shadow: 0 18px 30px rgba(0, 0, 0, 0.3);
  font-weight: 600; font-size: 20px; text-align: center;
  transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
nav.top.open .links { opacity: 1; transform: none; pointer-events: auto; }
nav.top .links a { text-decoration: none; padding: 10px; border-radius: 14px; }
nav.top .links a:active { background: var(--glass); }

/* ── jelly buttons ───────────────────────────────── */
.btn {
  --c: var(--mint);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 12px 24px 14px; border-radius: 999px; border: 3px solid rgba(0, 0, 0, 0.22);
  background: var(--c); color: #fff; text-decoration: none; cursor: pointer;
  font: 700 19px/1 "Fredoka", sans-serif; -webkit-text-stroke: 0.06em var(--ink); paint-order: stroke fill;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 12px 22px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s;
}
.btn::before { content: ""; position: absolute; left: 14px; right: 14px; top: 4px; height: 30%; border-radius: 999px; background: rgba(255, 255, 255, 0.3); }
.btn:active { transform: translateY(3px) scale(0.97); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.btn svg { width: 28px; height: 28px; flex: none; position: relative; }
.btn .txt { position: relative; text-align: left; }
.btn small { display: block; font-size: 12px; font-weight: 600; -webkit-text-stroke: 0; opacity: 0.95; letter-spacing: 0.03em; }
.btn.store { --c: #241638; -webkit-text-stroke: 0; width: 100%; max-width: 300px; justify-content: flex-start; padding: 11px 22px 12px; }
.btn.store::before { top: 3px; height: 20%; opacity: 0.3; }
.btn.store[aria-disabled="true"] { cursor: default; }
.btn.store .soon {
  position: absolute; top: -11px; right: 14px; background: var(--sun); color: var(--ink);
  font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 2px solid var(--ink);
  transform: rotate(5deg); animation: wiggle 2.4s ease-in-out infinite;
}
.stores { display: grid; justify-items: center; gap: 18px; margin-top: 26px; }

/* ── hero ────────────────────────────────────────── */
.hero { overflow: hidden; padding: calc(var(--nav-h) + 8px) 0 56px; }
.hero .grid { display: grid; gap: 8px; align-items: center; }
.keyart { position: relative; max-width: min(420px, 100%); margin: 0 auto; order: -1; }
.keyart img { width: 100%; filter: drop-shadow(0 22px 26px rgba(42, 22, 48, 0.35)); animation: float 5s ease-in-out infinite; }
.keyart::before { content: ""; position: absolute; inset: 10% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 220, 120, 0.55), transparent); filter: blur(10px); animation: pulse 4s ease-in-out infinite; }
.hero h1 { font-size: clamp(64px, 19vw, 150px); animation: logo 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
.hero .tag { font-size: clamp(20px, 5.4vw, 30px); font-weight: 600; margin: 4px 0 14px; }
.hero .free { margin-top: 16px; font-size: 14px; opacity: 0.85; }

/* Floating Gobblins and bubbles, clipped to their section. */
.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.floaters img { position: absolute; width: var(--s, 56px); opacity: var(--o, 0.35); animation: drift var(--d, 9s) ease-in-out infinite; animation-delay: var(--delay, 0s); filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.2)); }
.bubble { position: absolute; bottom: -40px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.08) 60%); animation: rise linear infinite; }
.hero > .wrap, section > .wrap { position: relative; z-index: 1; }

/* ── parade ──────────────────────────────────────── */
.parade { overflow: hidden; padding: 20px 0; background: rgba(42, 22, 48, 0.25); border-block: 3px solid var(--glass-line); }
.parade .track { display: flex; gap: 34px; width: max-content; animation: marquee 32s linear infinite; }
.parade img { width: 58px; height: 58px; object-fit: contain; animation: hop 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.18s); }

/* ── features ────────────────────────────────────── */
.features { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
.card {
  position: relative; background: var(--card); color: var(--card-ink); border-radius: var(--radius);
  padding: 22px 20px 24px; box-shadow: var(--shadow); border: 4px solid rgba(255, 255, 255, 0.7); text-align: left;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card h3 { font-size: 24px; margin: 12px 0 6px; }
.card p { color: var(--muted); font-size: 16px; }
.card .art { display: flex; align-items: flex-end; gap: 6px; height: 84px; }
.card .art img { width: 76px; height: 76px; object-fit: contain; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.card .art img.sm { width: 58px; height: 58px; }
.card .art img.wide { width: 110px; height: 84px; }
.card .chip { position: absolute; top: 16px; right: 16px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--chip, var(--grape)) 18%, transparent); color: var(--chip, var(--grape)); }

/* ── mini board ──────────────────────────────────── */
.play { display: grid; gap: 30px; justify-items: center; }
.board-box { display: grid; gap: 14px; justify-items: center; width: 100%; }
.hud { display: flex; gap: 12px; justify-content: center; }
.hud div { background: rgba(42, 22, 48, 0.4); border: 3px solid var(--glass-line); border-radius: 18px; padding: 6px 16px; text-align: center; min-width: 104px; }
.hud b { display: block; font-size: 28px; line-height: 1.1; }
.hud span { font-size: 13px; opacity: 0.85; font-weight: 600; }
.board {
  /* Border-box: 8px padding and 4px border on each side around N cells (main.js reads the same size). */
  --n: 6; --cell: min(64px, calc((100vw - var(--gutter) * 2 - 24px) / 6));
  position: relative; width: calc(var(--cell) * var(--n) + 24px); height: calc(var(--cell) * var(--n) + 24px);
  padding: 8px; border-radius: 24px; background: rgba(43, 58, 103, 0.86); border: 4px solid rgba(255, 255, 255, 0.35);
  box-shadow: var(--shadow); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
}
.board .cell { position: absolute; width: calc(var(--cell) - 6px); height: calc(var(--cell) - 6px); border-radius: 12px; }
.board .pc { position: absolute; left: 8px; top: 8px; width: var(--cell); height: var(--cell); padding: 4px; cursor: grab; transition: transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.2s; }
.board .pc img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; animation: breathe 2.2s ease-in-out infinite; animation-delay: var(--b, 0s); }
.board .pc.sel img { animation: selected 0.5s ease-in-out infinite; }
.board .pc.pop { transition: transform 0.22s ease-in, opacity 0.22s ease-in; opacity: 0; }
.board .pc.fall { transition: transform 0.34s cubic-bezier(0.5, 0, 0.75, 0); }
.float-score { position: absolute; font-weight: 700; font-size: 24px; color: #fff; -webkit-text-stroke: 0.08em var(--ink); paint-order: stroke fill; pointer-events: none; animation: up 0.8s ease-out forwards; }
.hint { font-size: 14px; opacity: 0.85; max-width: 340px; }

/* ── strips that scroll sideways on phones (islands, screenshots) ── */
.strip { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 28px 0 30px; }
.strip::-webkit-scrollbar { display: none; }
/* Side padding of half a screen minus half an item: the first and last items can sit centred. */
.strip > * { flex: none; scroll-snap-align: center; }
.strip > :first-child { margin-left: calc(50% - var(--item) / 2); }
.strip > :last-child { margin-right: calc(50% - var(--item) / 2); }
.swipe { font-size: 14px; opacity: 0.8; margin-top: -6px; text-align: center; }

.islands { --item: 200px; }
.island { width: var(--item); text-align: center; }
.island img { width: 100%; animation: bob 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * -0.7s); filter: drop-shadow(0 18px 16px rgba(42, 22, 48, 0.35)); }
.island b { display: block; margin-top: 6px; font-size: 19px; }
.island span { font-size: 14px; opacity: 0.8; }

.shots { --item: min(230px, 64vw); }
.phone { width: var(--item); aspect-ratio: 9 / 19.5; border-radius: 34px; padding: 9px; background: #1b1030; box-shadow: var(--shadow), inset 0 0 0 2px rgba(255, 255, 255, 0.15); }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; }

/* ── gameplay video ──────────────────────────────── */
.watch { display: grid; gap: 30px; justify-items: center; text-align: center; }
.phone.big { width: min(300px, 78vw); }
.phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; display: block; background: #1b1030; }

/* ── seasons ─────────────────────────────────────── */
.seasons { display: grid; gap: 26px; align-items: center; }
.tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.tabs button { --c: var(--sea); font-size: 16px; padding: 10px 16px 12px; }
.tabs button[aria-pressed="true"] { --c: var(--sun); color: var(--ink); -webkit-text-stroke: 0; }
.scene { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 4px solid rgba(255, 255, 255, 0.7); background-size: cover; background-position: center 62%; }
.scene .row { position: absolute; inset: auto 0 10% 0; display: flex; justify-content: center; gap: 2%; }
.scene .row img { width: 14%; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.3)); animation: hop 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.14s); }
.scene .row img.swap { animation: flip 0.5s ease both; animation-delay: calc(var(--i) * 0.06s); }

/* ── cta & footer ────────────────────────────────── */
.cta .box { position: relative; overflow: hidden; background: rgba(42, 22, 48, 0.32); border: 3px solid var(--glass-line); border-radius: 32px; padding: 44px 18px; }
.cta .icon { width: 104px; border-radius: 24px; margin: 0 auto 16px; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3); animation: float 4s ease-in-out infinite; }
footer { padding: 32px var(--gutter) calc(48px + env(safe-area-inset-bottom)); text-align: center; font-size: 15px; opacity: 0.9; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-bottom: 10px; font-weight: 600; }
footer nav a { padding: 8px 4px; }

/* ── reveal on scroll ────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.3, 0.64, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; }

/* ── documents (privacy, support) ────────────────── */
.doc { width: min(760px, 100% - var(--gutter) * 2); margin: calc(var(--nav-h) + 24px) auto 40px; background: var(--card); color: var(--card-ink); border-radius: var(--radius); padding: 26px 20px; box-shadow: var(--shadow); }
.doc h2 { font-size: 28px; margin-top: 26px; }
.doc p, .doc ul, .doc dl { margin: 12px 0; }
.doc a { color: var(--grape); }
.doc .muted { color: var(--muted); font-size: 15px; }
.doc section { padding: 0; }
.doc section + section { border-top: 2px solid rgba(127, 127, 127, 0.2); margin-top: 28px; padding-top: 4px; }
.doc dt { font-weight: 700; margin-top: 14px; }
.doc dd { margin: 4px 0 0; }

/* ── tablet ──────────────────────────────────────── */
@media (min-width: 640px) {
  :root { --gutter: 28px; --nav-h: 72px; }
  section { padding: 88px 0; }
  .features { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .stores { display: flex; flex-wrap: wrap; justify-content: center; }
  .btn.store { width: auto; min-width: 220px; }
  .islands { --item: 220px; }
  .floaters img { opacity: var(--o, 0.6); }
}

/* ── desktop ─────────────────────────────────────── */
@media (min-width: 980px) {
  nav.top { padding-inline: max(var(--gutter), calc((100% - 1120px) / 2)); }
  nav.top .burger { display: none; }
  nav.top .links { position: static; display: flex; gap: 22px; padding: 0; background: none; border-radius: 0; box-shadow: none; font-size: 16px; opacity: 1; transform: none; pointer-events: auto; }
  nav.top .links a { padding: 0; }
  nav.top .links a:hover { color: var(--sun); }
  .btn:hover { transform: translateY(-3px) scale(1.03); }
  .card:hover { transform: translateY(-6px) rotate(-0.6deg); }
  .card:hover .art img { transform: translateY(-8px) rotate(-6deg); }

  .hero { min-height: 100svh; display: grid; align-items: center; text-align: left; }
  .hero .grid { grid-template-columns: 1fr 1.05fr; gap: 40px; }
  .hero .lead { margin-inline: 0; }
  .hero .stores { justify-content: flex-start; }
  .keyart { order: 2; max-width: none; }
  .play { grid-template-columns: 1fr auto; text-align: left; justify-items: stretch; gap: 56px; }
  .play .lead { margin-inline: 0; }
  .features { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .watch { grid-template-columns: 1fr auto; gap: 64px; text-align: left; justify-items: stretch; align-items: center; }
  .watch .lead { margin-inline: 0; }
  .phone.big { width: 320px; transform: rotate(2deg); }
  .seasons { grid-template-columns: 1fr 1.1fr; gap: 48px; }
  .seasons > div:first-child { text-align: left; }
  .seasons .lead { margin-inline: 0; }
  .tabs { justify-content: flex-start; }
}

/* Wide screens: the strips fit, so they become centred rows instead of scrollers. */
@media (min-width: 1180px) {
  .strip { justify-content: center; overflow: visible; flex-wrap: wrap; }
  .strip > :first-child, .strip > :last-child { margin-inline: 0; }
  .islands { --item: 170px; }
  .shots { --item: 148px; gap: 18px; }
  .swipe { display: none; }
}

/* ── keyframes ───────────────────────────────────── */
@keyframes logo { 0%, 100% { transform: rotate(-2.5deg) scale(1); } 50% { transform: rotate(2.5deg) scale(1.04); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes pulse { 0%, 100% { opacity: 0.6; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(10px, -22px) rotate(8deg); } }
@keyframes rise { to { transform: translateY(-110vh); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-12px) scale(0.95, 1.06); } 55% { transform: translateY(0) scale(1.08, 0.92); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-12px) rotate(1.5deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, 0.95); } }
@keyframes selected { 0%, 100% { transform: scale(1.12); } 50% { transform: scale(0.96); } }
@keyframes wiggle { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-4deg) scale(1.06); } }
@keyframes up { from { transform: translate(-50%, 0) scale(0.6); opacity: 1; } to { transform: translate(-50%, -56px) scale(1.1); opacity: 0; } }
@keyframes flip { from { transform: rotateY(90deg) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* The closing box is narrow: its floaters stay faint behind the title. */
.cta .floaters img { --o: 0.28; }