/* ---------------------------------------------------------------------------
   kmart-verify — pixel poker table
   Implements the handoff design system. 4px grid, no radius, no blur, no
   third-party requests. Sprites are inline SVG data: URIs generated from the
   handoff's 8x8 pixel maps (CSP allows img-src 'self' data:).
--------------------------------------------------------------------------- */

:root {
  /* Felt / rail */
  --felt-shadow: #0D1A17;
  --felt-dark: #14332B;
  --felt: #1C443A;
  --felt-lit: #245245;
  --felt-dither: #1A4037;
  --rail-dark: #3A2418;
  --rail: #5C3A24;
  --rail-lit: #8A5C38;
  --rail-deep: #2A1A11;

  /* Text / card */
  --ink: #201A16;
  --ivory: #F2E8D5;
  --bone: #CFC0A4;
  --steel: #6B7A74;
  --brass: #C9A227;
  --brass-lit: #E2BB3C;
  --brass-dark: #8F721A;
  --ink-body: #3D3529;
  --ink-micro: #7A6F5F;
  --tab-inactive: #A89A80;

  /* Chips (also the four-colour deck) */
  --chip-white: #E8E4DC;
  --chip-red: #B5303A;
  --chip-blue: #2F5AA8;
  --chip-green: #2F7D4F;
  --chip-black: #23252B;
  --chip-purple: #6B3FA0;
  --chip-dead: #6A6A68;
  --chip-dead-lit: #8F8F8C;
  --chip-dead-dark: #454543;
  --green-lit: #3F9C63;

  --alert: #D9483F;
  --hatch-dark: #A83229;
  --row-unproven: #1B2B2A;
  --card-back: #8C2F36;

  --mono: ui-monospace, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root {
  --sp-spade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='2' height='1' fill='%23201A16'/%3E%3Crect x='2' y='1' width='4' height='1' fill='%23201A16'/%3E%3Crect x='1' y='2' width='6' height='1' fill='%23201A16'/%3E%3Crect x='0' y='3' width='8' height='1' fill='%23201A16'/%3E%3Crect x='0' y='4' width='8' height='1' fill='%23201A16'/%3E%3Crect x='0' y='5' width='2' height='1' fill='%23201A16'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%23201A16'/%3E%3Crect x='6' y='5' width='2' height='1' fill='%23201A16'/%3E%3Crect x='3' y='6' width='2' height='1' fill='%23201A16'/%3E%3Crect x='2' y='7' width='4' height='1' fill='%23201A16'/%3E%3C/svg%3E");
  --sp-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='2' height='1' fill='%23B5303A'/%3E%3Crect x='5' y='0' width='2' height='1' fill='%23B5303A'/%3E%3Crect x='0' y='1' width='8' height='1' fill='%23B5303A'/%3E%3Crect x='0' y='2' width='8' height='1' fill='%23B5303A'/%3E%3Crect x='0' y='3' width='8' height='1' fill='%23B5303A'/%3E%3Crect x='1' y='4' width='6' height='1' fill='%23B5303A'/%3E%3Crect x='2' y='5' width='4' height='1' fill='%23B5303A'/%3E%3Crect x='3' y='6' width='2' height='1' fill='%23B5303A'/%3E%3C/svg%3E");
  --sp-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='2' height='1' fill='%232F5AA8'/%3E%3Crect x='2' y='1' width='4' height='1' fill='%232F5AA8'/%3E%3Crect x='1' y='2' width='6' height='1' fill='%232F5AA8'/%3E%3Crect x='0' y='3' width='8' height='1' fill='%232F5AA8'/%3E%3Crect x='0' y='4' width='8' height='1' fill='%232F5AA8'/%3E%3Crect x='1' y='5' width='6' height='1' fill='%232F5AA8'/%3E%3Crect x='2' y='6' width='4' height='1' fill='%232F5AA8'/%3E%3Crect x='3' y='7' width='2' height='1' fill='%232F5AA8'/%3E%3C/svg%3E");
  --sp-club: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='2' height='1' fill='%232F7D4F'/%3E%3Crect x='2' y='1' width='4' height='1' fill='%232F7D4F'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%232F7D4F'/%3E%3Crect x='1' y='3' width='6' height='1' fill='%232F7D4F'/%3E%3Crect x='0' y='4' width='8' height='1' fill='%232F7D4F'/%3E%3Crect x='1' y='5' width='6' height='1' fill='%232F7D4F'/%3E%3Crect x='3' y='6' width='2' height='1' fill='%232F7D4F'/%3E%3Crect x='2' y='7' width='4' height='1' fill='%232F7D4F'/%3E%3C/svg%3E");
  --sp-failx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='2' height='1' fill='%23D9483F'/%3E%3Crect x='6' y='0' width='2' height='1' fill='%23D9483F'/%3E%3Crect x='1' y='1' width='2' height='1' fill='%23D9483F'/%3E%3Crect x='5' y='1' width='2' height='1' fill='%23D9483F'/%3E%3Crect x='2' y='2' width='4' height='1' fill='%23D9483F'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%23D9483F'/%3E%3Crect x='2' y='4' width='4' height='1' fill='%23D9483F'/%3E%3Crect x='1' y='5' width='2' height='1' fill='%23D9483F'/%3E%3Crect x='5' y='5' width='2' height='1' fill='%23D9483F'/%3E%3Crect x='0' y='6' width='2' height='1' fill='%23D9483F'/%3E%3Crect x='6' y='6' width='2' height='1' fill='%23D9483F'/%3E%3C/svg%3E");
  --sp-timer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='4' height='1' fill='%23C9A227'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23C9A227'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%23C9A227'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%23C9A227'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23C9A227'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23C9A227'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23C9A227'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23C9A227'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23C9A227'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23C9A227'/%3E%3Crect x='3' y='4' width='3' height='1' fill='%23C9A227'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23C9A227'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23C9A227'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%23C9A227'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23C9A227'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23C9A227'/%3E%3Crect x='2' y='7' width='4' height='1' fill='%23C9A227'/%3E%3C/svg%3E");
  --sp-check-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='7' y='1' width='1' height='1' fill='%23201A16'/%3E%3Crect x='6' y='2' width='2' height='1' fill='%23201A16'/%3E%3Crect x='5' y='3' width='2' height='1' fill='%23201A16'/%3E%3Crect x='0' y='4' width='2' height='1' fill='%23201A16'/%3E%3Crect x='4' y='4' width='2' height='1' fill='%23201A16'/%3E%3Crect x='1' y='5' width='4' height='1' fill='%23201A16'/%3E%3Crect x='2' y='6' width='2' height='1' fill='%23201A16'/%3E%3C/svg%3E");
  --sp-check-ivory: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='7' y='1' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='6' y='2' width='2' height='1' fill='%23F2E8D5'/%3E%3Crect x='5' y='3' width='2' height='1' fill='%23F2E8D5'/%3E%3Crect x='0' y='4' width='2' height='1' fill='%23F2E8D5'/%3E%3Crect x='4' y='4' width='2' height='1' fill='%23F2E8D5'/%3E%3Crect x='1' y='5' width='4' height='1' fill='%23F2E8D5'/%3E%3Crect x='2' y='6' width='2' height='1' fill='%23F2E8D5'/%3E%3C/svg%3E");
  --sp-chip-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='1' height='1' fill='%23E8E4DC'/%3E%3Crect x='3' y='0' width='2' height='1' fill='%2323252B'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%23E8E4DC'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%23E8E4DC'/%3E%3Crect x='0' y='2' width='3' height='1' fill='%23E8E4DC'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%23F7F4EE'/%3E%3Crect x='5' y='2' width='3' height='1' fill='%23E8E4DC'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%2323252B'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23E8E4DC'/%3E%3Crect x='2' y='3' width='4' height='1' fill='%23F7F4EE'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%23E8E4DC'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%2323252B'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%2323252B'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%23E8E4DC'/%3E%3Crect x='2' y='4' width='4' height='1' fill='%23F7F4EE'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%23E8E4DC'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%2323252B'/%3E%3Crect x='0' y='5' width='3' height='1' fill='%23E8E4DC'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%23F7F4EE'/%3E%3Crect x='5' y='5' width='3' height='1' fill='%23E8E4DC'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%23E8E4DC'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%23E8E4DC'/%3E%3Crect x='3' y='7' width='2' height='1' fill='%2323252B'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%23E8E4DC'/%3E%3C/svg%3E");
  --sp-chip-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='1' height='1' fill='%23B5303A'/%3E%3Crect x='3' y='0' width='2' height='1' fill='%23F2E8D5'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%23B5303A'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%23B5303A'/%3E%3Crect x='0' y='2' width='3' height='1' fill='%23B5303A'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%23CF4B53'/%3E%3Crect x='5' y='2' width='3' height='1' fill='%23B5303A'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23B5303A'/%3E%3Crect x='2' y='3' width='4' height='1' fill='%23CF4B53'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%23B5303A'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%23B5303A'/%3E%3Crect x='2' y='4' width='4' height='1' fill='%23CF4B53'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%23B5303A'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='0' y='5' width='3' height='1' fill='%23B5303A'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%23CF4B53'/%3E%3Crect x='5' y='5' width='3' height='1' fill='%23B5303A'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%23B5303A'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%23B5303A'/%3E%3Crect x='3' y='7' width='2' height='1' fill='%23F2E8D5'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%23B5303A'/%3E%3C/svg%3E");
  --sp-chip-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='1' height='1' fill='%232F5AA8'/%3E%3Crect x='3' y='0' width='2' height='1' fill='%23F2E8D5'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%232F5AA8'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%232F5AA8'/%3E%3Crect x='0' y='2' width='3' height='1' fill='%232F5AA8'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%234373C4'/%3E%3Crect x='5' y='2' width='3' height='1' fill='%232F5AA8'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%232F5AA8'/%3E%3Crect x='2' y='3' width='4' height='1' fill='%234373C4'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%232F5AA8'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%232F5AA8'/%3E%3Crect x='2' y='4' width='4' height='1' fill='%234373C4'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%232F5AA8'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='0' y='5' width='3' height='1' fill='%232F5AA8'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%234373C4'/%3E%3Crect x='5' y='5' width='3' height='1' fill='%232F5AA8'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%232F5AA8'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%232F5AA8'/%3E%3Crect x='3' y='7' width='2' height='1' fill='%23F2E8D5'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%232F5AA8'/%3E%3C/svg%3E");
  --sp-chip-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='1' height='1' fill='%232F7D4F'/%3E%3Crect x='3' y='0' width='2' height='1' fill='%23F2E8D5'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%232F7D4F'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%232F7D4F'/%3E%3Crect x='0' y='2' width='3' height='1' fill='%232F7D4F'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%233F9C63'/%3E%3Crect x='5' y='2' width='3' height='1' fill='%232F7D4F'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%232F7D4F'/%3E%3Crect x='2' y='3' width='4' height='1' fill='%233F9C63'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%232F7D4F'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%232F7D4F'/%3E%3Crect x='2' y='4' width='4' height='1' fill='%233F9C63'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%232F7D4F'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='0' y='5' width='3' height='1' fill='%232F7D4F'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%233F9C63'/%3E%3Crect x='5' y='5' width='3' height='1' fill='%232F7D4F'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%232F7D4F'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%232F7D4F'/%3E%3Crect x='3' y='7' width='2' height='1' fill='%23F2E8D5'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%232F7D4F'/%3E%3C/svg%3E");
  --sp-chip-k: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='1' height='1' fill='%2323252B'/%3E%3Crect x='3' y='0' width='2' height='1' fill='%23F2E8D5'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%2323252B'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%2323252B'/%3E%3Crect x='0' y='2' width='3' height='1' fill='%2323252B'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%2333363E'/%3E%3Crect x='5' y='2' width='3' height='1' fill='%2323252B'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%2323252B'/%3E%3Crect x='2' y='3' width='4' height='1' fill='%2333363E'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%2323252B'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%2323252B'/%3E%3Crect x='2' y='4' width='4' height='1' fill='%2333363E'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%2323252B'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='0' y='5' width='3' height='1' fill='%2323252B'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%2333363E'/%3E%3Crect x='5' y='5' width='3' height='1' fill='%2323252B'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%2323252B'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%2323252B'/%3E%3Crect x='3' y='7' width='2' height='1' fill='%23F2E8D5'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%2323252B'/%3E%3C/svg%3E");
  --sp-chip-p: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='1' height='1' fill='%236B3FA0'/%3E%3Crect x='3' y='0' width='2' height='1' fill='%23F2E8D5'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%236B3FA0'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%236B3FA0'/%3E%3Crect x='0' y='2' width='3' height='1' fill='%236B3FA0'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%238557C0'/%3E%3Crect x='5' y='2' width='3' height='1' fill='%236B3FA0'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%236B3FA0'/%3E%3Crect x='2' y='3' width='4' height='1' fill='%238557C0'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%236B3FA0'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%236B3FA0'/%3E%3Crect x='2' y='4' width='4' height='1' fill='%238557C0'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%236B3FA0'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23F2E8D5'/%3E%3Crect x='0' y='5' width='3' height='1' fill='%236B3FA0'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%238557C0'/%3E%3Crect x='5' y='5' width='3' height='1' fill='%236B3FA0'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%236B3FA0'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%236B3FA0'/%3E%3Crect x='3' y='7' width='2' height='1' fill='%23F2E8D5'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%236B3FA0'/%3E%3C/svg%3E");
  --sp-chip-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='1' height='1' fill='%236A6A68'/%3E%3Crect x='3' y='0' width='2' height='1' fill='%238F8F8C'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%236A6A68'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%236A6A68'/%3E%3Crect x='0' y='2' width='3' height='1' fill='%236A6A68'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%238F8F8C'/%3E%3Crect x='5' y='2' width='3' height='1' fill='%236A6A68'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%238F8F8C'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%236A6A68'/%3E%3Crect x='2' y='3' width='4' height='1' fill='%238F8F8C'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%236A6A68'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%238F8F8C'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%238F8F8C'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%236A6A68'/%3E%3Crect x='2' y='4' width='4' height='1' fill='%238F8F8C'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%236A6A68'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%238F8F8C'/%3E%3Crect x='0' y='5' width='3' height='1' fill='%236A6A68'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%238F8F8C'/%3E%3Crect x='5' y='5' width='3' height='1' fill='%236A6A68'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%236A6A68'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%236A6A68'/%3E%3Crect x='3' y='7' width='2' height='1' fill='%238F8F8C'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%236A6A68'/%3E%3C/svg%3E");
  --sp-dealer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='4' height='1' fill='%23E8E4DC'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%23E8E4DC'/%3E%3Crect x='0' y='2' width='2' height='1' fill='%23E8E4DC'/%3E%3Crect x='2' y='2' width='3' height='1' fill='%23201A16'/%3E%3Crect x='5' y='2' width='3' height='1' fill='%23E8E4DC'/%3E%3Crect x='0' y='3' width='2' height='1' fill='%23E8E4DC'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23201A16'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%23201A16'/%3E%3Crect x='6' y='3' width='2' height='1' fill='%23E8E4DC'/%3E%3Crect x='0' y='4' width='2' height='1' fill='%23E8E4DC'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23201A16'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%23201A16'/%3E%3Crect x='6' y='4' width='2' height='1' fill='%23E8E4DC'/%3E%3Crect x='0' y='5' width='2' height='1' fill='%23E8E4DC'/%3E%3Crect x='2' y='5' width='3' height='1' fill='%23201A16'/%3E%3Crect x='5' y='5' width='3' height='1' fill='%23E8E4DC'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%23E8E4DC'/%3E%3Crect x='2' y='7' width='4' height='1' fill='%23E8E4DC'/%3E%3C/svg%3E");
}

/* --- Base ---------------------------------------------------------------- */

* { box-sizing: border-box; }

/* A class that sets display would otherwise beat the browser's own [hidden]
   rule, which is how the minted-result panel ended up visible before anything
   had been minted. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 24px;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--ivory);
  background: var(--felt-shadow);
}

h1, h2, h3, p, pre, ol, ul { margin: 0; }
.hidden { display: none !important; }

/* --- Sprites -------------------------------------------------------------- */

.sp {
  display: inline-block;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}

.sp-12 { width: 12px; height: 12px; }
.sp-16 { width: 16px; height: 16px; }
.sp-20 { width: 20px; height: 20px; }
.sp-24 { width: 24px; height: 24px; }
.sp-32 { width: 32px; height: 32px; }
.sp-48 { width: 48px; height: 48px; }

.sp-spade   { background-image: var(--sp-spade); }
.sp-heart   { background-image: var(--sp-heart); }
.sp-diamond { background-image: var(--sp-diamond); }
.sp-club    { background-image: var(--sp-club); }
.sp-timer   { background-image: var(--sp-timer); }
.sp-failx   { background-image: var(--sp-failx); }
.sp-dealer  { background-image: var(--sp-dealer); }
.sp-cw { background-image: var(--sp-chip-w); }
.sp-cr { background-image: var(--sp-chip-r); }
.sp-cb { background-image: var(--sp-chip-b); }
.sp-cg { background-image: var(--sp-chip-g); }
.sp-ck { background-image: var(--sp-chip-k); }
.sp-cp { background-image: var(--sp-chip-p); }
.sp-cd { background-image: var(--sp-chip-d); }

/* --- Rail and felt -------------------------------------------------------- */

.rail {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
  background: var(--rail);
  box-shadow:
    inset 4px 4px 0 var(--rail-lit),
    inset -4px -4px 0 var(--rail-dark),
    8px 8px 0 var(--felt-shadow);
}

.felt {
  padding: 32px;
  background-color: var(--felt);
  background-image:
    repeating-linear-gradient(0deg, var(--felt) 0 4px, var(--felt-dither) 4px 8px),
    repeating-linear-gradient(90deg, rgba(36, 82, 69, 0.45) 0 4px, transparent 4px 8px);
  box-shadow: inset 4px 4px 0 var(--felt-shadow), inset -4px -4px 0 var(--felt-lit);
}

/* Chip rack under the felt, still on the rail */
.rack { display: flex; gap: 4px; justify-content: center; padding-top: 16px; }
.rack i { display: block; width: 56px; height: 16px; background: var(--rail-dark); }

/* --- Type ----------------------------------------------------------------- */

.label {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brass);
}

.micro {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--steel);
}

.body-s { font-size: 14px; line-height: 20px; color: var(--bone); }
.data { font-family: var(--mono); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }

/* --- Controls ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 16px 20px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ivory);
  background: var(--rail);
  border: 0;
  border-radius: 0;
  box-shadow: inset 4px 4px 0 var(--rail-lit), inset -4px -4px 0 var(--rail-dark), 4px 4px 0 var(--felt-shadow);
  cursor: pointer;
}

.btn:active:not(:disabled) {
  transform: translate(4px, 4px);
  box-shadow: inset -4px -4px 0 var(--rail-lit), inset 4px 4px 0 var(--rail-dark), 0 0 0 var(--felt-shadow);
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--primary {
  color: var(--ink);
  background: var(--brass);
  box-shadow: inset 4px 4px 0 var(--brass-lit), inset -4px -4px 0 var(--brass-dark), 4px 4px 0 var(--felt-shadow);
}

.btn--primary:active:not(:disabled) {
  box-shadow: inset -4px -4px 0 var(--brass-lit), inset 4px 4px 0 var(--brass-dark), 0 0 0 var(--felt-shadow);
}

.btn--primary:focus-visible { outline-color: var(--ivory); }
.btn--wide { width: 100%; min-height: 56px; font-size: 16px; }

:focus-visible { outline: 4px solid var(--brass); outline-offset: 4px; }

/* --- Fields --------------------------------------------------------------- */

.field { display: block; margin-bottom: 16px; }
.field > .micro { display: block; margin-bottom: 8px; }

input, textarea, select {
  width: 100%;
  padding: 12px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 20px;
  color: var(--ivory);
  background: var(--felt-shadow);
  border: 0;
  border-radius: 0;
  box-shadow: inset 4px 4px 0 #000, inset -4px -4px 0 var(--felt-lit);
}

input::placeholder, textarea::placeholder { color: var(--steel); opacity: 1; }
input[type="date"] { color-scheme: dark; }
textarea { resize: vertical; font-size: 13px; }

/* ===========================================================================
   Claimant page
   =========================================================================== */

.claim { display: flex; gap: 32px; flex-wrap: wrap; min-height: 640px; }
.claim__main { flex: 1 1 480px; display: flex; flex-direction: column; gap: 24px; }
.claim__furniture { flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 576px; }

.head-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.head-row .brand { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--brass); }
.head-row .path { font-family: var(--mono); font-size: 12px; color: var(--steel); }
.head-row .spacer { flex: 1 1 auto; }

.clock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--felt-dark);
  box-shadow: inset 4px 4px 0 var(--felt-shadow), inset -4px -4px 0 var(--felt-lit);
}

.clock b { font-family: var(--mono); font-size: 20px; line-height: 1; font-weight: 700; letter-spacing: 1px; color: var(--brass); font-variant-numeric: tabular-nums; }
.clock .micro { color: var(--steel); }
.clock--dead b { color: var(--chip-dead); }

.title { font-size: 32px; line-height: 40px; font-weight: 700; color: var(--ivory); text-shadow: 4px 4px 0 var(--felt-dark); }

.deal-row { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }

/* --- The signature card --------------------------------------------------- */

.code-card {
  position: relative;
  flex: 0 0 auto;
  width: 288px;
  height: 400px;
  padding: 24px;
  background: var(--ivory);
  box-shadow:
    inset 0 0 0 4px var(--ink),
    inset 0 0 0 8px var(--ivory),
    inset 0 0 0 12px var(--ink),
    12px 12px 0 var(--felt-shadow);
  animation: deal 0.4s steps(6) both;
}

.code-card .sp { position: absolute; }
.code-card .sp--tl { top: 24px; left: 24px; }
.code-card .sp--br { bottom: 24px; right: 24px; transform: rotate(180deg); }

.code-card__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.code-card__cap { font-family: var(--mono); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-micro); text-align: center; }
.code-card__rule { width: 100%; height: 4px; background: var(--ink); }

/* The code is stacked one dash-group per line so a long code keeps the
   typographic weight the design asks for. Selecting it by hand yields the
   groups with their dashes and a newline between — harmless, because the
   matcher normalises away everything that is not A-Z0-9. */
.code-card__code {
  display: block;
  padding: 16px 0;
  font-family: var(--mono);
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: 4px;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
  user-select: all;
}

.code-card__code span { display: block; }

@keyframes deal { from { transform: translate(180px, -280px); } to { transform: translate(0, 0); } }

/* Expired treatment */
.code-card--dead { background: var(--chip-dead); box-shadow: inset 0 0 0 4px var(--chip-dead-dark), inset 0 0 0 8px var(--chip-dead), inset 0 0 0 12px var(--chip-dead-dark), 12px 12px 0 var(--felt-shadow); animation: none; }
.code-card--dead .code-card__code { color: var(--chip-dead-dark); text-decoration: line-through; }
.code-card--dead .code-card__rule { background: var(--chip-dead-dark); }
.code-card--dead .code-card__cap { color: var(--chip-dead-dark); }

/* --- Steps ---------------------------------------------------------------- */

.steps { flex: 1 1 320px; display: flex; flex-direction: column; gap: 24px; list-style: none; padding: 0; }
.steps li { display: grid; grid-template-columns: 32px 1fr; gap: 16px; align-items: start; }

.steps .n {
  width: 32px; height: 32px;
  font-family: var(--mono); font-size: 16px; line-height: 32px; font-weight: 700;
  text-align: center; color: var(--ink); background: var(--brass);
  box-shadow: inset 4px 4px 0 var(--brass-lit), inset -4px -4px 0 var(--brass-dark);
}

.steps h3 { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ivory); }
.steps p { font-size: 14px; line-height: 20px; color: var(--bone); max-width: 44ch; text-wrap: pretty; }

.actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* --- Status bands --------------------------------------------------------- */

.band { display: flex; gap: 16px; align-items: center; padding: 16px; background: var(--felt-dark); box-shadow: inset 4px 4px 0 var(--felt-shadow), inset -4px -4px 0 var(--felt-lit); }
.band__text { min-width: 0; }
.band__t { font-family: var(--mono); font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ivory); }
.band__d { font-size: 14px; line-height: 20px; color: var(--bone); max-width: 60ch; text-wrap: pretty; }
.band strong { color: var(--ivory); }

.band--ok { background: var(--chip-green); box-shadow: inset 4px 4px 0 var(--green-lit), inset -4px -4px 0 #1E5A38; }
.band--bad { box-shadow: inset 4px 4px 0 var(--felt-shadow), inset -4px -4px 0 var(--alert); }
.band--bad .band__t { color: var(--alert); }
.band--dead { background: var(--chip-black); box-shadow: inset 4px 4px 0 #33363E, inset -4px -4px 0 #000; }
.band--dead .band__t { color: var(--chip-dead-lit); }

.foot { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--steel); max-width: 60ch; }

/* --- Furniture (scenery) --------------------------------------------------- */

.deck { position: relative; width: 64px; height: 88px; }
.deck i {
  position: absolute; inset: 0;
  background-color: var(--card-back);
  background-image:
    repeating-linear-gradient(45deg, var(--ivory) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(135deg, var(--ivory) 0 2px, transparent 2px 8px);
  outline: 4px solid var(--ink);
  outline-offset: -4px;
}
.deck i:nth-child(1) { transform: translate(-8px, -8px); }
.deck i:nth-child(2) { transform: translate(-4px, -4px); }

.stack { display: flex; flex-direction: column; align-items: center; }
.stack .edge { display: block; width: 48px; height: 16px; }
.edge--w { background: var(--chip-white); box-shadow: inset 0 4px 0 #F7F4EE; }
.edge--r { background: var(--chip-red); box-shadow: inset 0 4px 0 #CF4B53; }
.edge--k { background: var(--chip-black); box-shadow: inset 0 4px 0 #33363E; }
.edge--g { background: var(--chip-green); box-shadow: inset 0 4px 0 var(--green-lit); }
.edge--p { background: var(--chip-purple); box-shadow: inset 0 4px 0 #8557C0; }
.edge--b { background: var(--chip-blue); box-shadow: inset 0 4px 0 #4373C4; }

/* --- Motion ---------------------------------------------------------------- */

@keyframes shuffle { 0% { transform: translate(0, 0); } 50% { transform: translate(4px, -4px); } 100% { transform: translate(0, 0); } }
.is-shuffling { animation: shuffle 0.6s steps(2) infinite; }

@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.cursor { animation: blink 1s steps(1) infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- 360px ----------------------------------------------------------------- */

@media (max-width: 720px) {
  body { padding: 12px; }
  .rail { padding: 12px; }
  .felt { padding: 16px; min-height: 0; }
  .claim { gap: 16px; min-height: 0; }
  .claim__furniture { display: none; }
  .deal-row { flex-direction: column; gap: 16px; }
  .code-card { width: 100%; height: auto; min-height: 280px; padding: 16px; }
  .code-card .sp--tl { top: 16px; left: 16px; }
  .code-card .sp--br { bottom: 16px; right: 16px; }
  .code-card__code { font-size: 30px; line-height: 38px; letter-spacing: 2px; }
  .title { font-size: 24px; line-height: 32px; }
  .actions .btn, .btn--wide { width: 100%; }
  .steps { order: 5; }
}

/* ===========================================================================
   Streamer dashboard
   =========================================================================== */

.bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; }
.bar .brand { font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 2px; color: var(--ivory); }
.bar .path { font-family: var(--mono); font-size: 12px; color: var(--bone); }
.bar .spacer { flex: 1 1 auto; }

.onair {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--rail-dark);
  box-shadow: inset 4px 4px 0 var(--rail-deep), inset -4px -4px 0 var(--rail);
}
.onair i { display: block; width: 12px; height: 12px; background: var(--alert); animation: onair 2s steps(1) infinite; }
.onair span { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ivory); }
@keyframes onair { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.2; } }

/* --- Tabs are dealt cards, one suit each --------------------------------- */

.tabs { display: flex; gap: 12px; align-items: flex-end; }

.tabs button {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px; margin-bottom: 0;
  font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink);
  background: var(--tab-inactive);
  border: 0; border-radius: 0; cursor: pointer;
  box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 8px var(--tab-inactive), inset 0 0 0 12px var(--ink), 4px 4px 0 var(--rail-deep);
}

.tabs button .sp { opacity: 0.55; }
.tabs button[aria-selected="true"] {
  margin-bottom: 8px;
  background: var(--ivory);
  box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 8px var(--ivory), inset 0 0 0 12px var(--ink), 4px 4px 0 var(--rail-deep);
}
.tabs button[aria-selected="true"] .sp { opacity: 1; }
.tabs button:focus-visible { outline-offset: 4px; }

/* --- Panels --------------------------------------------------------------- */

.panel { padding: 24px; min-height: 640px; }
.cols { display: flex; gap: 24px; flex-wrap: wrap; }
.cols--top { align-items: flex-start; }
.col { flex: 1 1 400px; min-width: 0; }
.col--narrow { flex: 0 0 320px; }
/* A pair of small fields that should share a line even inside a narrow column */
.col--half { flex: 1 1 110px; }
.col--wide { flex: 1 1 520px; min-width: 0; }
.sunk { padding: 24px; background: var(--felt-dark); box-shadow: inset 4px 4px 0 var(--felt-shadow), inset -4px -4px 0 var(--felt-lit); }
.stack-y { display: flex; flex-direction: column; gap: 24px; }
.note { font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--steel); }

/* --- Mini code card (minted result) --------------------------------------- */

.mini-card {
  position: relative; flex: 0 0 auto; width: 112px; height: 160px; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ivory);
  box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 8px var(--ivory), inset 0 0 0 12px var(--ink), 4px 4px 0 var(--felt-shadow);
}
.mini-card .sp { position: absolute; }
.mini-card .sp--tl { top: 12px; left: 12px; }
.mini-card .sp--br { bottom: 12px; right: 12px; transform: rotate(180deg); }
.mini-card code { font-family: var(--mono); font-size: 15px; line-height: 20px; font-weight: 700; text-align: center; color: var(--ink); }
.mini-card code span { display: block; }

/* --- Tables --------------------------------------------------------------- */

.scroll-x { overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; }
.grid--live { min-width: 880px; }
.grid--ledger { min-width: 640px; }

.grid th {
  padding: 12px 16px; text-align: left;
  font-family: var(--mono); font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--steel); background: var(--felt-shadow);
}

.grid td { padding: 16px; font-family: var(--mono); font-size: 14px; line-height: 20px; color: var(--ivory); box-shadow: inset 0 -4px 0 var(--felt-shadow); }
.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid td.dead { color: var(--steel); }
.grid .actions-cell { display: flex; gap: 8px; }
.grid .btn { min-height: 40px; padding: 10px 14px; font-size: 12px; }

/* Status cell: a chip beside a word, never a chip on its own */
.st { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.st b { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.st--verified b { color: var(--green-lit); }
.st--override b { color: var(--alert); }
.st--expired b { color: var(--chip-dead-lit); }

.noproof {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink); padding: 6px 8px;
  background-image: repeating-linear-gradient(45deg, var(--alert) 0 4px, var(--hatch-dark) 4px 8px);
}

.legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px; background: var(--felt-dark); box-shadow: inset 4px 4px 0 var(--felt-shadow), inset -4px -4px 0 var(--felt-lit); }
.legend span { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--bone); }

.head-line { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 16px; }

/* --- Empty state ---------------------------------------------------------- */

.empty { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; padding: 48px 24px; }
.empty__mid { text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.empty h3 { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ivory); }
.empty p { font-size: 14px; line-height: 20px; color: var(--bone); max-width: 44ch; }
.deck--lg { width: 112px; height: 160px; }

/* --- Bankroll ------------------------------------------------------------- */

.bank { display: flex; gap: 32px; flex-wrap: wrap; }
.bank__left { flex: 1 1 320px; }
.bank__total { font-family: var(--mono); font-size: 48px; line-height: 1; font-weight: 700; color: var(--ivory); font-variant-numeric: tabular-nums; text-shadow: 4px 4px 0 var(--felt-shadow); margin: 12px 0; }
.bank__stacks { display: flex; gap: 24px; flex-wrap: wrap; }

.denom { display: flex; flex-direction: column; align-items: center; }
.denom .edge { display: block; width: 48px; height: 12px; }
.denom__meta { margin-top: 8px; text-align: center; }
.denom__count { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--ivory); }
.denom__label { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--steel); }
.denom__value { font-family: var(--mono); font-size: 12px; color: var(--bone); }

.unproven-slot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 12px; background: var(--felt-shadow); box-shadow: inset -4px -4px 0 var(--alert); }
.unproven-slot span { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--alert); }

/* --- Override checkbox ---------------------------------------------------- */

.override {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; background: var(--felt-shadow);
  box-shadow: inset -4px -4px 0 var(--alert);
  cursor: pointer;
}
.override input { position: absolute; opacity: 0; width: 0; height: 0; }
.override .box {
  flex: 0 0 auto; width: 32px; height: 32px;
  background: var(--felt-dark);
  box-shadow: inset 4px 4px 0 var(--felt-shadow), inset -4px -4px 0 var(--felt-lit);
  background-repeat: no-repeat; background-size: 100% 100%; image-rendering: pixelated;
}
.override input:checked ~ .box { background-color: var(--alert); background-image: var(--sp-check-ink); box-shadow: inset 4px 4px 0 #E4756D, inset -4px -4px 0 var(--hatch-dark); }
.override input:focus-visible ~ .box { outline: 4px solid var(--brass); outline-offset: 4px; }
.override__t { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--alert); }
.override__d { font-size: 13px; line-height: 19px; color: var(--bone); }

/* --- Filters and totals ---------------------------------------------------- */

.seg { display: flex; gap: 4px; flex-wrap: wrap; }
.seg button { min-height: 40px; padding: 10px 14px; font-size: 12px; }
.seg button[aria-pressed="true"] { color: var(--ink); background: var(--brass); box-shadow: inset 4px 4px 0 var(--brass-lit), inset -4px -4px 0 var(--brass-dark), 4px 4px 0 var(--felt-shadow); }

.totals-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 16px; box-shadow: inset 0 4px 0 var(--felt-shadow); }
.totals-foot div { display: flex; justify-content: space-between; gap: 16px; }
.totals-foot .k { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--steel); }
.totals-foot .v { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--ivory); font-variant-numeric: tabular-nums; }
.totals-foot .v--alert { color: var(--alert); }

/* Unproven ledger rows carry four independent marks */
.grid tr.unproven td { background: var(--row-unproven); }
.grid tr.unproven td:first-child { box-shadow: inset 8px 0 0 var(--hatch-dark), inset 0 -4px 0 var(--felt-shadow); }

/* --- Email template tokens -------------------------------------------------- */

.tokens { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tokens button { min-height: 36px; padding: 8px 12px; font-size: 11px; letter-spacing: 1px; color: var(--ink); background: var(--bone); box-shadow: inset 4px 4px 0 #E4DBC7, inset -4px -4px 0 #A2937A, 4px 4px 0 var(--felt-shadow); }

pre.email { margin: 0; padding: 16px; font-family: var(--mono); font-size: 13px; line-height: 20px; color: var(--bone); background: var(--felt-shadow); white-space: pre-wrap; overflow-wrap: anywhere; }

/* A small brass marker, e.g. flagging which account is your own */
.tag {
  display: inline-block;
  margin-left: 12px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--brass);
  box-shadow: inset 2px 2px 0 var(--brass-lit), inset -2px -2px 0 var(--brass-dark);
}

.login { max-width: 420px; margin: 0 auto; }

@media (max-width: 720px) {
  .panel { padding: 16px; min-height: 0; }
  .tabs { gap: 4px; }
  .tabs button { padding: 12px; font-size: 11px; letter-spacing: 1px; }
  .col--narrow { flex: 1 1 100%; }
  .bank__total { font-size: 32px; }
}

/* The recorded reason an override was paid, shown under its ledger note */
.why { margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--alert); }

/* The winnings a stake percentage was applied to, under it in the ledger */
.of { margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--steel); }


/* ===========================================================================
   Vertical rhythm
   Spacing is a property of the container, not of each element. Every panel
   flows its children on the same 16px step, so nothing needs an inline margin
   and nothing can drift out of the grid.
   =========================================================================== */

.sunk > * + *,
.login > * + *,
.claim__main > * + *,
[data-pane-body] > * + * { margin-top: 16px; }

/* A label introduces the thing under it, so it sits closer to it than to
   whatever came before. */
.sunk > .label + *,
.login > .label + * { margin-top: 12px; }

/* Rows of fields already carry their own gap; do not double it. */
.cols > * + * { margin-top: 0; }
.cols + .cols { margin-top: 0; }

/* Buttons want a clear step away from the field they act on. */
.actions { margin-top: 20px; }
.actions + .actions { margin-top: 12px; }

/* Fields inside a flowed panel space themselves; kill the legacy margin so it
   cannot stack with the container rhythm. */
.sunk .field,
.login .field { margin-bottom: 0; }

/* A note explains the control directly above it. */
.note { margin-top: 8px; }

/* Sections inside a tab need more air between them than fields do. */
.stack-y > * + * { margin-top: 0; }
.panel > section > .cols + .cols { margin-top: 24px; }

/* Tables need room from whatever introduced them. */
.scroll-x { margin-top: 16px; }
.head-line + .scroll-x { margin-top: 12px; }

/* --- The announce post: an ivory card with room for its pips -------------- */

.post-card {
  position: relative;
  width: 100%;
  padding: 32px 40px;
  background: var(--ivory);
  box-shadow:
    inset 0 0 0 4px var(--ink),
    inset 0 0 0 8px var(--ivory),
    inset 0 0 0 12px var(--ink),
    4px 4px 0 var(--felt-shadow);
}

.post-card .sp { position: absolute; }
.post-card .sp--tl { top: 16px; left: 16px; }
.post-card .sp--br { bottom: 16px; right: 16px; transform: rotate(180deg); }

.post-card pre {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 22px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- Breathing room at the edges ------------------------------------------ */

.panel { padding: 32px; }
.sunk { padding: 24px; }
.head-line { margin-bottom: 0; }
.legend { gap: 20px; }
.grid td { padding: 16px 12px; }
.grid th { padding: 12px; }

@media (max-width: 720px) {
  .panel { padding: 16px; }
  .sunk { padding: 16px; }
  .post-card { padding: 24px 20px; }
  /* Everything you can tap clears the 44px floor on a phone. */
  .btn, button, .tokens button, .seg button, .grid .btn { min-height: 44px; }
  .cols { gap: 16px; }
}