/* /play/<slug>/: a thin bar back to the site, the game fills the rest (game itself lives in game/). */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root { --bar: #111114; --on-bar: #ffffff; --muted: #a3a3ac; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bar); overflow: hidden; }
body { display: flex; flex-direction: column; height: 100dvh; font: 600 15px/1 "Inter", system-ui, sans-serif; }
.bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: calc(44px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: var(--bar); color: var(--on-bar);
}
.back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px 0 12px;
  border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--on-bar); text-decoration: none; letter-spacing: .02em;
}
.back:hover, .back:focus-visible { background: rgba(255, 255, 255, .22); }
.name { color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game { flex: 1; width: 100%; min-height: 0; border: 0; display: block; background: #000; }