/* StreakToast — the passive "your streak went up" notification
   (see ui/StreakToast.js).

   Reads as a piece of the same material as the modals: parchment surface, the
   same 1px gold-ish border + radius + shadow vocabulary as .modal-container.
   Deliberately at a HIGHER z-index than the modal layer (modals.css uses 100)
   so on a milestone day it can sit above the streak-reward modal instead of
   being buried by it. pointer-events are off on the box so it can never
   intercept a tap meant for the game; only the × re-enables them. */

.streak-toast {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  z-index: 200;

  /* Track the game panel's width so it reads as part of the app rather than a
     browser-wide banner on desktop. */
  width: min(calc(var(--game-width, 480px) - 2rem), calc(100vw - 2rem));
  box-sizing: border-box;

  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Roomier than a plain toast: the padding has to clear the inset gold frame
     drawn by ::before (same reason .modal-container is generously padded), and
     the extra height lets it read as a piece of the game's furniture rather
     than a browser notification. */
  padding: 1.15rem 1.5rem;
  min-height: 4.25rem;

  /* Same surface + frame vocabulary as .modal-container. */
  background-color: var(--background-color-1);
  background-image: url('../assets/backgrounds/background02.webp');
  background-size: cover;
  background-position: center;
  border: 1px solid #c8b890;
  border-radius: 4px;
  box-shadow: 0 8px 28px rgba(70, 50, 30, 0.28);

  color: var(--font-color-1);
  font-family: var(--font-family-3);

  pointer-events: none;               /* never steal a tap from the game */
  transform: translateX(-50%);        /* resting (centred) position */
  /* Deliberately unhurried: a passive acknowledgement shouldn't snap into
     place. Long ease-out so it glides in and settles. */
  animation: streak-toast-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The inset ornate double frame — the SAME treatment as .modal-container::before
   (2px gold rule + an inner hairline via inset box-shadow), so the toast reads
   as the same furniture as the modals. */
.streak-toast::before {
  content: '';
  position: absolute;
  inset: var(--modal-frame-inset);
  pointer-events: none;
  z-index: 3;
  border: 2px solid var(--gold);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--background-color-1),
              inset 0 0 0 3px var(--gold-soft);
}

/* Slide in from off-screen LEFT. The -50% centring offset has to be baked into
   the keyframes, since transform is a single property. Opacity resolves early
   (by 35%) so it reads as a glide rather than a fade. */
@keyframes streak-toast-in {
  from { transform: translateX(calc(-50% - 110vw)); opacity: 0; }
  35%  { opacity: 1; }
  to   { transform: translateX(-50%);               opacity: 1; }
}

/* Fade out — on the 4s auto-dismiss OR the × . Keep the resting transform so it
   fades in place rather than sliding back out. Duration must match FADE_MS. */
.streak-toast.streak-toast-out {
  animation: streak-toast-fade 400ms ease forwards;
}
@keyframes streak-toast-fade {
  from { transform: translateX(-50%); opacity: 1; }
  to   { transform: translateX(-50%); opacity: 0; }
}

/* Leading gift icon on the Jubilee / Blessing moment toasts (showMomentToast).
   The outer wrap creates the stacking context at z-index 4 (whole unit, rays
   included, above the inset gold frame like the msg) and anchors the icon_Add
   corner badge. The inner host is the rays anchor (attachIconRays injects
   .icon-rays into it); the badge sits OUTSIDE the host because the
   .icon-rays-host > * override in styles.css would flatten an absolute child
   back into the flow. Rays stay behind the icon via the host rules. */
.streak-toast-icon-wrap {
  position: relative;
  z-index: 4;
  flex: none;
  display: inline-flex;
}
.streak-toast-icon-host {
  display: inline-flex;
}
.streak-toast-icon {
  height: 2.2rem;
  width: auto;
}
/* The "added" corner badge: same treatment as .relation-mark (a self-contained
   filled-disc PNG on the upper-right, no chip behind it), sized to the toast's
   2.2rem icon. Above the host's lifted content (z1) as a z2 sibling. */
.streak-toast-add-mark {
  position: absolute;
  top: -0.2rem;
  right: -0.3rem;
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  display: block;
  pointer-events: none;
  z-index: 2;
}

/* Content sits ABOVE the inset frame (z-index 3) so the gold rule can never
   paint over the text. */
.streak-toast-msg {
  position: relative;
  z-index: 4;
  margin: 0;
  flex: 1;
  font-size: 1rem;         /* comprehension text: at the readable floor */
  line-height: 1.35;
}

/* The only interactive part, so it re-enables pointer-events. */
.streak-toast-close {
  position: relative;
  z-index: 4;
  pointer-events: auto;
  flex: none;
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0 0.15rem;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--font-color-2);
}
.streak-toast-close:hover { color: var(--font-color-1); }

/* Respect a reduced-motion preference: no slide, just the fade. */
@media (prefers-reduced-motion: reduce) {
  .streak-toast { animation: streak-toast-fade-in 200ms ease both; }
  @keyframes streak-toast-fade-in {
    from { transform: translateX(-50%); opacity: 0; }
    to   { transform: translateX(-50%); opacity: 1; }
  }
}