/* ═══════════════════════════════════════════════════════
   APEX — styles
   Screen 1 only (PC). Grid: margin 200px, gutter 16px, 4col.
════════════════════════════════════════════════════════ */

/* ── Oswald ITALIC (local) ────────────────────────────────
   Google Fonts Oswald has no true italic — use the local
   slanted TTFs. Oswald is used italic across the whole page. */
@font-face {
  font-family: 'Oswald';
  font-style: italic;
  font-weight: 300;
  src: url('img/fonts/Oswald-LightItalic.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  font-style: italic;
  font-weight: 400;
  src: url('img/fonts/Oswald-RegularItalic.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  font-style: italic;
  font-weight: 500;
  src: url('img/fonts/Oswald-MediumItalic.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  font-style: italic;
  font-weight: 600;
  src: url('img/fonts/Oswald-Demi-BoldItalic.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  font-style: italic;
  font-weight: 700;
  src: url('img/fonts/Oswald-BoldItalic.ttf') format('truetype');
  font-display: swap;
}

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

:root {
  --gm: 200px; /* grid margin */
}

html {
  scroll-behavior: smooth;
}

body {
  background: #000;
  color: #fff;
  overflow-x: hidden;
  font-family: 'Space Mono', monospace;
  cursor: none;                 /* replaced by #cursor-dot + #cursor-ring */
}


/* ── Custom cursor (dot + lerping ring) — ported from dead inside ── */
#cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: #F9A72A;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s, width 0.2s, height 0.2s, background 0.2s, opacity 0.3s;
}
#cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(249, 167, 42, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.12s cubic-bezier(0.23, 1, 0.32, 1), width 0.3s, height 0.3s, border-color 0.3s, opacity 0.3s;
}
/* expand + brighten over interactive elements */
body:has(a:hover) #cursor-dot,
body:has(button:hover) #cursor-dot {
  width: 16px;
  height: 16px;
  background: #FFC15A;
}
body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring {
  width: 64px;
  height: 64px;
  border-color: #FFC15A;
}


/* ── TOP BAR ──────────────────────────────────────────── */

#topBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px var(--gm);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.topbar-logo img {
  display: block;
}


/* ── NAV PILL ─────────────────────────────────────────── */

#mainNav {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 333px;
  height: 40px;
  border-radius: 15px;
  background:
    linear-gradient(99deg, rgba(255,255,255,0.00) 48.08%, rgba(255,255,255,0.05) 88.81%),
    rgba(255,255,255,0.06);
  backdrop-filter: blur(9.15px);
  -webkit-backdrop-filter: blur(9.15px);
  padding: 0 20px;
  gap: 0;
}

/* scroll-progress fill — "loads" the active menu item (dead inside / blueharbour).
   --nav-fill (0..1) is driven by scroll; each menu item owns 1/N of the pill. */
#mainNav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.10));
  transform: scaleX(var(--nav-fill, 0));
  transform-origin: left center;
  transition: transform 0.15s linear;
  z-index: 0;
  pointer-events: none;
}

.nav-link {
  position: relative;
  z-index: 1;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.12px;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  transition: color 0.2s;
}

.nav-link:hover {
  color: rgba(255, 255, 255, 0.85);
}

.nav-link.is-active {
  color: rgba(255, 255, 255, 0.95);
}

/* bullet separator between nav items */
.nav-bullet {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  margin: 0 12px;
  flex-shrink: 0;
  vertical-align: middle;
}


/* ── TOP CTA BUTTON ───────────────────────────────────── */

.btn-top-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  padding: 17px 18px;
  justify-content: center;
  align-items: center;
  gap: 11px;
  border-radius: 14px;
  background: #FE0312;
  color: #FFF;
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.12px;
  text-transform: uppercase;
  text-decoration: none;
  flex-shrink: 0;
}

/* orange glow circle — sits at bottom-center, grows on hover */
.btn-top-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(92.44% 118.75% at 50% 100%, #F9A72A 0%, #FE0312 100%);
  transform-origin: 50% 100%;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-top-cta:hover::before {
  transform: scale(1.5);
}


/* ═══════════════════════════════════════════════════════
   SCREEN 1 — HERO
════════════════════════════════════════════════════════ */

#screen1 {
  position: relative;
  /* 100vh visible + scroll zone. Shorter than the 2600px frame zone on purpose:
     screen2 (the #050505 block) starts wiping up ~300px before the animation
     reaches its final frame, so the black appears a touch earlier. */
  height: calc(100vh + 2300px);
}

/* fixed canvas — fills viewport, frames drawn here */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

/* sticky wrapper — pins hero content while section scrolls */
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 180px; /* push content below top bar, into upper third */
  z-index: 5;
  pointer-events: none;
}

.hero-sticky > * {
  pointer-events: auto;
}

/* hero content block — centered */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* HEADING */
.hero-title {
  width: 866.859px;
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-style: italic;
  font-size: 58.522px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.293px;
  text-transform: uppercase;
}

/* SUBTITLE */
.hero-sub {
  margin-top: 18px;
  color: #FFF;
  font-family: 'Space Mono', monospace;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0;
}

/* BUTTONS ROW */
.hero-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
}

/* ── Skewed parallelogram CTA buttons (racing style) ──────────── */
.btn-skew {
  position: relative;
  overflow: hidden;                 /* clips the light-sweep to the button shape */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 0 34px;
  transform: skewX(-11deg);
  border-radius: 7px;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  /* detached neon outline lives on the CSS outline (offset = the gap), so it
     isn't clipped by overflow:hidden and the ::before is free for the shine */
  outline: 1.5px solid;
  outline-offset: 4px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease, outline-color 0.3s ease, filter 0.3s ease;
}

/* counter-skew so text & icons stay upright inside the slanted shape */
.btn-skew__inner {
  position: relative;
  z-index: 3;                       /* above the light sweep */
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transform: skewX(11deg);
}

/* ── light-sweep flash (shine) — races across on hover ── */
.btn-skew::before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg,
    transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: translateX(-200%) skewX(8deg);
  pointer-events: none;
  z-index: 2;
}
.btn-skew:hover::before {
  animation: btnShine 0.8s cubic-bezier(0.3, 0, 0.2, 1);
}
@keyframes btnShine {
  0%   { transform: translateX(-200%) skewX(8deg); }
  100% { transform: translateX(420%)  skewX(8deg); }
}

.btn-skew__label {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-skew svg {
  display: block;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- PRIMARY (orange) ---- */
.btn-skew--primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(92.44% 118.75% at 50% 100%, #F9A72A 0%, #FE0312 100%);
  color: #fff;
  outline-color: rgba(255, 208, 126, 0.95);
  box-shadow: 0 10px 30px rgba(255, 92, 16, 0.45),
              0 0 16px rgba(255, 150, 45, 0.35),
              inset 0 1px 0 rgba(255, 232, 185, 0.8);
}
.btn-skew--primary:hover {
  transform: skewX(-11deg) translateY(-2px);
  outline-color: rgba(255, 228, 155, 1);
  filter: brightness(1.07) saturate(1.05);
  box-shadow: 0 18px 44px rgba(255, 92, 16, 0.7),
              0 0 30px rgba(255, 160, 55, 0.7),
              inset 0 1px 0 rgba(255, 240, 200, 0.95);
  animation: btnPulse 1.1s ease-in-out 0.2s infinite;
}
/* arrow launches forward on hover */
.btn-skew--primary:hover svg { transform: translateX(8px); }

/* gentle outline-glow pulse while hovered */
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 18px 44px rgba(255, 92, 16, 0.7),
                         0 0 26px rgba(255, 160, 55, 0.55),
                         inset 0 1px 0 rgba(255, 240, 200, 0.95); }
  50%      { box-shadow: 0 18px 44px rgba(255, 92, 16, 0.75),
                         0 0 40px rgba(255, 175, 70, 0.95),
                         inset 0 1px 0 rgba(255, 240, 200, 0.95); }
}

/* ---- DEMO (dark) ---- */
.btn-skew--demo {
  background: #0c0d11;
  color: #F9A72A;
  outline-color: rgba(255, 224, 198, 0.325);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
/* warm glow that rises from the bottom on hover ("charging up") */
.btn-skew--demo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 130% at 50% 135%, rgba(255, 110, 28, 0.5) 0%, transparent 68%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
.btn-skew--demo:hover {
  transform: skewX(-11deg) translateY(-2px);
  outline-color: rgba(255, 165, 70, 0.95);
  filter: brightness(1.08);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5),
              0 0 24px rgba(255, 130, 40, 0.4);
}
.btn-skew--demo:hover::after { opacity: 1; }


/* ═══════════════════════════════════════════════════════
   RACE RESULTS PANEL (screen 1, left side)
════════════════════════════════════════════════════════ */

.race-panel {
  position: fixed;          /* STAYS put in the viewport — it doesn't scroll up;
                               screen 2 (#050505, z-index 10) simply wipes over it */
  top: 96px;
  left: var(--gm);
  width: 288px;
  z-index: 6;
  pointer-events: none;
  /* NOTE: no transform / opacity / will-change here — they would create a
     backdrop-root and break the cards' backdrop-filter (background blur). */
}

/* TIMER */
.race-timer {
  color: #FFF;
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.06;
  text-transform: uppercase;
  margin-bottom: 22px;
  opacity: 0;             /* JS fades it in on scroll */
}

/* CARDS STACK — cards are absolutely positioned, slotted by JS */
.race-cards {
  position: relative;
  width: 288px;
  height: 616px;          /* 4×142 + 3×16 gap */
}

.race-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 288px;
  height: 142px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;             /* JS fades it in on scroll */
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  /* no will-change: transform — it breaks this card's own backdrop-filter in Chrome */
}

.race-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.race-card__logo {
  width: auto;
  max-width: 130px;
  object-fit: contain;
  display: block;
}

/* per-logo heights — tuned so every brand reads at the same visual size
   despite very different aspect ratios (APEX is wide & thin, 7K is compact,
   Dragon Money is two stacked lines). */
.race-card--apex   .race-card__logo { height: 20px; }
.race-card--win    .race-card__logo { height: 28px; }
.race-card--7k     .race-card__logo { height: 34px; }
.race-card--dragon .race-card__logo { height: 34px; }

.race-card__speed {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.race-card__speed .spd {
  color: #FFF;
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.06;
  text-transform: uppercase;
}

.race-card__speed .unit {
  color: rgba(255, 255, 255, 0.57);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.06;
  text-transform: uppercase;
}

/* SPEED INDICATOR */
.race-card__bar {
  position: relative;
  width: 249px;
  height: 35px;
  border: 1px solid #E4E4E4;
  border-radius: 0;
}

.race-card__fill {
  position: absolute;
  left: 4px;                      /* 4px inset inside the frame */
  top: 4px;
  bottom: 4px;
  width: 0;
  border-radius: 0;
  background: #4F5A6C;            /* laggards — grey */
  transition: width 0.1s linear;
}

/* vertical playhead marker at the fill's leading edge — taller than frame */
.race-card__marker {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 4px;
  width: 2px;
  background: #FFF;
  transform: translateX(-1px);
  pointer-events: none;
  opacity: 0;
  transition: left 0.1s linear;
}

/* leader (APEX) — orange gradient fill */
.race-card--apex .race-card__fill {
  background: radial-gradient(92.44% 118.75% at 50% 100%, #F9A72A 0%, #FE0312 100%), #F9A72A;
}

/* corner brackets — only on the APEX card */
.corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 0 solid rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.corner--tl { top: -1px;  left: -1px;  border-top-width: 1px; border-left-width: 1px; }
.corner--tr { top: -1px;  right: -1px; border-top-width: 1px; border-right-width: 1px; }
.corner--bl { bottom: -1px; left: -1px;  border-bottom-width: 1px; border-left-width: 1px; }
.corner--br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }


/* ═══════════════════════════════════════════════════════
   SCREEN 2 — ADVANTAGES (horizontal sticky scroll)
════════════════════════════════════════════════════════ */

#screen2 {
  position: relative;
  z-index: 10;              /* above the fixed frame canvas → covers the frozen video */
  background: #050505;      /* the "overlay" that wipes over the last video frame */
}

.adv-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;         /* clips the horizontally-translated track */
  background: #050505;
}

/* horizontal track — translated by JS; header + cards live inside and move together */
.adv-track {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-start;          /* cards top-aligned */
  gap: 20px;
  padding: 215px var(--gm) 0 var(--gm);
  width: max-content;
  will-change: transform;
}

/* section header — static & pinned inside the sticky container (does NOT
   translate horizontally); cards scroll beneath it. When the horizontal scroll
   finishes, the whole sticky unpins and everything scrolls up vertically. */
.adv-head {
  position: absolute;
  top: 90px;
  left: var(--gm);
  width: calc(100vw - 2 * var(--gm));
  z-index: 5;                       /* above the scrolling cards */
  display: flex;
  align-items: flex-end;            /* label sits on the title's baseline/bottom */
  justify-content: space-between;
}
.adv-title {
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-style: italic;
  font-size: 45px;
  font-weight: 600;
  line-height: 105%;
  letter-spacing: -0.225px;
  text-transform: uppercase;
}
.adv-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFF;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 106%;
  text-transform: uppercase;
  font-feature-settings: 'cv11' on;
  white-space: nowrap;
}
.adv-label svg { display: block; flex-shrink: 0; }

/* ── card ── */
.adv-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.adv-plaque {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  /* no backdrop-filter: behind these is a solid #050505, so the blur was
     invisible yet cost GPU memory (contributed to Out-of-Memory) */
  margin-bottom: 16px;             /* gap between image plaque and title */
}
.adv-plaque img {
  display: block;
  width: 100%;
  height: 100%;
}

/* large (592×436) — photographic, fills the plaque */
.adv-card--lg .adv-plaque { width: 592px; height: 436px; }
.adv-card--lg .adv-plaque img { object-fit: cover; }

/* small (288×259) — product render placed on the frosted plaque.
   Each render has its own size & anchor (absolute → can overflow the plaque). */
.adv-card--sm .adv-plaque { width: 288px; height: 259px; }
.adv-card--sm .adv-plaque img {
  position: absolute;
  left: 50%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 2 · trophy — centred, fills the plaque */
.adv-card--trophy .adv-plaque img {
  width: 288px;
  height: 258px;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* 3 · coins — taller than the plaque, pinned to the bottom so a coin
   peeks out above the top edge */
.adv-card--coins .adv-plaque img {
  width: 286px;
  height: 293px;
  bottom: 0;
  transform: translateX(-50%);
}
/* 5 · gift — small, centred */
.adv-card--gift .adv-plaque img {
  width: 242px;
  height: 242px;
  top: 50%;
  transform: translate(-50%, -50%);
}

.adv-card__title {
  color: #FFF;
  font-family: 'Space Mono', monospace;
  font-size: 21px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.21px;
}
.adv-card__desc {
  margin-top: 6px;
  color: #FFF;
  font-family: 'Space Mono', monospace;
  font-size: 15px;
  font-weight: 400;
  line-height: 106%;
  font-feature-settings: 'cv11' on;
}


/* ═══════════════════════════════════════════════════════
   SCREEN 3 — WINNERS (live table + layered illustration)
════════════════════════════════════════════════════════ */

#screen3 {
  position: relative;
  z-index: 11;             /* above #screen2 (10) so the chip overflowing up isn't covered */
  background: #050505;
  /* height follows the content — JS sizes .win-inner to the (scaled) illustration
     so the section stays tight to it (no giant empty gap before block 4) */
  /* no clipping — screens 2–4 share the same #050505, so the glow & chips can
     freely overflow past the top/bottom without any visible seam */
  overflow: visible;
  /* pull the whole section up into block 2's empty tail (the dead space below
     the advantage cards in the horizontal-scroll end state) → ~2× smaller gap
     between block 2 and block 3. Reset to 0 on mobile (stacked, no tail). */
  margin-top: -140px;
  padding: 96px var(--gm) 22px;   /* bottom gap to block 4 trimmed a bit more */
}
.win-inner {
  position: relative;
  display: flow-root;       /* contain the table's margin-top (no escape → no extra
                               158px of section height / giant gap before block 4) */
  /* fallback before JS runs; JS (fitIllus) sets the real height to the scaled
     illustration footprint so the section is tight to the content */
  min-height: 560px;
  /* table + illustration are a CENTRED group: on ultra-wide screens they sit in
     the middle instead of stretching to the edges (the header stays at the grid) */
  max-width: 1520px;
  margin: 0 auto;
}

/* table sits ABOVE the illustration (rings overlap it from behind, never on top),
   and clears the absolutely-positioned header above it */
.win-table {
  position: relative;
  z-index: 2;
  margin-top: 158px;
}

/* ── header — pinned to the grid margin (absolute, so the centred .win-inner
   below it isn't pushed down and the pilot can stay up near the top) ── */
.win-head {
  position: absolute;
  top: 96px;
  left: var(--gm);
  z-index: 5;
}
.win-title {
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-style: italic;
  font-size: 45px;
  font-weight: 600;
  line-height: 105%;
  letter-spacing: -0.225px;
  text-transform: uppercase;
}
/* "Live" flows inline right after «сейчас», 20px gap, on its baseline */
.win-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 20px;
  vertical-align: baseline;
  color: #FFF;
  font-family: 'Space Mono', monospace;
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  line-height: 106%;
  letter-spacing: 0;
  text-transform: uppercase;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F9A229;
  animation: liveBlink 2s steps(1, end) infinite;
}
@keyframes liveBlink {
  0%, 80%  { opacity: 1; }
  85%, 95% { opacity: 0.15; }
  100%     { opacity: 1; }
}

/* ── table (two columns) ── */
.win-table {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.win-col {
  display: flex;
  flex-direction: column;
}

/* when the pilot illustration is hidden (no room beside the table), the table
   rows stretch to fill the WHOLE grid row — two equal columns, fluid cells.
   `.illus-hidden` is toggled by the fitIllus() script. */
.win-inner.illus-hidden .win-table { width: 100%; }
.win-inner.illus-hidden .win-col  { flex: 1 1 0; min-width: 0; }
.win-inner.illus-hidden .win-cell { width: 100%; }

.win-cell {
  width: 361px;
  max-height: 56px;            /* base state = VISIBLE */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: #121212;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease,
              margin-bottom 0.5s ease, padding 0.5s ease;
}
/* ENTER — a self-contained CSS animation (no requestAnimationFrame, which the
   browser pauses on a backgrounded tab and would leave rows stuck collapsed).
   Base state stays visible, so even if the animation never plays the row shows. */
@keyframes rowEnter {
  from { max-height: 0; opacity: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
  to   { max-height: 56px; opacity: 1; }
}
.win-cell.is-new { animation: rowEnter 0.5s ease; }
/* LEAVE — collapse, then the row is removed from the DOM via setTimeout */
.win-cell.is-collapsed {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.win-cell__cover {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 6px;
  object-fit: cover;
}
.win-cell__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.win-cell__name {
  color: #FFF;
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.16px;
  white-space: nowrap;
}
.win-cell__sub {
  color: rgba(255, 255, 255, 0.39);
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 106%;
  text-transform: uppercase;
  font-feature-settings: 'cv11' on;
}
.win-cell__amt {
  margin-left: auto;
  flex-shrink: 0;
  color: #FFF;
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.16px;
  font-feature-settings: 'cv11' on;
}

/* ── layered illustration (right) — fixed design stage (Figma px), anchored
   to the bottom-right; glow/rings/coins overflow the stage as needed ── */
.win-illus {
  position: absolute;
  right: -30px;
  top: -82px;               /* JS scales from right-top so the same framing holds
                               on tablet/adaptive too */
  width: 800px;
  height: 880px;
  pointer-events: none;
  z-index: 1;
}

/* background glow — the original Figma 03-07.svg (orange/yellow/red blurred
   ellipses baked in). Positioned so its bright #F7E30E core sits on the racer's
   right hand. Gentle slow breathing. */
.illus-glow-svg {
  position: absolute;
  left: -90px;              /* warm orange/yellow cluster sits at the chip hand
                               (lower-left); the red ellipse spreads to the right —
                               all 3 colours of the Figma glow stay visible */
  top: 66px;
  width: 1040px;
  height: auto;
  z-index: 1;
  animation: glowBreath 14s ease-in-out infinite;
  /* fade the bottom out so block 4's solid bg never makes a HARD cut on the
     glow — the section stays tight (footprint 880) and the glow just dissolves
     before the edge (clip falls at ~96–97% of the glow → in the transparent
     tail). */
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 94%);
          mask-image: linear-gradient(to bottom, #000 80%, transparent 94%);
}
@keyframes glowBreath {
  0%, 100% { transform: scale(1);    opacity: 0.92; }
  50%      { transform: scale(1.05); opacity: 1; }
}

/* concentric rings (720 + 338 from 03-06.svg) centred on the pilot's hand chip */
.illus-rings {
  position: absolute;
  left: -70px;
  top: 217px;
  width: 720px;
  height: 720px;
  z-index: 2;
}
/* pilot — exact Figma size, anchored near the TOP of the stage (head up high) */
.illus-pilot {
  position: absolute;
  right: 40px;
  top: 61px;
  width: 618.907px;
  height: 819.24px;
  z-index: 3;
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.55));
}

/* floating coins — parallax via JS (transform on the span); the inner img
   carries the static rotation from the design. */
.illus-coins { position: absolute; inset: 0; z-index: 4; }
.illus-coin { position: absolute; will-change: transform; }
.illus-coin img { display: block; width: 100%; height: 100%; }
.coin-1 { top: -30px; left: -121px; width: 338.749px; height: 342.27px; }  /* 03-02 — big, top-left */
.coin-1 img { transform: rotate(10.191deg); }
.coin-2 { left: 605px; top: 80px;  width: 265.143px; height: 178.905px; }   /* dark — top-right */
.coin-3 { left: 545px; top: 480px; width: 449px;     height: 265.723px; }   /* 03-4 — right */
.coin-4 { left: 15px;  top: 739px; width: 282.052px; height: 190.315px; }   /* dark — bottom */
.coin-4 img { transform: rotate(-39.845deg); }


/* ═══════════════════════════════════════════════════════
   SCREEN 4 — BONUS
════════════════════════════════════════════════════════ */

#screen4 {
  position: relative;
  z-index: 12;             /* above #screen3 (11) so it covers screen3's downward glow overflow */
  background: #050505;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0 0;   /* top gap from block 3: trimmed a bit more */
}

/* moving blurred glow in the bottom-right corner */
.bonus-glow {
  position: absolute;
  bottom: -303px;
  right: -320px;
  width: 700px;
  height: 640px;
  pointer-events: none;
  z-index: 0;
}
.bonus-glow span {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
/* warm golden/amber diffuse glow (no red) fading from the bottom-right corner —
   slow morphing (non-uniform scale + drift) so it breathes & changes shape */
.bonus-glow .glow-a { width: 720px; height: 660px; right: -10px;  bottom: 0;    background: radial-gradient(50% 50% at 50% 50%, rgba(249,167,42,0.42) 0%, rgba(249,167,42,0) 72%); animation: glowMorph 17s ease-in-out infinite; }
.bonus-glow .glow-b { width: 560px; height: 520px; right: -120px; bottom: -40px; background: radial-gradient(50% 50% at 50% 50%, rgba(214,120,36,0.38) 0%, rgba(214,120,36,0) 70%); animation: glowMorph 23s ease-in-out infinite reverse; }

@keyframes glowMorph {
  0%,100% { transform: translate(0,0)        scale(1,    1); }
  25%     { transform: translate(-26px,14px) scale(1.10, 0.92); }
  50%     { transform: translate(14px,-20px) scale(0.9,  1.14); }
  75%     { transform: translate(-10px,8px)  scale(1.06, 1.0); }
}

/* main two-column area */
.bonus-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: var(--gm);
  flex: 1;
}
.bonus-left {
  flex: 0 1 48vw;     /* basis 48vw but allowed to SHRINK so the 570px timer
                         column never overflows on laptops/tablets (900–1200px) */
  min-width: 0;
}
.bonus-left img {
  display: block;
  width: 132%;
  height: auto;
}
.bonus-rcol {
  width: 570px;
  flex-shrink: 0;
  max-width: 100%;
}

.bonus-title {
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-style: italic;
  font-size: 34px;
  font-weight: 500;
  line-height: 105%;
  letter-spacing: -0.17px;
  text-transform: uppercase;
}
.bonus-title .accent { color: #F9A72A; }

.bonus-sub {
  margin-top: 10px;
  color: #F9A72A;
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* countdown plaque */
.bonus-timer {
  position: relative;
  width: 570px;
  max-width: 100%;
  height: 176px;
  margin-top: 35px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  /* no backdrop-filter — solid bg behind, blur was invisible & memory-heavy */
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bonus-timer__pill {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: #121212;
  color: #FFF;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 106%;
  text-transform: uppercase;
  font-feature-settings: 'cv11' on;
  white-space: nowrap;
}
.bonus-clock {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-top: 12px;
}
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cd-num {
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-style: italic;
  font-size: 70px;
  font-weight: 600;
  line-height: 105%;
  letter-spacing: -0.35px;
  text-transform: uppercase;
}
.cd-lbl {
  color: #FFF;
  text-align: center;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  line-height: 106%;
  letter-spacing: 3.1px;
  text-transform: uppercase;
  font-feature-settings: 'cv11' on;
  padding-left: 3.1px;          /* compensate trailing letter-spacing for centering */
}
.cd-sep {
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-style: italic;
  font-size: 70px;
  font-weight: 600;
  line-height: 105%;
  transform: translateY(-6px);
}

.bonus-paid {
  margin-top: 22px;
  text-align: center;
  width: 570px;
  max-width: 100%;
  color: #FFF;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 106%;
  font-feature-settings: 'cv11' on;
}

.bonus-btn {
  display: flex;
  width: 570px;
  max-width: 100%;
  margin-top: 16px;
  padding: 20px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  background: radial-gradient(92.44% 118.75% at 50% 100%, #F9A72A 0%, #FE0312 100%);
  color: #FFF;
  text-align: center;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 106%;
  letter-spacing: -0.12px;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 0.25s ease, box-shadow 0.25s ease;
}
.bonus-btn:hover {
  filter: brightness(1.07);
  box-shadow: 0 14px 36px rgba(255, 92, 16, 0.5), 0 0 24px rgba(255, 150, 45, 0.4);
}

/* footer */
.bonus-divider {
  position: relative;
  z-index: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.13);
  margin: 56px 0 0;            /* edge to edge — full screen width */
}
.bonus-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--gm) 30px;
}
.bonus-copy {
  color: #FFF;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 106%;
  text-transform: uppercase;
}
.bonus-links {
  display: flex;
  align-items: center;
  gap: 40px;
}
.bonus-links a {
  color: #FFF;
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 106%;
  text-decoration: none;
  transition: color 0.2s;
}
.bonus-links a:hover { color: #F9A72A; }
.bonus-18 {
  height: 34px;
  width: auto;
  display: block;
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE — adapt for tablet & mobile
════════════════════════════════════════════════════════ */

/* touch devices: restore native cursor, drop the custom one */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  #cursor-dot, #cursor-ring { display: none; }
}

/* ≤1280 — tighten the grid margin */
/* below the 1920 design width, shrink the grid margin so the centred win-inner
   reaches its 1520 cap (pilot stays full-size) — and the pilot scales down
   smoothly instead of jumping/disappearing on mid-size screens */
@media (max-width: 1919px) {
  :root { --gm: 80px; }
}

/* ≤1160 — block 4: the side-by-side image+form starts squeezing the image too
   hard (≈340px and under), so move them onto TWO ROWS — image on top, the
   bonus form (title + timer + button) centred below. Above 1160 it stays
   side-by-side (looks good ≈500px+ image). */
@media (max-width: 1160px) and (min-width: 901px) {
  .bonus-main {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 0 var(--gm);          /* equal side padding instead of right-only */
  }
  .bonus-left {
    flex: none;
    width: 100%;
    max-width: 640px;              /* keep the image a tidy banner, centred */
    display: flex;
    justify-content: center;
  }
  .bonus-left img { width: 100%; } /* contain (no left-bleed) when centred */
  .bonus-rcol { width: 100%; max-width: 570px; }   /* form keeps its design width */
}

/* ≤900 — tablet / large phone: stack the multi-column blocks */
@media (max-width: 900px) {
  :root { --gm: 40px; }

  /* top bar — hide the nav pill, keep logo + CTA */
  #mainNav { display: none; }
  #topBar { padding: 14px var(--gm); }

  /* hero */
  .hero-sticky { padding-top: 120px; }
  .hero-title { width: auto; max-width: 92vw; font-size: 40px; }
  .hero-buttons { flex-wrap: wrap; justify-content: center; }

  /* block 2 — turn the horizontal track into a vertical stack */
  #screen2 { height: auto !important; }
  .adv-sticky { position: static; height: auto; overflow: visible; padding: 100px var(--gm) 30px; }   /* bottom gap to block 3: ÷2 (was 60) */
  .adv-head { position: static; width: auto; margin-bottom: 28px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .adv-track { position: static; transform: none !important; flex-direction: column; width: auto; height: auto; padding: 0; gap: 20px; }
  .adv-card { width: 100%; max-width: 520px; }
  .adv-card--lg .adv-plaque { width: 100%; height: auto; aspect-ratio: 592 / 436; }
  .adv-card--sm .adv-plaque { width: 100%; height: auto; aspect-ratio: 288 / 259; }
  /* fluid images — drop the fixed-px placement used on desktop */
  .adv-card--lg .adv-plaque img,
  .adv-card--sm .adv-plaque img { position: absolute; inset: 0; left: 0; width: 100%; height: 100%; transform: none; object-fit: cover; }
  .adv-card--trophy .adv-plaque img,
  .adv-card--coins  .adv-plaque img,
  .adv-card--gift   .adv-plaque img { object-fit: contain; padding: 22px; }

  /* block 3 — single column table, hide the big illustration */
  #screen3 { min-height: 0; margin-top: 0; padding: 50px var(--gm) 18px; }   /* top gap from block 2 ÷2 (was 100); bottom gap to block 4 ÷~2 (was 39); reset desktop negative margin */
  .win-illus { display: none; }
  .win-table { flex-direction: column; gap: 10px; }
  .win-col { width: 100%; }
  .win-cell { width: 100%; }
  .win-title { font-size: 34px; }

  /* block 4 — stack image over content */
  #screen4 { min-height: 0; padding: 28px 0 0; }   /* top gap from block 3 ÷~2.3 (was 65) */
  .bonus-main { flex-direction: column; align-items: stretch; gap: 32px; padding: 0 var(--gm); }
  .bonus-left { width: 100%; }
  .bonus-rcol { width: 100%; }
  .bonus-title { font-size: 30px; }
  .bonus-timer, .bonus-paid, .bonus-btn { width: 100%; }
  .bonus-footer { flex-direction: column; gap: 18px; align-items: flex-start; }
  .bonus-glow { right: -160px; }
}

/* ≤600 — phones */
@media (max-width: 600px) {
  :root { --gm: 16px; }

  /* keep the top CTA from crowding */
  .btn-top-cta { padding: 12px 13px; font-size: 11px; }

  .hero-title { font-size: 30px; }
  .hero-sub { font-size: 13px; }
  .btn-skew { height: 52px; padding: 0 24px; }

  /* race panel — cards are already fluid (flex:1 1 0), so NO scale here:
     a transform:scale shrank the row and left empty space on the right,
     making the cards look like they didn't span the full width. */
  .race-panel { transform: none; }

  .adv-title, .win-title { font-size: 28px; }
  .adv-card__title { font-size: 18px; }

  /* bonus countdown — shrink to fit */
  .bonus-clock { gap: 8px; padding-top: 14px; }
  .cd-num, .cd-sep { font-size: 44px; }
  .cd-lbl { font-size: 9px; letter-spacing: 2px; padding-left: 2px; }
  .bonus-timer { height: 150px; }
  .bonus-title { font-size: 26px; }
  .bonus-links { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* very small phones — countdown stays on one line */
@media (max-width: 380px) {
  .cd-num, .cd-sep { font-size: 36px; }
  .bonus-clock { gap: 5px; }
}


/* the illustration is scaled to fit (both width right-of-table & height) by JS
   (fitIllus) — origin bottom-right so the pilot stays anchored there */
.win-illus { transform-origin: right top; }


/* ═══════════════════════════════════════════════════════
   MOBILE HAMBURGER (base — hidden on desktop)
════════════════════════════════════════════════════════ */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 101;
}
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  display: none;            /* desktop: fully hidden (shown ≤900) — avoids a dark
                               sliver peeking at the top from the slide transform */
  flex-direction: column;
  padding: 8px var(--gm) 16px;
  background: rgba(8, 8, 11, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateY(-130%);
  opacity: 0;
  visibility: hidden;             /* fully hidden when closed (no sliver through the bar) */
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s, visibility 0.35s;
  z-index: 99;
  pointer-events: none;
}
.mobile-menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-menu .nav-link {
  color: #fff;
  font-size: 15px;
  letter-spacing: 0;
  padding: 14px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.mobile-menu .nav-link:last-child { border-bottom: none; }


/* ═══════════════════════════════════════════════════════
   MOBILE / TABLET overrides (≤900)  — extends the earlier block
════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* top bar: hamburger instead of the pill */
  .burger { display: flex; }
  .mobile-menu { display: flex; }

  /* ── block 3: header back in normal flow at the grid, single table ── */
  .win-head { position: static; margin-bottom: 26px; }
  .win-inner { max-width: none; margin: 0; }
  .win-table { margin-top: 0; flex-direction: column; gap: 10px; }
  .win-col { width: 100%; }

  /* ── block 2: bigger gaps, images fill / contained without padding ── */
  .adv-track { gap: 40px; }
  .adv-card--trophy .adv-plaque img,
  .adv-card--gift   .adv-plaque img { object-fit: contain; padding: 0; }
  .adv-card--coins  .adv-plaque img { object-fit: cover;   padding: 0; }   /* «Быстрые выплаты» — full bleed */

  /* ── block 4: bonus image bleeds to the screen's LEFT edge ── */
  .bonus-left { margin-left: calc(-1 * var(--gm)); margin-right: calc(-1 * var(--gm)); }
  .bonus-left img { width: 118%; }
  /* footer: keep all links/age badge visible (wrap, no clipping) */
  .bonus-footer { flex-direction: column; align-items: flex-start; gap: 16px; }
  .bonus-links { flex-wrap: wrap; align-items: center; gap: 14px 22px; width: 100%; }

  /* ── block 1: speed cards = single row pinned to the bottom, full grid width ── */
  .race-panel { position: fixed; top: auto; bottom: 24px; left: 0; right: 0; width: auto; padding: 0 var(--gm); }
  .race-timer { display: none; }
  .race-cards { position: static; width: 100%; height: auto; display: flex; flex-direction: row; gap: 8px; }
  .race-card {
    position: static !important;
    transform: none !important;
    width: auto; flex: 1 1 0; min-width: 0; height: auto;
    padding: 10px 8px;
    flex-direction: column; align-items: center; gap: 8px;
    border-radius: 10px;
  }
  .race-card .corner { display: none; }
  .race-card__top { flex-direction: column; align-items: center; gap: 4px; width: 100%; }
  .race-card__logo { height: 18px; max-width: 90%; }
  .race-card__speed { gap: 3px; align-items: baseline; }
  .race-card__speed .spd { font-size: 13px; }
  .race-card__speed .unit { font-size: 9px; }
  .race-card__bar { display: none; }   /* no room for the bar in a 4-up row */
}


/* hero CTA buttons fit one row on phones */
@media (max-width: 900px) {
  .hero-buttons { flex-wrap: nowrap; gap: 10px; width: 100%; justify-content: center; }
  .btn-skew { flex: 0 1 auto; min-width: 0; }
}
@media (max-width: 600px) {
  .hero-buttons { gap: 8px; }
  .btn-skew { height: 46px; padding: 0 14px; }
  .btn-skew__inner { gap: 8px; }
  .btn-skew__label { font-size: 10px; letter-spacing: 0; white-space: nowrap; }
  .btn-skew svg { width: 18px; height: auto; }
}


/* ── mobile: one table only + fluid full-width speed cards ── */
@media (max-width: 900px) {
  /* when the two columns stack into one, drop the 2nd — keep a single table */
  #winColRight { display: none; }

  /* speed-card row stretches the full grid width; cards share it equally (fluid) */
  .race-panel { width: auto; }
  .race-cards { width: 100%; }
  .race-card  { width: auto; flex: 1 1 0; min-width: 0; }
}


/* ── more mobile fixes ── */
@media (max-width: 900px) {
  /* block 3: section hugs the table (illustration hidden) — no big empty gap
     before block 4. The desktop fallback min-height:560 was leaving a gap. */
  .win-inner { min-height: auto; }

  /* speed cards stretch (almost) edge-to-edge across the screen */
  .race-panel { padding: 0 10px; }

  /* block 4 footer fully centred — incl. the © line */
  .bonus-footer { align-items: center; text-align: center; }
  .bonus-links  { align-items: center; justify-content: center; }

  /* block 2 advantage cards (and header) centred on tablets */
  .adv-head  { align-items: center; text-align: center; }
  .adv-track { align-items: center; }
}