:root{
  /* finger colours – one per finger, used on the keyboard + finger bars.
     Fixed regardless of theme: they're a functional colour code, not decoration. */
  --f-lpinky:#ff7a7a;   /* a q z */
  --f-lring:#ffa94d;    /* s w x */
  --f-lmiddle:#ffd43b;  /* d e c */
  --f-lindex:#5fd97a;   /* f g r t v b */
  --f-rindex:#34cfe0;   /* j h y u n m */
  --f-rmiddle:#5aa9f5;  /* k i , */
  --f-rring:#a98bff;    /* l o . */
  --f-rpinky:#f78fc2;   /* ; p / */
  --f-thumb:#cfd6ff;    /* space */
}

*{-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  min-height:100%;
  overflow-x:hidden;
  user-select:none;
}

.wrap{max-width:920px;margin:0 auto;padding:14px 16px 28px;}

/* ---------- top bar ---------- */
header{display:flex;align-items:center;gap:12px;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;}
.brand h1{
  font-weight:700;color:var(--text);
  margin:0;font-size:clamp(20px,4vw,28px);letter-spacing:.3px;
}
.brand .logo{font-size:26px}
.toolbtn{
  font-family:var(--sans);font-weight:600;font-size:15px;
  border:1px solid var(--border-strong);cursor:pointer;color:var(--text);
  background:var(--card);
  padding:9px 14px;border-radius:var(--radius-lg);
}
.toolbtn:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- level strip ---------- */
.levelstrip{
  display:flex;gap:8px;margin:14px 0 6px;flex-wrap:wrap;
}
.pill{
  font-family:var(--sans);font-weight:600;font-size:13px;
  color:var(--text-secondary);background:var(--card);
  padding:7px 11px;border-radius:20px;border:2px solid var(--border);cursor:pointer;
}
.pill .num{opacity:.7;margin-right:5px}
.pill.on{background:var(--accent);color:#fff;border-color:var(--accent);}

/* ---------- progress ---------- */
.progrow{display:flex;align-items:center;gap:12px;margin:8px 0 16px;color:var(--text);}
.bar{flex:1;height:16px;background:var(--border);border-radius:20px;overflow:hidden;}
.bar > i{display:block;height:100%;width:0;border-radius:20px;
  background:var(--accent);transition:width .35s cubic-bezier(.3,1.3,.5,1);}
.stars{font-weight:700;white-space:nowrap;font-size:16px}

/* ---------- play card ---------- */
.stage{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 18px 10px;
  position:relative;overflow:hidden;
}
.topline{display:flex;align-items:center;gap:14px;min-height:120px}
.mascot{width:108px;height:108px;flex:none;animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.promptbox{flex:1;text-align:center;position:relative}
.word{
  font-weight:700;color:var(--text);
  font-size:clamp(34px,8vw,64px);letter-spacing:.06em;line-height:1.05;
  display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.04em;
}
.word .ch{position:relative;transition:transform .12s,color .12s;padding:0 .02em}
.word .ch.done{color:var(--border-strong)}
.word .ch.now{color:var(--text)}
.word .ch.now::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-.12em;height:.12em;border-radius:6px;
  background:var(--cue,var(--accent));animation:pulseline 1s ease-in-out infinite;
}
.word .ch.space{min-width:.5em}
.word .ch.space.now::after{left:-2%;right:-2%}
@keyframes pulseline{0%,100%{opacity:.45;transform:scaleX(.7)}50%{opacity:1;transform:scaleX(1)}}
.cheer{
  position:absolute;left:50%;top:-6px;transform:translateX(-50%);
  font-weight:700;font-size:22px;color:var(--success-text);
  opacity:0;pointer-events:none;
}
.cheer.show{animation:pop .7s ease}
@keyframes pop{0%{opacity:0;transform:translate(-50%,6px) scale(.6)}
  30%{opacity:1;transform:translate(-50%,-14px) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-34px) scale(1)}}

.hint{
  text-align:center;color:var(--text-secondary);font-weight:700;font-size:14px;margin:2px 0 10px;
  min-height:20px;
}
.hint b{color:var(--cue,var(--accent))}

/* ---------- finger bars ---------- */
.hands{display:flex;justify-content:center;align-items:flex-end;gap:6px;margin:2px 0 14px;height:54px}
.hands .gap{width:18px}
.finger{width:20px;border-radius:10px 10px 4px 4px;background:var(--border-strong);
  transition:transform .12s,box-shadow .12s,background .12s;align-self:flex-end;}
.finger.lit{transform:translateY(-8px);box-shadow:0 0 0 4px var(--accent-soft)}

/* ---------- keyboard ---------- */
.kb{display:flex;flex-direction:column;gap:8px;align-items:center;margin-top:6px;padding-bottom:6px}
.krow{display:flex;gap:7px;justify-content:center;width:100%}
.key{
  font-family:var(--sans);font-weight:600;
  width:min(8.4vw,52px);height:min(8.4vw,52px);border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:min(4vw,22px);
  background:var(--card);color:var(--text);border:1px solid var(--border-strong);
  cursor:pointer;text-transform:uppercase;position:relative;transition:transform .06s;
}
.key[data-key=" "]{width:min(46vw,290px)}
.key.tinted{background:var(--kc);color:#23204a;border-color:transparent}
.key.dim{opacity:.32}
.key.bump::before{content:"";position:absolute;bottom:7px;left:50%;transform:translateX(-50%);
  width:16px;height:4px;border-radius:4px;background:var(--text-faint)}
.key.target{transform:translateY(-4px) scale(1.06);
  box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--kc,var(--accent)),0 0 16px var(--kc,var(--accent))}
.key.bonk{animation:bonk .3s}
@keyframes bonk{0%,100%{transform:translateY(0)}25%{transform:translateX(-6px) rotate(-4deg)}75%{transform:translateX(6px) rotate(4deg)}}
.key:active{transform:translateY(2px)}

/* ---------- overlays ---------- */
.overlay{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(0,0,0,.5);backdrop-filter:blur(3px);z-index:40;
}
.overlay.show{display:flex}
.panel{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 24px;max-width:560px;width:100%;
  text-align:center;
}
.panel h2{margin:.1em 0 .2em;font-size:30px;color:var(--text)}
.panel p{color:var(--text-secondary);font-weight:700;margin:.3em 0 1em;font-size:16px;line-height:1.5}
.levelgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0 6px}
.lvlcard{
  text-align:left;cursor:pointer;border-radius:var(--radius-lg);padding:12px 14px;
  background:var(--card);border:1px solid var(--border);transition:border-color .1s;
}
.lvlcard:hover{border-color:var(--accent)}
.lvlcard .ln{font-weight:700;color:var(--text);font-size:17px}
.lvlcard .ld{color:var(--text-secondary);font-weight:700;font-size:13px;margin-top:2px}
.lvlcard .keys{font-weight:700;color:var(--accent);font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.bigbtn{
  font-family:var(--sans);font-weight:700;font-size:18px;color:#fff;border:none;cursor:pointer;
  background:var(--accent);
  padding:12px 24px;border-radius:var(--radius-lg);transition:background .1s;margin:6px 6px 0;
}
.bigbtn:hover{background:var(--accent-hover)}
.bigbtn.alt{background:var(--card);color:var(--text);border:1px solid var(--border-strong)}
.bigbtn.alt:hover{background:var(--surface-alt);color:var(--text)}
.trophy{font-size:74px;animation:bob 2s ease-in-out infinite;display:inline-block}
.winstars{font-weight:700;font-size:24px;color:var(--warning-text);margin:6px 0}

/* floating stars layer */
#fx{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.spark{position:absolute;font-size:22px;animation:fly .9s ease forwards}
@keyframes fly{0%{opacity:1;transform:translateY(0) scale(.6) rotate(0)}
  100%{opacity:0;transform:translateY(-90px) scale(1.2) rotate(40deg)}}

.footnote{color:var(--text-secondary);text-align:center;font-weight:700;font-size:13px;margin-top:14px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important}
  .mascot,.trophy{animation:none}
}
@media (max-width:560px){
  .topline{flex-direction:column;min-height:0}
  .mascot{width:84px;height:84px}
}