.arcade-feedback { position:absolute; inset:0; z-index:8; pointer-events:none; overflow:hidden; --hit-color:#ffb349; --hud-top:110px; font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; }
.arcade-streak { position:absolute; top:var(--hud-top); left:50%; transform:translateX(-50%); min-width:122px; padding:8px 20px 12px; border:2px solid #fff9; border-radius:25px; background:linear-gradient(145deg,#fffdf9f2,#fff1d9e8); box-shadow:0 5px 0 #84442624,0 8px 18px #65463a16; text-align:center; color:#76502f; }
.arcade-streak-label { display:block; font-size:12px; line-height:1.25; font-weight:800; letter-spacing:.6px; }
.arcade-streak-number { display:block; font-size:23px; line-height:1.05; padding-top:2px; }
.arcade-streak.active { background:linear-gradient(145deg,#fff8ce,#ffd765); color:#703516; border-color:#fff6c9; }
.arcade-streak.active .arcade-streak-number { font-size:34px; color:#d65823; text-shadow:0 2px 0 #fff8; }
.arcade-streak.beat .arcade-streak-number { animation:arcade-number .24s ease-out; }
.arcade-streak-meter { position:absolute; left:18px; right:18px; bottom:5px; height:4px; border-radius:10px; background:#ba702416; overflow:hidden; }
.arcade-streak-meter i { display:block; height:100%; transform-origin:left; background:linear-gradient(90deg,#ff942f,#ee526b); border-radius:inherit; }
.arcade-word { position:absolute; max-width:84vw; padding:5px 14px; border-radius:18px; border:2px solid #fff; background:#fff6dfef; color:#734330; font-weight:900; font-size:clamp(22px,4.8vw,32px); box-shadow:0 4px 0 #70432128; white-space:nowrap; opacity:0; transform:translate(-50%,-50%); }
.arcade-word.show { animation:arcade-word .88s ease-out both; }
.arcade-impact { position:absolute; width:min(330px,88vw); text-align:center; opacity:0; transform:translate(-50%,-50%); isolation:isolate; }
.arcade-impact.show { animation:arcade-impact 1.35s cubic-bezier(.2,.8,.2,1) both; }
.arcade-impact-title { position:relative; display:block; font-size:clamp(38px,12vw,64px); font-weight:1000; line-height:1.18; color:#fffdf2; -webkit-text-stroke:6px #85409a; paint-order:stroke fill; text-shadow:0 5px 0 #85409a,0 9px 0 #58276638; }
.arcade-impact-count { position:relative; display:inline-block; margin-top:5px; padding:5px 17px 6px; border:3px solid #fff6be; border-radius:19px; background:#ffce4c; color:#783c22; font-size:clamp(21px,5vw,29px); font-weight:900; box-shadow:0 5px 0 #a74c3740; }
.arcade-impact-rays { position:absolute; z-index:-1; inset:-48% -2%; background:linear-gradient(145deg,#ffe986ed,#ffab57c9); clip-path:polygon(50% 0,59% 23%,77% 5%,77% 31%,100% 23%,88% 46%,100% 64%,77% 66%,79% 95%,57% 81%,44% 100%,37% 78%,12% 96%,20% 68%,0 66%,13% 49%,0 26%,28% 32%,23% 5%,44% 23%); }
.arcade-impact-sparks { position:absolute; top:-46px; left:0; width:100%; color:#fffdea; font-size:40px; text-shadow:0 3px 0 #faac46; }
.arcade-feedback[data-theme="balloon"] .arcade-streak.active { background:linear-gradient(145deg,#e9fcff,#a8eced); color:#28697a; border-color:#eaffff; }
.arcade-feedback[data-theme="balloon"] .arcade-streak.active .arcade-streak-number { color:#346da9; }
.arcade-feedback[data-theme="balloon"] .arcade-streak-meter i { background:linear-gradient(90deg,#4bc8c1,#8794e9); }
.arcade-feedback[data-theme="balloon"] .arcade-impact-rays { background:linear-gradient(145deg,#b5f7f5ed,#c1b8ffc9); }
@keyframes arcade-number { from {transform:scale(1.24)} to {transform:scale(1)} }
@keyframes arcade-word { 0% {opacity:0;transform:translate(-50%,-25%) scale(.7)} 15% {opacity:1;transform:translate(-50%,-50%) scale(1.06)} 62% {opacity:1} 100% {opacity:0;transform:translate(-50%,-130%) scale(.96)} }
@keyframes arcade-impact { 0% {opacity:0;transform:translate(-50%,-50%) rotate(-9deg) scale(.35)} 13% {opacity:1;transform:translate(-50%,-50%) rotate(4deg) scale(1.12)} 24%,72% {opacity:1;transform:translate(-50%,-50%) rotate(-3deg) scale(1)} 100% {opacity:0;transform:translate(-50%,-70%) rotate(-3deg) scale(1.04)} }
@media (max-height:480px) { .arcade-streak {left:auto;right:12px;top:90px;transform:none;min-width:105px;padding:5px 12px 10px} .arcade-streak.active .arcade-streak-number {font-size:27px} .arcade-impact {width:min(310px,65vw)} .arcade-impact-title {font-size:43px} }
@media (prefers-reduced-motion:reduce) { .arcade-streak.beat .arcade-streak-number {animation:none} .arcade-word.show {animation:arcade-fade 1s both} .arcade-impact.show {animation:arcade-fade 1.5s both} }
@keyframes arcade-fade { 0%,75% {opacity:1} 100% {opacity:0} }