:root{
  --ink:#141210; --ink-2:#2a2622; --bone:#f3eee4; --bone-2:#e8e1d3; --paper:#fbf8f2;
  --verm:#e8452c; --verm-soft:#fbe3dc; --acid:#c7f43a; --muted:#6f675d; --line:#d9d0c0;
  --blue:#2f5bd3; --blue-soft:#e3eafb;
  --display:'Archivo', 'Arial Black', system-ui, sans-serif;
  --serif:'Instrument Serif', Georgia, serif;
  --body:'Inter Tight', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bone);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.serif{font-family:var(--serif);font-style:italic;font-weight:400}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--bone);border:0;border-radius:999px;padding:16px 26px;font:600 16px var(--body);cursor:pointer;text-decoration:none;transition:transform .15s, background .15s}
.btn:hover{background:var(--verm);transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:default;transform:none;background:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bone)}
.tag{display:inline-block;font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:var(--acid);color:var(--ink)}

/* ---------- Standpoint Grid ---------- */
.sg-wrap{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:14px}
.sg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sg{display:grid;gap:3px;min-width:820px}
.sg > div{border-radius:6px;font-size:11.5px;line-height:1.25}
.sg-corner{color:var(--muted);font-size:10px !important;padding:6px;align-self:end}
.sg-colhead{background:var(--ink);color:var(--bone);padding:8px 6px;font-weight:600;text-align:center;display:flex;align-items:center;justify-content:center}
.sg-rowhead{background:var(--ink-2);color:var(--bone);padding:8px;font-weight:600;display:flex;align-items:center}
.sg-cell{background:var(--bone);min-height:46px;padding:4px;display:flex;flex-wrap:wrap;gap:3px;align-content:center;justify-content:center}
.sg-cell.taken{background:var(--bone-2)}
.sg-cell.mine{background:var(--verm-soft);box-shadow:inset 0 0 0 2px var(--verm)}
.sg-chip{display:inline-block;padding:3px 6px;border-radius:5px;font-size:10.5px;font-weight:600;white-space:nowrap}
.sg-chip.known{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.sg-chip.rival{background:var(--blue);color:#fff}
.sg-chip.you{background:var(--verm);color:#fff;font-size:11.5px}
.sg-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.sg-leg{display:inline-flex;align-items:center;gap:6px}
.sg-dot{width:12px;height:12px;border-radius:3px;display:inline-block}
.sg-dot.known{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.sg-dot.rival{background:var(--blue)}
.sg-dot.you{background:var(--verm)}
.sg-dot.empty{background:var(--bone);box-shadow:inset 0 0 0 1px var(--line)}