Build Rank feature prioritization tool

2026-05-21 20:03:56 +02:00
commit dec6a844d7
11 changed files with 1894 additions and 0 deletions
@@ -0,0 +1,259 @@
+const state = {
+  ideas: [],
+  milestones: [],
+  activity: [],
+  filter: 'all',
+  search: '',
+  selected: null,
+};
+
+const $ = (sel, root = document) => root.querySelector(sel);
+const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
+const board = $('#board');
+const form = $('#ideaForm');
+const detail = $('#detail');
+const detailForm = $('#detailForm');
+const milestoneSelect = $('#milestoneSelect');
+
+async function api(path, options = {}) {
+  const res = await fetch(path, {
+    headers: { 'Content-Type': 'application/json', ...(options.headers || {}) },
+    ...options,
+    body: options.body && typeof options.body !== 'string' ? JSON.stringify(options.body) : options.body,
+  });
+  const text = await res.text();
+  const data = text ? JSON.parse(text) : null;
+  if (!res.ok) throw new Error(data?.error || res.statusText);
+  return data;
+}
+
+function scoreOf(idea) { return Number(idea.score || 0).toFixed(1); }
+function escapeHtml(value) {
+  return String(value ?? '').replace(/[&<>'"]/g, ch => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[ch]));
+}
+function short(text, len = 126) {
+  const value = String(text || '').trim();
+  return value.length > len ? `${value.slice(0, len - 1)}…` : value;
+}
+function milestoneFor(id) { return state.milestones.find(m => m.id === id) || state.milestones[0]; }
+function sourceKind(idea) { return /agent|rook|iris|eve|claude|gpt|bot/i.test(`${idea.source} ${idea.sourceName}`) ? 'agent' : 'human'; }
+function toast(message) {
+  const el = document.createElement('div');
+  el.className = 'toast';
+  el.textContent = message;
+  document.body.append(el);
+  setTimeout(() => el.remove(), 2200);
+}
+
+function filteredIdeas() {
+  const q = state.search.toLowerCase();
+  return state.ideas.filter(idea => {
+    if (state.filter === 'human' && sourceKind(idea) !== 'human') return false;
+    if (state.filter === 'agent' && sourceKind(idea) !== 'agent') return false;
+    if (state.filter === 'high' && Number(idea.score) < 4) return false;
+    if (!q) return true;
+    return [idea.title, idea.description, idea.sourceName, ...(idea.labels || [])].join(' ').toLowerCase().includes(q);
+  });
+}
+
+function renderStats() {
+  const ideas = state.ideas;
+  const now = ideas.filter(i => i.milestoneId === 'now').length;
+  const agent = ideas.filter(i => sourceKind(i) === 'agent').length;
+  const top = ideas.slice().sort((a, b) => b.score - a.score)[0];
+  $('#stats').innerHTML = [
+    ['Ideas', ideas.length],
+    ['Now', now],
+    ['Agent drops', agent],
+    ['Top score', top ? scoreOf(top) : '—'],
+  ].map(([label, value]) => `<div class="stat"><strong>${value}</strong><span>${label}</span></div>`).join('');
+}
+
+function renderMilestoneOptions() {
+  milestoneSelect.innerHTML = state.milestones.map(m => `<option value="${escapeHtml(m.id)}">${escapeHtml(m.name)}</option>`).join('');
+}
+
+function renderActivity() {
+  $('#activity').innerHTML = state.activity.slice(0, 8).map(item => `<span class="activity-item">${escapeHtml(short(item.message, 52))}</span>`).join('');
+}
+
+function renderBoard() {
+  renderStats();
+  renderMilestoneOptions();
+  renderActivity();
+  const ideas = filteredIdeas();
+  board.innerHTML = state.milestones.map(milestone => {
+    const laneIdeas = ideas
+      .filter(idea => (idea.milestoneId || 'inbox') === milestone.id)
+      .sort((a, b) => (a.rank - b.rank) || (b.score - a.score));
+    const cards = laneIdeas.map(cardHtml).join('') || '<div class="empty">Drop something here</div>';
+    return `<article class="lane" data-milestone="${escapeHtml(milestone.id)}" style="--lane-color:${escapeHtml(milestone.color)}">
+      <div class="lane-head">
+        <div class="lane-title"><h2>${escapeHtml(milestone.name)}</h2><strong>${laneIdeas.length}</strong></div>
+        <p>${escapeHtml(milestone.description || milestone.horizon || '')}</p>
+      </div>
+      <div class="cards">${cards}</div>
+    </article>`;
+  }).join('');
+  bindDrag();
+  bindCards();
+}
+
+function cardHtml(idea) {
+  const tags = [`${sourceKind(idea)}`, idea.sourceName, ...(idea.labels || [])].filter(Boolean).slice(0, 5);
+  return `<article class="card" draggable="true" data-id="${escapeHtml(idea.id)}">
+    <div class="card-top"><h3>${escapeHtml(idea.title)}</h3><div class="score">${scoreOf(idea)}</div></div>
+    ${idea.description ? `<p>${escapeHtml(short(idea.description))}</p>` : ''}
+    <div class="meta">${tags.map(t => `<span class="pill">${escapeHtml(t)}</span>`).join('')}</div>
+    <div class="metrics">
+      <span>I <b>${idea.impact}</b></span><span>E <b>${idea.effort}</b></span><span>C <b>${idea.confidence}</b></span><span>U <b>${idea.urgency}</b></span>
+    </div>
+  </article>`;
+}
+
+function bindCards() {
+  $$('.card').forEach(card => card.addEventListener('click', () => openDetail(card.dataset.id)));
+}
+
+function bindDrag() {
+  $$('.card').forEach(card => {
+    card.addEventListener('dragstart', event => {
+      card.classList.add('dragging');
+      event.dataTransfer.setData('text/plain', card.dataset.id);
+    });
+    card.addEventListener('dragend', () => card.classList.remove('dragging'));
+  });
+  $$('.lane').forEach(lane => {
+    lane.addEventListener('dragover', event => { event.preventDefault(); lane.classList.add('drag-over'); });
+    lane.addEventListener('dragleave', () => lane.classList.remove('drag-over'));
+    lane.addEventListener('drop', async event => {
+      event.preventDefault();
+      lane.classList.remove('drag-over');
+      const id = event.dataTransfer.getData('text/plain');
+      const idea = state.ideas.find(i => i.id === id);
+      const milestoneId = lane.dataset.milestone;
+      if (!idea || idea.milestoneId === milestoneId) return;
+      idea.milestoneId = milestoneId;
+      idea.rank = Date.now() % 100000;
+      renderBoard();
+      try {
+        const updated = await api(`/api/ideas/${id}`, { method: 'PATCH', body: { milestoneId, rank: idea.rank } });
+        replaceIdea(updated);
+        toast(`Moved to ${milestoneFor(milestoneId).name}`);
+      } catch (error) { toast(error.message); await load(); }
+    });
+  });
+}
+
+function replaceIdea(idea) {
+  const idx = state.ideas.findIndex(i => i.id === idea.id);
+  if (idx >= 0) state.ideas[idx] = idea;
+  else state.ideas.unshift(idea);
+  state.ideas.sort((a, b) => b.score - a.score);
+}
+
+function openDetail(id) {
+  const idea = state.ideas.find(i => i.id === id);
+  if (!idea) return;
+  state.selected = idea.id;
+  detailForm.title.value = idea.title;
+  detailForm.description.value = idea.description || '';
+  detailForm.impact.value = idea.impact;
+  detailForm.effort.value = idea.effort;
+  detailForm.confidence.value = idea.confidence;
+  detailForm.urgency.value = idea.urgency;
+  detailForm.notes.value = idea.notes || '';
+  detail.classList.add('open');
+  detail.setAttribute('aria-hidden', 'false');
+}
+function closeDetail() {
+  detail.classList.remove('open');
+  detail.setAttribute('aria-hidden', 'true');
+  state.selected = null;
+}
+
+form.addEventListener('submit', async event => {
+  event.preventDefault();
+  const fd = new FormData(form);
+  const payload = Object.fromEntries(fd.entries());
+  payload.labels = String(payload.labels || '').split(',').map(s => s.trim()).filter(Boolean);
+  payload.source = payload.sourceName ? sourceKind({ sourceName: payload.sourceName }) : 'human';
+  payload.status = payload.milestoneId === 'inbox' ? 'inbox' : 'planned';
+  try {
+    const idea = await api('/api/ideas', { method: 'POST', body: payload });
+    replaceIdea(idea);
+    form.reset();
+    form.impact.value = 7; form.effort.value = 4; form.confidence.value = 6; form.urgency.value = 5;
+    renderBoard();
+    toast('Captured');
+  } catch (error) { toast(error.message); }
+});
+
+detailForm.addEventListener('submit', async event => {
+  event.preventDefault();
+  if (!state.selected) return;
+  const payload = Object.fromEntries(new FormData(detailForm).entries());
+  try {
+    const idea = await api(`/api/ideas/${state.selected}`, { method: 'PATCH', body: payload });
+    replaceIdea(idea);
+    closeDetail();
+    renderBoard();
+    toast('Saved');
+  } catch (error) { toast(error.message); }
+});
+
+$('#archiveIdea').addEventListener('click', async () => {
+  if (!state.selected) return;
+  try {
+    await api(`/api/ideas/${state.selected}`, { method: 'PATCH', body: { archived: true } });
+    state.ideas = state.ideas.filter(i => i.id !== state.selected);
+    closeDetail();
+    renderBoard();
+    toast('Archived');
+  } catch (error) { toast(error.message); }
+});
+
+$('#closeDetail').addEventListener('click', closeDetail);
+$('#refresh').addEventListener('click', load);
+$('#search').addEventListener('input', event => { state.search = event.target.value; renderBoard(); });
+$('#filters').addEventListener('click', event => {
+  const button = event.target.closest('button[data-filter]');
+  if (!button) return;
+  state.filter = button.dataset.filter;
+  $$('#filters button').forEach(b => b.classList.toggle('active', b === button));
+  renderBoard();
+});
+$('#addMilestone').addEventListener('click', async () => {
+  const name = prompt('Milestone name');
+  if (!name) return;
+  const horizon = prompt('Horizon / timing', 'Custom') || '';
+  const colors = ['#8cf7ff', '#f8ff73', '#a78bfa', '#6ee7b7', '#ff5e7a'];
+  try {
+    const milestone = await api('/api/milestones', { method: 'POST', body: { name, horizon, color: colors[state.milestones.length % colors.length], position: state.milestones.length * 10 } });
+    state.milestones.push(milestone);
+    renderBoard();
+    toast('Milestone added');
+  } catch (error) { toast(error.message); }
+});
+
+document.addEventListener('keydown', event => {
+  if (event.key === '/' && !['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement.tagName)) {
+    event.preventDefault();
+    $('#title').focus();
+  }
+  if (event.key === 'Escape') closeDetail();
+});
+
+async function load() {
+  try {
+    const data = await api('/api/bootstrap');
+    state.ideas = data.ideas || [];
+    state.milestones = data.milestones || [];
+    state.activity = data.activity || [];
+    renderBoard();
+  } catch (error) {
+    board.innerHTML = `<div class="empty">Backend is grumpy: ${escapeHtml(error.message)}</div>`;
+  }
+}
+
+load();
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#050712" />
+    <title>Rank — Feature Priorities</title>
+    <link rel="stylesheet" href="/styles.css?v=rank-1" />
+  </head>
+  <body>
+    <div class="noise"></div>
+    <main class="shell">
+      <header class="hero">
+        <div>
+          <p class="eyebrow">rank.friborg.uk · feature triage</p>
+          <h1>Drop ideas. Score fast. Drag into reality.</h1>
+          <p class="subcopy">A sharp prioritization board for humans and agents. No ceremony, no rounded-corner startup soup.</p>
+        </div>
+        <div class="stats" id="stats"></div>
+      </header>
+
+      <section class="capture-panel" aria-label="Quick capture">
+        <form id="ideaForm" autocomplete="off">
+          <div class="capture-main">
+            <label for="title">Idea</label>
+            <input id="title" name="title" maxlength="180" placeholder="Press / then type the feature that keeps nagging at you" required />
+          </div>
+          <div class="capture-grid">
+            <label>Description<textarea id="description" name="description" rows="2" placeholder="Optional: what it does, why it matters, ugly constraints…"></textarea></label>
+            <label>Labels<input id="labels" name="labels" placeholder="scattermind, revenue, ux" /></label>
+            <label>Source<input id="sourceName" name="sourceName" placeholder="Jimmi, Rook, Iris…" /></label>
+            <label>Milestone<select id="milestoneSelect" name="milestoneId"></select></label>
+          </div>
+          <div class="score-row">
+            <label>Impact <input type="range" min="0" max="10" value="7" name="impact" /></label>
+            <label>Effort <input type="range" min="1" max="10" value="4" name="effort" /></label>
+            <label>Confidence <input type="range" min="0" max="10" value="6" name="confidence" /></label>
+            <label>Urgency <input type="range" min="0" max="10" value="5" name="urgency" /></label>
+            <button type="submit">Capture ↵</button>
+          </div>
+        </form>
+      </section>
+
+      <section class="toolbar">
+        <div class="tabs" id="filters">
+          <button data-filter="all" class="active">All</button>
+          <button data-filter="human">Human</button>
+          <button data-filter="agent">Agent</button>
+          <button data-filter="high">High score</button>
+        </div>
+        <div class="tools">
+          <input id="search" placeholder="Filter ideas" />
+          <button id="addMilestone">+ Milestone</button>
+          <button id="refresh">Refresh</button>
+        </div>
+      </section>
+
+      <section id="board" class="board" aria-label="Priority board"></section>
+
+      <aside class="detail" id="detail" aria-hidden="true">
+        <form id="detailForm">
+          <div class="detail-head">
+            <p class="eyebrow">selected idea</p>
+            <button type="button" id="closeDetail">×</button>
+          </div>
+          <input name="title" class="detail-title" />
+          <textarea name="description" rows="8" placeholder="Description"></textarea>
+          <div class="detail-sliders">
+            <label>Impact <input type="number" min="0" max="10" name="impact" /></label>
+            <label>Effort <input type="number" min="1" max="10" name="effort" /></label>
+            <label>Confidence <input type="number" min="0" max="10" name="confidence" /></label>
+            <label>Urgency <input type="number" min="0" max="10" name="urgency" /></label>
+          </div>
+          <label>Notes<textarea name="notes" rows="5" placeholder="Decision notes, objections, cut lines…"></textarea></label>
+          <div class="detail-actions">
+            <button type="submit">Save</button>
+            <button type="button" id="archiveIdea">Archive</button>
+          </div>
+        </form>
+      </aside>
+
+      <footer>
+        <div id="activity"></div>
+        <p>Keyboard: <kbd>/</kbd> capture · <kbd>Esc</kbd> close · drag cards between milestones.</p>
+      </footer>
+    </main>
+    <script src="/app.js?v=rank-1" type="module"></script>
+  </body>
+</html>
@@ -0,0 +1,108 @@
+:root {
+  color-scheme: dark;
+  --bg: #050712;
+  --panel: rgba(9, 14, 31, .74);
+  --panel-strong: rgba(13, 22, 45, .92);
+  --line: rgba(159, 231, 255, .22);
+  --line-hot: rgba(248, 255, 115, .55);
+  --text: #eff8ff;
+  --muted: #8fa4b8;
+  --cyan: #8cf7ff;
+  --yellow: #f8ff73;
+  --violet: #a78bfa;
+  --green: #6ee7b7;
+  --danger: #ff5e7a;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
+body {
+  background:
+    radial-gradient(circle at 18% 8%, rgba(140, 247, 255, .22), transparent 31rem),
+    radial-gradient(circle at 76% 6%, rgba(167, 139, 250, .20), transparent 34rem),
+    linear-gradient(135deg, #050712 0%, #09111f 46%, #03040a 100%);
+  overflow-x: hidden;
+}
+button, input, textarea, select { font: inherit; border-radius: 0; }
+button { cursor: pointer; color: var(--text); background: #101a31; border: 1px solid var(--line); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 800; transition: .16s ease; }
+button:hover { border-color: var(--yellow); box-shadow: 0 0 28px rgba(248,255,115,.16); transform: translateY(-1px); }
+input, textarea, select { width: 100%; background: rgba(1, 4, 11, .72); border: 1px solid var(--line); color: var(--text); padding: .8rem .9rem; outline: none; }
+input:focus, textarea:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(140, 247, 255, .16), 0 0 30px rgba(140, 247, 255, .09); }
+textarea { resize: vertical; }
+label { display: grid; gap: .42rem; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; }
+kbd { border: 1px solid var(--line); padding: .08rem .32rem; background: rgba(255,255,255,.05); }
+.noise { pointer-events: none; position: fixed; inset: 0; opacity: .12; mix-blend-mode: screen; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle at 50% 0%, black, transparent 80%); }
+.shell { width: min(1720px, calc(100vw - 32px)); margin: 0 auto; padding: 34px 0 60px; position: relative; }
+.hero { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; margin-bottom: 24px; }
+.eyebrow { color: var(--cyan); text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 900; margin: 0 0 .7rem; }
+h1 { font-size: clamp(2.6rem, 5vw, 6.8rem); line-height: .86; letter-spacing: -.07em; margin: 0; max-width: 1050px; text-transform: uppercase; }
+.subcopy { max-width: 760px; color: var(--muted); font-size: 1.02rem; line-height: 1.55; }
+.stats { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(22px); min-width: 320px; }
+.stat { padding: 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
+.stat:nth-child(2n) { border-right: 0; }
+.stat strong { display: block; font-size: 2.1rem; letter-spacing: -.05em; }
+.stat span { color: var(--muted); text-transform: uppercase; font-size: .68rem; letter-spacing: .12em; }
+.capture-panel, .toolbar, .lane, .detail, footer { border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(24px); box-shadow: 0 28px 120px rgba(0,0,0,.22); }
+.capture-panel { padding: 16px; margin-bottom: 16px; position: sticky; top: 8px; z-index: 5; }
+.capture-main { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 12px; }
+.capture-main input { font-size: 1.25rem; font-weight: 850; letter-spacing: -.02em; padding: 1rem; }
+.capture-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; margin-top: 12px; }
+.score-row { display: grid; grid-template-columns: repeat(4, 1fr) 160px; gap: 12px; align-items: end; margin-top: 12px; }
+.score-row button { height: 49px; background: linear-gradient(90deg, rgba(140,247,255,.18), rgba(248,255,115,.2)); border-color: var(--line-hot); }
+input[type="range"] { accent-color: var(--yellow); padding: 0; height: 32px; }
+.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 10px; margin-bottom: 16px; }
+.tabs, .tools { display: flex; gap: 8px; align-items: center; }
+.tabs button.active { background: var(--yellow); color: #050712; border-color: var(--yellow); }
+.tools input { min-width: 260px; }
+.board { display: grid; grid-template-columns: repeat(4, minmax(280px, 1fr)); gap: 16px; align-items: start; }
+.lane { min-height: 520px; position: relative; overflow: hidden; }
+.lane::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--lane-color, var(--cyan)); box-shadow: 0 0 32px var(--lane-color, var(--cyan)); }
+.lane.drag-over { border-color: var(--yellow); box-shadow: 0 0 0 1px rgba(248,255,115,.3), 0 30px 120px rgba(248,255,115,.10); }
+.lane-head { padding: 16px; border-bottom: 1px solid var(--line); display: grid; gap: .45rem; }
+.lane-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
+.lane-title h2 { margin: 0; text-transform: uppercase; letter-spacing: -.04em; font-size: 1.55rem; }
+.lane-title strong { color: var(--lane-color, var(--cyan)); font-size: 1.8rem; }
+.lane-head p { margin: 0; color: var(--muted); font-size: .85rem; min-height: 2.4em; }
+.cards { display: grid; gap: 10px; padding: 12px; }
+.card { border: 1px solid rgba(255,255,255,.12); background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); padding: 12px; display: grid; gap: 10px; cursor: grab; position: relative; }
+.card:hover { border-color: var(--cyan); background: linear-gradient(145deg, rgba(140,247,255,.11), rgba(255,255,255,.03)); }
+.card:active { cursor: grabbing; }
+.card.dragging { opacity: .35; }
+.card-top { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
+.card h3 { margin: 0; font-size: 1rem; line-height: 1.15; letter-spacing: -.02em; }
+.score { display: grid; place-items: center; min-width: 48px; height: 38px; border: 1px solid var(--line-hot); color: var(--yellow); font-weight: 950; background: rgba(248,255,115,.06); }
+.card p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.35; }
+.meta { display: flex; flex-wrap: wrap; gap: 6px; }
+.pill { border: 1px solid rgba(255,255,255,.13); padding: .2rem .38rem; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
+.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.1); padding-top: 8px; gap: 6px; }
+.metrics span { color: var(--muted); font-size: .64rem; text-transform: uppercase; }
+.metrics b { display: block; color: var(--text); font-size: .9rem; }
+.detail { position: fixed; z-index: 20; top: 0; right: 0; height: 100vh; width: min(520px, 100vw); padding: 18px; transform: translateX(105%); transition: transform .18s ease; }
+.detail.open { transform: translateX(0); }
+.detail-head { display: flex; justify-content: space-between; align-items: center; }
+.detail-head button { width: 40px; height: 40px; font-size: 1.4rem; }
+.detail form { display: grid; gap: 12px; }
+.detail-title { font-size: 1.55rem; font-weight: 900; letter-spacing: -.04em; }
+.detail-sliders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
+.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+#archiveIdea { border-color: rgba(255,94,122,.5); color: #ffd5dd; }
+footer { margin-top: 16px; padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 1rem; color: var(--muted); font-size: .82rem; }
+#activity { display: flex; gap: 8px; flex-wrap: wrap; }
+.activity-item { border: 1px solid rgba(255,255,255,.1); padding: .32rem .48rem; }
+.empty { border: 1px dashed rgba(255,255,255,.14); color: var(--muted); padding: 1.2rem; text-align: center; }
+.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; background: #f8ff73; color: #050712; padding: .8rem 1rem; border: 1px solid #fff; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
+@media (max-width: 1180px) {
+  .hero { grid-template-columns: 1fr; }
+  .stats { min-width: 0; }
+  .board { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
+  .capture-grid, .score-row { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 720px) {
+  .shell { width: min(100vw - 18px, 100%); padding-top: 16px; }
+  .board, .capture-grid, .score-row, .capture-main, footer { grid-template-columns: 1fr; }
+  .toolbar { align-items: stretch; flex-direction: column; }
+  .tabs, .tools { width: 100%; overflow-x: auto; }
+  .tools input { min-width: 180px; }
+  .capture-panel { position: relative; top: auto; }
+}