/* =====================================================================================================================
   slimeduel.com — the landing page (served on the landing hosts by server/src/index.js; the game is play.slimeduel.com)

   ART DIRECTION: playful neo-brutalist arcade. The game's own UI turned into a poster: ink-black ground, thick ink
   outlines with hard offset shadows (no soft blur), the logo's four slime colours used as flat fills, drippy edges, and
   the game's display face (Slime Queen) for headlines. It must feel like the game, never like a SaaS page: no glass,
   no gradients-as-decoration on cards, no thin grey type. One hero move (the logo landing over live gameplay); the
   rest stays quiet: short reveals, hover lifts and a slow ticker.
   ===================================================================================================================== */

/* ---------- fonts (the game's own files) ---------- */
@font-face { font-family: 'Slime Queen'; src: url('/assets/fonts/SlimeQueen-Regular.ttf') format('truetype'); unicode-range: U+0020, U+0041-005A, U+0061-007A; font-display: swap; }
@font-face { font-family: 'Slime Vibes'; src: url('/assets/fonts/SlimeVibesDEMO-DEMO.ttf') format('truetype'); unicode-range: U+0021-002B, U+002D, U+002F-0040, U+005B-0060, U+007B-007E; font-display: swap; size-adjust: 56%; }
@font-face { font-family: 'Rubik'; src: url('/assets/fonts/Rubik-latin.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  /* colour: the logo's slimes on ink */
  --ink: #110e19;
  --ink-2: #1c1729;
  --ink-3: #2a2340;
  --paper: #fff8ec;
  --text: #f4efff;
  --text-dim: #b9b0d0;
  --lime: #b6ff2e;
  --cyan: #34e6ff;
  --pink: #ff3fa4;
  --orange: #ff7a1a;
  --violet: #8b5cff;
  --yellow: #ffd21a;

  /* type */
  --font-display: 'Slime Queen', 'Slime Vibes', 'Rubik', system-ui, sans-serif;
  --font-sans: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-kicker: clamp(.72rem, .66rem + .3vw, .88rem);
  --fs-body: clamp(1rem, .95rem + .25vw, 1.125rem);
  --fs-lede: clamp(1.05rem, .98rem + .45vw, 1.35rem);
  --fs-h3: clamp(1.3rem, 1.1rem + .8vw, 1.8rem);
  --fs-h2: clamp(2.3rem, 1.6rem + 3.4vw, 4.6rem);
  --fs-h2-xl: clamp(2.8rem, 1.8rem + 5vw, 6.4rem);

  /* space */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;

  /* shape */
  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px;
  --line: 3px;                     /* the ink outline */
  --pop: 6px;                      /* the hard offset shadow */
  --shadow-pop: var(--pop) var(--pop) 0 var(--ink);
  --shadow-pop-lg: 10px 10px 0 var(--ink);
  --stroke-title: .045em;          /* ink stroke on display type */

  /* motion */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 140ms; --t-med: 280ms; --t-slow: 700ms;

  /* layers */
  --z-nav: 50; --z-dock: 60;

  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--ink); color: var(--text); font: 500 var(--fs-body) / 1.55 var(--font-sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 100; padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); background: var(--yellow); color: var(--ink); font-weight: 800; }
.skip:focus { top: var(--s-4); }

/* ---------- shared pieces ---------- */
.display { font: 400 var(--fs-h2) / .92 var(--font-display); letter-spacing: .01em; color: #fff; text-wrap: balance;
  -webkit-text-stroke: var(--stroke-title) var(--ink); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--ink); }
.display--xl { font-size: var(--fs-h2-xl); }
.num { font-family: 'Slime Vibes', var(--font-display); }
.hl { display: inline-block; padding: 0 .12em; }
.hl--lime { color: var(--lime); } .hl--pink { color: var(--pink); } .hl--cyan { color: var(--cyan); } .hl--orange { color: var(--orange); }
.hl--ink { color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--r-md); padding: .05em .25em .12em; rotate: -2deg; box-shadow: var(--shadow-pop); }
.kicker { display: inline-flex; align-items: center; gap: .6em; font: 900 var(--fs-kicker) / 1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--lime); }
.kicker::before { content: ''; width: 1.6em; height: .35em; border-radius: var(--r-pill); background: currentColor; }
.kicker--sm { font-size: .72rem; color: var(--text-dim); }
.tag { display: inline-flex; align-items: center; gap: .55em; padding: .5em .95em .45em; border: var(--line) solid var(--ink); border-radius: var(--r-pill); background: var(--paper); color: var(--ink);
  font: 900 var(--fs-kicker) / 1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--ink); }
.tag--beta i { width: .65em; height: .65em; border-radius: 50%; background: #ff3d5e; animation: live 1.6s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(255, 61, 94, .7); } 100% { box-shadow: 0 0 0 .7em rgba(255, 61, 94, 0); } }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .85em 1.6em .8em; border: var(--line) solid var(--ink); border-radius: var(--r-pill);
  font: 900 1.05rem / 1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-pop); transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.btn svg { width: 1.15em; height: 1.15em; fill: currentColor; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--pop) + 2px) calc(var(--pop) + 2px) 0 var(--ink); }
.btn:active { transform: translate(var(--pop), var(--pop)); box-shadow: 0 0 0 var(--ink); }
.btn--play { background: var(--lime); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--lime); border-color: var(--ink); box-shadow: var(--pop) var(--pop) 0 rgba(17, 14, 25, .35); }
.btn--sm { padding: .62em 1.15em .58em; font-size: .85rem; box-shadow: 4px 4px 0 var(--ink); }
.btn--xl { padding: 1em 2em .95em; font-size: clamp(1.05rem, .95rem + .6vw, 1.4rem); }

.sec { position: relative; padding: var(--s-9) var(--gutter); }
.sec > * { max-width: var(--max); margin-inline: auto; }
.sec__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-7); }
.sec__lede { max-width: 38em; font-size: var(--fs-lede); color: var(--text-dim); }

/* reveal on scroll (landing.js adds .is-in; without JS everything is simply visible) */
.js .reveal { opacity: 0; translate: 0 28px; transition: opacity var(--t-slow) var(--ease-out), translate var(--t-slow) var(--ease-out); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* drips between sections */
.drip { display: block; width: 100%; height: clamp(40px, 6vw, 90px); }
.drip path { fill: var(--ink); }

/* ---------- nav ---------- */
.nav { position: fixed; z-index: var(--z-nav); inset: var(--s-3) var(--gutter) auto; display: flex; align-items: center; gap: var(--s-5); max-width: var(--max); margin-inline: auto;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border: var(--line) solid transparent; border-radius: var(--r-pill); transition: background var(--t-med), border-color var(--t-med), box-shadow var(--t-med), translate var(--t-med) var(--ease-out); }
.nav.is-solid { background: var(--ink-2); border-color: var(--ink); box-shadow: 0 4px 0 rgba(0, 0, 0, .5); }
.nav__logo img { width: 104px; margin: -14px 0; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.nav__links { display: flex; gap: var(--s-1); margin-left: auto; }
.nav__links a { padding: .55em .7em .45em; border-radius: var(--r-pill); font: 400 1.12rem / 1 var(--font-display); letter-spacing: .02em; text-decoration: none; color: var(--text); transition: background var(--t-fast); }
.nav__links a:hover { background: rgba(255, 255, 255, .1); }
.nav > .btn { margin-left: var(--s-2); }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; place-items: center; padding: 100px var(--gutter) 210px; overflow: hidden; background: var(--ink); }
.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; scale: 1.08; animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { to { scale: 1.16; translate: -1.5% -1%; } }
.hero__shade { position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(60% 55% at 50% 45%, rgba(17, 14, 25, .2), rgba(17, 14, 25, .78) 70%), linear-gradient(180deg, rgba(17, 14, 25, .55), rgba(17, 14, 25, .15) 35%, rgba(17, 14, 25, .85)); }
.hero__blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__blobs i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .26; mix-blend-mode: screen; animation: blob 14s ease-in-out infinite alternate; }
.hero__blobs i:nth-child(1) { width: 34vw; height: 34vw; left: -8vw; top: 10%; background: var(--lime); }
.hero__blobs i:nth-child(2) { width: 30vw; height: 30vw; right: -6vw; top: 30%; background: var(--pink); animation-delay: -5s; }
.hero__blobs i:nth-child(3) { display: none; }
@keyframes blob { to { translate: 4vw -3vw; scale: 1.15; } }
.hero__inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); text-align: center; max-width: 920px; }
.hero__logo { width: min(100%, 760px); margin: calc(-1 * var(--s-6)) 0 calc(-1 * var(--s-7)); }
.hero__logo img { width: 100%; filter: drop-shadow(0 10px 0 rgba(17, 14, 25, .55)); animation: land 1.1s var(--ease-spring) both .1s; }
@keyframes land { from { opacity: 0; scale: .55; rotate: -6deg; translate: 0 -40px; } 60% { opacity: 1; } }
.hero__lede { max-width: 34em; font: 700 var(--fs-lede) / 1.45 var(--font-sans); color: #fff; text-shadow: 0 2px 0 rgba(17, 14, 25, .8); animation: rise .8s var(--ease-out) both .55s; }
.hero__lede em { display: block; font-style: normal; color: var(--lime); }
.hero__cta { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); animation: rise .8s var(--ease-out) both .7s; }
.hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.hero__chips li { padding: .45em .9em .4em; border-radius: var(--r-pill); background: rgba(17, 14, 25, .7); border: 2px solid rgba(255, 255, 255, .18); font: 800 .78rem / 1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; }
.hero .tag { animation: rise .8s var(--ease-out) both .35s; }
@keyframes rise { from { opacity: 0; translate: 0 18px; } }
.hero__scroll { position: absolute; bottom: clamp(70px, 9vw, 120px); left: 50%; translate: -50% 0; width: 28px; height: 44px; border: 3px solid rgba(255, 255, 255, .8); border-radius: 14px; }
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 6px; height: 10px; margin-left: -3px; border-radius: 3px; background: #fff; animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 0; translate: 0 0; } 30% { opacity: 1; } 100% { opacity: 0; translate: 0 14px; } }
.drip--hero { position: absolute; left: 0; right: 0; bottom: -1px; transform: scaleY(-1); }

/* ---------- ticker ---------- */
.ticker { position: relative; z-index: 2; margin-top: -4px; overflow: hidden; background: var(--lime); color: var(--ink); border-block: var(--line) solid var(--ink); rotate: -1.4deg; scale: 1.03; }
.ticker__run { display: flex; align-items: center; gap: 1.1em; width: max-content; padding: .55em 0 .45em; animation: tick 32s linear infinite; font: 400 clamp(1.4rem, 1rem + 1.6vw, 2.3rem) / 1 var(--font-display); text-transform: uppercase; white-space: nowrap; }
.ticker__run b { font: 900 .7em / 1 var(--font-sans); color: var(--pink); }
@keyframes tick { to { translate: -50% 0; } }

/* ---------- how it plays ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.step { position: relative; padding: var(--s-6) var(--s-5) var(--s-5); padding-right: 120px; border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--ink-2); box-shadow: 8px 8px 0 var(--tint);
  transition: translate var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-out); }
.step:hover { translate: 0 -4px; box-shadow: 10px 12px 0 var(--tint); }
.step:nth-child(2) { rotate: .8deg; } .step:nth-child(3) { rotate: -.6deg; }
.step__n { position: absolute; top: -24px; left: var(--s-5); display: grid; place-items: center; width: 48px; height: 48px; border: var(--line) solid var(--ink); border-radius: 50%; background: var(--tint); color: var(--ink);
  font: 900 1.35rem / 1 var(--font-sans); box-shadow: 3px 3px 0 var(--ink); }
.step__pic { position: absolute; right: -14px; top: 50%; width: 128px; height: 128px; translate: 0 -50%; rotate: 8deg; filter: drop-shadow(4px 4px 0 var(--ink)); pointer-events: none;
  transition: rotate var(--t-med) var(--ease-spring), scale var(--t-med) var(--ease-spring); }
.step:hover .step__pic { rotate: -4deg; scale: 1.08; }
.step h3 { margin-bottom: var(--s-2); font: 900 var(--fs-h3) / 1.1 var(--font-sans); color: var(--tint); }
.step p { color: var(--text-dim); }

/* ---------- modes ---------- */
.sec--modes { background: var(--ink-2); }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.mode { position: relative; display: flex; flex-direction: column; overflow: hidden; border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--ink); box-shadow: 8px 8px 0 color-mix(in srgb, var(--tint) 70%, var(--ink));
  transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-out); }
.mode:hover { transform: translate(-4px, -4px) rotate(-.6deg); box-shadow: 13px 13px 0 var(--tint); }
.mode img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--line) solid var(--ink); }
.mode__body { position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }
.mode__tag { align-self: flex-start; padding: .38em .75em .34em; border-radius: var(--r-pill); background: var(--tint); color: var(--ink); font: 900 .72rem / 1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
.mode h3 { font: 400 var(--fs-h3) / 1 var(--font-display); font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); color: #fff; -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; }
.mode p { color: var(--text-dim); }
.mode--big { grid-column: span 2; grid-row: span 2; }
.mode--big img { aspect-ratio: auto; flex: 1; min-height: 0; height: 100%; }
.mode--big .mode__body { position: absolute; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); max-width: 30em; border: var(--line) solid var(--ink); border-radius: var(--r-md); background: var(--ink-2); box-shadow: var(--shadow-pop); }

/* ---------- arsenal ---------- */
.rack { max-width: none !important; margin-inline: calc(-1 * var(--gutter)) !important; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rack__run { display: flex; gap: var(--s-4); width: max-content; padding: var(--s-4) 0 var(--s-6); animation: rack 60s linear infinite; }
.rack:hover .rack__run, .rack:focus-within .rack__run { animation-play-state: paused; }
@keyframes rack { to { translate: -50% 0; } }
.gun { flex: none; display: flex; flex-direction: column; align-items: center; width: 200px; padding: var(--s-3) var(--s-3) var(--s-4); border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--ink-2);
  box-shadow: var(--shadow-pop); transition: transform var(--t-med) var(--ease-spring), background var(--t-med); }
.gun:nth-child(4n+1) { --tint: var(--lime); } .gun:nth-child(4n+2) { --tint: var(--cyan); } .gun:nth-child(4n+3) { --tint: var(--pink); } .gun:nth-child(4n) { --tint: var(--orange); }
.gun:hover { transform: translateY(-8px) rotate(-2deg); background: var(--ink-3); box-shadow: 6px 6px 0 var(--tint); }
.gun img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .45)); }
.gun b { font: 400 1.5rem / 1 var(--font-display); color: var(--tint); -webkit-text-stroke: .04em var(--ink); paint-order: stroke fill; }
.gun small { margin-top: .3em; font: 800 .72rem / 1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.skins { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-5); }
.skins ul { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.skins li { width: 96px; height: 96px; padding: 6px; border: var(--line) solid var(--ink); border-radius: var(--r-md); background: var(--ink-2); transition: transform var(--t-med) var(--ease-spring); }
.skins li:hover { transform: scale(1.12) rotate(4deg); }
.skins img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- maps ---------- */
.sec--maps { background: var(--ink-2); }
.sec--maps .sec__head { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
.sec--maps .sec__head > .kicker { flex-basis: 100%; }
.daynight { display: inline-flex; padding: 4px; border: var(--line) solid var(--ink); border-radius: var(--r-pill); background: var(--ink); box-shadow: 4px 4px 0 rgba(0, 0, 0, .4); }
.daynight button { padding: .55em 1.2em .5em; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-dim); font: 900 .85rem / 1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.daynight button.is-on { background: var(--orange); color: var(--ink); }
.maps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
.map__pic { overflow: hidden; border: var(--line) solid var(--ink); border-radius: var(--r-md); box-shadow: 5px 5px 0 rgba(255, 122, 26, .55); aspect-ratio: 16 / 10; background: var(--ink-3); }
.map__pic img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--t-slow) var(--ease-out), opacity var(--t-med); }
.map:hover .map__pic img { scale: 1.08; }
.map.is-swapping img { opacity: .2; }
.map h3 { margin-top: var(--s-3); font: 400 1.55rem / 1 var(--font-display); color: #fff; }
.map p { margin-top: var(--s-1); font-size: .9rem; line-height: 1.4; color: var(--text-dim); }

/* ---------- squad ---------- */
.sec--squad { padding-top: 0; }
.squad { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden; border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--violet); box-shadow: 10px 10px 0 var(--lime); }
.squad__pic { width: 100%; height: 100%; object-fit: cover; border-right: var(--line) solid var(--ink); }
.squad__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); padding: var(--s-7) var(--s-6); }
.squad .kicker { color: var(--ink); }
.ticks { display: flex; flex-direction: column; gap: var(--s-3); }
.ticks li { position: relative; padding-left: 2.1em; font-weight: 700; color: #fff; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .1em; width: 1.4em; height: 1.4em; border: 2px solid var(--ink); border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23110e19' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat; }

/* ---------- final CTA ---------- */
.final { position: relative; background: var(--lime); color: var(--ink); padding: 0 var(--gutter) var(--s-9); text-align: center; }
.drip--top { width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)) var(--s-7); }
.final__inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); max-width: 860px; margin-inline: auto; }
.final .display { color: #fff; }
.final p { max-width: 30em; font: 700 var(--fs-lede) / 1.45 var(--font-sans); }

/* ---------- footer ---------- */
.foot { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding: var(--s-7) var(--gutter) calc(var(--s-7) + env(safe-area-inset-bottom)); text-align: center; background: var(--ink); color: var(--text-dim); }
.foot__logo { width: 150px; }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); }
.foot__links a { font-weight: 800; text-decoration: none; color: var(--text); }
.foot__links a:hover { color: var(--lime); }
.foot small { font-size: .82rem; }

/* ---------- phone dock ---------- */
.dock { position: fixed; z-index: var(--z-dock); left: var(--s-4); right: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); display: none; justify-content: center; padding: 1em; border: var(--line) solid var(--ink); border-radius: var(--r-pill);
  background: var(--lime); color: var(--ink); font: 900 1.05rem / 1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; box-shadow: 0 6px 0 var(--ink);
  translate: 0 calc(100% + 40px); transition: translate var(--t-med) var(--ease-out); }
.dock.is-up { translate: 0 0; }

/* ---------- slime headers (landing.js: one WebGL2 context paints a dripping slime canvas into each section top) ---------- */
.sec[data-goo-on] { isolation: isolate; }
.goo { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; max-width: none !important; margin: 0 !important; pointer-events: none; }
.sec[data-goo-on] > :not(.goo) { position: relative; z-index: 1; }
.sec.no-goo::before { content: ''; position: absolute; inset: 0 0 auto; height: 18px; background: var(--goo-c); border-bottom: var(--line) solid var(--ink); }

/* ---------- playstyles ---------- */
.sec--kit { background: var(--ink-2); }
.builds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin-bottom: var(--s-7); }
.build { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5) var(--s-4); border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--ink);
  box-shadow: 8px 8px 0 var(--tint); transition: transform var(--t-med) var(--ease-spring); }
.build:hover { transform: translate(-3px, -3px) rotate(-.8deg); }
.build h3 { font: 400 clamp(1.6rem, 1.3rem + .9vw, 2.1rem) / 1 var(--font-display); color: var(--tint); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; }
.build__kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.build__kit li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s-2) var(--s-1); border-radius: var(--r-md); background: var(--ink-3); text-align: center; }
.build__kit img { width: 100%; max-width: 92px; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .45)); }
.build__kit small { font: 900 .6rem / 1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.build__kit b { font: 800 .8rem / 1.15 var(--font-sans); }
.build p { color: var(--text-dim); font-size: .95rem; line-height: 1.4; }
  font: 900 .9rem / 1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
  background: var(--ink); text-align: center; transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med); animation: pop .45s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes pop { from { opacity: 0; scale: .85; } }

/* ---------- the closet (your look) ---------- */
.closet { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-6); align-items: stretch; }
.closet__stage { position: relative; display: grid; place-items: center; min-height: 460px; overflow: hidden; border: var(--line) solid var(--ink); border-radius: var(--r-lg);
  background: radial-gradient(circle at 50% 38%, rgba(182, 255, 46, .35), transparent 55%), radial-gradient(circle at 80% 90%, rgba(255, 63, 164, .45), transparent 50%), var(--ink-3); box-shadow: 10px 10px 0 var(--pink); }
.closet__rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .07) 0 10deg, transparent 10deg 20deg); animation: spin 40s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.closet__pad { position: absolute; left: 50%; bottom: 9%; width: 62%; height: 13%; translate: -50% 0; border: var(--line) solid var(--ink); border-radius: 50%; background: var(--lime); box-shadow: 0 8px 0 var(--ink), inset 0 -10px 0 rgba(0, 0, 0, .18); }
.closet__hero { position: relative; z-index: 1; width: min(78%, 360px); height: auto; margin-bottom: 8%; filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .5)); }
.closet__hero.is-in { animation: tryon .5s var(--ease-spring); }
@keyframes tryon { 0% { scale: .7; rotate: -6deg; opacity: .2; } 60% { scale: 1.06; rotate: 2deg; } }
.closet__name { position: absolute; z-index: 2; left: 50%; top: var(--s-4); translate: -50% 0; padding: .35em .9em .4em; border: var(--line) solid var(--ink); border-radius: var(--r-pill); background: var(--paper); color: var(--ink);
  font: 400 1.4rem / 1 var(--font-display); white-space: nowrap; box-shadow: 4px 4px 0 var(--ink); }
.closet__side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.closet__tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.closet__tabs button { display: inline-flex; align-items: baseline; gap: .4em; padding: .6em 1em .55em; border: var(--line) solid var(--ink); border-radius: var(--r-pill); background: var(--ink-2); color: var(--text);
  font: 900 .85rem / 1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: transform var(--t-fast), background var(--t-fast); }
.closet__tabs button b { font: 400 1.15rem / 1 'Slime Vibes', var(--font-display); color: var(--pink); }
.closet__tabs button:hover { transform: translateY(-2px); }
.closet__tabs button.is-on { background: var(--lime); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.closet__tabs button.is-on b { color: var(--ink); }
.closet__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.closet__grid button { display: block; width: 100%; aspect-ratio: 1; padding: 6px; border: var(--line) solid var(--ink); border-radius: var(--r-md); background: var(--ink-2); cursor: pointer;
  transition: transform var(--t-med) var(--ease-spring), background var(--t-fast), box-shadow var(--t-fast); animation: pop .4s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 25ms); }
.closet__grid button:hover { transform: translateY(-4px) rotate(-2deg); background: var(--ink-3); }
.closet__grid button.is-on { background: var(--ink-3); box-shadow: 0 0 0 3px var(--lime), 5px 5px 0 var(--lime); }
.closet__grid img { width: 100%; height: 100%; object-fit: contain; }
.closet__hint { font-size: .85rem; color: var(--text-dim); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .kit__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .maps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode--big { grid-row: auto; }
  .mode--big img { aspect-ratio: 16 / 9; height: auto; }
}
@media (max-width: 860px) {
  .builds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .closet { grid-template-columns: 1fr; }
  .closet__stage { min-height: 360px; }
  .nav__links { display: none; }
  .nav > .btn { margin-left: auto; }
  .steps { grid-template-columns: 1fr; gap: var(--s-7); }
  .step:nth-child(n) { rotate: 0deg; }
  .step { padding-right: 104px; }
  .step__pic { width: 100px; height: 100px; right: -6px; }
  .squad { grid-template-columns: 1fr; }
  .squad__pic { border-right: 0; border-bottom: var(--line) solid var(--ink); aspect-ratio: 16 / 9; height: auto; }
  .squad__copy { padding: var(--s-6) var(--s-5); }
  .dock { display: flex; }
}
@media (max-width: 620px) {
  .builds { grid-template-columns: 1fr; }
  .kit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kitc img { width: 72px; height: 72px; }
  .closet__grid { gap: var(--s-2); }
  .closet__stage { min-height: 300px; }
  .closet__hero { width: min(58%, 230px); }
  .closet__tabs button { font-size: .75rem; }
  :root { --pop: 5px; }
  .sec { padding-block: var(--s-8); }
  .modes { grid-template-columns: 1fr; }
  .mode--big { grid-column: auto; }
  .mode--big .mode__body { position: static; max-width: none; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .maps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
  .map h3 { font-size: 1.3rem; }
  .map p { font-size: .82rem; }
  .gun { width: 160px; } .gun img { width: 120px; height: 120px; }
  .skins li { width: 72px; height: 72px; }
  .hero { padding-top: 100px; }
  .hero__logo { margin-block: calc(-1 * var(--s-4)) calc(-1 * var(--s-5)); }
  .hero__scroll { display: none; }
  .nav__logo img { width: 86px; }
}

/* ---------- reduced motion: no drift, no ticker, no reveals ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
  .js .reveal { opacity: 1; translate: 0 0; }
  .rack { overflow-x: auto; }
}

/* ---------- the hero banner's text and the nav's button, in the game's display face ---------- */
.nav .btn { font: 400 1.05rem / 1 var(--font-display); letter-spacing: .03em; text-transform: none; }
.hero .tag { font: 400 1.1rem / 1 var(--font-display); letter-spacing: .04em; text-transform: none; }
.hero__lede { font: 400 clamp(1.3rem, 1.05rem + 1vw, 1.9rem) / 1.2 var(--font-display); letter-spacing: .015em; -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--ink); }
.hero__chips li { font: 400 1.05rem / 1 var(--font-display); letter-spacing: .03em; text-transform: none; }
.hero .btn--xl { font: 400 clamp(1.5rem, 1.25rem + 1vw, 2.1rem) / 1 var(--font-display); letter-spacing: .03em; text-transform: none; }

/* ---------- playstyles: a couple of weapons and subs ---------- */
.picks { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-7); }
.picks__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.pick { display: flex; flex-direction: column; align-items: center; gap: .2em; padding: var(--s-4); border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--ink-2); box-shadow: 5px 5px 0 var(--tint); text-align: center; transition: transform var(--t-fast) var(--ease-out); }
.pick:hover { transform: translateY(-5px) rotate(-1.5deg); }
.pick img { width: min(100%, 168px); height: auto; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .45)); }
.pick small { font: 800 .75rem / 1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.pick b { font: 400 1.6rem / 1.1 var(--font-display); color: #fff; }

/* ---------- invite and earn, the banner in the middle ---------- */
.earn { position: relative; z-index: 1; padding: var(--s-8) var(--gutter); background: linear-gradient(120deg, #ffe45c, var(--yellow) 45%, #ff9a1a); color: var(--ink); border-block: var(--line) solid var(--ink); rotate: -1deg; scale: 1.02; }
.earn__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: var(--s-7); max-width: var(--max); margin-inline: auto; rotate: 1deg; }
.earn__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.earn .kicker { color: var(--ink); }
.earn .display { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.8rem); color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; }
.earn p { max-width: 32em; font: 700 var(--fs-lede) / 1.4 var(--font-sans); }
.earn__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-2); }
.earn__more { font: 400 1.35rem / 1 var(--font-display); color: var(--ink); text-underline-offset: .2em; }
.earn__facts { display: grid; gap: var(--s-3); }
.earn__facts li { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-5); border: var(--line) solid var(--ink); border-radius: var(--r-md); background: var(--paper); box-shadow: 5px 5px 0 var(--ink); font: 800 1.02rem / 1.25 var(--font-sans); }
.earn__facts b { flex: none; min-width: 2.3em; font: 400 2.5rem / 1 'Slime Vibes', var(--font-display); color: #e0267f; }

/* ---------- your look: the slime colours ---------- */
.colours { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.colours__lbl { margin-right: var(--s-2); font: 400 1.35rem / 1 var(--font-display); color: #fff; }
.colours li:not(.colours__lbl) { display: inline-flex; align-items: center; gap: .45em; padding: .35em .75em .35em .4em; border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--ink-2); font: 800 .85rem / 1 var(--font-sans); }
.colours li:not(.colours__lbl)::before { content: ''; width: 1.15em; height: 1.15em; border: 2px solid var(--ink); border-radius: 50%; background: var(--c); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }

/* ---------- news.slimeduel.com and creator.slimeduel.com ---------- */
.page-hero { position: relative; padding: calc(var(--s-9) + 3rem) var(--gutter) var(--s-8); text-align: center; overflow: hidden; border-bottom: var(--line) solid var(--ink); background: linear-gradient(rgba(17, 14, 25, .62), rgba(17, 14, 25, .9)), var(--hero) center / cover; }
.page-hero__inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); max-width: 860px; margin-inline: auto; }
.page-hero p { max-width: 34em; font-size: var(--fs-lede); color: #fff; }
.feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); max-width: var(--max); margin-inline: auto; }
.post { display: flex; flex-direction: column; overflow: hidden; border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--ink-2); box-shadow: var(--shadow-pop); }
.post--lead { grid-column: 1 / -1; }
.post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--line) solid var(--ink); }
.post--lead img { aspect-ratio: 21 / 9; }
.post__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-5); }
.post__meta { display: flex; align-items: center; gap: var(--s-3); font: 800 .78rem / 1 var(--font-sans); letter-spacing: .1em; color: var(--text-dim); }
.post__kind { padding: .35em .7em; border-radius: var(--r-pill); background: var(--lime); color: var(--ink); }
.post h2 { font: 400 var(--fs-h3) / 1.05 var(--font-display); color: #fff; }
.post p { color: var(--text-dim); }
.post details { width: 100%; }
.post summary { font: 400 1.25rem / 1 var(--font-display); color: var(--lime); cursor: pointer; }
.post h3 { margin: var(--s-4) 0 var(--s-2); font: 900 .8rem / 1 var(--font-sans); letter-spacing: .14em; color: var(--cyan); }
.post details ul { display: grid; gap: .4em; padding-left: 1.2em; list-style: disc; color: var(--text); font-size: .95rem; }
.feed__empty { grid-column: 1 / -1; text-align: center; color: var(--text-dim); }
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.how li { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--ink-2); box-shadow: 5px 5px 0 var(--tint); }
.how b { font: 400 3rem / 1 'Slime Vibes', var(--font-display); color: var(--tint); }
.how h3 { font: 400 var(--fs-h3) / 1.05 var(--font-display); color: #fff; }
.how p { color: var(--text-dim); }
.ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); }
.ladder li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em; min-height: 9rem; padding: var(--s-3); border: var(--line) solid var(--ink); border-radius: var(--r-md); background: var(--ink-2); text-align: center; }
.ladder small { font: 800 .75rem / 1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.ladder b { font: 400 1.35rem / 1.05 var(--font-display); color: #fff; }
.ladder li.is-cash { background: linear-gradient(170deg, #ffe45c, #ff9a1a); color: var(--ink); }
.ladder li.is-cash small, .ladder li.is-cash b { color: var(--ink); -webkit-text-stroke: 0; }
.faq { display: grid; gap: var(--s-3); max-width: 860px; }
.faq details { padding: var(--s-4) var(--s-5); border: var(--line) solid var(--ink); border-radius: var(--r-md); background: var(--ink-2); }
.faq summary { font: 400 1.4rem / 1.1 var(--font-display); color: #fff; cursor: pointer; }
.faq p { margin-top: var(--s-3); color: var(--text-dim); }

@media (max-width: 1180px) {
  .nav__links a { padding-inline: .45em; font-size: 1rem; }
}
@media (max-width: 860px) {
  .picks__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .earn__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .feed { grid-template-columns: minmax(0, 1fr); }
  .post--lead img { aspect-ratio: 16 / 9; }
  .how { grid-template-columns: minmax(0, 1fr); }
  .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}