/* Card Game Rules – website
   A printed-rulebook look: cream paper, red & black ink like a real deck,
   book typography. In dark mode the page becomes a green card table and the
   playing cards stay light, like real cards on felt. */

@font-face {
  font-family: "Alegreya";
  src: url("../webfonts/alegreya.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../webfonts/alegreya-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
/* ♠♥♦♣ and a few arrows/maths signs, so suits look the same on every device */
@font-face {
  font-family: "Suits";
  src: url("../webfonts/suits.woff2") format("woff2");
  unicode-range: U+2660-2667, U+2190-2193, U+2264-2265, U+00D7, U+2212, U+25B8;
}

:root {
  --paper: #f3ede0;
  --ink: #1b1714;
  --ink-soft: #5d544a;
  --rule: #cfc4ae;
  --red: #b3141b;
  --card: #fffcf5;
  --card-ink: #1b1714;
  --card-soft: #6a6055;
  --card-rule: #ddd3c0;
  --card-red: #b3141b;
  --serif: "Alegreya", "Suits", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0d1a14;          /* felt */
    --ink: #e8e0cc;
    --ink-soft: #a9b3a4;
    --rule: #2c4236;
    --red: #ef6a5f;
    color-scheme: dark;
  }
  body {
    background:
      radial-gradient(ellipse at 50% -10%, #1c3a2b 0%, transparent 60%),
      var(--paper);
    background-attachment: fixed;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.55 var(--serif);
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 42rem; margin: 0 auto; padding: 0 20px 2rem; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--rule); transition: text-decoration-color .15s; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.suit.red, .r { color: var(--red); }

/* small caps label style, used for navigation and headings of minor sections */
.label, .kicker, .bar, .jump, .facts dt, .playing-card h2, .aside, .foot {
  font-variant-caps: all-small-caps;
  font-variant-numeric: lining-nums;
  letter-spacing: .08em;
}

/* ---- top bar ---------------------------------------------------------- */
.bar {
  max-width: 42rem; margin: 0 auto; padding: 14px 20px 0;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 1.05rem;
}
.bar a { text-decoration: none; }
.bar-home { font-weight: 700; }
.bar-lang { display: flex; gap: .7rem; }
.bar-lang a { color: var(--ink-soft); }
.bar-lang a:hover { color: var(--ink); }
.bar-lang [aria-current] { border-bottom: 1.5px solid var(--red); }

/* ---- ornaments -------------------------------------------------------- */
.ornament { text-align: center; letter-spacing: .6em; margin: 0; font-size: 1rem; color: var(--ink); }
.ornament span { font-family: "Suits", var(--serif); }

/* ---- front page ------------------------------------------------------- */
.masthead { text-align: center; padding: 3.2rem 0 2.2rem; border-bottom: 3px double var(--rule); }
.masthead h1 { font-size: clamp(2.6rem, 11vw, 4rem); margin: .8rem 0 .6rem; font-weight: 900; letter-spacing: -.02em; hyphens: manual; }
.lede { font-style: italic; color: var(--ink-soft); margin: 0 auto; max-width: 30rem; font-size: 1.2rem; line-height: 1.4; }

.games { list-style: none; margin: 0; padding: 0; }
.games li { border-bottom: 1px solid var(--rule); }
.games a { display: flex; gap: 1.1rem; align-items: center; padding: 1.25rem 0; text-decoration: none; }
.g-text { display: flex; flex-direction: column; min-width: 0; }
.g-title { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.games a:hover .g-title { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: .15em; }
.g-tag { font-style: italic; color: var(--ink-soft); line-height: 1.35; margin: .25rem 0 .35rem; }
.g-meta { font-size: .95rem; font-variant-caps: all-small-caps; letter-spacing: .06em; font-variant-numeric: lining-nums; color: var(--ink-soft); }

/* game filter */
.filter-box { margin: 1.6rem 0 .4rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.filter-box summary { cursor: pointer; padding: .6rem 0; list-style: none; display: flex; align-items: baseline; gap: .8rem; }
.filter-box summary::-webkit-details-marker { display: none; }
.filter-box summary::before { content: "▸"; font-family: "Suits", sans-serif; color: var(--red); font-size: .8rem; transition: transform .15s; }
.filter-box[open] summary::before { transform: rotate(90deg); }
.f-title { font-weight: 700; font-variant-caps: all-small-caps; letter-spacing: .08em; font-size: 1.1rem; }
.f-sum { font-style: italic; color: var(--ink-soft); font-size: .98rem; }
.filter-box[open] .f-sum { display: none; }
.filter { padding: 0 0 .3rem; border-top: 1px dotted var(--rule); }
.f-row { display: flex; align-items: baseline; gap: .9rem; padding: .45rem 0; border-bottom: 1px dotted var(--rule); }
.f-opts { flex: 1; display: flex; flex-wrap: wrap; gap: .1rem .9rem; }
.f-row:last-of-type { border-bottom: 0; }
.f-label { flex: 0 0 5.2rem; font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--ink-soft); font-size: 1rem; }
.filter button {
  font: inherit; font-size: 1.02rem; color: var(--ink-soft); background: none; border: 0; padding: .1rem 0; cursor: pointer;
  border-bottom: 2px solid transparent; font-variant-numeric: lining-nums;
}
.filter button:hover { color: var(--ink); }
.filter button[aria-pressed="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--red); }
.f-status { margin: .5rem 0 .2rem; font-size: .98rem; color: var(--ink-soft); font-style: italic; }
.f-status button { font-style: normal; font-variant-caps: all-small-caps; letter-spacing: .06em; margin-left: .5rem; color: var(--red); }
.f-none { text-align: center; font-style: italic; color: var(--ink-soft); padding: 2rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.games li[hidden] { display: none; }
@media (max-width: 480px) { .f-label { flex-basis: 4.4rem; } .filter button { font-size: .98rem; } }

/* a small playing card with corner indices */
.pip-card {
  flex: none; position: relative;
  width: 58px; height: 81px;
  background: var(--card); color: var(--card-ink);
  border: 1px solid var(--card-rule); border-radius: 6px;
  box-shadow: 0 1px 0 rgb(0 0 0 / .06), 0 3px 8px -4px rgb(0 0 0 / .25);
  font-family: "Suits", var(--serif);
  transform: rotate(-3deg);
  transition: transform .2s ease;
}
.games li:nth-child(even) .pip-card { transform: rotate(2.5deg); }
.games a:hover .pip-card { transform: rotate(0) translateY(-3px); }
.pip-card.red { color: var(--card-red); }
.pip-card .idx { position: absolute; left: 5px; top: 4px; font: 700 .72rem/1 var(--serif); text-align: center; }
.pip-card .idx.flip { left: auto; top: auto; right: 5px; bottom: 4px; transform: rotate(180deg); }
.pip-card .pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.9rem; font-family: "Suits", sans-serif; }

.aside { margin: 1.6rem 0 0; color: var(--ink-soft); font-size: 1.05rem; text-align: center; }
.aside a { color: var(--ink); }

.takeaway { margin-top: 3rem; padding-top: 1.2rem; border-top: 3px double var(--rule); }
.label { font-size: 1.05rem; font-weight: 700; margin: 0 0 .6rem; color: var(--ink-soft); }
.takeaway ul { list-style: none; padding: 0; margin: 0; }
.takeaway li { padding: .35rem 0; }
.takeaway li::before { content: "↓"; font-family: "Suits", sans-serif; color: var(--red); margin-right: .6rem; font-size: .9em; }

/* ---- game page -------------------------------------------------------- */
.game-head { padding: 2.6rem 0 1.4rem; text-align: center; }
.kicker { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
.suit-mark { font-family: "Suits", sans-serif; color: var(--ink); margin-left: .25rem; font-variant-caps: normal; }
.is-red .suit-mark, .suit-mark.r { color: var(--red); }
.game-head h1 { font-size: clamp(2.6rem, 12vw, 4.2rem); margin: .3rem 0 .5rem; font-weight: 900; letter-spacing: -.02em; }
.game-head .lede { margin-bottom: 1.6rem; }

.facts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
@media (min-width: 560px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts div { padding: .6rem .4rem; }
.facts .wide { grid-column: 1 / -1; border-top: 1px solid var(--rule); }
.facts dt { font-size: .9rem; color: var(--ink-soft); }
.facts dd { margin: 0; font-weight: 700; line-height: 1.25; font-variant-numeric: lining-nums; }

.jump { display: flex; justify-content: center; flex-wrap: wrap; gap: .3rem .7rem; margin: 1.3rem 0 1.6rem; font-size: 1.1rem; }
.jump span { color: var(--rule); }
.jump a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.jump a:hover { border-color: var(--red); }

/* quick rules + cheat sheet as two real-looking playing cards */
.table { display: grid; gap: 22px; margin: 0 0 3rem; }
@media (min-width: 760px) {
  .table { grid-template-columns: 1fr 1fr; margin-left: -3rem; margin-right: -3rem; }
}
.playing-card {
  position: relative;
  background: var(--card); color: var(--card-ink);
  border: 1px solid var(--card-rule);
  border-radius: 14px;
  padding: 1.4rem 2.4rem 1.6rem;
  font-size: 1.02rem; line-height: 1.45;
  font-variant-numeric: lining-nums;
  box-shadow: 0 1px 0 rgb(0 0 0 / .05), 0 10px 24px -14px rgb(0 0 0 / .35);
}
/* the inner frame line of a real card */
.playing-card::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid var(--card-rule); border-radius: 9px; pointer-events: none;
}
.corner { position: absolute; font: 700 1rem/1 var(--serif); text-align: center; font-family: "Suits", var(--serif); }
.corner.tl { left: 13px; top: 13px; }
.corner.br { right: 13px; bottom: 13px; transform: rotate(180deg); }
.is-red .corner { color: var(--card-red); }
.playing-card h2 { text-align: center; font-size: 1.2rem; margin: 0 0 .8rem; color: var(--card-soft); font-weight: 700; }
.playing-card h3 { font-size: 1rem; font-variant-caps: all-small-caps; letter-spacing: .07em; margin: 1rem 0 .3rem; }
.playing-card ul { padding-left: 1.1rem; margin: 0; }
.playing-card li { margin: .3rem 0; }
.playing-card li::marker { color: var(--card-red); }
.playing-card p { margin: .5rem 0; }
.playing-card .suit.red { color: var(--card-red); }
.playing-card th, .playing-card td { border-color: var(--card-rule); }
.playing-card table { font-size: .95rem; }

/* ---- long-form rules -------------------------------------------------- */
.prose { hyphens: auto; }
.prose .part {
  text-align: center; font-size: 1.9rem; margin: 0 0 1.2rem;
  padding-top: 1.6rem; border-top: 3px double var(--rule);
}
.toc {
  margin: 0 0 2.2rem; padding: .8rem 0; list-style: none; counter-reset: toc;
  font-size: 1.05rem; line-height: 1.5;
  columns: 2; column-gap: 1.5rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.toc { hyphens: manual; font-size: 1.1rem; }
.toc li { counter-increment: toc; break-inside: avoid; padding: .15rem 0 .15rem 1.7rem; text-indent: -1.7rem; }
.toc li::before { content: counter(toc); display: inline-block; width: 1.7rem; text-indent: 0; color: var(--red); font-weight: 700; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.prose h2:not(.part) {
  font-size: 1.55rem; margin: 2.6rem 0 .7rem;
}
.prose h2:not(.part)::before {
  content: "♠"; font-family: "Suits", sans-serif; font-size: .7em; vertical-align: .12em;
  margin-right: .5rem; color: var(--ink-soft);
}
.is-red .prose h2:not(.part)::before { content: "♥"; color: var(--red); }
.prose h3 { font-size: 1.2rem; margin: 1.8rem 0 .4rem; }
.prose p { margin: 0 0 .9rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.prose li { margin: .3rem 0; }
.prose li::marker { color: var(--ink-soft); }
.prose strong { font-weight: 800; }

blockquote {
  margin: 1.4rem 0; padding: .1rem 0 .1rem 1.1rem;
  border-left: 2px solid var(--red);
  font-style: italic;
}
blockquote strong { font-style: normal; }
blockquote p { margin: .4rem 0; }

table {
  width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem;
  font-size: 1rem; line-height: 1.35;
  border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  font-variant-numeric: lining-nums tabular-nums;
}
.prose table { display: block; overflow-x: auto; }
@media (min-width: 560px) { .prose table { display: table; } }
th {
  text-align: left; font-weight: 700; padding: .45rem .6rem .35rem 0;
  border-bottom: 1px solid currentColor;
  font-variant-caps: all-small-caps; letter-spacing: .06em;
}
td { padding: .4rem .6rem .4rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

/* background & history: facts list as a ruled table, sources small */
.history { margin-top: 3.2rem; }
.history > ul:first-of-type { list-style: none; padding: 0; margin: 0 0 1.6rem; border-top: 1px solid var(--rule); }
.history > ul:first-of-type li { margin: 0; padding: .45rem 0; border-bottom: 1px solid var(--rule); }
.history > ul:first-of-type strong { font-weight: 700; font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--ink-soft); margin-right: .3rem; }
.history h2:not(.part) { font-size: 1.1rem; font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--ink-soft); margin-top: 2rem; }
.history h2:not(.part)::before { content: none; }
.history h2:not(.part) + ul { font-size: .95rem; color: var(--ink-soft); padding-left: 1.1rem; }

/* ---- footer ----------------------------------------------------------- */
.foot { max-width: 42rem; margin: 2rem auto 0; padding: 2rem 20px 3rem; text-align: center; color: var(--ink-soft); font-size: 1.05rem; }
.foot .ornament { margin-bottom: .8rem; font-variant-caps: normal; }
.foot a { color: inherit; }

/* ---- simple pages (language picker, 404) ------------------------------ */
.center { text-align: center; padding-top: 18vh; }
.button { display: inline-block; padding: .5rem 0; font-size: 1.3rem; }

@media print {
  .bar, .jump, .foot, .toc { display: none; }
  body { background: #fff; font-size: 11pt; }
  .playing-card { break-inside: avoid; box-shadow: none; }
}