/* Sleek Studios — shared styles */

@font-face {
  font-family: "Chau Philomene One";
  src: url("../fonts/ChauPhilomeneOne.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --black: #070707; /* just a shade lighter than the top bar (#030303) */
  --black-2: #111111;
  --black-3: #161616;
  --black-4: #1c1c1c;
  --black-5: #242428;
  --line: #2a2a2e;
  --silver: #c0c0c6;
  --silver-bright: #e4e4e8;
  --silver-dim: #a8a8b0;
  --silver-mute: #77777f;
  --white: #ffffff;
  --radius: 16px;
  --wrap: 1180px;
  --header-h: 72px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--black);
  color: var(--silver);
  font-family: "Chau Philomene One", Arial, sans-serif;
  font-synthesis: none; /* single-weight font: don't fake a bold */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--silver); color: var(--black); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.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;
}

/* ---------- Logo mark (tinted silver from the white PNG) ---------- */
.mark {
  display: inline-block;
  aspect-ratio: 420 / 350;
  background: var(--silver);
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  transition: height .3s cubic-bezier(.2, .7, .2, 1);
  border-bottom: 1px solid var(--black-4);
}
/* The blur lives on a pseudo-element: a backdrop-filter on the header itself
   would trap the fixed-position mobile menu inside the header's box. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(7,7,7, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
/* No animations while the window is being resized (stops the menu flashing). */
.resizing *, .resizing *::before, .resizing *::after { transition: none !important; }
.site-header .wrap {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 15px; letter-spacing: 0.22em;
  color: var(--silver-bright);
  white-space: nowrap;
}
.site-header .brand .mark { width: 38px; }
.footer-brand .brand .mark { width: 30px; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a {
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--silver-dim);
  transition: color .2s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--white); }
.nav a:not(.btn) { position: relative; padding: 6px 0; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--white), transparent);
  transform: scaleX(0); transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.scrolled .site-header { height: 60px; }
.nav .btn { margin-left: 8px; }
.nav .btn-primary, .nav .btn-primary:hover { color: var(--black); }
.nav .btn[aria-disabled="true"], .nav .btn[aria-disabled="true"]:hover { color: var(--silver-mute); background: var(--black-4); border-color: var(--black-5); cursor: default; transform: none; }
.menu-toggle {
  display: none;
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer;
  position: relative;
}
.menu-toggle span {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: var(--silver-bright);
  transition: transform .25s ease, opacity .25s ease;
}
.menu-toggle span:nth-child(1) { top: 16px; }
.menu-toggle span:nth-child(2) { top: 21.5px; }
.menu-toggle span:nth-child(3) { top: 27px; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 12px 24px;
  border-radius: 999px;
  line-height: 1.2; text-align: center;
  max-width: 100%;
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-primary { background: var(--silver-bright); color: var(--black); }
.btn-primary:hover { background: var(--white); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); color: var(--silver-bright); }
.btn-ghost:hover { border-color: var(--silver-mute); background: var(--black-3); }
.btn-sm { min-height: 38px; padding: 9px 18px; font-size: 12px; }
.btn[aria-disabled="true"] {
  background: var(--black-4); color: var(--silver-mute); border-color: var(--black-5);
  cursor: not-allowed; transform: none;
}
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Section scaffolding ---------- */
.section { padding: 80px 0; border-top: 1px solid var(--black-4); }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 36px; flex-wrap: wrap;
}
.eyebrow {
  display: block;
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--silver-mute);
  margin-bottom: 18px;
}
.h2 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--silver-bright);
}
.lead { font-size: 18px; color: var(--silver-dim); max-width: 560px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 80px 0 120px;
  overflow: hidden;
}
.hero::before {
  /* faint diagonal bars echoing the logo */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(-56deg, transparent 0 46px, rgba(255,255,255,0.012) 46px 92px);
  -webkit-mask: radial-gradient(ellipse at center, #000 0%, transparent 70%);
  mask: radial-gradient(ellipse at center, #000 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  -webkit-user-select: none; user-select: none;
}
.float { animation: float 3s ease-in-out infinite alternate; will-change: transform; backface-visibility: hidden; }
@keyframes float {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -16px, 0); }
}
.hero .mark { width: 96px; display: block; }

/* ---------- Clickable hero logo: shimmer on hover, shatters on click ---------- */
.mark-btn {
  display: block; margin: 0 auto 36px; padding: 6px;
  background: none; border: 0; border-radius: 12px;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
  -webkit-tap-highlight-color: transparent;
}
.mark-btn:focus-visible { outline: 1px solid var(--silver-mute); outline-offset: 6px; }
.mark-btn .mark {
  background: linear-gradient(110deg, var(--silver) 40%, #ffffff 50%, var(--silver) 60%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
}
.mark-btn:hover, .mark-btn:focus-visible { transform: scale(1.06) rotate(-2deg); }
.mark-btn:hover .mark, .mark-btn:focus-visible .mark { animation: mark-shimmer 1.4s cubic-bezier(.45, 0, .2, 1) infinite; }
.mark-btn:active { transform: scale(0.94); }
@keyframes mark-shimmer {
  0% { background-position: 100% 0; }
  70%, 100% { background-position: 0 0; }
}
.mark-btn.broken { pointer-events: none; }
.mark-btn.broken .mark { visibility: hidden; }
.mark-btn.reform .mark { animation: mark-reform .7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes mark-reform {
  0% { opacity: 0; transform: scale(.2) rotate(-25deg); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
/* Shards fly over the whole page, above everything, then are removed */
.shard-layer { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
.shard {
  position: absolute;
  background: var(--silver);
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
  will-change: transform, opacity;
}
.shard-flash {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(220,228,255,0.35) 35%, transparent 70%);
}
.hero-tagline {
  margin-top: 30px;
  font-size: clamp(13px, 2.2vw, 16px);
  letter-spacing: 0.42em; margin-right: -0.42em;
  text-transform: uppercase;
  color: var(--silver-dim);
}
.hero .divider { width: 80px; height: 1px; background: var(--line); margin: 28px auto 0; }
.hero-actions { display: flex; gap: 14px; margin-top: 52px; flex-wrap: wrap; justify-content: center; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
  width: 1px; height: 48px;
  background: linear-gradient(var(--silver-mute), transparent);
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue {
  0% { opacity: 0; transform: translate(-50%, -10px); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 10px); }
}

/* ---------- Glint title ----------
   1. Entrance: letters rise in from a soft blur, staggered.
   2. Sheen: one soft band of light sweeps across the whole word, every 8s.
      Each letter clips the same gradient, offset by its position (--x, set by
      site.js) so the band reads as one continuous highlight.
   3. Twinkle: a single burst at the final letter as the light leaves. */
@property --sweep { syntax: "<number>"; inherits: true; initial-value: -1.5; }
.glint-title {
  font-weight: 600;
  font-size: clamp(22px, 8.2vw, 88px);
  line-height: 1.3;
  letter-spacing: 0.18em;
  margin-right: -0.18em;
  color: #b8b8bf;
  white-space: nowrap;
}
.glint-title .m { display: inline-block; }
.glint-title .l {
  position: relative;
  display: inline-block;
  animation: letter-in 1s cubic-bezier(.2, .7, .2, 1) backwards;
  animation-delay: calc(0.15s + var(--i) * 0.045s);
}
@keyframes letter-in {
  from { opacity: 0; transform: translateY(0.28em); filter: blur(10px); }
}
.sheen-ready .glint-title { animation: sheen 8s infinite 1.2s; }
.sheen-ready .glint-title .l {
  background: linear-gradient(105deg, #b8b8bf 42%, #f6f6f9 46.5%, #ffffff 48%, #ffffff 52%, #f6f6f9 53.5%, #b8b8bf 58%) no-repeat;
  background-size: calc(var(--tw) * 2.5) 100%;
  background-position: calc(var(--sweep) * var(--tw) - var(--x)) 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes sheen {
  0% { --sweep: -1.5; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  30%, 100% { --sweep: 0; }
}
/* Twinkle on the last letter only, timed to when the sheen passes it */
.glint-title .m:last-child .l::before,
.glint-title .m:last-child .l::after {
  content: "";
  position: absolute;
  top: var(--sy, 0.06em);
  right: var(--sx, 0.15em);
  width: 0; height: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: 8s ease-out 2.48s infinite;
}
.glint-title .m:last-child .l::after { animation-name: specks; transform: rotate(var(--r, 0deg)) scale(var(--s, 1)); }
.glint-title .m:last-child .l::before { animation-name: specks-faint; transform: rotate(var(--r2, 0deg)) scale(calc(2.1 - var(--s, 1))); }
@keyframes specks {
  0% {
    opacity: 0;
    box-shadow: 0 0 1px 0.04em #fff, 0 0 1px 0.025em #e4ebff, 0 0 1px 0.03em #fff, 0 0 1px 0.02em #dfe6ff;
  }
  0.8% { opacity: 1; }
  6%, 100% {
    opacity: 0;
    box-shadow: 0.27em -0.27em 1px 0.024em #fff, 0.38em -0.31em 1px 0.017em #e4ebff,
                0.2em -0.33em 1px 0.021em #fff, 0.34em -0.19em 1px 0.015em #dfe6ff;
  }
}
@keyframes specks-faint {
  0%, 0.3% {
    opacity: 0;
    box-shadow: 0 0 2px 0.02em rgba(210,222,255,0.8), 0 0 2px 0.018em rgba(255,255,255,0.8), 0 0 2px 0.015em rgba(210,222,255,0.8);
  }
  1.3% { opacity: 0.8; }
  7%, 100% {
    opacity: 0;
    box-shadow: 0.42em -0.4em 2px 0.014em rgba(210,222,255,0.8), 0.5em -0.35em 2px 0.012em rgba(255,255,255,0.8),
                0.35em -0.48em 2px 0.01em rgba(210,222,255,0.8);
  }
}
/* Logo and buttons ease in around the title */
.mark-btn { animation: fade-down .9s cubic-bezier(.2, .7, .2, 1) backwards; }
.hero-actions { animation: fade-up .9s cubic-bezier(.2, .7, .2, 1) .75s backwards; }
@keyframes fade-down { from { opacity: 0; transform: translateY(-14px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Game cards ---------- */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.games-grid.featured { grid-template-columns: repeat(auto-fit, minmax(260px, 360px)); justify-content: center; }
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--black-2);
  border: 1px solid var(--black-4);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease;
}
.card:hover { border-color: var(--line); }
.card-art { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.art-inner.art-img, .game-art .art-inner.art-img { object-fit: cover; width: 100%; height: 100%; padding: 0; background: none; }
.card:hover .art-inner { transform: scale(1.04); }
.badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--silver-bright); color: var(--black);
}
.badge.soon { background: rgba(7,7,7,0.75); color: var(--silver-bright); border: 1px solid var(--line); }
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-title { font-size: 21px; font-weight: 600; letter-spacing: 0.04em; color: var(--silver-bright); }
.card-tag { font-size: 14px; color: var(--silver-mute); margin-top: 4px; }
.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 20px 0 22px;
  border: 1px solid var(--black-4); border-radius: 12px;
  container-type: inline-size; /* text below scales with the box width */
}
.stat { padding: 10px clamp(6px, 3cqi, 12px); min-width: 0; }
.stat + .stat { border-left: 1px solid var(--black-4); }
/* Never wrap: labels and values shrink to fit instead of breaking onto two lines. */
.stat dt, .stat dd { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.stat dt { font-size: min(10px, 3.2cqi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver-mute); }
.stat dd { font-size: min(15px, 5.6cqi); font-weight: 600; color: var(--silver-bright); margin-top: 2px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.card-actions .btn { flex: 1 1 auto; }

/* Generated placeholder art: dark tile, tinted glow, logo bars, title */
.art-inner {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 22px;
  background:
    radial-gradient(120% 90% at 80% 10%, hsla(var(--h, 230), 40%, 55%, 0.28), transparent 60%),
    radial-gradient(90% 70% at 10% 100%, hsla(var(--h, 230), 30%, 40%, 0.18), transparent 70%),
    linear-gradient(160deg, #18181c, #0b0b0d);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.art-inner::before {
  content: "";
  position: absolute; right: -8%; top: 8%;
  width: 62%; aspect-ratio: 420 / 350;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
}
.art-inner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.07) 50%, transparent 60%);
  background-size: 300% 100%;
  background-position: 100% 0;
  transition: background-position .9s ease;
}
.card:hover .art-inner::after { background-position: 0 0; }
.art-name {
  position: relative; z-index: 1;
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; line-height: 1.05;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--silver-bright);
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}

/* ---------- Games page controls ---------- */
.page-head { padding: 96px 0 48px; }
.page-head .lead { margin-top: 18px; max-width: none; } /* only wraps when the screen is too narrow */
.controls {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 32px; margin-bottom: 32px;
  border-bottom: 1px solid var(--black-4);
}
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  min-height: 38px; padding: 8px 18px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--silver-dim); cursor: pointer;
  transition: all .2s ease;
}
.chip:hover { color: var(--white); border-color: var(--silver-mute); }
.chip[aria-pressed="true"] { background: var(--silver-bright); border-color: var(--silver-bright); color: var(--black); }
.chip .count { opacity: 0.6; margin-left: 6px; }
.select {
  height: 38px; padding: 0 40px 0 16px; border-radius: 999px;
  background: var(--black-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a8a8b0' stroke-width='1.5'/%3E%3C/svg%3E") right 16px center no-repeat;
  border: 1px solid var(--line);
  font-size: 13px; color: var(--silver-dim);
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.empty { padding: 80px 0; text-align: center; color: var(--silver-mute); }

/* ---------- Why / features ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--black-4); border: 1px solid var(--black-4); border-radius: var(--radius); overflow: hidden; }
.pillar { background: var(--black); padding: 32px 30px; }
.pillar-num { font-size: 12px; letter-spacing: 0.28em; color: var(--silver-mute); }
.pillar h3 { font-size: 20px; font-weight: 600; color: var(--silver-bright); margin: 40px 0 10px; letter-spacing: 0.03em; }
.pillar p { font-size: 15px; color: var(--silver-dim); }

/* ---------- Engine split ---------- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; }
.split .lead { margin-top: 22px; }
.split .btns { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.engine-panel {
  position: relative;
  border: 1px solid var(--black-4); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--black-3), var(--black));
  padding: 36px;
  overflow: hidden;
}
.engine-panel::before {
  content: ""; position: absolute; right: -40px; bottom: -30px; width: 260px; aspect-ratio: 420 / 350;
  background: rgba(255,255,255,0.03);
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
}
.spec-list { list-style: none; position: relative; }
.spec-list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--black-4);
  font-size: 15px;
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list span { color: var(--silver-mute); }
.spec-list b { color: var(--silver-bright); font-weight: 600; text-align: right; }

/* ---------- CTA band ---------- */
.cta { text-align: center; }
.cta .h2 { max-width: 760px; margin: 0 auto; }
.cta .lead { margin: 20px auto 0; }
.cta .btns { display: flex; gap: 12px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }

/* ---------- Game detail ---------- */
.game-hero { padding: 64px 0 96px; }
.back { display: inline-flex; gap: 8px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver-mute); margin-bottom: 36px; }
.back:hover { color: var(--white); }
.game-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; }
.game-art.wide { aspect-ratio: 16 / 9; }
.game-art { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--black-4); }
.game-art .art-name { font-size: clamp(30px, 5vw, 56px); }
.game-art .art-inner { padding: 36px; }
.game-info h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 600; line-height: 1.02; color: var(--silver-bright); letter-spacing: 0.03em; }
.game-info .card-tag { font-size: 17px; margin-top: 10px; }
.game-info .desc { color: var(--silver-dim); font-size: 16px; margin-top: 24px; }
.game-info .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 32px 0; }
.game-info .stat { padding: 16px 18px; }
.game-info .stat:nth-child(3), .game-info .stat:nth-child(4) { border-top: 1px solid var(--black-4); }
.game-info .stat:nth-child(3) { border-left: 0; }
.game-info .stat dd { font-size: min(20px, 4.6cqi); }
.game-info .stat dt { font-size: min(10px, 2.6cqi); }
.features { list-style: none; margin-bottom: 36px; }
.features li { display: flex; gap: 14px; padding: 10px 0; color: var(--silver-dim); font-size: 15px; }
.features li::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--silver-mute); margin-top: 12px; }
.game-info .btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 72px; align-items: start; padding-bottom: 120px; }
.contact-aside .lead { margin-top: 20px; }
.contact-cards { display: grid; gap: 14px; }
.contact-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px 0 0;
  background: linear-gradient(150deg, var(--black-3), var(--black-2) 60%);
  border: 1px solid var(--black-4); border-radius: var(--radius);
  transition: border-color .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
}
/* faint logo bars in the corner */
.contact-card::before {
  content: ""; position: absolute; right: 18px; top: 50%; height: 72%; aspect-ratio: 420 / 350;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.025);
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), background .3s ease;
  pointer-events: none;
}
/* light sweep on hover */
.contact-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.06) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0;
  transition: background-position .9s ease;
}
.contact-card:not(.is-static):hover { border-color: var(--line); transform: translateY(-2px); }
.contact-card:not(.is-static):hover::after { background-position: 0 0; }
.contact-card:not(.is-static):hover::before { transform: translate(-6px, -50%); background: rgba(255, 255, 255, 0.05); }
.cc-link {
  position: relative; z-index: 1;
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 18px 0 18px 18px;
}
.cc-icon {
  flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--black); border: 1px solid var(--black-5);
  color: var(--silver);
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.cc-icon img { width: 22px; height: 22px; }
.contact-card:not(.is-static):hover .cc-icon { color: var(--white); border-color: var(--silver-mute); background: var(--black-3); }
.cc-text { display: flex; flex-direction: column; min-width: 0; }
.cc-label { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--silver-mute); }
.cc-value { font-size: 17px; color: var(--silver-bright); margin-top: 2px; overflow-wrap: anywhere; }
.cc-arrow {
  margin-left: auto; font-size: 18px; color: var(--silver-mute);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), color .3s ease;
}
.contact-card:hover .cc-arrow { transform: translate(3px, -3px); color: var(--white); }
.cc-copy {
  position: relative; z-index: 1; flex: none;
  min-height: 34px; padding: 6px 14px; border-radius: 999px;
  background: var(--black); border: 1px solid var(--line);
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--silver-dim); cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.cc-copy:hover { color: var(--white); border-color: var(--silver-mute); }
.cc-copy.copied { background: var(--silver-bright); border-color: var(--silver-bright); color: var(--black); }
.form {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--black-3), var(--black-2) 55%);
  border: 1px solid var(--black-4); border-radius: var(--radius);
  padding: 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
/* faint logo watermark */
.form::before {
  content: ""; position: absolute; right: 32px; top: 30px; width: 120px; aspect-ratio: 420 / 350;
  background: rgba(255, 255, 255, 0.025);
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
  pointer-events: none;
}
.form > * { position: relative; }
.form-head { grid-column: 1 / -1; margin-bottom: 6px; }
.form-title { font-size: 26px; font-weight: 600; color: var(--silver-bright); letter-spacing: 0.02em; }
.form-sub { font-size: 14px; color: var(--silver-mute); margin-top: 4px; }

/* Topic pills */
.pills { grid-column: 1 / -1; border: 0; min-width: 0; }
.pills legend { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--silver-mute); margin-bottom: 12px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--black);
  font-size: 13px; color: var(--silver-dim);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.pill:hover span { color: var(--white); border-color: var(--silver-mute); }
.pill input:checked + span { background: var(--silver-bright); border-color: var(--silver-bright); color: var(--black); }
.pill input:focus-visible + span { outline: 1px solid var(--silver-mute); outline-offset: 3px; }
.pill:active span { transform: scale(0.96); }

/* Floating-label fields */
.field { position: relative; display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field input, .field textarea {
  width: 100%;
  background: var(--black); border: 1px solid var(--black-5); border-radius: 12px;
  padding: 24px 16px 10px; font-size: 15px; color: var(--silver-bright);
  transition: border-color .25s ease, background .25s ease;
}
.field textarea { min-height: 170px; resize: vertical; padding-bottom: 30px; }
.field.fl label {
  position: absolute; left: 17px; top: 17px;
  font-size: 15px; color: var(--silver-mute);
  pointer-events: none; transform-origin: left top;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), color .25s ease, letter-spacing .25s ease;
}
.field.fl input:focus + label, .field.fl input:not(:placeholder-shown) + label,
.field.fl textarea:focus + label, .field.fl textarea:not(:placeholder-shown) + label {
  transform: translateY(-9px) scale(0.72);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver-dim);
}
.field input:hover, .field textarea:hover { border-color: var(--line); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--silver-mute); background: #0d0d0f; }
/* silver line that sweeps in under the active field */
.field::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--white), transparent);
  transform: scaleX(0); transition: transform .45s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.field:focus-within::after { transform: scaleX(1); }
.field.invalid input, .field.invalid textarea { border-color: #7a4a4f; }
.counter { position: absolute; right: 14px; bottom: 10px; font-size: 11px; letter-spacing: 0.08em; color: var(--silver-mute); pointer-events: none; }

.form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.form-note { font-size: 13px; color: var(--silver-mute); flex: 1; min-width: 200px; }
.send { overflow: hidden; }
.send.sending .arrow { animation: arrow-fly .7s cubic-bezier(.5, 0, .2, 1); }
@keyframes arrow-fly {
  0% { transform: none; }
  45% { transform: translateX(40px); opacity: 0; }
  46% { transform: translateX(-30px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--black-4); padding: 72px 0 40px; background: var(--black); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.footer-brand p { color: var(--silver-mute); font-size: 14px; margin-top: 18px; max-width: 320px; }
.footer-col h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--silver-mute); margin-bottom: 18px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 15px; color: var(--silver-dim); transition: color .2s ease; }
.footer-col a:hover { color: var(--white); }
.social-link { display: inline-flex; align-items: center; gap: 10px; }
.social-link img { width: 22px; height: 22px; opacity: 0.85; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--black-4);
  font-size: 13px; color: var(--silver-mute);
}
.age { display: inline-flex; align-items: center; gap: 12px; max-width: 640px; }
.age b {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--silver-dim); font-size: 11px; font-weight: 600;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .split, .game-layout, .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .wrap { padding: 0 16px; }
  .menu-toggle { display: block; }
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 24px 16px;
    overflow-y: auto;
    background: var(--black);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .menu-open .nav { opacity: 1; visibility: visible; transform: none; }
  .menu-open { overflow: hidden; } /* no page scrolling behind the open menu */
  .nav a { font-size: 22px; padding: 18px 0; border-bottom: 1px solid var(--black-4); color: var(--silver-bright); }
  .nav .btn { margin: 28px 0 0; min-height: 52px; font-size: 14px; border-bottom: 0; color: var(--black); }
  .section { padding: 56px 0; }
  .section-head { margin-bottom: 28px; }
  .hero { padding: 64px 0 96px; }
  .hero .mark { width: 72px; }
  .mark-btn { margin-bottom: 28px; }
  .games-grid.featured { grid-template-columns: 1fr; }
  .pillar h3 { margin-top: 24px; }
  .page-head { padding: 64px 0 32px; }
  .form { grid-template-columns: 1fr; padding: 24px; }
  .form-title { font-size: 22px; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { padding-bottom: env(safe-area-inset-bottom); }
  .brand { font-size: 13px; letter-spacing: 0.18em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float, .glint-title, .glint-title .l, .glint-title .l::before, .glint-title .l::after,
  .mark-btn, .mark-btn .mark, .hero-actions, .send .arrow { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .art-inner, .art-inner::after { transition: none; }
}


/* =====================  Creative upgrades  ===================== */

/* ---------- Game cards: gentle lift on hover (no tilt) ---------- */
.games-grid .card { transform: translateY(var(--lift, 0px)); transition: transform .4s cubic-bezier(.2, .7, .2, 1), border-color .3s ease; }
.card:hover { --lift: -4px; }
.game-art { border-radius: var(--radius); }

/* ---------- Why Sleek: icons + spotlight that follows the cursor ---------- */
.pillar { position: relative; overflow: hidden; transition: background .4s ease; }
.pillar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.07), transparent 70%);
  opacity: 0; transition: opacity .4s ease;
}
.pillar:hover::before { opacity: 1; }
.pillar > * { position: relative; }
.pillar-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-top: 0; border-radius: 12px;
  border: 1px solid var(--black-5); background: var(--black-2); color: var(--silver);
  transition: color .3s ease, border-color .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.pillar:hover .pillar-icon { color: var(--white); border-color: var(--silver-mute); transform: translateY(-3px) rotate(-4deg); }
.pillar h3 { margin-top: 22px; }

/* ---------- CTA: big faint logo with a slow sheen ---------- */
.cta { position: relative; overflow: hidden; }
.cta > .wrap { position: relative; }
.cta-mark {
  position: absolute; left: 50%; top: 50%; width: min(70vw, 620px); aspect-ratio: 420 / 350;
  transform: translate(-50%, -50%);
  background: linear-gradient(110deg, rgba(255,255,255,0.025) 40%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.025) 60%) no-repeat;
  background-size: 300% 100%;
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
  animation: mark-sheen 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mark-sheen { 0% { background-position: 100% 0; } 50%, 100% { background-position: 0 0; } }

/* ---------- Page heads: giant outlined backdrop word ---------- */
.page-head { position: relative; overflow: hidden; }
.page-head .wrap { position: relative; }
.page-count {
  display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--silver-dim); letter-spacing: 0.18em;
}
.page-count:empty { display: none; }

/* ---------- Footer: giant outlined wordmark + back to top ---------- */
.site-footer { position: relative; overflow: hidden; }
.footer-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.to-top {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 4px 14px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver-dim);
  cursor: pointer; transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.to-top:hover { color: var(--white); border-color: var(--silver-mute); transform: translateY(-2px); }


@media (max-width: 760px) {
  .scrolled .site-header { height: var(--header-h); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-mark { animation: none; }
}


/* ---------- Game card (v2): art + slim info strip, whole card is the link ---------- */
.card { position: relative; background: var(--black-2); }
.card-art { aspect-ratio: 3 / 4; }
.card-art .art-inner { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.card:hover .card-art .art-inner { transform: scale(1.05); }
.card .badge { top: 14px; left: 14px; }
.card-info {
  position: relative; z-index: 1; overflow: hidden;
  margin-top: -1px; /* covers the art's last sub-pixel row, which showed as a coloured line when the art zooms */
  padding: 17px 18px 18px;
  background: var(--black-2);
  border-top: 1px solid var(--black-4);
}
/* light that sweeps across the strip on hover */
.card-info::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0;
  transition: background-position .9s ease;
}
.card:hover .card-info::after { background-position: 0 0; }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card .card-title { font-size: 19px; font-weight: 600; letter-spacing: 0.03em; color: var(--silver-bright); min-width: 0; }
/* the title link stretches over the whole card */
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.card-link:focus-visible { outline: none; }
.card:has(.card-link:focus-visible) { border-color: var(--silver-mute); }
.card-go {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--silver-dim);
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.card:hover .card-go { background: var(--silver-bright); border-color: var(--silver-bright); color: var(--black); transform: rotate(-45deg); }
.card-play {
  position: relative; z-index: 5; flex: none;
  min-height: 34px; padding: 7px 16px; border-radius: 999px;
  background: var(--silver-bright); color: var(--black);
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}
.card-play:hover { background: var(--white); transform: translateY(-1px); }
.card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
  margin-top: 10px; font-size: 12px; color: var(--silver-mute);
}
.card-meta span { white-space: nowrap; }
.card-meta span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--line); margin: 0 10px; vertical-align: middle; }
.card-meta b { font-weight: 600; color: var(--silver-bright); }
@media (prefers-reduced-motion: reduce) {
  .card-go, .card-art .art-inner, .card-info::after { transition: none; }
}


/* ---------- "Built different. Built sleek." (v2) ---------- */
.why-layout { display: grid; grid-template-columns: 1.15fr 1.25fr; gap: 48px; align-items: center; }
.why-head .h2 { font-size: clamp(34px, 4.4vw, 60px); }
.why .pillars { grid-template-columns: repeat(2, 1fr); }
.why .pillar {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 210px; padding: 28px;
  background: linear-gradient(160deg, var(--black-2), var(--black) 70%);
}
.why .pillar h3 { margin: 0; font-size: 22px; }
.why .pillar-icon { width: 54px; height: 54px; border-radius: 14px; }
/* huge faint copy of the icon in the corner */
.pillar-ghost {
  position: absolute !important; right: -26px; bottom: -30px;
  color: rgba(255, 255, 255, 0.035);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1), color .5s ease;
  pointer-events: none;
}
.why .pillar:hover .pillar-ghost { transform: translate(-10px, -10px) rotate(-6deg); color: rgba(255, 255, 255, 0.07); }
/* icons draw themselves in, one tile after another */
.draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pillars.in .draw path { animation: draw 1.1s cubic-bezier(.65, 0, .35, 1) forwards; animation-delay: calc(0.2s + var(--d, 0) * 0.18s); }
.why .pillar:hover .draw path { animation: redraw .9s cubic-bezier(.65, 0, .35, 1) forwards; animation-delay: 0s; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.no-js .draw path { stroke-dashoffset: 0; }

@media (max-width: 1000px) {
  .why-layout { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .why .pillars { grid-template-columns: 1fr 1fr; }
  .why .pillar { min-height: 150px; padding: 20px; }
  .why .pillar h3 { font-size: 17px; }
  .why .pillar-icon { width: 44px; height: 44px; }
  .pillar-ghost { width: 110px; height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .draw path { stroke-dashoffset: 0; animation: none !important; }
}


/* ---------- Hero game wall: tilted columns of covers that slide past each other ---------- */
.wall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero:has(.wall)::before { display: none; } /* the wall replaces the faint diagonal bars */
.hero-inner { z-index: 1; }
.wall-tilt {
  --tile: clamp(104px, 11vw, 176px);
  --gap: clamp(10px, 1.1vw, 18px);
  position: absolute; left: 50%; top: 50%;
  width: 190vmax; height: 190vmax;
  /* --wall-py/--wall-rot/--wall-sc are set by site.js as you scroll (parallax, extra tilt, zoom-out) */
  transform: translate(-50%, calc(-50% + var(--wall-py, 0px))) rotate(calc(-12deg + var(--wall-rot, 0deg))) scale(var(--wall-sc, 1));
  display: flex; justify-content: center; align-items: flex-start; gap: var(--gap);
}
.wall-col {
  flex: none; width: var(--tile);
  display: flex; flex-direction: column; gap: var(--gap);
  animation: wall-up var(--dur, 60s) linear infinite;
  will-change: transform;
}
.wall-col.down { animation-name: wall-down; }
@keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--gap) / 2)); } }
@keyframes wall-down { from { transform: translateY(calc(-50% - var(--gap) / 2)); } to { transform: translateY(0); } }
.wall-tile {
  flex: none; position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  background: #121214; border: 1px solid #1c1c20;
}
.wall-tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
/* mystery placeholders: silver logo, a "?" or a "coming soon" tag */
.wall-tile.mystery {
  display: grid; place-items: center;
  background: linear-gradient(160deg, #19191d, #0e0e10 70%);
}
.wall-tile.mystery .mk {
  width: 46%; aspect-ratio: 420 / 350; background: #3a3a40;
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
}
.wall-tile.mystery .q { font-size: calc(var(--tile) * 0.5); line-height: 1; color: #34343a; transform: translateY(-4%); }
.wall-tile.mystery .tag {
  position: absolute; left: 0; right: 0; bottom: 12%;
  text-align: center; font-size: calc(var(--tile) * 0.075); letter-spacing: .22em; text-transform: uppercase; color: #4a4a52;
}
/* darken the wall so the title stays the hero: dark centre, lighter edges, black fade top/bottom */
.wall::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 50% 50%, rgba(7,7,7,.9), rgba(7,7,7,.72) 60%, rgba(7,7,7,.6)),
    linear-gradient(to bottom, var(--black) 0%, transparent 18%, transparent 78%, var(--black) 100%);
}
@media (max-width: 760px) {
  .wall-tilt { --tile: 92px; --gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .wall-col { animation: none; }
}


/* ---------- Clean page load ----------
   The page stays hidden only until the font is ready (0.6s at most), then fades in;
   the wall fades in by itself once its image is ready. Entrance animations wait for the fade.
   Failsafe: if the script never runs the reveal, the page shows itself after 1s. */
html:not(.loading) body { transition: opacity .6s ease; } /* fade only on reveal, never on the way out */
.loading body { opacity: 0; animation: failsafe-show 0s 1s forwards; }
@keyframes failsafe-show { to { opacity: 1; } }
.loading body * { animation-play-state: paused !important; }
.wall { opacity: 0; }
.wall.ready { opacity: 1; transition: opacity 1.4s ease; }
.no-js .wall { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body, .wall { transition: none; }
}


/* ---------- Hero tagline + X button (merged from the old "Built different" section) ---------- */
.hero-tag {
  margin-top: 22px;
  font-size: clamp(14px, 1.9vw, 21px);
  letter-spacing: .32em; margin-right: -.32em; /* balance trailing spacing so it centres */
  text-transform: uppercase;
  color: var(--silver-dim);
  animation: fade-up .9s cubic-bezier(.2, .7, .2, 1) .55s backwards;
}
.hero-tag + .hero-actions { margin-top: 40px; }
.btn-x img { width: 18px; height: 18px; margin-left: -4px; opacity: .9; transition: opacity .2s ease; }
.btn-x:hover img { opacity: 1; }
@media (max-width: 480px) {
  .hero-tag { letter-spacing: .22em; margin-right: -.22em; line-height: 1.7; max-width: 15em; }
  .hero-actions { flex-direction: column; align-items: stretch; width: min(100%, 280px); }
}
@media (prefers-reduced-motion: reduce) { .hero-tag { animation: none; } }
.hero-tag span { display: inline-block; } /* each sentence stays whole; phones split between them */

/* ---------- Footer: just the bottom row (18+ notice, copyright, back to top) ---------- */
.site-footer { padding: 28px 0; }
.site-footer .footer-bottom { margin-top: 0; padding-top: 0; border-top: 0; align-items: center; }


/* ---------- Top bar: slim strip above the main header (scrolls away; the header stays stuck) ---------- */
:root { --topbar-h: 44px; }
.topbar { height: var(--topbar-h); background: #030303; border-bottom: 1px solid #141416; } /* darker than the main header */
.topbar .wrap { height: 100%; display: flex; align-items: center; justify-content: flex-end; }
.topbar-x {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  opacity: .7; transition: opacity .2s ease, transform .2s ease;
}
.topbar-x:hover, .topbar-x:focus-visible { opacity: 1; transform: translateY(-1px); }
.topbar-x img { width: 20px; height: 20px; }
/* the hero still fills exactly one screen */
.hero { min-height: calc(100vh - var(--header-h) - var(--topbar-h)); min-height: calc(100dvh - var(--header-h) - var(--topbar-h)); }
@media (max-width: 760px) { :root { --topbar-h: 40px; } }


/* ---------- Headers scroll away with the page (no sticky header, no progress line) ---------- */
.site-header { position: relative; }
.scrolled .site-header { height: var(--header-h); }

/* ---------- Keyboard focus: silver ring instead of the browser's default colour ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--silver-bright); outline-offset: 3px; }
.btn:focus-visible, .chip:focus-visible, .to-top:focus-visible, .cc-copy:focus-visible, .card-play:focus-visible { outline-offset: 4px; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; } /* fields already brighten their border + sweep line */
.card-link:focus-visible { outline: none; } /* the whole card gets the ring instead */
.card:has(.card-link:focus-visible) { outline: 2px solid var(--silver-bright); outline-offset: 4px; }

/* ---------- Logo-style hover on the key buttons: grow + slight tilt, press in on click ---------- */
.hero-actions .btn, .form .send {
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .2s ease, color .2s ease, border-color .2s ease;
}
.hero-actions .btn:hover, .hero-actions .btn:focus-visible,
.form .send:hover, .form .send:focus-visible { transform: scale(1.06) rotate(-2deg); }
.hero-actions .btn:active, .form .send:active { transform: scale(0.94); transition-duration: .12s; }
@media (prefers-reduced-motion: reduce) {
  .hero-actions .btn:hover, .hero-actions .btn:focus-visible, .form .send:hover, .form .send:focus-visible, .hero-actions .btn:active, .form .send:active { transform: none; }
}

/* ---------- Nav: current page shown as a soft pill (replaces the underline) ---------- */
.nav a:not(.btn)::after { display: none; }
@media (min-width: 761px) {
  .nav { gap: 6px; }
  .nav .btn { margin-left: 14px; }
  .nav a:not(.btn) {
    padding: 8px 16px; border-radius: 999px; border: 1px solid transparent;
    transition: color .2s ease, background .25s ease, border-color .25s ease;
  }
  .nav a:not(.btn):hover { background: rgba(255, 255, 255, 0.04); color: var(--white); }
  .nav a[aria-current="page"] {
    background: #141416; border-color: #26262b; color: var(--white);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* faint top highlight */
  }
}
/* phone menu: current page marked with a small silver bar on the left */
@media (max-width: 760px) {
  .nav a[aria-current="page"] { color: var(--white); padding-left: 14px; box-shadow: inset 2px 0 0 var(--silver-bright); }
}

/* =====================  Blueprint details (inspired by LEEM, in Sleek's own style)  ===================== */
:root { --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; }

/* small labels in a typewriter-style face (built into every system, nothing to download) */
.eyebrow, .stat dt, .cc-label, .pills legend, .badge, .counter, .crumbs,
.field.fl input:focus + label, .field.fl input:not(:placeholder-shown) + label,
.field.fl textarea:focus + label, .field.fl textarea:not(:placeholder-shown) + label {
  font-family: var(--mono); font-weight: 600;
}

/* section titles with a count badge and a ruler line: "PLAY ON [2] ···|····|····" */
.rule-title {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--silver-bright);
}
.rule-title > span { flex: none; }
.rule-title.big {
  font-family: inherit; font-size: clamp(30px, 4.6vw, 52px); font-weight: 600; line-height: 1.05;
  letter-spacing: .02em; text-transform: none; margin: 0;
}
.rule-count {
  flex: none; display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 4px;
  background: var(--silver-bright); color: var(--black);
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0;
}
.rule-count:empty { display: none; }
.rule {
  flex: 1; min-width: 40px; height: 7px; align-self: center;
  background:
    repeating-linear-gradient(90deg, #34343a 0 1px, transparent 1px 60px) left bottom / 100% 7px no-repeat,   /* tall tick every 60px */
    repeating-linear-gradient(90deg, #2a2a2e 0 2px, transparent 2px 6px) left bottom / 100% 1px no-repeat;     /* fine dotted line */
}
.section-head-main { flex: 1; min-width: 0; }

/* hard offset shadow on the main buttons */
.btn-primary { box-shadow: 3px 4px 0 0 #5c5c63; }
.btn-primary:active { box-shadow: 1px 1px 0 0 #5c5c63; }
.btn-primary[aria-disabled="true"] { box-shadow: none; }

/* ---------- Game page: compact panel ---------- */
.game-hero { position: relative; overflow: hidden; padding: 36px 0 80px; }
.game-hero > .wrap { position: relative; }
.game-backdrop {
  position: absolute; inset: -60px; pointer-events: none;
  background-size: cover; background-position: center;
  filter: blur(46px) saturate(.9); opacity: .2; transform: scale(1.08);
  -webkit-mask: linear-gradient(to bottom, #000 20%, transparent 92%);
  mask: linear-gradient(to bottom, #000 20%, transparent 92%);
}
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 26px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--silver-mute);
}
.crumbs a { color: var(--silver-dim); transition: color .2s ease; }
.crumbs a:hover { color: var(--white); }
.crumb-sep { color: #3a3a40; }

.gpanel {
  background: linear-gradient(160deg, rgba(22, 22, 26, .94), rgba(11, 11, 13, .94));
  border: 1px solid #1f1f24; border-radius: var(--radius);
  padding: 18px;
}
.gpanel-top { display: grid; grid-template-columns: minmax(170px, 250px) minmax(0, 1fr); gap: 26px; align-items: start; }
.gpanel-cover { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 1px solid var(--black-4); }
.gpanel-cover .art-inner.art-img { position: absolute; inset: 0; }
.gpanel-info { padding-top: 4px; min-width: 0; }
.gpanel-info h1 {
  font-size: clamp(30px, 4.2vw, 50px); font-weight: 600; line-height: 1.02;
  letter-spacing: .03em; text-transform: uppercase; color: var(--silver-bright);
}
.gpanel-studio {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--silver-mute);
}
.gpanel-studio::before { content: ""; width: 6px; height: 6px; background: var(--silver-mute); }
.gpanel-info .desc { margin-top: 16px; font-size: 15px; color: var(--silver-dim); max-width: 540px; }
.gstats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 20px 0 0; border: 0; border-radius: 0; }
.gstats .stat { background: #0b0b0d; border: 1px solid #1f1f24; border-radius: 10px; padding: 12px 14px; }
.gstats .stat + .stat { border-left: 1px solid #1f1f24; }
.gstats .stat dd { font-size: min(20px, 5cqi); margin-top: 4px; }

.playon { margin-top: 22px; }
.site-list { list-style: none; border: 1px solid #1f1f24; border-radius: 12px; overflow: hidden; }
.site-list li + li { border-top: 1px solid #1a1a1e; }
.site-row {
  display: grid; grid-template-columns: 34px auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 16px; background: #0b0b0d;
  transition: background .2s ease;
}
.site-num { font-family: var(--mono); font-size: 12px; color: var(--silver-mute); }
.site-name { font-size: 17px; letter-spacing: .05em; text-transform: uppercase; color: var(--silver-bright); }
.site-domain { font-family: var(--mono); font-size: 12px; color: var(--silver-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-state { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--white); white-space: nowrap; }
.site-state.soon { color: var(--silver-mute); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
a.site-row:hover { background: #141418; }
a.site-row .site-state span { display: inline-block; transition: transform .2s ease; }
a.site-row:hover .site-state span { transform: translate(2px, -2px); }

.game-hero + .section .games-grid { margin-top: 28px; }

@media (max-width: 760px) {
  .gpanel { padding: 14px; }
  .gpanel-top { grid-template-columns: 1fr; gap: 18px; }
  .gpanel-cover { width: min(240px, 72%); margin: 0 auto; }
  .gpanel-info { text-align: left; }
  .site-row { grid-template-columns: 28px auto minmax(0, 1fr) auto; gap: 10px; padding: 13px 12px; }
  .site-domain { visibility: hidden; }
  .rule-title.big { font-size: clamp(26px, 8vw, 36px); }
}
.gpanel-cover .badge { top: 10px; left: 10px; font-size: 10px; letter-spacing: .12em; padding: 4px 10px; }
.site-state .short { display: none; }
@media (max-width: 760px) {
  .site-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .site-domain { display: none; }
  .site-state .long { display: none; }
  .site-state .short { display: inline; }
}

/* ---------- Footer: big faint logo watermark behind the right side (LEEM-style light accent) ---------- */
.site-footer { padding: 64px 0; }
.site-footer > .wrap { position: relative; z-index: 1; }
.site-footer::before {
  content: ""; position: absolute; pointer-events: none;
  right: -3%; top: 50%; transform: translateY(-46%);
  width: clamp(280px, 36vw, 560px); aspect-ratio: 420 / 350;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.022));
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
}
@media (max-width: 760px) {
  .site-footer { padding: 48px 0; }
  .site-footer::before { width: 230px; right: -12%; opacity: .8; }
}

/* ---------- Game cards (homepage + Games page): compact, one fixed size on every screen (150px wide, chosen 2026-10-23) ---------- */
.card-date { display: none; }
:is([data-featured], [data-games]).games-grid { grid-template-columns: repeat(auto-fill, 150px); justify-content: center; gap: 16px; }
:is([data-featured], [data-games]) .card { border-radius: 14px; }
:is([data-featured], [data-games]) .card-art { aspect-ratio: 3 / 4; }
:is([data-featured], [data-games]) .card .badge { top: 8px; left: 50%; transform: translateX(-50%); font-size: 9px; letter-spacing: .14em; padding: 4px 9px; white-space: nowrap; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; }

:is([data-featured], [data-games]) .card-info { padding: 10px 12px 12px; }
:is([data-featured], [data-games]) .card-row { gap: 8px; }
:is([data-featured], [data-games]) .card .card-title { font-size: 13px; letter-spacing: .02em; }
:is([data-featured], [data-games]) .card-go { width: 28px; height: 28px; }
:is([data-featured], [data-games]) .card-go svg { width: 13px; height: 13px; }
:is([data-featured], [data-games]) .card-meta { display: none; }
:is([data-featured], [data-games]) .card-date {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--silver-mute);
}

/* footer watermark: brighter, and the whole logo sits inside the footer on the right */
.site-footer::before {
  right: max(16px, calc((100% - var(--wrap)) / 2 + 24px)); top: 50%; transform: translateY(-50%);
  width: auto; height: calc(100% - 24px); max-height: 240px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
  opacity: 1;
}
@media (max-width: 760px) { .site-footer::before { right: 16px; height: auto; width: 150px; opacity: .7; } }
.badge .short { display: none; }
:is([data-featured], [data-games]) .badge .long { display: none; }
:is([data-featured], [data-games]) .badge .short { display: inline; }
/* homepage cards line up with the heading */
:is([data-featured], [data-games]).games-grid { justify-content: start; }

/* =====================  Game page (v3): Sleek's own look — banner, floating cover, slanted stats + buttons  ===================== */
.gx-back { margin-bottom: 22px; }
.gx { position: relative; }
.gx-banner {
  height: clamp(210px, 30vw, 380px); border-radius: var(--radius) var(--radius) 0 0;
  background-size: cover; background-position: center 40%;
  -webkit-mask: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask: linear-gradient(to bottom, #000 45%, transparent 100%);
  opacity: .9;
}
.gx-body {
  position: relative; display: grid; grid-template-columns: clamp(170px, 20vw, 250px) minmax(0, 1fr); gap: 36px; align-items: end;
  margin-top: calc(-1 * clamp(120px, 15vw, 210px)); padding: 0 clamp(8px, 2vw, 28px);
}
/* the cover floats over the banner's edge, tilted like the logo */
.gx-cover {
  position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .9);
  transform: rotate(-2deg); transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.gx-cover .art-inner.art-img { position: absolute; inset: 0; }
.gx-cover::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0; transition: background-position .9s ease;
}
.gx-cover:hover { transform: rotate(-3deg) scale(1.03); }
.gx-cover:hover::after { background-position: 0 0; }
.gx-cover .badge { top: 10px; left: 10px; font-size: 10px; letter-spacing: .12em; padding: 4px 10px; }
.gx-head { padding-bottom: 6px; min-width: 0; }
/* title with the same silver sheen as the homepage */
.gx-title {
  font-size: clamp(34px, 5.4vw, 68px); font-weight: 600; line-height: 1; letter-spacing: .03em; text-transform: uppercase;
  background: linear-gradient(105deg, #d6d6dc 44%, #ffffff 50%, #d6d6dc 56%) no-repeat; background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: gx-sheen 7s ease-in-out 1.2s infinite;
}
@keyframes gx-sheen { 0% { background-position: 100% 0; } 30%, 100% { background-position: 0 0; } }
.gx-by { margin-top: 10px; font-size: 16px; letter-spacing: .04em; color: var(--silver-dim); }
.gx-head .desc { margin-top: 14px; font-size: 16px; color: var(--silver-dim); max-width: 560px; }

/* stats: one strip, values split by slanted bars echoing the logo */
.gx-stats {
  display: flex; flex-wrap: wrap; gap: 18px 0; border: 0; border-radius: 0;
  margin: 44px 0 0; padding: 0 clamp(8px, 2vw, 28px);
}
.gx-stats .stat { position: relative; padding: 0 clamp(22px, 3vw, 44px); }
.gx-stats .stat:first-child { padding-left: 0; }
.gx-stats .stat + .stat { border-left: 0; }
.gx-stats .stat + .stat::before {
  content: ""; position: absolute; left: -3px; top: 8%; height: 84%; width: 6px;
  background: linear-gradient(to bottom, #c0c0c6, #5c5c63); transform: skewX(-28deg); border-radius: 1px;
}
.gx-stats dd { font-size: clamp(26px, 3.2vw, 42px); font-weight: 600; line-height: 1.05; color: var(--silver-bright); margin: 0; white-space: nowrap; }
.gx-stats dt { font-family: inherit; font-size: 12px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--silver-mute); margin-top: 6px; }

/* play on: slanted buttons shaped like the logo's bars */
.gx-play { margin-top: 48px; padding: 0 clamp(8px, 2vw, 28px); }
.gx-play-title { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--silver-dim); margin-bottom: 18px; }
.gx-play-title::before { content: ""; width: 22px; height: 6px; background: var(--silver-dim); transform: skewX(-28deg); }
.gx-sites { display: flex; flex-wrap: wrap; gap: 18px; padding-left: 10px; }
.gx-site {
  position: relative; overflow: hidden; min-width: 250px;
  padding: 16px 34px; transform: skewX(-16deg);
  background: linear-gradient(160deg, #18181c, #0f0f12); border: 1px solid #26262b;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .25s ease;
}
.gx-site::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .12) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0; transition: background-position .9s ease;
}
.gx-site:hover { transform: skewX(-16deg) translateY(-2px); border-color: #3a3a40; }
.gx-site:hover::after { background-position: 0 0; }
.gx-site-in { display: flex; flex-direction: column; gap: 4px; transform: skewX(16deg); }
.gx-site-name { font-size: 21px; letter-spacing: .05em; text-transform: uppercase; color: var(--silver-bright); }
.gx-site-tag { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--silver-mute); }
.gx-site.live { background: var(--silver-bright); border-color: var(--silver-bright); box-shadow: 3px 4px 0 0 #5c5c63; }
.gx-site.live .gx-site-name, .gx-site.live .gx-site-tag { color: var(--black); }

@media (max-width: 760px) {
  .gx-banner { height: 190px; }
  .gx-body { grid-template-columns: 1fr; gap: 22px; margin-top: -120px; padding: 0; }
  .gx-cover { width: min(230px, 64%); margin: 0 auto; }
  .gx-head { text-align: center; }
  .gx-head .desc { margin-left: auto; margin-right: auto; }
  .gx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; padding: 0; margin-top: 34px; }
  .gx-stats .stat, .gx-stats .stat:first-child { padding: 0 0 0 18px; }
  .gx-stats .stat::before, .gx-stats .stat + .stat::before {
    content: ""; position: absolute; left: 2px; top: 8%; height: 84%; width: 5px;
    background: linear-gradient(to bottom, #c0c0c6, #5c5c63); transform: skewX(-28deg);
  }
  .gx-stats dd { font-size: 26px; }
  .gx-play { padding: 0; margin-top: 38px; }
  .gx-sites { flex-direction: column; padding: 0 8px; }
  .gx-site { min-width: 0; transform: skewX(-10deg); }
  .gx-site:hover { transform: skewX(-10deg) translateY(-2px); }
  .gx-site-in { transform: skewX(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gx-title { animation: none; }
  .gx-cover, .gx-site { transition: none; }
}
.gx-cover .badge { white-space: nowrap; }
@media (max-width: 760px) {
  .gx-cover .badge { font-size: 8.5px; letter-spacing: .1em; padding: 3px 8px; top: 8px; left: 8px; }
  .gx-stats .stat, .gx-stats .stat:first-child { padding-left: 24px; }
  .gx-stats .stat::before, .gx-stats .stat + .stat::before { left: 4px; width: 4px; }
}
/* footer watermark sits in the gap between the notice (left) and the copyright (right) */
.site-footer::before { right: auto; left: 58%; transform: translate(-50%, -50%); }
@media (max-width: 760px) { .site-footer::before { left: auto; right: 16px; transform: translateY(-50%); } }
/* footer watermark as a real middle piece: it always fills the gap between the two texts */
.site-footer::before { display: none; }
.site-footer .footer-bottom { flex-wrap: nowrap; }
.footer-mark {
  flex: 1 1 0; min-width: 0; align-self: center; height: 150px; margin: -40px 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 1200px) {
  /* narrower screens: not enough room between the texts, so the logo goes back behind the right side */
  .site-footer .footer-bottom { flex-wrap: wrap; }
  .footer-mark { display: none; }
  .site-footer::before { display: block; }
}
/* Play on buttons: same greyed style as the header's "Coming soon" until live */
.gx-sites { gap: 12px; padding-left: 0; }
.gx-site-btn { min-width: 150px; }
.gx-site-btn[aria-disabled="true"] { cursor: default; pointer-events: none; }
@media (max-width: 760px) { .gx-sites { flex-direction: row; flex-wrap: wrap; padding: 0; } .gx-site-btn { flex: 1 1 140px; } }

/* =====================  Layout refresh (2026-10-17): LEEM-leaning menu, Rewards button, footer contact, roadmap  ===================== */

/* ---------- Menu: numbered links, solid underline on the current page ---------- */
.nav a:not(.btn) .nav-num {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .04em;
  color: #55555c; margin-right: 8px; transition: color .2s ease;
}
@media (min-width: 761px) {
  .nav { gap: 30px; }
  .nav a:not(.btn) {
    position: relative; padding: 10px 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important;
    font-size: 14px; font-weight: 600; letter-spacing: .2em; color: var(--silver-dim);
  }
  .nav a:not(.btn):hover { color: var(--white); }
  .nav a:not(.btn):hover .nav-num { color: var(--silver-mute); }
  .nav a[aria-current="page"] { color: var(--white); }
  .nav a[aria-current="page"] .nav-num { color: var(--silver-mute); }
  .nav a:not(.btn)::after {
    display: block; content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--silver-bright); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .7, .2, 1);
  }
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
}

/* ---------- Rewards button: boxy, hard offset shadow, angled light streak (greyed until it launches) ---------- */
.btn-rewards {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 20px; margin-left: 6px; border-radius: 3px;
  background: #1b1b1f; border: 1px solid #2c2c32; color: var(--silver-mute);
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  box-shadow: inset 3px 0 0 #3a3a40, 3px 4px 0 0 #0f0f11;
  cursor: default; user-select: none;
}
.btn-rewards::after { /* the angled streak in the right-hand corner */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34px; pointer-events: none;
  background: linear-gradient(115deg, transparent 50%, rgba(255, 255, 255, .06) 50%);
}
.btn-rewards svg { flex: none; color: var(--silver-dim); }
.rewards-soon {
  font-size: 9px; letter-spacing: .14em; padding: 2px 6px; border-radius: 2px;
  background: #2a2a2e; color: var(--silver-dim);
}
@media (max-width: 760px) {
  .nav .btn-rewards { margin: 28px 0 0; height: 52px; justify-content: center; font-size: 13px; }
  .nav a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--silver-bright); padding-left: 14px; }
}

/* ---------- Footer: brand + "The site" + Contact columns, then the 18+ / copyright row ---------- */
.site-footer { padding: 72px 0 34px; }
.site-footer .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 48px; }
.footer-brand .brand .mark { width: 40px; }
.footer-brand p { color: var(--silver-mute); font-size: 15px; margin-top: 18px; max-width: 340px; }
.footer-col h4 { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #6a6a72; margin-bottom: 18px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 12px; }
.footer-col a { font-size: 16px; color: var(--silver-dim); transition: color .2s ease; }
.footer-col a:hover { color: var(--white); }
.footer-contact .fc-email { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer-contact .cc-copy { min-height: 28px; padding: 3px 12px; font-size: 10px; }
.footer-contact .social-link { display: inline-flex; align-items: center; gap: 10px; }
.footer-contact .social-link img { width: 18px; height: 18px; opacity: .85; }
.fc-place { display: flex; align-items: center; gap: 10px; color: var(--silver-dim); font-size: 16px; }
.fc-place img { width: 16px; height: 16px; opacity: .85; }
.site-footer .footer-bottom { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--black-4); }
.footer-mark { height: 110px; margin: -30px 20px; }
@media (max-width: 1000px) { .site-footer .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px)  { .site-footer .footer-top { grid-template-columns: 1fr; gap: 34px; } .site-footer { padding-top: 56px; } }
/* arriving from an old /contact link: give the footer a moment of emphasis */
.site-footer:target .footer-contact h4 { color: var(--silver-bright); }

/* ---------- Roadmap ---------- */
.roadmap-sec { padding-bottom: 110px; }
.roadmap { list-style: none; display: grid; gap: 12px; max-width: 900px; }
.rm-item {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; align-items: start;
  padding: 24px 24px 24px 20px; border: 1px solid #1f1f24; border-radius: 12px;
  background: linear-gradient(160deg, #141417, #0b0b0d 70%);
}
.rm-item.now { border-color: #2e2e34; box-shadow: inset 3px 0 0 var(--silver-bright); }
.rm-num { font-family: var(--mono); font-size: 13px; font-weight: 700; color: #55555c; padding-top: 4px; }
.rm-when { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--silver-mute); }
.rm-title { font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--silver-bright); margin-top: 6px; }
.rm-text { color: var(--silver-dim); margin-top: 8px; max-width: 560px; }
.rm-link { display: inline-flex; gap: 8px; margin-top: 14px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--silver-bright); }
.rm-link:hover { color: var(--white); }
.rm-state {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--silver-mute);
}
.rm-item.now .rm-state { background: var(--silver-bright); border-color: var(--silver-bright); color: var(--black); }
@media (max-width: 560px) {
  .rm-item { grid-template-columns: 34px minmax(0, 1fr); padding: 20px 16px; }
  .rm-state { grid-column: 2; justify-self: start; }
}

/* =====================  Site background: big faint logos that belong to the page (2026-10-17, v3)  =====================
   A few large copies of the logo sit down each page, alternating sides and hanging off the edge so
   they frame the content. They scroll with the page and drift a little as they pass (site.js). */
.bg-ghosts { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-ghost {
  position: absolute; aspect-ratio: 420 / 350;
  background: linear-gradient(160deg, rgba(255, 255, 255, calc(var(--a) * 1.4)), rgba(255, 255, 255, calc(var(--a) * .65)));
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
  transform: rotate(var(--rot)); will-change: transform;
  animation: ghost-in 1.6s ease .35s both;
}
@keyframes ghost-in { from { opacity: 0; } }
.topbar, main, .site-footer { position: relative; z-index: 1; }
body { position: relative; }

/* footer: no logo watermark any more */
.site-footer::before, .footer-mark { display: none !important; }

/* =====================  Page load + page switch animations (LEEM-style, 2026-10-17)  =====================
   First visit: the top bar drops in, page titles wipe in left→right, text rises in after them.
   Sections, cards, roadmap steps and footer columns rise in one after another as they scroll into
   view. Switching pages: the content fades out, the header stays put, the new page plays its intro. */
@keyframes nav-in  { from { opacity: 0; translate: 0 -12px; } }
@keyframes rise-in { from { opacity: 0; translate: 0 18px; } }
@keyframes wipe-in { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -2% -20% 0); } }
@keyframes reveal-up { from { opacity: 0; translate: 0 26px; } }
@keyframes frame-open { from { clip-path: inset(0 50%); } to { clip-path: inset(-4px); } }
@keyframes tick-in { from { opacity: 0; scale: .4; } }

.topbar, .site-header { animation: nav-in .8s cubic-bezier(.2, .8, .2, 1) both; }
.switch .topbar, .switch .site-header { animation: none; }   /* page switch: header stays put */

.page-head h1 { animation: wipe-in 1.1s cubic-bezier(.7, 0, .2, 1) .15s both; }
.page-head .lead { animation: rise-in .9s cubic-bezier(.2, .8, .2, 1) .45s both; }
.gx-back { animation: rise-in .9s cubic-bezier(.2, .8, .2, 1) .1s both; }

/* scroll reveals: rise in, staggered by --d (set by site.js) */
.reveal { transform: none; }
.reveal.in { animation: reveal-up .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }

/* homepage: a thin frame opens from the centre around the opening screen, corner ticks pop in */
.hero-frame {
  position: absolute; inset: 16px; z-index: 1; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .09);
  animation: frame-open 1.3s cubic-bezier(.7, 0, .2, 1) .1s both;
}
.hero-frame i {
  position: absolute; width: 12px; height: 12px; border: 0 solid var(--silver-dim);
  animation: tick-in .9s cubic-bezier(.2, .8, .2, 1) .7s both;
}
.hero-frame i:nth-child(1) { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.hero-frame i:nth-child(2) { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.hero-frame i:nth-child(3) { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.hero-frame i:nth-child(4) { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
@media (max-width: 760px) { .hero-frame { inset: 10px; } }

/* leaving for another page on the site */
.leaving main, .leaving .site-footer, .leaving .bg-ghosts {
  opacity: 0; translate: 0 -8px;
  transition: opacity .22s ease, translate .22s ease;
}

@media (prefers-reduced-motion: reduce) {
  .bg-ghost, .topbar, .site-header, .page-head h1, .page-head .lead, .gx-back,
  .reveal.in, .hero-frame, .hero-frame i { animation: none; }
  .reveal { opacity: 1; }
}

/* =====================  Top bar removed (2026-10-17): the X link lives in the footer  ===================== */
:root { --topbar-h: 0px; }
@media (max-width: 760px) { :root { --topbar-h: 0px; } }

/* =====================  Menu links: Sleek's own hover / click (2026-10-17)  =====================
   Hover: three slanted logo bars slide in under the word one after another. Leaving: the bars slide off to the right (site.js adds .bars-out). Current page:
   the bars stay. Click: the link presses in and the bars snap together. */
.nav a:not(.btn)::after { display: none !important; }       /* no plain underline */
.nav-label { position: relative; display: inline-block; }
.nav-bars {
  position: absolute; left: 0; top: calc(100% + 6px);
  display: flex; gap: 4px; pointer-events: none;
}
.nav-bars i {
  display: block; width: 12px; height: 3px; border-radius: 1px;
  background: var(--silver-bright); transform: skewX(-40deg);
  opacity: 0;
}
@keyframes nav-bar-in  { from { opacity: 0; translate: -10px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes nav-bar-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 12px 0; } }
@keyframes nav-bar-snap { 50% { scale: 1.25 1; } }
.nav a:not(.btn):hover .nav-bars i { animation: nav-bar-in .34s cubic-bezier(.2, .8, .2, 1) both; }
.nav a:not(.btn):hover .nav-bars i:nth-child(2) { animation-delay: .06s; }
.nav a:not(.btn):hover .nav-bars i:nth-child(3) { animation-delay: .12s; }
.nav a:not(.btn).bars-out:not(:hover) .nav-bars i { animation: nav-bar-out .3s cubic-bezier(.4, 0, .2, 1) both; }
.nav a:not(.btn).bars-out:not(:hover) .nav-bars i:nth-child(2) { animation-delay: .04s; }
.nav a:not(.btn).bars-out:not(:hover) .nav-bars i:nth-child(3) { animation-delay: .08s; }
.nav a[aria-current="page"] .nav-bars i { opacity: 1; animation: none !important; }
.nav a:not(.btn):hover .nav-num, .nav a[aria-current="page"] .nav-num { color: var(--silver-bright); }
/* click */
.nav a:not(.btn) { transition: color .2s ease, transform .12s ease; }
.nav a:not(.btn):active, .nav a:not(.btn).pressed { transform: translateY(1px) scale(.97); }
.nav a:not(.btn):active .nav-bars, .nav a:not(.btn).pressed .nav-bars { gap: 1px; transition: gap .12s ease; }
.nav a:not(.btn).pressed .nav-bars i { opacity: 1; animation: nav-bar-snap .25s ease both !important; }
.nav-bars { transition: gap .2s ease; }

/* phone menu: the bars sit to the right of the current page instead of a line on the left */
@media (max-width: 760px) {
  .nav a[aria-current="page"] { box-shadow: none !important; padding-left: 0 !important; }
  .nav-label { position: static; }
  .nav a:not(.btn) { position: relative; }
  .nav-bars { left: auto; right: 6px; top: 50%; margin-top: -2px; gap: 5px; }
  .nav-bars i { width: 16px; height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav a:not(.btn):hover .nav-bars i { animation: none; opacity: 1; }
  .nav a:not(.btn).bars-out .nav-bars i, .nav a:not(.btn).pressed .nav-bars i { animation: none !important; }
  .nav a:not(.btn):active, .nav a:not(.btn).pressed { transform: none; }
}

/* =====================  Menu on the left (2026-10-17): logo, then Home / Games / Roadmap; Bonuses stays top right  ===================== */
@media (min-width: 761px) {
  .site-header .wrap { justify-content: flex-start; gap: 44px; }
  .nav { flex: 1; gap: 34px; }
  .nav .btn-rewards { margin-left: auto; }
}

/* =====================  Homepage frame v2 (2026-10-17): cut corners, gaps in the edges, logo-bar corner marks  =====================
   The outline is drawn with background layers: straight edges (top/bottom split by a gap in the middle)
   plus a diagonal line across each cut corner. Each corner carries two small slanted bars. */
.hero-frame {
  --c: 22px; --g: 56px; --ln: rgba(255, 255, 255, .11);
  border: 0;
  background:
    /* top edge, left + right of the gap */
    linear-gradient(var(--ln), var(--ln)) var(--c) 0 / calc(50% - var(--c) - var(--g) / 2) 1px no-repeat,
    linear-gradient(var(--ln), var(--ln)) right var(--c) top 0 / calc(50% - var(--c) - var(--g) / 2) 1px no-repeat,
    /* bottom edge */
    linear-gradient(var(--ln), var(--ln)) var(--c) 100% / calc(50% - var(--c) - var(--g) / 2) 1px no-repeat,
    linear-gradient(var(--ln), var(--ln)) right var(--c) bottom 0 / calc(50% - var(--c) - var(--g) / 2) 1px no-repeat,
    /* sides */
    linear-gradient(var(--ln), var(--ln)) 0 var(--c) / 1px calc(100% - 2 * var(--c)) no-repeat,
    linear-gradient(var(--ln), var(--ln)) 100% var(--c) / 1px calc(100% - 2 * var(--c)) no-repeat,
    /* cut corners */
    linear-gradient(to bottom right, transparent calc(50% - .7px), var(--ln) 50%, transparent calc(50% + .7px)) 0 0 / var(--c) var(--c) no-repeat,
    linear-gradient(to top right, transparent calc(50% - .7px), var(--ln) 50%, transparent calc(50% + .7px)) 100% 0 / var(--c) var(--c) no-repeat,
    linear-gradient(to top right, transparent calc(50% - .7px), var(--ln) 50%, transparent calc(50% + .7px)) 0 100% / var(--c) var(--c) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .7px), var(--ln) 50%, transparent calc(50% + .7px)) 100% 100% / var(--c) var(--c) no-repeat;
}
/* corner marks: two staggered slanted bars sitting just outside each cut corner */
.hero-frame i, .hero-frame i:nth-child(n) {
  width: 0; height: 0; border: 0;
  top: auto; right: auto; bottom: auto; left: auto;
  animation: tick-in .7s cubic-bezier(.2, .8, .2, 1) 1s both;
}
.hero-frame i:nth-child(1) { left: calc(var(--c) / 2); top: calc(var(--c) / 2); rotate: -45deg; }
.hero-frame i:nth-child(2) { right: calc(var(--c) / 2); top: calc(var(--c) / 2); rotate: 45deg; }
.hero-frame i:nth-child(3) { left: calc(var(--c) / 2); bottom: calc(var(--c) / 2); rotate: -135deg; }
.hero-frame i:nth-child(4) { right: calc(var(--c) / 2); bottom: calc(var(--c) / 2); rotate: 135deg; }
.hero-frame i::before, .hero-frame i::after {
  content: ""; position: absolute; width: 14px; height: 2.5px; border-radius: 1px;
  background: var(--silver-dim); transform: skewX(-40deg);
}
.hero-frame i::before { left: -9px; top: -6px; }
.hero-frame i::after  { left: -5px; top: -11px; opacity: .6; }
@media (max-width: 760px) {
  .hero-frame { --c: 14px; --g: 40px; }
  .hero-frame i::before, .hero-frame i::after { width: 10px; height: 2px; }
  .hero-frame i::before { left: -6px; top: -5px; }
  .hero-frame i::after  { left: -3px; top: -9px; }
}

/* Homepage frame v3: same border, but no bar marks; the line ends (cut corners + gap edges) are bright white tips */
.hero-frame i { display: none; }
.hero-frame {
  --tip: rgba(255, 255, 255, .85); --t: 12px;
  background:
    /* white tips either side of the top and bottom gaps */
    linear-gradient(var(--tip), var(--tip)) calc(50% - var(--g) / 2 - var(--t) / 2) 0 / var(--t) 1px no-repeat,
    linear-gradient(var(--tip), var(--tip)) calc(50% + var(--g) / 2 + var(--t) / 2) 0 / var(--t) 1px no-repeat,
    linear-gradient(var(--tip), var(--tip)) calc(50% - var(--g) / 2 - var(--t) / 2) 100% / var(--t) 1px no-repeat,
    linear-gradient(var(--tip), var(--tip)) calc(50% + var(--g) / 2 + var(--t) / 2) 100% / var(--t) 1px no-repeat,
    /* top edge, left + right of the gap */
    linear-gradient(var(--ln), var(--ln)) var(--c) 0 / calc(50% - var(--c) - var(--g) / 2) 1px no-repeat,
    linear-gradient(var(--ln), var(--ln)) right var(--c) top 0 / calc(50% - var(--c) - var(--g) / 2) 1px no-repeat,
    /* bottom edge */
    linear-gradient(var(--ln), var(--ln)) var(--c) 100% / calc(50% - var(--c) - var(--g) / 2) 1px no-repeat,
    linear-gradient(var(--ln), var(--ln)) right var(--c) bottom 0 / calc(50% - var(--c) - var(--g) / 2) 1px no-repeat,
    /* sides */
    linear-gradient(var(--ln), var(--ln)) 0 var(--c) / 1px calc(100% - 2 * var(--c)) no-repeat,
    linear-gradient(var(--ln), var(--ln)) 100% var(--c) / 1px calc(100% - 2 * var(--c)) no-repeat,
    /* cut corners, in white */
    linear-gradient(to bottom right, transparent calc(50% - .7px), var(--tip) 50%, transparent calc(50% + .7px)) 0 0 / var(--c) var(--c) no-repeat,
    linear-gradient(to top right, transparent calc(50% - .7px), var(--tip) 50%, transparent calc(50% + .7px)) 100% 0 / var(--c) var(--c) no-repeat,
    linear-gradient(to top right, transparent calc(50% - .7px), var(--tip) 50%, transparent calc(50% + .7px)) 0 100% / var(--c) var(--c) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .7px), var(--tip) 50%, transparent calc(50% + .7px)) 100% 100% / var(--c) var(--c) no-repeat;
}
@media (max-width: 760px) { .hero-frame { --t: 8px; } }

/* Conveyor only inside the homepage frame (2026-10-17): the wall is clipped to the frame's shape,
   cut corners included. --fi = frame inset from the screen edge, --fc = size of the corner cut. */
.hero { --fi: 16px; --fc: 22px; }
.hero-frame { inset: var(--fi); --c: var(--fc); }
.wall {
  clip-path: polygon(
    calc(var(--fi) + var(--fc)) var(--fi), calc(100% - var(--fi) - var(--fc)) var(--fi),
    calc(100% - var(--fi)) calc(var(--fi) + var(--fc)), calc(100% - var(--fi)) calc(100% - var(--fi) - var(--fc)),
    calc(100% - var(--fi) - var(--fc)) calc(100% - var(--fi)), calc(var(--fi) + var(--fc)) calc(100% - var(--fi)),
    var(--fi) calc(100% - var(--fi) - var(--fc)), var(--fi) calc(var(--fi) + var(--fc)));
}
@media (max-width: 760px) { .hero { --fi: 10px; --fc: 14px; } .hero-frame { inset: var(--fi); } }

/* Conveyor zooms instead of re-laying out (2026-10-17): fixed-size layout (--L, 176px tiles),
   scaled by --k (set by site.js from the window width), so resizing is smooth. */
.wall-tilt, .wall-tilt:is(*) {
  --tile: 176px; --gap: 18px;
  width: var(--L, 190vmax); height: var(--L, 190vmax);
  transform: translate(-50%, calc(-50% + var(--wall-py, 0px))) rotate(calc(-12deg + var(--wall-rot, 0deg))) scale(calc(var(--wall-sc, 1) * var(--k, 1)));
}
/* Roadmap's menu link has a fourth bar */
.nav a:not(.btn):hover .nav-bars i:nth-child(4) { animation-delay: .18s; }
.nav a:not(.btn).bars-out:not(:hover) .nav-bars i:nth-child(4) { animation-delay: .12s; }

/* Conveyor drawn on a canvas (2026-10-19): one <canvas> fills the wall; the vignette (.wall::after),
   the frame clip and the fade-in still come from .wall above. */
.wall-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Conveyor moved by the graphics card (2026-10-23): .wall-belt sits at the hero's centre, tilted and zoomed
   by site.js; each column is one .wall-strip with the tile drawn once as a repeating background. */
.wall-belt { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-origin: 0 0; }
.wall-strip { position: absolute; background: var(--wall-tile) 0 0 repeat-y; will-change: transform; backface-visibility: hidden; }
.wall-cover { position: absolute; top: 0; will-change: transform; backface-visibility: hidden; }

/* Bonuses button in pink (2026-10-19): still not clickable, just coloured */
.btn-rewards {
  background: linear-gradient(180deg, #ff6fae, #e94b93);
  border-color: #ff8cc0; color: #fff;
  box-shadow: inset 3px 0 0 #ffb3d6, 3px 4px 0 0 #6e1f45;
}
.btn-rewards::after { background: linear-gradient(115deg, transparent 50%, rgba(255, 255, 255, .18) 50%); }
.btn-rewards svg { color: #fff; }
.rewards-soon { background: #fff; color: #d63b82; }

/* Phone menu fix (2026-10-19): the header's drop-in animation kept "translate: 0" on the header after
   it finished (fill: both), which turned the header into the box the fixed phone menu is sized to,
   squashing the menu into a 48px strip. Keep the start state only (backwards), so nothing stays on
   the header once the animation is over. */
.topbar, .site-header { animation-fill-mode: backwards; }
@media (max-width: 760px) { .nav > * { flex-shrink: 0; } }
/* softer pink for the Bonuses button */
.btn-rewards {
  background: linear-gradient(180deg, #f7a8cb, #ec8db8);
  border-color: #fbc3dc; color: #fff;
  box-shadow: inset 3px 0 0 #fdd5e7, 3px 4px 0 0 #6b3550;
}
.rewards-soon { background: #fff; color: #d9709f; }

/* Page switches without reloading (2026-10-19): only the page content and the background logos fade
   out while the next page is fetched; the header and footer stay put. */
.leaving .site-footer { opacity: 1; translate: none; transition: none; }
.bg-ghosts { transition: opacity .3s ease; }
main:focus { outline: none; }

/* =====================  Bonuses page (2026-10-19)  =====================
   Account panel on the left (Kick sign-in → link Stake → submit bets), raffles on the right. */
.btn-rewards { cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.btn-rewards:hover { transform: translate(-1px, -1px); box-shadow: inset 3px 0 0 #fdd5e7, 4px 5px 0 0 #6b3550; filter: brightness(1.04); }
.btn-rewards:active { transform: translate(1px, 1px); box-shadow: inset 3px 0 0 #fdd5e7, 1px 2px 0 0 #6b3550; }
.btn-rewards[aria-current="page"] { outline: 1px solid #fdd5e7; outline-offset: 3px; }

.bx-sec { padding: 8px 0 110px; }
.bx-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 20px; align-items: start; }
.bx-account { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 14px; }
.bx-raffles { display: grid; gap: 14px; }
.bx-card { background: var(--black-2); border: 1px solid var(--black-5); border-radius: 14px; padding: 22px; display: grid; gap: 14px; align-content: start; }
.bx-h { font-size: 24px; letter-spacing: .04em; color: var(--silver-bright); line-height: 1.15; }
.bx-h3 { font-size: 16px; letter-spacing: .06em; color: var(--silver-bright); }
.bx-mute { color: var(--silver-mute); font-size: 14px; }
.bx-step { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #ec8db8; }
.bx-msg { background: #1d0f0f; border: 1px solid #5c2a2a; color: #ffb3b3; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.bx-msg.ok { background: #0f1d14; border-color: #2d5a3a; color: #a9efbd; }
.bx-kick { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; border-radius: 10px;
  background: #53fc18; color: #0b0e0f; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; font-size: 14px;
  box-shadow: 3px 4px 0 0 #1f5c08; transition: transform .15s ease, box-shadow .15s ease; }
.bx-kick:hover { transform: translate(-1px, -1px); box-shadow: 4px 5px 0 0 #1f5c08; }
.bx-kick:active { transform: translate(1px, 1px); box-shadow: 1px 2px 0 0 #1f5c08; }
.bx-who { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--black-5); }
.bx-who img, .bx-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--black-5); display: grid; place-items: center; color: var(--silver-dim); font-weight: 700; flex: none; }
.bx-who div { display: grid; line-height: 1.2; }
.bx-who b { color: var(--silver-bright); font-weight: 400; letter-spacing: .03em; }
.bx-who .bx-mute { font-size: 12px; }
.bx-link { background: none; border: 0; color: var(--silver-mute); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; margin-left: auto; padding: 4px; justify-self: start; }
.bx-link:hover { color: var(--silver-bright); }
.bx-form { display: grid; gap: 10px; }
.bx-form input, .bx-form textarea { width: 100%; background: #0b0b0d; border: 1px solid var(--black-5); border-radius: 10px; color: var(--silver-bright); padding: 12px 14px; font: inherit; font-size: 15px; }
.bx-form textarea { resize: vertical; min-height: 100px; font-family: var(--mono); font-size: 12.5px; }
.bx-form input:focus, .bx-form textarea:focus { outline: 1px solid var(--silver-mute); border-color: var(--silver-mute); }
.bx-form .btn { width: 100%; }
.bx-seg { display: grid; grid-template-columns: 1fr 1fr; background: #0b0b0d; border: 1px solid var(--black-5); border-radius: 10px; padding: 3px; }
.bx-seg button { background: none; border: 0; border-radius: 8px; color: var(--silver-mute); font: inherit; font-size: 14px; padding: 8px; cursor: pointer; letter-spacing: .04em; }
.bx-seg button[aria-checked="true"] { background: var(--black-5); color: var(--white); }
.bx-target { display: grid; justify-items: center; gap: 2px; padding: 16px; border-radius: 12px; background: #0b0b0d; border: 1px dashed #ec8db8; text-align: center; }
.bx-target b { font-size: 44px; font-weight: 400; color: #f7a8cb; letter-spacing: .04em; line-height: 1.1; }
.bx-steps { display: grid; gap: 8px; padding-left: 20px; color: var(--silver-dim); font-size: 14.5px; }
.bx-steps b { color: var(--silver-bright); font-weight: 400; }
.bx-steps a { color: #f7a8cb; }
.bx-linked { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: var(--silver-dim); }
.bx-linked b { color: var(--silver-bright); font-weight: 400; }
.bx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--silver-mute); flex: none; margin-top: 7px; }
.bx-linked .bx-dot { margin-top: 0; }
.bx-dot.ok { background: #6fdc8c; box-shadow: 0 0 0 3px rgba(111, 220, 140, .15); }
.bx-dot.wait { background: #f2c46d; }
.bx-dot.no { background: #ff7a7a; }
.bx-results { list-style: none; display: grid; gap: 8px; }
.bx-results:empty { display: none; }
.bx-results li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; font-size: 13.5px; }
.bx-inp { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; color: var(--silver-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-out { color: var(--silver-dim); }
.bx-raffle.live { border-color: #5c3346; box-shadow: inset 3px 0 0 #ec8db8; }
.bx-rtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bx-pill { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--silver-dim); }
.bx-pill.ok { color: #6fdc8c; border-color: #2d5a3a; background: #0f1d14; }
.bx-pill.wait { color: #f2c46d; border-color: #5c4a22; background: #1d170b; }
.bx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bx-facts div { background: #0b0b0d; border: 1px solid var(--black-4); border-radius: 10px; padding: 10px 12px; }
.bx-facts dt { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--silver-mute); }
.bx-facts dd { color: var(--silver-bright); font-size: 17px; letter-spacing: .03em; margin-top: 2px; }
.bx-yours { font-size: 12px; color: #f7a8cb; white-space: nowrap; }
.bx-winners ol { display: grid; gap: 4px; padding-left: 22px; margin-top: 6px; color: var(--silver-dim); }
.bx-winners b { color: var(--silver-bright); font-weight: 400; }
.bx-fair summary, .bx-rules summary { cursor: pointer; color: var(--silver-mute); font-size: 13px; letter-spacing: .06em; }
.bx-fair summary:hover, .bx-rules summary:hover { color: var(--silver-bright); }
.bx-fair dl { display: grid; gap: 4px; margin: 10px 0; }
.bx-fair dt { font-size: 12px; color: var(--silver-mute); }
.bx-fair dd { font-family: var(--mono); font-size: 11px; color: var(--silver-dim); overflow-wrap: anywhere; margin-bottom: 6px; }
.bx-fair a { color: #f7a8cb; font-size: 13px; }
.bx-rules { margin-top: 28px; background: var(--black-2); border: 1px solid var(--black-5); border-radius: 14px; padding: 18px 22px; }
.bx-rules-body { display: grid; gap: 10px; margin-top: 14px; color: var(--silver-dim); font-size: 14.5px; max-width: 760px; }
.bx-rules-body h3 { font-size: 16px; letter-spacing: .06em; color: var(--silver-bright); font-weight: 400; margin-top: 8px; }
.bx-rules-body ol, .bx-rules-body ul { padding-left: 20px; display: grid; gap: 6px; }
.bx-rules-body b { color: var(--silver-bright); font-weight: 400; }
.bx-rules-body a { color: #f7a8cb; }
@media (max-width: 900px) {
  .bx-grid { grid-template-columns: 1fr; }
  .bx-account { position: static; }
}
@media (max-width: 560px) {
  .bx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-card { padding: 18px; }
  .bx-target b { font-size: 38px; }
}

/* Bonuses button is now a real link: keep its pink button look instead of the plain menu-link style (2026-10-19) */
.nav a.btn-rewards {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 40px;
  padding: 0 20px !important; border-radius: 3px !important; border: 1px solid #fbc3dc !important;
  background: linear-gradient(180deg, #f7a8cb, #ec8db8) !important; color: #fff !important;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  box-shadow: inset 3px 0 0 #fdd5e7, 3px 4px 0 0 #6b3550 !important;
}
.nav a.btn-rewards:hover { transform: translate(-1px, -1px); box-shadow: inset 3px 0 0 #fdd5e7, 4px 5px 0 0 #6b3550 !important; }
.nav a.btn-rewards:active { transform: translate(1px, 1px); box-shadow: inset 3px 0 0 #fdd5e7, 1px 2px 0 0 #6b3550 !important; }
.nav a.btn-rewards::after { display: block !important; }
.nav a.btn-rewards svg { color: #fff; }
@media (max-width: 760px) {
  .nav a.btn-rewards { margin: 28px 0 0 !important; height: 52px; justify-content: center; font-size: 13px; padding: 0 20px !important; }
}

/* =====================  Bonuses page v2 (2026-10-19): sign-in gate → link Stake → full page  ===================== */
/* stages 1–2: only a centred card, no page title */
.bx-gated .page-head { display: none; }
.bx-gated .bx-sec { padding: 0; }
.bx-gate { min-height: calc(100vh - var(--header-h) - 40px); min-height: calc(100dvh - var(--header-h) - 40px); display: grid; place-items: center; padding: 48px 0; }
.bx-gate-card {
  width: min(100%, 460px); display: grid; gap: 16px; justify-items: center; text-align: center;
  background: var(--black-2); border: 1px solid var(--black-5); border-radius: 18px; padding: 34px 30px 30px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  animation: rise-in .7s cubic-bezier(.2, .8, .2, 1) both;
}
.bx-gate-card > * { width: 100%; }
.bx-gate-card > .bx-gate-mark { width: 52px; margin-bottom: 2px; }
.bx-gate-card > .bx-step, .bx-gate-card > .bx-progress { width: auto; }
.bx-gate-title { font-size: clamp(30px, 6vw, 40px); font-weight: 400; letter-spacing: .03em; color: var(--silver-bright); line-height: 1.05; }
.bx-gate-lead { color: var(--silver-dim); font-size: 15.5px; line-height: 1.6; }
.bx-gate-lead b { color: var(--silver-bright); font-weight: 400; }
.bx-gate-card .bx-kick { width: 100%; margin-top: 4px; }
.bx-fine { color: var(--silver-mute); font-size: 12.5px; letter-spacing: .03em; }
.bx-progress { display: flex; gap: 6px; }
.bx-progress span { width: 26px; height: 4px; border-radius: 2px; background: var(--black-5); transform: skewX(-30deg); }
.bx-progress span.on { background: #f7a8cb; }
.bx-gate-card .bx-who { text-align: left; }
.bx-gate-card .bx-steps, .bx-gate-card .bx-msg { text-align: left; }
.bx-link.center { margin: 0 auto; justify-self: center; }
.bx-wait { display: flex; justify-content: center; gap: 8px; padding: 6px 0; }
.bx-wait span { width: 18px; height: 5px; border-radius: 2px; background: #f7a8cb; transform: skewX(-30deg); animation: bx-wait 1.2s ease-in-out infinite; }
.bx-wait span:nth-child(2) { animation-delay: .15s; } .bx-wait span:nth-child(3) { animation-delay: .3s; }
@keyframes bx-wait { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
.bx-target { box-shadow: 0 0 0 4px rgba(247, 168, 203, .06), 0 0 40px rgba(236, 141, 184, .12); }

/* stage 3: prize banner */
.bx-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center;
  background: linear-gradient(135deg, #1a1016 0%, var(--black-2) 55%); border: 1px solid #3a2430; border-radius: 18px;
  padding: 30px 32px; margin-bottom: 20px; animation: rise-in .7s cubic-bezier(.2, .8, .2, 1) both;
}
.bx-hero.empty { grid-template-columns: 1fr; background: var(--black-2); border-color: var(--black-5); }
.bx-hero-bars { position: absolute; right: -30px; top: -20px; display: grid; gap: 14px; opacity: .07; pointer-events: none; }
.bx-hero-bars i { display: block; width: 260px; height: 46px; background: #f7a8cb; transform: skewX(-40deg); border-radius: 4px; }
.bx-hero-bars i:nth-child(2) { margin-left: -40px; } .bx-hero-bars i:nth-child(3) { margin-left: -80px; }
.bx-hero-main { display: grid; gap: 10px; justify-items: start; position: relative; }
.bx-hero-title { font-size: clamp(26px, 3.2vw, 38px); font-weight: 400; letter-spacing: .03em; color: var(--white); line-height: 1.1; }
.bx-rule { color: var(--silver-dim); font-size: 15px; }
.bx-rule b { color: var(--silver-bright); font-weight: 400; }
.bx-hero-stats { display: flex; gap: 10px; margin-top: 4px; }
.bx-hero-stats div { background: rgba(0, 0, 0, .35); border: 1px solid var(--black-5); border-radius: 10px; padding: 8px 14px; display: grid; }
.bx-hero-stats span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--silver-mute); }
.bx-hero-stats b { font-size: 20px; font-weight: 400; color: var(--silver-bright); }
.bx-hero-stats .yours { border-color: #5c3346; } .bx-hero-stats .yours b { color: #f7a8cb; }
.bx-hero-side { position: relative; display: grid; justify-items: end; gap: 2px; text-align: right; }
.bx-pool { font-size: clamp(46px, 6vw, 72px); font-weight: 400; line-height: 1; letter-spacing: .02em; color: #f7a8cb; text-shadow: 0 0 40px rgba(236, 141, 184, .25); }
.bx-clock-label { margin-top: 14px; }
.bx-clock { display: flex; gap: 6px; margin-top: 4px; }
.bx-clock div { min-width: 58px; display: grid; justify-items: center; background: rgba(0, 0, 0, .4); border: 1px solid var(--black-5); border-radius: 10px; padding: 6px 4px; }
.bx-clock b { font-size: 24px; font-weight: 400; color: var(--white); line-height: 1.1; font-variant-numeric: tabular-nums; }
.bx-clock span { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--silver-mute); }

/* stage 3: columns, cards, results, past raffles */
.bx-col { display: grid; gap: 14px; align-content: start; }
.bx-grid .bx-col:first-child { position: sticky; top: calc(var(--header-h) + 16px); }
.bx-mini { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--silver-dim); }
.bx-mini b { color: var(--silver-bright); font-weight: 400; }
.bx-mini .bx-yours { color: #f7a8cb; }
.bx-pill2 { flex: none; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--silver-dim); }
.bx-pill2.ok { color: #6fdc8c; border-color: #2d5a3a; background: #0f1d14; }
.bx-pill2.wait { color: #f2c46d; border-color: #5c4a22; background: #1d170b; }
.bx-pill2.no { color: #ff9a9a; border-color: #5c2a2a; background: #1d0f0f; }
.bx-results li { display: flex; align-items: center; gap: 10px; grid-template-columns: none; }
.bx-res-txt { color: var(--silver-dim); font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-res-txt .bx-inp { font-size: 11px; }
.bx-past { list-style: none; display: grid; }
.bx-past > li { border-top: 1px solid var(--black-5); }
.bx-past > li:first-child { border-top: 0; }
.bx-past summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; }
.bx-past summary::-webkit-details-marker { display: none; }
.bx-past-t { display: grid; } .bx-past-t b { color: var(--silver-bright); font-weight: 400; letter-spacing: .02em; } .bx-past-t .bx-mute { font-size: 12.5px; }
.bx-past-w { color: var(--silver-dim); font-size: 13px; text-align: right; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-past details[open] { padding-bottom: 12px; }
.bx-past .bx-winners { margin: 0 0 8px; }
.bx-paid { color: #6fdc8c; }
@media (max-width: 900px) {
  .bx-hero { grid-template-columns: 1fr; padding: 24px 20px; }
  .bx-hero-side { justify-items: start; text-align: left; }
  .bx-grid .bx-col:first-child { position: static; }
}
@media (max-width: 480px) {
  .bx-gate-card { padding: 26px 18px 22px; }
  .bx-clock div { min-width: 0; flex: 1; }
}
/* long result lines shrink with ellipses instead of widening the card */
.bx-col, .bx-col > *, .bx-card > *, .bx-results li { min-width: 0; }

/* "See every ticket" pop-up (2026-10-20) */
.bx-entries-btn { margin-top: 4px; background: none; border: 0; padding: 0; color: #f7a8cb; font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bx-entries-btn:hover { color: #fbc3dc; }
.bx-dlg { width: min(720px, calc(100vw - 32px)); max-height: min(80vh, 760px); padding: 0; border: 1px solid var(--black-5); border-radius: 16px;
  background: var(--black-2); color: var(--silver); overflow: hidden; }
.bx-dlg[open] { display: flex; flex-direction: column; animation: rise-in .3s cubic-bezier(.2, .8, .2, 1) both; }
.bx-dlg::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.bx-dlg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 6px; }
.bx-dlg-x { background: var(--black-4); border: 1px solid var(--black-5); color: var(--silver-dim); width: 34px; height: 34px; border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer; flex: none; }
.bx-dlg-x:hover { color: var(--white); }
.bx-dlg > [data-sum] { padding: 0 22px 12px; }
.bx-dlg > [data-sum] b { color: var(--silver-bright); font-weight: 400; }
.bx-dlg > [data-body] { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.bx-dlg-search { margin: 0 22px 12px; background: #0b0b0d; border: 1px solid var(--black-5); border-radius: 10px; color: var(--silver-bright); padding: 10px 12px; font: inherit; font-size: 14px; }
.bx-dlg-search:focus { outline: 1px solid var(--silver-mute); }
.bx-dlg-list { overflow: auto; min-height: 0; flex: 1; border-top: 1px solid var(--black-5); border-bottom: 1px solid var(--black-5); }
.bx-dlg table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bx-dlg th { position: sticky; top: 0; background: var(--black-3); text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--silver-mute); padding: 9px 12px; }
.bx-dlg td { padding: 9px 12px; border-top: 1px solid var(--black-4); vertical-align: middle; color: var(--silver-dim); }
.bx-dlg td:first-child, .bx-dlg th:first-child { padding-left: 22px; color: var(--silver-mute); width: 1%; }
.bx-dlg td b { color: var(--silver-bright); font-weight: 400; display: block; }
.bx-dlg td .bx-mute { font-size: 11.5px; }
.bx-dlg tr.me td { background: rgba(247, 168, 203, .07); } .bx-dlg tr.me td b { color: #f7a8cb; }
.bx-mono { font-family: var(--mono); font-size: 12px; }
.bx-dlg-foot { padding: 12px 22px 18px; font-size: 12.5px; color: var(--silver-mute); }
.bx-dlg-foot a { color: #f7a8cb; }
.bx-dlg-empty { padding: 0 22px 22px; }
@media (max-width: 560px) {
  .bx-dlg th:nth-child(5), .bx-dlg td:nth-child(5) { display: none; }
  .bx-dlg td, .bx-dlg th { padding: 8px; }
}
.bx-dlg { margin: auto; inset: 0; }
.bx-dlg table { table-layout: fixed; }
.bx-dlg th:nth-child(1) { width: 52px; } .bx-dlg th:nth-child(2) { width: 30%; } .bx-dlg th:nth-child(4) { width: 92px; } .bx-dlg th:nth-child(5) { width: 110px; }
.bx-dlg td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .bx-dlg th:nth-child(2) { width: 38%; } .bx-dlg th:nth-child(4) { width: 70px; } }

/* Past raffles: clickable cards that open a results pop-up (2026-10-20) */
.bx-past2 { display: grid; gap: 10px; }
.bx-past-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr) auto; align-items: center; gap: 16px;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: #0b0b0d; border: 1px solid var(--black-5); border-radius: 12px; padding: 14px 16px;
  transition: border-color .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.bx-past-card:hover, .bx-past-card:focus-visible { border-color: #5c3346; background: #120d10; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.bx-past-card:active { transform: translateY(0); }
.bx-past-card.won { border-color: #5c3346; box-shadow: inset 3px 0 0 #ec8db8; }
.bx-past-main { display: grid; gap: 2px; min-width: 0; }
.bx-past-main b { color: var(--silver-bright); font-weight: 400; font-size: 17px; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-past-main .bx-mute { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-past-pool { display: grid; justify-items: center; padding: 6px 12px; border-radius: 10px; background: rgba(247, 168, 203, .07); border: 1px solid #3a2430; }
.bx-past-pool b { color: #f7a8cb; font-weight: 400; font-size: 18px; line-height: 1.1; }
.bx-past-pool span { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--silver-mute); }
.bx-past-win { display: grid; gap: 1px; min-width: 0; }
.bx-past-win .bx-mute { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }
.bx-past-card.won .bx-past-win .bx-mute { color: #f7a8cb; }
.bx-past-win b { color: var(--silver-dim); font-weight: 400; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-past-go { color: var(--silver-mute); font-size: 26px; line-height: 1; transition: transform .2s ease, color .2s ease; }
.bx-past-card:hover .bx-past-go { color: #f7a8cb; transform: translateX(3px); }
@media (max-width: 560px) {
  .bx-past-card { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .bx-past-win { grid-column: 1; } .bx-past-go { grid-row: 1; grid-column: 2; }
  .bx-past-pool { grid-row: 2; grid-column: 2; }
}

/* results pop-up */
.bx-dlg-head .bx-mute { font-size: 13px; margin-top: 2px; }
.bx-dlg-scroll { overflow: auto; min-height: 0; flex: 1; padding: 6px 22px 8px; }
.bx-res-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bx-res-stats div { background: #0b0b0d; border: 1px solid var(--black-5); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.bx-res-stats span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--silver-mute); }
.bx-res-stats b { font-size: 26px; font-weight: 400; color: var(--silver-bright); line-height: 1.1; }
.bx-res-stats b.pink { color: #f7a8cb; }
.bx-res-stats i { font-style: normal; font-size: 16px; }
.bx-res-rule { margin: 14px 0 4px; font-size: 14px; }
.bx-res-h { font-size: 15px; font-weight: 400; letter-spacing: .06em; color: var(--silver-bright); margin: 18px 0 10px; }
.bx-res-list { list-style: none; display: grid; gap: 6px; }
.bx-res-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #0b0b0d; border: 1px solid var(--black-4); }
.bx-res-pos { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--black-4); color: var(--silver-dim); font-size: 14px; }
.bx-res-list li.gold .bx-res-pos { background: linear-gradient(160deg, #ffe08a, #d9a531); color: #2a1d00; }
.bx-res-list li.silver .bx-res-pos { background: linear-gradient(160deg, #f1f1f5, #a9a9b3); color: #1b1b20; }
.bx-res-list li.bronze .bx-res-pos { background: linear-gradient(160deg, #f0b98a, #b8733e); color: #2a1404; }
.bx-res-list li.me { border-color: #5c3346; background: rgba(247, 168, 203, .07); }
.bx-res-name { display: grid; min-width: 0; }
.bx-res-name b { color: var(--silver-bright); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-res-name .bx-mute { font-size: 11.5px; }
.bx-res-prize { color: #f7a8cb; font-size: 16px; }
.bx-res-paid { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; border: 1px solid #5c4a22; color: #f2c46d; background: #1d170b; white-space: nowrap; }
.bx-res-paid.ok { border-color: #2d5a3a; color: #6fdc8c; background: #0f1d14; }
.bx-res-fair { display: grid; gap: 3px; }
.bx-res-fair dt { font-size: 12px; color: var(--silver-mute); }
.bx-res-fair dd { font-family: var(--mono); font-size: 11px; color: var(--silver-dim); overflow-wrap: anywhere; margin-bottom: 8px; }
.bx-dlg-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--black-5); }
.bx-dlg-back { background: none; border: 0; padding: 0 0 6px; color: #f7a8cb; font: inherit; font-size: 13px; cursor: pointer; display: block; }
@media (max-width: 560px) {
  .bx-res-stats b { font-size: 21px; }
  .bx-res-list li { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .bx-res-paid { grid-column: 2 / -1; justify-self: start; }
}
.bx-dlg-actions .btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--silver-bright); }
.bx-dlg-actions .btn-ghost:hover { background: var(--black-3); border-color: var(--silver-mute); color: var(--white); }

/* Sealed seed fingerprint, shown on open raffles before the draw (2026-10-20) */
.bx-seal { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  background: rgba(0, 0, 0, .35); border: 1px dashed #5c3346; border-radius: 12px; padding: 12px 14px; }
.bx-seal-ico { width: 30px; height: 30px; border-radius: 8px; background: rgba(247, 168, 203, .1); position: relative; }
.bx-seal-ico::before { content: ""; position: absolute; left: 9px; top: 6px; width: 12px; height: 9px; border: 2px solid #f7a8cb; border-bottom: 0; border-radius: 7px 7px 0 0; }
.bx-seal-ico::after { content: ""; position: absolute; left: 7px; top: 14px; width: 16px; height: 11px; border-radius: 3px; background: #f7a8cb; }
.bx-seal-txt { display: grid; gap: 2px; min-width: 0; }
.bx-seal-k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #f7a8cb; }
.bx-seal code { font-family: var(--mono); font-size: 12px; color: var(--silver-bright); overflow-wrap: anywhere; }
.bx-seal i { font-style: normal; font-size: 12.5px; color: var(--silver-mute); }
.bx-seal-btns { display: flex; gap: 6px; }
.bx-seal-btn { background: var(--black-4); border: 1px solid var(--black-5); color: var(--silver-bright); font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.bx-seal-btn:hover { border-color: #5c3346; color: #fff; }
.bx-seal.compact { padding: 8px 10px; gap: 10px; }
.bx-seal.compact .bx-seal-ico { width: 24px; height: 24px; transform: scale(.8); transform-origin: left center; }
.bx-seal.compact code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .bx-seal { grid-template-columns: auto minmax(0, 1fr); }
  .bx-seal-btns { grid-column: 1 / -1; }
}

/* padlock icon (img/lock.png) tinted pink */
.bx-seal-ico { display: grid; place-items: center; }
.bx-seal-ico::before { content: ""; position: static; width: 18px; height: 18px; border: 0; border-radius: 0; background: #f7a8cb;
  -webkit-mask: url("../img/lock.png") center / contain no-repeat; mask: url("../img/lock.png") center / contain no-repeat; }
.bx-seal-ico::after { content: none; display: none; }
.bx-seal.compact .bx-seal-ico::before { width: 16px; height: 16px; }

/* pop-up scrolling: thin dark scrollbars with a pink thumb, and soft fades at the scroll edges */
.bx-dlg-list, .bx-dlg-scroll { scrollbar-width: thin; scrollbar-color: #5c3346 transparent; overscroll-behavior: contain; scroll-behavior: smooth; }
.bx-dlg-list::-webkit-scrollbar, .bx-dlg-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.bx-dlg-list::-webkit-scrollbar-track, .bx-dlg-scroll::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.bx-dlg-list::-webkit-scrollbar-thumb, .bx-dlg-scroll::-webkit-scrollbar-thumb { background: #3a2430; border-radius: 8px; border: 2px solid var(--black-2); }
.bx-dlg-list::-webkit-scrollbar-thumb:hover, .bx-dlg-scroll::-webkit-scrollbar-thumb:hover { background: #ec8db8; }
.bx-dlg-list::-webkit-scrollbar-corner { background: transparent; }
.bx-dlg-list { border-top: 0; border-bottom: 0; margin: 0 12px; border-radius: 10px; background: #0b0b0d; box-shadow: inset 0 0 0 1px var(--black-5); }
.bx-dlg-list table thead th { background: #121214; }
.bx-dlg-list table thead th:first-child { border-top-left-radius: 10px; }
.bx-dlg-list table thead th:last-child { border-top-right-radius: 10px; }
.bx-dlg-list tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.bx-dlg-list tbody tr.me:hover td { background: rgba(247, 168, 203, .1); }
.bx-dlg-foot { padding-top: 14px; }

/* =====================  Tickets page (/tickets?raffle=…) (2026-10-20)  ===================== */
.tk-back { margin-bottom: 18px; color: #f7a8cb; }
.tk-back:hover { color: #fbc3dc; }
a.bx-seal-btn, a.bx-entries-btn { text-decoration: none; display: inline-flex; align-items: center; }
a.bx-entries-btn { text-decoration: underline; }
.tk-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.tk-stats .tk-status { font-size: 22px; }
.tk-mine { border-color: #5c3346 !important; }
.tk-seal { margin-bottom: 18px; background: var(--black-2); }
.tk-k2 { margin-top: 8px; color: var(--silver-mute); }
.tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 18px; align-items: start; }
.tk-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tk-search { flex: 1; max-width: 320px; min-width: 200px; background: #0b0b0d; border: 1px solid var(--black-5); border-radius: 10px; color: var(--silver-bright); padding: 9px 12px; font: inherit; font-size: 14px; }
.tk-search:focus { outline: 1px solid var(--silver-mute); }
.tk-table-wrap { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--black-5); overflow: hidden; }
.tk-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.tk-table th { position: sticky; top: var(--header-h); z-index: 1; background: #121214; text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--silver-mute); padding: 10px 12px; }
.tk-table th:nth-child(1) { width: 60px; } .tk-table th:nth-child(2) { width: 34%; } .tk-table th:nth-child(4) { width: 100px; } .tk-table th:nth-child(5) { width: 120px; }
.tk-table td { padding: 10px 12px; border-top: 1px solid var(--black-4); color: var(--silver-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.tk-table td b { color: var(--silver-bright); font-weight: 400; }
.tk-table td .bx-mute { display: block; font-size: 11.5px; }
.tk-table .tk-n { color: var(--silver-mute); padding-left: 16px; }
.tk-table tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.tk-table tr.me td { background: rgba(247, 168, 203, .07); }
.tk-table tr.me td b { color: #f7a8cb; }
.tk-won { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #2a1d00; background: linear-gradient(160deg, #ffe08a, #d9a531); padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: 1px; }
.tk-none { padding: 14px 4px 0; }
.tk-players { position: sticky; top: calc(var(--header-h) + 16px); }
.tk-tally { list-style: none; display: grid; gap: 10px; max-height: 60vh; overflow: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #5c3346 transparent; }
.tk-tally li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
.tk-p { display: grid; min-width: 0; }
.tk-p b { color: var(--silver-bright); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-p .bx-mute, .tk-c .bx-mute { font-size: 11.5px; }
.tk-c { display: grid; justify-items: end; }
.tk-c b { color: var(--silver-bright); font-weight: 400; font-size: 17px; line-height: 1.1; }
.tk-bar-bg { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--black-4); overflow: hidden; }
.tk-bar-bg span { display: block; height: 100%; background: linear-gradient(90deg, #ec8db8, #f7a8cb); border-radius: 2px; }
.tk-tally li.me .tk-p b { color: #f7a8cb; }
@media (max-width: 900px) {
  .tk-grid { grid-template-columns: 1fr; }
  .tk-players { position: static; order: -1; }
  .tk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tk-table th:nth-child(5), .tk-table td:nth-child(5) { display: none; }
  .tk-table th:nth-child(1) { width: 40px; } .tk-table th:nth-child(2) { width: 42%; } .tk-table th:nth-child(4) { width: 72px; }
  .tk-table td, .tk-table th { padding: 9px 8px; }
  .tk-search { max-width: none; }
}
/* tickets table: clip the rounded box without making it its own scroll area (keeps the sticky headings at the top) */
.tk-table-wrap { overflow: clip; }
.tk-table th:nth-child(2) { width: 30%; }
.tk-table th:nth-child(3), .tk-table td:nth-child(3) { min-width: 170px; }
@media (max-width: 1180px) and (min-width: 901px) {
  .tk-table th:nth-child(5), .tk-table td:nth-child(5) { display: none; }
}
@media (max-width: 760px) {
  .tk-table th:nth-child(5), .tk-table td:nth-child(5) { display: none; }
}
/* the site header scrolls away, so stick to the very top */
.tk-table th { top: 0; }
.tk-players { top: 16px; }
/* tickets page: 20 at a time */
.tk-more { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.tk-more .bx-mute { font-size: 13px; }
.tk-more .btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--silver-bright); }
.tk-more .btn-ghost:hover { background: var(--black-3); border-color: #5c3346; color: var(--white); }

/* menu bars centred under each word (desktop; the phone menu keeps them on the right of the row) */
@media (min-width: 761px) {
  .nav-bars { left: 0; right: 0; justify-content: center; }
}

/* Roadmap page centred: title, description and the list of steps */
.rm-head { text-align: center; }
.rm-head .lead { margin-left: auto; margin-right: auto; }
.roadmap { margin-left: auto; margin-right: auto; }
/* Roadmap's four bars start under the R (Home and Games stay centred) */
@media (min-width: 761px) { .nav a[href="/roadmap"] .nav-bars { justify-content: flex-start; } }
/* all menu bars start under the first letter */
@media (min-width: 761px) { .nav-bars { justify-content: flex-start; } }

/* =====================  Roadmap timeline v2 (2026-10-20)  =====================
   Line on the left joining the steps. Pink = real progress, up to the step we're on now (.now),
   through finished ones (.done). It draws down once when the timeline comes into view (.rm-in). */
.roadmap.rm-timeline { --rail: 22px; --pad: 66px; --node: 34px; --top: 22px; position: relative; padding-left: var(--pad); gap: 16px; }
.rm-timeline::before, .rm-timeline::after {
  content: ""; position: absolute; left: calc(var(--rail) - 1px); top: var(--rm-start, 40px); width: 2px; border-radius: 2px; pointer-events: none;
}
.rm-timeline::before { height: var(--rm-len, 0px); background: #1f1f24; }
.rm-timeline::after {
  height: 0; background: linear-gradient(to bottom, #fbc3dc, #ec8db8);
  box-shadow: 0 0 10px rgba(236, 141, 184, .45);
  transition: height 1.4s cubic-bezier(.65, 0, .35, 1);
}
.rm-timeline.rm-in::after { height: var(--rm-reach, 0px); }

/* cards: no number column any more (the number lives on the node) */
.rm-timeline .rm-item { grid-template-columns: minmax(0, 1fr) auto; padding: 22px 24px; box-shadow: none; transition: border-color .4s ease, box-shadow .4s ease, opacity .4s ease; }
.rm-timeline .rm-item:not(.now):not(.done) { opacity: .72; }
.rm-timeline .rm-item:not(.now):not(.done):hover { opacity: 1; }

/* nodes */
.rm-timeline .rm-num {
  position: absolute; left: calc(var(--rail) - var(--pad) - var(--node) / 2); top: var(--top);
  width: var(--node); height: var(--node); padding: 0; border-radius: 50%; display: grid; place-items: center; z-index: 1;
  font-family: var(--mono); font-size: 0; font-weight: 700;
  background: var(--black); border: 2px solid #2a2a2e; color: var(--silver-mute);
  transition: background .4s ease var(--rm-delay, 0s), border-color .4s ease var(--rm-delay, 0s), color .4s ease var(--rm-delay, 0s), box-shadow .4s ease var(--rm-delay, 0s);
}
.rm-timeline .rm-num::after { content: attr(data-n); font-size: 12px; letter-spacing: .02em; }
/* finished steps: solid pink with a tick */
.rm-timeline.rm-in .rm-item.done .rm-num { background: #ec8db8; border-color: #f7a8cb; color: #2a1020; }
.rm-timeline.rm-in .rm-item.done .rm-num::after { content: "✓"; font-size: 15px; }
/* the step we're on: pink ring, number, slow soft pulse */
.rm-timeline.rm-in .rm-item.now .rm-num { background: #1d0f16; border-color: #ec8db8; color: #f7a8cb; box-shadow: 0 0 14px rgba(236, 141, 184, .4); }
.rm-timeline .rm-item.now .rm-num::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #ec8db8; opacity: 0;
}
.rm-timeline.rm-in .rm-item.now .rm-num::before { animation: rm-ring 2.6s ease-out calc(var(--rm-delay, 0s) + .4s) infinite; }
@keyframes rm-ring { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.75); opacity: 0; } }
.rm-timeline.rm-in .rm-item.now { border-color: #4a2a3a; box-shadow: inset 2px 0 0 #ec8db8, 0 16px 40px rgba(0, 0, 0, .3); }
.rm-timeline .rm-item.now { transition-delay: var(--rm-delay, 0s); }

/* status tags match the nodes */
.rm-timeline .rm-item.now .rm-state { background: #f7a8cb; border-color: #f7a8cb; color: #2a1020; }
.rm-timeline .rm-item.done .rm-state { background: #0f1d14; border-color: #2d5a3a; color: #6fdc8c; }

@media (max-width: 560px) {
  .roadmap.rm-timeline { --rail: 14px; --pad: 42px; --node: 28px; --top: 18px; }
  .rm-timeline .rm-item { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
  .rm-timeline .rm-state { grid-column: 1; justify-self: start; }
  .rm-timeline .rm-num::after { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-timeline::after { transition: none; }
  .rm-timeline .rm-item.now .rm-num::before { animation: none !important; }
}
/* the track fades in from above the first step */
.rm-timeline::before { background: linear-gradient(to bottom, transparent, #1f1f24 90px); }
.rm-timeline::after { background: linear-gradient(to bottom, rgba(251, 195, 220, 0), #fbc3dc 60px, #ec8db8); }

/* reached circles fill up with pink (rising from the bottom) as the line arrives; no pulse */
.rm-timeline .rm-num { overflow: hidden; isolation: isolate; }
.rm-timeline .rm-item .rm-num::before, .rm-timeline.rm-in .rm-item.now .rm-num::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0; opacity: 1; transform: none; z-index: -1;
  background: linear-gradient(to top, #ec8db8, #f7a8cb);
  clip-path: inset(100% 0 0 0); animation: none;
  transition: clip-path .6s cubic-bezier(.4, 0, .2, 1) calc(var(--rm-delay, 0s) - .15s);
}
.rm-timeline.rm-in .rm-item.now .rm-num::before, .rm-timeline.rm-in .rm-item.done .rm-num::before { clip-path: inset(0 0 0 0); }
.rm-timeline.rm-in .rm-item.now .rm-num, .rm-timeline.rm-in .rm-item.done .rm-num {
  background: var(--black); border-color: #f7a8cb; color: #2a1020; box-shadow: 0 0 14px rgba(236, 141, 184, .35);
}
@media (prefers-reduced-motion: reduce) { .rm-timeline .rm-item .rm-num::before { transition: none; } }

/* nodes: no numbers, a clean ring that fills completely with pink when the line reaches it */
.roadmap.rm-timeline { --node: 22px; --top: 26px; }
.rm-timeline .rm-num::after, .rm-timeline.rm-in .rm-item.done .rm-num::after { content: none; }
.rm-timeline .rm-num { background: var(--black); border: 2px solid #34343a; box-shadow: none; overflow: visible; }
.rm-timeline .rm-item .rm-num::before, .rm-timeline.rm-in .rm-item.now .rm-num::before { inset: -2px; background: #f7a8cb; }
.rm-timeline.rm-in .rm-item.now .rm-num, .rm-timeline.rm-in .rm-item.done .rm-num {
  background: var(--black); border-color: #f7a8cb; box-shadow: 0 0 0 4px rgba(247, 168, 203, .12), 0 0 16px rgba(236, 141, 184, .45);
  transition: box-shadow .4s ease calc(var(--rm-delay, 0s) + .3s), border-color .3s ease var(--rm-delay, 0s);
}
@media (max-width: 560px) { .roadmap.rm-timeline { --node: 18px; --top: 22px; } }

/* one pink for the line and the filled circles, no glow anywhere */
.rm-timeline { --rm-pink: #f7a8cb; }
.rm-timeline::after { background: linear-gradient(to bottom, rgba(247, 168, 203, 0), var(--rm-pink) 60px); box-shadow: none; }
.rm-timeline .rm-item .rm-num::before, .rm-timeline.rm-in .rm-item.now .rm-num::before { background: var(--rm-pink); }
.rm-timeline.rm-in .rm-item.now .rm-num, .rm-timeline.rm-in .rm-item.done .rm-num { border-color: var(--rm-pink); box-shadow: none; }
/* the card border shifts the circle by 1px: line it up exactly on the line */
.rm-timeline .rm-num { left: calc(var(--rail) - var(--pad) - var(--node) / 2 - 1px); }
/* circles centred on each card's height, and they fill from top to bottom */
.rm-timeline .rm-num { top: calc(50% - var(--node) / 2); }
.rm-timeline .rm-item .rm-num::before, .rm-timeline.rm-in .rm-item.now .rm-num::before { clip-path: inset(0 0 100% 0); }
.rm-timeline.rm-in .rm-item.now .rm-num::before, .rm-timeline.rm-in .rm-item.done .rm-num::before { clip-path: inset(0 0 0 0); }
/* the fill starts when the line touches the top of the circle (timings from site.js) */
.rm-timeline .rm-item .rm-num::before, .rm-timeline.rm-in .rm-item.now .rm-num::before {
  transition: clip-path var(--rm-fill-dur, .3s) linear var(--rm-delay, 0s);
}
.rm-timeline.rm-in .rm-item.now .rm-num, .rm-timeline.rm-in .rm-item.done .rm-num { transition: border-color .15s ease var(--rm-delay, 0s); }

/* down arrow at the very bottom of the line, centred on it */
.roadmap.rm-timeline { padding-bottom: 72px; }
.rm-arrow {
  position: absolute; bottom: 14px; left: calc(var(--rail) - 8px); width: 16px; height: 16px; color: #3a3a40;
  display: grid; place-items: center; pointer-events: none;
}
.rm-arrow svg { display: block; }
.rm-arrow { width: 20px; height: 20px; left: calc(var(--rail) - 10px); bottom: 12px; color: var(--silver-mute); }
.rm-arrow svg { width: 20px; height: 20px; }

/* ---------- Homepage intro line under "Our games" (2026-10-23) ---------- */
.section-lead { margin-top: 14px; max-width: 34em; color: var(--silver-dim); font-size: 15px; line-height: 1.6; }

/* cache refresh 2026-10-23 */