/* ============================================================================
 * swipe-night.css — "Swipe Your Night" styles for the Private Member Suite
 * ----------------------------------------------------------------------------
 * Self-contained: everything is namespaced under .sn-root. Dark, candlelit,
 * champagne-metal luxury — same family as the Member Suite. Mobile-first.
 * Honors prefers-reduced-motion (no fling/tilt animation).
 * ========================================================================== */

.sn-root {
  --sn-gold: #e8c46a;
  --sn-gold-hi: #f7e3a1;
  --sn-gold-deep: #9a7430;
  --sn-ink: #f5efe2;
  --sn-muted: rgba(245, 239, 226, 0.62);
  --sn-card-bg: linear-gradient(160deg, #1c1610 0%, #2a2116 55%, #171208 100%);
  --sn-radius: 22px;
  color: var(--sn-ink);
  font-family: "Bodoni Moda", Georgia, "Times New Roman", serif;
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 4px 32px;
}

/* Fallback dimensional metal if the host page doesn't define .pe-metal.
   Phase 2 (2026-10-17): layered SOLID, matching pe-letterforms.css —
   background-clip:text is banned; the fill is a real color and the depth
   is the shadow stack. */
.sn-root .pe-metal {
  color:#edc66d;
  -webkit-text-fill-color:#edc66d;
  text-shadow:0 2px 6px rgba(0, 0, 0, 0.55), 0 0 22px rgba(232, 196, 106, 0.25);filter:none;
}

.sn-kicker {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 11px;
  color: var(--sn-gold);
  margin: 18px 0 6px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.sn-title {
  text-align: center;
  font-size: clamp(34px, 9vw, 52px);
  line-height: 1.05;
  margin: 0 0 8px;
  font-weight: 700;
}

.sn-subtitle {
  text-align: center;
  color: var(--sn-muted);
  font-size: 16px;
  font-style: italic;
  margin: 0 0 18px;
}

/* ---- intro ------------------------------------------------------------ */
.sn-intro { padding: 10px 18px 0; }

.sn-intro-copy {
  font-size: 17px;
  line-height: 1.65;
  color: var(--sn-ink);
  background: rgba(232, 196, 106, 0.06);
  border: 1px solid rgba(232, 196, 106, 0.22);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 14px;
}

.sn-capline {
  text-align: center;
  font-size: 15px;
  color: var(--sn-gold-hi);
  font-style: italic;
  margin: 0 0 22px;
}

.sn-awaiting {
  text-align: center;
  color: var(--sn-muted);
  font-style: italic;
  padding: 26px 10px;
  font-size: 16px;
}

/* ---- buttons ----------------------------------------------------------- */
.sn-btn {
  display: inline-block;
  border: 1px solid rgba(232, 196, 106, 0.4);
  border-radius: 999px;
  padding: 13px 26px;
  font-size: 15px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s;
}
.sn-btn:disabled { opacity: 0.35; cursor: default; }

.sn-btn--gold {
  background: linear-gradient(175deg, #f7e3a1, #d4a94e 55%, #9a7430);
  color: #241a08;
  font-weight: 700;
  box-shadow: 0 6px 24px rgba(212, 169, 78, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  border-color: #8a6420;
}
.sn-btn--gold:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(212, 169, 78, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.sn-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--sn-ink);
}

.sn-intro .sn-btn,
.sn-results .sn-btn--gold {
  display: block;
  margin: 0 auto;
  min-width: 220px;
}

/* ---- card stage -------------------------------------------------------- */
.sn-stage { padding: 0 14px; }

.sn-counter {
  text-align: center;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--sn-muted);
  margin: 6px 0 12px;
}

.sn-stack {
  position: relative;
  height: 520px;
  margin-bottom: 16px;
}

.sn-card {
  position: absolute;
  inset: 0;
  background: var(--sn-card-bg);
  border: 1px solid rgba(232, 196, 106, 0.28);
  border-radius: var(--sn-radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(232, 196, 106, 0.06);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  overflow: hidden;
}
.sn-card.sn-dragging { cursor: grabbing; }

.sn-depth-1 { transform: scale(0.95) translateY(14px); opacity: 0.75; pointer-events: none; }
.sn-depth-2 { transform: scale(0.9) translateY(28px); opacity: 0.45; pointer-events: none; }

.sn-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 300px;
  border-radius: 14px;
  overflow: hidden;
  background: #0e0b06;
  border: 1px solid rgba(232, 196, 106, 0.18);
  margin-bottom: 14px;
  flex: 0 0 auto;
}
.sn-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* vinyl placeholder — used while artwork resolves or when proxy is down */
.sn-vinyl {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 50%, rgba(232, 196, 106, 0.12) 0%, transparent 42%),
    repeating-radial-gradient(circle at 50% 50%, #14100a 0 3px, #1d1710 3px 6px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sn-vinyl-label {
  width: 34%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f7e3a1, #d4a94e 55%, #7a5a1e);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(212, 169, 78, 0.35);
}
.sn-vinyl-label span {
  font-size: 52px;
  font-weight: 700;
}

.sn-preview {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(232, 196, 106, 0.55);
  background: rgba(20, 14, 6, 0.82);
  color: var(--sn-gold-hi);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.sn-preview.playing {
  background: linear-gradient(175deg, #f7e3a1, #d4a94e);
  color: #241a08;
}

.sn-card-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 2px;
  line-height: 1.2;
}
.sn-card-artist {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sn-gold);
  margin: 0 0 10px;
}
.sn-card-note {
  font-size: 15.5px;
  font-style: italic;
  line-height: 1.55;
  color: var(--sn-ink);
  border-left: 2px solid var(--sn-gold-deep);
  padding-left: 12px;
  margin: auto 0 0;
}
.sn-card-sig { font-style: normal; color: var(--sn-gold); font-size: 13px; }

/* LOVE IT / NOT US stamps */
.sn-stamp {
  position: absolute;
  top: 22px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.12em;
  padding: 8px 14px;
  border: 3px solid;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-12deg);
}
.sn-stamp--love { left: 18px; color: #7ee2a0; border-color: #7ee2a0; }
.sn-stamp--pass { right: 18px; color: #e88a8a; border-color: #e88a8a; transform: rotate(12deg); }

.sn-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-bottom: 14px;
}
.sn-actions .sn-btn { padding: 12px 20px; font-size: 14px; }
.sn-undo { font-size: 13px !important; padding: 12px 14px !important; }

.sn-progress {
  text-align: center;
  color: var(--sn-gold-deep);
  font-size: 10px;
  letter-spacing: 0.3em;
  margin-bottom: 8px;
}

/* ---- results ------------------------------------------------------------ */
.sn-results { padding: 10px 18px 0; }

.sn-profile {
  text-align: center;
  font-size: 17px;
  font-style: italic;
  line-height: 1.6;
  color: var(--sn-gold-hi);
  background: rgba(232, 196, 106, 0.07);
  border: 1px solid rgba(232, 196, 106, 0.25);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 0 0 18px;
}

.sn-picklist {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  counter-reset: pick;
}
.sn-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(232, 196, 106, 0.2);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.sn-pick-num {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(175deg, #f7e3a1, #9a7430);
  color: #241a08;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
.sn-pick-text { flex: 1 1 auto; min-width: 0; }
.sn-pick-title { margin: 0; font-size: 16.5px; font-weight: 700; }
.sn-pick-artist {
  margin: 2px 0 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sn-muted);
}
.sn-pick-open {
  color: var(--sn-gold);
  text-decoration: none;
  font-size: 20px;
  flex: 0 0 auto;
}

.sn-results-note {
  text-align: center;
  color: var(--sn-muted);
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 20px;
}

.sn-save-status {
  text-align: center;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--sn-gold-hi);
  min-height: 22px;
  margin: 12px 0 0;
}

.sn-empty {
  text-align: center;
  color: var(--sn-muted);
  font-style: italic;
  padding: 40px 20px;
}

/* ---- small screens ------------------------------------------------------- */
@media (max-width: 420px) {
  .sn-stack { height: 470px; }
  .sn-art { max-height: 240px; }
  .sn-card-title { font-size: 21px; }
  .sn-actions .sn-btn { padding: 11px 15px; font-size: 13px; }
}

/* ---- reduced motion: no fling, no tilt, instant swaps -------------------- */
@media (prefers-reduced-motion: reduce) {
  .sn-card { transition: none !important; }
  .sn-btn { transition: none; }
}

/* ============ 9.0 ROADMAP ITEM 10 — TACTILE SWIPE PHYSICS (staged 2026-09-25) ============
   Pointer-position metallic shimmer on the top card (CSS reads the
   --sn-shine-x/--sn-shine-y vars the drag handler sets); deeper stack
   parallax; the "love it" pulse stays a single soft flash so it never
   competes with the deck's own motion. */

/* metallic shimmer riding the pointer across the top card */
.sn-card-top::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(240px 170px at var(--sn-shine-x,50%) var(--sn-shine-y,34%),
    rgba(255,244,200,.22),transparent 62%);
  mix-blend-mode:screen;opacity:0;
  transition:opacity .42s cubic-bezier(.16,.8,.24,1);
}
.sn-card-top:hover::after,.sn-card-top.sn-dragging::after{opacity:1}
/* keep the shimmer under the LOVE / NO stamps */
.sn-stamp{z-index:5}

/* deeper stack parallax — the deck reads as a real stack of vinyl */
.sn-depth-1{transform:translateY(15px) scale(.962);opacity:.92}
.sn-depth-2{transform:translateY(28px) scale(.925);opacity:.68}

/* quieter celebration: one soft gold flash on a keep, not a strobe */
@keyframes sn-celebrate{0%{filter:brightness(1)}35%{filter:brightness(1.16)}100%{filter:brightness(1)}}
.sn-card.sn-celebrate{animation:sn-celebrate .45s cubic-bezier(.16,.8,.24,1)}

/* the recap share row sits on the results screen */
.sn-recap-actions{margin-top:1.1rem;gap:.7rem}
.sn-recap-actions .sn-btn{font-size:.95rem;padding:.7rem 1.2rem}

@media (prefers-reduced-motion:reduce){
  .sn-card-top::after{display:none}
}

/* ===== B-3 (2026-10-19): Swipe Your Night deck controls >= 44px hit height.
   Padding-only growth on the action buttons (deck layout + swipe geometry
   untouched); the pick-row open affordance gains a 44px inline-flex box. ===== */
.sn-actions .sn-btn { padding-top:14px; padding-bottom:14px; }
.sn-undo { padding-top:14px !important; padding-bottom:14px !important; }
.sn-pick-open { min-height:44px; display:inline-flex; align-items:center; }
@media (max-width:640px) {
  .sn-actions .sn-btn { padding-top:14px; padding-bottom:14px; }
}