/* ============================================================================
   theme.css – Gemeinsame Design-Tokens & Basiskomponenten.
   Farben/Typo aus dem importierten Claude-Design ("Hot or Cold Scene", Fire & Ice).
   Wird von Admin- und Mobile-Übersicht-Seite genutzt; das OBS-Widget bringt
   zusätzlich widget.css mit.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Flächen */
  --bg: #05060a;
  --bg-2: #0a0c14;
  --panel: rgba(18, 20, 28, 0.86);
  --panel-2: rgba(26, 28, 38, 0.92);
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --ink: #eef0f7;
  --muted: #9aa0b4;
  --muted-2: #6b7186;

  /* Fire & Ice (Standardpalette aus dem importierten Design) */
  --hot-a: #ffb24d;
  --hot-b: #ff5a1f;
  --hot-c: #e0260f;
  --hot-glow: #ff6a2e;
  --hot-ink: #fff1e6;
  --cold-a: #7fe4ff;
  --cold-b: #2f8bff;
  --cold-c: #1746e0;
  --cold-glow: #39a8ff;
  --cold-ink: #e9f6ff;

  /* Weiche Glow-Varianten (mit Alpha) */
  --hot-soft: rgba(255, 90, 31, 0.35);
  --cold-soft: rgba(47, 139, 255, 0.35);

  /* Typografie */
  --font-display: 'Anton', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(90, 110, 200, 0.16), transparent 55%),
    radial-gradient(80% 60% at 100% 110%, rgba(255, 90, 31, 0.10), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---- Wiederverwendbare Komponenten (Admin & Mobile-Übersicht) ---- */
.hc-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.hc-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.hc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35em 0.8em;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
}
.hc-badge--live { color: #ff6a6a; border-color: rgba(255, 106, 106, 0.4); }
.hc-badge--live::before {
  content: '';
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 10px #ff4d4d;
  animation: hc-pulse 1.6s ease-in-out infinite;
}
.hc-badge--idle { color: var(--muted-2); }

.hc-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.7em 1.1em;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.hc-btn:hover { background: rgba(255, 255, 255, 0.12); }
.hc-btn:active { transform: translateY(1px) scale(0.99); }
.hc-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.hc-btn--hot { background: linear-gradient(135deg, var(--hot-b), var(--hot-c)); border-color: transparent; box-shadow: 0 8px 24px var(--hot-soft); }
.hc-btn--cold { background: linear-gradient(135deg, var(--cold-b), var(--cold-c)); border-color: transparent; box-shadow: 0 8px 24px var(--cold-soft); }
.hc-btn--ghost { background: transparent; }

.hc-input {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.7em 0.9em;
  width: 100%;
}
.hc-input:focus { outline: none; border-color: var(--cold-b); box-shadow: 0 0 0 3px rgba(47, 139, 255, 0.25); }

.hc-hot { color: var(--hot-ink); }
.hc-cold { color: var(--cold-ink); }
.hc-mono { font-family: var(--font-mono); }
.hc-display { font-family: var(--font-display); letter-spacing: 0.02em; }

/* ---- Keyframes (inkl. Partikel aus dem importierten Scene-Design) ---- */
@keyframes hc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@keyframes ember-rise {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  12%  { opacity: var(--peak, 0.9); }
  100% { transform: translateY(calc(-1 * var(--rise, 80px))) translateX(var(--drift, 6px)) scale(0.4); opacity: 0; }
}
@keyframes frost-fall {
  0%   { transform: translateY(calc(-1 * var(--rise, 60px))) translateX(0) rotate(0deg); opacity: 0; }
  14%  { opacity: var(--peak, 0.85); }
  100% { transform: translateY(var(--rise, 60px)) translateX(var(--drift, -8px)) rotate(180deg); opacity: 0; }
}
@keyframes seam-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes chip-up {
  0%   { transform: translateY(16px) scale(0.86); opacity: 0; }
  60%  { transform: translateY(0) scale(1.03); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes count-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}