/* gloop.live game juice overlays (js/juice.js). Sits over the canvas, under the HUD. */
.juice-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  contain: strict;
}
.juice-hurt,
.juice-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
}
.juice-hurt {
  background: radial-gradient(ellipse at 50% 50%, rgba(160, 0, 0, 0) 38%, rgba(170, 10, 10, .45) 72%, rgba(120, 0, 0, .85) 100%);
}
.juice-flash {
  background: #fff;
  mix-blend-mode: screen;
}
.juice-combo {
  position: absolute;
  left: 50%;
  top: 27%;
  transform: translateX(-50%);
  opacity: 0;
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
  font-size: clamp(.8rem, 2.4vw, 1.05rem);
  letter-spacing: .06em;
  color: #ffd1b8;
  text-shadow: 0 0 6px rgba(255, 80, 40, .55), 0 1px 0 #000, 0 0 2px #000;
  white-space: nowrap;
}
.juice-combo.is-hot { color: #ff7a5a; }

.juice-float {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  will-change: transform;
}
.juice-float > span {
  display: block;
  transform: translate(-50%, -50%);
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  white-space: nowrap;
  color: #f2efe6;
  text-shadow: 0 1px 0 #000, 0 0 3px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .5);
  animation: juice-pop 1.1s ease-out both;
}
.juice-float--dmg > span { color: #ff6b5a; font-size: 1.1rem; }
.juice-float--crit > span { color: #ff3b2f; font-size: 1.35rem; }
.juice-float--zap > span { color: #dfe8ff; font-size: 1.4rem; letter-spacing: .08em; text-shadow: 0 0 10px rgba(140, 170, 255, .95), 0 1px 0 #000, 0 0 3px #000; }
.juice-float--good > span { color: #9fe38a; }
.juice-float--gold > span { color: #ffd75a; font-size: 1.05rem; text-shadow: 0 0 8px rgba(255, 190, 60, .7), 0 1px 0 #000, 0 0 3px #000; }
.juice-float--wood > span { color: #e0b57c; }
.juice-float--fire > span { color: #ffb347; text-shadow: 0 0 8px rgba(255, 120, 30, .8), 0 1px 0 #000; }
.juice-float--wool > span { color: #fffaf0; font-size: 1.05rem; }
.juice-float--baa > span { color: #f4f1ea; font-size: .8rem; font-weight: 400; font-style: italic; }
.juice-float--big > span { color: #ffe9c2; font-size: 1.3rem; letter-spacing: .04em; }
.juice-float--info > span { color: #e8e4d8; font-size: .85rem; }
.juice-float--fruit > span { color: #ff9a7a; font-size: 1rem; text-shadow: 0 0 7px rgba(255, 80, 50, .55), 0 1px 0 #000, 0 0 3px #000; }
.juice-float--berry > span { color: #d6a8ff; font-size: 1rem; text-shadow: 0 0 7px rgba(150, 70, 230, .6), 0 1px 0 #000, 0 0 3px #000; }
.juice-float--yum > span { color: #ffb3c6; font-size: 1.05rem; font-style: italic; text-shadow: 0 0 8px rgba(255, 90, 140, .6), 0 1px 0 #000, 0 0 3px #000; }

@keyframes juice-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  24%  { transform: translate(-50%, -50%) scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
  .juice-float > span { animation-name: juice-fade; }
  .juice-flash { display: none; }
}
@keyframes juice-fade {
  0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; }
}
.a11y-rm-on .juice-float > span { animation-name: juice-fade; }
.a11y-rm-on .juice-flash { display: none; }