.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap; /* prevent reflow due to wrap on narrow view */
  flex: 0 0 auto;
}

/* Lightbox overlay: avoid covering the native scrollbar zone on desktop */
@media (pointer: fine) and (hover: hover) {
  .lightbox { right: var(--sb-size); }
}
@media (pointer: fine) and (hover: hover) {
  /* Header leaves room for the native scrollbar area so nothing can overlap it visually */
  .site-header { right: 0; padding-right: var(--sb-size); }
}

/* Waves background remains fixed behind content; on desktop clip the right edge so it doesn't cover the scrollbar zone */
@media (pointer: fine) and (hover: hover) {
  .waves-bg { right: 0; clip-path: inset(0 var(--sb-size) 0 0); -webkit-clip-path: inset(0 var(--sb-size) 0 0); }
}

/* Desktop/Tablet refinements: increase spacing */
@media (width > 640px) {
  :root { --header-h: 68px; }
  .nav a { font-size: 1rem; }
  .brand { gap: 12px; }
  .site-header .brand span { font-size: 1.05rem; }
}
/* Fonts & Reset */
:root {
  --bg-1: #0b0b1a;
  --bg-2: #11112a;
  --bg-3: #1a1a3a;
  --grad-a: #6f3aff;
  --grad-b: #ff3a75;
  --grad-c: #2dd4bf;
  --grad-d: #f59e0b;
  --text: #e8e8fb;
  --muted: #a0a0c0;
  --card: #15152a;
  --card-2: #1d1d36;
  --stroke: #2a2a4d;
  --primary: #7c3aed;
  --shadow: 0 10px 30px rgb(0 0 0 / 35%);
  /* Fixed header heights */
  --header-h: 64px;
  /* Scrollbar theme (dark translucent glass) */
  --sb-size: 16px;
  --sb-thumb: rgba(70, 70, 90, 0.92);           /* dark gray, highly visible */
  --sb-thumb-hover: rgba(90, 90, 120, 0.98);    /* slightly brighter on hover */
  --sb-track: rgba(12, 12, 20, 0.30);           /* dark track for contrast */
  /* Unified vertical spacing between sections */
  --space-section: 36px;
  /* Amount of the next section to peek under the hero */
  --peek-next: 28dvh;
  /* Spacing scale */
  --space-xs: 6px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  /* Gallery row height */
  --shots-h: 360px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* Prevent any horizontal scrolling on all browsers; allow the ROOT to scroll vertically */
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; touch-action: manipulation; }
/* Let the UA manage vertical scrolling on the root so iOS Safari can hide URL bar */
html, body { overflow-y: auto; scrollbar-gutter: auto; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% 0%, #12122b, #0a0a18),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  overflow-x: hidden;
  user-select: text; /* allow selecting text for better UX/accessibility */
  /* Space for fixed header */
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  min-height: 100dvh;
}

/* Tiny bottom spacer to help iOS Safari collapse the URL bar on scroll */
.ios-urlbar-poke {
  height: calc(env(safe-area-inset-bottom, 0px) + 1px);
  width: 100%;
  pointer-events: none;
}

/* Ensure sections never create their own vertical scrollbars */
main, .hero, .section, .site-footer { overflow-y: visible; }

/* Ensure all content sits above the fixed waves background without altering waves' z-index */
main, .hero, .section, .site-footer {
  position: relative;
  z-index: 1;
}

img {
  max-width: 100%;
  display: block;
}

/* Scrollbars (Chrome/WebKit) — style both html and body to cover all engines */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: var(--sb-track); }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
  border-radius: 999px;
  border: 0; /* keep thumb as thick as possible for visibility */
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background-color: var(--sb-thumb-hover); }
html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner { background: var(--sb-track); }
/* Firefox */
html, body { scrollbar-color: var(--sb-thumb) var(--sb-track); }

.container {
  width: min(1120px, 92%);
  margin-inline: auto;
}

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto 0; /* top:0; left:0; right:0 */
  z-index: 1000;
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  /* Consistent semi-opaque background so the header never visually disappears */
  background: rgba(10, 10, 20, 0.70);
  border-bottom: 1px solid rgb(255 255 255 / 6%);
  box-shadow: 0 6px 24px rgb(0 0 0 / 25%);
  /* Improve stability: avoid GPU transform to prevent subpixel drift */
  will-change: auto;
  transform: none;
  contain: layout paint;
  height: var(--header-h);
  padding-top: env(safe-area-inset-top, 0px);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  /* Desktop-first: center like main content */
  padding: 0 20px;
  margin-inline: auto;
  width: min(1120px, 92%);
}

/* Reserve space for header logo to avoid layout shift after image loads */
.site-header .brand img {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: block;
}
.site-header .brand span { white-space: nowrap; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .4px;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.nav a {
  color: var(--text);
  opacity: 90%;
  text-decoration: none;
  margin-left: 0; /* use flex gap on .nav to avoid cumulative margin shifts */
  font-weight: 600; /* keep weight stable to avoid width changes on hover */
}

/* Ensure footer link specificity order: keep footer link style before .nav a:hover */
.site-footer a {
  color: var(--text);
  opacity: 80%;
  text-decoration: none;
}

.nav a:hover {
  opacity: 100%;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  border-radius: 14px;
  /* Replace border with inset stroke to avoid gradient seams on corners */
  border: 0; /* physical borders can show faint seams at rounded edges */
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 10px 25px rgb(0 0 0 / 25%);
  padding: .7rem 1.1rem;
  color: var(--text);
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  backdrop-filter: saturate(1.2);
  /* Prevent background from painting under the stroke and leaking at edges */
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  /* Avoid corner artifacts on WebKit and with backdrop-filter */
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.btn--sm {
  padding: .5rem .8rem;
  border-radius: 12px;
}

.btn--lg {
  padding: 1rem 1.2rem;
  font-weight: 600;
}

.btn--xl {
  padding: 1.1rem 1.6rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.btn--primary {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  box-shadow: 0 10px 25px rgb(124 58 237 / 35%);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 35px rgb(124 58 237 / 42%);
}

.btn--ghost {
  background: rgb(255 255 255 / 6%);
}

.btn--ghost:hover {
  background: rgb(255 255 255 / 10%);
}

/* Hero */
.hero {
  position: relative;
  /* Equal padding top/bottom */
  padding: 40px 0;
  text-align: center;
  /* Center the inner container vertically */
  display: flex;
  align-items: center;
  /* Let a bit of the next section be visible */
  min-height: calc(100dvh - var(--peek-next));
  /* Unified background like .site-footer */
  background: rgb(0 0 0 / 15%);
}

.hero h1 {
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.05;
  margin: 0 0 12px;
}

/* Place base .sun-title before the contextual .hero .sun-title to avoid descending-specificity */
.sun-title {
  /* shimmering sun text */
  background: linear-gradient(120deg, #fff7cc 0%, #ffd27a 20%, #ff9a5a 45%, #ffd27a 80%, #fff7cc 100%);
  background-size: 200% 200%;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 8px rgb(255 198 120 / 10%),
    0 0 18px rgb(255 140 60 / 8%),
    0 0 36px rgb(255 90 40 / 4%);
  animation: sun-shine 36s ease-in-out infinite, sun-glow 24s ease-in-out infinite;
}

.hero .sun-title {
  font-size: clamp(40px, 6.4vw, 88px);
  font-weight: 800;
  letter-spacing: .5px;
  position: relative;
}

.sun-title .accent {
  /* Brighter, higher-contrast warm gradient for the word 'Лаунчер' */
  position: relative;
  z-index: 1;
  text-shadow:
    0 0 12px rgb(255 210 120 / 18%),
    0 0 28px rgb(255 150 60 / 14%),
    0 0 60px rgb(255 120 50 / 10%);
  background: linear-gradient(120deg, #fffbe6 0%, #ffe08a 18%, #ffb347 42%, #ff8a00 58%, #ffd36b 82%, #fffbe6 100%);
  background-size: 220% 220%;
  background-clip: text;
  color: transparent;
}

.sun-title .accent::before{
  /* Rotating radial rays */
  content:""; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width:clamp(260px, 55vw, 820px); height:clamp(260px, 55vw, 820px); border-radius:50%;
  background: conic-gradient(
    from 0deg,
    rgb(255 220 130 / 0%) 0deg 8deg, rgb(255 220 130 / 60%) 8deg 10deg,
    rgb(255 220 130 / 0%) 10deg 20deg, rgb(255 160 90 / 50%) 20deg 22deg,
    rgb(255 220 130 / 0%) 22deg 35deg, rgb(255 200 110 / 50%) 35deg 37deg,
    rgb(255 220 130 / 0%) 37deg 52deg, rgb(255 200 110 / 46%) 52deg 54deg,
    rgb(255 220 130 / 0%) 54deg 70deg, rgb(255 160 90 / 52%) 70deg 72deg,
    rgb(255 220 130 / 0%) 72deg 90deg, rgb(255 200 110 / 46%) 90deg 92deg,
    rgb(255 220 130 / 0%) 92deg 120deg, rgb(255 200 110 / 50%) 120deg 122deg,
    rgb(255 220 130 / 0%) 122deg 150deg, rgb(255 180 100 / 50%) 150deg 152deg,
    rgb(255 220 130 / 0%) 152deg 180deg, rgb(255 200 110 / 50%) 180deg 182deg,
    rgb(255 220 130 / 0%) 182deg 210deg, rgb(255 160 90 / 52%) 210deg 212deg,
    rgb(255 220 130 / 0%) 212deg 240deg, rgb(255 200 110 / 50%) 240deg 242deg,
    rgb(255 220 130 / 0%) 242deg 270deg, rgb(255 180 100 / 52%) 270deg 272deg,
    rgb(255 220 130 / 0%) 272deg 300deg, rgb(255 200 110 / 50%) 300deg 302deg,
    rgb(255 220 130 / 0%) 302deg 330deg, rgb(255 160 90 / 52%) 330deg 332deg,
    rgb(255 220 130 / 0%) 332deg 360deg
  );
  filter: blur(20px) brightness(0.70);
  mask-image: radial-gradient(
    circle at 50% 50%,
    rgb(0 0 0 / 100%) 0%,
    rgb(0 0 0 / 85%) 55%,
    rgb(0 0 0 / 40%) 70%,
    rgb(0 0 0 / 0%) 100%
  );
  opacity: 25%;
  pointer-events: none;
  z-index: -1;
  animation: rays-rot 72s linear infinite, rays-pulse 18s ease-in-out infinite;
}

/* (moved below base styles) Mobile rounding override is defined later */

.sun-title .accent::after {
  /* Outer halo for extra bloom */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(240px, 45vw, 640px);
  height: clamp(240px, 45vw, 640px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(255 210 120 / 24%) 0%,
    rgb(255 150 60 / 18%) 35%,
    rgb(255 120 50 / 8%) 60%,
    rgb(0 0 0 / 0%) 70%
  );
  filter: blur(16px);
  opacity: 30%;
  z-index: -2;
  pointer-events: none;
  animation: halo-breathe 32s ease-in-out infinite;
}

@keyframes rays-rot{ to{ transform: translate(-50%,-50%) rotate(360deg); } }

@keyframes rays-pulse{
  0%,100%{
    filter: blur(16px) brightness(1.0);
    opacity: 85%;
  }

  50%{
    filter: blur(22px) brightness(1.25);
    opacity: 100%;
  }
}

@keyframes halo-breathe{
  0%,100%{
    filter: blur(20px) brightness(1.0);
    opacity: 78%;
  }

  50%{
    filter: blur(28px) brightness(1.25);
    opacity: 98%;
  }
}

.sun-title::after {
  content: "";
  position: absolute;
  inset: -10% -6%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgb(255 210 120 / 28%),
    rgb(255 140 60 / 18%),
    rgb(255 120 60 / 8%) 60%,
    transparent 70%
  );
  filter: blur(12px);
}

@keyframes sun-shine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes sun-glow {
  0%, 100% { text-shadow: 0 0 14px rgb(255 198 120 / 30%), 0 0 34px rgb(255 120 60 / 20%); }
  50% { text-shadow: 0 0 26px rgb(255 210 140 / 45%), 0 0 66px rgb(255 120 60 / 32%); }
}

.hero h1 .accent {
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c));
  background-clip: text;
  color: transparent;
}

.hero p {
  /* Slightly brighter than generic muted to feel part of the hero */
  color: rgb(220 224 255 / 86%);
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: .2px;
  text-wrap: balance;
  margin: 6px auto var(--space-m);
  width: min(680px, 92%);
}

.hero .cta {
  display: grid;
  grid-template-columns: repeat(2, auto); /* auto-sized buttons */
  gap: var(--space-m);
  justify-content: center; /* center the pair */
  align-items: center;
  margin-top: var(--space-xl); /* add space above buttons */
}
.hero .cta .btn {
  width: auto;         /* do not stretch */
  min-width: 180px;    /* keep equal visual width */
}
@media (max-width: 640px) {
  .hero .cta .btn { justify-self: center; min-width: 150px; }
  .hero .cta .btn.btn--lg { padding: .8rem .95rem; font-size: .95rem; }
}

/* Brand badge under hero title */
.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 14px;
  padding: 10px 14px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 16px;
  background: rgb(255 255 255 / 7%);
  backdrop-filter: blur(8px) saturate(1.25);
  box-shadow: 0 10px 24px rgb(0 0 0 / 25%);
}

.brand-badge img {
  width: 28px;
  height: 28px;
}

.brand-badge .name {
  font-weight: 900;
  letter-spacing: .4px;
  font-size: 1.05rem;
}

.brand-badge .pill {
  font-size: 12px;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 16%);
  color: var(--muted);
}

/* Mobile: make the brand-badge more compact */
@media (max-width: 640px) {
  .brand-badge { gap: 8px; padding: 6px 10px; border-radius: 12px; }
  .brand-badge img { width: 22px; height: 22px; }
  .brand-badge .name { font-size: .95rem; }
  .brand-badge .pill { font-size: 11px; padding: .18rem .5rem; }
}

/* Sections */
.section {
  padding: var(--space-section) 0;
  /* Unified background like .site-footer */
  background: rgb(0 0 0 / 15%);
}

/* Prevent anchor overlap under fixed header */
.section, .hero { scroll-margin-top: calc(var(--header-h) + 6px); }

/* Ensure the download CTA section is fully rendered even when offscreen so
   anchor navigation to #download shows content immediately without waiting
   for rendering or image lazy-load side effects. */

.section--alt {
  /* Use unified background */
  background: rgb(0 0 0 / 15%);
}

/* No special-case spacing overrides; keep unified spacing */

.section--cta {
  text-align: center;
  /* Use unified background; keep the subtle border */
  background: rgb(0 0 0 / 28%);
  /* Subtle separation from animated waves without touching their z-index */
  backdrop-filter: blur(4px) saturate(1.05);
  -webkit-backdrop-filter: blur(4px) saturate(1.05);
  border-block: 1px solid rgb(124 58 237 / 15%);
}

/* Removed legacy top padding; unified spacing applies */

.section h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  margin: 0 0 var(--space-l);
}

/* Improve readability of the download CTA texts over dynamic backgrounds */
#download.section h2 { 
  text-shadow: 0 2px 10px rgb(0 0 0 / 55%);
}
#download.section p { 
  text-shadow: 0 1px 8px rgb(0 0 0 / 45%);
}
#download.section .muted {
  color: rgb(220 224 255 / 86%);
}

.muted {
  color: var(--muted);
}

/* (removed) Screenshots gallery styles were here */

/* Games grid */
.games-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-l);
}

.game-card {
  grid-column: span 4;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--stroke);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
  transition: transform .2s ease, box-shadow .2s ease;
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 35px rgb(0 0 0 / 45%);
}

/* Disable hover lift for the full-bleed coming card */
.game-card .game-thumb {
  aspect-ratio: 920/430;
  background: #0e0e1e;
  overflow: hidden;
  position: relative;
}

.game-card .game-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.06);
}

/* overlay frame + subtle inner shadow to improve readability */
.game-card .game-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(0 0 0 / 22%), rgb(0 0 0 / 0%) 28%, rgb(0 0 0 / 0%) 72%, rgb(0 0 0 / 28%));
}

.game-card .game-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%), inset 0 -30px 40px -20px rgb(0 0 0 / 35%), inset 0 30px 40px -20px rgb(0 0 0 / 25%);
}

.game-card .game-body {
  padding: 16px;
}

.game-card h3 {
  margin: 0 0 6px;
  font-size: 20px;
}

.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  font-size: 12px;
  padding: .28rem .5rem;
  border-radius: 100px;
  border: 1px solid rgb(255 255 255 / 14%);
  background: rgb(255 255 255 / 5%);
}

/* Tag category tones */
.tag--mode {
  border-color: rgb(34 211 238 / 35%);
  background: rgb(34 211 238 / 12%);
  color: #c8f5fb;
}

.tag--genre {
  border-color: rgb(167 139 250 / 35%);
  background: rgb(167 139 250 / 12%);
  color: #ece7ff;
}

.tag--persp {
  border-color: rgb(59 130 246 / 35%);
  background: rgb(59 130 246 / 12%);
  color: #dbe9ff;
}

.tag--tone {
  border-color: rgb(244 114 182 / 35%);
  background: rgb(244 114 182 / 12%);
  color: #ffe5f4;
}

.tag--mech {
  border-color: rgb(251 191 36 / 35%);
  background: rgb(251 191 36 / 12%);
  color: #fff3cf;
}

/* Casino-like reels for coming card */
.game-card.coming {
  position: relative;
}

.game-card.coming.full {
  grid-column: 1 / -1;
  position: relative;
  border-radius: 24px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgb(21 21 42 / 70%), rgb(15 15 30 / 55%)) padding-box,
    linear-gradient(135deg, rgb(124 58 237 / 22%), rgb(34 211 238 / 16%), rgb(244 114 182 / 18%)) border-box;
  margin-bottom: 0;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

.game-card.coming .game-coming {
  padding: 10px 12px 12px; /* tighter to give reels more space */
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
}

/* Reels title placed as a standalone grid item inside .games-grid */
.games-grid > .reels-title {
  grid-column: 1 / -1;              /* span full grid width */
  margin: var(--space-xl) 0 var(--space-m); /* add more space above title after games */
  font-size: clamp(20px, 2.6vw, 30px); /* smaller than main section h2 */
  font-weight: 800;
  letter-spacing: .2px;
  opacity: .92;
}

.reels-head {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  opacity: 90%;
}

.reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  height: 240px; /* larger viewport for reels */
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%) 12%, rgb(0 0 0 / 100%) 88%, rgb(0 0 0 / 0%));
  position: relative;
  isolation: isolate;
  padding: 8px 6px 6px 10px; /* top and left padding */
}

.reel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 14px;
  background:
    linear-gradient(180deg, #1b1b34, #141428);
  box-shadow:
    inset 0 12px 20px rgb(0 0 0 / 18%),
    inset 0 -12px 20px rgb(0 0 0 / 22%),
    0 6px 14px rgb(0 0 0 / 25%);
}

.reel-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 0; /* avoid compounding with .slot margins; prevents visible holes when rounding */
  padding: 0; /* remove padding to make loop seamless */
  will-change: auto;
  backface-visibility: hidden;
  contain: layout paint;
}
.reels.spinning .reel-track{ will-change: transform; }

.slot {
  display: grid;
  place-items: center;
  min-height: 56px;
  border-radius: 14px;
  color: rgb(238 241 255 / 82%);
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: uppercase;
  font-size: clamp(9px, 1.1vw, 11px); /* auto-size across widths */
  line-height: 1.1;
  text-align: center;
  padding: 0 14px; /* reserve room for side lamps so text doesn't collide */
  word-break: keep-all;           /* keep words intact */
  overflow-wrap: break-word;
  margin: 4px; /* outer spacing around each slot */
  /* Keep text inside the card at all times */
  overflow: hidden;
  background: linear-gradient(135deg, rgb(124 58 237 / 22%), rgb(244 63 94 / 22%));
  border: 1px solid rgb(255 255 255 / 6%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 22%);
  position: relative;
  z-index: 1; /* keep content above sparkles */
}

.slot.alt { background: linear-gradient(135deg, rgb(34 211 238 / 20%), rgb(167 139 250 / 20%)); }

.slot.dim {
  background: linear-gradient(135deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 6%));
  color: rgb(200 200 220 / 75%);
  font-weight: 600;
  box-shadow: 0 1px 6px rgb(0 0 0 / 14%);
}

/* Active centered slot highlight after spin: cross-browser animated gradient BORDER only */
.slot.slot--active {
  /* clearer emphasis so the winning card is obvious */
  border: 2px solid transparent; /* only ::after draws the visible ring */
  position: relative;
  /* remove outer ring-like shadow; keep only elevation */
  box-shadow: 0 12px 28px rgb(0 0 0 / 42%);
}

/* One implementation for all browsers: ::after gradient ring with masks */
.slot.slot--active::after {
  content: "";
  position: absolute;
  inset: 0; /* align to border box */
  border-radius: inherit; /* exact same rounding as slot */
  padding: 3px; /* slimmer ring to avoid inner-edge doubling */
  background: linear-gradient(135deg, #8b5cf6, #f472b6, #a78bfa, #ec4899, #22d3ee);
  background-size: 320% 320%;
  background-position: 0% 50%;
  /* Mask out the center so only the ring is visible */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderFlow 2.0s ease-in-out infinite, borderGlow 1.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1; /* above slot background and lamps (lamps are z-index:-1) */
}

@keyframes borderFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes borderGlow {
  0%,100% { filter: drop-shadow(0 0 22px rgba(139,92,246,.85)) drop-shadow(0 0 42px rgba(236,72,153,.75)); }
  50%     { filter: drop-shadow(0 0 30px rgba(139,92,246,.95)) drop-shadow(0 0 54px rgba(236,72,153,.90)); }
}

/* Removed border-image workaround to avoid Safari inconsistencies */

@keyframes pulseActive{
  0%,100%{ box-shadow: 0 0 0 2px rgb(255 255 255 / 16%), 0 0 22px rgb(124 58 237 / 30%), 0 8px 18px rgb(0 0 0 / 35%); }
  50%    { box-shadow: 0 0 0 3px rgb(255 255 255 / 22%), 0 0 34px rgb(244 114 182 / 45%), 0 10px 22px rgb(0 0 0 / 45%); }
}

/* Colorful dot markers per column for a more playful casino look */
/* Lamps: visible by default on desktop (including active slots), hidden on mobile via media query below.
   Render BOTH lamps via a single ::before that spans the slot; ::after stays reserved for the active ring. */
.reel.r1 { --lampL1:#7c3aed; --lampL2:#22d3ee; --lampR1:#22d3ee; --lampR2:#7c3aed; }
.reel.r2 { --lampL1:#22d3ee; --lampL2:#60a5fa; --lampR1:#60a5fa; --lampR2:#22d3ee; }
.reel.r3 { --lampL1:#f472b6; --lampL2:#f59e0b; --lampR1:#f59e0b; --lampR2:#f472b6; }
.reels { --lamp-offset: 9px; --lampL-size: 14px; --lampR-size: 14px; }
.reels .slot::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* Clean solid dots without any glow/shine */
  background-image:
    radial-gradient(circle at center, var(--lampL1) 0 50%, transparent 51%),
    radial-gradient(circle at center, var(--lampR1) 0 50%, transparent 51%);
  background-repeat: no-repeat, no-repeat;
  background-position:
    var(--lamp-offset) 50%,
    calc(100% - var(--lamp-offset)) 50%;
  background-size:
    var(--lampL-size) var(--lampL-size),
    var(--lampR-size) var(--lampR-size);
  background-origin: padding-box, padding-box;
  background-clip: padding-box, padding-box;
  animation: none;
  filter: none;
  border-radius: inherit; /* clip within rounded slot */
}

/* No idle twinkle when glow disabled */
@keyframes lampTwinkle{ 0%{opacity:1} 100%{opacity:1} }
/* During spinning we tone down idle twinkle a bit */
.reels.spinning .slot::before{ animation: none; opacity: 1; }

/* During the winning moment, blink only the active (centered) row lamps brightly for 5s (controlled by JS) */
.reels.lamps-blink .slot--active::before {
  animation: blink-strong .6s ease-in-out infinite;
  filter: brightness(1.8) saturate(1.4);
}
@keyframes lampBlink{ 0%{opacity:1} 100%{opacity:1} }

@keyframes blink-strong {
  0%   { filter: brightness(1.8) saturate(1.4); }
  50%  { filter: brightness(0.6) saturate(0.9); }
  100% { filter: brightness(1.8) saturate(1.4); }
}

/* Keep lamps visible on active slot; ring sits above via z-index */

/* Mobile: hide all lamps entirely */
@media (max-width: 640px) { .reels .slot::before { display: none !important; } }

/* Lamps are disabled for the active slot via :not(.slot--active) scoping above */

/* Per-slot category tones (used when reels are neutral and slots carry their own type) */
.slot--mode {
  background: linear-gradient(135deg, rgb(34 211 238 / 18%), rgb(14 165 233 / 18%));
  border-color: rgb(34 211 238 / 12%);
  color: #d9f8ff;
}

.slot--genre {
  background: linear-gradient(135deg, rgb(167 139 250 / 18%), rgb(244 114 182 / 18%));
  border-color: rgb(167 139 250 / 12%);
  color: #f0eaff;
}

.slot--persp {
  background: linear-gradient(135deg, rgb(59 130 246 / 18%), rgb(37 99 235 / 18%));
  border-color: rgb(59 130 246 / 12%);
  color: #e2ecff;
}

.slot--mech {
  background: linear-gradient(135deg, rgb(251 191 36 / 18%), rgb(245 158 11 / 18%));
  border-color: rgb(251 191 36 / 12%);
  color: #fff7df;
}

.slot--tone {
  background: linear-gradient(135deg, rgb(244 114 182 / 16%), rgb(148 163 184 / 12%));
  border-color: rgb(244 114 182 / 10%);
  color: #ffe9f6;
}

@keyframes reel-move { to { transform: translateY(-50%); } }
.reel.track-a .reel-track{animation: reel-move 8s linear infinite}
.reel.track-b .reel-track{animation: reel-move 6.5s linear infinite}
.reel.track-c .reel-track{animation: reel-move 7.2s linear infinite}
.reel.track-d .reel-track{animation: reel-move 7.8s linear infinite}
.reel.track-e .reel-track{animation: reel-move 6.8s linear infinite}

/* When JS reel engine is active, disable CSS keyframes */
.reels.js-active .reel-track { animation: none !important; }

/* Central win-line: visible only when guideline is active */
.reels.guideline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  transform: translateY(-1px);
  background: linear-gradient(90deg, rgb(34 211 238 / 0%), rgb(255 255 255 / 40%), rgb(124 58 237 / 55%), rgb(244 114 182 / 40%), rgb(34 211 238 / 0%));
  box-shadow: 0 0 12px rgb(124 58 237 / 30%), 0 0 22px rgb(34 211 238 / 18%);
  opacity: .9;
  z-index: 2;
  pointer-events: none;
}

/* Brighter row flash on finish */
.reels.guideline.row-lit::after {
  box-shadow: 0 0 22px rgb(124 58 237 / 60%), 0 0 36px rgb(34 211 238 / 45%);
  background: linear-gradient(90deg, rgb(34 211 238 / 0%), rgb(255 255 255 / 75%), rgb(124 58 237 / 85%), rgb(244 114 182 / 65%), rgb(34 211 238 / 0%));
}

/* Lightbox overlay */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.lightbox.show { display: flex; }
.lightbox__img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgb(0 0 0 / 60%);
}
.lightbox__close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 20%);
  color: #fff;
  cursor: pointer;
}
body.modal-open { overflow: hidden; }

/* Light sweep over reels when spinning */
.reels.spinning .reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 6%) 40%, rgb(255 255 255 / 0%) 60%);
  mix-blend-mode: screen;
  animation: sweep 1.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sweep { 0%{ transform: translateY(-30%); } 50%{ transform: translateY(0%);} 100%{ transform: translateY(30%);} }

.game-coming .caption {
  display: none;
}

.game-coming .caption .spark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 211 107 / 65%), rgb(255 138 0 / 55%));
  box-shadow: 0 0 10px rgb(255 168 60 / 35%);
}

/* Minimal controls under reels */
.reels-controls {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin: var(--space-m) 0 0;
}

.btn.btn--reels {
  width: 100%;
  padding: .9rem 1rem;
  font-weight: 700;
  border-radius: 12px;
  display: inline-flex;              /* center text and emoji together */
  align-items: center;               /* vertical centering */
  justify-content: center;           /* horizontal centering */
  gap: 6px;                          /* tighter spacing between emoji and text */
  font-size: 1.1rem;                 /* make label bigger */
  line-height: 1.1;                  /* comfortable line height */
  background:
    linear-gradient(135deg, rgb(124 58 237 / 28%), rgb(244 114 182 / 26%));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 8px 18px rgb(0 0 0 / 20%);
  transition: background .2s ease, box-shadow .2s ease;
}
.btn.btn--reels .emoji {
  display: inline-block;
  font-size: 1.3em;                  /* scale emoji proportionally to bigger text */
  line-height: 1;
  margin-right: 0;                    /* use gap instead */
  transform: translateY(0);           /* align to center, no vertical offset */
}

/* Tablet: slightly smaller label */
@media (width <= 980px) {
  .btn.btn--reels { font-size: 1rem; gap: 5px; }
  .btn.btn--reels .emoji { font-size: 1.2em; }
}

/* Mobile: even smaller label */
@media (width <= 640px) {
  .btn.btn--reels { font-size: .95rem; gap: 4px; padding: .85rem .9rem; }
  .btn.btn--reels .emoji { font-size: 1.15em; }
}
.btn.btn--reels:hover {
  background: linear-gradient(135deg, rgb(124 58 237 / 36%), rgb(244 114 182 / 34%));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%), 0 12px 24px rgb(0 0 0 / 28%);
}

/* Category themes for reels (muted) */
/* Per-reel product theming */
.reel.r1 .slot {
  background: linear-gradient(135deg, rgb(167 139 250 / 22%), rgb(124 58 237 / 18%));
  border-color: rgb(167 139 250 / 16%);
}
.reel.r2 .slot {
  background: linear-gradient(135deg, rgb(34 211 238 / 20%), rgb(59 130 246 / 18%));
  border-color: rgb(34 211 238 / 14%);
}
.reel.r3 .slot {
  background: linear-gradient(135deg, rgb(244 114 182 / 20%), rgb(251 191 36 / 18%));
  border-color: rgb(244 114 182 / 14%);
}

/* (removed) .shots single-child helpers */

/* Windows 11–styled single screenshot */
.screenshot-win {
  margin: 14px auto 22px;           /* center horizontally */
  border-radius: clamp(6px, 1.2vh, 18px); /* adapt to viewport/image size */
  background: linear-gradient(180deg, #17172e, #111126);
  border: 1px solid rgb(255 255 255 / 10%);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: block;
  width: max-content;               /* shrink to content to avoid side background gaps */
  max-width: 100%;                  /* responsive within container */
}

/* (removed) Faux titlebar/controls: not needed */

.screenshot-win .win-body {
  display: block;
  padding: 0;
  border: 0;
  width: auto; /* let content define width */
  text-align: inherit;
  background: transparent;
  cursor: zoom-in;
}
.screenshot-win .win-body:focus { outline: none; }
.screenshot-win .win-body:focus-visible {
  outline: 2px solid rgb(124 58 237 / 65%);
  outline-offset: 2px;
}

.screenshot-win img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 50vh;
  border-radius: inherit;           /* match container rounding automatically */
  filter: saturate(1.04) contrast(1.03);
  /* No hover animations */
  transition: none;
}
/* (removed) Caption under screenshot */

/* Ensure consistent centering without forcing full width */

/* Lightweight skeleton shimmer for lazy images */
.skeleton {
  position: relative;
  background: #101026;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.10), rgba(255,255,255,0));
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Remove skeleton shimmer when class is cleared by JS */
img:not(.skeleton)::after { display: none; }

/* Override reel theming for ACTIVE slot: ensure the ring shows above themed backgrounds */
.reel .slot.slot--active { border-color: transparent; }

/* Respect reduced motion: disable heavy animations */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .sun-title, .sun-title::after, .sun-title .accent::before, .sun-title .accent::after { animation: none !important; }
  .reels.spinning .reel::after { animation: none !important; }
  .slot.slot--active::after { animation: none !important; }
  .reels.guideline::after, .reels.guideline.row-lit::after { box-shadow: none; }
}

@media (width <= 980px) {
  .reels { grid-template-columns: repeat(3, 1fr); }
}

@media (width <= 980px) {
  .reels-head { grid-template-columns: repeat(3, 1fr); }
}

@media (width <= 640px) {
  :root { --shots-h: 220px; }
  .game-card.coming.full {
    /* Use container width to avoid horizontal overflow */
    width: 100%;
    border-radius: 18px;
  }

  .game-card.coming .game-coming { padding: 10px 4px 8px; }

  .reels {
    height: 200px; /* larger on mobile too */
    gap: 4px; /* tighter horizontal/vertical gaps so slots are less narrow */
    padding: 0; /* remove side padding to use full width */
  }

  .slot {
    height: 44px;
    font-size: clamp(8px, 3.2vw, 9px);
    border-radius: 10px;
    padding: 0 8px; /* keep a bit of side padding to avoid lamp overlap */
    margin: 1px; /* minimal outer spacing between slots */
  }

  .games-grid > .reels-title {
    grid-column: 1 / -1;
    margin: 12px 0 10px;
    font-size: clamp(20px, 3.8vw, 28px);
  }

  /* Remove lamps on mobile completely */
  .reels.guideline .reel .slot:not(.slot--active)::before,
  .reels.guideline .reel .slot:not(.slot--active)::after,
  .reels.spinning  .reel .slot:not(.slot--active)::before,
  .reels.spinning  .reel .slot:not(.slot--active)::after { display: none !important; }

  /* Smaller lamps on phones */
  .reels.guideline .slot:not(.slot--active)::before,
  .reels.spinning  .slot:not(.slot--active)::before { left: 4px; width: 5px; height: 5px; }
  .reels.guideline .slot:not(.slot--active)::after,
  .reels.spinning  .slot:not(.slot--active)::after  { right: 4px; width: 4px; height: 4px; }
}

@media (width <= 980px) { .game-card { grid-column: span 4; } }

@media (width <= 640px) { .game-card { grid-column: span 12; } }

/* Tablet overrides: behave like desktop on tablets (641px–980px) */
@media (width > 640px) and (width <= 980px) {
  /* 1) Games grid: keep 3 per row like desktop */
  .game-card { grid-column: span 4; }

  /* 2) Benefits strip: single row like desktop */
  .benefits-strip {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--space-s) 10px;
  }
  .benefit {
    width: auto;
    justify-content: center;
    font-size: clamp(15px, 1.15vw, 18px);
    padding: .42rem .7rem;
  }

  /* 3) Features: keep 3 columns like desktop */
  .features { grid-template-columns: repeat(3, 1fr); }

  /* 4) Casino reels: header columns and button like desktop */
  .reels-head { grid-template-columns: repeat(5, 1fr); }
  .btn.btn--reels { font-size: 1.1rem; gap: 6px; }
}

/* Mobile layout refinements */
@media (width <= 640px) {
  :root { --header-h: 56px; }
  :root { --peek-next: 40dvh; }
  /* Ensure cards are centered and do not overflow the grid */
  .games-grid { justify-items: stretch; }
  .game-card { width: 100%; }
  /* Stronger blur and comfortable size for benefits on mobile */
  .benefits-strip { backdrop-filter: none; -webkit-backdrop-filter: none; padding: 10px 10px; }
  .benefit { font-size: 15px; padding: .38rem .65rem; backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1); background: rgb(8 10 22 / 58%); }
  /* Make hero paragraph more compact so it fits ~2 lines */
  .hero .container > p { font-size: 12.5px; line-height: 1.45; letter-spacing: 0; width: 100%; margin-top: 4px; }
  /* Disable heavy parallax layers on small screens */
  .parallax { display: none; }
  /* Keep header blur and semi-opaque background on mobile */
  .site-header {
    backdrop-filter: saturate(1.2) blur(12px);
    -webkit-backdrop-filter: saturate(1.2) blur(12px);
    background: rgba(10, 10, 20, 0.72);
    z-index: 1000;
    transform: none; /* ensure no GPU rounding drift */
    contain: layout paint;
  }
  /* Tighter padding on mobile to expose next section */
  .hero { padding: 16px 0; }
  .hero h1 { font-size: clamp(28px, 7.2vw, 42px); }
  .hero p { font-size: clamp(14px, 3.6vw, 16px); }
  .btn { padding: .6rem .9rem; border-radius: 12px; }
  .btn--lg { padding: .85rem 1rem; }
  .btn--xl { padding: .95rem 1.2rem; font-size: 1rem; }
  .game-card h3 { font-size: 18px; }
  .tag { font-size: 11px; padding: .24rem .45rem; }
  /* Smaller feature titles and texts */
  .features .feature h3 { font-size: 18px; }
  .features .feature p { font-size: 14px; }
  /* Add breathing room and spacing between brand and nav */
  .site-header .container {
    padding: 0 8px;
    gap: 24px; /* space between brand and nav */
  }
  /* Allow hero sun rays to render fully on mobile */
  .hero .sun-title { overflow: visible; contain: unset; }
  /* Make the sun rays larger and reduce masking on small screens */
  .sun-title .accent::before {
    width: clamp(420px, 100vw, 1000px);
    height: clamp(420px, 100vw, 1000px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Remove mask on mobile to prevent collapse into a small circle */
    mask-image: none;
    -webkit-mask-image: none;
    filter: blur(18px) brightness(0.9);
    opacity: 0.45;
  }
  /* Strengthen the outer halo slightly to compensate */
  .sun-title .accent::after {
    width: clamp(380px, 100vw, 980px);
    height: clamp(380px, 100vw, 980px);
    filter: blur(18px);
    opacity: 0.4;
  }
}

/* Features */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Benefits strip (small pills under the section title) */
.benefits-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
  align-items: center;
  margin: 10px 0 24px;
  padding: 10px 12px;
  border-radius: 14px;
  background: transparent; /* strip without its own background */
  backdrop-filter: none; /* no blur on the whole strip */
  -webkit-backdrop-filter: none;
}

.benefit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(15px, 1.15vw, 18px); /* bigger font as requested */
  font-weight: 600;
  color: rgb(245 246 255 / 92%);
  padding: .42rem .7rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 14%);
  background: rgb(10 12 24 / 55%); /* darker pill background */
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

.benefit svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: .9;
}

.feature {
  position: relative;
  background:
    linear-gradient(180deg, rgb(21 21 42 / 70%), rgb(15 15 30 / 55%)) padding-box,
    linear-gradient(135deg, rgb(124 58 237 / 22%), rgb(34 211 238 / 16%), rgb(244 114 182 / 18%)) border-box;
  border: 1px solid transparent; /* gradient border via double background */
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

.feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 220px at -10% -20%, rgb(124 58 237 / 12%), transparent 60%),
    radial-gradient(520px 200px at 110% 120%, rgb(34 211 238 / 10%), transparent 60%);
  pointer-events: none;
}

.feature .ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  /* Blue–Violet–Cyan gradient (no green) */
  background: linear-gradient(135deg, #22d3ee, #7c3aed, #60a5fa);
  opacity: 95%;
  margin-bottom: 10px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.feature .ico svg { width: 32px; height: 32px; color: #eef1ff; opacity: .95; }

/* Subtle interactive hover */
.feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgb(0 0 0 / 40%);
}

/* Responsive: stack features on narrow screens already handled, keep spacing nice */
@media (width <= 840px) {
  .features { gap: 14px; }
}

/* Benefits strip under features */
.benefits-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) 10px;
  margin: var(--space-m) 0 var(--space-l);
}

.benefit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 12%);
  background: rgb(255 255 255 / 6%);
  color: var(--text);
  font-size: 12px;
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
}

.benefit svg { width: 16px; height: 16px; color: #dbeafe; opacity: .95; }

/* Desktop: keep all in a single row */
@media (width > 840px) {
  .benefits-strip {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}

/* Mobile: two per row, centered */
/* Tablet and below: two columns */
@media (width <= 840px) {
  .benefits-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    gap: 8px;
  }
}

@media (width <= 640px) {
  .benefits-strip {
    /* keep two columns, adjust spacing on phones */
    gap: 8px;
  }
  .benefit {
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    padding: 6px 8px;
  }
}

/* Glassmorphism for game cards (override base) */
.game-card {
  background:
    linear-gradient(180deg, rgb(21 21 42 / 70%), rgb(15 15 30 / 55%)) padding-box,
    linear-gradient(135deg, rgb(124 58 237 / 22%), rgb(34 211 238 / 16%), rgb(244 114 182 / 18%)) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

.feature h3 {
  margin: 0 0 6px;
}

.feature p {
  margin: 0;
  color: var(--muted);
}

@media (width <= 840px) { .features { grid-template-columns: 1fr; } }

/* Re-assert desktop-like layout on tablets (641–840px) after phone/tablet generic rules */
@media (width > 640px) and (width <= 840px) {
  /* Keep benefits in a single row like desktop */
  .benefits-strip { display: flex; flex-wrap: nowrap; justify-content: center; }
  /* Keep 3 features per row like desktop */
  .features { grid-template-columns: repeat(3, 1fr); }
}

/* Respect reduced motion preferences: tone down animations and transitions */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reel-track { animation: none !important; }
}

/* Footer */
.site-footer {
  padding: var(--space-section) 0;
  border-top: 1px solid rgb(255 255 255 / 6%);
  background: rgb(0 0 0 / 15%);
  backdrop-filter: blur(8px);
}

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* Parallax layers (subtle stars/noise) */
.parallax {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.layer {
  position: absolute;
  inset: -10vh -10vw;
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 8%;
}
.layer:nth-child(1){background-image: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 80%, #fff, transparent), radial-gradient(2px 2px at 70% 40%, #fff, transparent)}
.layer:nth-child(2){background-image: radial-gradient(1px 1px at 60% 30%, #fff, transparent), radial-gradient(2px 2px at 80% 70%, #fff, transparent)}
.layer:nth-child(3){background-image: radial-gradient(1px 1px at 25% 50%, #fff, transparent), radial-gradient(1px 1px at 85% 20%, #fff, transparent)}

/* Reveal on scroll */
[data-animate] {
  opacity: 0%;
  transform: translateY(16px);
  filter: saturate(.9);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
}

[data-animate].in {
  opacity: 100%;
  transform: none;
  filter: saturate(1);
}

/* Waves animated background via canvas */
.waves-bg {
  position: fixed;
  inset: 0;
  z-index: 0; /* above body background, below header/content */
  pointer-events: none;
}

/* Canvas is hidden until the first frame is rendered to avoid visual flash */
.waves-bg canvas {
  opacity: 0;
  transition: opacity .35s ease;
  display: block;
  width: 100%;
  height: 100%;
}
.waves-bg.ready canvas { opacity: 1; }

/* Loader overlay covering the canvas area */
.waves-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgb(11 11 26), rgb(17 17 42));
}
.waves-bg.ready .waves-loader { display: none; }

/* Minimal spinner */
.waves-loader .spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.65);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#waves-canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter: contrast(1.2) saturate(1.35) brightness(1.05);
}

/* Subtle texture overlay */
.waves-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 600px at 10% -10%, rgb(255 255 255 / 6%), transparent 60%), radial-gradient(1200px 600px at 110% 110%, rgb(255 255 255 / 4%), transparent 60%);
}

/* Place hover overrides after base .game-card.coming rules to satisfy no-descending-specificity */
.game-card.coming:hover,
.game-card.coming.full:hover {
  transform: none;
  box-shadow: var(--shadow);
}

/* Mobile override: tighter rounding for the screenshot window */
@media (max-width: 640px) {
  .screenshot-win { border-radius: 4px; }
  .screenshot-win img { border-radius: 4px; }
}