/* the relay's own small pages ("Got a code?", "This game has ended"): soft and friendly, like the game's menus */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: linear-gradient(180deg, #ffd9b8 0%, #ffc4d6 55%, #c9b8ff 100%);
  color: #3a2212;
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 16px;
}
.card {
  width: 100%; max-width: 420px;
  background: #fff8ee; border: 3px solid #6b3a1c; border-radius: 20px;
  padding: 28px 28px 24px; text-align: center;
  box-shadow: 0 8px 0 rgba(107, 58, 28, 0.25);
}
h1 { margin: 0 0 12px; font-size: 28px; font-weight: 900; color: #6b3a1c; }
p { margin: 0 0 18px; line-height: 1.45; }
.small { font-size: 14px; margin: 14px 0 0; min-height: 1em; }
form { display: flex; gap: 10px; justify-content: center; }
input {
  width: 130px; font: 900 24px "Segoe UI", system-ui, sans-serif; letter-spacing: 4px; text-align: center; text-transform: uppercase;
  padding: 10px 12px; border: 3px solid #6b3a1c; border-radius: 12px; background: #fff; color: #3a2212;
}
.btn {
  display: inline-block; font: 800 18px "Segoe UI", system-ui, sans-serif; color: #fff; text-decoration: none;
  background: #f08a24; border: 3px solid #6b3a1c; border-radius: 12px; padding: 10px 20px; cursor: pointer;
  box-shadow: 0 4px 0 #6b3a1c;
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #6b3a1c; }