.pio-ui{position:fixed;inset:0;pointer-events:none;z-index:20;font-family:var(--oa-font-body)}.pio-ui button{pointer-events:auto}.pio-top{position:absolute;left:50%;top:max(12px,env(safe-area-inset-top));transform:translate(-50%);text-align:center;padding:7px 18px 8px;border-radius:18px;background:#14101f9e;backdrop-filter:blur(6px);transition:opacity .3s;max-width:calc(100vw - 300px);box-shadow:0 4px #00000040}@media(max-width:640px){.pio-top{top:calc(max(10px,env(safe-area-inset-top)) + 52px);max-width:calc(100vw - 24px)}}.pio-title{font:20px var(--oa-font-display);color:var(--oa-accent);letter-spacing:.5px;text-shadow:0 2px 0 rgba(0,0,0,.4);white-space:nowrap}.pio-sub{font:800 13px var(--oa-font-body);color:var(--oa-ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pio-sub.live{color:var(--oa-ink);font-size:15px}.pio-hint{position:absolute;left:50%;bottom:max(9vh,64px);transform:translate(-50%);text-align:center;opacity:0;transition:opacity .25s}.pio-hint.show{opacity:1}.pio-hint img{width:62px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35));animation:pio-swipe 1.25s cubic-bezier(.5,0,.2,1) infinite}@keyframes pio-swipe{0%{transform:translateY(-34px);opacity:0}15%{opacity:1}55%{transform:translateY(38px);opacity:1}75%,to{transform:translateY(46px);opacity:0}}.pio-hint-word{font:46px var(--oa-font-display);color:#fff;letter-spacing:1px;margin-top:4px;text-shadow:0 4px 0 #c0392b,0 0 18px rgba(255,79,121,.6);-webkit-text-stroke:1.5px #5a1020}.pio-hint-keys{font:800 13px var(--oa-font-body);color:var(--oa-ink);opacity:.8;display:none;text-shadow:0 1px 2px #000}@media(hover:hover)and (pointer:fine){.pio-hint-keys{display:block}}@media(max-aspect-ratio:4/5){.pio-hint{bottom:max(2.5vh,14px)}}.pio-hint.k-up img{animation-name:pio-swipe-up}@keyframes pio-swipe-up{0%{transform:translateY(40px) rotate(180deg);opacity:0}15%{opacity:1}55%{transform:translateY(-34px) rotate(180deg);opacity:1}75%,to{transform:translateY(-46px) rotate(180deg);opacity:0}}.pio-hint.k-diag img{animation-name:pio-swipe-diag}@keyframes pio-swipe-diag{0%{transform:translate(-46px,-34px) rotate(-28deg);opacity:0}15%{opacity:1}55%{transform:translate(40px,34px) rotate(-28deg);opacity:1}75%,to{transform:translate(48px,40px) rotate(-28deg);opacity:0}}.pio-hint.k-slow img{animation-duration:2.8s;animation-timing-function:linear}.pio-hint.k-multi img{animation-duration:.42s}.pio-gauge{position:relative;margin:7px auto 3px;width:min(54vw,230px);height:13px;border-radius:7px;border:3px solid #21152a;box-shadow:0 2px #0000004d}.pio-gauge:before{content:"🐢";position:absolute;left:-24px;top:-6px;font-size:16px}.pio-gauge:after{content:"💥";position:absolute;right:-24px;top:-6px;font-size:16px}.pio-gauge i{position:absolute;top:-8px;width:7px;height:25px;margin-left:-3.5px;border-radius:4px;background:#fff;border:2px solid #21152a;transition:left .05s linear}.pio-gauge i.g-perfect{background:#ffd23f;box-shadow:0 0 10px #ffd23f}.pio-gauge i.g-good{background:#3fe0c5}.pio-gauge i.g-miss{background:#ff6b8a}.pio-gauge-last{position:absolute;top:-4px;width:3px;height:17px;margin-left:-1.5px;background:repeating-linear-gradient(#fff 0 3px,transparent 3px 5px);opacity:.85}.pio-bubble{position:absolute;left:0;top:0;max-width:min(78vw,340px);padding:10px 14px 11px;border-radius:18px;background:#fff8ec;color:#2a1a1a;font:800 17px/1.25 var(--oa-font-body);box-shadow:0 5px #00000047;opacity:0;scale:.7;transition:opacity .15s,scale .18s cubic-bezier(.3,1.6,.5,1);display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}.pio-bubble.show{opacity:1;scale:1}.pio-bubble:after{content:"";position:absolute;left:50%;bottom:-12px;border:12px solid transparent;border-top-color:#fff8ec;border-bottom:0;transform:translate(-50%)}.pio-bubble.below:after{bottom:auto;top:-12px;border-top:0;border-bottom:12px solid #fff8ec}.pio-bubble img{display:none;width:46px;height:46px;object-fit:cover;object-position:top;border-radius:50%;background:#6b2fb3;grid-row:span 2;border:2px solid #6b2fb3}.pio-bubble.yk img{display:block}.pio-bubble b{font:13px var(--oa-font-display);color:#c0392b;letter-spacing:.4px;text-transform:uppercase}.pio-bubble.yk b{color:#6b2fb3}.pio-bubble span{grid-column:2}.pio-bubble:not(.yk) b,.pio-bubble:not(.yk) span{grid-column:1 / span 2}.pio-stamp{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) rotate(-7deg) scale(.4);opacity:0;font:clamp(40px,9vw,72px) var(--oa-font-display);letter-spacing:1px;white-space:nowrap;transition:transform .22s cubic-bezier(.3,1.7,.5,1),opacity .15s}.pio-stamp.show{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}.pio-stamp.good{color:#3fe0c5;text-shadow:0 5px 0 #0b5e52,0 0 24px rgba(63,224,197,.55);-webkit-text-stroke:2px #0b3e36}.pio-stamp.bad{color:#ff4f79;text-shadow:0 5px 0 #6b1030,0 0 24px rgba(255,79,121,.5);-webkit-text-stroke:2px #4a0a20}.pio-card{position:absolute;left:50%;top:50%;width:min(92vw,400px);max-height:92vh;overflow:auto;transform:translate(-50%,-46%) scale(.92);opacity:0;pointer-events:none;transition:opacity .22s,transform .3s cubic-bezier(.3,1.5,.5,1);padding:14px;border-radius:24px;background:linear-gradient(180deg,#2f2550,#1c1630);border:3px solid #4a3a78;box-shadow:0 10px #00000059;display:flex;flex-direction:column;gap:10px}.pio-card.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.pio-shot{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:10px;border:6px solid #fff8ec;transform:rotate(-1.5deg);box-shadow:0 6px #0000004d;background:#000}.pio-card-body{text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}.pio-head{font:38px/1 var(--oa-font-display);color:var(--oa-accent);text-shadow:0 3px 0 rgba(0,0,0,.4)}.pio-head.bad{color:var(--oa-hot)}.pio-stars{display:flex;gap:6px}.pio-stars img{width:44px;height:auto;filter:grayscale(1) brightness(.6);opacity:.45;transition:transform .3s}.pio-stars img.on{filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));opacity:1;transform:scale(1.08)}.pio-line{font:800 16px/1.3 var(--oa-font-body);color:var(--oa-ink)}.pio-line b{color:var(--oa-cool)}.pio-note{font:800 13px/1.3 var(--oa-font-body);color:var(--oa-ink-dim);min-height:1em}.pio-rank{font:15px var(--oa-font-display);color:#fff;background:#6b2fb3;padding:5px 14px;border-radius:12px;letter-spacing:.5px}.pio-btns{display:flex;gap:10px;width:100%;margin-top:4px}.pio-btn{flex:1;min-height:52px;border:0;border-radius:16px;font:19px var(--oa-font-display);letter-spacing:.5px;cursor:pointer;box-shadow:0 5px #00000059;transition:transform .08s}.pio-btn:active{transform:translateY(3px);box-shadow:0 2px #00000059}.pio-btn.main{background:linear-gradient(180deg,#ffe066,#ffb400);color:#3a2400}.pio-btn.ghost{background:#4a3a78;color:var(--oa-ink)}.pio-btn.share{flex:none;width:100%;min-height:46px;background:linear-gradient(180deg,#ff7096,#ff4f79);color:#fff;font-size:17px}.pio-finale-title{font-size:19px;background:linear-gradient(180deg,#8b46e0,#5a22a0);box-shadow:0 3px #0000004d}.pio-finale .pio-head{font-size:31px;line-height:1.05}.pio-finale-stars{display:flex;align-items:center;gap:6px;font:24px var(--oa-font-display);color:#fff}.pio-finale-stars img{width:36px;height:auto;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}@media(min-aspect-ratio:5/4)and (max-height:640px){.pio-card{width:min(94vw,720px);flex-direction:row;align-items:center}.pio-shot{width:44%;flex:none}.pio-card-body{flex:1}.pio-head{font-size:32px}}