/* "Proclaim Your Shame" share modal — full-screen overlay, brand card preview, share controls. */

/* The overlay is the only scroller, so a card taller than the phone scrolls under a pinned ×. */
.pcl-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px; background: rgba(9, 7, 14, .78); backdrop-filter: blur(3px);
}

.pcl-modal {
  position: relative; margin: auto;
  width: min(440px, 100%);
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px; border-radius: 16px;
  background: var(--den-bg2, #201a2b); border: 1px solid var(--den-line, #3a3147);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}

.pcl-x {
  position: sticky; top: 10px; z-index: 2;
  align-self: flex-end; margin: 0 -8px -56px 0;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 1px solid var(--den-line, #3a3147); border-radius: 10px;
  font-size: 26px; line-height: 1; color: var(--den-mut, #a89a8a);
  background: rgba(20, 16, 30, .86);
}
.pcl-x:hover { color: var(--den-ink, #f4ecdc); background: rgba(58, 49, 71, .94); }

.pcl-title {
  margin: 2px 30px 0 2px; font-size: 1.5rem;
  color: var(--den-ink, #f4ecdc); letter-spacing: .5px;
}
.pcl-shame .pcl-title { color: var(--den-crim, #c8283c); }
.pcl-pride .pcl-title { color: var(--den-gold, #e0b34c); }

/* The canvas is authored at 1080px wide; scale it to the modal. */
.pcl-canvas {
  width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--den-line, #3a3147); background: #17141f;
}

.pcl-cap {
  width: 100%; resize: vertical; box-sizing: border-box;
  padding: 10px 12px; border-radius: 10px;
  font: 14px/1.45 'Segoe UI', system-ui, sans-serif;
  color: var(--den-ink, #f4ecdc);
  background: var(--den-bg, #17141f); border: 1px solid var(--den-line, #3a3147);
}
.pcl-cap:focus { outline: none; border-color: var(--den-gold, #e0b34c); }

.pcl-controls { display: flex; flex-wrap: wrap; gap: 8px; }

.pcl-btn {
  flex: 1 1 auto; min-width: 96px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  font: 600 13px 'Segoe UI', system-ui, sans-serif;
  color: var(--den-ink, #f4ecdc);
  background: var(--den-btn, #241d33); border: 1px solid var(--den-line, #3a3147);
}
.pcl-btn:hover { background: var(--den-btnh, #2e2547); }
.pcl-ghost { flex: 0 1 auto; min-width: 0; color: var(--den-mut, #a89a8a); background: transparent; }
.pcl-primary { color: #241302; background: var(--den-gold, #e0b34c); border-color: var(--den-gold2, #a97d22); }
.pcl-primary:hover { background: #ecc25e; }

.pcl-toast {
  position: absolute; left: 50%; bottom: 78px; transform: translate(-50%, 8px);
  padding: 8px 14px; border-radius: 20px; pointer-events: none;
  font: 600 13px 'Segoe UI', system-ui, sans-serif;
  color: #241302; background: var(--den-gold, #e0b34c);
  opacity: 0; transition: opacity .25s, transform .25s;
}
.pcl-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* The button a viewer drops in to open the modal. */
.pcl-open {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px; cursor: pointer;
  font: 600 13px 'Segoe UI', system-ui, sans-serif;
  color: #241302; background: var(--den-gold, #e0b34c); border: 1px solid var(--den-gold2, #a97d22);
}
.pcl-open:hover { background: #ecc25e; }