@font-face { font-family: "Bungee"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/bungee.woff2) format("woff2"); }

:root {
  --bg: #000;
  --cream: #F5F1ED;
  --muted: #8C8781;
  --butter: #FFC93C;
  --butter-edge: #C9921A;
  --ink: #14213D;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--cream);
  font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

footer {
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  text-align: center; color: var(--muted);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
}

/* Home: the logo alone */
.home h1 { margin: 0; }
.home .logo { width: min(520px, 74vw, 58vh * 1000 / 787); width: min(520px, 74vw, 58svh * 1000 / 787); animation: rise .9s ease-out both; }
.more {
  margin-top: clamp(28px, 6vh, 56px); padding: 8px 4px; color: var(--muted); text-decoration: none; text-align: center;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase; transition: color .2s;
  animation: rise .9s .35s ease-out both;
}
.more strong { color: var(--cream); font-weight: 600; }
.more span { display: inline-block; transition: transform .2s; }
.more:hover, .more:focus-visible { color: var(--cream); }
.more:hover span, .more:focus-visible span { transform: translateX(4px); }
.more:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; border-radius: 4px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Game page */
.top { padding: 20px 24px 0; }
.top a { display: inline-block; opacity: .9; transition: opacity .2s; }
.top a:hover, .top a:focus-visible { opacity: 1; }
.top img { height: 40px; width: auto; }
.game { gap: 24px; padding-top: 4px; }
.game h1 { margin: 0; }
.game h1 img { width: min(460px, 84vw); }
/* the whole page fits one laptop screen: the video gives way to the viewport height, down to 560 px wide */
.game video {
  display: block; height: auto; aspect-ratio: 16 / 9; background: #0B0B0B;
  width: min(880px, 100%, max(560px, (100vh - 420px) * 16 / 9));
  width: min(880px, 100%, max(560px, (100svh - 420px) * 16 / 9));
  border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(245, 241, 237, .08);
}
.play {
  display: inline-block; padding: 16px 44px 14px; border-radius: 999px;
  background: var(--butter); color: var(--ink); box-shadow: 0 5px 0 var(--butter-edge);
  font: 400 26px/1 "Bungee", system-ui, sans-serif; letter-spacing: .04em; text-decoration: none;
  transition: transform .12s, box-shadow .12s, filter .2s;
}
.play:hover { filter: brightness(1.07); }
.play:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
.play:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--butter-edge); }

/* anonymous page-view counter (the game server counts it, see analytics.js there) */
.px { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* 404 */
.lost p { margin: 18px 0 0; color: var(--muted); letter-spacing: .08em; }
.lost img { height: 72px; width: auto; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }