/* Spelletjes in the new site's design: calm cards on the site's
   background, large type and targets, the site's fonts and colours. */
.gm { font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #1f2937; padding-bottom: 40px; }
.gm a { color: inherit; }
.gm-crumbs { margin-bottom: 14px; }

.gm-hero { margin: 8px 0 30px; padding: 34px 40px; border-radius: 18px; background: #eef4f0; border-top: 5px solid #8fc1a4; box-shadow: 0 10px 30px rgba(31, 41, 55, .08); }
.gm-hero h1 { font: 700 44px/1.1 Georgia, 'Times New Roman', serif; margin: 0 0 6px; color: #1a1a1a; }
/* The photo beside the introduction (Pexels, free to use), above it on a phone. */
.gm-hero--photo { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 34px; align-items: start; }
.gm-hero--photo > :not(.gm-hero__photo) { grid-column: 1; }
.gm-hero__photo { grid-column: 2; grid-row: 1 / span 4; width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 14px; box-shadow: 0 8px 22px rgba(31, 41, 55, .14); }
.gm-hero__sub { font: italic 400 22px/1.4 Georgia, serif; color: #2f5d45; margin: 0 0 14px; }
.gm-hero__text { font-size: 18px; line-height: 1.6; max-width: 40em; margin: 0 0 18px; color: #374151; }
.gm-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-jump a { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1.5px solid #cfe2d6; font-weight: 600; font-size: 16px; text-decoration: none; }
.gm-jump a:hover { border-color: #2f5d45; }

.gm-group { margin: 36px 0 0; scroll-margin-top: 150px; }
.gm-group__title { display: inline-block; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 3px solid #8fc1a4; font: 700 15px/1.2 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.gm-group__intro { margin: 4px 0 14px; color: #4b5563; font-size: 17px; }
.gm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

.gm-card { display: flex; flex-direction: column; gap: 6px; min-height: 132px; padding: 18px 20px; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(31, 41, 55, .08); text-decoration: none; border: 1.5px solid transparent; }
a.gm-card:hover, a.gm-card:focus-visible { border-color: #2f5d45; }
.gm-card__title { font: 700 21px/1.25 Georgia, 'Times New Roman', serif; color: #1a1a1a; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: anywhere; }
.gm-card__line { font-size: 16px; line-height: 1.45; color: #4b5563; flex: 1; }
.gm-card__go { font-weight: 700; color: #2f5d45; }
.gm-card--today { border-color: #f2c318; }
.gm-card--today .gm-card__icon { background: #fff3c4; }
.gm-card--soon { background: #f7f6f2; box-shadow: none; border: 1.5px dashed #d8d3c7; }
.gm-card--soon .gm-card__title { color: #6b7280; }
.gm-card__icon { display: block; margin: -4px -6px 6px; padding: 8px; border-radius: 10px; background: #eef4f0; }
.gm-card__icon svg { display: block; width: 128px; height: 96px; margin: 0 auto; }
.gm-card--soon .gm-card__icon { background: #efece4; }
.gm-card--soon .gm-card__icon svg { opacity: .55; filter: saturate(.5); }
.gm-card__soon { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: #ece8df; color: #6b6255; font-size: 13px; font-weight: 700; }

.gm-game__head { margin: 8px 0 16px; }
.gm-game__group { margin: 0 0 4px; font: 700 13px/1.2 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.gm-game__group a { text-decoration: none; color: #2f5d45; }
.gm-game__head h1 { font: 700 38px/1.15 Georgia, 'Times New Roman', serif; margin: 0 0 10px; color: #1a1a1a; }
.gm-game__title { display: flex; align-items: center; gap: 16px; margin: 0 0 12px; }
.gm-game__title h1 { margin: 0; }
.gm-game__icon { flex: none; padding: 8px 10px; border-radius: 12px; background: #eef4f0; }
.gm-game__icon svg { display: block; width: 88px; height: 66px; }
.gm-game__how { font-size: 18px; line-height: 1.55; max-width: 46em; margin: 0; color: #374151; }
.gm-more { margin: 36px 0 0; padding: 24px 0 0; border-top: 1px solid #e7e4dd; }
.gm-more .gm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gm-more__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.gm-more__all { font-weight: 700; font-size: 17px; color: #2f5d45; text-decoration: none; white-space: nowrap; }
.gm-more__all:hover { text-decoration: underline; }
/* The latest SenNet Magazine: its articles as a numbered list, and a line to subscribe. */
.gm-mag { margin: 32px 0 0; padding: 16px 20px; border-radius: 14px; background: #fff3ee; border-left: 4px solid #f6af90; }
.gm-mag[hidden] { display: none; }
.gm-mag__list { list-style: none; margin: 0; padding: 0; }
.gm-mag__list li + li { border-top: 1px solid #f6d3c3; }
.gm-mag__item { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: 4px; padding: 9px 0; font-size: 17px; line-height: 1.45; color: #1f2937; text-decoration: none; }
.gm-mag__item b { color: #c2410c; font-family: Georgia, serif; }
.gm-mag__item:hover span { text-decoration: underline; }
.gm-mag__join { margin: 12px 0 0; font-size: 16px; color: #4b5563; }
.gm-mag__join a { font-weight: 700; color: #2f5d45; }
/* The site's daily features, a row of plain tiles under "Speel ook". */
.gm-daily { margin: 32px 0 0; }
.gm-daily__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gm-daily__item { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid #e7e4dd; background: #fff; text-decoration: none; }
.gm-daily__item:hover, .gm-daily__item:focus-visible { border-color: #2f5d45; }
.gm-daily__title { font: 700 18px/1.3 Georgia, 'Times New Roman', serif; color: #2f5d45; }
.gm-daily__line { font-size: 15px; line-height: 1.45; color: #4b5563; }
@media (max-width: 960px) { .gm-daily__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .gm-daily__list { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .gm-more .gm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gm-game__more { margin: 18px 0 0; font-weight: 700; font-size: 17px; }
/* The site's header stays at the top on a wide screen: what a game scrolls into view lands below it. */
@media (min-width: 760px) { .sp, .sp * { scroll-margin-top: 184px; } }
/* On a wide screen an advertising column beside the game, keeping its place while you scroll. */
.gm-game__side { display: none; }
@media (min-width: 1180px) {
  .gm-game__play:has(.gm-game__side) { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
  .gm-game__side { display: block; position: sticky; top: 184px; }
  .gm-game__side .ad-container { margin: 0 !important; }
}
.gm-game__more a { color: #2f5d45; text-decoration: none; }

/* Without the site's frame (a workstation): a plain page. */
.gm-plain { margin: 0; background: #fbf9f4; }
.gm-plain .gm { max-width: 1180px; margin: 0 auto; padding: 24px 16px; }

@media (max-width: 760px) {
  .gm-hero { padding: 24px 20px; }
  .gm-hero--photo { display: block; }
  .gm-hero__photo { display: block; height: 180px; margin: 0 0 18px; }
  .gm-hero h1 { font-size: 34px; }
  .gm-hero__text { font-size: 17px; }
  .gm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .gm-card { min-height: 0; padding: 14px; }
  .gm-card__title { font-size: 19px; }
  .gm-game__head h1 { font-size: 30px; }
  .gm-card__icon { margin: -2px -2px 4px; padding: 8px 4px; }
  .gm-card__icon svg { width: 96px; height: 72px; }
  .gm-game__title { gap: 12px; }
  .gm-game__icon { padding: 6px 7px; }
  .gm-game__icon svg { width: 64px; height: 48px; }
}
@media (max-width: 420px) {
  .gm-card__title { font-size: 17px; }
  .gm-card__line { font-size: 15px; }
}

/* Around every game (client/core/play.js): level, actions, the board, the end. */
.sp { margin: 0 0 8px; }
.sp-bar:empty { display: none; }
.sp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
/* The controls look like the site's: a black round button that turns blue under the
   pointer (Zoeken, Gratis abonneren), and a white one with a dark edge (an article's share
   buttons). The section's green stays the accent. */
.sp-levels { display: inline-flex; padding: 4px; border-radius: 999px; background: #f1efe9; gap: 4px; }
.sp-level { -webkit-tap-highlight-color: transparent; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font: 700 17px/1 Inter, system-ui, sans-serif; color: #1f2937; cursor: pointer; }
.sp-level[aria-checked="true"] { background: #1a1a1a; color: #fff; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-button { min-height: 44px; padding: 0 20px; white-space: nowrap; -webkit-tap-highlight-color: transparent; border: 1.5px solid #1a1a1a; border-radius: 999px; background: #1a1a1a; color: #fff; font: 700 17px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.sp-button:hover:not(:disabled) { background: #476eae; border-color: #476eae; }
.sp-button--quiet { background: #fff; color: #1f2937; border-color: #1f2937; }
.sp-button--quiet:hover:not(:disabled) { background: #1f2937; border-color: #1f2937; color: #fff; }
.sp-button:focus-visible, .sp-level:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.sp-button:disabled { opacity: .45; cursor: default; }
/* The numbered series: which puzzle this is, how many are solved, the list to pick from. */
/* The numbered series: which one is on the board, and the numbers around it. */
.sp-series { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 14px; padding: 10px 14px; border: 1.5px solid #cfe2d6; border-radius: 16px; background: #fff; }
.sp-series__head { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.sp-series__now { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.sp-series__number { font: 700 20px/1.2 Georgia, 'Times New Roman', serif; color: #1a1a1a; }
.sp-series__state { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #f3f4f6; color: #374151; font: 600 14px/1.3 Inter, system-ui, sans-serif; }
.sp-series__state.is-solved { background: #e3f1e8; color: #2f5d45; }
.sp-series__state.is-solved::before { content: '✓ '; }
.sp-series__state.is-started { background: #fff3c4; color: #6b4f00; }
.sp-series__state.is-lost { background: #fdecec; color: #9b2c2c; }
.sp-series__progress { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: #4b5563; }
.sp-series__bar { display: block; width: 100px; height: 8px; border-radius: 999px; background: #e7ece9; overflow: hidden; }
.sp-series__bar span { display: block; height: 100%; border-radius: inherit; background: #3f8a5f; }
.sp-series__row { flex-basis: 100%; display: flex; gap: 6px; min-width: 0; }
.sp-series__rail { flex: 1 1 auto; display: flex; gap: 6px; min-width: 0; }
.sp-series__rail .sp-series__item { position: relative; flex: 1 1 0; max-width: 56px; min-height: 46px; border-radius: 12px; font-size: 18px; }
.sp-series__rail .sp-series__item::after { position: absolute; right: 3px; top: 2px; font-size: 11px; line-height: 1; }
.sp-series__rail .is-solved::after { content: '✓'; }
.sp-series__rail .is-started::after { content: '…'; }
.sp-series__rail .is-lost::after { content: '✗'; }
.sp-series__rail .sp-series__item.is-current { background: #1a1a1a; border-color: #1a1a1a; color: #fff; outline: 0; box-shadow: 0 0 0 3px #f2c318; }
/* Two tabs: the puzzle of the day (yellow, a row of the last eight days) or the numbered
   series (green, a row of numbers). The one pressed is what the board shows. */
.sp-series__tabs { flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: #f1efe9; }
.sp-series__tab { min-height: 46px; padding: 0 10px; border: 0; border-radius: 11px; background: transparent; color: #374151; font: 700 16px/1.15 Inter, system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-series__tab span { color: #d49b00; }
.sp-series__tab--series[aria-pressed="true"] { background: #1a1a1a; color: #fff; }
.sp-series__tab--day[aria-pressed="true"] { background: #f2c318; color: #1a1a1a; }
.sp-series__tab--day[aria-pressed="true"] span { color: #1a1a1a; }
.sp-series__tab:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.sp-series.is-day { border-color: #f2c318; background: #fffbea; }
.sp-series__month { margin: 0; font-size: 14px; color: #5b4a00; }
.sp-series:not(.is-day) .sp-series__month, .sp-series:not(.is-day) .sp-series__days,
.sp-series.is-day .sp-series__progress, .sp-series.is-day .sp-series__row, .sp-series.is-day .sp-series__panel { display: none; }
.sp-series__days { flex-basis: 100%; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.sp-series__day { position: relative; min-height: 46px; padding: 0 4px; border: 1.5px solid #f0d58a; border-radius: 12px; background: #fff; color: #1f2937; font: 700 15px/1.15 Inter, system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-series__day::after { position: absolute; right: 4px; top: 3px; font-size: 11px; line-height: 1; }
.sp-series__day.is-solved { background: #eef4f0; border-color: #8fc1a4; color: #2f5d45; }
.sp-series__day.is-solved::after { content: '✓'; }
.sp-series__day.is-started { background: #fff7e0; }
.sp-series__day.is-started::after { content: '…'; }
.sp-series__day.is-lost { background: #fdf1f1; border-color: #f0c2c2; color: #9b2c2c; }
.sp-series__day.is-lost::after { content: '✗'; }
.sp-series__day.is-current { background: #f2c318; border-color: #f2c318; color: #1a1a1a; }
.sp-series__day:focus-visible { outline: 3px solid #2f5d45; outline-offset: 2px; }
.sp-series__pick { flex: none; min-height: 46px; padding: 0 14px; border: 1.5px solid #1f2937; border-radius: 12px; background: #fff; color: #1f2937; font: 700 16px/1 Inter, system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-series__pick:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.sp-actions .sp-button { min-height: 40px; padding: 0 14px; font-size: 15px; }
@media (max-width: 560px) {
  .sp-series { padding: 10px; }
  .sp-series__progress { display: none; }
  .sp-series__days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sp-series__tab { font-size: 15px; }
  .sp-series__pick { padding: 0 10px; }
  .sp-series__pick-more { display: none; }
  .sp-series__rail .sp-series__item { max-width: none; }
}
.sp-series__panel { flex-basis: 100%; padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(31, 41, 55, .08); }
.sp-series__panel[hidden] { display: none; }
.sp-series__summary { margin: 0 0 8px; font-size: 17px; }
.sp-series__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; font-size: 15px; color: #4b5563; }
.sp-series__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sp-series__legend .sp-series__item { display: inline-grid; place-items: center; min-height: 28px; min-width: 28px; font-size: 14px; cursor: default; }
.sp-series__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; padding: 2px; }
.sp-series__item { min-height: 48px; border: 1.5px solid #cfe2d6; border-radius: 10px; background: #fff; font: 700 17px/1 Inter, system-ui, sans-serif; color: #1f2937; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-series__item.is-solved { background: #eef4f0; border-color: #8fc1a4; color: #2f5d45; }
.sp-series__list .is-solved::after { content: ' ✓'; }
.sp-series__item.is-started { background: #fff7e0; border-color: #f0d58a; color: #7a5a00; }
.sp-series__list .is-started::after { content: '…'; }
.sp-series__item.is-lost { background: #fdf1f1; border-color: #f0c2c2; color: #9b2c2c; }
.sp-series__list .is-lost::after { content: ' ✗'; }
.sp-series__item.is-current { outline: 3px solid #1a1a1a; outline-offset: 1px; }
.sp-series__item:focus-visible { outline: 3px solid #f2b705; }
/* "Start over?" and the like. On a modal host it stands in the middle over a dimmed page; elsewhere above the board. */
.sp-confirm { position: static; width: auto; margin: 0 0 14px; padding: 0; border: 1.5px solid #f0d58a; border-radius: 14px; background: #fff7e0; color: #1f2937; }
.sp-confirm__card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; }
.sp-confirm__text { margin: 0 auto 0 0; font-size: 18px; font-weight: 600; }
.sp-confirm__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-confirm:modal { position: fixed; width: min(460px, calc(100vw - 32px)); margin: auto; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); font-family: Inter, system-ui, sans-serif; }
.sp-confirm:modal .sp-confirm__card { display: block; padding: 24px 24px 20px; }
.sp-confirm:modal .sp-confirm__text { margin: 0 0 20px; font: 600 21px/1.4 Inter, system-ui, sans-serif; }
.sp-confirm:modal .sp-confirm__buttons { flex-direction: column; }
.sp-confirm:modal .sp-button { width: 100%; white-space: normal; line-height: 1.2; justify-content: center; min-height: 52px; font-size: 18px; }
.sp-confirm::backdrop { background: rgba(20, 30, 25, .55); }
.sp-stage { position: relative; }
.sp-board { padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(31, 41, 55, .08); touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.sp-done { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; border-radius: 16px; background: rgba(251, 249, 244, .82); }
.sp-done[hidden] { display: none; }
.sp-done__card { max-width: 460px; padding: 28px 30px; border-radius: 18px; background: #fff; box-shadow: 0 14px 40px rgba(31, 41, 55, .18); border-top: 5px solid #8fc1a4; text-align: center; }
.sp-done__title { font: 700 34px/1.1 Georgia, 'Times New Roman', serif; margin: 0 0 10px; color: #1a1a1a; }
.sp-done__text { font-size: 19px; line-height: 1.5; margin: 0 0 6px; }
.sp-done__best { font-weight: 700; color: #2f5d45; margin: 0 0 18px; }
.sp-done__best:empty { display: none; }
.sp-done__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* The one thing to do next across the whole width; the others under it, sharing a row - one alone takes it all. */
.sp-done__actions > .sp-button { flex: 1 1 140px; min-height: 48px; padding: 6px 12px; white-space: normal; line-height: 1.2; }
.sp-done__actions > .sp-button:not(.sp-button--quiet) { order: -1; flex-basis: 100%; min-height: 54px; font-size: 18px; }
.sp-done__actions > [hidden] { display: none; }
.sp-report { margin: 14px 0 0; font-size: 16px; text-align: right; }
.sp-report__link { color: #4b5563; text-decoration: underline; text-underline-offset: 3px; }
.sp-report__link::before { content: '⚑ '; color: #9b2c2c; text-decoration: none; }
.sp-account { margin: 18px 0 0; }
.sp-account__guest { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 2px solid #2f5d45; border-radius: 16px; background: #eef4f0; color: #1f2937; }
.sp-account__guest[hidden] { display: none; }
.sp-account__icon { flex: none; margin-top: 2px; color: #2f5d45; }
.sp-account__text p { margin: 0 0 10px; font-size: 17px; line-height: 1.5; }
.sp-account__text .sp-account__title { margin-bottom: 6px; font: 700 20px/1.3 Georgia, 'Times New Roman', serif; color: #1a1a1a; }
.sp-account__text .sp-account__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.sp-account__buttons .sp-button { display: inline-flex; align-items: center; text-decoration: none; color: #fff; }
.sp-account__buttons .sp-button--quiet { color: #1f2937; }
.sp-account__buttons .sp-button--quiet:hover { color: #fff; }
.sp-account__member { margin: 0; font-size: 15px; line-height: 1.5; color: #2f5d45; }
.sp-account__member::before { content: '✓ '; font-weight: 700; }
@media (max-width: 560px) {
  .sp-account__guest { padding: 14px; gap: 10px; }
  .sp-account__icon { display: none; }
  .sp-account__buttons .sp-button { flex: 1 1 100%; justify-content: center; }
}
.sp-say { min-height: 1.5em; margin: 12px 0 0; font-size: 18px; color: #374151; }

@media (max-width: 760px) {
  .sp-bar { flex-direction: column; align-items: stretch; }
  .sp-levels { display: flex; }
  .sp-level { flex: 1; padding: 0 8px; }
  .sp-playbar { justify-content: stretch; }
  .sp-actions { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .sp-actions .sp-button { padding: 4px 8px; white-space: normal; line-height: 1.15; }
  .sp-board { padding: 10px; border-radius: 12px; }
}

/* Help: the two buttons, the rules window (guide.js) and the guided tour. */
/* About the game, one row above it: how to play, the rules, settings, results, print. */
.sp-help { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.sp-help__button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1.5px solid #1f2937; border-radius: 999px; background: #fff; color: #1f2937; font: 700 16px/1 Inter, system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-help__button[hidden] { display: none; }
.sp-help__button:hover { background: #1f2937; color: #fff; }
.sp-help__button:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.sp-help__button > span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #8fc1a4; color: #1a1a1a; font-size: 13px; }
/* While playing, right above the board: Hulp, undo, restart, the clock. */
.sp-playbar { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.sp-help[hidden] { display: none; }
.sp-rules { width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); color: #1f2937; font-family: Inter, system-ui, sans-serif; }
.sp-rules[open] { display: flex; flex-direction: column; }
.sp-rules::backdrop { background: rgba(20, 30, 25, .55); }
.sp-rules__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #e7e4dd; }
.sp-rules__head h2 { margin: 0; font: 700 26px/1.2 Georgia, 'Times New Roman', serif; }
.sp-rules__close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #eef4f0; font-size: 20px; cursor: pointer; flex: none; }
.sp-rules__body { overflow-y: auto; padding: 6px 22px 10px; font-size: 18px; line-height: 1.6; }
.sp-rules__body h3 { margin: 18px 0 6px; font: 700 20px/1.3 Georgia, 'Times New Roman', serif; }
.sp-rules__body p { margin: 0 0 10px; }
.sp-rules__body ul { margin: 0 0 10px; padding-left: 22px; }
.sp-rules__body li { margin: 0 0 6px; }
.sp-rules__intro { font-size: 19px; }
.sp-rules__page a { color: #2f5d45; font-weight: 700; }
.sp-rules__foot { padding: 14px 22px; border-top: 1px solid #e7e4dd; text-align: right; }
.sp-tour { position: fixed; inset: 0; z-index: 2147483000; }
.sp-tour.is-plain { background: rgba(20, 30, 25, .55); }
.sp-tour__hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(20, 30, 25, .55); outline: 3px solid #f2c318; pointer-events: none; transition: all .25s ease; }
.sp-tour__bubble { position: fixed; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); font-family: Inter, system-ui, sans-serif; outline: none; }
.sp-tour__label { margin: 0 0 2px; font: 700 19px/1.2 Georgia, 'Times New Roman', serif; color: #2f5d45; }
.sp-tour__label::before { content: '?'; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: #2f5d45; color: #fff; font: 700 14px/1 Inter, system-ui, sans-serif; vertical-align: 2px; }
.sp-tour__count { font: 600 14px/1 Inter, system-ui, sans-serif; color: #4b5563; margin-left: 4px; }
.sp-tour__title { margin: 0 0 6px; font: 700 22px/1.25 Georgia, 'Times New Roman', serif; color: #1a1a1a; }
.sp-tour__title:empty { display: none; }
.sp-tour__text { margin: 0 0 14px; font-size: 18px; line-height: 1.5; color: #1f2937; }
.sp-tour__buttons { display: flex; justify-content: flex-end; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .sp-tour__hole { transition: none; } }
.gm-rules { max-width: 46em; font-size: 19px; line-height: 1.65; }
.gm-rules h3 { margin: 26px 0 8px; font: 700 24px/1.25 Georgia, 'Times New Roman', serif; }
.gm-rules p { margin: 0 0 12px; }
.gm-rules ul { margin: 0 0 12px; padding-left: 24px; }
.gm-rules li { margin: 0 0 8px; }
.gm-rules__play { margin: 26px 0 0; }
.gm-rules__play .sp-button { display: inline-flex; align-items: center; text-decoration: none; }

/* "Kijk hoe het gaat" (demo.js): a practice game in a window, a drawn pointer, a line of explanation. */
.sp-tour__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.sp-tour__close { flex: none; width: 40px; height: 40px; margin: -6px -8px 0 0; border: 0; border-radius: 50%; background: #eef4f0; color: #1f2937; font-size: 18px; cursor: pointer; }
.sp-tour__close:focus-visible { outline: 3px solid #f2b705; }
.sp-tour__buttons [hidden] { display: none; }
.sp-tour__choice { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #e7e4dd; }
.sp-tour__choice-text { margin: 0 0 8px; font-size: 15px; color: #4b5563; }
.sp-tour__choice-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-tour__choice-buttons .sp-button { padding: 0 10px; white-space: normal; line-height: 1.15; min-height: 46px; }
.sp-tour.is-last .sp-tour__choice { border-top: 0; padding-top: 0; }
.sp-tour.is-last .sp-tour__choice-text { font-size: 17px; font-weight: 700; color: #1f2937; }
.sp-demo { width: min(980px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); color: #1f2937; font-family: Inter, system-ui, sans-serif; background: #fbf9f4; }
.sp-demo[open] { display: flex; flex-direction: column; }
.sp-demo::backdrop { background: rgba(20, 30, 25, .6); }
.sp-demo__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #e7e4dd; background: #fff; }
.sp-demo__head h2 { margin: 0; font: 700 22px/1.2 Georgia, 'Times New Roman', serif; }
.sp-demo__stage { overflow: auto; overscroll-behavior: contain; padding: 14px; flex: 1 1 auto; min-height: 0; }
/* While a window is open the page behind it stays put; scrolling inside it never runs on into the page. */
html:has(dialog.sp-demo[open]), html:has(dialog.sp-rules[open]) { overflow: hidden; }
.sp-demo, .sp-rules, .sp-rules__body { overscroll-behavior: contain; }
.sp-demo__board { pointer-events: auto; }
.sp-tour__nudge { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fdecec; border: 1.5px solid #e8a6a6; color: #7a1f1f; font-size: 17px; line-height: 1.45; }
.sp-tour__nudge { margin: 0 0 12px; }
.sp-tour__nudge[hidden] { display: none; }
.sp-button.is-calling { animation: sp-call 1s ease-in-out 3; }
@keyframes sp-call { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(242, 195, 24, .7); } }
.sp-demo__next:not(:disabled) { animation: sp-breathe 2.4s ease-in-out infinite; }
@keyframes sp-breathe { 0%, 100% { box-shadow: 0 0 0 3px rgba(242, 195, 24, .55); } 50% { box-shadow: 0 0 0 8px rgba(242, 195, 24, .35); } }
@media (prefers-reduced-motion: reduce) { .sp-button.is-calling, .sp-demo__next:not(:disabled) { animation: none; } }
.sp-demo__pointer { position: fixed; left: 0; top: 0; z-index: 2147483001; pointer-events: none; transition: transform .6s cubic-bezier(.3, .7, .3, 1); margin: -3px 0 0 -5px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.sp-demo__pointer[hidden] { display: none; }
.sp-demo__ripple { position: absolute; left: -14px; top: -14px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid #f2c318; opacity: 0; }
.sp-demo__pointer.is-tapping .sp-demo__ripple { animation: sp-tap .5s ease-out; }
@keyframes sp-tap { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .sp-demo__pointer { transition: transform .15s linear; } }
.sp-demo__next[hidden] { display: none; }
.sp-demo__head, .sp-demo__coach, .sp-demo__foot { flex-shrink: 0; }
/* The explanation box: which step, what happens, and the one button to tap. */
.sp-demo__coach { padding: 14px 18px 16px; background: #fff3c4; border-top: 4px solid #f2c318; }
.sp-demo__step { margin: 0 0 4px; font: 700 15px/1.3 Inter, system-ui, sans-serif; color: #5b4a00; text-transform: uppercase; letter-spacing: .04em; }
.sp-demo__step:empty { display: none; }
.sp-demo__say { min-height: 2.9em; margin: 0 0 12px; font-size: 21px; line-height: 1.45; font-weight: 700; color: #1a1a1a; }
.sp-demo__go { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.sp-demo__next { min-width: 220px; min-height: 58px; font-size: 22px; border-width: 3px; }
.sp-demo__next[hidden] { display: none; }
.sp-demo__hand { display: inline-flex; animation: sp-point 1.2s ease-in-out infinite; }
/* The drawn hand points left; mirrored it points at the button beside it. */
.sp-demo__hand svg { transform: scaleX(-1); }
.sp-demo__go:has(.sp-demo__next:disabled) .sp-demo__hand, .sp-demo.is-done .sp-demo__hand { visibility: hidden; animation: none; }
@keyframes sp-point { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
.sp-demo.is-done .sp-demo__go { display: none; }
.sp-demo.is-done .sp-demo__say { margin: 0; }
.sp-demo__coach .sp-demo__callout { max-width: 460px; margin-left: auto; }
.sp-demo__foot .sp-demo__callout { flex-basis: 100%; margin-bottom: 8px; }
.sp-demo__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 18px; background: #fff; border-top: 1px solid #e7e4dd; }
.sp-demo__more-text { margin: 0; font-size: 15px; color: #4b5563; }
.sp-demo.is-done .sp-demo__more-text { font-size: 17px; font-weight: 700; color: #1f2937; }
.sp-demo__more { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-demo__more .sp-button { min-height: 42px; padding: 0 14px; font-size: 16px; }
.sp-demo.is-done .sp-demo__more .sp-button { min-height: 52px; font-size: 18px; }
/* The balloon pointing at the button to tap. */
.sp-demo__callout { position: relative; margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; background: #1f3d2e; color: #fff; font-size: 18px; line-height: 1.45; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); animation: sp-pop .25s ease-out; }
.sp-demo__callout[hidden] { display: none; }
.sp-demo__callout p { margin: 0; }
.sp-demo__callout strong { color: #ffe27a; }
.sp-demo__arrow { position: absolute; top: 100%; width: 0; height: 0; margin-left: -14px; border: 14px solid transparent; border-top-color: #1f3d2e; border-bottom: 0; }
@keyframes sp-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sp-demo__hand, .sp-demo__callout { animation: none; } }
@media (max-width: 560px) {
  .sp-demo__coach { padding: 12px 14px 14px; }
  .sp-demo__say { font-size: 19px; }
  .sp-demo__next { flex: 1; min-width: 0; }
  .sp-demo__foot { padding: 8px 14px; justify-content: stretch; }
  .sp-demo__more-text { flex-basis: 100%; }
  .sp-demo__more { flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .sp-demo__more .sp-button, .sp-demo.is-done .sp-demo__more .sp-button { padding: 0 6px; font-size: 14px; white-space: normal; line-height: 1.15; }
}

/* Beside the board (extras.js): Hulp and its menu, the clock, the tools under the board,
   the settings and results windows, sharing and printing. */
.sp-actions { position: relative; align-items: center; }
/* A board's own layers (tiles, cards) stay inside it, under the site's sticky header. */
.sp-board { isolation: isolate; }
.sp-clock { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; background: #f1efe9; font: 700 16px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #374151; }
.sp-clock[hidden], .sp-hulp[hidden] { display: none; }
.sp-hulp { border-color: #e0b100; background: #fff8dc; color: #1a1a1a; }
.sp-hulp:hover:not(:disabled) { background: #f2c318; border-color: #f2c318; color: #1a1a1a; }
.sp-helpmenu { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: min(340px, calc(100vw - 32px)); padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 12px 36px rgba(0, 0, 0, .22); border: 1.5px solid #e7e4dd; }
.sp-helpmenu__title { margin: 4px 8px 8px; font: 700 16px/1.3 Inter, system-ui, sans-serif; color: #1a1a1a; }
.sp-helpmenu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 0 0 6px; padding: 10px 12px; border: 1.5px solid #1f2937; border-radius: 14px; background: #fff; text-align: left; cursor: pointer; font: inherit; color: #1f2937; -webkit-tap-highlight-color: transparent; }
.sp-helpmenu button:hover, .sp-helpmenu button:focus-visible { background: #fff8dc; border-color: #e0b100; outline: none; }
.sp-helpmenu__sign { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff3c4; font-size: 17px; }
.sp-helpmenu__words { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sp-helpmenu__words strong { font: 700 17px/1.2 Inter, system-ui, sans-serif; }
.sp-helpmenu__words span { font-size: 15px; line-height: 1.35; color: #4b5563; }
.sp-helpmenu__go { flex: none; font: 700 26px/1 Inter, system-ui, sans-serif; color: #1f2937; }
.sp-helpmenu__note { margin: 6px 14px 4px; font-size: 14px; line-height: 1.4; color: #6b7280; }
.sp-option { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #f7f6f2; cursor: pointer; }
.sp-option input { flex: none; width: 26px; height: 26px; margin: 2px 0 0; accent-color: #2f5d45; }
.sp-option strong { font-size: 18px; }
.sp-option__note { font-size: 15px; line-height: 1.45; color: #4b5563; }
.sp-stats__month { font-size: 18px; }
.sp-stats__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 12px; }
.sp-stats__card { padding: 12px 16px; border-radius: 12px; background: #f7f6f2; }
.sp-stats__card h3 { margin: 0 0 6px; font: 700 19px/1.2 Georgia, 'Times New Roman', serif; }
.sp-stats__card ul { margin: 0; padding: 0; list-style: none; }
.sp-stats__card li { margin: 0 0 4px; font-size: 17px; line-height: 1.45; }
.sp-printframe { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }
/* Larger and more contrast (the settings): the frame's own parts here; a game adds its own. */
.sp--large { font-size: 1.12em; }
.sp--large .sp-say { font-size: 21px; }
.sp--contrast .sp-button--quiet, .sp--contrast .sp-help__button, .sp--contrast .sp-series__item, .sp--contrast .sp-series__day { border-color: #1f2937; color: #111; }
.sp--contrast .sp-say, .sp--contrast .sp-series__state { color: #000; }
@media (max-width: 560px) {
  .sp-helpmenu { right: auto; left: 0; }
}
/* A help item's words where they are seen: at the bottom of the screen when the line under the board is out of view. */
.sp-helpnote { position: fixed; z-index: 40; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: flex-start; gap: 10px; width: min(560px, calc(100vw - 24px)); padding: 14px 16px; border-radius: 16px; background: #1f3d2e; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); animation: sp-pop .25s ease-out; }
.sp-helpnote p { flex: 1; margin: 0; font-size: 18px; line-height: 1.45; }
.sp-helpnote__close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 16px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .sp-helpnote { animation: none; } }
/* Sharing a result: plain, recognisable buttons. */
.sp-done__share { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid #e7e4dd; }
/* The share buttons (core/share.js): the three most used large, in their brand's colour (darker where white
   letters need it), the others smaller, white with the brand's logo in colour; every one names its app. */
.sp-share-panel__title { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #1f2937; }
.sp-share-panel__big { display: flex; flex-wrap: wrap; gap: 8px; }
/* The large ones side by side while they fit, else on the next row; one alone there takes the whole width. */
.sp-share-panel__big .sp-share { flex: 1 1 130px; }
.sp-share-panel__small { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sp-share-panel__small .sp-share { flex: 1 1 120px; }
.sp-share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 10px; border: 0; border-radius: 999px; font: 700 16px/1.1 Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.sp-share__icon { flex: none; width: 22px; height: 22px; fill: currentColor; }
a.sp-share, a.sp-share:visited { color: #fff; }
.sp-share--whatsapp { background: #1a7f43; }
.sp-share--facebook { background: #0a5ad4; }
.sp-share--mail { background: #4b5563; }
.sp-share-panel__small .sp-share { min-height: 42px; justify-content: flex-start; padding: 0 12px; background: #fff; border: 1.5px solid #d6d2c8; font-size: 15px; font-weight: 600; }
.sp-share-panel__small a.sp-share, .sp-share-panel__small a.sp-share:visited, .sp-share-panel__small .sp-share { color: #1f2937; }
.sp-share-panel__small .sp-share__icon { width: 20px; height: 20px; }
.sp-share--messenger .sp-share__icon { fill: #0866ff; }
.sp-share--sms .sp-share__icon, .sp-share--more .sp-share__icon { fill: #2f5d45; }
.sp-share--x .sp-share__icon, .sp-share--threads .sp-share__icon { fill: #000; }
.sp-share--pinterest .sp-share__icon { fill: #bd081c; }
.sp-share--linkedin .sp-share__icon { fill: #0a66c2; }
.sp-share--telegram .sp-share__icon { fill: #1b7fb5; }
.sp-share-panel__small .sp-share:hover { border-color: #2f5d45; }
.sp-share:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
/* On a phone the card gives the share buttons the room of its own margins. */
@media (max-width: 420px) {
  .sp-done { padding: 8px; }
  .sp-done__card { padding: 22px 14px; }
  .sp-share-panel__small .sp-share { padding: 0 10px; font-size: 14px; gap: 6px; }
}
/* On a phone the row about the game becomes compact tiles, three to a row. */
@media (max-width: 560px) {
  .sp-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .sp-help__button { flex-direction: column; justify-content: center; gap: 4px; min-height: 60px; padding: 6px 4px; border-radius: 14px; font-size: 14px; line-height: 1.15; text-align: center; }
}
/* The Quizzen page's boards and the link to it from the overview. */
.gm-group__more { margin: 14px 0 0; font-weight: 700; font-size: 17px; }
.gm-boards__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 12px 0; }
.gm-board { padding: 16px 18px; border: 1.5px solid #e2dfd6; border-radius: 14px; background: #fff; }
.gm-board h3 { margin: 0 0 8px; font-size: 17px; }
.gm-board ol { margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.6; }
.gm-board__place { display: inline-block; min-width: 2.2em; color: #6b7280; }
.gm-board__none { margin: 0; color: #6b7280; }
.gm-more { font-weight: 700; font-size: 17px; }

/* Anything that folds open shows it: an arrow on the right that turns when it opens. */
.sp details > summary, .gm details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; }
.sp details > summary::-webkit-details-marker, .gm details > summary::-webkit-details-marker { display: none; }
.sp details > summary::after, .gm details > summary::after { content: ''; flex: none; width: 9px; height: 9px; margin: 0 6px 5px 0; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.sp details[open] > summary::after, .gm details[open] > summary::after { margin-bottom: -4px; transform: rotate(-135deg); }

/* No word left alone on the last line of a text. */
.sp p, .sp li, .sp label, .gm p, .gm li { text-wrap: pretty; }
.sp h2, .sp h3, .gm h1, .gm h2, .gm h3 { text-wrap: balance; }
/* Under a finished board looked at again: what comes next, and the result back. */
.sp-after { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 0; }
.sp-after[hidden] { display: none; }
.sp-after .sp-button { flex: 0 1 240px; min-height: 48px; }