:root {
  --night: #0d1d17;
  --felt: #15342a;
  --felt-deep: #0a1712;
  --brass: #c8a35b;
  --brass-light: #e6cc8f;
  --brass-dim: rgba(200, 163, 91, 0.32);
  --ivory: #eee5d0;
  --ivory-deep: #e2d6ba;
  --bordo: #6b1d25;
  --smoke: #8d9b92;
  --ink: #16211c;

  --font-display: 'Forum', 'Times New Roman', serif;
  --font-body: 'Commissioner', 'Segoe UI', system-ui, sans-serif;

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --arch: 999px 999px 10px 10px / 46% 46% 10px 10px;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-space: clamp(5rem, 11vw, 9.5rem);
  --header-h: 76px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

html:not(.lenis) {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* The carpet lattice lives in body's own background layer (not a fixed
     overlay), so it only shows through where a section is see-through —
     never painted on top of opaque cards, buttons or the wheel. Its alpha
     is baked into the SVG itself since a background-image has no opacity
     of its own without fading the whole element. */
  background-color: var(--night);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23c8a35b'%3E%3Cpath d='M75 4 145 75 75 146 5 75Z' stroke-width='1.1' stroke-opacity='.05'/%3E%3Cpath d='M75 36 113 75 75 114 37 75Z' stroke-width='0.8' stroke-opacity='.04'/%3E%3C/g%3E%3Cg fill='%23c8a35b'%3E%3Ccircle cx='75' cy='75' r='2.6' fill-opacity='.05'/%3E%3Cpath d='M75 61 79 71 89 75 79 79 75 89 71 79 61 75 71 71Z' fill-opacity='.045'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 150px;
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 350;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Felt grain over the whole page — deliberately painted above everything,
   including photos and cards, for a uniform film-grain texture. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[hidden] {
  display: none !important;
}

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

img {
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 400;
}

p {
  margin: 0;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--brass);
  color: var(--night);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-space);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lead {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  font-weight: 300;
  color: var(--ivory);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head__note {
  color: var(--smoke);
  font-size: 0.95rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.85rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.btn--sm {
  min-height: 2.6rem;
  padding: 0.5rem 1.2rem;
  font-size: 0.925rem;
}

/* Liquid-metal gold: a brushed sheen drifting across the face, framed by a
   slowly turning conic-gradient rim — a CSS-only stand-in for the WebGL
   "metal-fx" ring, built from our own brass palette. */
@property --metal-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.btn--brass {
  position: relative;
  color: var(--night);
  /* Never darker than plain --brass, so label contrast never dips below the
     original flat-gold baseline at any point in the sweep. */
  background: linear-gradient(120deg, var(--brass) 0%, #e9cf8f 24%, #fffbea 34%, #e9cf8f 44%, var(--brass) 62%, #e9cf8f 82%, var(--brass) 100%);
  background-size: 240% 100%;
  background-position: 0% 50%;
  animation: metal-sheen 7s ease-in-out infinite;
}

.btn--brass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--metal-angle), #6b4f22, #fffbea, #c8a35b, #6b4f22, #f1dca5, #6b4f22);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: metal-rotate 6s linear infinite;
}

.btn--brass:hover {
  animation-duration: 1.8s;
}

.btn--brass:hover::after {
  animation-duration: 2s;
}

@keyframes metal-sheen {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes metal-rotate {
  to {
    --metal-angle: 360deg;
  }
}

.btn--ghost {
  border-color: var(--brass-dim);
  color: var(--ivory);
}

.btn--ghost:hover {
  border-color: var(--brass);
}

.btn--felt {
  background: var(--felt);
  color: var(--ivory);
}

.btn--felt:hover {
  background: var(--night);
  color: var(--brass-light);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.round-btn {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 1px solid var(--brass-dim);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s;
}

.round-btn:hover {
  border-color: var(--brass);
  background: rgba(200, 163, 91, 0.08);
}

.round-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  transition: background-color 0.4s, backdrop-filter 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(10, 23, 18, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(200, 163, 91, 0.12);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: min(100% - 2 * var(--gutter), 1440px);
  height: var(--header-h);
  margin-inline: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
}

/* A real <img>, not a mask-painted box. Masks are origin-checked, and this page
   gets opened straight off disk often enough that it matters: on file:// every
   file counts as a foreign origin, the mask is dropped, and a dropped mask
   means "mask everything" — the crest vanished entirely. The shimmer lives on
   ::after below, so losing the mask now only costs the sheen. */
.brand__crest {
  position: relative;
  display: block;
  flex: none;
  width: 46px;
}

.brand__crest img {
  display: block;
  width: 100%;
  height: auto;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--brass-light);
  letter-spacing: 0.02em;
}

.nav {
  display: flex;
  gap: 1.6rem;
}

.nav a {
  font-size: 0.95rem;
  text-decoration: none;
  color: rgba(238, 229, 208, 0.78);
  transition: color 0.2s;
}

.nav a:hover {
  color: var(--brass-light);
}

.nav__phone {
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ivory);
}

.nav .nav__phone--menu {
  display: none;
}

.burger {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--brass-dim);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.burger__line {
  position: absolute;
  left: 50%;
  width: 1.1rem;
  height: 1.5px;
  background: var(--brass);
  transform: translateX(-50%);
  transition: transform 0.3s var(--ease-out), top 0.3s var(--ease-out);
}

.burger__line:nth-of-type(2) {
  top: calc(50% - 4px);
}

.burger__line:nth-of-type(3) {
  top: calc(50% + 3px);
}

.burger[aria-expanded='true'] .burger__line:nth-of-type(2) {
  top: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.burger[aria-expanded='true'] .burger__line:nth-of-type(3) {
  top: 50%;
  transform: translateX(-50%) rotate(-45deg);
}

/* Hero mode — the very first screen. Nothing competes with the slogan: the
   header empties out and the crest floats up above it, shimmering like the
   slogan does. On the first scroll the bar fills back in and the crest flies
   home to its slot. The flight offset is measured in JS (the crest has to end
   up centred in the viewport, not in its own column) and animated here. */
.nav,
.site-header__inner > .nav__phone,
.burger {
  transition: opacity 0.45s 0.12s, transform 0.45s 0.12s var(--ease-out), visibility 0s;
}

.header-cta {
  transition:
    background-color 0.25s, color 0.25s, border-color 0.25s,
    opacity 0.45s 0.12s, transform 0.45s 0.12s var(--ease-out), visibility 0s;
}

.site-header.is-hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

.site-header.is-hero .nav,
.site-header.is-hero .nav__phone,
.site-header.is-hero .header-cta,
.site-header.is-hero .burger {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.6rem);
  transition: opacity 0.3s, transform 0.3s var(--ease-out), visibility 0s 0.3s;
}

.brand {
  transition: transform 0.75s var(--ease-out);
}

.site-header.is-hero .brand {
  transform: translate(var(--brand-dx, 0px), var(--brand-dy, 0px)) scale(var(--brand-scale, 1));
}

.site-header.is-hero .brand__name {
  background: linear-gradient(110deg, #c9bc9c 32%, #e6c47c 43%, #fffdf6 50%, #e6c47c 57%, #c9bc9c 68%);
  background-size: 200% 100%;
  animation: shine 4s linear infinite;
}

/* The same sweep over the crest, laid on top of the image rather than replacing
   it: the gradient is opaque and masked to the crest's own silhouette, so it
   reads as one shimmering emblem — and where the mask can't load, this layer
   simply doesn't paint and the brass crest underneath stays put. */
.site-header.is-hero .brand__crest::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, #c9bc9c 32%, #e6c47c 43%, #fffdf6 50%, #e6c47c 57%, #c9bc9c 68%);
  background-size: 200% 100%;
  -webkit-mask: url(../assets/img/brand/crest-sm.png) center / contain no-repeat;
  mask: url(../assets/img/brand/crest-sm.png) center / contain no-repeat;
  animation: shine 4s linear infinite;
}

.site-header.is-hero .brand__name {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero */
.hero {
  position: relative;
}

.hero__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 110%, rgba(21, 52, 42, 0.9), transparent 60%),
    var(--night);
}

.hero__light {
  position: absolute;
  inset: -20% -10% 0;
  background: radial-gradient(40% 55% at 50% 38%, rgba(230, 204, 143, 0.16), rgba(230, 204, 143, 0.04) 45%, transparent 70%);
  pointer-events: none;
}

.hero__wheel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(86vmin, 860px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) translate(22vw, 0) scale(0.84);
  will-change: transform;
}

.hero__wheel .wheel {
  width: 100%;
  height: 100%;
}

/* Roulette wheel (shared) */
.wheel__cell--red {
  fill: #7a1f28;
}

.wheel__cell--black {
  fill: #0c1310;
}

.wheel__cell--green {
  fill: #1f6a45;
}

.wheel__pocket--red {
  fill: #4b141a;
}

.wheel__pocket--black {
  fill: #070b09;
}

.wheel__pocket--green {
  fill: #134229;
}

.wheel__fret {
  stroke-width: 2.5;
}

.wheel__num {
  fill: #f1e8d3;
  font-family: var(--font-display);
  font-size: 34px;
}

.hero__opening {
  position: absolute;
  inset: calc(var(--header-h) + 5vh) 0 auto;
  z-index: 2;
  text-align: center;
  padding-inline: var(--gutter);
  opacity: 0;
  pointer-events: none;
}

.hero__title {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 10.5vw, 10rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ivory);
  /* A brass glint sweeping across ivory letters. */
  background: linear-gradient(110deg, #c9bc9c 32%, #e6c47c 43%, #fffdf6 50%, #e6c47c 57%, #c9bc9c 68%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
  animation: shine 4s linear infinite;
}

@keyframes shine {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

/* The page's h1 — shown on the first screen so the offer (and the city) is
   readable before any scrolling, which the closing frame's big copy is not. */
.hero__kicker {
  max-width: 36rem;
  margin: 1.2rem auto 0;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  line-height: 1.35;
  color: var(--brass-light);
  text-wrap: balance;
}

.hero__opening-actions {
  margin-top: 1.4rem;
  pointer-events: auto;
}

/* Without the scroll scene (no JS, reduced motion) the opening never shows, so
   its button must not linger as an invisible, focusable link. */
.hero:not(.hero--animated) .hero__opening-actions {
  visibility: hidden;
}

.hero__copy {
  position: absolute;
  z-index: 2;
  left: max(var(--gutter), calc((100% - var(--container)) / 2));
  top: 50%;
  width: min(36rem, 44vw);
  transform: translateY(-45%);
}

.hero__subtitle {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* "фан-казино" and "Санкт-Петербурге" otherwise break at their own hyphens and
   strand "фан-" / "Санкт-" on a line of their own. Both still fit a 320px screen. */
.hero .nowrap {
  white-space: nowrap;
}

.hero__lead {
  margin-top: 1.5rem;
  max-width: 32rem;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  font-weight: 300;
  color: rgba(238, 229, 208, 0.85);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.hero__hint {
  position: absolute;
  z-index: 2;
  bottom: 2rem;
  left: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter)));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--ivory);
  opacity: 0;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.hero__hint::before {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: var(--brass);
}

/* Animated hero: start at frame one. JS drives everything from there. */
.js .hero--animated .hero__opening,
.js .hero--animated .hero__hint {
  opacity: 1;
}

.js .hero--animated .hero__copy {
  opacity: 0;
  visibility: hidden;
}

/* About */
.about {
  overflow: hidden;
}

.about__ambient {
  position: absolute;
  inset: 0;
  background: url('../assets/img/ambient/roulette-ambient.webp') right center / cover no-repeat;
  opacity: 0.26;
  mask-image: linear-gradient(90deg, transparent 38%, #000 80%), linear-gradient(transparent, #000 25%, #000 75%, transparent);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.about__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.about__text {
  display: grid;
  gap: 1.4rem;
  max-width: 38rem;
}

.about__text > p:not(.lead) {
  color: rgba(238, 229, 208, 0.78);
}

.about__formats {
  padding-top: 1.4rem;
  border-top: 1px solid rgba(200, 163, 91, 0.2);
}

.about__photo {
  margin: 0;
  justify-self: end;
  width: min(100%, 460px);
}

.arch,
.about__photo img,
.show__photo img,
.team__portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--arch);
}

.about__photo,
.show__photo,
.team__portrait {
  position: relative;
}

.about__photo::after,
.show__photo::after,
.team__portrait::after {
  content: '';
  position: absolute;
  inset: -14px;
  border: 1px solid var(--brass-dim);
  border-radius: var(--arch);
  pointer-events: none;
}

/* Capital + mini game */
.capital {
  position: relative;
  background: linear-gradient(180deg, var(--night), var(--felt-deep) 50%, var(--night));
}

.capital::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 163, 91, 0.55) 20%, rgba(200, 163, 91, 0.55) 80%, transparent);
  box-shadow: 0 1px 12px rgba(200, 163, 91, 0.25);
}

.capital__grid {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 470px);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.capital__text {
  display: grid;
  gap: 1.5rem;
}

.steps {
  display: grid;
  gap: 1.75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.steps__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.25rem;
  align-items: start;
}

.steps__num {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 3px dashed var(--brass);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--brass-light);
  box-shadow: inset 0 0 0 5px var(--night), inset 0 0 0 6px var(--brass-dim);
}

.steps__item h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.15;
  margin-bottom: 0.3rem;
}

.steps__item p {
  color: rgba(238, 229, 208, 0.75);
  max-width: 30rem;
}

.game {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(200, 163, 91, 0.22);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(230, 204, 143, 0.09), transparent 70%),
    var(--felt);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}

.game__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.game__title {
  font-family: var(--font-display);
  font-size: 1.9rem;
}

.game__balance {
  color: var(--smoke);
  font-size: 0.95rem;
}

.game__balance output {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--brass-light);
}

.game__wheel {
  width: min(100%, 330px);
  margin-inline: auto;
}

.game fieldset {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  flex-wrap: wrap;
}

.game legend {
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--smoke);
}

.bet,
.stake {
  position: relative;
  cursor: pointer;
}

.bet {
  flex: 1 1 0;
}

.bet input,
.stake input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.bet span {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.7rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.bet small {
  font-size: 0.75rem;
  opacity: 0.7;
}

.bet--red span {
  background: var(--bordo);
}

.bet--black span {
  background: #0b120f;
}

.bet--green span {
  background: #1f5a3e;
}

.bet input:checked + span,
.stake input:checked + span {
  border-color: var(--brass);
  box-shadow: 0 0 0 1px var(--brass);
}

.bet input:focus-visible + span,
.stake input:focus-visible + span {
  outline: 2px solid var(--brass-light);
  outline-offset: 3px;
}

.stake span {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 3px dashed rgba(238, 229, 208, 0.55);
  background: var(--felt-deep);
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.stake input:checked + span {
  border-style: dashed;
  color: var(--brass-light);
}

.game__spin {
  width: 100%;
}

.game__result {
  min-height: 3.3em;
  text-align: center;
  color: rgba(238, 229, 208, 0.85);
}

.game__result strong {
  font-weight: 500;
  color: var(--brass-light);
}

.game__cta {
  text-align: center;
  color: var(--brass-light);
  text-underline-offset: 4px;
}

/* Services */
.games {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding-top: 1.5rem;
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #1a3b30, var(--felt-deep));
  border: 1px solid rgba(238, 229, 208, 0.06);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.3s;
}

/* Keyboard focus only: a mouse click leaves the button focused, which used to
   keep the card lifted even after it was collapsed again. */
.game-card:hover,
.game-card:has(:focus-visible),
.game-card.is-open {
  transform: translateY(-1.25rem);
  box-shadow: 0 50px 70px -35px rgba(0, 0, 0, 0.85);
}

.game-card.is-open {
  border-color: var(--brass-dim);
}

.game-card__toggle {
  position: relative;
  display: grid;
  /* Two lines reserved for the title and for the tagline, so a one-line title
     next to a two-line one still starts on the same baseline across the row. */
  grid-template-rows: minmax(3.85rem, auto) minmax(3.25rem, auto);
  flex: none;
  gap: 0.75rem;
  width: 100%;
  min-height: 25rem;
  padding: 2rem 1.75rem 1.75rem;
  border: 0;
  border-radius: inherit;
  background: none;
  text-align: left;
  cursor: pointer;
  align-content: end;
  overflow: hidden;
}

.game-card__icon {
  position: absolute;
  top: 2.25rem;
  left: 50%;
  width: 45%;
  transform: translateX(-50%);
  fill: none;
  stroke: var(--brass);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.6s var(--ease-out), opacity 0.4s;
}

.game-card__icon .fill {
  fill: var(--brass);
  stroke: none;
}

.game-card__icon .thick {
  stroke-width: 5;
}

.game-card:hover .game-card__icon {
  transform: translateX(-50%) rotate(-8deg) scale(1.05);
}

.game-card__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.1;
}

.game-card__short {
  color: rgba(238, 229, 208, 0.7);
  font-size: 0.975rem;
}

.game-card__more {
  position: absolute;
  left: var(--mx, 50%);
  top: var(--my, 38%);
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid rgba(238, 229, 208, 0.25);
  background: rgba(238, 229, 208, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 60px 30px rgba(238, 229, 208, 0.1);
  font-size: 1rem;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .game-card:hover .game-card__more {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .game-card.is-open .game-card__more {
    opacity: 0;
  }
}

.game-card__detail {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 1rem;
  padding: 0 1.75rem 1.75rem;
  color: rgba(238, 229, 208, 0.85);
  font-size: 0.975rem;
}

.game-card__fact {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(200, 163, 91, 0.2);
  color: var(--brass-light);
  font-size: 0.9rem;
}

.package {
  margin-top: clamp(4rem, 8vw, 6.5rem);
}

.package__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  margin-bottom: 2rem;
}

.package__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.package__col {
  padding-top: 1.25rem;
  border-top: 1px solid var(--brass);
}

.package__col h4 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--brass-light);
  margin-bottom: 0.5rem;
}

.package__col p {
  color: rgba(238, 229, 208, 0.75);
  font-size: 0.975rem;
}

.package__included {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-md);
  background: rgba(21, 52, 42, 0.55);
  color: rgba(238, 229, 208, 0.85);
}

/* Show */
.show {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--night), #101f19);
}

/* A soft glow and a huge, barely-there wheel rim bleeding off the edge —
   just enough to lift the flat gradient without competing with the photo. */
.show::before {
  content: '';
  position: absolute;
  top: -22%;
  right: -8%;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 163, 91, 0.12), transparent 70%);
  pointer-events: none;
}

.show::after {
  content: '';
  position: absolute;
  top: 55%;
  right: -20vw;
  width: 46vw;
  height: 46vw;
  max-width: 640px;
  max-height: 640px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(200, 163, 91, 0.14);
  pointer-events: none;
}

.show__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.show__photo {
  margin: 0;
  width: min(100%, 440px);
}

.show__text {
  display: grid;
  gap: 1.4rem;
  max-width: 38rem;
}

.show__text > p:not(.lead):not(.show__badge) {
  color: rgba(238, 229, 208, 0.78);
}

.show__badge {
  justify-self: start;
  padding: 0.45rem 1rem;
  border: 1px solid var(--brass);
  border-radius: 999px;
  color: var(--brass-light);
  font-size: 0.9rem;
}

.history {
  margin-top: clamp(4rem, 8vw, 6rem);
}

.history,
.gallery {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.history:focus-visible,
.gallery:focus-visible {
  outline-offset: -3px;
}

.history.is-dragging,
.gallery.is-dragging {
  cursor: grabbing;
}

.history__track,
.gallery__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.history__item {
  position: relative;
  width: 19rem;
  padding: 3rem 2.5rem 0 0;
}

.history__item::before {
  content: '';
  position: absolute;
  top: 0.55rem;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--brass-dim);
}

.history__item::after {
  content: '';
  position: absolute;
  top: 0.15rem;
  left: 0;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--night);
  border: 1px solid var(--brass);
}

.history__item--now::after {
  background: var(--brass);
}

.history__year {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--brass-light);
}

.history__item h3 {
  margin: 0.75rem 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 500;
}

.history__item p:last-child {
  color: rgba(238, 229, 208, 0.72);
  font-size: 0.95rem;
}

/* Team */
.team__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.team__text {
  display: grid;
  gap: 1.25rem;
}

.team__number {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(6rem, 15vw, 12.5rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--brass);
  /* Same glint as the hero title, tuned warmer for a solid-brass numeral. */
  background: linear-gradient(110deg, #8a6a37 32%, #c8a35b 43%, #fffaf0 50%, #c8a35b 57%, #8a6a37 68%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 4s linear infinite;
}

.team__portrait {
  margin: 0;
  justify-self: start;
  width: min(100%, 420px);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.facts li {
  padding-top: 1rem;
  border-top: 1px solid rgba(200, 163, 91, 0.3);
}

.facts h3 {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.facts p {
  font-size: 0.925rem;
  color: rgba(238, 229, 208, 0.7);
}

.gallery {
  margin-top: clamp(4rem, 8vw, 6rem);
}

.gallery__track {
  align-items: center;
  gap: 1rem;
}

.gallery__track li.is-tall img {
  height: clamp(260px, 32vw, 400px);
}

.gallery__track li:not(.is-tall) img {
  height: clamp(220px, 26vw, 330px);
}

.gallery__track img {
  width: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  pointer-events: none;
  user-select: none;
}

/* Reviews */
.reviews {
  overflow: hidden;
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

.reviews__title {
  text-align: center;
}

.reviews__stage {
  --ring: 900px;
  position: relative;
  height: 580px;
  margin-top: 2rem;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(#000 70%, transparent);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.reviews__stage:focus-visible {
  outline-offset: -6px;
}

.reviews__stage.is-dragging {
  cursor: grabbing;
}

.reviews__wheel {
  position: absolute;
  left: 50%;
  top: calc(var(--ring) + 30px);
  width: 0;
  height: 0;
  transition: transform 0.9s var(--ease-out);
}

.reviews__stage.is-dragging .reviews__wheel {
  transition: none;
}

.reviews__ring {
  position: absolute;
  left: calc(var(--ring) * -1);
  top: calc(var(--ring) * -1);
  width: calc(var(--ring) * 2);
  height: calc(var(--ring) * 2);
  max-width: none;
  overflow: visible;
}

.reviews__ring .ring-cell--red {
  fill: var(--bordo);
}

.reviews__ring .ring-cell--black {
  fill: #0b120f;
}

.reviews__ring .ring-cell--green {
  fill: #1f5a3e;
}

.reviews__ring .ring-line {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1;
}

.reviews__ring .ring-num {
  fill: rgba(238, 229, 208, 0.8);
  font-family: var(--font-display);
  font-size: 15px;
}

.reviews__ring {
  transition: transform 0.9s var(--ease-out);
}

/* Pointer sits above the ring; its tip touches the pocket that "came up". */
.reviews__pointer {
  position: absolute;
  left: 50%;
  top: 2px;
  z-index: 3;
  width: 26px;
  height: 34px;
  margin-left: -13px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}

.reviews__pointer svg {
  width: 100%;
  height: 100%;
}

.review {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--card-w, 300px);
  min-height: var(--card-h, 330px);
  padding: 1.6rem 1.6rem 1.4rem;
  border-radius: var(--radius-md);
  background: var(--ivory);
  color: var(--ink);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.9rem;
  box-shadow: 0 30px 50px -25px rgba(0, 0, 0, 0.8);
  transition: opacity 0.6s;
}

.review[aria-hidden='true'] {
  opacity: 0.55;
}

.review__event {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.1;
}

.review__text {
  font-size: 0.93rem;
  line-height: 1.55;
  color: rgba(22, 33, 28, 0.85);
}

.review__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.35;
}

.review__author small {
  display: block;
  color: rgba(22, 33, 28, 0.6);
  font-size: 0.8rem;
}

.review__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--felt);
  color: var(--brass-light);
  font-family: var(--font-display);
  font-size: 1.1rem;
  border: 2px dashed var(--brass);
}

.reviews__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.reviews__count {
  min-width: 7rem;
  text-align: center;
  color: var(--smoke);
  font-size: 0.95rem;
}

/* FAQ */
.faq__inner {
  width: min(100% - 2 * var(--gutter), 50rem);
}

.faq__head {
  display: grid;
  justify-items: center;
  gap: 1.35rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.faq__badge {
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--brass-dim);
  border-radius: 999px;
  background: rgba(21, 52, 42, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--brass-light);
}

.faq__title {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--ivory);
  /* Same brass glint as the hero headline. */
  background: linear-gradient(110deg, #c9bc9c 32%, #e6c47c 43%, #fffdf6 50%, #e6c47c 57%, #c9bc9c 68%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 4s linear infinite;
}

.faq__lead {
  max-width: 34rem;
  color: rgba(238, 229, 208, 0.72);
}

.faq__lead a {
  color: var(--brass-light);
  text-underline-offset: 4px;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq__item {
  border: 1px solid rgba(200, 163, 91, 0.14);
  border-radius: var(--radius-md);
  background: rgba(21, 52, 42, 0.45);
  transition: border-color 0.3s, background-color 0.3s;
}

.faq__item:hover {
  border-color: rgba(200, 163, 91, 0.3);
}

.faq__item[open] {
  border-color: rgba(200, 163, 91, 0.34);
  background: rgba(21, 52, 42, 0.74);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem clamp(1.1rem, 2.5vw, 1.6rem);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  cursor: pointer;
  list-style: none;
  transition: color 0.25s;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  color: var(--brass-light);
}

/* Round plus that turns into a minus when the card opens. */
.faq__mark {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--brass-dim);
  border-radius: 50%;
  transition: border-color 0.3s, background-color 0.3s;
}

.faq__mark::before,
.faq__mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8rem;
  height: 1.5px;
  background: var(--brass);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease-out);
}

.faq__mark::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__mark {
  border-color: var(--brass);
  background: rgba(200, 163, 91, 0.12);
}

.faq__item[open] .faq__mark::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__answer {
  overflow: hidden;
  /* Horizontal only — vertical padding here would set a floor the height
     animation can never get under (border-box clamps height to the padding),
     and closing would stall with a clipped line of the answer still on screen
     until the cleanup timer yanked it away. The bottom gap belongs to the
     content instead, so this box can genuinely reach zero. */
  padding-inline: clamp(1.1rem, 2.5vw, 1.6rem);
  color: rgba(238, 229, 208, 0.78);
  transition: height 0.35s var(--ease-out);
}

.faq__answer > :last-child {
  padding-bottom: 1.4rem;
}

/* Request */
.request__card {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: stretch;
}

.request__side {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 1rem;
  margin: clamp(0rem, 2vw, 1.5rem) -2rem clamp(0rem, 2vw, 1.5rem) 0;
  padding: clamp(2rem, 4vw, 3.25rem) calc(2rem + clamp(1.5rem, 3vw, 2.5rem)) clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background:
    radial-gradient(70% 55% at 0% 100%, rgba(200, 163, 91, 0.3), transparent 70%),
    linear-gradient(160deg, #1b3a30, var(--felt-deep));
  text-align: center;
  overflow: hidden;
  perspective: 900px;
}

.request__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  line-height: 1;
}

.request__note {
  max-width: 22rem;
  color: rgba(238, 229, 208, 0.78);
}

.request__phone {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--brass-light);
}

.chip {
  width: clamp(180px, 22vw, 260px);
  aspect-ratio: 1;
  margin: 1.5rem 0;
  transform: rotateX(var(--rx, 10deg)) rotateY(var(--ry, -14deg));
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-out);
}

.chip__body {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--night) 0 56%, transparent 56.5%),
    radial-gradient(circle, transparent 0 62%, rgba(238, 229, 208, 0.9) 62.5% 63.5%, transparent 64%),
    repeating-conic-gradient(var(--brass) 0 22.5deg, var(--bordo) 22.5deg 45deg);
  box-shadow:
    0 0 0 6px #5a1820,
    0 30px 50px -10px rgba(0, 0, 0, 0.7),
    inset 0 0 0 3px rgba(0, 0, 0, 0.25);
}

.chip__body img {
  width: 52%;
}

.form {
  position: relative;
  z-index: 1;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  border-radius: var(--radius-lg);
  background: var(--ivory);
  color: var(--ink);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.85);
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1rem;
}

.field {
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.field--wide {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.85rem;
  color: rgba(22, 33, 28, 0.72);
}

.field__opt {
  color: rgba(22, 33, 28, 0.45);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(22, 33, 28, 0.1);
  border-radius: var(--radius-sm);
  background: var(--ivory-deep);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 0.2s, background-color 0.2s;
}

.field textarea {
  resize: vertical;
  min-height: 6.5rem;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(22, 33, 28, 0.42);
}

.field input:hover,
.field textarea:hover {
  border-color: rgba(22, 33, 28, 0.25);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--felt);
  background: #f6f0e2;
  box-shadow: 0 0 0 3px rgba(21, 52, 42, 0.15);
}

.field input[aria-invalid='true'] {
  border-color: var(--bordo);
}

.field__error {
  font-size: 0.8rem;
  color: var(--bordo);
}

.field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: rgba(22, 33, 28, 0.72);
  cursor: pointer;
}

.check input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--felt);
  /* The page is color-scheme: dark, and iOS Safari then paints an unchecked
     native checkbox as a solid black square — wrong on this ivory card. */
  color-scheme: light;
}

.check a {
  color: var(--felt);
}

.form__submit {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0.25rem;
}

.form__status {
  grid-column: 1 / -1;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(107, 29, 37, 0.1);
  color: var(--bordo);
  font-size: 0.925rem;
}

.form__status a {
  color: inherit;
  font-weight: 500;
}

.form__success {
  display: grid;
  gap: 0.75rem;
  align-content: center;
  min-height: 22rem;
  text-align: center;
  outline: none;
}

.form__success h3 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--felt);
}

.form__success a {
  color: var(--felt);
  font-weight: 500;
}

/* Footer */
.site-footer {
  padding-block: 4rem 2.5rem;
  border-top: 1px solid rgba(200, 163, 91, 0.15);
  background: var(--felt-deep);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem 3rem;
  align-items: center;
}

.site-footer__crest {
  width: 110px;
}

.site-footer__contacts {
  display: grid;
  gap: 0.35rem;
  max-width: 28rem;
}

.site-footer__phone {
  font-family: var(--font-display);
  font-size: 1.7rem;
  text-decoration: none;
  color: var(--brass-light);
}

.site-footer__contacts p {
  color: var(--smoke);
  font-size: 0.925rem;
}

.site-footer__social {
  display: flex;
  gap: 1.25rem;
}

.site-footer__social a {
  text-decoration: none;
  color: rgba(238, 229, 208, 0.8);
}

.site-footer__social a:hover {
  color: var(--brass-light);
}

.site-footer__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(238, 229, 208, 0.08);
  font-size: 0.85rem;
  color: var(--smoke);
}

.site-footer__legal a {
  color: var(--smoke);
}

/* Responsive */
@media (max-width: 1100px) {
  .nav {
    gap: 1.1rem;
  }

  .site-header__inner > .nav__phone {
    display: none;
  }

  .games {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2.5rem;
  }

  .package__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 64px;
  }

  .burger {
    display: block;
  }

  .header-cta {
    display: none;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    gap: 0;
    padding: 1rem var(--gutter) 2rem;
    background: rgba(10, 23, 18, 0.97);
    border-bottom: 1px solid rgba(200, 163, 91, 0.15);
    transform: translateY(-120%);
    visibility: hidden;
    transition: transform 0.45s var(--ease-out), visibility 0s 0.45s;
  }

  .nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.45s var(--ease-out);
  }

  .nav a {
    padding: 0.9rem 0;
    font-size: 1.15rem;
    border-bottom: 1px solid rgba(238, 229, 208, 0.07);
  }

  .nav .nav__phone--menu {
    display: block;
    color: var(--brass-light);
    border-bottom: 0;
  }

  .site-header {
    background: rgba(10, 23, 18, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .hero__copy {
    left: var(--gutter);
    right: var(--gutter);
    top: auto;
    bottom: 7vh;
    width: auto;
    transform: none;
  }

  .hero__subtitle {
    font-size: clamp(2.2rem, 8.5vw, 3.2rem);
  }

  .hero__lead {
    margin-top: 1rem;
  }

  .hero__actions {
    margin-top: 1.5rem;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
  }

  .hero__wheel {
    width: min(92vw, 520px);
    transform: translate(-50%, -50%) translate(0, -24vh) scale(0.72);
  }

  .about__grid,
  .capital__grid,
  .show__grid,
  .team__grid {
    grid-template-columns: 1fr;
  }

  .about__photo,
  .team__portrait {
    justify-self: center;
    width: min(88%, 380px);
  }

  .show__photo {
    justify-self: center;
    width: min(88%, 380px);
  }

  .team__portrait {
    order: -1;
  }

  .capital__grid .game {
    width: min(100%, 470px);
    justify-self: center;
  }

  .facts {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .request__card {
    grid-template-columns: 1fr;
  }

  .request__side {
    margin: 0 1rem -2rem;
    padding: 2rem 1.5rem 3.5rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .chip {
    margin: 0.5rem 0;
  }

  .request__phone {
    margin-top: 0;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .reviews__stage {
    --ring: 820px;
    height: 560px;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent),
      linear-gradient(#000 90%, transparent);
  }
}

@media (max-width: 640px) {
  .games {
    display: flex;
    gap: 1rem;
    margin-inline: calc(var(--gutter) * -1);
    padding: 1.5rem var(--gutter) 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .game-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }

  .game-card:hover,
  .game-card:focus-within,
  .game-card.is-open {
    transform: none;
  }

  .game-card__toggle {
    min-height: 21rem;
  }

  .package__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .form__grid {
    grid-template-columns: 1fr;
  }

  .history__item {
    width: 16rem;
  }

  .reviews__stage {
    --ring: 780px;
    height: 540px;
  }

  .game fieldset.game__bets {
    flex-wrap: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero__title,
  .team__number,
  .faq__title,
  .site-header.is-hero .brand__crest::after,
  .site-header.is-hero .brand__name {
    animation: none !important;
  }
}