:root{
  --bg:#11141c;
  --bg2:#0b0e16;
  --fg:#e7e7ea;
  --muted:#9aa0ad;
  --accent:#ff6a1a;
  --accent-2:#ff9b4a;
  --card:#171a23;
  --ring:#2a2f3a;
  --shine:rgba(255,106,26,.18);
  --shadow:0 20px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
}

*{box-sizing:border-box; scroll-behavior: smooth;}
html,body{height:100%}
body{
  margin:0;

  color:var(--fg);
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-color: #1A191E;
  overflow-x: hidden;
}

.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
.hero{
  position: relative; 
  overflow: hidden;
}

.hero-stars{
  position: absolute;
  top: 40px;
  right: 40px;
  width: 220px;
  height: 160px;
  pointer-events: none;
  z-index: 0; 
  opacity: .9;
}

.decorativeBlur{
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0;
    left: -50px;
    background-color: #ff6a1a;
    filter: blur(100px);
    opacity: .3;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
   
    -webkit-filter: blur(100px);
}

/* базовая форма — ромб (повёрнутый квадрат) */
.hero-stars .star{
  position: absolute;
  width: 74px; height: 74px;
  transform: rotate(45deg);
  border-radius: 10px;
  /* стеклянно-матовый фон как на примере */
  background:
    radial-gradient(120% 120% at 50% 30%, rgba(255,160,80,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  /* цветовой тон */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 10px 24px rgba(0,0,0,.35),
    0 0 24px rgba(120,60,20,.25);
  /* тёплый коричневый обвод */
  outline: 1px solid rgba(210,110,40,.55);
  outline-offset:-1px;
}

/* крупная звезда (слева) */
.hero-stars .star{
  left: 0; top: 40px;
  background:
    radial-gradient(100% 100% at 60% 20%, rgba(255,140,60,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
}

/* меньшая — смещена вправо/вверх */
.hero-stars .star--sm{
  width: 58px; height: 58px;
  right: 8px; top: 0;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
  opacity:.85;
}

/* лёгкая текстура внутри (точечки), как на рефе */
.hero-stars .star::after{
  content:"";
  position:absolute; inset:0; border-radius:10px;
  background:
    radial-gradient(1px 1px at 20% 25%, rgba(80,40,20,.25) 50%, transparent 51%) repeat,
    radial-gradient(1px 1px at 70% 60%, rgba(80,40,20,.25) 50%, transparent 51%) repeat;
  background-size: 12px 12px, 14px 14px;
  mix-blend-mode: overlay;
  opacity:.25;
  pointer-events:none;
}


/* HERO layout */
.heroContainer{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:36px;
  align-items: center;
  z-index:2;
}

.hero__title{
  font-family: Orbitron, Manrope, sans-serif;
  font-weight:800;
  line-height:1.02;
  letter-spacing:.02em;
  font-size: clamp(34px, 4.4vw, 56px);
  text-transform:uppercase;
  margin:14px 0 22px;
}
.hero__title .accent{
  display:block;
  color:transparent;
  -webkit-text-stroke: 1px var(--accent-2);
  text-stroke:1px var(--accent-2);
  text-shadow: 0 0 18px var(--shine);
}
.inline-img{
  display:inline-block; vertical-align:middle; transform:translateY(-4px);
  margin:0 10px;
}
.inline-img img{ width:76px; height:42px; object-fit:cover; border-radius:26px; border:1px solid rgba(255,255,255,.14)}

/* Timer */
.timer{
    margin-bottom: 30px;
}
.timer__label{
  color:var(--muted);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  margin:18px 0 10px;
}
.timer__grid{
  display:flex; align-items:flex-end; gap:12px;
  font-family: Orbitron, Manrope, sans-serif;
}
.tbox{
  background: linear-gradient(180deg, #141823, #0f131b);
  border-radius:14px;
  padding:14px 18px 10px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  min-width:90px; text-align:center;
}
.tbox .num{
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight:800; display:block;
  color: var(--accent-2);
  text-shadow:0 0 20px var(--shine);
}
.tbox .cap{ font-size:11px; text-transform:uppercase; color:var(--muted); letter-spacing:.2em }
.dots{ font-size:32px; line-height:1; color:var(--accent-2); transform:translateY(-4px) }

/* Mini row */
.mini-row{ display:flex; gap:26px; align-items:flex-start; margin:32px 0 0; flex-wrap:wrap }
.mini{
  background: var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:14px;
  box-shadow: var(--shadow);
}
.mini--chart{
  width:160px; text-align:center;
}
.mini--chart svg{ width:132px; height:132px; }
.mini--chart figcaption{ font-size:12px; color:var(--muted); margin-top:8px }
.ring{ fill:none; stroke:var(--ring); stroke-width:16 }
.seg{ fill:none; stroke-width:16; stroke-linecap:butt; transform:rotate(-90deg); transform-origin:50% 50% }
.seg-a{ stroke:var(--accent-2); stroke-dasharray:36 64 }
.seg-b{ stroke:#ff6a1a; stroke-dasharray:28 72; stroke-dashoffset:-36 }
.seg-c{ stroke:#f1b27b; stroke-dasharray:18 82; stroke-dashoffset:-64 }

.mini--card{ width:180px; text-align:center; }
.mini--card .thumb{
  width:100%; aspect-ratio:1/1; border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(100% 100% at 50% 0%, rgba(142,107,255,.12), transparent 55%), #10131b;
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.mini--card img{ width:86%; height:86%; object-fit:contain; display:block }
.mini--card figcaption{ font-size:13px; color:#cfd3dc; margin-top:10px }

/* RIGHT */
.hero__right{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:22px }
.oval-frame{
  width:min(520px, 90%); aspect-ratio: 1 / 1.28;
  background: radial-gradient(120% 100% at 60% 0%, rgba(255,106,26,.08), transparent 50%), #0c0f17;
  border-radius:40%/30%;
  position:relative; display:grid; place-items:center;
  border:2px solid rgba(255,255,255,.04);
  box-shadow:
    0 0 0 4px rgba(255,106,26,.25) inset,
    0 0 0 10px rgba(255,106,26,.08) inset,
    0 0 60px rgba(255,106,26,.25);
}
.oval-frame::before{
  content:""; position:absolute; inset:16px;
  border-radius:40%/30%;
  border:2px solid var(--accent-2);
  opacity:.85; pointer-events:none;
}
.oval-frame img{ width:82%; height:82%; object-fit:contain; filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)) }

.stats{
  display:flex; gap:36px; flex-wrap:wrap; justify-content:center; margin-top:6px
}
.stat{ display:flex; flex-direction:column; align-items:flex-start }
.stat .val{
  font-family: Orbitron, Manrope, sans-serif;
  font-weight:800; font-size: clamp(20px, 2.8vw, 26px);
  color: var(--accent-2); text-shadow:0 0 18px var(--shine)
}
.stat .cap{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.16em }

/* RIBBONS */

.marquee{
  --h: 44px;
  height:var(--h); line-height:var(--h);
  border-radius:10px;
  background: linear-gradient(180deg, #171a23, #0f1118);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden; white-space:nowrap; position:relative;
}
.marquee span{
  display:inline-block; padding:0 24px; font-family: Orbitron, Manrope, sans-serif;
  font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  animation:scroll 12s linear infinite;
  color:#e9ebf3;
}
.marquee span::after{
  content:"✦"; margin-left:24px; color:var(--accent-2)
}
@keyframes scroll{ to{ transform:translateX(-100%) } }

/* Responsive */
@media (max-width: 1024px){
  .hero{ grid-template-columns: 1fr; padding-bottom:140px }
  .hero__right{ order:-1 }
  .oval-frame{ margin:0 auto }
  .stats{ gap:28px }
}
@media (max-width: 540px){
  .mini-row{ gap:16px }
  .mini--card{ width:150px }
  .mini--chart{ width:140px }
  .marquee{ --h:38px }
  .wrap{ padding:14px }
}


.tape-section{
  position:relative;
  width:100%;
  height:220px; /* можно регулировать высоту секции */
  background: transparent;
  overflow:hidden;
}


/* ====== FULL-WIDTH TAPES ====== */
.tapes-full{
  position:relative;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  height:300px;                
  overflow:hidden;
  background:transparent;
}

/* общий стиль ленты — «стеклянная», полупрозрачная */
.tape{
  position:absolute;
  left:-10vw;                  /* чтобы точно перекрыть край */
  width:120vw;                 /* запас по ширине */
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;

  /* background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.18)),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 38%, rgba(0,0,0,.45) 62%, rgba(255,255,255,.35) 100%);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 8px 22px rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px); */
   backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background-color: rgba(255,255,255,.1);
}

/* внутренние "блики" по краям ленты */
.tape::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:10px;
  background:
    radial-gradient(120% 100% at 50% -20%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(120% 100% at 50% 120%, rgba(0,0,0,.25), transparent 55%);
  pointer-events:none;
}

/* тексты */
.tape-text{
  margin:0;
  padding:0 24px;
  width:100%;
  text-align:center;
  white-space:nowrap;          /* одна линия */
  font: 700 16px/1.1 "Orbitron", system-ui, sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#ffffff;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
  opacity:.98;
}

/* оранжевые "звезды" */
.tape-text .star{
  color:#ff6a1a;
  margin:0 .75ch;
  font-size: 24px;
  filter: drop-shadow(0 0 6px rgba(255,106,26,.45));
}

/* положение/угол лент */
.t2{ transform:rotate(2.5deg); top:94px; -webkit-transform:rotate(2.5deg); -moz-transform:rotate(2.5deg); -ms-transform:rotate(2.5deg); -o-transform:rotate(2.5deg); }
.t3{ transform:rotate(-6deg); top:100px; -webkit-transform:rotate(-6deg); -moz-transform:rotate(-6deg); -ms-transform:rotate(-6deg); -o-transform:rotate(-6deg); }

/* мягкий блик в месте пересечения лент */
.tapes-full::after{
  content:"";
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  width:34vw; height:34vw; max-width:520px; max-height:520px;
  background: radial-gradient(closest-side, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
  pointer-events:none;
  filter: blur(6px);
  opacity:.6;
}

/* адаптив */
@media (max-width: 768px){
  .tapes-full{ height:200px }
  .tape{ height:42px }
  .t1{ top:18px } .t2{ top:86px } .t3{ top:154px }
  .tape-text{ font-size:14px; letter-spacing:.16em }
}
@media (max-width: 480px){
  .tapes-full{ height:180px }
  .tape{ height:38px }
  .t1{ top:16px } .t2{ top:78px } .t3{ top:140px }
  .tape-text{ font-size:13px; letter-spacing:.14em }
}


/*   НАСТРОЙКА SCROLL-BAR   */
::-webkit-scrollbar {
    width: 0.5em;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #FF9B4A;
}


::-webkit-scrollbar-thumb:active {
    background-color: #FF9B4A;
}


/* === GAME COLLECTIONS (no slider) === */
.game-collection{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:56px 20px 70px;
  color:#e9ebf3;
  border-radius:18px;
}

.gc__head{
  display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.gc__title{
  font-family: Orbitron, system-ui, sans-serif;
  font-weight:800;
  letter-spacing:.02em;
  margin:0;
  font-size: clamp(26px, 3.2vw, 36px);
  text-transform:uppercase;
}
.gc__title .accent{ color:#ff6a1a; text-shadow:0 0 18px rgba(255,106,26,.25); }

.gc__filters{ display:flex; gap:10px; }
.pill{
  height:40px; padding:0 18px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  color:#dfe3ec; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.pill--active{
  border-color: rgba(255,106,26,.6);
  box-shadow: 0 0 0 1px rgba(255,106,26,.25) inset, 0 0 24px rgba(255,106,26,.25);
  color:#fff;
}

.gc__lead{
  max-width:560px; margin:12px 0 26px; color:#aeb4c3; line-height:1.6;
}

/* rail with overlapping circle cards */
.gc__rail{
  position:relative; 
  display:flex; 
  justify-content: center;
  align-items:center;
}
.chev{
  width:56px; height:56px; display:grid; place-items:center; opacity:.85;
}
.chev svg{ width:28px; height:28px; fill:none; stroke:#ff6a1a; stroke-width:2.4; filter: drop-shadow(0 0 10px rgba(255,106,26,.3)); }

.gc__cards{
  list-style:none; margin:0; padding:0; display:flex; align-items:flex-end; justify-content:center; gap: clamp(14px, 2.4vw, 26px);
}
.gc-card{
  width: clamp(120px, 18vw, 170px); aspect-ratio:1/1; border-radius:50%;
  position:relative; display:grid; place-items:center; flex:0 0 auto;
  transform: translateY(14px);
}
.gc-card--center{
  width: clamp(160px, 24vw, 220px);
  z-index:3; transform: translateY(0);
}

.gc-card figure{
  position:relative; width:100%; height:100%; margin:0; border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.06), transparent 60%), #0f131b;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 10px 24px rgba(0,0,0,.45);
  overflow:hidden;
}

/* glowing colored rings (like screenshot) */
.ring{
  position:absolute; inset:-2px; border-radius:50%;
  box-shadow:
    0 0 0 6px rgba(255,255,255,.02) inset,
    0 16px 32px rgba(0,0,0,.45) inset;
}
.ring--1{ background: radial-gradient(120% 120% at 50% 0%, rgba(255,106,26,.25), transparent 58%), conic-gradient(#ff6a1a, #f7b26a, #ff6a1a); filter: blur(.4px); opacity:.85 }
.ring--2{ background: conic-gradient(#b86bff, #68e1ff, #b86bff); opacity:.85 }
.ring--3{ background: conic-gradient(#ff7a5c, #ffb36b, #ff7a5c); opacity:.95 }
.ring--4{ background: conic-gradient(#79c4ff, #d2f58a, #79c4ff); opacity:.9 }
.ring--5{ background: conic-gradient(#ffd36e, #ff8cc9, #ffd36e); opacity:.9 }
.ring--6{ background: conic-gradient(#ffa86a, #ffd56a, #ffa86a); opacity:.9 }

.gc-card img{
  position:relative; z-index:1;
  width:95%; height:95%; object-fit:contain;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.55));
}

/* responsive tweaks */
@media (max-width: 900px){
  .gc__rail{ grid-template-columns: 36px 1fr 36px }
  .chev{ width:36px; height:36px }
  .chev svg{ width:22px; height:22px }
}
@media (max-width: 620px){
  .gc__filters{ width:100%; order:2 }
  .gc__head{ gap:16px }
  .gc__lead{ max-width:none }
  .gc__cards{ gap:14px }
}


/*  */
/* Section wrapper */
.hot-cards{
  max-width:1200px; margin:0 auto; padding:56px 20px 70px; color:#e9ebf3;
 
}
.hot-title{
  margin:0 0 22px; font-family: Orbitron, system-ui, sans-serif;
  font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  font-size: clamp(28px, 3.8vw, 42px);
}
.hot-title .accent{ color:#ff6a1a; text-shadow:0 0 18px rgba(255,106,26,.25) }

.hot-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
}

/* Card */
.hot-card{
  background: linear-gradient(180deg, #171a23, #0f1118);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  display:flex; flex-direction:column;
}

/* Head */
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 8px;
}
.owner{ display:flex; align-items:center; gap:10px; position:relative }
.owner-ava{ width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.2) }
.owner-info{ display:flex; flex-direction:column; line-height:1.1 }
.owner .cap{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#9aa0ad }
.owner .name{ font-size:12px; color:#e9ebf3 }
.vmark{
  width:10px; height:10px; border-radius:50%; background:#4cc9ff; margin-left:2px;
  box-shadow:0 0 0 2px #10131a;
}
.more{
  background:transparent; border:0; color:#80879a; font-weight:700; font-size:16px; cursor:default;
}

/* Hero image */
.card-hero{
  margin:10px 14px 0; border-radius:14px; overflow:hidden;
  background: radial-gradient(80% 100% at 50% 0%, rgba(255,255,255,.06), transparent 55%), #0e1219;
  border:1px solid rgba(255,255,255,.08);
  height:min(260px, 28vw); display:grid; place-items:center;
}
.card-hero img{
  width:100%;
  height:90%;
  object-position: center;
  object-fit:contain;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.55));
  -webkit-filter: drop-shadow(0 12px 16px rgba(0,0,0,.55));
}
.card-hero-2{
    height: 70% !important;
    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    -o-transform: translateY(-50px);
}

.card-hero-3{
    height: 90% !important;
    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    -o-transform: translateY(-50px);
}
/* Name + timer */
.card-main{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px 4px;
}
.item-name{ margin:0; font-size:16px; font-weight:800; letter-spacing:.02em }
.timer{
  font-family: Orbitron, system-ui, sans-serif;
  color:#ff6a1a; font-weight:800; letter-spacing:.06em;
}

.card-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px 14px;
}
.metric .cap{ display:block; font-size:11px; color:#9aa0ad; text-transform:uppercase; letter-spacing:.18em }
.metric .val{ display:block; margin-top:4px; font-weight:800; font-size:18px; color:#e9ebf3 }

.btn-cta{
 place-items:center; font-size: 24px; 
  padding:15px 25px; border-radius:10px;
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.08em; text-transform:capitalize;
  background: linear-gradient(180deg, #ff8a3d, #ff6a1a);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 24px rgba(255,106,26,.35), inset 0 0 0 1px rgba(255,255,255,.2);
}

/* Responsive */
@media (max-width: 1024px){
  .hot-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 640px){
  .hot-grid{ grid-template-columns: 1fr }
  .card-hero{ height: 54vw }
}


/* ===== GAME MODES ===== */
.game-modes{
  max-width:1200px; margin:0 auto; padding:56px 20px 70px; color:#e9ebf3;
  border-radius:18px;
}
.gm__title{
  margin:0; font-family:Orbitron,system-ui,sans-serif; font-weight:800; text-transform:uppercase;
  font-size: clamp(26px, 3.2vw, 36px);
}
.gm__lead{ color:#aeb4c3; margin:10px 0 24px; max-width:620px }
.gm__grid{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr) }

.gm-card{
  background: linear-gradient(180deg,#171a23,#0f1118);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:16px; text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  display:flex; flex-direction:column; gap:10px;
}
.gm-card--pop{ box-shadow:0 22px 50px rgba(255,106,26,.22), inset 0 0 0 1px rgba(255,255,255,.05) }
.gm-hero{
  border-radius:14px; background:radial-gradient(80% 100% at 50% 0%,rgba(255,255,255,.06),transparent 55%),#0e1219;
  border:1px solid rgba(255,255,255,.08); height:min(220px,24vw); display:grid; place-items:center; overflow:hidden;
}
.gm-hero img{ width:86%; height:86%; object-fit:contain; filter: drop-shadow(0 12px 16px rgba(0,0,0,.55)) }
.gm-card h3{ margin:4px 0 0; font-size:18px; font-weight:800 }
.gm-card p{ margin:0; color:#aeb4c3 }
.gm-badge{
  position:absolute; transform:translate(10px, -10px);
  background: linear-gradient(180deg,#ff8a3d,#ff6a1a); color:#fff; font-weight:800; letter-spacing:.08em;
  height:28px; padding:0 12px; border-radius:8px; display:inline-grid; place-items:center; font-size:12px;
  border:1px solid rgba(255,255,255,.18); box-shadow:0 10px 24px rgba(255,106,26,.35);
}
.gm-badge--hot{ background: linear-gradient(180deg,#ff9b4a,#ff6a1a) }
.gm-card{ position:relative }

/* ===== LEADERBOARD ===== */
.leaderboard{
  max-width:1200px; margin:0 auto; padding:56px 20px 70px; color:#e9ebf3;
 
  border-radius:18px;
}
.lb__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px }
.lb__title{ margin:0; font-family:Orbitron,sans-serif; font-weight:800; text-transform:uppercase; font-size: clamp(26px,3.2vw,36px) }
.btn-ghost{
  display:inline-grid; place-items:center; height:40px; padding:0 16px; border-radius:10px;
  color:#e9ebf3; text-decoration:none; font-weight:800; letter-spacing:.08em; text-transform:capitalize;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  border:1px solid rgba(255,255,255,.18);
}
.lb__table2{
    margin-top:10px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08)
}
.lb__table{ margin-top:10px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08) }
.lb-row{
  display:grid; grid-template-columns:60px 1fr 140px 140px 90px;
  gap:12px; align-items:center; padding:12px 14px;
  background: linear-gradient(180deg,#171a23,#0f1118);
  border-top:1px solid rgba(255,255,255,.06);
}
.lb-row--head{
  background: linear-gradient(180deg,#1a1f2a,#121620);
  font-size:12px; text-transform:uppercase; letter-spacing:.18em; color:#9aa0ad; border-top:none;
}
.lb-user{ display:flex; align-items:center; gap:10px }
.lb-user img{ width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.2); object-fit:cover }
.lb-score{ color:#ff6a1a; font-family:Orbitron,sans-serif; font-weight:800 }

@media (max-width:860px){
  .lb-row{ grid-template-columns:50px 1fr 100px 110px 70px }
}
@media (max-width:640px){
  .lb-row{ grid-template-columns:40px 1fr 90px 100px 60px; font-size:14px }
}

/* ===== JOIN CTA ===== */
.join-cta{
  max-width:1200px; margin:0 auto; padding:56px 20px 70px; color:#e9ebf3;
 
  border-radius:18px;
}
.join__inner{ display:grid; grid-template-columns: 1.05fr .95fr; gap:24px; align-items:center }
.join__title{ margin:0 0 8px; font-family:Orbitron,sans-serif; font-weight:800; text-transform:uppercase; font-size: clamp(26px,3.2vw,36px) }
.join__text{ margin:0 0 16px; color:#aeb4c3; max-width:560px }
.join__meta{ display:flex; gap:22px; flex-wrap:wrap; margin-bottom:18px }
.join__meta .cap{ display:block; font-size:11px; color:#9aa0ad; text-transform:uppercase; letter-spacing:.16em }
.join__meta b{ display:block; margin-top:4px; font-family:Orbitron,sans-serif; font-weight:800 }
.join__actions{ display:flex; gap:12px; flex-wrap:wrap }

.join__art{
  position:relative; border-radius:22px; height:min(360px,36vw); display:grid; place-items:center;
  background: radial-gradient(100% 100% at 50% 0%, rgba(255,255,255,.06), transparent 55%), #0e1219;
  border:1px solid rgba(255,255,255,.08); overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
}
.art-ring{
  position:absolute; inset:-6px; border-radius:24px;
  background: conic-gradient(#ff6a1a, #f7b26a, #ff6a1a);
  opacity:.25; filter: blur(1px);
}
.join__art img{ position:relative; z-index:1; width:86%; height:86%; object-fit:contain; filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)) }

@media (max-width:960px){
  .gm__grid{ grid-template-columns:1fr 1fr }
  .join__inner{ grid-template-columns:1fr; }
  .join__art{ order:-1; height:56vw }
}
@media (max-width:560px){
  .gm__grid{ grid-template-columns:1fr }
}

/* ==== PROMO CTA ==== */
.promo-cta{
  max-width:1200px; margin:0 auto; padding:50px 20px;
}
.promo__inner{
  position:relative;
  background: linear-gradient(180deg,#ff8a3d,#ff6a1a);
  border-radius:18px;
  display:flex; align-items:center; justify-content:space-between;
  overflow:hidden;
  padding:30px 40px;
  box-shadow:0 16px 36px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.15);
}
.promo__char{
  width:160px; flex-shrink:0;
}
.promo__char img{
  width:100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.45));
  -webkit-filter: drop-shadow(0 8px 14px rgba(0,0,0,.45));
}
.promo__content{
  text-align:center; color:#fff; flex:1;
}
.promo__title{
  font-family:Orbitron,sans-serif;
  font-size:clamp(20px,3vw,28px);
  font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; line-height:1.3;
  margin:0 0 18px;
}
.btn-white{
  display:inline-grid;
  place-items:center;
  height:44px;
  padding:0 28px;
  border-radius:10px;
  border:1px solid #fff;
  background:transparent;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  transition:.25s;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  -ms-border-radius:10px;
  -o-border-radius:10px;
}
.btn-white:hover{
  background:#fff; color:#ff6a1a;
}

/* адаптив */
@media(max-width:768px){
  .promo__inner{ flex-direction:column; gap:20px; padding:30px 20px }
  .promo__char{ width:120px }
}





.header{
    font-family: Orbitron, Manrope, sans-serif;
    font-weight: 500;
}
.headerWrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.nav{

}
.ham{
    display: none;
}

.nav ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding-left: 0;
    margin: 0;
}

.nav li{
    list-style: none;
}

.nav a{
    color: inherit;
    text-decoration: none;
    transition: .3s all linear;
    -webkit-transition: .3s all linear;
    -moz-transition: .3s all linear;
    -ms-transition: .3s all linear;
    -o-transition: .3s all linear;
    font-size: 18px;
}

.nav a:hover{
    color: #FF6A1A;
}

.stopScroll{
    overflow: hidden;
}
.logo{
    position: relative;
    z-index: 1000;
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    text-decoration: none;
}

.logo-text span{
    color: #FF6A1A;
}
@media screen and (max-width: 800px) {
    .nav{
        position: fixed;
        inset: 0;
        background-color: #111;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        z-index: 999;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -webkit-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -moz-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -ms-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -o-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
}
    .nav.active{
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
}

    .nav ul{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .ham {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 400ms;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: flex;
        z-index: 1000;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#fff;
  stroke-width:5.5;
  stroke-linecap:round;
}
.ham7 .top {
  stroke-dasharray: 40 82;
}
.ham7 .middle {
  stroke-dasharray: 40 111;
}
.ham7 .bottom {
  stroke-dasharray: 40 161;
}
.ham7.active .top {
  stroke-dasharray: 17 82;
  stroke-dashoffset: -62px;
}
.ham7.active .middle {
  stroke-dashoffset: 23px;
}
.ham7.active .bottom {
  stroke-dashoffset: -83px;
}
.ham8 .top {
  stroke-dasharray: 40 160;
}
}


.f-top{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.f-social{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    i{
        color: #ff6a1a;
    }
}

   .intoLinks {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-align: center;
        span {
          width: 8px;
          height: 8px;
          background-color: #ff6a1a;
          border-radius: 50%;
        }
        a {
          transition: 0.3s all linear;
          transform-origin: left;
          text-decoration: none;
          color: #fff;
        }
        a:hover {
          text-decoration: underline;
        }
      }
      @media screen and (max-width: 750px) {
        .intoLinks {
          flex-direction: column;
          span {
            display: none;
          }
        }
      }

.reserved{
    text-align: center;
    opacity: .5;
}

.site-footer{
    box-shadow: 0 -6px 18px rgba(255, 106, 26, 0.1);
    padding-top: 20px;
}



@media screen and (max-width:800px) {
    .gc__cards{
        display: flex;
        flex-wrap: wrap;
    }
    .gc-card--center{
        width: 120px;
        transform: translateY(14px);
        -webkit-transform: translateY(14px);
        -moz-transform: translateY(14px);
        -ms-transform: translateY(14px);
        -o-transform: translateY(14px);
    }
    .hero__right{
        display: none;
    }
    .timer__grid{
        max-width: 90%;
    }
    .tapes-full{
        display: none;
    }
    .gm-hero{
        height: 200px;
    }

    .lb__table{
    }
    .ren{
        display: none;
    }
    .lb-row{
        grid-template-columns: 40px 1fr 90px;
    }
    .join__art{
        display: none;
    }
    .hero-stars{
        display: none;
    }
    

}