:root{
  --void:#150c14; --panel:#211524; --panel2:#2c1c2e; --line:#3a2540;
  --bone:#ece4d8; --dim:#8a7383; --system:#f0a828; --signal:#e0453c; --air:#4fd6c8;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{background:var(--void);color:var(--bone);font-family:"IBM Plex Sans",system-ui,sans-serif;
  line-height:1.5;padding:0 0 3rem}
section{padding:1rem}
h1{font-family:"Archivo Black",sans-serif;font-size:1.8rem;text-transform:uppercase;margin-bottom:.4rem}
h2{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin:2rem 0 .6rem}
.dim{color:var(--dim);font-size:.82rem}
.mono{font-family:"IBM Plex Mono",monospace;font-size:.6rem}

header{position:sticky;top:0;z-index:10;background:var(--void);
  border-bottom:1px solid var(--line);padding:.7rem .9rem}
.gamepill{width:100%;display:flex;justify-content:space-between;align-items:baseline;
  background:none;border:0;color:var(--bone);font-size:.9rem;font-weight:600;padding:0}
.gp-meta{font-family:"IBM Plex Mono",monospace;font-size:.58rem;color:var(--dim);letter-spacing:.1em}
.floorline{font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-top:.3rem}
main{padding:.9rem}

.beat{margin-bottom:1.2rem}
.beat .who{font-family:"IBM Plex Mono",monospace;font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.25rem}
.beat p{font-size:.93rem;color:#ded2da;white-space:pre-wrap}
.sysnote{border-left:2px solid var(--system);background:#1d1119;padding:.6rem .7rem;
  margin-top:.7rem;font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  color:var(--system);white-space:pre-wrap}

.composer{border:1px solid var(--line);background:var(--panel);padding:.8rem;margin-top:1rem}
textarea,input,select{width:100%;background:transparent;border:0;color:var(--bone);
  font-family:"IBM Plex Sans",sans-serif;font-size:.92rem;resize:none}
.composer textarea{min-height:4rem}
textarea:focus,input:focus,select:focus{outline:none}
input{border:1px solid var(--line);padding:.7rem;margin:.5rem 0}
select{border:1px solid var(--line);padding:.6rem;color:var(--dim);
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;flex:1}
.crow{display:flex;gap:.5rem;align-items:flex-end;margin-top:.6rem}
.crow textarea{border:1px solid var(--line);background:var(--panel);padding:.5rem;min-height:2.4rem}
button{font-family:"IBM Plex Mono",monospace;font-size:.68rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--system);
  background:var(--system);color:var(--void);padding:.7rem .9rem;cursor:pointer}
button.ghost{background:transparent;color:var(--dim);border-color:var(--line)}
button.kick{background:transparent;border-color:var(--signal);color:var(--signal);
  padding:.3rem .5rem;font-size:.56rem}
button:disabled{opacity:.4}

.row{display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--line);padding:.5rem 0;font-size:.85rem}
#waiting{border:1px dashed var(--line);padding:.8rem;margin-top:1rem}
#waiting:empty{display:none}

.msg{margin-bottom:.6rem;max-width:85%}
.msg .n{font-family:"IBM Plex Mono",monospace;font-size:.54rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.15rem}
.msg .b{background:var(--panel);padding:.5rem .65rem;font-size:.87rem}
.msg .mc{font-family:"IBM Plex Mono",monospace;font-size:.54rem;color:var(--signal);margin-top:.12rem}
.msg.me{margin-left:auto}
.msg.me .b{background:var(--panel2)}
.msg.me .n,.msg.me .mc{text-align:right}

/* ── lobby ──────────────────────────────────────────────────────────── */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.brandmark{font-family:"Archivo Black",sans-serif;font-size:1rem;text-transform:uppercase;
  letter-spacing:.04em}
button.tiny{padding:.4rem .55rem;font-size:.56rem}
.gametitle{font-size:.95rem;font-weight:600;margin-top:.45rem}

.gcard{border:1px solid var(--line);background:var(--panel);padding:.85rem;
  margin-bottom:.7rem;cursor:pointer}
.gcard:active{background:var(--panel2)}
.gcard-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.gcard-name{font-size:.95rem;font-weight:600}
.gcard-code{color:var(--dim);margin-top:.55rem;letter-spacing:.1em}

.badge{font-family:"IBM Plex Mono",monospace;font-size:.54rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.25rem .45rem;border:1px solid;white-space:nowrap}
.s-you{color:var(--void);background:var(--system);border-color:var(--system)}
.s-wait{color:var(--air);border-color:var(--air)}
.s-busy{color:var(--system);border-color:var(--system)}
.s-idle{color:var(--dim);border-color:var(--line)}

.bar{height:2px;background:var(--line);margin:.6rem 0 .5rem}
.bar i{display:block;height:100%;background:var(--signal)}

.crew{display:flex;flex-wrap:wrap;gap:.3rem}
.crew .who{font-family:"IBM Plex Mono",monospace;font-size:.56rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:.2rem .4rem}
.crew .who.me{color:var(--bone);border-color:var(--bone)}
.crew .who.dead{text-decoration:line-through;opacity:.5}

#joinCode{font-family:"IBM Plex Mono",monospace;letter-spacing:.3em;text-transform:uppercase;
  margin:0;flex:1}

/* ── overlay panels ─────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(10,6,10,.82);z-index:50;
  display:flex;align-items:flex-start;justify-content:center;padding:1rem;overflow-y:auto}
.sheet{background:var(--panel);border:1px solid var(--line);padding:1.1rem;
  width:100%;max-width:30rem;margin:auto 0}
.sheet h3{font-family:"Archivo Black",sans-serif;font-size:1.05rem;text-transform:uppercase;
  margin-bottom:.5rem}
.sheet label{display:block;font-family:"IBM Plex Mono",monospace;font-size:.56rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin:.9rem 0 .1rem}
.sheet input,.sheet select{width:100%;border:1px solid var(--line);background:var(--void);
  padding:.6rem;margin:0;color:var(--bone);font-size:.9rem}
.sheet select{font-family:"IBM Plex Sans",sans-serif;font-size:.9rem;color:var(--bone)}
.sheet .crow{margin-top:1.1rem}

.picker{display:flex;flex-direction:column;gap:.35rem;margin-top:.3rem}
.pick{display:flex;align-items:center;gap:.55rem;border:1px solid var(--line);
  padding:.55rem .6rem;cursor:pointer;font-size:.88rem;
  font-family:"IBM Plex Sans",sans-serif;letter-spacing:normal;text-transform:none;
  color:var(--bone)}
.pick input{width:auto;margin:0;accent-color:var(--system)}
.pick:has(input:checked){border-color:var(--system)}

.hosttag{font-family:"IBM Plex Mono",monospace;font-size:.5rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:.1rem .25rem;
  vertical-align:middle}

/* ── build stamp / stale-build banner ───────────────────────────────── */
.stalebar{position:sticky;top:0;z-index:60;background:var(--signal);color:#fff;
  padding:.5rem .8rem;font-family:"IBM Plex Mono",monospace;font-size:.6rem;
  letter-spacing:.08em;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.stalebar button{border-color:#fff;background:#fff;color:var(--signal)}
.buildstamp{color:var(--dim);letter-spacing:.14em}