/* ── 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 one exception: gold, worn only by the nuts on a finished board.
     While cards are still to come the tag wears the accent instead,
     because that title can still be taken away. */
  --gold:        #8a6100;
  --gold-soft:   rgba(138, 97, 0, .12);
  --gold-glow:   rgba(138, 97, 0, .5);

  /* 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;

  --gold:        #d4a636;
  --gold-soft:   rgba(212, 166, 54, .14);
  --gold-glow:   rgba(212, 166, 54, .55);

  --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; }

/* `hidden` means hidden. Every component here sets its own display, which
   quietly beats the browser's rule for the attribute, and the result was
   buttons that stayed on screen after being told to go away. */
[hidden] { display: none !important; }

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;
  }
}