/* FunPay Auto — region-change storefront (key-only). Hand-written from the design
   mockup; wired to the shared backend by app.js. */
body{margin:0;background:#17181c;color:#e7e8ee;font-family:"Manrope","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#ff9440}a:hover{color:#ffb374}
*{box-sizing:border-box}
:root{--bg:#17181c;--card:#24252c;--tile:#2b2d35;--ink:#f5f6f8;--text:#e7e8ee;--muted:#9a9ca6;--accent:#ff7a1a;--accent2:#ff9440;--accentd:#ff6400;--accentlite:rgba(255,122,26,.12);--line:rgba(255,255,255,.07);--err:#ff6b6b;--errbg:rgba(255,107,107,.1);--errbd:rgba(255,107,107,.32);--ok:#52d38a}
button{font-family:inherit}input{font-family:inherit}
[hidden]{display:none!important}

.bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(140% 100% at 50% -10%,#202127,#141519 62%)}
.bg .lines{position:absolute;inset:-20%;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 1px,transparent 1px 92px);opacity:.9}
.bg .glint{position:absolute;width:60vw;height:60vw;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.bg .glint.a{right:-16vw;top:-22vw;background:radial-gradient(circle,rgba(255,122,26,.16),transparent 62%);animation:gl 24s ease-in-out infinite alternate}
.bg .glint.b{left:-18vw;bottom:-24vw;background:radial-gradient(circle,rgba(255,122,26,.1),transparent 62%);animation:gl 30s ease-in-out infinite alternate-reverse}
@keyframes gl{from{transform:translate(0,0)}to{transform:translate(-6vw,5vw) scale(1.1)}}
.bg .streak{position:absolute;width:150vw;height:1px;background:linear-gradient(90deg,transparent,rgba(255,122,26,.3),transparent);opacity:.5}
.bg .streak.s1{top:14%;left:-25vw;transform:rotate(-30deg)}
.bg .streak.s2{bottom:18%;right:-25vw;transform:rotate(-30deg)}

.brand{position:absolute;left:0;right:0;top:40px;display:flex;align-items:center;justify-content:center;gap:16px;z-index:3;animation:brandIn .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes brandIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.brand .ic{width:56px;height:56px;border-radius:16px;background:linear-gradient(145deg,#ff9440,#ff6a00);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(255,106,0,.45),inset 0 1px 0 rgba(255,255,255,.3)}
.brand .ic span{font-family:"Montserrat",sans-serif;font-weight:800;font-style:italic;font-size:30px;color:#fff;text-shadow:0 2px 4px rgba(120,40,0,.4)}
.brand .wm{font-family:"Montserrat",sans-serif;font-weight:800;font-style:italic;font-size:30px;letter-spacing:.01em;color:#fff}
.brand .wm b{color:var(--accent);font-weight:800}
@media (max-width:640px){.brand{top:24px;gap:12px}.brand .ic{width:46px;height:46px;border-radius:13px}.brand .ic span{font-size:25px}.brand .wm{font-size:24px}}

.root{position:relative;width:100%;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#17181c}
.stage{position:relative;z-index:2;width:100%;display:flex;align-items:center;justify-content:center;padding:150px 16px 56px}
.panel{position:relative;width:468px;max-width:100%;padding:38px 40px 34px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.03);animation:panelIn .8s cubic-bezier(.2,.8,.2,1) .05s both}
.panel.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.scr{display:flex;flex-direction:column;gap:18px;animation:scrIn .5s cubic-bezier(.2,.8,.2,1) both}
.scr.center{align-items:center;text-align:center}
.scr.out{animation:scrOut .34s cubic-bezier(.4,0,.6,1) both}
@keyframes scrIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes scrOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-14px) scale(.99)}}
.ktile{width:58px;height:58px;border-radius:15px;background:var(--tile);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin:4px auto 2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
h1.t{margin:0;font-family:"Montserrat",sans-serif;font-weight:800;font-size:27px;line-height:1.15;letter-spacing:.01em;text-transform:uppercase;color:#fff}
h1.t.sm{font-size:23px}
p.sub{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
p.sub b{color:#cfd1d8;font-weight:600}

.flabel{font-family:"Montserrat",sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8a8c96;margin:2px 0 9px}
.acc{position:relative}
.acc input{width:100%;height:64px;border-radius:13px;background:var(--tile);border:1px solid var(--line);color:#fff;font-family:"Montserrat",sans-serif;font-weight:700;font-size:22px;letter-spacing:.12em;text-align:center;padding:0 16px;outline:0;transition:border-color .25s,box-shadow .25s,background .25s;caret-color:var(--accent)}
.acc input::placeholder{color:#5a5c66;letter-spacing:.12em}
.acc input:hover{border-color:rgba(255,255,255,.14)}
.acc input:focus{border-color:var(--accent);background:#2f3139;box-shadow:0 0 0 4px rgba(255,122,26,.14),0 0 28px rgba(255,122,26,.12)}
.acc.err input{border-color:var(--errbd);background:var(--errbg);box-shadow:0 0 0 4px rgba(255,107,107,.1)}
.acc.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97) both}

.flag{font-size:68px;line-height:1;margin:6px 0 2px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4));animation:flagIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes flagIn{0%{opacity:0;transform:scale(.4) rotate(-8deg)}60%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
.cname{font-family:"Montserrat",sans-serif;font-weight:800;font-size:30px;text-transform:uppercase;letter-spacing:.01em;color:#fff}
.okpillg{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ok);background:rgba(82,211,138,.12);border:1px solid rgba(82,211,138,.3);padding:6px 13px;border-radius:999px;letter-spacing:.02em}
.cardlet{width:100%;background:var(--tile);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.cardlet b{color:#fff;font-family:"Montserrat",sans-serif;font-weight:700;letter-spacing:.06em}

.fgroup{display:flex;flex-direction:column;gap:15px;width:100%}
.field{position:relative;height:58px;border-radius:12px;background:var(--tile);border:1px solid var(--line);transition:border-color .25s,box-shadow .25s,background .25s;text-align:left}
.field:hover{border-color:rgba(255,255,255,.14)}
.field:focus-within{border-color:var(--accent);background:#2f3139;box-shadow:0 0 0 4px rgba(255,122,26,.14)}
.field input{width:100%;height:100%;padding:23px 52px 7px 15px;border:0;outline:0;background:transparent;color:#fff;font-size:15.5px;caret-color:var(--accent)}
.field input::placeholder{color:transparent}
.field label{position:absolute;left:15px;top:18px;font-size:15px;color:var(--muted);pointer-events:none;transition:transform .26s cubic-bezier(.2,.8,.2,1),color .26s;transform-origin:left top}
.field input:focus + label,.field input:not(:placeholder-shown) + label{transform:translateY(-11px) scale(.74);color:var(--accent2)}
.field.err{border-color:var(--errbd);background:var(--errbg)}
.field.err label{color:#ff9b9b}
.field.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.eye{position:absolute;right:8px;top:9px;width:40px;height:40px;border-radius:9px;border:0;background:transparent;color:#8a8c96;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s}
.eye:hover{color:var(--accent2);background:var(--accentlite)}
.eye:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ferr{margin:-11px 0 0 2px;font-size:13px;color:#ff9b9b;display:flex;align-items:center;gap:6px;animation:fadeUp .3s ease-out both}
.ferr.center{justify-content:center;margin:-4px 0 0}
@keyframes fadeUp{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.link{font-size:13.5px;color:var(--accent2);text-decoration:none;cursor:pointer;background:none;border:0;padding:0;font-weight:500;transition:color .2s}
.link:hover{color:#ffb374;text-decoration:underline}
.banner{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-radius:12px;background:var(--errbg);border:1px solid var(--errbd);font-size:13.5px;line-height:1.45;color:#ffc0c0;animation:fadeUp .35s ease-out both;text-align:left;width:100%}
.banner.info{background:var(--accentlite);border-color:rgba(255,122,26,.3);color:#ffcd9c}
.banner .ic2{flex:none;margin-top:1px}
.banner .btxt{flex:1;display:flex;flex-direction:column;gap:7px}
.mini{align-self:flex-start;height:32px;padding:0 13px;border-radius:9px;border:1px solid var(--errbd);background:transparent;color:#ffc0c0;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s}
.mini:hover{background:rgba(255,107,107,.1)}

.btn{position:relative;height:54px;border-radius:13px;border:0;font-family:"Montserrat",sans-serif;font-size:14.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:transform .18s,box-shadow .25s,opacity .25s,filter .2s;overflow:hidden;width:100%}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn.primary{color:#231200;background:linear-gradient(135deg,#ff9440,#ff6a00);box-shadow:0 10px 28px rgba(255,106,0,.4),0 0 0 1px rgba(255,160,80,.2) inset}
.btn.primary:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 14px 36px rgba(255,106,0,.5)}
.btn.primary:active:not(:disabled){transform:translateY(0) scale(.99)}
.btn:disabled{cursor:default;opacity:.65}
.btn.primary.busy{filter:brightness(.82)}
.btn.ghost{background:transparent;color:#d6d8e0;border:1px solid var(--line);height:48px;font-weight:600}
.btn.ghost:hover:not(:disabled){background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.18);color:#fff}
.btn.ghost:active:not(:disabled){transform:scale(.99)}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(35,18,0,.3);border-top-color:#231200;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pulse{display:inline-flex;gap:6px}.pulse i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pul 1.2s ease-in-out infinite}.pulse i:nth-child(2){animation-delay:.15s}.pulse i:nth-child(3){animation-delay:.3s}
@keyframes pul{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
.note{font-size:13px;color:var(--muted);text-align:center;margin:0;width:100%;animation:fadeUp .3s both}

.sendbox{display:flex;flex-direction:column;align-items:center;gap:16px;padding:18px 0 6px;animation:fadeUp .4s both;width:100%}
.sendbox .txt{font-size:14px;color:#c7c9d2}
.plane{width:62px;height:62px;border-radius:50%;background:var(--accentlite);display:flex;align-items:center;justify-content:center;animation:breath 1.4s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(.92)}50%{transform:scale(1.07)}}
.timerWrap{display:flex;flex-direction:column;align-items:center;gap:11px;animation:fadeUp .5s both;width:100%}
.ring{position:relative;width:128px;height:128px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring .track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:5}
.ring .prog{fill:none;stroke:url(#gradRing);stroke-width:5;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:0;animation:drain 600s linear forwards;transition:filter .4s,stroke-width .4s}
@keyframes drain{from{stroke-dashoffset:0}to{stroke-dashoffset:326.7}}
.ring.hot .prog{filter:drop-shadow(0 0 8px rgba(255,122,26,.7));stroke-width:6}
.ring.dead .prog{opacity:0;transition:opacity .4s}
.ring .glowc{position:absolute;inset:16px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.16),transparent 70%);opacity:0;transition:opacity .5s}
.ring.hot .glowc{opacity:1;animation:breath 1s ease-in-out infinite}
.nums{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Montserrat",sans-serif;font-weight:700;font-size:30px;letter-spacing:.01em;color:#fff;font-variant-numeric:tabular-nums;transition:color .3s}
.ring.hot .nums{color:var(--accent2);animation:numPulse 1s ease-in-out infinite}
.ring.dead .nums{color:#777985}
@keyframes numPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.ttl{margin:0;font-size:13.5px;color:var(--muted);transition:color .3s}
.ttl.dead{color:#ff9b9b}
.cells{display:flex;gap:10px;justify-content:center;animation:fadeUp .4s both}
.cell{width:50px;height:60px;border-radius:12px;border:1px solid var(--line);background:var(--tile);color:#fff;text-align:center;font-family:"Montserrat",sans-serif;font-size:24px;font-weight:700;outline:0;transition:border-color .22s,box-shadow .22s,background .22s,transform .22s,opacity .3s;caret-color:transparent}
.cell:hover:not(:disabled){border-color:rgba(255,255,255,.16)}
.cell:focus{border-color:var(--accent);background:#2f3139;box-shadow:0 0 0 4px rgba(255,122,26,.14);transform:translateY(-2px)}
.cell.filled{border-color:rgba(255,122,26,.45);background:#2f3139}
.cell:disabled{opacity:.4}
.cells.bad .cell{border-color:var(--errbd);background:var(--errbg)}
.cells.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97) both}
.cerr{margin:-4px 0 0;text-align:center;font-size:13.5px;color:#ff9b9b;display:flex;flex-direction:column;align-items:center;gap:9px;animation:fadeUp .3s both}
.vbox{display:flex;flex-direction:column;align-items:center;gap:13px;padding:6px 0;animation:fadeUp .4s both;color:#c7c9d2;font-size:14px}
.okpill{display:flex;align-items:center;gap:8px;color:var(--ok)}

.full{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;padding:90px 16px 40px;animation:fadeIn .6s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.pcore{position:relative;width:126px;height:126px;display:flex;align-items:center;justify-content:center}
.loader{width:84px;height:84px;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,122,26,0) 0%,var(--accent) 70%,var(--accent2) 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));animation:spin 1.1s linear infinite;filter:drop-shadow(0 0 12px rgba(255,122,26,.5))}
.pcore .loader{position:absolute;width:126px;height:126px}
.loader.stop{animation-play-state:paused;opacity:0;transition:opacity .5s}
.ppct{font-family:"Montserrat",sans-serif;font-weight:700;font-size:36px;color:#fff;font-variant-numeric:tabular-nums}
.ppct span{font-size:18px;color:var(--accent2);margin-left:2px}
.pcountry{font-size:14px;color:var(--muted)}
.pcountry b{color:#fff}
.steps{position:relative;height:26px;width:100%;max-width:520px}
.step{position:absolute;left:0;right:0;text-align:center;font-size:16px;color:#c7c9d2;opacity:0;transform:translateY(13px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.step.on{opacity:1;transform:none}
.step.off{opacity:0;transform:translateY(-13px)}
.pbar{position:relative;width:min(420px,84vw);height:5px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.pbar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,var(--accentd),var(--accent2));transition:width .4s cubic-bezier(.4,0,.2,1)}
.pbar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%);animation:sheen 1.8s ease-in-out infinite}
@keyframes sheen{to{transform:translateX(220%)}}
.game{width:min(324px,86vw);margin-top:4px;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line);animation:fadeUp .6s both}
.ghead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
.glabel{font-size:12.5px;color:#a0a2ac}
.gstats{display:flex;gap:14px;font-size:12px;color:var(--muted);white-space:nowrap}
.gstats b{font-family:"Montserrat",sans-serif;color:var(--accent2);font-size:14px;margin-left:4px}
.ggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gnode{position:relative;aspect-ratio:1/1;border-radius:12px;border:1px solid var(--line);background:var(--tile);cursor:pointer;transition:transform .12s,background .2s,border-color .2s,box-shadow .25s;overflow:hidden}
.gnode::before{content:"";position:absolute;inset:28%;border-radius:50%;background:rgba(255,255,255,.08);transition:all .2s}
.gnode:hover{border-color:rgba(255,255,255,.16)}
.gnode:active{transform:scale(.95)}
.gnode.live{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,122,26,.16),0 6px 18px rgba(255,122,26,.3)}
.gnode.live::before{inset:22%;background:radial-gradient(circle,#ffb16b,#ff6a00 65%);box-shadow:0 0 16px rgba(255,122,26,.7);animation:livePulse .7s ease-in-out infinite}
@keyframes livePulse{0%,100%{transform:scale(.86)}50%{transform:scale(1.06)}}
.gnode.hit::before{inset:16%;background:radial-gradient(circle,#ffd9b0,#ff7a1a);box-shadow:0 0 22px rgba(255,122,26,.8)}
.gnode.hit{animation:hitpop .3s ease-out}
@keyframes hitpop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.gnode.miss{border-color:var(--errbd)}
.gnode.miss::before{background:rgba(255,107,107,.5)}
.pmeta{font-size:12.5px;color:var(--muted);text-align:center}

.succ{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:60px 16px}
.dim{position:absolute;inset:0;background:rgba(10,8,6,0);transition:background 1.2s}
.dim.on{background:rgba(10,8,6,.55)}
.rglow{position:absolute;left:50%;top:50%;width:820px;height:820px;margin:-410px 0 0 -410px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.16),transparent 60%);opacity:0;transform:scale(.6);transition:opacity 2.4s ease,transform 2.4s ease;pointer-events:none}
.rglow.on{opacity:1;transform:scale(1)}
.core{position:relative;width:146px;height:146px;display:flex;align-items:center;justify-content:center}
.orb{position:absolute;width:108px;height:108px;border-radius:50%;background:linear-gradient(145deg,#ff9440,#ff6400);box-shadow:0 0 0 0 rgba(255,122,26,.4),0 18px 40px rgba(255,106,0,.4);opacity:0;transform:scale(.04)}
.orb.on{animation:orbIn 1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes orbIn{0%{opacity:0;transform:scale(.04);box-shadow:0 0 30px 10px rgba(255,122,26,.9)}40%{opacity:1;transform:scale(.3)}100%{opacity:1;transform:scale(1);box-shadow:0 18px 40px rgba(255,106,0,.4)}}
.orb.bright{box-shadow:0 0 0 8px rgba(255,122,26,.12),0 18px 44px rgba(255,106,0,.5);transition:box-shadow .8s}
.chk{position:absolute;width:108px;height:108px}
.chk path{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:62;stroke-dashoffset:62}
.chk.on path{animation:draw .75s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.rip{position:absolute;left:50%;top:50%;width:108px;height:108px;margin:-54px 0 0 -54px;border-radius:50%;border:1.5px solid rgba(255,122,26,.5);opacity:0;pointer-events:none}
.rip.on{animation:rip 1.8s cubic-bezier(.1,.6,.3,1) forwards}
.rip.on:nth-child(2){animation-delay:.28s}.rip.on:nth-child(3){animation-delay:.56s}
@keyframes rip{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(4.2)}}
.parts{position:absolute;left:50%;top:50%;width:0;height:0}
.pt{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#ffb16b;box-shadow:0 0 6px rgba(255,122,26,.7);opacity:0}
.parts.on .pt{animation:fly 1.5s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes fly{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
.pt:nth-child(1){--dx:110px;--dy:-30px}.pt:nth-child(2){--dx:70px;--dy:-95px;animation-delay:.05s}.pt:nth-child(3){--dx:-20px;--dy:-120px;animation-delay:.1s}.pt:nth-child(4){--dx:-90px;--dy:-80px;animation-delay:.03s}.pt:nth-child(5){--dx:-125px;--dy:10px;animation-delay:.12s}.pt:nth-child(6){--dx:-85px;--dy:85px;animation-delay:.07s}.pt:nth-child(7){--dx:-10px;--dy:120px;animation-delay:.15s}.pt:nth-child(8){--dx:80px;--dy:90px;animation-delay:.02s}.pt:nth-child(9){--dx:125px;--dy:35px;animation-delay:.18s}.pt:nth-child(10){--dx:40px;--dy:-135px;animation-delay:.2s;width:3px;height:3px}.pt:nth-child(11){--dx:-135px;--dy:-45px;animation-delay:.22s;width:3px;height:3px}.pt:nth-child(12){--dx:-50px;--dy:135px;animation-delay:.09s;width:3px;height:3px}.pt:nth-child(13){--dx:135px;--dy:-80px;animation-delay:.25s;width:2px;height:2px}.pt:nth-child(14){--dx:20px;--dy:-60px;animation-delay:.3s;width:2px;height:2px}
.orbit{position:absolute;width:160px;height:160px;left:50%;top:50%;margin:-80px 0 0 -80px;border-radius:50%;opacity:0;background:conic-gradient(from 0deg,transparent 0%,transparent 70%,#ff9440 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px))}
.orbit.on{animation:orbit 1.8s cubic-bezier(.4,0,.2,1) forwards}
@keyframes orbit{0%{opacity:0;transform:rotate(0)}15%{opacity:1}80%{opacity:1;transform:rotate(340deg)}100%{opacity:0;transform:rotate(360deg)}}
.done{margin:34px 0 0;font-family:"Montserrat",sans-serif;font-weight:800;font-size:34px;letter-spacing:.03em;text-transform:uppercase;color:#fff;opacity:0;transform:scale(.92);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.done.on{opacity:1;transform:scale(1)}
.region{margin:12px 0 0;font-family:"Manrope",sans-serif;font-weight:600;font-size:15px;color:var(--accent2);opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1);text-align:center}
.region.on{opacity:1;transform:none}
.cont{margin-top:38px;display:flex;gap:12px;width:min(460px,90vw);opacity:0;transform:translateY(12px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.cont.on{opacity:1;transform:none;pointer-events:auto}
.cont .btn{flex:1}
@media(max-width:520px){.cont{flex-direction:column}}

@media (max-width:640px){
  .stage{padding:120px 12px 40px;align-items:flex-start}
  .panel{width:100%;padding:30px 22px 26px}
  h1.t{font-size:23px}h1.t.sm{font-size:20px}
  .acc input{height:58px;font-size:19px}
  .cell{width:44px;height:56px;font-size:22px}.cells{gap:8px}
  .done{font-size:28px}.cname{font-size:26px}.flag{font-size:58px}
}
.confirm-wrap{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,8,6,.62);backdrop-filter:blur(3px);animation:fadeIn .25s both}
.confirm-box{width:420px;max-width:100%;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 30px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:15px;box-shadow:0 40px 90px rgba(0,0,0,.55);animation:panelIn .4s cubic-bezier(.2,.8,.2,1) both}
.confirm-box .btn{width:100%}

@media (prefers-reduced-motion:reduce){
  .bg .glint,.ring .glowc,.plane,.gnode.live::before{animation:none!important}
  .panel,.scr,.scr.out,.flag{animation-duration:.01ms!important}
  .rip.on,.parts.on .pt,.orbit.on{animation-duration:.01ms!important;opacity:0!important}
  .dim,.rglow,.done,.region,.cont,.step{transition-duration:.01ms!important}
}