/* mcsite - Minecraft server, render-block design system */

@font-face {
  font-family:'Monocraft'; src:url('/fonts/Monocraft.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'Monocraft'; src:url('/fonts/Monocraft-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root {
  --accent:#2EE59D; --body:#A6A6A6; --value:#FFFFFF; --muted:#5C5C5C;
  --success:#55FF55; --error:#FF5555; --warning:#FFFF55;
  --town:#55FFFF; --mayor:#FFAA00;

  --bg:#0C0C0C; --panel:#151515; --panel-hi:#1C1C1C;
  --edge:#282828; --edge-hi:#383838;

  --display:'Monocraft',ui-monospace,monospace;
  --mono:'Monocraft',ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1200px;
}

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

body {
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 1.5rem; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---------- nav ---------- */

.nav {
  position:sticky; top:0; z-index:20;
  background:rgba(12,12,12,.94);
  border-bottom:1px solid var(--edge); padding:.9rem 0;
}
.nav .wrap { display:flex; gap:1.75rem; align-items:center; }
.nav .brand {
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  color:var(--value); letter-spacing:.06em; text-transform:uppercase;
}
.nav .brand .g { color:var(--accent); }
.nav .spacer { flex:1; }
.nav a.link {
  font-family:var(--display); font-size:.8rem; color:var(--body);
  text-transform:uppercase; letter-spacing:.08em;
}
.nav a.link:hover, .nav a.link[aria-current] { color:var(--accent); text-decoration:none; }

/* ---------- buttons ---------- */

.btn {
  display:inline-block; font-family:var(--display); font-weight:700;
  font-size:.85rem; text-transform:uppercase; letter-spacing:.1em;
  padding:.9rem 1.6rem; border:2px solid var(--accent);
  background:var(--accent); color:#06110C;
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
  transition:transform 80ms linear, box-shadow 80ms linear;
}
.btn:hover { text-decoration:none; transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(0,0,0,.5); }
.btn-ghost { background:transparent; color:var(--accent); }
.btn-ghost:hover { background:rgba(46,229,157,.1); }
.btn-row { display:flex; flex-wrap:wrap; gap:1rem; margin:2rem 0 0; }

/* ---------- hero ---------- */

.hero {
  position:relative; min-height:78vh; display:flex; align-items:center;
  border-bottom:1px solid var(--edge); overflow:hidden;
}
.hero::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 70% 10%, #1B3A2E 0%, transparent 60%),
    linear-gradient(160deg,#132019 0%,#0C0C0C 65%),
    image-set(url('/img/hero.webp') type('image/webp'),
              url('/img/hero.jpg') type('image/jpeg')) center/cover no-repeat;
  background-blend-mode:normal;
  z-index:0;
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(12,12,12,.94) 0%,rgba(12,12,12,.75) 45%,rgba(12,12,12,.35) 100%);
}
.hero .wrap { position:relative; z-index:2; width:100%; padding-top:4rem; padding-bottom:4rem; }

.hero h1 {
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.2rem,6vw,4.4rem); line-height:1.08;
  text-transform:uppercase; letter-spacing:.01em;
  color:var(--value); margin:0 0 1.25rem; max-width:16ch;
}
.hero h1 .hl {
  color:var(--accent);
  text-shadow:0 0 24px rgba(46,229,157,.45);
}
.hero .lead { font-size:1.05rem; max-width:46ch; margin:0; }

.addr {
  display:inline-flex; align-items:baseline; gap:1rem;
  font-family:var(--mono); font-size:1.1rem; color:var(--value);
  background:var(--panel); border:1px solid var(--edge);
  box-shadow:inset 1px 1px 0 var(--edge-hi), inset -1px -1px 0 #060606;
  padding:.8rem 1.1rem; margin-top:2rem; cursor:pointer;
  transition:border-color 80ms linear;
}
.addr:hover { border-color:var(--accent); }
.addr .hint {
  font-family:var(--display); font-size:.65rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.1em;
}

/* ---------- stat strip ---------- */

.stats {
  display:flex; flex-wrap:wrap; gap:3rem;
  border-bottom:1px solid var(--edge); padding:1.75rem 0;
}
.stat .n {
  font-family:var(--display); font-weight:700; font-size:1.9rem;
  color:var(--accent); line-height:1;
}
.stat .l {
  font-family:var(--display); font-size:.65rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.14em; margin-top:.5rem;
}

/* ---------- section headings ---------- */

.sec-head { padding:3.5rem 0 1.75rem; }
.sec-head .kicker {
  font-family:var(--display); font-size:.68rem; color:var(--accent);
  text-transform:uppercase; letter-spacing:.18em; margin-bottom:.6rem;
}
h2 {
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.4rem,2.6vw,2rem); text-transform:uppercase;
  letter-spacing:.02em; color:var(--value); margin:0 0 .6rem; line-height:1.15;
}
h2 .hl { color:var(--accent); }
.sec-head p { max-width:52ch; margin:0; }

/* ---------- feature cards ---------- */

.cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem; }
.card {
  background:var(--panel); border:1px solid var(--edge);
  box-shadow:inset 1px 1px 0 var(--edge-hi), inset -1px -1px 0 #060606;
  padding:1.4rem 1.2rem; transition:border-color 80ms linear;
}
.card:hover { border-color:var(--accent); }
.card .ico { font-size:1.5rem; line-height:1; margin-bottom:.9rem; }
.card h3 {
  font-family:var(--display); font-weight:700; font-size:.9rem;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--value); margin:0 0 .5rem;
}
.card p { font-size:.88rem; margin:0; color:var(--body); }

/* ---------- split sections ---------- */

.sec {
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:3rem; align-items:start; padding:2.25rem 0;
  border-top:1px solid var(--edge);
}
.sec .sec-text h2 { font-size:1.3rem; }
.sec .sec-text p { max-width:44ch; font-size:.95rem; }

/* ---------- render block ---------- */

.rb {
  font-family:var(--mono); font-size:.86rem; line-height:1.75;
  background:var(--panel); border:1px solid var(--edge);
  box-shadow:inset 1px 1px 0 var(--edge-hi), inset -1px -1px 0 #060606;
  padding:.9rem 1.1rem; margin:0; overflow-x:auto;
}
.rb > span { display:block; white-space:nowrap; }
.rb-line::before, .rb-kv::before, .rb-cmd::before { content:"\2503\00A0"; color:var(--muted); }
.rb-header { color:var(--accent); font-weight:700; }
.rb-header::before { content:"\2503\00A0"; color:var(--muted); font-weight:400; }
.rb-header::after {
  content:"\00A0\00A0\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500";
  color:var(--muted); font-weight:400;
}
.rb-footer { color:var(--muted); }
.rb-footer::before {
  content:"\2503\00A0\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500";
}
.rb-spacer::before { content:"\2503"; color:var(--muted); }
.rb-kv .k { display:inline-block; width:12ch; color:var(--body); }
.rb-kv .v { color:var(--value); }
.rb-cmd .c { color:var(--accent); }
.rb-cmd .d { color:var(--body); }
.rb-cmd .d::before { content:"\00A0\00A0"; }
.rb-sep::before { content:"\00A0\00B7\00A0"; color:var(--muted); }

.ok{color:var(--success)} .err{color:var(--error)} .warn{color:var(--warning)}
.town{color:var(--town)} .val{color:var(--value)} .acc{color:var(--accent)}
.dim{color:var(--muted)}

/* ---------- beta / tags / cta / foot ---------- */

.beta {
  border-left:3px solid var(--warning); background:#17170A;
  padding:.75rem 1rem; font-size:.88rem; margin-top:1.75rem; max-width:52ch;
}
.beta strong { color:var(--warning); font-family:var(--display); letter-spacing:.06em; }

.tag {
  font-family:var(--display); font-size:.6rem; text-transform:uppercase;
  letter-spacing:.12em; border:1px solid currentColor;
  padding:.15rem .45rem; margin-left:.6rem; vertical-align:.2em;
}
.tag-vip{color:var(--mayor)} .tag-op{color:var(--error)}

.cta {
  border-top:1px solid var(--edge); margin-top:3rem;
  padding:3rem 0; text-align:center;
}
.cta h2 { margin-bottom:1rem; }

.foot {
  border-top:1px solid var(--edge); padding:2.5rem 0 3rem;
  font-size:.85rem; color:#9A9A9A; line-height:1.7;
}
.foot p { margin:0; }
.foot-top {
  display:flex; flex-wrap:wrap; gap:1.5rem; align-items:baseline;
  padding-bottom:1.25rem; margin-bottom:1.25rem;
  border-bottom:1px solid var(--edge);
}
.foot-brand {
  font-family:var(--display); font-weight:700; font-size:.95rem;
  color:var(--value); text-transform:uppercase; letter-spacing:.06em;
}
.foot-brand .g { color:var(--accent); }
.foot-links { display:flex; gap:1.5rem; margin-left:auto; }
.foot-links a { font-family:var(--display); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.foot-note { color:#9A9A9A; }
.foot .legal {
  font-family:var(--sans); font-size:.75rem; color:#8A8A8A;
  letter-spacing:.02em; margin-top:.9rem; max-width:70ch;
}

/* ---------- click-to-copy commands ---------- */

.rb-cmd .c {
  cursor:pointer;
  border-bottom:1px dotted transparent;
  transition:border-color 80ms linear, color 80ms linear;
}
.rb-cmd .c:hover { border-bottom-color:var(--accent); }
.rb-cmd .c:focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
.rb-cmd.copied .c { color:var(--success); border-bottom-color:transparent; }
.rb-cmd.copied::after { content:"\00A0\00A0copied"; color:var(--success); }

.copy-hint {
  font-family:var(--display); font-size:.68rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.12em; margin-top:1rem;
}
.copy-hint .k { color:var(--accent); }

/* ---------- commands page ---------- */

.cmd-head { padding:3rem 0 1.75rem; border-bottom:1px solid var(--edge); }
.cmd-head h1 {
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.9rem,4vw,3rem); text-transform:uppercase;
  color:var(--value); margin:0 0 .75rem;
}
.cmd-head h1 .hl { color:var(--accent); }
.cmd-head p { max-width:56ch; }

.filter {
  width:100%; max-width:340px; font-family:var(--mono); font-size:.9rem;
  color:var(--value); background:var(--panel); border:1px solid var(--edge);
  box-shadow:inset 1px 1px 0 var(--edge-hi), inset -1px -1px 0 #060606;
  padding:.65rem .85rem; margin-top:1.5rem;
}
.filter:focus { outline:none; border-color:var(--accent); }
.filter::placeholder { color:var(--muted); }

.grp-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; padding:2rem 0; }
.grp { min-width:0; }
.grp h2 { font-size:1.05rem; margin-bottom:.5rem; }
.grp > p { font-size:.85rem; color:var(--muted); margin:0 0 .8rem; max-width:44ch; }
.grp-wide { grid-column:1 / -1; }
.no-hits { color:var(--muted); font-family:var(--mono); font-size:.9rem; padding:2rem 0; }

[hidden] { display:none !important; }

/* ---------- responsive ---------- */

@media (max-width:1000px) {
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sec { grid-template-columns:1fr; gap:1.5rem; }
  .sec .sec-text p { max-width:none; }
  .grp-grid { grid-template-columns:1fr; }
  .grp-wide { grid-column:auto; }
}

@media (max-width:640px) {
  body { font-size:15px; }
  .wrap { padding:0 1.1rem; }
  .hero { min-height:auto; }
  .hero .wrap { padding-top:3.5rem; padding-bottom:3.5rem; }
  .hero h1 { max-width:none; }
  .hero::after { background:linear-gradient(180deg,rgba(12,12,12,.8) 0%,rgba(12,12,12,.92) 100%); }
  .hero::before { background-image:
    radial-gradient(120% 90% at 70% 10%, #1B3A2E 0%, transparent 60%),
    linear-gradient(160deg,#132019 0%,#0C0C0C 65%),
    image-set(url('/img/hero-sm.webp') type('image/webp'),
              url('/img/hero-sm.jpg') type('image/jpeg')); }
  .cards { grid-template-columns:1fr; }
  .stats { gap:1.75rem 2.5rem; }
  .stat .n { font-size:1.5rem; }
  .btn-row .btn { flex:1; text-align:center; }
  .rb { font-size:.74rem; padding:.75rem .85rem; }
  .rb-kv .k { width:11ch; }
  .addr { width:100%; justify-content:space-between; font-size:.95rem; }
  .nav .wrap { gap:1rem; }
  .nav .brand { font-size:.85rem; }
  .nav a.link { font-size:.7rem; }
}

/* ---------- scroll to top ---------- */

.totop {
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:30;
  width:44px; height:44px; display:none;
  align-items:center; justify-content:center;
  background:var(--panel); color:var(--accent);
  border:1px solid var(--edge);
  box-shadow:inset 1px 1px 0 var(--edge-hi), inset -1px -1px 0 #060606, 3px 3px 0 rgba(0,0,0,.5);
  cursor:pointer; font-family:var(--display); font-size:1.1rem; line-height:1;
  transition:border-color 80ms linear, transform 80ms linear;
}
.totop:hover { border-color:var(--accent); transform:translate(1px,1px); }
.totop.on { display:flex; }
.card .ico svg { display:block; width:26px; height:26px; }