:root {
  --frame-bg: #120c22;
  --frame-fg: #f4f3ff;
  --frame-accent: #f87888;
  --panel: #1e1630;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: radial-gradient(circle at 20% 15%, #3b2a5f 0%, #120c22 55%, #0c0818 100%);
  color: var(--frame-fg);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

body {
  display: grid;
  place-items: center;
}

.app-shell {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem 1.25rem;
}

h1 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw + 0.75rem, 2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

canvas {
  width: min(92vw, 540px);
  height: auto;
  border-radius: 14px;
  border: 2px solid #6f58a3;
  box-shadow: 0 14px 40px rgb(0 0 0 / 45%);
  background: #000;
  touch-action: none;
}

.hint {
  margin: 0;
  color: #d4caee;
  font-size: 0.95rem;
  text-align: center;
}