/* card table: felt-green accents and the clip grid. Everything else lives in /app.css. */
:root { --a1: #0f6b4f; --a2: #2fae7c; }
.doc .toggle { margin: 4px clamp(20px, 4vw, 38px) 8px; }
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; margin-top: 18px; padding: 0 !important; list-style: none; }
.games li { margin: 0; display: flex; flex-direction: column; }
.games video { display: block; width: 100%; aspect-ratio: 480 / 744; object-fit: cover; background: #0f0824; border: 3px solid #fff4dc; border-radius: 14px; box-shadow: 5px 5px 0 rgba(0,0,0,.45); }
.doc .games h2 { margin: 14px 0 6px; font-size: 12px; line-height: 1.35; }
.doc .games h2::before { width: 14px; margin-right: 8px; }
.doc .games p { margin: 0; font-size: 14.5px; }
@media (max-width: 480px) { .games { grid-template-columns: 1fr 1fr; gap: 16px; } .doc .games p { font-size: 13.5px; } }
/* the one game you can play now: a wide board picture beside its text, stacked on narrow screens */
.play { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 22px; align-items: center; margin-top: 18px; margin-bottom: 8px; }
.play img { display: block; width: 100%; height: auto; border: 3px solid #fff4dc; border-radius: 14px; box-shadow: 5px 5px 0 rgba(0,0,0,.45); background: #0f0824; }
.play-body p:last-child { margin-bottom: 0; }
@media (max-width: 700px) { .play { grid-template-columns: 1fr; } }