/* ================================================================
   online-aviator-game.net — ASCENT
   Aviator BRAND palette (same brand ke saare domains par wahi rang).
   Dhaancha aur class naam is site ke apne hain — kisi sibling se copy nahi.
   Motion-led: scroll-linked rail, view()-driven reveals, self-drawing
   flight curve, travelling jet, multiplier ticker. Sab reduced-motion
   ke peeche guarded, aur content bina animation ke bhi poora dikhta hai.
   ================================================================ */

@font-face{font-family:Ascent;src:url(/fonts/Sora-var.woff2)format('woff2');
  font-weight:400 800;font-display:swap;font-style:normal}
@font-face{font-family:AscentText;src:url(/fonts/Manrope-var.woff2)format('woff2');
  font-weight:400 800;font-display:swap;font-style:normal}

:root{
  --night:#140B0E; --panel:#241419; --panel2:#2E1A20;
  --flare:#E52A3D; --flare-deep:#D0202F; --flare-dim:rgba(229,42,61,.38); --flare-wash:rgba(229,42,61,.10);
  --gold:#FFC43D; --gold-ink:#2A1A00;
  --chat:#25D366; --chat-ink:#04250F;
  --paper:#F6EEF0; --ash:#C4A9B0; --ash-dim:#9C838A;
  --hair:rgba(255,255,255,.10); --hair-lit:rgba(255,255,255,.20);
  --curve:14px; --curve-sm:9px;
  --climbfont:Ascent,"Segoe UI",system-ui,sans-serif;
  --readfont:AscentText,"Segoe UI",system-ui,-apple-system,sans-serif;
  --raise:0 10px 30px rgba(0,0,0,.45);
  --raise-hi:0 18px 46px rgba(0,0,0,.58);
}

/* ---- overflow guard: teeno zaroori (clip, hidden NAHI — sticky bacha rehta hai) ---- */
html{overflow-x:clip;scroll-behavior:smooth}
body{overflow-x:clip;max-width:100%}
main{max-width:100%;overflow-x:clip}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--night);color:var(--paper);
  font-family:var(--readfont);font-size:1rem;line-height:1.68;
  -webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}
a{color:var(--paper)}
h1,h2,h3,h4{font-family:var(--climbfont);line-height:1.2;font-weight:800;margin:0 0 .5em}
h1{font-size:clamp(1.75rem,4.4vw,2.7rem);letter-spacing:-.02em}
h2{font-size:clamp(1.3rem,2.8vw,1.85rem);margin-top:1.9em;letter-spacing:-.01em}
h3{font-size:clamp(1.05rem,2vw,1.22rem);margin-top:1.5em}
p{margin:0 0 1.05em}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);
  color:var(--gold-ink);padding:11px 17px;font-weight:800;border-radius:0 0 var(--curve-sm) 0}
.skip-link:focus{left:0}

.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 18px}
.narrow{width:100%;max-width:820px;margin:0 auto;padding:0 18px}

/* ================= scroll progress rail (scroll-linked) ================= */
.rail{position:fixed;top:0;left:0;height:3px;width:100%;z-index:120;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--flare),var(--gold))}
@supports (animation-timeline:scroll()){
  .rail{animation:railgrow linear both;animation-timeline:scroll(root)}
}
@keyframes railgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ================= header ================= */
.topbar{position:sticky;top:0;z-index:110;width:100%;max-width:100vw;
  background:rgba(20,11,14,.94);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--hair)}
.topbar-in{display:flex;align-items:center;gap:14px;min-height:62px}
.sig{display:flex;align-items:center;flex:0 0 auto;padding:6px 0}
.sig img{height:29px;width:auto;display:block}
.deck{display:flex;align-items:center;gap:20px;margin-left:auto}
.deck a{font-family:var(--climbfont);font-weight:600;font-size:.87rem;
  text-decoration:none;color:var(--ash);padding:11px 2px;white-space:nowrap}
.deck a:hover{color:var(--paper)}
.deck a[aria-current=page]{color:var(--gold)}
.gatebtn{display:none}

/* ---- :target overlay menu — ZERO JavaScript ---- */
.gate{position:fixed;inset:0;z-index:130;background:rgba(12,6,8,.97);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  visibility:hidden;opacity:0;transition:opacity .25s ease,visibility .25s ease}
.gate:target{visibility:visible;opacity:1}
.gate a{font-family:var(--climbfont);font-weight:700;font-size:1.16rem;
  color:var(--paper);text-decoration:none;padding:13px 20px;min-height:46px;
  display:flex;align-items:center;border-radius:var(--curve-sm)}
.gate a:hover{background:var(--flare-wash);color:var(--gold)}
.gate-x{position:absolute;top:16px;right:16px;width:46px;height:46px;
  border:1px solid var(--hair-lit);border-radius:50%;font-size:1.5rem;color:var(--paper);
  display:flex;align-items:center;justify-content:center;text-decoration:none}

/* ================= hero + self-drawing flight curve ================= */
.ascent{position:relative;overflow:hidden;padding:38px 0 30px;
  border-bottom:1px solid var(--hair)}
.aura{position:absolute;border-radius:50%;filter:blur(84px);pointer-events:none;z-index:0}
.aura.a1{width:340px;height:340px;background:var(--flare-dim);top:-110px;right:-40px}
.aura.a2{width:280px;height:280px;background:rgba(255,196,61,.13);bottom:-130px;left:-50px}
@supports (animation-timeline:scroll()){
  .aura{animation:drift 22s ease-in-out infinite alternate}
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-24px,18px,0)}}
.ascent>*{position:relative;z-index:1}

.climbcurve{display:block;width:100%;height:auto;max-width:560px;margin:20px auto 0;
  overflow:visible}
.climbcurve .trace{fill:none;stroke:var(--flare);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:640;stroke-dashoffset:0}
.climbcurve .under{fill:url(#ascFill);opacity:.9}
.climbcurve .jet{transform-box:fill-box;transform-origin:50% 50%}
.climbcurve .grid{stroke:var(--hair);stroke-width:1}
@media (prefers-reduced-motion:no-preference){
  .climbcurve .trace{animation:draw 3.4s ease-in-out infinite}
  .climbcurve .under{animation:fadeUnder 3.4s ease-in-out infinite}
  .climbcurve .jet{offset-path:path("M14 176 C 96 172, 168 150, 226 112 S 320 34, 384 14");
    offset-rotate:auto;animation:fly 3.4s ease-in-out infinite}
}
@keyframes draw{0%{stroke-dashoffset:640}55%,100%{stroke-dashoffset:0}}
@keyframes fadeUnder{0%,12%{opacity:0}62%,100%{opacity:.9}}
@keyframes fly{0%{offset-distance:0%}55%,100%{offset-distance:100%}}

/* ================= multiplier ticker ================= */
.tick{overflow:hidden;border-block:1px solid var(--hair);background:rgba(46,26,32,.5);
  padding:9px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tick-in{display:flex;gap:26px;width:max-content}
.tick b{font-family:var(--climbfont);font-weight:700;font-size:.9rem;color:var(--ash);
  letter-spacing:.04em;white-space:nowrap}
.tick b.hi{color:var(--gold)}
.tick b.lo{color:var(--flare)}
@media (prefers-reduced-motion:no-preference){
  .tick-in{animation:slide 34s linear infinite}
}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ================= scroll reveal — content DEFAULT me visible ================= */
.climb{opacity:1;transform:none}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .climb{animation:rise linear both;animation-timeline:view();
      animation-range:entry 8% cover 26%}
  }
}
@keyframes rise{from{opacity:0;transform:translate3d(0,26px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}}

/* ================= boarding-pass panel (site signature) ================= */
.pass{position:relative;display:grid;grid-template-columns:82px 1fr;
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--curve);
  overflow:hidden;margin:26px 0;box-shadow:var(--raise);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.pass:hover{transform:translateY(-4px);box-shadow:var(--raise-hi);border-color:var(--hair-lit)}
.pass-stub{background:linear-gradient(180deg,var(--flare-deep),#8E1220);
  display:flex;align-items:center;justify-content:center;padding:14px 6px;
  border-right:2px dashed rgba(20,11,14,.55)}
.pass-stub span{font-family:var(--climbfont);font-weight:800;font-size:.76rem;
  letter-spacing:.22em;color:#fff;writing-mode:vertical-rl;transform:rotate(180deg)}
.pass-body{padding:18px 20px}
.pass-body>:last-child{margin-bottom:0}
.pass::before,.pass::after{content:"";position:absolute;left:70px;width:24px;height:12px;
  background:var(--night);border-radius:12px}
.pass::before{top:-6px}
.pass::after{bottom:-6px}
/* sheen sweep on hover */
.pass-body::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.07) 50%,transparent 62%);
  transform:translateX(-110%)}
@media (prefers-reduced-motion:no-preference){
  .pass:hover .pass-body::after{animation:sheen .85s ease}
}
@keyframes sheen{to{transform:translateX(110%)}}

/* ================= plain framed block ================= */
.frame{background:var(--panel);border:1px solid var(--hair);border-radius:var(--curve);
  padding:20px 22px;margin:24px 0}
.frame>:last-child{margin-bottom:0}
.frame.warm{border-color:var(--flare-dim);background:linear-gradient(180deg,var(--panel2),var(--panel))}

/* ================= CTA — sirf gold ya WhatsApp green ================= */
.go{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 26px;border-radius:999px;
  font-family:var(--climbfont);font-weight:800;font-size:.98rem;text-decoration:none;
  background:var(--gold)!important;color:var(--gold-ink)!important;
  border:0;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .2s ease,filter .2s ease}
.go:hover{transform:translateY(-2px);filter:brightness(1.07)}
.go.chat{background:var(--chat)!important;color:var(--chat-ink)!important}
@media (prefers-reduced-motion:no-preference){
  .go::after{content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);
    transform:translateX(-120%);animation:goshine 4.6s ease-in-out infinite}
}
@keyframes goshine{0%,72%{transform:translateX(-120%)}86%,100%{transform:translateX(120%)}}
.gostack{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}

/* ================= breadcrumb ================= */
.crumb{font-size:.83rem;color:var(--ash-dim);padding:14px 0 2px}
.crumb a{color:var(--ash);text-decoration:none}
.crumb a:hover{color:var(--gold)}

/* ================= lede / note / lists ================= */
.lede{font-size:1.09rem;color:var(--paper)}
.note{border-left:3px solid var(--flare);background:var(--flare-wash);
  padding:14px 18px;border-radius:0 var(--curve-sm) var(--curve-sm) 0;margin:22px 0}
.note>:last-child{margin-bottom:0}
.numlist{counter-reset:step;list-style:none;padding:0;margin:22px 0}
.numlist li{counter-increment:step;position:relative;padding:0 0 16px 52px}
.numlist li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:var(--climbfont);font-weight:800;font-size:.9rem;color:var(--gold);
  width:36px;height:36px;border:1px solid var(--flare-dim);border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--panel)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;margin:22px 0}

/* ================= tables ================= */
.tblwrap{overflow-x:auto;margin:22px 0;border:1px solid var(--hair);border-radius:var(--curve)}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:.93rem}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--hair)}
th{font-family:var(--climbfont);font-weight:700;color:var(--gold);
  background:var(--panel2);font-size:.86rem;letter-spacing:.03em}
tr:last-child td{border-bottom:0}

/* ================= FAQ ================= */
.faq{margin:22px 0}
.faq dt{font-family:var(--climbfont);font-weight:700;font-size:1.02rem;
  margin-top:18px;color:var(--paper)}
.faq dd{margin:7px 0 0;color:var(--ash)}

/* ================= image plate ================= */
.plate{margin:28px auto;max-width:820px;width:100%}
.plate img{display:block;width:100%;height:auto;border-radius:var(--curve);
  border:1px solid var(--hair)}
.plate figcaption{margin-top:9px;font-size:.85rem;color:var(--ash-dim);text-align:center}

/* ================= flight-path section divider ================= */
.pathline{display:block;width:100%;max-width:1140px;margin:34px auto;height:34px;overflow:visible}
.pathline path{fill:none;stroke:var(--flare-dim);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1120;stroke-dashoffset:0}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .pathline path{animation:drawline linear both;animation-timeline:view();
      animation-range:entry 0% cover 40%}
  }
}
@keyframes drawline{from{stroke-dashoffset:1120}to{stroke-dashoffset:0}}

/* ================= brief (page-bottom SEO block) ================= */
.brief{max-width:1140px;margin:36px auto;padding:22px 26px;background:var(--panel);
  border:1px solid var(--hair);border-radius:var(--curve);max-height:300px;overflow-y:auto}
.brief h2{font-size:1.14rem;margin:0 0 10px}
.brief h3{font-size:1rem;margin:15px 0 6px}
.brief p,.brief li{font-size:.92rem;color:var(--ash);margin:0 0 9px}
.brief ul,.brief ol{margin:0 0 10px;padding-left:20px}
.brief dl{margin:0 0 10px}
.brief dt{font-family:var(--climbfont);font-weight:700;font-size:.93rem;color:var(--paper);margin-top:9px}
.brief dd{margin:2px 0 0;font-size:.92rem;color:var(--ash)}
.brief table{min-width:0;font-size:.88rem}
.brief .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}

/* ================= hunt (people also search) ================= */
.hunt{max-width:1140px;margin:30px auto 40px;padding:0 18px}
.hunt h2{font-size:1.05rem;color:var(--ash);margin-bottom:12px}
.hunt ul{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0}
.hunt li{display:block}
.hunt li a,.hunt li span{display:flex;align-items:center;min-height:44px;padding:9px 15px;
  border:1px solid var(--hair);border-radius:999px;background:var(--panel);
  font-size:.86rem;color:var(--ash);text-decoration:none;
  transition:border-color .2s ease,color .2s ease}
.hunt li a:hover{border-color:var(--gold);color:var(--gold)}

/* ================= footer ================= */
.foot{border-top:1px solid var(--hair);background:#100809;margin-top:44px;padding:34px 0 26px}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:26px}
.foot h3{font-size:.94rem;color:var(--paper);margin:0 0 10px}
.foot p{font-size:.88rem;color:var(--ash-dim);margin:0 0 10px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:2px}
.foot a:not([class]){color:var(--ash);text-decoration:none;font-size:.89rem;
  display:inline-flex;align-items:center;min-height:34px}
.foot a:not([class]):hover{color:var(--gold)}
.foot img{height:26px;width:auto;display:block}
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.social a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hair);border-radius:50%;color:var(--ash);
  transition:border-color .2s ease,color .2s ease,transform .2s ease}
.social a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.social svg{width:19px;height:19px;fill:currentColor;display:block}
.tp{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;
  border:1px solid var(--hair);border-radius:var(--curve-sm);text-decoration:none;
  color:var(--ash);font-size:.85rem;margin-top:10px}
.tp:hover{border-color:#00B67A;color:var(--paper)}
.tp svg{width:17px;height:17px;fill:#00B67A;flex:0 0 auto}
.baseplate{border-top:1px solid var(--hair);margin-top:26px;padding-top:18px;
  font-size:.82rem;color:var(--ash-dim)}

/* ================= WhatsApp float ================= */
.chat-dot{position:fixed;right:18px;bottom:18px;z-index:115;width:60px;height:60px;
  border-radius:50%;background:var(--chat);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.5);text-decoration:none}
.chat-dot svg{width:33px;height:33px;fill:#fff;display:block}
@media (prefers-reduced-motion:no-preference){
  .chat-dot::before{content:"";position:absolute;inset:0;border-radius:50%;
    background:var(--chat);opacity:.55;animation:beat 2.4s ease-out infinite;z-index:-1}
}
@keyframes beat{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.7);opacity:0}}

/* ================= mobile ================= */
/* keyword-rich nav labels need more room, so the compact menu starts earlier */
@media (max-width:1100px){
  .deck{display:none}
  .gatebtn{display:flex;align-items:center;justify-content:center;margin-left:auto;
    width:46px;height:46px;border:1px solid var(--hair);border-radius:10px;
    background:transparent;color:var(--paper);font-size:1.35rem;text-decoration:none}
  .pass{grid-template-columns:56px 1fr}
  .pass::before,.pass::after{left:44px}
  .pass-body{padding:16px 16px}
  .ascent{padding:26px 0 22px}
}

/* ================= runway — bottom bar, mobile only ================= */
.runway{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  grid-template-columns:repeat(5,1fr);gap:3px;
  background:rgba(20,11,14,.96);border-top:1px solid var(--hair);
  box-shadow:0 -8px 26px rgba(0,0,0,.55);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
@supports (backdrop-filter:blur(2px)){.runway{backdrop-filter:blur(12px)}}
.runway a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:52px;padding:6px 3px;border-radius:10px;text-decoration:none;line-height:1.15;
  color:var(--ash-dim);font-family:var(--climbfont);font-weight:700;font-size:.66rem;text-align:center}
.runway a svg{width:20px;height:20px;fill:currentColor;display:block}
.runway a:active{background:rgba(255,255,255,.06)}
.runway a[aria-current="page"]{color:var(--gold)}
.runway a[aria-current="page"]::after{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--gold)}
.runway .rw-go{background:var(--gold)!important;color:var(--gold-ink)!important}
.runway a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* float slides with the screen: tucks away on scroll down, returns on scroll up */
.chat-dot{transition:transform .3s ease,opacity .3s ease}
body.tuck .chat-dot{transform:translateY(130px);opacity:0;pointer-events:none}

@media (max-width:860px){
  .runway{display:grid}
  body{padding-bottom:80px}
  .chat-dot{bottom:94px;width:54px;height:54px}
  .chat-dot svg{width:30px;height:30px}
}

/* ================= reduced motion — sab band ================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rail{transform:scaleX(1)}
  .climb{opacity:1;transform:none}
  .climbcurve .trace,.pathline path{stroke-dashoffset:0}
  .climbcurve .under{opacity:.9}
  body.tuck .chat-dot{transform:none;opacity:1;pointer-events:auto}
}

/* float button: keep computed colour on the green disc contrast-safe */
.chat-dot{color:#04250F}