/* Board catalogue cards follow the main catalogue while retaining light mode. */
.board-page { background:radial-gradient(ellipse at 50% 0,#12272b55,transparent 65%),#090f15; }
.board-page .games-grid { gap:18px; }
.board-page .game-card { border-color:#32414a; background:linear-gradient(150deg,#14212b,#0e1820); box-shadow:0 12px 28px #0002; }
.board-page .game-card:hover { border-color:#72b5a6; }
.board-page .game-card--locked,.board-page .game-card--locked:hover { border-color:#3a4650; background:#151f28; }
.board-page .game-media { isolation:isolate; }
.board-page .game-cover-link { display:block; }
.board-page .game-cover-link:focus-visible { outline-offset:-4px; }
.board-media-badges { position:absolute; inset:12px 12px auto; z-index:6; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; pointer-events:none; }
.board-media-badges .status { min-height:34px; margin:0; padding:6px 10px; border:1px solid #68cfb288; border-radius:9px; background:#123d35ed; color:#b4ffe8; box-shadow:0 3px 12px #0004; font-size:12px; backdrop-filter:blur(10px); }
.board-media-badges .status-dot { width:8px; height:8px; background:#6de8bd; box-shadow:0 0 10px #6de8bd55; }
.board-media-badges--experimental .status { color:#ffe3ff; border-color:#d79fdf99; background:#492749ed; }
.board-play-link { display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; border:1px solid #d6eeff26; border-radius:10px; background:#08131ee8; color:#edf6ff; box-shadow:0 3px 12px #0003; pointer-events:auto; }
.board-play-link:hover { background:#23414d; border-color:#b5dfda; }
.board-play-link svg { width:23px; height:23px; }
.board-page .game-copy { padding:16px 18px 18px; }
.board-page h2 { font-size:24px; }
.board-page .game-description { margin:8px 0 16px; color:var(--muted); font-size:13px; line-height:1.65; word-break:keep-all; overflow-wrap:anywhere; }
.board-game-info { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; min-height:32px; }
.board-game-info > span:not(.game-stats) { color:var(--muted); font-size:13px; }
.board-page .game-stats { flex-wrap:wrap; gap:14px; }
.board-page .player-count,.board-page .play-duration { gap:6px; font-size:13px; }
.board-page .player-icon,.board-page .clock-icon { width:18px; height:18px; }
.board-page .card-meta { margin:12px 0 0; }
.board-date { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.board-page .reactions { margin:0; width:100%; }
.board-page .reaction-options { justify-content:flex-start; gap:10px; }
.board-page .reaction { flex-direction:row; gap:8px; min-width:68px; padding:9px 12px; border:1px solid #67cfb12b; border-radius:12px; background:#23534626; }
.board-page .reaction[data-reaction="not-sure"] { border-color:#e3bd5f29; background:#6b542317; }
.board-page .reaction[data-reaction="not-for-me"] { border-color:#e6929225; background:#673e3917; }
.board-page .reaction:hover:not(:disabled) { background:#2d4e50; }
.board-page .reaction[aria-pressed="true"] { border-color:#79e1c5; background:#235b4c; box-shadow:0 0 0 1px #79e1c526; }
.board-page .reaction-count { font-size:14px; }
.board-page .reaction-emoji { font-size:20px; }
.board-page .has-error .reaction-feedback { position:static; width:auto; margin-top:10px; box-shadow:none; }
.board-page .game-actions { margin:12px 0 0; padding:0; }
.board-page .button--locked { font-size:13px; border-radius:10px; }
.board-page .game-card--locked .cover-lock { background:#09131c33; }
@media (min-width:1001px) {
  .board-page .games-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .board-page .game-copy { padding:12px 14px 14px; }
  .board-page h2 { font-size:20px; }
  .board-media-badges { inset:8px 8px auto; }
  .board-media-badges .status { font-size:11px; padding:5px 7px; }
  .board-page .reaction-options { gap:6px; }
  .board-page .reaction { flex:1; min-width:0; gap:4px; padding:8px 5px; }
  .board-page .reaction-emoji { font-size:18px; }
  .board-page .reaction-count { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
}
@media (max-width:1000px) { .board-page .games-grid { gap:20px; } }
@media (max-width:680px) {
  .board-page .games-grid { gap:18px; }
  .board-page .game-copy { padding:14px; }
  .board-page h2 { font-size:21px; }
  .board-media-badges { inset:8px 8px auto; }
  .board-media-badges .status { font-size:11px; padding:5px 7px; }
  .board-page .reaction-options { gap:7px; }
  .board-page .reaction { flex:1; min-width:0; gap:5px; padding:8px; }
}
@media (max-width:540px) { .board-page .game-copy { padding:16px 18px 18px; } .board-page .reaction { flex:0 1 auto; min-width:70px; } }
@media (prefers-color-scheme:light) {
  .board-page { background:#f2f0e6; }
  .board-page .game-card { background:linear-gradient(145deg,#fffdf6,#ebece0); border-color:#becbb9; box-shadow:0 12px 28px #213b3208; }
  .board-page .game-card:hover { border-color:#819b85; }
  .board-page .game-card--locked,.board-page .game-card--locked:hover { background:#e8eae4; border-color:#c1c8be; }
  .board-page .reaction { border-color:#26735d33; background:#26735d0a; }
  .board-page .reaction[data-reaction="not-sure"] { border-color:#a77b2133; background:#a77b210a; }
  .board-page .reaction[data-reaction="not-for-me"] { border-color:#a8585833; background:#a858580a; }
  .board-page .reaction:hover:not(:disabled) { background:#e3ece2; }
  .board-page .reaction[aria-pressed="true"] { border-color:#26735d; background:#d4ebdf; color:#174e3d; }
}