/* The Town: original styles. Skin colors arrive as CSS variables from src/skins.js. */
:root{--bg1:#0d1726;--bg2:#1a2c45;--panel:rgba(16,27,44,.88);--panel2:#20344f;--ink:#f7efe1;--ink2:#b6c2d4;--accent:#ffb547;--accent2:#3fd8c4;--good:#6fb7ff;--evil:#ff5c7c;--line:rgba(255,210,140,.18);--r:16px;--app-h:100vh}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:radial-gradient(120% 70% at 80% -10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),radial-gradient(90% 60% at -10% 110%,color-mix(in srgb,var(--accent2) 18%,transparent),transparent 60%),linear-gradient(180deg,var(--bg2),var(--bg1));background-attachment:fixed;-webkit-font-smoothing:antialiased}
body[data-phase=night]{background:radial-gradient(90% 60% at 80% -10%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--bg1) 70%,#000),#03060c);background-attachment:fixed}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
.muted{color:var(--ink2)}.small{font-size:.86em}.center{text-align:center}.err{color:var(--evil)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.app{height:var(--app-h);display:flex;flex-direction:column;overflow:hidden}
.boot{margin:auto;font-weight:800;letter-spacing:.08em;color:var(--accent)}
.scroll{overflow:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch}
.wrap{max-width:580px;margin:0 auto;padding:12px 14px 20px}

/* header */
.top{display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));background:color-mix(in srgb,var(--bg1) 80%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(8px);position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.brand img{width:32px;height:32px;border-radius:9px}
.bn{font-weight:800;letter-spacing:.02em}
.top .title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.top .title small{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .title b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .title~.bn,.top:has(.title) .bn{display:none}
.clock{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.phase-pill{font-size:.78em;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:99px;background:var(--accent);color:var(--bg1)}
.phase-pill.night{background:var(--accent2)}
.timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:.9em}
.who-pill,.movebtn{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel2);border-radius:99px;padding:4px 10px 4px 4px;cursor:pointer}
.movebtn{padding:6px 9px;font-size:1em}

/* basics */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:12px 0;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card h2,.card h3{margin:0 0 10px}
h3 small,h2 small{font-weight:500;color:var(--ink2);font-size:.75em;margin-left:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);font-weight:700;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn svg{width:18px;height:18px}
.btn.primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--evil)));color:#1a1208;border:0;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn.ghost{background:transparent}.btn.plain{background:transparent;border:0}
.btn.block{width:100%}.btn.sm{min-height:36px;padding:6px 12px;font-size:.9em}
.btn:disabled{opacity:.45;cursor:not-allowed}
.lnk{background:none;border:0;color:var(--accent);cursor:pointer;padding:2px 6px;font-size:.85em;font-weight:600}
.hostbtns{display:grid;gap:8px;margin:12px 0}
.f{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
input,select,textarea{background:color-mix(in srgb,var(--bg1) 70%,transparent);border:1px solid var(--line);border-radius:12px;padding:11px 12px;min-height:44px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.invite{display:flex;gap:8px}.invite input{text-transform:uppercase;letter-spacing:.08em}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg label{flex:1;min-width:90px}.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 8px;border:1px solid var(--line);border-radius:12px;cursor:pointer;text-align:center;font-weight:700;font-size:.92em}
.seg span small{font-weight:500;color:var(--ink2);font-size:.8em}
.seg input:checked+span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.seg input:focus-visible+span{outline:2px solid var(--accent)}
.sw{width:100%;height:22px;border-radius:7px;display:block;margin-bottom:4px}
.hours{display:flex;gap:10px;margin-top:8px}.hours .f{flex:1;margin:0}
.switch{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;cursor:pointer}.switch input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;accent-color:var(--accent)}
.stepper{display:flex;align-items:center;gap:12px}.stepper output{font-size:1.6em;font-weight:800;min-width:2ch;text-align:center}
.mix{margin-top:6px}
.meter{height:8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden;margin:6px 0 8px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.mlink summary{cursor:pointer;margin-top:12px}
.av{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#1a1208;font-weight:800;font-size:.78em;flex:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--bg1) 60%,transparent)}
.av.dead{filter:grayscale(1) brightness(.6)}
.ai{display:inline-block;font-size:.66em;font-weight:800;letter-spacing:.05em;padding:1px 5px;border-radius:5px;background:var(--accent2);color:#06201c;margin-left:4px;vertical-align:middle}
.you,.rtag{display:inline-block;font-size:.66em;font-weight:800;padding:1px 6px;border-radius:5px;background:var(--accent);color:#1a1208;margin-left:4px;vertical-align:middle;text-transform:uppercase}
.rtag{background:var(--good)}
.gamerow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.gamerow .meta{flex:1;display:flex;flex-direction:column}
.status{font-size:.8em;font-weight:700;color:var(--accent)}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.2s;background:var(--ink);color:var(--bg1);padding:10px 16px;border-radius:12px;font-weight:600;z-index:50;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* hero */
.hero{position:relative;border-radius:22px;overflow:hidden;padding:26px 20px 120px;margin:10px 0;background:linear-gradient(180deg,color-mix(in srgb,var(--accent2) 22%,var(--bg2)),var(--bg2));border:1px solid var(--line)}
.hero h1{position:relative;margin:0 0 8px;font-size:2rem;line-height:1.08;letter-spacing:-.01em}
.hero h1 em{color:var(--accent);font-style:normal}
.hero p{position:relative;margin:0;color:var(--ink2);max-width:34ch}
.scene{position:absolute;left:0;right:0;bottom:0;width:100%;height:150px}

/* footer */
.hall-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:18px 14px calc(18px + env(safe-area-inset-bottom))}
.back-hall,.back-town{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:99px;font-weight:700;text-decoration:none;min-height:44px}
.back-hall{background:var(--accent);color:#1a1208}
.back-town{border:1px solid var(--line);color:var(--ink);background:var(--panel2)}

/* lobby */
.seatlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.seatlist li{display:flex;align-items:center;gap:8px;padding:6px;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.seatlist li.open{justify-content:center;color:var(--ink2);border:1px dashed var(--line);background:none;min-height:46px;font-size:.85em}
.rolepills{display:flex;flex-wrap:wrap;gap:6px}
.rolepill{padding:4px 10px;border-radius:99px;font-weight:700;font-size:.88em;background:color-mix(in srgb,var(--good) 20%,transparent)}
.rolepill.outsider{background:color-mix(in srgb,var(--accent2) 22%,transparent)}
.rolepill.minion,.rolepill.demon{background:color-mix(in srgb,var(--evil) 24%,transparent)}
.invlist{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.inv{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.inv.revoked{opacity:.5}
.ic{display:flex;flex-direction:column}.ia{display:flex;gap:6px}
.bigcode{font:800 1.3em ui-monospace,monospace;letter-spacing:.08em;color:var(--accent)}.bigcode.sm{font-size:1.05em}
.rcount{padding:8px;border-radius:10px;background:color-mix(in srgb,var(--accent) 18%,transparent);margin:8px 0;text-align:center}
.warnline{color:var(--accent)}
.notice{border-color:var(--accent)}

/* game shell */
#hdr,#ban{flex:none}
.banner{display:flex;gap:10px;align-items:center;padding:10px 14px;background:color-mix(in srgb,var(--accent) 18%,var(--bg1));border-bottom:1px solid var(--line);font-size:.92em}
.banner svg{width:20px;height:20px;flex:none}
.banner.good{background:color-mix(in srgb,var(--good) 28%,var(--bg1))}.banner.evil{background:color-mix(in srgb,var(--evil) 28%,var(--bg1))}
.shell{flex:1;min-height:0;display:flex}
.mainc{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.aside{display:none}
.navw{flex:none;order:3}
.nav{display:flex;justify-content:space-around;background:color-mix(in srgb,var(--bg1) 92%,transparent);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.nav button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;background:none;border:0;color:var(--ink2);font-size:.74em;font-weight:700;cursor:pointer;min-height:54px}
.nav button svg{width:22px;height:22px}
.nav button[aria-current]{color:var(--accent)}
.nav .dot{position:absolute;top:4px;right:calc(50% - 20px);background:var(--evil);color:#fff;border-radius:99px;font-size:.8em;min-width:16px;height:16px;display:grid;place-items:center}
.main{order:1}
.sec{padding:12px 16px}
.sec h3{margin:0 0 10px;font-size:1rem}
.empty{color:var(--ink2);text-align:center;padding:22px 12px;font-size:.92em}

/* the circular board */
.ring{position:relative;width:min(100%,440px);aspect-ratio:1;margin:6px auto 0}
.ring::before{content:"";position:absolute;inset:11%;border-radius:50%;border:2px dashed var(--line);background:radial-gradient(circle,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%)}
.seat{position:absolute;left:calc(50% + var(--x) * 40%);top:calc(50% + var(--y) * 40%);transform:translate(-50%,-50%);width:66px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px}
.seat .av{width:36px;height:36px}
.seat .sn{font-size:.72em;max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat .badges{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:2px;font-size:.9em;line-height:1}
.seat .ai,.seat .you{margin:0;font-size:.58em}
.seat.dead .sn{color:var(--ink2);text-decoration:line-through}
.seat.nominated .av{box-shadow:0 0 0 3px var(--evil),0 0 14px var(--evil)}
.tok{display:inline-grid;place-items:center;font-size:.66em;font-weight:800;border-radius:6px;padding:1px 3px;position:relative}
.tok svg{width:14px;height:14px}
.tok.dead{color:var(--ink2)}.tok.dead s{position:absolute;inset:50% 0 auto;height:2px;background:var(--evil);transform:rotate(-30deg)}
.tok.nomd{color:var(--evil)}.tok.nomd svg{width:13px;height:13px}.tok.mate{color:var(--evil)}
.grole{display:block;width:100%;font-size:.6em;font-weight:800;border-radius:5px;padding:1px 3px;background:color-mix(in srgb,var(--good) 30%,transparent)}
.grole.evil{background:color-mix(in srgb,var(--evil) 40%,transparent)}
.hub{position:absolute;inset:30%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--panel);border:1px solid var(--line);box-shadow:0 0 40px color-mix(in srgb,var(--accent) 25%,transparent)}
.hub .hp{font-weight:800;font-size:1.15em;color:var(--accent)}
body[data-phase=night] .hub .hp{color:var(--accent2)}

/* thread */
.thread{padding:6px 12px 16px}
.dsep{margin:16px 0 8px;text-align:center;font-size:.75em;text-transform:uppercase;letter-spacing:.1em;color:var(--ink2);display:flex;align-items:center;gap:10px}
.dsep::before,.dsep::after{content:"";flex:1;height:1px;background:var(--line)}
.post{display:flex;gap:10px;padding:10px;border-radius:14px;margin:6px 0;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.post.mine{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.post.ghost{opacity:.8}.post.ghost .pt{font-style:italic}
.post.hostpost{border:1px solid var(--accent2)}
.pb{flex:1;min-width:0}.ph{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pt{white-space:pre-wrap;word-wrap:break-word;margin-top:2px}
.pa{display:flex;gap:4px;margin-top:2px}
blockquote{margin:6px 0;padding:6px 10px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:0 8px 8px 0;font-size:.88em;color:var(--ink2)}
.mod{margin:8px 0;padding:10px 12px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent2) 10%,transparent));border:1px solid var(--line)}
.mod .lbl{font-size:.72em;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.mod.ev-over{border-color:var(--accent);box-shadow:0 0 20px color-mix(in srgb,var(--accent) 30%,transparent)}
.nightnote{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--accent2);padding:14px;font-weight:600}.nightnote svg{width:20px;height:20px}
.compose{order:2;flex:none;padding:8px 10px;background:color-mix(in srgb,var(--bg1) 94%,transparent);border-top:1px solid var(--line)}
.compose .row{display:flex;gap:8px;align-items:flex-end}
.compose textarea{resize:none;min-height:44px;max-height:160px}
.cx{display:flex;justify-content:space-between;align-items:center;font-size:.85em;padding:0 4px 6px}.cx .x{background:none;border:0;cursor:pointer;color:var(--ink2)}

/* nominations */
.nomf{display:flex;gap:8px;margin:0 0 12px}.nomf select{flex:1}
.nom{padding:12px;border-radius:14px;border:1px solid var(--line);margin:0 0 10px;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.nom.over{border-color:var(--evil);box-shadow:inset 0 0 0 1px var(--evil)}
.nh{display:flex;align-items:center;gap:10px}.nh>span:nth-child(2){flex:1}
.cnt{font-size:1.4em;font-weight:800;font-variant-numeric:tabular-nums}.cnt small{font-size:.6em;color:var(--ink2)}
.bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 10%,transparent);margin:8px 0;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--evil))}
.voters{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.voters span{font-size:.78em;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.deaths{list-style:none;margin:0;padding:0;display:grid;gap:8px}.deaths li{display:flex;align-items:center;gap:8px}
.inf{padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--accent2) 12%,transparent);margin:0 0 6px;font-size:.92em}
.inf.intro{background:color-mix(in srgb,var(--evil) 14%,transparent)}

/* role + night */
.rolecard{margin:14px;padding:22px 18px;border-radius:22px;text-align:center;background:linear-gradient(160deg,color-mix(in srgb,var(--good) 26%,var(--panel2)),var(--panel));border:1px solid var(--line)}
.rolecard.evil{background:linear-gradient(160deg,color-mix(in srgb,var(--evil) 30%,var(--panel2)),var(--panel))}
.rolecard .ico{width:84px;height:84px;margin:0 auto 6px;color:var(--accent)}
.rolecard h2{margin:8px 0;font-size:1.7em}
.teamtag{display:inline-block;font-size:.72em;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:99px;background:color-mix(in srgb,var(--good) 30%,transparent)}
.teamtag.evil{background:color-mix(in srgb,var(--evil) 36%,transparent)}
.nightsky{margin:14px;padding:20px;border-radius:20px;text-align:center;background:radial-gradient(120% 90% at 50% 0,color-mix(in srgb,var(--accent2) 24%,transparent),var(--panel));border:1px solid var(--line)}
.nightsky>svg{width:40px;height:40px;color:var(--accent2)}
.nightsky h3{margin:6px 0}
.targets{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.target{display:flex;align-items:center;gap:8px;padding:8px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;text-align:left;min-height:52px}
.target .nm{flex:1;font-weight:700;font-size:.9em}
.target[aria-pressed=true]{border-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 22%,var(--panel2))}
.target .tick{width:18px;height:18px;border-radius:50%;border:2px solid var(--line)}
.target[aria-pressed=true] .tick{background:var(--accent2);border-color:var(--accent2)}

/* grimoire + script */
.tablewrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:.9em}
th,td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.75em;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2)}
.grim td:first-child{display:flex;align-items:center;gap:6px;white-space:nowrap}
.grim td .av{width:26px;height:26px;font-size:.66em}
.grim tr.dead td:first-child b{text-decoration:line-through;color:var(--ink2)}
.tl{margin:0;padding-left:20px;display:grid;gap:4px;font-size:.88em}
details{padding:6px 0;border-bottom:1px solid var(--line)}summary{cursor:pointer;padding:4px 0}
.sname{margin:12px 16px 0;color:var(--accent)}
.roles{display:grid;gap:8px}
.rrow{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:14px;background:color-mix(in srgb,var(--good) 10%,transparent)}
.rrow.outsider{background:color-mix(in srgb,var(--accent2) 12%,transparent)}.rrow.minion,.rrow.demon{background:color-mix(in srgb,var(--evil) 14%,transparent)}
.rrow .ico{width:34px;height:34px;flex:none;color:var(--accent)}
.rrow>span:last-child{display:flex;flex-direction:column;gap:2px}
.tt.town{color:var(--good)}.tt.outsider{color:var(--accent2)}.tt.minion,.tt.demon{color:var(--evil)}
.rules ol,.rules ul{margin:0;padding-left:20px;display:grid;gap:6px}
.setup td,.setup th{text-align:center}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:40;padding:16px}
.mcard{background:var(--panel2);border-radius:20px;padding:20px;max-width:380px;width:100%}
.qrwrap{display:grid;place-items:center;margin:10px 0}.qr{width:200px;height:200px;border-radius:10px}
.xfer-code{text-align:center;font:800 1.8em ui-monospace,monospace;letter-spacing:.16em;color:var(--accent)}

/* desktop: ring around the centred day thread, nominations in the side column */
@media (min-width:960px){
  .shell{max-width:1500px;margin:0 auto;width:100%}
  .navw{order:0}
  .nav{border-top:0;border-bottom:1px solid var(--line);justify-content:flex-start;gap:4px;padding:0 10px}
  .nav button{flex:none;flex-direction:row;gap:8px;padding:10px 16px;min-height:46px;font-size:.88em}
  .nav .dot{position:static}
  .aside{display:block;width:380px;flex:none;overflow:auto;border-left:1px solid var(--line);background:color-mix(in srgb,var(--bg1) 50%,transparent)}
  .ring{width:100%;aspect-ratio:auto;height:calc(var(--app-h) - 230px);min-height:600px;margin:10px 0 0}
  .ring::before{inset:3% 2%;border-radius:48px}
  .seat{left:calc(50% + var(--sx) * 45%);top:calc(50% + var(--sy) * 44%);width:92px}
  .seat .av{width:44px;height:44px;font-size:.9em}.seat .sn{font-size:.82em;max-width:92px}
  .ringc{position:absolute;left:15%;right:15%;top:16%;bottom:16%;border-radius:26px;background:var(--panel);border:1px solid var(--line);overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.35)}
  .wrap{max-width:720px}
  .wrap.lobby{max-width:820px}
  .hero{padding:44px 40px 150px}.hero h1{font-size:2.8rem}
  .toast{bottom:30px}
}
/* human storyteller console (Tell tab) */
.sthead h3{margin:0 0 6px}.sthead p{margin:0 0 10px}
.stpost{border-color:var(--accent2)}.stpost .lbl{color:var(--accent2)}
.dec{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px;background:color-mix(in srgb,var(--panel2) 55%,transparent)}
.dec.mine{border-color:var(--accent)}
.dec .dh{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}.dec .dh b{font-size:.95em}
.dec p{margin:6px 0}
.sttag{flex:none;font-size:.68em;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:99px;border:1px solid var(--line);color:var(--ink2)}
.sttag.ok{color:var(--accent2);border-color:var(--accent2)}.sttag.bad{color:var(--evil);border-color:var(--evil)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chip{min-height:36px;padding:5px 12px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:.88em;font-weight:600;cursor:pointer}
.chip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 20%,transparent)}
.chip.fixed{cursor:default;border-style:dashed}
.chip .tt,.tt{font-style:normal;color:var(--accent2);margin-left:4px}
.stf{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}
.stf select{flex:1 1 120px;min-width:0}.stf.pair select{flex:1 1 30%}
.stf.free textarea{flex:1 1 100%;min-height:44px}.stf.free .btn{margin-left:auto}
.hint{margin:2px 0 0}
.tells{list-style:none;margin:0;padding:0}.tells li{padding:6px 0;border-top:1px solid var(--line);font-size:.92em}
.stseats{list-style:none;margin:0;padding:0}
.stseat{padding:8px 0;border-top:1px solid var(--line)}.stseat.dead{opacity:.7}
.stseat .sh{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.addrem{min-height:36px;padding:4px 8px;border-radius:99px;font-size:.85em;width:auto;max-width:150px}
.regp{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.regp select{width:auto;min-height:36px}
.stf.pair select:first-child{flex-basis:100%}
/* chat cue: top-right Chat button, pink unread badge (sum of the channels this seat can see), short pulse on new messages */
.chatbtn{position:relative;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel2);color:inherit;border-radius:99px;padding:6px 11px;cursor:pointer;font:inherit;font-size:.9em}
.chatbtn svg{width:18px;height:18px}
.chatbtn .badge{position:absolute;top:-6px;right:-6px;background:#ff4f9a;color:#fff;border-radius:99px;font-size:.72em;font-weight:700;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;box-shadow:0 0 0 2px var(--bg,#111)}
.chatbtn .badge.pulse{animation:chatpulse .6s ease-out 2}
@keyframes chatpulse{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.chatbtn .badge.pulse{animation:none}}
.nav .dot.unread{background:#ff4f9a}
/* private channels: no quote/copy affordances */
.priv,.privthread .pt{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.privnote{margin:0 0 8px}
.compose.inline{display:flex;flex-direction:column;gap:6px;margin-top:10px;position:static;padding:0;border:0;background:none}
.compose.inline textarea{width:100%;min-height:52px}
.lair h3 small,.dms h3 small{font-weight:400}
.dmconv{border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin:6px 0}