html, body { margin: 0; height: 100%; overflow: hidden; background: #04060b; }
canvas { display: block; width: 100vw; height: 100vh; }
.title { margin: 1.6em 16px 0.2em; text-align: center; color: #ff9f40; font: 700 clamp(2em, 7vw, 4.5em) Consolas, Inconsolata, monospace; letter-spacing: 0.04em; }
.markets { max-width: 52em; margin: 0 auto; padding: 0 16px 4em; font-family: Consolas, Inconsolata, monospace; }
.tagline { margin: 0 16px 1.2em; text-align: center; color: #c8d1db; font: 400 clamp(1em, 2.4vw, 1.35em) Consolas, Inconsolata, monospace; }
.markets h2 { margin: 1.8em 0 0.7em; text-align: center; color: #ff9f40; font-size: 1.5em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
.markets .grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; } /* two across, a lone tile centered under the heading */
.market { --color: #ff9f40; box-sizing: border-box; flex: 0 1 calc(50% - 0.5em); display: flex; flex-direction: column; gap: 0.7em; min-height: 7em; padding: 1.2em 1.4em; background: #0a0f17; border: 1px solid #1f2a38; color: #c8d1db; text-decoration: none; transition: border-color 0.15s, background 0.15s; }
.market:hover, .market:focus-visible { border-color: var(--color); background: #111925; outline: none; }
.market .name { color: var(--color); font-size: 1.6em; font-weight: 700; }
.market .question { color: #9aa6b4; font-size: 1em; line-height: 1.4; }
.markets .none { margin: 0.4em 0 0; text-align: center; color: #7d8a99; font-size: 1em; letter-spacing: 0.08em; }
.market .preview { width: 100%; height: 7.5em; margin-top: auto; }
.market .legend { display: flex; flex-wrap: wrap; gap: 0.3em 1.2em; min-height: 1.2em; font-size: 0.85em; font-weight: 700; }
@media (max-width: 40em) {
  .title { margin: 2em 16px 0.4em; }
  .markets h2 { margin: 1.4em 0 0.5em; font-size: 1.15em; }
  .markets .grid { gap: 0.6em; }
  .market { flex-basis: 100%; min-height: 0; gap: 0.35em; padding: 0.9em 1em; }
  .market .name { font-size: 1.3em; }
  .market .question { font-size: 0.9em; }
  .market .preview { height: 6em; }
}
.bar { position: fixed; top: 0.3em; left: 0.5em; z-index: 1; padding: 0.15em 0.4em; background: rgba(4, 6, 11, 0.8); display: flex; align-items: center; gap: 1.6em; font: 15px Consolas, Inconsolata, monospace; }
.bar a { color: #7d8a99; text-decoration: none; }
.bar a:hover { color: #ff9f40; }
.credits { position: fixed; bottom: 0.45em; right: 0.9em; z-index: 1; padding: 0.15em 0.4em; background: rgba(4, 6, 11, 0.8); color: #7d8a99; font: 12px Consolas, Inconsolata, monospace; }
.credits a { color: #7d8a99; text-decoration: none; }
.credits a:hover { color: #ff9f40; text-decoration: underline; }
dialog.settings { background: #04060b; color: #c8d1db; border: 1px solid #ff9f40; padding: 1.2em 1.6em; font: 15px Consolas, Inconsolata, monospace; }
dialog.settings::backdrop { background: rgba(4, 6, 11, 0.6); }
dialog.settings { max-width: 32em; }
dialog.settings label { display: flex; align-items: baseline; gap: 0.6em; margin: 0.6em 0; cursor: pointer; line-height: 1.4; }
dialog.settings input { accent-color: #ff9f40; flex: none; }
dialog.settings strong { color: #ff9f40; }
dialog.settings button { margin-top: 1em; background: none; border: 1px solid #7d8a99; color: #c8d1db; font: inherit; padding: 0.2em 0.8em; cursor: pointer; }
dialog.settings button:hover { border-color: #ff9f40; color: #ff9f40; }
.transcript { position: fixed; overflow: hidden; color: transparent; white-space: pre; font-family: Consolas, Inconsolata, monospace; cursor: text; }
.transcript > div > div { height: 1lh; }
.transcript ::selection { background: rgba(255, 159, 64, 0.35); color: transparent; }
.toggles { position: fixed; top: 0.3em; right: 0.5em; z-index: 1; padding: 0.15em 0.4em; background: rgba(4, 6, 11, 0.8); display: flex; align-items: center; gap: 1.2em; font: 15px Consolas, Inconsolata, monospace; }
.toggles a { display: flex; color: #7d8a99; opacity: 0.6; text-decoration: none; }
.toggles a:hover { opacity: 1; }
.toggles a.on { color: #ff9f40; opacity: 1; }
.toggles svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toggles svg .fill { fill: currentColor; }
.toggles a:not(.on) .when-on, .toggles a.on .when-off { display: none; }
html.page, html.page body { height: auto; overflow: auto; } /* a page that scrolls, unlike the games' */
.rules { max-width: 44em; margin: 0 auto; padding: 3em 1.5em 4em; color: #c8d1db; font: 16px/1.55 Consolas, Inconsolata, monospace; }
.rules h1 { color: #ff9f40; font-size: 1.8em; margin: 0 0 1em; }
.rules h2 { color: #ff9f40; font-size: 1.2em; margin: 2em 0 0.6em; }
.rules h3 { color: #c8d1db; font-size: 1em; margin: 1.4em 0 0.3em; }
.rules strong { color: #fff; }
.rules li { margin: 0.5em 0; }
.rules kbd { border: 1px solid #7d8a99; border-radius: 3px; padding: 0 0.3em; font: inherit; font-size: 0.9em; }