/* Shared by the four language versions of the homepage. Only declarations
   that were byte-identical in all four live here; anything one page does
   differently stays in that page's own <style>, which is loaded after this
   file and therefore wins.

   Separate from shared.css on purpose: the homepage and the games only have
   five selectors in common (0.4 KB), so folding them together would cost the
   games an extra request to save almost nothing. */

:root {
  --gold-ink: #c8973f;
  --teal-ink: #2e8b84;
  --orange-ink: #d9762e;
  --emerald-ink: #3c8f4c;
  --lime-ink: #8ba13c;
  --redact: #b8382a;
  --olive: #6b7a4f;
  --gold: #c8973f;
  --blue: #3f6fa0;
  --purple: #7a5c99;
  --teal: #2e8b84;
  --orange: #d9762e;
  --indigo: #4b4a9c;
  --pink: #c23b6b;
  --umber: #7a5230;
  --emerald: #3c8f4c;
  --buzzer: #b5379c;
  --lime: #8ba13c;
  --pong: #6b7f8c;
  --pong-ink: #6b7f8c;
  --copilot: #3a7fc4;
  --copilot-ink: #3a7fc4;
  --bus: #1f8fa3;
  --bus-ink: #1f8fa3;
  --ring: #c0562a;
  --ring-ink: #c0562a;
  --mex: #2f7d5b;
  --mex-ink: #2f7d5b;
  --deal: #7a4f9e;
  --deal-ink: #7a4f9e;
  --box: #a4762f;
  --box-ink: #a4762f;
  --mono: ui-monospace, "SFMono-Regular", "Courier New", Courier, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html[data-theme="dark"] {
  --bg: #0d0c0b;
  --text: #f5f0e6;
  --muted: #b8ae9a;
  --border: #35312a;
  --surface: #171613;
}

html[data-theme="light"] {
  --lime-ink: #5f6f28;
  --pong-ink: #4a5b66;
  --copilot-ink: #2c62a0;
  --ring-ink: #a3441f;
  --mex-ink: #256349;
  --deal-ink: #66408a;
  --bus-ink: #14707f;
  --box-ink: #8a6327;
  /* darkened for legibility on light surfaces */ --gold-ink: #8e6b2d;
  --teal-ink: #2a7e78;
  --orange-ink: #ab5d24;
  --emerald-ink: #357f44;
  --bg: #ede6d6;
  --text: #2a2620;
  --muted: #6b6455;
  --border: #d8cfb9;
  --surface: #ffffff;
}

@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) {
      --bg: #ede6d6; --text: #2a2620; --muted: #6b6455; --border: #d8cfb9; --surface: #ffffff;
    }
  }

/* ---------- palettes ---------- */
/* The same four palettes the games got on 10 August. Without these the homepage
   stays paper while every game follows the player's choice, and the overview is
   the first screen anyone opens.

   The variable names here are not the ones in shared.css: this file uses --text,
   --muted and --border where the games use --on-bg-text, --surface-muted and
   --surface-border. Copying the blocks across does not work; they are rewritten.

   Light only, on purpose. All nine pages that load this file hardcode
   data-theme="light" and none of them has a sun/moon button, so a dark block
   here would be unreachable and untested. Give the homepage a theme toggle and
   these need their dark halves, which shared.css already has for the games.

   --surface stays the white from the light block above: the homepage has always
   been brighter than the game surfaces and a palette is no reason to change
   that. Accents are untouched for the same reason as in the games -- the tiles
   carry each game's own colour and that is the point of the overview.

   --muted has to clear 4.5:1 against its own --bg, the threshold for normal-size
   text. Measured on 11 August: paper 4.72 and wine 4.77 already did, ocean sat at
   4.13 and forest at 4.25 and were darkened to 4.52 and 4.53. Those two cleared
   the bar but sat closest to it, so later the same day they went one step further
   to 4.71 and 4.75, which puts all four in the same band as the games. Aim above
   the threshold and not on it: a calculated 4.51 read 4.49 in the browser, so the
   engine rounds differently than the arithmetic does. Check the ratio before
   lightening these; shared.css holds its own set to the same bar. */
[data-palette="ocean"][data-theme="light"] {
  --bg: #dfe9f0;
  --text: #16242f;
  --muted: #536879;
  --border: #b8cddb;
}

[data-palette="forest"][data-theme="light"] {
  --bg: #e2ebe2;
  --text: #17231a;
  --muted: #576a5d;
  --border: #bcd2bf;
}

[data-palette="wine"][data-theme="light"] {
  --bg: #e8e2ef;
  --text: #1f172a;
  --muted: #6b5d7a;
  --border: #cdbedb;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}

.topbar {
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  text-decoration: none;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.topbar-link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lang-switch {
  display: flex;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
}

.lang-switch a {
  text-decoration: none;
  color: var(--muted);
}

.lang-switch a.lang-current {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero {
  padding: 20px 0 48px;
  text-align: center;
}

/* Het logo boven de kop. De maten staan ook in de HTML, zodat de kop niet
   verschuift zodra het plaatje binnen is; hier alleen de plaatsing. De hero is
   gecentreerd, dus auto-marges doen het werk. */
.site-logo {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 14px;
}

.hero h1 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(28px, 6vw, 44px);
  letter-spacing: 1px;
  margin: 0 0 16px;
  line-height: 1.25;
}

.hero h1 .accent {
  color: var(--redact);
  /* The red half of the headline gets its own line. Done here and not with a <br>
     in the markup because the span sits in all four index pages: one rule covers
     them, and a rewritten headline cannot leave a stray break behind. */
  display: block;
}

.hero-sub {
  max-width: 520px;
  margin: 0 auto;
  font-size: 17px;
  color: var(--muted);
}

.hero-sub strong {
  color: var(--text);
  font-weight: 600;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hero-cta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: #f9f0e4;
  background: var(--redact);
  border-radius: 10px;
  padding: 16px 32px;
  transition: transform .15s ease;
}

.hero-cta:active {
  transform: scale(0.97);
}

.hero-cta-alt {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.badge {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 7px 14px;
}

.games {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0 40px;
}

.game-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}

.game-card:active {
  transform: scale(0.98);
}

.game-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--border);
}

.game-body {
  flex: 1;
  min-width: 0;
}

.game-name {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0 0 4px;
  text-transform: none;
}

.game-desc {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.game-arrow {
  font-size: 20px;
  color: var(--muted);
  flex-shrink: 0;
}

/* The favourite star on every tile. A span acting as a button, because the tile
   itself is an <a> and a real <button> inside an anchor is invalid markup with
   quirky tap behaviour on iOS. The hit area is grown with padding, not font
   size: 22px of glyph plus 8px padding is a 38px target. */
.fav-btn {
  flex: 0 0 auto;
  align-self: center;
  font-size: 22px;
  line-height: 1;
  padding: 8px;
  margin: -8px -2px -8px -6px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.fav-btn.is-fav {
  color: var(--gold-ink);
}

.game-card.imposter {
  border-color: var(--redact);
}

.game-card.imposter .game-name {
  color: var(--redact);
}

.game-card.dice {
  border-color: var(--blue);
}

.game-card.dice .game-name {
  color: var(--blue);
}

.game-card.score {
  border-color: var(--gold);
}

.game-card.score .game-name {
  color: var(--gold-ink);
}

.game-card.fingerpicker {
  border-color: var(--purple);
}

.game-card.fingerpicker .game-name {
  color: var(--purple);
}

.game-card.headsup {
  border-color: var(--teal);
}

.game-card.headsup .game-name {
  color: var(--teal-ink);
}

.game-card.bomb {
  border-color: var(--orange);
}

.game-card.bomb .game-name {
  color: var(--orange-ink);
}

.game-card.higherlower {
  border-color: var(--indigo);
}

.game-card.higherlower .game-name {
  color: var(--indigo);
}

.game-card.spinthebottle {
  border-color: var(--pink);
}

.game-card.spinthebottle .game-name {
  color: var(--pink);
}

.game-card.bakplaten {
  border-color: var(--umber);
}

.game-card.bakplaten .game-name {
  color: var(--umber);
}

.game-card.wheeloffortune {
  border-color: var(--emerald);
}

.game-card.wheeloffortune .game-name {
  color: var(--emerald-ink);
}

.game-card.buzzerbeater {
  border-color: var(--buzzer);
}

.game-card.buzzerbeater .game-name {
  color: var(--buzzer);
}

.game-card.tipsy {
  border-color: var(--lime);
}

.game-card.tipsy .game-name {
  color: var(--lime-ink);
}

.game-card.pong {
  border-color: var(--pong);
}

.game-card.pong .game-name {
  color: var(--pong-ink);
}

.game-card.copilot {
  border-color: var(--copilot);
}

.game-card.copilot .game-name {
  color: var(--copilot-ink);
}

.game-card.bussen {
  border-color: var(--bus);
}

.game-card.bussen .game-name {
  color: var(--bus-ink);
}

.game-card.kingsen {
  border-color: var(--ring);
}

.game-card.kingsen .game-name {
  color: var(--ring-ink);
}

.game-card.mexen {
  border-color: var(--mex);
}

.game-card.mexen .game-name {
  color: var(--mex-ink);
}

.game-card.fuckthedealer {
  border-color: var(--deal);
}

.game-card.fuckthedealer .game-name {
  color: var(--deal-ink);
}

.game-card.shutthebox {
  border-color: var(--box);
}

.game-card.shutthebox .game-name {
  color: var(--box-ink);
}

section {
  padding: 40px 0;
  border-top: 1px solid var(--border);
}

h2 {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 24px;
}

.perks {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.perk {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.perk-icon {
  font-size: 20px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}

.perk-body h3 {
  margin: 2px 0 4px;
  font-size: 16px;
}

.perk-body p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.install-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  flex-wrap: wrap;
}

.install-box p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  max-width: 420px;
}

.install-cta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  text-decoration: none;
  white-space: nowrap;
}

footer {
  border-top: 1px solid var(--border);
  padding: 28px 0 44px;
}

.footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.footer-links a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer details {
  margin: 14px 0;
}

details summary {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

details[open] summary {
  color: var(--text);
}

.legal-text {
  white-space: pre-line;
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  max-width: 560px;
}

.footer-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 20px;
}