@font-face {
  font-family: "Minecraftia";
  src: url("/static/minecraft_font.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --sky: #8ec9ff;
  --grass: #5f9442;
  --wood: #9a6b3d;
  --paper: #f5ecd9;
  --ink: #191919;
  --danger: #c0392b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Minecraftia", "Courier New", monospace;
  background: linear-gradient(180deg, var(--sky), #d8f0ff 62%, var(--grass) 62%);
  color: var(--ink);
  min-height: 100vh;
}

.sky {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 18% 14%, #ffffffaa 0 34px, transparent 38px),
              radial-gradient(circle at 68% 10%, #ffffff88 0 48px, transparent 52px);
  pointer-events: none;
}

.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 18px 50px;
  position: relative;
  z-index: 1;
}

.title { text-align: center; margin-bottom: 20px; }
.title h1 { margin: 10px 0 8px; font-size: 32px; }
.badge {
  display: inline-block;
  background: #6d6d6d;
  color: #fff;
  border: 3px solid #3a3a3a;
  padding: 6px 12px;
}

.card {
  background: var(--paper);
  border: 4px solid #3a2a1f;
  box-shadow: 6px 6px 0 #2a2017;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.card h2 { margin-top: 0; }
.hint { margin: 8px 0; }
.code {
  background: #e4dbc9;
  border: 2px solid #3a2a1f;
  padding: 1px 6px;
}

.auth-form {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.field-row {
  display: grid;
  gap: 6px;
}

input,
textarea {
  width: 100%;
  border: 3px solid #1f1f1f;
  background: #fffdf6;
  color: #111;
  font-family: "Minecraftia", "Courier New", monospace;
  padding: 10px;
}

.token-box {
  min-height: 90px;
  resize: vertical;
  margin-bottom: 10px;
}

.action-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

button {
  border: 3px solid #1f1f1f;
  background: var(--wood);
  color: #111;
  padding: 10px 16px;
  font-family: inherit;
  cursor: pointer;
}

pre {
  background: #111;
  color: #9aff7a;
  border: 3px solid #3a2a1f;
  padding: 12px;
  white-space: pre-wrap;
}

.card.error pre { color: var(--danger); }
.footer { text-align: center; }
