:root {
  --bg: #a9a3d3;
  --ink: #1a1a1a;
  --ink-soft: rgba(26, 26, 26, 0.55);
  --panel: rgba(244, 241, 234, 0.42);
  --panel-line: rgba(26, 26, 26, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;   /* let us drive the cat with touch-drag */
  cursor: none;         /* the on-canvas lure replaces the pointer */
}

/* Heads-up panels float above the canvas, but never steal the pointer
   from the cat (except the actual controls). */
.hud {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.hud-top {
  top: clamp(0.8rem, 2.4vw, 1.6rem);
  left: clamp(0.9rem, 2.6vw, 1.8rem);
  max-width: min(70vw, 30rem);
}

.title {
  margin: 0;
  font-size: clamp(1.4rem, 4.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.hint {
  margin: 0.35rem 0 0;
  font-size: clamp(0.78rem, 1.8vw, 0.95rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 28rem;
  transition: opacity 0.6s ease;
}

.hud-stats {
  top: clamp(0.8rem, 2.4vw, 1.6rem);
  right: clamp(0.9rem, 2.6vw, 1.8rem);
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.score-label {
  font-size: clamp(0.62rem, 1.5vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.score {
  font-size: clamp(1.8rem, 6vw, 3rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat {
  font-size: clamp(0.82rem, 2vw, 1rem);
  font-weight: 600;
  color: var(--ink);
}

.stat-mood {
  margin-top: 0.15rem;
  font-weight: 500;
  font-style: italic;
  color: var(--ink-soft);
  min-height: 1.2em;
}

.stat-sub {
  font-size: clamp(0.72rem, 1.7vw, 0.86rem);
  font-weight: 500;
  color: var(--ink-soft);
}

.stat-best {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hud-controls {
  bottom: clamp(0.9rem, 2.6vw, 1.8rem);
  right: clamp(0.9rem, 2.6vw, 1.8rem);
  pointer-events: auto;
}

.btn {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.9rem;
  color: var(--ink);
  background: var(--panel);
  border: 1.5px solid var(--panel-line);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background 0.2s ease, transform 0.08s ease;
}

.btn:hover { background: rgba(244, 241, 234, 0.65); }
.btn:active { transform: translateY(1px); }
.btn[aria-pressed="true"] { background: rgba(244, 241, 234, 0.78); }

.hud-foot {
  bottom: clamp(0.9rem, 2.6vw, 1.8rem);
  left: clamp(0.9rem, 2.6vw, 1.8rem);
  pointer-events: auto;
}

.hud-foot a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}

.hud-foot a:hover { color: var(--ink); }

@media (max-width: 540px) {
  /* Keep instructions visible on phones (touch users need them most),
     but slim them down and give the score room in the top-right. */
  .hud-top { max-width: 60vw; }
  .hint { font-size: 0.72rem; max-width: 58vw; }
  .score { font-size: 2rem; }
  .stat-mood, .stat-sub { font-size: 0.72rem; }
}