/* BloxGuy Partners — ZilZal clips sticker style, in the bloxguy.com palette (deep navy + BloxGuy blue) */
:root{
  color-scheme:dark;
  --edge:#02050F;
  --bg:#050A1A;--band:#08112A;--band2:#0A1838;--card:#0E1C40;--raise:#15295C;--raise2:#1C3472;
  --tx:#F5F8FF;--tx2:#C3CEE6;--tx3:#8E9BBB;
  --pri:#2F7BFF;--pri-h:#5C99FF;--pri-d:#1849B8;--on-pri:#FFFFFF;
  --sky:#8DB3FF;--sky-d:#3D6BD6;
  --mint:#34D399;--mint-d:#1F9A6D;--price:#37F59A;--on-mint:#04150D;
  --coral:#F87171;--pink:#FF6FB5;--grape:#8C6BFF;--orange:#FF9147;--amber:#FFC247;
  --line:#1B2A4A;--line2:#27406F;
  --f-d:"Baloo 2","Rubik",system-ui,sans-serif;
  --f-body:"Rubik",system-ui,sans-serif;
  --ol:3px solid var(--edge);--ol2:2px solid var(--edge);
  --drop:0 6px 0 var(--edge);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased}
body{font-family:var(--f-body);font-size:16px;line-height:1.6;overflow-x:hidden}
h1,h2,h3,h4,p{margin:0}
a{color:var(--tx);text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pri-h);outline-offset:3px;border-radius:10px}
img{display:block;max-width:100%}
.hide{display:none!important}

/* type */
.h{font-family:var(--f-d);font-weight:800;line-height:1.1;text-wrap:balance;color:var(--tx)}
.h2{font-size:clamp(30px,4vw,44px)}
.h3{font-size:clamp(21px,2.4vw,25px)}
.lead{font-size:19px;color:var(--tx2);font-weight:500}
.muted{color:var(--tx3)}
.tx2{color:var(--tx2)}
.sm{font-size:14px}.xs{font-size:12.5px}
.b{font-weight:600}
.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.center{text-align:center}
.sky{color:var(--sky)}.green{color:var(--price)}.red{color:var(--coral)}
a.ul{color:var(--sky);text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* layout */
.wrap{max-width:1160px;margin-inline:auto;padding-inline:20px}
.sec{padding-block:60px;position:relative}
.sec.tight{padding-block:36px}
.band-y{background:var(--band);border-block:var(--ol)}
.band-l{background:var(--band2);border-block:var(--ol)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.sec-head p{margin-top:4px}
.grid{display:grid;gap:18px}
.grid > *,.ladder > *,.rd-sum > *{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row{display:flex;align-items:center;gap:10px}
.wrap-row{display:flex;flex-wrap:wrap;gap:8px}
.stack{display:flex;flex-direction:column;gap:12px}
.grow{flex:1;min-width:0}
.gridbg{background-image:linear-gradient(rgba(148,163,184,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.07) 1px,transparent 1px);background-size:36px 36px}

/* cards: navy sticker, near-black outline, hard drop */
.card{background:var(--card);border:var(--ol);border-radius:24px;box-shadow:var(--drop)}
.pad{padding:22px}
.card.y{border-color:var(--pri);background:#10224E}
.card.g{border-color:var(--mint)}

/* buttons: flat face, darker inner ledge, outline, hard drop */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:18px;border:var(--ol);font-family:var(--f-d);font-weight:800;font-size:18px;line-height:1;cursor:pointer;white-space:nowrap;text-align:center;user-select:none;color:var(--tx);background:var(--raise);
  box-shadow:inset 0 -5px 0 rgba(2,5,15,.35),0 4px 0 var(--edge);transition:transform .07s,box-shadow .07s,background .1s}
.btn:hover{transform:translateY(-1px);box-shadow:inset 0 -5px 0 rgba(2,5,15,.35),0 5px 0 var(--edge)}
.btn:active{transform:translateY(3px);box-shadow:inset 0 -3px 0 rgba(2,5,15,.35),0 1px 0 var(--edge)}
.btn-y{background:var(--pri);color:var(--on-pri);box-shadow:inset 0 -5px 0 var(--pri-d),0 4px 0 var(--edge)}
.btn-y:hover{background:var(--pri-h);box-shadow:inset 0 -5px 0 var(--pri-d),0 5px 0 var(--edge)}
.btn-y:active{box-shadow:inset 0 -3px 0 var(--pri-d),0 1px 0 var(--edge)}
.btn-d:hover{background:var(--raise2)}
.btn-g{background:var(--mint);color:var(--on-mint);box-shadow:inset 0 -5px 0 var(--mint-d),0 4px 0 var(--edge)}
.btn-g:active{box-shadow:inset 0 -3px 0 var(--mint-d),0 1px 0 var(--edge)}
.btn-r{background:#3A1520;color:#FFB3BC}
.btn-w{background:#fff;color:#141824;box-shadow:inset 0 -5px 0 #C9D1E3,0 4px 0 var(--edge)}
.btn-lg{min-height:62px;font-size:21px;padding:0 32px;border-radius:20px}
.btn-sm{min-height:42px;font-size:15px;padding:0 16px;border-radius:14px}
.btn-xs{min-height:34px;font-size:14px;padding:0 12px;border-radius:12px;border-width:2px}
.btn-block{display:flex;width:100%}
.btn[disabled],.btn.off{background:#111D38;color:#5E6B85;box-shadow:0 3px 0 var(--edge);cursor:not-allowed;transform:none}
.btn svg{flex:none;width:20px;height:20px}
.btn-lg svg{width:22px;height:22px}
.btn-sm svg,.btn-xs svg{width:17px;height:17px}
.btn .lgo svg{width:20px;height:20px}
.thumb svg{width:24px;height:24px}
.me-pill svg,.rule svg{flex:none}

/* money token: blue coin + number */
.pts{display:inline-flex;align-items:center;gap:6px;background:#0F2350;color:var(--sky);border:var(--ol2);border-radius:999px;padding:2px 11px 2px 4px;font-family:var(--f-d);font-weight:800;font-size:16px;line-height:1.35;white-space:nowrap}
.pts::before{content:"";width:18px;height:18px;border-radius:999px;background:var(--pri-h);border:2px solid var(--edge);box-shadow:inset -3px -3px 0 var(--pri-d);flex:none;display:inline-block}
.pts.g{background:#0E3326;color:var(--price)}
.pts.g::before{background:var(--mint);box-shadow:inset -3px -3px 0 var(--mint-d)}
.pts.lg{font-size:21px;padding:3px 14px 3px 5px}
.pts.lg::before{width:24px;height:24px}
.tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 11px;font-size:13px;font-weight:600;white-space:nowrap;background:var(--raise);border:var(--ol2);color:var(--tx)}
.tag svg{width:15px;height:15px}
.tag.y{background:var(--pri);color:var(--on-pri)}
.tag.g{background:#0E3326;color:var(--price)}
.tag.r{background:#3A1520;color:#FCA5A5}
.tag.a{background:#3A2A08;color:var(--amber)}
.tag.b{background:#0F2C4F;color:#93D2FF}
.hot{background:var(--orange);color:var(--edge);border:2px solid var(--edge);border-radius:8px;padding:0 6px;font:800 12px/1.5 var(--f-d);display:inline-block;transform:rotate(-5deg)}
.sticker{display:inline-flex;align-items:center;gap:6px;border:var(--ol);border-radius:14px;padding:6px 14px;font:800 17px/1.2 var(--f-d);box-shadow:0 4px 0 var(--edge);background:var(--raise);color:var(--tx)}

/* choice chips */
.choice{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 15px;border-radius:16px;background:var(--raise);border:2.5px solid var(--edge);box-shadow:0 3px 0 var(--edge);cursor:pointer;font-weight:600;color:var(--tx);transition:transform .06s}
.choice:hover{background:var(--raise2)}
.choice:active{transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}
.choice[aria-pressed="true"]{background:var(--pri);color:var(--on-pri);box-shadow:inset 0 -4px 0 var(--pri-d),0 3px 0 var(--edge)}
.seg{display:flex;gap:10px;flex-wrap:wrap}
.seg .choice{flex:1}

/* form */
.field{display:flex;flex-direction:column;gap:6px}
.label{font-weight:600;font-size:15px;color:var(--tx2)}
.label small{font-weight:500;color:var(--tx3)}
.input{width:100%;min-height:52px;border-radius:16px;background:#060E22;border:2.5px solid var(--edge);padding:0 14px;color:var(--tx);outline:none;box-shadow:inset 0 3px 0 rgba(0,0,0,.35)}
textarea.input{padding:12px 14px;min-height:96px;resize:vertical}
select.input{appearance:none;-webkit-appearance:none;background:#060E22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C3CEE6' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:36px}
.input:focus{border-color:var(--pri)}
.input.bad{border-color:var(--coral)}
.input::placeholder{color:#55627E}
input[type=file].input{padding:12px 14px}
.hint{font-size:13.5px;color:var(--tx3);font-weight:500}
.err{color:var(--coral);font-weight:600;font-size:14.5px}
.okmsg{color:var(--price);font-weight:600;font-size:14.5px}
.code-in{font:800 22px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;text-align:center}
.code-in::placeholder{letter-spacing:.14em;opacity:.6}

/* sliders */
.range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:34px;margin:0;background:transparent;cursor:grab;touch-action:pan-y;--fill:calc(15px + (100% - 30px) * var(--k,0))}
.range:focus{outline:none}
.range::-webkit-slider-runnable-track{height:14px;border-radius:999px;border:2.5px solid var(--edge);box-shadow:inset 0 3px 0 rgba(0,0,0,.28);background:linear-gradient(to right,var(--pri) var(--fill),#081530 var(--fill))}
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-10.5px;border-radius:999px;border:3px solid var(--edge);background:radial-gradient(circle,var(--edge) 0 3.5px,var(--pri-h) 4.5px);box-shadow:0 3px 0 var(--edge);transition:scale .18s cubic-bezier(.3,1.6,.5,1)}
.range:active::-webkit-slider-thumb{scale:1.2}
.range::-moz-range-track{height:9px;border-radius:999px;border:2.5px solid var(--edge);background:#081530}
.range::-moz-range-progress{height:9px;border-radius:999px;border:2.5px solid var(--edge);background:var(--pri)}
.range::-moz-range-thumb{width:24px;height:24px;border-radius:999px;border:3px solid var(--edge);background:radial-gradient(circle,var(--edge) 0 3px,var(--pri-h) 4px);box-shadow:0 3px 0 var(--edge)}
.vs{position:relative;padding-top:38px;margin-top:4px}
.vbub{position:absolute;top:0;left:calc(15px + (100% - 30px) * var(--k,0));translate:-50% 0;background:var(--pri);color:var(--on-pri);font:800 14px/1 var(--f-d);padding:6px 10px;border-radius:10px;border:2px solid var(--edge);box-shadow:0 3px 0 var(--edge);white-space:nowrap;pointer-events:none}
.vbub::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--edge)}
.vs .tl{display:flex;justify-content:space-between;padding-inline:4px;margin-top:4px}
.vs .tl button{background:none;border:0;color:var(--tx3);font:700 12.5px/1 var(--f-body);cursor:pointer;padding:5px 4px;border-radius:8px}
.vs .tl button:hover{color:var(--sky)}

/* checkbox row */
.check{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:16px;background:var(--raise);border:2.5px solid var(--edge);box-shadow:0 3px 0 var(--edge);cursor:pointer;font-weight:600;font-size:15px;line-height:1.5}
.check .box{width:26px;height:26px;border-radius:8px;border:2.5px solid var(--edge);background:#060E22;flex:none;display:grid;place-items:center;margin-top:-1px}
.check[aria-checked="true"]{background:#0E3326}
.check[aria-checked="true"] .box{background:var(--mint)}
.check[aria-checked="true"] .box::after{content:"";width:11px;height:6px;border:3px solid var(--on-mint);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}

/* header */
.hdr{position:sticky;top:0;z-index:40;background:var(--band);border-bottom:var(--ol)}
.hdr .in{max-width:1160px;margin-inline:auto;padding:10px 20px;display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:10px;color:var(--tx);flex:none}
.logo img{height:40px;width:auto}
.logo .n{font:800 21px/1 var(--f-d);white-space:nowrap}
.logo .n span{color:var(--sky)}
.nav{display:flex;gap:4px;margin-left:10px}
.nav a{padding:7px 10px;border-radius:12px;color:var(--tx2);font-weight:600;font-size:15px;white-space:nowrap;border:2px solid transparent}
.nav a:hover{background:var(--card)}
.nav a[aria-current="page"]{background:var(--raise);border-color:var(--edge);color:var(--tx)}
.nav a.nav-post{color:var(--on-pri);background:var(--pri);border-color:var(--edge);box-shadow:0 2px 0 var(--edge)}
.hdr .end{margin-left:auto;display:flex;align-items:center;gap:8px}
.me-pill{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:var(--ol2);box-shadow:0 3px 0 var(--edge);border-radius:999px;padding:3px 3px 3px 12px;color:var(--tx);font-weight:700}
.me-pill .num{font:800 17px/1 var(--f-d);color:var(--price)}
.ava{width:32px;height:32px;border-radius:999px;background:var(--pri);border:var(--ol2);display:grid;place-items:center;font:800 15px/1 var(--f-d);color:var(--on-pri);flex:none;overflow:hidden}
.ava img{width:100%;height:100%;object-fit:cover}
.hdr .to-store{min-height:40px;padding:0 14px;font-size:15px;gap:6px}
.hdr .to-store svg{width:19px;height:19px}

/* bottom bar (mobile) */
.bbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--band);border-top:var(--ol);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
.bbar .in{display:flex;align-items:flex-end;gap:2px;max-width:520px;margin-inline:auto}
.bbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;border-radius:14px;color:var(--tx3);font-weight:700;font-size:11.5px;border:2px solid transparent;transition:scale .12s,background .15s}
.bbar a svg{width:22px;height:22px}
.bbar a:active{scale:.92}
.bbar a[aria-current="page"]{color:var(--tx);background:var(--raise);border-color:var(--edge)}
.bbar a.to-store{color:var(--mint);background:color-mix(in srgb,var(--mint) 13%,transparent);border-color:color-mix(in srgb,var(--mint) 45%,transparent)}
.bbar a.mid{color:var(--sky);background:transparent;border-color:transparent}
.bbar a.mid .ic{width:56px;height:56px;border-radius:18px;background:var(--pri);border:var(--ol);box-shadow:inset 0 -5px 0 var(--pri-d),0 4px 0 var(--edge);display:grid;place-items:center;margin-top:-26px;color:var(--on-pri);transform:rotate(-4deg)}
.bbar a.mid .ic svg{width:28px;height:28px}

/* hero */
.hero{padding:58px 0 48px;text-align:center;position:relative;overflow:hidden;background-color:var(--bg);border-bottom:var(--ol)}
.hero .glow{position:absolute;inset:0;background:radial-gradient(48% 55% at 50% 38%,rgba(47,123,255,.2),transparent 70%);pointer-events:none}
.hero .in{position:relative;z-index:2;max-width:820px;margin-inline:auto;padding-inline:20px}
.hero .stickers{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-bottom:22px}
.hero .stickers .sticker:nth-child(1){transform:rotate(-4deg);background:var(--pri);color:var(--on-pri)}
.hero .stickers .sticker:nth-child(2){transform:rotate(2deg)}
.hero .stickers .sticker:nth-child(3){transform:rotate(-2deg);background:var(--mint);color:var(--on-mint)}
.hero-h{font-family:var(--f-d);font-weight:800;line-height:1.02;font-size:clamp(46px,8vw,92px);color:#fff;paint-order:stroke fill;-webkit-text-stroke:10px var(--edge);text-shadow:0 7px 0 var(--raise2)}
.hero-h .l1,.hero-h .l2{display:inline-block}
.hero-h .l2{color:var(--sky);text-shadow:0 7px 0 var(--pri-d)}
.hero .lead{margin:22px auto 26px;max-width:620px}
.hero .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.float{position:absolute;z-index:1;filter:drop-shadow(0 10px 0 rgba(2,5,15,.6))}
.float img{width:100%;height:100%;object-fit:contain}
@keyframes fA{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-12px) rotate(-4deg)}}
@keyframes fB{0%,100%{transform:translateY(0) rotate(9deg)}50%{transform:translateY(-14px) rotate(5deg)}}
.fa{animation:fA 5s ease-in-out infinite}
.fb{animation:fB 6s ease-in-out infinite}
.noviews{display:flex;align-items:center;gap:12px;max-width:620px;margin:0 auto 26px;padding:12px 16px;background:var(--card);border:2px solid var(--mint);border-radius:16px;box-shadow:0 4px 0 var(--edge);text-align:left;font-weight:600;font-size:16px;line-height:1.5}
.noviews b{color:var(--mint)}
.gift-pill{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:8px 16px;border:var(--ol);border-radius:999px;background:#0F2350;color:var(--tx);font:600 15px/1.3 var(--f-body);box-shadow:0 4px 0 var(--edge);transform:rotate(-1deg)}
.gift-pill svg{width:22px;height:22px;flex:none;color:var(--sky)}
.gift-pill b{color:var(--sky);font-family:var(--f-d);font-weight:800}
.worth{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:12px;align-items:stretch;max-width:980px;margin:36px auto 0;padding-inline:20px;position:relative;z-index:2}
.worth .eq{display:flex;align-items:center;justify-content:center;padding:0 6px}
.worth .t{background:var(--card);border:var(--ol);box-shadow:var(--drop);border-radius:20px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.worth .t:nth-child(2){transform:rotate(-2deg)}
.worth .t:nth-child(4){transform:rotate(1.5deg)}
.worth .t b{font:800 27px/1.2 var(--f-d);color:var(--sky)}
.worth .t:last-child b{color:var(--price)}
.worth .t > span{font-size:13.5px;color:var(--tx2);font-weight:600}

/* steps */
.step{position:relative;padding:22px;display:flex;flex-direction:column;gap:10px;color:var(--tx)}
.step .n{width:56px;height:56px;border-radius:18px;background:var(--pri);color:var(--on-pri);border:var(--ol);display:grid;place-items:center;font:800 32px/1 var(--f-d);box-shadow:inset 0 -5px 0 var(--pri-d),0 4px 0 var(--edge);transform:rotate(-5deg)}
.step:nth-child(2) .n{background:var(--pink);color:var(--edge);box-shadow:inset 0 -5px 0 #C24A86,0 4px 0 var(--edge);transform:rotate(4deg)}
.step:nth-child(3) .n{background:var(--mint);color:var(--on-mint);box-shadow:inset 0 -5px 0 var(--mint-d),0 4px 0 var(--edge)}
.step .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font:700 14px/1 var(--f-body);color:var(--sky)}
.step:nth-child(3) .go{color:var(--mint)}
.arrow{position:absolute;right:-24px;top:50%;transform:translateY(-50%);z-index:3;width:32px;height:32px;border-radius:999px;background:var(--pri);border:var(--ol2);display:grid;place-items:center;color:var(--on-pri)}
.plats{display:flex;gap:6px;flex-wrap:wrap}
.pl{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:800 10.5px/1 var(--f-d);color:#fff;border:2px solid var(--edge);flex:none;overflow:hidden}
.pl svg{display:block;width:16px;height:16px}

/* earn-type cards */
.type{padding:20px;display:flex;flex-direction:column;gap:14px}
.type .top{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.type .art{width:120px;height:120px;flex:none;border-radius:22px;background:color-mix(in srgb,var(--c,#2F7BFF) 22%,var(--card));border:var(--ol2);display:grid;place-items:center;transform:rotate(-4deg);box-shadow:0 4px 0 var(--edge)}
.type:nth-child(2) .art{transform:rotate(3deg)}
.type .art img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 5px 0 rgba(2,5,15,.5))}
.ptsrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ptsrow.two{grid-template-columns:1fr 1fr}
.ptsbox{background:var(--raise);border:var(--ol2);border-radius:16px;padding:8px 12px;display:flex;flex-direction:column}
.ptsbox .k{font-size:13px;color:var(--tx2);font-weight:600}
.ptsbox .v{font:800 26px/1.2 var(--f-d);color:var(--tx)}
.ptsbox .m{font-size:12.5px;font-weight:600;color:var(--tx3)}
.ptsbox.hl{background:var(--pri);box-shadow:inset 0 -4px 0 var(--pri-d)}
.ptsbox.hl .k,.ptsbox.hl .v,.ptsbox.hl .m{color:var(--on-pri)}
.must{font-size:14px;font-weight:600;color:var(--tx2);display:flex;align-items:flex-start;gap:8px}
.must svg{flex:none;margin-top:2px}
.type .tag{align-self:flex-start}

/* calculator */
.calc{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start}
.calc > *{min-width:0}
.res{padding:22px;display:flex;flex-direction:column;gap:12px;position:sticky;top:90px}
.res .line{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:600;color:var(--tx2)}
.res .tot{font:800 60px/1 var(--f-d);color:var(--price);text-shadow:0 4px 0 var(--edge)}
.res .eqs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.res .eqs div{background:var(--raise);border:var(--ol2);border-radius:14px;padding:8px 6px;text-align:center}
.res .eqs b{display:block;font:800 20px/1.2 var(--f-d);color:var(--tx)}
.res .eqs div:last-child b{color:var(--price)}
.res .eqs div > span{font-size:12.5px;color:var(--tx3);font-weight:600}
.dash{border-top:2px dashed var(--line2)}

/* levels ladder */
.ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rung{padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;position:relative}
.rung .lv{font:800 24px/1.1 var(--f-d)}
.rung .need{font-size:13px;color:var(--tx3);font-weight:600}
.rung .boost{font:800 26px/1.1 var(--f-d);color:var(--on-mint);background:var(--mint);border:var(--ol2);border-radius:12px;padding:2px 10px;box-shadow:inset 0 -3px 0 var(--mint-d);transform:rotate(-3deg);margin:6px 0 4px}
.rung:nth-child(4) .boost{background:var(--pri);color:var(--on-pri);box-shadow:inset 0 -3px 0 var(--pri-d)}
.rung .vp{font-size:13.5px;font-weight:600;color:var(--tx2)}
.rung .vp b{color:var(--sky)}
.rung.done{background:#0E3326}
.rung.next{border-color:var(--pri)}
.rung .you{position:absolute;top:-14px;right:10px;background:var(--pri);color:var(--on-pri);border:var(--ol2);border-radius:10px;padding:1px 8px;font:800 13px/1.5 var(--f-d);transform:rotate(4deg);box-shadow:0 2px 0 var(--edge)}

/* boost banner (event) */
.prize{position:relative;display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:30px 24px 22px;background:linear-gradient(135deg,#123067,#0E2146);border:var(--ol);border-color:var(--pri);box-shadow:0 7px 0 var(--edge),0 0 0 6px rgba(47,123,255,.15);border-radius:24px}
.prize-rib{position:absolute;top:-18px;left:24px;display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:var(--edge);border:var(--ol);border-radius:14px;padding:5px 14px;font:800 17px/1.2 var(--f-d);box-shadow:0 4px 0 var(--edge);transform:rotate(-3deg);white-space:nowrap}
.prize .boost{font:800 40px/1.05 var(--f-d);color:var(--on-pri);background:var(--pri);border:var(--ol2);border-radius:14px;padding:3px 16px;box-shadow:inset 0 -4px 0 var(--pri-d);transform:rotate(-3deg)}
.prize .txt{flex:1 1 260px}
.prize .txt b{font:800 24px/1.2 var(--f-d)}

/* rules */
.rule{display:flex;gap:12px;align-items:center;padding:14px 16px;font-weight:600;border-radius:18px;box-shadow:0 4px 0 var(--edge)}
.ico{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;flex:none;border:var(--ol2);color:var(--edge)}
.ico svg{width:17px;height:17px}
.ico.ok{background:var(--mint)}
.ico.no{background:var(--coral)}

/* lists */
.list{padding:0;overflow:hidden}
.li{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:14px 18px}
.li + .li{border-top:2px dashed var(--line2)}
.li.no-thumb{grid-template-columns:1fr auto}
.li .t{font:700 16px/1.3 var(--f-d)}
.li .s{font-size:13.5px;color:var(--tx3);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .s a{color:var(--sky)}
.li .end{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.amt{font:800 18px/1 var(--f-d);white-space:nowrap}
.amt.p{color:var(--price)}.amt.m{color:var(--coral)}.amt.x{color:var(--tx3);text-decoration:line-through}
.thumb{width:52px;height:52px;border-radius:16px;background:var(--raise);border:var(--ol2);display:grid;place-items:center;overflow:hidden;flex:none;font:800 15px/1 var(--f-d)}
.thumb img{width:100%;height:100%;object-fit:cover}
.empty{padding:28px 18px;text-align:center;color:var(--tx3);font-weight:600}

/* option cards (payout methods) */
.opt{padding:18px;display:flex;flex-direction:column;gap:8px;cursor:pointer;text-align:left;color:var(--tx);transition:transform .07s,translate .15s}
.opt:hover{translate:0 -2px}
.opt[aria-pressed="true"]{border-color:var(--pri);background:#10224E}
.opt .rate{font:800 20px/1.3 var(--f-d);color:var(--sky)}
.opt .b{font:800 19px/1.2 var(--f-d)}
.opic{width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center;background:var(--raise);border:var(--ol2);color:var(--tx);overflow:hidden}
.opic svg{width:26px;height:26px}
.opic img{width:100%;height:100%;object-fit:cover}

/* game picker */
.gpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:12px 8px;padding-top:6px}
.gp{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:7px 4px 8px;border-radius:16px;background:var(--raise);border:2.5px solid var(--edge);box-shadow:0 3px 0 var(--edge);cursor:pointer;color:var(--tx);font:700 12.5px/1.2 var(--f-body);text-align:center;transition:translate .15s}
.gp:hover{translate:0 -2px}
.gp.on{background:var(--pri);color:var(--on-pri);box-shadow:inset 0 -4px 0 var(--pri-d),0 3px 0 var(--edge)}
.gp-i{display:block;width:100%;max-width:58px;aspect-ratio:1;border-radius:12px;overflow:hidden;border:2px solid var(--edge);background:var(--card)}
.gp-i img{width:100%;height:100%;object-fit:cover}
.gp.on .gp-i{outline:2px solid #fff;outline-offset:-4px}
.gp-c{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* items (MM2 payout) */
.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.item{padding:12px;display:flex;flex-direction:column;gap:8px;cursor:pointer;text-align:left;color:var(--tx);border-radius:20px}
.item .im{aspect-ratio:1;border-radius:16px;background:color-mix(in srgb,#2F7BFF 18%,var(--card));border:var(--ol2);display:grid;place-items:center;overflow:hidden}
.item .im img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 6px 0 rgba(2,5,15,.5))}
.item .nm{font:700 15px/1.25 var(--f-d);min-height:38px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item[aria-pressed="true"]{border-color:var(--pri);background:#10224E}
.item.cant{opacity:.5}

/* code box */
.code{font:800 28px/1.2 var(--f-d);letter-spacing:3px;background:#0F2350;border:3px dashed var(--pri);border-radius:16px;padding:12px;text-align:center;color:var(--sky);flex:1;min-width:0}
.codebox{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.linkbox{display:flex;align-items:center;gap:8px;background:#060E22;border:2.5px solid var(--edge);border-radius:14px;padding:6px 6px 6px 12px;box-shadow:inset 0 3px 0 rgba(0,0,0,.35)}
.linkbox span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--tx2);font-weight:500}

/* dashboard stats */
.rd-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.rd-stat{background:var(--card);border:var(--ol2);border-radius:16px;padding:12px 8px;text-align:center;box-shadow:0 3px 0 var(--edge)}
.rd-stat b{display:block;font:800 24px/1.2 var(--f-d);color:var(--sky)}
.rd-stat > span{font-size:12.5px;color:var(--tx3);font-weight:600}
.big-bal{font:800 58px/1 var(--f-d);color:var(--price);text-shadow:0 4px 0 var(--edge)}
.bar{height:16px;border-radius:999px;background:#060E22;border:var(--ol2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--pri);border-right:2px solid var(--edge);box-shadow:inset 0 -4px 0 var(--pri-d)}

/* tabs */
.tabs{display:flex;gap:6px;background:var(--card);border:var(--ol);border-radius:18px;padding:5px;overflow-x:auto;scrollbar-width:none;box-shadow:0 4px 0 var(--edge)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1;border:2px solid transparent;background:transparent;color:var(--tx3);font-weight:700;padding:10px 14px;border-radius:13px;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--pri);color:var(--on-pri);border-color:var(--edge);box-shadow:inset 0 -3px 0 var(--pri-d)}

/* post / forms layout */
.post{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start}
.post > *{min-width:0}
.stepcard{padding:20px;display:flex;flex-direction:column;gap:14px}
.stephead{display:flex;align-items:center;gap:12px}
.stephead .n{width:40px;height:40px;border-radius:13px;background:var(--raise);border:var(--ol);display:grid;place-items:center;font:800 21px/1 var(--f-d);color:var(--tx);flex:none;box-shadow:0 3px 0 var(--edge)}
.stephead.ok .n{background:var(--mint);color:var(--on-mint)}
.rules{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--tx2)}
.rules b{color:var(--tx)}
.lgo{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;flex:none;border:2px solid var(--edge)}
.lgo.g{background:#fff}
.lgo.d{background:#5865F2}

/* faq */
details.q{background:var(--card);border:var(--ol);border-radius:18px;box-shadow:0 4px 0 var(--edge);margin-bottom:12px;padding-inline:18px}
details.q summary{list-style:none;cursor:pointer;padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;font:700 18px/1.35 var(--f-d)}
details.q summary::-webkit-details-marker{display:none}
details.q summary .pm{width:32px;height:32px;border-radius:10px;background:var(--pri);border:var(--ol2);display:grid;place-items:center;flex:none;color:var(--on-pri);font:800 22px/1 var(--f-d)}
details.q summary .pm i{transition:transform .15s;display:block;font-style:normal}
details.q[open] summary .pm i{transform:rotate(45deg)}
details.q p{padding:0 0 18px;color:var(--tx2)}

/* modal + toast */
.modal{position:fixed;inset:0;z-index:80;background:rgba(2,5,15,.7);display:none;align-items:center;justify-content:center;padding:18px}
.modal.on{display:flex;animation:fadeIn .18s ease-out}
.modal .box{width:min(480px,100%);max-height:90vh;overflow:auto;padding:26px;display:flex;flex-direction:column;gap:14px}
.modal.on .box{animation:boxPop .34s cubic-bezier(.3,1.4,.5,1)}
.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%) translateY(20px);z-index:90;background:var(--mint);color:var(--on-mint);font-weight:700;padding:12px 18px;border-radius:16px;border:var(--ol);box-shadow:0 4px 0 var(--edge);opacity:0;pointer-events:none;transition:opacity .2s,transform .4s cubic-bezier(.3,1.5,.5,1);max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.big-ok{width:88px;height:88px;border-radius:999px;background:var(--mint);border:var(--ol);display:grid;place-items:center;margin-inline:auto;box-shadow:inset 0 -6px 0 var(--mint-d),0 5px 0 var(--edge);transform:rotate(-6deg);color:var(--on-mint)}
.big-ok svg{width:44px;height:44px}

/* footer */
.foot{background:var(--edge);color:var(--tx);padding:36px 0 44px;border-top:var(--ol)}
.foot a{color:var(--tx2);font-weight:600}
.shop-strip{display:flex;align-items:center;gap:14px;margin-bottom:26px;border-color:var(--mint);flex-wrap:wrap}
.shop-strip > .stack{flex:1 1 220px}
.shop-strip .opic{color:var(--mint)}

/* motion */
@keyframes fadeIn{from{opacity:0}}
@keyframes boxPop{from{opacity:0;scale:.9;translate:0 14px}}
@keyframes rise{from{opacity:0;translate:0 26px}}
@keyframes drop{from{opacity:0;translate:0 -28px;scale:.7}}
@keyframes pop{from{opacity:0;scale:.82}}
@keyframes spin{to{rotate:360deg}}
.page-in{animation:fadeIn .3s ease-out}
.page-in .hero .sticker{animation:drop .6s cubic-bezier(.3,1.5,.5,1) backwards}
.page-in .hero .sticker:nth-child(2){animation-delay:.08s}
.page-in .hero .sticker:nth-child(3){animation-delay:.16s}
.page-in .hero-h .l1{animation:rise .6s cubic-bezier(.2,.8,.2,1) .1s backwards}
.page-in .hero-h .l2{animation:rise .6s cubic-bezier(.2,.8,.2,1) .22s backwards}
.page-in .hero .lead{animation:rise .5s ease-out .32s backwards}
.page-in .hero .noviews{animation:rise .5s ease-out .4s backwards}
.page-in .hero .btn{animation:pop .5s cubic-bezier(.3,1.5,.5,1) .48s backwards}
.page-in .worth > *{animation:rise .5s ease-out .62s backwards}
.is-busy{position:relative;color:transparent!important;pointer-events:none;--spin:#F5F8FF}
.btn-g.is-busy,.btn-w.is-busy{--spin:#050A1A}
.is-busy::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:999px;border:3px solid color-mix(in srgb,var(--spin) 25%,transparent);border-top-color:var(--spin);animation:spin .7s linear infinite}
.is-busy svg{opacity:0}
@media (hover:hover){.opt,.item{transition:translate .15s ease}.opt:hover,.item:hover{translate:0 -3px}}
@media (prefers-reduced-motion:reduce){.fa,.fb{animation:none}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* responsive */
@media (max-width:1100px){.float{display:none}}
@media (max-width:960px){
  .g4,.ladder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:1fr}
  .calc,.post{grid-template-columns:1fr}
  .res{position:static}
  .arrow{display:none}
}
@media (max-width:1024px){
  .nav,.hdr .to-store,.hide-m{display:none!important}
  .bbar{display:block}
  body.has-bbar{padding-bottom:88px}
  .toast{bottom:104px}
}
@media (max-width:860px){
  .sec{padding-block:44px}
  .wrap{padding-inline:16px}
  .hdr .in{padding:9px 16px}
  .worth{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:16px}
  .worth .eq{grid-column:1/-1;padding:0}
  .ptsrow{grid-template-columns:1fr 1fr}
  .rd-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .g2{grid-template-columns:1fr}
  .type .top{flex-direction:column-reverse;align-items:flex-start}
  .type .art{width:96px;height:96px}
  .li{grid-template-columns:44px 1fr;row-gap:8px;padding:12px 14px}
  .li.no-thumb{grid-template-columns:1fr}
  .li > .end{grid-column:1/-1;justify-content:flex-start}
  .thumb{width:44px;height:44px}
  .res .tot,.big-bal{font-size:48px}
  .logo .n{font-size:18px}
  .logo img{height:34px}
  .hero{padding-top:36px}
  .hero-h{-webkit-text-stroke:8px var(--edge);text-shadow:0 5px 0 var(--raise2)}
  .hero-h .l2{text-shadow:0 5px 0 var(--pri-d)}
  .lead{font-size:17px}
  .prize .boost{font-size:32px}
}