/* Queen of Chess: La Reina - the standalone pages (privacy, terms, refunds,
   support, and the rules pages under /rules/).

   Deliberately self-contained, as King of Checkers' legal.css is: it repeats
   La Reina's tokens from style.css rather than pulling that file in, which is
   all game-screen layout (a screen that never scrolls) and would fight a
   plain document. Evening only, like King of Checkers' pages. */
:root {
  --bg: #131110;
  --deep: #0d0b0a;
  --surface: #1a1715;
  --surface-2: #221e1b;
  --line: #35302a;
  --line-2: #4a4136;
  --text: #e9ddc7;
  --text-strong: #ecdfc6;
  --text-dim: #b3a68c;
  --text-faint: #8a7f6c;
  --crimson: #c23f5e;          /* garnet: La Reina's colour */
  --crimson-deep: #8c1d3b;
  --gold: #c9a35c;
  --gold-bright: #e8c987;
  --gold-deep: #8f6f35;
  --ok: #72c697;
  --bad: #e0707c;

  /* the board: cream and black in a walnut frame, as in the game */
  --sq-light-1: #ece2cc;
  --sq-light-2: #d8c8a8;
  --sq-dark-1: #36312b;
  --sq-dark-2: #221e1a;
  --grain-light: rgba(60, 40, 20, .06);
  --grain-dark: rgba(255, 240, 215, .06);
  --coord-on-light: rgba(40, 34, 28, .7);
  --coord-on-dark: rgba(236, 226, 204, .7);
  --dot-on-light: rgba(24, 14, 6, .34);
  --dot-on-dark: rgba(236, 226, 204, .38);
  --frame-1: #4a3220;
  --frame-2: #2c1d10;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Spline Sans Mono", "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bg);
  /* the game's felt: two soft glows and a fine weave */
  background-image:
    radial-gradient(120% 60% at 50% -10%, #241e19 0%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .006) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .02) 0 2px, transparent 2px 4px);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Safe-area padding, as King of Checkers learned the hard way: inside an app
   shell these pages fill the screen with nothing above them, and the header
   would sit under the notch. */
.legal-wrap {
  max-width: 46rem; margin: 0 auto;
  padding: max(1.75rem, calc(env(safe-area-inset-top) + 1.25rem))
           max(1.25rem, env(safe-area-inset-right))
           max(4rem, calc(env(safe-area-inset-bottom) + 3rem))
           max(1.25rem, env(safe-area-inset-left));
}

.legal-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 1.1rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.legal-top__logo { display: block; line-height: 0; }
.legal-top__logo img { width: 132px; height: auto; display: block; }
.legal-top__back {
  color: var(--text-dim); text-decoration: none; font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.legal-top__back:hover { color: var(--gold-bright); }

h1 {
  font-family: var(--display);
  font-weight: 600; font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15; margin: 0 0 .4rem; color: var(--gold-bright);
  text-wrap: balance;
}
.legal-updated {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 2.5rem;
}

h2 {
  font-family: var(--display); font-weight: 600;
  font-size: 1.3rem; line-height: 1.3; margin: 2.5rem 0 .75rem; color: var(--gold);
  text-wrap: balance;
}
h3 { font-size: 1rem; margin: 1.75rem 0 .5rem; color: var(--text); }

p, li { color: var(--text-dim); }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: .5rem; }
strong { color: var(--text-strong); font-weight: 600; }
em { color: var(--text); }
a { color: var(--gold); }
a:hover { color: var(--gold-bright); }
code { font-family: var(--mono); font-size: .88em; color: var(--text); }

/* the one thing to read if you read nothing else: a pull quote between two
   faded gold rules, King of Checkers' ledger lines (never a side bar) */
.callout { position: relative; padding: 1.1rem 0; margin: 1.75rem 0; }
.callout::before, .callout::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
.callout::before { top: 0; }
.callout::after { bottom: 0; }
.callout p { font-family: var(--display); font-style: italic; font-size: 1.12em; line-height: 1.55; color: var(--text); }
.callout p:last-child { margin-bottom: 0; }

.legal-foot {
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-faint);
}
.legal-foot a { color: var(--text-dim); }

/* ── the rules pages ── */

/* the page set, one row of links under the header */
.rules-nav {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: -1rem 0 2rem; padding: 0; list-style: none;
}
.rules-nav li { margin: 0; }
.rules-nav a {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); text-decoration: none;
}
.rules-nav a:hover { color: var(--gold-bright); }
.rules-nav a[aria-current="page"] { color: var(--gold); }

/* a facts table that stays readable on a phone */
.facts {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 22px;
  font-size: 14.5px;
}
.facts th, .facts td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
}
.facts th[scope="row"] {
  font-weight: 600;
  color: var(--text);
  width: 30%;
  padding-right: 18px;
}
.facts th[scope="col"] {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.facts .num { font-family: var(--mono); color: var(--text); white-space: nowrap; }
@media (max-width: 520px) {
  .facts, .facts tbody, .facts tr, .facts th, .facts td { display: block; width: auto; }
  .facts th[scope="row"] { border-bottom: 0; padding-bottom: 2px; width: auto; }
  .facts td { padding-top: 0; padding-bottom: 12px; }
  .facts td + td { padding-top: 0; }
  .facts tr { border-bottom: 1px solid var(--line); padding: 8px 0 4px; }
  .facts tr:last-child { border-bottom: 0; }
  .facts th, .facts td { border-bottom: 0; }
  .facts thead { display: none; }
  .facts td[data-label]::before {
    content: attr(data-label) ": "; font-family: var(--mono); font-size: 10px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
  }
}

/* a board diagram: the game's cream and black squares in a walnut frame */
.diagram { margin: 1.5rem auto 2rem; max-width: 360px; }
.diagram__frame {
  padding: 3%; border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .06), transparent 40%),
    repeating-linear-gradient(80deg, rgba(0, 0, 0, .09) 0 3px, transparent 3px 9px),
    linear-gradient(160deg, var(--frame-1), var(--frame-2));
  box-shadow: 0 1px 0 rgba(255, 220, 170, .12) inset, 0 18px 40px -18px rgba(0, 0, 0, .8), 0 4px 12px rgba(0, 0, 0, .4);
}
.diagram__board {
  display: grid; grid-template-columns: repeat(8, 1fr);
  aspect-ratio: 1; border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .5);
}
.dsq { position: relative; aspect-ratio: 1; }
.dsq--l { background: repeating-linear-gradient(75deg, var(--grain-light) 0 2px, transparent 2px 7px), linear-gradient(150deg, var(--sq-light-1), var(--sq-light-2)); }
.dsq--d { background: repeating-linear-gradient(75deg, var(--grain-dark) 0 2px, transparent 2px 7px), linear-gradient(150deg, var(--sq-dark-1), var(--sq-dark-2)); }
.dsq img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .3)); }
/* squares the piece can reach: a dot, or a ring round a piece it can take */
.dsq--to::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28%; height: 28%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--dot-on-light); z-index: 3; }
.dsq--d.dsq--to::after { background: var(--dot-on-dark); }
.dsq--take::after { content: ""; position: absolute; inset: 5%; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--dot-on-light); z-index: 3; }
.dsq--d.dsq--take::after { box-shadow: inset 0 0 0 4px var(--dot-on-dark); }
/* tints, as the lessons use them */
.dsq--from::before { content: ""; position: absolute; inset: 0; background: rgba(240, 205, 120, .3); box-shadow: inset 0 0 0 3px var(--gold-bright); z-index: 1; }
.dsq--good::before { content: ""; position: absolute; inset: 0; background: rgba(90, 190, 130, .45); z-index: 1; }
.dsq--bad::before { content: ""; position: absolute; inset: 0; background: rgba(230, 70, 80, .42); z-index: 1; }
.dsq--info::before { content: ""; position: absolute; inset: 0; background: rgba(120, 160, 240, .42); z-index: 1; }
.dsq--check::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(232, 40, 70, .95) 0%, rgba(232, 40, 70, .55) 38%, rgba(232, 40, 70, 0) 72%); z-index: 1; }
.dsq__c { position: absolute; font: 600 9px/1 var(--mono); z-index: 4; pointer-events: none; }
.dsq__c--f { right: 5%; bottom: 4%; }
.dsq__c--r { left: 6%; top: 5%; }
.dsq--l .dsq__c { color: var(--coord-on-light); }
.dsq--d .dsq__c { color: var(--coord-on-dark); }
.diagram figcaption {
  margin-top: .75rem; font-size: 14px; line-height: 1.55; color: var(--text-dim); text-align: center;
}
.diagram figcaption strong { color: var(--text); }
/* two boards side by side where there is room: before and after */
.diagram-pair { display: grid; grid-template-columns: 1fr; gap: 0 1.25rem; }
@media (min-width: 640px) {
  .diagram-pair { grid-template-columns: 1fr 1fr; }
  .diagram-pair .diagram { max-width: none; margin-inline: 0; }
}

/* La Reina's School, where the same rule is taught on the board */
.lesson-link {
  display: flex; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--gold-deep);
  border-radius: 10px; padding: 14px 16px; margin: 1.75rem 0;
  text-decoration: none;
}
.lesson-link:hover { border-color: var(--gold); }
/* La Reina's crest, as the course card on the home screen wears it */
.lesson-link__crest {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(232, 201, 135, .35), 0 0 16px rgba(194, 63, 94, .35);
}
.lesson-link__crest svg { display: block; width: 100%; height: 100%; }
.lesson-link__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lesson-link__over { font: 500 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--crimson); }
.lesson-link__title { font: 600 16px/1.25 var(--display); color: var(--text); }
.lesson-link__sub { font-size: 13.5px; line-height: 1.45; color: var(--text-dim); }