.network-route #network-shell {
  position: fixed;
  z-index: 90;
  top: .65rem;
  right: .65rem;
  width: min(22rem, calc(100vw - 1.3rem));
  color: #e8dec8;
  font-family: Georgia, serif;
}

#network-experimental {
  position: fixed;
  z-index: 89;
  left: .65rem;
  bottom: .65rem;
  display: grid;
  gap: .2rem;
  width: min(36rem, calc(100vw - 1.3rem));
  padding: .6rem .8rem;
  border: 1px solid #a36b44;
  border-radius: .35rem;
  color: #ead9bd;
  background: rgba(42, 27, 18, .96);
  box-shadow: 0 .35rem 1.2rem #000a;
  font-family: Georgia, serif;
  font-size: .82rem;
  pointer-events: none;
}

#network-experimental strong { color: #efb875; text-transform: uppercase; letter-spacing: .08em; }

#network-status {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .8rem;
  border: 1px solid #78684a;
  border-radius: .4rem;
  background: rgba(18, 17, 15, .94);
  box-shadow: 0 .35rem 1.2rem #000a;
}

#network-shell[data-status="live"] #network-status { border-color: #587256; }
#network-shell[data-status="fatal"] #network-status,
#network-shell[data-status="quarantined"] #network-status { border-color: #a64f46; }

#network-drawer {
  margin-top: .35rem;
  border: 1px solid #514936;
  border-radius: .35rem;
  background: rgba(20, 19, 17, .97);
  box-shadow: 0 .5rem 1.5rem #000b;
}

#network-drawer > summary { cursor: pointer; padding: .7rem .85rem; font-weight: 700; }
#network-drawer section { padding: 0 .85rem .85rem; border-top: 1px solid #3a3428; }
#network-drawer h2, #network-drawer h3 { margin: .75rem 0 .45rem; font-size: .95rem; }
#network-presence { list-style: none; margin: 0; padding: 0; }
#network-presence li { display: flex; justify-content: space-between; padding: .3rem 0; }
#network-presence i { opacity: .7; font-size: .8rem; }
#network-presence .disconnected { color: #c78f83; }
.net-options { display: grid; gap: .4rem; }
.net-options .btn { white-space: normal; text-align: left; }
.net-empty { opacity: .75; }
.net-check { display: flex; gap: .55rem; padding: .35rem 0; }
.net-order { margin: .4rem 0 .7rem; padding-left: 1.4rem; }
.net-order li { display: grid; grid-template-columns: 1fr auto auto; gap: .3rem; margin: .25rem 0; }
.net-order button { min-width: 2rem; }
.net-error { margin-top: .65rem; padding: .65rem; border-left: .2rem solid #b18149; background: #2b2419; }
.net-error.fatal { border-color: #b34d48; background: #301c1c; }

#network-landing:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: radial-gradient(circle at 50% 35%, #29271f, #0d0d0c 70%);
  color: #ece2ce;
}

.net-join-card {
  width: min(30rem, 100%);
  padding: 2rem;
  border: 1px solid #766746;
  background: #171714;
  box-shadow: 0 1rem 4rem #000;
}
.net-join-card form, .net-join-card label { display: grid; gap: .65rem; }
.net-join-card input { padding: .7rem; font: inherit; }
.net-kicker { text-transform: uppercase; letter-spacing: .16em; color: #b99d63; }

@media (max-width: 720px) {
  .network-route #network-shell { top: .35rem; right: .35rem; width: calc(100vw - .7rem); }
  #network-drawer[open] { max-height: 55vh; overflow: auto; }
  #network-experimental { left: .35rem; bottom: .35rem; width: calc(100vw - .7rem); }
}