/* base.css — Design-Tokens (Stage Starter CI) + Reset. Geteilt von Spiel und Legal-Seiten. */

:root {
  --bg: #0a0a0f;
  --ink: #07070c;
  --gold: #f9c500;
  --gold-bright: #ffd83d;
  --gold-deep: #d9ab00;
  --line-gold: rgba(211, 181, 69, .28);

  --surface: #101018;
  --surface-2: #15151f;
  --border: rgba(255, 255, 255, .08);
  --text: #f4f4f6;
  --text-muted: #a8a8b3;
  --text-faint: #77778a;

  --danger: #e5484d;
  --danger-deep: #b02a2e;
  --ok: #46b17b;

  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --serif: "Fraunces", Georgia, serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

.sp-accent { color: var(--gold); }

/* Basis-Button (Gold) — Spiel und Legal duerfen darauf aufbauen. */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  color: var(--ink);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-weight: 700;
  cursor: pointer;
  padding: 14px 26px;
  font-size: 1rem;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
}
.sp-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 28px -8px rgba(249,197,0,.45); }
.sp-btn:active:not(:disabled) { transform: translateY(0); }
.sp-btn:disabled { opacity: .5; cursor: not-allowed; }

.sp-btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.sp-btn-ghost:hover:not(:disabled) { border-color: var(--line-gold); color: var(--text); box-shadow: none; }

/* ---- Globale Politur: Film-Grain + Vignette (auf allen Screens, rein dekorativ) ----
   Grain ist eine einmalig per feTurbulence generierte, gekachelte SVG-Textur (Data-URI),
   kein live gerenderter Filter: dadurch keine laufenden Repaint-Kosten, auch auf
   schwacher Mobil-Hardware nicht spuerbar. Vignette ist ein statischer inset-Schatten. */
.page-vignette,
.page-grain {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}
.page-vignette {
  z-index: 499;
  box-shadow: inset 0 0 16vw 3vw rgba(0, 0, 0, .5), inset 0 0 3.5vw 0 rgba(0, 0, 0, .3);
}
.page-grain {
  opacity: .035;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz4KPGZpbHRlciBpZD0nbic+CjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScwLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJyBzZWVkPSc3Jy8+CjxmZUNvbG9yTWF0cml4IHR5cGU9J21hdHJpeCcgdmFsdWVzPScwIDAgMCAwIDEgIDAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAwLjYgMCcvPgo8L2ZpbHRlcj4KPHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+Cjwvc3ZnPgo=");
}
@media (prefers-reduced-motion: reduce) {
  .page-grain { opacity: .03; }
}