/* ── Fonts ───────────────────────────────────────────────────────
   Open Runde (SIL OFL, a rounded Inter) for display, Inter for text —
   the pairing rareui.com uses. Both are vendored and subset to Latin,
   so the table renders identically offline and with no flash.
   ──────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Open Runde";
  src: url("../fonts/OpenRunde-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Runde";
  src: url("../fonts/OpenRunde-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Runde";
  src: url("../fonts/OpenRunde-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter var";
  src: url("../fonts/Inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ───────────────────────────────────────────────
   Monochrome, high-air, tactile. Pill geometry + inset rings
   (Rare UI grammar) rendered in the soft light greys of the board
   reference. One accent, used sparingly.
   ──────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light dark;

  /* surfaces */
  --bg:          #ffffff;
  --surface:     #fafafa;
  --surface-2:   #f2f2f2;
  --surface-3:   #ebebeb;
  --surface-4:   #e2e2e2;

  /* ink */
  --ink:         #1c1c1c;
  --ink-2:       #6e6e6e;
  --ink-3:       #a4a4a4;
  --ink-4:       #c8c8c8;
  --ink-inv:     #ffffff;

  /* lines */
  --line:        rgba(0, 0, 0, .07);
  --line-2:      rgba(0, 0, 0, .12);

  /* accent — the only colour in the system */
  --accent:      #a5122b;
  --accent-ink:  #ffffff;
  --accent-soft: rgba(165, 18, 43, .10);
  --accent-glow: rgba(165, 18, 43, .55);

  /* the table itself — the one place the palette leaves the greys, and
     the reason a poker table reads as a poker table from across a room */
  --felt-hi:     #2b7c5c;
  --felt:        #1d6047;
  --felt-lo:     #124534;
  --rail:        #1a2621;
  --on-felt:     rgba(255, 255, 255, .82);
  --on-felt-2:   rgba(255, 255, 255, .52);
  --on-felt-3:   rgba(255, 255, 255, .26);
  --felt-line:   rgba(255, 255, 255, .15);

  /* chips, by denomination, in the colours a card room uses */
  --chip-1:      #f0ece2;
  --chip-5:      #c0392f;
  --chip-25:     #2f6fb5;
  --chip-100:    #23262b;
  --chip-500:    #6d4aa8;

  /* the other two suits, for anyone who plays a four-colour deck */
  --suit-d:      #1266ad;
  --suit-c:      #1a7a4a;

  /* card faces */
  --card-bg:     #ffffff;
  --card-ink:    #1c1c1c;
  --card-red:    #a5122b;
  --card-back-a: #e9e9e9;
  --card-back-b: #efefef;

  /* radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 38px;
  --r-pill: 9999px;

  /* spacing scale (rareui: 8 / 16 / 32 / 64 / 112) */
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 32px;
  --sp-lg: 64px;
  --sp-xl: 112px;

  /* the signature: an inset hairline ring + top highlight + bottom shade */
  --ring:
    inset 0 0 0 1px rgba(0, 0, 0, .06),
    inset 0 1px 0 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 0 rgba(0, 0, 0, .045);
  --ring-strong:
    inset 0 0 0 1px rgba(0, 0, 0, .10),
    inset 0 1px 0 0 rgba(255, 255, 255, .8),
    inset 0 -1px 0 0 rgba(0, 0, 0, .07);
  --lift:
    0 1px 1px rgba(0, 0, 0, .03),
    0 6px 16px -10px rgba(0, 0, 0, .22);
  --lift-lg:
    0 2px 3px rgba(0, 0, 0, .04),
    0 22px 48px -24px rgba(0, 0, 0, .30);

  /* motion */
  --ease:        cubic-bezier(.22, 1, .36, 1);
  --spring:      cubic-bezier(.34, 1.56, .64, 1);
  --fast:  140ms;
  --med:   260ms;
  --slow:  460ms;

  /* type */
  --font-display: "Open Runde", ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --font-text:    "Inter var", "Inter", system-ui, -apple-system, sans-serif;

  /* geometry */
  --card-w: 62px;
  --card-r: 0.19;    /* radius as a ratio of width */
}

/* Dark lives in one place: a tiny script in the document head resolves
   the system preference into data-theme before the first paint, so there
   is never a second definition to keep in sync. */
:root[data-theme="dark"] {
  --bg:          #000000;
  --surface:     #0b0b0b;
  --surface-2:   #131313;
  --surface-3:   #1b1b1b;
  --surface-4:   #242424;

  --ink:         #ededed;
  --ink-2:       #9a9a9a;
  --ink-3:       #6a6a6a;
  --ink-4:       #454545;
  --ink-inv:     #0b0b0b;

  --line:        rgba(255, 255, 255, .08);
  --line-2:      rgba(255, 255, 255, .14);

  --felt-hi:     #1c5b45;
  --felt:        #124334;
  --felt-lo:     #0a2b21;
  --rail:        #080f0d;
  --on-felt:     rgba(255, 255, 255, .78);
  --on-felt-2:   rgba(255, 255, 255, .46);
  --on-felt-3:   rgba(255, 255, 255, .22);
  --felt-line:   rgba(255, 255, 255, .12);

  --suit-d:      #1266ad;
  --suit-c:      #157043;

  --chip-1:      #e4e0d6;
  --chip-5:      #b8362d;
  --chip-25:     #2c66a6;
  --chip-100:    #1a1d21;
  --chip-500:    #63439c;

  --card-bg:     #f6f6f6;
  --card-ink:    #141414;
  --card-back-a: #26262a;
  --card-back-b: #1d1d20;

  --accent:      #cf3b52;
  --accent-soft: rgba(207, 59, 82, .14);
  --accent-glow: rgba(207, 59, 82, .5);
  --card-red:    #a5122b;

  --ring:
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    inset 0 1px 0 0 rgba(255, 255, 255, .09),
    inset 0 -1px 0 0 rgba(0, 0, 0, .5);
  --ring-strong:
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    inset 0 1px 0 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 0 rgba(0, 0, 0, .6);
  --lift:
    0 1px 1px rgba(0, 0, 0, .5),
    0 6px 16px -10px rgba(0, 0, 0, .8);
  --lift-lg:
    0 2px 3px rgba(0, 0, 0, .5),
    0 22px 48px -24px rgba(0, 0, 0, .9);
}

/* ── reset ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

button {
  font: inherit;
  color: inherit;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

svg { display: block; }

::selection { background: var(--accent-soft); }

/* ── primitives ────────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 108px;
  min-height: 52px;
  padding: 8px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.2px;
  white-space: nowrap;
  transition:
    transform var(--fast) var(--spring),
    background-color var(--med) var(--ease),
    color var(--med) var(--ease),
    box-shadow var(--med) var(--ease),
    opacity var(--med) var(--ease);
}

.btn:active:not(:disabled) { transform: scale(.955); }

.btn:disabled {
  opacity: .32;
  cursor: not-allowed;
  filter: saturate(0);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn-sub {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  opacity: .62;
  font-variant-numeric: tabular-nums;
}
.btn-sub:empty { display: none; }

.btn-ghost {
  background: var(--surface-2);
  color: var(--ink-2);
  box-shadow: var(--ring);
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }

.btn-solid {
  background: var(--ink);
  color: var(--ink-inv);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    inset 0 1px 0 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 0 rgba(0, 0, 0, .35),
    var(--lift);
}
.btn-solid:hover:not(:disabled) { transform: translateY(-1px); }

.btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 0 rgba(0, 0, 0, .22),
    0 8px 20px -12px var(--accent-glow);
}
.btn-accent:hover:not(:disabled) { transform: translateY(-1px); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  box-shadow: var(--ring);
  transition: transform var(--fast) var(--spring), background-color var(--med) var(--ease), color var(--med) var(--ease);
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.icon-btn:active { transform: scale(.9); }
.icon-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#btn-theme svg { stroke-width: 1.8; }

.chip-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--ring);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.1px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--med) var(--ease), box-shadow var(--med) var(--ease), color var(--med) var(--ease);
}

.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--ink-4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  transition: background-color var(--med) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}