:root {
  --fg:#e6e6e6;
  --acc:#8ef9f3;
  --pink:#ff7ab6;
}
*{box-sizing:border-box}
body {
  margin:0;
  background:#000; /* JS 會動態改色 */
  color:var(--fg);
  font-family:"Press Start 2P",system-ui,ui-sans-serif;
  display:flex;
  min-height:100vh;
  align-items:center;
  justify-content:center;
}
.wrap {
  width:min(92vw,520px);
  text-align:center;
}
h1 {
  letter-spacing:2px;
  font-size:22px;
  margin:24px 0;
}
.hud {
  display:flex;
  gap:12px;
  justify-content:center;
  margin:6px 0 10px;
}
#score,#best {
  padding:8px 12px;
  border:2px solid var(--acc);
  border-radius:10px;
}
canvas {
  width:100%;
  height:auto;
  border-radius:18px;
  border:2px solid var(--acc);
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.controls {
  margin:12px 0 4px;
  display:flex;
  gap:12px;
  justify-content:center;
}
button {
  border:2px solid var(--pink);
  background:transparent;
  color:var(--fg);
  padding:10px 16px;
  border-radius:12px;
  font-family:inherit;
  cursor:pointer;
  transition:transform .08s;
}
button:active {transform:translateY(2px)}
.hide{display:none}
.hint {
  opacity:.7;
  font-size:11px;
  margin:6px 0 18px;
}
.modal {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-card {
  background:#171836;
  border:2px solid var(--acc);
  padding:18px 20px;
  border-radius:16px;
  max-width:90%;
  text-align:center;
}
.modal-title {font-size:16px;margin:0 0 10px}
.modal-score {font-size:14px;margin:6px 0 14px;color:var(--acc)}