/* Voxxaa STORE : layar offline beranimasi (sinyal putus, gelembung yang bisa dipecahkan, pulih otomatis) */
#vxo{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#1d0810 0%,#050304 62%);color:var(--text,#f8f0f1);font-family:var(--body,'Manrope','Segoe UI',system-ui,sans-serif);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
#vxo.on{opacity:1;visibility:visible;transition:opacity .45s ease}
#vxo.ok .vxo-card{animation:vxoOk .6s var(--ease,cubic-bezier(.2,.8,.2,1)) both}
@keyframes vxoOk{50%{transform:scale(1.05)}}

/* latar: aurora redup + garis scan + noise statis */
#vxo .vxo-bg{position:absolute;inset:0;pointer-events:none}
#vxo .vxo-bg i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;opacity:.28;filter:blur(2px)}
#vxo .vxo-bg .a{left:-25vmax;top:-30vmax;background:radial-gradient(circle,var(--a1,#ff2d46),transparent 62%);animation:vxoDrift 18s ease-in-out infinite alternate}
#vxo .vxo-bg .b{right:-30vmax;bottom:-35vmax;background:radial-gradient(circle,var(--a2,#b50a22),transparent 62%);animation:vxoDrift 24s ease-in-out infinite alternate-reverse}
@keyframes vxoDrift{to{transform:translate(8vmax,6vmax) scale(1.12)}}
#vxo .vxo-scan{position:absolute;left:0;right:0;height:120px;top:-120px;background:linear-gradient(to bottom,transparent,rgba(var(--hot-rgb,255,59,79),.09),transparent);animation:vxoScan 5s linear infinite;pointer-events:none}
@keyframes vxoScan{to{transform:translateY(calc(100vh + 240px))}}

/* gelembung mini game */
#vxo .vxo-field{position:absolute;inset:0;overflow:hidden}
#vxo .vxo-b{position:absolute;bottom:-90px;border-radius:50%;border:1px solid rgba(var(--hot-rgb,255,59,79),.55);background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.35),rgba(var(--acc-rgb,224,20,47),.18) 45%,rgba(var(--acc-rgb,224,20,47),.06));box-shadow:0 0 18px rgba(var(--acc-rgb,224,20,47),.35),inset 0 0 12px rgba(255,255,255,.12);cursor:pointer;-webkit-tap-highlight-color:transparent;animation:vxoRise linear forwards;touch-action:manipulation}
@keyframes vxoRise{to{transform:translate(var(--dx,0),calc(-100vh - 180px))}}
#vxo .vxo-b.pop{animation:vxoPop .35s ease-out forwards;pointer-events:none}
@keyframes vxoPop{0%{transform:scale(1);opacity:1}100%{transform:scale(1.9);opacity:0}}
#vxo .vxo-plus{position:absolute;font-weight:800;font-size:15px;color:var(--acc-hot,#ff3b4f);text-shadow:0 0 10px rgba(var(--acc-rgb,224,20,47),.8);pointer-events:none;animation:vxoPlus .8s ease-out forwards}
@keyframes vxoPlus{to{transform:translateY(-38px);opacity:0}}

/* kartu tengah */
#vxo .vxo-card{position:relative;z-index:2;width:min(420px,100%);padding:30px 24px 22px;border-radius:26px;text-align:center;background:rgba(19,10,13,.72);border:1px solid var(--glass-b,rgba(255,255,255,.15));box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(var(--acc-rgb,224,20,47),.12);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);pointer-events:none}
#vxo .vxo-card button{pointer-events:auto}
#vxo .vxo-orb{position:relative;width:132px;height:132px;margin:0 auto 14px}
#vxo .vxo-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(var(--hot-rgb,255,59,79),.6);animation:vxoRing 2.6s ease-out infinite}
#vxo .vxo-ring.r2{animation-delay:.87s}#vxo .vxo-ring.r3{animation-delay:1.74s}
@keyframes vxoRing{0%{transform:scale(.45);opacity:.9}100%{transform:scale(1.35);opacity:0}}
#vxo .vxo-core{position:absolute;inset:22px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,rgba(var(--hot-rgb,255,59,79),.35),rgba(var(--acc-rgb,224,20,47),.14) 60%,rgba(0,0,0,.4));border:1px solid rgba(var(--hot-rgb,255,59,79),.5);box-shadow:0 0 36px rgba(var(--acc-rgb,224,20,47),.45);animation:vxoBeat 2.6s ease-in-out infinite}
@keyframes vxoBeat{50%{transform:scale(1.07);box-shadow:0 0 54px rgba(var(--acc-rgb,224,20,47),.7)}}
#vxo .vxo-core svg{width:54px;height:54px;overflow:visible}
#vxo .vxo-core .w{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;opacity:.3}
#vxo .vxo-core .w.w1{animation:vxoWifi 1.8s ease-in-out infinite}
#vxo .vxo-core .w.w2{animation:vxoWifi 1.8s .25s ease-in-out infinite}
#vxo .vxo-core .w.w3{animation:vxoWifi 1.8s .5s ease-in-out infinite}
@keyframes vxoWifi{0%,100%{opacity:.18}45%{opacity:1}}
#vxo .vxo-core .dot{fill:#fff}
#vxo .vxo-core .cut{stroke:var(--acc-hot,#ff3b4f);stroke-width:5;stroke-linecap:round;stroke-dasharray:70;stroke-dashoffset:70;animation:vxoCut 2.6s ease-in-out infinite;filter:drop-shadow(0 0 5px rgba(var(--acc-rgb,224,20,47),.9))}
@keyframes vxoCut{0%,12%{stroke-dashoffset:70}38%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:-70}}
#vxo.ok .vxo-core .w{opacity:1;animation:none;stroke:var(--ok,#35d07f)}#vxo.ok .vxo-core .dot{fill:var(--ok,#35d07f)}#vxo.ok .vxo-core .cut{display:none}
#vxo.ok .vxo-ring{border-color:rgba(53,208,127,.7)}

#vxo h2{font-family:var(--display,'Big Shoulders Display',Impact,sans-serif);font-size:34px;font-weight:900;letter-spacing:.02em;line-height:1.05;text-transform:uppercase;position:relative;display:inline-block}
#vxo h2.gl::before,#vxo h2.gl::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;overflow:hidden}
#vxo h2.gl::before{color:#00e5ff;mix-blend-mode:screen;animation:vxoG1 3.2s steps(1) infinite}
#vxo h2.gl::after{color:var(--acc-hot,#ff3b4f);mix-blend-mode:screen;animation:vxoG2 3.2s steps(1) infinite}
@keyframes vxoG1{0%,90%,100%{transform:none;clip-path:inset(0 0 100% 0)}92%{transform:translate(-3px,0);clip-path:inset(15% 0 55% 0)}95%{transform:translate(2px,0);clip-path:inset(60% 0 10% 0)}}
@keyframes vxoG2{0%,90%,100%{transform:none;clip-path:inset(0 0 100% 0)}93%{transform:translate(3px,0);clip-path:inset(40% 0 30% 0)}96%{transform:translate(-2px,0);clip-path:inset(5% 0 75% 0)}}
#vxo p{margin:8px auto 0;max-width:320px;color:var(--mute,#b6a4a8);font-size:14px}
#vxo .vxo-st{margin-top:14px;white-space:nowrap;max-width:100%;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;font-size:12.5px;font-weight:700;background:var(--glass,rgba(255,255,255,.06));border:1px solid var(--glass-b,rgba(255,255,255,.15))}
#vxo .vxo-st i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--warn,#ffb020);animation:vxoBlink 1s ease-in-out infinite}
#vxo.ok .vxo-st i{background:var(--ok,#35d07f);animation:none}
@keyframes vxoBlink{50%{opacity:.25}}
#vxo .vxo-act{margin-top:16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#vxo .vxo-act button{border:0;cursor:pointer;padding:11px 18px;border-radius:14px;font-weight:800;font-size:14px;transition:transform .15s,filter .15s}
#vxo .vxo-act button:active{transform:scale(.96)}
#vxo .vxo-act .vxo-go{background:linear-gradient(135deg,var(--acc-hot,#ff3b4f),var(--acc,#e0142f));color:var(--on-acc,#fff);box-shadow:0 8px 24px rgba(var(--acc-rgb,224,20,47),.4)}
#vxo .vxo-act .vxo-sk{background:var(--glass,rgba(255,255,255,.06));border:1px solid var(--glass-b,rgba(255,255,255,.15));color:var(--text,#f8f0f1)}
#vxo .vxo-act .vxo-go.busy{filter:saturate(.4);pointer-events:none}
#vxo .vxo-game{margin-top:14px;font-size:12.5px;color:var(--mute,#b6a4a8)}
#vxo .vxo-game b{color:var(--text,#f8f0f1);font-variant-numeric:tabular-nums}

/* pil kecil saat layar offline ditutup */
#vxo-pill{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));z-index:2147482999;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;font:700 12.5px/1 var(--body,'Manrope',system-ui,sans-serif);color:#fff;background:rgba(19,10,13,.92);border:1px solid var(--acc,#e0142f);box-shadow:0 8px 30px rgba(0,0,0,.5);transform:translate(-50%,-80px);transition:transform .4s var(--ease,cubic-bezier(.2,.8,.2,1));cursor:pointer}
#vxo-pill.on{transform:translate(-50%,0)}
#vxo-pill i{width:8px;height:8px;border-radius:50%;background:var(--acc-hot,#ff3b4f);animation:vxoBlink 1s ease-in-out infinite}
#vxo-pill.ok{border-color:var(--ok,#35d07f)}#vxo-pill.ok i{background:var(--ok,#35d07f);animation:none}

@media (prefers-reduced-motion:reduce){
  #vxo *,#vxo *::before,#vxo *::after{animation:none!important}
  #vxo .vxo-core .cut{stroke-dashoffset:0}
  #vxo .vxo-field{display:none}
}
html.lite #vxo .vxo-field,html.lite #vxo .vxo-scan{display:none}
html.lite #vxo .vxo-core .cut{stroke-dashoffset:0}

/* tombol dan HUD game */
#vxo .vxo-act .vxo-play{background:var(--glass,rgba(255,255,255,.06));border:1px solid var(--acc-hot,#ff3b4f);color:var(--text,#f8f0f1);box-shadow:0 0 18px rgba(var(--acc-rgb,224,20,47),.35)}
#vxo .vxo-b.amb{pointer-events:none;opacity:.6}
#vxo .vxo-hud{display:none;position:absolute;z-index:3;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);align-items:center;gap:10px;max-width:calc(100% - 16px);padding:7px 8px 7px 14px;border-radius:99px;font-weight:700;font-size:13.5px;background:rgba(19,10,13,.85);border:1px solid var(--glass-b,rgba(255,255,255,.15));white-space:nowrap}
#vxo .vxo-hud b{font-variant-numeric:tabular-nums;color:var(--acc-hot,#ff3b4f)}
#vxo .vxo-hud button{border:0;cursor:pointer;padding:6px 12px;border-radius:99px;font-weight:800;font-size:12.5px;background:var(--glass-2,rgba(255,255,255,.1));color:var(--text,#f8f0f1)}
#vxo.play .vxo-card{display:none}
#vxo.play .vxo-hud{display:flex}
#vxo.play .vxo-b:not(.pop){box-shadow:0 0 24px rgba(var(--acc-rgb,224,20,47),.55),inset 0 0 12px rgba(255,255,255,.15)}
@media (prefers-reduced-motion:reduce){#vxo .vxo-play{display:none}}
html.lite #vxo .vxo-play{display:none}

/* Voxxaa Pop : canvas, nyawa, tombol HUD, hasil akhir */
#vxo .vxo-cv{display:none;position:absolute;inset:0;z-index:1;touch-action:none;-webkit-tap-highlight-color:transparent;cursor:pointer;user-select:none;-webkit-user-select:none}
#vxo.play .vxo-cv{display:block}
#vxo.play .vxo-field,#vxo.play .vxo-scan{display:none}
#vxo .vxo-lv{color:var(--acc-hot,#ff3b4f);letter-spacing:.08em;font-size:15px;text-shadow:0 0 8px rgba(var(--acc-rgb,224,20,47),.6)}
#vxo .vxo-hud button{min-width:34px;min-height:30px}
#vxo .vxo-hud button:focus-visible,#vxo .vxo-act button:focus-visible{outline:2px solid var(--acc-hot,#ff3b4f);outline-offset:2px}
#vxo .vxo-res{display:none;margin:14px auto 2px;gap:8px;justify-content:center}
#vxo .vxo-res.on{display:flex;animation:vxoRes .5s var(--ease,cubic-bezier(.2,.8,.2,1)) both}
#vxo .vxo-res span{flex:1;max-width:110px;padding:9px 6px;border-radius:14px;background:var(--glass,rgba(255,255,255,.06));border:1px solid var(--glass-b,rgba(255,255,255,.15));display:flex;flex-direction:column;gap:2px}
#vxo .vxo-res b{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--acc-hot,#ff3b4f)}
#vxo .vxo-res em{font-style:normal;font-size:11px;color:var(--mute,#b6a4a8);font-weight:700}
@keyframes vxoRes{from{opacity:0;transform:translateY(8px)}}
@media (max-width:380px){#vxo .vxo-hud{gap:7px;font-size:12.5px;padding-left:10px}#vxo .vxo-hud button{padding:5px 8px}}
html.lite #vxo .vxo-cv{display:none!important}
@media (prefers-reduced-motion:reduce){#vxo .vxo-cv{display:none!important}}