/* ---------- base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #10131a;
  color: #e8ecf5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#wrap { text-align: center; padding: 16px; }

h1 {
  font-size: 1.6rem;
  letter-spacing: 2px;
  margin-bottom: 10px;
  text-shadow: 0 0 18px rgba(120, 170, 255, .35);
}

/* ---------- HUD ---------- */
#hud {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-bottom: 10px;
  font-size: .95rem;
  color: #aab3c5;
}
#hud b { color: #fff; font-variant-numeric: tabular-nums; }

/* ---------- stage & canvas ---------- */
#stage {
  position: relative;
  display: inline-block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 1px #2a3142;
}

canvas {
  display: block;
  background: #2b3242;
  max-width: 100%;
  height: auto;
}

/* ---------- overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 13, 20, .72);
  backdrop-filter: blur(3px);
}
.overlay.hidden { display: none; }

.panel {
  background: #1b2130;
  border: 1px solid #333c52;
  border-radius: 14px;
  padding: 26px 34px;
  text-align: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
}
.panel h2 { margin-bottom: 8px; font-size: 1.4rem; }
.panel p  { margin: 6px 0; color: #b9c2d4; }
.panel .keys { font-size: .85rem; }

kbd {
  background: #262e42;
  border: 1px solid #3d4763;
  border-bottom-width: 3px;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: .8rem;
}

.newbest { color: #ffd166; font-weight: 700; }
.newbest.hidden { display: none; }

button {
  font: inherit;
  font-weight: 700;
  color: #0d1118;
  background: linear-gradient(180deg, #ffd166, #f4a83c);
  border: none;
  border-radius: 10px;
  padding: 12px 30px;
  margin-top: 14px;
  cursor: pointer;
  letter-spacing: .5px;
  box-shadow: 0 5px 0 #b57a1f, 0 10px 22px rgba(0, 0, 0, .35);
  transition: transform .06s, box-shadow .06s;
}
button:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #b57a1f;
}

/* ---------- touch controls ---------- */
#touch {
  display: none;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
#touch button {
  width: 64px;
  height: 56px;
  margin: 0;
  padding: 0;
  font-size: 1.15rem;
  background: #262e42;
  color: #dfe6f3;
  box-shadow: 0 5px 0 #171d2b;
}
#touch button:active { transform: translateY(3px); box-shadow: 0 1px 0 #171d2b; }
#touch button.held { background: #33405c; }

@media (hover: none) and (pointer: coarse) {
  #touch { display: flex; }
}

.hint {
  margin-top: 12px;
  font-size: .8rem;
  color: #7d8699;
}