/*
  play.cognizen.ai (2026-09-24 solo/online spec T7): the home page and the
  invite page the /r/<CODE> function writes (links/functions/room.js).

  A file rather than a <style> block because the site's CSP allows only
  its own files ('self'), never inline style. The colours are the app's
  pigments (app/src/design/tokens.ts): lapis ground, vellum text, gold for
  the one thing to press. System fonts only: nothing is fetched from
  anywhere else.
*/
:root {
  --lapis: #16234a;
  --lapis-deep: #0e1730;
  --gold: #c9a227;
  --gold-bright: #e8c558;
  --vellum: #f2ead8;
  --vellum-muted: rgba(242, 234, 216, 0.72);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: radial-gradient(ellipse at 50% 20%, var(--lapis) 0%, var(--lapis-deep) 70%);
  background-color: var(--lapis-deep);
  color: var(--vellum);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  text-align: center;
}

main {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

h1 { font-size: 26px; line-height: 1.25; margin: 0; font-weight: 600; }

.kicker { font-size: 19px; color: var(--vellum-muted); font-weight: 500; }

.code {
  margin: 0 0 8px;
  font-size: 56px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.button {
  display: block;
  min-height: 52px;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 39, 0.55);
  color: var(--gold-bright);
  background: rgba(201, 162, 39, 0.1);
  font-weight: 600;
  text-decoration: none;
}

.button.primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--lapis-deep);
}

.button:active { filter: brightness(0.9); }

.note { margin: 0; font-size: 15px; color: var(--vellum-muted); }

.note a { color: var(--gold-bright); }

[hidden] { display: none !important; }

/* The copy fallback's text box: in the page, but nowhere a person sees it. */
.offscreen { position: fixed; top: -1000px; left: 0; opacity: 0; }