:root{
    --bg:#0b1026;--ink:#f4f1e8;--gold:#ffcb47;--mint:#5ce1b9;--coral:#ff6b8b;
    --sky:#6db8ff;--staffbg:#fbf7ec;--staffink:#23284d;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{font-family:'Trebuchet MS','Verdana',sans-serif;
    background:radial-gradient(120% 90% at 50% 0%,#27306a 0%,var(--bg) 55%,#060816 100%);
    color:var(--ink);overflow:hidden;user-select:none;touch-action:manipulation;}
  #app{position:relative;width:100vw;height:100dvh;display:flex;flex-direction:column;z-index:1;}
  .hud{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;gap:10px;font-weight:bold;z-index:20;}
  .pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:6px 14px;font-size:15px;display:flex;align-items:center;gap:6px;backdrop-filter:blur(4px);}
  .pill .v{color:var(--gold);font-size:18px;}
  .lives{letter-spacing:2px;font-size:17px;}
  .streak .v{color:var(--mint);}
  .streak .mult{margin-left:5px;font-size:15px;font-weight:bold;color:var(--gold);opacity:0;transition:opacity .2s;}
  .streak.t1{border-color:rgba(255,203,71,.5);}
  .streak.t2{border-color:rgba(255,160,60,.8);box-shadow:0 0 10px rgba(255,150,50,.5);animation:firepulse 1.1s ease-in-out infinite;}
  .streak.t3{border-color:rgba(255,120,50,1);box-shadow:0 0 16px rgba(255,110,40,.8);animation:firepulse .7s ease-in-out infinite;}
  .streak.t1 .mult,.streak.t2 .mult,.streak.t3 .mult{opacity:1;}
  .streak.bump{animation:streakbump .3s ease-out;}
  @keyframes firepulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
  @keyframes streakbump{0%{transform:scale(1);}40%{transform:scale(1.22);}100%{transform:scale(1);}}
  .glow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s ease;
    background:radial-gradient(120% 95% at 50% 108%, rgba(255,140,40,.55), rgba(255,170,50,.18) 45%, rgba(255,170,50,0) 70%);}
  .beststart{font-size:14px;opacity:.75;color:var(--gold);}
  .newbest{font-size:22px;font-weight:bold;color:var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.4);animation:streakbump .5s ease-out;}
  .newbest.hidden{display:none;}

  /* Star Stage (milestone reward) */
  #partybg{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity .9s ease;pointer-events:none;
    background:linear-gradient(120deg,#ff5e8a,#ffb347,#5ce1b9,#6db8ff,#c792ff);background-size:300% 300%;animation:aurora 13s ease infinite;}
  body.party #partybg{opacity:.64;}
  body.party.p2 #partybg{opacity:.74;animation-duration:9s;}   /* Super Star: more intense, faster */
  @keyframes aurora{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
  body.party .stage{animation:stageGlow 5s linear infinite;}
  body.party.p2 .stage{animation-duration:3s;}
  @keyframes stageGlow{
    0%,100%{box-shadow:inset 0 2px 12px rgba(0,0,0,.12),0 0 38px rgba(255,94,138,.6);}
    33%{box-shadow:inset 0 2px 12px rgba(0,0,0,.12),0 0 38px rgba(92,225,185,.6);}
    66%{box-shadow:inset 0 2px 12px rgba(0,0,0,.12),0 0 38px rgba(109,184,255,.6);}}
  .twinkle{position:absolute;border-radius:50%;opacity:.25;animation:tw 2s ease-in-out infinite;}
  @keyframes tw{0%,100%{opacity:.2;transform:scale(.6);}50%{opacity:1;transform:scale(1.3);}}
  .shoot{position:absolute;width:90px;height:3px;border-radius:3px;pointer-events:none;opacity:.95;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));box-shadow:0 0 8px rgba(255,255,255,.85);
    transform:translate(0,0) rotate(22deg);transition:transform 1.2s ease-in,opacity 1.2s ease-in;}
  .starflash{position:absolute;inset:0;z-index:55;pointer-events:none;opacity:.9;transition:opacity .8s ease;
    background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.95), rgba(255,210,120,.55) 35%, rgba(255,210,120,0) 72%);}
  .milestone{position:absolute;top:36%;left:50%;z-index:60;font-size:54px;font-weight:bold;color:var(--gold);
    text-shadow:0 3px 0 #b8801c,0 0 30px rgba(255,200,80,.9),0 6px 22px rgba(0,0,0,.55);pointer-events:none;opacity:0;text-align:center;white-space:nowrap;transform:translate(-50%,-50%) scale(.4);}
  .milestone.show{animation:milePop 3s ease-out forwards;}
  @keyframes milePop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-6deg);}10%{opacity:1;transform:translate(-50%,-50%) scale(1.28) rotate(3deg);}20%{transform:translate(-50%,-50%) scale(1) rotate(0);}42%{transform:translate(-50%,-50%) scale(1.1);}62%{transform:translate(-50%,-50%) scale(1);}85%{opacity:1;transform:translate(-50%,-50%) scale(1);}100%{opacity:0;transform:translate(-50%,-95%) scale(1);}}
  .confetti{position:absolute;pointer-events:none;z-index:31;border-radius:50%;}
  .confetti.diamond{border-radius:2px;}
  .donebtn{background:rgba(255,203,71,.16);border:1px solid rgba(255,203,71,.5);color:var(--gold);border-radius:999px;padding:6px 16px;font-size:15px;font-weight:bold;font-family:inherit;cursor:pointer;}
  .soundbtn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:var(--ink);border-radius:999px;width:38px;height:34px;font-size:16px;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
  .soundbtn.off{opacity:.45;}
  .watchnotes{font-size:15px;color:var(--sky);background:rgba(109,184,255,.1);border:1px solid rgba(109,184,255,.35);border-radius:12px;padding:8px 16px;max-width:340px;line-height:1.5;}
  .watchnotes.hidden{display:none;}
  .watchnotes b{color:var(--gold);}
  .paused{position:absolute;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:bold;color:var(--ink);background:rgba(6,8,22,.55);backdrop-filter:blur(2px);border-radius:16px;}
  .paused.hidden{display:none;}
  button:focus-visible{outline:3px solid var(--sky);outline-offset:2px;}
  @media (prefers-reduced-motion:reduce){
    .streak.t2,.streak.t3,#partybg,body.party .stage,.twinkle{animation:none!important;}
    .milestone.show{animation-duration:1.2s;}
  }

  .stage{position:relative;flex:1;overflow:hidden;margin:4px 10px 0;border-radius:16px;
    background:linear-gradient(180deg,#fffdf6,var(--staffbg));border:1px solid rgba(0,0,0,.15);box-shadow:inset 0 2px 12px rgba(0,0,0,.12);}
  .stafflayer{position:absolute;inset:0;}
  .stafflayer svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
  .clef{position:absolute;left:2%;line-height:1;color:var(--staffink);pointer-events:none;z-index:2;font-size:1px;}
  .target{position:absolute;top:0;bottom:0;left:0;width:18%;background:linear-gradient(90deg,rgba(109,184,255,.30),rgba(109,184,255,0));border-right:2px dashed rgba(50,80,160,.5);pointer-events:none;z-index:3;}

  .token{position:absolute;transform:translate(-50%,-50%);will-change:left;z-index:5;}
  .glyph{border-radius:50%;background:var(--staffink);box-shadow:0 2px 5px rgba(0,0,0,.35);transform:rotate(-20deg);}
  .stem{position:absolute;background:var(--staffink);border-radius:2px;}
  .dot{position:absolute;background:var(--staffink);border-radius:50%;}
  .ledger{position:absolute;background:var(--staffink);border-radius:2px;}
  .token.hit .glyph,.token.hit .stem{background:var(--mint);}
  .token.miss .glyph,.token.miss .stem{background:var(--coral);}

  .keys{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:12px 12px calc(12px + env(safe-area-inset-bottom));z-index:20;}
  .key{border:none;border-radius:14px;padding:18px 0;font-size:24px;font-weight:bold;font-family:inherit;color:var(--bg);background:linear-gradient(180deg,#fff,#dfe6ff);box-shadow:0 4px 0 #9aa6d8,0 6px 12px rgba(0,0,0,.35);cursor:pointer;transition:transform .05s,box-shadow .05s;}
  .key:active{transform:translateY(3px);box-shadow:0 1px 0 #9aa6d8;}
  .key.good{background:linear-gradient(180deg,#bff7e3,#5ce1b9);box-shadow:0 4px 0 #2f9c7c;}
  .key.bad{background:linear-gradient(180deg,#ffc2cf,#ff6b8b);box-shadow:0 4px 0 #c43f5c;}

  .float{position:absolute;font-weight:bold;font-size:22px;pointer-events:none;z-index:30;animation:floatUp .85s ease-out forwards;text-shadow:0 1px 4px rgba(0,0,0,.3);}
  @keyframes floatUp{0%{opacity:0;transform:translate(-50%,8px) scale(.4);}22%{opacity:1;transform:translate(-50%,-4px) scale(1.3);}38%{transform:translate(-50%,-12px) scale(1);}100%{opacity:0;transform:translate(-50%,-58px) scale(1);}}
  .token.pop .glyph{animation:popGlyph .46s cubic-bezier(.3,1.5,.5,1) forwards;}
  .token.pop .stem,.token.pop .ledger,.token.pop .dot{animation:fadeOut .22s ease-out forwards;}
  @keyframes popGlyph{0%{transform:rotate(-20deg) scale(1);}22%{transform:rotate(-12deg) scale(1.4,.78);}52%{transform:rotate(-26deg) scale(1.05,1.45);}100%{transform:rotate(-20deg) scale(2);opacity:0;}}
  @keyframes fadeOut{to{opacity:0;}}
  .spark{position:absolute;border-radius:50%;pointer-events:none;z-index:29;transition:transform .65s cubic-bezier(.15,.7,.25,1),opacity .65s ease-out;}
  .spark.diamond{border-radius:2px;}
  .ring{position:absolute;width:30px;height:30px;border-radius:50%;border:3px solid;pointer-events:none;z-index:28;opacity:.9;transform:translate(-50%,-50%) scale(.3);transition:transform .5s ease-out,opacity .5s ease-out;}

  .overlay{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;gap:16px;background:radial-gradient(100% 80% at 50% 40%,rgba(39,48,106,.97),rgba(6,8,22,.98));backdrop-filter:blur(3px);}
  .overlay.hidden{display:none;}
  .title{font-size:42px;line-height:1;color:var(--gold);text-shadow:0 3px 0 #b8801c,0 6px 16px rgba(0,0,0,.5);letter-spacing:1px;}
  .title small{display:block;font-size:16px;color:var(--ink);letter-spacing:3px;margin-top:8px;opacity:.85;}
  .sub{font-size:16px;max-width:340px;opacity:.9;line-height:1.5;}
  .btn{border:none;border-radius:16px;padding:15px 32px;font-family:inherit;font-size:21px;font-weight:bold;color:var(--bg);background:linear-gradient(180deg,var(--gold),#f2a93b);box-shadow:0 5px 0 #b8801c,0 8px 18px rgba(0,0,0,.4);cursor:pointer;transition:transform .05s,box-shadow .05s;}
  .btn:active{transform:translateY(3px);box-shadow:0 2px 0 #b8801c;}
  .btn.ghost{background:rgba(255,255,255,.08);color:var(--ink);border:1px solid rgba(255,255,255,.3);box-shadow:none;font-size:17px;padding:12px 24px;}
  .rangebadge{font-size:20px;font-weight:bold;color:var(--sky);background:rgba(109,184,255,.12);border:1px solid rgba(109,184,255,.4);border-radius:12px;padding:8px 18px;}
  .levelsel{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
  .lvl{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:var(--ink);border-radius:12px;padding:9px 15px;font-family:inherit;font-size:15px;cursor:pointer;font-weight:bold;}
  .lvl.on{background:var(--sky);color:var(--bg);border-color:var(--sky);}
  #levelsel .lvl{font-size:21px;padding:8px 13px;}
  .bigscore{font-size:58px;color:var(--mint);line-height:1;}
  .statline{font-size:16px;opacity:.85;}
  .hint{font-size:13px;opacity:.6;max-width:330px;}

  /* settings */
  #settingsScreen{justify-content:flex-start;padding-top:16px;gap:12px;}
  .setTitle{font-size:24px;font-weight:bold;color:var(--gold);}
  .presets{display:flex;gap:8px;}
  .preset{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:var(--ink);border-radius:10px;padding:8px 14px;font-family:inherit;font-size:14px;font-weight:bold;cursor:pointer;}
  .sStaffWrap{position:relative;width:100%;max-width:520px;flex:1;min-height:0;
    background:linear-gradient(180deg,#fffdf6,var(--staffbg));border-radius:14px;border:1px solid rgba(0,0,0,.2);overflow:hidden;}
  .sStaffWrap svg{position:absolute;inset:0;width:100%;height:100%;}
  .sClef{position:absolute;left:3%;line-height:1;color:var(--staffink);font-size:1px;pointer-events:none;}
  .band{position:absolute;left:0;right:0;background:rgba(109,184,255,.18);pointer-events:none;}
  .handle{position:absolute;left:0;right:0;height:0;display:flex;align-items:center;cursor:grab;touch-action:none;z-index:6;}
  .handle .bar{position:absolute;left:0;right:0;height:3px;border-radius:2px;}
  .handle.top .bar{background:var(--gold);} .handle.bot .bar{background:var(--sky);}
  .handle .knob{position:absolute;right:8px;width:46px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:15px;color:var(--bg);box-shadow:0 2px 6px rgba(0,0,0,.4);transform:translateY(-50%);top:50%;}
  .handle.top .knob{background:var(--gold);} .handle.bot .knob{background:var(--sky);}
  .handle .grip{position:absolute;left:8px;width:30px;height:30px;border-radius:50%;border:3px solid;background:var(--staffbg);transform:translateY(-50%);top:50%;}
  .handle.top .grip{border-color:var(--gold);} .handle.bot .grip{border-color:var(--sky);}

  /* Short screens (landscape phones): slim down chrome so the staff keeps its room */
  @media (max-height:520px){
    .hud{padding:5px 12px;}
    .pill{padding:4px 11px;font-size:13px;}
    .stage{margin:3px 8px 0;border-radius:12px;}
    .keys{gap:6px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));}
    .key{padding:11px 0;font-size:20px;border-radius:11px;box-shadow:0 3px 0 #9aa6d8,0 4px 8px rgba(0,0,0,.3);}
    .key:active{transform:translateY(2px);}
    .donebtn{padding:4px 12px;font-size:13px;}
    .overlay{padding:14px;gap:10px;}
    .title{font-size:30px;}
    .title small{font-size:13px;margin-top:4px;}
    .sub{font-size:14px;}
    .btn{padding:11px 26px;font-size:18px;}
    .btn.ghost{font-size:15px;padding:9px 18px;}
    .rangebadge{font-size:17px;padding:6px 14px;}
    #settingsScreen{padding-top:8px;gap:8px;}
    .setTitle{font-size:19px;}
    .hint{font-size:12px;}
  }

/* Site integration: a compact way home leaves the game its full playing area. */
.game-header { height:44px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; position:relative; z-index:70; background:#060816; font-size:13px; }
.game-header a { color:var(--ink); text-decoration:none; padding:8px 0; }
.game-header a:hover { color:var(--gold); text-decoration:underline; }
.game-header a:focus-visible { outline:3px solid var(--sky); outline-offset:2px; }
.game-brand { font-weight:bold; }
#app { height:calc(100dvh - 44px); }
.end-title { font-size:32px; }
.overlay { overflow-y:auto; }
.overlay > * { flex-shrink:0; }
.sStaffWrap { min-height:120px; flex-shrink:1; }
.handle { height:36px; transform:translateY(-50%); }
.handle:focus-visible .grip { outline:3px solid var(--staffink); outline-offset:3px; }
.no-script { padding:30px; text-align:center; }
.no-script a { color:var(--gold); }
@media(max-width:420px) {
  .hud { gap:6px; padding:8px; }
  .pill { padding:6px 10px; }
  .donebtn { padding:6px 10px; }
  .game-header { padding:0 10px; font-size:11px; }
  .keys { gap:5px; padding-left:8px; padding-right:8px; }
  .key { font-size:21px; }
  .milestone { font-size:clamp(17px,5.5vw,54px); }
}
@media(max-height:600px) {
  .overlay { justify-content:flex-start; gap:8px; padding:12px; }
  .title { font-size:30px; }
  .title small { font-size:12px; margin-top:5px; }
  .btn { padding:10px 24px; font-size:18px; }
  .btn.ghost { padding:8px 18px; font-size:15px; }
  .sub { font-size:14px; }
  .rangebadge { padding:5px 14px; font-size:17px; }
  .lvl { padding:7px 12px; }
  #levelsel .lvl { font-size:18px; padding:6px 12px; }
}