/* Self-hosted fonts — no third-party request, and no round trip to discover the
   URLs. Google Fonts required fetching a stylesheet from fonts.googleapis.com before
   the browser could even learn where the font files were, then a second connection to
   fonts.gstatic.com to get them. Both are gone.

   These are the exact woff2 subsets Google served, so the bytes on the wire are
   unchanged; only the origin is. IBM Plex and Bodoni Moda are both SIL OFL 1.1,
   which permits this — see fonts/OFL.txt.

   unicode-range means a browser fetches only the subsets a page actually needs;
   latin-ext is what carries the won sign, so a KRW user pulls it and nobody else does.
   The card suits and the transfer arrow are outside both subsets and fall back to a
   system font, exactly as they did before. */
@font-face{
  font-family:'Bodoni Moda';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(fonts/bodoni-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Bodoni Moda';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(fonts/bodoni-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/plex-sans-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/plex-sans-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/plex-sans-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fonts/plex-sans-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fonts/plex-sans-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(fonts/plex-sans-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(fonts/plex-sans-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/plex-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/plex-mono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fonts/plex-mono-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fonts/plex-mono-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(fonts/plex-mono-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(fonts/plex-mono-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Shared styling for the document pages — privacy, terms, the guides, and 404.
   index.html deliberately stays a single self-contained file: it is the app, it
   must work offline, and the test suite extracts its functions from that one file.
   These pages are documents, so they share a stylesheet instead of copying 600
   lines of app CSS five times.

   The :root blocks below are a copy of the ones in index.html. That copy is a
   drift risk, so test/cases/tokens.js asserts the two agree, token for token,
   in all three blocks. Change a colour in one place and the suite fails. */

:root{
  --display:'Bodoni Moda',Didot,'Bodoni MT',Georgia,serif;
  --body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;

  --felt:#1d6b4f;
  --felt-deep:#14523c;
  --rail:#6b3f22;
  --card:#fbf7ef;
  --card-edge:#ddd2bd;
  --card-sunk:#f2ebdd;
  --ink:#22201c;
  --ink-soft:#716a5d;
  --gold:#84662c;
  --win:#1c7a4f;
  --loss:#b23b34;
  --flat:#716a5d;
  --alert:#9f6028;
  --alert-bg:#fdf1df;
  --ok-bg:#e9f5ed;
  --chip:#f4ede0;
  --chip-edge:#c8b998;
  --shadow:rgba(10,26,20,.42);
  --on-felt:#fcfaf5;
  --on-felt-dim:#dfe8e2;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --felt:#0d3527;
    --felt-deep:#07231a;
    --rail:#2e1c10;
    --card:#161c1a;
    --card-edge:#2c3a35;
    --card-sunk:#101614;
    --ink:#eee7da;
    --ink-soft:#93a09a;
    --gold:#d8b061;
    --win:#5fcf94;
    --loss:#f0776c;
    --flat:#93a09a;
    --alert:#eca85e;
    --alert-bg:#2a1f10;
    --ok-bg:#10261b;
    --chip:#1d2623;
    --chip-edge:#3a4a44;
    --shadow:rgba(0,0,0,.6);
    --on-felt:#eef3ef;
    --on-felt-dim:#a9bbb2;
  }
}
:root[data-theme="dark"]{
  --felt:#0d3527;
  --felt-deep:#07231a;
  --rail:#2e1c10;
  --card:#161c1a;
  --card-edge:#2c3a35;
  --card-sunk:#101614;
  --ink:#eee7da;
  --ink-soft:#93a09a;
  --gold:#d8b061;
  --win:#5fcf94;
  --loss:#f0776c;
  --flat:#93a09a;
  --alert:#eca85e;
  --alert-bg:#2a1f10;
  --ok-bg:#10261b;
  --chip:#1d2623;
  --chip-edge:#3a4a44;
  --shadow:rgba(0,0,0,.6);
  --on-felt:#eef3ef;
  --on-felt-dim:#a9bbb2;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  color:var(--ink);
  font-family:var(--body);
  background-color:var(--felt);
  background-image:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--felt) 55%, #ffffff) 0%, transparent 62%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--felt-deep) 40%, transparent) 0 2px, transparent 2px 6px);
  min-height:100vh;
}
img{ max-width:100%; }
[hidden]{ display:none !important; }

.table{
  max-width:760px;
  margin:clamp(12px,3vw,44px) auto;
  padding:0 clamp(10px,2.4vw,20px) clamp(40px,6vw,70px);
}

/* ---- header, matching the app's rail ---- */
.rail{
  background:var(--card);
  border:1px solid var(--card-edge);
  border-radius:14px;
  box-shadow:0 20px 44px -26px var(--shadow);
  padding:clamp(16px,3vw,24px) clamp(16px,3vw,26px);
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.brand{ flex:1 1 auto; min-width:0; }
.suits{ font-size:.86rem; letter-spacing:.32em; color:var(--gold); margin-bottom:2px; }
.rail h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.5rem,4.2vw,2.1rem);
  line-height:1.05;
  margin:0;
  letter-spacing:.01em;
}
.rail .sub{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:6px;
}
.back{
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border:1px solid var(--card-edge);
  border-radius:9px;
  padding:9px 13px;
  white-space:nowrap;
  transition:background .15s ease, border-color .15s ease;
}
.back:hover{ background:var(--card-sunk); border-color:var(--gold); }
.back:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---- the document body ---- */
.doc{
  margin-top:clamp(16px,2.6vw,24px);
  background:var(--card);
  border:1px solid var(--card-edge);
  border-radius:14px;
  box-shadow:0 20px 44px -26px var(--shadow);
  padding:clamp(20px,3.4vw,38px) clamp(18px,3.4vw,42px);
}
.doc h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.15rem,2.6vw,1.42rem);
  line-height:1.25;
  margin:2em 0 .55em;
  letter-spacing:.01em;
}
.doc h2:first-child{ margin-top:0; }
.doc h3{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:1.9em 0 .5em;
}
.doc p, .doc li{ font-size:.92rem; line-height:1.72; margin:0 0 .95em; max-width:66ch; }
.doc ul, .doc ol{ padding-left:1.25em; margin:0 0 1.1em; }
.doc li{ margin-bottom:.4em; }
.doc a{ color:var(--ink); text-underline-offset:2px; text-decoration-color:var(--gold); }
.doc a:hover{ color:var(--gold); }
.doc a:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:2px; }
.doc strong{ font-weight:600; }
.doc .lede{ font-size:1rem; color:var(--ink); }
.doc hr{ border:0; border-top:1px solid var(--card-edge); margin:2.2em 0; }

.updated{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 1.8em;
}

/* A definition-style table for "what we collect / why / how long". */
.doc table{ width:100%; border-collapse:collapse; margin:0 0 1.4em; font-size:.86rem; }
.doc th, .doc td{
  text-align:left;
  vertical-align:top;
  padding:9px 12px 9px 0;
  border-bottom:1px solid var(--card-edge);
  line-height:1.6;
}
.doc th{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:400;
}
.table-scroll{ overflow-x:auto; }

/* ---- the placeholder that has to be filled before this can go live ---- */
.todo{
  display:inline-block;
  font-family:var(--mono);
  font-size:.82em;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--alert);
  background:var(--alert-bg);
  border:1.5px dashed var(--alert);
  border-radius:6px;
  padding:1px 7px;
}
.notready{
  background:var(--alert-bg);
  border:1.5px solid var(--alert);
  border-radius:11px;
  padding:15px 18px;
  margin:0 0 1.9em;
}
.notready p{ margin:0; font-size:.86rem; line-height:1.65; }
.notready .head{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--alert);
  margin-bottom:6px;
}

/* ---- footer, shared with the app ---- */
.foot{
  margin-top:clamp(18px,3vw,26px);
  font-family:var(--mono);
  font-size:.64rem;
  line-height:1.95;
  letter-spacing:.02em;
  color:var(--on-felt-dim);
  text-align:center;
}
.foot a{ color:var(--on-felt); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28); }
.foot a:hover{ border-bottom-color:var(--on-felt); }
.foot a:focus-visible{ outline:2px solid var(--on-felt); outline-offset:3px; border-radius:2px; }
.foot .sep{ opacity:.5; margin:0 7px; }

/* ---- index of guide articles ---- */
.cards{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.cards a{
  display:block;
  padding:16px 18px;
  border:1px solid var(--card-edge);
  border-radius:11px;
  text-decoration:none;
  color:var(--ink);
  background:var(--card-sunk);
  transition:border-color .15s ease, background .15s ease;
}
.cards a:hover{ border-color:var(--gold); }
.cards a:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.cards b{ display:block; font-size:.98rem; margin-bottom:4px; font-weight:600; }
.cards span{ display:block; font-size:.85rem; color:var(--ink-soft); line-height:1.6; max-width:60ch; }

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}