/* Arkade — shared chrome.

   Every page links this. It exists because the homepage and the shop each carried their own copy
   of the nav rules, drifted apart, and the header visibly jumped when you moved between them.
   Anything that appears on more than one page belongs here; page-specific layout stays inline in
   that page.

   DESIGN NOTES
   ------------
   The brand art is bright daylight — green canopy, grey mountains, and one cold cyan obelisk
   burning through the middle of it. That contrast is the whole identity, so the site is built the
   same way: warm-neutral stone, with cyan used sparingly enough that it still means something
   when it appears. Deliberately not navy-on-navy, which is where every other boosted-cluster
   site lands.

   Three typefaces, each with a job. Archivo (wide, heavy) is display only. IBM Plex Sans is for
   reading. IBM Plex Mono carries every NUMBER on the site — rates, player counts, timers, map
   codes. That last one matters most: ARK players spend all day reading stat numbers and
   coordinates, so setting data in mono with tabular figures makes the site read like an
   instrument panel rather than a landing page, and it is why columns of numbers actually line up.

   Single theme, on purpose. This is a game server at night; there is no light-mode version of
   that. Every colour is still painted explicitly rather than inherited from the host. */

/* Imported rather than linked so pages pick up the faces without each one repeating the tag.
   Every stack below names a real fallback, so text is readable before this arrives. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..125,400..900&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
  /* Ground and surfaces. Faintly cool rather than blue — a true neutral reads as cheap on a
     screen this dark, and a saturated navy reads as a template. */
  --ink: #0a0c0e;
  --stone: #12161a;
  --stone-2: #191e24;
  --stone-3: #212830;

  /* Hairlines, as white at low alpha rather than fixed greys, so one value sits correctly on
     every surface level instead of needing a variable per level. */
  --edge: rgba(255, 255, 255, 0.07);
  --edge-strong: rgba(255, 255, 255, 0.13);

  --bone: #e9edf0;
  --ash: #8b959e;
  /* Lightened from a darker grey after measuring it: at #5b656e the small mono labels — unit
     names under the countdown, column headers, "2m ago" — came out at 3.1:1, under AA. These
     carry meaning, so they have to be readable, not just present. */
  --ash-dim: #7a848d;

  /* The obelisk. One accent, spent on emphasis and interaction and nothing else. */
  --ion: #38c9f0;
  --ion-deep: #1b8fb4;
  --ion-wash: rgba(56, 201, 240, 0.1);

  /* Semantic only — these say what state something is in, they are never decoration. */
  --live: #46d28a;
  --alert: #ff7a45;
  --down: #6b7680;

  /* Spacing scale. Everything is a step on this, which is most of what holds the rhythm together
     across four pages built at different times. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  --shell: 1240px;
  --gutter: clamp(18px, 5vw, 56px);

  /* Corners are nearly square. A 14px radius on everything is the loudest tell of a generated
     layout, and softness fights the subject. */
  --radius: 4px;
  --radius-lg: 8px;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* The UA sheet's [hidden] rule is a bare `display: none`, so any class that sets display —
   .btn is inline-flex — silently outranks it and the element stays on screen with its hidden
   attribute set. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }

/* Every number on the site. Tabular figures so a column of player counts or prices lines up
   instead of shimmering as the values change. */
.mono, .num, .stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

code {
  font-family: var(--font-mono);
  background: var(--stone);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 1px 6px;
  color: var(--ion);
  font-size: 0.9em;
}

::selection { background: var(--ion); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ion);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.72em 1.25em;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease),
              color 0.14s var(--ease), transform 0.14s var(--ease);
}

/* No lift on hover. A button that jumps under the cursor is the other generated-design tell, and
   at this size it also nudges the label out from under the pointer. Press gets the movement
   instead, where it reads as the control actually depressing. */
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: var(--ion);
  color: #04141b;
}
.btn-primary:hover:not(:disabled) { background: #5ad6f5; }

.btn-ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--edge-strong);
}
.btn-ghost:hover:not(:disabled) {
  border-color: var(--ash);
  background: rgba(255, 255, 255, 0.035);
}

/* ---------- Nav ---------- */

/* Deliberately NOT justify-content: space-between — that centres the tabs against whatever else
   is in the bar, and the shop's right-hand side grows when a player signs in, which would slide
   the tabs sideways relative to every other page. Packing left after the brand and pushing the
   actions right with margin-left:auto is stable whatever the bar contains. */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--gutter);
  height: 62px;
  background: rgba(10, 12, 14, 0.78);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--edge);
}

.nav > .nav-cta { margin-left: auto; }

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: 0 0 auto; }
.brand img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--edge);
}
.brand-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.brand-word .accent { color: var(--ion); }

/* Underline-on-current rather than a filled pill. The pill competes with the primary button for
   attention in a 62px bar; a 2px rule says the same thing and stays quiet. */
.tabs { display: flex; gap: var(--s1); }
.tab {
  position: relative;
  padding: 6px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ash);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 0.14s var(--ease), background 0.14s var(--ease);
}
.tab:hover { color: var(--bone); background: rgba(255, 255, 255, 0.04); }
.tab[aria-current="page"] { color: var(--bone); }
.tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--ion);
}

.nav-right { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }

/* ---------- Shared surfaces ---------- */

/* Flat with a hairline, no gradient. The stacked-gradient card does decorative work the spacing
   already does, and it muddies every colour placed on top of it. */
.panel {
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--stone);
}

/* Section labels. Mono, because on this site every small caps-label is a field name for the data
   underneath it, and mono makes that relationship visible rather than decorative. */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ion);
  margin-bottom: var(--s3);
}

.page-head {
  padding: clamp(36px, 6vw, 72px) var(--gutter) var(--s5);
  max-width: var(--shell);
  margin: 0 auto;
}
.page-head h1 { font-size: clamp(34px, 5.6vw, 56px); }
.page-head p.lede {
  color: var(--ash);
  max-width: 62ch;
  margin-top: var(--s4);
  font-size: 16.5px;
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
  flex: 0 0 auto;
}
.status-dot.online { background: var(--live); box-shadow: 0 0 0 3px rgba(70, 210, 138, 0.16); }
.status-dot.offline { background: var(--down); }

.msg { color: var(--ash); padding: var(--s8) 0; text-align: center; }

/* Visible to a screen reader, not to the eye. Used where a column needs a name for the table to
   be navigable but the name would be noise on screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Footer ---------- */

footer {
  border-top: 1px solid var(--edge);
  margin-top: var(--s9);
  padding: var(--s7) var(--gutter) var(--s8);
}
footer .footer-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  align-items: center;
  justify-content: space-between;
}
footer p, footer .disclaimer {
  max-width: var(--shell);
  margin: var(--s5) auto 0;
  color: var(--ash-dim);
  font-size: 12.5px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  /* The bar wraps to two rows on a phone and it is sticky, so every pixel here is permanently
     off the top of the screen. Measured at 111px before tightening -- 17% of a 667px phone --
     which is more than a nav is worth. */
  .nav { flex-wrap: wrap; height: auto; padding-block: var(--s2); row-gap: var(--s1); }
  .nav .tab { padding: 5px 10px; }
  /* The tab row scrolls rather than wrapping on a narrow screen, but a visible scrollbar under a
     62px nav is louder than the tabs themselves. */
  .tabs { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 1; text-align: center; white-space: nowrap; }
  .tab[aria-current="page"]::after { bottom: 0; }
}

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