/*
 * Update Center presentation.
 *
 * The stack is the single fixed-position anchor for transient bottom notices.
 * Anything that used to place itself at `position:fixed; right:18px; bottom:18px`
 * must render into `#spriteToastStack` instead, so notices queue vertically
 * and can never cover each other's buttons.
 */

.sprite-toast-stack{
  position:fixed;
  z-index:1200;
  display:grid;
  gap:var(--space-2,8px);
  justify-items:stretch;
  left:max(12px,env(safe-area-inset-left));
  right:max(12px,env(safe-area-inset-right));
  /* Clear the mobile bottom nav (58px) plus the device safe area. */
  bottom:calc(72px + env(safe-area-inset-bottom,0px));
  pointer-events:none;
}
.sprite-toast-stack > *{pointer-events:auto}
@media(min-width:901px){
  .sprite-toast-stack{
    left:auto;
    right:24px;
    bottom:24px;
    width:min(460px,calc(100vw - 48px));
  }
}

.sprite-update-notice{
  display:grid;
  gap:var(--space-3,12px);
  padding:14px;
  border:1px solid color-mix(in srgb,var(--ct-accent,#36dcff) 38%,var(--ct-border,rgba(255,255,255,.12)));
  border-radius:var(--radius-dialog,14px);
  background:color-mix(in srgb,var(--st-surface,#0d1726) 94%,transparent);
  color:var(--ct-text,#f2f6fb);
  box-shadow:0 20px 55px rgba(0,0,0,.34);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  opacity:0;
  transform:translateY(10px);
  transition:opacity var(--duration-normal,160ms) var(--motion-ease,ease),
             transform var(--duration-normal,160ms) var(--motion-ease,ease);
}
.sprite-update-notice.show{opacity:1;transform:translateY(0)}

.sprite-update-notice-copy{display:grid;gap:2px;min-width:0}
.sprite-update-notice-copy .eyebrow{color:var(--ct-accent,#36dcff);font-size:var(--type-3xs,.625rem)}
.sprite-update-notice-copy strong{font-size:var(--type-base,.875rem)}
.sprite-update-notice-copy small{color:var(--ct-secondary,#9eb0c7);line-height:var(--line-snug,1.3)}

.sprite-update-notice-actions{display:grid;grid-template-columns:1fr auto;gap:var(--space-2,8px)}
.sprite-update-notice-actions .btn{min-height:44px}

html[data-theme="light"] .sprite-update-notice{
  background:rgba(255,255,255,.94);
  box-shadow:0 16px 42px rgba(39,48,68,.18);
}

@media(prefers-reduced-motion:reduce){
  .sprite-update-notice{transition:none;opacity:1;transform:none}
}