/* WECHILL PRANK ARENA — V3 Arcade FX. Additive stylesheet, keeps V2 visuals. */
:root{--fx-blue:#70cfff;--fx-pink:#ffa0d4;--fx-lime:#afffbe}
.fx-audio-box{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;background:#181d36;border:1px solid #353b5f;border-radius:15px;min-width:165px}
.fx-volume-label{display:flex;justify-content:space-between;align-items:center;gap:9px;width:100%;font-size:9px;color:#c0bfe5;font-weight:800;white-space:nowrap}
.fx-volume-label output{font-family:Outfit,sans-serif;color:#e4d4ff;font-weight:900;min-width:25px;text-align:right}
.fx-audio-box input[type=range]{appearance:none;display:block;width:84px;height:5px;background:linear-gradient(90deg,#b68cff,#79deff);border:0;border-radius:99px;outline-offset:4px;cursor:pointer}
.fx-audio-box input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;background:#fff;border:3px solid #977af0;border-radius:50%;box-shadow:0 0 9px #af92ffb0}
.fx-audio-box input[type=range]::-moz-range-thumb{width:11px;height:11px;background:#fff;border:3px solid #977af0;border-radius:50%}
.fx-mode-button{border:1px solid #eeb76755;border-radius:12px;padding:11px 14px;background:linear-gradient(125deg,#3b315a,#232747);color:#ffdf9a;font:900 11px Outfit,sans-serif;letter-spacing:.8px;box-shadow:inset 0 1px #fff2;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.fx-mode-button[aria-pressed="true"]{box-shadow:0 0 18px #c38fff29,inset 0 1px #fff3}
.fx-mode-button:hover{transform:translateY(-2px)}
.controls{position:relative}.action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.action-card{transition:transform .2s,box-shadow .2s,filter .2s,background .2s}
.action-card:before{content:'';position:absolute;inset:-100% auto -100% -70%;width:60%;transform:rotate(26deg);background:linear-gradient(90deg,transparent,#ffffff52,transparent);transition:left .5s ease;pointer-events:none}
.action-card:not(:disabled):hover:before{left:140%}
.action-card:not(:disabled):hover .action-art{animation:fxIconBounce .65s ease-in-out infinite alternate}
.mud-card{background:linear-gradient(144deg,#d7b78f,#ba8055 64%,#9b684a)}
.water-card{background:linear-gradient(144deg,#bbf4ff,#65bfff 58%,#4090ed)}
.action-copy strong{font-size:12px}.action-copy small{font-size:10px}
.arena-frame{border-color:#5b517d;box-shadow:0 22px 60px #02061755,0 0 44px #a57fff10}
.stage{background:radial-gradient(ellipse at 50% 37%,#7154b9 0,#392d76 38%,#181f4f 78%,#10142d 100%)}
.fx-stage-tint{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;mix-blend-mode:screen}
.fx-light-ribbon{position:absolute;z-index:1;top:10%;bottom:9%;width:8px;border-radius:99px;opacity:.68;filter:blur(.4px);box-shadow:0 0 18px currentColor,0 0 48px currentColor;pointer-events:none}
.fx-ribbon-left{left:3.5%;color:#ff8dcc;background:currentColor}.fx-ribbon-right{right:3.5%;color:#79cfff;background:currentColor}
.stage.fx-turbo .fx-light-ribbon{animation:fxRailPulse 1.8s ease-in-out infinite alternate}
.fx-announcer{position:absolute;z-index:16;left:50%;top:25%;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;text-align:center;font:900 clamp(28px,4vw,54px) Outfit,'Be Vietnam Pro',sans-serif;letter-spacing:-2px;-webkit-text-stroke:1px #fff7;opacity:0;filter:drop-shadow(0 5px 3px #20183f22)}
.fx-combo-pill{position:absolute;z-index:16;left:21px;top:19px;padding:9px 13px;border:1px solid #ffe2a194;border-radius:99px;background:linear-gradient(130deg,#5e3b5f,#35223fd9);color:#ffe19e;font:900 11px Outfit,sans-serif;letter-spacing:.7px;box-shadow:0 4px 22px #e8bd7050;opacity:0;transform:translateY(-10px) scale(.92);transition:opacity .22s,transform .25s;pointer-events:none}
.fx-combo-pill.visible{opacity:1;transform:translateY(0) scale(1)}
.fx-equalizer{position:absolute;z-index:9;left:calc(50% - 84px);top:16px;height:36px;width:168px;display:flex;justify-content:space-between;align-items:end;gap:4px;opacity:0;pointer-events:none;transition:opacity .3s}
.fx-equalizer i{display:block;flex:1;height:20%;min-height:4px;border-radius:4px 4px 0 0;background:linear-gradient(#fee1ff,#d08bff,#79e4ff);box-shadow:0 0 8px #f1a4ff88;animation:fxEqualizer .46s ease-in-out infinite alternate;animation-play-state:paused}
.fx-equalizer i:nth-child(2n){animation-delay:-.23s}.fx-equalizer i:nth-child(3n){animation-duration:.31s}.fx-equalizer i:nth-child(4n){animation-delay:-.38s}
.stage.party .fx-equalizer{opacity:1}.stage.party .fx-equalizer i{animation-play-state:running}
.fxv3-item{position:absolute;z-index:12;pointer-events:none;will-change:transform,opacity}
.fxv3-wave{display:block;width:90px;height:90px;border:5px solid #8ee9ff;border-radius:50%;box-shadow:0 0 22px currentColor,inset 0 0 17px currentColor}
.fxv3-particle{display:block;box-shadow:0 0 8px #ffffff44;z-index:13}
.fxv3-trail{display:block;width:11px;height:11px;border-radius:50%;filter:blur(1px);box-shadow:0 0 14px currentColor}
.fxv3-projectile{display:block;z-index:15;width:52px;height:52px;line-height:52px;text-align:center;filter:drop-shadow(0 8px 10px #121b40b0)}
.fxv3-projectile-cake{font-size:52px}
.fxv3-projectile-mud{border-radius:52% 48% 55% 45%;background:radial-gradient(circle at 34% 25%,#d6b080 0 11%,transparent 12%),radial-gradient(circle at 67% 59%,#5c351c 0 15%,transparent 16%),radial-gradient(circle at 28% 69%,#a87042 0 17%,transparent 18%),radial-gradient(circle at 37% 29%,#b6824d,#744421 68%,#422b20);box-shadow:inset -7px -9px 10px #42280c66,0 0 12px #4b2a1750}
.fxv3-projectile-water{width:45px;height:53px;border-radius:63% 60% 60% 60%/62% 65% 61% 60%;background:radial-gradient(circle at 28% 20%,#fff 0 5%,transparent 6%),radial-gradient(circle at 32% 27%,#c9f7ff 0 17%,transparent 19%),radial-gradient(circle at 52% 44%,#76e7ff,#1a9bf5 64%,#0d6bbd);box-shadow:inset -7px -10px 12px #0c57ac99,0 0 19px #51cdff80;border:1px solid #d7fdffb3}
.fxv3-projectile-water:before{content:'';position:absolute;left:19px;top:-9px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:12px solid #70cefa;filter:drop-shadow(0 -2px 2px #f9ffff8a)}
.fxv3-projectile-paint{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 30% 24%,#fff 0 8%,transparent 9%),conic-gradient(from 0deg,#ff63c8,#9d74ff,#60eb84,#ffdb55,#ff63c8);box-shadow:0 0 18px #c274ff77;border:2px solid #fff7}
.fxv3-projectile-boxing{width:125px;height:64px}.fxv3-projectile-boxing:before{content:'';position:absolute;left:0;top:20px;width:75px;height:22px;border-radius:14px;background:linear-gradient(90deg,#dfd8ef,#b8acda);box-shadow:inset 0 2px 4px #fff8,0 2px 5px #0003}.fxv3-projectile-boxing:after{content:'';position:absolute;right:0;top:0;width:72px;height:64px;border-radius:58% 42% 48% 52%/50% 44% 56% 50%;background:radial-gradient(circle at 34% 24%,#ffd6d0 0 10%,transparent 11%),linear-gradient(145deg,#ff8d78,#ef3d39);box-shadow:inset -6px -9px 11px #a2202866,0 8px 14px #0004}
.fxv3-splatter{z-index:14;display:block;pointer-events:none;border-radius:43% 57% 56% 44%/53% 46% 54% 47%}
.fxv3-splatter-mud{background:radial-gradient(circle at 33% 24%,#c99964 0 7%,transparent 8%),radial-gradient(circle at 69% 31%,#5a3318 0 10%,transparent 11%),radial-gradient(circle at 36% 69%,#a87645 0 11%,transparent 12%),radial-gradient(circle at 54% 51%,#693c1a 0 47%,#986036 48% 65%,transparent 68%);box-shadow:inset 2px 2px #ffffff22;filter:drop-shadow(0 5px 9px #35201977)}
.fxv3-splatter-mud:before,.fxv3-splatter-mud:after{content:'';position:absolute;background:#7a4a28;border-radius:50%}.fxv3-splatter-mud:before{width:18%;height:23%;left:-13%;top:26%}.fxv3-splatter-mud:after{width:14%;height:18%;right:-8%;top:7%}
.fxv3-splatter-water{background:radial-gradient(circle at 34% 25%,#fffdfcdb 0 7%,transparent 8%),radial-gradient(circle at 55% 54%,#a7f1ffe8 0 32%,#35c1f6e8 34% 57%,transparent 59%);filter:drop-shadow(0 0 13px #80e4ff99)}
.fxv3-splatter-water:before,.fxv3-splatter-water:after{content:'';position:absolute;background:#77dcff;border-radius:50%}.fxv3-splatter-water:before{left:-15%;top:16%;width:26%;height:24%}.fxv3-splatter-water:after{right:-10%;bottom:12%;width:22%;height:25%}
.fxv3-splatter-cake{background:radial-gradient(circle at 34% 27%,#fff 0 12%,transparent 13%),radial-gradient(circle at 66% 32%,#ffc6eb 0 17%,transparent 18%),radial-gradient(circle at 44% 57%,#fffbf1 0 47%,#ffafd6 48% 61%,transparent 64%);filter:drop-shadow(0 7px 10px #ffa9ca7a)}
.fxv3-splatter-cake:before,.fxv3-splatter-cake:after{content:'';position:absolute;border-radius:50%;background:#fff6f3}.fxv3-splatter-cake:before{left:-16%;top:27%;width:28%;height:37%}.fxv3-splatter-cake:after{right:-9%;bottom:14%;width:18%;height:25%}
.fxv3-splatter-paint{background:radial-gradient(circle at 31% 26%,#ffec72 0 8%,transparent 9%),radial-gradient(circle at 67% 24%,#6cf19e 0 12%,transparent 13%),radial-gradient(circle at 39% 69%,#8f7dff 0 13%,transparent 14%),radial-gradient(circle at 54% 51%,#ff71d2 0 43%,#7a62ff 44% 58%,transparent 60%);filter:drop-shadow(0 7px 12px #934eff77)}.fxv3-splatter-paint:before,.fxv3-splatter-paint:after{content:'';position:absolute;border-radius:50%}.fxv3-splatter-paint:before{left:-12%;top:18%;width:25%;height:22%;background:#77f081}.fxv3-splatter-paint:after{right:-10%;bottom:13%;width:18%;height:19%;background:#ffd862}
.fxv3-twinkle{font-size:30px;color:#ffe6ff;text-shadow:0 0 13px #ffc6ff;z-index:10}
.fxv3-bubble{border-radius:50%;border:2px solid #c8fbffbd;background:radial-gradient(circle at 36% 29%,#fff6,transparent 40%);box-shadow:inset 0 0 10px #c8ffff7c,0 0 9px #fff4}
@keyframes fxIconBounce{from{transform:scale(1.08) rotate(-10deg)}to{transform:scale(1.26) rotate(8deg)}}
@keyframes fxRailPulse{0%{opacity:.25;filter:blur(1px)}100%{opacity:.9;filter:blur(0)}}
@keyframes fxEqualizer{from{height:15%}to{height:97%}}
@media(max-width:1150px){.action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-volume-label{display:none}.fx-audio-box{min-width:0;gap:6px}}
@media(max-width:800px){.topbar{flex-wrap:wrap;padding:10px 0}.header-actions{gap:7px}.fx-mode-button{padding:9px}.fx-equalizer{top:10px}.fx-combo-pill{font-size:9px;top:9px;left:9px}}
@media(max-width:580px){.fx-audio-box{gap:5px;padding:4px}.fx-audio-box input[type=range]{width:54px}.fx-mode-button{font-size:9px;padding:8px}.fx-announcer{font-size:clamp(19px,5vw,32px);top:23%;letter-spacing:-.8px}.fx-light-ribbon{width:5px}.action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.action-copy strong{font-size:10px}.action-copy small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.fx-light-ribbon,.fx-equalizer i,.action-card:hover .action-art{animation:none!important}.fx-mode-button,.fx-combo-pill{transition:none!important}}

/* CSS-rendered disco ball: reliable on Windows 10, which may not have the 🪩 emoji. */
.disco-ball{width:56px;height:56px;left:calc(50% - 28px);font-size:0;border-radius:50%;border:2px solid #dbf8ff;background:radial-gradient(circle at 26% 18%,#fff 0%,#e1fdff 6%,transparent 36%),repeating-linear-gradient(90deg,#f2ebffad 0 6px,#776badb3 6px 12px),repeating-linear-gradient(0deg,#a9cfff 0 5px,#8f79c8 5px 10px);box-shadow:inset -8px -11px 13px #3d386f8c,0 0 14px #bdf1ffb8,0 0 37px #e5baff88;overflow:visible}
.disco-ball:before{content:'';position:absolute;top:-23px;left:26px;width:2px;height:23px;background:#ddcfff;box-shadow:0 0 6px #faf2ff}
.disco-ball:after{content:'';position:absolute;inset:5px;border-radius:50%;border:1px dashed #e9f6ff8c;box-shadow:inset 0 0 12px #d8daff8e}