/* Ember — Victorian gothic dark-romance theme. Candlelit, blood-red, elegant. */
:root{
  --bg:#070409; --bg2:#0e0716;
  --card:rgba(24,13,21,.82); --card2:rgba(34,17,29,.66);
  --line:rgba(163,22,33,.30); --line-gold:rgba(201,162,39,.32);
  --txt:#ede4d8; --muted:#b39a9e; --dim:#7d6169;
  --blood:#a31621; --blood2:#e5383b; --purple:#5b2a86; --purple-deep:#241238;
  --gold:#c9a227; --candle:#e8b34b;
  --ok:#8fd6a0; --warn:#e8b34b; --bad:#e5383b;
  --grad:linear-gradient(135deg,#7d1420,#4a2368 55%,#171233);
  --grad-btn:linear-gradient(135deg,#8b1420,#5b2a86);
  --display:'Cinzel Decorative','Cormorant Garamond',Georgia,serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);min-height:100vh;overflow-x:hidden}
/* vignette — the room is always dim */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
::selection{background:var(--blood);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a060c}
::-webkit-scrollbar-thumb{background:#3a1620;border-radius:8px;border:2px solid #0a060c}
::-webkit-scrollbar-thumb:hover{background:var(--blood)}
.bg-orbs{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg-orbs span{position:absolute;border-radius:50%;filter:blur(100px);opacity:.30;animation:drift 26s ease-in-out infinite alternate}
.bg-orbs span:nth-child(1){width:560px;height:560px;background:#7d1420;top:-180px;left:-140px}
.bg-orbs span:nth-child(2){width:480px;height:480px;background:#3b1d5e;bottom:-160px;right:-120px;animation-delay:-9s}
.bg-orbs span:nth-child(3){width:280px;height:280px;background:#b97f1f;top:42%;left:62%;opacity:.10;animation-delay:-16s}
@keyframes drift{to{transform:translate(70px,46px) scale(1.14)}}
@keyframes flicker{0%,100%{opacity:1}42%{opacity:.86}58%{opacity:.94}70%{opacity:.8}}
.hidden{display:none!important}
a{color:#d98a94}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}

/* ---------- top bar ---------- */
#topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;
  padding:11px 22px;background:rgba(7,4,9,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(201,162,39,.12)}
.brand{font-family:var(--display);font-size:1.55rem;color:var(--txt);text-decoration:none;letter-spacing:3px}
.brand-dot{color:var(--blood2)}
#mainnav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
#mainnav a{color:var(--muted);text-decoration:none;font-size:.86rem;font-weight:600;letter-spacing:.6px;padding:8px 13px;border-radius:4px;transition:.2s;text-transform:uppercase;font-size:.78rem}
#mainnav a:hover{color:var(--candle);background:rgba(163,22,33,.14)}
#mainnav a.active{color:#ffe9b0;background:var(--grad-btn);box-shadow:inset 0 0 0 1px rgba(201,162,39,.4)}
#navToggle{display:none;background:none;border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:8px 12px;font-size:1.1rem}

/* ---------- layout ---------- */
#app{max-width:1080px;margin:0 auto;padding:26px 18px 90px;position:relative;z-index:1}
.page{animation:fadeUp .4s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
h1{font-family:var(--serif);font-weight:600;font-size:2.4rem;margin-bottom:6px;letter-spacing:.5px;color:#f3e9d2}
h2{font-family:var(--serif);font-weight:600;font-size:1.55rem;margin:22px 0 10px;color:#e8d5b5}
h3{font-family:var(--serif);font-size:1.2rem;color:#e8d5b5}
.sub{color:var(--muted);margin-bottom:18px;line-height:1.6}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(0,0,0,.55),0 18px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(201,162,39,.08)}
.card+.card{margin-top:14px}
.filigree{text-align:center;color:var(--gold);opacity:.7;letter-spacing:8px;margin:18px 0;font-size:.9rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.grid2,.grid3{grid-template-columns:1fr}#mainnav{display:none}#mainnav.open{display:flex;flex-direction:column;position:absolute;top:58px;right:12px;background:#150b14;border:1px solid var(--line);border-radius:10px;padding:8px;z-index:70}#navToggle{display:block}}

/* ---------- bottom tab bar (thumb-first navigation) ---------- */
#tabbar{display:none}
@media(max-width:760px){
  #navToggle{display:none !important}
  #app{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  /* Liquid Glass tab bar */
  #tabbar{display:flex;position:fixed;z-index:60;
    transition:transform .32s ease,opacity .32s ease;
    left:14px;right:14px;bottom:calc(10px + env(safe-area-inset-bottom));
    border-radius:32px;padding:8px;
    background:linear-gradient(180deg,rgba(66,30,44,.38),rgba(18,9,16,.52));
    -webkit-backdrop-filter:blur(30px) saturate(1.9);
    backdrop-filter:blur(30px) saturate(1.9);
    border:1px solid rgba(255,236,200,.16);
    box-shadow:0 16px 48px rgba(0,0,0,.55),
      inset 0 1px 1px rgba(255,255,255,.22),
      inset 0 -1px 2px rgba(0,0,0,.35);}
  #tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    background:none;border:none;color:var(--muted);text-decoration:none;
    font-size:.68rem;font-weight:600;letter-spacing:.4px;padding:8px 2px;border-radius:22px;
    font-family:var(--font);cursor:pointer;transition:background .25s,color .25s,transform .15s}
  #tabbar .tab.active{color:#ffe9b0;
    background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.04));
    box-shadow:inset 0 1px 1px rgba(255,255,255,.25),
      inset 0 -1px 2px rgba(0,0,0,.25),
      0 4px 18px rgba(125,20,32,.35)}
  #tabbar .t-ico{font-size:1.45rem;position:relative;line-height:1.2}
  #tabbar .t-badge{position:absolute;top:-6px;right:-12px;min-width:18px;height:18px;border-radius:9px;
    background:#c0272d;color:#fff;font-size:.66rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
  #tabbar .t-badge.hidden{display:none}
  #tabbar.tab-hidden{transform:translateY(calc(100% + 26px));opacity:0;pointer-events:none}
}
/* ---------- more sheet ---------- */
#moresheet{position:fixed;inset:0;z-index:120;background:rgba(4,2,6,.7);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;opacity:0;transition:opacity .22s}
#moresheet.hidden{display:none}
#moresheet.show{opacity:1}
#moresheet .sheet-card{width:100%;max-height:72vh;overflow-y:auto;
  background:linear-gradient(180deg,rgba(48,22,34,.72),rgba(22,11,19,.82));
  -webkit-backdrop-filter:blur(30px) saturate(1.8);
  backdrop-filter:blur(30px) saturate(1.8);
  border-top:1px solid rgba(255,236,200,.18);border-radius:24px 24px 0 0;padding:10px 18px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(30px);transition:transform .22s;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 -12px 48px rgba(0,0,0,.5)}
#moresheet.show .sheet-card{transform:none}
#moresheet .sheet-handle{width:44px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 12px}
#moresheet .sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#moresheet .sheet-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 6px;
  background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:12px;color:var(--txt);text-decoration:none;font-size:.8rem}
#moresheet .sheet-item.active{border-color:var(--gold);color:#ffe9b0}
#moresheet .s-ico{font-size:1.7rem;position:relative}
#moresheet .t-badge{position:absolute;top:-6px;right:-14px;min-width:18px;height:18px;border-radius:9px;
  background:#c0272d;color:#fff;font-size:.66rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
#moresheet .t-badge.hidden{display:none}

/* ---------- buttons / inputs ---------- */
.btn{border:1px solid transparent;border-radius:6px;padding:11px 24px;font-weight:700;font-size:.92rem;letter-spacing:1.2px;text-transform:uppercase;transition:.22s;display:inline-block;text-decoration:none;text-align:center;font-family:var(--sans)}
.btn-primary{background:var(--grad-btn);color:#ffe9b0;box-shadow:0 6px 26px rgba(125,20,32,.5),inset 0 0 0 1px rgba(201,162,39,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(125,20,32,.65),inset 0 0 0 1px rgba(201,162,39,.55);color:#fff}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.btn-ghost:hover{color:var(--candle);border-color:var(--gold)}
.btn-danger{background:rgba(229,56,59,.08);color:#ff8f8f;border:1px solid rgba(229,56,59,.45)}
.btn-sm{padding:7px 14px;font-size:.76rem}
.btn-lg{padding:15px 36px;font-size:1rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.field{margin-bottom:14px}
.field label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:6px;letter-spacing:1.4px;text-transform:uppercase}
/* As You Are (build 2026.11.02.15): the identity word chips — one
   tap fills the line, one tap holds a Seek word. Plain dress, the
   house's gold when held. */
.id-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.id-chip{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.85rem;font-weight:600;padding:7px 14px;cursor:pointer;transition:.2s}
.id-chip:hover{border-color:var(--gold);color:var(--txt)}
.id-chip.on{background:rgba(201,162,39,.16);border-color:var(--gold);color:var(--gold)}
/* The welcome words at the doors where new souls arrive. */
.welcome-line{font-family:var(--serif);color:var(--candle);font-size:1.05rem;line-height:1.5;text-align:center;margin:14px auto;max-width:520px}
.input,textarea.input,select.input{width:100%;background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:12px 14px;font-size:.95rem;outline:none;transition:.2s}
.input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.14)}
.input::placeholder{color:#5d4a52}
textarea.input{resize:vertical;min-height:90px}
.checkbox{display:flex;gap:10px;align-items:flex-start;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:.9rem;color:var(--muted)}
.checkbox input{margin-top:3px;accent-color:var(--blood2);width:18px;height:18px}
.form-err{background:rgba(163,22,33,.14);border:1px solid rgba(229,56,59,.5);color:#ffb4b4;padding:12px 16px;border-radius:8px;margin-bottom:14px;font-size:.9rem}

/* ---------- landing ---------- */
.hero{text-align:center;padding:70px 20px 40px}
.logo-xl{font-family:var(--display);font-size:4.4rem;line-height:1.1;letter-spacing:6px;color:#f3e9d2;text-shadow:0 0 42px rgba(163,22,33,.65)}
.hero .tagline{font-size:1.35rem;color:var(--muted);margin:18px 0 6px;font-family:var(--serif);font-style:italic}
.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.badges18{display:inline-block;margin-top:20px;border:1px solid var(--gold);color:var(--gold);border-radius:4px;padding:7px 20px;font-size:.78rem;font-weight:700;letter-spacing:4px;animation:flicker 5s infinite}
.feature-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:44px}
.feature-row .card{text-align:center}
.feature-row .ico{font-size:2rem;margin-bottom:8px;filter:sepia(.4)}
@media(max-width:760px){.feature-row{grid-template-columns:1fr}.logo-xl{font-size:3rem}}

/* ---------- the shop window: what's inside the house (2026-10-29) ---------- */
.showcase{max-width:1060px;margin:6px auto 0;padding:0 20px 58px;text-align:center}
.sc-kicker{font-size:.72rem;letter-spacing:6px;color:var(--gold);font-weight:700;margin-bottom:10px}
.sc-title{font-family:var(--serif);font-size:2rem;margin:0 0 26px;color:#f3e9d2}
/* The entrance hall (build 2026.11.09.6): the What's New tiles
   stand in named chambers — a header, a breath, a row of doors —
   so the whole house reads at a glance like a grand hall. */
.wn-hall-line{text-align:center;max-width:620px;margin:0 auto 8px;font-style:italic}
.wn-chamber{margin:38px auto 4px;max-width:820px;text-align:center}
.wn-chamber-h{font-family:var(--serif);font-size:1.45rem;letter-spacing:.03em;color:var(--gold);margin:0 0 4px}
.wn-chamber-ico{font-size:1.3rem}
.wn-chamber-line{margin:0 auto;max-width:560px}
.wn-chamber::after{content:'';display:block;width:120px;height:1px;margin:14px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.65}
.sc-lead{max-width:780px;margin:0 auto;text-align:center}
.sc-lead .ico{font-size:2.4rem;margin-bottom:8px;filter:sepia(.4)}
.sc-lead h3{font-size:1.35rem;margin:4px 0 8px}
.sc-row{margin-top:14px}
.sc-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
@media(max-width:760px){.sc-title{font-size:1.6rem}.showcase{padding:0 14px 44px}}
/* Your Standing (2026-10-29): the member's own gift list — Seek hall + Portrait. */
.standing-card{max-width:1060px;margin:18px auto 6px;text-align:left}
.standing-purses{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.standing-gifts{list-style:none;margin:8px 0;padding:0}
.standing-gifts li{padding:7px 0 7px 26px;position:relative;border-bottom:1px solid var(--line)}
.standing-gifts li:last-child{border-bottom:none}
.standing-gifts li::before{content:'❧';position:absolute;left:2px;top:7px;color:var(--gold)}

/* ---------- age gate ---------- */
#agegate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(4,2,6,.94);backdrop-filter:blur(8px);padding:20px}
.agegate-card{max-width:540px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:46px 38px;box-shadow:0 0 0 1px #000,0 0 90px rgba(125,20,32,.4),inset 0 1px 0 rgba(201,162,39,.12)}
.agegate-card .tagline{color:var(--muted);margin:16px 0;font-family:var(--serif);font-style:italic;font-size:1.1rem}
.agegate-card .strict{color:var(--gold);font-weight:700;letter-spacing:3px;margin-bottom:24px;font-size:.85rem;animation:flicker 6s infinite}
.agegate-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.fineprint{font-size:.75rem;color:var(--dim);line-height:1.6}

/* ---------- discover ---------- */
.deck{display:flex;flex-direction:column;align-items:center;gap:16px}
.profile-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 1px #000,0 24px 70px rgba(0,0,0,.6)}
.profile-card .ph{height:380px;background:#140a12 center/cover;position:relative;overflow:hidden}
.profile-card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(7,4,9,.85))}
.profile-card .ph .status-pill{position:absolute;top:14px;left:14px;z-index:2}
.profile-card .body{padding:18px 22px;position:relative}
.profile-card .body::before{content:"❧";position:absolute;top:-14px;right:18px;color:var(--gold);opacity:.6;font-size:1.2rem}
.profile-card .name{font-family:var(--serif);font-size:1.7rem;color:#f3e9d2}
.profile-card .looking{color:var(--gold);font-size:.85rem;font-weight:600;margin:4px 0 8px;letter-spacing:.5px}
.profile-card .bio{color:var(--muted);font-size:.93rem;line-height:1.6;margin-bottom:10px;font-family:var(--serif);font-size:1.02rem}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{background:rgba(91,42,134,.22);border:1px solid rgba(91,42,134,.55);color:#cdb4e8;font-size:.74rem;font-weight:600;padding:4px 11px;border-radius:4px;letter-spacing:.4px}
.swipe-row{display:flex;gap:18px}
.swipe-btn{width:74px;height:74px;border-radius:50%;font-size:1.7rem;border:1px solid var(--line);background:var(--card);transition:.2s;color:var(--muted)}
.swipe-btn.pass:hover{border-color:var(--dim);transform:scale(1.08);color:var(--txt)}
.swipe-btn.like{border:1px solid rgba(201,162,39,.5);background:var(--grad-btn);color:#ffe9b0;box-shadow:0 8px 30px rgba(125,20,32,.55)}
.swipe-btn.like:hover{transform:scale(1.1)}
.status-pill{display:inline-block;background:rgba(0,0,0,.6);border:1px solid var(--line);color:var(--muted);font-size:.72rem;font-weight:600;padding:5px 12px;border-radius:4px;backdrop-filter:blur(6px);letter-spacing:.6px}
.status-pill.online{color:var(--ok);border-color:rgba(143,214,160,.45)}
.empty{text-align:center;color:var(--dim);padding:60px 20px;font-family:var(--serif);font-size:1.15rem;font-style:italic}
.empty .big{font-size:3rem;margin-bottom:12px;font-style:normal}

/* ---------- matches / chat ---------- */
.match-list{display:flex;flex-direction:column;gap:10px}
.match-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;text-decoration:none;color:var(--txt);transition:.2s}
.match-row:hover{border-color:var(--gold);transform:translateX(4px)}
.avatar{position:relative;overflow:hidden;width:52px;height:52px;border-radius:50%;background:var(--grad-btn);flex-shrink:0;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.3rem;color:#ffe9b0;border:1px solid rgba(201,162,39,.4)}
.match-row .meta{flex:1;min-width:0}
.match-row .nm{font-weight:700;font-family:var(--serif);font-size:1.1rem;letter-spacing:.4px}
.match-row .last{color:var(--dim);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic;font-family:var(--serif)}
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 220px);min-height:420px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #000,0 18px 60px rgba(0,0,0,.55)}
.chat-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.3)}
.chat-head .actions{margin-left:auto;display:flex;gap:8px}
#chatLog{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:75%;padding:10px 15px;border-radius:10px;font-size:.93rem;line-height:1.55;animation:fadeUp .25s ease}
.msg.mine{align-self:flex-end;background:linear-gradient(135deg,#5e1420,#3d1c52);color:#f3e9d2;border:1px solid rgba(201,162,39,.25)}
.msg.theirs{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.msg.explicit{border:1px dashed var(--gold)}
.msg .exp-tag{display:block;font-size:.66rem;letter-spacing:2.5px;color:var(--gold);font-weight:700;margin-bottom:4px}
.msg.hidden-exp{align-self:center;background:rgba(201,162,39,.05);border:1px dashed rgba(201,162,39,.4);color:var(--dim);font-size:.82rem;text-align:center;font-family:var(--serif);font-style:italic}
.chat-input{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line);align-items:center;background:rgba(0,0,0,.3)}
.chat-input .input{flex:1}
.nc17-pill{display:flex;align-items:center;gap:8px;font-size:.74rem;letter-spacing:1px;color:var(--gold);border:1px solid rgba(201,162,39,.5);border-radius:4px;padding:9px 14px;background:rgba(201,162,39,.07);white-space:nowrap;font-weight:700}
.nc17-pill.locked{color:var(--dim);border-color:var(--line);background:transparent}

/* ---------- wall ---------- */
.announce{background:linear-gradient(135deg,rgba(201,162,39,.10),rgba(125,20,32,.14));border:1px solid rgba(201,162,39,.45);border-radius:10px;padding:16px 18px;margin-bottom:14px;box-shadow:inset 0 1px 0 rgba(201,162,39,.15)}
.announce .ttl{color:var(--gold);font-weight:700;font-size:.82rem;letter-spacing:2.5px;margin-bottom:6px}
.announce div:last-child{font-family:var(--serif);font-size:1.05rem}
.post{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:12px}
.post .head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.post .who{font-weight:700;font-family:var(--serif);letter-spacing:.5px;font-size:1.05rem}
.post .when{color:var(--dim);font-size:.78rem;margin-left:auto;font-style:italic}
.post .txt{line-height:1.65;font-size:.94rem;white-space:pre-wrap;font-family:var(--serif);font-size:1.02rem}
.post .foot{display:flex;gap:14px;margin-top:12px;align-items:center}
.post .foot button{background:none;border:none;color:var(--muted);font-size:.85rem;font-weight:600;display:flex;gap:6px;align-items:center;letter-spacing:.5px}
.post .foot button:hover,.post .foot button.on{color:var(--blood2)}
.exp-badge{font-size:.66rem;font-weight:800;letter-spacing:2px;color:var(--gold);border:1px solid rgba(201,162,39,.55);padding:3px 10px;border-radius:4px}
.comments{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.comment{background:rgba(0,0,0,.3);border-radius:8px;padding:9px 13px;font-size:.88rem;border-left:2px solid var(--blood)}
.comment .who{font-weight:700;font-size:.8rem;color:#d98a94}

/* ---------- toggle switch ---------- */
.toggle-row{display:flex;align-items:center;gap:14px;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.toggle-row .txt{flex:1}
.toggle-row .ttl{font-weight:700;font-family:var(--serif);font-size:1.1rem;letter-spacing:.5px}
.toggle-row .dsc{color:var(--muted);font-size:.84rem;margin-top:4px;line-height:1.6;font-family:var(--serif);font-size:.95rem}
.switch{position:relative;width:58px;height:30px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#2a1218;border-radius:4px;transition:.25s;border:1px solid var(--line)}
.slider:before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;background:#5d4a52;border-radius:3px;transition:.25s}
.switch input:checked+.slider{background:linear-gradient(135deg,#6d1420,#8b6d1f);border-color:var(--gold);box-shadow:0 0 18px rgba(201,162,39,.35)}
.switch input:checked+.slider:before{transform:translateX(28px);background:var(--gold)}
.nc17-banner{border:1px solid rgba(201,162,39,.45);background:rgba(201,162,39,.05);border-radius:10px;padding:16px 18px;font-size:.9rem;color:#d8c08a;line-height:1.7;margin-bottom:14px;font-family:var(--serif);font-size:1rem}

/* ---------- spark deck ---------- */
.deck-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.deck-tabs .btn.on{background:var(--grad-btn);color:#ffe9b0;border-color:rgba(201,162,39,.5)}
.spark-card{background:var(--card2);border:1px solid var(--line-gold);border-radius:10px;padding:34px 26px;margin-bottom:12px;min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:0 0 0 1px #000,inset 0 0 60px rgba(125,20,32,.12)}
.spark-card p{font-family:var(--serif);font-size:1.4rem;font-style:italic;line-height:1.6;color:#f3e9d2}

/* ---------- admin ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center}
.stat .n{font-family:var(--serif);font-size:2rem;color:#f3e9d2}
.stat .l{color:var(--dim);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;margin-top:4px}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;color:var(--dim);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;padding:10px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px;border-bottom:1px solid rgba(163,22,33,.12);vertical-align:middle}
.pill{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:4px;letter-spacing:1.2px}
.pill.gold{background:rgba(201,162,39,.13);color:var(--gold);border:1px solid rgba(201,162,39,.45)}
.pill.green{background:rgba(143,214,160,.1);color:var(--ok);border:1px solid rgba(143,214,160,.35)}
.pill.red{background:rgba(229,56,59,.1);color:#ff8f8f;border:1px solid rgba(229,56,59,.4)}
.pill.gray{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--line)}

/* ---------- photos ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:12px}
.photo-cell{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:1;background:#140a12;border:1px solid var(--line)}
.photo-cell img{width:100%;height:100%;object-fit:cover;display:block}
.photo-cell .p-actions{position:absolute;inset:auto 0 0 0;display:flex;gap:6px;justify-content:center;padding:8px;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.photo-cell .p-actions button{background:rgba(0,0,0,.65);border:1px solid var(--line);color:#fff;font-size:.7rem;border-radius:4px;padding:4px 10px;letter-spacing:.5px}

/* ---------- toast / misc ---------- */
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#1c0d12;border:1px solid var(--blood2);color:var(--txt);padding:13px 26px;border-radius:6px;z-index:200;font-size:.9rem;font-weight:600;box-shadow:0 10px 40px rgba(0,0,0,.7);animation:fadeUp .3s ease;max-width:90vw;text-align:center;font-family:var(--serif);font-size:1rem}
.match-flash{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;background:rgba(4,2,6,.9);backdrop-filter:blur(6px)}
.match-flash .inner{text-align:center;animation:fadeUp .4s ease}
.match-flash h1{font-size:3rem;font-family:var(--display);letter-spacing:4px;background:linear-gradient(135deg,#e5383b,#c9a227);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.prompt-row{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:10px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(163,22,33,.14);font-size:.9rem}
.kv .k{color:var(--dim);letter-spacing:.6px;text-transform:uppercase;font-size:.74rem;flex-shrink:0}
/* The Connected (Treasury, build .32): each Drive stands in its own
 * stacked block — the free-space line is prominent and wraps with
 * the card, never clipped by a flex row at phone width. */
.drive-slot{padding:12px 0;border-bottom:1px solid rgba(163,22,33,.14)}
.drive-slot:last-child{border-bottom:none;padding-bottom:2px}
.drive-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:.95rem}
.drive-head .sub{margin-bottom:0}
.drive-free{font-size:1.18rem;font-weight:700;color:var(--candle);margin-top:6px;letter-spacing:.2px}
.drive-used{color:var(--muted);font-size:.86rem;margin-top:2px;line-height:1.5}
.drive-total{font-size:1.02rem;font-weight:700;color:var(--gold);margin:0 0 4px}
.online-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);margin-right:7px;box-shadow:0 0 10px var(--ok);animation:flicker 4s infinite}

/* ---------- oauth ---------- */
.oauth-sep{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--dim);font-size:.8rem;letter-spacing:1px;text-transform:uppercase}
.oauth-sep::before,.oauth-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.oauth-btns{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;text-decoration:none}
.oauth-mark{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.4);color:#e8c874;font-weight:700;font-size:.9rem}

/* =====================================================================
 * EMBER v2 — visual overhaul: candlelit motion, ornate detail, playfulness
 * ===================================================================== */

/* ---------- floating embers ---------- */
.embers{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.embers span{position:absolute;bottom:-24px;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#ffd98a 0%,#e5383b 60%,transparent 70%);
  opacity:0;animation:rise linear infinite}
.embers span:nth-child(1){left:6%;animation-duration:11s;animation-delay:0s}
.embers span:nth-child(2){left:14%;animation-duration:15s;animation-delay:-4s;width:7px;height:7px}
.embers span:nth-child(3){left:23%;animation-duration:9s;animation-delay:-2s}
.embers span:nth-child(4){left:34%;animation-duration:17s;animation-delay:-8s;width:4px;height:4px}
.embers span:nth-child(5){left:45%;animation-duration:12s;animation-delay:-6s;width:6px;height:6px}
.embers span:nth-child(6){left:56%;animation-duration:14s;animation-delay:-3s}
.embers span:nth-child(7){left:66%;animation-duration:10s;animation-delay:-9s;width:7px;height:7px}
.embers span:nth-child(8){left:75%;animation-duration:18s;animation-delay:-5s;width:4px;height:4px}
.embers span:nth-child(9){left:84%;animation-duration:13s;animation-delay:-1s}
.embers span:nth-child(10){left:92%;animation-duration:16s;animation-delay:-7s;width:6px;height:6px}
.embers span:nth-child(11){left:29%;animation-duration:20s;animation-delay:-11s;width:3px;height:3px}
.embers span:nth-child(12){left:61%;animation-duration:11s;animation-delay:-13s;width:3px;height:3px}
@keyframes rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  8%{opacity:.9}
  60%{opacity:.55}
  100%{transform:translateY(-108vh) translateX(46px);opacity:0}
}

/* ---------- site banner (the crier) ---------- */
#banner{position:sticky;top:0;z-index:55;background:linear-gradient(135deg,#4a0f16,#2a1440);
  border-bottom:1px solid var(--gold);color:#ffe9b0;text-align:center;
  padding:10px 18px;font-family:var(--serif);font-size:1.02rem;font-style:italic;
  box-shadow:0 4px 24px rgba(0,0,0,.5)}
#banner .b-ico{margin-right:8px;animation:flicker 4s infinite}

/* ---------- footer ---------- */
#sitefoot{max-width:1080px;margin:0 auto;padding:26px 18px 40px;text-align:center;position:relative;z-index:1}
#sitefoot .fil{color:var(--gold);opacity:.6;letter-spacing:10px;margin-bottom:12px}
#sitefoot nav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
#sitefoot a{color:var(--dim);font-size:.82rem;text-decoration:none;letter-spacing:1px}
#sitefoot a:hover{color:var(--candle)}
#sitefoot .fine{color:#4d3d44;font-size:.72rem;margin-top:8px}
#sitefoot .build{color:#3a2c33;font-size:.66rem;letter-spacing:2.5px;margin-top:7px;text-transform:uppercase}
#buildline{opacity:.5;letter-spacing:2.5px;text-transform:uppercase;font-size:.62rem;margin-top:14px}
.sheet-build{text-align:center;color:#4d3d44;font-size:.6rem;letter-spacing:2.5px;text-transform:uppercase;margin-top:10px}

/* ---------- NEW badge (marks added admin features) ---------- */
/* PILLS, MAXED (build 2026.11.04.2, Steven's order: "Max out the
   pill too"): the NEW pill gets the house's living light — richer
   gold, a lit rim, a touch larger, and a slow candle-breathing
   glow (3.8s, the porch bubble's own rhythm) that draws the eye
   the way candlelight does and never flashes like an ad. One
   class, one treatment, everywhere the pill rides: EmberDoor
   cards, the Sanctum's chambers and headings, and — through
   .wn-new below — the What's New tiles. The global
   reduced-motion rule stills it; it is named there too. */
.pill-new{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:2.2px;color:#23130a;
  background:linear-gradient(135deg,#ffe9b0,#e8b34b 55%,#c9a227);border:1px solid rgba(255,233,176,.85);
  border-radius:999px;padding:4px 11px;margin-left:8px;
  vertical-align:2px;box-shadow:0 0 16px rgba(232,179,75,.55),inset 0 1px 0 rgba(255,255,255,.65);
  animation:newpulse 3.8s ease-in-out infinite}

/* While You Were Away (build 2026.11.02.13): the unread count of a
   member's own alert ledger, riding the hub's Notices door. */
.hub-away-badge{display:inline-block;min-width:20px;text-align:center;font-size:.68rem;font-weight:800;
  color:#fff;background:var(--blood2);border-radius:999px;padding:2px 7px;margin-left:7px;vertical-align:2px}
.hub-away-badge[hidden]{display:none}
@keyframes newpulse{0%,100%{box-shadow:0 0 10px rgba(232,179,75,.38),inset 0 1px 0 rgba(255,255,255,.65)}50%{box-shadow:0 0 26px rgba(232,179,75,.82),inset 0 1px 0 rgba(255,255,255,.65)}}

/* ---------- verified seal ---------- */
.verified-seal{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe9b0,#c9a227 70%);color:#2a1a08;font-size:.72rem;font-weight:900;
  margin-left:6px;vertical-align:1px;box-shadow:0 0 10px rgba(201,162,39,.5);cursor:help}

/* ---------- boosted badge ---------- */
.boosted-badge{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:1.6px;color:#ffe9b0;
  background:linear-gradient(135deg,#7d1420,#5b2a86);border:1px solid var(--gold);border-radius:4px;
  padding:3px 10px;margin-left:8px;vertical-align:2px}

/* ---------- ghost perk marks (build .16) ---------- */
.ghost-spot-badge{background:linear-gradient(135deg,#2c1650,#4a2a86);border-color:#b79aff;color:#e8d8ff;
  box-shadow:0 0 12px rgba(150,110,255,.45)}
.profile-glow-card{border-color:rgba(183,154,255,.75)!important;
  box-shadow:0 0 0 1px rgba(183,154,255,.35),0 0 34px rgba(150,110,255,.35),0 0 90px rgba(201,162,39,.18)}

/* ---------- oracle (daily fortune) ---------- */
.oracle{background:linear-gradient(135deg,rgba(36,18,56,.9),rgba(24,13,21,.9));
  border:1px solid var(--line-gold);border-radius:var(--r);padding:20px 22px;margin-bottom:20px;
  position:relative;overflow:hidden;box-shadow:0 0 0 1px #000,0 14px 44px rgba(0,0,0,.5),inset 0 0 60px rgba(91,42,134,.18)}
.oracle::before{content:"🔮";position:absolute;right:16px;top:12px;font-size:2.2rem;opacity:.5;filter:sepia(.3)}
.oracle .o-kicker{font-size:.68rem;letter-spacing:3px;color:var(--gold);font-weight:800;margin-bottom:8px}
.oracle .o-text{font-family:var(--serif);font-style:italic;font-size:1.18rem;line-height:1.65;color:#f3e9d2;max-width:88%}
.oracle .o-sub{margin-top:10px;font-size:.78rem;color:var(--dim)}

/* ---------- notice bell ---------- */
.bell-wrap{position:relative;display:inline-block}
.bell-count{position:absolute;top:-6px;right:-8px;background:var(--blood2);color:#fff;font-size:.62rem;font-weight:800;
  min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;
  box-shadow:0 0 10px rgba(229,56,59,.7);animation:newpulse 2s infinite}
.notice{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:12px;transition:.2s}
.notice:hover{border-color:var(--gold)}
.notice.unread{border-color:var(--gold);box-shadow:0 0 24px rgba(201,162,39,.12)}
.notice .n-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.notice .n-title{font-weight:700;font-family:var(--serif);font-size:1.12rem}
.notice .n-body{color:var(--muted);line-height:1.65;font-size:.94rem;white-space:pre-wrap;font-family:var(--serif);font-size:1rem}
.notice.warning{border-color:rgba(229,56,59,.55);background:linear-gradient(135deg,rgba(125,20,32,.25),var(--card))}

/* ---------- button sheen + card lift ---------- */
.btn{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);transition:left .5s}
.btn-primary:hover::after{left:130%}
.card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-2px);border-color:rgba(201,162,39,.4);box-shadow:0 0 0 1px rgba(0,0,0,.55),0 22px 60px rgba(0,0,0,.55),0 0 34px rgba(125,20,32,.18),inset 0 1px 0 rgba(201,162,39,.1)}
.match-row:hover{box-shadow:0 0 24px rgba(125,20,32,.25)}
.post{transition:border-color .25s ease,transform .25s ease}
.post:hover{border-color:rgba(201,162,39,.35)}

/* ---------- ornate profile card corners ---------- */
.profile-card{position:relative;transition:transform .3s ease,box-shadow .3s ease}
.profile-card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 0 0 1px #000,0 30px 80px rgba(0,0,0,.65),0 0 44px rgba(125,20,32,.3)}
.profile-card .corner{position:absolute;width:26px;height:26px;border:2px solid var(--gold);opacity:.75;z-index:3;pointer-events:none}
.profile-card .corner.tl{top:8px;left:8px;border-right:none;border-bottom:none;border-radius:6px 0 0 0}
.profile-card .corner.tr{top:8px;right:8px;border-left:none;border-bottom:none;border-radius:0 6px 0 0}
.profile-card .corner.bl{bottom:8px;left:8px;border-right:none;border-top:none;border-radius:0 0 0 6px}
.profile-card .corner.br{bottom:8px;right:8px;border-left:none;border-top:none;border-radius:0 0 6px 0}

/* ---------- logo candle-glow ---------- */
.logo-xl{animation:candleglow 5s ease-in-out infinite}
@keyframes candleglow{0%,100%{text-shadow:0 0 42px rgba(163,22,33,.65)}42%{text-shadow:0 0 60px rgba(229,56,59,.8),0 0 24px rgba(201,162,39,.5)}58%{text-shadow:0 0 34px rgba(163,22,33,.55)}70%{text-shadow:0 0 54px rgba(229,56,59,.7)}}

/* ---------- section headers ---------- */
.sect-head{display:flex;align-items:center;gap:14px;margin:26px 0 14px}
.sect-head::before,.sect-head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-gold),transparent)}
.sect-head h2{margin:0;white-space:nowrap}

/* ---------- loading quips ---------- */
.quip-loader{text-align:center;padding:60px 20px;color:var(--muted);font-family:var(--serif);font-style:italic;font-size:1.2rem}
.quip-loader .q-ico{font-size:2.6rem;display:block;margin-bottom:14px;animation:flicker 3s infinite}

/* ---------- admin v2: added panel ---------- */
.added-panel{background:linear-gradient(135deg,rgba(201,162,39,.08),rgba(125,20,32,.1));
  border:1px solid rgba(201,162,39,.45);border-radius:var(--r);padding:20px 22px;margin-bottom:20px}
.added-panel h2{margin-top:0}
.added-panel ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 18px}
.added-panel li{font-size:.88rem;color:var(--muted);line-height:1.5}
.added-panel li b{color:#ffe9b0;font-weight:700}

/* ---------- toggle-all rows for settings ---------- */
.set-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid rgba(163,22,33,.14)}
.set-row:last-child{border-bottom:none}
.set-row .s-label{flex:1}
.set-row .s-label b{font-family:var(--serif);font-size:1.05rem;letter-spacing:.4px}
.set-row .s-label .s-val{color:var(--dim);font-size:.8rem;margin-top:2px}

/* ---------- review grid (tribunal) ---------- */
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.review-cell{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.review-cell img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#140a12}
.review-cell .r-meta{padding:10px 12px}
.review-cell .r-meta .who{font-weight:700;font-size:.88rem}
.review-cell .r-actions{display:flex;gap:6px;padding:0 12px 12px;flex-wrap:wrap}

/* ---------- fun: shake on forbidden ---------- */
@keyframes wardshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.ward-shake{animation:wardshake .3s ease 2}

/* ---------- misc polish ---------- */
.stat{transition:transform .2s ease,border-color .2s ease}
.stat:hover{transform:translateY(-3px);border-color:var(--gold)}
.tag{transition:.2s}
.tag:hover{background:rgba(91,42,134,.45);color:#fff}
.swipe-btn{position:relative}
.swipe-btn.like::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(201,162,39,.5);animation:ringpulse 2.4s ease-out infinite}
@keyframes ringpulse{0%{transform:scale(.85);opacity:.8}70%{transform:scale(1.15);opacity:0}100%{opacity:0}}
.chat-wrap{box-shadow:0 0 0 1px #000,0 18px 60px rgba(0,0,0,.55),0 0 50px rgba(91,42,134,.12)}
#toast{border-color:var(--gold);box-shadow:0 10px 40px rgba(0,0,0,.7),0 0 24px rgba(201,162,39,.2)}
.match-flash h1{animation:candleglow 4s ease-in-out infinite}
@media(max-width:760px){
  .oracle .o-text{font-size:1.05rem}
  #banner{font-size:.92rem}
}

/* =====================================================================
 * EMBER v3 — "erotic horror novel" art direction.
 * Black wax, love letters, rose & thorn. Lush, dark, romantic.
 * ===================================================================== */

/* ---------- novel-cover hero ---------- */
.hero .chapter-kicker{font-size:.72rem;letter-spacing:6px;color:var(--gold);font-weight:700;margin-bottom:14px;animation:flicker 6s infinite}
.logo-xl{font-size:5rem}
.hero .tagline{font-size:1.6rem}
.hero .dropcap{max-width:640px;margin:22px auto 0;line-height:1.9;color:var(--muted);font-family:var(--serif);font-size:1.08rem;text-align:left}
.hero .dropcap::first-letter{font-family:var(--display);font-size:3.4em;float:left;line-height:.85;margin:6px 10px 0 0;color:var(--blood2);text-shadow:0 0 24px rgba(163,22,33,.6)}
.rose-div{text-align:center;margin:26px 0;color:#8e2f3c;letter-spacing:14px;font-size:1.1rem;opacity:.85}
.rose-div::before,.rose-div::after{content:"";display:inline-block;width:120px;height:1px;vertical-align:middle;
  background:linear-gradient(90deg,transparent,#8e2f3c);margin:0 14px;opacity:.6}
.rose-div::after{background:linear-gradient(90deg,#8e2f3c,transparent)}

/* ---------- wax seal ---------- */
.wax-seal{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#c0272d,#7d1420 65%,#4a0d13);
  color:#f3d9d9;font-family:var(--display);font-size:1.3rem;
  box-shadow:0 4px 14px rgba(0,0,0,.6),inset 0 2px 6px rgba(255,255,255,.25),inset 0 -3px 8px rgba(0,0,0,.5);
  border:2px solid rgba(0,0,0,.35);transform:rotate(-8deg)}
.wax-seal.small{width:34px;height:34px;font-size:.95rem}

/* ---------- ravens: black love-letters ---------- */
.letter{background:linear-gradient(160deg,#171017 0%,#100a10 60%,#0b070b 100%);
  border:1px solid var(--line-gold);border-radius:6px;padding:26px 28px;margin-bottom:14px;position:relative;
  box-shadow:0 0 0 1px #000,0 18px 50px rgba(0,0,0,.55),inset 0 0 80px rgba(91,42,134,.08);transition:.25s}
.letter:hover{border-color:rgba(201,162,39,.55);transform:translateY(-2px)}
.letter.unread{border-color:var(--gold);box-shadow:0 0 0 1px #000,0 0 34px rgba(201,162,39,.16)}
.letter .l-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.letter .l-subject{font-family:var(--serif);font-size:1.35rem;color:#f3e9d2;letter-spacing:.4px}
.letter .l-meta{color:var(--dim);font-size:.78rem;font-style:italic}
.letter .l-body{font-family:var(--serif);font-size:1.12rem;line-height:1.85;color:#d9cbb8;white-space:pre-wrap}
.letter .l-body.drop::first-letter{font-family:var(--display);font-size:2.6em;float:left;line-height:.9;margin:4px 8px 0 0;color:var(--blood2)}
.letter .l-foot{display:flex;gap:10px;margin-top:16px;align-items:center;flex-wrap:wrap}
.raven-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;
  margin-bottom:10px;background:var(--card);text-decoration:none;color:var(--txt);transition:.2s}
.raven-row:hover{border-color:var(--gold);transform:translateX(4px)}
.raven-row.unread{border-color:rgba(201,162,39,.55);background:linear-gradient(135deg,rgba(201,162,39,.06),var(--card))}
.raven-row .r-main{flex:1;min-width:0}
.raven-row .r-subj{font-weight:700;font-family:var(--serif);font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.raven-row .r-prev{color:var(--dim);font-size:.85rem;font-style:italic;font-family:var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.raven-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}

/* ---------- attachments ---------- */
.att-chip{display:inline-flex;align-items:center;gap:10px;background:rgba(0,0,0,.4);border:1px solid var(--line-gold);
  border-radius:8px;padding:8px 12px;font-size:.85rem;color:var(--txt);text-decoration:none;transition:.2s;max-width:100%}
.att-chip:hover{border-color:var(--gold);box-shadow:0 0 16px rgba(201,162,39,.2)}
.att-chip .a-ico{font-size:1.3rem}
.att-chip .a-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.att-chip .a-size{color:var(--dim);font-size:.75rem}
.att-preview{display:block;max-width:280px;border-radius:8px;border:1px solid var(--line-gold);margin:6px 0}
.att-pending{display:flex;align-items:center;gap:10px;background:rgba(201,162,39,.07);border:1px dashed rgba(201,162,39,.5);
  border-radius:8px;padding:8px 12px;font-size:.85rem;margin-bottom:8px}
.att-pending button{background:none;border:none;color:#ff8f8f;font-size:1rem;cursor:pointer}
.chat-attach-btn{background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:9px 12px;font-size:1.1rem;cursor:pointer;transition:.2s;flex-shrink:0}
.chat-attach-btn:hover{color:var(--candle);border-color:var(--gold)}

/* ---------- online-now drawer ---------- */
#onlineFab{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#4a0f16,#2a1440);border:1px solid var(--gold);color:#ffe9b0;border-radius:999px;
  padding:12px 20px;font-weight:700;font-size:.88rem;letter-spacing:1px;cursor:pointer;
  box-shadow:0 10px 34px rgba(0,0,0,.6),0 0 24px rgba(201,162,39,.2);transition:.25s;font-family:var(--sans)}
#onlineFab:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.65),0 0 34px rgba(201,162,39,.35)}
#onlineFab .pulse-dot{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:flicker 3s infinite}
#onlineDrawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);z-index:90;
  background:linear-gradient(165deg,#150c14,#0a060b);border-left:1px solid var(--line-gold);
  box-shadow:-30px 0 80px rgba(0,0,0,.7);transform:translateX(105%);transition:transform .35s cubic-bezier(.2,.9,.25,1);
  display:flex;flex-direction:column}
#onlineDrawer.open{transform:none}
#onlineDrawer .od-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
#onlineDrawer .od-head h2{margin:0;font-size:1.3rem}
#onlineDrawer .od-close{margin-left:auto;background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;
  width:34px;height:34px;font-size:1rem;cursor:pointer}
#onlineDrawer .od-close:hover{color:var(--candle);border-color:var(--gold)}
#onlineList{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.od-row{display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.3);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;transition:.2s}
.od-row:hover{border-color:var(--gold)}
.od-row .avatar{width:44px;height:44px;font-size:1.1rem}
.od-row .o-meta{flex:1;min-width:0}
.od-row .o-name{font-weight:700;font-family:var(--serif);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.od-row .o-status{color:var(--dim);font-size:.78rem;font-style:italic;font-family:var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#drawerScrim{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.3s}
#drawerScrim.open{opacity:1;pointer-events:auto}

/* ---------- idle veil ---------- */
#idleVeil{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(4,2,6,.82);backdrop-filter:blur(6px);text-align:center;padding:24px}
#idleVeil .v-card{max-width:440px}
#idleVeil h1{font-size:2rem;margin:14px 0}
@media(max-width:760px){.logo-xl{font-size:3.2rem}.letter{padding:20px}}

/* =====================================================================
 * EMBER v4 — easier Sanctum, deeper dark, iPhone-first.
 * ===================================================================== */

/* ---------- chamber menu: the Sanctum navigable by thumb ---------- */
.chamber-group{margin:26px 0 8px}
.chamber-h{font-size:1.05rem;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin:0 0 12px;
  display:flex;align-items:center;gap:12px}
.chamber-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(201,162,39,.4),transparent)}
.chamber-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.chamber-card,.door-card{display:flex;align-items:center;gap:14px;min-height:88px;padding:14px 16px;border-radius:12px;
  background:linear-gradient(150deg,#1c101b,#0f090f);border:1px solid var(--line);color:var(--txt);text-decoration:none;
  transition:.22s;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.chamber-card:hover,.chamber-card:active,.door-card:hover,.door-card:active{border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 22px rgba(201,162,39,.14)}
.chamber-card .c-ico,.door-card .c-ico{font-size:1.9rem;filter:drop-shadow(0 0 8px rgba(163,22,33,.5));flex-shrink:0}
.chamber-card .c-main,.door-card .c-main{flex:1;min-width:0}
.chamber-card .c-name,.door-card .c-name{font-family:var(--serif);font-weight:700;font-size:1.08rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chamber-card .c-desc,.door-card .c-desc{color:var(--dim);font-size:.82rem;font-style:italic;font-family:var(--serif);margin-top:2px}
.chamber-card .c-go,.door-card .c-go{color:var(--gold);font-size:1.3rem;flex-shrink:0;opacity:.7}

/* ---------- the Great Hall (Sanctum landing, 2026-10-29) ---------- */
.hall-tiles{margin:18px 0 6px}
a.stat.hall-tile{text-decoration:none;color:inherit;display:block}
a.stat.hall-tile:hover{border-color:var(--gold)}
.hall-quick{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
#memberHits .card{margin-top:12px}
.chamber-card,.door-card{position:relative}
.chamber-card .c-badge{background:var(--blood,#a31621);color:#fff;font-family:var(--sans,inherit);font-style:normal;
  font-size:.72rem;font-weight:700;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(163,22,33,.55)}
.chamber-card .c-lock{display:block;color:#c9a227;font-size:.78rem;margin-top:4px;letter-spacing:.4px}
.chamber-card.locked{opacity:.62;border-style:dashed;cursor:not-allowed}
.chamber-card.locked:hover{transform:none;border-color:var(--line);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.chamber-card .pin-btn{position:absolute;top:8px;right:10px;background:none;border:none;cursor:pointer;
  font-size:.95rem;line-height:1;padding:4px;opacity:.45;flex-shrink:0}
.chamber-card .pin-btn:hover{opacity:1}
.chamber-card .pin-btn.on{opacity:1;filter:drop-shadow(0 0 6px rgba(201,162,39,.8))}

/* ---------- blood divider ---------- */
.blood-div{text-align:center;margin:24px 0;color:#a31621;font-size:1rem;letter-spacing:10px;opacity:.9}
.blood-div::before,.blood-div::after{content:"";display:inline-block;width:110px;height:2px;vertical-align:middle;
  background:linear-gradient(90deg,transparent,#a31621);margin:0 12px;opacity:.55;box-shadow:0 0 12px rgba(163,22,33,.5)}
.blood-div::after{background:linear-gradient(90deg,#a31621,transparent)}

/* ---------- moon line ---------- */
.moon-line{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 18px;border:1px solid var(--line);
  border-radius:999px;background:rgba(0,0,0,.35);font-family:var(--serif);font-style:italic;color:var(--muted);font-size:.95rem}
.moon-line .m-ico{font-size:1.3rem;filter:drop-shadow(0 0 10px rgba(240,230,200,.4))}

/* ---------- witching hour banner ---------- */
.witching{border:1px solid rgba(163,22,33,.6);background:linear-gradient(135deg,rgba(125,20,32,.16),rgba(42,20,64,.14));
  border-radius:12px;padding:14px 18px;margin-bottom:18px;text-align:center;font-family:var(--serif);font-style:italic;
  color:#e8c9c9;animation:flicker 7s infinite}

/* ---------- iPhone & touch ---------- */
body{-webkit-tap-highlight-color:transparent}
.input,textarea.input,select.input{font-size:16px} /* stops iOS zoom-on-focus */
#onlineFab{bottom:calc(20px + env(safe-area-inset-bottom));right:calc(20px + env(safe-area-inset-right))}
#onlineDrawer{max-height:100dvh;max-height:100vh}
.chat-wrap{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
#adminBody .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
#adminBody .tbl td{white-space:normal;min-width:80px}
#adminBody .btn-sm{min-height:40px;display:inline-flex;align-items:center}
.topbar{padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}
@media(max-width:760px){
  .chamber-grid{grid-template-columns:1fr}
  .chamber-card,.door-card{min-height:96px;padding:16px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .btn{min-height:44px}
  .od-row .btn{min-height:44px}
}

/* =====================================================================
 * EMBER v5 — Velvet Room & Fortune's Wheel.
 * ===================================================================== */

/* ---------- velvet room ---------- */
.velvet-hero{text-align:center;padding:40px 20px;position:relative;overflow:hidden;border-radius:16px;
  background:linear-gradient(160deg,#2a0f1e,#12060f 70%);border:1px solid rgba(201,162,39,.35);margin-bottom:24px}
.velvet-hero h1{font-size:2.6rem;margin:10px 0}
.velvet-hero .v-sub{font-family:var(--serif);font-style:italic;color:#d9a7b0;max-width:520px;margin:0 auto;line-height:1.7}
.price-seal{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin:20px 0;padding:16px 34px;
  border:1px solid var(--gold);border-radius:12px;background:rgba(0,0,0,.4)}
.price-seal .p-amount{font-family:var(--display);font-size:2.2rem;color:#ffe9b0}
.price-seal .p-per{color:var(--dim);font-size:.85rem}
.price-seal .p-trial{color:var(--ok);font-weight:700;font-size:.9rem;letter-spacing:1px}
.velvet-perks{text-align:left;max-width:440px;margin:0 auto 22px;display:flex;flex-direction:column;gap:10px}
.velvet-perks .perk{display:flex;gap:12px;align-items:flex-start;color:#e6d3d8;font-size:.95rem}
.velvet-perks .perk .pi{font-size:1.2rem}
.volume-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.volume-card{border-radius:12px;overflow:hidden;background:linear-gradient(165deg,#1d0f1a,#0d060c);
  border:1px solid var(--line);transition:.25s;cursor:pointer;text-decoration:none;color:var(--txt);display:block}
.volume-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 26px rgba(163,22,33,.2)}
.volume-card img{width:100%;height:220px;object-fit:cover;display:block}
.volume-card .v-body{padding:16px}
.volume-card .v-title{font-family:var(--serif);font-size:1.25rem;color:#f3e9d2}
.volume-card .v-teaser{color:var(--dim);font-size:.85rem;font-style:italic;font-family:var(--serif);margin-top:6px;line-height:1.6}
.velvet-reader{max-width:680px;margin:0 auto}
.velvet-reader img.v-cover{width:100%;max-height:420px;object-fit:cover;border-radius:12px;border:1px solid var(--line-gold);margin-bottom:20px}
.velvet-reader .v-prose{font-family:var(--serif);font-size:1.14rem;line-height:2;color:#e2d4c2;white-space:pre-wrap}
.velvet-reader .v-prose::first-letter{font-family:var(--display);font-size:2.8em;float:left;line-height:.9;margin:4px 8px 0 0;color:var(--blood2)}
.velvet-seal-mark{color:#ff7d9c;font-size:.9em;margin-left:6px}

/* ---------- fortune's wheel ---------- */
.wheel-stage{text-align:center;max-width:640px;margin:0 auto}
.wheel-wrap{position:relative;width:min(560px,92vw);margin:0 auto}
#wheelCanvas{width:100%;height:auto;filter:drop-shadow(0 18px 44px rgba(0,0,0,.6))}
.wheel-pointer{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:2.2rem;z-index:2;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
.wheel-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#c0272d,#7d1420 65%,#4a0d13);border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;box-shadow:0 6px 20px rgba(0,0,0,.6);z-index:2}
.wheel-spins{margin:16px 0;color:var(--muted);font-family:var(--serif);font-style:italic}
.prize-modal{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
  background:rgba(4,2,6,.85);backdrop-filter:blur(6px);padding:20px;animation:fadein .3s}
.prize-card{text-align:center;max-width:420px;background:linear-gradient(165deg,#22101d,#0e060d);
  border:1px solid var(--gold);border-radius:16px;padding:36px 28px;box-shadow:0 0 80px rgba(163,22,33,.3)}
.prize-card .p-ico{font-size:4rem;animation:floaty 3s ease-in-out infinite}
.prize-card h2{font-size:1.8rem;margin:12px 0}
.prize-card p{color:#d9c3c9;font-family:var(--serif);font-style:italic;line-height:1.7}
.winnings{display:flex;flex-direction:column;gap:8px;margin-top:20px;text-align:left}
.winnings .w-row{display:flex;gap:12px;align-items:center;background:rgba(0,0,0,.3);border:1px solid var(--line);
  border-radius:8px;padding:10px 14px;font-size:.9rem}
.winnings .w-row .w-when{margin-left:auto;color:var(--dim);font-size:.78rem}
.bonus-banner{margin:14px auto 4px;max-width:520px;padding:12px 18px;border:1px solid var(--gold);border-radius:12px;
  background:linear-gradient(165deg,rgba(201,162,39,.16),rgba(201,162,39,.05));font-family:var(--serif);font-size:1.02rem}
.prize-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;text-align:left}
.prize-cell{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:12px;padding:14px 12px}
.prize-cell .prize-ico{font-size:2rem}
.prize-cell .prize-name{font-family:var(--serif);font-weight:700;margin:6px 0 2px;color:var(--gold)}
.prize-cell .prize-odds{font-size:.75rem;color:var(--gold);opacity:.75;font-style:italic;margin-bottom:4px}
.prize-cell .prize-desc{font-size:.82rem;color:var(--muted);line-height:1.5}
.earn-list{display:flex;flex-direction:column;gap:8px;margin-top:18px;text-align:left}
.earn-row{display:flex;gap:12px;align-items:center;background:rgba(0,0,0,.3);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px}
.earn-row.claimed{opacity:.55}
.earn-row .earn-ico{font-size:1.6rem}
.earn-row .sub{font-size:.82rem;color:var(--muted)}
.earn-row .earn-state{margin-left:auto;font-family:var(--serif);font-style:italic;color:var(--gold);white-space:nowrap}
@media (max-width:560px){.prize-grid{grid-template-columns:repeat(2,1fr)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:760px){.velvet-hero h1{font-size:2rem}.prize-card{padding:28px 20px}}

/* ================= 10/10 — iPhone optimization ================= */
*{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{touch-action:manipulation;overscroll-behavior-y:auto}
img{-webkit-user-drag:none;user-select:none}
input,textarea,select{user-select:text}
/* iOS zooms on focus when inputs are under 16px — never again */
@media(max-width:760px){
  .input,textarea.input,select.input{font-size:16px !important}
  #topbar{padding-top:env(safe-area-inset-top)}
  .page{padding-left:16px;padding-right:16px}
}
/* keyboard focus, for those who tab */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ================= 10/10 — motion & touch ================= */
.btn{position:relative;overflow:hidden}
.btn:active{transform:scale(.96)}
.btn-primary:active{box-shadow:0 3px 14px rgba(125,20,32,.5),inset 0 0 0 1px rgba(201,162,39,.35)}
.tab:active{transform:scale(.92)}
.chamber-card:active,.door-card:active{transform:scale(.97)}
.sheet-item:active{transform:scale(.94)}
/* page entrance */
#app.enter{animation:pageIn .38s cubic-bezier(.22,.9,.3,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  #app.enter{animation:none}
  .pill-new,.wn-new{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ================= 10/10 — depth & light ================= */
.card{box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,235,200,.07)}
.page>h1{letter-spacing:1px}
.page>h1::after{content:"";display:block;width:64px;height:2px;margin:10px 0 0;
  background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px}
.page>.sub{font-size:1.02rem}
/* images never flash white */
img{background:#140a12}
/* stat numbers glow */
.stat .n{text-shadow:0 0 24px rgba(201,162,39,.35)}
/* pills */
.pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

/* ================= 10/10 — discover deck ================= */
.profile-card{box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,235,200,.07);
  border-radius:18px;transition:transform .25s}
.profile-card .ph{height:min(440px,58vh)}
.swipe-btn:active{transform:scale(.88)}
.swipe-btn.like:active{box-shadow:0 4px 16px rgba(125,20,32,.5)}

/* ================= 10/10 — velvet & wheel glow ================= */
.velvet-hero .price-seal{box-shadow:0 0 60px rgba(201,162,39,.18),inset 0 1px 0 rgba(255,235,200,.1)}
#wheelCanvas{transition:filter .3s}
.prize-cell{transition:transform .2s,border-color .2s}
.prize-cell:hover{transform:translateY(-3px);border-color:var(--gold)}
.earn-row{transition:border-color .2s}
.earn-row:not(.claimed):hover{border-color:var(--gold)}

/* ================= 10/10 — toast & modal ================= */
#toast{box-shadow:0 12px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,235,200,.1);
  backdrop-filter:blur(12px)}
.prize-card{animation:prizeIn .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes prizeIn{from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:none}}

/* ================= Velvet Room — library tabs & the Gilded Step ================= */
.velvet-tabs{display:flex;gap:10px;justify-content:center;margin:18px 0 6px}
.velvet-tabs .vt{flex:1;max-width:280px;text-align:center;padding:13px 10px;border-radius:16px;
  background:rgba(0,0,0,.35);border:1px solid var(--line);color:var(--muted);text-decoration:none;
  font-weight:700;letter-spacing:.6px;transition:.22s}
.velvet-tabs .vt.on{color:#ffe9b0;border-color:var(--gold);
  background:linear-gradient(135deg,rgba(125,20,32,.5),rgba(91,42,134,.4));
  box-shadow:0 8px 28px rgba(125,20,32,.4),inset 0 1px 0 rgba(255,235,200,.12)}
.velvet-tabs .vt:active{transform:scale(.97)}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:14px 0}
.chip{display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;
  background:rgba(0,0,0,.4);border:1px solid var(--line);color:var(--muted);
  font-family:var(--sans);font-size:.82rem;font-weight:600;cursor:pointer;transition:.2s}
.chip.on{color:#ffe9b0;border-color:var(--gold);background:rgba(125,20,32,.35)}
.chip:active{transform:scale(.94)}
.chip-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  border-radius:11px;background:rgba(201,162,39,.2);color:var(--candle);font-size:.72rem;font-weight:700;padding:0 6px}
.sanct-h{margin:26px 0 4px;letter-spacing:1px}
.sole-hero{border-color:rgba(201,162,39,.5)}
/* gallery walls */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.media-cell{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:#140a12;padding:0;cursor:pointer;transition:transform .2s,border-color .2s;min-height:150px}
.media-cell img{width:100%;height:190px;object-fit:cover;display:block}
.media-cell:hover{transform:translateY(-3px);border-color:var(--gold)}
.media-cell:active{transform:scale(.96)}
.media-cell .m-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 8px;font-size:.72rem;
  color:#ffe9b0;background:linear-gradient(transparent,rgba(0,0,0,.85));text-align:left}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:12px}
.video-cell{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0a060c}
.video-cell video{width:100%;max-height:320px;display:block;background:#000}
.video-cell .m-cap{padding:10px 12px;font-size:.82rem;color:var(--muted)}
/* lightbox */
.lightbox{max-width:min(92vw,760px);text-align:center;animation:prizeIn .35s cubic-bezier(.2,1.4,.4,1)}
.lightbox img{max-width:100%;max-height:76vh;border-radius:12px;border:1px solid var(--line-gold);
  box-shadow:0 24px 80px rgba(0,0,0,.7)}
.lightbox .lb-cap{margin-top:10px;color:#ffe9b0;font-family:var(--serif);font-style:italic;font-size:1.05rem}

/* ===== The beautiful chat window + raven picker (v6) ===== */
.chat-wrap{position:relative;background:linear-gradient(180deg,#171017 0%,#100a10 55%,#0b070b 100%)}
.chat-head{background:linear-gradient(90deg,rgba(94,20,32,.35),rgba(0,0,0,.3) 60%);backdrop-filter:blur(2px)}
.chat-presence{color:var(--dim);font-size:.76rem;font-style:italic;margin-top:2px;display:flex;align-items:center;gap:6px}
.online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#7dd87d;box-shadow:0 0 8px #7dd87d;animation:pulseDot 2s infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.45}}
#chatLog{background:radial-gradient(ellipse at 50% 0%,rgba(91,42,134,.10),transparent 60%)}
.msg{border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.msg.mine{border-radius:16px 16px 4px 16px;background:linear-gradient(135deg,#6d1624,#452058)}
.msg.theirs{border-radius:16px 16px 16px 4px;background:rgba(255,255,255,.06)}
.msg-time{display:block;text-align:right;font-size:.64rem;color:rgba(243,233,210,.55);margin-top:4px;letter-spacing:.4px}
.msg.theirs .msg-time{text-align:left;color:var(--dim)}
.day-div{display:flex;align-items:center;gap:12px;margin:10px 4px 2px;color:var(--dim)}
.day-div::before,.day-div::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.day-div span{font-family:var(--serif);font-style:italic;font-size:.78rem;letter-spacing:1px;white-space:nowrap}
.chat-empty{align-self:center;text-align:center;color:var(--dim);font-family:var(--serif);font-style:italic;font-size:1rem;line-height:2;margin:auto}
.chat-new-chip{position:absolute;left:50%;transform:translateX(-50%);bottom:88px;z-index:5;background:linear-gradient(135deg,#6d1624,#452058);color:#f3e9d2;border:1px solid var(--gold);border-radius:999px;padding:7px 16px;font-size:.8rem;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.6);animation:fadeUp .25s ease}
.chat-input .input{border-radius:999px;padding-left:18px}
.chat-input .btn-primary{border-radius:999px}
.soul-results{margin-top:6px}
.soul-pick{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-top:6px;color:#f3e9d2;cursor:pointer;font-size:.95rem;transition:border-color .15s,background .15s}
.soul-pick:hover{border-color:var(--gold);background:rgba(201,162,39,.07)}
.raven-row{transition:border-color .15s,transform .15s,box-shadow .15s}
.raven-row:hover{border-color:rgba(201,162,39,.55);transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.4)}

/* ================= NOCTURNE (build 2026.10.22.7) =================
   One gothic erotic-horror language over the whole house: plum-black
   depths, oxblood, candlelight gold. Atmosphere is gradients, glow and
   grain — no images, no font files. Motion is transform/opacity only,
   and everything stills itself for prefers-reduced-motion. */
:root{
  --plum-black:#0a0510; --plum-deep:#12081d; --oxblood:#4a0e18; --oxblood-hi:#7d1626;
  --candle-hi:#f2c464; --glow:rgba(232,179,75,.55); --glow-soft:rgba(232,179,75,.16);
  --serif-display:'Playfair Display','Didot','Bodoni MT',Didot,Georgia,'Times New Roman',serif;
}
body{
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(125,22,38,.20), transparent 60%),
    radial-gradient(90% 40% at 85% 110%, rgba(91,42,134,.14), transparent 65%),
    linear-gradient(180deg, var(--plum-black), var(--bg) 30%, #050308);
}
/* film grain over the whole house — repeating gradients, no asset */
html::before{
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.6) 0 1px, transparent 1px 4px);
}
#app .page{animation:pageIn .5s cubic-bezier(.22,.8,.3,1) both}
h1,h2,.logo-xl{font-family:var(--serif-display),var(--display)}
/* candle-glow interactive states */
.btn{transition:box-shadow .25s ease, transform .2s ease, background .2s ease, border-color .2s ease}
.btn-primary:hover,.btn-gold:hover{box-shadow:0 0 22px var(--glow-soft),0 0 46px rgba(163,22,33,.25);transform:translateY(-1px)}
.btn-ghost:hover{border-color:rgba(232,179,75,.6);box-shadow:0 0 14px rgba(232,179,75,.12)}
.input:focus,textarea:focus,select:focus{outline:none;border-color:var(--candle);box-shadow:0 0 0 3px rgba(232,179,75,.18),0 0 18px rgba(232,179,75,.12)}
.card{transition:border-color .25s ease, box-shadow .25s ease}
.card:hover{border-color:rgba(201,162,39,.35);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 24px rgba(163,22,33,.10)}
a:hover{text-shadow:0 0 12px rgba(232,179,75,.35)}
/* the Threshold */
.threshold-kicker{font-family:var(--serif);letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;color:var(--candle);text-align:center;margin-bottom:8px}
.threshold-card{background:linear-gradient(180deg, rgba(74,14,24,.35), rgba(18,8,29,.6)),var(--bg2);border:1px solid rgba(201,162,39,.4);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 60px rgba(0,0,0,.6),0 0 60px rgba(163,22,33,.18)}
.threshold-steps{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;margin:14px 0 4px;font-size:.78rem}
.threshold-steps .ts{padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--dim)}
.threshold-steps .ts.done{color:var(--candle);border-color:rgba(201,162,39,.4)}
.threshold-steps .ts.cur{color:#0d0714;background:linear-gradient(180deg,var(--candle-hi),var(--candle));border-color:var(--candle);font-weight:700;box-shadow:0 0 16px var(--glow-soft)}
.threshold-steps .ts-arrow{color:var(--dim)}
/* Tonight at the House — rail, resume, ceremony hero */
.house-rail{margin:16px 0;padding:14px 16px;border:1px solid rgba(201,162,39,.35);border-radius:14px;background:linear-gradient(180deg, rgba(74,14,24,.28), rgba(18,8,29,.55));box-shadow:inset 0 0 30px rgba(0,0,0,.45)}
.house-rail-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.house-rail-title{font-family:var(--serif);font-size:1.05rem;color:var(--candle-hi);letter-spacing:.04em}
.house-rail-count{font-size:.8rem;color:var(--dim)}
.house-rail-candles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:10px}
.rail-candle{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:10px;border:1px solid var(--line);text-decoration:none;color:inherit;background:rgba(255,255,255,.02)}
.rail-candle .rail-flame{font-size:1.15rem}
.rail-candle.unlit{opacity:.62}
.rail-candle.unlit .rail-flame{filter:grayscale(.7)}
.rail-candle.lit{border-color:rgba(232,179,75,.55);box-shadow:0 0 16px rgba(232,179,75,.14)}
.rail-candle.lit .rail-flame{animation:flicker 2.6s ease-in-out infinite}
.rail-candle-label{font-size:.85rem}
.rail-candle-state{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--dim)}
.rail-candle.lit .rail-candle-state{color:var(--candle)}
.house-rail-note{margin:10px 0 0;font-size:.85rem;color:var(--dim);font-style:italic}
.night-hero{margin:6px 0 4px;padding:22px 20px;border-radius:16px;text-align:center;border:1px solid rgba(201,162,39,.45);background:radial-gradient(120% 160% at 50% -30%, rgba(232,179,75,.16), transparent 55%),linear-gradient(180deg, rgba(74,14,24,.4), rgba(10,5,16,.75));box-shadow:0 18px 44px rgba(0,0,0,.5),inset 0 0 40px rgba(0,0,0,.5)}
.nh-moon{font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--candle)}
.nh-title{font-size:2rem;margin:6px 0 4px;color:#f6ead0;text-shadow:0 0 30px rgba(232,179,75,.35)}
.nh-omen{max-width:560px;margin:8px auto;color:#e9dcbb}
.nh-door{color:var(--candle-hi);font-style:italic}
.nh-links{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}
/* The home Connect card (build .8) — standing at the top of the member home */
.connect-card{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;margin:0 0 14px}
.connect-card .connect-main{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.connect-card .connect-title{font-weight:600}
.connect-card .connect-ico{font-size:1.4rem}
a.connect-card{transition:transform .2s ease, box-shadow .25s ease}
a.connect-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.5),0 0 20px rgba(232,179,75,.14);text-shadow:none}
.resume-rail{margin:14px 0}
.resume-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:10px}
.resume-card{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;border:1px solid rgba(201,162,39,.35);background:linear-gradient(180deg, rgba(18,8,29,.7), rgba(10,5,16,.7));text-decoration:none;color:inherit;transition:transform .2s ease, box-shadow .25s ease}
.resume-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.5),0 0 20px rgba(232,179,75,.14);text-shadow:none}
.rc-ico{font-size:1.5rem}
.rc-body{display:flex;flex-direction:column;min-width:0}
.rc-kicker{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--candle)}
.rc-title{font-family:var(--serif);font-size:1.02rem;color:#f3e9d2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-sub{font-size:.78rem;color:var(--dim)}
.rc-arrow{margin-left:auto;color:var(--candle)}
/* ceremony flare + keeper lines */
.ceremony-flare{display:flex;gap:10px;align-items:center;justify-content:center;padding:10px 14px;margin:0 0 12px;border-radius:12px;border:1px solid rgba(232,179,75,.5);background:radial-gradient(90% 140% at 50% 0%, rgba(232,179,75,.18), rgba(74,14,24,.25));animation:flareIn .7s cubic-bezier(.22,.8,.3,1) both}
.flare-flame{font-size:1.3rem;animation:flicker 2.2s ease-in-out infinite}
.flare-line{font-family:var(--serif);font-style:italic;color:#f6ead0}
@keyframes flareIn{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
/* cliffhanger cards + next doors: no dead ends anywhere */
.tale-hook,.next-door{margin:22px 0;padding:16px 18px;border-radius:12px;border:1px solid rgba(201,162,39,.4);background:linear-gradient(180deg, rgba(74,14,24,.3), rgba(18,8,29,.55))}
.hook-kicker{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--candle);margin-bottom:6px}
.tale-hook p{font-family:var(--serif);font-style:italic;font-size:1.06rem;color:#f3e9d2;margin:0}
.next-door p{color:#e9dcbb}
.next-door-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.door-featured{border-color:rgba(232,179,75,.6)!important;box-shadow:0 0 24px rgba(232,179,75,.13)}
.door-line{color:var(--candle-hi);font-style:italic}
/* Seek cards held up to a flame */
.candle-card{position:relative;overflow:hidden}
.candle-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(340px circle at var(--gx,50%) var(--gy,50%), rgba(242,196,100,.20), rgba(163,22,33,.07) 45%, transparent 70%)}
.candle-card.glowing::after{opacity:1;animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}
/* THE MATCH MOMENT — two flames, one light */
.match-ceremony .inner{animation:flareIn .8s cubic-bezier(.22,.8,.3,1) both}
.mc-flames{position:relative;height:64px;display:flex;justify-content:center;align-items:flex-end;gap:44px}
.mc-flame{font-size:2rem;animation:flicker 2.4s ease-in-out infinite}
.mc-flame.f1{animation:leanR 2.8s ease-in-out infinite}
.mc-flame.f2{animation:leanL 2.8s ease-in-out infinite}
.mc-one{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);font-size:2.5rem;opacity:0;animation:oneFlame 3s ease-in-out infinite}
@keyframes leanR{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg) translateX(5px)}}
@keyframes leanL{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg) translateX(-5px)}}
@keyframes oneFlame{0%,55%{opacity:0;transform:translateX(-50%) scale(.6)}75%,100%{opacity:1;transform:translateX(-50%) scale(1)}}
.mc-kicker{font-size:.7rem;letter-spacing:.24em;color:var(--candle);text-transform:uppercase}
.mc-keeper{font-family:var(--serif);font-style:italic;color:var(--candle-hi);margin:0 0 20px}
/* THE LIGHTING — nightly arrival */
.lighting-overlay{position:fixed;inset:0;z-index:200;background:#030207;display:flex;align-items:center;justify-content:center;cursor:pointer;animation:fadein .5s ease both}
.lighting-overlay.lifting{opacity:0;transition:opacity .6s ease}
.lighting-stage{text-align:center;padding:24px;max-width:520px}
.lighting-flame{font-size:3.4rem;animation:lightingFlame 2.6s ease-in-out infinite;filter:drop-shadow(0 0 26px rgba(242,196,100,.65))}
@keyframes lightingFlame{0%,100%{transform:scale(1)}42%{transform:scale(1.06)}58%{transform:scale(.98)}70%{transform:scale(1.04)}}
.lighting-moon{margin-top:14px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--candle)}
.lighting-line{font-family:var(--serif-display),var(--serif);font-size:1.5rem;line-height:1.45;color:#f6ead0;margin:14px 0 8px;text-shadow:0 0 34px rgba(232,179,75,.4);animation:flareIn 1.4s ease both}
.lighting-hint{font-size:.75rem;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;animation:fadein 2.4s ease both}
/* THE THREE DOORS */
.doors-overlay{position:fixed;inset:0;z-index:190;background:rgba(3,2,7,.86);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px;animation:fadein .45s ease both;overflow:auto}
.doors-overlay.lifting{opacity:0;transition:opacity .45s ease}
.doors-stage{max-width:760px;width:100%;text-align:center;padding:26px 22px;border-radius:18px;border:1px solid rgba(201,162,39,.45);background:linear-gradient(180deg, rgba(74,14,24,.35), rgba(10,5,16,.92));box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 60px rgba(163,22,33,.2)}
.doors-kicker{font-size:.7rem;letter-spacing:.24em;color:var(--candle);text-transform:uppercase}
.doors-title{font-size:1.8rem;margin:8px 0 6px;color:#f6ead0}
.doors-sub{color:#d9cba6;max-width:600px;margin:0 auto}
.doors-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:20px 0 14px}
.door-card{display:flex;flex-direction:column;gap:6px;align-items:center;padding:20px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:inherit;cursor:pointer;transition:transform .25s ease, box-shadow .3s ease, border-color .25s ease}
.door-card:hover{transform:translateY(-4px)}
.door-card.dread:hover{border-color:#8f9bb3;box-shadow:0 16px 34px rgba(0,0,0,.6),0 0 26px rgba(70,90,140,.35)}
.door-card.desire:hover{border-color:var(--oxblood-hi);box-shadow:0 16px 34px rgba(0,0,0,.6),0 0 26px rgba(229,56,59,.3)}
.door-card.both:hover{border-color:var(--candle);box-shadow:0 16px 34px rgba(0,0,0,.6),0 0 26px rgba(232,179,75,.3)}
.door-ico{font-size:2rem}
.door-name{font-family:var(--serif-display),var(--serif);letter-spacing:.28em;font-size:1.05rem;color:#f6ead0}
.door-blurb{font-size:.84rem;color:var(--dim)}
.doors-foot{display:flex;flex-direction:column;gap:10px;align-items:center;font-size:.86rem;color:var(--dim)}
/* THE SUNKEN CHAPEL — Velvet descends deeper */
body.velvet-tier{
  --bg:#050209; --bg2:#0b0414;
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(125,22,38,.28), transparent 60%),
    radial-gradient(90% 40% at 85% 110%, rgba(91,42,134,.2), transparent 65%),
    linear-gradient(180deg, #06030c, #030108);
}
body.velvet-tier .card{border-color:rgba(201,162,39,.28)}
body.velvet-tier .pill.gold,body.velvet-tier .pill.green{box-shadow:0 0 10px rgba(201,162,39,.35)}
body.velvet-tier .velvet-hero,body.velvet-tier .night-hero{border-color:rgba(232,179,75,.65);box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 34px rgba(201,162,39,.16),inset 0 0 40px rgba(0,0,0,.55)}
body.velvet-tier h1,body.velvet-tier h2{text-shadow:0 0 22px rgba(201,162,39,.22)}
@media (prefers-reduced-motion: reduce){
  .rail-candle.lit .rail-flame,.flare-flame,.mc-flame,.mc-one,.lighting-flame,.candle-card.glowing::after{animation:none!important}
  #app .page,.ceremony-flare,.match-ceremony .inner,.lighting-line{animation:none!important}
  .btn:hover,.resume-card:hover,.door-card:hover{transform:none!important}
}

/* ——— The Velvet harvest: days-left touches + the soft lock (2026.10.25) ——— */
#harvestSlot:empty,#harvestStrip:empty,#velvetChip:empty{display:none}
#harvestSlot{margin-bottom:14px}
#harvestStrip{max-width:1060px;margin:10px auto 0;padding:0 14px}
.harvest-banner,.harvest-card{position:relative;border:1px solid rgba(212,175,55,.45);background:linear-gradient(160deg,rgba(58,32,54,.92),rgba(30,18,34,.94));border-radius:14px;padding:14px 40px 14px 16px;color:#f3e9f5;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.harvest-banner p,.harvest-card p{margin:6px 0 10px;line-height:1.5;font-size:.95rem}
.harvest-last{border-color:rgba(255,120,120,.5)}
.harvest-kicker{font-weight:700;letter-spacing:.04em;color:#e8c96a;font-size:.95rem}
.harvest-x{position:absolute;top:6px;right:10px;background:none;border:none;color:#cbb8ce;font-size:1.25rem;line-height:1;cursor:pointer;padding:4px}
.harvest-x:hover{color:#fff}
.harvest-actions{display:flex;gap:10px;flex-wrap:wrap}
.harvest-quiet{border:1px dashed rgba(212,175,55,.4);border-radius:12px;padding:10px 14px;color:#d9c8de;font-size:.92rem;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.t-dl{display:inline-block;margin-top:6px;font-size:.8rem;color:#e8c96a;text-decoration:none;border:1px solid rgba(212,175,55,.4);border-radius:999px;padding:2px 10px}
.t-dl:hover{background:rgba(212,175,55,.15)}

/* ---------- What's New in the House (build 2026.11.02) ----------
 * The front-door showcase: every new thing, beautifully told —
 * part of the page, never a popup or a banner. Dressed in tokens
 * so the Red Door skin re-dresses it with the rest of the manor.
 * Build 2026.11.02.3 — the tiles fold: each stands collapsed (art,
 * title, one teaser line, its door) and opens its story in place,
 * one at a time. (Build .3 also kept a cleared column on the right
 * of each tile at phone widths; build 2026.11.02.14 struck that —
 * the words read across the whole tile now, and the floaters are
 * kept off them by the room at the section's foot alone.) */
#whatsNew{margin:22px 0}
.wn-head{text-align:center;margin-bottom:14px}
.wn-kicker{font-family:var(--serif);letter-spacing:.28em;color:var(--gold);font-size:.8rem;text-transform:uppercase}
.wn-title{font-family:var(--display);color:var(--candle);margin:4px 0 2px;font-size:1.65rem;letter-spacing:.03em}
.wn-sub{color:var(--muted);font-family:var(--serif);font-size:1.05rem}
.wn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.wn-tile{display:flex;flex-direction:column;text-decoration:none;padding:0;border-radius:var(--r);position:relative;overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease}
.wn-tile:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 18px rgba(232,179,75,.22)}
.wn-art{padding:16px 18px 0;background:radial-gradient(130% 170% at 16% 0%,rgba(232,179,75,.17),rgba(232,179,75,0) 58%)}
.wn-art .ico{font-size:2.05rem;line-height:1.1}
.wn-body{padding:8px 18px 16px;display:flex;flex-direction:column;flex:1}
.wn-tile h3{font-family:var(--serif);color:var(--txt);margin:0 0 6px;font-size:1.22rem}
.wn-teaser{color:var(--muted);font-family:var(--serif);font-size:.99rem;line-height:1.45;margin:0}
.wn-story{margin-top:8px}
.wn-tile .sub{line-height:1.55;margin:0}
.wn-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px}
.wn-go{display:inline-block;color:var(--candle);font-family:var(--serif);font-size:1rem;text-decoration:none}
.wn-more{flex:none;background:rgba(232,179,75,.06);border:1px solid rgba(232,179,75,.38);color:var(--candle);
  border-radius:999px;padding:4px 13px;font-family:var(--serif);font-size:.86rem;cursor:pointer;transition:background .25s ease}
.wn-more:hover{background:rgba(232,179,75,.16)}
.wn-tile.open .wn-more{background:rgba(232,179,75,.18)}
.wn-new{display:inline-block;vertical-align:middle;padding:2px 10px;margin-left:6px;font-family:var(--sans);font-size:.68rem;font-weight:800;
  letter-spacing:.14em;color:#1d1206;background:linear-gradient(135deg,#ffe9b0,var(--candle) 55%,var(--gold));border:1px solid rgba(255,233,176,.85);border-radius:999px;
  box-shadow:0 0 12px rgba(232,179,75,.55),inset 0 1px 0 rgba(255,255,255,.65);animation:newpulse 3.8s ease-in-out infinite}
.wn-special{display:inline-block;vertical-align:middle;padding:1px 9px;margin-left:6px;font-family:var(--sans);font-size:.64rem;font-weight:700;
  letter-spacing:.14em;color:var(--candle);background:var(--purple-deep);border:1px solid var(--gold);border-radius:999px}
.wn-pole{border:1px solid var(--gold);box-shadow:inset 0 1px 0 rgba(232,179,75,.25),0 10px 28px rgba(0,0,0,.5)}
.wn-pole::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:repeating-linear-gradient(90deg,var(--blood2) 0 26px,var(--gold) 26px 30px,var(--blood) 30px 56px,var(--gold) 56px 60px);opacity:.85}
/* Read across the page (build 2026.11.02.14, Steven's word over
 * his own phone): build .3 reserved 158px on the right of every
 * tile body, so on a phone the title, the teaser and the door
 * link wrapped a word or two at a time down a narrow thread.
 * The reserve is struck — the tile's words span its full width
 * again. The floating Go Live pill and the bubble only ever
 * threaten the BOTTOM of the scroll, never the side of every
 * card, so the whole of the clearance is the room at the
 * section's foot (120px, the hub page's measure, build .12):
 * the last tile scrolls clear of them. The floaters themselves
 * are untouched. */
@media (max-width:640px){
  #whatsNew{padding-bottom:120px}
}
@media (prefers-reduced-motion: reduce){.wn-tile{transition:none}.wn-tile:hover{transform:none}.wn-more{transition:none}}

/* ---------- The hidden bottom menu (build 2026.11.02) ----------
 * The member's own choice, saved on their account: the bar melts
 * away (body.nav-hidden), and a Menu quick button in the bubble can
 * summon it back as a temporary overlay (.tab-summoned) until it is
 * dismissed or the member navigates. Only Settings restores it. */
html.nav-hidden-pre #tabbar{display:none !important}
body.nav-hidden #tabbar{display:none !important}
body.nav-hidden #tabbar.tab-summoned{display:flex !important}

/* ---------- Ranks & Perks (build 2026.11.02) ---------- */
.rk-welcome{text-align:center;padding:30px 22px}
.rk-placecard{font-family:var(--serif);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-size:.78rem}
.rk-name{font-family:var(--display);color:var(--candle);font-size:2.1rem;margin:8px 0 6px;letter-spacing:.03em}
.rk-warm{color:var(--muted);font-family:var(--serif);font-size:1.12rem;line-height:1.65;max-width:56ch;margin:0 auto}
.rk-mine{border-color:var(--gold);box-shadow:inset 0 1px 0 rgba(232,179,75,.22),0 10px 30px rgba(0,0,0,.45)}
.rk-powers{color:var(--txt);line-height:1.7;font-size:1.02rem}
.rk-door{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--line)}
.rk-door:last-child{border-bottom:none}
.rk-door-label{font-family:var(--serif);color:var(--candle);white-space:nowrap;font-size:1.05rem}
.rk-door-line{color:var(--muted);line-height:1.55}
.rk-door.locked{opacity:.62}
.rk-higher-h{font-family:var(--serif);color:var(--gold);margin:18px 0 4px}
.rk-rung{padding:12px 0;border-bottom:1px dashed var(--line)}
.rk-rung:last-child{border-bottom:none}
.rk-rung.you{border:1px solid var(--gold);border-radius:var(--r);padding:12px 14px;background:var(--card2);
  box-shadow:0 0 16px rgba(232,179,75,.18)}
.rk-rung-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.rk-rung-name{font-family:var(--display);color:var(--gold);letter-spacing:.04em}
.rk-you{color:var(--candle);font-family:var(--serif);font-size:1rem}

/* ---------- The Profile Hub (build 2026.11.02.12) ----------
 * Steven's order: "tie it all into the profile — one page, access
 * everything, nice and nice." Four dressed sections fold open
 * beneath the place card, in the showcase tiles' own dress (build
 * .3): an art band, a title, ONE teaser line, and the doors behind
 * the fold — each door one tap. The folds are independent here;
 * nothing about the doors behind them changed. */
.hub-wrap{margin:14px 0 4px}
.hub-lede{text-align:center;color:var(--muted);font-family:var(--serif);font-size:1.05rem;line-height:1.55;margin:0 auto 12px;max-width:52ch}
.hub-sec{padding:0;overflow:hidden}
.hub-head{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;cursor:pointer;
  background:radial-gradient(130% 170% at 16% 0%,rgba(232,179,75,.17),rgba(232,179,75,0) 58%);
  border:none;color:var(--txt);font:inherit;padding:16px 18px 12px}
.hub-ico{font-size:1.9rem;line-height:1.15}
.hub-head-main{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.hub-title{font-family:var(--serif);color:var(--txt);font-size:1.22rem}
.hub-teaser{color:var(--muted);font-family:var(--serif);font-size:.99rem;line-height:1.45}
.hub-caret{flex:none;color:var(--candle);font-size:1.05rem;padding:3px 8px;border:1px solid rgba(232,179,75,.38);
  border-radius:999px;background:rgba(232,179,75,.06);transition:transform .25s ease,background .25s ease}
.hub-sec.open .hub-caret{transform:rotate(180deg);background:rgba(232,179,75,.18)}
.hub-body{padding:2px 18px 14px}
.hub-body .rk-door-label{text-decoration:none}
button.hub-open{background:none;border:none;cursor:pointer;font:inherit;padding:0;text-align:left}
button.hub-open:hover{text-decoration:underline}
/* The porch clearance, hub page (build 2026.11.02.12): on a phone
 * the page leaves room at its foot for its last card to rest
 * clear of the floating Go Live pill and the Glass Bubble. Build
 * .12 also kept a 150px cleared lane on the right of the welcome
 * card and the hub bodies; build 2026.11.02.14 struck those lanes
 * for the same fault as the showcase tiles' — the hub's door
 * labels are unbreakable (white-space:nowrap) and wider than the
 * lane left room for, so their lines were crushed a word at a
 * time, and the welcome card's name wrapped word by word. The
 * words read across the page now; the room at the foot is the
 * whole of the clearance. The floaters themselves are untouched. */
@media (max-width:640px){
  .rk-page{padding-bottom:120px}
}
@media (prefers-reduced-motion: reduce){.hub-caret{transition:none}}

/* ---------- The Command Field (build 2026.11.02) ---------- */
.cmd-card{border-color:var(--line-gold)}
.cmd-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cmd-input{flex:1 1 260px;font-size:1rem;padding:12px 14px}
.cmd-out{margin-top:12px;min-height:1.4em}
.cmd-done{color:var(--txt);line-height:1.6}
.cmd-err{color:var(--bad);line-height:1.6}
.cmd-confirm{margin-top:10px;border:1px solid var(--gold);border-radius:var(--r);padding:14px;background:var(--card2)}
.cmd-summary{font-family:var(--serif);font-size:1.15rem;color:var(--candle);margin:0 0 10px;line-height:1.5}
.cmd-caps,.cmd-ledger{margin-top:12px;color:var(--muted)}
.cmd-caps summary,.cmd-ledger summary{cursor:pointer;font-family:var(--serif);color:var(--gold);font-size:1.02rem;padding:4px 0}
.cmd-caps ul,.cmd-caps-list{margin:8px 0 0 18px;line-height:1.7;color:var(--muted)}
.cmd-ledger-row{padding:5px 0;border-bottom:1px dashed var(--line);line-height:1.5}
.cmd-ledger-what{color:var(--txt)}
.seal-video{width:100%;max-height:55vh;border-radius:12px;border:1px solid var(--gold);background:#000;margin-top:12px}

/* Ranks & Perks — the Host step's two callings + the Big Leagues
   panel + the Video Host's Cabinet (2026-11-02). The cabinet is its
   own room: plum-dark, shelf-warm, nothing like the ladder page. */
.rk-flavors { margin-top:10px; border-top:1px dashed #c9a22744; padding-top:10px; }
.rk-flavor { border:1px solid #c9a22733; border-radius:10px; padding:10px 12px; margin-top:8px; background:#17101acc; }
.rk-flavor.yours { border-color:#c9a227; background:#241623; box-shadow:0 0 14px #c9a22722 inset; }
.rk-flavor-head { display:flex; justify-content:space-between; font-weight:bold; color:#e8d9ae; }
.rk-flavor-full { border-color:#c9a227; background:linear-gradient(180deg,#2b1a12,#241623); box-shadow:0 0 18px #c9a2272e inset; }
.rk-flavor-full .rk-flavor-head { color:#f4d97b; }
/* The Host calling picker (2026-11-02): the Full Host choice wears gold. */
.calling-is-full { border-color:#c9a227 !important; background:#241623; color:#f4d97b; box-shadow:0 0 12px #c9a22744; }
.rk-menuswitch { display:flex; gap:10px; margin:12px 0; flex-wrap:wrap; }
.rk-big-meter { height:10px; border-radius:99px; background:#2a1a24; overflow:hidden; margin:10px 0 6px; border:1px solid #c9a22744; }
.rk-big-meter span { display:block; height:100%; background:linear-gradient(90deg,#8a6a1f,#e8b34b,#ffd977); border-radius:99px; }
.rk-big-line { line-height:1.6; }
.rk-big-box { display:flex; gap:10px; align-items:flex-start; margin-top:12px; cursor:pointer; line-height:1.5; }
.rk-big-box input { width:22px; height:22px; margin-top:2px; accent-color:#c9a227; flex:none; }
.rk-cabinet { border:1px solid #7a4a8c66; border-radius:16px; padding:18px; background:linear-gradient(160deg,#1d1024,#120a18 70%); box-shadow:0 0 24px #7a4a8c22 inset; }
.rk-cab-head h2 { color:#e9d5ff; margin:4px 0 8px; }
.rk-cab-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:14px; }
.rk-cab-card { border:1px solid #7a4a8c44; border-radius:12px; padding:14px; background:#180d20cc; }
.rk-cab-card h3 { margin:0 0 10px; color:#e9d5ff; }
.rk-cab-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.rk-cab-stat { display:flex; flex-direction:column; gap:2px; }
.rk-cab-n { font-size:1.15rem; font-weight:bold; color:#f3e6ff; }
.rk-cab-l { font-size:.78rem; color:#b39ecb; }
.rk-cab-wide { grid-column: 1 / -1; }
.rk-pay .rk-cab-l { color:#a68f63; }
.rk-pay .rk-cab-n { color:#e8d9ae; }

/* The Honors Collection strip (2026-11-02) */
.honors-strip { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.honor-chip { display:inline-block; border:1px solid #c9a22766; background:#1d1420; color:#e8d9ae; border-radius:999px; padding:3px 10px; font-size:.78rem; letter-spacing:.02em; }
.honor-chip-gold { border-color:#c9a227; background:#2a1a10; color:#f4d97b; box-shadow:0 0 10px #c9a22740; font-weight:700; }
.rk-decline { margin-top:14px; }
.rk-decline-row { display:flex; gap:8px; align-items:center; margin:4px 0; }
.rkDeclineSearch, #rmDeclineSearch { width:100%; max-width:340px; margin-top:6px; }
.rm-decline { margin-top:10px; }

/* — The Search Parlour (build 2026.11.02.16): one big, easy room.
   Plain words, large tap targets, nothing squeezed: text spans the
   full width of its card on every screen (build .14's law). — */
.sp-label{font-family:var(--serif);font-size:1.08rem;font-weight:700;color:var(--txt);margin:18px 0 8px}
.sp-label:first-child{margin-top:0}
.sp-big{min-height:54px;font-size:1.05rem;padding:12px 16px;width:100%}
.sp-row{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 2px}
.sp-toggle{font-size:.95rem;padding:11px 18px;min-height:48px}
.sp-clear{width:100%;min-height:52px;margin-top:20px;font-size:1rem}
.sp-note{margin-top:12px}
.sp-h{font-family:var(--serif);margin:28px 0 12px}
.sp-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.sp-grid{grid-template-columns:1fr 1fr}}
.sp-result{margin:0}
.sp-awake{color:#7dd87d;font-weight:700;font-size:.85rem;margin-top:2px}
.sp-calling{margin-top:8px}
.sp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sp-empty{padding:18px}
.sp-door{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin:0 0 14px}
.sp-door-main{display:flex;align-items:center;gap:12px}
.sp-door-ico{font-size:1.5rem}

/* ---------- THE DOORS PASS (build 2026.11.04.1) ----------
   Steven's order: every door in the house wears the Sanctum's door
   dress — icon, serif name, one small candlelit line, a gold arrow —
   and the WHOLE card is the tap. The component is .door-card (it
   shares the chamber-card rules above); these are its companions. */
.door-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin:14px 0}
button.door-card{font:inherit;text-align:left;width:100%;cursor:pointer}
.door-card.hub-door{margin:10px 0}
.door-card.hub-door:first-child{margin-top:2px}
.door-card .c-desc{line-height:1.5}
/* The Velvet tab bar takes a taller, more generous step. */
.velvet-tabs .vt{min-height:56px;display:flex;align-items:center;justify-content:center}
/* Settings' rite rows: the words themselves carry the switch —
   the whole row is the tap (a label for its own switch). */
.toggle-row .txt{cursor:pointer}
/* The showcase cards: the first link stretches over the whole card,
   so the card itself is the door; any second link stands above it. */
.showcase .card{position:relative}
.showcase .card:hover{border-color:var(--gold)}
.sc-links a{position:relative;z-index:1}
.sc-links a.door-hit{z-index:auto}
.sc-links a.door-hit::after{content:"";position:absolute;inset:0;border-radius:inherit}
/* What's New tiles ride the same law: the tile is the door. */
.wn-tile{cursor:pointer}
/* Every Door Opens (build 2026.11.04.10): a face wired by the
   shared hand (data-face-href) wears the tap. */
[data-face-href]{cursor:pointer}
.wn-tile:hover{border-color:var(--gold)}
/* The Schoolroom's dance-card heads take the door's full height. */
.sr-path-head{min-height:88px}
/* Velvet volume cards gain the door's gold arrow. */
.volume-card .v-body{position:relative;padding-right:34px}
.volume-card .v-go{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1.3rem;opacity:.7}
/* Floater clearance: on a phone the Go Live pill and the round
   headphones button ride fixed at the lower right. Every page gets
   enough floor beneath it that the last doors can always be
   scrolled fully clear of that stack and tapped in the open.
   (Build 2026.11.04.2: the maxed Go Live pill stands 52px tall;
   the stack — tab-bar clearance 112 + bubble 58 + gap 12 + pill
   52 = 234px — keeps its floor, raised to 252px so the last door
   still scrolls clear with room to spare.) */
@media(max-width:640px){
  .page{padding-bottom:calc(252px + env(safe-area-inset-bottom))}
}

/* ================= THE KINDRED ROOM (build 2026.11.04.5) =================
 * The matching chamber of the Search Parlour: the standing, the
 * lantern a member's type burns in, the walk's big tappable
 * cards, and the match cards with their honest percent and the
 * working shown thread by thread. */
.kindred-wrap .kindred-standing { padding: 20px; }
.kindred-lantern {
  text-align: center; padding: 16px 10px; margin: 10px 0;
  border: 1px solid rgba(232, 179, 75, .45); border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, rgba(232, 179, 75, .14), rgba(20, 10, 28, .25) 70%);
}
.kindred-lantern-code { font-family: 'Cinzel Decorative', serif; font-size: 2rem; letter-spacing: .35em; color: #ffe9b0; text-indent: .35em; }
.kindred-lantern-name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.35rem; color: var(--gold, #e8b34b); margin: 2px 0 6px; }
.kindred-doors { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.kindred-typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 14px; }
.kindred-type {
  display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center;
  padding: 12px 8px; border-radius: 12px; cursor: pointer; min-height: 64px;
  background: rgba(30, 16, 44, .65); color: #f3e7d3; border: 1px solid rgba(232, 179, 75, .35);
  font: inherit;
}
.kindred-type:hover, .kindred-type:focus-visible { border-color: #e8b34b; background: rgba(52, 28, 74, .8); }
.kindred-type strong { letter-spacing: .18em; }
.kindred-type span { font-size: .82rem; opacity: .8; font-style: italic; }
.kindred-card-walk { padding: 22px; }
.kindred-q { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; line-height: 1.25; margin: 0 0 6px; }
.kindred-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.kindred-opt {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
  width: 100%; padding: 16px 18px; min-height: 64px; border-radius: 14px; cursor: pointer;
  background: rgba(30, 16, 44, .65); color: #f3e7d3; border: 1px solid rgba(232, 179, 75, .35);
  font: inherit; font-size: 1.05rem;
}
.kindred-opt span { font-size: .9rem; opacity: .75; font-style: italic; }
.kindred-opt:hover, .kindred-opt:focus-visible { border-color: #e8b34b; }
.kindred-opt.on {
  border-color: #ffe9b0; background: linear-gradient(160deg, rgba(120, 84, 20, .55), rgba(52, 28, 74, .85));
  box-shadow: 0 0 0 1px rgba(255, 233, 176, .6), 0 0 22px rgba(232, 179, 75, .25);
}
.kindred-later {
  display: block; margin: 18px auto 0; background: none; border: none; cursor: pointer;
  color: var(--gold, #e8b34b); font: inherit; font-size: 1rem; text-decoration: underline;
  text-underline-offset: 4px; padding: 10px 16px; min-height: 48px;
}
.kindred-card .kindred-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kindred-pct {
  font-family: 'Cinzel Decorative', serif; font-weight: 900; font-size: 1.9rem; line-height: 1;
  color: #ffe9b0; border: 1px solid rgba(255, 233, 176, .7); border-radius: 999px;
  padding: 10px 14px; background: radial-gradient(circle at 50% 30%, rgba(232, 179, 75, .35), rgba(60, 20, 20, .4));
  box-shadow: 0 0 18px rgba(232, 179, 75, .3); white-space: nowrap;
}
.kindred-pct span { font-size: 1rem; margin-left: 1px; }
.kindred-threads { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.kindred-thread { border-left: 2px solid rgba(232, 179, 75, .5); padding: 2px 0 2px 10px; }
.kindred-thread-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kindred-thread-name { font-weight: 700; color: #ffe9b0; font-size: .92rem; letter-spacing: .04em; }
.kindred-thread-score { font-size: .8rem; opacity: .75; }
.kindred-thread-line { font-size: .95rem; line-height: 1.45; }
.kindred-shared { margin-top: 2px; }

/* ---- BUILD .23 — THE KINDRED PORTRAIT: the walk made easy
 * and fun, the why on every match, and the lantern's meaning.
 * The scene cards grow generous (a thumb should never hunt),
 * the candles fill as the walk advances, and the type reveal
 * at the walk's end gets its small ceremony of light. */
.kindred-opt { min-height: 76px; padding: 20px 20px; font-size: 1.08rem; }
.kindred-type { min-height: 72px; }
.kindred-lantern-meaning {
  font-family: 'Cormorant Garamond', serif; font-size: 1.12rem; line-height: 1.4;
  color: #f3e7d3; max-width: 34em; margin: 2px auto 6px;
}
.kindred-candles { margin-top: 12px; }
.kindred-candles-row { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.kindred-candle { font-size: .95rem; opacity: .22; filter: grayscale(1); transition: opacity .5s ease, filter .5s ease; }
.kindred-candle.lit { opacity: 1; filter: none; text-shadow: 0 0 10px rgba(232, 179, 75, .8); }
.kindred-candles-bar {
  height: 6px; border-radius: 999px; margin-top: 8px; overflow: hidden;
  background: rgba(232, 179, 75, .15); border: 1px solid rgba(232, 179, 75, .25);
}
.kindred-candles-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(232, 179, 75, .55), #ffe9b0);
  box-shadow: 0 0 12px rgba(232, 179, 75, .55); transition: width .6s ease;
}
.kindred-why {
  margin-top: 10px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid rgba(232, 179, 75, .35); background: rgba(232, 179, 75, .08);
  font-size: .95rem; line-height: 1.45; color: #ffe9b0;
}
.kindred-reveal .kindred-lantern { animation: kindredReveal 1.6s ease both; }
@keyframes kindredReveal {
  0% { opacity: 0; transform: translateY(10px) scale(.98); box-shadow: 0 0 0 rgba(232, 179, 75, 0); }
  55% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 0 42px rgba(232, 179, 75, .35); }
  100% { box-shadow: 0 0 18px rgba(232, 179, 75, .15); }
}

/* ---------- THE WAY BACK BRUSH-UP (build 2026.11.05.7) ----------
 * The .36 sweep of the whole house, conservative by law: no page
 * restructured, no word changed, nothing re-dressed out of its
 * own clothes. What it does: the floaters' floor is completed,
 * and every wired face wears the tap's shine.
 * The porch stack rides at bottom:112 until 761px, but the
 * standing page floor (252px, the maxed stack's measure) was
 * only ever laid at 640px and below — the tablet band between
 * stood on the old floor with the pill riding over its last
 * words. The band is floored now, in the same measure. */
@media (min-width:641px) and (max-width:760px){
  .page{padding-bottom:calc(252px + env(safe-area-inset-bottom))}
}
/* On wide screens the floats rest at bottom:22 and stand 58px
 * tall — a 96px floor keeps the last words of every page clear
 * of both stacks there too. */
@media (min-width:761px){
  .page{padding-bottom:96px}
}
/* A wired face answers a hover the way a What's New tile always
 * has — its rim warms toward gold, the house's promise that the
 * face is a door. */
[data-face-href]{transition:border-color .18s ease}
[data-face-href]:hover{border-color:rgba(232,179,75,.55)}
/* The in-place faces wired by this build — a recording's card,
 * a stage's card — wear the same promise and the same warmth. */
[data-rec-face-wired="1"],[data-rm-face-wired="1"]{cursor:pointer;transition:border-color .18s ease}
[data-rec-face-wired="1"]:hover,[data-rm-face-wired="1"]:hover{border-color:rgba(232,179,75,.55)}
/* Doors press the way buttons press. */
.door-card:active{transform:translateY(1px)}
@media (prefers-reduced-motion: reduce){
  [data-face-href],[data-rec-face-wired="1"],[data-rm-face-wired="1"]{transition:none}
  .door-card:active{transform:none}
}