/* Reward feedback (R11, redesign §5.1): toasts and ceremonies. Drawn by js/ui/rewards.js. */

/* ---- Toasts: top-right stack, max 3, never catch input ---- */
.reward-toasts {
  position: fixed;
  top: calc(var(--header-h) + 8px); /* below the header (R23) */
  inset-inline-end: 16px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: min(340px, calc(100vw - 32px));
  pointer-events: none;
}

/* Toasts never cover the buff bar (R25). 640px+: the bar sits under the header, so the stack
   starts below it. Under 640px the bar is fixed above the bottom nav, so the stack keeps its
   place and stops short of the bar instead. */
@media (min-width: 640px) {
  body.has-buff-bar .reward-toasts { top: calc(var(--header-h) + var(--buff-bar-h) + 8px); }
}

/* Desktop: the guide banner's Less/More toggle sits at the top right of the tab. Start the
   stack below the banner's first row so a toast never covers it (R50, guide P9). */
@media (min-width: 640px) {
  .reward-toasts { top: calc(var(--header-h) + var(--guide-clear, 96px) + 8px); }
  body.has-buff-bar .reward-toasts { top: calc(var(--header-h) + var(--buff-bar-h) + var(--guide-clear, 96px) + 8px); }
}
@media (max-width: 639px) {
  body.has-buff-bar .reward-toasts {
    max-height: calc(100dvh - var(--header-h) - var(--bottom-nav-h) - var(--buff-bar-h)
      - env(safe-area-inset-bottom) - 28px);
    overflow: hidden;
    /* Very short screens (landscape): a toast that doesn't fit fades out at the cut. The fade
       sits on this empty padding, so a stack that fits is never faded. */
    padding-bottom: 12px;
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 12px), transparent);
    mask-image: linear-gradient(to bottom, black calc(100% - 12px), transparent);
  }
}

.reward-toast {
  --toast-accent: var(--accent-cyan);
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--bg-1) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--toast-accent) 55%, transparent);
  border-inline-start: 4px solid var(--toast-accent);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 14px color-mix(in srgb, var(--toast-accent) 25%, transparent);
  color: var(--text-main);
  font-family: var(--font-sans, sans-serif);
  pointer-events: none;
  animation: reward-toast-in 0.28s ease-out both;
}

.reward-toast.tier-small { padding: 7px 12px; opacity: 0.92; }
.reward-toast.tier-big {
  border-width: 2px;
  border-inline-start-width: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--toast-accent) 18%, color-mix(in srgb, var(--bg-1) 96%, transparent)), color-mix(in srgb, var(--bg-1) 96%, transparent));
}

.reward-toast-icon { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.reward-toast-icon:empty { display: none; }
.reward-toast-body { display: flex; flex-direction: column; min-width: 0; }
.reward-toast-title {
  font-family: var(--font-display, serif);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--toast-accent);
  overflow-wrap: anywhere;
}
.reward-toast.tier-small .reward-toast-title { font-size: 0.82rem; }
.reward-toast-value { font-weight: 700; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.reward-toast-detail { font-size: 0.75rem; color: var(--text-dim); }
.reward-toast-value:empty, .reward-toast-detail:empty { display: none; }

.reward-toast.is-bumped { animation: reward-toast-bump 0.3s ease-out; }
.reward-toast.is-leaving { animation: reward-toast-out 0.26s ease-in forwards; }

@keyframes reward-toast-in {
  from { opacity: 0; transform: translateX(calc(40px * var(--dir, 1))); }
  to { opacity: 1; transform: none; }
}
@keyframes reward-toast-out {
  to { opacity: 0; transform: translateX(calc(40px * var(--dir, 1))); }
}
@keyframes reward-toast-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Source element pulses gold once */
.reward-pulse { animation: reward-pulse 0.9s ease-out; }
@keyframes reward-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 85%, transparent); }
  100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--gold) 0%, transparent); }
}
/* Reduced motion (R49): feedback.cue holds a static gold outline for 900 ms instead */
.cue-gold-outline { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- Ceremony: full-screen dim + radial burst + count-up; click or Esc skips ---- */
.reward-ceremony {
  --ceremony-accent: var(--accent-gold);
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: none;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--shade) 72%, transparent);
  cursor: pointer;
  overflow: hidden;
}
.reward-ceremony.is-open { display: flex; animation: reward-dim-in 0.3s ease-out both; }
.reward-ceremony.tier-epic { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ceremony-accent) 30%, color-mix(in srgb, var(--shade) 80%, transparent)), color-mix(in srgb, var(--shade) 90%, transparent) 70%); }

.reward-ceremony-burst {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 160vmax;
  height: 160vmax;
  margin: -80vmax 0 0 -80vmax;
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--ceremony-accent) 28%, transparent) 0deg 6deg,
    transparent 6deg 18deg);
  mask-image: radial-gradient(circle, #000 0, transparent 45%);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 45%);
  animation: reward-burst 1.2s ease-out both, reward-spin 12s linear infinite;
  pointer-events: none;
}

.reward-ceremony-card {
  position: relative;
  max-width: min(520px, calc(100vw - 32px));
  padding: 24px 28px;
  text-align: center;
  color: var(--text-main);
  animation: reward-card-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.reward-ceremony-icon { font-size: 3.4rem; line-height: 1; margin-bottom: 10px; filter: drop-shadow(0 0 16px var(--ceremony-accent)); }
.reward-ceremony-title {
  font-family: var(--font-display, serif);
  font-weight: 900;
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  color: var(--ceremony-accent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--ceremony-accent) 60%, transparent);
  overflow-wrap: anywhere;
}
.reward-ceremony-value {
  margin-top: 8px;
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.reward-ceremony-detail { margin-top: 6px; color: var(--text-muted); font-size: 0.95rem; }
.reward-ceremony-value:empty, .reward-ceremony-detail:empty { display: none; }
.reward-ceremony-hint { margin-top: 18px; font-size: 0.75rem; color: var(--text-dim); letter-spacing: 0.05em; }

@keyframes reward-dim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes reward-burst {
  from { transform: scale(0.1); opacity: 0; }
  30% { opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes reward-spin { to { rotate: 360deg; } }
@keyframes reward-card-in {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Phone width: toasts span the top, under the header */
@media (max-width: 600px) {
  .reward-toasts { top: calc(var(--header-h) + 8px); inset-inline-end: 8px; inset-inline-start: 8px; width: auto; align-items: stretch; }
  .reward-toast { padding: 8px 10px; }
  .reward-ceremony-icon { font-size: 2.6rem; }
}

/* Reduced motion: the device setting until js/ui/motion.js sets data-motion, then the in-game one */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .reward-toast.is-leaving { opacity: 0; }
  :root:not([data-motion="full"]) .reward-ceremony-burst { opacity: 0.5; }
}
:root[data-motion="reduced"] .reward-toast.is-leaving { opacity: 0; }
:root[data-motion="reduced"] .reward-ceremony-burst { opacity: 0.5; }

/* ---- New Well / New Field (R45; js/ui/prestigeCeremony.js) ---- */
.prestige-sheet-backdrop {
  position: fixed; inset: 0; z-index: 10002;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: color-mix(in srgb, var(--shade) 72%, transparent);
}
.prestige-sheet {
  width: min(480px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 20px; border-radius: var(--r-2, 12px);
  background: var(--bg-1); border: 1px solid var(--line-2); color: var(--text-1);
  box-shadow: 0 0 40px color-mix(in srgb, var(--sheet-accent, var(--gold)) 35%, transparent);
}
.sig-well { --sheet-accent: var(--gold); }
.sig-field { --sheet-accent: var(--dust); }
.prestige-sheet-title { margin: 0 0 12px; font-family: var(--font-display, serif); color: var(--sheet-accent); overflow-wrap: anywhere; }
.prestige-sheet-h { margin-top: 10px; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.prestige-sheet-h.lose { color: var(--danger); }
.prestige-sheet ul { margin: 4px 0 0; padding-inline-start: 1.2em; }
.prestige-sheet li { margin: 3px 0; overflow-wrap: anywhere; }
.prestige-sheet-note { margin: 10px 0 0; color: var(--text-2); font-size: 0.9rem; }
.prestige-sheet-actions { display: flex; gap: 10px; margin-top: 18px; }
.prestige-sheet-actions .btn-action { flex: 1; min-height: 48px; position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; }
.prestige-sheet-go.is-hold { touch-action: none; }
.prestige-sheet-go { border-color: var(--sheet-accent); }
.prestige-sheet-fill {
  position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
  background: color-mix(in srgb, var(--sheet-accent) 55%, transparent);
  transition: transform 0.15s linear;
}
[dir="rtl"] .prestige-sheet-fill { transform-origin: right; }
.prestige-sheet-go.is-holding .prestige-sheet-fill { transform: scaleX(1); }
.prestige-sheet-label { position: relative; }

/* Release: dim under the sparks (the particle canvas is at 9999), orb sinks, big callout */
.prestige-stage {
  position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--shade) 55%, transparent);
  animation: reward-dim-in 0.3s ease-out both; cursor: pointer;
}
.prestige-stage.sig-field { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--dust) 38%, color-mix(in srgb, var(--shade) 70%, transparent)), color-mix(in srgb, var(--shade) 85%, transparent) 75%); }
.prestige-callout {
  font-family: var(--font-display, serif); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem, 11vw, 4.5rem); text-align: center; padding: 0 16px; overflow-wrap: anywhere;
  color: var(--stage-accent);
  text-shadow: 0 0 28px color-mix(in srgb, var(--stage-accent) 70%, transparent), 0 2px 0 rgba(0, 0, 0, 0.4);
  animation: prestige-callout-in 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
@keyframes prestige-callout-in { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.monolith-orb.is-sinking { animation: prestige-orb-sink 0.4s ease-in both; }
@keyframes prestige-orb-sink { to { transform: translateY(18%) scale(0.55); opacity: 0.35; } }

/* The reward card after the release: well = amber rays, field = a purple sweep */
.reward-ceremony.sig-well .reward-ceremony-burst { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gold) 30%, transparent) 0deg 5deg, transparent 5deg 22deg); }
.reward-ceremony.sig-field::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--dust) 45%, transparent) 50%, transparent 70%);
  animation: prestige-field-sweep 1.4s ease-out both;
}
@keyframes prestige-field-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
[dir="rtl"] .reward-ceremony.sig-field::before { animation-direction: reverse; }
:root[data-motion="reduced"] .reward-ceremony.sig-field::before { animation: none; transform: none; opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .reward-ceremony.sig-field::before { animation: none; transform: none; opacity: 0.5; }
}

/* ---- First-time unlocks and rare events (R47; js/ui/unlocks.js, js/ui/rareEvents.js) ---- */
/* The new tab's nav item: gold pulse, 3 times (style guide §6). Reduced motion: feedback.cue holds
   a static gold outline for the same time instead. */
.unlock-pulse { animation: unlock-nav-pulse 0.8s ease-in-out 3; }
@keyframes unlock-nav-pulse {
  50% { box-shadow: 0 0 0 4px var(--gold-dim), var(--glow-gold); background: var(--gold-dim); }
}

/* Golden anomaly appears: a 600 ms brightening shimmer */
#golden-anomaly.anomaly-shimmer .golden-anomaly-img { animation: anomaly-shimmer 0.6s ease-out 1; }
@keyframes anomaly-shimmer {
  0% { filter: brightness(2.2) saturate(0.4); transform: scale(0.7); }
  60% { filter: brightness(1.5); transform: scale(1.15); }
  100% { filter: none; transform: none; }
}

/* Mirage: purple haze at the edges for the buff's 60 s. Not created under reduced motion. */
.mirage-haze {
  position: fixed; inset: 0; z-index: 998; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, var(--dust) 100%);
  transition: opacity 1s ease;
}
.mirage-haze.is-on { opacity: 0.12; }

/* Caravan Star: a camel silhouette crosses the header in 1.2 s (start side follows the text direction) */
.caravan-camel {
  position: fixed; inset-inline-start: -48px; z-index: 9001; pointer-events: none;
  font-size: 2rem; line-height: 1;
  filter: brightness(0) drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 1px var(--gold));
  animation: caravan-cross 1.2s linear 1 both;
}
@keyframes caravan-cross { from { transform: translateX(0); } to { transform: translateX(calc((100vw + 96px) * var(--dir, 1))); } }

/* Legendary gear toast: a gold sweep across it once */
.reward-toast.look-legendary { border-color: var(--rarity-legendary, var(--gold)); position: relative; overflow: hidden; }
.reward-toast.look-legendary::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--rarity-legendary, var(--gold)) 45%, transparent) 50%, transparent 70%);
  transform: translateX(-100%); animation: legendary-sweep 0.9s ease-out 0.15s 1 both;
}
@keyframes legendary-sweep { to { transform: translateX(100%); } }
[dir="rtl"] .reward-toast.look-legendary::after { transform: translateX(100%); animation-name: legendary-sweep-rtl; }
@keyframes legendary-sweep-rtl { to { transform: translateX(-100%); } }