/* =========================================================
   WORLD WARRIOR CHALLENGE · MOVVA RUNNER
   Mobile-first · tema arcade premium
   ========================================================= */
/* Fontes self-hosted (performance + sem dependência externa) */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/anton-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/chakra-petch-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/chakra-petch-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/chakra-petch-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-latin-700-normal.woff2) format("woff2")}
:root{
  --bg:#08080c; --bg2:#0f0f16; --bg3:#161620; --line:rgba(255,255,255,.08);
  --tx:#f4f1ea; --mut:#a3a0ab; --dim:#6d6a76;
  --red:#e11d2e; --red2:#ff3b47; --gold:#f2b632; --gold2:#ffd76a;
  --r:14px; --r2:22px;
  --fd:"Anton",Impact,"Arial Narrow",sans-serif;
  --fu:"Chakra Petch",system-ui,sans-serif;
  --fb:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --hdr:64px; --tab:68px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:400 16px/1.55 var(--fb);overflow-x:hidden;padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
.wrap--narrow{max-width:820px}
.red{color:var(--red2)} .gold{color:var(--gold)}
.tag{display:inline-block;font:600 11px/1 var(--fu);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:6px;background:rgba(242,182,50,.12);color:var(--gold);vertical-align:middle;margin-top:6px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:12px;font:700 15px/1 var(--fu);letter-spacing:.06em;text-transform:uppercase;transition:transform .2s var(--ease),box-shadow .2s,background .2s;position:relative;isolation:isolate;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn--red{background:linear-gradient(180deg,var(--red2),var(--red));color:#fff;box-shadow:0 8px 24px -8px rgba(225,29,46,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.btn--red:hover{box-shadow:0 12px 32px -6px rgba(225,29,46,.85),inset 0 1px 0 rgba(255,255,255,.25)}
.btn--gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1204;box-shadow:0 8px 24px -8px rgba(242,182,50,.6)}
.btn--ghost{border:1.5px solid rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.03)}
.btn--ghost:hover{border-color:#fff}
.btn--sm{min-height:38px;padding:0 14px;font-size:13px;border-radius:10px}
.btn--lg{min-height:56px;padding:0 26px;font-size:16px}
.btn--block{width:100%}
.arw{transition:transform .2s}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- Header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;height:var(--hdr);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.hdr.is-scrolled{background:rgba(8,8,12,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.hdr__in{height:100%;display:flex;align-items:center;gap:12px}
.hdr__logo{display:flex;align-items:center;gap:10px;margin-right:auto}
.hdr__logo img{width:40px;height:auto}
.hdr__ev{display:flex;flex-direction:column;line-height:1;border-left:1px solid rgba(255,255,255,.2);padding-left:10px}
.hdr__ev b{font:400 16px/1 var(--fd);letter-spacing:.03em;text-transform:uppercase}
.hdr__ev small{font:600 10px/1.3 var(--fu);letter-spacing:.3em;text-transform:uppercase;color:var(--red2)}
.hdr__nav{display:none}
.hdr__act{display:flex;align-items:center;gap:8px}
.hdr__cta{display:none}
.cartbtn{position:relative;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.cartbtn__n,.tabbar__n{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font:700 11px/18px var(--fu);text-align:center;padding:0 4px;transform:scale(0);transition:transform .25s var(--ease)}
.has-items .cartbtn__n,.has-items .tabbar__n{transform:scale(1)}
.burger{width:42px;height:42px;border-radius:12px;display:grid;place-content:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
/* menu mobile */
.hdr__nav.is-open{display:flex;flex-direction:column;position:fixed;top:var(--hdr);left:0;right:0;bottom:0;background:rgba(8,8,12,.97);backdrop-filter:blur(12px);padding:16px;gap:2px;overflow:auto;animation:fadeIn .25s}
.hdr__nav.is-open a{font:400 30px/1.2 var(--fd);text-transform:uppercase;padding:12px 4px;border-bottom:1px solid var(--line);letter-spacing:.02em}
.hdr__nav.is-open a::after{content:"→";float:right;color:var(--red2);font-family:var(--fu)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:calc(var(--hdr) + 18px) 0 28px;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__glow{position:absolute;inset:0;background:
  radial-gradient(60% 45% at 50% 62%,rgba(225,29,46,.45),transparent 70%),
  radial-gradient(40% 30% at 85% 15%,rgba(242,182,50,.12),transparent 70%),
  radial-gradient(50% 40% at 10% 90%,rgba(225,29,46,.2),transparent 70%),
  linear-gradient(180deg,#0b0508 0%,var(--bg) 100%)}
.hero__lines{position:absolute;inset:-20%;background:repeating-conic-gradient(from 0deg at 50% 60%,rgba(255,255,255,.035) 0 2deg,transparent 2deg 9deg);mask:radial-gradient(circle at 50% 60%,#000 0,transparent 65%);-webkit-mask:radial-gradient(circle at 50% 60%,#000 0,transparent 65%);animation:spin 120s linear infinite}
.hero__particles{position:absolute;inset:0}
.hero__particles i{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:var(--gold2);box-shadow:0 0 8px 2px rgba(255,120,40,.7);opacity:0;animation:ember linear infinite}
.hero__in{display:flex;flex-direction:column;gap:12px}
.kicker{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--fu);letter-spacing:.18em;text-transform:uppercase;color:var(--mut);padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);align-self:flex-start}
.dot{width:7px;height:7px;border-radius:50%;background:var(--red2);box-shadow:0 0 0 0 rgba(255,59,71,.6);animation:pulse 1.8s infinite}
.hero__event{font:700 12px/1.2 var(--fu);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:6px}
.hero__event em{font-style:normal;color:var(--dim)}
.hero__title{font:400 clamp(52px,15vw,124px)/.88 var(--fd);text-transform:uppercase;letter-spacing:-.005em;display:flex;flex-direction:column}
.hero__title span{display:block;animation:slam .7s var(--ease) both;padding-bottom:.06em}
.hero__title .red{animation-delay:.12s;background:linear-gradient(180deg,#ff5560,#c4101f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px rgba(225,29,46,.45))}
.hero__sub{font:500 18px/1.35 var(--fb);color:var(--mut)}
.hero__sub b{color:var(--tx)}
.hero__chips{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.hero__chips li{font:600 12px/1 var(--fu);letter-spacing:.04em;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:#ddd}
.hero__chips li::before{content:"▸ ";color:var(--red2)}
.hero__ctas{display:grid;gap:10px;margin-top:10px}
.hero__stage{position:relative;aspect-ratio:1/.8;margin:6px auto 0;width:100%;max-width:460px;order:-1}
.hero__ring{position:absolute;left:50%;top:50%;width:80%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(242,182,50,.25);animation:spin 40s linear infinite}
.hero__ring::after{content:"";position:absolute;inset:10%;border-radius:50%;border:1px solid rgba(225,29,46,.25)}
.hm{position:absolute;border-radius:50%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.7))}
.hm--c{width:66%;left:17%;top:8%;z-index:3;animation:float 6s ease-in-out infinite;-webkit-mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%);mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%)}
.hm--l,.hm--r{width:46%;top:26%;z-index:1;opacity:.85;-webkit-mask:radial-gradient(circle at 50% 52%,#000 58%,transparent 70%);mask:radial-gradient(circle at 50% 52%,#000 58%,transparent 70%)}
.hm--l{left:-4%;transform:rotate(-14deg);animation:floatL 7s ease-in-out infinite}
.hm--r{right:-4%;transform:rotate(14deg);animation:floatR 7.5s ease-in-out infinite}
.hero__vs{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);z-index:4;font:400 34px/1 var(--fd);color:var(--gold);text-shadow:0 0 20px rgba(242,182,50,.6),0 3px 0 #7a1010;letter-spacing:.04em;font-style:italic}
.hero__stats{display:grid;grid-template-columns:repeat(4,1fr);margin:26px 0 0;border:1px solid var(--line);border-radius:var(--r);background:rgba(15,15,22,.7);backdrop-filter:blur(8px)}
.hero__stats div{padding:14px 6px;text-align:center;border-left:1px solid var(--line)}
.hero__stats div:first-child{border-left:0}
.hero__stats dt{font:400 28px/1 var(--fd);color:#fff}
.hero__stats dt small{font:600 12px var(--fu);color:var(--red2);margin-left:2px}
.hero__stats dd{margin:4px 0 0;font:600 10px/1.2 var(--fu);text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}

/* ---------- Ticker ---------- */
.ticker{overflow:hidden;background:var(--red);transform:skewY(-2deg);margin:10px 0 0;border-block:2px solid #ff5560;box-shadow:0 10px 40px -10px rgba(225,29,46,.6)}
.ticker__t{display:flex;align-items:center;width:max-content;gap:20px;padding:14px 0;animation:marquee 26s linear infinite}
.ticker span{font:400 22px/1 var(--fd);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.ticker b{color:#ffd0d3;font-weight:400}

/* ---------- Sections ---------- */
.sec{padding:72px 0;position:relative}
.sec--alt{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.sh{margin-bottom:28px;max-width:720px}
.sh__k{font:700 12px/1 var(--fu);letter-spacing:.3em;text-transform:uppercase;color:var(--red2);display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sh__k::before{content:"";width:22px;height:2px;background:currentColor}
.sh__t{font:400 clamp(40px,11vw,76px)/.92 var(--fd);text-transform:uppercase;letter-spacing:.005em}
.sh__d{margin-top:14px;color:var(--mut);font-size:16px}

/* ---------- Filters ---------- */
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 18px;padding:0 16px}
.filters::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font:600 13px/1 var(--fu);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);display:inline-flex;align-items:center;gap:8px;transition:.2s}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--c,#fff)}
.chip[aria-selected="true"]{background:#fff;color:#000;border-color:#fff}

/* ---------- Fighter cards ---------- */
.fgrid-wrap{overflow:hidden}
.fgrid{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 16px 18px;scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain}
.fgrid::-webkit-scrollbar{display:none}
.fc{--c:var(--red);scroll-snap-align:start;position:relative;border-radius:var(--r2);background:linear-gradient(170deg,color-mix(in srgb,var(--c) 26%,#14141c) 0%,#101017 55%);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;isolation:isolate}
.fc::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 50% 30%,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%);opacity:.55;z-index:-1;transition:opacity .35s}
.fc__top{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 0;font:700 11px/1 var(--fu);letter-spacing:.12em;text-transform:uppercase}
.fc__num{color:var(--mut)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:7px;font:700 10px/1 var(--fu);letter-spacing:.1em;text-transform:uppercase;background:rgba(61,220,132,.12);color:#3ddc84}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--soon{background:rgba(255,255,255,.07);color:var(--mut)}
.badge--done{background:rgba(242,182,50,.14);color:var(--gold)}
.badge--cart{background:rgba(225,29,46,.18);color:#ff8088}
.fc__img{position:relative;margin:4px auto 0;width:84%;aspect-ratio:1}
.fc__img img{width:100%;height:100%;object-fit:cover;border-radius:50%;-webkit-mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%);mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%);transition:transform .5s var(--ease)}
.fc__body{padding:4px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.fc__name{font:400 40px/.9 var(--fd);text-transform:uppercase;letter-spacing:.01em}
.fc__meta{display:flex;align-items:center;gap:8px;font:600 13px/1.2 var(--fu);color:var(--mut)}
.fc__ch{font:700 14px/1.2 var(--fu);color:var(--c);text-transform:uppercase;letter-spacing:.05em;filter:brightness(1.35)}
.fc__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:2px}
.fc__stats div{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:8px 6px;text-align:center}
.fc__stats b{display:block;font:400 22px/1 var(--fd);text-transform:uppercase}
.fc__stats small{font:600 9.5px/1 var(--fu);text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}
.lv{color:var(--lc)}
.fc__btn{margin-top:auto}
.fc__btn .btn{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff}
.fc:active{transform:scale(.98)}
.fc.is-tap{animation:tap .35s var(--ease)}
/* locked */
.fc--locked{--c:#555;background:repeating-linear-gradient(135deg,#111118 0 10px,#0d0d13 10px 20px);border-style:dashed;border-color:rgba(255,255,255,.14);justify-content:center;align-items:center;text-align:center;min-height:100%;padding:28px 16px}
.fc--locked::before{display:none}
.fc--locked .q{font:400 120px/1 var(--fd);color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.18);animation:flicker 3s infinite}
.fc--locked h3{font:400 30px/1 var(--fd);text-transform:uppercase;margin-top:6px}
.fc--locked p{font:600 12px/1.4 var(--fu);letter-spacing:.14em;color:var(--mut);text-transform:uppercase;margin-top:8px}
.swipehint{font:600 12px var(--fu);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:center}
.swipehint span{display:inline-block;animation:nudge 1.4s infinite}

/* ---------- Steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:27px;top:20px;bottom:20px;width:2px;background:linear-gradient(var(--red),var(--gold))}
.step{position:relative;display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;padding:12px 14px 12px 0}
.step__n{position:relative;z-index:1;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:var(--bg3);border:1.5px solid rgba(225,29,46,.55);font:400 24px/1 var(--fd);color:#fff;box-shadow:0 0 0 6px var(--bg2);transform:rotate(45deg)}
.step__n span{transform:rotate(-45deg)}
.step:last-child .step__n{border-color:var(--gold);background:linear-gradient(135deg,#3a2a06,#1a1204);color:var(--gold)}
.step h3{font:700 16px/1.15 var(--fu);text-transform:uppercase;letter-spacing:.06em}
.step p{color:var(--mut);font-size:14.5px;margin-top:3px}
.step.is-in .step__n{animation:pop .5s var(--ease) both}

/* ---------- World Tour ---------- */
.tour{display:grid;gap:14px}
.tour__map{min-width:0;width:100%;align-self:center;position:relative;border-radius:var(--r2);border:1px solid var(--line);background:radial-gradient(80% 80% at 50% 40%,#1a0f14,#0b0b10);overflow:hidden;aspect-ratio:1000/383}
.tour__map::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 49.5%,rgba(255,255,255,.04) 50%,transparent 50.5%),linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.04) 50%,transparent 50.2%);pointer-events:none}
.tour__dots{width:100%;height:100%}
.pin{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;z-index:2}
.pin::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--c);opacity:.25;animation:ping 2s infinite}
.pin span{width:12px;height:12px;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 0 12px var(--c);transition:transform .2s}
.pin.is-active span{transform:scale(1.5)}
.pin.is-active{z-index:3}
.pin em{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font:700 9px/1 var(--fu);letter-spacing:.08em;text-transform:uppercase;background:#000;padding:3px 5px;border-radius:4px;white-space:nowrap;opacity:0;transition:.2s;pointer-events:none}
.pin.is-active em{opacity:1}
.tour__card{border-radius:var(--r2);border:1px solid color-mix(in srgb,var(--c,#e11d2e) 40%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--c,#e11d2e) 20%,#111118),#0f0f16 60%);padding:16px;display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;min-height:150px}
.tour__card img{width:110px;height:110px;border-radius:50%;-webkit-mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%);mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%)}
.tour__card .c{font:600 12px var(--fu);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.tour__card h3{font:400 34px/.95 var(--fd);text-transform:uppercase;margin:2px 0}
.tour__card .ch{font:700 13px var(--fu);text-transform:uppercase;letter-spacing:.05em;color:var(--c);filter:brightness(1.35)}
.tour__card .k{font:600 13px var(--fu);color:var(--mut);margin:4px 0 10px}
.tour__card .btn{grid-column:1/-1}
.tour__card.is-swap{animation:swap .4s var(--ease)}
.tour__list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:14px -16px 0;padding:0 16px}
.tour__list::-webkit-scrollbar{display:none}
.tour__list button{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font:600 13px var(--fu)}
.tour__list button[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 22%,transparent)}
.tour__list .fl{font-size:18px;line-height:1}

/* ---------- Tiers ---------- */
.tiers{display:grid;gap:12px}
.tier{--lc:#fff;position:relative;border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--bg3);overflow:hidden}
.tier__h{display:flex;justify-content:space-between;align-items:baseline}
.tier__h h3{font:400 30px/1 var(--fd);text-transform:uppercase;color:var(--lc)}
.tier__h b{font:400 26px/1 var(--fd)}
.tier__h b small{font:600 12px var(--fu);color:var(--mut)}
.tier__bar{margin-top:12px;height:12px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;display:flex;gap:3px;padding:2px}
.tier__bar i{flex:1;border-radius:2px;background:var(--lc);opacity:.15;transition:opacity .3s}
.tier.is-in .tier__bar i{opacity:1}
.tier p{color:var(--mut);font-size:13.5px;margin-top:8px}

/* ---------- Medals ---------- */
.mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.medal{--c:#e11d2e;position:relative;border-radius:var(--r2);padding:14px 10px 12px;background:radial-gradient(80% 60% at 50% 35%,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%),var(--bg3);border:1px solid var(--line);text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .3s var(--ease),border-color .3s}
.medal img{width:100%;aspect-ratio:1;border-radius:50%;-webkit-mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%);mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%);transition:transform .5s var(--ease)}
.medal h3{font:400 22px/1 var(--fd);text-transform:uppercase}
.medal .prog{width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.medal .prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c),var(--gold));transition:width 1.2s var(--ease)}
.medal .pl{display:flex;justify-content:space-between;width:100%;font:600 11px var(--fu);color:var(--mut);letter-spacing:.06em;text-transform:uppercase}
.medal .view{font:700 11px var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.specs{margin-top:26px;border:1px solid var(--line);border-radius:var(--r2);padding:18px;background:var(--bg2)}
.specs h3{font:700 14px var(--fu);text-transform:uppercase;letter-spacing:.14em;color:var(--gold);margin-bottom:10px}
.specs dl{margin:0;display:grid;gap:0}
.specs dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.specs dt{color:var(--mut)} .specs dd{margin:0;text-align:right;font-weight:600}

/* ---------- Trophy ---------- */
.trophy{background:radial-gradient(60% 50% at 50% 30%,rgba(242,182,50,.14),transparent 70%),radial-gradient(70% 50% at 50% 70%,rgba(225,29,46,.18),transparent 70%),#09070a;overflow:hidden}
.trophy__in{display:grid;gap:26px;align-items:center}
.trophy__vis{position:relative;width:100%;max-width:480px;margin:0 auto;aspect-ratio:1}
.trophy__img{width:100%;border-radius:24px;-webkit-mask:radial-gradient(circle at 50% 50%,#000 55%,transparent 72%);mask:radial-gradient(circle at 50% 50%,#000 55%,transparent 72%)}
.trophy__orbit{position:absolute;inset:0;z-index:2;pointer-events:none}
.trophy__orbit img{position:absolute;width:16%;aspect-ratio:1;border-radius:50%;-webkit-mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%);mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%);filter:drop-shadow(0 6px 14px rgba(0,0,0,.8));opacity:0;transform:translate(-50%,-50%) scale(.3);transition:opacity .5s,transform .7s var(--ease)}
.trophy__orbit img.is-in{opacity:1;transform:translate(-50%,-50%) scale(1)}
.trophy__copy{display:flex;flex-direction:column;gap:16px}
.trophy__copy .sh__k{margin:0}
.trophy__copy p{color:var(--mut)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticks li{display:flex;gap:10px;align-items:center;font-weight:500}
.ticks li::before{content:"✓";width:24px;height:24px;flex:none;border-radius:6px;display:grid;place-items:center;background:rgba(242,182,50,.15);color:var(--gold);font-weight:700;font-size:13px}
.plate{border:1px solid rgba(242,182,50,.3);border-radius:var(--r);padding:14px;background:rgba(0,0,0,.4)}
.plate label{font:700 11px var(--fu);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.plate input{width:100%;margin-top:8px;min-height:46px;border-radius:10px;border:1px solid var(--line);background:#111118;padding:0 14px;font-size:16px}
.plate__out{margin-top:12px;border-radius:10px;padding:14px;text-align:center;background:linear-gradient(180deg,#1b1408,#0c0904);border:1.5px solid #8a6516;box-shadow:inset 0 0 0 3px #0c0904,inset 0 0 0 4px rgba(242,182,50,.35)}
.plate__out b{display:block;font:400 24px/1.1 var(--fd);letter-spacing:.06em;background:linear-gradient(180deg,#ffe49a,#c48a1c);-webkit-background-clip:text;background-clip:text;color:transparent;text-transform:uppercase;word-break:break-word}
.plate__out span{display:block;font:700 12px var(--fu);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.plate__out i{font:600 12px var(--fu);font-style:normal;color:#8a6516;letter-spacing:.2em}

/* ---------- Packs ---------- */
.packs{display:grid;gap:14px}
.pack{position:relative;border:1px solid var(--line);border-radius:var(--r2);padding:20px 18px;background:var(--bg3);display:flex;flex-direction:column;gap:14px}
.pack__q{font:700 11px var(--fu);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.pack h3{font:400 30px/1 var(--fd);text-transform:uppercase}
.pack__p{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pack__p b{font:400 40px/1 var(--fd)}
.pack__p small{color:var(--mut);font:600 13px var(--fu)}
.pack__save{font:700 11px var(--fu);letter-spacing:.08em;text-transform:uppercase;color:#3ddc84;background:rgba(61,220,132,.1);padding:5px 8px;border-radius:6px}
.pack ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px}
.pack li{display:flex;gap:8px}
.pack li::before{content:"▸";color:var(--red2)}
.pack .btn{margin-top:auto}
.pack--feat{order:-1;margin-top:10px;border:1.5px solid var(--gold);background:radial-gradient(90% 60% at 50% 0%,rgba(242,182,50,.18),transparent 70%),linear-gradient(180deg,#1a1408,#0f0f16);box-shadow:0 20px 60px -20px rgba(242,182,50,.35)}
.pack--feat h3{color:var(--gold)}
.pack--feat li::before{color:var(--gold)}
.pack__rib{position:absolute;top:-12px;left:18px;font:700 11px/1 var(--fu);letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:#1a1204;padding:7px 10px;border-radius:6px}
.pack__stack{display:flex;margin:-4px 0 0}
.pack__stack img{width:40px;height:40px;border-radius:50%;margin-left:-12px;border:2px solid #1a1408;-webkit-mask:none;mask:none;object-fit:cover}
.pack__stack img:first-child{margin-left:0}

/* ---------- Dashboard ---------- */
.dash{display:grid;gap:14px}
.card{border:1px solid var(--line);border-radius:var(--r2);background:var(--bg3);padding:18px}
.card h3{font:700 12px var(--fu);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.d-hello{display:flex;align-items:center;gap:14px}
.avatar{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--red),#5a0a12);display:grid;place-items:center;font:400 26px var(--fd);flex:none;border:2px solid rgba(255,255,255,.15)}
.d-hello p{color:var(--mut);font:600 12px var(--fu);text-transform:uppercase;letter-spacing:.12em}
.d-hello h4{margin:0;font:400 30px/1 var(--fd);text-transform:uppercase}
.rank{margin-left:auto;text-align:right}
.rank b{display:block;font:400 22px/1 var(--fd);color:var(--gold);text-transform:uppercase}
.rank small{font:600 10px var(--fu);color:var(--mut);letter-spacing:.12em;text-transform:uppercase}
.hp{margin-top:16px}
.hp__l{display:flex;justify-content:space-between;align-items:baseline;font:700 12px var(--fu);text-transform:uppercase;letter-spacing:.12em}
.hp__l b{font:400 34px/1 var(--fd);letter-spacing:0;color:var(--gold)}
.hp__bar{margin-top:8px;height:18px;border-radius:4px;background:#2a0c10;border:2px solid #000;box-shadow:0 0 0 1px rgba(242,182,50,.5);overflow:hidden;position:relative}
.hp__bar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(180deg,#ffe066,#f2b632 50%,#c98a12);transition:width 1.4s var(--ease)}
.hp__bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 2px),#000 calc(12.5% - 2px) 12.5%)}
.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.roster div{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1;border:1.5px solid var(--line);background:#000}
.roster img{width:100%;height:100%;object-fit:cover;transform:scale(1.25)}
.roster .lock img{filter:grayscale(1) brightness(.3)}
.roster .lock::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font:400 28px var(--fd);color:rgba(255,255,255,.4)}
.roster .ok{border-color:var(--gold)}
.roster .ok::after{content:"✓";position:absolute;right:4px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--gold);color:#000;font:800 11px/18px var(--fb);text-align:center}
.roster .cur{border-color:var(--red2);box-shadow:0 0 0 2px rgba(225,29,46,.4)}
.cur-ch{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center}
.cur-ch img{width:84px;height:84px;border-radius:50%;-webkit-mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%);mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%)}
.cur-ch h4{margin:0;font:400 32px/1 var(--fd);text-transform:uppercase}
.cur-ch .km{font:400 22px var(--fd)} .cur-ch .km small{color:var(--mut);font:600 12px var(--fu)}
.bar2{height:10px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0 4px}
.bar2 i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--red2));transition:width 1.2s var(--ease)}
.left{font:600 12px var(--fu);color:var(--mut);text-transform:uppercase;letter-spacing:.08em}
.left b{color:var(--tx)}
.cur-ch .btn{grid-column:1/-1;margin-top:6px}
.badges{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.bdg{text-align:center}
.bdg i{display:grid;place-items:center;width:100%;aspect-ratio:1;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:linear-gradient(160deg,var(--gold2),#8a5a0c);font:400 20px var(--fd);font-style:normal;color:#1a1204}
.bdg.off i{background:#22222c;color:#55525e}
.bdg b{display:block;font:700 9.5px/1.2 var(--fu);text-transform:uppercase;letter-spacing:.04em;margin-top:6px}
.cert{position:relative;border-radius:var(--r2);padding:22px 18px;overflow:hidden;background:radial-gradient(70% 60% at 80% 30%,rgba(225,29,46,.45),transparent 70%),linear-gradient(160deg,#1c0a0e,#0a0a0f);border:1px solid rgba(225,29,46,.4)}
.cert img{position:absolute;right:-30px;top:10px;width:58%;max-width:240px;opacity:.9;border-radius:50%;-webkit-mask:radial-gradient(circle at 50% 52%,#000 55%,transparent 71%);mask:radial-gradient(circle at 50% 52%,#000 55%,transparent 71%)}
.cert__t{font:400 64px/.85 var(--fd);color:var(--gold);text-shadow:0 4px 0 #7a1010,0 0 30px rgba(242,182,50,.4);font-style:italic;position:relative}
.cert dl{position:relative;margin:14px 0 0;display:grid;gap:6px;max-width:60%}
.cert dt{font:700 10px var(--fu);letter-spacing:.16em;color:var(--mut);text-transform:uppercase}
.cert dd{margin:0 0 4px;font:400 18px/1 var(--fd);text-transform:uppercase}
.share{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;position:relative}
.share .btn{flex:1}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:var(--r);background:var(--bg3);overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:rgba(225,29,46,.45)}
.faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 18px;font:600 16px/1.35 var(--fb);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.06);font:500 20px/1 var(--fu);transition:transform .25s,background .25s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--red)}
.faq .ans{padding:0 18px 18px;color:var(--mut);font-size:15px}

/* ---------- Final / Footer ---------- */
.final{padding:90px 0;text-align:center;background:radial-gradient(60% 70% at 50% 100%,rgba(225,29,46,.4),transparent 70%),var(--bg);border-top:1px solid var(--line)}
.final__in{display:flex;flex-direction:column;align-items:center;gap:18px}
.final__k{font:700 13px var(--fu);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);animation:blink 1.2s steps(2) infinite}
.final__t{font:400 clamp(46px,13vw,110px)/1.02 var(--fd);text-transform:uppercase}
.ftr{padding:40px 0 30px;border-top:1px solid var(--line);background:#050507}
.ftr__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.ftr__in img{width:90px}
.ftr__in p{color:var(--mut);font-size:14px}
.ftr__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font:600 13px var(--fu);text-transform:uppercase;letter-spacing:.08em}
.ftr__s{font-size:12px!important;color:var(--dim)!important}

/* ---------- Tabbar (mobile) ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(4,1fr);height:calc(var(--tab) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(10,10,15,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.tabbar a,.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:600 10.5px var(--fu);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);transition:color .2s}
.tabbar svg{width:22px;height:22px;fill:currentColor}
.tabbar a.is-on{color:#fff}
.tabbar a.is-on::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--red2)}
.tabbar__cta{color:#fff!important}
.tabbar__cta svg{width:34px;height:34px;padding:7px;border-radius:10px;background:linear-gradient(180deg,var(--red2),var(--red));box-shadow:0 6px 16px -4px rgba(225,29,46,.7);margin-top:-4px}
.tabbar__n{top:4px;right:calc(50% - 26px)}

/* ---------- Modals ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none}
.modal__bd{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);animation:fadeIn .25s}
.modal__panel{position:relative;width:100%;max-height:92svh;overflow:auto;overscroll-behavior:contain;background:var(--bg2);border-radius:24px 24px 0 0;border:1px solid var(--line);border-bottom:0;animation:sheetUp .4s var(--ease);padding:20px 16px calc(20px + env(safe-area-inset-bottom))}
.modal__panel::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.2);margin:-8px auto 12px}
.mclose{position:sticky;top:0;float:right;z-index:5;width:40px;height:40px;border-radius:12px;background:rgba(0,0,0,.6);border:1px solid var(--line);display:grid;place-items:center;font-size:22px;line-height:1;margin:-4px -4px 0 0}
/* fighter modal */
.fm{--c:#e11d2e}
.fm__hero{position:relative;margin:-20px -16px 0;padding:24px 16px 20px;background:radial-gradient(80% 70% at 50% 30%,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--c) 18%,#0f0f16),var(--bg2));text-align:center;border-radius:24px 24px 0 0}
.fm__hero img{width:min(78vw,340px);margin:0 auto;border-radius:50%;-webkit-mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%);mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%);animation:popIn .5s var(--ease)}
.fm__c{font:600 12px var(--fu);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-top:6px}
.fm__hero h2{font:400 64px/.9 var(--fd);text-transform:uppercase}
.fm__ch{font:700 16px var(--fu);letter-spacing:.06em;text-transform:uppercase;color:var(--c);filter:brightness(1.4)}
.fm__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.fm__stats div{background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:12px;padding:10px 4px}
.fm__stats b{display:block;font:400 26px/1 var(--fd)}
.fm__stats small{font:600 10px var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.fm__sec{padding:18px 0;border-bottom:1px solid var(--line)}
.fm__sec h3{font:700 12px var(--fu);letter-spacing:.2em;text-transform:uppercase;color:var(--red2);margin-bottom:8px}
.fm__sec p{color:#cfccd6}
.fm__goal{font:400 26px/1.05 var(--fd);text-transform:uppercase;color:#fff!important}
.fm__goal span{color:var(--gold)}
.fm__medal{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fm__medal figure{margin:0;text-align:center;border-radius:14px;background:var(--bg3);padding:10px;border:1px solid var(--line)}
.fm__medal figure img,.fm__medal .back{width:100%;aspect-ratio:1;border-radius:50%}
.fm__medal figcaption{font:700 11px var(--fu);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:8px}
.back{border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#f7d77b,#b8861f 45%,#6d4a0c 75%,#3d2805);box-shadow:inset 0 0 0 6px #8a6516,inset 0 0 0 9px #e9c063,inset 0 0 30px rgba(0,0,0,.6)}
.back__in{display:flex;flex-direction:column;align-items:center;gap:2px;color:#3d2805;text-shadow:0 1px 0 rgba(255,240,190,.6)}
.back__in img{width:46%!important;aspect-ratio:auto!important;border-radius:0!important;filter:brightness(0) opacity(.65);-webkit-mask:none!important;mask:none!important}
.back__in b{font:400 13px/1 var(--fd);letter-spacing:.08em;text-transform:uppercase}
.back__in small{font:700 8px var(--fu);letter-spacing:.2em;text-transform:uppercase}
.rules{display:grid;gap:10px;margin:0}
.rules div{display:grid;grid-template-columns:28px 1fr;gap:10px}
.rules dt{grid-row:span 2;width:28px;height:28px;border-radius:8px;background:rgba(225,29,46,.15);color:var(--red2);display:grid;place-items:center;font:700 13px var(--fu)}
.rules dd{margin:0}
.rules dd b{display:block;font:700 14px var(--fu);text-transform:uppercase;letter-spacing:.04em}
.rules dd span{color:var(--mut);font-size:14px}
.fm__cta{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom));margin:0 -16px calc(-20px - env(safe-area-inset-bottom));padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(15,15,22,0),var(--bg2) 30%);display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.fm__cta .pr small{display:block;font:600 11px var(--fu);color:var(--mut);text-transform:uppercase;letter-spacing:.1em}
.fm__cta .pr b{font:400 28px/1 var(--fd)}
/* medal 3D */
.modal__panel--medal{background:radial-gradient(70% 60% at 50% 40%,color-mix(in srgb,var(--c,#e11d2e) 35%,transparent),transparent 70%),#0a0a0f;text-align:center}
.m3d{perspective:1200px;width:min(84vw,440px);margin:6px auto 0;aspect-ratio:1;touch-action:none;cursor:grab}
.m3d__in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .1s linear}
.m3d__in.is-anim{transition:transform .8s var(--ease)}
.m3d__f,.m3d__b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:50%}
.m3d__f img{width:100%;height:100%;border-radius:50%;-webkit-mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%);mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%)}
.m3d__f::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);background-size:250% 100%;background-position:var(--sh,50%) 0;mix-blend-mode:overlay;pointer-events:none}
.m3d__b{transform:rotateY(180deg);inset:10%}
.m3d__b .back{width:100%;height:100%}
.m3d__b .back__in b{font-size:clamp(18px,5vw,28px)}
.m3d__b .back__in small{font-size:clamp(9px,2.4vw,12px)}
.mm__t{font:400 40px/1 var(--fd);text-transform:uppercase;margin-top:12px}
.mm__s{color:var(--mut);font:600 13px var(--fu);letter-spacing:.08em;text-transform:uppercase}
.mm__a{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
/* activity form */
.form{display:grid;gap:12px;margin-top:6px}
.form h2{font:400 34px/1 var(--fd);text-transform:uppercase}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form label{display:grid;gap:6px;font:700 11px var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.form input,.form select,.form textarea{min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--bg3);padding:10px 14px;font:500 16px var(--fb);color:var(--tx);width:100%}
.form textarea{min-height:80px;resize:vertical}
.form input[type=file]{padding:12px;font-size:14px}
.form small{color:var(--dim);font-size:12px}
/* cart */
.modal__panel--cart h2{font:400 34px/1 var(--fd);text-transform:uppercase}
.citems{display:grid;gap:10px;margin:16px 0}
.citem{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:14px;background:var(--bg3);border:1px solid var(--line)}
.citem img{width:56px;height:56px;border-radius:50%;-webkit-mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%);mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%)}
.citem b{font:400 22px/1 var(--fd);text-transform:uppercase}
.citem small{display:block;color:var(--mut);font:600 12px var(--fu)}
.citem button{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);font-size:18px}
.cempty{text-align:center;padding:30px 0;color:var(--mut)}
.cempty b{display:block;font:400 30px var(--fd);color:#fff;text-transform:uppercase;margin-bottom:6px}
.ctot{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:8px}
.ctot div{display:flex;justify-content:space-between;font-size:14px;color:var(--mut)}
.ctot .big{color:#fff;font-size:16px;font-weight:700}
.ctot .big b{font:400 30px/1 var(--fd)}
.ctot .sv{color:#3ddc84}
.upsell{margin:12px 0;padding:12px 14px;border-radius:12px;background:rgba(242,182,50,.1);border:1px dashed rgba(242,182,50,.5);font-size:14px;color:#f5deaa}
.upsell b{color:var(--gold)}
.cquick{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:4px 16px 0}
.cquick button{flex:none;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;border:1px dashed rgba(255,255,255,.2);font:600 13px var(--fu)}
.cquick img{width:30px;height:30px;border-radius:50%;object-fit:cover}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top));z-index:200;transform:translate(-50%,-30px) scale(.9);opacity:0;pointer-events:none;transition:.35s var(--ease);width:max-content;max-width:calc(100vw - 32px)}
.toast.is-on{transform:translate(-50%,0) scale(1);opacity:1}
.toast__in{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:16px;background:linear-gradient(135deg,#1d0a0e,#0d0d14);border:1.5px solid var(--gold);box-shadow:0 20px 50px -10px rgba(0,0,0,.8),0 0 30px -5px rgba(242,182,50,.4)}
.toast__in img{width:48px;height:48px;border-radius:50%;-webkit-mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%);mask:radial-gradient(circle at 50% 52%,#000 62%,transparent 71%)}
.toast__in i{width:48px;height:48px;flex:none;display:grid;place-items:center;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:linear-gradient(160deg,var(--gold2),#8a5a0c);color:#1a1204;font:400 18px var(--fd);font-style:normal}
.toast__in small{display:block;font:700 10px var(--fu);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.toast__in b{display:block;font:400 22px/1.05 var(--fd);text-transform:uppercase}
.toast__in span{font:600 12px var(--fu);color:var(--mut);text-transform:uppercase;letter-spacing:.06em}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.is-in{opacity:1;transform:none}

/* ---------- Keyframes ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-12px)}}
@keyframes floatL{50%{transform:rotate(-10deg) translateY(-8px)}}
@keyframes floatR{50%{transform:rotate(10deg) translateY(-10px)}}
@keyframes ember{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}100%{transform:translateY(-100vh) translateX(var(--dx,20px));opacity:0}}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(255,59,71,0)}100%{box-shadow:0 0 0 0 rgba(255,59,71,0)}}
@keyframes slam{0%{opacity:0;transform:scale(1.6) translateY(-10px);filter:blur(6px)}60%{opacity:1;transform:scale(.97);filter:blur(0)}100%{transform:none}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes tap{40%{transform:scale(.96)}100%{transform:none}}
@keyframes flicker{0%,90%,100%{opacity:1}93%{opacity:.3}96%{opacity:.8}}
@keyframes nudge{50%{transform:translateX(6px)}}
@keyframes pop{0%{transform:rotate(45deg) scale(.4);opacity:0}100%{transform:rotate(45deg) scale(1);opacity:1}}
@keyframes ping{0%{transform:scale(.6);opacity:.5}100%{transform:scale(2.2);opacity:0}}
@keyframes swap{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}}
@keyframes sheetUp{from{transform:translateY(100%)}}
@keyframes popIn{from{transform:scale(.6) rotate(-20deg);opacity:0}}
@keyframes blink{50%{opacity:.35}}

/* =========================================================
   TABLET ≥ 640px
   ========================================================= */
@media (min-width:640px){
  .wrap{padding:0 28px}
  .hero__ctas{display:flex;flex-wrap:wrap}
  .fgrid{grid-auto-columns:44%;padding:6px 28px 18px;scroll-padding:0 28px}
  .mgrid{grid-template-columns:repeat(4,1fr)}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .packs{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:14px}
  .steps::before{display:none}
  .step{background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:16px}
  .step__n{box-shadow:none}
  .tour__card{grid-template-columns:140px 1fr auto}
  .tour__card img{width:140px;height:140px}
  .tour__card .btn{grid-column:auto}
  .dash{grid-template-columns:repeat(2,1fr)}
  .dash .span2{grid-column:1/-1}
  .filters{margin:0 0 18px;padding:0}
  .modal{align-items:center;padding:24px}
  .modal__panel{border-radius:24px;max-width:560px;border-bottom:1px solid var(--line);animation:popIn2 .35s var(--ease)}
  .modal__panel::before{display:none}
  .modal__panel--xl{max-width:760px}
  .fm__hero{border-radius:24px 24px 0 0}
  .modal--side{justify-content:flex-end;padding:0}
  .modal--side .modal__panel{height:100%;max-height:none;border-radius:24px 0 0 24px;max-width:440px;animation:sideIn .35s var(--ease)}
  @keyframes popIn2{from{opacity:0;transform:scale(.94) translateY(10px)}}
  @keyframes sideIn{from{transform:translateX(100%)}}
}

/* =========================================================
   DESKTOP ≥ 1024px
   ========================================================= */
@media (min-width:1024px){
  :root{--hdr:76px}
  body{padding-bottom:0}
  .tabbar{display:none}
  .toast{top:90px}
  .burger{display:none}
  .hdr__cta{display:inline-flex}
  .hdr__nav{display:flex;gap:2px;margin-right:8px}
  .hdr__nav a{font:600 13px var(--fu);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding:8px 10px;border-radius:8px;transition:.2s}
  .hdr__nav a:hover,.hdr__nav a.is-on{color:#fff;background:rgba(255,255,255,.06)}
  .hero{padding-top:calc(var(--hdr) + 30px)}
  .hero__in{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:30px}
  .hero__stage{order:0;max-width:600px}
  .hero__title{font-size:min(6.3vw,100px)}
  .hero__title span{white-space:nowrap}
  .hero__chips{max-width:560px}
  .hero__stats{max-width:760px}
  .fgrid-wrap{max-width:1200px;margin:0 auto;padding:0 28px}
  .fgrid{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;overflow:visible;padding:6px 0}
  .swipehint{display:none}
  .fc:hover{transform:translateY(-8px);border-color:var(--c);box-shadow:0 30px 60px -20px color-mix(in srgb,var(--c) 70%,transparent),0 0 0 1px var(--c)}
  .fc:hover::before{opacity:1}
  .fc:hover .fc__img img{transform:scale(1.08) rotate(-3deg)}
  .fc:hover .fc__btn .btn{background:var(--c);border-color:var(--c)}
  .fc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);background-size:250% 100%;background-position:120% 0;transition:background-position .7s}
  .fc:hover::after{background-position:-20% 0}
  .steps{grid-template-columns:repeat(4,1fr)}
  .step{grid-template-columns:1fr;align-content:start;gap:16px;padding:22px;min-height:200px;transition:.3s}
  .step:hover{border-color:rgba(225,29,46,.5);transform:translateY(-4px)}
  .tour{grid-template-columns:1fr 340px;align-items:stretch}
  .tour__card{grid-template-columns:1fr;text-align:center;justify-items:center;align-content:center}
  .tour__card img{width:200px;height:200px}
  .tour__card .btn{grid-column:auto;width:100%}
  .pin{width:38px;height:38px}
  .pin span{width:14px;height:14px}
  .pin em{font-size:11px;opacity:.75}
  .tiers{grid-template-columns:repeat(4,1fr)}
  .medal:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 60%,transparent)}
  .medal:hover img{transform:rotateY(18deg) scale(1.04)}
  .specs{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start}
  .specs dl{grid-template-columns:repeat(5,1fr);gap:10px}
  .specs dl div{flex-direction:column;border:0;padding:0;gap:4px}
  .specs dd{text-align:left}
  .trophy__in{grid-template-columns:1fr 1fr;gap:60px}
  .packs{grid-template-columns:repeat(4,1fr);align-items:stretch}
  .pack--feat{transform:scale(1.04);order:0;margin-top:0}
  .dash{grid-template-columns:repeat(3,1fr)}
  .dash .span2{grid-column:span 2}
  .dash .span3{grid-column:1/-1}
}


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