:root {
  --ink: #f4f0e8;
  --muted: #99a4af;
  --line: rgba(244, 240, 232, 0.16);
  --navy: #101b2d;
  --navy-deep: #0a1220;
  --cyan: #68e6d1;
  --orange: #ff825c;
  --blue: #5272e8;
}

* { box-sizing: border-box; }

html { background: var(--navy-deep); }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 12%, rgba(82, 114, 232, 0.22), transparent 27rem),
    radial-gradient(circle at 8% 68%, rgba(255, 130, 92, 0.12), transparent 25rem),
    linear-gradient(135deg, #0a1220 0%, #101b2d 52%, #11182b 100%);
  font-family: "Space Grotesk", sans-serif;
}

body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.36;
  background-image: linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.noise { position: fixed; inset: 0; pointer-events: none; opacity: 0.035; z-index: 5; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }

.page-shell { width: min(1180px, calc(100% - 56px)); margin: 0 auto; }

.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 92px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-size: 19px; font-weight: 700; letter-spacing: 0.12em; }
.brand-mark { width: 35px; height: 35px; border-radius: 9px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,0.2); }
.brand-dot { color: var(--orange); }
.nav-links { display: flex; gap: 30px; }
.nav-links a, .text-link { color: var(--muted); text-decoration: none; font-size: 13px; transition: color .2s ease; }
.nav-links a:hover, .text-link:hover { color: var(--ink); }

.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); gap: clamp(50px, 10vw, 150px); align-items: center; min-height: 550px; padding: 85px 0 70px; }
.eyebrow, .panel-topline, .footer, .card-number, .last-updated { font-family: "DM Mono", monospace; text-transform: uppercase; letter-spacing: .09em; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--cyan); font-size: 11px; }
.pulse-dot, .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(104, 230, 209, .11); }
.hero h1 { max-width: 680px; margin: 21px 0 20px; font-size: clamp(65px, 9vw, 126px); line-height: .83; letter-spacing: -.065em; font-weight: 600; }
.hero h1 em { color: var(--orange); font-style: normal; }
.hero-text { max-width: 410px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; margin-top: 33px; }
.ip-button { display: inline-flex; align-items: center; gap: 30px; padding: 15px 17px 15px 20px; border: 1px solid var(--cyan); color: var(--navy-deep); background: var(--cyan); font: 500 13px "DM Mono", monospace; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.ip-button:hover { transform: translateY(-3px); background: #9bf5e6; }
.button-icon { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid rgba(10, 18, 32, .45); font-size: 15px; }
.text-link { color: var(--ink); font-size: 13px; }
.text-link span { color: var(--orange); padding-left: 7px; }
.copy-feedback { min-height: 18px; margin: 12px 0 0; color: var(--cyan); font: 11px "DM Mono", monospace; }

.status-panel { position: relative; padding: 28px 30px 25px; border: 1px solid rgba(104, 230, 209, .34); background: rgba(18, 31, 50, .77); box-shadow: 18px 18px 0 rgba(255, 130, 92, .12); }
.status-panel::before { position: absolute; top: -1px; right: -1px; width: 75px; height: 4px; background: var(--orange); content: ""; }
.panel-topline { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 10px; }
.status-live { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); }
.status-dot { width: 6px; height: 6px; box-shadow: none; }
.status-dot.offline { background: var(--orange); }
.player-count { margin-top: 42px; color: var(--ink); font-size: clamp(76px, 9vw, 112px); line-height: .8; letter-spacing: -.08em; font-weight: 600; }
.player-caption { margin-top: 17px; color: var(--cyan); font: 11px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .12em; }
.panel-rule { height: 1px; margin: 30px 0 18px; background: var(--line); }
.status-row { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; color: var(--muted); font-size: 12px; }
.status-row strong { color: var(--ink); font-family: "DM Mono", monospace; font-size: 11px; font-weight: 400; }
.last-updated { margin: 21px 0 0; color: #647184; font-size: 9px; }

.destination-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 70px; }
.destination-card { position: relative; min-height: 176px; display: flex; flex-direction: column; justify-content: flex-end; padding: 25px; color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .25s ease; }
.destination-card:hover { transform: translateY(-5px); }
.discord-card { background: linear-gradient(120deg, #384baf, #536ed4); }
.forum-card { background: linear-gradient(120deg, #c35c3e, #ed8a56); }
.map-card { background: linear-gradient(120deg, #197a70, #39b294); }
.destination-card::after { position: absolute; right: -25px; top: -45px; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; content: ""; }
.card-number { position: absolute; top: 22px; left: 25px; font-size: 10px; opacity: .7; }
.card-icon { position: absolute; top: 19px; right: 25px; font-size: 37px; line-height: 1; opacity: .88; }
.card-title { font-size: 30px; font-weight: 500; letter-spacing: -.04em; }
.card-url { margin-top: 8px; font: 11px "DM Mono", monospace; opacity: .78; }
.card-url span { padding-left: 8px; }
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0 28px; border-top: 1px solid var(--line); color: #647184; font-size: 9px; }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 36px, 560px); }
  .topbar { min-height: 76px; }
  .nav-links { gap: 15px; }
  .nav-links a { font-size: 11px; }
  .hero { grid-template-columns: 1fr; gap: 48px; min-height: 0; padding: 70px 0 65px; }
  .hero h1 { font-size: clamp(68px, 20vw, 105px); }
  .hero-text { font-size: 15px; }
  .status-panel { box-shadow: 10px 10px 0 rgba(255, 130, 92, .12); }
  .destination-grid { grid-template-columns: 1fr; padding-bottom: 48px; }
  .footer { flex-wrap: wrap; }
  .footer span:nth-child(2) { order: 3; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}