/* Connect Four: the board beside the whole brain, in the gallery's visual language. */
:root {
  color-scheme: dark;
  --bg: #060b11; --panel: #0b141d; --sunk: #050a0f; --line: #17242f; --line2: #22364a;
  --text: #e3ecf4; --muted: #92a6ba; --faint: #63788d;
  --accent: #59e5cb; --warm: #ff8c5a; --records: #60a5fa;
  --you: #f0596b; --brain: #f5c542;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --stage: clamp(260px, calc(100vh - 292px), 560px);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); }
body { padding: 0 clamp(12px, 1.6vw, 22px) 28px; min-height: 100vh;
  background: radial-gradient(1100px 520px at 16% -8%, rgba(89, 229, 203, 0.075), transparent 62%), radial-gradient(900px 480px at 90% -6%, rgba(96, 165, 250, 0.07), transparent 60%), var(--bg); }
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(89, 229, 203, 0.3); }
a:hover { border-bottom-color: var(--accent); }
code { font: 12.5px var(--mono); color: #cfe0ee; background: #0a1620; border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }

.masthead { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 28px; flex-wrap: wrap; padding: 16px 2px 12px; }
.headline { flex: 1 1 420px; min-width: 0; }
.facts { flex: 0 1 auto; min-width: 0; }
h1 { margin: 0; font-size: clamp(20px, 1.8vw, 25px); font-weight: 650; letter-spacing: -0.012em; }
.lede { margin: 4px 0 0; color: #adbdcc; font-size: 13.5px; max-width: 74ch; }
.facts { color: var(--muted); font: 11.5px/1.55 var(--mono); text-align: right; white-space: pre-line; }

.layout { display: grid; grid-template-columns: calc(var(--stage) + 26px) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.panel { background: linear-gradient(180deg, #0c1620, var(--panel) 120px); border: 1px solid var(--line); border-radius: 16px; padding: 13px; min-width: 0; display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 28px 56px -34px rgba(0, 0, 0, 0.85); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; min-height: 28px; }
.panel-head h2 { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }

.score { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #07101a; border: 1px solid var(--line); font: 11.5px var(--mono); color: var(--muted); }
.chip i { width: 9px; height: 9px; border-radius: 50%; }
.chip b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.chip.you i { background: var(--you); box-shadow: 0 0 8px rgba(240, 89, 107, 0.6); }
.chip.brain i { background: var(--brain); box-shadow: 0 0 8px rgba(245, 197, 66, 0.55); }
.state { font: 600 11px var(--mono); color: var(--muted); background: #0a1620; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; white-space: nowrap; transition: color 0.25s, border-color 0.25s; }
.state.live { color: #8fe19d; border-color: rgba(143, 225, 157, 0.35); }
.state.busy { color: var(--accent); border-color: rgba(89, 229, 203, 0.4); }
.state.busy::before, .state.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; margin-right: 7px; vertical-align: 1px; }
.state.busy::before { animation: pulse 0.9s ease-in-out infinite; }
.state.over { color: var(--warm); border-color: rgba(255, 140, 90, 0.4); }
@keyframes pulse { 50% { opacity: 0.25; transform: scale(0.7); } }

/* -- the board: seven columns of six holes; stones fall in from above */
.board-wrap { position: relative; }
.board { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; aspect-ratio: 7 / 6; border-radius: 14px; padding: 2.2%;
  background: linear-gradient(180deg, #10233a, #0b1a2c); border: 1px solid #1c3350; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 40px -22px rgba(0, 0, 0, 0.9); overflow: hidden; }
.col { position: relative; display: grid; grid-template-rows: repeat(6, 1fr); cursor: pointer; border-radius: 10px; transition: background 0.15s; }
.col.off { cursor: default; }
.col:not(.off):hover { background: rgba(89, 229, 203, 0.07); }
.hole { position: relative; margin: 8%; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #03070c, #070f18 70%); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.75) inset, 0 1px 0 rgba(255, 255, 255, 0.05); }
.stone { position: absolute; inset: 0; border-radius: 50%; animation: drop 0.42s cubic-bezier(0.3, 0, 0.45, 1.35) both; }
.stone.you { background: radial-gradient(circle at 36% 30%, #ff93a0, var(--you) 55%, #a8283a); box-shadow: 0 0 14px rgba(240, 89, 107, 0.35), 0 -2px 4px rgba(0, 0, 0, 0.35) inset; }
.stone.brain { background: radial-gradient(circle at 36% 30%, #ffe48f, var(--brain) 55%, #b88a12); box-shadow: 0 0 14px rgba(245, 197, 66, 0.32), 0 -2px 4px rgba(0, 0, 0, 0.3) inset; }
.stone.last::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: rgba(255, 255, 255, 0.85); opacity: 0.55; }
.stone.win { animation: drop 0.42s cubic-bezier(0.3, 0, 0.45, 1.35) both, win 1.1s ease-in-out 0.3s infinite; }
.stone.dim { opacity: 0.32; filter: saturate(0.6); transition: opacity 0.4s; }
@keyframes drop { from { transform: translateY(calc(-100% * var(--fall, 6) - 40%)); } }
@keyframes win { 50% { box-shadow: 0 0 26px 5px rgba(255, 255, 255, 0.55), 0 -2px 4px rgba(0, 0, 0, 0.3) inset; filter: brightness(1.25); } }
.ghost { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed; display: grid; place-items: center; font: 600 clamp(9px, 1.1vw, 12px) var(--mono); opacity: 0; animation: ghost 0.35s ease-out forwards; }
.ghost.you { border-color: rgba(240, 89, 107, 0.75); color: rgba(255, 170, 180, 0.95); background: rgba(240, 89, 107, 0.1); }
.ghost.brain { border-color: rgba(245, 197, 66, 0.8); color: rgba(255, 228, 150, 0.95); background: rgba(245, 197, 66, 0.1); }
@keyframes ghost { to { opacity: 1; } }

/* -- what the search found for each column */
.columns { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; padding: 10px 2.2% 0; height: 84px; }
.bar { position: relative; margin: 14px 16% 6px; }
.bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line2); }
.bar i { position: absolute; left: 0; right: 0; border-radius: 3px; transition: height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), bottom 0.35s, background 0.25s, opacity 0.3s; }
.bar.up i { bottom: 50%; background: linear-gradient(0deg, rgba(89, 229, 203, 0.35), var(--accent)); }
.bar.down i { top: 50%; background: linear-gradient(180deg, rgba(255, 140, 90, 0.35), var(--warm)); }
.bar.best i { box-shadow: 0 0 12px rgba(89, 229, 203, 0.55); }
.bar.proven::after { content: "proven"; position: absolute; left: 50%; transform: translateX(-50%); bottom: -9px; font: 9px var(--mono); color: var(--faint); letter-spacing: 0.04em; }
.bar b { position: absolute; left: 50%; transform: translateX(-50%); top: -15px; font: 10px var(--mono); color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.3s; }
.bar.shown b { opacity: 1; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; }
button, select { font: inherit; color: var(--text); background: #111e2b; border: 1px solid var(--line2); border-radius: 9px; padding: 6px 12px; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
button:hover, select:hover { background: #172a3b; border-color: #2e4a66; }
.side { color: var(--muted); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.thought { margin-left: auto; font: 11.5px var(--mono); color: var(--faint); text-align: right; }

/* -- the brain */
.mind .scan { position: relative; flex: 1 1 auto; min-height: 340px; border-radius: 12px; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, #071019, var(--sunk)); border: 1px solid #13202c; }
canvas#scan { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 9px; font: 11px var(--mono); color: var(--faint); }
.legend .k { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.k.own { background: var(--brain); } .k.other { background: var(--you); } .k.pos { background: var(--accent); } .k.neg { background: var(--warm); } .k.rec { background: var(--records); }

.colophon { margin: 12px 4px 0; color: var(--faint); font: 11.5px var(--mono); }
.colophon a { color: var(--muted); border-bottom-color: rgba(146, 166, 186, 0.35); }
.colophon a:hover { color: var(--text); }
.heart { color: var(--you); }

/* -- the card */
footer { margin-top: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.card summary { cursor: pointer; padding: 11px 15px; font-weight: 600; font-size: 13px; list-style: none; display: flex; align-items: baseline; gap: 12px; }
.card summary::-webkit-details-marker { display: none; }
.card summary::before { content: "+"; font: 14px var(--mono); color: var(--accent); width: 10px; }
.card[open] summary::before { content: "−"; }
.sub { color: var(--faint); font: 11.5px var(--mono); font-weight: 400; }
.card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 34px; padding: 2px 17px 16px; border-top: 1px solid var(--line); }
.card-body h3 { margin: 15px 0 5px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.card-body p { margin: 0 0 6px; color: #b9c8d6; font-size: 13px; }
.results table { width: 100%; border-collapse: collapse; font: 12px var(--mono); }
.results th { text-align: left; color: var(--faint); font-weight: 500; padding: 3px 8px 5px 0; border-bottom: 1px solid var(--line); }
.results td { padding: 5px 8px 5px 0; border-bottom: 1px solid rgba(23, 36, 47, 0.6); color: #cfdbe6; font-variant-numeric: tabular-nums; }
.results td.n { color: var(--text); }
.results caption { caption-side: bottom; text-align: left; color: var(--faint); font: 11px var(--mono); padding-top: 7px; }

@media (max-width: 900px) {
  :root { --stage: min(100vw - 50px, 520px); }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .mind .scan { min-height: 0; aspect-ratio: 1 / 1.9; }
  .facts { text-align: left; white-space: normal; }
  .card-body { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .stone, .ghost { animation-duration: 0.01s; } .state.busy::before { animation: none; } }