/* =========================================================================
   KADKA — studio website
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  --paper: #F7F2EA;
  --paper-deep: #EEE5D7;
  --ink: #17141B;
  --ink-soft: rgba(23, 20, 27, 0.66);
  --brand: #EE5437;

  /* Hero theme. Swapped per 3D object via html[data-hero] */
  --hero-bg: #EE5437;
  --hero-fg: #17131A;
  --hero-soft: rgba(23, 19, 26, 0.74);
  --hero-line: rgba(23, 19, 26, 0.22);

  --font: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --container: 1360px;
  --gutter: clamp(16px, 4vw, 56px);
  --header-h: 72px;
  --radius-xl: clamp(24px, 2.6vw, 36px);
  --radius-l: 22px;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --theme-dur: 0.8s;
}

html[data-hero="logo"] {
  --hero-bg: #EE5437;
  --hero-fg: #17131A;
  --hero-soft: rgba(23, 19, 26, 0.74);
  --hero-line: rgba(23, 19, 26, 0.22);
}
html[data-hero="sausage"] { /* the level-complete yellow of Fork N Sausage */
  --hero-bg: #FEC434;
  --hero-fg: #2B1A04;
  --hero-soft: rgba(43, 26, 4, 0.76);
  --hero-line: rgba(43, 26, 4, 0.2);
}
html[data-hero="spool"] {
  --hero-bg: #6A42E6;
  --hero-fg: #FFF5EB;
  --hero-soft: rgba(255, 245, 235, 0.8);
  --hero-line: rgba(255, 245, 235, 0.3);
}
html[data-hero="lazyjump"] {
  --hero-bg: #2F6CE5;
  --hero-fg: #FFF8EF;
  --hero-soft: rgba(255, 248, 239, 0.82);
  --hero-line: rgba(255, 248, 239, 0.3);
}
html[data-hero="prankster"] {
  --hero-bg: #FFC233;
  --hero-fg: #1F1405;
  --hero-soft: rgba(31, 20, 5, 0.74);
  --hero-line: rgba(31, 20, 5, 0.2);
}
html[data-hero="fruits"] {
  --hero-bg: #FF8099;
  --hero-fg: #2A0A12;
  --hero-soft: rgba(42, 10, 18, 0.74);
  --hero-line: rgba(42, 10, 18, 0.2);
}
html[data-hero="drawarena"] { /* a brighter blue than the blue team of Draw Arena, so they stand out */
  --hero-bg: #3E8DF3;
  --hero-fg: #0A1838;
  --hero-soft: rgba(10, 24, 56, 0.88);
  --hero-line: rgba(10, 24, 56, 0.22);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
/* What a pull past the top or the bottom of the page shows (the rubber band of a Mac trackpad or an iPhone):
   the hero colour above the hero, the footer colour below the footer, never the cream of the body.
   The body paints the page itself, so this colour shows nowhere else. main.js sets is-lower-half */
html { background-color: var(--hero-bg); }
html.is-lower-half { background-color: var(--ink); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--ink); color: var(--paper); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-weight: 700;
  transform: translateY(-160%); transition: transform 0.3s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ---------- Reveal animations (beresnev-style lines, rising out of a soft fade) ---------- */
.line { display: block; }
.js [data-lines] .line {
  /* each line is masked: solid down past its descenders, then fading out over --fade (eased, so
     the fade has no edge). The text rises out of that fade into the background colour instead of
     from behind a hard edge. The padding makes room for both without changing the layout */
  --fade: 0.6em;
  --mask: linear-gradient(#000 calc(100% - var(--fade)), rgb(0 0 0 / 0.84) calc(100% - 0.75 * var(--fade)),
    rgb(0 0 0 / 0.5) calc(100% - 0.5 * var(--fade)), rgb(0 0 0 / 0.16) calc(100% - 0.25 * var(--fade)), transparent);
  padding-bottom: calc(0.18em + var(--fade));
  margin-bottom: calc(-0.18em - var(--fade));
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  pointer-events: none; /* the fade reaches over the text below it: only the words take the pointer */
}
.js [data-lines] .line__inner {
  display: inline-block;
  /* starts just under the fade, out of sight */
  transform: translate3d(0, calc(100% + 0.18em + var(--fade)), 0) rotate(3deg);
  transform-origin: 0 100%;
  transition: transform 1.15s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.09s + var(--delay, 0s));
}
.js [data-lines].is-in .line__inner { transform: none; pointer-events: auto; }

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-lines] .line__inner,
  .js [data-reveal] { transform: none !important; opacity: 1 !important; transition: none !important; }
  .hero__from { transform: translate3d(-50%, 0, 0) !important; } /* fades in without rising */
}

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: 14px var(--gutter) 0;
  color: var(--hero-fg);
  pointer-events: none;
  transition: transform 0.6s var(--ease-out), color var(--theme-dur) var(--ease-in-out);
}
.header__bar {
  pointer-events: auto;
  width: min(100%, calc(var(--container) + 28px));
  margin-inline: auto;
  height: 60px;
  display: flex; align-items: center; gap: clamp(12px, 3vw, 40px);
  padding: 0 10px 0 14px;
  border-radius: 999px;
  transition: background-color 0.45s ease, box-shadow 0.45s ease, color 0.45s ease, backdrop-filter 0.45s ease;
}
.header.is-scrolled { color: var(--ink); }
.header.is-scrolled .header__bar {
  background: rgba(247, 242, 234, 0.84);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(23, 20, 27, 0.06), 0 12px 32px -14px rgba(23, 20, 27, 0.28);
}
.header.is-hidden { transform: translate3d(0, -130%, 0); }
.js .header { opacity: 0; transform: translate3d(0, -24px, 0); }
.js.is-ready .header { opacity: 1; transform: none; transition: opacity 0.9s ease 0.15s, transform 1s var(--ease-out) 0.15s, color var(--theme-dur) var(--ease-in-out); }
.js.is-ready .header.is-hidden { transform: translate3d(0, -130%, 0); }
/* a reload from the header logo (below): the header stays where it was, it doesn't fade in again */
.js.is-respin:not(.is-ready) .header { opacity: 1; transform: none; }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand__mark { width: 34px; height: 27.4px; fill: currentColor; transition: transform 0.6s var(--ease-out); }
.brand__word { width: 76px; height: 16px; fill: currentColor; }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.08); }

/* The header logo reloads the page into the next object, and the mark turns round in 3D through it
   (setupBrandSpin in main.js): it winds up and whips round until the page reloads, then the new page
   goes on from that angle and settles face on. While it turns, the script stacks copies of the mark
   behind it, so it turns as a solid slab, all of it flat in the mark's own colour, with no light or shade.
   The slab turns about its middle, and its face lies where the flat mark does, so at rest it is the same
   size. brand-respin's overshoot and first easing are mirrored in SPIN (main.js), which times the turn */
.brand[data-brand-next] { perspective: 110px; perspective-origin: 17px 50%; } /* the mark's middle */
.brand__spin {
  --brand-depth: 8px;
  position: relative;
  flex: none;
  transform-origin: 50% 50% calc(var(--brand-depth) / -2);
}
.brand__spin.is-spinning { transform-style: preserve-3d; }
.brand .brand__spin.is-spinning .brand__mark { transform: none; transition: none; }
.brand__layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: currentColor;
  transform: translateZ(calc(var(--brand-depth) * var(--k) * -1)); /* --k: 0 at the face … 1 at the back */
}
.is-respin .brand__spin { animation: brand-respin var(--respin-dur, 1s) backwards; }
.brand__spin.is-launching { animation: brand-windup 0.38s both, brand-whirl 0.33s linear 0.38s infinite; }

@keyframes brand-windup {
  0% {
    transform: rotateY(var(--launch-from, 0deg)) scale(1);
    animation-timing-function: cubic-bezier(0.25, 0.6, 0.45, 1);
  }
  35% {
    transform: rotateY(calc(var(--launch-from, 0deg) - 32deg)) scale(0.88);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.44); /* ends at the whirl's speed */
  }
  100% { transform: rotateY(calc(var(--launch-from, 0deg) + 90deg)) scale(1); }
}
@keyframes brand-whirl {
  from { transform: rotateY(calc(var(--launch-from, 0deg) + 90deg)) scale(1); }
  to { transform: rotateY(calc(var(--launch-from, 0deg) + 450deg)) scale(1); }
}
@keyframes brand-respin {
  0% {
    transform: rotateY(var(--respin-from)) scale(1);
    animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1); /* starts at twice its mean speed */
  }
  80% {
    transform: rotateY(calc(var(--respin-to) + 16deg)) scale(1.06);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  92% {
    transform: rotateY(calc(var(--respin-to) - 4deg)) scale(1);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  100% { transform: rotateY(var(--respin-to)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .brand__spin { animation: none !important; }
}

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__link {
  position: relative;
  padding: 9px 16px; border-radius: 999px;
  font-weight: 600; font-size: 16px; letter-spacing: -0.01em;
  white-space: nowrap; /* "Our games" on two lines broke the header on the narrowest phones */
  transition: background-color 0.3s ease;
}
.nav__link:hover { background: color-mix(in srgb, currentColor 11%, transparent); }

.socials { display: flex; gap: 8px; }
.social {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: currentColor;
  transition: transform 0.4s var(--ease-out);
}
.social svg { width: 20px; height: 20px; color: var(--hero-bg); transition: color var(--theme-dur) var(--ease-in-out); }
.header.is-scrolled .social svg { color: var(--paper); }
.social:hover { transform: translateY(-2px) rotate(-6deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 0 28px;
  border-radius: 999px;
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.45s var(--ease-out), background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn .icon { transition: transform 0.45s var(--ease-out); }
.btn:hover .icon { transform: translateY(3px); }
.btn--solid { background: var(--hero-fg); color: var(--hero-bg); }
.btn--outline { box-shadow: inset 0 0 0 2px var(--hero-line); }
.btn--outline:hover { box-shadow: inset 0 0 0 2px currentColor; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
}
.eyebrow__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 10px transparent; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--hero-bg);
  color: var(--hero-fg);
  transition: background-color var(--theme-dur) var(--ease-in-out), color var(--theme-dur) var(--ease-in-out);
  overflow: hidden;
  isolation: isolate;
}
.hero__inner {
  position: relative;
  width: min(100% - 2 * var(--gutter), var(--container));
  min-height: inherit;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.hero__copy {
  position: relative; z-index: 2;
  padding: calc(var(--header-h) + 48px) 0 72px;
  max-width: 640px;
}
.hero__title {
  margin-top: 26px;
  font-size: clamp(46px, 6.6vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 700;
}
.hero__lead {
  margin-top: 30px;
  max-width: 470px;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.5;
  color: var(--hero-soft);
  font-weight: 500;
  transition: color var(--theme-dur) var(--ease-in-out);
}
.hero__lead strong {
  font-weight: 700;
  color: var(--hero-fg);
  white-space: nowrap;
  transition: color var(--theme-dur) var(--ease-in-out);
}
.hero__actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero .eyebrow { --delay: 0.05s; }
.hero__lead { --delay: 0.45s; }
.hero__actions { --delay: 0.55s; }
.hero__title { --delay: 0.12s; }

/* 3D stage: bleeds to the right edge of the viewport */
.hero__stage {
  /* the canvas reaches this far (of the stage width) past the stage on the left, so a sword swung
     that way is not cut off at the stage edge. The hero is still framed in the stage */
  --bleed: 22%;
  position: absolute;
  top: 0; bottom: 0;
  left: 46%;
  right: calc((100vw - 100%) / -2);
  z-index: 1;
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.hero__canvas {
  position: absolute; top: 0;
  left: calc(var(--bleed) * -1);
  width: calc(100% + var(--bleed)); /* explicit: a canvas left at auto takes its drawing-buffer size */
  height: 100%;
  pointer-events: none; /* the stage takes the pointer, so the bleed doesn't catch clicks beside the text */
  opacity: 0;
  transition: opacity 1s ease 0.2s;
}
.hero__stage.is-live .hero__canvas { opacity: 1; }
.hero__stage.is-grabbing { cursor: grabbing; }

.hero__fallback {
  position: absolute; inset: 0; display: none; place-items: center;
}
.hero__fallback svg { width: min(52%, 420px); aspect-ratio: 1024 / 826; fill: currentColor; opacity: 0.92; }
.hero__stage.is-fallback .hero__fallback { display: grid; }
.hero__stage.is-fallback .hero__canvas,
.hero__stage.is-fallback .hero__hint,
.hero__stage.is-fallback .hero__from { display: none; }

/* Under the floor line (set by the 3D stage), clear of the feet: the game the object comes from
   (a link to its card), then the hint, which goes after a few seconds */
.hero__from {
  position: absolute; left: 50%; top: calc(var(--floor, 78%) + 38px);
  display: inline-flex; align-items: center; gap: 11px;
  padding: 4px 18px 4px 4px; border-radius: 999px;
  font-size: 16px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2;
  white-space: nowrap;
  color: var(--hero-soft);
  opacity: 0;
  transform: translate3d(-50%, 12px, 0);
  transition: opacity 0.6s ease, transform 0.9s var(--ease-out), background-color 0.3s ease, color var(--theme-dur) var(--ease-in-out);
}
.hero__from[hidden] { display: none; }
.hero__from img { width: 36px; height: 36px; border-radius: 27%; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.55); }
.hero__from strong { color: var(--hero-fg); font-weight: 700; }
.hero__from:hover { background: color-mix(in srgb, var(--hero-fg) 10%, transparent); }
.hero__stage.is-live .hero__from { opacity: 1; transform: translate3d(-50%, 0, 0); transition-delay: 0.9s, 0.9s, 0s, 0s; }
.hero__stage.has-from { --hint-drop: 94px; } /* the hint goes under the game */

.hero__hint {
  position: absolute; left: 50%; top: calc(var(--floor, 78%) + var(--hint-drop, 44px));
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  background: color-mix(in srgb, var(--hero-fg) 10%, transparent);
  box-shadow: inset 0 0 0 1px var(--hero-line);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero__hint .icon { animation: wiggle 2.2s var(--ease-in-out) infinite; transform-origin: 50% 80%; }
.hero__stage.is-live .hero__hint { opacity: 1; transition-delay: 1.4s; }
.hero__stage.is-live .hero__hint.is-gone { opacity: 0; transition-delay: 0s; }
@keyframes wiggle {
  0%, 100% { transform: translateX(-3px) rotate(-10deg); }
  50% { transform: translateX(4px) rotate(8deg); }
}

/* ---------- Marquee ---------- */
.marquee {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: clamp(9px, 1.1vw, 14px) 0;
  user-select: none;
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 0.42em;
  font-size: clamp(17px, 2.1vw, 30px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
  white-space: nowrap;
}
.marquee__item img { width: 1.05em; height: 1.05em; border-radius: 26%; }
.marquee__item::after {
  /* the KADKA mark as a separator */
  content: "";
  width: 0.5em; height: 0.4em; margin: 0 0.75em;
  background: var(--brand);
  -webkit-mask: url("../img/mark.svg") center / contain no-repeat;
  mask: url("../img/mark.svg") center / contain no-repeat;
}

/* ---------- Sections ---------- */
.games { background: var(--paper); padding: clamp(88px, 11vw, 168px) 0 clamp(96px, 12vw, 180px); }
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  align-items: end;
  gap: 24px 48px;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.section-title {
  font-size: clamp(60px, 10.5vw, 168px);
  line-height: 0.88;
  letter-spacing: -0.055em;
  font-weight: 700;
}
.section-title__count {
  display: inline-block;
  margin-left: 0.18em;
  font-size: 0.2em;
  letter-spacing: 0;
  font-weight: 600;
  vertical-align: top;
  position: relative; top: 0.55em;
  color: var(--brand);
}
.section-lead { color: var(--ink-soft); font-size: 18px; font-weight: 500; padding-bottom: 0.6em; }

/* ---------- Games grid ---------- */
.games__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.game {
  --pad: clamp(22px, 2.2vw, 30px);
  grid-column: span 4;
  position: relative;
  display: flex; flex-direction: column;
  gap: 22px;
  min-height: 440px;
  padding: var(--pad);
  border-radius: var(--radius-xl);
  background: var(--tint);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.7s var(--ease-out), opacity 0.9s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.game::before {
  /* soft glow behind the icon */
  content: "";
  position: absolute; z-index: -1;
  width: 70%; aspect-ratio: 1;
  left: -12%; top: -14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  transition: transform 0.9s var(--ease-out);
}
.game:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--tint-ink) 70%, transparent); }
.game:hover::before { transform: scale(1.25); }
.game__icon {
  width: clamp(92px, 8vw, 116px);
  aspect-ratio: 1;
  border-radius: 23%;
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: transform 0.8s var(--ease-out);
}
.game:hover .game__icon { transform: rotate(-7deg) scale(1.07); }
.game__body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.game__tag {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tint-ink);
}
.game__title { font-size: clamp(26px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; }
.game__text { font-size: 16px; line-height: 1.5; color: rgba(23, 20, 27, 0.72); font-weight: 500; }
.game__badge {
  position: absolute; top: var(--pad); right: var(--pad);
  padding: 7px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  background: var(--ink); color: var(--paper);
}

/* two large cards across the top row, then the small ones in rows of three */
.game--xl { grid-column: span 6; min-height: 520px; gap: 28px; }
.game--xl .game__icon { width: clamp(132px, 13vw, 196px); }
.game--xl .game__title { font-size: clamp(38px, 4vw, 60px); letter-spacing: -0.045em; }
.game--xl .game__text { font-size: 18px; max-width: 460px; }

.stores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.store {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px 0 13px;
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  transition: transform 0.4s var(--ease-out), background-color 0.3s ease;
}
.store svg { width: 19px; height: 19px; }
.store:hover { transform: translateY(-2px); background: #000; }
/* small cards: the two store buttons share the row, and stack full-width when it gets tight */
.game:not(.game--xl) .store { flex: 1 1 auto; justify-content: center; }

/* ---------- Contact ---------- */
.contact {
  position: relative;
  background: var(--hero-bg);
  color: var(--hero-fg);
  padding: clamp(96px, 13vw, 200px) 0 clamp(80px, 10vw, 150px);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  transition: background-color var(--theme-dur) var(--ease-in-out), color var(--theme-dur) var(--ease-in-out);
  overflow: hidden;
}
.contact__inner { position: relative; z-index: 1; }
.contact__deco {
  /* a big, faint KADKA mark bleeding off the right edge */
  position: absolute; z-index: 0;
  right: -7%; bottom: -10%;
  width: min(56vw, 820px); aspect-ratio: 1024 / 826; height: auto;
  fill: currentColor; opacity: 0.08;
  transform: rotate(-10deg);
  pointer-events: none;
}
.contact__title {
  margin-top: 22px;
  font-size: clamp(60px, 11.5vw, 184px);
  line-height: 0.9;
  letter-spacing: -0.055em;
  font-weight: 700;
}
.contact__lead {
  margin-top: 30px; max-width: 520px;
  font-size: clamp(17px, 1.5vw, 21px); font-weight: 500;
  color: var(--hero-soft);
  transition: color var(--theme-dur) var(--ease-in-out);
}
.contact__mail {
  margin-top: clamp(40px, 6vw, 72px);
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px;
}
.mail-link {
  font-size: clamp(32px, 6.4vw, 104px);
  font-weight: 700; letter-spacing: -0.05em; line-height: 1.05;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 0.06em no-repeat;
  padding-bottom: 0.06em;
  transition: background-size 0.6s var(--ease-out);
  overflow-wrap: anywhere;
}
.mail-link:hover { background-size: 0 0.06em; background-position: 100% 100%; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 20px 0 16px; border-radius: 999px;
  font-weight: 700; font-size: 16px;
  box-shadow: inset 0 0 0 2px var(--hero-line);
  transition: box-shadow 0.3s ease, transform 0.4s var(--ease-out);
}
.copy-btn:hover { box-shadow: inset 0 0 0 2px currentColor; transform: translateY(-2px); }
.copy-btn.is-done { background: var(--hero-fg); color: var(--hero-bg); box-shadow: none; }

.contact__follow { margin-top: clamp(48px, 7vw, 96px); display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.contact__follow-label { font-weight: 600; color: var(--hero-soft); }
.contact__socials { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 20px 0 16px;
  border-radius: 999px;
  background: var(--hero-fg); color: var(--hero-bg);
  font-weight: 700; font-size: 17px;
  transition: transform 0.45s var(--ease-out), background-color var(--theme-dur), color var(--theme-dur);
}
.pill svg { width: 24px; height: 24px; }
.pill .pill__arrow { width: 18px; height: 18px; transition: transform 0.45s var(--ease-out); }
.pill:hover { transform: translateY(-3px); }
.pill:hover .pill__arrow { transform: translate(2px, -2px); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--paper); padding: 34px 0 calc(34px + env(safe-area-inset-bottom)); }
.footer__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; }
.brand--footer .brand__mark { width: 30px; height: 24.2px; }
.brand--footer .brand__word { width: 68px; height: 14.3px; }
.footer__copy { font-size: 15px; color: rgba(247, 242, 234, 0.6); }
.footer__top { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.footer__top .icon { transition: transform 0.4s var(--ease-out); }
.footer__top:hover .icon { transform: translateY(-3px); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1100px) {
  .game { grid-column: span 6; min-height: 380px; }
  .game--xl { grid-column: span 12; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 32px; }
  .game--xl .game__badge { position: static; justify-self: start; grid-column: 2; grid-row: 1; margin-bottom: -6px; }
  .game--xl .game__icon { grid-row: 1 / span 2; grid-column: 1; }
  .game--xl .game__body { grid-column: 2; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .contact__deco { width: 92vw; right: -34%; bottom: -4%; opacity: 0.07; }
  .section-head { grid-template-columns: minmax(0, 1fr); }
  .nav__link { padding: 8px 12px; font-size: 15px; }
}

/* The hero stacks (the object above the text) on narrow screens, but not on a phone held
   sideways: there the stacked object filled the whole first screen and pushed the headline below
   it, so a short screen keeps the object beside the text unless it is too narrow for two columns.
   hero3d.js matches this same query (STACKED) to frame the object */
@media (max-width: 860px) and (min-height: 501px), (max-width: 600px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero__stage {
    --bleed: 0%; /* full width already */
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    order: -1;
    height: min(40svh, 380px);
    min-height: 280px;
    margin: calc(var(--header-h) + 8px) calc(var(--gutter) * -1) 0;
  }
  .hero__copy { padding: 8px 0 64px; }
  .hero__title { margin-top: 18px; }
  .hero__lead { margin-top: 22px; }
  .hero__actions { margin-top: 30px; }
  .hero__hint { top: auto; bottom: 6px; }
  .hero__from { top: 4px; font-size: 14px; } /* there's no room under the floor for both: the game goes on top */
  .hero__from img { width: 28px; height: 28px; }
}
/* a small phone held sideways stays stacked: a shorter stage, so the headline still starts on the
   first screen */
@media (max-width: 600px) and (max-height: 500px) {
  .hero__stage { height: 52svh; min-height: 150px; }
}
/* a bigger phone held sideways (or any screen this short): text and object side by side. The copy runs taller than the
   screen, so the stage is one screen high (the object stays in sight, not centred on the whole
   hero) and the headline a little smaller */
@media (min-width: 601px) and (max-height: 500px) {
  .hero__stage { bottom: auto; height: 100vh; height: 100svh; }
  .hero__copy { padding-top: calc(var(--header-h) + 20px); }
  .hero__title { font-size: clamp(34px, 11svh, 56px); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .header { padding-top: 10px; }
  .header__bar { height: 54px; padding: 0 6px 0 12px; gap: 6px; }
  .brand__word { display: none; }
  .nav { gap: 0; }
  .nav__link { padding: 8px 10px; }
  .social { width: 36px; height: 36px; }
  .social svg { width: 18px; height: 18px; }
  .socials { gap: 6px; }
  .game, .game--xl { grid-column: span 12; min-height: 0; }
  .game--xl { display: flex; }
  .game--xl .game__badge { position: absolute; }
  .btn { height: 54px; padding: 0 24px; }
  .hero__actions .btn { flex: 1 1 auto; }
  .footer__top { margin-left: 0; }
}

@media (max-width: 380px) {
  .nav__link { font-size: 14px; padding: 8px 8px; }
}
/* 320-350px phones: the header was ~20px too wide for its one row, so it gets tighter spacing */
@media (max-width: 350px) {
  .header { padding-inline: 10px; }
  .header__bar { gap: 4px; }
  .nav__link { padding: 8px 6px; }
}