#acwp-ambient-root {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--acwp-ambient-z-index, 80);
  contain: layout size paint;
}

.acwp-ambient-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;
}

.acwp-july4-flag-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.acwp-july4-rain-flag {
  position: absolute;
  top: -110px;
  max-width: none;
  height: auto;
  opacity: 0.72;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  animation-name: acwpJuly4FlagFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.acwp-july4-flag-rain.is-paused .acwp-july4-rain-flag {
  animation-play-state: paused !important;
}

.acwp-ambient-corner {
  position: absolute;
  width: clamp(106px, 12vw, 172px);
  height: clamp(86px, 10vw, 136px);
  pointer-events: none;
  contain: layout paint;
  z-index: 3;
}

.acwp-ambient-corner-top-left {
  top: 8px;
  left: 8px;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: max(8px, env(safe-area-inset-left, 0px));
}

.acwp-ambient-corner-bottom-right {
  right: 12px;
  bottom: 96px;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(96px, calc(env(safe-area-inset-bottom, 0px) + 96px));
}

.acwp-ambient-flag {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
}

.acwp-ambient-flag {
  width: clamp(92px, 10vw, 146px);
  opacity: 0.9;
}

.acwp-ambient-corner-top-left .acwp-ambient-flag {
  left: 12%;
  top: 32%;
  transform: rotate(-7deg);
}

.acwp-ambient-corner-bottom-right .acwp-ambient-flag {
  right: 12%;
  bottom: 24%;
  transform: rotate(7deg);
}

.acwp-ambient-hat {
  position: absolute;
  width: clamp(28px, 3vw, 46px);
  height: clamp(36px, 4vw, 58px);
  background: repeating-linear-gradient(135deg, #b31942 0, #b31942 8px, #ffffff 8px, #ffffff 16px, #0a3161 16px, #0a3161 24px);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.acwp-ambient-hat::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 35%;
  width: 28%;
  aspect-ratio: 1;
  background: #ffd700;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.85);
}

.acwp-ambient-hat::after {
  content: "";
  position: absolute;
  left: -7%;
  bottom: -5px;
  width: 114%;
  height: 8px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.65);
}

.acwp-ambient-corner-top-left .acwp-ambient-hat {
  left: 0;
  top: 0;
  animation: acwpAmbientHatTop 2.8s ease-in-out infinite alternate;
}

.acwp-ambient-corner-bottom-right .acwp-ambient-hat {
  right: 0;
  bottom: 0;
  animation: acwpAmbientHatBottom 2.8s ease-in-out infinite alternate;
}

.acwp-ambient-deco {
  position: absolute;
  z-index: 2;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 0, 0, 0.45), 0 0 16px rgba(0, 72, 186, 0.45);
  animation: acwpAmbientDecoPulse 2.4s ease-in-out infinite alternate;
}

.acwp-ambient-deco-star {
  color: #ffffff;
  font-size: clamp(18px, 2.2vw, 30px);
}

.acwp-ambient-deco-spark {
  color: #ffd700;
  font-size: clamp(16px, 1.8vw, 24px);
  animation-delay: 0.45s;
}

.acwp-ambient-deco-pop {
  color: #ff2b45;
  font-size: clamp(17px, 1.9vw, 26px);
  animation-delay: 0.85s;
}

.acwp-ambient-corner-top-left .acwp-ambient-deco-star {
  left: 78%;
  top: 2%;
}

.acwp-ambient-corner-top-left .acwp-ambient-deco-spark {
  left: 60%;
  top: 11%;
}

.acwp-ambient-corner-top-left .acwp-ambient-deco-pop {
  left: 2%;
  top: 76%;
}

.acwp-ambient-corner-bottom-right .acwp-ambient-deco-star {
  right: 78%;
  bottom: 2%;
}

.acwp-ambient-corner-bottom-right .acwp-ambient-deco-spark {
  right: 60%;
  bottom: 11%;
}

.acwp-ambient-corner-bottom-right .acwp-ambient-deco-pop {
  right: 2%;
  bottom: 76%;
}

@keyframes acwpAmbientHatTop {
  from { transform: rotate(-18deg) translateY(0); }
  to { transform: rotate(-12deg) translateY(-6px); }
}

@keyframes acwpAmbientHatBottom {
  from { transform: rotate(18deg) translateY(0); }
  to { transform: rotate(12deg) translateY(6px); }
}

@keyframes acwpAmbientDecoPulse {
  from { transform: scale(1); opacity: 0.65; }
  to { transform: scale(1.18); opacity: 1; }
}

@keyframes acwpJuly4FlagFall {
  from { transform: translate3d(0, -130px, 0) rotate(0deg); }
  to { transform: translate3d(0, calc(100vh + 150px), 0) rotate(360deg); }
}

@media (max-width: 720px) {
  .acwp-july4-rain-flag {
    opacity: 0.62;
  }

  .acwp-ambient-corner-bottom-right {
    bottom: 108px;
    bottom: max(108px, calc(env(safe-area-inset-bottom, 0px) + 108px));
  }
}

@media (max-width: 420px) {
  .acwp-ambient-corner {
    width: 96px;
    height: 78px;
  }

  .acwp-ambient-flag {
    width: 80px;
  }
}