/* Selection share. Highlight any text in a poem; a small popover anchored to
   the selection (docked to the bottom of the viewport on mobile) offers Copy,
   Share, and a typeset card preview. The card can be downloaded as a PNG that
   matches the poem's per-Part palette (Night / Dawn / Day / Twilight). */

::selection { background: rgba(232,201,122,.22); color: var(--ink); }
::-moz-selection { background: rgba(232,201,122,.22); color: var(--ink); }

/* Make text in the poem unambiguously selectable on every platform.
   touch-callout:default keeps Android/iOS long-press selection menus enabled;
   cursor:text gives a desktop affordance. */
.poem,
.poem p {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
  cursor: text;
}

/* Quiet "highlight to share" hint that fades after first selection */
.share-hint{
  position:fixed;left:0;right:0;bottom:1.5rem;text-align:center;z-index:5;pointer-events:none;
  font-family:"Inter",system-ui,sans-serif;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  opacity:0;transition:opacity 600ms ease;
}
.share-hint.show{ opacity:.7 }
.share-hint.dismissed{ opacity:0 !important }

/* Floating popover anchored to the selection's bounding rect */
.selection-pop{
  position:absolute;z-index:50;
  display:flex;gap:.15rem;
  background:rgba(12,20,38,.94);
  border:1px solid rgba(232,201,122,.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius:99px;
  padding:.3rem;
  box-shadow:
    0 10px 40px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.2),
    0 0 36px rgba(232,201,122,.08);
  opacity:0;transform:translateY(4px) scale(.96);
  transition:opacity 220ms ease, transform 220ms ease;
  pointer-events:none;
}
.selection-pop.show{ opacity:1;transform:translateY(0) scale(1);pointer-events:auto }
.selection-pop::after{
  content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%) rotate(45deg);
  width:10px;height:10px;background:rgba(12,20,38,.94);
  border-right:1px solid rgba(232,201,122,.3);
  border-bottom:1px solid rgba(232,201,122,.3);
}
.selection-pop.flip-down::after{
  bottom:auto;top:-6px;
  border-right:none;border-bottom:none;
  border-left:1px solid rgba(232,201,122,.3);
  border-top:1px solid rgba(232,201,122,.3);
}

.selection-pop button{
  display:inline-flex;align-items:center;gap:.4rem;
  background:transparent;border:none;color:var(--ink-soft);
  font-family:"Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;
  padding:.5rem .85rem;border-radius:99px;cursor:pointer;
  transition:color 180ms, background 180ms;
}
.selection-pop button:hover{ color:var(--accent);background:rgba(232,201,122,.08) }
.selection-pop button .ico{ width:13px;height:13px;display:inline-block;opacity:.8 }
.selection-pop button:hover .ico{ opacity:1 }

/* Mobile: bottom-docked instead of anchored to selection */
@media (max-width:680px){
  .selection-pop{
    position:fixed;left:1rem;right:1rem;bottom:1rem;top:auto;
    width:auto;justify-content:space-around;
    padding:.45rem .35rem;border-radius:14px;
    transform:translateY(20px);
  }
  .selection-pop.show{ transform:translateY(0) }
  .selection-pop::after{ display:none }
  .selection-pop button{
    flex-direction:column;gap:.3rem;
    font-size:10px;letter-spacing:.14em;
    padding:.55rem .65rem;
  }
  .selection-pop button .ico{ width:18px;height:18px }
}

/* Card preview modal. align-items: safe center + overflow-y: auto so a tall
   card on a short viewport scrolls instead of getting clipped at the top. */
.share-modal{
  position:fixed;inset:0;z-index:60;
  display:none;justify-content:center;align-items:safe center;
  background:rgba(8,12,22,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:4rem 1rem 2rem;
  animation: fade-in 220ms ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.share-modal.show{ display:flex }
@keyframes fade-in{ from{opacity:0} to{opacity:1} }

.share-modal-wrap{
  position:relative;
  display:flex;flex-direction:column;gap:1.5rem;align-items:center;
  max-width:28rem;width:100%;
  margin: auto 0;
}

.share-card{
  position:relative;width:100%;aspect-ratio: 4/5;
  border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:3rem 2.25rem;
  background:
    radial-gradient(900px 600px at 75% -10%, rgba(232,201,122,.16), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(120,140,200,.16), transparent 60%),
    linear-gradient(180deg, var(--part-a) 0%, var(--part-b) 100%);
  border:1px solid rgba(232,201,122,.2);
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  text-align:center;
}
.share-card::before{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(243,234,208,.55), transparent 60%),
    radial-gradient(1px 1px at 28% 72%, rgba(243,234,208,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 65% 22%, rgba(243,234,208,.5), transparent 60%),
    radial-gradient(1px 1px at 82% 80%, rgba(243,234,208,.35), transparent 60%),
    radial-gradient(1px 1px at 50% 50%, rgba(243,234,208,.25), transparent 60%);
  pointer-events:none;
}
.share-card .star{
  position:relative;width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 14px var(--accent);
  margin:0 auto 1.5rem;
}
.share-card .quote{
  position:relative;
  font-family:"Cormorant",serif;font-style:italic;font-weight:300;
  font-size:1.5rem;line-height:1.45;color:var(--ink);
  margin:0 0 2rem;
  text-shadow: 0 0 30px rgba(232,201,122,.08);
}
.share-card .src{
  position:relative;
  font-family:"Inter",system-ui,sans-serif;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--muted);
  margin:0;
}
.share-card .src .ttl{ display:block;color:var(--ink-soft);margin-top:.4rem;font-size:11px }

.share-modal-actions{
  display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;
}
.share-modal-actions button{
  background:rgba(243,234,208,.04);
  border:1px solid var(--rule);
  color:var(--ink-soft);
  font-family:"Inter",system-ui,sans-serif;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;
  padding:.7rem 1.1rem;border-radius:99px;cursor:pointer;
  transition:color 180ms, border-color 180ms, background 180ms;
}
.share-modal-actions button:hover{
  color:var(--accent);border-color:rgba(232,201,122,.4);background:rgba(232,201,122,.06);
}
.share-modal-actions .primary{
  border-color:rgba(232,201,122,.4);color:var(--ink);
}
.share-modal-close{
  position:absolute;top:-2.5rem;right:0;
  background:transparent;border:none;color:var(--muted);
  font-family:"Inter",system-ui,sans-serif;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;cursor:pointer;padding:.5rem;
}
.share-modal-close:hover{ color:var(--accent) }

/* Toast */
.share-toast{
  position:fixed;left:50%;bottom:2rem;transform:translateX(-50%) translateY(20px);
  z-index:80;
  background:rgba(12,20,38,.95);
  border:1px solid rgba(232,201,122,.3);
  color:var(--ink);font-family:"Inter",system-ui,sans-serif;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:.7rem 1.2rem;border-radius:99px;
  opacity:0;pointer-events:none;
  transition:opacity 220ms, transform 220ms;
}
.share-toast.show{ opacity:1;transform:translateX(-50%) translateY(0) }