/* A hosted server's public page, /s/<slug> (server-public.html, filled by src/cloud/index.js serverPage). The brand
   side of the site: the night, the pixel headline and the grass strip, around one calm card with what a player needs. */
.sp-page { position: relative; isolation: isolate; }
.sp-hero { position: relative; padding: clamp(36px, 6vw, 72px) 0 clamp(120px, 14vw, 180px); overflow: hidden; }
.sp-hero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 220px; pointer-events: none;
  background: url("/site/img/hero-grove.png") 30% 100% / 1920px auto repeat-x; image-rendering: pixelated; opacity: 0.9; }
.sp-card { max-width: 720px; margin: 0 auto; padding: clamp(24px, 4vw, 40px); background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: none; }
.sp-title { font-size: clamp(36px, 5vw, 56px); margin: 0 0 14px; overflow-wrap: anywhere; }
.sp-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 24px; color: var(--text-dim); }
.sp-join { display: grid; gap: 12px; padding: 18px; background: var(--bg-input); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sp-address { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sp-label { flex-basis: 100%; font: 600 var(--fs-xs)/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.sp-address code { flex: 1 1 200px; min-width: 0; font: 500 var(--fs-lg)/1.3 var(--font-mono); color: var(--link); background: none; border: 0; padding: 0; white-space: normal; overflow-wrap: anywhere; }
.sp-join .srv-join { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-join .srv-join .join-note { flex-basis: 100%; color: var(--text-dim); font-size: var(--fs-sm); }
.sp-small { margin: 0; font-size: var(--fs-sm); color: var(--text-faint); }
.sp-small:empty { display: none; }
.sp-small code { font-size: var(--fs-sm); }
.sp-when { margin-top: 26px; }
.sp-h { font: 600 var(--fs-lg)/1.3 var(--font-body); margin: 0 0 10px; }
.sp-lines { list-style: none; margin: 0 0 6px; padding: 0; font-weight: 600; }
.sp-lines li + li { margin-top: 4px; }
.sp-next { margin: 10px 0 0; color: var(--text-dim); font-size: var(--fs-md); }
.sp-own { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; width: auto; max-width: 720px; margin: -72px auto 72px; padding: 18px 22px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius); position: relative; }
.sp-own > div { display: grid; gap: 3px; flex: 1 1 320px; }
.sp-own span { color: var(--text-dim); font-size: var(--fs-md); }
@media (max-width: 560px) { .sp-join .srv-join .btn { min-height: 44px; } .sp-own { margin: -56px var(--gutter) 56px; max-width: none; } }