:root {
  color-scheme: dark;
  --bg: #12131b;
  --surface: #1b1d28;
  --line: #333647;
  --ink: #f8f7fd;
  --muted: #babacd;
  --lime: #d0fa81;
  font: 16px/1.5 system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 74% 0%, #24233b 0%, transparent 44rem), var(--bg); color: var(--ink); min-height: 100vh; }
.wrap { max-width: 65rem; margin: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.4rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font-size: 1.34rem; font-weight: 800; letter-spacing: -.055em; }
.brand span { margin-left: -.54rem; color: var(--lime); }
.eyebrow { font-size: .72rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.accent { color: var(--lime); }
.intro { padding-block: clamp(2.4rem, 6vw, 4.8rem) clamp(1.6rem, 4vw, 2.6rem); }
.intro p { margin: 0; max-width: 35rem; }
.intro p:last-child { color: var(--muted); font-size: clamp(1rem, 2vw, 1.16rem); }
h1 { margin: .52rem 0 .85rem; font-size: clamp(2.55rem, 8vw, 5.2rem); line-height: .99; letter-spacing: -.07em; }
h1 em { color: var(--lime); font-style: normal; }
.launcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.card { display: flex; align-items: center; gap: 1rem; min-height: 7rem; padding: 1.15rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; color: var(--ink); text-decoration: none; transition: border-color .15s, background-color .15s, transform .15s; }
.card:hover { border-color: var(--tone); background: #232535; transform: translateY(-2px); }
.card:focus-visible, button:focus-visible, .brand:focus-visible, .back:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.watch { --tone: #c4b1ff; }
.requests { --tone: #9edbff; }
.minecraft { --tone: #c2ee83; }
.scribble { --tone: #ffc295; }
.tile { flex: 0 0 3.05rem; height: 3.05rem; display: grid; place-items: center; border-radius: .82rem; background: var(--tone); color: #171821; }
.tile svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.label { display: grid; gap: .1rem; }
.title { font-weight: 760; font-size: 1.2rem; letter-spacing: -.025em; }
.detail { font-size: .92rem; color: var(--muted); }
.arrow { margin-left: auto; padding-left: .25rem; align-self: center; color: var(--tone); font-size: 1.2rem; }
main.wrap { padding-bottom: 2.4rem; }
.back { color: var(--muted); text-underline-offset: .2em; }
.join { max-width: 42rem; padding: clamp(1rem, 4vw, 1.6rem); border: 1px solid var(--line); border-radius: 1.1rem; background: var(--surface); }
.join h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
.join p { color: var(--muted); margin-bottom: 0; }
.address { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.address code { min-width: 0; overflow-wrap: anywhere; user-select: all; padding: .6rem .75rem; border-radius: .55rem; color: var(--lime); background: var(--bg); }
.address button { cursor: pointer; border: 0; border-radius: .55rem; background: var(--lime); color: #161a11; font: inherit; font-weight: 730; padding: .6rem .85rem; }
.status:empty { display: none; }
@media (max-width: 40rem) {
  .launcher { grid-template-columns: 1fr; gap: .7rem; }
  .card { min-height: 5.4rem; padding: .85rem; }
  .desktop { display: none; }
}
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

.visits { color: var(--muted); font-size: .85rem; padding-bottom: 1.5rem; }
.visits span { color: var(--ink); font-variant-numeric: tabular-nums; margin-left: .25rem; }

.minecraft { position: relative; }
.map-link { color: inherit; text-decoration: none; }
.map-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.map-link:focus-visible { outline: 0; }
.map-link:focus-visible::after, .join-link:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.join-link { position: relative; width: fit-content; z-index: 1; text-underline-offset: .18em; }
.join-link:hover { color: var(--ink); }