html {
  min-width: 320px;
  background: var(--page);
}

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .74), transparent 24rem),
    radial-gradient(circle at 82% 6%, rgba(214, 232, 225, .45), transparent 20rem),
    repeating-linear-gradient(82deg, transparent 0 8px, var(--paper-fiber) 8px 9px),
    linear-gradient(135deg, color-mix(in srgb, var(--page) 94%, white), var(--page));
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background:
      repeating-linear-gradient(82deg, transparent 0 8px, var(--paper-fiber) 8px 9px),
      var(--page);
  }
}

:root[data-theme="dark"] body {
  background:
    repeating-linear-gradient(82deg, transparent 0 8px, var(--paper-fiber) 8px 9px),
    var(--page);
}

body.game-active {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

/*
 * html braucht denselben Overflow-Lock wie body.game-active (Klasse wird in
 * js/game.js parallel zu body gesetzt): manche Browser, u.a. Safari mit
 * Rubber-Band-Overscroll ueber Trackpad/Mausrad, ignorieren overflow: hidden
 * auf body allein und lassen den darunterliegenden SEO-Infoblock (.app-info)
 * kurz sichtbar durchscheinen.
 */
html.game-active {
  overflow: hidden;
  overscroll-behavior: none;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: .65rem;
  background: var(--panel);
  color: var(--text);
  padding: .62rem .82rem;
  font-weight: 650;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

button:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  transform: translateY(1px) scale(.99);
}

button:disabled { cursor: not-allowed; opacity: .45; }

svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 24%, transparent);
}

.app {
  width: min(100% - 1rem, 760px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: .65rem 0 1rem;
}