/* Three ads slide left for two seconds each, then a three-second break. */
.event-ad {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1000;
  width: 300px;
  max-width: calc(100vw - 32px);
  height: 100px;
  box-sizing: border-box;
  border: 1px solid #d5dfd6;
  border-radius: 16px;
  background: #fffaf0;
  box-shadow: 0 8px 32px #183d3333;
  overflow: hidden;
}
.event-ad[hidden], .event-ad-slide[hidden] { display: none; }
.event-ad { animation: ad-emerge 400ms ease-out both; }
.event-ad-track { display: flex; width: 100%; height: 100%; transition: transform 350ms ease-in-out; }
.event-ad-slide { display: block; flex: 0 0 100%; width: 100%; min-width: 0; height: 100%; max-height: 100%; object-fit: contain; }
@keyframes ad-emerge {
  from { transform: translateY(calc(100% + 32px)); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .event-ad { animation: none; }
  .event-ad-track { transition: none; }
}
.event-ad-close {
  position: absolute; top: 0; right: 0; z-index: 1;
  width: 44px; height: 44px; border: 0; border-radius: 0 0 0 12px;
  background: #fffffff0; color: #214733; font-size: 28px; cursor: pointer;
}
.event-ad-close:hover { background: #f2e9d2; }
.event-ad-position {
  position: absolute; bottom: 8px; right: 12px;
  padding: 1px 8px; border-radius: 12px; background: #ffffffcc;
  color: #214733; font-size: 12px;
}
@media (max-width: 700px) {
  .event-ad {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }
}