/* ===== Self-hosted Open Sans (variable, latin + latin-ext) ===== */
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/opensans-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/opensans-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ Cold Ones — coldones.net · v2 ============
   Design system: the website lives in the app's own world.
   Brand: ink #0e0f1f · teal #42e4dd · pink #ff4d6d · yellow #ffd15b
   green #9be15d · orange #ff8a5c · grape #6155f5 · magenta #e91e63
   Type: Open Sans 800 ALL-CAPS display (the app's own title style).
   Signature: cycling app-gradient field + liquid glass panels.       */

:root {
  --ink: #0e0f1f;
  --ink-soft: rgba(14, 15, 31, .74);
  --ink-faint: rgba(14, 15, 31, .58);
  --paper: #fffaf2;
  --text: var(--ink);

  --teal: #42e4dd;
  --pink: #ff4d6d;
  --yellow: #ffd15b;
  --green: #9be15d;
  --orange: #ff8a5c;
  --grape: #6155f5;
  --magenta: #e91e63;
  --gold: #ffb300;

  --grad-brand: linear-gradient(100deg, var(--grape), var(--magenta));
  --grad-home: linear-gradient(170deg, #8fe07e 0%, #c8e468 34%, #ffd15b 68%, #ffaa66 100%);
  --grad-party: linear-gradient(160deg, #ffd15b 0%, #ff8a5c 42%, #ff70b8 100%);
  --grad-night: linear-gradient(165deg, #5f35b8 0%, #3241b5 45%, #09706b 100%);

  --glass-bg: rgba(255, 255, 255, .44);
  --glass-bg-strong: rgba(255, 255, 255, .6);
  --glass-line: rgba(255, 255, 255, .66);
  --glass-blur: 16px;
  --glass-shadow: 0 18px 50px rgba(14, 15, 31, .14);

  --r-s: 16px;
  --r-m: 24px;
  --r-l: 36px;
  --r-xl: 48px;

  --font: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.45, .64, 1);
  --dock-h: 76px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a, button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; border-radius: 6px; }
.cocktails :focus-visible, .cta__panel :focus-visible { outline-color: var(--yellow); }

.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;
}

em { font-style: normal; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ============ Reveal-on-scroll ============ */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(.98);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-back);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.in .reveal, .reveal.in { opacity: 1; transform: none; }

/* ============ Glass primitives ============ */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.65);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.65);
  box-shadow: var(--glass-shadow);
}

/* ============ Store pills — identical size, both stores ============ */
.store-pill {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 13px;
  width: 218px; height: 62px; padding: 0 20px;
  border-radius: 17px; text-decoration: none;
  background: var(--ink); color: #fff;
  box-shadow: 0 10px 30px rgba(14, 15, 31, .28);
  transition: transform .3s var(--ease-back), box-shadow .3s;
}
.store-pill:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 38px rgba(14, 15, 31, .36); }
.store-pill:active { transform: translateY(-1px) scale(1.0); }
.store-pill svg { width: 27px; height: 27px; flex: none; }
.store-pill__txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-pill__txt small { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; opacity: .8; text-transform: uppercase; }
.store-pill__txt strong { font-size: 17.5px; font-weight: 800; letter-spacing: .01em; }
.store-pill--light { background: #fff; color: var(--ink); box-shadow: 0 10px 30px rgba(14, 15, 31, .22); }

/* ============ Nav ============ */
.nav {
  position: fixed; inset: 14px 14px auto 14px; z-index: 60;
  display: flex; align-items: center; justify-content: flex-start;
  gap: clamp(12px, 2.6vw, 30px);
  padding: 10px 12px 10px 18px;
  border-radius: 22px;
  background: transparent; border: 1px solid transparent;
  transition: background .35s, border-color .35s, box-shadow .35s, backdrop-filter .35s;
  max-width: 1220px; margin: 0 auto;
}
.nav.scrolled {
  background: var(--glass-bg-strong);
  border-color: var(--glass-line);
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: 0 12px 40px rgba(14, 15, 31, .12);
}
.nav__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 19px; margin-right: auto; }
.nav > .btn { margin-left: auto; }
.nav__brand img { border-radius: 10px; width: 38px; height: 38px; }
.nav__links { display: flex; gap: clamp(12px, 2.6vw, 30px); }
.nav__links a {
  color: var(--ink-soft); text-decoration: none; font-weight: 700; font-size: 14.5px;
  padding: 8px 10px; border-radius: 10px; transition: color .25s, background .25s;
}
.nav__links a:hover { color: var(--ink); background: rgba(255, 255, 255, .5); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  font-weight: 800; text-decoration: none; border-radius: 999px;
  padding: 12px 22px; font-size: 14.5px; border: none; font-family: var(--font);
  transition: transform .3s var(--ease-back), box-shadow .3s, background .3s;
  box-shadow: 0 8px 24px rgba(14, 15, 31, .25);
}
.btn:hover { transform: translateY(-2px) scale(1.03); }
.btn--small { padding: 10px 18px; font-size: 13.5px; }

/* ============ Gradient field (hero backdrop) ============ */
/* magenta -> pink -> orange, lighter toward the bottom (no green) */
.field {
  position: relative;
  background: linear-gradient(180deg, #ee55a4 0%, #f76e92 32%, #fa9370 64%, #ffd0aa 88%, #fff3e5 100%);
  overflow: clip;
}
.field__blob {
  position: absolute; border-radius: 50%; filter: blur(90px);
  opacity: .55; pointer-events: none;
  animation: drift 18s ease-in-out infinite alternate;
}
.b1 { width: 52vw; height: 52vw; background: #ff2f9e; top: -20%; left: -12%; mix-blend-mode: multiply; opacity: .35; }
.b2 { width: 40vw; height: 40vw; background: #ff8a3c; top: 26%; right: -14%; mix-blend-mode: multiply; opacity: .3; animation-delay: -6s; }
.b3 { width: 46vw; height: 46vw; background: #fff0da; bottom: -18%; left: 22%; mix-blend-mode: screen; opacity: .8; animation-delay: -12s; }
/* anchored dead on the top-left corner: bluest at the edge, melting outward */
.b4 { width: 52vw; height: 52vw; background: #76dbff; top: -26vw; left: -26vw; opacity: .9; animation-delay: -9s; }
/* phones: the vw-sized blue blob shrinks to nothing — give it real presence like desktop */
@media (max-width: 700px) {
  .b4 { width: 88vw; height: 88vw; top: -44vw; left: -44vw; }
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  to { transform: translate3d(5vw, 6vh, 0) scale(1.15) rotate(8deg); }
}

/* ============ Hero ============ */
.hero { position: relative; padding: clamp(120px, 15vh, 170px) clamp(18px, 4vw, 44px) 0; }
.hero__inner {
  position: relative; width: min(1220px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(20px, 3vw, 44px); align-items: center;
}
.hero__copy { padding-bottom: clamp(40px, 6vw, 80px); }

/* same liquid glass as the hero chips */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 12.5px;
  color: var(--ink); background: var(--glass-bg-strong);
  border: 1px solid var(--glass-line); border-radius: 999px; padding: 10px 18px;
  backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 14px 34px rgba(14, 15, 31, .16);
  margin-bottom: 22px;
}

.hero__title {
  font-size: clamp(46px, 7vw, 100px);
}
/* localized headlines run longer than the English one — scale them so no
   single word can overflow the copy column; the EN page is untouched */
:lang(de) .hero__title, :lang(es) .hero__title, :lang(fr) .hero__title {
  font-size: clamp(36px, 5vw, 72px);
}
.hero__title {
  line-height: .98; font-weight: 800; letter-spacing: -.015em;
  text-transform: uppercase;
  margin-bottom: 24px; color: var(--ink);
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .word { display: inline-block; transform: translateY(112%); animation: rise .85s var(--ease-out) forwards; }
.line:nth-child(1) .word:nth-child(1) { animation-delay: .05s; }
.line:nth-child(1) .word:nth-child(2) { animation-delay: .12s; }
.line:nth-child(1) .word:nth-child(3) { animation-delay: .19s; }
.line:nth-child(1) .word:nth-child(4) { animation-delay: .26s; }
.line:nth-child(1) .word:nth-child(5) { animation-delay: .33s; }
.line:nth-child(2) .word:nth-child(1) { animation-delay: .3s; }
.line:nth-child(2) .word:nth-child(2) { animation-delay: .38s; }
.line:nth-child(2) .word:nth-child(3) { animation-delay: .46s; }
.line:nth-child(2) .word:nth-child(4) { animation-delay: .54s; }
@keyframes rise { to { transform: translateY(0); } }
.word--gradient { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hero__sub { font-size: clamp(16px, 1.6vw, 19.5px); color: var(--ink-soft); max-width: 46ch; margin-bottom: 30px; font-weight: 600; }
.hero__sub strong { color: var(--ink); font-weight: 800; }

.hero__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 218px)); gap: clamp(8px, 1.5vw, 14px); margin-bottom: 20px; }
.hero__cta .store-pill { width: 100%; min-width: 0; padding: 0 clamp(10px, 1.6vw, 20px); gap: clamp(8px, 1.2vw, 13px); }
.hero__cta .store-pill__txt strong { font-size: clamp(13.5px, 1.35vw, 17.5px); white-space: nowrap; }
.hero__cta .store-pill__txt small { font-size: 10.5px; white-space: nowrap; }

.hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { width: 17px; height: 17px; }

/* ============ Device — real iPhone 17 Pro Max frame ============ */
/* Frame PNGs have a transparent screen cutout measured at:
   left/right 5.1%, top 2.2%, bottom 2.25% of the frame box. */
.device { position: relative; aspect-ratio: 1470 / 3000; filter: drop-shadow(0 26px 50px rgba(14, 15, 31, .34)); }
.device > picture, .device > img:not(.device__frame) {
  position: absolute; left: 5.1%; top: 2.2%;
  width: 89.8%; height: 95.55%; display: block; background: #0c0c16;
  border-radius: 9% / 4.4%; overflow: hidden; object-fit: cover;
}
.device > picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.device__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* ---- Phone stack — Apple's actual iOS-26 render geometry ----
   The three phones are Apple's own product-render bodies with our
   screenshots perspective-warped into the glass (built offline, see
   website-assets/hero-final-composite.png). Bottoms are pre-cropped
   exactly like the original artwork, so the stack bottom must sit on
   the section boundary. Fixed px sizes per breakpoint, no transforms. */
/* Fixed sizes + fixed gaps, group always centered — extra viewport width
   becomes side margin, never bigger gaps. The group cannot misalign. */
.hero__stack {
  /* one knob drives everything: side width → front width (center renders 5%
     taller than the sides) → chip offsets (always 30px beyond the side phones,
     which sit inset from the stack edge because the center phone is tallest) */
  --w-side: clamp(110px, 13.3vw, 194px);
  --w-front: calc(var(--w-side) * 1.358);
  --chip-inset: calc(var(--w-side) * .067 - 30px);
  position: relative; align-self: center;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; min-width: 0;
  margin-block: 44px 52px; /* room for the floating chips above and below */
}
.hphone { flex: none; }
.hphone--front { width: var(--w-front); order: 2; z-index: 3; animation: phone-in .9s var(--ease-out) .25s both, floaty 9s ease-in-out 1.2s infinite; }
.hphone--left { width: var(--w-side); order: 1; z-index: 1; animation: phone-in .9s var(--ease-out) .45s both, floaty 10s ease-in-out 1.4s infinite; }
.hphone--right { width: var(--w-side); order: 3; z-index: 2; animation: phone-in .9s var(--ease-out) .6s both, floaty 11s ease-in-out 1.6s infinite; }


.hero-chip {
  position: absolute; z-index: 4;
  display: flex; align-items: center; gap: 9px;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  color: var(--ink); font-weight: 700; font-size: 13.5px;
  border-radius: 999px; padding: 10px 16px;
  box-shadow: 0 14px 34px rgba(14, 15, 31, .16);
  white-space: nowrap;
  animation: floaty 6s ease-in-out infinite, chip-in .8s var(--ease-back) both;
}
.hero-chip strong { font-weight: 800; }
/* chips never cover the phones: one above top-left, one below bottom-right */
.hero-chip--left { left: 0; top: var(--chip-inset, -30px); animation-delay: -2s, .9s; }
.hero-chip--right { right: 0; bottom: var(--chip-inset, -30px); top: auto; animation-delay: -4s, 1.1s; }
@keyframes chip-in { from { opacity: 0; transform: translateY(18px) scale(.85); } to { opacity: 1; transform: none; } }
.hero-chip__faces { display: inline-flex; }
.hero-chip__faces i {
  font-style: normal; font-size: 15px; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid rgba(14, 15, 31, .08); border-radius: 999px;
  margin-left: -8px;
}
.hero-chip__faces i:first-child { margin-left: 0; }

/* floaty consumes --py so JS scroll-parallax and the float loop compose
   instead of fighting over the same `translate` property */
@keyframes floaty { 0%, 100% { translate: 0 var(--py, 0px); } 50% { translate: 0 calc(var(--py, 0px) - 14px); } }
@keyframes phone-in { from { opacity: 0; margin-top: 70px; } to { opacity: 1; margin-top: 0; } }

/* ============ Marquee ============ */
.marquee { overflow: hidden; background: var(--ink); padding: 16px 0; }
.marquee__track { display: flex; gap: 42px; width: max-content; animation: scroll 32s linear infinite; }
.marquee__track span { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; letter-spacing: .06em; color: rgba(255,255,255,.85); white-space: nowrap; text-transform: uppercase; }
.marquee__track span svg { width: 15px; height: 15px; color: var(--teal); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ============ Generic section scaffolding ============ */
.section { padding: clamp(84px, 10vw, 140px) clamp(18px, 4vw, 44px); max-width: 1220px; margin: 0 auto; }
.section__head { max-width: 780px; margin-bottom: clamp(38px, 5vw, 64px); }
.kicker {
  display: inline-block; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  font-size: 12.5px; color: var(--magenta); margin-bottom: 14px;
}
.section__title {
  font-size: clamp(34px, 4.8vw, 62px); font-weight: 800; line-height: 1.02;
  letter-spacing: -.015em; text-transform: uppercase; margin-bottom: 18px; color: var(--ink);
}
.section__sub { color: var(--ink-soft); font-size: clamp(15px, 1.5vw, 18px); max-width: 58ch; font-weight: 600; }

.chip { display: inline-block; padding: 3px 12px; border-radius: 999px; font-weight: 800; font-size: .8em; color: var(--ink); white-space: nowrap; }
.chip--teal { background: var(--teal); }
.chip--pink { background: var(--pink); color: #fff; }
.chip--yellow { background: var(--yellow); }

/* ============ Highlights gallery — Apple-style cards ============
   Mirrors apple.com's "Get the highlights": fixed-width rounded cards
   (never fluid), one card centered with neighbors peeking, scroll-snap
   plus paddle buttons. Card sizes change only at discrete breakpoints. */
.gallery { padding: clamp(84px, 10vw, 140px) 0; }
.gallery__head {
  max-width: 1220px; margin: 0 auto clamp(28px, 4vw, 44px);
  padding-inline: clamp(18px, 4vw, 44px);
}
/* paddles sit right after the title, vertically centered on it,
   with the same fixed gap at every viewport width */
.gallery__titlerow { display: flex; align-items: center; gap: 18px; }
.gallery__titlerow .section__title { margin-bottom: 0; }
.shots__nav { display: flex; gap: 10px; flex: none; }
.shots__btn {
  width: clamp(34px, 4.5vw, 48px); height: clamp(34px, 4.5vw, 48px); border-radius: 999px;
  border: 1px solid rgba(14, 15, 31, .18);
  background: var(--glass-bg-strong); color: var(--ink);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s var(--ease-back);
}
.shots__btn:hover { transform: scale(1.07); }
.shots__btn svg { width: clamp(15px, 2vw, 20px); height: clamp(15px, 2vw, 20px); }

/* Apple's verified card math: width = min(max(87.5vw, 280px), content max),
   FIXED heights per breakpoint (680/628/480), 20px gap, 28px radius,
   gutters = max(6.25vw, centering padding). */
.gallery__track {
  /* leading gutter = the head's content left edge, so the first card
     lines up with the "See it in action" title at every width */
  --gallery-gutter: max(clamp(18px, 4vw, 44px), calc((100vw - 1132px) / 2));
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gallery-gutter);
  padding: 8px var(--gallery-gutter) 40px;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }

.gcard {
  scroll-snap-align: start; flex: 0 0 auto;
  width: min(max(72vw, 280px), 920px); height: 680px;
  border-radius: 28px; position: relative; overflow: clip;
  display: flex; flex-direction: column; align-items: center;
  padding: 60px 24px 0; color: var(--gcard-ink, #0e0f1f);
}
.gcard__copy { text-align: center; z-index: 2; max-width: 60ch; }
.gcard h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
@media (min-width: 735px) { .gcard h3 { white-space: nowrap; } }
.gcard p { font-weight: 600; font-size: clamp(14px, 1.4vw, 17px); opacity: .78; margin-top: 8px; }
.gcard .device {
  position: absolute; bottom: 30px; left: 50%; translate: -50% 0;
  width: 236px; filter: drop-shadow(0 18px 34px rgba(10, 12, 40, .35));
}
.gcard--games { background: var(--grad-home); }
.gcard--impostor { background: linear-gradient(165deg, #42e4dd 0%, #9be15d 100%); }
.gcard--trivia { background: linear-gradient(165deg, #ffd15b 0%, #ff8a5c 55%, #ff70b8 100%); }
.gcard--friends { background: var(--grad-party); }
.gcard--cocktails { background: var(--grad-night); --gcard-ink: #fff; }
.gcard--brand { background: var(--grad-brand); --gcard-ink: #fff; }

@media (max-width: 1068px) {
  .gcard { height: 628px; }
  .gcard .device { width: 224px; bottom: 32px; }
}
@media (max-width: 734px) {
  .gcard { width: min(87.5vw, 420px); height: 500px; padding-top: 40px; }
  .gcard .device { width: 156px; bottom: 24px; }
  .gcard h3 { font-size: 22px; }
}

/* ============ Games — glass panel + liquid-glass tiles ============ */
#games {
  /* same band treatment as .friends/.cocktails: near-full-width rounded box,
     content stays at its old max width via the padding fallback */
  max-width: none;
  margin: 0 clamp(10px, 2vw, 28px) clamp(64px, 9vw, 120px);
  background: linear-gradient(165deg, #feefff 0%, #edf2ff 48%, #fff4e2 100%);
  border-radius: var(--r-xl);
  padding-inline: max(clamp(20px, 4vw, 56px), calc((100% - 1164px) / 2));
}
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-auto-rows: 1fr; gap: 16px; list-style: none; }
.card {
  position: relative; border-radius: var(--r-m); padding: 18px 84px 16px 22px;
  min-height: 118px;
  color: #0e0f1f; overflow: clip;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .78);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  transition: transform .4s var(--ease-back), box-shadow .4s;
  will-change: transform;
  box-shadow: 0 10px 30px rgba(14, 15, 31, .08), inset 0 1px 0 rgba(255, 255, 255, .85);
}
.card:hover { box-shadow: 0 18px 44px rgba(14, 15, 31, .16), inset 0 1px 0 rgba(255, 255, 255, .85); }

.card__logo {
  position: absolute; top: 16px; right: 16px;
  width: 48px; height: 48px; object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(14, 15, 31, .22);
}
.card h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.card p { font-size: 14.5px; font-weight: 600; opacity: .78; }
.card__badge {
  position: absolute; top: 70px; right: 16px;
  background: #0e0f1f; color: var(--yellow); font-weight: 800; font-size: 10.5px;
  padding: 3px 8px; border-radius: 8px; rotate: -4deg; letter-spacing: .06em;
}
.section__note { margin-top: 42px; font-size: clamp(20px, 2.3vw, 28px); font-weight: 800; text-align: center; text-transform: uppercase; }

/* ============ Friends ============ */
.friends { background: var(--grad-party); border-radius: var(--r-xl); margin: 0 clamp(10px, 2vw, 28px); overflow: clip; }
.friends__inner {
  max-width: 1220px; margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 44px);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 70px); align-items: center;
}
.friends .kicker { color: var(--ink); }
/* Liquid-glass pills in the app's design language */
.friends__points { list-style: none; margin-top: 30px; display: grid; gap: 13px; }
.friends__points li {
  display: flex; align-items: center; gap: 13px;
  background: rgba(255, 255, 255, .48);
  border: 1px solid rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px) saturate(1.7); -webkit-backdrop-filter: blur(18px) saturate(1.7);
  border-radius: 999px; padding: 9px 22px 9px 9px; min-height: 54px;
  font-weight: 700; color: #0e0f1f; width: fit-content; font-size: 15px;
  letter-spacing: -.01em;
  box-shadow: 0 10px 28px rgba(14, 15, 31, .12), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.friends__points .pill-ico {
  width: 36px; height: 36px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--orange), var(--pink));
  color: #fff; box-shadow: 0 4px 12px rgba(255, 77, 109, .35);
}
.friends__points .pill-ico svg { width: 19px; height: 19px; }

.friends__demo { position: relative; display: flex; justify-content: center; padding-top: 56px; }
.notif {
  position: absolute; top: 0; left: 50%; z-index: 5; translate: -50% 0;
  display: flex; gap: 11px; align-items: center;
  background: rgba(255, 255, 255, .94); color: #0e0f1f;
  border-radius: 18px; padding: 11px 18px 11px 12px;
  box-shadow: 0 18px 44px rgba(14, 15, 31, .25);
  width: max-content; max-width: 94%;
  opacity: 0; transform: translateY(-24px) scale(.94);
  transition: opacity .55s var(--ease-back), transform .55s var(--ease-back);
}
.notif.show { opacity: 1; transform: translateY(0) scale(1); }
.notif img { border-radius: 9px; width: 34px; height: 34px; }
.notif__app { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: rgba(14, 15, 31, .58); }
.notif__text { font-size: 13.5px; font-weight: 700; }

.mock { display: block; height: auto; }
.mock--friends { width: min(100%, 560px); animation: floaty 8s ease-in-out infinite; }

/* ============ Cocktails ============ */
.cocktails { background: var(--grad-night); border-radius: var(--r-xl); margin: clamp(64px, 9vw, 120px) clamp(10px, 2vw, 28px) 0; overflow: clip; }
.cocktails__inner {
  max-width: 1220px; margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 44px);
  display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(30px, 5vw, 76px); align-items: center;
}
.cocktails .section__title, .cocktails .section__sub { color: #fff; }
.cocktails .section__sub { color: rgba(255, 255, 255, .88); }
.cocktails .kicker { color: var(--yellow); }
.cocktails__stack { position: relative; display: flex; justify-content: center; }
.mock--cocktail { width: min(100%, 310px); animation: floaty 8s ease-in-out -3s infinite; }
.recipe-chip {
  position: absolute; z-index: 4; left: var(--x); top: var(--y);
  display: flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--ink); font-weight: 800; font-size: 13px;
  border-radius: 999px; padding: 9px 15px;
  box-shadow: 0 12px 30px rgba(14, 15, 31, .2);
  animation: floaty 6s ease-in-out infinite; animation-delay: var(--d);
  white-space: nowrap;
}
.recipe-chip svg { width: 16px; height: 16px; color: var(--magenta); }

@media (max-width: 900px) {
  /* chips hug the phone edges like the hero chips — never off-screen */
  .recipe-chip:nth-of-type(1) { left: max(4px, calc(50% - 212px)); right: auto; top: 14%; }
  .recipe-chip:nth-of-type(2) { left: auto; right: max(4px, calc(50% - 212px)); top: 42%; }
  .recipe-chip:nth-of-type(3) { left: max(10px, calc(50% - 198px)); right: auto; top: 70%; }
}

/* ============ Stats ============ */
.stats {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(64px, 8vw, 110px) clamp(18px, 4vw, 44px) 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; text-align: center;
}
.stat { background: #fff; border: 1px solid rgba(14, 15, 31, .08); border-radius: var(--r-m); padding: 34px 20px 28px; box-shadow: 0 4px 0 rgba(14, 15, 31, .08); }
.stat__num { font-size: clamp(38px, 4.4vw, 56px); font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.stat__num--grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__star { color: var(--gold); font-size: .72em; vertical-align: 5px; }
.stat__label { margin-top: 10px; color: var(--ink-faint); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }

/* ============ CTA ============ */
.cta { padding: clamp(64px, 8vw, 110px) clamp(10px, 2vw, 28px) clamp(80px, 9vw, 120px); }
.cta__panel {
  position: relative; max-width: 1100px; margin: 0 auto; text-align: center;
  background: var(--ink); color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(60px, 8vw, 104px) clamp(22px, 5vw, 70px);
  overflow: clip;
}
.cta__glow {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none;
  animation: drift 14s ease-in-out infinite alternate;
}
.cta__glow--1 { width: 380px; height: 380px; background: var(--grape); top: -30%; left: -8%; }
.cta__glow--2 { width: 320px; height: 320px; background: var(--magenta); bottom: -28%; right: -6%; animation-delay: -7s; }
.cta__word {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 800; text-transform: uppercase; line-height: .8;
  font-size: clamp(110px, 16vw, 260px); letter-spacing: -.02em;
  user-select: none; pointer-events: none;
}
.cta__word span {
  background: linear-gradient(178deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .1) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .14);
}
.cta__word span:nth-child(1) { align-self: flex-start; margin-left: -.05em; }
.cta__word span:nth-child(2) { align-self: flex-end; margin-right: -.05em; margin-top: .1em; }

.cta__title { position: relative; font-size: clamp(36px, 5.2vw, 68px); font-weight: 800; line-height: 1.02; letter-spacing: -.015em; text-transform: uppercase; margin-bottom: 16px; }
.cta__title em { background: none; -webkit-text-fill-color: var(--yellow); color: var(--yellow); }
.cta__sub { position: relative; color: rgba(255, 255, 255, .82); font-size: clamp(15px, 1.6vw, 18.5px); max-width: 52ch; margin: 0 auto 34px; font-weight: 600; }
.cta__badges { position: relative; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }

/* ============ Footer ============ */
.footer { padding: 54px clamp(18px, 4vw, 44px) calc(44px + var(--dock-pad, 0px)); }
.footer__inner { max-width: 1220px; margin: 0 auto; display: grid; gap: 20px; }
.footer__brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 19px; color: var(--ink); }
.footer__brand img { border-radius: 10px; width: 42px; height: 42px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
/* padding+negative margin grow the tap target without moving a pixel */
.footer__links a {
  color: var(--ink-soft); text-decoration: none; font-size: 14.5px; font-weight: 700; transition: color .25s;
  display: inline-block; padding: 10px 6px; margin: -10px -6px;
}
.footer__links a:hover { color: var(--ink); }
.footer__note { color: var(--ink-faint); font-size: 13.5px; max-width: 70ch; font-weight: 600; }
.footer__copy { color: var(--ink-faint); font-size: 13px; font-weight: 600; }

/* ============ Mobile dock — liquid glass, always visible ============ */
.dock {
  position: fixed; left: 10px; right: 10px; z-index: 70;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: none;
  grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 18px 50px rgba(14, 15, 31, .28);
  transition: transform .4s var(--ease-out), opacity .4s;
}
.dock.hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
.dock .store-pill { width: 100%; height: 52px; border-radius: 15px; padding: 0 14px; gap: 10px; justify-content: center; }
.dock .store-pill svg { width: 22px; height: 22px; }
.dock .store-pill__txt small { font-size: 10.5px; }
.dock .store-pill__txt strong { font-size: 14.5px; }

/* ============ Legal / inner pages ============ */
.legal { max-width: 820px; margin: 0 auto; padding: 150px clamp(18px, 4vw, 44px) 90px; }
.legal h1 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 800; letter-spacing: -.015em; margin-bottom: 14px; text-transform: uppercase; }
.legal h2 { font-size: clamp(21px, 2.5vw, 28px); font-weight: 800; margin: 42px 0 12px; }
.legal h3 { font-size: clamp(17px, 2vw, 20px); font-weight: 800; margin: 28px 0 10px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 15.5px; margin-bottom: 12px; }
.legal ul { padding-left: 22px; }
.legal a { color: var(--magenta); }
.legal strong { color: var(--ink); }

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .hero { padding-top: 108px; }
  .hero__inner { grid-template-columns: 1fr; }
  /* same knob, bigger phones — front width and chip offsets follow
     automatically, so chips keep the exact desktop distance to the phones */
  .hero__stack { --w-side: min(25.5vw, 162px); gap: 6px; margin-block: 40px 48px; }
  .hero__cta { grid-template-columns: repeat(2, minmax(0, 176px)); justify-content: center; }
  .hero__cta .store-pill { height: 52px; border-radius: 14px; }
  .hero__cta .store-pill svg { width: 22px; height: 22px; }
  .hero__copy { padding-bottom: 14px; }
  .nav { position: absolute; }
  .friends__inner, .cocktails__inner { grid-template-columns: 1fr; }
  .cocktails__stack { order: 2; margin-top: 26px; }
  .nav__links { display: none; }
  .nav { inset: 10px 10px auto 10px; }
  .dock { display: grid; }
  body { --dock-pad: 92px; }
  .shot { width: clamp(186px, 56vw, 230px); }
}



/* ============ Dark scheme — dimmed party, like the app ============ */
@media (prefers-color-scheme: dark) {
  .hero-chip__faces i { background: #2a2c48; border-color: rgba(255, 255, 255, .14); }

  :root {
    --paper: #101120;
    --ink: #f2f1f7;
    --ink-soft: rgba(242, 241, 247, .78);
    --ink-faint: rgba(242, 241, 247, .55);
    --glass-bg: rgba(22, 24, 44, .5);
    --glass-bg-strong: rgba(22, 24, 44, .66);
    --glass-line: rgba(255, 255, 255, .16);
    --glass-shadow: 0 18px 50px rgba(0, 0, 0, .4);
  }
  body { background: var(--paper); }
  .field { background: linear-gradient(180deg, #262042 0%, #1b1a30 55%, var(--paper) 100%); }
  .field__blob { opacity: .3; mix-blend-mode: screen; }
  .b1 { background: var(--grape); }
  .b2 { background: #2ba8a0; }
  .b3 { background: #d84a86; }
  .hero__title, .section__title, .fr-title { color: var(--ink); }
  .nav__brand, .footer__brand { color: var(--ink); }
  .nav__links a:hover { background: rgba(255, 255, 255, .08); }
  .store-pill { background: #fff; color: #0e0f1f; }
  .store-pill--light { background: #fff; color: #0e0f1f; }
  .btn { background: #fff; color: #0e0f1f; }
  .marquee { background: #05060f; }
  /* Games panel: clean deep gradient, never flat black; tiles go dark glass */
  #games { background: linear-gradient(165deg, #241d40 0%, #181b36 48%, #261b30 100%); }
  .card {
    background: rgba(26, 28, 50, .55);
    border-color: rgba(255, 255, 255, .13);
    color: var(--ink);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .07);
  }
  .card:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07); }
  .shots__btn { border-color: rgba(255, 255, 255, .24); }
  .stat { background: #191b30; border-color: rgba(255, 255, 255, .08); box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
  .stat__num { color: var(--ink); }
  .cta__panel { background: #05060f; }
  .friends .kicker { color: #0e0f1f; }
  .friends .section__title { color: #0e0f1f; }
  .friends__points li { background: rgba(255, 255, 255, .6); color: #0e0f1f; }
  .dock { background: rgba(18, 20, 38, .66); }
  .recipe-chip { background: rgba(30, 32, 56, .55); color: #fff; border-color: rgba(255, 255, 255, .25); }
  .legal h1, .legal h2, .legal h3, .legal strong { color: var(--ink); }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .pin, .fr-row { opacity: 1 !important; transform: none !important; }
  .hero__title .word { transform: none; }
  .notif { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* ============ Language switcher (globe) ============ */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font); font-weight: 800; font-size: 13.5px; letter-spacing: .02em;
  color: var(--ink-soft); background: none; border: 0; padding: 8px 10px; border-radius: 10px;
  transition: color .25s, background .25s;
}
.lang__btn:hover { color: var(--ink); background: rgba(255, 255, 255, .5); }
.lang__btn .icon { width: 17px; height: 17px; }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 226px;
  list-style: none; padding: 8px; margin: 0; border-radius: 16px;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-line);
  backdrop-filter: blur(18px) saturate(1.7); -webkit-backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: 0 18px 50px rgba(14, 15, 31, .18);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s;
}
.lang.open .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang__menu a {
  display: block; padding: 9px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px;
}
.lang__menu a:hover { background: rgba(255, 255, 255, .55); }
.lang__menu a[aria-current] { background: var(--grad-brand); color: #fff; }

/* game tiles link to their guide pages — same look, whole card clickable */
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* gallery paddles: 48px hit area on touch without growing the visible circle */
.shots__btn { position: relative; }
.shots__btn::after { content: ""; position: absolute; inset: -7px; border-radius: 999px; }

/* ============ Article pages (game guides + listicles) ============ */
.article-hero { padding: clamp(120px, 14vh, 150px) clamp(18px, 4vw, 44px) clamp(40px, 5vw, 60px); }
.article-hero__inner { max-width: 860px; margin: 0 auto; }
.article-title {
  font-size: clamp(32px, 4.6vw, 56px); font-weight: 800; line-height: 1.04;
  letter-spacing: -.015em; text-transform: uppercase; color: var(--ink);
}
.crumbs { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 18px; }
.crumbs a { color: var(--ink-soft); text-decoration: none; padding: 8px 2px; display: inline-block; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: .55; padding: 0 2px; }

.article { max-width: 860px; margin: 0 auto; padding: clamp(36px, 5vw, 56px) clamp(18px, 4vw, 44px) 0; }
.article p, .article li { color: var(--ink-soft); font-size: 16.5px; font-weight: 600; }
.article p { margin-bottom: 16px; }
.article p strong, .article li strong { color: var(--ink); font-weight: 800; }
.article h2 {
  font-size: clamp(23px, 2.8vw, 32px); font-weight: 800; letter-spacing: -.01em;
  text-transform: uppercase; color: var(--ink); margin: clamp(34px, 4vw, 48px) 0 14px;
}
.article h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 18px 0 8px; }
.article ol, .article ul { padding-left: 24px; margin-bottom: 16px; display: grid; gap: 8px; }
.article-updated { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 800; }

/* example questions — glass pills like the app */
.article .qa { list-style: none; padding: 0; display: grid; gap: 10px; }
.article .qa li {
  background: var(--glass-bg); border: 1px solid var(--glass-line);
  backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border-radius: 16px; padding: 13px 18px; font-weight: 700; color: var(--ink);
  box-shadow: 0 8px 22px rgba(14, 15, 31, .08);
}
.article-cta-line { font-size: 19px; margin-top: 28px; }
.article-pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 8px; }

/* listicle rank cards */
.rank {
  background: #fff; border: 1px solid rgba(14, 15, 31, .08); border-radius: var(--r-m);
  padding: 24px clamp(18px, 3vw, 30px); margin: 22px 0;
  box-shadow: 0 14px 34px rgba(14, 15, 31, .07);
}
.rank h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 4px; }
.rank__num {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-brand); color: #fff; font-size: 20px;
}
.rank__tag { font-size: 15px; color: var(--ink-faint); margin-bottom: 12px; }
.rank__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; margin-top: 6px; }
.rank__cols ul { list-style: none; padding: 0; gap: 6px; }
.rank__pros li::before { content: "✓  "; color: #1a9e63; font-weight: 800; }
.rank__cons li::before { content: "✗  "; color: var(--pink); font-weight: 800; }
@media (max-width: 640px) { .rank__cols { grid-template-columns: 1fr; } }

/* related-games grid on article pages */
.related { margin-top: clamp(40px, 6vw, 64px); }
.related h2 { margin-bottom: 18px; }
.cards--related { list-style: none; padding: 0; }
.cards--related .card { padding-right: 22px; min-height: 0; }
.related__more { margin-top: 22px; font-weight: 800; }
.related__more a { color: var(--magenta); }

/* dark scheme parity for article surfaces */
@media (prefers-color-scheme: dark) {
  .rank { background: #191b31; border-color: rgba(255, 255, 255, .1); }
}

/* compact nav on small phones: the globe made the row tight */
.btn { white-space: nowrap; }
@media (max-width: 600px) {
  .nav { gap: 8px; padding-left: 12px; }
  .nav__brand { font-size: 16.5px; gap: 8px; }
  .nav__brand img { width: 34px; height: 34px; }
  .lang__btn { padding: 8px; }
  .lang__btn span { display: none; }
  .nav .btn { padding: 10px 14px; font-size: 13px; }
}