/* Mats Malheur – Design Tokens & Reset
   Palette aus dem echten Spielmaterial gesampelt (Ladebildschirm + T-Shirt-Artwork). */

@font-face {
  font-family: 'Pixelify Sans';
  src: url('../fonts/pixelify-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben */
  --c-bg: #0b0716;
  --c-bg-panel: #1f132b;
  --c-bg-panel-alt: #252e55;
  --c-accent: #fc8e11;
  --c-accent-hi: #ffeb00;
  --c-accent-2: #58dff2;
  --c-text: #f0dcc4;
  --c-text-dim: #c9b6a3;
  --c-alert: #e6392b;
  --c-line: rgba(240, 220, 196, 0.14);
  --c-shadow: rgba(0, 0, 0, 0.55);

  /* Typografie */
  --f-display: 'Pixelify Sans', 'Courier New', monospace;
  --f-body: ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Abstände */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 96px;

  --content-max: 1200px;
  --radius: 10px;
  --radius-sm: 6px;

  color-scheme: dark;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--c-accent-2);
}

a:hover, a:focus-visible {
  color: var(--c-accent-hi);
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  line-height: 1.25;
  margin: 0 0 var(--sp-3);
  letter-spacing: 0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.4rem); color: var(--c-accent); }
h3 { font-size: clamp(1.1rem, 2.4vw, 1.5rem); }

p { margin: 0 0 var(--sp-3); }

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -60px;
  background: var(--c-accent);
  color: #1a0f00;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top 0.2s ease;
  font-family: var(--f-display);
}

.skip-link:focus {
  top: var(--sp-3);
}

::selection {
  background: var(--c-accent);
  color: #1a0f00;
}

/* Fokus sichtbar halten, aber nur für Tastaturnutzung */
:focus-visible {
  outline: 3px solid var(--c-accent-2);
  outline-offset: 2px;
}