/* notifications.css — Gen-3 message-box styled in-app banners for
   window.__junoNotify. Additive: only .juno-notify-* selectors, no existing
   rule is touched. The stack pins to the top-center of #console-screen and
   sits above every overlay (guides top out at z 62) so an announcement is
   never buried. Banners reuse the Emerald message-box bevel (.gen3-frame-msg)
   for visual continuity with the guide panels. */

.juno-notify-stack {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900; /* above guides (62) + judging (1000 is the judging theme only) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px clamp(8px, 3vw, 20px) 0;
  pointer-events: none; /* let taps fall through the empty stack to the game */
}

.juno-notify-banner {
  --u: 2px;
  pointer-events: auto;
  box-sizing: border-box;
  width: min(100%, 440px);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  color: #424242;
  font-family: 'PokeDialogue', 'PokeText', "Courier New", monospace;
  background: #F8F8F8;
  cursor: pointer;
  /* enter/exit motion */
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 220ms steps(6, end), transform 220ms steps(6, end);
}

.juno-notify-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.juno-notify-banner.is-leaving {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 240ms steps(6, end), transform 240ms steps(6, end);
}

.juno-notify-icon {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 18px;
  line-height: 1;
  color: #E00808;
  text-shadow: 1px 1px 0 #D0D0C8;
}

.juno-notify-text {
  flex: 1 1 auto;
  min-width: 0;
}

.juno-notify-title {
  display: block;
  font: 800 12px/1.2 'PokeText', ui-monospace, monospace;
  letter-spacing: .04em;
  color: #3050C8;
  text-shadow: 1px 1px 0 #D0D0C8;
  overflow-wrap: anywhere;
}

.juno-notify-body {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: #606060;
  text-shadow: 1px 1px 0 #E8E8E0;
  overflow-wrap: anywhere;
}

.juno-notify-close {
  flex: 0 0 auto;
  margin: -2px -2px 0 0;
  font: 900 18px/1 system-ui, sans-serif;
  color: #909090;
}

.juno-notify-banner:hover .juno-notify-close,
.juno-notify-banner:focus-within .juno-notify-close {
  color: #E82010;
}

@media (max-width: 760px) {
  .juno-notify-stack { --guide-topnav-safe: 0px; padding-top: 8px; }
  .juno-notify-banner { --u: 1.5px; }
  .juno-notify-body { font-size: 13px; }
}

/* Respect reduced-motion: skip the slide, keep the fade only. */
@media (prefers-reduced-motion: reduce) {
  .juno-notify-banner,
  .juno-notify-banner.is-leaving {
    transition: opacity 160ms linear;
    transform: none;
  }
  .juno-notify-banner.is-visible { transform: none; }
}