@font-face{font-family:Poppins;font-weight:600;src:url(/fonts/poppins-latin-600-normal.woff2) format("woff2");font-display:block}
@font-face{font-family:Poppins;font-weight:800;src:url(/fonts/poppins-latin-800-normal.woff2) format("woff2");font-display:block}
@font-face{font-family:Poppins;font-weight:900;src:url(/fonts/poppins-latin-900-normal.woff2) format("woff2");font-display:block}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#1a0010;overflow:hidden;font-family:Poppins,"Segoe UI",system-ui,sans-serif;color:#fff}
body{display:grid;place-items:center}
.stage{position:relative;width:min(100vw,calc(100vh*16/9));aspect-ratio:16/9;container-type:size;background:#e2136e;overflow:hidden}
canvas#ad{position:absolute;inset:0;width:100%;height:100%;display:block}
.pip{position:absolute;left:1.6cqw;top:1.6cqw;width:19cqw;aspect-ratio:16/9;border-radius:1.2cqw;overflow:hidden;border:.35cqw solid #fff;box-shadow:0 .6cqw 2cqw rgba(60,0,30,.5);background:#300;transition:opacity .3s,transform .3s}
.pip video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}
.chip{position:absolute;left:.6cqw;bottom:.6cqw;font-weight:600;font-size:1.05cqw;padding:.25cqw .8cqw;border-radius:2cqw;background:rgba(0,0,0,.6)}
.chip.ok{background:#12a150}.chip.palm{background:#ffb703;color:#4a2a00}
body.counting .pip{width:12cqw}
.invite{position:absolute;left:1.5cqw;bottom:2cqw;width:44cqw;text-align:center;padding:1.4cqw 1.6cqw;border-radius:2cqw;background:rgba(255,255,255,.96);color:#a8084f;box-shadow:0 .8cqw 3cqw rgba(60,0,30,.45);animation:bob 1.8s ease-in-out infinite;transition:opacity .3s,transform .3s}
.invite .hand{font-size:4.2cqw;line-height:1;animation:wave 1.4s ease-in-out infinite;transform-origin:70% 80%;display:inline-block}
.invite .line1{font-weight:900;font-size:2.4cqw;line-height:1.15;margin-top:.3cqw}
.invite .line2{font-weight:600;font-size:1.25cqw;color:#7a0a3d;margin-top:.5cqw;opacity:.85}
@keyframes bob{50%{transform:translateY(-.6cqw)}}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(18deg)}75%{transform:rotate(-12deg)}}
.count{position:absolute;left:22.4cqw;top:50%;width:0;height:0;display:none}
.count span{position:absolute;transform:translate(-50%,-50%);font-weight:900;font-size:24cqw;line-height:1;color:#fff;text-shadow:0 0 0 #fff,.5cqw .6cqw 0 #a8084f,0 1.2cqw 4cqw rgba(60,0,30,.6);-webkit-text-stroke:.5cqw #a8084f;animation:tick 1s ease-out}
@keyframes tick{0%{transform:translate(-50%,-50%) scale(1.8);opacity:0}25%{opacity:1}100%{transform:translate(-50%,-50%) scale(.9);opacity:.85}}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.flash.go{animation:flash .6s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
.proc{position:absolute;left:22.4cqw;bottom:6cqw;transform:translateX(-50%);display:none;align-items:center;gap:1cqw;font-weight:800;font-size:1.8cqw;background:rgba(0,0,0,.55);padding:1cqw 2cqw;border-radius:3cqw;white-space:nowrap}
.spin{width:2.2cqw;height:2.2cqw;border:.4cqw solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.result{position:absolute;left:1.6cqw;top:1.6cqw;display:none;flex-direction:column;gap:.7cqw;align-items:flex-start}
.ribbon{font-weight:900;font-size:2.4cqw;background:#ffd21f;color:#7a0a3d;padding:.7cqw 2cqw;border-radius:3cqw;box-shadow:0 .5cqw 2cqw rgba(60,0,30,.45)}
.bar{width:19cqw;height:.5cqw;border-radius:1cqw;background:rgba(255,255,255,.35);overflow:hidden}.bar i{display:block;height:100%;width:100%;background:#fff}
.btns{display:flex;gap:.6cqw}
button,.btn{font:600 1.1cqw Poppins,sans-serif;color:#fff;background:rgba(0,0,0,.45);border:.15cqw solid rgba(255,255,255,.6);border-radius:2cqw;padding:.5cqw 1.1cqw;cursor:pointer;backdrop-filter:blur(6px)}
button:hover,.btn:hover{background:rgba(0,0,0,.7)}
.tools{position:absolute;right:1.2cqw;top:1.2cqw;display:flex;gap:.5cqw;transition:opacity .5s}
.tools.idle{opacity:0;pointer-events:none}
.boot{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#e2136e,#7a0a3d);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4cqw;z-index:9;transition:opacity .5s}
.boot.hide{opacity:0;pointer-events:none}
.boot h1{font-weight:900;font-size:5cqw}.boot p{font-size:1.6cqw;font-weight:600}
.boot .spin{width:4cqw;height:4cqw}
.err{max-width:60cqw;text-align:center;font-size:1.4cqw;background:rgba(0,0,0,.4);padding:1cqw 1.6cqw;border-radius:1.2cqw;display:none}
.boot.fail .spin{display:none}
.hidden{display:none!important}