/* Yes or No button hero + shareable result card */
.ynob{--yes:#4ade80;--yes-soft:#86efac;--no:#ef4444;--no-soft:#fca5a5;--ink:#f8fafc;--muted:#94a3b8;--panel:#0f172a;
  display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:640px;margin:0 auto;padding:28px 16px 8px;box-sizing:border-box}
.ynob *{box-sizing:border-box}
.ynob-title{font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:900;text-transform:uppercase;line-height:1;margin:0 0 10px;font-size:clamp(2.6rem,11vw,4.2rem);color:var(--ink);letter-spacing:-.01em}
.ynob-title .y{color:var(--yes-soft)}.ynob-title .n{color:var(--no)}.ynob-title .or{font-size:.42em;vertical-align:middle;margin:0 .35em;color:var(--ink)}
.ynob-sub{color:var(--muted);font-size:1.05rem;line-height:1.5;margin:0 0 18px;max-width:30em}
.ynob-q{width:100%;max-width:440px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--ink);font-size:1rem;padding:0 16px;outline:none;transition:border-color .2s,background .2s;font-family:inherit}
.ynob-q::placeholder{color:#64748b}
.ynob-q:focus{border-color:rgba(134,239,172,.6);background:rgba(255,255,255,.09)}
.ynob-stage{position:relative;margin:22px 0 6px;width:clamp(200px,62vw,270px);aspect-ratio:1}
.ynob-btn{position:absolute;inset:0;border-radius:50%;border:0;cursor:pointer;color:#fff;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:900;text-transform:uppercase;
  background:radial-gradient(circle at 32% 28%,#64748b 0,#334155 55%,#1e293b 100%);
  box-shadow:0 14px 0 #0b1220,0 22px 40px rgba(0,0,0,.45),inset 0 -10px 24px rgba(0,0,0,.35),inset 0 8px 18px rgba(255,255,255,.12);
  transition:transform .12s ease,box-shadow .12s ease,background .3s;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.ynob-btn:hover{transform:translateY(-2px)}
.ynob-btn:active,.ynob-btn.is-pressed{transform:translateY(10px);box-shadow:0 4px 0 #0b1220,0 8px 18px rgba(0,0,0,.4),inset 0 -6px 18px rgba(0,0,0,.35),inset 0 8px 18px rgba(255,255,255,.1)}
.ynob-btn:focus-visible{outline:3px solid var(--yes-soft);outline-offset:6px}
.ynob-btn-main{font-size:clamp(2.1rem,9vw,2.9rem);line-height:1}
.ynob-btn-hint{font-size:.72rem;letter-spacing:.14em;color:rgba(255,255,255,.6);font-weight:700}
.ynob-ring{position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(134,239,172,.35);animation:ynobPulse 2.4s ease-out infinite;pointer-events:none}
@keyframes ynobPulse{0%{transform:scale(.94);opacity:.9}100%{transform:scale(1.12);opacity:0}}
.ynob-btn.is-spinning{animation:ynobShake .12s linear infinite}
.ynob-btn.is-spinning .ynob-btn-hint{visibility:hidden}
@keyframes ynobShake{0%{transform:translate(0,4px) rotate(-1.5deg)}50%{transform:translate(0,4px) rotate(1.5deg)}100%{transform:translate(0,4px) rotate(-1.5deg)}}
.ynob-btn.is-yes{background:radial-gradient(circle at 32% 28%,#86efac 0,#22c55e 55%,#15803d 100%);box-shadow:0 14px 0 #14532d,0 22px 50px rgba(34,197,94,.35),inset 0 -10px 24px rgba(0,0,0,.25),inset 0 8px 18px rgba(255,255,255,.25)}
.ynob-btn.is-no{background:radial-gradient(circle at 32% 28%,#fca5a5 0,#ef4444 55%,#991b1b 100%);box-shadow:0 14px 0 #7f1d1d,0 22px 50px rgba(239,68,68,.35),inset 0 -10px 24px rgba(0,0,0,.25),inset 0 8px 18px rgba(255,255,255,.25)}
.ynob-btn.is-yes~.ynob-ring,.ynob-btn.is-no~.ynob-ring,.ynob-btn.is-spinning~.ynob-ring{display:none}
.ynob-btn.is-done .ynob-btn-main{font-size:clamp(3rem,14vw,4.4rem);animation:ynobPop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes ynobPop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.ynob-card{width:100%;max-width:440px;margin-top:26px;border-radius:20px;padding:22px 20px 16px;background:linear-gradient(160deg,#1e293b,#0f172a);border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 30px rgba(0,0,0,.35);animation:ynobUp .35s ease}
.ynob-card[hidden],.ynob-actions[hidden],.ynob-shared[hidden]{display:none}
@keyframes ynobUp{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
.ynob-card-q{color:#cbd5e1;font-size:1.05rem;line-height:1.4;margin-bottom:6px;word-wrap:break-word}
.ynob-card-q:empty{display:none}
.ynob-card-a{font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:900;font-size:3.4rem;line-height:1.05;text-transform:uppercase}
.ynob-card-a.is-yes{color:var(--yes)}.ynob-card-a.is-no{color:var(--no)}
.ynob-card-brand{margin-top:6px;color:#64748b;font-size:.78rem;letter-spacing:.08em;font-weight:700}
.ynob-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
.ynob-act{height:44px;padding:0 18px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:var(--ink);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:700;font-size:.92rem;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s,transform .1s}
.ynob-act:hover{background:rgba(255,255,255,.13)}.ynob-act:active{transform:scale(.97)}
.ynob-act.is-primary{background:#22c55e;border-color:#22c55e;color:#052e16}
.ynob-act.is-primary:hover{background:#4ade80}
.ynob-shared{margin:18px 0 0;padding:10px 14px;border-radius:12px;background:rgba(134,239,172,.1);color:var(--yes-soft);font-weight:700;font-size:.95rem}
.ynob-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#f8fafc;color:#0f172a;font-weight:700;padding:10px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:200;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:.9rem}
@media (prefers-reduced-motion:reduce){.ynob-ring,.ynob-btn.is-spinning,.ynob-btn.is-done .ynob-btn-main,.ynob-card{animation:none}}