@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');}

:root{
  --green:#58cc02; --green-dark:#58a700;
  --blue:#1cb0f6; --blue-dark:#1899d6;
  --yellow:#ffb800; --red:#ff4b4b; --red-dark:#d33131;
  --ink:#2a231b; --gray:#8a7d6b; --line:#e9e1d3; --bg:#faf7f1;
}
*{box-sizing:border-box}
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;
}
.wrap{max-width:480px; margin:0 auto; min-height:100dvh; padding:10px 16px calc(16px + env(safe-area-inset-bottom));}
.screen{display:flex; flex-direction:column; align-items:stretch; min-height:calc(100dvh - 26px - env(safe-area-inset-bottom)); gap:12px;}
.hidden{display:none !important;}

/* ---------- typography ---------- */
h1{font-size:32px; font-weight:900; margin:6px 0 0; text-align:center; letter-spacing:.5px;}
.tagline{text-align:center; color:var(--gray); font-weight:800; margin:0 0 4px; font-size:16px;}
.mascot{font-size:76px; text-align:center; line-height:1; animation:bob 2.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@media (prefers-reduced-motion: reduce){ .mascot{animation:none} }

/* ---------- buttons (Duolingo chunky 3D) ---------- */
.btn{
  display:block; width:100%; border:2px solid; border-radius:14px;
  padding:14px 18px; font-family:inherit; font-weight:900; font-size:17px;
  letter-spacing:1px; text-transform:uppercase; color:#fff; cursor:pointer;
  transition:transform .06s, box-shadow .06s; user-select:none; -webkit-user-select:none;
}
.btn-green{background:var(--green); border-color:var(--green-dark); box-shadow:0 4px 0 var(--green-dark);}
.btn-blue{background:var(--blue); border-color:var(--blue-dark); box-shadow:0 4px 0 var(--blue-dark);}
.btn:active{transform:translateY(4px); box-shadow:0 0 0 transparent;}
.btn:disabled{opacity:.55; cursor:wait;}
.btn-row{display:flex; gap:10px;}
.btn-row .btn{flex:1;}
.btn-finish{width:auto; padding:8px 14px; font-size:13px;}

/* ---------- cards ---------- */
.card{
  background:#fff; border:2px solid var(--line); border-radius:18px;
  padding:16px 18px; box-shadow:0 4px 0 var(--line);
}
.howto{display:flex; flex-direction:column; gap:10px;}
.howto-row{display:flex; gap:12px; align-items:center;}
.howto-row span{font-size:30px; line-height:1;}
.howto-row p{margin:0; font-weight:700; font-size:15px;}
.midi-stat{min-height:20px; text-align:center; color:var(--gray); font-weight:700; font-size:13px; margin:2px 0 0;}
.midi-note{text-align:center; color:#bfae96; font-weight:700; font-size:12px; margin:0;}
.best-line{text-align:center; font-weight:900; font-size:16px; margin:6px 0 0;}
.home-link{display:block; text-align:center; margin-top:8px; color:var(--blue-dark); font-weight:800; text-decoration:none;}

/* ---------- game HUD ---------- */
.hud{display:flex; gap:8px; align-items:center;}
.hud-item{
  flex:1; background:#fff; border:2px solid var(--line); border-radius:14px; box-shadow:0 3px 0 var(--line);
  padding:6px 4px; text-align:center; line-height:1.1;
}
.hud-ico{font-size:18px;}
.hud-item b{display:block; font-size:20px; font-weight:900;}
.hud-item small{color:var(--gray); font-weight:800; font-size:10px; text-transform:uppercase; letter-spacing:.5px;}

/* ---------- finish progress ---------- */
.prog{position:relative; height:22px; background:#f0e9db; border-radius:99px; overflow:hidden; border:2px solid var(--line);}
.prog-fill{height:100%; width:0; background:linear-gradient(90deg,var(--green),#8fe000); border-radius:99px; transition:width .2s;}
.prog-label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; color:var(--ink);}

/* ---------- target note card ---------- */
.target-card{background:#fff; border:2px solid var(--line); border-radius:18px; box-shadow:0 4px 0 var(--line); padding:8px 12px 12px;}
.target-top{display:flex; align-items:center; gap:10px; margin-bottom:2px;}
.target-label{font-weight:900; font-size:12px; letter-spacing:1.5px; color:var(--gray); white-space:nowrap;}
.target-label.spicy{color:#b8860b;}
#targetStaff{display:flex; justify-content:center;}
.staffsvg{width:min(300px, 80vw); height:auto;}
.sl{stroke:#cfc3ad; stroke-width:2;}
.clef{font-family:'Noto Music',serif; font-size:64px; fill:var(--ink);}
.acc{font-family:'Noto Music',serif; font-size:34px; fill:var(--ink);}
.ledger{stroke:var(--ink); stroke-width:3;}
.stem{stroke:var(--ink); stroke-width:4;}
.nh{fill:var(--ink);}

/* ---------- trail canvas ---------- */
.game-stage{position:relative; display:flex; flex-direction:column; flex:1; gap:12px; min-height:0;}
.trail-wrap{position:relative; flex:1; min-height:240px; border-radius:18px; overflow:hidden; border:2px solid var(--line); box-shadow:0 4px 0 var(--line); background:#aee3ff;}
#trail{position:absolute; inset:0; width:100%; height:100%; display:block;}
.mic-row{
  text-align:center; font-weight:800; font-size:14px; color:var(--gray);
  background:#fff; border:2px solid var(--line); border-radius:14px; padding:10px;
}
.mic-row.live{color:var(--green-dark); border-color:var(--green-dark);}

/* ---------- note buttons ---------- */
.keys{display:flex; gap:6px; flex-wrap:wrap;}
.key{
  flex:1 1 0; min-width:44px; min-height:clamp(84px,14vh,120px); background:#fff; border:2px solid var(--line); border-radius:12px;
  box-shadow:0 4px 0 var(--line); font-family:inherit; font-weight:900; font-size:19px; color:var(--ink);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:12px; cursor:pointer;
  transition:transform .05s, box-shadow .05s, background .08s; user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}
.key:active{transform:translateY(4px); box-shadow:0 0 0 var(--line); background:#f3efe4;}
.key.right{background:#d7f5c0; border-color:var(--green-dark);}
.key.wrong{background:#ffd9d9; border-color:var(--red-dark); animation:shake .25s;}
.key.spicy-key{background:#fff8e1; border-color:#f0d060;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ---------- toast ---------- */
.toast{
  position:absolute; left:50%; bottom:170px; transform:translateX(-50%) translateY(10px);
  background:var(--ink); color:#fff; font-weight:900; font-size:15px; padding:10px 18px;
  border-radius:99px; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  white-space:nowrap; z-index:5; max-width:94vw; overflow:hidden; text-overflow:ellipsis;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- results ---------- */
.overlay{
  position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; padding:24px;
  background:rgba(250,247,241,.94); backdrop-filter:blur(3px); border-radius:18px;
}
.newbest{font-size:22px; font-weight:900; color:#b8860b; animation:pop .4s cubic-bezier(.2,1.6,.4,1);}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.score-card{width:100%; display:flex; flex-direction:column; gap:8px;}
.score-row{display:flex; justify-content:space-between; font-weight:800; font-size:16px;}
.score-row b{font-weight:900; font-size:18px;}
.score-row span{color:var(--gray);}

@media (prefers-reduced-motion: reduce){
  .mascot{animation:none}
  .newbest{animation:none}
}