/* AI Runs This Game: the front door (body.lobby) and the plain pages (body.page). */

@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Inter-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Inter-SemiBold.ttf") format("truetype");
}

:root {
  --void: #030304;          /* the arena's void colour, so the letterbox disappears */
  --ink: #e6edf1;
  --ink-soft: rgba(230, 237, 241, 0.62);
  --ink-faint: rgba(230, 237, 241, 0.38);
  --glow: #5ce1ff;          /* the Host's cyan */
  --glow-soft: rgba(92, 225, 255, 0.28);
  --glow-faint: rgba(92, 225, 255, 0.12);
  --gutter: 16px;
  --fade: 300ms;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-color: var(--glow-soft);
}

a:hover {
  color: var(--glow);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
  border-radius: 4px;
}

button {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   The front door
   --------------------------------------------------------------------------- */

body.lobby {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Wider than 9:16 (desktop, tablets, landscape): full height, centred, letterboxed. */
.greeting {
  position: fixed;
  top: 0;
  left: 50%;
  height: 100vh;
  height: 100dvh;
  width: auto;
  aspect-ratio: 9 / 16;
  transform: translateX(-50%);
  background: var(--void);
  object-fit: contain;
}

/* Narrower than 9:16 (phones in portrait): fill the width, and place the video
   so its Host sits where the arena draws it: centred at 31% of the screen
   height, sized from the width. The handoff then needs no movement at all. */
@media (max-aspect-ratio: 9 / 16) {
  .greeting {
    left: 0;
    width: 100vw;
    height: calc(100vw * 16 / 9);
    transform: none;
    top: calc(0.31 * (100vh - 100vw * 16 / 9));
    top: calc(0.31 * (100dvh - 100vw * 16 / 9));
  }
}

/* Lower area, within thumb reach. Below the greeting's burned-in captions. */
.controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 56px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(3, 3, 4, 0.92) 0%, rgba(3, 3, 4, 0.7) 55%, rgba(3, 3, 4, 0) 100%);
  text-align: center;
}

.notice {
  max-width: 34em;
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}

.live {
  margin: 0;
  min-height: 1.5em;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.enter {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 340px;
  min-height: 60px;
  padding: 10px 24px;
  border: 1px solid var(--glow);
  border-radius: 999px;
  background: var(--glow-faint);
  color: #f2fbff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 0 28px var(--glow-soft), inset 0 0 18px var(--glow-faint);
  transition: background-color 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

.enter:hover:not(:disabled) {
  background: rgba(92, 225, 255, 0.2);
  box-shadow: 0 0 40px rgba(92, 225, 255, 0.45), inset 0 0 22px var(--glow-faint);
}

.enter:active:not(:disabled) {
  background: rgba(92, 225, 255, 0.28);
}

.enter:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 4px;
  border-radius: 999px;
}

.enter:disabled {
  cursor: default;
  border-color: rgba(92, 225, 255, 0.28);
  background: rgba(92, 225, 255, 0.04);
  color: var(--ink-faint);
  box-shadow: none;
}

.enter-state {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.enter:not(:disabled) .enter-state {
  display: none;
}

.enter:disabled .enter-state {
  animation: breathe 2.4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.slow {
  margin: -4px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.retry {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--glow);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.sound {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid rgba(230, 237, 241, 0.16);
  border-radius: 999px;
  background: rgba(3, 3, 4, 0.5);
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sound:hover {
  color: var(--ink);
  border-color: rgba(230, 237, 241, 0.32);
}

.sound .sound-waves {
  opacity: 0.35;
}

.sound[aria-pressed="true"] {
  color: var(--glow);
  border-color: var(--glow-soft);
}

.sound[aria-pressed="true"] .sound-waves {
  opacity: 1;
}

.foot {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.foot a {
  display: inline-block;
  padding: 4px 6px;
  text-decoration: none;
}

/* The preloaded game: rendered (so it can draw and report ready) but invisible
   and untouchable until Enter, then it fades in over everything.
   The page uses viewport-fit=cover, so the frame keeps itself out of the notch,
   rounded corners and gesture bar; the void behind it fills those bars. With no
   insets (most screens) it is the whole viewport, so the Host still lines up
   with the greeting's last frame. An iframe doesn't stretch between its
   offsets, hence the explicit size. */
.arena-frame {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  left: env(safe-area-inset-left, 0px);
  z-index: 1;
  width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  border: 0;
  background: var(--void);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fade) ease;
}

.arena-frame.entered {
  z-index: 10;
  opacity: 1;
  pointer-events: auto;
}

/* After the fade: the game alone. */
body.in-arena .greeting,
body.in-arena .controls {
  visibility: hidden;
}

/* Short screens (landscape phones): tighter controls. */
@media (max-height: 520px) {
  .controls {
    gap: 8px;
    padding-top: 32px;
  }
  .enter {
    min-height: 48px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arena-frame {
    transition: none;
  }
  .enter:disabled .enter-state {
    animation: none;
    opacity: 1;
  }
  .enter {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Plain pages: /privacy/, /stats/
   --------------------------------------------------------------------------- */

body.page {
  min-height: 100vh;
  padding: 48px var(--gutter) calc(48px + env(safe-area-inset-bottom, 0px));
}

.page main {
  max-width: 38rem;
  margin: 0 auto;
}

.page h1 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page h2 {
  margin: 36px 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--glow);
  letter-spacing: 0.01em;
}

.page p,
.page li {
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.page ul {
  padding-left: 20px;
}

.page li + li {
  margin-top: 6px;
}

.page strong {
  color: var(--ink);
  font-weight: 600;
}

.draft {
  display: inline-block;
  margin: 8px 0 0;
  padding: 4px 12px;
  border: 1px dashed var(--glow-soft);
  border-radius: 999px;
  font-size: 13px;
  color: var(--glow);
}

.back {
  display: inline-block;
  margin-top: 40px;
  font-size: 14px;
}

.page .host-line {
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
}

body.page.centred {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body.page.centred main {
  max-width: 30rem;
}