/* PsstDrop launch positioning + theme layer. This file intentionally sits after style.css. */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1rem 0 1rem;
}

.check-drop-box {
  max-width: 430px;
}

.check-placeholder {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: .85rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  font-size: .82rem;
}

.side-theme-picker .theme-choice:has(input[value="birthday"])::before,
.side-theme-picker .theme-choice:has(input[value="memory"])::before,
.side-theme-picker .theme-choice:has(input[value="goodluck"])::before {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1rem;
}

.side-theme-picker .theme-choice:has(input[value="birthday"])::before { content: "✦"; }
.side-theme-picker .theme-choice:has(input[value="memory"])::before { content: "◌"; }
.side-theme-picker .theme-choice:has(input[value="goodluck"])::before { content: "★"; }

body.theme-birthday {
  --bg: #16071f;
  --panel: #24102f;
  --panel2: #321746;
  --text: #fff4da;
  --muted: #d8bddc;
  --line: rgba(255, 210, 97, .26);
  --accent: #ffd45f;
  --green: #ffd45f;
  --accent2: #9e7cff;
  --danger: #ff6b8a;
  --shadow: 0 24px 80px rgba(7, 0, 20, .48);
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 212, 95, .20), transparent 18rem),
    radial-gradient(circle at 82% 18%, rgba(158, 124, 255, .22), transparent 22rem),
    radial-gradient(circle at 45% 100%, rgba(255, 99, 146, .12), transparent 26rem),
    linear-gradient(135deg, #11051b 0%, #24102f 55%, #090311 100%);
  font-family: ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.theme-memory {
  --bg: #22160f;
  --panel: #312115;
  --panel2: #3a281a;
  --text: #fff3dc;
  --muted: #d1ad86;
  --line: rgba(210, 163, 104, .26);
  --accent: #e2a866;
  --green: #e2a866;
  --accent2: #8fc7ba;
  --danger: #de6f5f;
  --shadow: 0 24px 80px rgba(20, 10, 3, .45);
  background:
    radial-gradient(circle at 18% 8%, rgba(226, 168, 102, .24), transparent 18rem),
    radial-gradient(circle at 82% 14%, rgba(143, 199, 186, .14), transparent 21rem),
    linear-gradient(135deg, #170f0a 0%, #312115 55%, #100905 100%);
  font-family: Georgia, "Times New Roman", serif;
}

body.theme-goodluck {
  --bg: #061811;
  --panel: #0b241a;
  --panel2: #113322;
  --text: #eafff3;
  --muted: #91c6a8;
  --line: rgba(93, 230, 158, .24);
  --accent: #5de69e;
  --green: #5de69e;
  --accent2: #f4d35e;
  --danger: #ff6c7a;
  --shadow: 0 24px 80px rgba(0, 12, 8, .48);
  background:
    radial-gradient(circle at 14% 12%, rgba(93, 230, 158, .18), transparent 18rem),
    radial-gradient(circle at 80% 18%, rgba(244, 211, 94, .16), transparent 20rem),
    linear-gradient(135deg, #03100b 0%, #0b241a 54%, #020604 100%);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.theme-birthday::before,
body.theme-memory::before,
body.theme-goodluck::before {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  opacity: .12;
  white-space: nowrap;
  font-size: clamp(2rem, 8vw, 7rem);
  left: -4rem;
  top: 7rem;
  transform: rotate(-10deg);
}
body.theme-birthday::before { content: "✦ surprise ✦ unlock ✦ celebrate ✦"; color: var(--accent); }
body.theme-memory::before { content: "photo  memory  remember  past  moment"; color: var(--accent); }
body.theme-goodluck::before { content: "★ courage ★ you got this ★ moment ★"; color: var(--accent); }

body.theme-birthday .binary-rain,
body.theme-memory .binary-rain,
body.theme-goodluck .binary-rain { display: none; }

body.theme-birthday .card,
body.theme-birthday .mini-card,
body.theme-birthday .protected-shell,
body.theme-birthday .terminal-card,
body.theme-birthday .dynamic-box,
body.theme-memory .card,
body.theme-memory .mini-card,
body.theme-memory .protected-shell,
body.theme-memory .terminal-card,
body.theme-memory .dynamic-box,
body.theme-goodluck .card,
body.theme-goodluck .mini-card,
body.theme-goodluck .protected-shell,
body.theme-goodluck .terminal-card,
body.theme-goodluck .dynamic-box {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--panel2) 88%, transparent));
  border-color: var(--line);
  box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent);
  backdrop-filter: blur(14px);
}

body.theme-birthday input,
body.theme-birthday textarea,
body.theme-birthday select,
body.theme-memory input,
body.theme-memory textarea,
body.theme-memory select,
body.theme-goodluck input,
body.theme-goodluck textarea,
body.theme-goodluck select {
  background: color-mix(in srgb, var(--bg) 74%, black 8%);
  border-color: var(--line);
  color: var(--text);
}

body.theme-birthday .btn,
body.theme-memory .btn,
body.theme-goodluck .btn {
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: color-mix(in srgb, var(--bg) 86%, black 14%);
}

body.theme-birthday .btn.secondary,
body.theme-birthday .btn.ghost,
body.theme-memory .btn.secondary,
body.theme-memory .btn.ghost,
body.theme-goodluck .btn.secondary,
body.theme-goodluck .btn.ghost {
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  color: var(--accent);
}

body.theme-birthday .radio-row:has(input:checked),
body.theme-memory .radio-row:has(input:checked),
body.theme-goodluck .radio-row:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

body.theme-birthday .theme-choice:has(input[value="birthday"]),
body.theme-memory .theme-choice:has(input[value="memory"]),
body.theme-goodluck .theme-choice:has(input[value="goodluck"]) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.drop-kicker {
  margin-top: .75rem;
  color: var(--muted);
  font-size: .9rem;
}

.post-create-actions .btn.share-native {
  min-width: 150px;
}

@media (max-width: 640px) {
  .hero-actions { display: grid; }
  .hero-actions .btn { width: 100%; }
}