@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/nunito-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/nunito-latin-900-normal.woff2') format('woff2');}
@font-face{font-family:'Noto Music';src:url('fonts/NotoMusic-Regular.woff2') format('woff2');font-display:swap;}
:root{
  --green:#58cc02; --green-dark:#58a700; --green-light:#d7ffb8;
  --red:#ff4b4b; --red-dark:#d33131; --red-light:#ffdfe0;
  --blue:#1cb0f6; --blue-dark:#1899d6; --blue-light:#ddf4ff;
  --yellow:#ffb800; --ink:#2a231b; --gray:#8a7d6b; --line:#e9e1d3; --bg:#faf7f1;
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; overscroll-behavior:none;
}
#app{
  max-width:480px; margin:0 auto; height:100dvh; box-sizing:border-box;
  padding:6px 20px calc(12px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; overflow:hidden;
}
/* ---------- compact header ---------- */
.topbar{display:flex; align-items:center; gap:12px; padding:8px 0 2px; flex:0 0 auto;}
.xbtn{background:none; border:none; font-size:22px; font-weight:900; color:#bfae96; padding:8px; cursor:pointer; line-height:1; text-decoration:none;}
.ttl{font-weight:900; font-size:18px; flex:1; text-align:center;}
.ttl .mascot{font-size:20px; margin-right:6px;}
.steps{display:flex; gap:6px; justify-content:center; padding:6px 0 2px; flex:0 0 auto;}
.steps i{width:26px; height:8px; border-radius:99px; background:var(--line);}
.steps i.on{background:var(--green);}
/* ---------- stage (flex-fill, no scroll) ---------- */
#stage{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden;}
.screen{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:stretch; text-align:center; overflow:hidden;}
.screen h1{font-size:24px; font-weight:900; margin:8px 0 4px;}
.screen p.lead{color:var(--gray); font-weight:700; margin:0 0 10px; font-size:15px;}
.mascot-big{font-size:56px; line-height:1; animation:bob 2.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
/* ---------- buttons ---------- */
.btn{
  display:block; width:100%; box-sizing:border-box; padding:14px; margin:0;
  border-radius:16px; border:2px solid var(--line); background:#fff;
  font-family:inherit; font-weight:900; font-size:15px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink); box-shadow:0 4px 0 var(--line); cursor:pointer;
  transition:transform .06s, box-shadow .06s, background .15s;
  -webkit-user-select:none; user-select:none;
}
.btn:active{transform:translateY(4px); box-shadow:0 0 0 var(--line);}
.btn-green{background:var(--green); border-color:var(--green); color:#fff; box-shadow:0 4px 0 var(--green-dark);}
.btn-green:active{box-shadow:none;}
.btn-green:disabled{background:#efe9dd; border-color:#efe9dd; color:#c9bda6; box-shadow:0 4px 0 #e0d5c0; transform:none; cursor:default;}
.btn-blue{background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 4px 0 var(--blue-dark);}
.btn-blue:active{box-shadow:none;}
.btn-red{background:var(--red); border-color:var(--red); color:#fff; box-shadow:0 4px 0 var(--red-dark);}
.btn-red:active{box-shadow:none;}
.btn-ghost{background:none; border:none; box-shadow:none; color:var(--blue-dark); padding:10px;}
.btn-ghost:active{transform:none; color:var(--blue);}
.btn-row{display:flex; gap:10px;}
.btn-row .btn{flex:1;}
.foot{flex:0 0 auto; padding-top:8px; background:linear-gradient(transparent, #faf7f1 35%); padding-bottom:calc(6px + env(safe-area-inset-bottom));}
.foot .btn{margin-bottom:8px;}
/* ---------- cards & chips ---------- */
.card{background:#fff; border:2px solid var(--line); border-radius:18px; box-shadow:0 4px 0 var(--line); padding:14px; margin:8px 0;}
.chip{display:inline-block; padding:8px 16px; border-radius:999px; font-weight:900; font-size:15px; background:var(--blue-light); color:var(--blue-dark); margin:4px;}
.chip.good{background:var(--green-light); color:var(--green-dark);}
.chip.low{background:var(--red-light); color:var(--red-dark);}
.chip.high{background:#ffe9c2; color:#b97a00;}
.note{font-size:14px; color:var(--gray); font-weight:700;}
/* ---------- record screen ---------- */
.timer{font-size:52px; font-weight:900; margin:4px 0; font-variant-numeric:tabular-nums;}
.timer small{font-size:18px; color:var(--gray);}
.pitchstrip{position:relative; height:86px; background:#fff; border:2px solid var(--line); border-radius:16px; overflow:hidden; margin:6px 0;}
.pitchstrip .mid{position:absolute; left:0; right:0; top:50%; height:2px; background:var(--line);}
.pdot{position:absolute; left:50%; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff6, #ffffff00), var(--blue);
  box-shadow:0 0 14px var(--blue); transition:top .09s linear;}
.pdot.quiet{opacity:.25; box-shadow:none;}
.stripnote{position:absolute; left:10px; top:6px; font-weight:900; font-size:15px; color:var(--gray);}
/* count-in overlay */
.countin{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:#faf7f1ee; z-index:5; border-radius:16px;}
.countin b{font-size:88px; font-weight:900; color:var(--green-dark); animation:pop .7s ease;}
@keyframes pop{0%{transform:scale(.4); opacity:0}30%{transform:scale(1.15); opacity:1}100%{transform:scale(1)}}
/* ---------- calibration ---------- */
.bignote{font-size:64px; font-weight:900; margin:2px 0;}
.bignote small{font-size:22px; color:var(--gray);}
.ladder{display:flex; justify-content:center; gap:8px; margin:8px 0; flex-wrap:wrap;}
.keybtn{width:56px; height:56px; border-radius:16px; border:2px solid var(--line); background:#fff;
  font-family:inherit; font-weight:900; font-size:22px; color:var(--ink); box-shadow:0 4px 0 var(--line); cursor:pointer;}
.keybtn:active{transform:translateY(4px); box-shadow:none;}
.stepper{display:flex; align-items:center; justify-content:center; gap:14px; margin:6px 0;}
.stepper .val{font-size:30px; font-weight:900; min-width:70px;}
/* ---------- game ---------- */
#gamewrap{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
#highway{flex:1 1 auto; min-height:0; width:100%; border-radius:18px; border:2px solid var(--line); background:#fffdf8; touch-action:none;}
.gamemeta{display:flex; justify-content:space-between; align-items:center; padding:6px 2px 0; font-weight:900; font-size:15px; flex:0 0 auto;}
.gamemeta .score{color:var(--green-dark);}
.verdict{display:flex; justify-content:center; align-items:center; padding:4px 0 2px; flex:0 0 auto; min-height:46px;}
.verdict .chip{font-size:20px; padding:10px 24px;}
.toggles{display:flex; gap:8px; justify-content:center; padding:6px 0 0; flex:0 0 auto;}
.tgl{border:2px solid var(--line); background:#fff; border-radius:999px; padding:8px 14px; font-family:inherit; font-weight:900; font-size:14px; color:var(--gray); cursor:pointer;}
.tgl.on{background:var(--blue-light); border-color:var(--blue); color:var(--blue-dark);}
/* ---------- results ---------- */
.stars{font-size:56px; letter-spacing:6px; margin:6px 0;}
.stars .off{filter:grayscale(1); opacity:.35;}
.xpline{font-size:20px; font-weight:900; color:var(--blue-dark); margin:4px 0;}
.bigscore{font-size:64px; font-weight:900; color:var(--green-dark); margin:2px 0;}
/* ---------- loader ---------- */
.tabs{display:flex; gap:8px; justify-content:center; margin:10px 0 4px;}
.tab{flex:1; border:2px solid var(--line); background:#fff; border-radius:14px; padding:12px 8px;
  font-family:inherit; font-weight:900; font-size:14px; color:var(--gray); cursor:pointer; box-shadow:0 3px 0 var(--line);}
.tab.on{background:var(--blue-light); border-color:var(--blue); color:var(--blue-dark);}
.tabpane{margin:6px 0;}
.filelabel{margin:8px 0;}
.abctext{width:100%; box-sizing:border-box; border:2px solid var(--line); border-radius:14px; padding:12px;
  font-family:'Nunito',monospace; font-size:15px; font-weight:700; color:var(--ink); background:#fff; resize:none;}
.abctext:focus{outline:none; border-color:var(--blue);}
/* ---------- staff preview ---------- */
.staffcap{font-weight:900; font-size:14px; color:var(--gray); margin:10px 0 4px;}
.staffview{width:100%; display:block; background:#fffdf8; border:2px solid var(--line); border-radius:14px;}
/* ---------- confetti ---------- */
#confetti{position:fixed; inset:0; pointer-events:none; z-index:50; overflow:hidden;}
#confetti i{position:absolute; top:-12px; width:10px; height:14px; border-radius:2px; animation:fall 2.6s ease-in forwards;}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg); opacity:.9;}}
@media (prefers-reduced-motion: reduce){
  .mascot-big{animation:none;} .countin b{animation:none;} #confetti{display:none;}
}