:root{
  --gold:#c9a45c;--gold-2:#e2c487;--rose:#d9a89b;--cream:#f6ecd9;--paper:#f8f2e7;--ink:#2a2622;
  --navy:#16243f;--wine:#6b1426;--char:#3a383d;
  --bg1:#2a1b24;--bg2:#120a0f;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Lato',system-ui,sans-serif;color:var(--cream);background:var(--bg2);
  background-image:radial-gradient(120% 70% at 50% 18%,#3c2430 0%,var(--bg1) 38%,var(--bg2) 100%);background-attachment:fixed;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
[hidden]{display:none!important}

/* ---------- top bar & pause ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--safe-t) + 10px) 14px 10px 16px;background:linear-gradient(#170e13,#140c11);border-bottom:1px solid #c9a45c1f;box-shadow:0 6px 18px #0006}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.brand-t{font-family:'Playfair Display',serif;font-size:19px;line-height:1;color:var(--cream);letter-spacing:.2px}
.wm em{font-style:italic;color:var(--gold);margin-left:1px}
.brand-r{font-family:'Playfair Display',serif;font-style:italic;font-size:13px;color:#e9dcc4;opacity:.85;min-height:1em}
.pause-btn{display:flex;align-items:center;gap:3px;padding:9px 14px 9px 12px;border-radius:99px;border:1px solid var(--rose);
  color:var(--rose);background:#1d1418cc;font-family:'Cinzel',serif;font-size:12px;letter-spacing:1.8px;text-transform:uppercase;
  box-shadow:0 2px 14px #0007}
.pause-btn i{display:block;width:3px;height:11px;background:var(--rose);border-radius:1px}
.pause-btn i+i{margin-right:6px}
.pause-btn:active{transform:scale(.96)}
body.locked .topbar,body.paused .pause-btn{visibility:hidden}

/* ---------- layout ---------- */
#app{min-height:100%;padding:calc(var(--safe-t) + 64px) 0 calc(var(--safe-b) + 84px)}
body.no-tabs #app{padding-bottom:calc(var(--safe-b) + 28px)}
.screen{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wrap{padding:0 18px}
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;justify-content:space-around;
  padding:8px 8px calc(var(--safe-b) + 8px);background:linear-gradient(#140c1100,#140c11ee 30%,#0f090c)}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:#b9a98f;font-family:'Cinzel',serif;
  font-size:10px;letter-spacing:1.4px;text-transform:uppercase;padding:6px 0}
.tabbar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.tabbar button.on{color:var(--gold)}

.eyebrow{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold)}
h1,h2,h3{font-family:'Playfair Display',serif;font-weight:500;color:var(--cream);text-wrap:balance}
h1{font-size:30px;line-height:1.1}
h2{font-size:25px;line-height:1.15}
h3{font-size:19px;line-height:1.2}
.lede{font-family:'Playfair Display',serif;font-style:italic;color:#e9dcc4;font-size:16px;line-height:1.45}
.muted{color:#b9a98f;font-size:13.5px;line-height:1.5}
.center{text-align:center}
.orn-div{display:flex;align-items:center;gap:8px;width:120px;margin:12px auto;color:var(--gold)}
.orn-div i{flex:1;height:1px;background:currentColor;opacity:.7}.orn-div em{font-style:normal;font-size:8px}

/* ---------- buttons, chips, fields ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;padding:12px 18px;border-radius:14px;
  font-family:'Cinzel',serif;font-weight:600;font-size:13.5px;letter-spacing:2px;text-transform:uppercase;transition:transform .12s, filter .2s}
.btn:active{transform:scale(.98)}
.btn.gold{background:linear-gradient(180deg,#e0c182,#c9a45c 55%,#b08a45);color:#21160f;box-shadow:0 6px 18px #c9a45c33, inset 0 1px 0 #fff6}
.btn.ghost{border:1px solid #c9a45c88;color:var(--gold)}
.btn.quiet{color:#cbbba0;font-family:'Lato';text-transform:none;letter-spacing:.2px;font-weight:400;font-size:15px;min-height:44px}
.btn.danger{border:1px solid #d98a8a;color:#f0b4b4}
.btn.stag{background:radial-gradient(ellipse at 50% 30%,#1f3256,#0a1222);color:var(--gold);border:1px solid var(--gold);box-shadow:inset 0 0 0 3px #0a1222,inset 0 0 0 4px #c9a45c66}
.btn.vixen{background:radial-gradient(ellipse at 50% 30%,#7d1a2f,#33070f);color:var(--gold);border:1px solid var(--gold);box-shadow:inset 0 0 0 3px #33070f,inset 0 0 0 4px #c9a45c66}
.btn[disabled]{opacity:.45;pointer-events:none}
.row{display:flex;gap:10px}.row>*{flex:1}
.stack>*+*{margin-top:10px}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:7px 12px;border-radius:99px;border:1px solid #c9a45c70;color:#ecdcbc;font-size:13.5px;background:#ffffff08;line-height:1.2}
.chip:active{background:#c9a45c30}
.chip.rose{border-color:#d9a89b90;color:#f1cfc5}
.chip.starter{border-style:dashed;color:var(--gold-2)}
.chip-label{font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:#a8977c;margin:12px 0 7px}

.field{display:block}
.field>span{display:block;font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:#bda77f;margin-bottom:6px}
input.txt,textarea.txt{width:100%;border-radius:12px;border:1px solid #c9a45c55;background:var(--paper);color:var(--ink);
  padding:12px 14px;font-size:16px;line-height:1.45;outline:none}
textarea.txt{min-height:104px;resize:vertical;font-family:'Lato'}
input.txt:focus,textarea.txt:focus{border-color:var(--gold);box-shadow:0 0 0 3px #c9a45c33}
textarea.txt::placeholder,input.txt::placeholder{color:#8f8273;font-style:italic}

.panel{margin:0 16px;padding:16px;border-radius:18px;background:linear-gradient(180deg,#ffffff0d,#ffffff06);border:1px solid #c9a45c33;
  box-shadow:0 10px 30px #0005}
.panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.panel-h h3{font-size:18px}
.prompt{font-family:'Playfair Display',serif;font-style:italic;color:#e3d2b2;font-size:14.5px;line-height:1.4;margin:2px 0 10px}
.status{display:flex;align-items:center;gap:6px;font-size:13px;color:#a7c8a0;margin-top:10px}
.status.dim{color:#b9a98f}

/* lock + badges on cards */
.lockveil{position:absolute;inset:0;border-radius:4.8cqw;background:radial-gradient(ellipse at 50% 45%,#0000 0%,#000a 80%);display:flex;
  align-items:flex-end;justify-content:center;padding-bottom:20cqw;pointer-events:none}
.card3d.locked .face.f{filter:saturate(.55) brightness(.62)}
.lockpill{display:flex;align-items:center;gap:2cqw;font-family:'Cinzel';font-size:3.6cqw;letter-spacing:1cqw;text-transform:uppercase;color:var(--cream);
  background:#0009;border:1px solid #ffffff30;padding:2cqw 4cqw;border-radius:99px;backdrop-filter:blur(2px)}
.lockpill svg{width:4cqw;height:4cqw;fill:none;stroke:currentColor;stroke-width:2}
.donemark{position:absolute;top:-2.2cqw;right:-2.2cqw;z-index:3;width:10cqw;height:10cqw;border-radius:50%;background:linear-gradient(#e0c182,#b08a45);
  color:#21160f;display:flex;align-items:center;justify-content:center;font-size:5.4cqw;font-weight:700;box-shadow:0 1cqw 3cqw #0008;transform:translateZ(1px)}
.newmark{position:absolute;top:-2.2cqw;left:-2.2cqw;z-index:3;padding:1.2cqw 3cqw;border-radius:99px;background:var(--rose);color:#2a1a17;font-family:'Cinzel';
  font-size:3.2cqw;letter-spacing:.6cqw;font-weight:700;text-transform:uppercase;box-shadow:0 1cqw 3cqw #0008}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* ---------- start / how to ---------- */
.start{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 22px 0;min-height:calc(100svh - 64px - 28px - var(--safe-t) - var(--safe-b))}
.start .card3d{--cw:min(64vw,250px,calc((100svh - 420px) * .714))}
.start .tap-hint{margin:12px 0 16px}
.tap-hint{font-family:'Cinzel';font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#a8977c;text-align:center}
.start form{width:100%;max-width:380px}
.fine{font-size:12.5px;line-height:1.5;color:#a8977c;text-align:center;margin-top:14px}
.howto{display:flex;flex-direction:column;align-items:center;padding:0 20px}
.howto .card3d{--cw:min(80vw,320px)}
.applist{list-style:none;width:100%;max-width:400px;margin:18px 0 18px}
.applist li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid #ffffff12;font-size:14.5px;line-height:1.45;color:#e9dcc4}
.applist li b{color:var(--cream)}
.applist .ic{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid #c9a45c88;color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display';font-style:italic}

/* ---------- deck ---------- */
.seg{display:flex;justify-content:center;gap:6px;margin:0 16px 10px}
.seg button{padding:6px 12px;border-radius:99px;font-family:'Cinzel';font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:#bba98a;border:1px solid transparent}
.seg button.on{color:var(--cream);border-color:var(--segc,#c9a45c);background:#ffffff0c}
.seg button[data-g=stag]{--segc:#5b77ad}.seg button[data-g=vixen]{--segc:#b24a62}.seg button[data-g=together]{--segc:var(--rose)}
.deck{--cw:min(70vw,292px,calc((100svh - 470px) * .714));display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:10px calc((100vw - var(--cw)) / 2) 18px;gap:16px;overscroll-behavior-x:contain}
.deck::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:center;scroll-snap-stop:always;flex:none;transition:transform .35s, opacity .35s}
.slide:not(.cur){transform:scale(.9);opacity:.55}
.deckmeta{display:flex;justify-content:space-between;align-items:center;margin:0 22px 12px}
.dots{display:flex;gap:5px}
.dots i{width:6px;height:6px;border-radius:50%;background:#ffffff26}
.dots i.s{background:#5b77ad80}.dots i.v{background:#b24a6280}.dots i.t{background:#d9a89b70}
.dots i.on{transform:scale(1.5);background:var(--gold)}
.thread{margin:4px 0 12px;display:flex;flex-direction:column;gap:8px}
.bub{max-width:88%;padding:10px 13px;border-radius:14px;font-size:15px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.bub small{display:block;font-family:'Cinzel';font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:3px;opacity:.85;white-space:normal}
.bub.in{align-self:flex-start;background:var(--paper);color:var(--ink);border-bottom-left-radius:4px}
.bub.in small{color:#8a7650}
.bub.out{align-self:flex-end;background:#c9a45c26;border:1px solid #c9a45c55;color:var(--cream);border-bottom-right-radius:4px}
.bub.out small{color:var(--gold-2)}
.bub.note{align-self:center;background:none;border:1px dashed #ffffff30;color:#cbbba0;font-style:italic;font-size:13px;padding:6px 12px}
.linkrow{display:flex;justify-content:center;margin:14px 16px 0}
.locknote{display:flex;gap:12px;align-items:flex-start}
.locknote svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.5;margin-top:2px}
.words-in{display:flex;gap:8px;margin-top:10px}.words-in>label{flex:1}

/* ---------- received ---------- */
.recv-head{display:flex;gap:16px;align-items:center;padding:4px 20px 14px}
.recv-head .card3d{--cw:108px;cursor:default}
.recv-head .card3d .face{box-shadow:0 8px 20px #0009}
.from{color:#e3d2b2;font-family:'Playfair Display';font-style:italic;font-size:15px;margin-top:4px}
.answer{margin:0 16px 12px;padding:18px 18px 16px;background:var(--paper);color:var(--ink);border-radius:16px;position:relative;
  font-size:16.5px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word;box-shadow:0 10px 30px #0006;border-left:4px solid var(--k,#c9a45c)}
.answer:before{content:"\201C";position:absolute;top:-14px;left:12px;font-family:'Playfair Display';font-size:54px;color:var(--gold);line-height:1}
.okline{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 16px 16px;color:#a7c8a0;font-size:13.5px}
.okline b{display:inline-flex;width:20px;height:20px;border-radius:50%;background:#a7c8a033;align-items:center;justify-content:center;font-size:12px}
.banner{margin:0 16px 14px;padding:12px 14px;border-radius:14px;border:1px solid #b24a62;background:linear-gradient(90deg,#6b142655,#6b142622);font-size:14.5px;line-height:1.45}
.banner b{font-family:'Playfair Display';font-weight:500;font-size:16px;color:var(--cream)}

/* ---------- conversation ---------- */
.conv{padding:0 16px}
.conv-card{margin-bottom:14px;border-radius:16px;overflow:hidden;border:1px solid #ffffff14;background:#ffffff07}
.conv-h{padding:12px 14px;background:radial-gradient(ellipse at 50% 0%,var(--c1),var(--c2));display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--a)}
.conv-h .n{font-family:'Playfair Display';font-style:italic;font-size:26px;color:var(--a);line-height:1;width:30px;text-align:center}
.conv-h .l{font-family:'Cinzel';font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--a)}
.conv-h .t{font-family:'Playfair Display';font-size:17px;color:var(--cream)}
.conv-b{padding:12px}
.empty{text-align:center;padding:30px 24px}
.empty .lede{margin:8px 0 18px}

/* ---------- settings ---------- */
.set{padding:0 16px}
.set section{margin-bottom:14px;padding:16px;border-radius:16px;background:#ffffff08;border:1px solid #ffffff12}
.set h3{font-size:17px;margin-bottom:8px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:14.5px;color:#e9dcc4}
.kv span:last-child{color:var(--cream);text-align:right}

/* ---------- overlays ---------- */
#overlay>*{position:fixed;inset:0;z-index:60}
.scrim{background:#07040699;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;animation:fadein .25s}
.scrim.mid{align-items:center;padding:20px}
@keyframes fadein{from{opacity:0}}
.sheet{width:100%;max-width:520px;background:linear-gradient(#2a1d24,#1a1116);border-top:1px solid #c9a45c66;border-radius:22px 22px 0 0;
  padding:22px 20px calc(var(--safe-b) + 20px);animation:up .3s cubic-bezier(.3,.7,.2,1);box-shadow:0 -10px 40px #000a}
.scrim.mid .sheet{border-radius:20px;border:1px solid #c9a45c55;animation:pop .25s}
@keyframes up{from{transform:translateY(40%)}}
@keyframes pop{from{transform:scale(.94);opacity:0}}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:#ffffff30;margin:-8px auto 14px}
.linkbox{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#5b4f44;background:var(--paper);border-radius:10px;padding:10px 12px;
  word-break:break-all;max-height:84px;overflow:auto;margin:12px 0;border:1px solid #c9a45c55;user-select:all}

.pause{background:radial-gradient(120% 80% at 50% 35%,#2f2c33,#141316 70%,#0b0a0c);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--safe-t) + 30px) 30px calc(var(--safe-b) + 30px);animation:fadein .6s}
.breath{width:150px;height:150px;border-radius:50%;border:1px solid var(--rose);position:relative;margin-bottom:34px;animation:breathe 9s ease-in-out infinite}
.breath:before,.breath:after{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid #d9a89b66}
.breath:after{inset:-14px;border-color:#d9a89b26}
.breath span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Cinzel';font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--rose)}
@keyframes breathe{0%,100%{transform:scale(.82);opacity:.75}45%,55%{transform:scale(1.08);opacity:1}}
.pause h1{font-size:34px;margin-bottom:6px}
.pause .lede{font-size:22px;color:var(--rose);margin-bottom:20px}
.pause p.muted{max-width:320px;margin:0 auto 28px;font-size:15px;color:#cbbba0}
.pause .stack{width:100%;max-width:340px}

.lock{background:radial-gradient(ellipse at 50% 35%,#1a1424,#07060a 85%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px}
.pindots{display:flex;gap:16px;margin:22px 0 30px}
.pindots i{width:14px;height:14px;border-radius:50%;border:1px solid var(--gold)}
.pindots i.f{background:var(--gold)}
.keypad{display:grid;grid-template-columns:repeat(3,74px);gap:16px}
.keypad button{height:74px;border-radius:50%;border:1px solid #c9a45c55;font-family:'Playfair Display';font-size:28px;color:var(--cream);background:#ffffff06}
.keypad button:active{background:#c9a45c33}
.keypad button.k-t{border:0;font-family:'Lato';font-size:14px;color:#b9a98f;background:none}

.toast{position:fixed;left:50%;top:calc(var(--safe-t) + 74px);transform:translate(-50%,-14px);opacity:0;z-index:80;pointer-events:none;
  background:#f8f2e7;color:#2a2622;padding:11px 18px;border-radius:99px;font-size:14px;box-shadow:0 8px 24px #000a;transition:.3s;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- packs ---------- */
.picks{display:flex;gap:14px;width:100%;max-width:440px}
.pick{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0;border-radius:16px}
.pick .card3d{--cw:100%;width:100%}
.pick:active .card3d{transform:scale(.97)}
.pick .card3d{transition:transform .2s}
.pick-l{margin-top:14px;font-family:'Cinzel',serif;font-weight:600;font-size:13px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold)}
.pick-d{margin-top:6px;font-size:13px;line-height:1.45;color:#cbbba0;padding:0 4px}
.packname{text-align:center;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:#d8c39a;margin:-4px 0 8px}
.packname:before,.packname:after{content:"";display:inline-block;width:18px;height:1px;background:var(--pc);vertical-align:middle;margin:0 8px}
.conv-sec{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);margin:6px 2px 10px}
.linkish{font:inherit;color:var(--gold-2);text-decoration:underline;text-underline-offset:3px;letter-spacing:inherit;text-transform:inherit}
.applist .ic .pz{display:block;width:2.5px;height:10px;background:var(--gold);border-radius:1px;margin:0 1.5px}
.seg{margin-top:2px}
.steps{margin:4px 0 14px 22px;color:#e9dcc4;font-size:15px;line-height:1.5}.steps li{padding:3px 0}.steps b{color:var(--cream)}