*{box-sizing:border-box}html{background:#15364a;color:#f5e4bd;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 18% 0,#315d70,#193e53 55%,#112d40)}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #f3be5c;outline-offset:3px}a{color:inherit;text-decoration:none}.app{width:min(760px,calc(100% - 24px));margin:auto;padding:8px 0}header{height:48px;display:flex;justify-content:space-between;align-items:center;gap:8px}header>a{font-size:11px;color:#bdd0d2}header strong{text-align:center;font-size:22px;letter-spacing:3px}header small{display:block;font-size:6px;letter-spacing:2px;color:#93b1b7;margin-top:3px}button{min-width:44px;min-height:44px;border:1px solid #b5834d;border-radius:10px;background:#f4dba7;color:#4e483e;box-shadow:0 3px #855b36;padding:7px 11px;font-weight:800}#sound{font-size:10px}.top{display:flex;gap:10px;align-items:center;margin:7px 0}.levels{display:flex;gap:5px;flex:1}.levels button{flex:1;min-width:0;font-size:10px;padding:5px}.levels small{display:block;font-size:7px;margin-top:3px}.levels .active{background:#d35f43;color:#fff1cd;border-color:#943a2c;box-shadow:0 3px #943a2c}.levels button[data-done]:after{content:' ✓'}.stats{display:flex;gap:8px;text-align:center;color:#99b2b7;font-size:8px}.stats b{display:block;color:#f5dba5;font-size:17px}.court{position:relative;width:min(100%,600px);aspect-ratio:10/7;margin:auto;border:8px solid #6c4c36;border-radius:20px;background:#d9894f;box-shadow:inset 0 3px #a67a55,0 7px #3f3029,0 16px 28px #0a2433aa;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}#overlay{position:absolute;inset:0;background:#f6e5c7f3;color:#314f55;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:17px;z-index:5}#overlay[hidden]{display:none}.ball-mark{width:39px;height:39px;border-radius:50%;background:repeating-linear-gradient(90deg,transparent 0 17px,#61372c 18px 20px,transparent 21px),#d7653f;box-shadow:inset -5px -5px #a33f31,0 3px #6b4435}#kicker{font-size:7px;letter-spacing:2px;color:#7d8173;margin-top:9px}h1{font-size:clamp(23px,5vw,34px);line-height:1.2;margin:7px 0}h1 em{font-style:normal;display:block;color:#ca5d42}#copy{font-size:11px;line-height:1.75;margin:3px 0 10px;color:#69776e}#primary{background:#285b63;color:#fff0c9;border-color:#17434e;box-shadow:0 4px #17434e;min-width:180px}#overlay a{font-size:9px;color:#768279;margin-top:10px}.controls{display:flex;justify-content:center;align-items:end;gap:7px;margin:12px 0 0}.meter{display:grid;grid-template-columns:repeat(2,44px);gap:4px}.meter span{grid-column:1/3;text-align:center;font-size:9px;color:#a9c0c0}.meter b{color:#f3d49c}.meter button{padding:5px;font-size:18px}.controls>button{font-size:11px}#shoot{background:#d45f42;color:#fff2cf;border-color:#963c2e;box-shadow:0 3px #963c2e;min-width:83px}.controls button:disabled{opacity:.45}.notice,#notice{text-align:center;min-height:17px;margin:8px 0 4px;color:#b8cbca;font-size:10px}footer{display:flex;justify-content:space-between;color:#819fa5;font-size:8px}.paused canvas{filter:blur(3px) grayscale(.5);opacity:.5}[hidden]{display:none!important}
@media(max-width:500px){.app{width:calc(100% - 12px);padding:4px 0}header{height:44px}header strong{font-size:17px;letter-spacing:2px}header small{font-size:5px}.top{display:block;margin:4px 0}.levels{height:43px}.levels button{min-height:40px;padding:3px}.stats{display:none}.court{width:100%;border-width:6px;border-radius:15px}.controls{gap:4px;margin-top:8px;align-items:end}.meter{grid-template-columns:repeat(2,44px);gap:3px}.controls>button{padding:5px 7px;min-width:44px}#shoot{min-width:64px}.notice,#notice{margin:6px 0 2px}footer{justify-content:center}footer span:last-child{display:none}#overlay{padding:11px;border-radius:10px}#copy{font-size:10px}}
@media(max-width:340px){.controls{transform:scale(.94);transform-origin:center top;width:106%;margin-left:-3%}.meter{grid-template-columns:repeat(2,42px)}.meter button{min-width:42px}.controls>button{font-size:10px;padding:4px}h1{font-size:22px}}
@media(max-height:500px) and (orientation:landscape){.app{width:calc(100% - 16px);height:100svh;display:grid;grid-template-columns:330px 1fr;grid-template-rows:48px 55px 1fr 20px;gap:5px 12px;padding:5px 0}header{grid-column:1;grid-row:1;height:auto}.top{grid-column:1;grid-row:2;display:block;margin:0}.levels{height:44px}.stats{display:none}.court{grid-column:2;grid-row:1/5;width:min(100%,500px);align-self:center}.controls{grid-column:1;grid-row:3;align-self:center;flex-wrap:wrap;margin:0}.notice,#notice{grid-column:1;grid-row:4;margin:0}footer{display:none}#copy{font-size:10px;line-height:1.5}h1{font-size:24px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:340px){.controls{transform:none;width:100%;margin-left:0;flex-wrap:wrap;row-gap:5px}.meter{grid-template-columns:repeat(2,44px)}.meter button{min-width:44px}}