*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#070a12;overflow:hidden;overscroll-behavior:none}
body{
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  cursor:default;
}
#c{display:block;width:100vw;height:100vh;touch-action:none}

/* ---- key hints ---- */
#help{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:max(20px,env(safe-area-inset-bottom));
  display:flex;align-items:flex-end;gap:16px;
  z-index:5;pointer-events:none;
  opacity:1;transition:opacity .9s ease;
}
#help.dim{opacity:.26}
.pad{display:flex;flex-direction:column;align-items:center;gap:4px}
.pad .row{display:flex;gap:4px}

.cap{width:26px;height:26px;display:block;overflow:visible}
.cap.bar{width:78px;height:26px}
.cap .k{fill:rgba(190,215,255,.045);stroke:rgba(190,215,255,.34);stroke-width:1.4}
.cap .g{fill:none;stroke:rgba(205,228,255,.72);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cap{transition:transform .12s cubic-bezier(.2,1.6,.4,1),filter .25s ease}
.cap.hit{transform:translateY(2px) scale(.93)}
.cap.hot .k{fill:rgba(120,230,255,.16);stroke:rgba(140,240,255,.9)}
.cap.hot .g{stroke:rgba(190,248,255,1)}
.cap.hot{filter:drop-shadow(0 0 9px rgba(110,225,255,.75));animation:breathe 1.5s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-2px)}}

/* ---- sound toggle ---- */
.ic{
  position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
  width:30px;height:30px;padding:5px;
  background:none;border:0;border-radius:50%;
  color:#cfe8ff;opacity:.2;cursor:pointer;z-index:6;
  display:grid;place-items:center;
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,1.5,.4,1),filter .22s ease;
}
.ic svg{width:100%;height:100%;display:block;fill:none;overflow:visible}
.ic:hover,.ic:focus-visible{opacity:.9;transform:scale(1.16);outline:none}
.ic:active{transform:scale(.94)}
.ic.muted{opacity:.12}
.ic.muted .on{display:none}
.ic:not(.muted) .off{display:none}

@media (max-width:640px){
  .cap{width:30px;height:30px}
  .cap.bar{width:88px;height:30px}
  #help{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .cap.hot{animation:none}
}