:root {
  --ink: #1f1a29;
  --paper: #fdf3dc;
  --red: #e5383b;
  --sun: #ffd23f;
  --edge-t: max(14px, env(safe-area-inset-top));
  --edge-r: max(16px, env(safe-area-inset-right));
  --edge-b: max(14px, env(safe-area-inset-bottom));
  --edge-l: max(16px, env(safe-area-inset-left));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #5c9eea;
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  font-weight: 800;
  color: var(--paper);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

#c {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* The same ink the figures are drawn with, round every letter. */
  text-shadow:
    2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink),
    1.5px 1.5px var(--ink), -1.5px 1.5px var(--ink), 1.5px -1.5px var(--ink), -1.5px -1.5px var(--ink),
    0 4px 0 rgb(31 26 41 / 0.35);
}

#left { position: absolute; top: var(--edge-t); left: var(--edge-l); }
#right { position: absolute; top: var(--edge-t); right: var(--edge-r); text-align: right; }

#hp {
  width: min(38vw, 300px);
  height: 22px;
  border: 3px solid var(--ink);
  border-radius: 7px 12px 8px 11px;
  background: rgb(31 26 41 / 0.55);
  overflow: hidden;
  box-shadow: 0 4px 0 rgb(31 26 41 / 0.3);
}

#hp-fill {
  display: block;
  height: 100%;
  background: linear-gradient(#fff3c4 0 38%, var(--sun) 38%);
  transform-origin: left center;
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
}

#hp-fill.low { background: linear-gradient(#ffb3a7 0 38%, var(--red) 38%); }

#wave { margin-top: 8px; font-size: 18px; letter-spacing: 0.01em; }

#score {
  font-size: clamp(30px, 5.2vw, 46px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

#combo {
  margin-top: 6px;
  font-size: 20px;
  color: var(--sun);
  opacity: 0;
  transform: translateY(-6px) scale(0.9);
  transform-origin: right top;
  transition: opacity 0.12s, transform 0.16s cubic-bezier(0.3, 1.6, 0.5, 1);
}

#combo.on { opacity: 1; transform: none; }
#combo.hot { color: #ff8a5c; font-size: 26px; }

#banner {
  position: absolute;
  left: 50%;
  top: 30%;
  width: min(92vw, 760px);
  transform: translate(-50%, -50%) scale(0.94);
  text-align: center;
  opacity: 0;
  transition: opacity 0.16s, transform 0.22s cubic-bezier(0.3, 1.5, 0.5, 1);
}

#banner.on { opacity: 1; transform: translate(-50%, -50%); }

#banner-title {
  display: block;
  font-size: clamp(36px, 8.4vw, 82px);
  font-weight: 900;
  line-height: 1.02;
  color: var(--sun);
}

#banner-sub, #banner-note { display: block; margin-top: 12px; font-size: clamp(15px, 2.5vw, 22px); }
#banner-note { font-size: clamp(13px, 1.9vw, 17px); color: #cfe9ff; }
#banner-note:empty { display: none; }

#keys {
  position: absolute;
  left: 50%;
  bottom: var(--edge-b);
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.92;
}

#version, #dev {
  position: absolute;
  left: var(--edge-l);
  bottom: var(--edge-b);
  font-size: 11px;
  font-weight: 700;
  opacity: 0.7;
  text-shadow: 1px 1px var(--ink);
  font-variant-numeric: tabular-nums;
}

#dev { bottom: calc(var(--edge-b) + 16px); white-space: pre; }

/* Touch: a stick under the left thumb, four buttons under the right. */
#touch { display: none; position: fixed; inset: 0; pointer-events: none; }
body.touch #touch { display: block; }
body.touch #keys { display: none; }
body.touch #version { left: 50%; transform: translateX(-50%); }

#stick {
  position: absolute;
  left: calc(var(--edge-l) + 10px);
  bottom: calc(var(--edge-b) + 12px);
  width: 148px;
  height: 148px;
  border-radius: 50%;
  border: 3px solid rgb(31 26 41 / 0.55);
  background: rgb(253 243 220 / 0.16);
  pointer-events: auto;
}

#knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--paper);
  opacity: 0.85;
  will-change: transform;
}

#buttons {
  position: absolute;
  right: calc(var(--edge-r) + 6px);
  bottom: calc(var(--edge-b) + 8px);
  width: 236px;
  height: 196px;
}

#buttons button {
  position: absolute;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  opacity: 0.86;
  pointer-events: auto;
  touch-action: none;
  box-shadow: 0 5px 0 rgb(31 26 41 / 0.45);
  transition: transform 0.06s, box-shadow 0.06s;
}

#buttons button.down { transform: translateY(4px) scale(0.96); box-shadow: 0 1px 0 rgb(31 26 41 / 0.45); opacity: 1; }

#buttons #b-a { left: 40px; bottom: 0; background: var(--sun); }
#buttons #b-b { right: 0; bottom: 34px; background: #ff9f6b; }
#buttons #b-jump { right: 44px; top: 0; width: 76px; height: 76px; }
#buttons #b-roll { left: 0; top: 14px; width: 64px; height: 64px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  #banner, #combo, #hp-fill { transition: none; }
}