/* ============================================================
   dragekjeks.no — Minecraft server hub
   Committed single theme: the in-game "server select" screen.
   (Minecraft's GUI never follows OS light/dark — neither do we.)
   ============================================================ */

/* ---- Fonts: pixel display + retro mono + clean body ---- */
@font-face { font-family: fallbackpixel; src: local("Courier New"); }

:root {
  /* world */
  --bg:        #191410;   /* dirt-dark inventory background */
  --bg2:       #12100c;
  --panel:     #2b2622;   /* translucent dark panel */
  --panel-edge:#000000;

  /* stone GUI (buttons) */
  --stone:      #8a8a8a;
  --stone-hi:   #b6b6b6;
  --stone-lo:   #565656;
  --stone-face: #9a9a9a;

  /* nature */
  --grass:      #7cbb3b;
  --grass-hi:   #98d84f;
  --grass-lo:   #5a8a29;
  --dirt:       #7a563a;
  --dirt-lo:    #573b26;

  /* signal */
  --emerald:  #46d16b;   /* online  */
  --emerald-lo:#2f9e4d;
  --redstone: #e0473c;   /* offline */
  --gold:     #ffc93c;   /* highlight */
  --diamond:  #4fd6cd;   /* links / cta */
  --diamond-lo:#2fa79f;

  /* ink */
  --ink:      #ece7d8;   /* bone white */
  --ink-dim:  #a49f90;
  --ink-stone:#f6f3ea;   /* text on stone buttons */
  --shadow:   rgba(0,0,0,.55);

  --edge: 3px;           /* pixel bevel size */
  --maxw: 940px;

  --f-pixel: "Press Start 2P", fallbackpixel, monospace;
  --f-mono:  "VT323", ui-monospace, "Courier New", monospace;
  --f-body:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--ink);
  line-height: 1.6;
  background-color: var(--bg);
  /* layered pixel "dirt" grid so the ground never looks flat */
  background-image:
    linear-gradient(rgba(0,0,0,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.22) 1px, transparent 1px),
    radial-gradient(circle at 30% 20%, #221a13 0, var(--bg) 60%);
  background-size: 32px 32px, 32px 32px, 100% 100%;
  min-height: 100vh;
  image-rendering: pixelated;
}

img { image-rendering: pixelated; max-width: 100%; }

a { color: var(--diamond); text-underline-offset: 3px; }
a:hover { color: var(--gold); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---- shared pixel drop-shadow text ---- */
.pixel { font-family: var(--f-pixel); text-shadow: 2px 2px 0 var(--shadow); letter-spacing: .5px; }
.eyebrow {
  font-family: var(--f-pixel);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 2px 2px 0 var(--shadow);
}

/* ============================================================
   Grass-block banner
   ============================================================ */
.banner {
  position: relative;
  margin-top: 26px;
  border: var(--edge) solid var(--panel-edge);
  background:
    /* grass fringe on top */
    linear-gradient(var(--grass-hi) 0 6px, var(--grass) 6px 14px, var(--grass-lo) 14px 20px, transparent 20px),
    /* dirt body with pixel speckle */
    repeating-linear-gradient(90deg, var(--dirt) 0 16px, var(--dirt-lo) 16px 32px),
    var(--dirt);
  box-shadow: inset 0 0 0 var(--edge) rgba(255,255,255,.05), 0 6px 0 rgba(0,0,0,.4);
  padding: 46px 26px 30px;
  overflow: hidden;
}
.banner::after { /* darker dirt speckle */
  content: ""; position: absolute; inset: 20px 0 0 0; pointer-events: none;
  background-image:
    radial-gradient(var(--dirt-lo) 1.5px, transparent 2px),
    radial-gradient(rgba(0,0,0,.18) 1.5px, transparent 2px);
  background-size: 24px 24px, 17px 17px;
  background-position: 3px 5px, 11px 9px;
  opacity: .6;
}
.banner > * { position: relative; z-index: 1; }

.logo {
  font-family: var(--f-pixel);
  font-size: clamp(22px, 5.5vw, 40px);
  line-height: 1.25;
  margin: 0;
  color: #fff;
  text-shadow: 3px 3px 0 rgba(0,0,0,.6);
  text-wrap: balance;
}
.logo .dot { color: var(--grass-hi); }
.banner .tag {
  margin: 14px 0 0;
  font-family: var(--f-mono);
  font-size: clamp(18px, 2.6vw, 24px);
  color: #f3ecd6;
  text-shadow: 2px 2px 0 rgba(0,0,0,.5);
}

/* floating cube accent */
.cube {
  position: absolute; top: 22px; right: 26px; width: 46px; height: 46px;
  background:
    linear-gradient(135deg, var(--grass-hi) 0 50%, var(--grass) 50%);
  border: 3px solid #000;
  box-shadow: inset -6px -6px 0 rgba(0,0,0,.25), 4px 4px 0 rgba(0,0,0,.4);
  animation: bob 4s ease-in-out infinite;
}
@keyframes bob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }

/* ============================================================
   Section scaffolding
   ============================================================ */
main { padding-bottom: 64px; }
section { margin-top: 40px; }
.section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.section-head h2 {
  font-family: var(--f-pixel); font-size: clamp(13px, 2.4vw, 17px);
  margin: 0; color: var(--ink); text-shadow: 2px 2px 0 var(--shadow);
}
.section-head .count {
  font-family: var(--f-mono); font-size: 20px; color: var(--ink-dim);
}

/* ============================================================
   Server list rows (the signature — mirrors MC multiplayer list)
   ============================================================ */
.server-list { display: flex; flex-direction: column; gap: 12px; }

.server {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(var(--panel), #241f1b);
  border: var(--edge) solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.06), inset -2px -2px 0 rgba(0,0,0,.5);
  text-decoration: none;
  color: inherit;
  transition: transform .08s steps(2), box-shadow .08s;
}
.server:hover {
  transform: translateX(4px);
  box-shadow: inset 0 0 0 2px var(--diamond), inset 2px 2px 0 rgba(255,255,255,.06), 0 0 0 1px var(--diamond-lo);
}

.server .icon {
  width: 64px; height: 64px; border: 3px solid #000;
  background:
    conic-gradient(from 45deg, #3a6ea5, #6aa9d8, #3a6ea5) ,
    var(--dirt);
  display: grid; place-items: center; overflow: hidden;
}
.server .icon img { width: 100%; height: 100%; }
.server .icon .glyph { font-family: var(--f-pixel); font-size: 22px; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.5); }

.server .meta { min-width: 0; }
.server .name { font-family: var(--f-pixel); font-size: 14px; color: #fff; text-shadow: 2px 2px 0 var(--shadow); margin: 0 0 6px; }
.server .motd { font-family: var(--f-mono); font-size: 18px; color: var(--gold); margin: 0; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server .sub { font-family: var(--f-mono); font-size: 17px; color: var(--ink-dim); margin: 2px 0 0; }

.server .right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }

/* status pill + ping bars */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-pixel); font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 9px; border: 2px solid #000; color: #071;
  background: var(--emerald); text-shadow: none;
}
.status.off { background: var(--redstone); color: #2a0605; }
.status.unknown { background: var(--stone); color: #1c1c1c; }
.status .led { width: 8px; height: 8px; background: currentColor; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }

.players { font-family: var(--f-mono); font-size: 19px; color: var(--ink); }
.players b { color: var(--emerald); font-weight: 400; }

/* ping bars glyph */
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.bars i { width: 3px; background: var(--stone-lo); }
.bars i:nth-child(1){ height: 4px } .bars i:nth-child(2){ height: 7px }
.bars i:nth-child(3){ height: 10px } .bars i:nth-child(4){ height: 13px }
.bars.on i { background: var(--emerald); }
.bars.off i { background: var(--redstone); opacity: .5; }

/* ============================================================
   Beveled stone buttons + copyable address chip
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-pixel); font-size: 11px; letter-spacing: .5px;
  color: var(--ink-stone); text-decoration: none; cursor: pointer;
  padding: 11px 14px; border: 0;
  background: var(--stone-face);
  box-shadow:
    inset var(--edge) var(--edge) 0 var(--stone-hi),
    inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--stone-lo),
    0 0 0 3px #1b1b1b;
  text-shadow: 2px 2px 0 rgba(0,0,0,.45);
  transition: filter .1s;
}
.btn:hover { filter: brightness(1.12); color: #fff; }
.btn:active { box-shadow: inset var(--edge) var(--edge) 0 var(--stone-lo), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--stone-hi), 0 0 0 3px #1b1b1b; transform: translateY(1px); }
.btn.primary { background: #57a83f; }   /* grass go-button */
.btn.primary { box-shadow: inset var(--edge) var(--edge) 0 var(--grass-hi), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--grass-lo), 0 0 0 3px #16250c; }
.btn.gold { background: #e79a3c; }       /* curseforge */
.btn.gold { box-shadow: inset var(--edge) var(--edge) 0 #ffc06a, inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 #b96a1e, 0 0 0 3px #2a1808; }
.btn:focus-visible { outline: 3px solid var(--diamond); outline-offset: 3px; }
.btn.sm { font-size: 10px; padding: 9px 12px; }

/* top breadcrumb / home nav on server pages */
.topnav {
  display: flex; align-items: center; gap: 10px 12px;
  margin-top: 22px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 19px; color: var(--ink-dim);
}
.topnav .sep { opacity: .55; }
.topnav .here { color: var(--ink); }

/* address chip: mono text + copy button, one unit */
.addr {
  display: inline-flex; align-items: stretch; border: 3px solid #000; background: #0e0c0a;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.05);
  max-width: 100%;
}
.addr code {
  font-family: var(--f-mono); font-size: 22px; color: var(--diamond);
  padding: 8px 14px; letter-spacing: .5px; user-select: all;
  display: flex; align-items: center; white-space: nowrap; overflow: auto;
}
.addr .copy {
  font-family: var(--f-pixel); font-size: 10px; color: var(--ink-stone); cursor: pointer;
  border: 0; border-left: 3px solid #000; padding: 0 14px; background: var(--stone-face);
  box-shadow: inset 2px 2px 0 var(--stone-hi), inset -2px -2px 0 var(--stone-lo);
  text-shadow: 2px 2px 0 rgba(0,0,0,.4); white-space: nowrap;
}
.addr .copy:hover { filter: brightness(1.12); }
.addr .copy.done { background: var(--emerald); color: #052; }

/* ============================================================
   Cards / instructions / requirements
   ============================================================ */
.card {
  background: linear-gradient(var(--panel), #241f1b);
  border: var(--edge) solid var(--panel-edge);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.06), inset -2px -2px 0 rgba(0,0,0,.5);
  padding: 22px 24px;
}

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.steps li::before {
  counter-increment: step; content: counter(step);
  font-family: var(--f-pixel); font-size: 13px; color: #16250c;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--grass); border: 3px solid #000;
  box-shadow: inset 2px 2px 0 var(--grass-hi), inset -2px -2px 0 var(--grass-lo);
}
.steps li h3 { font-family: var(--f-mono); font-size: 21px; color: #fff; margin: 4px 0 2px; }
.steps li p { margin: 0; color: var(--ink-dim); }
.steps li p code, p code, td code { font-family: var(--f-mono); font-size: 1.05em; color: var(--diamond); background: #0e0c0a; padding: 1px 6px; border: 2px solid #000; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.spec { padding: 14px 16px; background: #221d19; border: 3px solid #000; box-shadow: inset 2px 2px 0 rgba(255,255,255,.05); }
.spec .k { font-family: var(--f-pixel); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.spec .v { font-family: var(--f-mono); font-size: 22px; color: #fff; margin-top: 4px; }

.lede { font-size: 1.08rem; color: var(--ink); }
.muted { color: var(--ink-dim); }

/* whitelist badge (rows + hero) */
.lock {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-pixel); font-size: 8px; letter-spacing: 1px; text-transform: uppercase;
  color: #2a1c00; background: var(--gold); border: 2px solid #000; padding: 3px 6px; vertical-align: middle;
}
.server .name .lock { margin-left: 8px; }

/* notice / callout — redstone-lantern warning */
.notice {
  display: flex; gap: 14px; align-items: flex-start;
  border: var(--edge) solid #000; background: #2a1712;
  box-shadow: inset 3px 0 0 var(--gold), inset 2px 2px 0 rgba(255,255,255,.05);
  padding: 16px 18px; margin: 0;
}
.notice .ico {
  flex: 0 0 auto; width: 30px; height: 30px; background: var(--gold);
  border: 3px solid #000; display: grid; place-items: center;
  font-family: var(--f-pixel); font-size: 14px; color: #2a1c00;
}
.notice .body { min-width: 0; }
.notice h3 { font-family: var(--f-pixel); font-size: 11px; color: var(--gold); margin: 3px 0 6px; text-shadow: 2px 2px 0 var(--shadow); }
.notice p { margin: 0; color: var(--ink); }
.notice code { font-family: var(--f-mono); font-size: 1.05em; color: var(--diamond); background: #0e0c0a; padding: 1px 6px; border: 2px solid #000; }

/* server-page hero */
.hero { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 40px; }
.hero .headline { font-family: var(--f-pixel); font-size: clamp(20px, 4.5vw, 34px); color: #fff; margin: 0; text-shadow: 3px 3px 0 var(--shadow); text-wrap: balance; }
.hero .row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.backlink { font-family: var(--f-mono); font-size: 19px; display: inline-block; margin-top: 34px; }

/* footer */
footer { margin-top: 56px; border-top: 3px solid #000; padding: 22px 0 40px; color: var(--ink-dim); font-family: var(--f-mono); font-size: 18px; }
footer a { color: var(--diamond); }

/* ---- responsive ---- */
@media (max-width: 620px) {
  .server { grid-template-columns: 48px 1fr; }
  .server .icon { width: 48px; height: 48px; }
  .server .right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
  .cube { display: none; }
  .addr code { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .cube { animation: none; }
  * { transition: none !important; }
}