/* CSS */
.dog-wrapper,
.pink-wrapper {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}
.dog {
  width: 5rem;
  display: block;
  transform: scaleY(-1);
}
.dog-icon {
  font-size: 1rem;
  width: 5rem;
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  color: white;
  pointer-events: none;
}
.laser-container {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(0%) translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 1px;
}
.ray {
  height: 3px;
  width: calc(100vw - 2.5rem);
}
.ray-white {
  background: white;
  box-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white;
}
.ray-blue {
  background: blue;
  box-shadow: 0 0 5px blue, 0 0 10px blue, 0 0 15px blue;
}
.ray-red {
  background: red;
  box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red;
}
.ray-pink {
  background: #ff69b4;
  box-shadow: 0 0 5px #ff69b4, 0 0 10px #ff69b4, 0 0 15px #ff69b4;
}
.laser-kek {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(0%) translateY(-50%);
  display: none;
  height: 30px;
  width: calc(100vw - 2.5rem);
  background: transparent;
}
.heart-bullet {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
}
.heart-bullet svg {
  display: block;
  filter: drop-shadow(0 0 5px red);
}
.heart-bullet img {
  display: block;
  filter: drop-shadow(0 0 5px red);
}
canvas.confetti-canvas {
  z-index: 10000 !important;
  pointer-events: none;
}
.square-wrapper {
  position: fixed;
  right: -5rem;
  top: 0;
  width: 5rem;
  height: 5rem;
  animation-name: move-left;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  pointer-events: none;
  z-index: 10000;
}
@keyframes move-left {
  from {
    right: -5rem;
  }
  to {
    right: 100vw;
  }
}
.square-inner,
.pink-inner {
  position: relative;
  font-size: 5rem;
  width: 5rem;
  height: 5rem;
  line-height: 5rem;
  text-align: center;
  user-select: none;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease;
}
.pink {
  width: 5rem;
  display: block;
  transform: scaleY(-1) scaleX(-1);
}
.pink-icon {
  font-size: 1rem;
  width: 5rem;
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  color: #ff69b4;
  pointer-events: none;
}
.pink-laser-container {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-100%) translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 1px;
}
.hit-tada {
  animation: shake 0.5s;
}
.fall {
  animation: fall-down 0.5s forwards;
}
@keyframes shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-2px, 0) rotate(-5deg); }
  50% { transform: translate(2px, 0) rotate(5deg); }
  75% { transform: translate(-2px, 0) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes fall-down {
  to {
    transform: translateY(100vh);
    opacity: 0;
  }
}
#collision-counter {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20rem;
  color: white;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  user-select: none;
  z-index: 1000000;
}
#collision-counter.show {
  opacity: 1;
}
.kek-point {
  animation: rainbow-glow 5s linear infinite;
}
@keyframes rainbow-glow {
  0% { background-color: red; box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red; }
  14% { background-color: orange; box-shadow: 0 0 5px orange, 0 0 10px orange, 0 0 15px orange; }
  28% { background-color: yellow; box-shadow: 0 0 5px yellow, 0 0 10px yellow, 0 0 15px yellow; }
  42% { background-color: green; box-shadow: 0 0 5px green, 0 0 10px green, 0 0 15px green; }
  56% { background-color: blue; box-shadow: 0 0 5px blue, 0 0 10px blue, 0 0 15px blue; }
  70% { background-color: indigo; box-shadow: 0 0 5px indigo, 0 0 10px indigo, 0 0 15px indigo; }
  84% { background-color: violet; box-shadow: 0 0 5px violet, 0 0 10px violet, 0 0 15px violet; }
  100% { background-color: red; box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red; }
}
svg.shield {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 117.6px;
  height: 100.8px;
  pointer-events: none;
}
svg.shield.white {
  filter: drop-shadow(0 0 5px white);
  animation: rotateCW 1s linear infinite;
}
svg.shield.blue {
  filter: drop-shadow(0 0 5px blue);
  animation: rotateCCW 1s linear infinite;
}
svg.shield.red {
  filter: drop-shadow(0 0 5px red);
  animation: rotateCW 0.5s linear infinite;
}
@keyframes rotateCW {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotateCCW {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-360deg); }
}
.floating-brand {
  position: fixed;
  width: 120px;
  height: 120px;
  z-index: 10000;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}
.floating-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.floating-brand.fade {
  opacity: 0;
}
.energy-bar {
  position: absolute;
  top: -7px; /* 5px height + 2px offset */
  left: 0;
  width: 120px;
  height: 5px;
  background-color: #00ff00; /* Green */
  z-index: 10001;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.energy-bar.orange {
  background-color: #ff9900; /* Orange for <50% */
}
.energy-bar.red {
  background-color: #ff0000; /* Red for <25% */
  animation: blink 1s ease-in-out infinite;
}
.energy-bar-fighter {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
  background-color: #00ff00;
  z-index: 10001;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.energy-bar-fighter.orange {
  background-color: #ff9900;
}
.energy-bar-fighter.red {
  background-color: #ff0000;
}
.energy-bar-fighter.blink {
  animation: blink 1s ease-in-out infinite;
}
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
.floating-brand.hit-tada {
  animation: shake 0.5s;
}
@keyframes shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-2px, 0) rotate(-5deg); }
  50% { transform: translate(2px, 0) rotate(5deg); }
  75% { transform: translate(-2px, 0) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.logo-clone {
  position: fixed;
  z-index: 10002;
  animation: shake 0.5s infinite;
  opacity: 0.5;
}
.logo-clone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fighter-clone {
  position: fixed;
  z-index: 10002;
  animation: shake 0.5s infinite;
  opacity: 0.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff !important;
}
.countdown {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: min(50vw, 50vh); /* 50% of screen dimensions */
  color: white;
  z-index: 1000000; /* Above logos and confetti */
  pointer-events: none;
  font-family: Arial, sans-serif;
  text-align: center;
}
.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1; /* Above all other elements */
}