@font-face {
  font-family: "Chakra Petch";
  src: url("/assets/ChakraPetch-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* The game's own menu colours (Assets/Breakbeat/UI/Resources/Menus.uss). */
:root {
  --ink: #ffffff;
  --quiet: #9cc4e8;
  --dim: #7fa3c7;
  --glass: #57e6ff;
  --warm: #ffc67a;
  --line: rgba(156, 196, 232, 0.22);
  --deep: #03050e;
  --panel: #0a1226;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--deep);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

main, footer, .bar { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 20px; }

.bar { display: flex; align-items: center; gap: 12px; padding-top: 22px; padding-bottom: 8px; }
.bar img { width: 40px; height: 40px; border-radius: 9px; }
.bar a { color: var(--ink); text-decoration: none; font: 700 22px "Chakra Petch", sans-serif; letter-spacing: 0.12em; }

h1, h2 { font-family: "Chakra Petch", sans-serif; font-weight: 700; line-height: 1.15; letter-spacing: 0.03em; }
h1 { font-size: 38px; margin: 28px 0 6px; }
h2 { font-size: 22px; margin: 34px 0 6px; color: var(--glass); }
p, ul { margin: 10px 0; }
ul { padding-left: 22px; }
a { color: var(--glass); }
.updated { color: var(--dim); font-size: 15px; margin-top: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0 0; }

pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.hero { text-align: center; padding-top: 48px; }
.hero img { width: 128px; height: 128px; border-radius: 28px; }
.hero h1 { font-size: 56px; margin-top: 18px; letter-spacing: 0.16em; padding-left: 0.16em; }
.hero .say { color: var(--warm); font-size: 15px; letter-spacing: 0.08em; margin-top: 0; }
.hero p { color: var(--quiet); }
.links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 26px; }

footer { margin-top: 48px; padding-bottom: 36px; color: var(--dim); font-size: 15px; }
footer a { margin-right: 14px; }