:root {
  --fg: #ffffff;
  --muted: #7a7a7a;
  --warn: #e0a92e;
  --bug: #d1483b;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
}
body {
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
canvas { display: block; position: fixed; inset: 0; }

.headline {
  position: fixed;
  top: clamp(1.4rem, 5vh, 3.2rem);
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  font-size: clamp(1.5rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  pointer-events: none;
}
.stat {
  position: fixed;
  top: clamp(1.1rem, 4vh, 2rem);
  right: clamp(1.1rem, 4vw, 2rem);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: right;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.back {
  position: fixed;
  top: clamp(1.1rem, 4vh, 2rem);
  left: clamp(1.1rem, 4vw, 2rem);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: #4a4a4a;
  text-decoration: none;
  transition: color 0.4s ease;
  z-index: 2;
}
.back:hover { color: #fff; }
.hint {
  position: fixed;
  bottom: clamp(1.4rem, 6vh, 3rem);
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  font-size: clamp(0.85rem, 2.2vw, 1.05rem);
  letter-spacing: 0.02em;
  color: var(--muted);
  pointer-events: none;
  transition: color 0.4s ease;
}
.hint.warn { color: var(--warn); }
.hint.bad { color: var(--bug); }
.hint b { color: var(--fg); font-weight: 500; }