/* ============================================================================
   DiploSMP — shared Minecraft theme
   ----------------------------------------------------------------------------
   The look is built from Minecraft's own GUI language rather than a generic
   dark theme: hard 4px bevels (light top/left, dark bottom/right), zero
   rounding, pixelated image scaling, and a stone/dirt palette lifted from the
   game. Scenery from the server's own logo art sits behind it all.
   ============================================================================ */

:root{
  --void:#080B12;
  --stone:#1B1F26;
  --stone-2:#242A33;
  --stone-3:#2E3540;
  --bevel-hi:#4A5464;
  --bevel-lo:#0D1016;
  --text:#F2F5FA;
  --muted:#A8B4C6;
  --dim:#6E7C90;
  --gold:#F5B331;
  --gold-lo:#B87F14;
  --grass:#5FD35F;
  --grass-lo:#3A9E3A;
  --emerald:#3DD68C;
  --redstone:#F2665A;
  --diamond:#4FE0D8;
  --pixel:"Press Start 2P","Courier New",monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Cascadia Code",Consolas,ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  background:var(--void);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Wallpaper backsplash. Full opacity so the shader-lit scene actually reads. */
.scenery{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url('./wallpaper.jpg') center center / cover no-repeat fixed;
}
/* Only enough scrim to keep text legible over the bright sky. */
.scenery::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#04070Ccc 0%,#04070C99 45%,#04070Ce6 100%);
}
.stage{position:relative;z-index:1}

/* ---------- Minecraft GUI panel ----------
   Hard bevel, no rounding. This is the single most recognisable MC UI cue. */
.mcp{
  background:var(--stone);
  border:4px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  box-shadow:inset 0 0 0 2px #ffffff08, 0 10px 30px #00000073;
}
.mcp-dark{ background:#12161C; }

/* ---------- Minecraft button ---------- */
.mcb{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:800;font-size:14.5px;letter-spacing:.01em;
  padding:13px 22px;cursor:pointer;text-decoration:none;
  color:var(--text);background:var(--stone-3);
  border:3px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  text-shadow:2px 2px 0 #00000080;
  transition:background .12s, transform .08s;
}
.mcb:hover{background:#3A424F}
.mcb:active{transform:translateY(2px);border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo)}
.mcb:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.mcb.gold{background:linear-gradient(180deg,var(--gold),var(--gold-lo));color:#1A1204;text-shadow:1px 1px 0 #ffffff40}
.mcb.gold:hover{background:linear-gradient(180deg,#FFC94D,#D9930F)}
.mcb.grass{background:linear-gradient(180deg,var(--grass),var(--grass-lo));color:#08210A;text-shadow:1px 1px 0 #ffffff33}

/* ---------- pixel type ---------- */
.px{font-family:var(--pixel);line-height:1.45;letter-spacing:0}
.eyebrow{
  font-family:var(--pixel);font-size:10px;color:var(--gold);
  text-transform:uppercase;letter-spacing:.06em;
}

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

/* ---------- status ---------- */
.status{
  display:inline-flex;align-items:center;gap:9px;padding:8px 14px;
  background:var(--stone);border:3px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap;
}
.dot{width:8px;height:8px;background:var(--dim);flex:none}
.status[data-s="online"]{color:var(--grass)}
.status[data-s="online"] .dot{background:var(--grass);box-shadow:0 0 10px var(--grass);animation:blink 2.4s infinite}
.status[data-s="offline"]{color:var(--redstone)}
.status[data-s="offline"] .dot{background:var(--redstone)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

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