/* ===================================================================
   Balls Tournament — site stylesheet
   Dark arena theme. Tokens first, then components, then motion.
   =================================================================== */

@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(/assets/fonts/rubik-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(/assets/fonts/rubik-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#07080f; --bg-2:#0b0d1a; --panel:#11142a; --panel-2:#171b38; --panel-3:#1e2347;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18);
  --text:#eef0fa; --text-2:#c6cbe0; --muted:#8f97b8;
  --blue:#2b1cff; --blue-2:#5b6cff; --blue-3:#93a3ff; --cyan:#35e2ff;
  --orange:#ff7a1a; --lava:#ff4d1a; --yellow:#ffd23f; --green:#6cff5a; --red:#ff3b5c;
  --font-d:'Rubik',ui-rounded,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-b:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r-sm:10px; --r:16px; --r-lg:24px; --maxw:1180px;
  --motion:.18s ease;
  --shadow:0 14px 44px rgba(0,0,0,.5);
  --glow:0 0 44px rgba(43,28,255,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text-2);font-family:var(--font-b);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%}
img{height:auto}
a{color:var(--blue-3)}
a:hover{color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--blue);color:#fff;padding:10px 16px;border-radius:8px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
h1,h2,h3,h4{color:#fff;margin:0;font-family:var(--font-d);font-weight:800;letter-spacing:-.015em;line-height:1.15}
p{margin:0 0 16px}
b,strong{color:#fff;font-weight:700}
.note{font-size:14px;color:var(--muted);max-width:76ch}
.note.center{text-align:center;margin:8px auto 0}
.eyebrow{display:inline-block;font-family:var(--font-d);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 14px}
.ic{width:24px;height:24px;display:inline-block;vertical-align:middle;flex:none}

/* ---------------- header ---------------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(7,8,15,.72);backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease}
.site-head.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.45)}
.head-in{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;flex:none}
.brand-mark{width:34px;height:34px;filter:drop-shadow(0 0 10px rgba(43,28,255,.7))}
.brand-t{font-family:var(--font-d);font-weight:800;font-size:19px;letter-spacing:-.02em;color:#fff}
.brand-t b{color:var(--blue-3);font-weight:800}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:8px}
.main-nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.main-nav li>a{display:block;padding:9px 12px;font-size:14.5px;font-weight:600;color:var(--text-2);text-decoration:none;border-radius:8px;
  transition:background var(--motion),color var(--motion)}
.main-nav li>a:hover{background:rgba(255,255,255,.07);color:#fff}
.main-nav li>a[aria-current]{color:#fff;background:rgba(91,108,255,.18)}
.nav-cta{margin-left:10px}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------- buttons & badges ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:13px 24px;font-family:var(--font-d);
  font-size:15.5px;font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;color:#fff;
  transition:transform .16s ease,box-shadow .2s ease,background var(--motion),border-color var(--motion);line-height:1.2}
.btn .ic{width:18px;height:18px}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-primary{background:linear-gradient(135deg,var(--blue) 0%,#4f3dff 60%,var(--blue-2) 100%);box-shadow:0 8px 24px rgba(43,28,255,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(43,28,255,.55);color:#fff}
.btn-secondary{background:rgba(255,255,255,.06);border-color:var(--line-2);backdrop-filter:blur(6px)}
.btn-secondary:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--blue-3)}
.btn:active{transform:translateY(0) scale(.98)}
.badges{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.badges.center{justify-content:center}
.badge{display:inline-block;line-height:0;border-radius:9px;transition:transform .16s ease,box-shadow .2s ease}
.badge .badge-svg{height:52px;width:auto;display:block}
.badges.small .badge .badge-svg{height:40px}
.badges.big .badge .badge-svg{height:64px}
.badge:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* ---------------- hero (home) ---------------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-home{min-height:min(92vh,880px);display:flex;align-items:center;padding:80px 0 70px;background:var(--bg)}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg img,.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-poster,.hero-video{transform:scale(1.22)}   /* crops the in-game HUD out of the background footage */
.hero-poster{opacity:.9}
.hero-video{opacity:0;transition:opacity 1.2s ease}
.hero-video.ready{opacity:1}
.hero-shade{position:absolute;inset:0;
  background:radial-gradient(60% 70% at 25% 40%,rgba(43,28,255,.28),transparent 70%),
             linear-gradient(180deg,rgba(7,8,15,.62) 0%,rgba(7,8,15,.55) 45%,rgba(7,8,15,.9) 82%,var(--bg) 100%)}
.hero-in{position:relative;max-width:var(--maxw);width:100%}
.hero-home h1{font-size:clamp(46px,8vw,96px);font-weight:900;letter-spacing:-.035em;line-height:.98;max-width:12ch;color:#fff;
  text-shadow:0 6px 40px rgba(0,0,0,.6)}
.hero-home h1 .w2{color:var(--orange)}
.hero-home h1 .w3{background:linear-gradient(90deg,var(--blue-3),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:clamp(17px,2vw,21px);line-height:1.6;color:var(--text-2);max-width:58ch;margin:22px 0 0}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px}
.hero-stats{display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;margin:44px 0 0;padding:22px 0 0;border-top:1px solid var(--line);max-width:920px}
.hero-stats li{display:flex;align-items:baseline;gap:8px}
.hero-stats b{font-family:var(--font-d);font-size:30px;font-weight:800;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero-stats span{font-size:13.5px;color:var(--muted);max-width:14ch;line-height:1.25}

/* floating balls (decorative) */
.hero-balls{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ball{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 12%,var(--c) 32%,color-mix(in srgb,var(--c) 45%,#000) 100%);
  box-shadow:0 30px 60px rgba(0,0,0,.55),inset -12px -16px 30px rgba(0,0,0,.45);
  opacity:.9;animation:ballFloat var(--t,14s) ease-in-out infinite alternate;animation-delay:var(--d,0s);filter:saturate(1.2)}
.ball::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:repeating-linear-gradient(115deg,transparent 0 14px,rgba(255,255,255,.08) 14px 16px);
  animation:ballRoll var(--rt,9s) linear infinite;animation-delay:var(--d,0s)}
.ball.b1{--c:#2b1cff;width:180px;height:180px;right:9%;top:18%;--t:15s;--rt:8s}
.ball.b2{--c:#ff7a1a;width:96px;height:96px;right:26%;top:62%;--t:12s;--rt:6s}
.ball.b3{--c:#35e2ff;width:56px;height:56px;right:18%;top:44%;--t:10s;--rt:5s}
.ball.b4{--c:#6cff5a;width:40px;height:40px;right:38%;top:26%;--t:13s;--rt:7s}
.ball.b5{--c:#e8e8f0;width:70px;height:70px;right:6%;top:70%;--t:11s;--rt:6s}
@keyframes ballFloat{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-60px,-36px,0) scale(1.06)}}
@keyframes ballRoll{to{transform:rotate(360deg)}}
@media(max-width:980px){.ball{opacity:.55}.ball.b1{width:120px;height:120px;right:-6%;top:6%}.ball.b2{right:4%;top:78%}.ball.b3{right:14%;top:12%}.ball.b4,.ball.b5{display:none}}

/* ---------------- hero (inner pages) ---------------- */
.hero-page{padding:64px 0 48px;background:linear-gradient(180deg,#0e1024 0%,var(--bg) 100%);border-bottom:1px solid var(--line)}
.hero-page .hero-bg img{opacity:.55}
.hero-page .hero-bg .hero-shade{background:linear-gradient(180deg,rgba(7,8,15,.35) 0%,rgba(7,8,15,.75) 55%,var(--bg) 100%)}
.hero-page h1{font-size:clamp(34px,5vw,56px);font-weight:900;letter-spacing:-.03em;max-width:22ch;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.hero-page .hero-sub{margin-top:16px;max-width:64ch}
.hero-page .hero-actions:empty{display:none}
.crumb{font-size:13.5px;color:var(--muted);margin:0 0 22px;display:flex;gap:10px;align-items:center}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:#fff}
.crumb [aria-current]{color:var(--text-2)}

/* ---------------- prose & blocks ---------------- */
.prose{padding:56px 0 90px}
.prose>h2{font-size:clamp(26px,3.4vw,38px);margin:60px 0 18px;max-width:30ch;letter-spacing:-.025em}
.prose>h2:first-child{margin-top:0}
.prose>h3{font-size:20px;margin:30px 0 10px;color:var(--blue-3)}
.prose>p{max-width:74ch}
.prose>.lead{font-size:20px;line-height:1.65;color:var(--text);max-width:68ch;margin-bottom:24px}
.related-h{font-size:24px!important;margin-top:70px!important}
ul.rules,ol.rules{max-width:74ch;padding-left:22px;margin:0 0 18px}
ul.rules li,ol.rules li{margin-bottom:9px}
ul.rules li::marker{color:var(--cyan)}
ol.rules li::marker{color:var(--cyan);font-weight:700}
.updated{margin-top:56px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* tables */
.tw{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table.spec{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
table.spec caption{text-align:left;padding:14px 18px 0;font-weight:600;color:#fff}
table.spec th{text-align:left;font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:14px 18px;border-bottom:1px solid var(--line-2);white-space:nowrap}
table.spec tbody th{font-family:var(--font-b);font-size:15px;text-transform:none;letter-spacing:0;color:#fff;white-space:normal;border-bottom:1px solid var(--line)}
table.spec td{padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:top}
table.spec tr:last-child td,table.spec tr:last-child th{border-bottom:0}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:8px 0 28px}
.cards.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.cards.cols-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:26px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .22s ease;overflow:hidden}
.card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(400px 200px at 20% 0%,rgba(91,108,255,.25),transparent 70%)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(91,108,255,.55)}
.card:hover::before{opacity:1}
.card h3{font-size:18px;margin:0 0 8px}
.card p{font-size:15px;margin:0 0 8px}
.card-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;color:var(--cyan);
  background:rgba(53,226,255,.1);border:1px solid rgba(53,226,255,.25)}
.card-ic .ic{width:24px;height:24px}
.card-media{margin:-26px -26px 18px;aspect-ratio:16/9;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card-link a{font-weight:700;text-decoration:none;font-size:14.5px}
.card-link a::after{content:' \2192'}

/* steps */
ol.steps{list-style:none;margin:8px 0 28px;padding:0;counter-reset:s}
.step{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step-n{flex:0 0 40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;
  font-family:var(--font-d);font-weight:800;font-size:16px;display:grid;place-items:center;box-shadow:0 6px 18px rgba(43,28,255,.4)}
.step h3{font-size:18px;margin:6px 0 6px;display:inline-block}
.step .step-ic{width:22px;height:22px;color:var(--cyan);margin:8px 8px 0 0;vertical-align:-3px}
.step p{margin:0;font-size:15.5px;max-width:72ch}

/* callouts */
.callout{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--blue-2);border-radius:var(--r);padding:20px 24px;margin:22px 0;max-width:80ch}
.callout h3{font-size:16px;margin:0 0 8px;color:var(--blue-3)}
.callout p{font-size:15px;margin:0 0 8px}
.callout p:last-child{margin:0}
.callout.orange{border-left-color:var(--orange)}.callout.orange h3{color:var(--orange)}
.callout.green{border-left-color:var(--green)}.callout.green h3{color:var(--green)}
.callout.red{border-left-color:var(--red)}.callout.red h3{color:var(--red)}

/* faq */
.faqs{max-width:82ch;border-top:1px solid var(--line);margin:10px 0 26px}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;padding:16px 40px 16px 0;list-style:none;position:relative;display:flex;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary h3{font-size:16.5px;font-weight:700;color:#fff;margin:0;font-family:var(--font-b)}
details.faq .faq-ic{position:absolute;right:6px;top:18px;color:var(--cyan);transform:rotate(90deg);transition:transform .25s ease}
details.faq[open] .faq-ic{transform:rotate(-90deg)}
.faq-a{padding:0 0 18px;font-size:15.5px;max-width:72ch}
.faq-a p:last-child{margin:0}
details.faq[open] .faq-a{animation:rise .3s ease both}

/* cta band */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(120deg,#1a10a8 0%,#2b1cff 45%,#0e2a7a 100%);border-radius:var(--r-lg);padding:40px;
  margin:44px 0 10px;display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--glow)}
.cta-band::after{content:'';position:absolute;width:420px;height:420px;border-radius:50%;right:-120px;top:-180px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(53,226,255,.35),transparent 70%)}
.cta-band h2{color:#fff;font-size:28px;margin:0 0 8px;letter-spacing:-.02em;max-width:24ch}
.cta-band p{color:#dfe3ff;margin:0;font-size:16px;max-width:56ch}
.cta-text,.cta-actions{position:relative;z-index:1}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta-band .btn-primary{background:#fff;color:var(--blue);box-shadow:none}
.cta-band .btn-primary:hover{color:var(--blue)}
.cta-band .btn-secondary{border-color:rgba(255,255,255,.5)}

/* stats */
.stats{display:flex;gap:16px;flex-wrap:wrap;list-style:none;margin:10px 0 30px;padding:0}
.stat{flex:1 1 150px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.stat b{display:block;font-family:var(--font-d);font-size:34px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.stat:nth-child(4n+1) b{color:var(--cyan)}.stat:nth-child(4n+2) b{color:var(--orange)}.stat:nth-child(4n+3) b{color:var(--green)}.stat:nth-child(4n+4) b{color:var(--yellow)}
.stat span{display:block;font-size:13.5px;color:var(--muted);margin-top:6px}

/* media */
figure.media{margin:24px 0 30px;max-width:900px}
figure.media.wide{max-width:none}
figure.media img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}
figure.media.plain img{border:0;border-radius:0}
figcaption{font-size:13.5px;color:var(--muted);margin-top:10px}

/* gallery */
.gallery{position:relative;margin:10px 0 30px}
.gallery.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-auto-flow:dense;gap:14px}
.gallery figure{margin:0;position:relative}
.gallery.grid .g-item.portrait{grid-row:span 2}
.g-link{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--panel);aspect-ratio:16/9;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.g-item.portrait .g-link{aspect-ratio:9/16}
.g-link img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.g-link:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue-2)}
.g-link:hover img{transform:scale(1.04)}
.gallery figcaption{margin-top:8px}
.gallery.carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gallery.carousel::-webkit-scrollbar{display:none}
.gallery.carousel figure{flex:0 0 min(78vw,520px);scroll-snap-align:start}
.gallery.carousel figure.portrait{flex-basis:min(60vw,260px)}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(7,8,15,.8);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px);transition:background var(--motion)}
.car-btn:hover{background:var(--blue)}
.car-btn.prev{left:-6px}.car-btn.prev .ic{transform:rotate(180deg)}
.car-btn.next{right:-6px}
@media(hover:none){.car-btn{display:none}}

/* video */
.video-block{margin:10px 0 34px;max-width:1000px}
.video-block video{width:100%;height:auto;display:block;border-radius:var(--r);background:#000;border:1px solid var(--line);box-shadow:var(--shadow)}
.yt{position:relative;margin:10px 0 30px;max-width:1000px;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:var(--shadow)}
.yt.short{aspect-ratio:9/16;max-width:420px}
.yt img,.yt iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;display:grid;place-items:center;box-shadow:0 10px 40px rgba(43,28,255,.6);
  transition:transform .2s ease,box-shadow .2s ease;z-index:2}
.yt-play::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.5);animation:ring 2.2s ease-out infinite}
.yt-play .play-ic{width:36px;height:36px;margin-left:4px}
.yt-play:hover{transform:translate(-50%,-50%) scale(1.08)}
.yt-link{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#fff;
  text-decoration:none;background:rgba(0,0,0,.6);padding:6px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.yt-link .ic{width:16px;height:16px;color:#ff3b5c}
.yt figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;margin:0;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.75))}
@keyframes ring{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* shorts: phone mock-ups */
.shorts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin:10px 0 8px}
.short h3{font-size:16px;margin:14px 0 6px}
.short p{font-size:14px;color:var(--muted);margin:0 0 8px}
.short .yt-link{position:static;display:inline-flex;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.phone{position:relative;aspect-ratio:9/16;border-radius:30px;overflow:hidden;background:#000;border:6px solid #1b1f3c;
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);transition:transform .25s ease,box-shadow .25s ease}
.short:hover .phone{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 26px 60px rgba(0,0,0,.65),var(--glow)}
.phone::before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34%;height:16px;border-radius:999px;background:#0b0d1a;z-index:3}
.phone video,.phone iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.phone .yt-play{width:64px;height:64px}
.phone .yt-play .play-ic{width:28px;height:28px}
.short-hook{position:absolute;left:0;right:0;bottom:0;margin:0;padding:50px 16px 18px;font-family:var(--font-d);font-weight:800;font-size:15px;line-height:1.25;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.8);background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));z-index:2;pointer-events:none}
.phone.playing .yt-play,.phone.playing .short-hook{display:none}

/* arenas */
.arenas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin:10px 0 30px}
.arena{position:relative;border-radius:var(--r);overflow:hidden;background:var(--panel);border:1px solid var(--line);aspect-ratio:4/5;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease,border-color .25s ease}
.arena:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--blue-2)}
.arena-img,.arena-img img{position:absolute;inset:0;width:100%;height:100%}
.arena-img img{object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.arena:hover .arena-img img{transform:scale(1.06)}
.arena-t{position:absolute;left:0;right:0;bottom:0;padding:70px 16px 16px;background:linear-gradient(180deg,transparent 0%,rgba(7,8,15,.55) 40%,rgba(7,8,15,.96) 100%)}
.arena-t h3{font-size:19px;margin:0 0 3px;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.arena-theme{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);font-weight:700;margin:0 0 6px;font-family:var(--font-d)}
.arena-t p:last-child{font-size:13.5px;color:var(--text-2);margin:0;line-height:1.45}

/* weapons */
.weapons{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:10px 0 30px}
.weapon{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:22px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.weapon:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(255,122,26,.6)}
.w-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--orange);background:rgba(255,122,26,.12);border:1px solid rgba(255,122,26,.3);margin-bottom:14px}
.weapon h3{font-size:18px;margin:0 0 6px}
.w-dmg{font-size:13.5px;color:var(--muted);margin:0 0 8px}
.w-dmg b{font-family:var(--font-d);font-size:26px;color:#fff;margin-right:4px}
.bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:0 0 12px}
.bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--orange),var(--lava));
  transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.3,1) .15s}
.in .bar i,.no-motion .bar i{transform:scaleX(1)}
.weapon p{font-size:14.5px;margin:0 0 6px}
.w-price{font-size:13px;color:var(--yellow);font-weight:700;margin:0}

/* skins */
.skins{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:10px 0 30px}
.skin{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;text-align:center;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.skin:hover{transform:translateY(-4px);border-color:var(--blue-2);box-shadow:var(--shadow)}
.skin img{width:100%;height:auto;border-radius:12px;display:block;margin-bottom:12px}
.skin h3{font-size:16px;margin:0 0 4px}
.skin p{font-size:13px;color:var(--muted);margin:0}

/* qr */
.qrs{display:flex;gap:22px;flex-wrap:wrap;margin:10px 0 30px}
.qr{flex:1 1 220px;max-width:300px;background:#fff;color:#0b0d1a;border-radius:var(--r);padding:18px;text-align:center}
.qr img{width:200px;height:200px;display:block;margin:0 auto 10px}
.qr b{display:block;color:#0b0d1a;font-family:var(--font-d);font-size:16px}
.qr span{display:block;font-size:13px;color:#4b5270;word-break:break-all}

/* timeline */
.timeline{list-style:none;margin:10px 0 30px;padding:0;position:relative}
.timeline::before{content:'';position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--blue-2),transparent)}
.tl{position:relative;padding:0 0 30px 44px}
.tl::before{content:'';position:absolute;left:5px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(53,226,255,.2)}
.tl-meta{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:6px}
.tl-ver{font-family:var(--font-d);font-weight:700;color:var(--yellow);background:rgba(255,210,63,.1);border:1px solid rgba(255,210,63,.3);padding:2px 9px;border-radius:999px}
.tl h3{font-size:20px;margin:0 0 8px}
.tl-body p{max-width:72ch}
.tl-body ul.rules{margin-bottom:0}

/* link list */
.linklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:10px 0 30px}
.ll{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;
  transition:transform .18s ease,border-color .18s ease,background .18s ease}
.ll:hover{transform:translateY(-2px);border-color:var(--blue-2);background:var(--panel-2)}
.ll b{display:block;color:#fff;font-size:15.5px;margin-bottom:4px}
.ll span{display:block;color:var(--muted);font-size:13.5px;line-height:1.5}

/* specs & downloads */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;margin:10px 0 30px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.specs div{background:var(--panel);padding:14px 18px}
.specs dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-family:var(--font-d);font-weight:700;margin-bottom:4px}
.specs dd{margin:0;color:#fff;font-size:15px;overflow-wrap:anywhere}
.downloads{list-style:none;margin:10px 0 30px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.downloads a{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;color:#fff;transition:border-color .18s ease,background .18s ease}
.downloads a:hover{border-color:var(--blue-2);background:var(--panel-2)}
.downloads .ic{color:var(--cyan)}
.downloads span{flex:1;font-weight:600;font-size:14.5px}
.downloads em{font-style:normal;font-size:12.5px;color:var(--muted)}

/* announcer band */
.streak{margin:0 0 20px;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;text-align:center}
.streak-in{position:relative;height:1.1em;font-family:var(--font-d);font-weight:900;font-size:clamp(30px,6vw,64px);letter-spacing:-.02em;text-transform:uppercase}
.streak-w{position:absolute;left:0;right:0;top:0;opacity:0;animation:streak 6s ease-in-out infinite;animation-delay:calc(var(--i) * 2s);
  background:linear-gradient(90deg,var(--yellow),var(--orange),var(--lava));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,122,26,.45))}
@keyframes streak{0%{opacity:0;transform:scale(.6) rotate(-4deg)}8%{opacity:1;transform:scale(1.08) rotate(0)}14%{transform:scale(1)}30%{opacity:1;transform:scale(1)}36%{opacity:0;transform:scale(1.2)}100%{opacity:0}}

/* ---------------- footer ---------------- */
.site-foot{background:#05060c;border-top:1px solid var(--line);padding:56px 0 30px;font-size:14px;color:var(--muted)}
.foot-top{display:grid;grid-template-columns:minmax(240px,1.2fr) 2fr;gap:44px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.foot-brand p{font-size:14px;line-height:1.6;max-width:36ch;margin:14px 0 18px}
.foot-logo{margin-bottom:4px}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--text-2);transition:background var(--motion),color var(--motion),border-color var(--motion)}
.social a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.social .ic{width:20px;height:20px}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:26px}
.foot-h{font-family:var(--font-d);color:#fff;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px;font-weight:700}
.foot-cols a{display:block;color:var(--muted);text-decoration:none;font-size:14px;padding:4px 0;transition:color var(--motion)}
.foot-cols a:hover{color:#fff}
.foot-bottom{padding-top:22px;font-size:13px}
.foot-bottom p{margin:0 0 6px}

/* ---------------- dialogs ---------------- */
dialog{border:0;padding:0;background:transparent;color:var(--text)}
dialog::backdrop{background:rgba(3,4,10,.9);backdrop-filter:blur(6px)}
.trailer-dialog{width:min(96vw,1200px);max-width:none}
.trailer-dialog video{width:100%;height:auto;display:block;border-radius:var(--r);background:#000;box-shadow:var(--shadow)}
.dlg-close{position:fixed;top:14px;right:16px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:rgba(7,8,15,.8);color:#fff;font-size:26px;cursor:pointer;line-height:1}
.dlg-close:hover{background:var(--blue)}
.lightbox{width:100vw;height:100vh;max-width:none;max-height:none;display:none;place-items:center}
.lightbox[open]{display:grid}
.lightbox figure{margin:0;max-width:96vw;max-height:92vh;text-align:center}
.lightbox img{max-width:96vw;max-height:84vh;width:auto;height:auto;border-radius:12px;box-shadow:var(--shadow)}
.lightbox figcaption{color:var(--text-2);font-size:14px;margin-top:12px}
.lb-btn{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:rgba(7,8,15,.8);color:#fff;cursor:pointer;display:grid;place-items:center}
.lb-btn:hover{background:var(--blue)}
.lb-btn.prev{left:14px}.lb-btn.prev .ic{transform:rotate(180deg)}
.lb-btn.next{right:14px}

/* ---------------- motion ---------------- */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-in>*{animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
.hero-in>:nth-child(2){animation-delay:.08s}.hero-in>:nth-child(3){animation-delay:.16s}.hero-in>:nth-child(4){animation-delay:.24s}.hero-in>:nth-child(5){animation-delay:.32s}
.rv{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.no-motion .rv{opacity:1;transform:none}

/* ---------------- responsive ---------------- */
@media(max-width:980px){
  .main-nav{display:none;position:absolute;top:68px;left:0;right:0;background:rgba(7,8,15,.97);border-bottom:1px solid var(--line);padding:14px 0 20px;flex-direction:column;align-items:stretch}
  .main-nav.open{display:flex}
  .main-nav ul{flex-direction:column;padding:0 20px}
  .main-nav li>a{padding:12px 0;font-size:17px;border-bottom:1px solid var(--line);border-radius:0}
  .nav-cta{margin:14px 20px 0}
  .nav-cta .btn{width:100%}
  .burger{display:block;margin-left:auto}
  .foot-top{grid-template-columns:1fr;gap:30px}
  .cta-band{padding:28px}
}
@media(max-width:640px){
  .wrap{padding:0 18px}
  .hero-home{min-height:0;padding:56px 0 50px}
  .hero-home h1{font-size:clamp(42px,13vw,60px)}
  .hero-stats{gap:8px 20px;margin-top:32px}
  .hero-stats b{font-size:24px}
  .prose{padding:40px 0 64px}
  .prose>h2{margin-top:44px}
  .badge .badge-svg{height:46px}
  .cta-band{padding:24px}
  .cta-band h2{font-size:23px}
  .arenas{grid-template-columns:repeat(2,1fr);gap:10px}
  .arena-t{padding:50px 12px 12px}
  .arena-t h3{font-size:16px}
  .arena-t p:last-child{display:none}
  .shorts{grid-template-columns:repeat(2,1fr);gap:14px}
  .streak{padding:18px 0}
  .timeline::before{left:9px}
  .tl{padding-left:34px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .bar i{transform:scaleX(1)}
  .hero-video{display:none}
}
@media print{
  .site-head,.site-foot,.cta-band,.hero-actions,.badges,.yt-play,.phone,.hero-bg,dialog{display:none!important}
  body{background:#fff;color:#000}h1,h2,h3{color:#000}
}