/* Card table tokens: felt, lacquered wood, brass and chalk. Change these first. */
:root {
  /* Felt */
  --felt: #0f5257;
  --felt-deep: #0a3b3f;
  --felt-ink: #03181a;
  --felt-print: #c9a45c;
  --felt-line: rgba(244, 241, 232, .34);

  /* Wood rim and brass inlay */
  --wood: #6b3a1f;
  --wood-light: #8a4f2a;
  --wood-dark: #43220f;
  --brass: #c9a45c;
  --brass-light: #e8cf95;
  --brass-dark: #8c6a2f;
  --on-brass: #2b170a;

  /* Chalk text on felt and wood */
  --chalk: #f4f1e8;
  --chalk-soft: rgba(244, 241, 232, .78);
  --chalk-faint: rgba(244, 241, 232, .5);

  /* Card faces */
  --card-paper: #fbf7ec;
  --card-ink: #2a2118;
  --card-rule: rgba(42, 33, 24, .22);
  --foil-gold: linear-gradient(135deg, #f7c95a 0%, #fff0b8 28%, #d9a23a 52%, #ffe28f 76%, #c58a22 100%);

  --focus: #ffe08a;

  /* Type */
  --font: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --text-status: 17px;
  --text-button: 17px;
  --text-rail-name: 17px;
  --text-rail-state: 14px;
  --text-tag: 16px;

  /* Radii */
  --radius-felt: 44px;
  --radius-card: 10px;
  --radius-pill: 999px;

  /* Shadows: the felt tone, never plain grey */
  --shadow-card: 0 1px 1px rgba(3, 24, 26, .55), 0 6px 14px rgba(3, 24, 26, .42);
  --shadow-lift: 0 2px 3px rgba(3, 24, 26, .4), 0 26px 34px rgba(3, 24, 26, .55);
  --shadow-pack: drop-shadow(0 2px 1px rgba(3, 24, 26, .55)) drop-shadow(0 16px 18px rgba(3, 24, 26, .45));
  --shadow-wood: 0 2px 2px rgba(20, 8, 2, .45), 0 7px 12px rgba(20, 8, 2, .35);
  --glow-legendary: 0 0 0 1px rgba(255, 209, 102, .6), 0 0 42px 6px rgba(255, 209, 102, .32);
  --glow-rare: 0 0 0 1px rgba(154, 207, 240, .45), 0 0 26px 2px rgba(154, 207, 240, .2);

  /* Sizes: desktop */
  --topbar-h: 56px;
  --rim: 14px;
  --print-h: 112px;
  /* Cards shrink on short screens so the whole table fits without scrolling. */
  --card-w: max(150px, min(222px, calc((100svh - 496px) / 1.4)));
  --card-h: calc(var(--card-w) * 1.4);
  --pitch: calc(var(--card-w) + 42px);
  --fan: 2.4deg;
  --drop: 9px;
  --foot-h: 92px;
  --lift-hover: -12px;
  --lift-turn: -30px;
  --pack-w: 232px;
  --pack-h: calc(var(--pack-w) * 1.42);
  --pack-y: calc(50% - var(--foot-h) / 2 + var(--drop) / 2);
  --mini-w: 50px;
  --aside-x: calc(50% - var(--pitch) * 1.5 - var(--pack-w) * .42);
  --aside-y: calc(50% - var(--foot-h) / 2 + 24px);
  --aside-rot: -14deg;
  --aside-scale: .62;
}

/* Medium widths: the torn wrapper tucks behind the first card. */
@media (max-width: 1179px) {
  :root {
    --card-w: max(150px, min(204px, calc((100vw - 120px) / 3.2), calc((100svh - 500px) / 1.4)));
    --pitch: calc(var(--card-w) + 30px);
    --aside-x: calc(50% - var(--pitch) - var(--card-w) * .42);
    --aside-y: calc(50% - var(--foot-h) / 2 - var(--card-h) / 2 - 8px);
    --aside-rot: -24deg;
    --aside-scale: .44;
  }
}

@media (max-height: 780px) and (min-width: 600px) {
  :root { --print-h: 96px; --foot-h: 86px; }
}

@media (max-width: 599px) {
  :root {
    --text-status: 15px;
    --text-button: 16px;
    --text-rail-name: 13px;
    --text-rail-state: 12px;
    --text-tag: 14px;
    --topbar-h: 46px;
    --rim: 6px;
    --radius-felt: 24px;
    --radius-card: 7px;
    --print-h: 78px;
    --card-w: max(112px, min(150px, calc((100vw - 30px) / 2.47), calc((100svh - 496px) / 1.4)));
    --pitch: calc(var(--card-w) * .72);
    --fan: 4deg;
    --drop: 7px;
    --foot-h: 94px;
    --pack-w: 176px;
    --mini-w: 30px;
    --lift-hover: -9px;
    --lift-turn: -20px;
    /* The hand rests low, near the thumb; the torn wrapper lies in the space above it. */
    --pack-y: calc((100% - var(--foot-h)) / 2 + var(--card-h) / 4);
    --aside-x: calc(50% - var(--pitch) - var(--card-w) * .28);
    --aside-y: max(36px, calc(100% - var(--foot-h) - var(--card-h) - 44px));
    --aside-rot: -64deg;
    --aside-scale: .38;
  }
}