:root{
  --bg:#0a0806;
  --panel:#161009;
  --panel-2:#1d150c;
  --line:#2f2515;
  --line-soft:#251c10;
  --text:#f0e7d6;
  --dim:#9d8d74;
  --neon:#ff3b5c;
  --neon-glow:rgba(255,59,92,.55);
  --amber:#eda03f;
  --amber-glow:rgba(237,160,63,.35);
  --fock:#3fd8c7;
  --me:#33250f;
  --radius:14px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --cond:"Arial Narrow","Helvetica Neue",Helvetica,"Franklin Gothic Medium",Arial,sans-serif;
  font-size:15px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
  @supports (height:100dvh){ body{height:100dvh} }
body{
  background:
    radial-gradient(1100px 520px at 72% -12%, rgba(255,59,92,.10), transparent 60%),
    radial-gradient(800px 480px at 8% 112%, rgba(63,216,199,.05), transparent 60%),
    radial-gradient(1500px 900px at 50% 130%, rgba(237,160,63,.06), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;
}
/* cigar-smoke vignette + film grain laid over the whole room; touches nothing */
body::before{
  content:"";position:fixed;inset:0;z-index:998;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 38%, transparent 55%, rgba(0,0,0,.45) 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size:140px 140px;
  mix-blend-mode:overlay;
}

/* ============ TOP BAR ============ */
header{
  height:64px;display:flex;align-items:center;gap:18px;padding:0 20px;
  border-bottom:1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 7px),
    linear-gradient(180deg,#1a1108,#0d0906);
  box-shadow:0 6px 26px rgba(0,0,0,.55);
  position:relative;z-index:2;
}
.logo{display:flex;align-items:baseline;gap:9px;user-select:none;cursor:default;white-space:nowrap}
.logo .only{
  font-family:var(--cond);font-style:italic;font-weight:900;font-size:1.65rem;letter-spacing:.5px;color:#fff;
  text-shadow:0 0 4px rgba(255,255,255,.45),0 0 10px var(--neon),0 0 24px var(--neon),0 0 52px var(--neon-glow);
  animation:flicker 7s infinite;
}
.logo .club{color:var(--dim);font-size:.8rem;letter-spacing:3px;text-transform:uppercase}
.logo .tag{
  color:var(--amber);font-size:.66rem;letter-spacing:3.5px;text-transform:uppercase;
  border:1px solid rgba(237,160,63,.45);padding:3px 9px;border-radius:20px;
  box-shadow:0 0 12px var(--amber-glow), inset 0 0 8px rgba(237,160,63,.12);
  text-shadow:0 0 8px var(--amber-glow);
}
@keyframes flicker{
  0%,91.5%,93.5%,100%{opacity:1}
  92%{opacity:.4}
  93%{opacity:.85}
  96%{opacity:1}
  96.5%{opacity:.7}
  97%{opacity:1}
}
.crumbs{flex:1;display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--dim);min-width:0;overflow:hidden;font-family:var(--mono)}
.crumbs .node{color:var(--fock);white-space:nowrap}
.crumbs .here{color:#fff;font-weight:600;white-space:nowrap}
.crumbs .gov{font-size:.62rem;border:1px solid rgba(63,216,199,.35);color:var(--fock);border-radius:20px;padding:2px 8px;margin-left:6px;white-space:nowrap;letter-spacing:.5px}
.crumbs .gov.pending{border-style:dashed}
.persona{
  display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--panel-2),#171009);
  border:1px solid var(--line);border-radius:30px;padding:6px 8px 6px 14px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.persona:hover{border-color:var(--amber);box-shadow:0 0 12px var(--amber-glow)}
.persona .name{font-weight:700;font-size:.85rem;letter-spacing:.3px}
.persona .claim{
  font-size:.68rem;background:var(--amber);color:#1a1206;font-weight:800;border:none;
  padding:5px 11px;border-radius:20px;cursor:pointer;letter-spacing:1px;text-transform:uppercase;
  box-shadow:0 0 10px var(--amber-glow);
}
.persona .claim.claimed{background:#2f7a4f;color:#dfffe9;box-shadow:0 0 10px rgba(47,122,79,.5)}
.jumpbtn{
  background:transparent;border:1px solid var(--line);color:var(--text);border-radius:30px;
  padding:8px 16px;font-size:.8rem;cursor:pointer;white-space:nowrap;letter-spacing:.3px;
  transition:all .2s;
}
.jumpbtn:hover{border-color:var(--fock);color:var(--fock);box-shadow:0 0 12px rgba(63,216,199,.25)}

/* ============ LAYOUT ============ */
.wrap{display:flex;height:calc(100% - 64px)}
.chatcol{flex:1;display:flex;flex-direction:column;min-width:0}
.rail{width:340px;border-left:1px solid var(--line);display:flex;flex-direction:column;background:#0c0906}

/* room banner */
.roombar{
  padding:10px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;
  background:linear-gradient(90deg,rgba(237,160,63,.07),transparent 55%);
  border-left:3px solid var(--amber);
}
.roombar .dot{width:9px;height:9px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon);animation:onair 2.4s ease-in-out infinite}
@keyframes onair{50%{opacity:.5}}
.roombar .rname{font-family:var(--cond);font-weight:800;font-size:1.05rem;text-transform:uppercase;letter-spacing:1.4px}
.roombar .rdesc{color:var(--dim);font-size:.8rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic}
.roombar .occ{color:var(--dim);font-size:.72rem;white-space:nowrap;font-family:var(--mono)}

/* chat */
.chat{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.msg{display:flex;gap:11px;max-width:78%;animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg .av{
  width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;background:radial-gradient(circle at 35% 30%,#241a0e,#140e08);border:1px solid var(--line);cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.4);
}
.msg .body{display:flex;flex-direction:column;gap:3px}
.msg .who{font-size:.7rem;color:var(--dim);font-family:var(--mono);letter-spacing:.2px}
.msg .who b{color:var(--amber);cursor:pointer}
.msg .who b:hover{text-decoration:underline}
.msg .bubble{
  background:linear-gradient(180deg,var(--panel-2),#171009);border:1px solid var(--line);border-radius:3px 16px 16px 16px;
  padding:10px 14px;font-size:.92rem;line-height:1.5;
  box-shadow:0 3px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.02);
  overflow-wrap:anywhere;
}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .bubble{background:linear-gradient(180deg,#3b2b12,#2c1f0d);border-color:#6d4d1d;border-radius:16px 3px 16px 16px;box-shadow:0 3px 14px rgba(237,160,63,.1)}
.msg.me .who{text-align:right}
.msg.drift .bubble{border-color:rgba(255,59,92,.55);box-shadow:0 0 0 1px rgba(255,59,92,.18),0 0 18px rgba(255,59,92,.1)}
.msg.leaving{transition:all .6s ease;opacity:0;transform:translateX(60px) scale(.95)}

.reacts{display:flex;gap:5px}
.msg.me .reacts{justify-content:flex-end}
.reacts .react{
  background:var(--panel-2);border:1px solid var(--line);border-radius:11px;color:var(--dim);
  font-size:.76rem;line-height:1;padding:3px 7px;cursor:pointer;font-family:var(--mono);
  transition:border-color .15s,color .15s;
}
.reacts .react:hover{border-color:var(--amber);color:var(--amber)}

/* day breaks — the conversation splits where the calendar does */
.daybreak{
  align-self:stretch;display:flex;align-items:center;gap:14px;
  color:var(--dim);font-family:var(--mono);font-size:.64rem;
  text-transform:uppercase;letter-spacing:2.5px;margin:8px 0 2px;
  user-select:none;
}
.daybreak::before,.daybreak::after{content:"";flex:1;border-top:1px solid var(--line-soft)}

.sysline{
  align-self:center;text-align:center;font-size:.7rem;color:var(--dim);font-family:var(--mono);
  border:1px dashed var(--line);border-radius:20px;padding:5px 16px;max-width:85%;letter-spacing:.3px;
}
.sysline.fork{color:var(--neon);border-color:rgba(255,59,92,.4);text-shadow:0 0 10px rgba(255,59,92,.3)}
.sysline.arrive{color:var(--fock);border-color:rgba(63,216,199,.4)}

/* composer */
.composer{padding:14px 22px 18px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;background:linear-gradient(180deg,transparent,rgba(0,0,0,.25))}
.composer input{
  flex:1;background:linear-gradient(180deg,#171009,var(--panel-2));border:1px solid var(--line);border-radius:26px;color:var(--text);
  padding:12px 18px;font-size:.93rem;outline:none;transition:border-color .2s, box-shadow .2s;
}
.composer input::placeholder{color:#6e6250;font-style:italic}
.composer input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(237,160,63,.1),0 0 18px var(--amber-glow)}
.composer button{
  background:linear-gradient(180deg,#ff5470,#e1294c);border:none;color:#fff;font-weight:800;border-radius:26px;
  padding:12px 24px;cursor:pointer;font-size:.82rem;font-family:var(--cond);text-transform:uppercase;letter-spacing:2px;
  box-shadow:0 0 18px rgba(255,59,92,.4), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .15s, box-shadow .15s;
}
.composer button:hover{transform:translateY(-1px);box-shadow:0 0 26px rgba(255,59,92,.55), inset 0 1px 0 rgba(255,255,255,.2)}
.hint{font-size:.68rem;color:var(--dim);padding:0 24px 10px;text-align:center;font-family:var(--mono)}
.hint b{color:var(--amber)}

/* ============ RAIL: moderator log — control-room ticker ============ */
.railhead{
  padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:2.5px;text-transform:uppercase;color:#c7a76b;
  background:linear-gradient(180deg,#151009,#0c0906);
}
.railhead::after{content:"";width:6px;height:6px;border-radius:50%;margin-left:auto;background:var(--neon);box-shadow:0 0 8px var(--neon);animation:onair 1.8s ease-in-out infinite}
.railhead .mavatar{font-size:1.05rem}
.log{
  flex:1.35;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line);
  font-family:var(--mono);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
    #0b0805;
}
.entry{
  background:linear-gradient(180deg,#151009,#100b06);border:1px solid var(--line-soft);border-left:3px solid var(--dim);
  border-radius:4px;padding:9px 11px;font-size:.75rem;line-height:1.55;color:#d8cdb9;
  animation:pop .3s ease;box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.entry time{display:block;font-size:.62rem;color:#6e6250;margin-bottom:4px;letter-spacing:1.5px;text-transform:uppercase}
.entry.fork{border-left-color:var(--neon)}
.entry.fork .tag{color:var(--neon);text-shadow:0 0 8px rgba(255,59,92,.4)}
.entry.node{border-left-color:var(--fock)}
.entry.node .tag{color:var(--fock);text-shadow:0 0 8px rgba(63,216,199,.35)}
.entry.move{border-left-color:var(--amber)}
.entry.move .tag{color:var(--amber);text-shadow:0 0 8px var(--amber-glow)}
.entry .tag{font-weight:800;font-size:.64rem;letter-spacing:1.5px;text-transform:uppercase}
.entry .quote{color:var(--dim);font-style:italic}
.entry a{color:var(--fock);text-decoration:none;cursor:pointer}
.entry .store{margin-top:6px;font-size:.64rem;color:#6e6250;border-top:1px dashed var(--line-soft);padding-top:5px}
.entry .store code{color:var(--fock);background:rgba(63,216,199,.08);padding:1px 5px;border-radius:4px}

/* ============ RAIL: map ============ */
.map{flex:1;position:relative;min-height:220px;background:radial-gradient(80% 70% at 50% 45%, rgba(63,216,199,.04), transparent 70%)}
.map svg{width:100%;height:100%;display:block}
.map .maphint{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:.64rem;color:#6e6250;font-family:var(--mono);letter-spacing:.5px}
.mnode{cursor:pointer}
.mnode circle{fill:#1a130b;stroke:var(--line);stroke-width:1.5;transition:all .3s}
.mnode:hover circle{stroke:var(--amber)}
.mnode text{fill:var(--dim);font-size:9px;text-anchor:middle;font-family:ui-monospace,Menlo,Consolas,monospace}
.mnode.here circle{fill:rgba(255,59,92,.2);stroke:var(--neon);filter:drop-shadow(0 0 7px var(--neon-glow))}
.mnode.here text{fill:#fff;font-weight:700}
.mnode.fresh circle{stroke:var(--fock);stroke-dasharray:3 3}
.mnode.fresh text{fill:var(--fock)}
.medge{stroke:var(--line);stroke-width:1.5}
.medge.fresh{stroke:var(--fock);stroke-dasharray:4 4;animation:dashmove 1.2s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-14}}

/* ============ OVERLAYS ============ */
.overlay{
  position:fixed;inset:0;background:rgba(6,4,2,.82);backdrop-filter:blur(5px);
  display:none;align-items:center;justify-content:center;z-index:50;
}
.overlay.show{display:flex}
.card{
  background:linear-gradient(180deg,#1a1209,#120d07);border:1px solid #382a16;border-radius:var(--radius);
  width:min(430px,92vw);padding:26px;animation:pop .3s ease;
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4);
  position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);opacity:.55;
}
.card h2{font-family:var(--cond);font-size:1.25rem;margin-bottom:6px;text-transform:uppercase;letter-spacing:1.2px}
.card p{color:var(--dim);font-size:.86rem;line-height:1.6;margin-bottom:14px}
.card .row{display:flex;gap:10px;margin-top:8px}
.btn{
  flex:1;padding:11px;border-radius:10px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel-2),#171009);
  color:var(--text);font-weight:700;cursor:pointer;font-size:.85rem;transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,#ff5470,#e1294c);border-color:var(--neon);color:#fff;box-shadow:0 0 16px rgba(255,59,92,.35)}
.btn.amber{background:linear-gradient(180deg,#f5b055,#d98c28);border-color:var(--amber);color:#1a1206;box-shadow:0 0 14px var(--amber-glow)}

/* welcome */
#welcome .bigname{
  font-family:var(--cond);font-size:1.9rem;font-weight:900;color:var(--amber);text-align:center;margin:12px 0 4px;
  letter-spacing:1px;text-shadow:0 0 20px var(--amber-glow);
}
#welcome .sub{text-align:center;font-size:.66rem;color:var(--dim);letter-spacing:2px;text-transform:uppercase;font-family:var(--mono)}
#welcome .reroll{display:block;margin:12px auto 16px;background:none;border:none;color:var(--fock);cursor:pointer;font-size:.8rem}
#welcome .reroll:hover{text-decoration:underline}
#welcome .recover{display:block;margin:16px auto 0;background:none;border:none;color:var(--dim);cursor:pointer;font-size:.72rem;font-family:var(--mono);letter-spacing:.5px}
#welcome .recover:hover{color:var(--fock);text-decoration:underline}

/* reseat splash — the Den Father speaks in serif, like a man with regrets */
#reseat{flex-direction:column;gap:14px;text-align:center}
#reseat .denface{font-size:3.2rem;filter:drop-shadow(0 0 20px var(--neon-glow))}
#reseat .say{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:1.18rem;max-width:460px;line-height:1.65;color:#fff}
#reseat .to{color:var(--fock);font-size:.78rem;letter-spacing:1.5px;font-family:var(--mono);text-transform:uppercase}

/* jump modal */
#jump .card{width:min(480px,92vw)}
#jump input{
  width:100%;background:linear-gradient(180deg,#171009,var(--panel-2));border:1px solid var(--line);border-radius:10px;
  color:var(--text);padding:11px 14px;font-size:.9rem;outline:none;margin-bottom:12px;
}
#jump input:focus{border-color:var(--fock)}
.topiclist{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.topic{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;background:linear-gradient(180deg,var(--panel-2),#171009);transition:all .15s;
}
.topic:hover{border-color:var(--fock);box-shadow:0 0 12px rgba(63,216,199,.15)}
.topic .tpath{font-size:.66rem;color:var(--fock);font-family:var(--mono)}
.topic .tpath.pending{color:var(--dim)}
.topic .tname{font-weight:700;font-size:.86rem;flex:1}
.topic .tocc{font-size:.7rem;color:var(--dim);font-family:var(--mono)}

/* profile */
#profile .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
#profile .stat{background:linear-gradient(180deg,var(--panel-2),#171009);border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center}
#profile .stat b{display:block;font-family:var(--cond);font-size:1.35rem;color:var(--amber);text-shadow:0 0 12px var(--amber-glow)}
#profile .stat span{font-size:.62rem;color:var(--dim);text-transform:uppercase;letter-spacing:1px;font-family:var(--mono)}
#profile .ptop{display:flex;align-items:center;gap:14px}
#profile .pav{font-size:2.6rem;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
#profile .badge{font-size:.64rem;border-radius:20px;padding:3px 10px;border:1px solid var(--line);color:var(--dim);font-family:var(--mono);letter-spacing:.5px;text-transform:uppercase}
#profile .badge.secured{border-color:#2f7a4f;color:#7fdca4;box-shadow:0 0 10px rgba(47,122,79,.3)}
#profile .sub{font-size:.7rem;color:var(--dim);font-family:var(--mono);margin:2px 0 4px}

/* profile edit */
.pedit{display:none;flex-direction:column;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pedit.open{display:flex}
.pedit label{display:flex;flex-direction:column;gap:6px;font-size:.78rem;color:var(--dim);font-family:var(--mono);letter-spacing:.3px}
.pedit input,.pedit textarea{
  width:100%;background:linear-gradient(180deg,#171009,var(--panel-2));border:1px solid var(--line);border-radius:10px;
  color:var(--text);padding:10px 12px;font-size:.88rem;outline:none;font-family:inherit;resize:vertical;
}
.pedit input:focus,.pedit textarea:focus{border-color:var(--fock)}
.pedit .sub{margin:0}

/* info button (header) — same footprint as the mobile rail toggle, but
   always visible: it's not a drawer, it's a modal anyone might want. */
.infobtn{
  display:flex;align-items:center;justify-content:center;flex:none;
  background:transparent;border:1px solid var(--line);color:var(--text);
  border-radius:30px;width:36px;height:36px;cursor:pointer;font-size:1rem;transition:border-color .2s;
}
.infobtn:hover{border-color:var(--amber)}
.railinfo{display:none}

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:#33281a;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#4a3a22}
::-webkit-scrollbar-track{background:transparent}

/* invite button — lives in the roombar */
.roombar .invite{
  background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:20px;
  padding:5px 12px;font-size:.72rem;cursor:pointer;white-space:nowrap;font-family:var(--mono);
  letter-spacing:.3px;transition:all .2s;
}
.roombar .invite:hover{border-color:var(--amber);color:var(--amber);box-shadow:0 0 10px var(--amber-glow)}
.roombar .invite.copied{border-color:#2f7a4f;color:#7fdca4}


/* ============ RESPONSIVE — phones & small tablets ============ */
.railbtn{display:none}
.backdrop{display:none}

@media (max-width: 900px){
  :root{font-size:14px}

  /* header slims down: sign + jump + persona + rail toggle */
  header{gap:10px;padding:0 12px;height:58px}
  .logo .club,.logo .tag{display:none}
  .logo .only{font-size:1.35rem}
  .crumbs{display:none}
  .jumpbtn{padding:7px 12px;font-size:.78rem}
  .persona{padding:5px 6px 5px 10px;gap:7px}
  .persona .name{display:none}

  /* the header is already tight on a phone (logo + jump + persona + rail
     toggle) — info moves into the rail drawer instead of crowding the top
     bar. Without this, a fixed-width icon button here steals space from
     .railbtn under flex-shrink and can push it mostly off-screen — the
     ONLY way to reach the map on mobile, so that's not a minor glitch. */
  .infobtn{display:none}
  .railbtn{
    display:flex;align-items:center;justify-content:center;position:relative;flex:none;
    background:transparent;border:1px solid var(--line);color:var(--text);
    border-radius:30px;width:40px;height:36px;cursor:pointer;font-size:1.05rem;
  }
  .railinfo{
    display:block;width:100%;margin-top:10px;padding:10px;text-align:center;
    background:transparent;border:1px solid var(--line);border-radius:10px;
    color:var(--dim);font-size:.76rem;font-family:var(--mono);cursor:pointer;
  }
  .railinfo:hover{border-color:var(--amber);color:var(--amber)}
  .railbtn .ping{
    position:absolute;top:2px;right:4px;width:8px;height:8px;border-radius:50%;
    background:var(--neon);box-shadow:0 0 8px var(--neon);opacity:0;transition:opacity .2s;
  }
  .railbtn.unread .ping{opacity:1}

  .wrap{height:calc(100% - 58px)}

  /* the rail becomes a slide-over den ledger */
  .rail{
    position:fixed;top:58px;right:0;bottom:0;width:min(340px,88vw);z-index:40;
    transform:translateX(105%);transition:transform .28s ease;
    box-shadow:-18px 0 40px rgba(0,0,0,.6);border-left:1px solid var(--line);
  }
  .rail.open{transform:translateX(0)}
  .backdrop{
    display:block;position:fixed;inset:58px 0 0 0;z-index:39;background:rgba(5,4,2,.55);
    opacity:0;pointer-events:none;transition:opacity .25s;
  }
  .backdrop.show{opacity:1;pointer-events:auto}

  .roombar{padding:8px 12px;gap:8px}
  .roombar .rdesc{display:none}
  .roombar .rname{font-size:.92rem;letter-spacing:1px}
  .roombar .invite{padding:5px 10px}

  .chat{padding:14px 12px}
  .msg{max-width:90%}

  /* composer: fat thumb targets, safe area, no iOS zoom (16px+) */
  .composer{
    padding:10px 12px calc(12px + env(safe-area-inset-bottom));gap:8px;
  }
  .composer input{font-size:16px;padding:12px 16px}
  .composer button{padding:12px 18px}
  .hint{display:none}

  .card{padding:20px 18px}
  .topiclist{max-height:55vh}
  #welcome .bigname{font-size:1.35rem}
}

/* very small phones */
@media (max-width: 380px){
  .jumpbtn span.jlabel{display:none}
}

/* coarse pointers get bigger hit areas everywhere */
@media (pointer: coarse){
  .topic{padding:12px 14px}
  .btn{padding:13px}
  .persona .claim{padding:7px 12px}
}

/* the house book — angel/demon marks (status, not censorship) */
.auramark{font-size:.85em;cursor:default}
.msg .av.aura-angel{border-color:rgba(237,160,63,.6);box-shadow:0 0 10px rgba(237,160,63,.35)}
.msg .av.aura-demon{border-color:rgba(255,59,92,.6);box-shadow:0 0 10px rgba(255,59,92,.35)}
#profile .badge.angelic{border-color:rgba(237,160,63,.6);color:var(--amber)}
#profile .badge.demonic{border-color:rgba(255,59,92,.6);color:var(--neon)}