#wiffle-ball{width:min(1010px,calc(100% - 24px));max-height:calc(100svh - 24px);overflow:auto;background:#f5ead0;color:#24463a;border:1px solid #c3a866;border-radius:20px}#wiffle-ball::backdrop{background:#082b26d9;backdrop-filter:blur(5px)}.w-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:#173d34;color:#ffedbf;position:sticky;top:0;z-index:10;font:18px Georgia}.w-nav button{min-height:44px;padding:10px 14px;border:1px solid #d6c08470;border-radius:24px;background:transparent;color:inherit;font:14px system-ui}.w-content{padding:18px 28px 24px;background:radial-gradient(ellipse at top,#fff8e5,#eadaba)}.w-heading{text-align:center;margin:0 0 12px}.w-heading .eyebrow{color:#8e703c;margin-bottom:8px}.w-heading h1{font-size:32px;line-height:1.15;margin:0}.w-count{display:flex;align-items:center;justify-content:center;gap:10px;font:14px system-ui;margin:0 auto 12px}.w-count strong{padding:5px 10px;border-radius:18px;background:#193f35;color:#fff0bf}.w-count>span{color:#a28856}.w-stage{position:relative;width:min(100%,740px,calc(max(170px,100svh - 350px) * 1.5));aspect-ratio:3/2;margin:auto;border-radius:14px;overflow:hidden;isolation:isolate;box-shadow:0 8px 26px #674c2933;background:#ab7343}.w-yard{width:100%;height:100%;display:block}.w-zone{position:absolute;left:38%;top:24%;width:24%;height:36%;border:2px dashed #fff9d09c;box-sizing:border-box;pointer-events:none}.w-batter{position:absolute;right:-3%;bottom:9%;width:42%;height:63%;background-image:url('assets/era2-agy-batting.svg');background-size:300% 100%;background-repeat:no-repeat;filter:drop-shadow(0 8px 4px #493d2f55)}.w-batter.ready{background-position:0% 50%}.w-batter.swing{background-position:50% 50%}.w-batter.follow{background-position:100% 50%}.w-name,.w-john-name{position:absolute;right:10%;bottom:5%;padding:5px 12px;background:#173f36e8;color:#fff0bd;border:1px solid #b29b67;border-radius:20px;font:600 12px system-ui}.w-john{position:absolute;left:2%;bottom:-8%;width:25%;height:46%;object-fit:contain;filter:drop-shadow(0 5px 4px #493d2f55)}.w-john-name{left:5%;right:auto;bottom:3%;z-index:4}.w-aim-surface{position:absolute;inset:0;width:100%;height:100%;padding:0;background:transparent;border:0;cursor:crosshair;touch-action:manipulation}.w-aim-surface:disabled{cursor:default}.w-aim-surface:disabled .w-crosshair{display:none}.w-crosshair{position:absolute;width:28px;height:28px;border:2px solid #fff6cd;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #214b3dcc,0 2px 9px #0008;pointer-events:none}.w-crosshair:before,.w-crosshair:after{content:'';position:absolute;left:50%;top:50%;background:#fff4ba;transform:translate(-50%,-50%)}.w-crosshair:before{width:36px;height:2px}.w-crosshair:after{width:2px;height:36px}.w-ball{position:absolute;left:22%;top:86%;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fffef3,#d2d4c9);box-shadow:0 3px 5px #493e3190;transform:translate(-50%,-50%);opacity:0;pointer-events:none}.w-ball:before{content:'∴';color:#6e746b;position:absolute;inset:0;text-align:center;font:16px Georgia}.pitching .w-ball{animation:w-pitch .9s cubic-bezier(.25,.55,.4,1) forwards}.pitching.home-run .w-ball{animation:w-home 1.35s ease-out forwards}.w-controls{display:flex;gap:16px;align-items:center;justify-content:center;max-width:740px;margin:16px auto 0}.w-controls label{display:flex;flex-direction:column;gap:7px;flex:1;font:13px system-ui;max-width:235px;color:#465f46}.w-controls input{width:100%;accent-color:#23664d;min-height:28px}.w-throw,.w-next{min-height:46px;background:#1c5545;color:#ffefbc;border:1px solid #75996f;border-radius:26px;padding:12px 24px;font:600 15px system-ui;cursor:pointer}.w-next{display:block;margin:12px auto}.w-throw:disabled{opacity:.55;cursor:wait}.w-aim-note,.w-message{text-align:center;font:14px/1.4 system-ui;margin:9px 0;min-height:20px}.w-aim-note{color:#7a623a}.w-message{font-weight:650;color:#2e6249}.w-instructions{font:14px/1.5 system-ui;max-width:740px;margin:16px auto 0;color:#536b51}.w-small{font:12px/1.5 system-ui;max-width:740px;margin:9px auto 0;color:#6c735d}.w-aim-surface:focus-visible{outline:3px solid #fff0aa;outline-offset:-5px}.w-nav button:focus-visible,.w-controls input:focus-visible,.w-throw:focus-visible,.w-next:focus-visible{outline:3px solid #3e8663;outline-offset:3px}@keyframes w-pitch{0%{left:22%;top:86%;opacity:1;scale:1.6}100%{left:var(--pitch-x);top:var(--pitch-y);opacity:1;scale:.65}}@keyframes w-home{0%{left:var(--pitch-x);top:var(--pitch-y);opacity:1;scale:.65}65%{opacity:1}100%{left:96%;top:-18%;opacity:0;scale:.25}}@media(max-width:650px){.w-nav{padding:10px 12px}.w-nav>span{display:none}.w-content{padding:16px}.w-heading h1{font-size:26px}.w-stage{width:min(100%,calc(max(160px,100svh - 370px) * 1.5))}.w-controls{flex-wrap:wrap;gap:10px}.w-controls label{min-width:35%}.w-throw{width:100%;padding:10px}.w-name,.w-john-name{font-size:9px;padding:4px 7px}.w-instructions{font-size:13px}.w-ball{width:12px;height:12px}.w-ball:before{font-size:10px}.w-crosshair{width:22px;height:22px}.w-crosshair:before{width:28px}.w-crosshair:after{height:28px}}@media(prefers-reduced-motion:reduce){.pitching .w-ball,.pitching.home-run .w-ball{animation:none;left:var(--pitch-x);top:var(--pitch-y);opacity:1;scale:.65}.pitching.home-run .w-ball{opacity:0}}