/* bespoke-spellenplank-home-v2:start */
.gameboard-home {
  --board-navy: #07192f;
  --board-ink: #132334;
  --board-paper: #f7f5ed;
  --board-mint: #64e6bd;
  --board-coral: #ff6b5f;
  --board-yellow: #ffd166;
  --board-blue: #b8d8f0;
  background:
    linear-gradient(rgba(7,25,47,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,25,47,.035) 1px, transparent 1px),
    var(--board-paper);
  background-size: 24px 24px;
}
.gameboard-home main { overflow: hidden; }
.gameboard-home .masthead { border-bottom-color: var(--board-yellow); }
.gameboard-home .nav a { position: relative; }
.gameboard-home .nav a::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: var(--board-mint); transform: rotate(45deg); }
.board-kicker { margin: 0 0 8px; color: var(--board-coral); font-size: .76rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: .08em; }
.board-intro { width: min(calc(100% - 40px), 1180px); margin: 0 auto; padding: clamp(46px, 7vw, 86px) 0 44px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr); gap: clamp(36px, 7vw, 92px); align-items: end; }
.board-intro__copy h1 { max-width: 13ch; margin: 0 0 20px; color: var(--board-navy); font-size: clamp(2.45rem, 5vw, 4.8rem); line-height: .98; letter-spacing: 0; }
.board-intro__copy > p:last-child { max-width: 650px; margin: 0; color: #526474; font-size: 1.12rem; }
.board-chooser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 3px solid var(--board-navy); background: var(--board-navy); gap: 3px; box-shadow: 10px 10px 0 var(--board-yellow); }
.board-chooser__space { min-width: 0; min-height: 190px; padding: 18px 14px; display: flex; flex-direction: column; color: var(--board-navy); text-decoration: none; transition: transform .18s ease; }
.board-chooser__space:hover, .board-chooser__space:focus-visible { transform: translateY(-5px); }
.board-chooser__space--mint { background: var(--board-mint); }
.board-chooser__space--coral { background: var(--board-coral); }
.board-chooser__space--yellow { background: var(--board-yellow); }
.board-chooser__space > span { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-size: .75rem; font-weight: 700; }
.board-chooser__space strong { margin-top: auto; font-size: 1rem; line-height: 1.08; }
.board-chooser__space small { margin-top: 8px; font-weight: 700; }
.start-space { width: min(calc(100% - 40px), 1180px); margin: 0 auto 74px; position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); background: var(--board-navy); color: white; border: 3px solid var(--board-navy); box-shadow: 14px 14px 0 var(--board-mint); }
.start-space__media { display: block; min-height: 410px; overflow: hidden; background: #132c46; }
.start-space__media img { width: 100%; height: 100%; min-height: 410px; max-height: 520px; object-fit: cover; }
.start-space__media--type { position: relative; display: grid; place-items: center; color: var(--board-navy); background: linear-gradient(135deg, var(--board-mint) 0 50%, var(--board-yellow) 50%); }
.start-space__media--type::before { content: ""; position: absolute; inset: 28px; border: 4px solid currentColor; }
.start-space__media--type > span { position: relative; z-index: 1; padding: 18px 26px; border: 4px solid currentColor; background: var(--board-paper); font-size: clamp(3.2rem, 8vw, 7.4rem); font-weight: 700; line-height: .85; transform: rotate(-5deg); box-shadow: 10px 10px 0 var(--board-coral); }
.start-space__media--type i { position: absolute; width: 52px; height: 52px; border: 4px solid currentColor; border-radius: 50%; background: var(--board-coral); }
.start-space__media--type i:nth-of-type(1) { left: 9%; top: 12%; }.start-space__media--type i:nth-of-type(2) { right: 11%; bottom: 14%; width: 34px; height: 34px; background: var(--board-blue); }.start-space__media--type i:nth-of-type(3) { right: 15%; top: 14%; width: 22px; height: 22px; background: white; }
.start-space__copy { min-width: 0; padding: clamp(28px, 4vw, 54px); display: flex; flex-direction: column; justify-content: center; }
.start-space__copy .board-kicker { color: var(--board-yellow); }
.start-space__copy h2 { margin: 0 0 18px; font-size: clamp(2rem, 3.4vw, 3.35rem); line-height: 1.02; }
.start-space__copy h2 a { text-decoration: none; }
.start-space__copy > p:not(.board-kicker) { margin: 0 0 24px; color: #d6e2e9; }
.start-space__button { align-self: flex-start; display: inline-flex; gap: 10px; padding: 11px 14px; background: var(--board-yellow); color: var(--board-navy); font-weight: 700; text-decoration: none; border: 2px solid var(--board-yellow); }
.start-space__button:hover, .start-space__button:focus-visible { background: transparent; color: white; }
.start-space__token { position: absolute; right: -22px; top: -28px; width: 68px; height: 68px; display: grid; place-items: center; border: 4px solid var(--board-navy); border-radius: 50%; background: var(--board-coral); transform: rotate(13deg); }
.start-space__token span { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--board-navy); }
.start-space__token span:nth-child(1) { transform: translate(-13px,-11px); }.start-space__token span:nth-child(3) { transform: translate(13px,11px); }
.route-board { padding: 18px 0 80px; background: #fff; border-top: 1px solid #c5d0cc; }
.play-route { width: min(calc(100% - 40px), 1180px); margin: 0 auto; padding: 58px 0 68px; border-bottom: 4px solid var(--board-navy); }
.play-route:last-child { border-bottom: 0; padding-bottom: 12px; }
.play-route__head { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 22px; align-items: end; margin-bottom: 28px; }
.play-route__number { width: 64px; height: 64px; display: grid; place-items: center; border: 3px solid var(--board-navy); color: var(--board-navy); font-size: 1.25rem; font-weight: 700; transform: rotate(-4deg); }
.play-route--mint .play-route__number { background: var(--board-mint); }
.play-route--coral .play-route__number { background: var(--board-coral); }
.play-route--yellow .play-route__number { background: var(--board-yellow); }
.play-route__head h2 { margin: 0 0 7px; color: var(--board-navy); font-size: clamp(2rem, 3.8vw, 3.55rem); line-height: 1; }
.play-route__head div > p:last-child { max-width: 690px; margin: 0; color: #586a78; }
.play-route__head > a { padding-bottom: 7px; color: var(--board-navy); font-size: .84rem; font-weight: 700; white-space: nowrap; }
.play-route__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.route-card { grid-column: span 4; min-width: 0; display: grid; grid-template-rows: 210px 1fr; border: 2px solid var(--board-navy); background: white; box-shadow: 6px 6px 0 #dce5e1; }
.route-card--wide { grid-column: span 8; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); grid-template-rows: minmax(310px, auto); }
.route-card--compact { grid-column: span 4; grid-template-rows: 142px 1fr; }
.route-card__media { display: block; min-width: 0; overflow: hidden; background: #dce7e3; text-decoration: none; }
.route-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }
.route-card:hover .route-card__media img { transform: scale(1.025); }
.route-card__media--type { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--board-blue); color: var(--board-navy); }
.route-card__media--type > span { position: relative; z-index: 1; font-size: clamp(1.8rem, 4vw, 3.6rem); font-weight: 700; line-height: 1; transform: rotate(-5deg); }
.route-card__media--type i { position: absolute; width: 46px; height: 46px; border: 3px solid currentColor; border-radius: 50%; }
.route-card__media--type i:nth-of-type(1) { left: 12%; top: 15%; }.route-card__media--type i:nth-of-type(2) { right: 12%; bottom: 12%; width: 28px; height: 28px; }.route-card__media--type i:nth-of-type(3) { left: 47%; bottom: -23px; width: 70px; height: 70px; }
.route-card__copy { min-width: 0; padding: 20px; display: flex; flex-direction: column; }
.route-card__meta { margin: 0 0 8px !important; color: var(--board-coral) !important; font-size: .72rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; }
.route-card h3 { margin: 0 0 10px; color: var(--board-navy); font-size: 1.42rem; line-height: 1.08; }
.route-card--wide h3 { font-size: clamp(1.75rem, 3vw, 2.55rem); }
.route-card h3 a { text-decoration: none; }
.route-card h3 a:hover, .route-card h3 a:focus-visible { text-decoration: underline; }
.route-card__copy > p:not(.route-card__meta) { margin: 0 0 18px; color: #586a78; }
.route-card__read { margin-top: auto; color: var(--board-navy); font-size: .84rem; font-weight: 700; }
.route-card__read b { color: var(--board-coral); font-size: 1.1rem; }
@media (max-width: 920px) {
  .board-intro { grid-template-columns: 1fr; gap: 32px; }
  .board-intro__copy h1 { max-width: 15ch; }
  .start-space { grid-template-columns: 1fr; }
  .start-space__media, .start-space__media img { min-height: 320px; max-height: 430px; }
  .route-card, .route-card--compact { grid-column: span 6; }
  .route-card--wide { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .gameboard-home .topline .inner span:last-child { display: none; }
  .gameboard-home .masthead-main { align-items: center; }
  .gameboard-home .nav ul { justify-content: flex-start; }
  .board-intro { width: min(calc(100% - 28px), 1180px); padding-top: 38px; }
  .board-intro__copy h1 { font-size: 2.55rem; }
  .board-chooser { grid-template-columns: 1fr; box-shadow: 7px 7px 0 var(--board-yellow); }
  .board-chooser__space { min-height: 0; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 11px; }
  .board-chooser__space strong, .board-chooser__space small { margin: 0; }
  .start-space { width: min(calc(100% - 28px), 1180px); margin-bottom: 52px; box-shadow: 8px 8px 0 var(--board-mint); }
  .start-space__media, .start-space__media img { min-height: 250px; max-height: 320px; }
  .start-space__token { right: 4px; width: 56px; height: 56px; }
  .play-route { width: min(calc(100% - 28px), 1180px); padding: 42px 0 48px; }
  .play-route__head { grid-template-columns: 58px 1fr; gap: 14px; align-items: start; }
  .play-route__number { width: 52px; height: 52px; }
  .play-route__head > a { grid-column: 2; white-space: normal; }
  .play-route__grid { grid-template-columns: 1fr; gap: 16px; }
  .route-card, .route-card--wide, .route-card--compact { grid-column: 1; grid-template-columns: 1fr; grid-template-rows: 205px auto; }
  .route-card--wide h3 { font-size: 1.55rem; }
}
@media (max-width: 420px) {
  .board-chooser__space { grid-template-columns: 36px 1fr; }
  .board-chooser__space small { grid-column: 2; }
  .start-space__copy { padding: 24px 20px 28px; }
  .start-space__copy h2 { font-size: 1.9rem; }
  .play-route__head h2 { font-size: 1.9rem; }
}
/* bespoke-spellenplank-home-v2:end */