/* ============================================================================
   widget.css – OBS Browser-Source Widget ("Hot or Cold").
   Horizontaler "Tug-of-War"-Balken, PUNKTE-basiert. Treue Portierung des
   importierten React-Designs (HBarWidget) als reines Vanilla-CSS.

   Layout: FESTE 1920×1080-Bühne (.hc-canvas), die per JS auf die tatsächliche
   OBS-Quellengröße skaliert wird (transform: scale, Seitenverhältnis bleibt
   erhalten). So sind alle px-Maße exakt fürs Full-HD-Overlay. Der Balken sitzt
   standardmäßig als Lower-Third unten; ?pos=center|top verschiebt ihn.

   Farben kommen pro Theme als CSS-Variablen vom JS (--hot-a … --cold-ink).
   Keyframes (ember-rise, frost-fall, seam-pulse, count-pop, chip-up) stammen
   aus theme.css und werden hier nur referenziert.
   ========================================================================== */

/* Transparenter Hintergrund: OBS soll nur das Widget sehen. */
html, body { background: transparent; }
body { overflow: hidden; }

/* ---- Wurzel: zentriert die skalierte 1920×1080-Bühne ------------------- */
.hc-widget {
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Theme-Fallback, falls JS noch nicht gesetzt hat (= fireice). */
  --hot-a: var(--hot-a, #ffb24d);
  --cold-a: var(--cold-a, #7fe4ff);
}

/* Feste Design-Fläche 1920×1080; JS setzt transform: scale(...). */
.hc-canvas {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex: none;
  transform-origin: center center;
}

/* ---- Lower-Third-Band (Default) ---------------------------------------- */
.hc-stage {
  position: absolute;
  left: 140px;
  right: 140px;
  bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.hc-canvas.pos-center .hc-stage { bottom: auto; top: 50%; transform: translateY(-50%); }
.hc-canvas.pos-top .hc-stage { bottom: auto; top: 96px; }

/* ========================================================================== */
/*  Top-Reihe:  🔥 HOT   ·   [Punkte-Headline]   ·   COLD ❄                    */
/* ========================================================================== */
.hc-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  line-height: 1;
}
.hc-side-label {
  font-family: var(--font-display);
  font-size: 64px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
}
.hc-side-label--hot {
  color: var(--hot-ink);
  text-shadow: 0 0 28px var(--hot-glow), 0 2px 8px rgba(0, 0, 0, 0.55);
  justify-self: end;
}
.hc-side-label--cold {
  color: var(--cold-ink);
  text-shadow: 0 0 28px var(--cold-glow), 0 2px 8px rgba(0, 0, 0, 0.55);
  justify-self: start;
}
.hc-side-emoji { font-size: 0.86em; }

/* Punkte-Headline (der visuelle Held: berechneter, gerankter Wert). */
.hc-headline {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.hc-points {
  font-family: var(--font-display);
  font-size: 132px;
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--muted);                 /* Standard (0 Punkte) = gedämpft */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  transition: color 0.5s ease, text-shadow 0.5s ease;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.hc-points.is-hot {
  color: var(--hot-ink);
  text-shadow: 0 0 30px var(--hot-glow), 0 2px 10px rgba(0, 0, 0, 0.6);
}
.hc-points.is-cold {
  color: var(--cold-ink);
  text-shadow: 0 0 30px var(--cold-glow), 0 2px 10px rgba(0, 0, 0, 0.6);
}
.hc-points-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding-left: 0.34em;
}

/* ========================================================================== */
/*  Der Balken ("Tug-of-War")                                                 */
/* ========================================================================== */
.hc-bar {
  position: relative;
  height: 156px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 2px 18px rgba(0, 0, 0, 0.55),
    0 18px 50px rgba(0, 0, 0, 0.5);
  display: flex;
  isolation: isolate;
}
.hc-fill { position: relative; height: 100%; overflow: hidden; }
.hc-fill--cold {
  width: var(--cold-w, 50%);
  background: linear-gradient(90deg, var(--cold-c), var(--cold-b) 60%, var(--cold-a));
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.hc-fill--hot {
  flex: 1;
  background: linear-gradient(90deg, var(--hot-a), var(--hot-b) 40%, var(--hot-c));
}
.hc-seam {
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: var(--cold-w, 50%);
  width: 7px;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 0 18px 3px #fff, 0 0 34px 7px var(--hot-glow);
  z-index: 3;
  animation: seam-pulse 1.6s ease-in-out infinite;
  transition: left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.hc-bar-numbers {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 64px;
  z-index: 2;
  pointer-events: none;
}
.hc-count {
  font-family: var(--font-display);
  font-size: 104px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  font-variant-numeric: tabular-nums;
  transform-origin: center;
  will-change: transform;
}
.hc-count--hot { color: var(--hot-ink); }
.hc-count--cold { color: var(--cold-ink); }
.hc-count.is-pop { animation: count-pop 0.42s ease; }

/* ---- Partikel (Ember steigt auf, Frost fällt) --------------------------- */
.hc-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}
.hc-particle--ember {
  bottom: 0;
  background: var(--hot-a);
  box-shadow: 0 0 var(--glow-blur, 10px) var(--hot-glow);
  animation-name: ember-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.hc-particle--frost {
  top: 0;
  border-radius: 1px;
  background: var(--cold-a);
  box-shadow: 0 0 var(--glow-blur, 10px) var(--cold-glow);
  animation-name: frost-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* ========================================================================== */
/*  Letzter-Voter-Chip (Ticker) – über dem Band                               */
/* ========================================================================== */
.hc-ticker {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 26px);
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}
.hc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 0.04em;
  padding: 0.45em 1em;
  border-radius: 999px;
  background: rgba(8, 9, 14, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  color: var(--ink);
  animation: chip-up 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hc-chip-dot {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 10px currentColor;
}
.hc-chip-side { font-weight: 700; }
.hc-chip--hot .hc-chip-side { color: var(--hot-ink); }
.hc-chip--cold .hc-chip-side { color: var(--cold-ink); }

/* ========================================================================== */
/*  Ergebnis-Banner (round_stopped, ~6s) – als Lower-Third-Panel              */
/* ========================================================================== */
.hc-result {
  position: absolute;
  left: 140px;
  right: 140px;
  bottom: 96px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  z-index: 10;
  padding: 48px;
  border-radius: 48px;
  background: radial-gradient(120% 140% at 50% 50%, rgba(10, 12, 18, 0.86), rgba(5, 6, 10, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  animation: chip-up 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hc-canvas.pos-center .hc-result { bottom: auto; top: 50%; transform: translateY(-50%); }
.hc-canvas.pos-top .hc-result { bottom: auto; top: 96px; }
.hc-result-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 78px;
  letter-spacing: 0.01em;
  color: var(--ink);
  max-width: 1500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
.hc-result-points { display: inline-flex; align-items: baseline; gap: 14px; }
.hc-result-points-value {
  font-family: var(--font-display);
  font-size: 220px;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}
.hc-result-points-value.is-hot { color: var(--hot-ink); text-shadow: 0 0 40px var(--hot-glow); }
.hc-result-points-value.is-cold { color: var(--cold-ink); text-shadow: 0 0 40px var(--cold-glow); }
.hc-result-points-value.is-zero { color: var(--ink); }
.hc-result-points-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 44px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.hc-result-rank {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 48px;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.hc-result-rank strong { color: var(--ink); font-weight: 700; }

/* ========================================================================== */
/*  IDLE-Zustand (Text liegt über dem gedämpften Balken)                      */
/* ========================================================================== */
.hc-idle-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 52px;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 4;
}
.hc-widget.is-idle .hc-fill--hot,
.hc-widget.is-idle .hc-fill--cold { filter: saturate(0.35) brightness(0.7); }
.hc-widget.is-idle .hc-seam { box-shadow: 0 0 12px 1px rgba(255, 255, 255, 0.6); }
.hc-widget.is-idle .hc-bar-numbers,
.hc-widget.is-idle .hc-side-label,
.hc-widget.is-idle .hc-headline { opacity: 0.3; }

/* Reduced Motion: theme.css neutralisiert Animationen global; Transitions hier
   zusätzlich abschalten, damit nichts "springt". */
@media (prefers-reduced-motion: reduce) {
  .hc-fill--hot, .hc-seam { transition: none !important; }
}