/* Shared by index.html and the static pages: consent banner, footer, subscription disclosure, and the legal page layout.
   Colours, spacing and type come from tokens.css. Nothing here defines a hex value. */

/* ---- links and buttons that look the same on every page ---- */
.slink { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0; background: none; border: 0; font: inherit; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.slink::after { display: none; }
.slink:focus-visible, .sbtn:focus-visible, .site-credits summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--accent); }
.sbtn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); padding: var(--sp-2) var(--sp-4); font: inherit; font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-tight);
  background: var(--paper-100); color: var(--ink); border: 1px solid var(--ink); border-radius: var(--r-md); cursor: pointer; }
.sbtn::after { display: none; }
.sbtn:active { transform: scale(.97); }
.sbtn-text { border-color: transparent; background: transparent; }
.todo { background: var(--accent); color: var(--on-accent); padding: 0 var(--sp-1); border-radius: var(--r-sm); font-weight: 700; }

/* ---- consent banner. On the home screen only: it is hidden whenever a game, results or any other screen has taken over ---- */
.consent { position: fixed; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); z-index: 7; max-width: 760px; margin: 0 auto; background: var(--paper-100); color: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--r-md); box-shadow: var(--elev); font-family: var(--font-body); font-size: var(--fs-14); line-height: var(--lh-body); }
.consent[hidden] { display: none; }
#menu.hidden ~ .consent { display: none; }
.consent-in { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); }
.consent-text { flex: 1; min-width: 0; }
.consent h2 { margin: 0 0 var(--sp-1); font-family: var(--font-display); font-size: var(--fs-16); font-weight: 700; letter-spacing: -0.02em; line-height: var(--lh-tight); }
.consent p { margin: 0; color: var(--ink-2); }
.consent .consent-state { margin-top: var(--sp-1); color: var(--ink); font-weight: 700; }
.consent .slink { min-height: 0; font-size: inherit; }
.consent-btns { display: flex; gap: var(--sp-2); flex: none; }
@media (max-width: 640px) {
  .consent { left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2); }
  .consent-in { flex-direction: column; align-items: stretch; gap: var(--sp-3); padding: var(--sp-3); }
  .consent-btns { flex-direction: column; }
  .consent-btns .sbtn { width: 100%; }
}

/* ---- footer ---- */
.site-footer { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--paper-300); font-family: var(--font-body); font-size: var(--fs-14); color: var(--ink-2); }
.site-links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); list-style: none; margin: 0; padding: 0; }
.site-links .slink { font-size: var(--fs-14); }
.site-credits { margin-top: var(--sp-3); }
.site-credits summary { cursor: pointer; font-weight: 700; color: var(--ink); min-height: var(--touch); display: flex; align-items: center; }
.site-credits ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.site-credits .slink { min-height: 0; font-size: inherit; }
.site-attr { margin: var(--sp-3) 0 0; }
.site-attr .slink { min-height: 0; font-size: inherit; }
.site-copy { margin: var(--sp-3) 0 0; }

/* ---- subscription disclosure, rendered next to a buy button ---- */
.subdisc { flex-basis: 100%; font-size: var(--fs-14); color: var(--ink-2); border-top: 1px solid var(--paper-300); padding-top: var(--sp-3); }
.subdisc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.subdisc li > b { display: inline; color: var(--ink); margin-right: var(--sp-1); }
.subdisc .todo { color: var(--on-accent); }
.subdisc-note { margin: 0 0 var(--sp-2); font-weight: 700; color: var(--ink); }
.subdisc .slink { min-height: 0; font-size: inherit; }

/* ---- static legal pages ---- */
body.legal { margin: 0; background: var(--paper-200); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-16); line-height: var(--lh-body); }
body.legal * { box-sizing: border-box; }
.lp { max-width: 720px; margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-8); }
.lp-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); min-height: var(--touch); }
.lp-top .wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-20); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; line-height: 1; }
.lp h1 { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-28); letter-spacing: -0.02em; line-height: var(--lh-tight); }
.lp h2 { margin: var(--sp-6) 0 var(--sp-2); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-20); letter-spacing: -0.02em; line-height: var(--lh-tight); }
.lp p, .lp ul { margin: 0 0 var(--sp-3); max-width: 65ch; }
.lp ul { padding-left: var(--sp-5); }
.lp li { margin-bottom: var(--sp-1); }
.lp .meta { color: var(--ink-2); font-size: var(--fs-14); }
.lp .note { padding: var(--sp-3) var(--sp-4); background: var(--paper-100); border: 1px solid var(--paper-300); border-radius: var(--r-md); font-size: var(--fs-14); max-width: 65ch; }
.lp code { font-family: var(--font-num); font-size: var(--fs-14); background: var(--paper-100); border: 1px solid var(--paper-300); border-radius: var(--r-sm); padding: 0 var(--sp-1); }
.lp table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4); font-size: var(--fs-14); }
.lp th, .lp td { text-align: left; vertical-align: top; padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom: 1px solid var(--paper-300); }
.lp th { font-size: var(--fs-12); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.lp a:not(.slink):not(.wordmark) { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.lp a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--accent); }
body.legal .site-footer { max-width: 720px; margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-8); border-top: 1px solid var(--paper-300); }
@media (max-width: 640px) { .lp table, .lp thead, .lp tbody, .lp tr, .lp th, .lp td { display: block; } .lp thead { display: none; } .lp td { border: 0; padding: 0 0 var(--sp-1); } .lp td:first-child { font-weight: 700; } .lp tr { border-bottom: 1px solid var(--paper-300); padding: var(--sp-2) 0; } }