:root{
  --bg:#fff8f0; --card:#fff; --ink:#16121f; --muted:#6b6478; --line:#16121f;
  --wax:#e63946; --wax-dark:#9b1d27;
  --c:#8b5cf6; --c-soft:#efe7ff; /* current kind colour, set per screen */
  --r:22px; --bw:2.5px; --pop:4px 4px 0 var(--ink); --pop-sm:3px 3px 0 var(--ink);
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --hand:"Caveat","Bradley Hand","Segoe Print",cursive;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
body{min-height:100dvh;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
.banner{background:var(--ink);color:#fff;font-size:12.5px;padding:7px 14px;text-align:center}
.banner button{margin-left:8px;background:#fff2;border:1px solid #fff5;color:#fff;border-radius:999px;padding:1px 10px;cursor:pointer}

/* top + tab bar */
.top{display:flex;align-items:center;justify-content:space-between;max-width:560px;margin:0 auto;padding:14px 18px 6px}
.brand{display:flex;align-items:center;gap:8px;font:800 24px var(--display);text-decoration:none;letter-spacing:-.6px}
.seal-mini{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff6b75,var(--wax) 55%,var(--wax-dark));color:#fff;display:grid;place-items:center;font:800 15px var(--display);border:2px solid var(--ink)}
.icon-btn{width:40px;height:40px;border-radius:50%;border:var(--bw) solid var(--ink);background:#fff;display:grid;place-items:center;cursor:pointer;font-size:18px;box-shadow:var(--pop-sm);text-decoration:none}
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));display:flex;gap:6px;background:var(--ink);padding:6px;border-radius:999px;z-index:20;box-shadow:0 10px 30px #16121f40}
.tabbar a{white-space:nowrap;display:flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font:700 14px var(--sans);padding:10px 16px;border-radius:999px;opacity:.7}
.tabbar a[aria-current=page]{background:#fff;color:var(--ink);opacity:1}
.tabbar a.seal-tab{background:var(--wax);opacity:1}
.tabbar a.seal-tab[aria-current=page]{background:#fff;color:var(--wax)}
main{max-width:560px;margin:0 auto;padding:6px 18px 28px}

/* type */
h1{font:800 40px/1.02 var(--display);letter-spacing:-1.4px;margin:10px 0 8px}
h2{font:800 26px/1.1 var(--display);letter-spacing:-.6px;margin:0 0 10px}
h3{font:700 18px var(--display);margin:0 0 6px}
.lede{color:var(--muted);margin:0 0 20px;font-size:17px}
.subtle{font-size:13.5px;color:var(--muted)}
.center{text-align:center}

/* cards & buttons */
.card{background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);padding:18px;box-shadow:var(--pop);margin-bottom:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:var(--bw) solid var(--ink);border-radius:999px;padding:14px 22px;font:700 16px var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:var(--pop-sm);transition:transform .08s,box-shadow .08s;background:#fff;user-select:none;-webkit-user-select:none}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn.primary{background:var(--ink);color:#fff}
.btn.hot{background:var(--wax);color:#fff}
.btn.kind{background:var(--c);color:var(--c-on,#fff)}
.btn.small{padding:9px 15px;font-size:14px}
.btn.block{width:100%}
.btn.big{padding:18px 24px;font-size:18px}
.btn[disabled]{opacity:.45;pointer-events:none}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.actions.center{justify-content:center}
.linkish{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:13px;padding:0}

/* inputs */
.big-input{width:100%;border:var(--bw) solid var(--ink);border-radius:18px;background:#fff;padding:16px 18px;font:700 22px var(--display);outline:none;box-shadow:var(--pop-sm)}
.big-input:focus{box-shadow:4px 4px 0 var(--c)}
.err{color:var(--wax);font-size:14px;font-weight:600;margin-top:8px;min-height:1px}
.helper{font-size:13.5px;color:var(--muted);margin-top:10px;display:flex;gap:6px;align-items:center}
select.big-input{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2316121f' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") no-repeat right 18px center}

/* welcome / age gate */
.welcome{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:space-between;padding:calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
  background:radial-gradient(120% 80% at 10% 0%,#ffd166 0%,transparent 55%),radial-gradient(100% 70% at 100% 30%,#ff5c8a 0%,transparent 60%),radial-gradient(120% 80% at 30% 100%,#8b5cf6 0%,transparent 60%),#ff8a5c;color:#fff;overflow:auto}
.welcome .inner{max-width:440px;margin:0 auto;width:100%}
.welcome h1{font-size:52px;color:#fff;text-shadow:0 2px 0 #16121f40}
.welcome .lede{color:#fff;opacity:.95;font-weight:500}
.welcome .btn{box-shadow:var(--pop)}
.welcome .legal{font-size:12px;opacity:.9;text-align:center;margin-top:14px}
.welcome .legal a{color:#fff}
.floaty{display:flex;justify-content:center;margin:20px 0}
.floaty .envelope{animation:float 3.2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.sticker{position:absolute;font-size:34px;animation:float 4s ease-in-out infinite}
.dob{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;margin:16px 0}
.dob .big-input{color:var(--ink)}

/* compose stepper */
.steps{display:flex;gap:6px;margin:6px 0 18px}
.steps i{flex:1;height:6px;border-radius:9px;background:#16121f1a}
.steps i.on{background:var(--c)}
.step-head{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.back{border:0;background:none;font-size:15px;font-weight:700;color:var(--muted);cursor:pointer;padding:6px 0}
.kinds{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kind-tile{position:relative;text-align:left;border:var(--bw) solid var(--ink);border-radius:20px;padding:16px 14px 14px;background:var(--k);box-shadow:var(--pop);cursor:pointer;min-height:118px;transition:transform .12s}
.kind-tile:hover{transform:translateY(-2px) rotate(-1deg)}
.kind-tile:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.kind-tile .e{font-size:34px;line-height:1;display:block;margin-bottom:10px}
.kind-tile b{font:800 18px var(--display);display:block;letter-spacing:-.3px}
.kind-tile small{font-size:12.5px;opacity:.8;line-height:1.3;display:block;margin-top:2px}
.write-card{background:var(--c);border:var(--bw) solid var(--ink);border-radius:26px;padding:18px;box-shadow:var(--pop);color:#fff;position:relative}
.write-card.light{color:var(--ink)}
.write-card .to{font:800 15px var(--display);opacity:.9;margin-bottom:6px}
.write-card textarea{width:100%;min-height:210px;border:0;background:transparent;resize:none;outline:none;font:700 25px/1.3 var(--display);color:inherit;letter-spacing:-.3px}
.write-card textarea::placeholder{color:inherit;opacity:.55}
.write-card .foot{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;opacity:.9}
.ring{width:28px;height:28px}
.prompts{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:none}
.prompts::-webkit-scrollbar{display:none}
.prompt{flex:none;border:2px solid var(--ink);border-radius:999px;background:#fff;padding:7px 12px;font-size:13.5px;font-weight:600;cursor:pointer}
.when-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.when{border:var(--bw) solid var(--ink);border-radius:18px;background:#fff;padding:14px;text-align:left;cursor:pointer;box-shadow:var(--pop-sm)}
.when b{display:block;font:800 17px var(--display)}
.when small{color:var(--muted);font-size:12.5px}
.when[aria-pressed=true]{background:var(--c);color:var(--c-on,#fff)}
.when[aria-pressed=true] small{color:inherit;opacity:.85}
.when .e{font-size:22px}
input[type=datetime-local].big-input{font-size:17px}
.hint-toggle{margin-top:14px}

/* hold to seal */
.hold{position:relative;overflow:hidden}
.hold .fill{position:absolute;inset:0;background:#ffffff38;transform-origin:left;transform:scaleX(0)}
.hold.holding .fill{transition:transform .9s linear;transform:scaleX(1)}

/* envelope */
.env-wrap{display:flex;justify-content:center;margin:6px 0 16px;perspective:900px;position:relative}
.envelope{position:relative;width:min(300px,78vw);aspect-ratio:1.5;background:var(--c);border:var(--bw) solid var(--ink);border-radius:18px;box-shadow:var(--pop);cursor:pointer}
.envelope::before{content:"";position:absolute;inset:0;border-radius:15px;background:linear-gradient(to top right,transparent 49.3%,#16121f55 49.6%,transparent 50.4%),linear-gradient(to top left,transparent 49.3%,#16121f55 49.6%,transparent 50.4%);pointer-events:none}
.flap{position:absolute;left:-1px;right:-1px;top:-1px;height:60%;transform-origin:top;transition:transform .7s cubic-bezier(.5,0,.2,1);z-index:2;pointer-events:none}
.flap::before{content:"";position:absolute;inset:0;background:var(--c);filter:brightness(1.08);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:16px 16px 0 0}
.flap::after{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%,50% calc(100% - 3px),calc(100% - 4px) 1px,4px 1px,50% calc(100% - 3px));background:var(--ink)}
.wax{position:absolute;left:50%;top:60%;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;z-index:3;display:grid;place-items:center;color:#fff;font:800 30px var(--display);border:var(--bw) solid var(--ink);
  background:radial-gradient(circle at 35% 30%,#ff7b84,var(--wax) 55%,var(--wax-dark));transition:transform .5s,opacity .5s}
.wax::after{content:"";position:absolute;inset:6px;border-radius:50%;border:2px dashed #ffffff66}
.env-to{position:absolute;left:0;right:0;bottom:10%;text-align:center;font:800 15px var(--display);color:#fff;z-index:1;text-shadow:1px 1px 0 #16121f66}
.envelope.light .env-to{color:var(--ink);text-shadow:none}
.envelope.opening .wax{transform:scale(1.5) rotate(-30deg);opacity:0}
.envelope.opening .flap{transform:rotateX(180deg);z-index:0}
.envelope.sealing .wax{animation:stamp .55s cubic-bezier(.3,1.7,.5,1) both}
@keyframes stamp{0%{transform:scale(2.6);opacity:0}100%{transform:scale(1);opacity:1}}
.envelope.nope{animation:nope .45s}
@keyframes nope{20%{transform:translateX(-10px) rotate(-3deg)}40%{transform:translateX(10px) rotate(3deg)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.wiggle .envelope{animation:wiggle 2.6s ease-in-out infinite}
@keyframes wiggle{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-3deg)}92%{transform:rotate(3deg)}96%{transform:rotate(-1.5deg)}}
.bubble{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font:700 13.5px var(--sans);padding:7px 12px;border-radius:999px;white-space:nowrap;z-index:5;animation:pop .25s}
@keyframes pop{from{transform:translateX(-50%) scale(.6);opacity:0}}

/* capsule page */
.badge{display:inline-flex;gap:6px;align-items:center;font:800 13px var(--display);background:var(--c-soft);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:4px 12px}
.fromto{font:800 24px var(--display);letter-spacing:-.4px;margin:10px 0 2px}
.teaser{font:600 24px var(--hand);color:var(--muted);margin:2px 0 0}
.countdown{display:flex;justify-content:center;gap:8px;margin:16px 0 4px}
.countdown div{background:#fff;border:var(--bw) solid var(--ink);box-shadow:var(--pop-sm);border-radius:16px;min-width:66px;padding:10px 4px 8px;text-align:center}
.countdown b{display:block;font:800 30px/1 var(--display);font-variant-numeric:tabular-nums}
.countdown span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
.opens{color:var(--muted);font-size:14px;font-weight:600}
.row-input{display:flex;gap:8px}
.row-input input{flex:1;min-width:0;border:var(--bw) solid var(--ink);border-radius:999px;padding:12px 16px;outline:none;font-weight:600}
.fp{font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);word-break:break-all}
.proof{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:700;color:#137a48;background:#dff7ea;border:2px solid #137a48;border-radius:999px;padding:4px 12px}
.letter{background:var(--c);color:#fff;border:var(--bw) solid var(--ink);border-radius:26px;box-shadow:var(--pop);padding:24px 22px 20px;font:700 26px/1.3 var(--display);letter-spacing:-.3px;white-space:pre-wrap;word-wrap:break-word;animation:rise .6s .15s both;position:relative}
.letter.light{color:var(--ink)}
@keyframes rise{from{opacity:0;transform:translateY(30px) rotate(-2deg) scale(.96)}to{opacity:1;transform:none}}
.letter .sig{display:block;text-align:right;font:600 28px var(--hand);margin-top:12px;opacity:.9}
.guess-sticker{background:#fff7c2;border:var(--bw) solid var(--ink);border-radius:16px;padding:12px 14px;box-shadow:var(--pop-sm);transform:rotate(-1.5deg);margin:18px 6px}
.guess-sticker b{font:800 13px var(--display);text-transform:uppercase;letter-spacing:.6px;display:block;color:var(--muted)}
.guess-sticker span{font:600 24px var(--hand)}
.verdict{display:flex;gap:10px;justify-content:center;margin-top:8px}
.stamp{display:inline-block;border:4px solid currentColor;border-radius:10px;padding:4px 14px;font:800 24px var(--display);letter-spacing:1px;transform:rotate(-7deg);text-transform:uppercase;animation:stampin .4s cubic-bezier(.3,1.7,.5,1)}
@keyframes stampin{from{transform:rotate(-7deg) scale(2.2);opacity:0}}
.stamp.called{color:#137a48} .stamp.missed{color:var(--wax)}
.reacts{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.reacts button{border:2px solid var(--ink);background:#fff;border-radius:999px;padding:6px 9px;font-size:19px;cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:transform .1s}
.reacts button:hover{transform:scale(1.12) rotate(-6deg)}
.reacts button[aria-pressed=true]{background:var(--c-soft)}
.reacts button small{font:700 12px var(--sans);color:var(--muted);margin-left:3px}
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:46px;background:#fff;border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:var(--pop);padding:6px;z-index:30;min-width:190px}
.menu-pop button{display:block;width:100%;text-align:left;border:0;background:none;padding:10px 12px;border-radius:10px;font-weight:600;cursor:pointer}
.menu-pop button:hover{background:var(--c-soft)}
.cap-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}

/* lists */
.seg{display:inline-flex;border:var(--bw) solid var(--ink);border-radius:999px;padding:4px;background:#fff;margin-bottom:16px;box-shadow:var(--pop-sm)}
.seg a{padding:8px 16px;border-radius:999px;text-decoration:none;font-weight:700;font-size:14px}
.seg a[aria-current=true]{background:var(--ink);color:#fff}
.cap-item{display:flex;gap:12px;align-items:center;padding:12px;border:var(--bw) solid var(--ink);border-radius:18px;background:#fff;box-shadow:var(--pop-sm);margin-bottom:10px;text-decoration:none}
.cap-item .dot{width:46px;height:46px;border-radius:14px;border:2px solid var(--ink);display:grid;place-items:center;font-size:22px;flex:none}
.cap-item .mid{flex:1;min-width:0}
.cap-item b{font:800 16px var(--display);display:block}
.cap-item small{color:var(--muted);font-size:12.5px}
.pill{font:700 12px var(--sans);border:2px solid var(--ink);border-radius:999px;padding:3px 10px;white-space:nowrap;background:#fff}
.pill.open{background:#c9f7dd}
.empty{text-align:center;padding:30px 10px}
.empty .e{font-size:48px}

/* modal, toast, confetti */
.modal{position:fixed;inset:0;background:#16121f99;display:flex;align-items:flex-end;justify-content:center;padding:14px;z-index:50}
@media (min-width:600px){.modal{align-items:center}}
.modal-card{background:#fff;border:var(--bw) solid var(--ink);border-radius:26px;padding:22px;max-width:440px;width:100%;box-shadow:var(--pop);animation:sheet .25s cubic-bezier(.2,1.2,.4,1);max-height:90dvh;overflow:auto}
@keyframes sheet{from{transform:translateY(40px);opacity:0}}
.radio{display:flex;gap:10px;align-items:center;border:2px solid var(--ink);border-radius:14px;padding:10px 12px;margin-bottom:8px;cursor:pointer;font-weight:600}
.radio:has(input:checked){background:var(--c-soft)}
.radio input{accent-color:var(--ink);width:18px;height:18px}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:999px;font-weight:600;font-size:14px;z-index:60;animation:pop .2s;white-space:nowrap}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:45}
.prose h3{margin-top:18px}
.prose p,.prose li{font-size:15px}
.prose ul{padding-left:20px}
.house-rule{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.house-rule .e{font-size:26px;line-height:1}
@media (max-width:420px){h1{font-size:34px}.welcome h1{font-size:44px}.countdown div{min-width:60px}.countdown b{font-size:26px}.letter{font-size:23px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

body.focus .tabbar{display:none}
body.focus{padding-bottom:20px}

/* reveal: paper slides out of the envelope */
.peek{position:absolute;left:8%;right:8%;top:10%;height:80%;background:#fff;border:var(--bw) solid var(--ink);border-radius:12px;z-index:1;transition:transform .6s cubic-bezier(.3,1.3,.5,1);padding:14px;display:flex;flex-direction:column;gap:8px}
.peek i{display:block;height:9px;border-radius:9px;background:#16121f22}
.peek i:nth-child(2){width:80%}.peek i:nth-child(3){width:60%}
.envelope.opening .peek{transform:translateY(-78%) rotate(-3deg)}
.envelope.opening{animation:hop .5s .1s}
@keyframes hop{30%{transform:translateY(-10px) scale(1.03)}}
.flash{position:fixed;inset:0;background:var(--c);z-index:44;pointer-events:none;animation:flash .7s forwards}
@keyframes flash{0%{opacity:0}35%{opacity:.9}100%{opacity:0}}

/* reveal picker */
.rv-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.reveals{display:flex;gap:10px;overflow-x:auto;padding:2px 4px 8px 2px;scrollbar-width:none;margin:0 -4px}
.reveals::-webkit-scrollbar{display:none}
.rv{flex:none;width:118px;text-align:left;border:var(--bw) solid var(--ink);border-radius:16px;background:#fff;padding:10px;cursor:pointer;position:relative;box-shadow:var(--pop-sm)}
.rv .e{font-size:26px;display:block}
.rv b{font:800 14px var(--display);display:block;margin-top:4px}
.rv small{font-size:11.5px;color:var(--muted);line-height:1.25;display:block}
.rv .tag{position:absolute;top:8px;right:8px;font:800 10px var(--sans);letter-spacing:.5px;border:1.5px solid var(--ink);border-radius:999px;padding:1px 6px;background:#c9f7dd}
.rv .tag.plus{background:linear-gradient(90deg,#facc15,#ff5c8a);color:#16121f}
.rv[aria-pressed=true]{background:var(--c-soft);outline:3px solid var(--c);outline-offset:2px}
/* effects */
.fx{position:fixed;inset:0;z-index:46;transition:opacity .35s}
.fx.out{opacity:0}
.fx-pass{pointer-events:none;overflow:hidden}
.fx-night{background:#16121f}
.fx-night canvas{width:100%;height:100%;display:block}
.fx-dim{background:#16121fd9;display:grid;place-items:center}
.fx-center{text-align:center;color:#fff}
.fx-label{font:800 26px var(--display);margin-top:10px}
.balloon{font-size:150px;line-height:1;cursor:pointer;transform:scale(var(--s,1));transition:transform .18s cubic-bezier(.3,1.6,.5,1);user-select:none;-webkit-user-select:none;outline:none;filter:drop-shadow(0 10px 20px #0006)}
.mic{font-size:120px;line-height:1}
.slam{font:800 64px/0.95 var(--display);letter-spacing:-2px;color:#facc15;text-shadow:4px 4px 0 #e63946;opacity:0;transform:scale(3) rotate(-8deg);margin-top:10px}
.slam.in{animation:slam .35s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes slam{to{opacity:1;transform:scale(1) rotate(-6deg)}}
.scratch{position:absolute;border-radius:26px;cursor:grab;touch-action:none;z-index:2}

/* accounts */
.tick{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#1d9bf0;color:#fff;font:800 11px var(--sans);vertical-align:2px;border:1.5px solid var(--ink)}
.phone-row{display:grid;grid-template-columns:auto 1fr;gap:8px}
.phone-row .cc{width:auto;font-size:18px;color:var(--ink);padding-right:40px;background-position:right 14px center;cursor:pointer}
.welcome .big-input{color:var(--ink)}
.big-input.code{letter-spacing:12px;text-align:center;font-size:30px}
.signed{display:flex;gap:12px;align-items:center}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--c);color:var(--c-on,#fff);border:var(--bw) solid var(--ink);display:grid;place-items:center;font:800 18px var(--display);flex:none}
.avatar.big{width:58px;height:58px;font-size:26px}
.avatar-btn{font:800 17px var(--display);background:var(--c-soft)}
.blocked-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed #16121f33}
.install{display:flex;gap:12px;align-items:flex-start;margin-top:16px}

.err:empty{display:none!important}
.dev-note{background:#fff;color:var(--ink);border:var(--bw) solid var(--ink);border-radius:14px;padding:10px 12px;margin-top:12px;font-size:14px;box-shadow:var(--pop-sm)}
.card.restricted{background:#fff3cd}

/* parties */
.party-hero{background:linear-gradient(135deg,#efe7ff,#ffe3ec 60%,#fff7c2)}
.party-emojis{font-size:40px;letter-spacing:6px}.party-emojis.big{font-size:84px}
.ideas{margin:6px 0 0;padding-left:0;list-style:none}.ideas li{padding:6px 0;border-bottom:1px dashed #16121f22}
.q-list{display:flex;flex-direction:column;gap:8px}
.q-chip{display:flex;gap:10px;align-items:center;text-align:left;border:2px solid var(--ink);border-radius:14px;background:#fff;padding:10px 12px;font-weight:600;cursor:pointer}
.q-chip[aria-pressed=true]{background:var(--c-soft);box-shadow:var(--pop-sm)}
.q-chip[aria-pressed=false]{opacity:.65}
.mini-select{border:2px solid var(--ink);border-radius:999px;padding:0 10px;background:#fff;font-weight:600}
.members{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.mem{display:flex;flex-direction:column;align-items:center;width:56px;position:relative}
.mem small{font-size:11.5px;font-weight:600;max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem i{position:absolute;top:-4px;right:0;font-style:normal;font-size:15px}
.mem:not(.sealed) .avatar{opacity:.55}
.mem .avatar,.ans-card .avatar,.lb-row .avatar,.pick-m .avatar{color:#fff}
.q-card{position:relative;padding-left:52px}
.q-num{position:absolute;left:14px;top:16px;width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font:800 13px var(--display);border:2px solid var(--ink)}
.pick{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.pick-m{display:flex;gap:6px;align-items:center;border:2px solid var(--ink);border-radius:999px;background:#fff;padding:4px 12px 4px 4px;font-weight:700;cursor:pointer}
.pick-m .avatar{width:28px;height:28px;font-size:13px;border-width:2px}
.pick-m[aria-pressed=true]{background:var(--c);color:#fff;box-shadow:var(--pop-sm)}
.ans{width:100%;border:2px solid var(--ink);border-radius:14px;padding:12px 14px;font-weight:600;margin-top:8px;outline:none}
.my-ans{padding:8px 0;border-bottom:1px dashed #16121f22}.my-ans small{display:block;color:var(--muted)}.my-ans b{font:700 18px var(--display)}
.sealed-card{background:#efe7ff}
.deck-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.q-big{background:var(--c);color:#fff}.q-big small{opacity:.85;font-weight:700}.q-big h2{font-size:28px;margin:6px 0 0}
.top-pick{background:#fff7c2;border:2px solid var(--ink);border-radius:14px;padding:10px 14px;margin:-4px 0 14px;font-weight:600;transform:rotate(-1deg)}
.answers{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.ans-card{display:flex;gap:12px;align-items:center;background:#fff;border:var(--bw) solid var(--ink);border-radius:18px;padding:12px;box-shadow:var(--pop-sm);animation:rise .45s var(--d) both}
.ans-card .mid{flex:1;min-width:0}.ans-card small{color:var(--muted);font-weight:700}.ans-card b{display:block;font:700 19px/1.25 var(--display)}
.vote{border:2px solid var(--ink);border-radius:999px;background:#fff;padding:8px 12px;font-weight:800;cursor:pointer;min-width:58px}
.vote.on{background:#c9f7dd;box-shadow:var(--pop-sm)}
.votes{font-weight:800;color:var(--muted)}
.podium{display:flex;flex-direction:column;gap:8px}
.lb-row{display:flex;gap:12px;align-items:center;padding:10px;border-radius:16px;border:2px solid var(--ink);background:#fff}
.lb-row.first{background:#fff7c2;box-shadow:var(--pop-sm);transform:scale(1.02)}
.lb-row .rank{font-size:24px;width:32px;text-align:center}.lb-row b{flex:1;font:800 18px var(--display)}
.dob3{display:grid;grid-template-columns:1fr 1.2fr 1.3fr;gap:8px;margin:16px 0}