*{box-sizing:border-box}
#pb-stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden;background:#0f2a18;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff}
#pb-c{position:absolute;inset:0;width:100%;height:100%;display:block}
.pb-hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(3*var(--u)) calc(3.5*var(--u));pointer-events:none;font-weight:800;letter-spacing:.04em}
.pb-pill{background:rgba(5,10,12,.62);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:calc(1*var(--u)) calc(3*var(--u));display:flex;align-items:center;gap:calc(2*var(--u));font-size:calc(3.6*var(--u));font-variant-numeric:tabular-nums}
.pb-pips{display:flex;gap:calc(1*var(--u))}
.pb-pip{width:calc(2.8*var(--u));height:calc(2.8*var(--u));border-radius:50%;border:calc(.5*var(--u)) solid var(--accent)}
.pb-pip.on{background:var(--accent)}
#pb-timer{font-family:"Arial Black",Impact,system-ui,sans-serif;font-size:calc(4.8*var(--u))}
#pb-timer.low{color:var(--home)}
.pb-vs{font-size:calc(3.2*var(--u));opacity:.85}
.pb-btn{position:absolute;border-radius:50%;border:0;display:grid;place-items:center;font-family:inherit;font-weight:800;letter-spacing:.05em;color:#fff;cursor:pointer;touch-action:none;padding:0}
#pb-shoot{width:23%;aspect-ratio:1;right:6%;bottom:7%;font-size:calc(4.2*var(--u));background:radial-gradient(circle at 50% 40%,var(--home-l),var(--home) 60%,var(--home-d));box-shadow:0 0 0 calc(1.2*var(--u)) rgba(0,0,0,.35),0 calc(1.5*var(--u)) 0 var(--home-dd)}
#pb-shoot::after{content:"";position:absolute;inset:calc(-2.2*var(--u));border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p,0)*1turn),transparent 0);-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%);pointer-events:none}
#pb-pass{width:16%;aspect-ratio:1;right:31%;bottom:5%;font-size:calc(3.3*var(--u));background:radial-gradient(circle at 50% 40%,var(--away-l),var(--away) 60%,var(--away-d));box-shadow:0 0 0 calc(1*var(--u)) rgba(0,0,0,.35),0 calc(1.2*var(--u)) 0 var(--away-dd)}
.pb-btn.down{transform:translateY(calc(.8*var(--u)));filter:brightness(1.15)}
.pb-banner{position:absolute;left:0;right:0;top:38%;text-align:center;font-family:"Arial Black",Impact,system-ui,sans-serif;font-size:calc(14*var(--u));color:var(--accent);text-shadow:0 calc(1*var(--u)) 0 rgba(0,0,0,.45),0 0 calc(7*var(--u)) var(--accent-a);pointer-events:none;transform:scale(.4);opacity:0;transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.pb-banner.show{transform:scale(1);opacity:1}
.pb-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:30%;background:rgba(5,10,12,.75);border:1px solid rgba(255,255,255,.15);border-radius:calc(2.5*var(--u));padding:calc(2*var(--u)) calc(3.5*var(--u));font-weight:800;font-size:calc(4*var(--u));letter-spacing:.05em;white-space:nowrap;pointer-events:none}
.pb-hand{position:absolute;width:calc(13*var(--u));height:calc(13*var(--u));border-radius:50%;border:calc(.8*var(--u)) solid #fff;background:rgba(255,255,255,.18);pointer-events:none}
.pb-hand.drag{left:22%;bottom:16%;animation:pbdrag 1.6s ease-in-out infinite}
.pb-hand.tap{right:11%;bottom:11%;animation:pbtap 1s ease-in-out infinite}
@keyframes pbdrag{0%,100%{transform:translate(0,0)}45%,55%{transform:translate(calc(4.5*var(--u)),calc(-11*var(--u)))}}
@keyframes pbtap{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.6)}50%{transform:scale(.85);box-shadow:0 0 0 calc(3.5*var(--u)) rgba(255,255,255,0)}}
.pb-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(3.5*var(--u));background:radial-gradient(ellipse at 50% 30%,var(--accent-b),transparent 60%),rgba(4,8,10,.86);text-align:center;padding:0 calc(6*var(--u));cursor:pointer;animation:pbfade .35s ease-out}
@keyframes pbfade{from{opacity:0}}
.pb-logo{font-family:"Arial Black",Impact,system-ui,sans-serif;font-size:calc(12*var(--u));line-height:.95;white-space:pre-line;text-shadow:0 calc(1*var(--u)) 0 var(--home)}
.pb-logo img{max-width:calc(60*var(--u));max-height:calc(30*var(--u));display:block}
.pb-title{font-family:"Arial Black",Impact,system-ui,sans-serif;font-size:calc(7*var(--u));color:var(--accent)}
.pb-sub{font-size:calc(4.2*var(--u));opacity:.75;font-weight:600}
.pb-cta{margin-top:calc(2*var(--u));font-family:"Arial Black",Impact,system-ui,sans-serif;font-size:calc(6.5*var(--u));background:var(--accent);color:#1d1400;padding:calc(3.5*var(--u)) calc(7.5*var(--u));border-radius:calc(3.5*var(--u));box-shadow:0 calc(1.5*var(--u)) 0 var(--accent-d);animation:pbpulse 1.1s ease-in-out infinite}
@keyframes pbpulse{50%{transform:scale(1.06)}}
.pb-replay{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);background:none;border:1px solid rgba(255,255,255,.3);color:#fff;font-family:inherit;font-size:calc(3.6*var(--u));font-weight:700;letter-spacing:.06em;border-radius:999px;padding:calc(1.5*var(--u)) calc(4*var(--u));cursor:pointer}
.pb-mini-cta{position:absolute;top:12%;right:calc(3.5*var(--u));background:var(--accent);color:#1d1400;border:0;border-radius:999px;font-family:inherit;font-weight:800;font-size:calc(3.2*var(--u));padding:calc(1.6*var(--u)) calc(3.2*var(--u));letter-spacing:.04em;cursor:pointer}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.pb-hand,.pb-cta{animation:none}.pb-banner{transition:none}}