@font-face {
  font-family: "Minecraft";
  src: url("./Minecraft.ttf") format("truetype");
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root { --ui-border:#3a3a3a; --ui-border-light:#6b6b6b; --ui-surface:rgba(20,20,20,.75);
  --ui-surface-light:rgba(255,255,255,.06); --text-color:#fff; --shadow:rgba(0,0,0,.35); }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background:
    radial-gradient(circle at 10% 15%, rgba(255,255,255,.06) 0 2px, transparent 3px) 0 0/64px 64px,
    radial-gradient(circle at 70% 35%, rgba(0,0,0,.10) 0 2px, transparent 3px) 0 0/64px 64px,
    linear-gradient(#2fae43 0 64px, transparent 64px) no-repeat,
    linear-gradient(#7b4c24 0 100%);
  background-size: auto, auto, 100% 100%, cover;
  color: var(--text-color);
  font-family: "Minecraft","Press Start 2P",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  display: grid; place-items: center; padding: 32px;
}
.panel {
  width: min(800px, 100%);
  background: linear-gradient(var(--ui-surface), var(--ui-surface)), var(--ui-surface-light);
  border: 4px solid var(--ui-border); outline: 2px solid var(--ui-border-light);
  border-radius: 16px; box-shadow: 0 12px 30px var(--shadow), inset 0 2px 0 rgba(255,255,255,.06);
  padding: 32px 28px 36px; text-align: left;
}
.logo { display:block; max-width:300px; height:auto; margin-bottom:30px; }
.commands ul { list-style:none; padding:0; margin:0; }
.commands li {
  background: rgba(0,0,0,.45);
  border: 4px solid var(--ui-border); outline: 2px solid var(--ui-border-light);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; font-size: 16px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.06);
}
.debug { margin-top: 12px; font-size: 12px; color: #ffb3b3; }