/* =====================================================================
   Dein DJ Coach – gemeinsame Basis für die Lernspiele in /interaktiv
   ---------------------------------------------------------------------
   Regeln: nur Schwarz + Gelb (Grün/Rot ausschließlich als Feedback),
   keine Verläufe, keine runden Ecken, keine Emojis.

   Alles ist mit "ddc-" präfixiert, damit die Spiele ihre eigenen
   :root-Variablen (z.B. --grey in downbeat-match.html) behalten können.
   Pfade sind relativ zur Lage dieser Datei (public/interaktiv/lib/),
   damit die Spiele auch per file:// funktionieren.
   ===================================================================== */

@font-face {
  font-family: 'Klein';
  src: url('../../fonts/Klein-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Klein';
  src: url('../../fonts/Klein-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'KleinText';
  src: url('../../fonts/KleinText-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'KleinText';
  src: url('../../fonts/KleinText-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
/* Pixelschrift der drei Retro-Spiele – selbst gehostet (OFL), kein Google-CDN */
@font-face {
  font-family: 'Press Start 2P';
  src: url('../../fonts/PressStart2P-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ddc-yellow: #FFD600;
  --ddc-black: #0A0A0A;
  --ddc-white: #FFFFFF;
  --ddc-grey: #E5E5E5;
  --ddc-grey-dark: #141414;
  --ddc-grey-line: #2a2a2a;
  --ddc-text-muted: #999999;
  /* Feedback-Farben: nur für richtig/falsch, nie als Deko */
  --ddc-ok: #00d97e;
  --ddc-bad: #ff3a5c;
  --ddc-font-display: 'Klein', 'Arial Black', Impact, sans-serif;
  --ddc-font-text: 'KleinText', 'Helvetica Neue', Arial, sans-serif;
  --ddc-font-pixel: 'Press Start 2P', monospace;
}

/* --- Buttons ------------------------------------------------------- */
.ddc-btn {
  display: inline-block;
  background: var(--ddc-yellow);
  color: var(--ddc-black);
  border: 2px solid var(--ddc-yellow);
  border-radius: 0;
  font-family: var(--ddc-font-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  min-height: 44px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.08s;
}
.ddc-btn:active { transform: translateY(2px); }
.ddc-btn:disabled { opacity: 0.35; cursor: default; transform: none; }
.ddc-btn--secondary {
  background: var(--ddc-black);
  color: var(--ddc-yellow);
}
.ddc-btn--ghost {
  background: transparent;
  color: var(--ddc-white);
  border-color: var(--ddc-grey-line);
}

/* --- Kleinkram --------------------------------------------------------- */
.ddc-eyebrow {
  font-family: var(--ddc-font-text);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ddc-text-muted);
}
.ddc-course-link {
  display: inline-block;
  font-family: var(--ddc-font-text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ddc-text-muted);
  text-decoration: none;
}
.ddc-course-link:hover { color: var(--ddc-yellow); }

/* --- Toast (Hinweis oben, z.B. "Sound blockiert") --------------------- */
.ddc-toast {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  max-width: calc(100% - 24px);
  background: var(--ddc-black);
  border: 2px solid var(--ddc-yellow);
  color: var(--ddc-yellow);
  font-family: var(--ddc-font-text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 14px;
  pointer-events: none;
}
.ddc-toast--bad { border-color: var(--ddc-bad); color: var(--ddc-bad); }
.ddc-toast[hidden] { display: none; }

/* --- Bestwert-Zeile auf Start- und End-Screens ------------------------ */
.ddc-best {
  font-family: var(--ddc-font-text);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ddc-text-muted);
}
.ddc-best b { color: var(--ddc-yellow); }
.ddc-stars { color: var(--ddc-yellow); letter-spacing: 0.1em; }
.ddc-stars .off { color: var(--ddc-grey-line); }