@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800;900&display=swap');
:root{--ink:#edf7f4;--soft:#a3bac6;--panel:#1a2c41;--line:#496177;--gold:#ffe19e}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 80% -20%,#2c4b65 0,#142437 46%,#0d1a2c 100%);color:var(--ink);font-family:"DM Sans","Noto Sans KR",sans-serif}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid #b6f7d9;outline-offset:3px}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.47;cursor:default}
[hidden]{display:none!important}
.page{width:min(1110px,calc(100% - 32px));margin:auto}
.nav{display:flex;align-items:center;gap:17px;height:72px;border-bottom:1px solid #ffffff21}
.back{border:1px solid #7891a452;border-radius:10px;padding:9px 12px;color:#bfcedc;font-size:11px;font-weight:850}
.wordmark{font:900 25px Outfit,sans-serif;letter-spacing:-1px;margin-left:auto}
.wordmark span{color:#ffbd89}
.nav-tag{font:800 9px Outfit,sans-serif;letter-spacing:1.4px;color:#8ca8b9;margin-left:auto}
.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 0 22px}
.eyebrow{font:900 10px Outfit,sans-serif;letter-spacing:1.6px;color:#a0ddd0;margin:0 0 8px}
.intro h1{font:900 clamp(27px,4vw,42px) "Outfit","Noto Sans KR",sans-serif;letter-spacing:-1.5px;margin:0 0 7px}
.intro h1 em,.rules h2{font-style:normal;color:#ffcf9c}
.intro>div>p:not(.eyebrow){font-size:12px;line-height:1.6;color:#aabdc9;margin:0;max-width:700px}
.best{background:#20364b;border:1px solid #4c6379;border-radius:13px;padding:12px 18px;min-width:132px;text-align:right}
.best span,.best small{display:block;color:#a9c0c7;font:800 10px Outfit,sans-serif;letter-spacing:.7px}
.best strong{display:block;font:900 34px Outfit,sans-serif;color:#ffe0a1}
.arena-shell{border:1px solid #4b6576;border-radius:17px;overflow:hidden;background:#1a2a3c;box-shadow:0 25px 60px #040b1745}
.scoreboard{display:flex;align-items:center;gap:0;min-height:67px;background:#1d3147}
.scoreboard>div{padding:13px 20px;min-width:120px;border-right:1px solid #ffffff15}
.scoreboard small,.result-stats small{display:block;color:#93acbd;font:850 10px Outfit,sans-serif;letter-spacing:1px}
.scoreboard strong{display:block;font:900 21px Outfit,sans-serif;letter-spacing:.2px}
.scoreboard sup{font-size:10px;color:#b5c2c5}
#strikeValue{color:#edb7a2;font-size:21px;white-space:nowrap}
#pauseBtn{margin-left:auto;margin-right:17px;border:1px solid #718a9766;background:#2c4860;color:#fff;border-radius:8px;min-width:42px;min-height:37px}
.timer-track{height:5px;background:#263e4d}
.timer-track>div{height:100%;width:100%;background:linear-gradient(90deg,#6ccea7,#f9d39b);transition:width .08s linear}
.canvas-wrap{position:relative;aspect-ratio:900/500;max-width:100%;overflow:hidden}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:manipulation}
.overlay{position:absolute;inset:0;background:#0e2035dc;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;z-index:5;backdrop-filter:blur(5px)}
.overlay-kicker{font:900 11px Outfit,sans-serif;letter-spacing:2px;color:#9cebd5}
.overlay h2{font:900 clamp(29px,5vw,47px) "Outfit","Noto Sans KR",sans-serif;margin:10px 0;letter-spacing:-1px}
.overlay h2 em{font-style:normal;color:#ffce97}
.overlay p{font-size:13px;color:#d1e3e6;line-height:1.9;margin:4px 0 17px}
.overlay small{font-size:10px;color:#a6c4ca;margin-top:8px}
.overlay-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.primary,.secondary{border-radius:10px;min-height:44px;padding:11px 19px;font-size:12px;font-weight:900}
.primary{background:#bff2d7;color:#214c4d;border:2px solid #e3fff0}
.secondary{border:1px solid #8aa5b4;background:#2d4d60;color:#f4fbf8}
.result-score{font:900 52px Outfit,sans-serif;color:#ffe3a5}
.result-stats{display:flex;gap:10px;margin:6px 0 19px}
.result-stats>div{border:1px solid #ffffff25;background:#2c405a;padding:9px 14px;border-radius:10px;min-width:82px}
.result-stats strong{font:900 23px Outfit,sans-serif}
.controls{display:flex;gap:12px;align-items:center;padding:13px 16px;background:#1c3146}
.swing-button{display:flex;align-items:center;gap:11px;border:2px solid #e4f9d7;border-radius:13px;background:linear-gradient(150deg,#c4f4d9,#9be1bb);color:#295a52;min-height:82px;padding:11px 17px;min-width:270px;box-shadow:0 5px 0 #42705e}
.swing-button:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #42705e}
.swing-button strong{font:900 26px Outfit,sans-serif;display:block;letter-spacing:.7px}
.swing-button small{font:800 10px "Noto Sans KR",sans-serif;display:block}
.bat-emblem{font-size:29px}
kbd{display:inline-block;border:1px solid #518e74;border-radius:7px;padding:4px 7px;font:900 9px Outfit,sans-serif;margin-left:14px}
.status{flex:1;min-width:0}
.status strong{display:block;font:900 14px Outfit,sans-serif;color:#ffdaaa;letter-spacing:1px;margin-bottom:4px}
.status span{display:block;font-size:11px;color:#a8c9cc;overflow-wrap:anywhere}
.pitch-meter{height:5px;border-radius:20px;background:#526377;margin-top:8px;overflow:hidden}
.pitch-meter>div{width:100%;height:100%;background:#a3efce}
.share{border:1px solid #7892a473;background:#2d4254;color:#e9f7f4;border-radius:9px;padding:11px;font-size:11px;font-weight:850}
.rules{display:grid;grid-template-columns:240px 1fr;gap:25px;padding:29px 0 36px}
.rules h2{font:900 24px "Outfit","Noto Sans KR",sans-serif;margin:0}
.rule-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rule-list article{background:#1b2b3f;border:1px solid #42556a;border-radius:12px;padding:14px}
.rule-list b{font:900 10px Outfit,sans-serif;color:#9adacc}
.rule-list strong{display:block;font-size:14px;margin:7px 0;color:#f5e6d6}
.rule-list p{color:#a6bdc9;font-size:11px;line-height:1.65;margin:0}
footer{border-top:1px solid #ffffff20;padding:19px 0 35px;display:flex;justify-content:space-between;gap:15px;color:#90a3b2;font-size:10px}
@media(max-width:750px){
 .page{width:calc(100% - 20px)}
 .nav{height:62px}.nav-tag{display:none}.wordmark{font-size:21px}
 .intro{padding:18px 0 15px}.intro h1{font-size:29px}.intro>div>p:not(.eyebrow){font-size:11px}
 .best{padding:8px 10px;min-width:90px}.best strong{font-size:25px}
 .scoreboard>div{flex:1;min-width:0;padding:11px 5px;text-align:center}
 .scoreboard small{font-size:8px}.scoreboard strong{font-size:18px}
 .scoreboard #strikeValue{font-size:14px}
 #pauseBtn{min-width:34px;min-height:32px;margin:0 6px 0 0}
 .canvas-wrap{aspect-ratio:900/500}
 .controls{padding:11px;gap:10px}.swing-button{min-width:0;min-height:66px;flex:0 1 63%;padding:9px}
 .swing-button strong{font-size:22px}.swing-button small{font-size:9px}
 kbd{display:none}.status{flex:1}.share{display:none}
 .rules{grid-template-columns:1fr;gap:13px}
 .rule-list{grid-template-columns:1fr;gap:8px}
 footer{display:block;line-height:1.8}footer a{display:block;margin-top:10px}
}
@media(max-width:430px){
 .intro{gap:7px}.intro h1{font-size:24px}
 .intro .best{min-width:75px}.intro .best strong{font-size:22px}
 .scoreboard{min-height:53px}.scoreboard small{font-size:7px}.scoreboard strong{font-size:14px}
 .controls{gap:7px;padding:9px}.swing-button{gap:5px;flex-basis:60%}
 .swing-button strong{font-size:20px}.bat-emblem{font-size:23px}
 .status strong{font-size:11px}.status span{font-size:9px}
 .overlay{padding:9px}.overlay h2{font-size:27px;margin:4px 0}
 .overlay p{font-size:11px;line-height:1.6;margin:0 0 8px}
 .overlay-buttons{gap:5px}.primary,.secondary{padding:8px 11px;min-height:37px}
 .result-stats>div{min-width:65px;padding:5px}.result-stats strong{font-size:18px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}