:root {
  /* Farbpalette: warm, kindgerecht, kontrastreich */
  --c-sky-top: #1a2c5c;
  --c-sky-bottom: #6fb3ff;
  --c-ground: #6cc26c;
  --c-cloud: #f5f9ff;
  --c-rocket-body: #ff6b6b;
  --c-rocket-window: #ffe566;
  --c-rocket-fin: #4a4a6e;
  --c-flame-inner: #fff4b3;
  --c-flame-outer: #ff8a3d;
  --c-star: #ffe34a;
  --c-correct: #5fd07a;
  --c-text: #1f1f3a;
  --c-text-on-dark: #ffffff;

  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.18);
  --radius-card: 24px;
  --radius-pill: 999px;
  --tap-min: 96px;

  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

* { box-sizing: border-box; }

html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: linear-gradient(to bottom, var(--c-sky-top) 0%, var(--c-sky-bottom) 100%);
  color: var(--c-text);
  overflow: hidden;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  background: none;
  padding: 0;
  color: inherit;
}

button:focus-visible {
  outline: 4px solid var(--c-rocket-window);
  outline-offset: 4px;
}