/* The game explorer inside the site: every rule is scoped to .explorer, the colours are tokens on it, and the dark
   theme follows the site's own switch (html.dark), so the page reads as part of the site. */
.explorer {
  --bg: transparent; --panel: rgba(255, 255, 255, 0.62); --panel-2: rgba(0, 0, 0, 0.028); --border: rgba(0, 0, 0, 0.09);
  --text: #1b1b1f; --muted: #52525b; --faint: #8a8a93;
  --accent: #1f3fd0; --accent-soft: rgba(31, 63, 208, 0.1); --accent-ink: #ffffff;
  --ok: #15803d; --ok-soft: rgba(21, 128, 61, 0.1); --warn: #a16207; --warn-soft: rgba(202, 138, 4, 0.13);
  --bad: #b91c1c; --bad-soft: rgba(185, 28, 28, 0.09);
  --c1: #1f3fd0; --c2: #dc2626; --c3: #27272a; --c4: #7c3aed; --c5: #16a34a; --c6: #d97706;
  --grid: rgba(0, 0, 0, 0.075); --track: rgba(0, 0, 0, 0.12);
  color: var(--text);
  font-size: 15px; line-height: 1.55;
  max-width: 1120px; margin: 0 auto; padding: 5.5rem 16px 48px;
}
.dark .explorer {
  --panel: rgba(255, 255, 255, 0.035); --panel-2: rgba(255, 255, 255, 0.05); --border: rgba(255, 255, 255, 0.09);
  --text: #ececef; --muted: #a1a1aa; --faint: #71717a;
  --accent: #8fb0ff; --accent-soft: rgba(143, 176, 255, 0.14); --accent-ink: #0b1220;
  --ok: #4ade80; --ok-soft: rgba(74, 222, 128, 0.12); --warn: #facc15; --warn-soft: rgba(250, 204, 21, 0.12);
  --bad: #f87171; --bad-soft: rgba(248, 113, 113, 0.12);
  --c1: #8fb0ff; --c2: #f87171; --c3: #e4e4e7; --c4: #c4b5fd; --c5: #4ade80; --c6: #fbbf24;
  --grid: rgba(255, 255, 255, 0.08); --track: rgba(255, 255, 255, 0.16);
  color-scheme: dark;
}
.explorer *, .explorer *::before, .explorer *::after { box-sizing: border-box; }
.explorer a { color: var(--accent); text-decoration: none; }
.explorer a:hover { text-decoration: underline; }

/* the head of the page */
.explorer .crumbs { font-size: 0.85rem; color: var(--faint); margin-bottom: 6px; }
.explorer .crumbs a { color: var(--faint); }
.explorer h1 { font-family: Newsreader, "Iowan Old Style", Georgia, serif; font-weight: 500; font-size: 2.3rem; line-height: 1.1; margin: 0 0 10px; letter-spacing: -0.02em; }
.explorer .sub { color: var(--muted); margin: 0 0 14px; max-width: 760px; font-size: 1rem; }
.explorer .facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.explorer .facts li { font-size: 0.8rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.explorer h2 { font-family: Newsreader, "Iowan Old Style", Georgia, serif; font-size: 1.3rem; font-weight: 500; margin: 0 0 10px; letter-spacing: -0.01em; }
.explorer .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.explorer .muted { color: var(--muted); }
.explorer .small { font-size: 0.85rem; }
.explorer code, .explorer pre, .explorer .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; }
.explorer p { margin: 0 0 8px; }

/* the games */
.explorer .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.explorer .tab { border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 7px 14px 8px; border-radius: 999px;
  cursor: pointer; font: inherit; font-size: 0.9rem; transition: background 0.15s, border-color 0.15s, transform 0.15s; display: inline-flex; gap: 7px; align-items: baseline; }
.explorer .tab .ch { font-size: 0.72rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.explorer .tab:hover { border-color: var(--accent); transform: translateY(-1px); }
.explorer .tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.explorer .tab[aria-selected="true"] .ch { color: var(--accent-ink); opacity: 0.75; }

.explorer .eq { font-family: "Cambria Math", "STIX Two Math", Georgia, serif; font-size: 1rem; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; margin: 10px 0; overflow-x: auto; white-space: nowrap; }
.explorer .eq div { padding: 1px 0; }
@media (max-width: 600px) { .explorer .eq { white-space: normal; } .explorer h1 { font-size: 1.6rem; } .explorer { padding-top: 4.5rem; } }
.explorer .controls { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 22px; margin-top: 14px; }
.explorer .ctl label { display: flex; justify-content: space-between; gap: 8px; font-size: 0.88rem; color: var(--muted); }
.explorer .ctl label .val { color: var(--text); font-family: ui-monospace, Menlo, monospace; }
.explorer .ctl input[type=range] { width: 100%; accent-color: var(--accent); margin: 6px 0 0; }
.explorer .ctl select, .explorer .ctl input[type=number] { width: 100%; font: inherit; font-size: 0.9rem; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); margin-top: 4px; }
/* the solver options: one strip under the sliders */
.explorer .ctl.opts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  border-top: 1px dashed var(--border); padding-top: 12px; font-size: 0.88rem; color: var(--muted); }
.explorer .ctl.opts label.pick { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-start; }
.explorer .ctl.opts label.pick select { width: auto; margin-top: 0; }
.explorer .ctl.opts label.check { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-start; cursor: pointer; }
.explorer .ctl.opts input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.explorer .ctl.opts .hint { margin: 0; }
.explorer .hint { font-size: 0.8rem; color: var(--faint); margin-top: 3px; }
.explorer textarea#yaml { width: 100%; min-height: 320px; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--panel-2);
  color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px; resize: vertical; tab-size: 2; }
.explorer .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.explorer .row select { font: inherit; font-size: 0.9rem; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.explorer button.primary, .explorer button.secondary { font: inherit; font-size: 0.88rem; padding: 6px 13px; border-radius: 8px; cursor: pointer; transition: filter 0.15s, background 0.15s; }
.explorer button.primary { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); }
.explorer button.primary:hover:not(:disabled) { filter: brightness(1.08); }
.explorer button.secondary { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.explorer button.secondary:hover:not(:disabled) { border-color: var(--accent); }
.explorer button:disabled { opacity: 0.45; cursor: default; }
.explorer .error { color: var(--bad); white-space: pre-wrap; }

/* the status bar stays under the site header while the results scroll */
.explorer #statusbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: sticky; top: 4rem; z-index: 5;
  background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; }
.explorer .chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.explorer .chip.idle { background: var(--panel-2); color: var(--muted); }
.explorer .chip.busy { background: var(--accent-soft); color: var(--accent); }
.explorer .chip.busy::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: explorer-pulse 1s ease-in-out infinite; }
@keyframes explorer-pulse { 50% { opacity: 0.25; } }
.explorer .chip.ok { background: var(--ok-soft); color: var(--ok); }
.explorer .chip.warn { background: var(--warn-soft); color: var(--warn); }
.explorer .chip.bad { background: var(--bad-soft); color: var(--bad); }
.explorer #statustext { color: var(--muted); font-size: 0.88rem; flex: 1 1 260px; }
.explorer #statusbar .buttons { display: flex; gap: 8px; margin-left: auto; }

.explorer #results { transition: opacity 0.2s; }
.explorer #results.stale { opacity: 0.55; }
.explorer #results .panel { animation: explorer-in 0.25s ease-out; }
@keyframes explorer-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.explorer .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.explorer .card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.explorer .card .k { font-size: 0.8rem; color: var(--muted); }
.explorer .card .v { font-size: 1.35rem; font-family: ui-monospace, Menlo, monospace; }
.explorer .card .d { font-size: 0.78rem; color: var(--faint); }
.explorer .delta { font-size: 0.8rem; font-family: inherit; margin-left: 4px; }
.explorer .delta.up { color: var(--bad); } .explorer .delta.down { color: var(--ok); }
.explorer .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.explorer .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 820px) { .explorer .grid3, .explorer .grid2 { grid-template-columns: 1fr; } }
.explorer .plot { width: 100%; height: 300px; }
.explorer .plot.tall { height: 360px; }
.explorer .caption { font-size: 0.85rem; color: var(--muted); margin: 8px 0 0; max-width: 820px; }
.explorer table.diag { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.explorer table.diag th, .explorer table.diag td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.explorer table.diag th { color: var(--muted); font-weight: 600; }
.explorer table.diag td.mono { white-space: nowrap; }
.explorer .tablewrap { overflow-x: auto; }
.explorer details summary { cursor: pointer; color: var(--muted); }
.explorer details.howto { margin: 0 0 18px; max-width: 800px; }
.explorer details.howto p { font-size: 0.92rem; color: var(--muted); margin: 8px 0 0; }
.explorer .notes { color: var(--faint); font-size: 0.82rem; margin-top: 28px; max-width: 820px; }
.explorer .notes p { margin: 0 0 8px; }
.explorer .versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .explorer .versus { grid-template-columns: 1fr; } }
.explorer .versus .side h3 { font-size: 0.95rem; font-weight: 650; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.explorer .swatch { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.explorer .loading-note { color: var(--faint); font-size: 0.85rem; }

/* on a phone the games scroll sideways in one row instead of stacking seven deep */
@media (max-width: 600px) {
  .explorer .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 2px 16px 4px;
    scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); }
  .explorer .tabs::-webkit-scrollbar { display: none; }
  .explorer .tab { flex: 0 0 auto; scroll-snap-align: start; }
  .explorer .facts li { font-size: 0.74rem; padding: 2px 8px; }
  .explorer .panel { padding: 14px; }
  .explorer #statusbar { top: 3.5rem; }
}

/* keyboard focus: a visible ring on everything you can tab to */
.explorer :is(button, select, input, textarea, a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.explorer .tab:focus-visible { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  .explorer *, .explorer *::before { animation: none !important; transition: none !important; }
}
.explorer .plot.stale-plot { opacity: 0.5; transition: opacity 0.2s; }
.explorer #sweeppanel .row select { max-width: 100%; }
.explorer #statusbar .buttons { flex-wrap: wrap; justify-content: flex-end; }
.explorer #statusbar .buttons button { white-space: nowrap; }
@media (max-width: 600px) { .explorer #statusbar .buttons { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-left: 0; } }
/* on a phone the status bar is too tall to keep on screen: it scrolls with the page */
@media (max-width: 600px) { .explorer #statusbar { position: static; } }
/* the idea block: the loop figure beside five paragraphs */
.explorer .howto.idea .ideagrid { display: grid; grid-template-columns: 290px 1fr; gap: 20px; align-items: start; margin-top: 10px; }
@media (max-width: 760px) { .explorer .howto.idea .ideagrid { grid-template-columns: 1fr; } }
.explorer .howto.idea figure { margin: 0; color: var(--text); }
.explorer .howto.idea .loopfig { width: 100%; height: auto; display: block; }
.explorer .howto.idea figcaption { font-size: 0.78rem; color: var(--faint); margin-top: 4px; }
.explorer .howto.idea p { margin: 0 0 10px; }

/* equations typeset by KaTeX (explorer.js typesetEquations); the HTML inside is the fallback */
.explorer .eq .tex.typeset { padding: 3px 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.explorer .eq .katex { font-size: 1.08em; }

/* the pip line among the facts: press it to copy the command */
.explorer .facts li.pip { display: inline-flex; align-items: center; gap: 6px; }
.explorer .facts .copy { font: inherit; background: none; border: 0; padding: 0; cursor: copy; color: inherit; }
.explorer .facts .copy code { font-size: 0.95em; }
.explorer .facts .copy.done code::after { content: "  copied"; color: var(--accent); font-family: inherit; }

/* the "Cite it" block under the notes */
.explorer .cite { margin: 1.4rem 0 0; font-size: 0.88rem; color: var(--muted); }
.explorer .cite summary { cursor: pointer; }
.explorer .cite pre { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem; overflow-x: auto; font-size: 0.78rem; margin-top: 0.7rem; color: var(--text); white-space: pre; }