:root{--panel: rgba(13, 23, 38, .82);--panel-2: #243352;--accent: #4cc9a4;--accent-2: #ffd166;--danger: #ef476f;--text: #f3f5f7;--muted: #c2cad6;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;background:#7fb4ef;color:var(--text);min-height:100vh;display:flex;justify-content:center;overflow-x:hidden}#bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1}.stadium{width:100%;height:100%;display:block}#app{width:100%;max-width:480px;padding:1.25rem 1rem 2.5rem;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh}.title{text-align:center;margin:0 0 .25rem;text-shadow:0 2px 8px rgba(0,0,0,.4);font-size:1.6rem}h2{margin:.25rem 0 1rem;text-align:center}#game-root{background:var(--panel);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:18px;padding:1.4rem 1.25rem 1.6rem;box-shadow:0 12px 36px #0006;border:1px solid rgba(255,255,255,.08)}.screen{width:100%;text-align:center;position:relative}.hint{color:var(--muted);font-size:.9rem}.prompt{font-weight:600;margin:.4rem 0 .9rem;min-height:1.4em}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--panel-2);background:var(--panel-2);color:var(--text);padding:.75rem 1.25rem;border-radius:10px;font-size:1rem;cursor:pointer;transition:transform .05s ease,background .15s ease}.btn:hover{background:#2c3e63}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--accent);color:#06281f;border-color:var(--accent);font-weight:700}.stack{display:flex;flex-direction:column;gap:.75rem;margin:1rem 0}.row{display:flex;gap:.75rem;justify-content:center;margin-top:.5rem}.splash-hands{display:flex;justify-content:center;gap:1.5rem;margin-bottom:.5rem}.splash-hands .hand{width:96px;height:150px;animation:bob 1.4s ease-in-out infinite}.splash-hands .hand.red{animation-delay:.3s}.loader{position:relative;height:14px;background:#ffffff40;border-radius:10px;margin:1rem auto .5rem;max-width:280px}.loader-fill{height:100%;width:0;background:var(--accent);border-radius:10px;animation:fill 1.8s ease-out forwards}.loader-ball{position:absolute;top:50%;left:0;transform:translateY(-50%);font-size:18px;line-height:1;animation:slide 1.8s ease-out forwards}.coin{margin:1rem 0;display:flex;justify-content:center}.coin.flip{animation:flip .6s ease-out}.coin-svg{width:78px;height:78px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}.coin-value{font-size:36px;font-weight:900;fill:#555b5f;font-family:Georgia,Times New Roman,serif}.coin-word{font-size:10px;font-weight:700;fill:#6b7176;letter-spacing:1px}.scoreboard{background:var(--panel-2);border-radius:12px;padding:.7rem 1rem;margin-bottom:.75rem}.sb-line{display:flex;justify-content:space-between;align-items:baseline}.sb-line .score{font-size:1.8rem;font-weight:800;color:var(--accent-2)}.sb-sub{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;margin-top:.2rem}.arena{position:relative;display:flex;justify-content:space-between;align-items:flex-end;height:190px;margin:.25rem 0 .5rem}.arena .hand{width:104px;height:168px;display:block}.arena.idle .hand-slot.left .hand{animation:bob 1.6s ease-in-out infinite}.arena.idle .hand-slot.right .hand{animation:bob 1.6s ease-in-out infinite .3s}.arena.thinking .hand{animation:shake .25s ease-in-out infinite}.arena-center{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);pointer-events:none}.ball-idle{font-size:1.8rem;animation:bob 1.2s ease-in-out infinite}.thinking{font-size:2.4rem;animation:shake .3s ease-in-out infinite}.fly-ball{position:absolute;left:50%;top:50%;font-size:1.5rem;animation:flyBall .7s ease-out forwards}.burst{font-size:2.6rem;font-weight:900;animation:burstPop .5s cubic-bezier(.2,1.4,.4,1) both;text-shadow:0 3px 10px rgba(0,0,0,.5)}.burst.out{color:var(--danger)}.burst.runs{color:var(--accent)}.hand-num{position:absolute;bottom:2px;min-width:44px;height:30px;line-height:30px;padding:0 6px;border-radius:15px;font-weight:800;font-size:1rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);border:2.5px solid #fff;box-shadow:0 3px 8px #00000059;animation:burstPop .4s ease-out both}.hand-num.left{left:28px;background:#2f7be0}.hand-num.right{right:28px;background:#e0463f}.hand{filter:drop-shadow(0 5px 4px rgba(0,0,0,.3));overflow:visible}.hand .glove{fill:var(--glove);stroke:#fff;stroke-width:4;stroke-linejoin:round}.hand .arm{fill:var(--skin);stroke:var(--skin-edge);stroke-width:2.5;stroke-linejoin:round}.hand .creases,.hand .crease{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.9}.hand .finger{transform-box:fill-box;transform-origin:50% 100%}.hand .finger.up{animation:fingerPop .32s ease-out both}.hand .six-badge circle{fill:#fff;stroke:var(--glove-edge);stroke-width:3;animation:burstPop .4s ease-out both}.hand .six-badge text{fill:var(--glove-edge);font-size:32px;font-weight:900}.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:.25rem auto 0;max-width:290px}.pad-btn{position:relative;aspect-ratio:1 / 1;font-size:1.7rem;font-weight:800;border:none;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ef6b60,#d2382e 46%,#a3251d);color:#fff4e6;text-shadow:0 1px 2px rgba(0,0,0,.45);cursor:pointer;transition:transform .05s ease,filter .15s ease;box-shadow:0 5px #7c1a14,0 8px 14px #00000059;overflow:hidden}.pad-btn:before{content:"";position:absolute;top:-10%;bottom:-10%;left:30%;width:34%;border-radius:50%;border-left:2.5px dashed rgba(255,244,230,.85);transform:rotate(18deg);pointer-events:none}.pad-btn:hover{filter:brightness(1.07)}.pad-btn:active{transform:translateY(3px);box-shadow:0 2px #7c1a14,0 3px 7px #00000059}.timer{max-width:280px;margin:.8rem auto 0}.timer-bar{height:8px;background:#fff3;border-radius:6px;overflow:hidden}.timer-fill{height:100%;width:100%;background:var(--accent-2);animation:deplete linear forwards}.timer-label{color:var(--muted);font-size:.78rem;margin-top:.3rem}.btn.auto{position:relative;overflow:hidden}.btn.auto .auto-fill{position:absolute;left:0;bottom:0;height:4px;width:100%;background:#06281f99;animation:deplete linear forwards}.btn.auto .auto-num{margin-left:.4rem;opacity:.7;font-size:.85rem}#mute{position:fixed;top:12px;right:12px;z-index:10;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;font-size:1.2rem;background:#0d1726b3;color:var(--text);box-shadow:0 2px 8px #0000004d}#mute:hover{background:#0d1726e6}.shake-out{animation:shake .4s ease-in-out}.flash{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:18px;background:var(--danger);pointer-events:none;animation:flashOut .5s ease-out forwards}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;border-radius:18px}.confetti i{position:absolute;top:-14px;width:8px;height:14px;animation:confettiFall linear forwards}.qr-wrap{display:inline-block;background:#fff;padding:10px;border-radius:14px;margin:.5rem auto 1rem;box-shadow:0 6px 18px #0000004d}.qr-wrap img{display:block;border-radius:6px}.spinner{font-size:2.4rem;margin:1rem 0;animation:bob 1.2s ease-in-out infinite}.waiting{color:var(--muted);font-size:.85rem;margin-top:1rem;animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.result-line{font-size:1.3rem;font-weight:800;margin:.5rem 0 1rem}.scorecard{background:var(--panel-2);border-radius:12px;padding:.75rem 1rem;margin-bottom:1.25rem}.scorecard div{display:flex;justify-content:space-between;padding:.25rem 0}.scorecard strong{color:var(--accent-2)}@keyframes flip{0%{transform:rotateY(0) scale(.6);opacity:0}to{transform:rotateY(720deg) scale(1);opacity:1}}@keyframes fingerPop{0%{transform:scaleY(.12)}70%{transform:scaleY(1.08)}to{transform:scaleY(1)}}@keyframes burstPop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.15);opacity:1}to{transform:scale(1);opacity:1}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes shake{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-4px) rotate(-3deg)}75%{transform:translate(4px) rotate(3deg)}}@keyframes flashOut{0%{opacity:.55}to{opacity:0}}@keyframes flyBall{0%{transform:translate(-50%,-50%) scale(.6);opacity:1}to{transform:translate(40px,-90px) scale(1.1) rotate(120deg);opacity:0}}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(420px) rotate(540deg);opacity:0}}@keyframes deplete{0%{width:100%}to{width:0%}}@keyframes fill{0%{width:0}to{width:100%}}@keyframes slide{0%{left:0}to{left:calc(100% - 20px)}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}
