/* Matches the game's title screen (client/ui/theme.odin DEFAULT_THEME,
   client/screen/title.odin): black, white text, 1 px white outlined
   buttons that invert on hover, JetBrains Mono. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains_mono_regular.ttf") format("truetype");
  font-display: swap;
}
:root {
  --bg: #000; --text: #fff; --muted: #8c8c8c; --border: #fff; --pressed: #c8c8c8;
  --font: 16px; --title: 40px; --row: 36px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); overflow: hidden;
  font: var(--font)/1.2 "JetBrains Mono", ui-monospace, monospace;
}
#stars { position: fixed; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
main {
  position: relative; min-height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 0 16px;
}
.logo { position: relative; height: 80px; display: flex; align-items: center; margin-bottom: 40px; }
h1 { font-size: var(--title); font-weight: 400; margin: 0; line-height: 1; }
.splash {
  position: absolute; left: calc(100% + 15px); top: calc(50% + 30px); margin: 0;
  white-space: nowrap; font-size: calc(var(--font) * 1.05); color: var(--text);
  text-shadow: 2px 2px 0 #000; transform-origin: center;
  transform: translate(-50%, -50%) rotate(-0.18rad);
  pointer-events: none;
}
.button {
  display: flex; align-items: center; justify-content: center;
  width: min(400px, 100%); height: var(--row);
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  text-decoration: none;
}
.button:hover, .button:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.button:active { background: var(--pressed); color: var(--bg); }
.other { margin: 10px 0 0; color: var(--muted); }
.other a { color: var(--muted); text-decoration: none; }
.other a:hover, .other a:focus-visible { color: var(--text); }
.version {
  position: fixed; left: 8px; bottom: 6px; margin: 0;
  font-size: calc(var(--font) * 0.75); color: var(--muted);
}
@media (max-width: 560px) {
  .splash { left: auto; right: 0; top: calc(100% + 4px); transform: translate(0, 0) rotate(-0.18rad); }
}