/* Hopping Clown — cute, chunky, circus-night palette */
:root {
  --ink: #2b1b3d;
  --paper: #fdf6ec;
  --accent: #ff5d8f;
  --accent-2: #ffd23f;
  --sky-1: #1b1035;
  --sky-2: #3d2a63;
  --focus: #ffd23f;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Trebuchet MS", "Comic Sans MS", system-ui, sans-serif;
  background: radial-gradient(circle at 50% 20%, var(--sky-2), var(--sky-1) 70%);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: max(0.5rem, env(safe-area-inset-top)) 0.5rem max(0.5rem, env(safe-area-inset-bottom));
  min-height: 100dvh;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.stage-wrap { position: relative; width: min(96vw, 820px); }
canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: var(--sky-1);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  cursor: pointer;
  outline-offset: 3px;
}
canvas:focus-visible { outline: 3px solid var(--focus); }

.hud {
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
  pointer-events: none;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.hud .best { font-size: 0.7em; opacity: 0.8; color: var(--accent-2); }

/* Title/game-over panel: hidden attribute must always win over display:grid */
.overlay[hidden] { display: none !important; }
.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(27, 16, 53, 0.72);
  border-radius: 14px;
  backdrop-filter: blur(2px);
}
.panel { text-align: center; padding: 1rem; }
.title {
  margin: 0;
  font-size: clamp(1.8rem, 8vw, 3rem);
  line-height: 0.95;
  font-weight: 900;
  color: var(--accent-2);
  text-shadow: 3px 3px 0 var(--accent), 6px 6px 0 rgba(0,0,0,.4);
  letter-spacing: 0.05em;
}
.clown-face { margin: 0.4rem 0; font-size: clamp(2rem, 9vw, 3rem); }
.how { margin: 0.5rem 0 1rem; font-size: clamp(0.85rem, 3.5vw, 1rem); line-height: 1.5; }
button {
  font: inherit;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  padding: 0.7rem 2.4rem;
  border: none;
  border-radius: 999px;
  color: var(--ink);
  background: var(--accent-2);
  box-shadow: 0 5px 0 #c79a1a;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
button:active { transform: translateY(4px); box-shadow: 0 1px 0 #c79a1a; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.score-note { margin: 0.8rem 0 0; color: var(--accent-2); font-weight: 700; }

footer.credit { font-size: 0.75rem; opacity: 0.6; margin: 0; }

.mute {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.95rem;
  border-radius: 10px;
  background: rgba(253, 246, 236, 0.15);
  color: var(--paper);
  box-shadow: none;
}
.mute:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}