/* Healing Together · room v6 — one thing at a time */
body.room{--ivory:#f4eee2;--soft:rgba(244,238,226,.62);--faint:rgba(244,238,226,.38);--gold:#f0c27a;--glass:rgba(22,20,44,.58);--hair:rgba(244,238,226,.09);
 overflow:hidden;height:100dvh;padding:0;background:radial-gradient(80% 60% at 50% 42%,#17143a 0%,#0a0920 55%,#050512 100%);color:var(--ivory)}
#c{position:fixed;inset:0;width:100%;height:100%}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.tint{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity 3s;background:radial-gradient(60% 45% at 50% 44%,rgba(240,194,122,.12),transparent 70%)}
body.peak .tint{opacity:1}
/* top bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:max(18px,env(safe-area-inset-top)) 22px 0;transition:opacity .8s}
.leave{font-size:13px;color:var(--faint);text-decoration:none;letter-spacing:.02em}.leave:hover{color:var(--soft)}
.status{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.st{font-size:13px;color:var(--soft);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.st b{color:var(--ivory);font-weight:500}.sep{margin:0 8px;color:var(--faint)}
.ldot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);margin-right:7px;vertical-align:1px;animation:lp 2.4s ease-in-out infinite}
@keyframes lp{50%{opacity:.35}}
body.live .st{color:var(--ivory)}
.pk{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.8}.pk:empty{display:none}
.icon{justify-self:end;background:none;border:0;color:var(--faint);cursor:pointer;padding:6px;display:flex}.icon .w{opacity:0;transition:opacity .4s}.icon.on{color:var(--ivory)}.icon.on .w{opacity:1}
/* center */
.mid{position:fixed;left:0;right:0;top:50%;transform:translateY(-58%);z-index:5;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 28px;pointer-events:none;transition:opacity .8s}
.line{font-family:var(--serif);font-weight:300;font-size:clamp(28px,6.4vw,44px);line-height:1.22;letter-spacing:-.01em;max-width:17ch;min-height:2.5em;display:flex;align-items:center;justify-content:center;transition:opacity 1.2s;text-shadow:0 2px 30px #050512}
.breathe{margin-top:22px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--faint);animation:bc 10s ease-in-out infinite}
@keyframes bc{0%,100%{opacity:.45}40%{opacity:.9}}
.ded{margin-top:30px;font-size:13px;color:var(--faint);opacity:0;transition:opacity .9s}.ded.on{opacity:1}.ded em{font-family:var(--serif);font-style:italic;color:var(--soft)}.ded.mine em{color:var(--gold)}
/* dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;padding:0 22px max(14px,env(safe-area-inset-bottom));transition:opacity .8s}
.primary{min-width:220px;padding:19px 40px;border-radius:99px;border:0;cursor:pointer;font:500 17px var(--sans);letter-spacing:.01em;color:#1d1406;background:linear-gradient(180deg,#f6d394,#e9b465);box-shadow:0 14px 50px rgba(240,194,122,.22),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .2s,box-shadow .4s,background .6s}
.primary:active{transform:scale(.97)}
.primary.done{background:rgba(240,194,122,.14);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(240,194,122,.4)}
.primary.join{animation:jg 3s ease-in-out infinite}@keyframes jg{50%{box-shadow:0 14px 70px rgba(240,194,122,.42),inset 0 1px 0 rgba(255,255,255,.5)}}
.more{width:56px;height:56px;border-radius:50%;border:1px solid var(--hair);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--soft);font:600 16px var(--sans);letter-spacing:1px;cursor:pointer}
.dock .crisis{position:static;flex-basis:100%;background:none;border:0;backdrop-filter:none;padding:8px 0 0;font-size:11px;color:var(--faint);letter-spacing:.01em}
.dock .crisis a{color:var(--soft)}
body.instep .bar,body.instep .mid,body.instep .dock,body.sheeted .mid{opacity:0;pointer-events:none}
body.sheeted:not(.instep) .dock{opacity:.25}
.dock{border:0!important;max-width:none!important;margin:0!important}
/* toast: one at a time, lower third */
.toasts{position:fixed;left:0;right:0;bottom:calc(150px + env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:none;z-index:9}
.toast{font-size:13px;color:var(--soft);padding:8px 16px;border-radius:99px;background:rgba(14,12,34,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:tf 4.2s ease forwards;max-width:86vw;text-align:center}
.toast b{color:var(--ivory);font-weight:500}.toast .lit{font-family:var(--serif);font-style:italic}.toast .lit b{color:var(--gold);font-style:normal;font-family:var(--sans)}
@keyframes tf{0%{opacity:0}15%,75%{opacity:1}100%{opacity:0}}
/* seen */
.seen{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(circle,rgba(240,194,122,.16),rgba(5,5,18,.86) 65%);opacity:0;pointer-events:none;transition:opacity 1s}
.seen.on{opacity:1}.seen h2{font-family:var(--serif);font-weight:300;font-size:clamp(36px,8vw,58px)}.seen p{color:var(--soft);margin-top:12px;font-size:16px;max-width:32ch}
/* sheets */
.scrim{position:fixed;inset:0;z-index:19;background:rgba(3,3,12,.45);opacity:0;pointer-events:none;transition:opacity .5s}
body.sheeted .scrim{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:560px;margin:0 auto;max-height:88dvh;overflow:auto;text-align:left;
 background:rgba(20,18,42,.72);backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);border:1px solid var(--hair);border-bottom:0;border-radius:30px 30px 0 0;
 padding:34px 28px calc(30px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .6s cubic-bezier(.2,.8,.2,1);box-shadow:0 -20px 80px rgba(0,0,0,.4)}
.sheet.open{transform:none}
.sheet h2{font-family:var(--serif);font-weight:300;font-size:30px;line-height:1.15;margin-bottom:10px}
.sheet p{color:var(--soft);line-height:1.55;margin-bottom:16px;font-size:15px}
.sheet .x{position:absolute;right:18px;top:16px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);border:0;color:var(--soft);font-size:18px;cursor:pointer}
.sheet .eyebrow{font-size:11px;letter-spacing:.18em;color:var(--gold);margin-bottom:10px}
.sheet input{padding:15px 16px;border-radius:14px;border:1px solid var(--hair);background:rgba(255,255,255,.05);color:var(--ivory);font:16px var(--sans);margin-bottom:12px;width:100%}
.sheet .btn{width:100%;text-align:center;padding:17px;font-size:16px;font-weight:500;background:linear-gradient(180deg,#f6d394,#e9b465);box-shadow:none}
.menu{display:flex;flex-direction:column;margin:0 -8px 6px}
.menu button{display:flex;flex-direction:column;gap:3px;text-align:left;background:none;border:0;color:var(--ivory);padding:14px 8px;border-bottom:1px solid var(--hair);cursor:pointer;font:inherit}
.menu button span{font-family:var(--serif);font-size:22px;font-weight:300}.menu button small{font-size:13px;color:var(--faint)}
.menu button.done span{color:var(--gold)}
.label{font-size:11px!important;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)!important;margin:22px 0 10px!important}
.chips{display:flex;gap:8px}
.chips button{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--hair);color:var(--soft);padding:12px;border-radius:99px;font:15px var(--sans);cursor:pointer;transition:.3s}
.chips button.on{border-color:rgba(240,194,122,.6);color:var(--ivory);background:rgba(240,194,122,.1)}
.peakinfo{font-size:13px!important;margin-bottom:8px!important;color:var(--soft)!important}
.cat{display:flex;flex-direction:column;position:relative}
.cat span{padding:11px 0;border-bottom:1px solid var(--hair);color:var(--ivory);font-size:15px;cursor:pointer}.cat .soon{color:var(--faint)}
.cat p{font-size:13px!important;color:var(--soft)!important;margin:10px 0 0!important}.cat p:empty{display:none}
.foot{text-align:center;margin:26px 0 0!important}.foot a{color:var(--gold);font-size:14px;text-decoration:none}
/* session step: centered card */
.iwsheet{top:50%;bottom:auto;left:16px;right:16px;border-radius:32px;border-bottom:1px solid var(--hair);text-align:center;transform:translateY(-44%) scale(.97);opacity:0;pointer-events:none;transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1);padding:40px 28px 30px}
.iwsheet.open{transform:translateY(-50%);opacity:1;pointer-events:auto}
.iwsheet h2{font-size:22px;margin-bottom:6px}
.iwsheet .what{font-size:14px}.iwsheet .by{font-family:var(--serif);font-weight:300;font-size:clamp(22px,5.6vw,28px);line-height:1.35;color:var(--ivory);min-height:4.2em;display:flex;align-items:center;justify-content:center;transition:opacity .6s;margin:6px 0 18px}
.tap{display:block;margin:0 auto;min-width:230px;padding:19px 34px;border-radius:99px;border:0;background:linear-gradient(180deg,#f6d394,#e9b465);color:#1d1406;font:400 20px var(--serif);cursor:pointer;transition:opacity .6s,transform .2s;box-shadow:0 14px 50px rgba(240,194,122,.2)}.tap:active{transform:scale(.97)}
.pulse{height:30px;display:flex;justify-content:center;align-items:center}.pulse i{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 22px var(--gold)}.pulse.on i{animation:pl 5s ease-in-out infinite}
@keyframes pl{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.9);opacity:1}}
.dots{display:flex;gap:7px;justify-content:center;margin:18px 0 6px}.dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.18)}.dots i.on{background:var(--gold)}
.note{font-size:12px!important;color:var(--faint)!important;margin:8px 0 0!important}.note a{color:var(--gold)}
.otp{font-family:ui-monospace,monospace;font-size:28px;letter-spacing:.3em;color:var(--gold);margin:8px 0 12px;padding:12px;border:1px dashed rgba(240,194,122,.35);border-radius:14px;text-align:center}
/* chat */
.bubbles{display:flex;flex-direction:column;gap:8px;min-height:120px;justify-content:flex-end;margin-bottom:14px}
.bub{font-size:15px;color:var(--soft);animation:bf 9s forwards}.bub b{color:var(--ivory);font-weight:500;margin-right:6px}.bub.mine b{color:var(--gold)}
@keyframes bf{0%{opacity:0}8%,75%{opacity:1}100%{opacity:0}}
.chat form{display:flex;gap:8px}.chat input{flex:1;margin:0!important;border-radius:99px!important}
.chat form button{border:0;border-radius:99px;padding:0 20px;background:rgba(240,194,122,.18);color:var(--ivory);font:500 14px var(--sans);cursor:pointer}
/* pay */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.door{border:1px solid var(--hair);border-radius:20px;padding:16px;background:rgba(255,255,255,.03);cursor:pointer;color:var(--ivory);font:inherit;text-align:left}
.door b{display:block;font-family:var(--serif);font-weight:300;font-size:21px}.door span{font-size:12px;color:var(--faint)}
.door.feat{grid-column:1/-1;border-color:rgba(240,194,122,.35)}
.prog{height:3px;border-radius:3px;background:rgba(255,255,255,.08);margin:10px 0 6px;overflow:hidden}.prog i{display:block;height:100%;background:var(--gold)}
.thanks{display:none;padding:20px 0;text-align:center}.thanks h2{color:var(--gold)}
.gate{display:none}
@media (min-width:760px){.sheet:not(.iwsheet){bottom:24px;border-radius:30px;border-bottom:1px solid var(--hair)}.iwsheet{left:0;right:0;max-width:520px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
