/* The grid_world site: the look of the old browser client. The world is mostly mist, with deep and
   teal as accents, and red and blue kept for the players. Headings are Chakra Petch, text is IBM
   Plex. The fonts are served from this site (/fonts), under the SIL Open Font License; a visit
   never contacts another host. Light or dark follows the system unless the visitor picks one with
   the button in the bar (which sets data-theme on the page). */

@font-face { font-family: "Chakra Petch"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/fonts/chakra-petch-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/fonts/chakra-petch-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --mist: #f8f1ff;
  --deep: #042a2b;
  --teal: #1b998b;
  --red: #a71d31;
  --blue: #7067cf;

  --ground: var(--mist);
  --panel: #ece7f4;   /* bars and cards: mist with 5% deep */
  --line: #cccdd9;    /* hairlines: mist with 18% deep */
  --ink: var(--deep);
  --dim: #4f666c;     /* secondary text, dark enough to read on mist */
  --live: var(--teal);
  --on-live: var(--deep);
  --soft: #1b998b24;
  --gridline: #042a2b0d;
  --code: var(--deep);
  --on-code: var(--mist);

  --display: "Chakra Petch", "Arial Narrow", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ground: #031c1d; --panel: #08383a; --line: #1b5052; --ink: #f8f1ff; --dim: #a6bcbe;
  --soft: #1b998b33; --gridline: #f8f1ff0d; --code: #021213; --on-code: #f8f1ff;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #031c1d; --panel: #08383a; --line: #1b5052; --ink: #f8f1ff; --dim: #a6bcbe;
    --soft: #1b998b33; --gridline: #f8f1ff0d; --code: #021213; --on-code: #f8f1ff;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
  background-color: var(--ground);
  /* the world's floor: a faint grid, one hairline every 2rem */
  background-image:
    linear-gradient(to right, var(--gridline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gridline) 1px, transparent 1px);
  background-size: 2rem 2rem;
}

a { color: var(--ink); text-decoration-color: var(--live); text-underline-offset: .18em; text-decoration-thickness: 2px; }
a:hover { background: var(--soft); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; }

/* the top bar, like the old launcher's */
header { background: var(--panel); border-bottom: 1px solid var(--line); }
.bar { max-width: 64rem; margin: 0 auto; padding: .6rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .9rem; }
.wordmark { font: 700 1.15rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.wordmark:hover { background: none; }

/* the sun/moon button: always in the bar, at the right end */
.theme { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem;
  color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.theme:hover { border-color: var(--live); background: var(--soft); }
.theme:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; }
.theme .moon { display: none; }
:root[data-theme="dark"] .theme .sun { display: none; }
:root[data-theme="dark"] .theme .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: none; }
  :root:not([data-theme="light"]) .theme .moon { display: block; }
}

main { max-width: 64rem; margin: 0 auto; padding: 0 1rem 3rem; }

.hero { position: relative; padding: 4.5rem 0 3rem; }
h1 { margin: 0 0 .5rem; font: 700 clamp(2.6rem, 9vw, 5.5rem)/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.lead { margin: 0 0 1.8rem; font-size: 1.3rem; color: var(--dim); }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* the world's floor drifts, and three cells in the players' colours blink on it */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, var(--gridline) 1px, transparent 1px), linear-gradient(to bottom, var(--gridline) 1px, transparent 1px);
  background-size: 2rem 2rem; animation: drift 24s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); }
.cell { position: absolute; width: 2rem; height: 2rem; z-index: -1; opacity: .5; animation: blink 6s ease-in-out infinite; }
.c1 { background: var(--teal); top: 2rem; right: 14%; }
.c2 { background: var(--red); top: 6rem; right: 6%; animation-delay: -2s; }
.c3 { background: var(--blue); top: 4rem; right: 24%; animation-delay: -4s; }
@keyframes drift { to { background-position: 2rem 2rem; } }
@keyframes blink { 0%, 100% { opacity: .08; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .hero::before, .cell { animation: none; } .cell { opacity: .3; } }

.btn { display: inline-block; font: 500 .9rem var(--body); color: var(--ink); text-decoration: none;
  background: transparent; border: 1px solid var(--ink); border-radius: 3px; padding: .6rem 1.1rem; }
.btn:hover { background: var(--soft); }
.btn.primary { font: 700 .95rem var(--display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-live); background: var(--live); border-color: var(--live); }
.btn.primary:hover { background: #17877b; }

h2 { margin: 0 0 .7rem; font: 700 .72rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

/* the demo: JSON stream | picture | choices, drawn by play.js */
.demo { margin-top: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 1.1rem 1.2rem; }
.demo p:not(.label) { margin: .5rem 0 0; }
.demo .plain { font-size: 1.05rem; max-width: 44rem; }
.demo .caption, .demo .note, .demo .status { color: var(--dim); font-size: .92rem; }
.demo .note { margin-top: 1rem; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: 1rem; }
.controls .status { margin: 0; flex: 1 1 14rem; }
.act { font: 700 .95rem var(--display); letter-spacing: .1em; text-transform: uppercase; min-height: 44px; padding: .6rem 1.1rem; cursor: pointer;
  color: var(--on-live); background: var(--live); border: 1px solid var(--live); border-radius: 3px; }
.act:hover { background: #17877b; }
.act:disabled { opacity: .55; cursor: default; }
.toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; font-size: .92rem; }
.toggle input { width: 1.2rem; height: 1.2rem; accent-color: var(--live); }
.act:focus-visible, .toggle input:focus-visible, .more:focus-visible, #choices button:focus-visible, summary:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; }

.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.picture { order: 1; width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--code); border: 1px solid var(--line); border-radius: 3px; image-rendering: pixelated; }
.choices { order: 2; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.stream { order: 3; min-width: 0; max-height: 22rem; overflow: auto; padding: .6rem .7rem; background: var(--code); color: var(--on-code);
  border-radius: 3px; font: 400 .78rem/1.45 var(--mono); }
@media (min-width: 900px) {
  .cols { grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr) minmax(0, .9fr); align-items: start; }
  .stream { order: 1; max-height: 28rem; }
  .picture { order: 2; }
  .choices { order: 3; }
}

.line { margin: 0 0 .4rem; padding: .1rem .3rem; border-left: 3px solid transparent; overflow-wrap: anywhere; }
.line::before { display: inline-block; margin-right: .45rem; font-weight: 400; opacity: .8; }
.line.game::before { content: "game \2192"; color: var(--live); }
.line.you::before { content: "you \2192"; color: var(--blue); }
.line.you { border-left-color: var(--blue); }
.line.hidden { opacity: .45; }
.line.lit { background: var(--soft); border-left-color: var(--live); opacity: 1; }
.more { font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 3px; margin-left: .4rem; padding: 0 .4rem; cursor: pointer; opacity: .8; }
.more:hover { background: var(--soft); }

#choices li { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem .7rem; background: var(--ground); border: 1px solid var(--line); border-radius: 3px; color: var(--dim); }
#choices li button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; flex: 1; min-height: 44px; }
#choices li.open { color: var(--ink); border-color: var(--ink); }
#choices li.open:hover { background: var(--soft); border-color: var(--live); }
#choices li.working { color: var(--ink); border-color: var(--live); background: var(--soft); }
#choices li.done { color: var(--dim); text-decoration: line-through; }
#choices li.done::before { content: "\2713"; color: var(--teal); font-weight: 700; text-decoration: none; display: inline-block; }
#choices li.extra { font-size: .85rem; opacity: .75; }
#choices li.working { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { border-color: var(--line); } }
@media (prefers-reduced-motion: reduce) { #choices li.working { animation: none; } }

/* data only: no picture, the stream takes its room */
.demo.dataonly .picture { display: none; }
@media (min-width: 900px) { .demo.dataonly .cols { grid-template-columns: minmax(0, 2fr) minmax(0, .9fr); } .demo.dataonly .stream { max-height: 34rem; } }

.cta { margin-top: 1rem; padding: 1rem 1.1rem; border: 2px solid var(--live); border-radius: 3px; background: var(--soft); }
.cta[hidden] { display: none; }
.cta p { margin: 0 0 .8rem; font-size: 1.05rem; max-width: 40rem; }
.alt { margin-top: 1rem; }
.alt summary { cursor: pointer; color: var(--dim); font-size: .92rem; min-height: 44px; display: flex; align-items: center; }
.alt pre { margin-top: .4rem; }
.label { margin: 0 0 .6rem; font: 700 .72rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
pre, code { font-family: var(--mono); }
pre { margin: 0; padding: .8rem 1rem; overflow-x: auto; background: var(--code); color: var(--on-code); border-radius: 3px; font-size: .92rem; }



footer { max-width: 64rem; margin: 0 auto; padding: 1.2rem 1rem 2.5rem; border-top: 1px solid var(--line); color: var(--dim); font-size: .82rem; }
footer p { margin: 0 0 .3rem; max-width: 44rem; }

@media (max-width: 760px) {
  .hero { padding-top: 2.5rem; }
  .btn, .btn.primary { min-height: 44px; display: inline-flex; align-items: center; }
  .demo { padding: .9rem; }
}