/* Shared chrome for the public pages: palette, rain canvas, nav.
   home.html and rooms.html both pull this in, so the two cannot drift apart. */

:root{
  --bg:#050706;
  --tx:#dfe7e2;
  --dim:#76817b;
  --dim2:#4c554f;
  --line:#151b17;
  --line2:#232d27;
  --g:#3ee27f;
  --g-dim:#1c7a47;
  --bad:#ff6b6b;
  --nav-h:62px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Fixed behind everything; the page scrolls over it. */
#rain{position:fixed; inset:0; z-index:0; display:block}

/* Vignette. Keeps the middle readable however busy the rain gets, and stops
   the streaks fighting the nav at the top edge. */
body::after{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(125% 72% at 50% 0%,transparent 38%,rgba(5,7,6,.74) 100%),
    linear-gradient(180deg,rgba(5,7,6,.78) 0%,transparent 18%);
}

/* ── nav ───────────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:20;
  display:flex; align-items:center; justify-content:center;
  /* No solid bar. A filled header would cut the rain in half across the top of
     every page; a fade lets it carry through. */
  background:linear-gradient(180deg,rgba(5,7,6,.92) 0%,rgba(5,7,6,.55) 60%,transparent 100%);
}
/* Links stay optically centred on the page. The avatar is taken out of flow so
   it cannot push them off-centre — a nav that shifts when an item is added is
   the usual result of putting both in one flex row. */
.nav-links{display:flex; align-items:center; gap:34px}
.nav a{
  position:relative; color:var(--dim); text-decoration:none;
  font-size:13.5px; letter-spacing:.01em; padding:6px 2px;
  transition:color .18s;
}
.nav a:hover{color:var(--tx)}
.nav a.on{color:var(--tx)}
/* Underline grows from the centre on the current page only. */
.nav a.on::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--g); transform-origin:50% 50%;
  animation:navline .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes navline{from{transform:scaleX(0);opacity:0} to{transform:scaleX(1);opacity:1}}
.nav a:focus-visible{outline:1px solid var(--g-dim); outline-offset:3px; border-radius:3px}

/* ── account ── */
.acct{position:absolute; right:clamp(14px,3vw,26px); top:50%; transform:translateY(-50%)}
.avatar{
  width:33px; height:33px; padding:0; cursor:pointer;
  display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line2); background:rgba(255,255,255,.03);
  color:var(--dim); transition:color .16s, border-color .16s, background .16s;
}
.avatar svg{width:19px; height:19px}
.avatar:hover{color:var(--tx); border-color:var(--dim2); background:rgba(255,255,255,.06)}
.avatar[aria-expanded="true"]{color:var(--g); border-color:var(--g-dim)}
.avatar:focus-visible{outline:1px solid var(--g-dim); outline-offset:3px}

.acct-menu{
  position:absolute; right:0; top:calc(100% + 10px); min-width:172px;
  background:#0a0e0c; border:1px solid var(--line2); border-radius:10px;
  padding:6px; box-shadow:0 18px 46px rgba(0,0,0,.62);
  opacity:0; visibility:hidden; transform:translateY(-5px);
  transition:opacity .15s, transform .15s, visibility .15s;
}
.acct-menu.on{opacity:1; visibility:visible; transform:none}
.acct-head{
  padding:8px 10px 9px; margin-bottom:4px; border-bottom:1px solid var(--line);
  font-size:12px; color:var(--dim2);
}
.acct-menu button{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:9px 10px; border:0; border-radius:6px; background:none;
  color:var(--tx); font:inherit; font-size:13.5px;
  transition:background .13s, color .13s;
}
.acct-menu button:hover{background:rgba(255,255,255,.05)}
.acct-menu button.discord{
  display:flex; align-items:center; gap:9px;
  color:#dfe7e2; background:#5865f2; margin-top:2px;
}
.acct-menu button.discord:hover{background:#4b57e0}
.acct-menu button.discord svg{width:17px; height:17px; flex:none}

/* Once the real avatar loads it becomes the button's background; the silhouette
   is removed by nav.js. Cover + center so a non-square CDN image never skews. */
.avatar.has-img{
  background-size:cover; background-position:center;
  border-color:var(--dim2); color:transparent;
}
.avatar.has-img:hover{border-color:var(--g-dim)}

/* ── dialog ── */
/* Shared: the join dialog on the sessions page and the account dialogs both use
   it, and two copies would drift the first time either was restyled. */
.mask{
  position:fixed; inset:0; z-index:60; display:none; padding:22px;
  align-items:center; justify-content:center;
  background:rgba(2,4,3,.78); backdrop-filter:blur(4px);
}
.mask.on{display:flex}
.modal{
  width:100%; max-width:360px; background:#0a0e0c;
  border:1px solid var(--line2); border-radius:12px; padding:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.7);
}
.modal h2{margin:0 0 3px; font-size:17px; font-weight:550; letter-spacing:-.2px}
.modal p{margin:0 0 18px; color:var(--dim); font-size:13px; line-height:1.6}
.modal input{
  width:100%; padding:11px 13px; background:#060907; color:var(--tx);
  border:1px solid var(--line2); border-radius:7px; font:15px inherit; outline:none;
}
.modal input:focus{border-color:var(--g-dim)}
.err{color:var(--bad); font-size:12.5px; min-height:18px; margin-top:9px}
.acts{display:flex; gap:9px; margin-top:10px}
.acts button{flex:1; padding:10px}
.btn-primary{
  font:inherit; font-weight:550; cursor:pointer;
  background:var(--g); color:#04160c; border:0; border-radius:7px; padding:10px 20px;
  transition:filter .15s, transform .15s;
}
.btn-primary:hover{filter:brightness(1.08); transform:translateY(-1px)}
.btn-primary:active{transform:none}
.btn-primary[disabled]{opacity:.5; cursor:default; filter:none; transform:none}
.cancel{
  font:inherit; cursor:pointer; background:none; color:var(--dim);
  border:1px solid var(--line2); border-radius:7px;
}
.cancel:hover{color:var(--tx); border-color:var(--dim2)}

/* ── people ── */
/* Shared by /social and /profile so a person looks the same wherever they
   appear — a friend in one list and a stranger in another differing only by
   what you can do about them. */
.person{
  display:flex; align-items:center; gap:13px;
  padding:14px 4px; border-bottom:1px solid var(--line);
}
.pfp{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:#0d120f center/cover no-repeat; border:1px solid var(--line2);
}
.pfp.lg{width:76px; height:76px}
.who{min-width:0}
.who .n{font-size:15px; font-weight:500; letter-spacing:-.1px;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.who .s{font-size:12px; color:var(--dim2); margin-top:3px}
/* Green only when they are actually somewhere — this is the one live signal in
   a list that is otherwise all history. */
.who .s.at{color:var(--g)}
.who .s.at b{font-weight:500}

.pacts{margin-left:auto; display:flex; gap:7px; flex:none}
.btn-sm{
  font:inherit; font-size:12.5px; cursor:pointer; white-space:nowrap;
  padding:7px 13px; border-radius:7px;
  background:none; color:var(--dim); border:1px solid var(--line2);
  transition:color .14s, border-color .14s, background .14s;
}
.btn-sm:hover{color:var(--tx); border-color:var(--dim2)}
.btn-sm.go{color:#04160c; background:var(--g); border-color:transparent; font-weight:550}
.btn-sm.go:hover{filter:brightness(1.08); color:#04160c}
.btn-sm[disabled]{opacity:.45; cursor:default}
.btn-sm.quiet{color:var(--dim2); border-color:transparent}
.btn-sm.quiet:hover{color:var(--bad); border-color:transparent}

.section-h{
  display:flex; align-items:baseline; gap:10px; margin:34px 0 4px;
  font-size:13px; color:var(--dim2); letter-spacing:.06em; text-transform:uppercase;
}
.section-h .c{font:11.5px ui-monospace,monospace; color:var(--dim2)}

/* Everything that is not rain or nav. */
.page{position:relative; z-index:2}

/* Entrance. Small, once, and skipped entirely for anyone who asked for less
   motion — a page that assembles itself every time you navigate back to it
   stops being satisfying by the third visit, so it is 500ms and done. */
@keyframes rise{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
.rise{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.06s} .d2{animation-delay:.13s} .d3{animation-delay:.2s} .d4{animation-delay:.28s}

@media (prefers-reduced-motion: reduce){
  .rise,.nav a.on::after{animation:none}
}