@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
.stadium:before{content:'';position:absolute;inset:0;background:url('stadium.png') center/100% 100%;pointer-events:none}.stadium.left-handed:before{transform:scaleX(-1)}.stadium.left-handed .batter-label{left:auto;right:4%}
:root{color-scheme:dark;--bg:#101416;--panel:#1a2022;--line:#31393b;--muted:#a0abad;--lime:#c7ef82}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f0f3ef;font-family:'Noto Sans KR',sans-serif;font-size:16px}button,a,input{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none}button:disabled{cursor:not-allowed;opacity:.35}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--lime);outline-offset:4px}header{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4.5%}.brand{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:800;text-decoration:none;color:white;display:flex;align-items:center;gap:12px;letter-spacing:1px}.brand small{font-family:'Noto Sans KR';font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0;border-left:1px solid var(--line);padding-left:14px}.plate{color:var(--lime);font-size:40px}nav{display:flex;gap:24px;height:100%;align-items:center}nav button{height:100%;font-size:14px;color:var(--muted);padding:0 3px}nav button.active{color:var(--lime);border-bottom:2px solid var(--lime)}nav span{border:1px solid #697375;border-radius:50%;padding:0 5px;margin-left:5px}main{max-width:1510px;margin:auto;padding:38px 4.5% 40px}.heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.eyebrow{color:var(--lime);font:600 13px 'Barlow Condensed',sans-serif;letter-spacing:2.8px}h1{font-size:34px;letter-spacing:-1.4px;margin:9px 0}p{color:var(--muted);line-height:1.8;font-size:14px;margin:8px 0}h2{font-size:18px;margin:0}h3{font-size:18px}.practice-tag{font-size:13px;color:#c6ceca;display:flex;align-items:center;gap:12px}.practice-tag span{border:1px solid #56604b;color:var(--lime);font:600 12px 'Barlow Condensed';letter-spacing:1px;padding:5px 7px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px}.stadium{aspect-ratio:1000/680;position:relative;overflow:hidden;border-radius:12px;border:1px solid #3b4748;background:#182c2f url('stadium.png') center/100% 100% no-repeat}.stadium-shade{position:absolute;inset:0;background:linear-gradient(#020c18b3,transparent 35%,transparent 65%,#031014db)}.scoreboard{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;z-index:2}.scoreboard b{font-size:15px}.scoreboard small{display:block;color:#c0caca;font-size:12px;margin-top:5px}.score-count{display:flex;gap:14px;align-items:center;font-size:12px}.score-count i{color:#59706d;font-style:normal}.score-count span:last-child{color:var(--lime)}.pitch-progress{display:flex;gap:5px;align-items:baseline;font-family:'Barlow Condensed';color:#b2bfc1}.pitch-progress b{font-size:32px;color:white}.camera-tag{position:absolute;top:92px;left:24px;color:var(--lime);font:600 12px 'Barlow Condensed';letter-spacing:1.3px}.camera-tag span{margin-left:10px;color:#c1cbca;font:12px 'Noto Sans KR';letter-spacing:0}.batter-label{position:absolute;bottom:26%;left:4%;font-size:12px;background:#0b141ac9;padding:7px 10px;border-left:2px solid #8c9b93}#overlay{position:absolute;inset:0;width:100%;height:100%}#zone-box{fill:#c7ef8207;stroke:#d7f6a8;stroke-width:2}#zone-grid{stroke:#e2f9c7;stroke-opacity:.35;fill:none;stroke-dasharray:5 5;stroke-width:1}#ball{fill:#fffbea;stroke:#dccdaf;stroke-width:1.2;filter:drop-shadow(0 0 4px #fff9)}.ready{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#06111638;text-align:center}.ready span{font-size:13px;color:#d5dfdc}.ready h2{font-size:26px;margin:12px 0 24px;text-shadow:0 2px 15px #000}.primary{background:var(--lime);color:#172018;padding:14px 22px;border-radius:6px;font-weight:700;font-size:15px}kbd{font:12px 'Noto Sans KR';border:1px solid currentColor;border-radius:4px;padding:2px 6px;opacity:.65;margin-left:10px}.field-status{position:absolute;bottom:64px;left:15px;right:15px;text-align:center;font-size:14px;text-shadow:0 2px 8px black}.field-bottom{position:absolute;bottom:18px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#c0c8c5}.field-bottom button{margin-left:auto;border:1px solid #6e7b73;padding:7px 12px;border-radius:5px;font-size:13px}.decision{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.decision button{padding:17px;border:1px solid #58694c;border-radius:8px;background:#202c21}.decision button:nth-child(2){border-color:#3e4d54;background:#1e292f}.decision button:hover:not(:disabled){border-color:var(--lime);transform:translateY(-1px)}.decision span{font-size:21px;font-weight:700}.decision kbd{margin:0 9px 0 0;font-size:12px;vertical-align:middle}.decision small{display:block;margin-top:5px;font-size:12px;color:#b7c3b6;font-weight:400}.footnote{font-size:12px;color:#8c9996;margin-top:14px}aside{display:flex;flex-direction:column;gap:17px}.panel{padding:23px;background:var(--panel);border:1px solid var(--line);border-radius:10px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:6px}.panel-title h2{font-size:16px}.panel-title>span{font:500 12px 'Barlow Condensed';color:#919e9e;letter-spacing:.7px}.settings>p{font-size:13px}.mode-switch{display:grid;grid-template-columns:1fr 1fr;background:#101718;border-radius:6px;padding:4px;margin:20px 0 10px;gap:3px}.mode-switch button{padding:10px 2px;font-size:14px;border-radius:4px;color:#abb7b7}.mode-switch button.selected{background:var(--lime);color:#172019;font-weight:700}.mode-switch small{display:block;font-size:12px;margin-top:3px;font-weight:400}.setting-note{font-size:12px;color:#a0abab}.divider{height:1px;background:var(--line);margin:20px 0}.meta-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin:12px 0}.meta-row>span{color:#9caaaa}.meta-row b{font-weight:500}.meta-row small{color:#99a9a2}.dots{display:flex;gap:8px;margin-top:20px}.dot{height:5px;border-radius:4px;flex:1;background:#3b4445}.dot.correct{background:var(--lime)}.dot.wrong{background:#ef927c}#feedback-content{text-align:center;padding:16px 0 2px}.empty-symbol{font-size:35px;color:#697c70}#feedback-content h3{margin:8px 0}#feedback-content p{font-size:13px}.tip{padding:1px 7px}.tip>span{font:600 12px 'Barlow Condensed';letter-spacing:1.5px;color:var(--lime)}.tip p{font-size:13px}.result-label{font:700 15px 'Noto Sans KR';color:var(--lime)}.result-label.wrong{color:#ef927c}.next{width:100%;margin-top:16px}.result-map{width:130px;height:120px;margin:auto}footer{max-width:1510px;padding:22px 4.5%;margin:auto;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#859491;font:600 14px 'Barlow Condensed';letter-spacing:1px}footer small{font:12px 'Noto Sans KR';letter-spacing:0;margin-left:12px}dialog{background:#1b2426;color:white;border:1px solid #57634f;border-radius:15px;max-width:580px;width:calc(100% - 32px);padding:35px}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}.close{position:absolute;right:12px;top:8px;font-size:28px}.summary-number{font:800 80px 'Barlow Condensed';color:var(--lime);margin:12px 0}.summary-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:13px 0;font-size:14px}.secondary{border:1px solid #566460;border-radius:5px;padding:10px 15px;margin:12px 0}label{display:block;margin:20px 0}input{display:block;margin:12px 0;max-width:100%}.record{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding:20px 0}.record small{display:block;color:var(--muted);margin-top:6px}.record b{color:var(--lime);font-size:22px}a{color:var(--lime)}.result-photo{max-width:100%;border-radius:5px;margin-top:12px}[hidden]{display:none!important}@media(min-width:1550px){main{padding-top:45px}}@media(max-width:1000px){.game-layout{grid-template-columns:minmax(0,1fr) 270px;gap:16px}.panel{padding:17px}nav{gap:15px}.score-count{display:none}.heading h1{font-size:30px}.brand small{display:none}}@media(max-width:760px){header{height:auto;min-height:76px;flex-wrap:wrap;padding:14px 5% 0;gap:10px}.brand{font-size:27px}nav{gap:18px;min-height:43px;overflow:auto;width:100%}nav button{font-size:13px;padding-bottom:12px;white-space:nowrap}main{padding:25px 4%}.heading{margin-bottom:20px}.heading h1{font-size:27px}.heading p{font-size:13px;max-width:260px}.practice-tag{font-size:0;gap:0}.game-layout{grid-template-columns:1fr}.stadium{aspect-ratio:1.2}.scoreboard{left:16px;right:16px;top:15px}.camera-tag{top:80px;left:16px}.ready h2{font-size:21px}.field-bottom{left:12px;right:12px;gap:5px}.field-bottom>span{font-size:10px;max-width:170px}.field-status{bottom:65px;font-size:12px}.batter-label{font-size:10px}.decision span{font-size:18px}.decision{gap:10px}.footnote{line-height:1.8}.tip{display:none}footer{font-size:12px}footer small{display:none}.panel-title h2{font-size:17px}aside{display:grid;grid-template-columns:1fr}.settings{order:2}#feedback{order:1}}

/* Pitch reconstruction update: remove glow and keep image/projection aligned. */
#ball{filter:none;stroke:none;fill:none;pointer-events:none;will-change:transform}#ball-spin image{image-rendering:auto}.stadium:before{background-size:cover}.stadium{background-size:cover!important}.source-label{font-size:12px;color:var(--muted);margin:16px 0 7px}#source-select{width:100%;padding:10px;background:#101718;color:#d5e7ce;border:1px solid #3e4d40;border-radius:5px;font:13px 'Noto Sans KR',sans-serif}#source-select:disabled{opacity:.55}.reference-caption{overflow-wrap:anywhere}.result-map{overflow:visible}.practice-tag span{font-family:'Noto Sans KR',sans-serif}.field-status{pointer-events:none}.ready{background:#06111626}#mode-note{line-height:1.65}
@media(max-width:760px){.stadium{aspect-ratio:1000/680}.camera-tag{top:66px}.ready h2{font-size:18px}.ready .primary{padding:10px 16px}.field-status{bottom:51px;font-size:11px}.field-bottom{bottom:10px}.batter-label{bottom:28%}}

.actual-replay{padding:22px;background:#182123;border:1px solid #455341;border-radius:12px}.actual-heading{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:18px}.actual-heading h2{margin-top:8px;font-size:22px}.actual-heading strong{color:var(--lime);white-space:nowrap;font-size:15px}.actual-gif{display:block;width:100%;height:auto;max-height:580px;object-fit:contain;background:#090e11;border-radius:6px}.actual-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}.actual-toolbar .primary{margin-left:auto}.actual-source{overflow-wrap:anywhere;font-size:12px}.abs-evidence{margin:18px auto 12px;max-width:210px}.abs-evidence img{display:block;width:100%;height:auto;border:1px solid #48564a;border-radius:5px;image-rendering:pixelated}.abs-evidence figcaption{font-size:12px;color:#a9b4ac;margin-top:6px}.actual-replay>p{font-size:13px}#replay-error{color:#ffbb9f}@media(max-width:760px){.actual-replay{padding:14px}.actual-heading{display:block}.actual-heading h2{font-size:18px;margin-bottom:10px}.actual-toolbar .primary{margin-left:0;width:100%}.actual-toolbar .secondary{flex:1;font-size:13px}}

/* Keep the stadium fixed while scaling only the foreground batter. */
.stadium{background-image:url('stadium-empty.png')!important}.stadium:before{display:none}.batter-mirror{position:absolute;inset:0;pointer-events:none}.stadium.left-handed .batter-mirror{transform:scaleX(-1)}.batter-figure{position:absolute;inset:0;background:url('batter-cutout.png') center/100% 100% no-repeat;transform:scale(var(--batter-scale,1));transform-origin:7% 100%;will-change:transform}

@media(max-width:760px){
  main{padding-top:16px}
  .heading{margin-bottom:16px;gap:8px}
  .heading h1{font-size:25px;margin:6px 0}
  .heading p{margin:4px 0;line-height:1.6}
  .practice-tag span{font-size:10px;letter-spacing:0;white-space:nowrap}
  .game-layout{gap:16px}
  .stadium{aspect-ratio:auto;height:calc((100lvh - var(--mobile-reserved-height,360px)) * 1.5);min-height:330px}
  .batter-figure{inset:auto;left:50%;top:50%;width:var(--mobile-scene-width,100%);height:var(--mobile-scene-height,100%);background-size:100% 100%;background-position:center;transform:translate(calc(-50% + var(--batter-reveal,0px)),-50%) scale(var(--batter-scale,1));transform-origin:center bottom}
  .decision{margin-top:12px;gap:10px}
  .decision button{padding:14px 8px;min-height:76px}
  #feedback{padding:16px}
  #feedback .panel-title h2{font-size:16px}
  #feedback .dots{margin-top:14px}
}