/* ─────────────────────────────────────────────────────────────────────────────
   lewharzsmp.shop — public site.

   Design plan
   ───────────
   Color   — warm dirt/ore palette instead of the generic near-black-plus-neon-
             green formula: a dark warm ground (dirt at night, not neutral
             charcoal), gold as the one loud accent (glowstone, gold ingot,
             the actual colour of money in this server's economy), and each
             hotbar slot coloured after a real Minecraft material — gold,
             emerald, diamond, amethyst, copper, redstone — so the colour
             coding means something instead of being six arbitrary hues.
   Type    — Bricolage Grotesque for display (has enough personality to carry
             a headline on its own), Plus Jakarta Sans for body copy, Space
             Mono for anything typed or numbered — the join address and the
             hotbar slot numbers.
   Layout  — the features section is a hotbar, not a card grid. It is the one
             structural idea actually native to this subject: a numbered row
             of slots, one selected at a time, with the detail written out
             below rather than repeated six times over.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --bg:        #15110C;
  --surface:   #1F1811;
  --surface-2: #2A2116;
  --line:      #3A2E1E;

  --text:     #F5EFE2;
  --text-2:   #C9BEA9;
  --muted:    #8A8071;

  --gold:      #E7A83C;
  --gold-deep: #B8791F;
  --moss:      #7FB273;
  --ember:     #D9664F;

  /* One colour per hotbar slot, named for the material it stands in for. */
  --ore-gold:      #E7A83C;
  --ore-emerald:   #45B87B;
  --ore-diamond:   #5AC8E0;
  --ore-amethyst:  #9B6FD1;
  --ore-copper:    #C97A4A;
  --ore-redstone:  #C1585A;

  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;

  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --page: 1080px;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0; font-family: var(--display); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.1; text-wrap: balance;
}
h1 { font-size: clamp(34px, 6vw, 58px); font-weight: 800; }
h2 { font-size: clamp(22px, 3vw, 28px); }
h3 { font-size: 19px; font-weight: 700; margin-bottom: var(--s-2); }
p  { margin: 0; }

a { color: inherit; text-decoration: none; }

.muted { color: var(--muted); font-size: 14px; }

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

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ── top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  background: var(--bg);
}

.brand { display: flex; align-items: center; gap: var(--s-2); }
.brand-name { font-family: var(--display); font-weight: 700; }
.brand-mark {
  width: 22px; height: 22px; border-radius: var(--r-sm);
  background: var(--gold); flex: none;
  box-shadow: inset 0 2px 0 #ffffff45, inset 0 -3px 0 #00000045;
}

.topnav { display: flex; align-items: center; gap: var(--s-4); font-size: 14.5px; }
.topnav a:not(.btn) { color: var(--text-2); }
.topnav a:not(.btn):hover { color: var(--text); }

/* ── layout ──────────────────────────────────────────────────────────────── */

main { max-width: var(--page); margin: 0 auto; padding: 0 var(--s-5); }

.section { padding: var(--s-7) 0; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap;
}

.hero { padding: var(--s-8) 0 var(--s-7); max-width: 640px; }
.eyebrow {
  color: var(--gold); font-size: 13px; font-weight: 700; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--s-4);
}
.lede {
  color: var(--text-2); font-size: 18px; max-width: 54ch; margin-top: var(--s-5);
}

/* ── join box ────────────────────────────────────────────────────────────── */

/* Styled like a line you'd type, not a card — a prompt marker, monospace,
   and a blinking cursor after the address (turned off entirely for anyone
   who has asked their OS to reduce motion). */

.join {
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: wrap; margin-top: var(--s-6);
}

.join-address {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  cursor: pointer; text-align: left; font-family: inherit; color: inherit;
}
.join-address:hover { background: var(--surface-2); }
.join-prompt { font: 700 20px/1 var(--mono); color: var(--gold-deep); }
.join-text { display: flex; flex-direction: column; gap: 2px; }
.join-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.join-value { font: 700 clamp(17px, 3vw, 21px)/1.3 var(--mono); color: var(--gold); }
.join-cursor {
  display: inline-block; width: 0.5em; height: 1em; margin-left: 2px;
  background: var(--gold); vertical-align: -0.15em;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.join-hint {
  font-size: 12px; color: var(--muted); font-family: var(--mono);
  align-self: flex-end; margin-left: var(--s-2);
}

.status {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-4);
  font-size: 14px;
}
.status-dot { width: 8px; height: 8px; border-radius: var(--r-sm); background: var(--muted); flex: none; }
.status.is-online  .status-dot  { background: var(--moss); }
.status.is-offline .status-dot  { background: var(--ember); }
.status.is-online  .status-text { color: var(--moss); }
.status.is-offline .status-text { color: var(--ember); }

/* ── hotbar ──────────────────────────────────────────────────────────────── */

.hotbar {
  display: flex; gap: var(--s-2);
  padding: var(--s-2);
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow-x: auto;
}

.slot {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  flex: 1 0 96px;
  background: none; border: 0; border-radius: var(--r-md);
  padding: var(--s-4) var(--s-2) var(--s-3);
  color: var(--text-2);
  font: 600 12.5px/1 var(--sans);
  cursor: pointer;
}
.slot:hover { background: var(--surface-2); }
.slot.is-selected { background: var(--surface-2); color: var(--text); }

.slot-num {
  position: absolute; top: 5px; left: 8px;
  font: 700 11px/1 var(--mono); color: var(--muted);
}
.slot.is-selected .slot-num { color: var(--text-2); }

.slot-swatch {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  box-shadow: inset 0 2px 0 #ffffff30, inset 0 -3px 0 #00000045;
}
.slot-gold      .slot-swatch { background: var(--ore-gold); }
.slot-emerald   .slot-swatch { background: var(--ore-emerald); }
.slot-diamond   .slot-swatch { background: var(--ore-diamond); }
.slot-amethyst  .slot-swatch { background: var(--ore-amethyst); }
.slot-copper    .slot-swatch { background: var(--ore-copper); }
.slot-redstone  .slot-swatch { background: var(--ore-redstone); }

.slot.is-selected::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px;
  height: 2px; border-radius: var(--r-sm); background: var(--gold);
}

.panel {
  margin-top: var(--s-4);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.panel h3 { color: var(--gold); }
.panel p { color: var(--text-2); font-size: 15.5px; max-width: 60ch; }

.section-note { font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); border: 0;
  background: var(--surface-2); color: var(--text);
  font: 600 14px/1 var(--sans); padding: 11px 18px; cursor: pointer;
  box-shadow: inset 0 2px 0 #ffffff14, inset 0 -3px 0 #00000040;
}
.btn:hover { background: var(--line); }
.btn:active { box-shadow: inset 0 2px 0 #00000040; padding-top: 12px; padding-bottom: 10px; }

.btn-primary {
  background: var(--gold); color: #241605;
  box-shadow: inset 0 2px 0 #ffffff50, inset 0 -3px 0 #00000045;
}
.btn-primary:hover { background: #f0b654; }

.btn-ghost { background: none; box-shadow: none; padding: 8px 14px; }
.btn-ghost:hover { background: var(--surface); }

/* ── footer ──────────────────────────────────────────────────────────────── */

.footer {
  max-width: var(--page); margin: 0 auto;
  padding: var(--s-5);
  display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  color: var(--muted); font-size: 13.5px;
}

/* ── small screens ───────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .topbar { padding: var(--s-3) var(--s-4); }
  main { padding: 0 var(--s-4); }
  .section, .hero { padding: var(--s-6) 0; }
  .join { flex-direction: column; align-items: stretch; }
  .join-hint { align-self: flex-start; margin-left: 0; }
  .status { justify-content: center; }
  .slot { flex-basis: 78px; }
}