:root{
  --room:#06080a;
  --room-deep:#020304;
  --wall:#0e131a;
  --wall-soft:#151b23;
  --paper:#d9e1e6;
  --ink:#eef3f6;
  --ink-dim:#8a97a2;
  --ink-faint:#78848f;
  --brass:#7fe0e8;
  --brass-soft:#335358;
  --ember:#9b8cf2;
  --cover:#474e55;
  --cover-dark:#33383e;
  --twine:#5b6570;
  --blueprint:#0d1b27;
  --shadow:rgba(0,0,0,.65);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  font-size:16px;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--room);
  color:var(--ink);
  font-family:'Work Sans', system-ui, sans-serif;
  line-height:1.6;
  padding-inline:22px;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  position:relative;
}
body::after{
  content:"";
  position:fixed;inset:0;z-index:50;pointer-events:none;
  background-image:var(--grain);
  background-size:160px 160px;
  opacity:.035;
  mix-blend-mode:overlay;
}
h1,h2,h3{margin:0;text-wrap:balance;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
.wrap{max-width:1140px;margin-inline:auto;}
.serif{font-family:'Fraunces', Georgia, serif;}
.eyebrow{
  font-family:'Pixelify Sans', 'Work Sans', sans-serif;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brass);
}

/* ---------- NAV ---------- */
.lobby-nav{
  position:sticky;
  top:env(safe-area-inset-top, 0px);
  z-index:60;
  background:var(--room-deep);
  border-bottom:1px solid var(--brass-soft);
  padding-block:16px;
  margin-inline:-22px;
  padding-inline:22px;
}
.lobby-nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.brand{
  display:flex;align-items:center;gap:12px;
  font-family:'Press Start 2P', 'Work Sans', sans-serif;
  font-size:.68rem;
  letter-spacing:.01em;
  line-height:1.5;
}
.brand-mark{
  width:22px;height:22px;flex:none;
  object-fit:contain;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 6px rgba(127,224,232,.45));
}
.nav-links{
  display:flex;gap:26px;flex-wrap:wrap;
  font-family:'Pixelify Sans', 'Work Sans', sans-serif;
  font-size:.85rem;
  letter-spacing:.02em;
  color:var(--ink-dim);
}
.nav-links a:hover{color:var(--paper);}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Pixelify Sans', 'Work Sans', sans-serif;font-weight:600;font-size:.85rem;
  letter-spacing:.02em;
  color:var(--room-deep);
  background:var(--brass);
  padding:13px 22px;
  border:none;
  box-shadow:0 6px 18px rgba(127,224,232,.22);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(127,224,232,.3);}
.btn.ghost{
  background:transparent;color:var(--ink);
  border:1px solid var(--brass-soft);
  box-shadow:none;
}
.btn.ghost:hover{border-color:var(--brass);color:var(--paper);}

/* ---------- STATUS BADGE ---------- */
.status{
  font-family:'Pixelify Sans', 'Work Sans', sans-serif;
  font-size:.65rem;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:2px;flex:none;
}
.status.live{background:rgba(127,224,232,.14);color:var(--brass);border:1px solid var(--brass-soft);}
.status.progress{background:rgba(155,140,242,.14);color:var(--ember);border:1px solid rgba(155,140,242,.4);}

/* ---------- FOOTER ---------- */
.site-footer{
  border-top:1px solid var(--brass-soft);
  padding-block:34px 40px;
  padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));
}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;}
.footer-links{
  display:flex;gap:22px;flex-wrap:wrap;
  font-family:'Pixelify Sans', 'Work Sans', sans-serif;
  font-size:.8rem;
  letter-spacing:.02em;
  color:var(--ink-dim);
}
.footer-links a:hover{color:var(--paper);}
.fine{font-size:.72rem;color:var(--ink-faint);width:100%;margin-top:16px;}

@media (max-width:760px){
  .nav-links{display:none;}
}