/* Inner pages: services, how it works, checkout, login, order tracking, support, legal. */
.pg main{position:relative}
.phero{position:relative;padding:140px 0 40px;overflow:hidden}
/* The page hero image fades out fully inside the hero (it used to be cut off by overflow:hidden mid-fade, which
   left a hard line under the hero on every page that uses it). */
.phero .bg{position:absolute;inset:-40px 0 0 0;background-size:cover;background-position:center 25%;opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent);pointer-events:none}
.phero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 10%,rgba(11,15,28,.4) 60%,rgba(11,15,28,.7))}
.phero .wrap{position:relative}
.phero h1{font-size:60px;line-height:1.02;font-weight:900;letter-spacing:-.03em;max-width:780px}
.phero h1 .y{color:#ffd23f;text-shadow:0 0 26px rgba(255,200,40,.4)}
.phero p{font-size:18px;color:#d3dcf2;max-width:600px;line-height:1.55;margin-top:14px}
.crumbs{display:flex;gap:8px;font-size:14px;color:var(--mute);margin-bottom:14px}
.crumbs a:hover{color:#fff}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--sun)}
.sec{padding:60px 0}
.hl{color:#ffd23f}

/* Services: one editorial row per game */
.glist{border-top:1px solid var(--line)}
.grow{display:grid;grid-template-columns:260px 1fr auto;gap:36px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}
.grow .art{height:130px;border-radius:16px;background-size:cover;background-position:center 30%;box-shadow:0 0 0 1px var(--line);transition:transform .25s}
.grow:hover .art{transform:scale(1.02)}
.grow h3{font-size:28px;font-weight:800;letter-spacing:-.01em}
.grow .sv{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px}
.grow .sv a{color:#c9d3ec;font-weight:600;font-size:15px;padding:4px 0;border-bottom:1px solid transparent}
.grow .sv a:hover{color:var(--sun);border-color:var(--sun)}
.sdef{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 50px;margin-top:40px}
.sdef div{scroll-margin-top:100px}
.sdef b{display:block;font-size:20px;margin-bottom:8px}
.sdef p{color:var(--mute);line-height:1.6}
.sdef div:target b{color:var(--sun)}
.sdef .n{font-size:13px;font-weight:800;color:var(--sky);letter-spacing:.1em;display:block;margin-bottom:10px}

/* How it works */
.hsteps{counter-reset:s;margin-top:20px}
.hstep{display:grid;grid-template-columns:120px 1fr 420px;gap:40px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.hstep .num{font-size:88px;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(143,196,255,.45)}
.hstep h3{font-size:30px;font-weight:800;letter-spacing:-.01em}
.hstep p{color:var(--mute);font-size:17px;line-height:1.6;margin-top:10px;max-width:520px}
.hstep .vis{display:flex;align-items:center;justify-content:center;gap:12px;min-height:150px}
.hstep .vis img.emb{width:120px;filter:drop-shadow(0 14px 30px rgba(120,160,255,.35))}
.hstep .vis .arr{width:34px;height:34px;color:var(--sun)}
.hstep .vis .shot{width:100%;border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px var(--line)}
.paylogos{display:flex;flex-wrap:wrap;gap:8px}
.paylogos span{padding:10px 14px;border-radius:10px;background:#fff;color:#0b1020;font-weight:800;font-size:14px}
.trust3{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:36px}
.trust3 h4{font-size:20px;margin:14px 0 8px}
.trust3 p{color:var(--mute);line-height:1.6}
.trust3 svg{width:34px;height:34px;color:var(--sky)}

/* Forms */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field span{font-size:13px;font-weight:700;color:var(--mute)}
.field input,.field textarea,.field select{padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#121a30;color:#fff;font:500 16px Outfit,sans-serif;outline:0;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field textarea:focus{border-color:var(--blue2);box-shadow:0 0 0 4px rgba(47,107,255,.18)}
.field input.bad{border-color:#ff6b6b}
.field small{color:var(--mute);font-size:13px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#c9d3ec;cursor:pointer;line-height:1.5}
.check input{margin-top:3px;accent-color:var(--blue);width:17px;height:17px}
.check a{color:var(--sky);text-decoration:underline}

/* Checkout */
.co{display:grid;grid-template-columns:1fr 420px;gap:50px;align-items:start;padding:120px 0 90px}
.co h1{font-size:44px;font-weight:900;letter-spacing:-.02em}
.co .stepn{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800;margin:34px 0 16px}
.co .stepn i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--blue);font-style:normal;font-size:14px}
.pm{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pm label{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.1);cursor:pointer;font-weight:700;transition:border-color .15s,background .15s}
.pm label:hover{border-color:rgba(255,255,255,.25)}
.pm input{display:none}
.pm label:has(input:checked){border-color:var(--blue2);background:rgba(47,107,255,.12)}
.pm .lg{min-width:46px;height:30px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:900;padding:0 6px}
.pm small{display:block;font-weight:500;color:var(--mute);font-size:12px}
.coupon{display:flex;gap:8px}
.coupon input{flex:1;min-width:0;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#121a30;color:#fff;font:500 16px Outfit,sans-serif;outline:0}
.coupon input.bad{border-color:#ff6b6b}
.coupon .btn{padding:0 20px}
.cosum{position:sticky;top:96px;border-radius:22px;background:linear-gradient(180deg,#141c34,#10172b);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);padding:24px}
.cosum .gm{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.cosum .gm img{width:62px;height:62px;object-fit:contain}
.cosum .gm b{display:block;font-size:19px}
.cosum .gm small{color:var(--mute);font-size:13px}
.lines{padding:14px 0;border-bottom:1px solid var(--line)}
.lines div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;color:#c9d3ec;font-size:15px}
.lines div b{color:#fff}
.lines .disc b{color:#5ee6a0}
.cosum .tt{display:flex;justify-content:space-between;align-items:flex-end;padding:16px 0}
.cosum .tt b{font-size:40px;font-weight:900;letter-spacing:-.02em}
.cosum .btn{width:100%;padding:17px;font-size:18px;border-radius:14px}
.cosum .note{margin-top:12px;font-size:13px;color:var(--mute);text-align:center;line-height:1.5}
.cosum .cb{margin-top:12px;font-size:14px;color:#5ee6a0;font-weight:700;text-align:center}

/* Login */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.auth .side{position:relative;background-size:cover;background-position:center 20%}
.auth .side::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,15,28,.1),var(--bg) 96%),linear-gradient(0deg,rgba(11,15,28,.85),transparent 50%)}
.auth .side .quote{position:absolute;left:48px;right:48px;bottom:60px;z-index:2;font-size:30px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.auth .side .quote small{display:block;font-size:15px;font-weight:600;color:var(--mute);margin-top:12px}
.auth .form{display:flex;align-items:center;justify-content:center;padding:120px 40px 60px}
.auth .box{width:min(420px,100%)}
.auth h1{font-size:40px;font-weight:900;letter-spacing:-.02em}
.auth .sub{color:var(--mute);margin:8px 0 26px}
.seg{display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:14px;background:rgba(255,255,255,.05);margin-bottom:26px}
.seg button{padding:11px;border-radius:10px;border:0;background:none;color:var(--mute);font:700 15px Outfit,sans-serif;cursor:pointer}
.seg button.on{background:var(--blue);color:#fff}
.oauth{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.oauth a{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;border-radius:12px;border:1px solid rgba(255,255,255,.12);font-weight:700}
.oauth a:hover{background:rgba(255,255,255,.05)}
.oauth svg{width:20px;height:20px}
.or{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:13px;margin-bottom:20px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth .btn.go{width:100%;padding:16px;font-size:17px;border-radius:14px;margin-top:6px}
.auth .alt{margin-top:18px;text-align:center;color:var(--mute);font-size:14px}
.auth .alt a{color:var(--sky)}

/* Order tracking */
.ord{padding:110px 0 80px}
.ord-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.ord-head h1{font-size:40px;font-weight:900;letter-spacing:-.02em}
.ord-head small{color:var(--mute);font-size:14px}
.badge-live{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;background:rgba(43,182,115,.14);color:#5ee6a0;font-weight:800;font-size:13px}
.badge-live i{width:8px;height:8px;border-radius:50%;background:#5ee6a0;animation:pulse 1.4s infinite}
.badge-live.paused{background:rgba(255,201,40,.14);color:var(--sun)}.badge-live.paused i{background:var(--sun);animation:none}
@keyframes pulse{50%{opacity:.3}}
.prog{margin:34px 0 10px;display:grid;grid-template-columns:110px 1fr 110px;gap:24px;align-items:center}
.prog img{width:110px;filter:drop-shadow(0 10px 30px rgba(120,160,255,.3))}
.prog .bar{position:relative;height:14px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.prog .bar i{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--blue2) 60%,#ffd23f);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.prog .lbls{display:flex;justify-content:space-between;margin-top:10px;font-size:14px;font-weight:700;color:var(--mute)}
.prog .lbls b{color:#fff}
.ostats{display:flex;flex-wrap:wrap;gap:12px 46px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:20px}
.ostats div small{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--mute)}
.ostats div b{font-size:24px;font-weight:900}
.ostats .w{color:#5ee6a0}
.ogrid{display:grid;grid-template-columns:1fr 400px;gap:40px;margin-top:36px;align-items:start}
.ogrid h2{font-size:22px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.match{display:grid;grid-template-columns:52px 1fr auto auto;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.match img{width:52px;height:52px;border-radius:12px}
.match b{font-size:16px}.match small{display:block;color:var(--mute);font-size:13px}
.match .res{font-weight:900;font-size:14px;padding:5px 10px;border-radius:8px}
.match .res.W{background:rgba(43,182,115,.15);color:#5ee6a0}.match .res.L{background:rgba(255,107,107,.13);color:#ff8a8a}
.match .lp{font-weight:800;min-width:60px;text-align:right}
.match.new{animation:slidein .5s ease}
@keyframes slidein{from{opacity:0;transform:translateY(-8px)}}
.ctrls{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.chat{border-radius:20px;background:linear-gradient(180deg,#141c34,#10172b);box-shadow:0 0 0 1px rgba(255,255,255,.08);display:flex;flex-direction:column;height:520px;position:sticky;top:96px}
.chat-h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.chat-h .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),#7fb0ff);font-weight:900}
.chat-h b{display:block}.chat-h small{color:#5ee6a0;font-size:13px;font-weight:600}
.msgs{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:82%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45;background:rgba(255,255,255,.07);align-self:flex-start;border-bottom-left-radius:5px}
.msg.me{align-self:flex-end;background:var(--blue);border-bottom-left-radius:16px;border-bottom-right-radius:5px}
.msg small{display:block;font-size:11px;color:rgba(255,255,255,.55);margin-top:3px}
.chat form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat input{flex:1;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0e1427;color:#fff;font:500 15px Outfit,sans-serif;outline:0}
.chat button{width:46px;border-radius:12px;border:0;background:var(--blue);color:#fff;cursor:pointer;display:grid;place-items:center}
.chat button svg{width:18px;height:18px}
.demo-note{color:#6c789a;font-size:13px;margin-top:14px}

/* Support */
.sup-search{display:flex;align-items:center;gap:12px;width:min(640px,100%);margin-top:26px;padding:10px 10px 10px 20px;border-radius:18px;background:rgba(255,255,255,.96);color:#5b6684;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 6px rgba(90,162,255,.18)}
.sup-search svg{width:20px;height:20px}
.sup-search input{flex:1;border:0;outline:0;background:none;font:500 17px Outfit,sans-serif;color:#0b1020;padding:10px 0}
.contact3{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;padding:20px 0 10px}
.contact3 h3{font-size:22px;margin:14px 0 6px}
.contact3 p{color:var(--mute);line-height:1.6;margin-bottom:16px}
.contact3 svg.big{width:34px;height:34px;color:var(--sky)}
.cats{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 24px}
.cats button{padding:10px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:none;color:#c9d3ec;font:700 15px Outfit,sans-serif;cursor:pointer}
.cats button.on{background:var(--sun);border-color:var(--sun);color:#1d1500}
.faqlist .q[hidden]{display:none}
.empty{color:var(--mute);padding:20px 0}
.msgform{max-width:640px}

/* Legal */
.legal-doc{display:grid;grid-template-columns:240px 1fr;gap:60px;padding:30px 0 90px}
.legal-doc nav{position:sticky;top:100px;align-self:start;display:flex;flex-direction:column;gap:4px}
.legal-doc nav a{color:var(--mute);padding:6px 0;font-weight:600}
.legal-doc nav a:hover{color:#fff}
.legal-doc article{max-width:760px}
.legal-doc h2{font-size:26px;font-weight:800;margin:40px 0 12px;scroll-margin-top:100px}
.legal-doc h2:first-child{margin-top:0}
.legal-doc p,.legal-doc li{color:#c9d3ec;line-height:1.75;font-size:16px}
.legal-doc ul{padding-left:20px;margin:8px 0}
.legal-doc .draft{padding:14px 18px;border-left:3px solid var(--sun);background:rgba(255,201,40,.06);color:#f3e2a8;margin-bottom:30px;border-radius:0 12px 12px 0}

@media(max-width:1000px){
 .grow{grid-template-columns:180px 1fr}.grow .btn{display:none}
 .sdef,.trust3,.contact3{grid-template-columns:1fr 1fr}
 .hstep{grid-template-columns:80px 1fr}.hstep .vis{grid-column:1/-1}
 .co,.ogrid{grid-template-columns:1fr}.cosum,.chat{position:static}
 .auth{grid-template-columns:1fr}.auth .side{display:none}
 .legal-doc{grid-template-columns:1fr}.legal-doc nav{position:static;flex-direction:row;flex-wrap:wrap;gap:4px 16px}
}
@media(max-width:600px){
 .phero{padding-top:100px}.phero h1{font-size:38px}.phero p{font-size:16px}
 .grow{grid-template-columns:1fr;gap:14px}.grow .art{height:120px}.grow h3{font-size:24px}
 .sdef,.trust3,.contact3{grid-template-columns:1fr;gap:30px}
 .hstep{grid-template-columns:1fr;gap:14px;padding:30px 0}.hstep .num{font-size:60px}.hstep h3{font-size:24px}
 .co{padding-top:96px}.co h1{font-size:34px}.pm{grid-template-columns:1fr}
 .auth .form{padding:100px 18px 50px}.oauth{grid-template-columns:1fr}
 .ord-head h1{font-size:30px}.prog{grid-template-columns:64px 1fr 64px;gap:12px}.prog img{width:64px}
 .match{grid-template-columns:44px 1fr auto;gap:10px}.match img{width:44px;height:44px}.match .lp{display:none}
 .ostats{gap:12px 28px}.ostats div b{font-size:20px}
}
[hidden]{display:none !important}
/* gb.css .quote is a flex row for the home reviews; the login caption is plain text. */
.auth .side .quote{display:block}
/* Checkbox labels mix text and links; flex split them into columns on phones. */
.check{display:block;position:relative;padding-left:27px}
.check input{position:absolute;left:0;top:0}
.auth .side .quote small{letter-spacing:normal;text-transform:none}
/* Real brand logos (Simple Icons, CC0) on white tiles */
.paylogos span{display:flex;align-items:center;padding:10px 16px}
.paylogos img{height:22px;width:auto}
.pm .lg{background:#fff;display:flex;align-items:center;justify-content:center;gap:3px;min-width:52px}
.pm .lg img{height:16px;width:auto}
.pm .lg.two img{height:13px}
.pm .lg{min-width:58px}.pm .lg img{height:13px}.pm .lg.two img{height:11px}
.pm .lg img[src*=bitcoin],.pm .lg img[src*=paypal]{height:18px}
.paylogos img{height:16px}.paylogos img[src*=bitcoin],.paylogos img[src*=paypal],.paylogos img[src*=mastercard]{height:22px}
.pm .lg img[src*=applepay]{height:22px}.paylogos img[src*=applepay]{height:26px}
.chat-h img.av{object-fit:cover;background:none}

/* Services search */
.gfind{display:flex;align-items:center;gap:10px;max-width:520px;margin:0 0 18px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--mute)}
.gfind:focus-within{border-color:rgba(255,201,40,.5)}
.gfind input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:inherit;font-size:16px}
.gnone{padding:26px 0;color:var(--mute)}

/* Guides: a plain reading column, no cards. */
.g-hero{position:relative;padding:130px 0 46px;overflow:hidden}
.g-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 25%;opacity:.35;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.g-hero .wrap{position:relative;max-width:820px}
.g-hero h1{font-size:46px;line-height:1.08;font-weight:800;letter-spacing:-.02em;margin:10px 0 14px}
.g-meta{color:var(--mute);font-size:14px}
.g-body{max-width:760px;padding:10px 0 30px;font-size:17px;line-height:1.72;color:#d3dbee}
.g-body p,.g-body ul,.g-body ol,.g-body table,.g-body figure{margin:0 0 20px}
.g-body h2{font-size:28px;line-height:1.2;font-weight:800;color:#fff;margin:44px 0 14px;letter-spacing:-.01em}
.g-body h3{font-size:19px;font-weight:700;color:#fff;margin:28px 0 8px}
.g-body ul,.g-body ol{padding-left:22px}
.g-body li{margin-bottom:6px}
.g-body a{color:var(--sun);text-decoration:underline;text-underline-offset:3px}
.g-body strong{color:#fff}
.g-body table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.g-body th,.g-body td{text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.g-body th{color:var(--mute);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.g-body figure img{display:block;max-width:100%;height:auto;max-height:440px;border-radius:14px}
.g-body figcaption{color:var(--mute);font-size:14px;margin-top:8px}
.g-after{max-width:760px;padding-bottom:90px}
.g-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 0;border-top:2px solid var(--sun);border-bottom:1px solid var(--line);margin-bottom:34px}
.g-cta small{display:block;color:var(--mute);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.g-cta b{display:block;font-size:22px;font-weight:800;margin:4px 0}
.g-cta span{color:#c4cce0;font-size:15px}
.g-src h2,.g-more h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:10px}
.g-src ul{list-style:none;margin-bottom:30px}
.g-src li{font-size:14px;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-src a{color:#aeb9d6}
.g-more{display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.g-more a,.g-all a{font-weight:600;color:#dfe5f3}
.g-more a:hover,.g-all a:hover{color:var(--sun)}
/* Guides index: one list per game. */
.gx{display:grid;grid-template-columns:220px 1fr;gap:30px;padding:30px 0;border-top:1px solid var(--line)}
.gx h2{font-size:22px;font-weight:800}
.gx-i{display:flex;gap:18px;align-items:center;padding:12px 0}
.gx-i img{width:160px;height:90px;object-fit:cover;border-radius:12px;flex:none}
.gx-i b{display:block;font-size:18px;margin-bottom:4px}
.gx-i small{color:var(--mute);font-size:14px;line-height:1.5}
.gx-i:hover b{color:var(--sun)}
@media(max-width:700px){.g-hero{padding-top:100px}.g-hero h1{font-size:32px}.g-body{font-size:16px}.g-body h2{font-size:23px}.gx{grid-template-columns:1fr;gap:6px}.gx-i img{width:100px;height:64px}.gx-i b{font-size:16px}}
.g-body figure img[src*="ranks"],.g-body figure img[src*="faceit"]{max-height:180px;width:auto}
.g-policy{max-width:820px;padding-bottom:0}.g-policy h2{font-size:22px;font-weight:800;margin-bottom:8px}.g-policy p{color:#c4cce0;font-size:16px;line-height:1.65}

/* Checkout, second pass: yellow step numbers, full-width payment rows, bigger readable text, clear consent block */
.co{gap:56px}
.co .stepn{font-size:22px;margin:38px 0 16px}
.co .stepn i{background:var(--sun);color:#1a1300;font-weight:900;width:32px;height:32px;font-size:15px}
.co .field>span{font-size:14.5px;font-weight:700;color:#e6ecfb}
.co .field small{font-size:13.5px;color:#aeb8d2;line-height:1.5}
.co .field input,.co .coupon input{min-height:52px}
.co .fgrid2{gap:0 18px}
.demo-note{display:flex;gap:10px;align-items:flex-start;color:#c4cce0;font-size:14.5px;line-height:1.5;margin-top:4px;max-width:640px}
.demo-note svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--sun)}
.pm{grid-template-columns:1fr;gap:10px}
.pm label{min-height:72px;padding:14px 18px;gap:16px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.1);font-size:16.5px}
.pm label:hover{border-color:rgba(255,210,63,.4)}
.pm label:has(input:checked){border-color:var(--sun);background:rgba(255,210,63,.06)}
.pm label>span:last-of-type{flex:1}
.pm small{font-size:13.5px;color:#aeb8d2;margin-top:2px}
.pm input{display:block!important;order:3}
.pm .lg{min-width:64px;height:40px;border-radius:9px}
.pm .lg img[src*=logo]{height:26px;filter:none!important}
.co-consent{display:flex;flex-direction:column;gap:14px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.co-consent .check{margin:0}
.co-consent .check.need{color:#ff9aa4}
.co-consent .check.need input{border-color:#ff6b6b}
.cosum .gm b{font-size:20px}
.cosum .gm small{font-size:14px;color:#aeb8d2}
.cosum .lines>div{font-size:15px}
.cosum .cb{color:var(--sun);font-size:14.5px}
.co-trust{font-size:14.5px!important;gap:10px!important}
@media(max-width:600px){.co .stepn{font-size:20px}.pm label{font-size:15.5px;padding:12px 14px}}

/* Login, second pass (pattern: GameBoost / Skycoach sign-in): one card centred over game art that fades
   into the page on every side, social sign-in first, then email. */
.auth{display:grid;grid-template-columns:1fr;place-items:center;min-height:100vh;position:relative;overflow:hidden;padding:110px 16px 70px}
.auth .side{display:none}
.auth-art{position:absolute;inset:0;background:url(art/lol-Akali_0.jpg) center 22%/cover no-repeat;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 35%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse 75% 70% at 50% 35%,#000 30%,transparent 78%);pointer-events:none}
.auth-art::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 40% 55% at 50% 50%,rgba(7,11,24,.85),transparent 80%)}
.auth .form{position:relative;z-index:1;padding:0;width:100%;display:flex;justify-content:center}
.auth .box{width:min(460px,100%);padding:34px 34px 28px;border-radius:22px;background:rgba(12,17,33,.86);border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px rgba(255,210,63,.05);backdrop-filter:blur(14px)}
.auth h1{font-size:34px;text-align:center}
.auth .sub{text-align:center;font-size:16px;color:#c4cce0;margin:8px 0 22px}
.auth .seg{margin-bottom:20px}
.social{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sbtn{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:13px;font:700 16px Outfit;transition:transform .12s,filter .12s,box-shadow .12s}
.sbtn svg{width:22px;height:22px;flex:none}
.sbtn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.sbtn.google{background:#fff;color:#1f1f1f;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.sbtn.discord{background:#5865F2;color:#fff;box-shadow:0 6px 18px rgba(88,101,242,.35)}
.auth .or{display:flex;align-items:center;gap:14px;margin:22px 0 18px;color:#9fa9c4;font-size:14px;font-weight:600}
.auth .or::before,.auth .or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
.auth .field>span{font-size:14.5px;font-weight:700;color:#e6ecfb}
.auth .field input{min-height:52px;font-size:16px}
.auth .btn.go{background:linear-gradient(180deg,var(--sun),var(--sun2));color:#1a1300;box-shadow:0 12px 30px rgba(255,190,40,.3)}
.auth .alt{font-size:14.5px;color:#aeb8d2}
@media(max-width:600px){.auth{padding:92px 12px 40px}.auth .box{padding:26px 18px 22px;border-radius:18px}.auth h1{font-size:28px}}
/* no card: the form sits on the art; a soft dark pool behind it keeps the text readable */
.auth .box{background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0 0 10px}
.auth-art::after{background:radial-gradient(ellipse 34% 60% at 50% 52%,rgba(7,11,24,.92),rgba(7,11,24,.6) 55%,transparent 85%)}
.auth .seg button.on{background:var(--sun);color:#1a1300}
@media(max-width:600px){.auth .box{padding:0 4px 10px}}

/* Checkout, third pass: edit link, one-tap extras, sticky pay bar on phones */
.cosum .gm{position:relative}
.co-edit{margin-left:auto;align-self:flex-start;font-size:14px;font-weight:700;color:var(--sky)}
.co-bump{display:flex;flex-direction:column;gap:8px;padding:14px 0 4px;border-top:1px solid var(--line)}
.co-bump .bump{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;border:1px dashed rgba(255,210,63,.4);cursor:pointer}
.co-bump .bump:has(input:checked){border-style:solid;border-color:var(--sun);background:rgba(255,210,63,.06)}
.co-bump b{display:block;font-size:15px}.co-bump small{display:block;font-size:13.5px;color:#aeb8d2}
.co-mbar{display:none}
@media(max-width:1000px){
  .co-mbar{display:flex;align-items:center;justify-content:space-between;gap:14px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(9,13,27,.96);border-top:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}
  .co-mbar small{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;color:#aeb8d2;text-transform:uppercase}
  .co-mbar b{font-size:24px;font-weight:900}
  .co-mbar .btn{padding:14px 20px;font-size:16px}
  .co{padding-bottom:110px}
}

/* Wins calculator (free tool page): inputs left, one big answer right, hairline split. */
.wcalc{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding-top:10px;padding-bottom:40px}
.wc-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.wc-form label{display:flex;flex-direction:column;gap:8px}
.wc-form label:last-child{grid-column:1/-1}
.wc-form span{font-size:14px;font-weight:700;color:var(--mute)}
.wc-form span b{color:var(--sun);margin-left:6px}
.wc-form input[type=number]{min-height:48px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;font:700 18px Outfit,sans-serif}
.wc-form input[type=number]:focus{outline:none;border-color:var(--sun)}
.wc-form input[type=range]{accent-color:var(--sun);min-height:44px}
.wc-out{padding-left:40px;border-left:1px solid rgba(255,255,255,.1)}
.wc-out small{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--mute)}
.wc-out b{display:block;font-size:56px;font-weight:900;letter-spacing:-.03em;line-height:1.05;margin:6px 0 10px}
.wc-out p{color:var(--mute);font-size:16px;margin:0 0 20px}
.wc-copy{padding-bottom:60px}
.wc-copy>*{max-width:820px}
.wc-copy p{font-size:16px;line-height:1.65;color:#c9d3ec;margin:0 0 14px}
.wc-copy .h2{margin-top:34px}
@media(max-width:800px){.wcalc{grid-template-columns:1fr;gap:26px}.wc-out{padding:22px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.1)}.wc-out b{font-size:44px}}
/* Support: the ticket form sits in the middle of the page, under its heading. */
#new{display:flex;flex-direction:column;align-items:center;text-align:center}
#new .msgform{width:100%;max-width:640px;text-align:left}
/* Services page opened from the Services menu (?svc=): the service as a heading, its games below with it marked. */
.gsvc{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:6px 0 18px}
.gsvc h2{font-size:30px;font-weight:900;letter-spacing:-.02em}
.gsvc h2 span{font-size:17px;font-weight:700;color:var(--mute);margin-left:8px}
.gsvc a{color:var(--sky);font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.grow .sv a.on{color:var(--sun);border-color:var(--sun)}

/* Guide sources: long web addresses wrap instead of being cut off on phones; guide link lists as 44px tap rows. */
.g-src li{white-space:normal;overflow:visible;overflow-wrap:anywhere}
@media(max-width:800px){.g-more{gap:0}.g-more a,.g-all a{display:flex;align-items:center;min-height:44px;border-bottom:1px solid rgba(255,255,255,.07)}}
/* Phones: service links on the games list, legal topic links as finger-sized taps; long breadcrumbs wrap. */
@media(max-width:800px){
  .grow .sv a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .legal-doc nav a{padding:12px 0}
}

/* Job board requirements and the request pay chat (site/offers.js, owner 2026-10-30).
   pattern: Fiverr and Upwork custom offer cards inside the conversation. */
.jreq{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px;padding:0;list-style:none}
.jreq li{font-size:13px;font-weight:600;color:#dbe3f5;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.06)}
.jp .btn{min-height:44px}
.ochat .oc-in{display:flex;flex-direction:column;max-height:min(760px,calc(100vh - 48px))}
.ochat .oc-h{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.ochat .oc-h img{width:44px;height:44px;border-radius:10px;object-fit:cover}
.ochat .oc-h>div{flex:1;min-width:0}
.ochat .oc-h small{display:block;color:var(--mute);font-size:13px}
.ochat .oc-h b{display:block;font-size:18px}
.ochat .oc-t{display:block;color:#ffd98a;font-size:14px;margin-top:2px}
.ochat .oc-x{width:44px;height:44px;flex:none;border-radius:12px;border:0;background:rgba(255,255,255,.06);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.ochat .oc-m{min-height:220px;max-height:52vh;flex:1}
.ochat .msg{display:block;position:static} /* app.css gives every .me (the header account menu) a flex row */
.ochat .oc-empty{color:var(--mute);font-size:15px;margin:auto 0}
.ochat .oc-closed{margin:0;padding:12px 20px;border-top:1px solid var(--line);color:#ffd98a;font-size:15px}
.msg.oc-offer{min-width:230px;background:rgba(255,201,40,.08);box-shadow:inset 0 0 0 1px rgba(255,201,40,.35)}
.msg.oc-offer.me{background:rgba(47,107,255,.22);box-shadow:inset 0 0 0 1px rgba(143,196,255,.4)}
.msg.oc-offer b{display:block;font-size:26px;font-weight:900;margin:2px 0}
.oc-offer .oc-l{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sun)}
.oc-offer.me .oc-l{color:var(--sky)}
.oc-offer .oc-s{display:block;font-size:13px;color:#c9d3ec}
.oc-offer.st-accepted .oc-s{color:#5ee6a0}
.oc-offer.st-replaced,.oc-offer.st-declined{opacity:.6}
.oc-offer p{margin:4px 0}
.oc-offer .oc-a{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ochat .oc-f{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.ochat .oc-f>input{flex:1;min-width:0}
.ochat .oc-f input{min-height:46px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0e1427;color:#fff;font:500 15px Outfit,sans-serif}
.ochat .oc-eur{display:flex;align-items:center;gap:2px;padding-left:12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0e1427;width:150px}
.ochat .oc-eur input{border:0;background:none;width:100%;padding-left:2px;min-width:0}
.ochat .oc-eur span{color:var(--sun);font-weight:800}
@media(max-width:600px){.ochat .oc-f{flex-wrap:wrap}.ochat .oc-f>input{flex-basis:100%}.ochat .oc-eur{flex:1;width:auto}.ochat .oc-m{max-height:46vh}.ochat .oc-h{padding:14px 16px}}

/* ===== Booster area fixes (deep test 2026-10-30): booster dashboard, pay chat, become-a-booster.
   Everything here is scoped to its page or component (#bdash, #pBoard, #pEarn, #pProf, .ochat, #reqs, #applyBox, .bjob). ===== */
/* Profile tab "Your rank": own class names (site/booster.js), so the home rank ladder (.rk) and the
   profile card editor (.rk-row) no longer squash it. Label, long bar and score on one line, tip below. */
#pProf .rkb{display:grid;gap:16px}
#pProf .rkb-row{display:grid;grid-template-columns:150px 1fr 40px;gap:4px 14px;align-items:center}
#pProf .rkb-row span{font-size:15px;font-weight:700;color:#dbe3f5}
#pProf .rkb-row .oc-bar{margin:0}
#pProf .rkb-row b{text-align:right;font-size:16px}
#pProf .rkb-row small{grid-column:1/-1;color:var(--mute);font-size:14px;line-height:1.45}
#pProf .rkb + .mute{margin-top:18px}
/* Profile form: room under Save, and the public profile link as a 44px tap target with its arrow beside it. */
#pProf #fBio{margin-bottom:18px}
#pProf .dsec-h>a.bpub{display:inline-flex;align-items:center;gap:6px;min-height:44px;flex:none}
/* Pay chat in the admin: the offer field is one box (admin.css gives every dialog input its own border). */
.admp .dlg.ochat .oc-eur input:not([type=checkbox]):not([type=radio]){border:0;background:none;border-radius:0}
.admp .dlg.ochat .oc-eur{background:var(--a2);border-color:var(--a4);border-radius:10px}
.admp .dlg.ochat .oc-eur:focus-within{border-color:var(--sun)}
/* Pay chat after a deal: the button into the order. A closed request with no messages has no empty chat area. */
.ochat .oc-open{margin:0;padding:0 20px 14px}
.ochat .oc-m:empty{display:none}
/* Become a booster: the job board article has no topic list, so it takes the normal content width. */
.legal-doc.bjob{grid-template-columns:1fr}
.legal-doc.bjob h3{font-size:19px;margin:26px 0 8px}
/* Minimum peak rank by game: an open list with hairlines instead of bordered tiles (no-boxes rule);
   the rank sits under the game name so long names don't break the rows. */
#reqs{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 36px}
#reqs>div{display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:center;padding:14px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
#reqs>div img{grid-row:1/3;width:40px;height:40px}
#reqs b{align-self:end;font-size:16px}
#reqs span{align-self:start;text-align:left;font-size:14px}
/* Apply form: the remove button is a full tap target. */
#applyBox .grow2 .x{min-width:44px;min-height:44px}
/* Earnings rows: the date and status line at a readable size. */
#pEarn .tx small{font-size:14px}
@media(max-width:600px){
  /* All four dashboard tabs fit on a phone. */
  #bdash .dash-tabs{gap:0}
  #bdash .dash-tabs a{flex:1 1 auto;justify-content:center;padding:12px 6px;font-size:15px;gap:5px;min-height:44px}
  /* Job card: the rank art on its own line, the requirements use the full card width. */
  #pBoard .job .jm{flex-basis:100%}
  /* Payout form stacked, so the field and its placeholder are not cut. */
  #pEarn .sform.inline>*{flex:1 1 100%;min-width:0}
  #pProf .rkb-row{grid-template-columns:118px 1fr 34px}
  /* Apply form: game and remove button on one row, ranks side by side, profile link full width. */
  #applyBox .grow2{grid-template-columns:1fr 1fr 44px;margin-bottom:18px}
  #applyBox .grow2 select{grid-column:1/3;grid-row:1}
  #applyBox .grow2 .x{grid-column:3;grid-row:1;justify-self:stretch}
  #applyBox .grow2 [name=current]{grid-column:2/4}
  #applyBox .grow2 [name=profile]{grid-column:1/-1}
}
@media(max-width:374px){#bdash .dash-tabs a{padding:12px 4px;font-size:14px}}
/* ===== end booster area fixes ===== */
/* ---------- Deep test fixes, design (30 Oct 2026) ---------- */
/* Support search uses the dark search field of the Services page (.gfind), the one search look on inner pages. */
.sup-search{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:var(--mute);box-shadow:none}
.sup-search:focus-within{border-color:rgba(255,201,40,.5)}
.sup-search input{color:#fff}
.sup-search input::placeholder{color:#97a3c2}
/* Support topic chips: left-aligned under their heading (gb.css .cats centres the home row), 44px tall. */
#cats{justify-content:flex-start}
.cats button,.seg button{min-height:44px}
/* How it works: the step numerals in the yellow accent, like the numbered steps on game pages and Become a booster. */
.hstep .num{-webkit-text-stroke:2px rgba(255,201,40,.6)}
/* Guides: title and body share one left edge; h1 weight 900 like every page; meta and sources as body text. */
.g-hero .wrap{max-width:760px}
.g-hero h1{font-weight:900}
.g-meta,.g-src li{font-size:15px}
/* Become a booster: the job board copy reuses .legal-doc but has no topic nav, so it sat in the 240px nav column. */
.legal-doc.bjob{grid-template-columns:1fr}
/* Guide sources as 44px tap rows on phones, like the guide link lists above (were 18px links). */
@media(max-width:800px){.g-src li{margin:0}.g-src a{display:flex;align-items:center;min-height:44px;border-bottom:1px solid rgba(255,255,255,.07)}}

/* ---------- Deep test leftovers (2026-10-31) ---------- */
/* Become a booster: a proof screenshot can be removed before sending (44px hit area, small round mark). */
#applyBox .proofs .pf{position:relative;display:block}
#applyBox .proofs .pf img{display:block}
#applyBox .proofs .pf .x{position:absolute;top:-12px;right:-12px;width:44px;height:44px;border:0;padding:0;background:none;cursor:pointer;color:#fff;font-size:18px;line-height:1}
#applyBox .proofs .pf .x::before{content:'';position:absolute;inset:10px;border-radius:50%;background:#1a2133;border:1px solid var(--line);z-index:-1}
/* Links inside section intros read as links, like the rest of the site's inline links. */
.sec-sub a:not(.btn){color:var(--sky)}

/* Withdrawal page: the model form, set apart like a letter (owner 2026-10-31). */
.legal-doc .wform{margin:12px 0 0;padding:18px 20px;border-left:3px solid var(--line);background:rgba(255,255,255,.02)}
.legal-doc .wform p{margin:0 0 8px}

/* Checkout: the honest ban-risk line under the pay button (owner 2026-10-31). */
.cosum .co-risk{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--mute)}
.cosum .co-risk a{color:var(--sky)}

/* About, Our story (owner 2026-11-01): space between its paragraphs. */
.legal-doc .story+.story{margin-top:14px}