/* EggCity look (eggcity.vercel.app, 2026 redesign): black, white uppercase Fugue type with PP Mondwest pixel-serif accent
   words, a split headline, electric-blue pill buttons that turn orange-red on hover, the neon city loop behind the page,
   and the pixel cursor. */
@font-face { font-family: Fugue; src: url('/brand/fugue.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'PP Mondwest'; src: url('/brand/mondwest.woff2') format('woff2'); font-display: swap; }
:root { --blue: #0030ff; --orange: orangered; --hot: #d63a00; --ink: #fff; --muted: #e2e5ec; color-scheme: dark; } /* --hot: EggCity's orange-red, darkened to 4.7:1 with white text */
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #000; color: var(--ink); font-family: Fugue, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.px { font-family: 'PP Mondwest', monospace; font-weight: normal; letter-spacing: 0; }
.hidden { display: none !important; }

/* Background: the city loop, dimmed so text stays readable; a still when motion is reduced. */
.city { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; image-rendering: pixelated; }
/* A dark vignette behind the centred column; the city stays visible at the edges. */
.shade { position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse 46% 52% at 50% 42%, rgba(0,0,0,.86), rgba(0,0,0,.55) 60%, rgba(0,0,0,.1)), linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.75)); }
@media (prefers-reduced-motion: reduce) { .city { display: none; } .shade { background: url('/brand/city.jpg') center / cover; filter: brightness(.3); } }

/* Top bar: the EggCity logo. */
.top { display: flex; justify-content: space-between; align-items: center; width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0; }
.logo img { width: 84px; display: block; }

main { width: min(880px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 96px; }
h1, .lede { text-shadow: 0 2px 14px rgba(0,0,0,.9); }
/* Centred headline: the name, then one line with a pixel-serif accent (EggCity type, without the landing page's wide gaps). */
h1 { margin: 0 0 18px; text-align: center; text-transform: uppercase; font-weight: 400; line-height: 1.08; letter-spacing: 2px; }
h1 .row { display: block; font-size: clamp(34px, 7vw, 84px); }
h1 .row.sub { margin-top: 8px; font-size: clamp(17px, 2.6vw, 30px); }
h1 .px { font-size: 1.04em; letter-spacing: 0; }
.lede { font-size: clamp(16px, 2vw, 19px); line-height: 1.5; max-width: 620px; margin: 0 auto 28px; text-align: center; }

/* One centred column: the action, its status, then the small print, on a soft frosted plate (no border) so no bright part
   of the city can sit behind small text. Worst case (white city pixel) still leaves 4.5:1 for the small print. */
.cta { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 700px; margin: 0 auto; padding: 40px 40px 32px; border-radius: 28px; background: rgba(0,0,0,.74); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* The notes sit apart from the action, under a hairline, in smaller type. */
.warning { max-width: 560px; margin: 36px auto 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.14); color: #ffe3d8; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 15px; line-height: 1.6; text-shadow: 0 1px 8px #000; }
.tag { display: inline-block; margin-right: 6px; padding: 2px 8px; border: 1px solid var(--orange); border-radius: 66px; color: #ffb59a; font-family: Fugue, ui-sans-serif, sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; vertical-align: 2px; }

/* The main action: EggCity's blue pill, orange-red on hover. */
.launch, #end { appearance: none; display: inline-flex; align-items: center; justify-content: center; height: 58px; padding: 0 34px; border-radius: 66px; font: inherit; font-size: 19px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.launch { background: var(--blue); border: 2px solid var(--blue); color: #fff; }
.launch:hover { background: var(--hot); border-color: var(--hot); }
.launch:disabled { opacity: .45; cursor: default; background: var(--blue); border-color: var(--blue); }
#end { background: transparent; border: 2px solid #fff; color: #fff; }
#end:hover { border-color: var(--hot); color: var(--hot); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Status as a HUD line in the pixel serif, with a live dot: sessions free, boot steps, minutes left. */
#state { font-size: 17px; margin: 16px 0 0; min-height: 1.4em; text-shadow: 0 1px 8px #000; }
#state::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; vertical-align: 2px; animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { #state::before { animation: none; } }
.hint, footer { color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; line-height: 1.55; text-shadow: 0 1px 8px #000; }
.hint { max-width: 560px; margin: 10px auto 0; font-size: 15px; line-height: 1.6; }
footer { margin-top: 30px; text-align: center; text-transform: uppercase; letter-spacing: 2px; font-family: Fugue, ui-sans-serif, sans-serif; font-size: 12px; }
/* Clickwrap: one quiet line under Launch session links the Terms (accepted) and the Privacy notice (read); links open in a new tab. */
#startForm { display: flex; flex-direction: column; align-items: center; }
.consent { max-width: 400px; margin: 22px auto 0; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13px; line-height: 1.5; }
.consent b { font-weight: 600; color: var(--ink); }
.consent a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.consent a:hover { color: #ff8a5c; text-decoration-color: currentColor; }
.consent a:focus-visible { outline: 3px solid #98b5fc; outline-offset: 2px; }
.field { display: grid; gap: 7px; width: min(320px, 100%); margin: 0 auto 16px; text-align: left; color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.field input { width: 100%; border: 1px solid #343b48; background: #05060a; color: #fff; border-radius: 12px; padding: 12px; font-size: 16px; }
.launch:focus-visible, #end:focus-visible, .logo:focus-visible, input:focus-visible { outline: 3px solid #98b5fc; outline-offset: 3px; }

/* Pixel cursor (EggCity): a stepped blob on a 6 px grid; orange over the blue button, blue over orange. Mouse only, off
   when motion is reduced; the normal cursor comes back if the script does not run (body class is set by the script). */
body.pixel-cursor-on, body.pixel-cursor-on a, body.pixel-cursor-on button { cursor: none; }
.PixelCursor { position: fixed; top: 0; left: 0; z-index: 10002; pointer-events: none; opacity: 0; will-change: transform; }
.PixelCursor-blob { --c: #fff; width: 6px; height: 6px; margin: -9px 0 0 -9px; background: var(--c); filter: drop-shadow(0 0 3px rgba(0,0,0,.9));
  box-shadow: 6px 0 var(--c), 12px 0 var(--c), -6px 6px var(--c), 0 6px var(--c), 6px 6px var(--c), 12px 6px var(--c), 18px 6px var(--c), 0 12px var(--c), 6px 12px var(--c), 12px 12px var(--c), 6px 18px var(--c); }
.PixelCursor.is-hot-blue .PixelCursor-blob { --c: var(--orange); filter: drop-shadow(0 0 6px rgba(0,0,0,.6)); }
.PixelCursor.is-hot-orange .PixelCursor-blob { --c: var(--blue); filter: drop-shadow(0 0 6px rgba(255,255,255,.55)); }

/* Terms and Privacy (terms.html, privacy.html): long text on the same frosted plate, over the city still. The chat's Settings
   tabs show the same #doc article (fetched from these pages), so each text has one copy. */
body.doc-page { background: #000 url('/brand/city.jpg') center / cover fixed; }
.doc-page .shade { background: rgba(0,0,0,.8); }
.doc-page main { padding-top: 8px; }
.doc { max-width: 760px; margin: 0 auto; padding: 36px 40px 32px; border-radius: 28px; background: rgba(0,0,0,.74); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 17px; line-height: 1.6; }
.doc h1 { margin: 0 0 16px; text-align: left; font-size: clamp(30px, 5vw, 48px); color: var(--ink); }
.doc h2 { margin: 30px 0 8px; font-family: Fugue, ui-sans-serif, sans-serif; font-weight: 400; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); }
.doc p, .doc ul { margin: 8px 0; }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc b { color: var(--ink); font-weight: 600; }
.doc a, footer a { color: var(--ink); text-underline-offset: 3px; }
.doc a:hover, footer a:hover { color: var(--orange); }
.doc a:focus-visible, footer a:focus-visible { outline: 3px solid #98b5fc; outline-offset: 2px; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; line-height: 1.5; }
.doc th, .doc td { padding: 10px 14px 10px 0; border-top: 1px solid #343b48; text-align: left; vertical-align: top; }
.doc th { color: var(--ink); font-weight: 600; }
footer .legal { white-space: nowrap; } /* one footer line; Terms · Privacy wrap together on phones */

@media (max-width: 600px) {
  .top { padding: 18px 0; }
  .shade { background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.84) 22%, rgba(0,0,0,.86)); } /* small screens: text covers most of the city */
  .cta { padding: 30px 20px 24px; border-radius: 22px; }
  .logo img { width: 64px; }
  main { padding-top: 28px; }
  .launch, #end { width: 100%; }
  h1 .row { font-size: clamp(30px, 9vw, 44px); }
  h1 .row + .row { font-size: clamp(17px, 5vw, 24px); }
  .doc { padding: 24px 18px; border-radius: 22px; font-size: 16px; }
  /* The privacy table as stacked rows on phones. */
  .doc thead { display: none; }
  .doc tr, .doc td { display: block; }
  .doc tr { border-top: 1px solid #343b48; padding: 8px 0; }
  .doc td { border: 0; padding: 3px 0; }
  .doc td:first-child { color: var(--ink); }
  .doc td[data-label]:not(:first-child)::before { content: attr(data-label) ': '; color: var(--ink); }
}
/* "How it works" on the start page (24 Oct): onboarding for public visitors (docs/ACCESS.md). */
.how { text-align: left; }
.how summary { cursor: pointer; text-align: center; color: var(--text, #eee); }
.how ul { margin: 10px 0 0; padding-left: 20px; }
.how li { margin: 6px 0; }
.how a { color: inherit; }