/* styles/biomes/share-card.css
   End-of-run resting beat. Owns the post-run lobby — verdict + share
   artifact (7-stop spine) + named CTAs in one composed page. Replaces
   the prior two-step (share-card → separate replay prompt) flow.

   Design principles (from the research brief):
     1. Resting beat — slow fade-in, CTAs land last
     2. One composed artifact (the spine IS the share)
     3. Share-card grammar (overline → hero → support → CTA)
     4. Diegetic typography — Three Voices register only
     5. Name the next action
     6. Failure deserves restraint, not red

   The card sizes to its content (no aspect-ratio). Width is receipt-
   format slim (440px); height is whatever the prose + spine + CTAs
   need. On a 600px-tall viewport the card scrolls internally as a
   safety net — never clips. */

.share-card-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 60);
  background: rgba(6, 7, 12, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 800ms ease;
  backdrop-filter: blur(8px) saturate(0.85);
  -webkit-backdrop-filter: blur(8px) saturate(0.85);
}
.share-card-overlay.revealed { opacity: 1; }

/* Per-overlay palette tokens — set on the card by data-verdict. Allows
   the spine accent + hero gradient to swap without touching individual
   rules. */
.share-card {
  --sc-accent:        rgba(10, 191, 83, 0.95);   /* cycle-closed default */
  --sc-accent-soft:   rgba(10, 191, 83, 0.18);
  --sc-accent-edge:   rgba(10, 191, 83, 0.45);
  --sc-text:          rgba(248, 240, 224, 0.94);
  --sc-text-soft:     rgba(232, 224, 208, 0.72);
  --sc-text-muted:    rgba(232, 216, 208, 0.42);
  --sc-divider:       rgba(184, 200, 232, 0.10);
  --sc-stroke:        rgba(232, 216, 208, 0.20);
  --sc-mono:          var(--mono);
  --sc-serif:         var(--serif);

  position: relative;
  width: min(440px, 92vw);
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sc-stroke) transparent;
  background: linear-gradient(180deg,
    #0e1320 0%,
    #14182a 55%,
    #0a0c18 100%);
  border: 1px solid var(--sc-accent-edge);
  border-radius: 4px;
  padding: 32px 32px 24px 32px;
  font-family: var(--sc-serif);
  color: var(--sc-text);
  box-shadow:
    0 0 40px var(--sc-accent-soft),
    0 32px 64px rgba(0, 0, 0, 0.7);
  /* Card fades + lifts in over 800ms; reduced-motion-aware below. */
  transform: translateY(8px);
  transition: transform 800ms ease;
}
.share-card-overlay.revealed .share-card {
  transform: translateY(0);
}

/* Outcome accents — clean approval keeps adyen-green; partial uses
   intent-glow gold; chargeback uses sunset orange; declined + expired
   stay restrained (pale violet → grey) per the "failure deserves
   restraint, not red" principle. */
.share-card[data-verdict="cycle-closed"] {
  --sc-accent:      rgba(10, 191, 83, 0.95);
  --sc-accent-soft: rgba(10, 191, 83, 0.18);
  --sc-accent-edge: rgba(10, 191, 83, 0.55);
}
.share-card[data-verdict="partial"] {
  --sc-accent:      rgba(255, 232, 168, 0.95);
  --sc-accent-soft: rgba(255, 220, 140, 0.14);
  --sc-accent-edge: rgba(255, 220, 140, 0.45);
}
.share-card[data-verdict="chargeback"] {
  --sc-accent:      rgba(255, 168, 100, 0.95);
  --sc-accent-soft: rgba(255, 140, 88, 0.14);
  --sc-accent-edge: rgba(255, 140, 88, 0.40);
}
.share-card[data-verdict="declined"],
.share-card[data-verdict="expired"] {
  --sc-accent:      rgba(208, 200, 216, 0.85);
  --sc-accent-soft: rgba(180, 180, 200, 0.10);
  --sc-accent-edge: rgba(180, 180, 200, 0.30);
}

/* ---------- HEADER ---------- */

.sc-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.sc-overline {
  font-family: var(--sc-mono);
  font-size: 0.58rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--sc-text-soft);
}
.sc-overline-thin {
  font-family: var(--sc-mono);
  font-size: 0.5rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--sc-text-muted);
}

/* ---------- META — scenario · buyer ---------- */

.sc-meta {
  margin-top: 18px;
  text-align: center;
  font-family: var(--sc-serif);
  font-style: italic;
  font-size: 0.84rem;
  color: var(--sc-text-soft);
  letter-spacing: 0.02em;
}
.sc-meta-divider {
  margin: 0 8px;
  opacity: 0.5;
}

/* ---------- HERO — the phrase the player would screenshot ---------- */

.sc-hero {
  margin: 24px 0 28px 0;
  text-align: center;
}
.sc-hero-phrase {
  margin: 0;
  font-family: var(--sc-serif);
  font-style: italic;
  font-weight: normal;
  font-size: 1.7rem;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--sc-accent);
  text-shadow: 0 0 24px var(--sc-accent-soft);
  /* Hero phrase legible at 360px thumbnail — anchored at ~1.4rem on
     mobile via the breakpoint below. */
}
.sc-hero-support {
  margin: 12px 0 0 0;
  font-family: var(--sc-serif);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--sc-text);
  padding: 0 8px;
}

/* ---------- THE SPINE — share artifact ---------- */

.sc-spine-wrap {
  margin: 12px -8px 24px -8px;
  /* slight negative margin so the SVG can breathe to the card edges */
}
.sc-spine {
  width: 100%;
  height: auto;
  display: block;
}
.sc-spine-line {
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.55;
}
.sc-spine-label {
  font-family: var(--sc-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--sc-text-muted);
}
.sc-spine-annot {
  font-family: var(--sc-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  fill: var(--sc-text);
}
.sc-spine-node-good   .sc-spine-annot { fill: var(--sc-accent); }
.sc-spine-node-warn   .sc-spine-annot { fill: rgba(255, 220, 140, 0.85); }
.sc-spine-node-bad    .sc-spine-annot { fill: rgba(255, 168, 100, 0.92); }
.sc-spine-node-neutral .sc-spine-annot { fill: var(--sc-text-soft); }

/* ---------- ANCHOR STATS — two facts, not a grid ---------- */

.sc-anchor-stats {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 16px;
  padding: 14px 4px;
  margin-bottom: 22px;
  border-top:    1px solid var(--sc-divider);
  border-bottom: 1px solid var(--sc-divider);
}
.sc-anchor {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 4px;
}
.sc-anchor-value {
  font-family: var(--sc-mono);
  font-size: 1.35rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: var(--sc-text);
}
.sc-anchor-unit {
  font-size: 0.85em;
  font-weight: normal;
  margin-left: 1px;
  color: var(--sc-text-soft);
}
.sc-anchor-label {
  font-family: var(--sc-mono);
  font-size: 0.52rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sc-text-muted);
  text-align: center;
}
.sc-anchor-divider {
  width: 1px;
  background: var(--sc-divider);
  align-self: stretch;
}

/* ---------- FOOTER — maker credit ---------- */

.sc-footer {
  text-align: center;
  margin-bottom: 20px;
}
.sc-footer-credit {
  font-family: var(--sc-serif);
  font-style: italic;
  font-size: 0.72rem;
  color: var(--sc-text-soft);
  opacity: 0.7;
}
.sc-footer-credit-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  opacity: 0.95;
}
.sc-footer-credit-link:hover {
  opacity: 1;
}

/* ---------- CTAs — fade in LAST per the resting-beat principle ---------- */

.sc-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 600ms ease, transform 600ms ease;
  pointer-events: none;
}
.share-card-overlay.cta-revealed .sc-ctas {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sc-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 22px;
  background: transparent;
  border: 1px solid var(--sc-stroke);
  border-radius: 3px;
  color: var(--sc-text);
  font-family: var(--sc-mono);
  cursor: pointer;
  transition: all 220ms ease;
  text-align: center;
}
.sc-cta:hover {
  border-color: var(--sc-accent-edge);
  background: var(--sc-accent-soft);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.sc-cta:active {
  transform: translateY(0) scale(0.99);
}

.sc-cta-eyebrow {
  font-size: 0.5rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--sc-text-muted);
}
.sc-cta-label {
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--sc-text);
}

/* Primary — sits forward, accented border + soft accent fill */
.sc-cta-primary {
  border-color: var(--sc-accent-edge);
  background: var(--sc-accent-soft);
}
.sc-cta-primary:hover {
  border-color: var(--sc-accent);
  background: var(--sc-accent-soft);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5),
              0 0 24px var(--sc-accent-soft);
}
.sc-cta-primary .sc-cta-label {
  color: var(--sc-accent);
}
.sc-cta-primary .sc-cta-eyebrow {
  color: var(--sc-accent);
  opacity: 0.7;
}

/* Secondary — flatter, neutral border */
.sc-cta-secondary {
  background: transparent;
}

/* Tertiary — link-style, no border, no chrome. The least-destructive
   choice; keyboard Escape also maps to this. */
.sc-cta-tertiary {
  border: none;
  padding: 8px;
  background: transparent;
  color: var(--sc-text-soft);
}
.sc-cta-tertiary:hover {
  color: var(--sc-text);
  background: transparent;
  border-color: transparent;
  transform: none;
  box-shadow: none;
}
.sc-cta-tertiary .sc-cta-label {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: inherit;
  font-weight: normal;
  text-transform: lowercase;
  font-family: var(--sc-serif);
  font-style: italic;
}

/* ---------- FAILURE RESTRAINT ---------- */

/* For declined / expired outcomes, hold longer + desaturate. Per the
   research: failure deserves restraint, not red. */
.share-card[data-verdict="declined"],
.share-card[data-verdict="expired"] {
  filter: saturate(0.85);
}
.share-card-overlay:has(.share-card[data-verdict="declined"]),
.share-card-overlay:has(.share-card[data-verdict="expired"]) {
  transition-duration: 1100ms;
}

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
  .share-card-overlay { transition-duration: 200ms; }
  .share-card,
  .sc-ctas { transition-duration: 100ms; transform: none !important; }
  .sc-cta { transition-duration: 100ms; }
}

/* ---------- MOBILE BREAKPOINT ---------- */

@media (max-width: 480px) {
  .share-card-overlay { padding: 12px; }
  .share-card {
    width: 96vw;
    padding: 24px 22px 20px 22px;
  }
  .sc-hero-phrase { font-size: 1.4rem; }
  .sc-hero-support { font-size: 0.85rem; }
  .sc-anchor-value { font-size: 1.15rem; }
  /* On phones, scale the spine SVG annotations up slightly for
     legibility — they're sized in viewBox units so a wider viewBox
     would be more correct, but a small label/annot bump works as a
     stopgap. */
  .sc-spine-label  { font-size: 9px; }
  .sc-spine-annot  { font-size: 11px; }
}

@media (max-height: 700px) {
  /* Compact mode for short viewports — squeeze breathing room rather
     than clipping content. The card can still scroll internally if
     this still isn't enough. */
  .share-card { padding: 22px 28px 18px 28px; }
  .sc-hero { margin: 14px 0 18px 0; }
  .sc-spine-wrap { margin: 6px -8px 14px -8px; }
  .sc-anchor-stats { padding: 10px 4px; margin-bottom: 14px; }
  .sc-footer { margin-bottom: 12px; }
}