/* =============================================================================
   dollar-decide.css — "Let Dollar Decide!" quiz + reveal modal. Branded, theme
   aware (reuses /users palette tokens), CSP-clean, GPU-friendly. Scoped .dd-*.
   ========================================================================== */
#ddModal{ position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center; padding:20px; }
.dd-back{ position:absolute; inset:0; background:rgba(6,4,12,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:ddFade .3s ease; }
@keyframes ddFade{ from{ opacity:0; } to{ opacity:1; } }

.dd-card{
  position:relative; z-index:1; width:min(560px,100%); max-height:calc(100vh - 40px); overflow-y:auto;
  background:var(--panel, #14101f); color:var(--ink-hi, #f4eeff);
  border:1px solid var(--hairline-2, rgba(255,255,255,.12)); border-radius:22px;
  padding:26px 24px 24px; box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:ddIn .38s cubic-bezier(.2,.7,.3,1);
  font-family:var(--font-ui, system-ui, sans-serif); text-align:center;
}
@keyframes ddIn{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }
.dd-x{ position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%; font-size:19px; line-height:1;
  color:var(--ink-hi); background:rgba(255,255,255,.06); border:1px solid var(--hairline, rgba(255,255,255,.1)); cursor:pointer; }
.dd-x:hover{ background:rgba(255,255,255,.12); }

.dd-crest{ font-size:34px; line-height:1; margin:2px 0 6px; filter:drop-shadow(0 3px 8px rgba(224,57,43,.4)); }
.dd-kick{ font-weight:900; font-size:11px; letter-spacing:.28em; color:var(--p400, #e0392b);
  background:linear-gradient(92deg,#ff4f9e,#e0392b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

.dd-body{ margin-top:14px; min-height:220px; }
.dd-q{ margin:6px 0 20px; font-family:var(--font-bubble, inherit); font-weight:900; font-size:clamp(20px,3.6vw,27px);
  letter-spacing:-.3px; line-height:1.08; color:var(--ink-hi); text-wrap:balance; }

.dd-opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dd-opt{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:16px 12px; cursor:pointer;
  border-radius:15px; border:1px solid var(--hairline-2, rgba(255,255,255,.12)); background:var(--well, rgba(255,255,255,.04));
  color:var(--ink-hi); font-weight:800; font-size:14px; text-align:center;
  transition:transform .14s ease, border-color .14s ease, background .14s ease; }
.dd-opt:hover{ transform:translateY(-3px); border-color:#ff4f9e; background:rgba(255,79,158,.12); }
.dd-opt:active{ transform:translateY(0); }
.dd-opt:focus-visible{ outline:3px solid #ff4f9e; outline-offset:2px; }
.dd-emoji{ font-size:26px; line-height:1; }
.dd-opts .dd-opt:last-child:nth-child(odd){ grid-column:1 / -1; }

.dd-prog{ display:flex; justify-content:center; gap:7px; margin-top:20px; }
.dd-dot{ width:7px; height:7px; border-radius:50%; background:var(--hairline-2, rgba(255,255,255,.16)); transition:background .2s ease, transform .2s ease; }
.dd-dot.on{ background:linear-gradient(92deg,#ff4f9e,#e0392b); transform:scale(1.25); }

/* ---- reveal ---- */
.dd-thinking{ padding:60px 0; color:var(--ink-lo, #a99bc4); font-size:15px; font-weight:700; animation:ddPulse 1.1s ease-in-out infinite; }
@keyframes ddPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

.dd-pick{ animation:ddIn .4s cubic-bezier(.2,.7,.3,1); }
.dd-pick-k{ font-weight:900; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-lo, #a99bc4); }
.dd-pick-h{ margin:6px 0 4px; font-family:var(--font-bubble, inherit); font-weight:900; font-size:clamp(30px,7vw,46px); line-height:1;
  background:linear-gradient(92deg,#ff4f9e,#e0392b,#7b64e6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; word-break:break-word; }
.dd-pick-h .dd-at{ -webkit-text-fill-color:currentColor; color:var(--ink-lo, #a99bc4); }
.dd-reason{ margin:12px auto 4px; max-width:44ch; font-size:15px; line-height:1.5; color:var(--ink-mid, #cfc4e4); }

.dd-badges{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:8px 0 2px; }
.dd-b{ font-size:10.5px; font-weight:900; letter-spacing:.03em; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.dd-plat{ background:rgba(42,171,238,.2); color:#7cc9f5; border:1px solid rgba(42,171,238,.4); }
.dd-bin{ background:linear-gradient(180deg,#ffe58a,#f4c430); color:#1a1406; }
.dd-co{ background:rgba(64,92,204,.4); color:#c9d4ff; border:1px solid rgba(150,175,255,.5); }
.dd-off{ background:rgba(255,255,255,.08); color:var(--ink-lo); border:1px solid var(--hairline); }
.dd-src{ background:transparent; color:var(--ink-faint, #8a7fa6); }

.dd-runk{ margin:22px 0 10px; font-weight:900; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint, #8a7fa6); }
.dd-runs{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dd-run{ padding:12px 10px; cursor:pointer; border-radius:14px; border:1px solid var(--hairline-2, rgba(255,255,255,.12));
  background:var(--well, rgba(255,255,255,.04)); color:var(--ink-hi); transition:transform .14s ease, border-color .14s ease; }
.dd-run b{ font-size:16px; display:block; margin-bottom:6px; word-break:break-word; }
.dd-run:hover{ transform:translateY(-2px); border-color:#7b64e6; }

.dd-actions{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.dd-go{ padding:14px 18px; border-radius:13px; border:none; cursor:pointer; font-weight:900; font-size:15px; color:#fff;
  background:linear-gradient(180deg,#ff4f9e,#e0392b); box-shadow:0 8px 22px rgba(224,57,43,.4); transition:transform .15s ease; }
.dd-go:hover{ transform:translateY(-2px); }
.dd-again{ padding:11px; border-radius:11px; cursor:pointer; font-weight:800; font-size:13px; color:var(--ink-lo, #a99bc4);
  background:transparent; border:1px solid var(--hairline-2, rgba(255,255,255,.12)); }
.dd-again:hover{ color:var(--ink-hi); border-color:var(--ink-lo); }

/* the entry button that sits in the hero */
.dd-launch{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-weight:900; font-size:14px; color:#fff;
  padding:12px 18px; border-radius:999px; border:none; background:linear-gradient(120deg,#7b64e6,#ff4f9e,#e0392b); background-size:200% 100%;
  box-shadow:0 8px 22px rgba(123,100,230,.34); animation:ddShift 6s ease infinite; transition:transform .15s ease; }
.dd-launch:hover{ transform:translateY(-2px); }
.dd-launch .dd-launch-c{ font-size:16px; }
@keyframes ddShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

@media (prefers-reduced-motion:reduce){ .dd-card,.dd-pick,.dd-back{ animation:none !important; } .dd-launch{ animation:none !important; } .dd-thinking{ animation:none !important; } }
@media (max-width:560px){ .dd-opts{ grid-template-columns:1fr 1fr; } .dd-card{ padding:22px 16px 18px; border-radius:18px; } }