:root{
  --bg:#0e1a12; --ink:#eef4ee; --dim:#9fb4a4; --line:#2a4433;
  --panel:rgba(10,22,14,.82); --accent:#7fd6a2; --warn:#ffcf6b;
  --strike:#ff7d6b; --ball:#7fb8ff; --hit:#7fd6a2; --hr:#ffd84d; --foul:#c9b48a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font:15px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overscroll-behavior:none}
#stage{position:fixed;inset:0;overflow:hidden}
#canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}

.panel{position:absolute;background:var(--panel);backdrop-filter:blur(9px);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.panel.warn{top:50%;left:50%;transform:translate(-50%,-50%);max-width:34rem;text-align:center}

#hud{position:absolute;top:10px;left:12px;right:12px;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.75)}
#hud h1{font-size:1.05rem;margin:0;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.count{display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.count .lbl{color:var(--dim);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.count .num{font-size:1.18rem;font-weight:700;min-width:1.1ch;text-align:center}
.count .sep{width:14px}
.call{margin-left:auto;text-align:right}
.call span{font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.call small{display:block;color:var(--dim);font-size:.7rem}

#controls{right:12px;top:56px;width:19.5rem;max-height:calc(100% - 76px);overflow:auto}
#controls label{display:block;margin:.42rem 0;font-size:.8rem;color:var(--dim)}
#controls label.chk{display:inline-flex;align-items:center;gap:.3rem;margin-right:.6rem}
#controls select,#controls input[type=range]{width:100%;margin-top:.15rem}
#controls input[type=range]{accent-color:var(--accent)}
#controls output{float:right;color:var(--ink);font-variant-numeric:tabular-nums;font-size:.78rem}
#controls hr{border:0;border-top:1px solid var(--line);margin:.7rem 0}
.row{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.row.modes{margin-bottom:.4rem}
#controls.collapsed>:not(.modes):not(.status){display:none}
#controls.collapsed .status{margin-bottom:0}
button{font:inherit;font-size:.82rem;color:var(--ink);background:#1b3222;border:1px solid var(--line);
  border-radius:8px;padding:.34rem .62rem;cursor:pointer}
button:hover{background:#25452e}
button.primary{background:#2c6b45;border-color:#3f8f5d;font-weight:600}
button[aria-pressed=true]{background:#3f8f5d;border-color:#59b57b;color:#04140a;font-weight:700}
.status{font-size:.78rem;color:var(--accent);margin:.3rem 0 .5rem}
.hint{font-size:.72rem;color:var(--dim);margin:.35rem 0}
.zoneline{font-size:.76rem;color:var(--dim);margin:.3rem 0}
.zoneline b{color:var(--ink)}
.readout{display:grid;grid-template-columns:1fr 1fr;gap:.25rem .6rem;margin-top:.5rem;font-size:.74rem}
.readout div{display:flex;justify-content:space-between;gap:.4rem;border-bottom:1px dotted var(--line)}
.readout span{color:var(--dim)}
.log{margin-top:.6rem;max-height:11rem;overflow:auto;font-size:.7rem;color:var(--dim);
  font-variant-numeric:tabular-nums}
.logline{padding:.1rem 0;border-bottom:1px solid rgba(255,255,255,.05);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

#swingWrap{position:absolute;left:12px;bottom:14px;width:min(22rem,45%);height:8px;
  background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:6px;overflow:hidden}
#swingMeter{height:100%;width:0;background:linear-gradient(90deg,#3f8f5d,#ffd84d);transition:none}

.result-big{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  font-size:clamp(1.6rem,5.5vw,3.4rem);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  text-shadow:0 3px 18px rgba(0,0,0,.8);pointer-events:none;z-index:5}
.result-big.strike{color:var(--strike)}
.result-big.ball{color:var(--ball)}
.result-big.hit{color:var(--hit)}
.result-big.hr{color:var(--hr)}
.result-big.foul{color:var(--foul)}

.help{left:50%;top:50%;transform:translate(-50%,-50%);width:min(46rem,92vw);
  max-height:86vh;overflow:auto;z-index:20;line-height:1.55}
.help h2{margin:.1rem 0 .5rem;font-size:1.3rem}
.help h3{margin:1.1rem 0 .35rem;font-size:.95rem;color:var(--accent);letter-spacing:.04em}
.help p,.help li{font-size:.86rem;color:#dce8de}
.help ul{margin:.3rem 0 .3rem 1.1rem;padding:0}
.help blockquote{margin:.4rem 0;padding:.5rem .8rem;border-left:3px solid var(--accent);
  background:rgba(127,214,162,.07);font-size:.84rem;font-style:italic}
.help blockquote cite{display:block;font-style:normal;color:var(--dim);font-size:.76rem;margin-top:.3rem}
.help code,.help kbd{background:rgba(255,255,255,.09);border-radius:4px;padding:0 .28rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82em}
.help .close{position:absolute;right:10px;top:8px;font-size:1.1rem;line-height:1;padding:.15rem .45rem}

@media (max-width:760px){
  #controls{left:12px;right:12px;width:auto;top:auto;bottom:30px;max-height:46%}
  #swingWrap{width:calc(100% - 24px);bottom:14px}
  .call{margin-left:0}
  .count{gap:3px;flex-wrap:wrap}
  .count .sep{width:6px}
}