*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,Helvetica,sans-serif;background:#06101c;color:#fff}button,input{font:inherit}.app{min-height:100vh;background:radial-gradient(circle at 55% 0,#1a4771 0,#06101c 58%)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;background:rgba(2,8,16,.92);border-bottom:2px solid #ffbd00;position:relative;z-index:30}.brand{display:flex;gap:12px;align-items:center}.logo{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ffe15a,#f4a500);font-size:28px;box-shadow:0 0 24px #ffbd0066}.brand h1{margin:0;font-size:clamp(22px,3.7vw,42px);letter-spacing:.5px}.brand p{margin:3px 0 0;color:#ffbd00;font-weight:800}.scoreboard{min-width:112px;text-align:center;background:#010814;border:2px solid #29a3ff;border-radius:14px;padding:6px 14px;box-shadow:0 0 24px #29a3ff44}.scoreboard span,.scoreboard small{display:block;color:#ffbd00;font-weight:900}.scoreboard strong{font-size:38px;line-height:1.05}
.layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;padding:18px;max-width:1500px;margin:auto}.form-card{background:linear-gradient(180deg,rgba(5,17,32,.98),rgba(1,8,16,.98));border:1px solid #355779;border-radius:18px;padding:24px;align-self:start;box-shadow:0 20px 55px #000b}.step-pill{display:inline-block;background:#ffbd00;color:#09111d;font-size:12px;font-weight:1000;letter-spacing:1px;padding:7px 10px;border-radius:999px}.form-card h2{color:#ffbd00;font-size:30px;margin:15px 0 8px}.form-card p{color:#cbd8e6;line-height:1.5}.form-card label{display:block;color:#d8e5f2;font-weight:700;margin-top:13px}.form-card input{width:100%;padding:14px;margin-top:6px;border-radius:11px;border:1px solid #4b6c8e;background:#0c1a2a;color:#fff;font-size:16px;outline:none}.form-card input:focus{border-color:#ffbd00;box-shadow:0 0 0 3px #ffbd0033}.form-card button,.hit-btn,.play-again{border:0;border-radius:12px;background:linear-gradient(#ffe463,#f4a800);color:#07101b;font-weight:1000;font-size:18px;padding:15px;cursor:pointer;box-shadow:0 6px 0 #9a6600}.form-card button{width:100%;margin-top:16px}.status{min-height:44px;margin-top:13px;color:#ffd0d0;line-height:1.35}
.stadium{position:relative;min-height:680px;overflow:hidden;border-radius:24px;border:4px solid #d8ecff;background:#07111f;box-shadow:0 25px 65px #000c;isolation:isolate}.stadium-photo{position:absolute;inset:0;background-image:url('assets/stadium-batter.jpg');background-size:cover;background-position:64% center;transform:scale(1.02);transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .4s ease;z-index:1}.stadium.ready .stadium-photo{transform:scale(1.055);filter:saturate(1.06) brightness(1.04)}.stadium.hit .stadium-photo{animation:photoHit .72s cubic-bezier(.18,.8,.2,1)}.vignette{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(0,6,15,.7) 0,transparent 35%,transparent 72%,rgba(0,6,15,.28)),linear-gradient(0deg,rgba(0,5,12,.55),transparent 45%)}.floodlights{position:absolute;top:18px;width:120px;height:54px;z-index:4;background:radial-gradient(circle,#fff 0 4px,transparent 5px);background-size:22px 22px;filter:drop-shadow(0 0 9px #fff)}.floodlights.left{left:20px}.floodlights.right{right:20px}.mini-board{position:absolute;left:22px;top:88px;z-index:7;width:205px;padding:13px 16px;border-radius:14px;background:rgba(1,8,19,.88);border:1px solid #ffbd00;box-shadow:0 8px 30px #0009}.mini-board span,.mini-board small{display:block;color:#ffbd00;font-weight:900;font-size:12px}.mini-board strong{display:block;font-size:24px;margin:5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-board small{color:#d5e6f6}
.bowler{position:absolute;width:205px;right:13%;top:37%;z-index:6;filter:drop-shadow(0 14px 9px #000a);transform-origin:55% 80%;opacity:.98}.bowler.bowling{animation:bowlerRun 1.2s ease-in-out forwards}.ball{position:absolute;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ffb0b0,#d61928 42%,#65000b 72%);right:27%;top:52%;z-index:14;opacity:0;box-shadow:0 0 12px #fff,0 0 28px #ff3030}.ball:after{content:"";position:absolute;width:2px;height:18px;background:#fff8;left:11px;top:3px;transform:rotate(42deg)}.ball-shadow{position:absolute;width:36px;height:10px;border-radius:50%;background:#0008;right:28%;top:69%;z-index:5;opacity:0;filter:blur(2px)}.swing-arc{position:absolute;left:53%;top:39%;width:310px;height:310px;border:14px solid transparent;border-top-color:#ffda42;border-right-color:#ff7b00;border-radius:50%;z-index:10;opacity:0;filter:drop-shadow(0 0 15px #ff9800);transform:rotate(28deg) scale(.4)}.impact{position:absolute;width:36px;height:36px;border-radius:50%;left:58%;top:54%;z-index:15;opacity:0;background:#fff;box-shadow:0 0 18px 10px #ffd000,0 0 55px 26px #ff5e00}.six-text{position:absolute;left:50%;top:18%;transform:translate(-50%,-50%) scale(.2);z-index:18;font-size:clamp(70px,10vw,150px);font-weight:1000;color:#ffe45c;text-shadow:0 0 15px #ff5100,0 0 45px #ff7b00;opacity:0}.fireworks{position:absolute;inset:0;width:100%;height:100%;z-index:17;pointer-events:none}.commentary{position:absolute;left:50%;bottom:88px;transform:translateX(-50%);z-index:20;background:rgba(1,8,18,.92);border:2px solid #ffbd00;border-radius:12px;padding:11px 20px;font-weight:900;max-width:85%;text-align:center;box-shadow:0 8px 30px #0009}.hit-btn{position:absolute;right:25px;bottom:24px;z-index:22;padding:16px 26px}.hit-btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}
.ball-delivery{animation:ballDelivery .88s linear forwards}.ball-shot{animation:ballShot 1.25s cubic-bezier(.1,.72,.2,1) forwards}.shadow-move{animation:shadowMove .88s linear forwards}.swinging{animation:swingArc .56s ease-out forwards}.flash{animation:flash .38s ease-out}.show-six{animation:sixPop 1.25s ease-out forwards}.shake{animation:shake .38s linear}
@keyframes bowlerRun{0%{transform:translate(70px,-45px) scale(.82) rotate(-8deg)}65%{transform:translate(0,0) scale(1) rotate(8deg)}100%{transform:translate(-18px,16px) rotate(25deg)}}@keyframes ballDelivery{0%{opacity:1;right:27%;top:52%;transform:scale(.7)}100%{opacity:1;right:45%;top:58%;transform:scale(1)}}@keyframes shadowMove{0%{opacity:.2;right:28%;top:69%;transform:scale(.7)}100%{opacity:.7;right:46%;top:67%;transform:scale(1)}}@keyframes ballShot{0%{opacity:1;right:45%;top:58%;transform:scale(1)}35%{right:36%;top:39%;transform:scale(.92)}100%{opacity:0;right:5%;top:1%;transform:scale(.38)}}@keyframes swingArc{0%{opacity:0;transform:rotate(28deg) scale(.35)}28%{opacity:1}100%{opacity:0;transform:rotate(-54deg) scale(1.13)}}@keyframes flash{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(4.6)}}@keyframes photoHit{0%{transform:scale(1.055) translate(0)}35%{transform:scale(1.1) translate(-1.5%,1%);filter:saturate(1.35) brightness(1.14)}100%{transform:scale(1.055) translate(0)}}@keyframes sixPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-8deg)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(4deg)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-65%) scale(1.08)}}@keyframes shake{0%,100%{transform:translate(0)}25%{transform:translate(-8px,5px)}50%{transform:translate(7px,-4px)}75%{transform:translate(-4px,2px)}}
.result{position:fixed;inset:0;background:#000c;display:grid;place-items:center;z-index:100;padding:16px}.result[hidden]{display:none!important}.result-card{position:relative;width:min(440px,94vw);text-align:center;background:radial-gradient(circle at top,#2c4162,#050a13 72%);border:3px solid #ffbd00;border-radius:24px;padding:26px;box-shadow:0 0 65px #ffbd0070;pointer-events:auto}.close{position:absolute;right:10px;top:9px;z-index:110;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:36px;cursor:pointer;touch-action:manipulation}.close:hover,.close:focus{background:#ffbd00;color:#07111f;outline:3px solid #fff8}.run-burst{font-size:84px;font-weight:1000;color:#ffbd00;text-shadow:0 0 22px #ff5a00}.result h2{font-size:42px;margin:0}.gift-wrap{position:relative;margin:5px auto;width:240px;height:240px}.gift-wrap:before{content:"";position:absolute;inset:28px;border-radius:50%;background:#ffbd0066;filter:blur(24px);animation:pulse 1.2s infinite alternate}.gift{position:relative;width:100%;height:100%;object-fit:contain;animation:giftOpen .9s ease-out}.result h3{font-size:31px;color:#ffbd00;margin:6px}.play-again{margin-top:18px;padding:12px 20px}.body.modal-open{overflow:hidden}@keyframes giftOpen{0%{transform:scale(.18) rotate(-13deg);opacity:0}60%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1)}}@keyframes pulse{to{transform:scale(1.12);opacity:.7}}
@media(max-width:900px){.layout{grid-template-columns:1fr}.form-card{order:2}.stadium{min-height:610px}.stadium-photo{background-position:70% center}.mini-board{top:75px}.bowler{width:165px;right:5%;top:39%}.swing-arc{left:48%;top:42%;width:250px;height:250px}}
@media(max-width:560px){.topbar{padding:9px}.logo{width:42px;height:42px}.brand h1{font-size:19px}.brand p{display:none}.scoreboard{min-width:82px;padding:5px}.scoreboard strong{font-size:29px}.layout{padding:8px}.stadium{min-height:520px;border-radius:17px}.stadium-photo{background-size:auto 100%;background-position:66% center}.mini-board{left:10px;top:62px;width:160px;padding:10px}.mini-board strong{font-size:19px}.bowler{width:125px;right:-2%;top:42%}.commentary{bottom:78px;font-size:13px;width:82%}.hit-btn{right:12px;bottom:15px;padding:13px 16px;font-size:15px}.swing-arc{left:38%;top:43%;width:210px;height:210px;border-width:10px}.impact{left:56%;top:56%}}