/* Styles for the victory blood splatter overlay. When a player wins, an
   overlay with a blood-red radial gradient and two diagonal slash marks
   briefly appears on top of the game. The element is hidden by default
   and toggled via JavaScript by adding or removing the `.show` class. */

/* Top-level overlay for the win effect. It sits just below the modal so
   the victory message remains visible. */
#winBloodOverlay {
  /* Overlay sits on top of the page but is initially transparent
     Use a very high z-index equal to the modal overlay so it can be
     layered above it when appended to the end of the document. */
  position: fixed !important;
  /* Place the overlay below the modal (modal uses 2147483647) so the
     final result window remains visible. */
  z-index: 2147483646 !important;
  top: 0 !important;
  left: 0 !important;
  /* Use percentage dimensions instead of viewport units to avoid
     introducing horizontal/vertical scrollbars on some browsers. 100vw
     includes the scrollbar width, which can expand the page horizontally. */
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  overflow: hidden;
  /* Hide the overlay initially. Do not mark opacity as !important so
     the .show class can override it. Using !important here prevents
     the overlay from ever becoming visible. */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;

  /* No background on the container itself; the blood splash is rendered
     via the inner .blood-background and slash elements. */
  background: transparent;
}

/* When the overlay is active, fade it in via opacity */
#winBloodOverlay.show {
  /* Force the overlay to be fully opaque when active. Use !important
     to override any competing opacity declarations. */
  opacity: 1 !important;
}

/* Background radial splash of blood */
#winBloodOverlay .blood-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Blood-red radial gradient emanating from the center. It fades
     towards the edges for a dramatic splatter effect. */
  background: radial-gradient(circle at center,
    rgba(114, 0, 0, 0.7) 0%,
    rgba(114, 0, 0, 0.55) 35%,
    rgba(114, 0, 0, 0.3) 60%,
    rgba(114, 0, 0, 0) 90%) !important;
}

/*
 * Secondary blood effect container used directly inside the game canvas. Unlike
 * the page‑wide #winBloodOverlay, this container is absolutely positioned
 * relative to the #gameCanvas element. It covers the entire canvas during
 * victory and then fades away. The .show class toggles opacity.
 */
.win-blood-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Start hidden; avoid !important to allow overrides. */
  opacity: 0;
  z-index: 99999;
  transition: opacity 0.4s ease-in-out;
}
.win-blood-effect.show {
  /* Force full opacity when active */
  opacity: 1 !important;
}

/* Background for the canvas‑scoped blood effect (radial red gradient that
   radiates from the center and fades to transparent) */
.win-blood-effect .blood-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Blood-red radial gradient for the canvas-scoped effect. */
  background: radial-gradient(circle at center,
    rgba(114, 0, 0, 0.7) 0%,
    rgba(114, 0, 0, 0.55) 35%,
    rgba(114, 0, 0, 0.3) 60%,
    rgba(114, 0, 0, 0) 90%);
  pointer-events: none;
}