/* Shared demo-site layout: details on the left, the game on the right. */
:root { --bg: #111; --panel: #181818; --line: #2e2e2e; --text: #e8e8e8; --dim: #a0a0a0; --accent: #7fb8ff; --hit: #34d399; --miss: #fbbf24; --empty: #262626; }
html, body { height: 100%; margin: 0; }
body { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); background: var(--bg); color: var(--text); font: 0.875rem/1.45 system-ui, sans-serif; }
a { color: var(--accent); }
code, .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.details { overflow-y: auto; padding: 1.5rem 1.75rem; background: var(--panel); border-right: 1px solid var(--line); }
h1 { margin: 0; font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
.pattern { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--accent); }
.what { margin: 0.5rem 0 0; color: var(--dim); }
h2 { margin: 1.5rem 0 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.stack { margin: 0; padding-left: 1.1rem; }
.stack li { margin: 0.15rem 0; }
.stack ul { margin: 0.1rem 0 0.3rem; padding-left: 1.1rem; color: var(--dim); font-size: 0.8rem; }
.live { padding: 1rem; border: 1px solid var(--line); border-radius: 0.4rem; background: var(--bg); }
.live p { margin: 0; font-size: 0.8rem; color: var(--dim); }
output { display: block; margin-top: 0.4rem; font: 600 2rem/1.2 ui-monospace, Menlo, Consolas, monospace; color: var(--hit); }
.polls { display: flex; gap: 3px; margin: 0.75rem 0 0.5rem; padding: 0; list-style: none; }
.polls li { flex: 1; height: 1.5rem; border-radius: 2px; background: var(--empty); }
.polls li.hit { background: var(--hit); }
.polls li.miss { background: var(--miss); }
.polls li.err { background: #6b7280; }
.tally { font-size: 0.75rem; color: var(--dim); }
.key { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.75rem; color: var(--dim); }
.key span::before { content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.35em; border-radius: 2px; background: var(--hit); }
.key span.m::before { background: var(--miss); }
.meta { margin: 1.5rem 0 0; font-size: 0.8rem; color: var(--dim); }
.play { display: flex; flex-direction: column; min-height: 0; background: #000; }
.game { flex: 1; width: 100%; border: 0; }
.credit { margin: 0; padding: 0.4rem 0.75rem; font-size: 0.75rem; color: var(--dim); background: var(--panel); border-bottom: 1px solid var(--line); }
@media (max-width: 48rem) {
  html, body { height: auto; }
  body { display: block; }
  .details { overflow: visible; padding: 1rem; border-right: 0; border-bottom: 1px solid var(--line); }
  h2 { margin-top: 1rem; }
  output { font-size: 1.6rem; }
  .game { flex: none; height: 85vh; height: 85svh; }
}