/* AGORA — present day, present time. Serial Experiments Lain aesthetic:
   dark CRT, phosphor green, cyan signal, scanlines, monospace. */
:root{
  --bg:#05080a; --panel:#0a0f12; --ink:#cfe9d8; --dim:#5f7c6c;
  --green:#7CFC9B; --cyan:#39E0FF; --warn:#ff5d5d; --line:#16241c;
  --mono:'SFMono-Regular',ui-monospace,'Cascadia Code',Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);
  -webkit-font-smoothing:antialiased;overflow:hidden;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
#scanlines{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.35;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.25) 2px 3px)}
.screen{position:absolute;inset:0;display:flex;flex-direction:column}
.hidden{display:none!important}

/* GATE */
#gate{align-items:center;justify-content:center;text-align:center;padding:24px;gap:10px}
.sigil img{filter:drop-shadow(0 0 8px rgba(124,252,155,.5));animation:flick 6s infinite}
@keyframes flick{0%,97%,100%{opacity:1}98%{opacity:.4}}
.wordmark{font-size:44px;letter-spacing:.5em;margin:6px 0 0;color:var(--green);
  text-shadow:0 0 14px rgba(124,252,155,.45)}
.tagline{color:var(--cyan);letter-spacing:.25em;font-size:13px;margin:0 0 8px;text-transform:lowercase}
.blurb{max-width:34ch;color:var(--dim);font-size:13px;line-height:1.6}
.blurb em{color:var(--ink);font-style:normal}
.primary{margin-top:14px;background:transparent;color:var(--green);border:1px solid var(--green);
  padding:14px 22px;border-radius:4px;font-family:var(--mono);font-size:15px;letter-spacing:.1em;
  cursor:pointer;transition:.15s}
.primary:hover{background:var(--green);color:#04140a;box-shadow:0 0 18px rgba(124,252,155,.5)}
.status{min-height:18px;color:var(--cyan);font-size:12px}
.fineprint{margin-top:14px;max-width:36ch;color:var(--dim);font-size:11px}
.fineprint summary{cursor:pointer;color:var(--green)}
.fineprint p{line-height:1.6}

/* ROOM */
.room-bar{display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.room-id{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--green)}
.room-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dim)}
#presence{color:var(--cyan);font-weight:700}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dim);box-shadow:0 0 6px currentColor}
.dot.online{background:var(--green)} .dot.offline{background:var(--warn)}
.ghost{background:none;border:1px solid var(--line);color:var(--dim);border-radius:4px;
  width:30px;height:28px;cursor:pointer}
.sos{background:none;border:1px solid var(--warn);color:var(--warn);border-radius:4px;
  padding:4px 8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;cursor:pointer}
.sos:active{background:var(--warn);color:#1a0606}

.log{flex:1;list-style:none;margin:0;padding:14px;overflow-y:auto;display:flex;
  flex-direction:column;gap:8px}
.msg{max-width:78%;font-size:14px;line-height:1.45;animation:in .18s ease}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
.msg.them{align-self:flex-start}
.msg.me{align-self:flex-end;text-align:right}
.msg .who{display:block;font-size:10px;color:var(--dim);letter-spacing:.08em}
.msg .bubble{display:inline-block;padding:8px 11px;border-radius:10px;
  background:#0e1714;border:1px solid var(--line)}
.msg.me .bubble{background:#0c1a14;border-color:#1f3a2c;color:#dffceb}
.msg .t{display:block;font-size:9px;color:#3c5246;margin-top:2px}
.msg.system{align-self:center;max-width:90%;text-align:center}
.msg.system .sys{color:var(--dim);font-size:11px;font-style:italic}

.composer{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--panel)}
.composer input{flex:1;background:#0e1714;border:1px solid var(--line);color:var(--ink);
  padding:12px;border-radius:8px;font-family:var(--mono);font-size:14px;outline:none}
.composer input:focus{border-color:var(--green)}
.send{width:46px;border:1px solid var(--green);background:transparent;color:var(--green);
  border-radius:8px;font-size:18px;cursor:pointer}
.send:active{background:var(--green);color:#04140a}

/* DISGUISE — a mundane messenger */
.dz{height:100%;display:flex;flex-direction:column;background:#0b141a;color:#e6edf2;font-family:system-ui,sans-serif}
.dz-bar{display:flex;justify-content:space-between;align-items:center;padding:16px;
  background:#16242e;font-weight:600}
.dz-title{user-select:none}
.dz-list{flex:1;list-style:none;margin:0;padding:0;overflow:auto}
.dz-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #16242e}
.dz-av{width:42px;height:42px;border-radius:50%;background:#2a3a45;display:grid;place-items:center;font-weight:700}
.dz-mid{flex:1;display:flex;flex-direction:column}
.dz-mid small{color:#8aa0ad}
.dz-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;color:#8aa0ad;font-size:12px}
.dz-right em{background:#25d366;color:#04140a;border-radius:10px;padding:0 6px;font-style:normal;font-size:11px}
.dz-hint{text-align:center;color:#33454f;font-size:11px;padding:8px}