/* result.css – Feuerwerk-Hintergrund + Glows für Result-Seite */

/* ====== Vollflächiger, unscharfer Feuerwerk-Hintergrund ====== */
#fx-bg {
  position: fixed;
  inset: 0;
  z-index: -1;             
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(120,110,180,.10), transparent 60%),
    radial-gradient(1200px 800px at 80% 90%, rgba(80,120,180,.08), transparent 60%),
    linear-gradient(180deg, #0a0e18 0%, #080c14 60%, #070a12 100%);
}

#fx-bg canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .45;           
  filter: blur(2px) saturate(115%) brightness(110%);
  transform: translateZ(0);
}

/* Fallback, falls Canvas/JS blockiert ist */
.no-fx #fx-bg {
  background:
    radial-gradient(1000px 700px at 15% 15%, rgba(140,120,220,.10), transparent 55%),
    radial-gradient(1000px 700px at 85% 85%, rgba(90,140,220,.08), transparent 55%),
    linear-gradient(180deg, #0a0e18 0%, #080c14 60%, #070a12 100%);
}

/* ====== Logo-Glow (wie Index, dezent-lila) ====== */
.logo.glow {
  filter:
    drop-shadow(0 0 10px rgba(155,130,255,.50))
    drop-shadow(0 0 22px rgba(140,120,255,.35));
}

/* ====== Podium-Gewinner – leichte Glow-Ränder ====== */
.podium-thumb {
  border-radius: 12px;
  border: 2px solid var(--border);
  background: #0c0f18;
  box-shadow: var(--shadow);
}

/* Gold / Silber / Bronze mit sanftem Glow */
.first  .podium-thumb{
  border-color:#ffd54a;
  box-shadow:
    0 0 0 2px rgba(255,213,74,.28),
    0 0 18px rgba(255,213,74,.23),
    0 0 32px rgba(255,213,74,.12),
    var(--shadow);
}

.second .podium-thumb{
  border-color:#c0c0c0;
  box-shadow:
    0 0 0 2px rgba(192,192,192,.26),
    0 0 18px rgba(192,192,192,.20),
    0 0 30px rgba(192,192,192,.10),
    var(--shadow);
}

.third  .podium-thumb{
  border-color:#cd7f32;
  box-shadow:
    0 0 0 2px rgba(205,127,50,.26),
    0 0 18px rgba(205,127,50,.20),
    0 0 30px rgba(205,127,50,.10),
    var(--shadow);
}

/* Sternefarbe bleibt passend */
.first  .score .star{ color:#ffd54a; }
.second .score .star{ color:#c0c0c0; }
.third  .score .star{ color:#cd7f32; }

/* Mobile – nichts Spezielles nötig, Hintergrund ist fixed & dezent */
@media (prefers-reduced-motion: reduce) {
  #fx-bg canvas { display: none; }
  body { background-attachment: scroll; }
}