/* Every colour and font comes from theme.css (theme.json). */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background:
    radial-gradient(60vmax circle at 15% 10%, var(--color-glow), transparent 60%),
    radial-gradient(50vmax circle at 90% 90%, var(--color-glow-2), transparent 60%),
    var(--color-background);
  overflow: hidden;
}
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.skip-link { position: absolute; left: 1rem; top: -4rem; padding: 0.6rem 1rem; background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-md); z-index: 10; }
.skip-link:focus { top: 1rem; }

/* The heading sits above the emojis but lets the pointer through to them. */
main { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 2rem 1.25rem; text-align: center; pointer-events: none; }
.copy { max-width: 18ch; }
h1 { font-family: var(--font-heading); font-size: clamp(2.2rem, 7.5vw, 5.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 0.5em; text-shadow: 0 2px 30px var(--color-background); }
.hint { margin: 0; font-size: clamp(1rem, 2vw, 1.2rem); color: var(--color-muted); }

.playground { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.emoji { position: absolute; left: 0; top: 0; display: grid; place-items: center; line-height: 1; user-select: none; -webkit-user-select: none; cursor: grab; pointer-events: auto; touch-action: none; will-change: transform; filter: drop-shadow(0 10px 14px var(--color-background)); }
.emoji.held { cursor: grabbing; }